/* IgniteX marketing site shell.
   Pulled the editor's palette so the homepage reads continuous with the
   product, then layered an editorial-magazine type system on top — big
   negative space, asymmetric grids, ALL CAPS rules, mono accent labels,
   a noise grain overlay, and a single bold accent (the brand orange/
   magenta hero gradient) used sparingly enough that it stays loud. */

:root {
  /* product palette (mirrored from host/index.html) */
  --bg:           #1a1d23;
  --bg-2:         #1f232a;
  --panel:        #23272e;
  --panel-2:      #2a2f37;
  --panel-3:      #323843;
  --border:       #101216;
  --border-soft:  #353a44;
  --text:         #e7eaf0;
  --text-soft:    #b3b9c4;
  --muted:        #7c828f;
  --accent:       #4d8bfd;
  --accent-soft:  #2a4d80;
  --good:         #5ec161;
  --bad:          #d75555;
  --warn:         #d99936;
  --folder:       #d99936;
  --script:       #4d8bfd;

  --font-ui: 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Consolas, monospace;
  --font-display: 'Instrument Serif', 'Times New Roman', serif;

  /* marketing flash */
  --hero-1:       #4d8bfd;
  --hero-2:       #a45cff;
  --hero-3:       #ff5ab6;
  --hero-glow:    rgba(77, 139, 253, 0.45);
  --grad-hero: linear-gradient(110deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%);
  --grad-soft: linear-gradient(135deg, rgba(77,139,253,0.13) 0%, rgba(164,92,255,0.10) 50%, rgba(255,90,182,0.08) 100%);
  --shadow-lift: 0 16px 48px rgba(0, 0, 0, 0.45);

  --rule: 1px solid var(--border-soft);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* CSS noise grain overlay — gives the matte editorial feel.
   Pure SVG (no asset request, no CORS), ~5% strength so it doesn't fight
   the type. Sits above the body but under all interactive layers. */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ----- Ambient drifting orbs -----
   Three large, heavily-blurred brand-colored blobs that drift slowly
   across the page on long, looping motion paths. Replaces the snake-
   stripes (too distracting). Calm by design: 60-120s loops, low
   opacity, big blur — reads as a living gradient wash rather than a
   shape you'd track with your eye. Lifts the page without competing
   for attention with the type or the mockup.
   Disabled under reduced-motion. */
.ve-bg-orbs {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ve-bg-orbs .orb {
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.32;
  will-change: transform;
}
.ve-bg-orbs .orb--1 {
  background: radial-gradient(circle, var(--hero-1) 0%, transparent 65%);
  top: -240px; left: -180px;
  animation: orbDrift1 90s ease-in-out infinite alternate;
}
.ve-bg-orbs .orb--2 {
  background: radial-gradient(circle, var(--hero-2) 0%, transparent 65%);
  top: 30%; right: -200px;
  width: 640px; height: 640px;
  opacity: 0.26;
  animation: orbDrift2 110s ease-in-out infinite alternate;
}
.ve-bg-orbs .orb--3 {
  background: radial-gradient(circle, var(--hero-3) 0%, transparent 65%);
  bottom: -260px; left: 35%;
  width: 680px; height: 680px;
  opacity: 0.22;
  animation: orbDrift3 130s ease-in-out infinite alternate;
}
@keyframes orbDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(40vw, 25vh, 0) scale(1.15); }
}
@keyframes orbDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-30vw, -20vh, 0) scale(1.08); }
}
@keyframes orbDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-20vw, -30vh, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ve-bg-orbs .orb { animation: none; }
}
@media (max-width: 700px) {
  /* On small screens these get noisier than helpful — keep the colour
     wash, lose the motion + one of the three blobs. */
  .ve-bg-orbs .orb { animation: none; filter: blur(110px); }
  .ve-bg-orbs .orb--3 { display: none; }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----- typographic primitives ----- */

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.02; letter-spacing: -0.03em; }
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 116px);
  letter-spacing: -0.04em;
}
h1 em {
  font-style: italic;
  font-family: var(--font-display);
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 72px);
  letter-spacing: -0.03em;
}
h2 em { font-style: italic; }
h3 {
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.lead {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text-soft);
  line-height: 1.5;
}

.gradient-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Inline gradient italics ("sentence", "control", "Yours forever", etc.).
   Swap Instrument Serif's airy 400 italic for Fraunces 700 italic. Both
   are serifs so it still feels related to the surrounding display type,
   but Fraunces has a much more confident weight and a distinctive soft-
   ball-terminal italic that reads as emphasis without being delicate.
   The hero h1 em and the .cta-final h2 em both have higher-specificity
   overrides earlier in the cascade, so this only affects the smaller
   inline em accents (manifesto, tools, pricing teaser, etc.). */
em.gradient-text {
  font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
  letter-spacing: -0.015em;
}

.rule-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}
.rule-label::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

/* ----- layout primitives ----- */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}
.section { padding: 120px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section + .section { border-top: 1px solid rgba(53, 58, 68, 0.4); }

/* ----- buttons ----- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.12s, box-shadow 0.18s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.btn--primary {
  background: var(--grad-hero);
  color: #fff;
  box-shadow: 0 8px 28px var(--hero-glow);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px var(--hero-glow); }
.btn--ghost {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--text);
}
.btn--ghost:hover { background: var(--panel-2); border-color: var(--accent-soft); }
.btn--solid {
  background: var(--text);
  color: var(--bg);
}
.btn--solid:hover { background: #fff; }
.btn--lg { padding: 14px 28px; font-size: 15px; }

/* ----- top nav ----- */

.navbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(26, 29, 35, 0.72);
  border-bottom: 1px solid rgba(53, 58, 68, 0.5);
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.brand__mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.nav__links {
  display: flex; align-items: center; gap: 28px;
  list-style: none; padding: 0; margin: 0;
}
.nav__links a {
  color: var(--text-soft);
  font-size: 14px;
  transition: color 0.12s;
}
.nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; align-items: center; gap: 10px; }

/* ===========================================================
   HERO — asymmetric, mockup-led
   =========================================================== */

.hero {
  position: relative;
  padding: 60px 0 80px;
  overflow: hidden;
}
.hero__bloom {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__bloom::before, .hero__bloom::after {
  content: ''; position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.45;
}
.hero__bloom::before {
  top: -200px; left: -120px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, var(--hero-1), transparent 65%);
}
.hero__bloom::after {
  bottom: -260px; right: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, var(--hero-3), transparent 65%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: end;
  position: relative;
  z-index: 2;
  padding-bottom: 56px;
}
.hero__copy { padding-bottom: 12px; }
.hero__copy .eyebrow-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hero__copy h1 {
  margin-top: 4px;
  font-size: clamp(48px, 8.5vw, 124px);
  /* Override the editorial italic serif for the hero only. The "whole
     damn game" headline reads cleaner and more confident in a thick
     geometric sans. Bricolage Grotesque has a wide aperture and stays
     legible at all sizes; Inter Black is the fallback if Bricolage is
     still loading or unavailable. */
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.hero__copy h1 em {
  /* The "whole damn" line keeps the gradient but loses the italic — it
     now reads as a regular weight contrast (heavier neighbour text
     wraps it), staying clean and confident. */
  font-style: normal;
  font-family: inherit;
  font-weight: 800;
}
.hero__copy .lead { margin: 28px 0 36px; max-width: 540px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__credits {
  display: flex; align-items: center; gap: 20px;
  margin-top: 36px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}
.hero__credits .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 8px; }

.hero__aside {
  display: flex; flex-direction: column; gap: 16px;
  align-self: start;          /* top-align, then nudge down to sit beside the title */
  margin-top: clamp(40px, 7vh, 84px);
}
.hero__nope-three {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  background: rgba(35, 39, 46, 0.6);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 16px;
  position: relative;
}
.hero__nope-three .row { display: flex; align-items: center; gap: 10px; }
.hero__nope-three .row + .row { margin-top: 8px; }
.hero__nope-three .strike {
  text-decoration: line-through;
  color: var(--muted);
}
.hero__nope-three .check { color: var(--good); }
.hero__nope-three .x { color: var(--bad); }

.hero__big-num {
  font-family: var(--font-display);
  font-size: clamp(50px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}
.hero__big-num em { font-style: italic; color: var(--accent); }
.hero__big-num + .hero__big-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  max-width: 280px;
  margin-top: 8px;
  line-height: 1.5;
}

/* The mockup stage in the hero — full width, pushed to bottom */
.hero__mockup-wrap {
  position: relative;
  z-index: 2;
  padding: 0 28px;
  max-width: 1400px;
  margin: 0 auto;
}
.hero__mockup-frame {
  position: relative;
  height: 640px;
  border-radius: 14px;
  overflow: visible;
}
.hero__mockup-frame > .ve-app { height: 100%; }

/* "Try it" hint that sits just above the chatbar inside the mockup.
   Lives inside .ve-viewport (which is given position:relative in engine.css
   so this anchors to the viewport column, not the whole mockup). A pill
   label + an SVG arrow stacked vertically, both gently bobbing toward
   the chatbar to draw the eye. No text-arrow glyphs, no awkward stem. */
.ve-try-hint {
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 8;
}
.ve-try-hint__pill {
  background: var(--grad-hero);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 28px var(--hero-glow);
  /* Subtle bob — moves toward the chatbar rhythmically so the eye
     follows it down to the input. */
  animation: tryBob 2.2s ease-in-out infinite;
}
.ve-try-hint__arrow {
  width: 18px; height: 22px;
  color: var(--hero-2);
  filter: drop-shadow(0 4px 12px var(--hero-glow));
  animation: tryBob 2.2s ease-in-out infinite;
  animation-delay: 0.18s;
}
@keyframes tryBob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ve-try-hint__pill, .ve-try-hint__arrow { animation: none; }
}
/* On narrow viewports the chatbar layout changes; hide the hint so it
   doesn't cover the input. */
@media (max-width: 700px) {
  .ve-try-hint { display: none; }
}

/* ===========================================================
   TICKER — "type one of these"
   =========================================================== */

.ticker {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-2);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
}
.ticker__inner {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: tickerSlide 50s linear infinite;
}
.ticker:hover .ticker__inner { animation-play-state: paused; }
@keyframes tickerSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 14px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.ticker__item::before {
  content: '>';
  color: var(--accent);
  font-weight: 700;
}
.ticker__lead {
  display: inline-flex; align-items: center; padding: 0 18px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ===========================================================
   MANIFESTO — big editorial statement
   =========================================================== */

.manifesto {
  padding: 140px 0;
  position: relative;
}
.manifesto__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}
.manifesto h2 {
  font-size: clamp(40px, 6vw, 92px);
  max-width: 880px;
  line-height: 1.0;
}
.manifesto h2 .strike {
  position: relative;
  display: inline-block;
}
.manifesto h2 .strike::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  top: 55%;
  height: 6px;
  background: var(--bad);
  transform: rotate(-3deg);
  border-radius: 2px;
}
.manifesto__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 56px;
}
.manifesto__cols p {
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.65;
}

/* ===========================================================
   SHOWCASE — side-by-side "prompt → result" cards
   =========================================================== */

.showcase {
  padding: 100px 0;
}
.showcase__heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 56px;
}
.showcase__heading p {
  max-width: 480px;
  text-align: right;
  color: var(--text-soft);
  font-size: 16px;
}
.showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.showcase__card {
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.showcase__card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-soft);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.showcase__prompt {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  background: var(--accent-soft);
}
.showcase__prompt::before {
  content: 'YOU TYPED';
  position: absolute; top: 12px; left: 24px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
}
.showcase__prompt .text {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.showcase__result {
  flex: 1;
  padding: 20px 24px;
}
.showcase__result::before {
  content: 'IGNITEX DID';
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.showcase__result ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
}
.showcase__result li {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px;
  align-items: baseline;
}
.showcase__result .plus { color: var(--good); }
.showcase__result .arrow { color: var(--accent); }
.showcase__result .com { color: var(--muted); }
.showcase__time {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--good);
  display: flex; align-items: center; gap: 6px;
}

/* ===========================================================
   COMPARE — Three.js side-by-side
   =========================================================== */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.compare__card {
  border-radius: 14px;
  padding: 28px;
  border: 1px solid var(--border-soft);
  background: var(--panel);
}
.compare__card.--bad {
  background: rgba(215, 85, 85, 0.04);
  border-color: rgba(215, 85, 85, 0.3);
}
.compare__card.--good {
  background: var(--grad-soft);
  border-color: rgba(77, 139, 253, 0.45);
  position: relative;
  overflow: hidden;
}
.compare__card.--good::after {
  content: ''; position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--hero-glow), transparent 70%);
  pointer-events: none;
}
.compare__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}
.compare__head .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.compare__head .tag.--bad { background: rgba(215,85,85,0.18); color: var(--bad); }
.compare__head .tag.--good { background: rgba(94,193,97,0.18); color: var(--good); }
.compare pre {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--text-soft);
}
.compare pre .kw { color: #ff8de7; }
.compare pre .fn { color: #82c1ff; }
.compare pre .str { color: #a4d97a; }
.compare pre .com { color: var(--muted); font-style: italic; }
.compare .footer {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-soft);
}
.compare__card.--good .footer { color: var(--text); }

/* ===========================================================
   PRICING — single bar with three tiers, less generic
   =========================================================== */

.pricing-bar {
  margin-top: 40px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}
.pricing-tier {
  padding: 36px 32px;
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.pricing-tier:last-child { border-right: 0; }
.pricing-tier.--featured {
  background: var(--grad-soft);
  border-top: 3px solid var(--hero-2);
  margin-top: -3px;
}
.pricing-tier.--featured::before {
  content: 'POPULAR';
  position: absolute;
  top: -1px; right: 24px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #fff;
  background: var(--grad-hero);
  padding: 4px 10px;
  border-radius: 0 0 6px 6px;
}
.pricing-tier .name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.pricing-tier .num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 4px 0 6px;
}
.pricing-tier .num .cur { font-size: 28px; opacity: 0.55; }
.pricing-tier .num .per {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 4px;
}
.pricing-tier .desc { color: var(--text-soft); font-size: 14px; margin-bottom: 14px; min-height: 42px; }
.pricing-tier ul {
  list-style: none;
  padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  color: var(--text-soft);
}
.pricing-tier li { display: flex; gap: 8px; }
.pricing-tier li svg {
  width: 13px; height: 13px;
  color: var(--good);
  flex-shrink: 0;
  margin-top: 4px;
}
.pricing-tier .btn { align-self: flex-start; }

/* ===========================================================
   ONE-TIME PURCHASE CARD — restrained red/black/yellow.
   Sits in the dark site shell rather than blasting over it. Red is the
   panel accent, yellow is the primary highlight (price, CTA), black
   reinforces structure. Same editorial typography (Instrument Serif
   display, mono accent labels) as the rest of the page so the panel
   reads as part of the site, not a Black Friday email.
   =========================================================== */

:root {
  --offer-red:      #c11414;
  --offer-red-deep: #5d0606;
  --offer-yellow:   #ffd028;
  --offer-yellow-2: #f0a420;
  --offer-cream:    #fff4c2;
  --offer-black:    #0a0a0a;
}

.offer-card {
  position: relative;
  border-radius: 18px;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 56px);
  margin-top: 40px;
  overflow: hidden;
  color: var(--text);
  /* Calm, panel-like background with a barely-there warm tint so the
     card feels premium rather than scammy. The yellow only appears in
     the price + CTA, NOT as a body wash. */
  background: var(--panel);
  border: 1px solid var(--border-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* Thin yellow accent line along the top — single tasteful accent */
.offer-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--offer-yellow);
  z-index: 2;
}

.offer-card > * { position: relative; z-index: 2; }

.offer-card__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Badge — restrained mono label, NO pulse or hot-red background. */
.offer-card__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 208, 40, 0.08);
  color: var(--offer-yellow);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(255, 208, 40, 0.32);
}
.offer-card__badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--offer-yellow);
}

/* Trust strip — quietly placed below the offer-card, communicates the
   "this is safe to buy" signals: refund, secure payment, ownership. */
.offer-card__trust {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 18px 24px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.offer-card__trust .trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.3;
}
.offer-card__trust .trust-item svg {
  width: 18px; height: 18px;
  color: var(--offer-yellow);
  flex-shrink: 0;
}
.offer-card__trust .trust-item strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
}
.offer-card__trust .trust-item span.sub {
  font-size: 12px;
  color: var(--muted);
}

/* Headline — same display serif as everything else, with yellow accent */
.offer-card h2 {
  margin: 22px 0 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.offer-card h2 em {
  font-style: italic;
  color: var(--offer-yellow);
}

.offer-card p.subtitle {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 480px;
}

/* ----- Price column ----- */
.offer-card__price {
  text-align: center;
}
.offer-card__price .now {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(88px, 11vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--offer-yellow);
  font-weight: 400;
}
.offer-card__price .now .cur {
  font-size: 0.4em;
  vertical-align: top;
  opacity: 0.7;
  margin-right: 4px;
}
.offer-card__price .was-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.offer-card__price .was {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--offer-red);
  text-decoration-thickness: 2px;
}
.offer-card__price .save {
  display: inline-block;
  padding: 4px 10px;
  background: var(--offer-red);
  color: var(--offer-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
.offer-card__price .terms {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
}
.offer-card__price .terms .sep {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--offer-yellow);
  margin: 0 8px;
  vertical-align: middle;
}

/* Subtle yellow star accents — small and static (no more twinkling). */
.offer-card__star {
  position: absolute;
  color: var(--offer-yellow);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.offer-card__star.--s1 { top: 18px; left: 18px; width: 16px; }
.offer-card__star.--s2 { top: 32px; right: 18px; width: 12px; opacity: 0.4; }
.offer-card__star.--s3 { bottom: 26px; left: 28px; width: 14px; opacity: 0.45; }
.offer-card__star.--s4 { bottom: 18px; right: 32px; width: 11px; opacity: 0.4; }
.offer-card__star.--s5,
.offer-card__star.--s6 { display: none; }

/* Red arrow accent pointing at the CTA. One, static, restrained. */
.offer-card__arrow {
  display: none;     /* simpler version: no floating arrows */
}

/* Features list */
.offer-card__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  list-style: none;
  padding: 0; margin: 0 0 28px;
}
.offer-card__features li {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.4;
}
.offer-card__features li svg {
  width: 14px; height: 14px;
  flex-shrink: 0; margin-top: 3px;
  color: var(--offer-yellow);
}

/* CTA — yellow button with the chunky black offset shadow.
   This is the one place we keep the classic retail "stamped sticker"
   feel — the rest of the card is restrained, so the button reads as
   the obvious primary action without the whole panel screaming. */
.offer-card__cta-row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.btn--offer {
  /* Yellow theme used for EVERY "Buy now" / purchase CTA across the
     site — nav, hero, offer card, final CTA. Base style is the small
     nav-button size; combine with .btn--lg to scale up to the hero/
     offer-card variant. Subtle warm gradient (slightly amber-leaning)
     so it reads gold rather than highlighter against the dark panel.
     Chunky black drop-shadow stays as the identifying "stamp" look. */
  background: linear-gradient(180deg, var(--offer-yellow) 0%, var(--offer-yellow-2) 100%) !important;
  color: var(--offer-black) !important;
  border: 2px solid var(--offer-black) !important;
  box-shadow: 3px 3px 0 var(--offer-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
/* Large variant — used in hero, final CTA, offer card. Adds bigger
   padding + a chunkier drop shadow to match the "main action" weight. */
.btn--offer.btn--lg {
  font-size: 16px !important;
  padding: 14px 28px !important;
  box-shadow: 5px 5px 0 var(--offer-black) !important;
  letter-spacing: 0.05em;
}
.btn--offer:hover {
  background: linear-gradient(180deg, #ffdf66 0%, var(--offer-yellow) 100%) !important;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--offer-black) !important;
}
.btn--offer.btn--lg:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--offer-black) !important;
}
.btn--offer:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--offer-black) !important;
}
.btn--offer.btn--lg:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--offer-black) !important;
}

/* "I already bought it" — keep ghost styling but with red border to fit theme */
.offer-card__cta-row .btn--ghost {
  border-color: rgba(255, 244, 194, 0.32) !important;
  color: var(--text) !important;
}
.offer-card__cta-row .btn--ghost:hover {
  border-color: var(--offer-yellow) !important;
  background: rgba(255, 208, 40, 0.08) !important;
}

.offer-card__smallprint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-soft);
  max-width: 600px;
  line-height: 1.55;
  opacity: 0.78;
}
.offer-card__smallprint a {
  color: var(--offer-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .offer-card__grid { grid-template-columns: 1fr; gap: 32px; }
  .offer-card__features { grid-template-columns: 1fr; }
  .offer-card__price { text-align: left; }
  .offer-card__price .was-row { justify-content: flex-start; }
}

/* ===========================================================
   TOOLS GRID — "the control you wish Three.js had"
   =========================================================== */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.tool-card {
  padding: 28px 24px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-soft);
  box-shadow: 0 12px 36px rgba(77, 139, 253, 0.14);
}
.tool-card .ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--grad-soft);
  border: 1px solid var(--accent-soft);
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--accent);
}
.tool-card .ico svg { width: 20px; height: 20px; }
.tool-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.tool-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
@media (max-width: 980px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION-END BUY STRIP — small CTA at the bottom of each section
   so the buy action is always reachable. Each section uses a
   different clever phrasing to read as part of the section's voice
   rather than a stamped "Buy now" everywhere.
   =========================================================== */

.section-cta {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.section-cta__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-cta a.btn--cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  /* Same amber-leaning gradient as the offer card buttons so they read
     as a family rather than two flavors of yellow. */
  background: linear-gradient(180deg, var(--offer-yellow) 0%, var(--offer-yellow-2) 100%);
  color: var(--offer-black);
  border: 2px solid var(--offer-black);
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 var(--offer-black);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.section-cta a.btn--cta:hover {
  background: linear-gradient(180deg, #ffdf66 0%, var(--offer-yellow) 100%);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--offer-black);
}
.section-cta a.btn--cta:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--offer-black);
}

/* ===========================================================
   FAQ + final CTA + footer
   =========================================================== */

.faq { display: flex; flex-direction: column; gap: 10px; max-width: 800px; margin: 32px auto 0; }
.faq details {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 20px;
  transition: border-color 0.18s, background 0.18s;
}
.faq details[open] { border-color: var(--accent-soft); background: var(--panel-2); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--muted); transition: transform 0.18s, color 0.18s; }
.faq details[open] summary::after { content: '−'; color: var(--accent); }
.faq p { margin: 12px 0 0; color: var(--text-soft); font-size: 14px; }

/* Required so CSS can interpolate the conic-gradient's start angle for
   the spinning border. Without this, the angle would jump in steps and
   the rotation wouldn't be smooth. Falls back gracefully (no spin) in
   the few browsers that don't yet support @property. */
@property --vibe-spin-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Final CTA. Quiet dark panel matching the rest of the site, with a
   thin yellow top accent so it ties to the offer-card visually. On
   hover the accent turns into a yellow segment that races around the
   perimeter. The headline uses the same Bricolage Grotesque as the
   hero so the pitch reads confident rather than magazine-y. */
.cta-final {
  position: relative;
  border-radius: 18px;
  padding: 72px clamp(28px, 5vw, 56px);
  text-align: left;
  margin: 80px auto;
  max-width: 1200px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
/* Idle state: a flat yellow stripe at the top. */
.cta-final::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--offer-yellow);
  z-index: 2;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
/* Hover state: a conic-gradient ring that runs along the panel's
   perimeter. The mask trick (content-box vs border-box) punches out
   the interior so only the 2px ring shows. Rotating the conic's
   start angle makes the yellow segment "spin" around the box. */
.cta-final::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--vibe-spin-angle, 0deg),
    var(--offer-yellow) 0deg,
    var(--offer-yellow) 50deg,
    transparent 110deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 2;
}
.cta-final:hover::before { opacity: 0; }
.cta-final:hover::after {
  opacity: 1;
  animation: cta-spin 2.6s linear infinite;
}
@keyframes cta-spin {
  to { --vibe-spin-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-final:hover::after { animation: none; }
}

.cta-final > * { position: relative; z-index: 3; }   /* content sits above the border ring */
.cta-final h2 {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 620px;
  margin: 0;
}
.cta-final h2 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
  color: var(--offer-yellow);
}
.cta-final .actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 240px; }
.cta-final .actions .btn--ghost { text-align: center; }

/* ===========================================================
   NEWSLETTER SIGNUP — final-mile soft conversion above the footer.
   Anyone who scrolled past the Final CTA without buying still gets a
   way to stay in the loop. Subtle treatment so it doesn't compete
   with the buy CTA, but anchored with the brand gradient on the
   primary action so it reads as deliberate.
   =========================================================== */

.newsletter {
  padding: 64px 0 56px;
  border-top: 1px solid rgba(53, 58, 68, 0.5);
  position: relative;
}
.newsletter__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}
.newsletter__copy h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
  color: var(--text);
}
.newsletter__copy h3 em {
  font-style: italic;
  color: var(--accent);
}
.newsletter__copy p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 420px;
}
.newsletter__form {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.newsletter__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.newsletter__input {
  flex: 1;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  outline: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.newsletter__input::placeholder { color: var(--muted); }
.newsletter__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 139, 253, 0.18);
}
.newsletter__submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--grad-hero);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 24px var(--hero-glow);
  transition: transform 0.12s, box-shadow 0.18s;
}
.newsletter__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px var(--hero-glow);
}
.newsletter__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.newsletter__legal {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.newsletter__legal a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
/* Inline status — replaces the form body when submit succeeds / fails. */
.newsletter__status {
  display: none;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.newsletter__status.--ok {
  background: rgba(94, 193, 97, 0.12);
  border: 1px solid rgba(94, 193, 97, 0.4);
  color: var(--good);
}
.newsletter__status.--err {
  background: rgba(215, 85, 85, 0.12);
  border: 1px solid rgba(215, 85, 85, 0.4);
  color: var(--bad);
}
.newsletter__status.is-visible { display: block; }
.newsletter__form.is-hidden { display: none; }

@media (max-width: 800px) {
  .newsletter__inner { grid-template-columns: 1fr; gap: 28px; }
}

.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 32px;
  color: var(--muted);
  font-size: 13px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(53,58,68,0.5);
  margin-bottom: 28px;
}
.footer__top h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 14px;
  font-weight: 600;
}
.footer__top ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__top a { color: var(--muted); }
.footer__top a:hover { color: var(--text); }
.footer__top .blurb { font-size: 14px; color: var(--text-soft); line-height: 1.6; max-width: 280px; margin-top: 12px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ===========================================================
   PAYWALL MODAL
   =========================================================== */

.paywall {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 16, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.paywall.show { display: flex; animation: paywallFade 0.18s ease-out; }
@keyframes paywallFade { from { opacity: 0; } to { opacity: 1; } }
.paywall__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid rgba(77, 139, 253, 0.45);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: paywallRise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
@keyframes paywallRise { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.paywall__close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  border-radius: 6px;
  font-size: 16px;
}
.paywall__close:hover { color: var(--text); background: var(--panel-2); }
.paywall__icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: var(--grad-hero);
  display: grid; place-items: center;
  color: #fff;
  margin: 0 auto 18px;
  box-shadow: 0 16px 36px var(--hero-glow);
}
.paywall__icon svg { width: 28px; height: 28px; }
.paywall h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.paywall p { color: var(--text-soft); margin: 0 0 24px; font-size: 15px; line-height: 1.55; }
.paywall__cta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.paywall__cta .btn { justify-content: center; }
.paywall__or {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 18px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.paywall__or::before, .paywall__or::after {
  content: ''; flex: 1; height: 1px; background: var(--border-soft);
}
.paywall__legal {
  font-size: 12px;
  color: var(--muted);
  margin-top: 22px;
}
.paywall__legal a { color: var(--accent); }

/* ===========================================================
   AUTH + PRICING (subpages)
   =========================================================== */

.auth-shell {
  min-height: calc(100vh - 64px);
  display: grid; place-items: center;
  padding: 64px 28px;
  position: relative;
}
.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: var(--shadow-lift);
}
.auth-card h1 { font-family: var(--font-display); font-size: 36px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--text-soft); }
.field input {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
  outline: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77,139,253,0.18); }
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.social button {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px;
  color: var(--text-soft);
  display: grid; place-items: center;
}
.social button:hover { border-color: var(--accent-soft); color: var(--text); background: var(--panel-3); }
.social svg { width: 18px; height: 18px; }

.pricing-hero {
  padding: 80px 0 24px;
  text-align: center;
  position: relative;
}
.pricing-hero .hero__bloom { position: absolute; inset: 0; }
.pricing-toggle {
  display: inline-flex;
  margin: 18px 0 4px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.pricing-toggle button {
  border: 0; background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-soft);
}
.pricing-toggle button.active { background: var(--accent-soft); color: #fff; }
.compare-table {
  margin-top: 64px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
}
.compare-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.compare-table th { background: var(--panel-2); font-weight: 600; color: var(--text); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td.center, .compare-table th.center { text-align: center; }
.compare-table .yes { color: var(--good); }
.compare-table .no  { color: var(--muted); opacity: 0.6; }

/* ----- scroll reveal ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ----- responsive ----- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .hero__copy h1 { font-size: clamp(48px, 12vw, 90px); }
  .hero__aside { display: none; }
  .showcase__grid, .manifesto__cols, .compare { grid-template-columns: 1fr; }
  .pricing-bar { grid-template-columns: 1fr; }
  .pricing-tier { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .pricing-tier:last-child { border-bottom: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .nav__links { display: none; }
  .section { padding: 80px 0; }
  .hero { padding: 30px 0 60px; }
  .hero__mockup-frame { height: 540px; }
  .showcase__heading { grid-template-columns: 1fr; }
  .showcase__heading p { text-align: left; }
  .cta-final { grid-template-columns: 1fr; padding: 60px 26px; }
  .footer__top { grid-template-columns: 1fr; gap: 24px; }
  .paywall__cta { grid-template-columns: 1fr; }
}

/* ===========================================================
   HERO LIVE DEMO — self-running "prompt → physics" showcase
   that fills the hero's right column. Dependency-free; the JS
   lives inline at the end of index.html. Respects reduced motion.
   =========================================================== */
.ve-demo {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #1d2128 0%, #14171c 100%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lift);
}
.ve-demo::before {                 /* gradient outline ring */
  content: '';
  position: absolute; inset: 0;
  border-radius: 16px; padding: 1px;
  background: var(--grad-hero);
  opacity: 0.55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ve-demo__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.02);
  position: relative; z-index: 1;
}
.ve-demo__dots { display: flex; gap: 6px; }
.ve-demo__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.ve-demo__dots i:nth-child(1) { background: #ff5f57; }
.ve-demo__dots i:nth-child(2) { background: #febc2e; }
.ve-demo__dots i:nth-child(3) { background: #28c840; }
.ve-demo__title {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-soft); letter-spacing: 0.04em;
}
.ve-demo__live {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #7bd07e;
}
.ve-demo__live b {
  width: 7px; height: 7px; border-radius: 50%; background: #5ec161;
  animation: ve-demo-pulse 1.6s infinite;
}
@keyframes ve-demo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(94,193,97,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(94,193,97,0); }
  100% { box-shadow: 0 0 0 0 rgba(94,193,97,0); }
}
.ve-demo__stage {
  position: relative; height: 300px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(77,139,253,0.18), transparent 60%),
    linear-gradient(180deg, #14171c, #0e1115);
}
.ve-demo__stage::after {           /* faint blueprint grid, fading in from top */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
  mask-image: linear-gradient(180deg, transparent, #000 35%);
}
.ve-demo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ve-demo__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(77,139,253,0.6), rgba(164,92,255,0.6), transparent);
}
.ve-demo__prompt {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  border-top: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.28);
  font-family: var(--font-mono); font-size: 13px;
  position: relative; z-index: 1;
}
.ve-demo__chev { color: var(--accent); font-weight: 700; letter-spacing: -1px; }
.ve-demo__text { color: var(--text); white-space: nowrap; overflow: hidden; }
.ve-demo__caret {
  width: 7px; height: 15px; background: var(--accent);
  display: inline-block; margin-left: 1px; vertical-align: -2px; border-radius: 1px;
  animation: ve-demo-caret 1s steps(1) infinite;
}
@keyframes ve-demo-caret { 50% { opacity: 0; } }
.ve-demo__send {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--grad-hero); color: #fff; font-size: 12px;
}
.ve-demo__cap {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  color: var(--muted); letter-spacing: 0.01em;
}
.ve-demo__cap strong { color: var(--text-soft); }
@media (max-width: 880px) { .ve-demo__stage { height: 240px; } }
@media (prefers-reduced-motion: reduce) {
  .ve-demo__live b, .ve-demo__caret { animation: none; }
}

/* Ambient-art variant of the hero card: no editor chrome, taller stage so the
   drifting wireframes have room to breathe. */
.ve-demo--art .ve-demo__stage { height: 360px; }
@media (max-width: 880px) { .ve-demo--art .ve-demo__stage { height: 300px; } }

/* Hero toy is an interactive game now: clickable canvas, a touch more height. */
.ve-demo__canvas { cursor: pointer; }
.ve-demo__stage { height: 322px; }
@media (max-width: 880px) { .ve-demo__stage { height: 270px; } }