:root {
  --bg: #050706;
  --bg-alt: #0a0f0c;
  --bg-card: #0d1410;
  --green: #00ff85;
  --green-dim: #00c766;
  --green-glow: rgba(0, 255, 133, 0.35);
  --text: #eafff2;
  --text-dim: #8fa89b;
  --text-faint: #566860;
  --border: rgba(0, 255, 133, 0.14);
  --border-strong: rgba(0, 255, 133, 0.35);
  --red: #ff4d5e;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

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

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== NOISE + CURSOR + PROGRESS ===== */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
  filter: blur(10px);
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), transparent);
  z-index: 10000;
  box-shadow: 0 0 12px var(--green);
}

/* ===== NAV ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 20px 0;
  transition: all 0.35s ease;
}

.nav.scrolled {
  padding: 12px 0;
  background: rgba(5, 7, 6, 0.75);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  /* centered on the viewport independent of logo/button width, so it
     doesn't drift off the space-between midpoint when those two differ */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-links a { transition: color 0.25s ease; position: relative; }
.nav-links a:hover { color: var(--green); }

.btn-small { padding: 10px 20px; font-size: 13px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--green);
  color: #04140b;
  box-shadow: 0 0 0 0 var(--green-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--green-glow);
}
.btn-primary svg { transition: transform 0.3s ease; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-ghost {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(0, 255, 133, 0.04);
}
.btn-ghost:hover {
  border-color: var(--green);
  background: rgba(0, 255, 133, 0.09);
  transform: translateY(-2px);
}

.btn-outline {
  width: 100%;
  justify-content: center;
  border-color: var(--border-strong);
  color: var(--text);
  margin-top: 24px;
}
.btn-outline:hover { border-color: var(--green); color: var(--green); }

.price-featured .btn-primary { width: 100%; justify-content: center; margin-top: 24px; }

.btn-large { padding: 19px 40px; font-size: 17px; }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  overflow: hidden;
  padding: 140px 24px 80px;
}

.chart-strip {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0.55;
  animation-name: chart-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 60s;
  will-change: transform;
}

.chart-tile {
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@keyframes chart-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}

.volume-profile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (max-width: 760px) {
  .volume-profile { display: none; }
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,133,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,133,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 75%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,255,133,0.14), transparent 60%),
              linear-gradient(180deg, transparent 60%, var(--bg) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
}

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--green);
  background: rgba(0,255,133,0.05);
  margin-bottom: 28px;
}

.eyebrow-tag .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ===== HERO LOGO — NEON GLITCH ===== */
.hero-logo {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
  filter:
    drop-shadow(0 0 14px var(--green-glow))
    drop-shadow(0 0 40px rgba(0, 255, 133, 0.28))
    drop-shadow(0 0 90px rgba(0, 255, 133, 0.14));
  animation: neon-hum 2.2s ease-in-out infinite;
}

.hero-logo-base {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(300px, 54vw, 760px);
  height: auto;
  /* stays perfectly still — only the red/cyan ghost layers below jitter,
     so the readable logo never visibly drifts off-center mid-glitch */
}

.hero-logo::before,
.hero-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('../assets/img/logo-benztrader-wordmark.png');
  mask-image: url('../assets/img/logo-benztrader-wordmark.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.hero-logo::before {
  z-index: 1;
  background-color: #ff2d6b;
  animation: glitch-slice-a 3s infinite;
}

.hero-logo::after {
  z-index: 3;
  background-color: #00e5ff;
  animation: glitch-slice-b 3s infinite;
}

@keyframes neon-hum {
  0%, 60%, 100% { opacity: 1; }
  61% { opacity: 0.3; }
  62% { opacity: 1; }
  63% { opacity: 0.15; }
  63.5% { opacity: 1; }
  64% { opacity: 0.5; }
  64.5% { opacity: 1; }
  85% { opacity: 1; }
  86% { opacity: 0.35; }
  86.6% { opacity: 1; }
  87.2% { opacity: 0.6; }
  87.8% { opacity: 1; }
}

@keyframes glitch-slice-a {
  0%, 59%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  59.5% { opacity: 1; transform: translate(-10px, 3px); clip-path: inset(8% 0 60% 0); }
  60% { opacity: 0.8; transform: translate(8px, -2px); clip-path: inset(62% 0 5% 0); }
  60.5% { opacity: 1; transform: translate(-12px, 1px); clip-path: inset(30% 0 35% 0); }
  61% { opacity: 0.6; transform: translate(6px, 2px); clip-path: inset(50% 0 15% 0); }
  61.5% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  84.5% { opacity: 0; }
  85% { opacity: 0.9; transform: translate(-9px, -2px); clip-path: inset(20% 0 45% 0); }
  85.5% { opacity: 0.5; transform: translate(7px, 1px); clip-path: inset(65% 0 8% 0); }
  86% { opacity: 0; transform: translate(0, 0); }
}

@keyframes glitch-slice-b {
  0%, 59%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  59.5% { opacity: 1; transform: translate(10px, -3px); clip-path: inset(55% 0 12% 0); }
  60% { opacity: 0.8; transform: translate(-8px, 2px); clip-path: inset(5% 0 65% 0); }
  60.5% { opacity: 1; transform: translate(12px, -1px); clip-path: inset(35% 0 30% 0); }
  61% { opacity: 0.6; transform: translate(-6px, -2px); clip-path: inset(15% 0 50% 0); }
  61.5% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
  84.5% { opacity: 0; }
  85% { opacity: 0.9; transform: translate(9px, 2px); clip-path: inset(45% 0 20% 0); }
  85.5% { opacity: 0.5; transform: translate(-7px, -1px); clip-path: inset(8% 0 65% 0); }
  86% { opacity: 0; transform: translate(0, 0); }
}

.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.65;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.stat { text-align: center; }
.stat-num, .stat-suffix {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
}
.stat-suffix { margin-left: 1px; }
.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-sep {
  width: 1px; height: 32px;
  background: var(--border);
}

/* ===== HERO PROMO — urgency cards =====
   Both cards live inside .hero-promo-group, stacked in normal flow below
   the (perfectly centered) hero content by default. Only at 1700px+ does
   the group get pulled out to float on the right, beside the logo, where
   there's finally real margin to spare without ever touching the centered
   block. Within the group the two cards sit side by side when there's
   enough room for both (calc'd from the actual available margin, not a
   guessed breakpoint) and wrap to stacked otherwise — always on the
   right, never split to the left. */
.hero-promo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
@media (min-width: 1700px) {
  .hero-promo-group {
    position: absolute;
    top: 50%;
    right: 64px;
    transform: translateY(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    width: auto;
    max-width: calc((100vw - 860px) / 2 - 104px);
  }
}

.hero-promo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(160deg, rgba(0, 255, 133, 0.1), var(--bg-card) 60%);
  border: 1px solid var(--green);
  border-radius: 20px;
  padding: 28px 24px;
  animation: hero-promo-glow 2.6s ease-in-out infinite;
}
@media (min-width: 1700px) {
  .hero-promo {
    flex: 0 0 280px;
    width: 280px;
    margin: 0;
  }
}
@keyframes hero-promo-glow {
  0%, 100% { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 133, 0.18); }
  50% { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 255, 133, 0.36); }
}
.hero-promo-tag {
  display: inline-block;
  background: var(--green);
  color: #04140b;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.hero-promo h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.hero-promo p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.hero-promo p strong { color: var(--green); font-weight: 700; }
.hero-promo .countdown-timer { margin-top: 20px; }
.hero-promo-btn { width: 100%; justify-content: center; margin-top: 22px; }

.hero-promo-dates {
  margin-top: 18px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
.hero-promo-dates li {
  list-style: none;
  padding: 7px 0 7px 16px;
  border-top: 1px solid var(--border);
  position: relative;
}
.hero-promo-dates li:first-child { border-top: none; }
.hero-promo-dates li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.7;
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--green), transparent);
  animation: scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* hero-promo only floats beside the logo at 1700px+ (see above); below that
   it stacks in normal flow under hero-content, so the scroll cue must leave
   its absolute-bottom spot too, or it lands on top of the stacked card
   instead of below it. Same threshold as .hero-promo, kept in sync. */
@media (max-width: 1699px) {
  .scroll-cue { position: static; left: auto; transform: none; }
}

/* ===== MARQUEE ===== */
.marquee-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track { display: flex; width: max-content; }
.marquee-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  animation: marquee-scroll 32s linear infinite;
  white-space: nowrap;
}
.marquee-content span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.marquee-content .sep { color: var(--green); opacity: 0.5; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ===== SECTIONS ===== */
.section { padding: 130px 0; position: relative; }

.section-head { margin-bottom: 64px; max-width: 640px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.section-sub {
  margin-top: 16px;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}

/* ===== STORY ===== */
.story { background: var(--bg); }
.story-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
}

.story-photo { position: sticky; top: 120px; align-self: start; }
.photo-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  aspect-ratio: 3/4;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.story-photo-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.story-photo-img.is-active { opacity: 1; }
.photo-glow {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,20,10,0.7) 100%);
}
.photo-corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 2px solid var(--green);
  opacity: 0.8;
}
.photo-corner.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.photo-corner.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

.timeline {
  position: relative;
  padding-left: 36px;
  border-left: 1px solid var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 52px;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: -42px;
  top: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--green);
}

.timeline-highlight::before {
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}

.timeline-year {
  font-family: var(--font-mono);
  color: var(--green);
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.timeline-body { position: relative; }

.timeline-body h3 {
  font-family: var(--font-display);
  font-size: 21px;
  margin-bottom: 8px;
  font-weight: 600;
}

.timeline-body p {
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.65;
}
.timeline-body strong { color: var(--text); }

.timeline-highlight .timeline-body {
  position: relative;
  background: linear-gradient(135deg, rgba(0,255,133,0.06), transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: -8px;
}

/* All timeline proof photos/logos share one mechanism: a floated block
   so the paragraph wraps around them natively at every viewport width —
   no manual max-width guesswork that can drift out of sync with the
   actual layout. Negative margins pull each one up and out past the
   card's own edge so it still reads as sitting outside it, post-it
   style. This replaced an absolute-positioned version that needed a
   hand-tuned max-width safety net per card and kept breaking at
   in-between viewport widths — float sidesteps that whole bug class. */
.timeline-body::after { content: ''; display: table; clear: both; }

.photo-float {
  float: right;
  width: 165px;
  margin: -30px -70px 16px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--green);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6), 0 0 10px var(--green-glow), 0 0 22px rgba(0, 255, 133, 0.25);
  transform: rotate(-6deg);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.photo-float:hover {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65), 0 0 20px var(--green), 0 0 40px rgba(0, 255, 133, 0.4);
}

.logo-fan {
  float: right;
  position: relative;
  width: 260px;
  height: 150px;
  margin: -42px -58px 16px 24px;
}
.logo-fan-card {
  position: absolute;
  border-radius: 8px;
  border: 1.5px solid var(--green);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 10px var(--green-glow), 0 0 22px rgba(0, 255, 133, 0.25);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, z-index 0s;
}
.logo-fan-card:hover {
  transform: rotate(0deg) scale(1.08);
  z-index: 5;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65), 0 0 20px var(--green), 0 0 40px rgba(0, 255, 133, 0.4);
}
.logo-fan-stealth { top: 0; left: 0; width: 185px; transform: rotate(-7deg); z-index: 3; }
.logo-fan-morpheus { top: 46px; left: 90px; width: 148px; transform: rotate(9deg); z-index: 2; }

@media (max-width: 600px) {
  .photo-float { float: none; margin: 0 auto 18px; display: block; }
  .logo-fan { float: none; margin: 0 auto 18px; }
}

.cert-fan {
  float: right;
  position: relative;
  width: 270px;
  height: 190px;
  margin: -60px -58px 16px 24px;
}
.cert-fan-card {
  position: absolute;
  width: 158px;
  border-radius: 10px;
  border: 1.5px solid var(--green);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6), 0 0 10px var(--green-glow), 0 0 22px rgba(0, 255, 133, 0.25);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, z-index 0s;
}
.cert-fan-card:hover,
.cert-fan-card:focus-visible {
  transform: rotate(0deg) scale(1.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65), 0 0 24px var(--green), 0 0 50px rgba(0, 255, 133, 0.5);
  z-index: 3;
  outline: none;
}
.cert-fan-card-a { top: 0; left: 0; transform: rotate(-8deg); z-index: 2; }
.cert-fan-card-b { top: 24px; left: 88px; transform: rotate(10deg); z-index: 1; }

@media (max-width: 600px) {
  .cert-fan { float: none; margin: 0 auto 18px; }
}

/* ===== METHOD ===== */
.method { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.method-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 26px;
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), border-color 0.4s ease, background 0.4s ease;
}
.method-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  background: #0f1913;
}

.method-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,255,133,0.08);
  color: var(--green);
  margin-bottom: 22px;
}

.method-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
}
.method-card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }

/* "show more" toggle used to collapse the story timeline and the method
   cards on phones, where the full lists make the page very long. Hidden
   by default (desktop shows everything) — see the mobile query below. */
.collapse-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.collapse-toggle:hover { background: rgba(0, 255, 133, 0.06); border-color: var(--green); }
.method-toggle { grid-column: 1 / -1; }

/* ===== OFFERS ===== */
.offers { background: var(--bg); }

.offer-row {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 32px;
  padding: 44px 0;
  border-top: 1px solid var(--border);
}
.offer-row:last-child { border-bottom: 1px solid var(--border); }

.offer-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
}

.offer-content h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 14px;
}
.offer-content p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  max-width: 720px;
}
.offer-highlight {
  color: var(--text) !important;
  margin-top: 14px;
  padding: 16px 20px;
  border-left: 2px solid var(--green);
  background: rgba(0,255,133,0.05);
  border-radius: 0 8px 8px 0;
}

.offer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.offer-tags span {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
}

.offer-meta {
  margin-top: 18px;
  font-size: 14px;
  color: var(--green);
  font-weight: 600;
}

.offer-featured {
  background: linear-gradient(135deg, rgba(0,255,133,0.05), transparent 60%);
  border-radius: 20px;
  border: 1px solid var(--border-strong) !important;
  padding: 44px 36px;
  margin: 16px 0;
}
.offer-featured .offer-num { -webkit-text-stroke: 1px var(--green); }

.offer-badge {
  position: absolute;
  top: -14px;
  left: 36px;
  background: var(--green);
  color: #04140b;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* ===== PRICING ===== */
.pricing { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), border-color 0.4s ease;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }

.price-featured {
  border-color: var(--green);
  background: linear-gradient(160deg, rgba(0,255,133,0.08), var(--bg-card) 55%);
  transform: scale(1.04);
}
.price-featured:hover { transform: scale(1.04) translateY(-6px); }

.price-tag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #04140b;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.price-head p { color: var(--text-dim); font-size: 14px; margin-bottom: 28px; }

.price-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
}
.price-old {
  font-size: 18px;
  color: var(--text-faint);
  text-decoration: line-through;
}
.price-new {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--green);
}
.price-custom { font-size: 30px; }

.price-list { flex: 1; }
.price-list li {
  list-style: none;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--text-dim);
  padding-left: 22px;
  position: relative;
}
.price-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 19px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.7;
}

.price-slots {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--green);
  text-align: center;
  padding: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
}

.countdown-timer { margin-top: 20px; text-align: center; }
.countdown-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.countdown-units { display: flex; justify-content: center; gap: 8px; }
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: rgba(0, 255, 133, 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 4px;
}
.countdown-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown-suffix {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.slots-bar { margin-top: 20px; }
.slots-bar-track { display: flex; gap: 4px; margin-bottom: 8px; }
.slots-bar-segment {
  flex: 1;
  height: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.slots-bar-segment.is-filled {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 10px var(--green-glow);
}
.slots-bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}
.slots-bar-filled { color: var(--green); font-weight: 600; }

/* ===== REVIEWS ===== */
.reviews { background: var(--bg); }

.carousel-wrap { position: relative; }

.carousel-viewport {
  position: relative;
  overflow: hidden;
  margin-bottom: 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  align-items: center;
  padding: 30px 0;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  cursor: grab;
}
.carousel-track:active { cursor: grabbing; }

/* prev/next controls — so you don't have to wait for the auto-advance,
   on desktop (click) and phone (tap) alike; swipe/drag also works, see js */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--green);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.carousel-arrow:hover { background: rgba(0, 255, 133, 0.14); border-color: var(--green); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.9); }
.carousel-arrow-prev { left: 4px; }
.carousel-arrow-next { right: 4px; }
@media (max-width: 600px) {
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow-prev { left: 0; }
  .carousel-arrow-next { right: 0; }
}

.review-card {
  flex-shrink: 0;
  width: 340px;
  margin: 0 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  opacity: 0.3;
  transform: scale(0.8);
  filter: blur(1.5px);
  transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), filter 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
}

.review-card.is-near { opacity: 0.55; transform: scale(0.9); filter: blur(0.5px); }

.review-card.is-active {
  opacity: 1;
  transform: scale(1.07);
  filter: none;
  border-color: var(--border-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 255, 133, 0.15), 0 0 34px rgba(0, 255, 133, 0.12);
  z-index: 3;
}

.review-stars { color: var(--green); letter-spacing: 2px; margin-bottom: 16px; font-size: 15px; }
.review-text { font-size: 15px; line-height: 1.65; color: var(--text); margin-bottom: 20px; min-height: 108px; }
.review-author { font-size: 13px; color: var(--text-faint); font-family: var(--font-mono); }
.review-author .review-tag { color: var(--green); margin-left: 6px; }

.discord-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(0,255,133,0.08), transparent);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 40px 44px;
}
.discord-cta-text h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 8px; }
.discord-cta-text p { color: var(--text-dim); font-size: 15px; max-width: 460px; }

/* ===== PAYOUTS PROOF ===== */
.payouts-proof { margin-top: 56px; text-align: center; }

.payouts-toggle {
  margin: 0 auto;
}
.payouts-toggle svg { transition: transform 0.35s ease; }
.payouts-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.payouts-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
  margin-top: 0;
}
.payouts-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 36px;
}
.payouts-panel-inner { overflow: hidden; min-height: 0; }

.payouts-caption {
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 480px;
  margin: 0 auto 24px;
}

.payouts-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.payouts-track-outer { display: flex; width: max-content; }

.payouts-track {
  display: flex;
  gap: 20px;
  padding: 6px 10px;
  animation: payouts-scroll 46s linear infinite;
}
.payouts-marquee:hover .payouts-track { animation-play-state: paused; }

@keyframes payouts-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 20px)); }
}

.payout-card {
  flex-shrink: 0;
  width: 280px;
  height: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.payout-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 255, 133, 0.12);
  transform: translateY(-4px);
}
.payout-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* ===== LEGACY ===== */
.legacy { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.legacy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.legacy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
}
.legacy-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }

.legacy-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 16px;
  margin: 0 auto 26px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
.legacy-plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.legacy-plate-dark {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), inset 0 0 40px rgba(0, 255, 133, 0.05);
}

.legacy-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
.legacy-card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; max-width: 380px; margin: 0 auto; }

/* ===== SOCIAL HUB ===== */
.social-hub { padding: 70px 24px; background: var(--bg); }

.social-card {
  max-width: 1000px;
  margin: 0 auto;
  background: radial-gradient(circle at 18% -10%, rgba(0, 255, 133, 0.1), transparent 55%), var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 56px 48px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 255, 133, 0.08);
}

.social-card-head { text-align: center; max-width: 520px; margin: 0 auto 40px; }
.social-card-head .section-tag { display: block; margin-bottom: 10px; }
.social-card-head h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.social-card-head p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }

.social-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 30px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-6px);
  border-color: var(--green);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 24px var(--green-glow);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 255, 133, 0.08);
  color: var(--green);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.social-link:hover .social-icon,
.social-link:focus-visible .social-icon {
  background: var(--green);
  color: #04140c;
  transform: scale(1.08) rotate(-6deg);
}
.social-icon svg { width: 24px; height: 24px; }

.social-link-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.social-link-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

/* ===== FOOTER ===== */
.footer { background: var(--bg); padding-top: 120px; }

.footer-cta { text-align: center; margin-bottom: 100px; }
.footer-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.footer-cta p { color: var(--text-dim); font-size: 17px; margin-bottom: 36px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.footer-logo img { height: 26px; opacity: 0.8; }
.footer-socials { display: flex; gap: 28px; }
.footer-socials a {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.25s ease;
}
.footer-socials a:hover { color: var(--green); }
.footer-copy { font-size: 13px; color: var(--text-faint); }

.footer-disclaimer {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.6;
  padding: 24px 0 40px;
  max-width: 720px;
}

/* ===== PAYOUT VAULT (Max Allocation modal) ===== */

.payout-vault-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(0, 255, 133, 0.06);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.payout-vault-btn svg { transition: transform 0.25s ease; }
.payout-vault-btn:hover {
  border-color: var(--green);
  background: rgba(0, 255, 133, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 255, 133, 0.18);
}
.payout-vault-btn:hover svg { transform: translateX(3px); }

.payout-vault {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
}
.payout-vault.is-open { visibility: visible; pointer-events: auto; }

.payout-vault-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 5, 0.86);
  backdrop-filter: blur(10px);
  opacity: 0;
}

.payout-vault-panel {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 86vh;
  overflow-y: auto;
  background: linear-gradient(165deg, #0d1611 0%, var(--bg-card) 40%);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 48px 40px 40px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 255, 133, 0.08), 0 0 80px rgba(0, 255, 133, 0.12);
  opacity: 0;
  transform: scale(0.92) translateY(10px);
}

.payout-vault-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.payout-vault-close:hover { border-color: var(--green); color: var(--green); transform: rotate(90deg); }

.payout-vault-head { text-align: center; margin-bottom: 36px; }
.payout-vault-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 14px;
}
.payout-vault-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.payout-vault-head h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  margin-bottom: 22px;
}
.payout-vault-total { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.payout-vault-total-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 64px);
  color: var(--green);
  text-shadow: 0 0 40px var(--green-glow);
  font-variant-numeric: tabular-nums;
}
.payout-vault-total-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.payout-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.payout-vault-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  opacity: 0;
  transform: translateY(18px);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.payout-vault-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 133, 0.15);
}
.payout-vault-item img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1; }

body.vault-open { overflow: hidden; }

@media (max-width: 640px) {
  .payout-vault-panel { padding: 70px 20px 28px; border-radius: 18px; }
  .payout-vault-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

/* ===== REVEAL ANIMATION BASE (JS-driven via GSAP; CSS fallback) ===== */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .story-layout { grid-template-columns: 1fr; gap: 48px; }
  .story-photo { position: static; max-width: 320px; margin: 0 auto; }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-featured { transform: none; order: -1; }
  .price-featured:hover { transform: translateY(-6px); }
  .offer-row { grid-template-columns: 1fr; gap: 12px; }
  .offer-num { font-size: 28px; }
  .social-links { grid-template-columns: repeat(2, 1fr); }
  .social-card { padding: 40px 28px; }
}

@media (max-width: 600px) {
  .nav-inner { padding: 0 16px; }
  .nav-logo img { height: 22px; }
  .nav-inner .btn { padding: 8px 14px; font-size: 12px; gap: 6px; }

  /* tighter vertical rhythm — the phone version was running very long */
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
  .container { padding: 0 20px; }
  .hero { padding: 100px 16px 48px; }
  .hero-sub { margin-bottom: 28px; }
  .hero-cta { margin-bottom: 40px; }
  .scroll-cue { display: none; }
  .hero-stats { gap: 16px; }
  .stat-sep { display: none; }
  .method-grid { grid-template-columns: 1fr; }
  .discord-cta { flex-direction: column; text-align: center; padding: 32px 24px; }
  .legacy-grid { grid-template-columns: 1fr; }
  .social-links { grid-template-columns: 1fr; }
  .social-card { padding: 32px 20px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .review-card { width: 78vw; margin: 0 8px; padding: 24px; }
  .review-text { min-height: 130px; font-size: 14px; }

  /* pricing cards side by side, swipeable, instead of one long vertical
     stack — native scroll-snap, no JS needed. Bleeds past .container's own
     padding to the true screen edge so the "peek" of the next card can
     show right up against it, then re-adds the same inset as its own
     padding so the visible card still lines up with the rest of the page. */
  .pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    margin: 0 -20px;
    padding: 4px 20px 14px;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .price-card {
    scroll-snap-align: center;
    flex: 0 0 84%;
  }
  .price-featured { transform: none; }
  .price-featured:hover { transform: translateY(-6px); }

  /* collapse the middle of the story timeline and the last two method
     cards behind a "show more" tap — expanded via .is-expanded, added by
     main.js on click */
  .timeline-collapsible { display: none; }
  .timeline.is-expanded .timeline-collapsible { display: block; }
  .method-card-extra { display: none; }
  .method-grid.is-expanded .method-card-extra { display: block; }
  .collapse-toggle { display: flex; }
}