/* ============================================================
   AVAD SHAMAR CREATIVE — V3 design system
   Art direction: upscale tech × creative practice.
   Near-black canvas, inset rounded stage, grainy aurora gradient,
   glass surfaces, generous radii, one electric-green signal.

   References the founder named: cadillacf1team.com (black field,
   uppercase discipline), grainient.supply (inset stage, grain-over-
   gradient, lime pill CTA), gptagency.io (glass pill nav, serif
   display over sans body with mono micro-labels).

   Mobile is a first-class target, not a breakpoint afterthought —
   every horizontal container here is allowed to shrink. (The v1
   header could not, which is why it broke below 356px.)
   ============================================================ */

:root {
  /* ---- Canvas & surfaces ---- */
  --void:#06070A;          /* page behind the stage */
  --ink-950:#0A0C10;
  --ink-900:#0E1116;
  --ink-800:#151922;
  --ink-700:#1E232E;

  /* ---- Text ---- */
  --text:#EDEFF3;
  --text-dim:#AEB6C4;
  --text-mute:#7D8695;
  --paper:#F7F8FA;

  /* ---- Signal (the one saturated colour) ---- */
  --signal:#3BE884;
  --signal-deep:#17C46A;
  --signal-ink:#04140B;    /* text on a signal-filled surface */

  /* ---- Glass ---- */
  --glass:rgba(255,255,255,0.045);
  --glass-hi:rgba(255,255,255,0.075);
  --line:rgba(237,239,243,0.10);
  --line-hi:rgba(237,239,243,0.18);

  /* ---- Type ---- */
  /* Display face matches the lockup's geometry. Fraunces (the spec's
     original pick, a wonky serif) predated the real brand assets and
     read as a different company sitting under the logo. */
  --display:'Clash Display', 'Hanken Grotesk', sans-serif;
  --sans:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-display:clamp(2.5rem, 1.35rem + 5.1vw, 6rem);
  --fs-h2:clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-lede:clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body:clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-small:0.875rem;
  --fs-mono:0.6875rem;

  /* ---- Radii — the V3 signature ---- */
  --r-xs:8px; --r-sm:14px; --r-md:22px; --r-lg:32px; --r-pill:999px;

  /* ---- Space ---- */
  --pad-x:clamp(1.125rem, 4.5vw, 4.5rem);
  --stage-inset:clamp(6px, 1vw, 14px);
  --measure:34rem;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.9,.28,1);
  --t-fast:160ms; --t-ui:280ms; --t-slow:700ms;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  /* Belt and braces: nothing on this page may cause a sideways scroll. */
  overflow-x:hidden;
}

img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
button, input { font:inherit; color:inherit; }

/* The lockup sets AVAD in a hairline weight against a bold SHAMAR.
   Headings echo that: light by default, and the emphasised word picks
   up the heavy weight plus the signal green. */
h1, h2, h3 {
  font-family:var(--display);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-0.02em;
}

/* Clash Display has no italic — an <em> here would be synthetically
   sloped by the browser, which mangles a geometric face. Emphasis is
   carried by weight and colour instead. */
h1 em, h2 em {
  font-style:normal;
  font-weight:600;
  color:var(--signal);
}

.mono {
  font-family:var(--mono);
  font-size:var(--fs-mono);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-mute);
}

.small { font-size:var(--fs-small); line-height:1.55; }

/* Unresolved founder content. Deliberately conspicuous — a placeholder
   that blends in is a placeholder that ships. */
.placeholder {
  font-family:var(--mono);
  font-size:0.8em;
  color:#E8B96B;
  background:rgba(232,185,107,0.12);
  border:1px dashed rgba(232,185,107,0.45);
  border-radius:var(--r-xs);
  padding:0.05em 0.35em;
}

/* Universal focus ring — signal green, never suppressed. */
:focus-visible {
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--signal-ink);
  padding:0.7rem 1.1rem; font-weight:700; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus { left:0; }

.visually-hidden {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   The stage — an inset, heavily rounded panel on the void.
   ============================================================ */

.stage {
  position:relative;
  margin:var(--stage-inset);
  border-radius:var(--r-lg);
  background:var(--ink-950);
  overflow:hidden;
  isolation:isolate;
}

/* Aurora: three offset radial washes. Pure CSS, no image payload. */
.stage__aurora {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 14% 8%,  rgba(59,232,132,0.30) 0%, rgba(59,232,132,0) 62%),
    radial-gradient(52% 44% at 88% 22%, rgba(38,196,214,0.22) 0%, rgba(38,196,214,0) 66%),
    /* Deep teal, NOT violet. The aurora stays inside the green–cyan
       family; a purple wash here also bled through the glass cards and
       tinted them. Keep any future wash in this range. */
    radial-gradient(64% 52% at 62% 96%, rgba(32,190,180,0.16) 0%, rgba(32,190,180,0) 68%),
    linear-gradient(178deg, var(--ink-900) 0%, var(--ink-950) 55%, #080A0E 100%);
}

/* Grain over the gradient — the "grainient" texture, as an inline
   feTurbulence data URI so the page stays fully self-contained. */
.stage__grain {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0.42;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

.stage__inner { position:relative; z-index:2; }

/* ============================================================
   Glass primitives
   ============================================================ */

.glass {
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

/* ---------- Floating pill nav ---------- */

.topbar {
  position:sticky; top:var(--stage-inset); z-index:60;
  padding:clamp(0.6rem, 1.6vw, 1.1rem) var(--pad-x) 0;
}

/* Holds the wordmark alone, so it hugs its contents — a full-width bar
   with a single left-aligned mark reads as an unfinished nav. */
.topbar__pill {
  display:inline-flex; align-items:center;
  padding:0.5rem 1.1rem;
  border-radius:var(--r-pill);
  background:rgba(10,12,16,0.55);
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

/* The wordmark claims the space first; the status chip is the element
   that gives way. (The v1 header let neither shrink, so the hamburger
   was pushed off-screen below 356px.) */
/* Never shrinks. Letting the flex row squeeze the lockup collapses the
   AVAD hairlines to nothing — the portal label shortens instead. */
.wordmark { display:flex; align-items:center; flex:0 0 auto; color:var(--text); }
.wordmark:hover { color:#FFFFFF; }

/* The real ASC lockup. Its AVAD hairlines are ~1.9% of the mark's
   height, so they thin out fast: at 24px tall they fall below a single
   device pixel on a 1x screen and the word goes ghostly. 30px is the
   floor, and the mark is given room to grow on wider viewports. */
.wordmark__logo {
  height:clamp(30px, 4.2vw, 38px);
  width:auto;
  transition:color var(--t-fast);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding:clamp(3.5rem, 11vh, 8rem) var(--pad-x) clamp(3rem, 8vh, 6rem);
  max-width:78rem;
}

.hero__eyebrow { display:flex; align-items:center; gap:0.65rem; margin-bottom:clamp(1.5rem, 4vw, 2.25rem); }

.hero h1 { font-size:var(--fs-display); max-width:14ch; }

.hero__lede {
  font-size:var(--fs-lede);
  color:var(--text-dim);
  max-width:var(--measure);
  margin-top:clamp(1.25rem, 3vw, 1.75rem);
}

.hero__transition {
  margin-top:clamp(1rem, 2.5vw, 1.5rem);
  color:var(--text-mute);
}
.hero__transition strong { color:var(--text-dim); font-weight:600; }

/* ---------- Waitlist form ---------- */

.waitlist { margin-top:clamp(2rem, 5vw, 3rem); max-width:var(--measure); }

/* The mono kicker carries the section marker; the label below it stays
   plain language, because it has to actually describe the input. */
.waitlist__kicker {
  display:flex; align-items:center; gap:0.55rem;
  color:var(--signal);
  margin-bottom:0.6rem;
}

/* The single status claim. Carries the weight the old <label> did, now
   that the field's own label is visually hidden. */
.waitlist__statement {
  font-family:var(--display);
  font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight:400;
  letter-spacing:-0.015em;
  color:var(--text);
  margin-bottom:0.7rem;
}

.waitlist__lede {
  color:var(--text-dim);
  max-width:var(--measure);
  margin-bottom:1.25rem;
}

/* Row on desktop, stack on small screens — the stack is the default,
   so nothing has to shrink below its content width. */
.waitlist__row { display:flex; flex-direction:column; gap:0.6rem; }

.waitlist__field {
  width:100%;
  padding:1rem 1.15rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line-hi);
  color:var(--text);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:border-color var(--t-fast), background var(--t-fast);
}
.waitlist__field::placeholder { color:var(--text-mute); }
.waitlist__field:hover { border-color:rgba(237,239,243,0.28); }
.waitlist__field:focus { border-color:var(--signal); background:rgba(255,255,255,0.075); }
.waitlist__field[aria-invalid="true"] { border-color:#FF8E7A; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  min-height:52px;
  padding:1rem 1.6rem;
  border-radius:var(--r-pill);
  background:var(--signal); color:var(--signal-ink);
  font-weight:680; letter-spacing:0.005em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background:#55EE97; box-shadow:0 6px 26px rgba(59,232,132,0.24); }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:0.55; cursor:progress; box-shadow:none; }

.waitlist__micro { color:var(--text-mute); margin-top:0.85rem; }

/* Status region — colour is never the only signal; each state
   carries a text prefix as well. */
.waitlist__status {
  margin-top:1rem;
  padding:0.85rem 1.1rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--glass);
  display:none;
}
.waitlist__status[data-state="ok"]    { display:block; border-color:rgba(59,232,132,0.45); }
.waitlist__status[data-state="error"] { display:block; border-color:rgba(255,142,122,0.5); }
.waitlist__status[data-state="ok"] strong    { color:var(--signal); }
.waitlist__status[data-state="error"] strong { color:#FF8E7A; }

/* Honeypot — off-screen, never announced, never focusable. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 404 ---------- */

.notfound__back { margin-top:clamp(1.75rem, 4vw, 2.5rem); }
.foot-link { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-hi); }
.foot-link:hover { color:var(--signal); text-decoration-color:var(--signal); }

/* ============================================================
   What's coming — three glass cards
   ============================================================ */

.coming { padding:clamp(2rem, 6vw, 4rem) var(--pad-x) clamp(3.5rem, 9vw, 6rem); }

.coming__head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.5rem, 4vw, 2.5rem); }
.coming h2 { font-size:var(--fs-h2); }

/* Explicit column counts rather than auto-fit. With five cards, auto-fit
   picks a count from available width alone and can strand a single card
   on its own row; stepping 1 → 2 → 3 → 5 keeps the last row from ever
   holding just one. */
.coming__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(0.75rem, 1.6vw, 1.1rem);
}

@media (min-width:38rem) {
  .coming__grid { grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:52rem) {
  .coming__grid { grid-template-columns:repeat(3, 1fr); }
}

@media (min-width:78rem) {
  .coming__grid { grid-template-columns:repeat(5, 1fr); }
}

.card {
  padding:clamp(1.4rem, 3vw, 2rem);
  border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color var(--t-ui), background var(--t-ui), transform var(--t-ui) var(--ease);
}
.card:hover { border-color:var(--line-hi); background:var(--glass-hi); transform:translateY(-3px); }

.card__num { color:var(--signal); margin-bottom:1rem; display:block; }
/* Weight 300 is right at display scale but goes weak at card size —
   step it up so these still read as headings. */
.card h3 { font-size:1.25rem; font-weight:500; letter-spacing:-0.01em; margin-bottom:0.6rem; }
.card p { color:var(--text-dim); }

/* ============================================================
   Footer
   ============================================================ */

.foot {
  padding:clamp(1.75rem, 4vw, 2.5rem) var(--pad-x) clamp(2rem, 5vw, 3rem);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:0.75rem 2rem; align-items:center;
}
.foot p { color:var(--text-mute); }
.foot a { color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-hi); }
.foot a:hover { color:var(--signal); text-decoration-color:var(--signal); }

/* ============================================================
   Reveal on enter.

   Content is visible by DEFAULT and only hidden once main.js has
   confirmed it will animate it back in (html.reveal-ready). Hiding
   first and revealing later means a blocked, failed, or slow script
   leaves a blank page — the inline no-js/js swap in <head> would not
   save it, because that runs whether or not main.js ever loads.
   ============================================================ */

.reveal { opacity:1; transform:none; }

html.reveal-ready .reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.reveal-ready .reveal.is-in { opacity:1; transform:none; }

/* ============================================================
   Wider viewports
   ============================================================ */

@media (max-width:26rem) {
  .topbar__pill { padding:0.5rem 0.75rem; }
}

@media (min-width:640px) {
  .waitlist__row { flex-direction:row; align-items:stretch; }
  .waitlist__field { flex:1 1 auto; min-width:0; }
  .btn { flex:none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion:reduce) {
  .card:hover { transform:none; }
  .btn:active { transform:none; }
  .reveal, .reveal.is-in { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   Backdrop-filter fallback — Firefox with the flag off, older
   engines. Solid tints instead of transparent panels, so glass
   never degrades into unreadable text on gradient.
   ============================================================ */

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .topbar__pill { background:rgba(10,12,16,0.94); }
  .card, .glass, .waitlist__status { background:rgba(21,25,34,0.90); }
  .waitlist__field { background:rgba(21,25,34,0.92); }
}