:root{
  --night:#0D1B2A; --primary:#1B4965; --mid:#2F6F93; --page:#E6F3FF;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; background:var(--page); color:#0f172a}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1120px; margin:0 auto; padding:0 1rem}
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.6); border-bottom:1px solid #e2e8f0}
nav a{margin-left:1.25rem; color:#334155}
nav a:hover{color:#0f172a}
.hero{background: linear-gradient(to bottom, #BFE3FF, #E6F3FF)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center; padding:6rem 0}
@media(min-width:768px){.hero-grid{grid-template-columns:1fr 1fr}}
.cta{display:inline-block; padding:.9rem 1.25rem; border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-primary{background:var(--primary); color:#fff}
.btn-outline{border:1px solid #cbd5e1; color:#0f172a; background:#fff0}
.btn-outline:hover{background:#fff}
.mock{height:18rem; border-radius:1.5rem; background:rgba(47,111,147,.2); border:1px solid rgba(47,111,147,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.08); display:grid; place-items:center}
.section{padding:5rem 0}
.section h2{text-align:center; font-size:2rem; color:var(--primary)}
.grid{display:grid; gap:1.5rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:#E6F3FF; border:1px solid rgba(27,73,101,.1); border-radius:1.5rem; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex; flex-direction:column}
.card .imgwrap{aspect-ratio:3/4; background:#fff; overflow:hidden}
.card h3{padding:1rem; font-size:1rem; font-weight:600; color:#0f172a}
.bio{background:#E6F3FF}
.bio p{max-width:70ch; margin:1.5rem auto 0; line-height:1.9; text-align:justify; padding:0 1rem; color:#1f2937}
.contact .box{border:1px solid #e5e7eb; border-radius:1.5rem; padding:1.25rem}
footer{background:#0D1B2A; color:#fff}
footer .inner{display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:space-between; padding:2.5rem 0}
@media(min-width:768px){footer .inner{flex-direction:row}}