/* ============================================================================
   NEANDER — BASE LAYER
   Modern reset · base element styling · signature utilities (mesh, grain),
   layout helpers, and the page-load reveal system.
   Depends on: tokens.css
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  min-height: 100dvh;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: none; cursor: pointer; padding: 0; }

a { color: inherit; text-decoration: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

/* --- Base typography ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-md);  }

p { line-height: var(--leading-relaxed); text-wrap: pretty; }

small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: "zero", "ss01";
}

strong, b { font-weight: var(--weight-semibold); }

hr {
  border: none;
  height: 1px;
  background: var(--color-border);
}

/* ============================================================================
   UTILITIES
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.prose { max-width: var(--container-prose); }

.section { padding-block: var(--section-pad-y); }

.stack > * + * { margin-top: var(--flow, 1em); }

/* --- Surfaces & elevation ------------------------------------------------- */
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.elevated  { box-shadow: var(--shadow-md); }
.elevated-lg { box-shadow: var(--shadow-lg); }
.hairline  { border: 1px solid var(--color-border); }
.hairline-t { border-top: 1px solid var(--color-border); }
.hairline-b { border-bottom: 1px solid var(--color-border); }

/* --- Text helpers --------------------------------------------------------- */
.overline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-balance { text-wrap: balance; }

/* --- Inverse (ink) regions ------------------------------------------------ */
.on-ink {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--color-text-inverse); }

/* ============================================================================
   SIGNATURE TEXTURE
   ========================================================================== */

/* --- Grain overlay -------------------------------------------------------
   Apply .grain to any positioned container. The grain sits above the
   background but below content (z-index 0; give content position+z to stack). */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--noise-svg);
  background-size: var(--grain-size, 200px);
  opacity: var(--noise-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.grain--fine   { --grain-size: 130px; }
.grain--coarse { --grain-size: 300px; --noise-opacity: 0.05; }
.grain > * { position: relative; z-index: 1; }

/* On dark/ink surfaces, multiply hides the grain — switch to screen so the
   texture lifts the blacks instead of disappearing into them. */
.mesh--ink.grain::after,
.on-ink.grain::after { mix-blend-mode: screen; opacity: 0.055; }

/* --- Mesh gradients -------------------------------------------------------
   Layered soft radial blooms. Monochrome by default; faint tints add warmth
   without breaking the palette. .mesh paints onto the element background. */
.mesh {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg);
  background-image:
    radial-gradient(60% 60% at 12% 10%, var(--mesh-indigo) 0%, rgb(from var(--mesh-indigo) r g b / 0) 70%),
    radial-gradient(55% 55% at 88% 6%,  var(--mesh-peach)  0%, rgb(from var(--mesh-peach)  r g b / 0) 68%),
    radial-gradient(60% 65% at 80% 92%, var(--mesh-violet) 0%, rgb(from var(--mesh-violet) r g b / 0) 72%),
    radial-gradient(52% 55% at 6% 90%,  var(--mesh-sky)    0%, rgb(from var(--mesh-sky)    r g b / 0) 68%),
    radial-gradient(46% 46% at 52% 52%, var(--mesh-rose)   0%, rgb(from var(--mesh-rose)   r g b / 0) 64%);
  background-repeat: no-repeat;
}

/* Hero mesh — a soft Stripe-style cool→warm sweep; bright & clean near the top
   so the (transparent) nav stays legible, fading into the canvas below. */
.mesh--hero {
  background-image:
    radial-gradient(95% 60% at 50% -14%, var(--neutral-0)   0%, rgb(from var(--neutral-0)  r g b / 0) 74%),
    radial-gradient(46% 52% at 9% 2%,    var(--mesh-indigo) 0%, rgb(from var(--mesh-indigo) r g b / 0) 70%),
    radial-gradient(44% 50% at 93% -2%,  var(--mesh-peach)  0%, rgb(from var(--mesh-peach)  r g b / 0) 68%),
    radial-gradient(52% 58% at 80% 98%,  var(--mesh-violet) 0%, rgb(from var(--mesh-violet) r g b / 0) 72%),
    radial-gradient(50% 56% at 20% 102%, var(--mesh-sky)    0%, rgb(from var(--mesh-sky)    r g b / 0) 70%),
    radial-gradient(38% 44% at 58% 64%,  var(--mesh-rose)   0%, rgb(from var(--mesh-rose)   r g b / 0) 66%);
}

/* Ink mesh — dark CTA / footer. Faint luminous blooms + a whisper of color so
   even the dark regions feel part of the spectrum (a dark Stripe gradient). */
.mesh--ink {
  background-color: var(--color-surface-inverse);
  background-image:
    radial-gradient(54% 64% at 16% 0%,   rgba(132,142,255,0.34) 0%, rgba(132,142,255,0) 64%),
    radial-gradient(58% 58% at 86% 6%,   rgba(255,150,205,0.22) 0%, rgba(255,150,205,0) 60%),
    radial-gradient(62% 72% at 70% 114%, rgba(255,172,120,0.22) 0%, rgba(255,172,120,0) 66%),
    radial-gradient(44% 54% at 40% 100%, rgba(168,120,255,0.24) 0%, rgba(168,120,255,0) 62%);
}

/* Subtle top-down grid lines — optional technical texture for ink regions. */
.grid-lines {
  background-image:
    linear-gradient(var(--color-border-inverse) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-inverse) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Dotted matrix — light technical backdrop for product/demo framing. */
.dot-grid {
  background-image: radial-gradient(var(--ink-a08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* --- Hero band -----------------------------------------------------------
   Premium grainy-gradient hero (refs: Stripe + grainy-gradient stock).
   A heavily BLURRED, EASED gradient flows under a crisp faint grid and a
   prominent film grain, all on an isolated layer that FADES OUT at the bottom
   so the hero merges into the page.
   • Eased fades use rgb(from … / 0): fading to a TRANSPARENT SAME-HUE colour
     avoids the muddy grey "dead zone" you get fading to plain `transparent`.
   • The blur melts the blobs into one another (the Stripe "flow"). */
.hero-band { position: relative; isolation: isolate; overflow: hidden; }
.hero-band > .container { position: relative; z-index: 1; }

.hero-band__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 95%);
}
.hero-band__glow, .hero-band__grid, .hero-band__grain { position: absolute; pointer-events: none; }

/* 1 · Blurred, eased, vibrant gradient — rich on the right, calm on the left
   (so the headline stays legible). The blur is what makes it flow. */
.hero-band__glow {
  inset: -20%;
  background-color: var(--color-bg);
  /* Restrained: colour concentrated across the TOP, fading out so the lower
     two-thirds stay clean white (more breathing room). */
  background-image:
    radial-gradient(34% 42% at 82% 12%, var(--mesh-pink)   0%, rgb(from var(--mesh-pink)   r g b / 0) 70%),
    radial-gradient(26% 34% at 97% 0%,  var(--mesh-gold)   0%, rgb(from var(--mesh-gold)   r g b / 0) 64%),
    radial-gradient(36% 42% at 62% 18%, var(--mesh-violet) 0%, rgb(from var(--mesh-violet) r g b / 0) 72%),
    radial-gradient(30% 36% at 13% 9%,  var(--mesh-indigo) 0%, rgb(from var(--mesh-indigo) r g b / 0) 70%),
    radial-gradient(24% 30% at 38% 6%,  var(--mesh-sky)    0%, rgb(from var(--mesh-sky)    r g b / 0) 64%);
  filter: blur(56px) saturate(1.2);
}

/* 2 · Crisp faint technical grid, masked toward the upper-right. */
.hero-band__grid {
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(125% 115% at 74% 2%, #000 6%, transparent 72%);
          mask-image: radial-gradient(125% 115% at 74% 2%, #000 6%, transparent 72%);
}

/* 3 · Prominent film grain over the gradient — the "grainy gradient" finish.
   soft-light keeps it filmic: strong over colour, near-invisible over white. */
.hero-band__grain {
  inset: 0;
  background-image: var(--noise-svg);
  background-size: 170px;
  opacity: 0.7;
  mix-blend-mode: soft-light;
}

/* ============================================================================
   MOTION — page-load reveal
   ----------------------------------------------------------------------------
   Add .reveal to elements; stagger with --d (delay). One orchestrated entrance.
   ========================================================================== */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: reveal-up var(--dur-slower) var(--ease-out-expo) forwards;
  animation-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Dark mode: native form/scrollbar theming, and lift the grain (multiply would
   vanish into the blacks → switch to screen). */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .grain::after { mix-blend-mode: screen; }

/* --- Hero V2 — centered, minimal (Mintlify / Cofounder flavour) ----------- */
.hero2 { position: relative; isolation: isolate; overflow: hidden; text-align: center; }
.hero2__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%); }
.hero2__glow { position: absolute; inset: 0;
  /* small multi-colour blobs tucked into the TOP CORNERS — centre stays clean */
  background-image:
    radial-gradient(15% 22% at 6% 16%,  var(--mesh-violet) 0%, rgb(from var(--mesh-violet) r g b / 0) 60%),
    radial-gradient(12% 17% at 2% 27%,  var(--mesh-pink)   0%, rgb(from var(--mesh-pink)   r g b / 0) 58%),
    radial-gradient(11% 15% at 13% 9%,  var(--mesh-indigo) 0%, rgb(from var(--mesh-indigo) r g b / 0) 56%),
    radial-gradient(15% 22% at 95% 15%, var(--mesh-gold)   0%, rgb(from var(--mesh-gold)   r g b / 0) 60%),
    radial-gradient(12% 17% at 99% 27%, var(--mesh-pink)   0%, rgb(from var(--mesh-pink)   r g b / 0) 58%);
  filter: blur(40px) saturate(1.2); }
/* Small blush accents tucked to the SIDE edges (no centre); grain adds the noise. */
.hero2__blush { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(11% 17% at 3% 56%,  var(--mesh-rose)  0%, rgb(from var(--mesh-rose)  r g b / 0) 58%),
    radial-gradient(11% 17% at 97% 62%, var(--mesh-peach) 0%, rgb(from var(--mesh-peach) r g b / 0) 58%);
  filter: blur(38px); opacity: 0.6; }
.hero2__grid { position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(120% 86% at 50% 0%, #000 6%, transparent 68%);
          mask-image: radial-gradient(120% 86% at 50% 0%, #000 6%, transparent 68%); }
.hero2__grain { position: absolute; inset: 0; z-index: 0; background-image: var(--noise-svg); background-size: 170px; opacity: 0.5; mix-blend-mode: soft-light; }
.hero2__inner { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.hero2__title { font-size: var(--text-6xl); letter-spacing: var(--tracking-tighter); line-height: var(--leading-none); max-width: 16ch; }
.hero2__sub { font-size: var(--text-xl); color: var(--color-text-secondary); max-width: 54ch; line-height: var(--leading-snug); }
.hero2__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }
/* Product demo sitting inside the hero, below the CTAs (above the bg layer). */
.hero2__demo { position: relative; z-index: 1; margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }