/* ==========================================================================
   CMStack - shared design system · "Vercel light"
   White canvas, Geist grotesk, zinc neutrals, a signature animated spectral
   gradient as the only color. Per-stack pages override --g1/--g2/--g3 + --accent.
   ========================================================================== */

@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: light;

  --bg:    #ffffff;
  --bg-2:  #fafafa;   /* alternating sections */
  --bg-3:  #f4f4f5;   /* sunken wash */
  --fg:    #0a0a0a;   /* near-black text */
  --fg-2:  #3f3f46;   /* secondary */
  --muted: #71717a;   /* body muted (zinc-500) */
  --faint: #a1a1aa;   /* captions (zinc-400) */
  --line:  #e4e4e7;   /* hairline (zinc-200) */
  --line-2:#d4d4d8;   /* stronger hairline */

  /* Signature spectral gradient (hub). Stacks override these three. */
  --g1: #2563eb;
  --g2: #4f46e5;
  --g3: #7c3aed;
  --accent:      #4f46e5;
  --accent-tint: rgba(79, 70, 229, 0.08);

  --grad: linear-gradient(100deg, var(--g1), var(--g2) 45%, var(--g3));

  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 76rem;
  --radius: 12px;

  --shadow-sm: 0 1px 2px rgba(9,9,11,0.05), 0 1px 1px rgba(9,9,11,0.04);
  --shadow-md: 0 2px 4px rgba(9,9,11,0.04), 0 12px 28px -12px rgba(9,9,11,0.18);
  --shadow-lg: 0 4px 8px rgba(9,9,11,0.05), 0 32px 64px -24px rgba(9,9,11,0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--accent-tint); color: var(--fg); }

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

/* ---------------------------------------------------------------- backdrop */

.grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); }
body.grain::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.75rem; }
.rule { height: 1px; background: var(--line); }

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); position: relative; }
.section--panel { background: var(--bg-2); border-block: 1px solid var(--line); }
.section--wash { position: relative; }

.section-head { max-width: 48rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 1.1rem; }
.section-head .lede { color: var(--muted); font-size: 1.15rem; max-width: 42rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--muted); margin-bottom: 1.1rem;
}
.eyebrow-idx { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; font-weight: 600; }

/* ---------------------------------------------------------------- surfaces / chips */

.glass {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: var(--bg); color: var(--fg-2);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 0.8125rem; font-weight: 500; font-family: var(--font-mono);
}
.chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--grad); }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.62rem; border-radius: 6px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg);
  font-family: var(--font-mono);
}
.badge--ready { color: #047857; border-color: #6ee7b7; background: #ecfdf5; }
.badge--planned { color: var(--muted); }

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

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--sm { height: 2.3rem; padding-inline: 0.95rem;  font-size: 0.875rem; }
.btn--md { height: 2.75rem; padding-inline: 1.3rem;  font-size: 0.9375rem; }
.btn--lg { height: 3.1rem; padding-inline: 1.6rem;   font-size: 1rem; }

.btn--primary { background: var(--fg); color: var(--bg); box-shadow: var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: #1f1f23; }
.btn--ghost { background: var(--bg); color: var(--fg); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--fg); transform: translateY(-1px); }
.btn--soft { background: var(--bg-3); color: var(--fg); }
.btn--soft:hover { background: var(--line); }

.focus-ring { outline: none; }
.focus-ring:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 75%, transparent);
  border-radius: 8px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 30;
  height: 4.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: max(1.75rem, calc((100% - var(--maxw)) / 2));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--fg); }
.logo-mark { width: 1.7rem; height: 1.7rem; border-radius: 7px; background: var(--grad); }
.logo-mark span { display: none; }
.logo-word { }
.logo-tag {
  margin-left: 0.4rem; padding: 0.12rem 0.5rem; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-2);
  background: var(--bg-3); border: 1px solid var(--line);
}
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.nav-link { color: var(--muted); font-size: 0.9rem; font-weight: 500; transition: color .2s var(--ease); }
.nav-link:hover { color: var(--fg); }
.nav-back { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.nav-back:hover { color: var(--fg); }
@media (max-width: 860px) { .site-nav .nav-link { display: none; } }

/* ---------------------------------------------------------------- hero */

.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 5.5rem); overflow: hidden; }
.hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero .container { position: relative; z-index: 1; }
.hero-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
@media (max-width: 940px) { .hero-layout { grid-template-columns: 1fr; gap: 2.5rem; } .hero-visual { display: none; } }
.hero-content { max-width: 38rem; }
.hero-title { font-size: clamp(2.6rem, 6.4vw, 4.6rem); font-weight: 700; letter-spacing: -0.04em; margin: 1.4rem 0 1.4rem; }
.hero-title-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { max-width: 34rem; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.hero-cue { margin-top: 2.5rem; font-size: 0.8rem; color: var(--faint); font-family: var(--font-mono); }
.hero-visual { position: relative; }
/* animated spectral gradient ring on the hero terminal (signature motion) */
.hero-visual .terminal { position: relative; }
.hero-visual .terminal::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1.5px; z-index: 3;
  background: conic-gradient(from var(--ga), var(--g1), var(--g2), var(--g3), var(--g1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ga-spin 7s linear infinite; pointer-events: none;
}

/* animated spectral gradient border wrapper (signature) */
.grad-border { position: relative; border-radius: 16px; }
.grad-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ga), var(--g1), var(--g2), var(--g3), var(--g1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ga-spin 7s linear infinite;
}
@keyframes ga-spin { to { --ga: 360deg; } }

/* ---------------------------------------------------------------- grids / cards */

.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.module-grid  { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.step-grid    { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.stack-grid   { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.card-pad { padding: 1.6rem; }
.card-title { color: var(--fg); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.card-body { color: var(--muted); font-size: 0.95rem; }

.feature-card { position: relative; overflow: hidden; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.feature-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.feature-card:hover::after { transform: scaleX(1); }

.icon-wrap {
  width: 2.6rem; height: 2.6rem; border-radius: 9px; margin-bottom: 1.1rem;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line);
}
.icon-wrap svg { width: 1.25rem; height: 1.25rem; }

.step-num {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem;
  display: inline-block; margin-bottom: 1rem; padding: 0.2rem 0.6rem; border-radius: 6px;
  background: var(--bg-3); border: 1px solid var(--line); color: transparent;
  background-image: var(--grad); -webkit-background-clip: text; background-clip: text;
}

/* stack card */
.stack-card { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.6rem; }
.stack-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.stack-card-top { display: flex; align-items: center; gap: 0.6rem; }
.stack-dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }
.stack-name { font-family: var(--font-display); font-weight: 600; color: var(--fg); font-size: 1.2rem; letter-spacing: -0.02em; margin-right: auto; }
.stack-runtime { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.stack-arrow { margin-top: auto; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.35rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- code / terminal */

.code { font-family: var(--font-mono); font-size: 0.875rem; background: #0a0a0a; border-radius: 10px; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow-x: auto; box-shadow: var(--shadow-md); }
.code code { white-space: pre; color: #ededed; }
.code-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--faint); margin-bottom: 0.5rem; }
.code-copy {
  flex: none; cursor: pointer; border: 1px solid rgba(255,255,255,0.18); background: transparent;
  color: #d4d4d8; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  padding: 0.32rem 0.62rem; border-radius: 6px; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.code-copy:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

.terminal { border-radius: 12px; background: #0a0a0a; overflow: hidden; box-shadow: var(--shadow-lg); }
.terminal-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.terminal-dots { display: flex; gap: 0.42rem; }
.terminal-dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgba(255,255,255,0.18); }
.terminal-title { font-family: var(--font-mono); font-size: 0.72rem; color: #a1a1aa; margin-left: 0.45rem; }
.terminal-body { padding: 1.05rem 1.15rem; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75; color: #ededed; white-space: pre-wrap; }
.terminal-body .pr { color: #818cf8; }
.terminal-body .ok { color: #34d399; }
.terminal-body .dim { color: #71717a; }

/* hero floating card */
.hero-card { position: absolute; right: -6px; bottom: -14px; width: 56%; padding: 0.95rem 1.05rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.hero-card-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--fg-2); font-weight: 500; }
.hero-card-row + .hero-card-row { margin-top: 0.6rem; }
.hero-card-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--grad); }
.hero-card-meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--faint); }

/* spec strip */
.spec-strip { margin-top: 2.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); overflow: hidden; }
.spec-item { padding: 1.15rem 1.35rem; border-right: 1px solid var(--line); }
.spec-item:last-child { border-right: 0; }
.spec-num { font-family: var(--font-display); font-weight: 700; font-size: 1.85rem; line-height: 1; color: var(--fg); letter-spacing: -0.03em; }
.spec-num em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spec-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); margin-top: 0.5rem; }

/* statement */
.statement { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.18; letter-spacing: -0.03em; color: var(--fg); max-width: 52rem; }
.statement em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

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

.notify { max-width: 36rem; }
.notify-form { display: grid; gap: 0.9rem; }
.field label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; font-weight: 500; }
.field input { width: 100%; height: 2.95rem; padding-inline: 0.95rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line-2); border-radius: 10px; font-family: var(--font-sans); font-size: 0.95rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input::placeholder { color: var(--faint); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field input.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notify-error { color: #dc2626; font-size: 0.85rem; min-height: 1.1rem; }
.notify-fine { color: var(--faint); font-size: 0.8rem; margin-top: 0.4rem; }
.notify-success { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.3rem; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); }
.notify-success svg { color: #059669; }

/* ---------------------------------------------------------------- final CTA */

.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(2.3rem, 5.4vw, 3.75rem); margin-bottom: 1.3rem; }
.final-cta .hero-cta { justify-content: center; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); padding-block: 3.5rem 3rem; color: var(--muted); background: var(--bg-2); }
.footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem 1.5rem; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-brand { max-width: 22rem; }
.footer-brand .card-body { margin-top: 0.7rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--faint); margin: 0 0 0.9rem; font-weight: 500; }
.footer-col a { display: block; color: var(--muted); font-size: 0.9rem; padding: 0.22rem 0; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.footer-meta { font-size: 0.85rem; color: var(--faint); }
.footer-meta a:hover { color: var(--fg); }
.footer-social { display: flex; gap: 0.8rem; }
.footer-social a { color: var(--muted); transition: color .2s var(--ease); }
.footer-social a:hover { color: var(--fg); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.3rem; font-size: 0.9rem; }
.footer-links a:hover { color: var(--fg); }

/* ---------------------------------------------------------------- reveal */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .stack-card, .glass, .feature-card { transition: none !important; }
  .feature-card::after { transition: none !important; }
  .grad-border::before, .hero-visual .terminal::before { animation: none !important; }
  .tier--featured::before { animation: none !important; }
}

/* ==========================================================================
   FINAL - variant A (Stripe-vivid) + requested changes
   ========================================================================== */

/* Hero color lives in a contained, ANIMATED gradient panel (21st.dev-style
   flowing gradient), not a full-bleed canvas glow. */
.hero-grid { display: none; }
.hero-title { font-size: clamp(2.7rem, 6.4vw, 4.7rem); }

/* (#2) no multicolor text in the hero headline - solid ink */
.hero .hero-title-grad { background: none; -webkit-text-fill-color: var(--fg); color: var(--fg); }

.hero-visual {
  position: relative; border-radius: 26px; padding: 30px; min-height: 440px;
  display: flex; align-items: flex-end; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 68%, #0b1020), var(--g2) 55%, var(--g3));
  box-shadow: 0 50px 120px -45px color-mix(in srgb, var(--g2) 60%, transparent);
}
/* (#1) animated flowing gradient - two soft blobs drifting (transform/opacity only) */
.hero-visual::before, .hero-visual::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(46px);
  mix-blend-mode: screen; z-index: 0; pointer-events: none;
}
.hero-visual::before { width: 66%; height: 76%; left: -12%; top: -18%; background: radial-gradient(circle, var(--g1), transparent 60%); animation: heroA 15s ease-in-out infinite; }
.hero-visual::after  { width: 70%; height: 82%; right: -14%; bottom: -20%; background: radial-gradient(circle, var(--g3), transparent 60%); animation: heroB 19s ease-in-out infinite; }
@keyframes heroA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20%,14%) scale(1.18); } }
@keyframes heroB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-16%,-12%) scale(1.12); } }

.hero-visual .terminal {
  position: relative; z-index: 1; width: 100%;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.32); box-shadow: 0 24px 60px -30px rgba(0,0,0,0.5);
}
.hero-visual .terminal::before { display: none; }
.hero-visual .terminal-bar { border-bottom-color: rgba(255,255,255,0.22); }
.hero-visual .terminal-title { color: rgba(255,255,255,0.8); }
.hero-visual .terminal-body { color: #ffffff; }
.hero-visual .terminal-body .pr { color: #bfdbfe; }
.hero-visual .terminal-body .ok { color: #a7f3d0; }
.hero-visual .terminal-body .dim { color: rgba(255,255,255,0.7); }
.hero-visual .hero-card { z-index: 2; right: 22px; bottom: 22px; width: 60%; background: rgba(255,255,255,0.94); border-color: rgba(255,255,255,0.7); }

/* (#6) early-access form centered, not left */
#early-access .section-head { margin-inline: auto; text-align: center; }
#early-access .notify { margin-inline: auto; }

/* (#3) subtle parallax between sections (scroll-driven; modern browsers only) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-visual { animation: heroParallax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes heroParallax { to { transform: translateY(-54px); } }
    .section--panel > .container, .section--wash > .container { animation: secParallax linear both; animation-timeline: view(); animation-range: entry 0% entry 48%; }
    @keyframes secParallax { from { transform: translateY(38px); } to { transform: translateY(0); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual::before, .hero-visual::after { animation: none !important; }
}

/* ==========================================================================
   REVISION 2 - no gradient text
   ========================================================================== */

.hero-content { max-width: 46rem; }

/* no gradient TEXT anywhere - make all clipped-gradient text solid */
.hero-title-grad, .final-cta .hero-title-grad,
.eyebrow-idx, .spec-num em, .statement em, .stack-arrow, .grad-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
.hero-title-grad, .final-cta .hero-title-grad { color: var(--fg) !important; }
.eyebrow-idx { color: var(--muted) !important; }
.spec-num em, .statement em { color: var(--accent) !important; }
.stack-arrow { color: var(--accent) !important; }
.step-num {
  background-image: none !important; background-color: var(--bg-3) !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important;
}

/* ==========================================================================
   Hero typewriter + luxury logo mark
   ========================================================================== */
.type-word { color: var(--fg); }
.type-caret {
  display: inline-block; width: 0.06em; height: 0.84em; border-radius: 1px;
  background: var(--fg); margin-left: 0.05em; vertical-align: -0.04em;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-caret { animation: none; } }

/* luxury layered-stack mark (mono ink tile + white layers) */
.logo-mark {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%230a0a0a'/%3E%3Cpath d='M16 7 L25 12 L16 17 L7 12 Z' fill='%23ffffff'/%3E%3Cpath d='M7 15.5 L16 20.5 L25 15.5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M7 19.5 L16 24.5 L25 19.5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E") center / cover no-repeat !important;
  border-radius: 7px;
}

/* ==========================================================================
   WordMCPress-only additions - pricing tiers + hero chat mock
   ========================================================================== */

/* ---------------------------------------------------------------- A) pricing tiers */

.tier-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); align-items:start; }
.tier { padding:1.9rem; display:flex; flex-direction:column; gap:.5rem; }
.tier-name { font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--fg); letter-spacing:-.02em; }
.tier-tag { font-family:var(--font-mono); font-size:.75rem; color:var(--muted); }
.tier-amount { font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--fg); letter-spacing:-.03em; margin:.4rem 0 .3rem; line-height:1; }
.tier-amount em { font-style:normal; font-size:1rem; font-weight:600; color:var(--muted); font-family:var(--font-mono); margin-left:.35rem; }
.tier-list { list-style:none; margin:.9rem 0 1.4rem; padding:0; display:grid; gap:.6rem; }
.tier-list li { position:relative; padding-left:1.5rem; font-size:.92rem; color:var(--fg-2); }
.tier-list li::before { content:""; position:absolute; left:0; top:.42em; width:.55rem; height:.55rem; border-radius:3px; background:var(--grad); }
.tier-list li strong { color:var(--fg); font-weight:600; }
.tier .btn { margin-top:auto; }
.btn--block { width:100%; }
/* featured = animated spectral gradient border (reuse cmstack .grad-border technique) */
.tier--featured { position:relative; }
.tier--featured::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--ga), var(--g1), var(--g2), var(--g3), var(--g1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:ga-spin 7s linear infinite; pointer-events:none; }
.tier-ribbon { align-self:flex-start; font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.04em;
  padding:.2rem .55rem; border-radius:6px; color:#fff; background:var(--grad); margin-bottom:.3rem; }
.tiers-note { text-align:center; color:var(--faint); font-size:.85rem; margin-top:1.5rem; }

/* ---------------------------------------------------------------- B) hero chat mock */

.chat-body { padding:1.1rem 1.15rem; display:grid; gap:.8rem; }
.chat-bubble { border-radius:12px; padding:.75rem .95rem; font-size:.86rem; line-height:1.5; max-width:92%; }
.chat-bubble--user { justify-self:end; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22); }
.chat-bubble--ai { justify-self:start; background:rgba(255,255,255,.08); color:#ededed; border:1px solid rgba(255,255,255,.14); }
.chat-line { margin:0 0 .5rem; color:#fff; font-weight:500; }
.chat-steps { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; font-family:var(--font-mono); font-size:.78rem; color:rgba(255,255,255,.85); }
.chat-ok { color:#a7f3d0; margin-right:.4rem; }
.chat-done { margin:.55rem 0 0; font-family:var(--font-mono); font-size:.75rem; color:rgba(255,255,255,.7); }

/* ---------------------------------------------------------------- top early-access: centered + horizontal row */
#waitlist-top .section-head { max-width:46rem; margin-inline:auto; text-align:center; }
#waitlist-top .section-head .lede { margin-inline:auto; }
#waitlist-top .notify { max-width:56rem; margin-inline:auto; }
#waitlist-top .notify-form {
  grid-template-columns:1fr 1fr auto; align-items:end; gap:.85rem 1rem;
}
#waitlist-top .notify-form .btn { height:2.95rem; white-space:nowrap; }
#waitlist-top .notify-error { grid-column:1 / -1; margin:0; text-align:center; }
#waitlist-top .notify-fine  { grid-column:1 / -1; margin:0; text-align:center; }
@media (max-width:640px) {
  #waitlist-top .notify-form { grid-template-columns:1fr; align-items:stretch; }
  #waitlist-top .notify-form .btn { width:100%; }
}