/* ============================================================================
   AI MASTER GROWER — BASE
   Reset, typography, layout primitives, navigation, footer.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

/* Ambient substrate: a faint circuit grid + two brand-colored auroras.
   Fixed, non-interactive, sits beneath all content. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  opacity: .7;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(62,240,138,.09), transparent 62%),
    radial-gradient(52rem 36rem at 92% 4%, rgba(34,211,240,.08), transparent 60%);
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

::selection { background: rgba(62,240,138,.28); color: #fff; }

/* ------------------------------------------------------------- TYPOGRAPHY */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-4);
  color: var(--text-strong);
  text-wrap: balance;
}
h1 { font-size: var(--text-d1); line-height: var(--lh-tight); }
h2 { font-size: var(--text-d2); }
h3 { font-size: var(--text-d3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan); text-decoration-color: rgba(34,211,240,.4); text-underline-offset: .22em; }
a:hover { color: var(--cyan-bright); }

strong, b { font-weight: 600; color: var(--text-strong); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 58ch;
}

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* The instrument label — the brand's small-type voice. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0;
}
.label--bio  { color: var(--bio); }
.label--cyan { color: var(--cyan); }
.label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex: none;
}
.label--plain::before { display: none; }

/* Section eyebrow with rule */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.eyebrow::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.accent-bio  { color: var(--bio); }
.accent-cyan { color: var(--cyan); }
.accent-warn { color: var(--warn); }
.accent-risk { color: var(--risk); }

/* Gradient display text — used sparingly, one per page maximum. */
.grad {
  background: linear-gradient(104deg, var(--bio-lime) 0%, var(--bio) 34%, var(--cyan) 78%, var(--cyan-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Fallback for engines that ignore background-clip:text */
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .grad { color: var(--bio); -webkit-text-fill-color: var(--bio); } }

/* ----------------------------------------------------------------- LAYOUT */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* Hairline rule that reads as a panel seam */
.seam {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); } .stack-5 { gap: var(--s-5); }
.stack-6 { gap: var(--s-6); } .stack-8 { gap: var(--s-8); }

.row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
/* Paired form fields — allowed to sit side by side inside a narrow panel. */
.grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--trail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.sticky-col { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
@media (max-width: 61.99rem) { .sticky-col { position: static; } }

/* ---------------------------------------------------------------- BUTTONS */

.btn {
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 44px;                 /* touch target floor */
  padding: .75rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn > * { position: relative; z-index: 1; }
/* Sheen sweeps on hover — a light source passing over an instrument face. */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-fg: #03110a;
  --btn-bd: transparent;
  background: linear-gradient(100deg, var(--bio-lime), var(--bio) 55%, #2ee0c0 100%);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(62,240,138,.4), 0 10px 32px -14px rgba(62,240,138,.8);
}
.btn--primary:hover {
  --btn-fg: #03110a;
  box-shadow: 0 0 0 1px rgba(124,255,159,.6), 0 14px 42px -12px rgba(62,240,138,.95);
}

.btn--ghost { --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-fg: var(--bio); --btn-bd: var(--line-bio); background: var(--bio-wash); }

.btn--cyan { --btn-fg: var(--cyan); --btn-bd: var(--line-cyan); }
.btn--cyan:hover { --btn-fg: var(--cyan-bright); background: var(--cyan-wash); box-shadow: var(--glow-cyan); }

.btn--sm { min-height: 36px; padding: .45rem .85rem; font-size: var(--text-micro); }
.btn--wide { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: .42; pointer-events: none; cursor: not-allowed;
}

/* Text link with an animated underline that reads as a scan line */
.tlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bio);
  text-decoration: none;
  padding-block: .35rem;
}
.tlink .tlink__ln {
  display: inline-block; width: 1.6rem; height: 1px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.tlink:hover { color: var(--bio-bright); }
.tlink:hover .tlink__ln { width: 2.6rem; }

/* ------------------------------------------------------------------ FOCUS */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bio);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------- NAVIGATION */

.nav {
  position: sticky; top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.nav.is-stuck {
  background: rgba(4, 7, 10, .78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}
.nav__inner {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--text-strong);
  flex: none; min-height: 44px;
}
/* The mark renders larger than the space it occupies. Negative block margins
   claw the extra height back, so the bar keeps its 34px vertical rhythm while
   the logo itself reads at 48px — and the asset is logo-mark-tight-*, cropped
   to the artwork rather than padded into a square, which recovers the ~12% of
   dead height the square export was wasting. */
.brand__mark {
  width: 54px; height: 48px; flex: none;
  margin-block: -7px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(62,240,138,.45));
  transition: transform var(--dur-slow) var(--ease-spring), filter var(--dur-base) var(--ease-out);
}
.brand:hover .brand__mark { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 0 18px rgba(62,240,138,.7)); }

/* The footer has no horizontal pressure, so the mark can breathe further —
   same trick, same 34px footprint. */
.footer .brand__mark {
  width: 72px; height: 64px;
  margin-block: -15px;
}
.brand__wm { display: flex; flex-direction: column; line-height: 1; }
.brand__wm-1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.brand__wm-1 em { font-style: normal; color: var(--bio); }
.brand__wm-2 {
  font-family: var(--font-mono); font-size: .5rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 3px; white-space: nowrap;
}
@media (max-width: 26rem) { .brand__wm-2 { display: none; } }

.nav__links { display: none; align-items: center; gap: var(--s-1); margin-left: auto; }
@media (min-width: 60rem) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 .8rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-xs);
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--text); background: rgba(230,241,245,.05); }
.nav__link[aria-current="page"] { color: var(--bio); }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: 4px;
  height: 1px; background: var(--bio); box-shadow: 0 0 8px var(--bio);
}

.nav__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
@media (min-width: 60rem) { .nav__actions { margin-left: var(--s-3); } }
/* Below this the CTA lives inside the drawer, so the bar never has to choose
   between wrapping and clipping the menu button.

   Measured, not guessed: brand 293 + CTA 166 + toggle 44 + gutters + gaps needs
   ~588px. 40rem (640px) clears that with room for wider font fallbacks. If the
   wordmark or CTA text changes length, re-measure before trusting this. */
@media (max-width: 40rem) { .nav__actions .btn--primary { display: none; } }

/* ⌘K affordance */
.kbd-btn {
  display: none; align-items: center; gap: .5rem;
  min-height: 36px; padding: 0 .7rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
@media (min-width: 74rem) { .kbd-btn { display: inline-flex; } }
.kbd-btn:hover { color: var(--text); border-color: var(--line-strong); }
kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-4); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px; color: var(--text-muted);
}

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; color: var(--text);
}
@media (min-width: 60rem) { .nav__toggle { display: none; } }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: ''; display: block; width: 18px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4.5px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: var(--z-overlay);
  background: rgba(4,7,10,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: var(--s-6) var(--gutter) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-2);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--bio); }
.mobile-nav a .idx {
  font-family: var(--font-mono); font-size: var(--text-micro);
  color: var(--text-dim); letter-spacing: .12em;
}
@media (min-width: 60rem) { .mobile-nav { display: none; } }

/* Scroll progress hairline */
.scroll-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--bio-lime), var(--bio) 40%, var(--cyan));
  box-shadow: 0 0 12px rgba(62,240,138,.7);
  z-index: var(--z-modal); pointer-events: none;
}

/* ----------------------------------------------------------------- FOOTER */

.footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(8,13,18,.85));
  padding-block: var(--s-9) var(--s-6);
  margin-top: var(--section-y);
  position: relative; z-index: 1;
}
.footer__grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem)  { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 74rem)  { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

.footer h5 {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-dim); margin-bottom: var(--s-4); font-weight: 500;
}
.footer__links { display: flex; flex-direction: column; gap: var(--s-1); }
.footer__links a {
  color: var(--text-muted); text-decoration: none;
  font-size: var(--text-sm); padding-block: .3rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--bio); }

.footer__base {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
}
.footer__fine {
  font-family: var(--font-mono); font-size: var(--text-micro);
  color: var(--text-dim); letter-spacing: .06em; margin: 0; max-width: none;
}

/* ---------------------------------------------------- SCROLL REVEAL ENGINE */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-scene) var(--ease-out),
              transform var(--dur-scene) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="scale"] { transform: scale(.965); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Below the split breakpoint the columns are full-bleed, so a horizontal
   entrance would push past the viewport edge. Enter vertically instead. */
@media (max-width: 61.99rem) {
  [data-reveal="left"], [data-reveal="right"] { transform: translate3d(0, 22px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Print: give investors a clean paper artifact. */
@media print {
  body::before, body::after, .nav, .mobile-nav, .scroll-progress,
  canvas, .cmdk, .footer__base { display: none !important; }
  body { background: #fff; color: #000; }
  h1,h2,h3,h4 { color: #000; }
  .lead, p { color: #222; }
}