/* =============================================================================
   Nyman Labs — "Nocturne" design system
   Single source of truth for the company site. Dark, luxe, Apple-inspired:
   generous space, precise type, gold used sparingly. See CLAUDE.md.
   ---------------------------------------------------------------------------
   FONT NOTE: Display = Optima, Body = Avenir Next / SF. These render natively
   on Apple devices. For consistent rendering on Android/Windows, self-host an
   open humanist face (see /assets/fonts/README) and wire the @font-face block
   below. Until then the stack degrades gracefully to system-ui.
   ========================================================================== */

/* @font-face {                         <- enable when self-hosted fonts are added
  font-family:"NL Display"; font-weight:400; font-display:swap;
  src:url("/assets/fonts/display.woff2") format("woff2");
} */

:root{
  --bg:#0B0C10; --bg-2:#101219; --surface:#161922; --surface-2:#1B1F2A;
  --text:#F2F3F6; --text-2:#A2A4AF; --muted:#6E7079;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --gold:#C9A24B; --gold-2:#E7CB84;
  --teal:#4FB7B4; --amber:#E1A85A;                 /* product accents (2Veo) */
  --maxw:78rem; --maxw-doc:46rem;
  --step:clamp(88px,12vw,150px);
  --disp:"Optima","Optima Nova","Avenir Next",ui-rounded,system-ui,sans-serif;
  --sans:"Avenir Next","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,60px);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.kicker{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600;}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:30;background:rgba(11,12,16,.66);
  backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;gap:26px;min-height:72px;}
.brand{font-family:var(--disp);font-size:1.32rem;letter-spacing:.03em;white-space:nowrap;}
.brand span{color:var(--gold);}
.navmenu{margin-left:auto;display:flex;align-items:center;gap:28px;}
.nav nav{display:flex;gap:30px;flex-wrap:wrap;}
.navtoggle{display:none;}
.nav nav a{font-size:.83rem;letter-spacing:.04em;color:var(--text-2);transition:color .2s;}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--text);}
.nav .cta{border:1px solid var(--line-2);border-radius:999px;padding:8px 18px;color:var(--text);font-size:.82rem;}
.nav .cta:hover{border-color:var(--gold);color:var(--gold-2);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;letter-spacing:.01em;
  padding:15px 30px;border-radius:999px;
  transition:transform .2s,filter .2s,border-color .2s,color .2s,background .2s;}
.btn.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#231a06;font-weight:600;
  box-shadow:0 14px 34px -14px rgba(201,162,75,.6);}
.btn.gold:hover{filter:brightness(1.05);transform:translateY(-2px);}
.btn.ghost{border:1px solid var(--line-2);color:var(--text);}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-2);}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:clamp(96px,17vw,208px) 0 clamp(80px,12vw,148px);text-align:center;}
.hero::before{content:"";position:absolute;left:50%;top:-14%;width:min(1100px,120%);height:640px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,162,75,.15),rgba(201,162,75,.04) 55%,transparent 72%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 120%,rgba(79,183,180,.06),transparent 60%);}
.hero .wrap{position:relative;}
.hero .kicker{display:block;margin:0 0 30px;animation:rise .8s .05s both;}
.hero h1{font-family:var(--disp);font-weight:400;
  font-size:clamp(3rem,8.5vw,7rem);line-height:1.0;letter-spacing:-.015em;margin:0 auto;
  max-width:16ch;text-wrap:balance;animation:rise .8s .12s both;}
.hero h1 b{font-weight:400;color:var(--gold-2);}
.hero .sub{margin:34px auto 0;max-width:52ch;font-size:1.28rem;color:var(--text-2);animation:rise .8s .2s both;}
.hero .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px;animation:rise .8s .28s both;}
/* compact hero for interior pages */
.hero.sub-page{padding:clamp(80px,12vw,140px) 0 clamp(40px,6vw,64px);text-align:left;}
.hero.sub-page h1{margin:0;max-width:20ch;}
.hero.sub-page .sub{margin:26px 0 0;}

/* ---- statement ---- */
.statement{padding:var(--step) 0;text-align:center;border-top:1px solid var(--line);}
.statement p{font-family:var(--disp);font-weight:400;font-size:clamp(1.7rem,4.4vw,3.1rem);
  line-height:1.28;letter-spacing:-.01em;margin:0 auto;max-width:22ch;text-wrap:balance;color:var(--text);}
.statement em{font-style:normal;color:var(--gold-2);}

/* ---- generic section ---- */
section.blk{padding:var(--step) 0;border-top:1px solid var(--line);}
.sec-head{margin-bottom:56px;max-width:44ch;}
.sec-head h2{font-family:var(--disp);font-weight:400;font-size:clamp(2rem,4.5vw,3.1rem);
  margin:.6rem 0 0;letter-spacing:-.015em;}
.sec-head p{margin:14px 0 0;color:var(--text-2);font-size:1.1rem;}

/* ---- capabilities ---- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.cap{padding:6px 4px;border-top:1px solid var(--line-2);}
.cap .n{font-family:var(--disp);font-size:1.05rem;color:var(--gold);padding-top:20px;display:block;}
.cap h3{font-size:1.3rem;margin:16px 0 10px;font-weight:600;}
.cap p{margin:0;color:var(--text-2);font-size:1.02rem;}

/* ---- product showcase ---- */
.showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.pcard{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));transition:transform .3s,border-color .3s;
  display:flex;flex-direction:column;min-height:420px;}
.pcard:hover{transform:translateY(-4px);border-color:var(--line-2);}
.pcard .canvas{display:block;height:210px;position:relative;overflow:hidden;}
.pcard.edu .canvas{background:
  radial-gradient(120% 130% at 78% 12%,rgba(79,183,180,.5),transparent 55%),
  linear-gradient(160deg,#12303a,#0d1622);}
.pcard.trk .canvas{background:
  radial-gradient(120% 130% at 78% 12%,rgba(225,168,90,.45),transparent 55%),
  linear-gradient(160deg,#2c2417,#0f1119);}
.pcard .tile{position:absolute;left:34px;bottom:-30px;width:150px;height:190px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.7);}
.pcard .tile::before{content:"";position:absolute;inset:16px 16px auto 16px;height:8px;border-radius:4px;
  background:rgba(255,255,255,.3);}
.pcard .tile::after{content:"";position:absolute;inset:34px 16px auto 16px;height:6px;border-radius:3px;
  background:rgba(255,255,255,.16);box-shadow:0 16px 0 rgba(255,255,255,.16),0 32px 0 rgba(255,255,255,.1);}
.pcard .iris{position:absolute;right:30px;top:34px;width:70px;height:70px;}
.pcard.edu .iris{color:var(--teal);} .pcard.trk .iris{color:var(--amber);}
.pcard .body{padding:34px 32px 30px;display:flex;flex-direction:column;flex:1;}
.pcard .plat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.pcard h3{font-family:var(--disp);font-weight:400;font-size:1.85rem;margin:10px 0 8px;}
.pcard p{margin:0 0 22px;color:var(--text-2);font-size:1.02rem;flex:1;}
.pcard .link{font-size:.9rem;color:var(--gold-2);}
.pcard.edu:hover .link{color:var(--teal);} .pcard.trk:hover .link{color:var(--amber);}
/* card actions: explore link + App Store button */
.pactions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.appstore{display:inline-flex;align-items:center;transition:transform .2s,filter .2s;}
.appstore img,.appstore svg{height:28px;width:auto;display:block;}
/* Title row: product name with its badge aligned alongside it. On narrow cards the
   badge wraps onto its own line beneath the title with even spacing above and below.
   Spacing is owned by the row (margin + gap) so the h3's own margins don't double up. */
.pcard .titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px 14px;flex-wrap:wrap;margin:12px 0;}
.pcard .titlerow h3{margin:0;}
.pcard .titlerow .appstore img{border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.4);}
.appstore:hover{transform:translateY(-1px);filter:brightness(1.08);}
.appstore.soon{background:transparent;border:1px solid var(--line-2);color:var(--muted);
  border-radius:7px;padding:6px 11px;font-size:.78rem;cursor:default;}
.appstore.soon:hover{transform:none;filter:none;}
/* "coming soon" badge over a product canvas */
.pcard .badge{line-height:1;background:rgba(8,9,13,.85);border:1px solid var(--line-2);
  color:var(--gold-2);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;padding:7px 13px;border-radius:999px;white-space:nowrap;}
.soon{margin-top:26px;border:1px dashed var(--line-2);border-radius:16px;padding:22px 28px;
  display:flex;align-items:center;gap:18px;color:var(--text-2);flex-wrap:wrap;}
.soon b{font-family:var(--disp);font-weight:400;color:var(--text);font-size:1.15rem;}
.soon .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);flex:0 0 auto;}

/* ---- pricing ---- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.tier{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);border-radius:20px;padding:36px 32px;display:flex;flex-direction:column;}
.tier.feature{border-color:rgba(201,162,75,.5);
  box-shadow:0 0 0 1px rgba(201,162,75,.22),0 40px 80px -40px rgba(201,162,75,.35);}
.tier .lbl{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.tier h3{font-family:var(--disp);font-weight:400;font-size:1.7rem;margin:8px 0 4px;}
.tier .amt{font-size:1.06rem;color:var(--gold-2);margin-bottom:22px;font-weight:600;font-variant-numeric:tabular-nums;}
.tier p{margin:0 0 26px;color:var(--text-2);font-size:1rem;flex:1;}
.tier ul{margin:0 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.tier li{color:var(--text-2);font-size:.96rem;padding-left:22px;position:relative;}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;
  background:var(--gold);opacity:.7;}
.tier .go{font-size:.9rem;color:var(--gold-2);margin-top:auto;}
.fineprint{margin-top:30px;color:var(--muted);font-size:.92rem;max-width:64ch;line-height:1.7;}

/* ---- contact ---- */
.contact{padding:var(--step) 0;text-align:center;border-top:1px solid var(--line);}
.contact .kicker{display:block;margin-bottom:26px;}
.contact .big{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,7vw,4.4rem);
  letter-spacing:-.015em;margin:0 auto;max-width:20ch;text-wrap:balance;}
.contact .big a{color:var(--gold-2);border-bottom:1px solid rgba(201,162,75,.45);}
.contact .big a:hover{border-color:var(--gold-2);}

/* ---- document / prose (About, legal, support) ---- */
main.doc{max-width:var(--maxw-doc);margin:0 auto;padding:clamp(56px,9vw,96px) clamp(22px,5vw,0) var(--step);}
main.doc h1{font-family:var(--disp);font-weight:400;font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-.015em;margin:0 0 .3em;text-wrap:balance;}
main.doc h2{font-family:var(--disp);font-weight:400;font-size:1.5rem;margin:2em 0 .5em;
  padding-top:1.3em;border-top:1px solid var(--line);}
main.doc h2:first-of-type{border-top:0;padding-top:0;}
main.doc p,main.doc li{color:var(--text-2);}
main.doc a{color:var(--gold-2);text-decoration-thickness:.06em;text-underline-offset:.15em;}
main.doc strong{color:var(--text);}
main.doc ul{padding-left:1.2em;} main.doc li{margin:.4em 0;}
.updated{display:inline-block;margin:.4em 0 1.6em;padding:5px 14px;border:1px solid var(--line);
  border-radius:999px;font-size:.82rem;color:var(--muted);}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:40px 0 66px;color:var(--muted);font-size:.83rem;}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
footer nav{display:flex;gap:22px;flex-wrap:wrap;}
footer nav a:hover{color:var(--text-2);}

/* ---- motion & responsive ---- */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (max-width:820px){
  .caps,.price{grid-template-columns:1fr;}
  .showcase{grid-template-columns:1fr;}
}
/* --- mobile header + sizing (mobile-first: header must never overflow) --- */
@media (max-width:640px){
  .brand{font-size:1.16rem;}
  /* hamburger button */
  .navtoggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:42px;height:42px;margin-left:auto;padding:0;background:transparent;
    border:1px solid var(--line-2);border-radius:10px;cursor:pointer;}
  .navtoggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;
    transition:transform .2s ease,opacity .2s ease;}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  /* dropdown panel */
  .navmenu{position:absolute;top:100%;left:0;right:0;margin:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px clamp(22px,5vw,60px) 22px;background:var(--bg-2);
    border-bottom:1px solid var(--line);box-shadow:0 26px 44px -26px rgba(0,0,0,.75);}
  .navmenu.open{display:flex;}
  .navmenu nav{flex-direction:column;gap:0;}
  .navmenu nav a{padding:15px 2px;font-size:1rem;border-top:1px solid var(--line);}
  .navmenu .cta{margin-top:16px;text-align:center;justify-content:center;padding:13px 18px;font-size:.94rem;}
  .hero .sub,.sec-head p{font-size:1.08rem;}
  .hero .acts{gap:10px;}
  .btn{padding:13px 24px;}
}
@media (max-width:380px){
  .hero h1{font-size:clamp(2.4rem,11vw,3rem);}
}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto;}}