@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:optional;src:url('/fonts/SpaceGrotesk-var-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url('/fonts/JetBrainsMono-var-latin.woff2') format('woff2')}
/* Harbor light (default) + dark toggle. Motion only under prefers-reduced-motion: no-preference. */
:root{--bg:#F6F8FC;--surface:#FFFFFF;--raised:#EEF3FA;--border:#D9E1EC;--border-strong:#5E6B80;--text:#050910;--muted:#46516A;--accent:#050910;--accent-on:#FFFFFF;--link:#5A36D6;--nh-cyan:#5ef0ff;--nh-violet:#9f7bff;--grad:linear-gradient(135deg,#5ef0ff,#9f7bff);--m1:rgba(94,240,255,.22);--m2:rgba(159,123,255,.18);--m3:rgba(94,240,255,.12);--shadow:0 18px 50px -24px rgba(5,9,16,.35);--h-bg:#F6F8FC;--h-card:#FFFFFF;--h-line:#D9E1EC;--h-link:#5E6B80;--h-band:#050910;--h-band2:#5A36D6;--h-node:#5A36D6;--h-plane:#E9EEF7;--h-av:#EEF3FA;--h-avtext:#050910}
[data-theme=dark]{--bg:#050910;--surface:#0f1624;--raised:#131d30;--border:rgba(94,240,255,.15);--border-strong:rgba(94,240,255,.4);--text:#e8f0ff;--muted:#9ba6b8;--accent:#5ef0ff;--accent-on:#050910;--link:#5ef0ff;--m1:rgba(94,240,255,.10);--m2:rgba(159,123,255,.12);--m3:rgba(94,240,255,.06);--shadow:0 0 60px rgba(94,240,255,.08);--h-bg:#0b1220;--h-card:#0f1624;--h-line:rgba(94,240,255,.22);--h-link:#5b6b86;--h-band:#5ef0ff;--h-band2:#9f7bff;--h-node:#9f7bff;--h-plane:#111b2c;--h-av:#131d30;--h-avtext:#5ef0ff;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-wrap:anywhere;overflow-x:hidden}
a{color:var(--link)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--surface);padding:8px;z-index:50}
.nav{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;padding:12px 6vw;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px)}
.nav ul,.foot ul,.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.brand{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-decoration:none}
.brand .sub{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:14px}
.nav nav a{color:var(--muted);font-size:15px;font-weight:600;text-decoration:none;display:inline-block;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s,color .2s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--text);background-size:100% 2px}
.navcta{color:var(--link);font-weight:700}
.themetoggle{margin-left:auto;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer}
.themetoggle[aria-pressed=true]{background:var(--accent);color:var(--accent-on)}
.wrap{max-width:1080px;margin:0 auto;padding-left:6vw;padding-right:6vw}
@media (min-width:1200px){.wrap{padding-left:40px;padding-right:40px}}
.pagehead{padding-top:24px;padding-bottom:8px}
h1{font-size:clamp(36px,6vw,64px);line-height:1.04;margin:20px 0 14px;letter-spacing:-.03em;font-weight:800}
h2{font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:19px;margin:10px 0 6px}
.summary{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:40rem}
.eyebrow{display:inline-block;color:var(--link);font-weight:700;margin:24px 0 0;font-size:15px;letter-spacing:.02em}
.note{font-size:14px;color:var(--muted)}
.cta{display:inline-flex;align-items:center;min-height:46px;padding:12px 20px;border-radius:999px;font-weight:700;background:var(--accent);color:var(--accent-on);text-decoration:none;border:2px solid var(--accent);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cta.ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.more{font-weight:700}


.crumbs{font-size:14px;color:var(--muted)}.crumbs li+li::before{content:"/ ";margin-right:6px}
/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:28px 0 56px}
.hero-in{max-width:1180px;margin:0 auto;padding:0 6vw;display:grid;gap:28px;align-items:center}
@media (min-width:960px){.hero-in{grid-template-columns:1.05fr 1fr;padding:0 40px}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 10px}
.hero-art{border-radius:24px;overflow:hidden;background:#F7F9FC;border:1px solid var(--border);box-shadow:var(--shadow)}
.art{display:block;width:100%;height:auto}
.mesh{position:absolute;inset:-20% -10% auto;height:140%;z-index:-1;pointer-events:none}
.mesh i{position:absolute;border-radius:50%;filter:blur(60px);width:46vw;height:46vw;max-width:620px;max-height:620px}
.mesh i:nth-child(1){background:var(--m1);left:-8%;top:0}
.mesh i:nth-child(2){background:var(--m2);right:-6%;top:6%}
.mesh i:nth-child(3){background:var(--m3);left:30%;top:30%}
/* sections */
.flow{padding-bottom:40px}
.band{padding-top:56px;padding-bottom:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:8px 0 12px}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px 22px 14px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.icowrap{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--raised);color:var(--accent)}
.ico{width:32px;height:32px}
.item{margin:6px 0;padding-left:20px;position:relative}.item::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.showcase{display:grid;justify-items:center;padding-top:48px;text-align:center}
.device{width:min(280px,72vw);padding:10px;border-radius:38px;background:var(--surface);border:2px solid var(--border-strong);box-shadow:var(--shadow)}
.device video,.device img{display:block;width:100%;height:auto;border-radius:28px;aspect-ratio:9/16;object-fit:cover;background:var(--raised)}
.device img{aspect-ratio:280/482}
.caption{color:var(--muted);font-size:15px;max-width:30rem}
.tiers{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:4px 18px}
.price{font-size:26px;font-weight:800;margin:4px 0}
.foot{border-top:1px solid var(--border);padding:28px 6vw 40px;color:var(--muted);font-size:14px;background:var(--surface)}
.foot a{color:var(--link);display:inline-block;padding:4px 0}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.foot h2{font-size:15px;color:var(--text);margin:0 0 6px;letter-spacing:0}
.foot .cols ul{display:block}
.nh-cc-footer-link{background:none;border:0;color:var(--link);font:inherit;padding:4px 0;cursor:pointer;text-decoration:underline}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .mesh i{animation:drift 22s ease-in-out infinite alternate}
  .mesh i:nth-child(2){animation-duration:28s;animation-direction:alternate-reverse}
  .mesh i:nth-child(3){animation-duration:34s}
  @keyframes drift{to{translate:8vw 6vh;scale:1.15}}
  .js .rv{opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;translate:0 0}
  .js .cards .card.rv:nth-child(2){transition-delay:.1s}.js .cards .card.rv:nth-child(3){transition-delay:.2s}.js .cards .card.rv:nth-child(4){transition-delay:.3s}
  .hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>:nth-child(2){animation-delay:.08s}.hero-copy>:nth-child(3){animation-delay:.16s}.hero-copy>:nth-child(4){animation-delay:.24s}.hero-copy>:nth-child(5){animation-delay:.32s}
  @keyframes rise{from{opacity:0;translate:0 18px}}
  [data-parallax]{will-change:translate}
  .card:hover .ico{animation:lift .5s ease}
  @keyframes lift{50%{translate:0 -3px}}
  /* Design v2 heroes (MOTION.md) */
  .art .link{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s cubic-bezier(.4,0,.2,1) forwards}
  .art #link-1{animation-delay:.45s}.art #link-2{animation-delay:.57s}.art #link-3{animation-delay:.69s}.art #link-4{animation-delay:1.05s}.art #link-5{animation-delay:1.17s}
  @keyframes draw{to{stroke-dashoffset:0}}
  .art .node{transform-box:fill-box;transform-origin:center;animation:pop .4s .95s both}
  @keyframes pop{from{scale:0}}
  .art .card{animation:fadeup .7s cubic-bezier(.2,.7,.2,1) both;transition:translate .3s}
  .art #card-1{animation-delay:.1s}.art #card-2{animation-delay:.9s}.art #card-3{animation-delay:.96s}.art #card-4{animation-delay:1.02s}.art #card-5{animation-delay:1.4s}.art #card-6{animation-delay:1.46s}
  @keyframes fadeup{from{opacity:0;translate:0 12px}}
  .art .card-band{animation:band 6s 2.4s infinite}
  .art #card-2 .card-band,.art #card-3 .card-band,.art #card-4 .card-band{animation-delay:2.7s}.art #card-5 .card-band,.art #card-6 .card-band{animation-delay:3s}
  @keyframes band{0%,10%,100%{fill:var(--h-band)}5%{fill:var(--h-band2)}}
  .art #accent-dot{transform-box:fill-box;transform-origin:center;animation:pulse 6s 2.2s infinite}
  @keyframes pulse{0%,8%,100%{scale:1}4%{scale:1.2}}
  .art .plane{animation:drift2 12s ease-in-out infinite alternate}.art #plane-2{animation-duration:15s}.art #plane-3{animation-duration:10s}
  @keyframes drift2{to{translate:6px -6px}}
  .art .pane{animation:panein .9s cubic-bezier(.2,.7,.2,1) both,bob 7s ease-in-out 1.2s infinite alternate}
  .art #pane-mid{animation-delay:.15s,1.6s;--py:16px;--fy:-4px}.art #pane-small{animation-delay:.3s,2s;--py:28px}
  @keyframes panein{from{opacity:0;translate:0 var(--py,0)}}
  @keyframes bob{to{translate:0 var(--fy,4px)}}
  .art #core{transform-box:fill-box;transform-origin:center;animation:corein .6s .35s both,pulse 7s 2s infinite}
  @keyframes corein{from{opacity:0;scale:.9}}
  .art .card .avatar{transform-box:fill-box;transform-origin:center;animation:avin .5s cubic-bezier(.2,.7,.2,1) both}
  .art .card .name,.art .card .role{animation:txtin .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes avin{from{opacity:0;scale:.8}}
  @keyframes txtin{from{opacity:0;translate:0 4px}}
  .art #card-1 .avatar{animation-delay:.35s}.art #card-1 .name{animation-delay:.5s}.art #card-1 .role{animation-delay:.58s}
  .art #card-2 .avatar,.art #card-3 .avatar,.art #card-4 .avatar{animation-delay:1.15s}.art #card-2 .name,.art #card-3 .name,.art #card-4 .name{animation-delay:1.3s}.art #card-2 .role,.art #card-3 .role,.art #card-4 .role{animation-delay:1.38s}
  .art #card-5 .avatar,.art #card-6 .avatar{animation-delay:1.65s}.art #card-5 .name,.art #card-6 .name{animation-delay:1.8s}.art #card-5 .role,.art #card-6 .role{animation-delay:1.88s}
  .art .pane:hover{filter:drop-shadow(0 8px 14px rgba(10,26,51,.18))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:opacity .15s!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){
  .hero-art{transform-style:preserve-3d;will-change:transform}
  .art .card .card-band{transition:fill .35s}
  .art .card.is-near .card-band{fill:var(--h-band2)}
  .art .card.is-near>rect{stroke:#6B7A8F;transition:stroke .35s}
}

/* ===== Neverhold family layer (tokens from live neverhold.co, Oct 13) ===== */
h1,h2,h3{font-family:"Space Grotesk",system-ui,sans-serif}
h1{font-weight:800;letter-spacing:-2px;line-height:1.05}
h2{font-weight:700;letter-spacing:-.5px}
[data-theme=dark] h1{background:linear-gradient(135deg,#5ef0ff 0%,#9f7bff 50%,#5ef0ff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#5ef0ff}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:3px;font-size:11px;padding:8px 16px;border-radius:4px;border:1px solid color-mix(in srgb,var(--link) 40%,transparent);background:color-mix(in srgb,var(--link) 7%,transparent)}
.cta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.5px;border-radius:12px;background:var(--grad);color:#050910;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 30px rgba(94,240,255,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.cta:hover{box-shadow:0 0 40px rgba(94,240,255,.45)}
.cta.ghost{background:color-mix(in srgb,var(--link) 6%,transparent);color:var(--text);border:1px solid var(--border-strong);box-shadow:none}
.card,.tile{border-radius:16px;padding:28px 28px 18px}
[data-theme=dark] .card,[data-theme=dark] .tile{background:linear-gradient(180deg,rgba(10,35,45,.5),rgba(5,9,16,.95));box-shadow:0 0 60px rgba(94,240,255,.06),inset 0 0 40px rgba(94,240,255,.02)}
.item::before{background:var(--grad);box-shadow:0 0 0 4px rgba(94,240,255,.14)}
.brand{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:10px}
.nhmark{width:32px;height:32px;border-radius:9px;background:var(--grad);display:inline-grid;place-items:center;color:#050910;font-weight:900;font-size:15px;box-shadow:0 0 20px rgba(94,240,255,.3);flex-shrink:0;letter-spacing:0}
.byparent{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.5px;color:var(--muted);text-decoration:none;border:1px solid var(--border);border-radius:999px;padding:4px 10px 4px 4px}
.byparent .nhmark{width:20px;height:20px;border-radius:6px;font-size:11px;box-shadow:none}
.byparent:hover{color:var(--text);border-color:var(--border-strong)}
.nav nav a,.navcta,.foot{font-family:"JetBrains Mono",ui-monospace,monospace}
.nav nav a{font-size:13px;letter-spacing:.3px}
.foot .family{display:flex;align-items:center;gap:10px;margin-top:16px}
/* hero SVG re-tint (Design v3 ids/classes) */
.hero-art{background:var(--h-bg)}
.art #bg rect{fill:var(--h-bg)}
.art .card>rect{fill:var(--h-card);stroke:var(--h-line)}
.art .card-band{fill:var(--h-band)}
.art .avatar circle{fill:var(--h-av);stroke:var(--h-link)}
.art .avatar text{fill:var(--h-avtext)}
.art .name{fill:var(--text)}
.art .role{fill:var(--muted)}
.art .link{stroke:var(--h-link)}
.art .node,.art .node *,.art #accent-dot,.art #accent-dot *{fill:var(--h-node)}
.art .plane:not([fill="none"]),.art .plane *:not([fill="none"]){fill:var(--h-plane)}
.art .plane[fill="none"],.art .plane [fill="none"]{stroke:var(--h-line)}
.art .pane rect{fill:var(--h-card);stroke:var(--h-line)}
.art #pane-back rect{fill:var(--h-plane)}
.art #core>rect:first-child{fill:var(--h-band)}
[data-theme=dark] .art #core>rect:not(:first-child){stroke:#050910}
[data-theme=dark] .art #core>rect:not(:first-child)[fill="#fff"]{fill:#050910}
.applogo{width:32px;height:32px;border-radius:8px;display:block}
.hero-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:2976/1440}
@media (prefers-reduced-motion:no-preference){.hero-photo img{animation:photoin 1.1s cubic-bezier(.2,.7,.2,1) both}@keyframes photoin{from{opacity:0;scale:1.04}}}