/* ---------- self-hosted fonts (latin subsets from Google Fonts) ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(../fonts/archivo-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
}

:root{
  --abyss:#04162E;
  --deep:#062247;
  --marine:#0E3A6E;
  --shelf:#16518F;
  --current:#52A650;
  --current-bright:#7BD178;
  --foam:#EAF3F6;
  --mist:rgba(234,243,246,.62);
  --hairline:rgba(234,243,246,.14);
  --maxw:1180px;
}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--abyss);
  color:var(--foam);
  font-family:'Archivo',sans-serif;
  font-variation-settings:"wdth" 100;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--current);color:var(--abyss)}

/* ---------- chart-coordinate motif ---------- */
.coord{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--current-bright);
}
.coord .lat{color:var(--mist)}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 2rem;
  transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled{background:rgba(4,22,46,.86);backdrop-filter:blur(12px);border-color:var(--hairline)}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--foam)}
.brand b{font-weight:800;letter-spacing:.04em;font-size:1.05rem}
.brand span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.28em;color:var(--current-bright)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--mist);text-decoration:none;font-size:.85rem;letter-spacing:.06em;transition:color .25s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--current-bright)}
.nav-links a:focus-visible{outline:2px solid var(--current);outline-offset:4px}

/* ---------- hero ---------- */
header{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
#current-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(4,22,46,.92) 0%,rgba(4,22,46,.25) 40%,rgba(4,22,46,.15) 100%);pointer-events:none}
.hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 2rem 9vh;
}
.hero-inner .coord{display:block;margin-bottom:1.4rem;opacity:0;animation:rise 1s .3s forwards}
h1{
  font-weight:800;
  font-variation-settings:"wdth" 118;
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  line-height:1.04;
  letter-spacing:-.015em;
  max-width:16ch;
  opacity:0;animation:rise 1s .5s forwards;
}
h1 em{font-style:normal;color:var(--current-bright)}
.hero-sub{
  margin-top:1.6rem;max-width:52ch;color:var(--mist);font-size:1.05rem;
  opacity:0;animation:rise 1s .7s forwards;
}
.hero-cta{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap;opacity:0;animation:rise 1s .9s forwards}
.btn{
  display:inline-block;padding:.85rem 1.7rem;border-radius:2px;
  font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:transform .25s,background .25s,color .25s;
}
.btn:focus-visible{outline:2px solid var(--current);outline-offset:3px}
.btn-solid{background:var(--current);color:var(--abyss);font-weight:700}
.btn-solid:hover{background:var(--current-bright);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--hairline);color:var(--foam)}
.btn-ghost:hover{border-color:var(--current-bright);color:var(--current-bright);transform:translateY(-2px)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.scroll-hint{
  position:absolute;right:2rem;bottom:9vh;z-index:2;
  writing-mode:vertical-rl;font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;letter-spacing:.3em;color:var(--mist);
}
.scroll-hint:after{
  content:'';display:block;width:1px;height:56px;margin:12px auto 0;
  background:linear-gradient(var(--current-bright),transparent);
  animation:drip 2.2s ease-in-out infinite;
}
@keyframes drip{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- sections ---------- */
section{position:relative;padding:7rem 2rem;max-width:var(--maxw);margin:0 auto}
section + section:before{
  content:'';position:absolute;top:0;left:2rem;right:2rem;height:1px;background:var(--hairline);
}
.sec-head{display:flex;align-items:baseline;gap:1.6rem;flex-wrap:wrap;margin-bottom:3rem}
h2{
  font-weight:800;font-variation-settings:"wdth" 114;
  font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.01em;line-height:1.1;
}
.lede{max-width:62ch;color:var(--mist);font-size:1.02rem}
.lede + .lede{margin-top:1.1rem}
.lede strong{color:var(--foam)}
.lede mark{background:none;color:var(--current-bright);font-weight:600}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:3rem}
.stat{background:var(--abyss);padding:2rem 1.6rem}
.stat .n{
  font-weight:800;font-variation-settings:"wdth" 120;
  font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--current-bright);line-height:1;
}
.stat .l{margin-top:.7rem;font-size:.85rem;color:var(--mist);letter-spacing:.03em}

/* model rows — depth soundings */
.soundings{margin-top:3rem;border-top:1px solid var(--hairline)}
.sounding{
  display:grid;grid-template-columns:110px 1fr 2fr;gap:1.6rem;align-items:baseline;
  padding:1.9rem 0;border-bottom:1px solid var(--hairline);
}
.sounding .coord{font-size:.68rem}
.sounding h3{font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.sounding p{color:var(--mist);font-size:.95rem}
.sounding p strong{color:var(--current-bright)}
@media(max-width:760px){.sounding{grid-template-columns:1fr;gap:.5rem}}

/* two-col */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media(max-width:860px){.twocol{grid-template-columns:1fr}}

/* contact */
.contact-band{
  background:linear-gradient(120deg,var(--deep) 60%,rgba(82,166,80,.22) 100%);
  border:1px solid var(--hairline);padding:3.5rem;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:2rem;
}
.contact-band h2{max-width:18ch}

footer{
  border-top:1px solid var(--hairline);
  padding:2.2rem 2rem;max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--mist);font-size:.8rem;
}
footer .coord{font-size:.62rem}

@media(max-width:720px){
  .nav-links{display:none}
  section{padding:4.5rem 1.4rem}
  .hero-inner{padding:0 1.4rem 12vh}
  .contact-band{padding:2rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  h1,.hero-sub,.hero-cta,.hero-inner .coord{opacity:1}
}