:root{
  --ink:#0d1b2a; --soft:#46596b; --faint:#8496a4;
  --bg:#ffffff; --panel:#f7f5f1; --line:#e4e0d8; --sea:#12657f; --seasoft:#e8f2f6;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#eff5f8; --soft:#a9bdc9; --faint:#748b9b;
         --bg:#08131c; --panel:#0e1e2b; --line:#1c3143; --sea:#6cc0e0; --seasoft:#0f2b3a; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:400 17px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
.nav-in{max-width:1040px; margin:0 auto; padding:13px 28px; display:flex; gap:22px; align-items:center}
.nav a{color:var(--soft); text-decoration:none; font-size:14.5px; font-weight:500}
.nav a:hover{color:var(--sea)}
.nav a.brand{color:var(--ink); font-weight:600; margin-right:auto; letter-spacing:-0.01em}

/* hero */
.hero{position:relative; min-height:min(62vh,470px); display:flex; align-items:flex-end;
  background:#0a2740 url('hero-v2.jpg') center/cover no-repeat}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(4,22,38,.82) 0%, rgba(4,22,38,.56) 42%, rgba(4,22,38,.12) 78%, rgba(4,22,38,0) 100%)}
.hero-in{position:relative; z-index:1; width:100%; max-width:1040px; margin:0 auto; padding:0 28px 44px}
.hero h1{font-size:clamp(32px,6.4vw,52px); line-height:1.08; font-weight:600;
  letter-spacing:-0.025em; margin:0 0 8px; color:#fff}
.hero .role{margin:0; font-size:clamp(15px,2.6vw,20px); font-weight:500;
  letter-spacing:-0.01em; color:#bfe4f2}

.wrap{max-width:1040px; margin:0 auto; padding:52px 28px 0}
.lede{font-size:clamp(18px,2.6vw,22px); line-height:1.5; color:var(--ink);
  max-width:30ch; margin:0 0 42px; font-weight:500; letter-spacing:-0.013em}
p{margin:0 0 18px; color:var(--soft); max-width:58ch}
h2{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
  font-weight:600; margin:0 0 14px}
h3{font-size:clamp(21px,3.4vw,27px); line-height:1.2; letter-spacing:-0.02em;
  font-weight:600; margin:0 0 14px}
a.inline{color:var(--ink); border-bottom:1px solid var(--sea); text-decoration:none; font-weight:500}
a.inline:hover{color:var(--sea)}

/* feature band */
.band{margin:54px 0 0; padding:38px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel)}
.band-in{max-width:1040px; margin:0 auto; padding:0 28px}
.band .logo{height:44px; width:auto; margin-bottom:18px; opacity:.92}
@media (prefers-color-scheme: dark){ .band .logo{filter:invert(1) brightness(1.7)} }
.figure{margin:22px 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.figure img{width:100%; height:auto}
.cap{font-size:13px; color:var(--faint); margin:9px 2px 0; max-width:64ch}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin:26px 0 0}
.stat{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:15px 17px}
.stat b{display:block; font-size:24px; letter-spacing:-0.02em; line-height:1.1; margin-bottom:3px}
.stat span{font-size:12.5px; color:var(--faint); line-height:1.4; display:block}

.cols{display:grid; grid-template-columns:1fr; gap:34px; margin-top:46px}
@media(min-width:760px){ .cols{grid-template-columns:1.25fr 1fr; gap:56px} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; align-self:start}
.row{display:block; margin-bottom:13px}
.row:last-child{margin-bottom:0}
.row a, .row span.v{color:var(--ink); text-decoration:none; font-weight:500; word-break:break-word}
.row a{border-bottom:1px solid var(--sea); padding-bottom:1px}
.row a:hover{color:var(--sea)}
.k{display:block; font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin-bottom:2px; font-weight:600}

footer{margin-top:58px; border-top:1px solid var(--line); padding:24px 28px 36px;
  text-align:center; font-size:13px; color:var(--faint)}
footer em{font-style:italic}
.credit{display:block; margin-top:8px; font-size:11.5px; opacity:.75}
.credit a{color:inherit}