/* =====================================================================
   Charts Hub landing — premium dark/gold theme
   Scroll-driven motion, no cursor-driven effects.
   ===================================================================== */

:root {
  --bg: #07070E;
  --bg-2: #0F0F1F;
  --bg-3: #131328;
  --surface: #15152A;
  --surface-2: #1A1A30;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --gold: #D4AF37;
  --gold-2: #E8D88A;
  --gold-bright: #FFE38A;
  --gold-warm: #C8911E;
  --emerald: #34D399;

  --text: #EDEDF5;
  --text-dim: rgba(237, 237, 245, 0.62);
  --text-dimmer: rgba(237, 237, 245, 0.38);

  --radius: 14px;
  --radius-lg: 22px;
  --max-width: 1100px;

  --shadow-glow: 0 0 60px rgba(212, 175, 55, 0.16);

  --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 420ms cubic-bezier(0.22, 0.9, 0.32, 1.05);

  /* Scroll-driven (set from JS). 0 at top, grows with scrollY in pixels. */
  --scroll-y: 0;
  --scroll-progress: 0;     /* 0..1 across the document */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-2); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }

/* =====================================================================
   Scroll progress bar
   ===================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, transparent);
}
.scroll-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--scroll-progress) * 100%);
  background: linear-gradient(90deg, var(--gold-warm), var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  transition: width 80ms linear;
}

/* =====================================================================
   Background — mesh gradient + drifting orbs (scroll parallax) + grid + grain
   ===================================================================== */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-mesh {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(212, 175, 55, 0.10), transparent 55%),
    radial-gradient(800px 500px at 88% 0%, rgba(141, 82, 200, 0.10), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(34, 211, 153, 0.06), transparent 60%),
    linear-gradient(180deg, #07070E 0%, #0B0B18 60%, #08080F 100%);
  filter: saturate(120%);
  transform: translate3d(0, calc(var(--scroll-y) * -0.05px), 0);
}

.bg-orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Each orb drifts on its own ambient loop AND tracks scroll, at different
   intensities, for a layered parallax effect. */
.orb-a {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.45), transparent 65%);
  animation: orbA 22s ease-in-out infinite alternate;
  transform: translate3d(0, calc(var(--scroll-y) * -0.18px), 0);
}
.orb-b {
  top: 30%;
  right: -180px;
  background: radial-gradient(circle, rgba(160, 92, 220, 0.35), transparent 65%);
  animation: orbB 26s ease-in-out infinite alternate;
  transform: translate3d(0, calc(var(--scroll-y) * 0.12px), 0);
}
.orb-c {
  bottom: -200px;
  left: 30%;
  background: radial-gradient(circle, rgba(34, 211, 153, 0.22), transparent 65%);
  animation: orbC 24s ease-in-out infinite alternate;
  transform: translate3d(0, calc(var(--scroll-y) * -0.25px), 0);
}
@keyframes orbA {
  from { background-position: 0% 0%; }
  to   { background-position: 30% 30%; }
}
@keyframes orbB {
  from { filter: blur(80px) hue-rotate(0deg); }
  to   { filter: blur(110px) hue-rotate(-12deg); }
}
@keyframes orbC {
  from { opacity: 0.5; }
  to   { opacity: 0.7; }
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 calc(var(--scroll-y) * 0.08px);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  opacity: 0.7;
}

.bg-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* =====================================================================
   Floating decorative chips — drift up + scroll parallax
   ===================================================================== */

.chips {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.chip {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px dashed rgba(212, 175, 55, 0.28);
  background: radial-gradient(circle at 35% 30%, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04) 70%);
  box-shadow: inset 0 0 0 6px rgba(212, 175, 55, 0.04), 0 0 30px -6px rgba(212, 175, 55, 0.25);
  opacity: 0;
  animation: chipFloat 18s linear infinite;
}
.chip-1 { left: 8%;  top: 18%; animation-delay: 0s;   transform: translateY(calc(var(--scroll-y) * -0.18px)); }
.chip-2 { left: 78%; top: 68%; animation-delay: 4s;  width: 38px; height: 38px; transform: translateY(calc(var(--scroll-y) * 0.22px)); }
.chip-3 { left: 18%; top: 80%; animation-delay: 8s;  width: 70px; height: 70px; transform: translateY(calc(var(--scroll-y) * -0.14px)); }
.chip-4 { left: 86%; top: 12%; animation-delay: 12s; width: 30px; height: 30px; transform: translateY(calc(var(--scroll-y) * 0.3px)); }
.chip-5 { left: 52%; top: 90%; animation-delay: 6s;  width: 46px; height: 46px; transform: translateY(calc(var(--scroll-y) * -0.2px)); }
@keyframes chipFloat {
  0%   { opacity: 0; }
  15%  { opacity: 0.4; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; }
}

/* =====================================================================
   Top bar — backdrop intensity reacts to scroll
   ===================================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 7, 14, calc(0.4 + var(--scroll-progress) * 0.45));
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(255, 255, 255, calc(0.06 + var(--scroll-progress) * 0.1));
  transition: background 220ms linear;
}
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1px;
}
.brand img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 8px 20px -8px rgba(212, 175, 55, 0.4);
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.top-nav a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
}
.top-nav a:hover { color: var(--text); }

.top-launch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold), var(--gold-warm));
  color: #1A1300 !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px -8px rgba(212, 175, 55, 0.6);
}

@media (max-width: 640px) {
  .top-nav a:not(.top-launch) { display: none; }
}

/* =====================================================================
   Hero — scroll parallax on icon, fade on scroll-away
   ===================================================================== */

.hero {
  position: relative;
  padding: 88px 0 110px;
  overflow: hidden;
}

.hero-wrap {
  text-align: center;
  /* Force every direct child onto its own line, centered. Without this,
     `inline-flex` siblings (the icon + badge) flow side-by-side and look
     misaligned. */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Subtle scroll-away: hero contents drift up + fade as you scroll past. */
  transform: translateY(calc(var(--hero-scroll, 0) * -40px));
  opacity: calc(1 - var(--hero-scroll, 0) * 0.7);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.06);
  color: var(--gold-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 22px;
}
.hero-badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.0); }
}

.hero-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 30px;
  background: linear-gradient(180deg, #1F1A0E, #14142A 80%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-bottom: 28px;
  /* Scroll-driven: gentle scale + rotate as you scroll. */
  transform:
    scale(calc(1 - var(--hero-scroll, 0) * 0.18))
    rotate(calc(var(--hero-scroll, 0) * 6deg));
}
.hero-icon img {
  border-radius: 22px;
  position: relative;
  z-index: 1;
}
.hero-icon-ring {
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(212, 175, 55, 0) 0deg,
    rgba(212, 175, 55, 0.55) 90deg,
    rgba(212, 175, 55, 0) 180deg,
    rgba(212, 175, 55, 0.55) 270deg,
    rgba(212, 175, 55, 0) 360deg
  );
  filter: blur(14px);
  opacity: 0.5;
  /* Continuous spin + scroll boost */
  animation: spin 14s linear infinite;
  z-index: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-title {
  font-size: clamp(36px, 6.4vw, 64px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.hero-title-line {
  display: block;
  color: var(--text);
}
.hero-title-gold {
  display: block;
  background: linear-gradient(
    100deg,
    #C8911E 0%,
    var(--gold) 25%,
    var(--gold-bright) 50%,
    var(--gold) 75%,
    #C8911E 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0%; }
  50%  { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

.tagline {
  margin: 0 auto;
  max-width: 640px;
  font-size: 17px;
  color: var(--text-dim);
  line-height: 1.6;
}
.tagline strong { font-weight: 600; }
.gold { color: var(--gold); }
.gold-soft { color: var(--gold-2); }

/* CTA — continuously animated, no hover transforms */

.cta-row {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.cta-launch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px 18px 24px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 0.2px;
  color: #1A1300;
  isolation: isolate;
  border: none;
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
  /* Continuous gentle "breathing" so the button never feels static. */
  animation: ctaBreathe 4.6s ease-in-out infinite;
}
.cta-launch:hover { color: #1A1300; }
.cta-launch:active { animation-play-state: paused; }

@keyframes ctaBreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.cta-launch-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #FFE38A 0%, var(--gold) 35%, var(--gold-warm) 100%);
  z-index: -1;
  box-shadow:
    0 12px 30px -10px rgba(212, 175, 55, 0.65),
    0 24px 70px -20px rgba(212, 175, 55, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
/* Outer glow — pulses on its own loop. */
.cta-launch::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold), var(--gold-warm));
  filter: blur(18px);
  opacity: 0.5;
  z-index: -2;
  animation: ctaGlow 4.6s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0.45; filter: blur(16px); }
  50%      { opacity: 0.75; filter: blur(22px); }
}
/* Light sheen sweeps across periodically. */
.cta-launch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  pointer-events: none;
  animation: ctaSheen 5.2s ease-in-out infinite;
}
@keyframes ctaSheen {
  0%, 70%, 100% { background-position: 200% 0; }
  85%           { background-position: -100% 0; }
}
.cta-launch:active { transform: translateY(1px) scale(0.99); }

.cta-launch-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cta-launch-icon { margin-right: 2px; }
.cta-launch-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: #1A1300;
  animation: arrowNudge 4.6s ease-in-out infinite;
}
@keyframes arrowNudge {
  0%, 90%, 100% { transform: translateX(0); }
  45%, 55%      { transform: translateX(3px); }
}

.cta-launch-sm {
  padding: 12px 18px 12px 16px;
  font-size: 14px;
  border-radius: 12px;
}
.cta-launch-sm .cta-launch-arrow { width: 22px; height: 22px; }

.cta-meta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dimmer);
  font-size: 12.5px;
  letter-spacing: 0.2px;
}
.cta-meta-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.hero-stats {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 18px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.stat-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-warm));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.stat-suffix { font-size: 18px; }
.stat-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-dimmer);
}
.stat-sep {
  width: 1px;
  height: 28px;
  background: var(--line-strong);
}
@media (max-width: 540px) {
  .hero-stats { gap: 16px; padding: 14px 16px; }
  .stat-num { font-size: 22px; }
}

/* =====================================================================
   Section common
   ===================================================================== */

.section-title {
  text-align: center;
  font-size: clamp(28px, 4.4vw, 42px);
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-sub {
  text-align: center;
  font-size: 15.5px;
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto 48px;
}

/* =====================================================================
   Features
   ===================================================================== */

.features {
  padding: 96px 0 100px;
  border-top: 1px solid var(--line);
}
.feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.feature {
  position: relative;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* When the card scrolls into view, the top sheen lights up + a soft
   gold inner glow blooms briefly. */
.feature.is-visible {
  animation: featureBloom 1400ms cubic-bezier(0.22, 0.9, 0.32, 1.05) both;
}
@keyframes featureBloom {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); border-color: var(--line); }
  35%  { box-shadow: 0 0 36px -10px rgba(212, 175, 55, 0.45); border-color: rgba(212, 175, 55, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); border-color: var(--line); }
}

.feature-glow {
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
  opacity: 0;
  transform: translateX(-100%);
}
.feature.is-visible .feature-glow {
  animation: glowSweep 1400ms cubic-bezier(0.22, 0.9, 0.32, 1.05) both;
}
@keyframes glowSweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.feature-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 20px -10px rgba(212, 175, 55, 0.4);
}
.feature.is-visible .feature-ico {
  animation: icoPop 900ms cubic-bezier(0.22, 1.4, 0.32, 1) both;
  animation-delay: 200ms;
}
@keyframes icoPop {
  0%   { transform: scale(0.7) rotate(-12deg); opacity: 0.6; }
  60%  { transform: scale(1.1) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.feature h3 {
  font-size: 16px;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.feature p {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0;
  line-height: 1.5;
}
.feature code {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.85em;
  color: var(--gold-2);
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
}
.feature-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--emerald);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

/* =====================================================================
   How it works — connecting line draws as you scroll, active step lights up
   ===================================================================== */

.how {
  padding: 96px 0 100px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}

.plans {
  padding: 96px 0 100px;
  border-top: 1px solid var(--line);
}
.plans-grid {
  display: grid;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
}
.plan-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
}
.plan-card-pro {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.10),
    rgba(212, 175, 55, 0.03)
  );
  border-color: rgba(212, 175, 55, 0.45);
}
.plan-card-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  background: var(--gold);
  color: #0d0d1a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.plan-card-pro .plan-card-eyebrow {
  color: var(--gold);
}
.plan-card-headline {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
}
.plan-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.plan-card-list li {
  font-size: 14.5px;
  color: var(--text);
  display: flex;
  gap: 10px;
  line-height: 1.45;
}
.plan-card-tick {
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  width: 14px;
}
.plan-card-muted {
  color: var(--text-dimmer);
}
.plan-card-dash {
  color: var(--text-dimmer);
  width: 14px;
  flex-shrink: 0;
}
.plans-fineprint {
  text-align: center;
  margin-top: 22px;
  color: var(--text-dimmer);
  font-size: 13px;
}
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; gap: 14px; }
  .plans { padding: 56px 0 60px; }
}
.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 760px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 31px;
  width: 1.5px;
  background: linear-gradient(180deg,
    rgba(212, 175, 55, 0.05) 0%,
    rgba(212, 175, 55, 0.05) 100%);
  z-index: 0;
}
/* Filled portion of the line, height tied to scroll progress through the
   steps section (set as --steps-progress from JS, 0..1). */
.steps::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 30.5px;
  width: 2.5px;
  height: calc(var(--steps-progress, 0) * (100% - 56px));
  background: linear-gradient(180deg, var(--gold-bright), var(--gold), var(--gold-warm));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  border-radius: 2px;
  z-index: 0;
}
@media (max-width: 540px) {
  .steps::before { left: 25px; }
  .steps::after  { left: 24.5px; }
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  z-index: 1;
  transition: border-color 600ms ease;
}
.steps li.is-active {
  border-color: rgba(212, 175, 55, 0.45);
}
.step-num {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px -8px rgba(212, 175, 55, 0.5);
  transition: background 500ms ease, box-shadow 500ms ease, transform 500ms cubic-bezier(0.22, 1.4, 0.32, 1);
}
.steps li.is-active .step-num {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-warm));
  color: #1A1300;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 24px -6px rgba(212, 175, 55, 0.7),
    0 0 0 4px rgba(212, 175, 55, 0.18);
  transform: scale(1.06);
}
.step-num::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(212, 175, 55, 0.18);
  animation: ringPulse 3.6s ease-in-out infinite;
}
.steps li.is-active .step-num::before {
  border-color: rgba(212, 175, 55, 0.5);
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.1); opacity: 0; }
}
.step-body h3 {
  margin: 4px 0 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.step-body p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
}

/* =====================================================================
   FAQ
   ===================================================================== */

.faq {
  padding: 96px 0 110px;
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-list { display: grid; gap: 10px; }
.faq details {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color var(--t-base), background var(--t-base);
}
.faq details[open] {
  border-color: rgba(212, 175, 55, 0.32);
  background: linear-gradient(180deg, var(--surface-2), #1E1E36);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-chev {
  width: 22px;
  height: 22px;
  position: relative;
  flex: 0 0 22px;
}
.faq-chev::before,
.faq-chev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.6px;
  background: var(--gold);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq-chev::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform var(--t-base);
}
.faq details[open] .faq-chev::after {
  transform: translate(-50%, -50%) rotate(0);
}
.faq-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--t-slow), opacity var(--t-base);
}
.faq details[open] .faq-body {
  max-height: 240px;
  opacity: 1;
}
.faq-body p {
  margin: 12px 0 4px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
}

.faq-cta {
  margin-top: 56px;
  text-align: center;
}
.faq-cta p {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0 0 16px;
}

/* =====================================================================
   Footer
   ===================================================================== */

footer {
  padding: 28px 0 44px;
  position: relative;
  z-index: 2;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-dimmer);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-weight: 600;
}
.footer-brand img { border-radius: 6px; }
.footer-nav { display: flex; gap: 20px; }
.footer-nav a { color: var(--text-dim); font-size: 13.5px; }
.footer-nav a:hover { color: var(--gold); }

/* =====================================================================
   Reveal-on-scroll — varied directions, gentle stagger
   ===================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms cubic-bezier(0.22, 0.9, 0.32, 1.05),
    transform 800ms cubic-bezier(0.22, 0.9, 0.32, 1.05);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant directions */
.reveal[data-reveal-from="left"]  { transform: translate(-32px, 0); }
.reveal[data-reveal-from="right"] { transform: translate(32px, 0); }
.reveal[data-reveal-from="scale"] { transform: scale(0.92); }
.reveal[data-reveal-from="rotate"] { transform: translateY(28px) rotate(-2deg); }
.reveal.is-visible[data-reveal-from] { transform: none; }

/* =====================================================================
   Responsive  — tablet (≤880) → phone (≤640) → tiny (≤380)
   ===================================================================== */

/* Tablet / small laptop */
@media (max-width: 880px) {
  .hero { padding: 64px 0 80px; }
  .features { padding: 72px 0 76px; }
  .how { padding: 72px 0 76px; }
  .faq { padding: 72px 0 84px; }
  .section-sub { margin-bottom: 36px; }
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .hero-stats { gap: 22px; padding: 16px 22px; }
}

/* Phone */
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }

  /* Top bar */
  .top-row { height: 60px; }
  .top-launch { padding: 7px 12px; font-size: 12.5px; }
  .scroll-progress { height: 1.6px; }

  /* Hero */
  .hero { padding: 40px 0 60px; }
  .hero-icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    margin-bottom: 22px;
  }
  .hero-icon img { width: 84px; height: 84px; }
  .hero-icon-ring { inset: -8px; }
  .hero-badge {
    font-size: 11.5px;
    padding: 5px 12px 5px 10px;
    margin-bottom: 16px;
  }
  .hero-title {
    font-size: clamp(28px, 9.5vw, 40px);
    margin-bottom: 14px;
    line-height: 1.06;
  }
  .tagline { font-size: 15px; line-height: 1.55; }

  .cta-row { margin-top: 28px; width: 100%; }
  /* Full-width CTA on phones (capped so it doesn't get awkwardly wide on
     phablets in landscape). */
  .cta-launch {
    width: 100%;
    max-width: 380px;
    padding: 16px 22px;
    font-size: 15px;
    border-radius: 14px;
  }
  .cta-launch-arrow { width: 24px; height: 24px; }
  .cta-meta { font-size: 12px; margin-top: 14px; }

  .hero-stats {
    margin-top: 36px;
    gap: 14px;
    padding: 14px 18px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 360px;
  }
  .stat { min-width: 72px; }
  .stat-num { font-size: 22px; }
  .stat-suffix { font-size: 15px; }
  .stat-label { font-size: 10px; letter-spacing: 1px; }
  /* Vertical separators look fragile when stats wrap — drop on phones */
  .stat-sep { display: none; }

  /* Section headers */
  .section-title { font-size: clamp(24px, 6.4vw, 32px); }
  .section-sub { font-size: 14.5px; margin-bottom: 30px; }

  /* Features */
  .features { padding: 56px 0 60px; }
  .feature { padding: 18px 16px 16px; }
  .feature h3 { font-size: 15.5px; }
  .feature p { font-size: 14px; }
  .feature-ico { width: 40px; height: 40px; margin-bottom: 12px; }
  .feature-tag { font-size: 9.5px; padding: 2px 7px; }

  /* How it works */
  .how { padding: 56px 0 60px; }
  .steps {
    gap: 12px;
  }
  .steps li {
    padding: 16px 14px;
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .step-num { width: 38px; height: 38px; font-size: 13.5px; }
  .steps::before { left: 26px; }
  .steps::after { left: 25.5px; }
  .step-body h3 { font-size: 15px; }
  .step-body p { font-size: 14px; }

  /* FAQ */
  .faq { padding: 56px 0 64px; }
  .faq details { padding: 14px 16px; }
  .faq summary { font-size: 14.5px; }
  .faq-body p { font-size: 14px; }
  .faq-cta { margin-top: 40px; }
  .faq-cta p { font-size: 14px; }

  /* Footer — center-stack everything on phones */
  footer { padding: 24px 0 36px; }
  .footer-row {
    gap: 14px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-brand { width: 100%; justify-content: center; display: flex; }

  /* Background — softer, cheaper on small screens */
  .bg-orb { filter: blur(72px); opacity: 0.45; }
  .orb-a, .orb-b, .orb-c { width: 360px; height: 360px; }
  .bg-grid { opacity: 0.45; }
  /* Drifting chips can feel busy on a small viewport — hide them */
  .chip { display: none; }
}

/* Tiny phone (iPhone SE 1st gen, etc.) */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .hero { padding: 32px 0 52px; }
  .hero-icon { width: 80px; height: 80px; }
  .hero-icon img { width: 76px; height: 76px; }
  .hero-title { font-size: 26px; line-height: 1.08; }
  .tagline { font-size: 14.5px; }
  .hero-stats { gap: 10px; padding: 12px 12px; }
  .stat-num { font-size: 19px; }
  .stat-suffix { font-size: 13px; }
  .stat-label { font-size: 9.5px; letter-spacing: 0.8px; }
  .section-title { font-size: 22px; }
  .feature { padding: 16px 14px 14px; }
  .feature h3 { font-size: 15px; }
  .steps li { padding: 14px 12px; }
  .faq summary { font-size: 14px; }
}

/* Touch targets — every interactive element should hit ≥44×44 */
@media (pointer: coarse) {
  .top-launch { min-height: 38px; }
  .top-nav a { padding: 8px 0; }
  .faq summary { min-height: 24px; padding: 4px 0; }
  .faq-chev { transform: scale(1.05); }
}

/* =====================================================================
   Reduced motion — switch off everything decorative
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bg-mesh, .bg-orb, .chip, .hero-icon-ring,
  .step-num::before, .hero-badge-dot,
  .cta-launch, .cta-launch::before, .cta-launch::after, .cta-launch-arrow {
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title-gold { background-position: 0% 0% !important; }
  .hero-wrap { transform: none; opacity: 1; }
  .hero-icon { transform: none; }
}