/* =====================================================================
   AXON — Design System / Base
   Palette: Frontend Battle Phase 1 (exact hex, all six used)
   Type:    JetBrains Mono (display/numeric) + Inter (body/UI)
   Motion:  micro 150–200ms ease-out · reflow 300–400ms ease-in-out
   ===================================================================== */

:root {
  /* ---- Provided palette (asset compliance) ---- */
  --arctic:   #F1F6F4;   /* Arctic Powder  19.23:1 */
  --mint:     #D9E8E2;   /* Mystic Mint    16.59:1 */
  --forsythia:#FFC801;   /* Forsythia      13.51:1 */
  --saffron:  #FF9932;   /* Deep Saffron    9.85:1 */
  --noct:     #114C5A;   /* Nocturnal Exp.  9.52:1 */
  --noir:     #172836;   /* Oceanic Noir   14.63:1 */

  /* ---- Derived surfaces (from palette only) ---- */
  --bg:        #0c1820;            /* deepened Oceanic Noir */
  --bg-2:      #102029;
  --surface:   rgba(17, 76, 90, .22);
  --surface-2: rgba(17, 76, 90, .38);
  --line:      rgba(217, 232, 226, .12);
  --line-2:    rgba(217, 232, 226, .22);
  --text:      var(--arctic);
  --text-soft: rgba(217, 232, 226, .68);
  --text-mute: rgba(217, 232, 226, .42);

  /* ---- Accent gradient ---- */
  --grad-gold: linear-gradient(135deg, var(--forsythia), var(--saffron));
  --grad-teal: linear-gradient(135deg, var(--noct), var(--noir));
  --glow-gold: 0 0 0 1px rgba(255,200,1,.5), 0 8px 30px -6px rgba(255,153,50,.45);

  /* ---- Type ---- */
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Fluid type scale (clamp = breakpoint fluidity) ---- */
  --fs-display: clamp(2.75rem, 7vw + 1rem, 7rem);
  --fs-h1:      clamp(2.2rem, 4.5vw + 1rem, 4.25rem);
  --fs-h2:      clamp(1.75rem, 2.6vw + 1rem, 3rem);
  --fs-h3:      clamp(1.2rem, 1vw + .8rem, 1.6rem);
  --fs-body:    clamp(.95rem, .3vw + .9rem, 1.0625rem);
  --fs-sm:      .8125rem;
  --fs-xs:      .6875rem;

  /* ---- Spacing / radius ---- */
  --gut: clamp(1.15rem, 5vw, 6rem);   /* page gutter */
  --sp-section: clamp(5rem, 10vw, 9rem);
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --maxw: 1280px;

  /* ---- Motion tokens (per brief) ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --t-micro: 180ms;   /* 150–200ms hovers/toggles */
  --t-reflow: 360ms;  /* 300–400ms structural reflows */
}

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--forsythia); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--forsythia); color: var(--noir); }

/* grain + ambient field overlays (decorative, behind content) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 78% -10%, rgba(17,76,90,.55), transparent 60%),
    radial-gradient(50vw 50vw at -10% 20%, rgba(255,153,50,.06), transparent 55%),
    radial-gradient(40vw 40vw at 110% 90%, rgba(255,200,1,.05), transparent 55%);
}

/* ---------------------------------------------------------- type */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
.mono { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--forsythia);
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; }

.lead { color: var(--text-soft); font-size: var(--fs-h3); line-height: 1.45; font-weight: 400; }
.muted { color: var(--text-mute); }

/* ---------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; z-index: 1; padding-block: var(--sp-section); }
section[id] { scroll-margin-top: 88px; }
#top { scroll-margin-top: 0; }
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--fs-h2); margin: 1rem 0 1.1rem; }
.section-head p { color: var(--text-soft); max-width: 56ch; }

/* gradient text accent */
.grad-text { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------- buttons */
.btn {
  --pad: .9rem 1.5rem;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: var(--pad); border-radius: 100px;
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.01em;
  transition: transform var(--t-micro) var(--ease-out),
              box-shadow var(--t-micro) var(--ease-out),
              background-color var(--t-micro) var(--ease-out),
              color var(--t-micro) var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--grad-gold); color: var(--noir); box-shadow: 0 10px 30px -10px rgba(255,153,50,.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(255,153,50,.75); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--forsythia); color: var(--forsythia); transform: translateY(-2px); }
.btn .arr { transition: transform var(--t-micro) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }

/* chip / tag */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .04em;
  padding: .42rem .8rem; border: 1px solid var(--line); border-radius: 100px;
  color: var(--text-soft); background: var(--surface);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--forsythia); box-shadow: 0 0 10px var(--forsythia); }

/* generic card */
.card {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), rgba(12,24,32,.4));
  backdrop-filter: blur(8px);
}

/* reveal-on-scroll (IntersectionObserver toggles .in).
   Guarded by .js so content is fully visible if scripts ever fail to run.
   The .in rule is also scoped under .js so it outranks the hidden state. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--t-reflow) var(--ease-out), transform var(--t-reflow) var(--ease-out);
}
[data-reveal][data-d="1"].in { transition-delay: 60ms; }
[data-reveal][data-d="2"].in { transition-delay: 120ms; }
[data-reveal][data-d="3"].in { transition-delay: 180ms; }
[data-reveal][data-d="4"].in { transition-delay: 240ms; }

.icon { width: 22px; height: 22px; stroke-width: 1.5; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}