/* CLARITY Studio — sibling of nextgennoise.com. Tokens mirror NGN's live CSS:
   brand #ff4500, zinc scale, Bebas Neue display + SUSE body, always-dark chrome. */
:root{
  --brand:#ff4500; --brand-ink:#09090b;
  --bg:#09090b; --surface:#18181b; --text:#fafafa; --text-2:#d4d4d8; --muted:#a1a1aa; --faint:#71717a;
  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06); --chip:rgba(255,255,255,.06);
  --glow:rgba(255,69,0,.10); --mark-opacity:.035; --link:#ff7a45;
  --c-orange:#ff6a2b; --c-purple:#b66bff; --c-green:#22d36f; --c-cyan:#22c8f0; --c-amber:#f5b82e;
  --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --sans:"SUSE",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f4f5; --surface:#ffffff; --text:#18181b; --text-2:#3f3f46; --muted:#52525b; --faint:#71717a;
  --line:rgba(0,0,0,.1); --line-soft:rgba(0,0,0,.06); --chip:rgba(0,0,0,.05);
  --glow:rgba(255,69,0,.08); --mark-opacity:.045; --link:#b83200;
  --c-orange:#d93a00; --c-purple:#7e22ce; --c-green:#15803d; --c-cyan:#0e7490; --c-amber:#a16207;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg) radial-gradient(circle at 50% 0%,var(--glow) 0%,transparent 50%) no-repeat;
  color:var(--text);font:300 1.0625rem/1.65 var(--sans);position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--mark-opacity);
  background:url(/ngn-mark.svg?v=20261012) no-repeat 110% 60%/min(90vw,860px)}
a{color:var(--link)}
img,svg{display:block;max-width:100%}
.wrap{max-width:75rem;margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--surface);color:var(--text);padding:8px 12px;z-index:100;border-radius:8px}
.caps{text-transform:uppercase;letter-spacing:.18em;font-weight:800;font-size:.6875rem}

/* header — always dark, like NGN */
.top{position:sticky;top:0;z-index:60;height:64px;background:#09090b;border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#fff}
@media(min-width:768px){.top{padding:0 32px}}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo svg,.logo img{height:26px;width:auto}
.logo b{font-weight:900;font-size:.875rem;letter-spacing:.04em;text-transform:uppercase}
.logo b i{font-style:normal;color:rgba(255,255,255,.4)}
.nav{display:none;gap:4px;height:100%}
@media(min-width:860px){.nav{display:flex;position:absolute;left:50%;transform:translateX(-50%)}}
.nav a{display:flex;align-items:center;padding:0 22px;height:100%;color:#71717a;text-decoration:none;font-weight:700;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:3px solid transparent;transition:color .2s}
.nav a:hover,.nav a.on{color:#ff4500}
.nav a.on{border-bottom-color:#ff4500}
.top-r{display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .sun{display:none}
:root[data-theme="light"] .icon-btn .sun{display:block}
:root[data-theme="light"] .icon-btn .moon{display:none}

/* buttons — NGN pill: black-weight caps, wide tracking */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 32px;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);font:900 .875rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;transition:transform .15s,filter .2s,background .2s;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.icon-btn:focus-visible,.nav a:focus-visible,.foot a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.sm{min-height:36px;padding:0 20px;font-size:.6875rem;box-shadow:0 8px 20px -6px rgba(255,69,0,.5)}
.btn.ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.25)}
.btn.ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);filter:none}
.btn.black{background:#09090b;color:#fff}
.btn.white{background:#fff;color:#09090b}

/* hero — full-bleed stage photo, headline bottom-left */
.hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#09090b}
.hero::before{content:"";position:absolute;inset:0;background:url(/hero.jpg?v=20261012) center 35%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(9,9,11,.97) 0%,rgba(9,9,11,.7) 32%,rgba(9,9,11,.1) 70%,rgba(9,9,11,.35) 100%),
  linear-gradient(to right,rgba(9,9,11,.6) 0%,transparent 60%)}
.hero-in{position:relative;z-index:1;width:100%;padding-top:96px;padding-bottom:56px}
@media(min-width:768px){.hero-in{padding-bottom:72px}}
.status{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,69,0,.5);background:rgba(255,69,0,.12);color:#ffb08f}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0}
h1{font-size:clamp(3.4rem,11vw,7rem);line-height:.9;letter-spacing:.03em;max-width:15ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--brand)}
.hero p.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.6;color:rgba(255,255,255,.82);max-width:36rem;margin:20px 0 28px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero small{display:block;margin-top:18px;color:rgba(255,255,255,.55);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* fact strip */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;padding:44px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:720px){.facts{grid-template-columns:repeat(5,1fr);text-align:center}}
.fact b{display:block;font:400 clamp(1.9rem,4.5vw,2.6rem)/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.fact span{display:block;margin-top:8px;color:var(--faint)}
.fact:nth-child(1) b{color:var(--c-orange)}.fact:nth-child(2) b{color:var(--c-purple)}.fact:nth-child(3) b{color:var(--c-green)}.fact:nth-child(4) b{color:var(--c-cyan)}.fact:nth-child(5) b{color:var(--c-amber)}

/* sections */
section{padding:72px 0 0}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.tile{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.tile svg{width:22px;height:22px}
.sec-h h2{font-size:clamp(2rem,5vw,2.6rem);line-height:1;letter-spacing:.03em}
.sec-h h2 span{color:var(--c)}
.sec-h p{margin:4px 0 0;color:var(--faint)}

/* cards — tinted gradient, 20% border, 2rem radius */
.cards{display:grid;gap:16px}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{--c:var(--c-green);position:relative;overflow:hidden;padding:28px;border-radius:2rem;
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
  background:linear-gradient(to bottom right,color-mix(in srgb,var(--c) 11%,transparent),color-mix(in srgb,var(--c) 4%,transparent));
  transition:border-color .2s}
.card:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.card.cy{--c:var(--c-cyan)}.card.or{--c:var(--c-orange)}.card.pu{--c:var(--c-purple)}
.card svg.ic{width:30px;height:30px;color:var(--c);margin-bottom:18px}
.card h3{font-size:1.9rem;letter-spacing:.03em;line-height:1;margin-bottom:12px}
.card p{margin:0 0 18px;color:var(--text-2)}
.card p strong{color:var(--c);font-weight:700}
.tag{display:flex;align-items:center;gap:8px;color:var(--c)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}

/* two-up: how it works + access card */
.split{display:grid;gap:24px}
@media(min-width:960px){.split{grid-template-columns:1.35fr 1fr;align-items:start}}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 22px;border-radius:1.5rem;background:var(--chip);border:1px solid var(--line-soft)}
.steps li::before{content:counter(s);width:46px;height:46px;border-radius:14px;background:var(--brand);color:var(--brand-ink);font:400 1.8rem/46px var(--display);text-align:center}
.steps h3{font-size:1.5rem;letter-spacing:.04em;margin-bottom:4px}
.steps p{margin:0;color:var(--text-2)}
.access{position:relative;overflow:hidden;border-radius:2rem;padding:36px 28px;text-align:center;color:#fff;background:linear-gradient(135deg,#ff4500 0%,#e63a00 55%,#e00000 100%);box-shadow:0 30px 60px -25px rgba(255,69,0,.55)}
.access .gem{width:72px;height:72px;margin:0 auto 18px;border-radius:20px;display:grid;place-items:center;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.2)}
.access .gem svg{width:34px;height:34px}
.access h2{font-size:clamp(2.4rem,6vw,3.2rem);line-height:.95;letter-spacing:.02em;margin-bottom:12px}
.access p{margin:0 auto 22px;max-width:24rem;color:rgba(255,255,255,.92);font-weight:600}
.access .fine{display:block;margin:16px 0 0;color:rgba(255,255,255,.7);letter-spacing:.2em;font-size:.625rem;font-weight:800;text-transform:uppercase}

/* DAW strip + beta notes */
.daw{display:grid;gap:12px}
@media(min-width:720px){.daw{grid-template-columns:repeat(4,1fr)}}
.daw div{padding:22px;border-radius:1.5rem;background:var(--chip);border:1px solid var(--line-soft)}
.daw h3{font-size:1.4rem;letter-spacing:.05em;margin-bottom:6px;color:var(--text)}
.daw p{margin:0;color:var(--muted);font-size:.95rem}
.beta-box{padding:28px;border-radius:2rem;border:1px solid var(--line);background:var(--chip)}
.beta-box ul:not(.ask){margin:0;padding:0;list-style:none;display:grid;gap:12px}
.beta-box ul:not(.ask) li{position:relative;padding-left:22px;color:var(--text-2)}
.beta-box ul:not(.ask) li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.ask{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ask li{padding:8px 14px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--text-2);font-size:.9rem;font-weight:600}

/* footer — always dark */
.foot{margin-top:96px;background:#09090b;border-top:1px solid rgba(255,255,255,.08);color:#a1a1aa;padding:56px 0 40px}
.foot-grid{display:grid;gap:36px}
@media(min-width:860px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot .name{display:flex;align-items:center;gap:12px;color:#fff;font:900 1.25rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.foot .name img{height:34px;width:auto}
.foot .name span{color:var(--brand)}
.foot .blurb{margin:0;max-width:26rem;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.8}
.foot h4{margin:0 0 18px;font:400 .95rem/1 var(--display);letter-spacing:.2em;color:var(--brand);text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.foot a{color:#a1a1aa;text-decoration:none;font-weight:700;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.foot a:hover{color:#fff}
.foot a.o{color:var(--brand)}
.lgpl{margin:44px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);font-size:.8125rem;line-height:1.7;color:#8b8b95;max-width:60rem}
.lgpl a{color:#d4d4d8;font-size:inherit;letter-spacing:0;text-transform:none;font-weight:400;text-decoration:underline}
.legal{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:24px;font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#71717a}
.legal i{font-style:normal;opacity:.5}

/* 404 */
.nf{min-height:calc(100vh - 64px);display:grid;place-items:center;text-align:center;padding:48px 16px}
.nf h1{margin:0 auto 12px}.nf p{color:var(--muted);margin:0 0 28px}