/* Base */
:root {
  --bg: #0a0b0e;
  --surface: #111318;
  --surface-2: #1a1c24;
  --lime: #c8f564;
  --lime-dim: #a5c84e;
  --text: #e2e0d8;
  --text-muted: #8a8a8a;
  --text-dim: #5a5a5a;
  --border: #1e2028;
  --red: #f56464;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Nav */
.nav { border-bottom: 1px solid var(--border); padding: 20px 0; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.logo-mark { color: var(--lime); margin-right: 6px; }
.nav-badge { font-size: 0.75rem; color: var(--text-muted); border: 1px solid var(--border); padding: 4px 12px; border-radius: 20px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.03em; }
/* Hero */
.hero { padding: 80px 0 100px; }
.hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--lime); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.hero-headline { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); margin-bottom: 20px; }
.hero-sub { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 48px; max-width: 480px; }
.hero-stats { display: flex; flex-direction: column; gap: 24px; }
.stat { display: flex; align-items: baseline; gap: 14px; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 600; color: var(--lime); min-width: 80px; }
.stat-label { font-size: 0.9rem; color: var(--text-muted); }
/* Phone mockup */
.hero-right { display: flex; flex-direction: column; gap: 20px; }
.phone-mock { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; }
.phone-label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.phone-caller { font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.phone-number-type { font-size: 0.85rem; color: var(--lime); font-family: 'JetBrains Mono', monospace; margin-bottom: 20px; }
.phone-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.phone-ai-reading { flex: 1; font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.ai-dots { display: flex; gap: 4px; }
.ai-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: dot-pulse 1.2s ease-in-out infinite; }
.ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.phone-btn { font-size: 0.8rem; font-weight: 600; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.phone-btn-accept { background: var(--lime); color: #0a0b0e; }
.phone-btn-transfer { border: 1px solid var(--border); color: var(--text-muted); }
.phone-response { background: var(--surface-2); border-radius: 12px; padding: 16px; border: 1px solid var(--border); }
.response-line { font-size: 0.9rem; color: var(--text); font-style: italic; margin-bottom: 8px; }
.response-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--lime); }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.review-stars { color: var(--lime); font-size: 1rem; margin-bottom: 10px; letter-spacing: 2px; }
.review-text { font-size: 0.9rem; color: var(--text); line-height: 1.6; margin-bottom: 12px; font-style: italic; }
.review-attr { font-size: 0.8rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
/* Section base */
.section-label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--lime); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.section-headline { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; color: var(--text); max-width: 600px; }
/* How */
.how { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.how .section-headline { margin-bottom: 60px; }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.how-step { padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.step-num { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--lime); margin-bottom: 16px; letter-spacing: 0.05em; }
.how-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.how-step p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
/* Features */
.features { padding: 100px 0; }
.features-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.features .section-headline { margin-bottom: 16px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.feature-icon { font-size: 1.4rem; color: var(--lime); margin-bottom: 16px; }
.feature-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.feature-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
/* Niches */
.niches { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.niches-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.niches-body { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-top: 16px; max-width: 400px; }
.niches-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.niche-item { padding: 20px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.niche-name { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; }
.niche-problem { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
/* Pricing */
.pricing { padding: 100px 0; }
.pricing-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.pricing .section-headline { margin-bottom: 48px; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 36px; }
.pricing-card-featured { border-color: var(--lime); }
.pricing-tier { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.pricing-amount { font-size: 2.4rem; font-weight: 900; color: var(--text); letter-spacing: -0.03em; }
.pricing-per { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 28px; }
.pricing-includes { display: flex; flex-direction: column; gap: 10px; }
.pricing-includes p { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
.pricing-includes p::before { content: '→'; color: var(--lime); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }
.pricing-cta-note { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--lime); margin-top: 20px; }
.pricing-target { display: flex; align-items: center; gap: 20px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; max-width: 480px; }
.target-num { font-family: 'JetBrains Mono', monospace; font-size: 3rem; font-weight: 600; color: var(--lime); min-width: 80px; }
.target-text { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.target-result { font-size: 0.9rem; color: var(--text-muted); }
/* Closing */
.closing { padding: 100px 0; }
.closing-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; text-align: center; }
.closing-rule { width: 60px; height: 2px; background: var(--lime); margin: 0 auto 40px; }
.closing-headline { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -0.025em; color: var(--text); line-height: 1.2; margin-bottom: 24px; }
.closing-body { font-size: 1rem; color: var(--text-muted); line-height: 1.7; max-width: 560px; margin: 0 auto 36px; }
.closing-truth { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.truth-item { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--text-muted); }
.truth-sep { color: var(--lime); }
/* Footer */
.footer { border-top: 1px solid var(--border); padding: 48px 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.footer-logo { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.footer-tagline { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.footer-copy { font-size: 0.75rem; color: var(--text-dim); }
/* Responsive */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-right { order: -1; }
  .hero-headline { font-size: 2rem; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .niches-inner { grid-template-columns: 1fr; gap: 40px; }
  .niches-list { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; }
  .stat { flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
  .hero { padding: 48px 0 64px; }
  .how-steps { grid-template-columns: 1fr; }
  .closing-truth { flex-direction: column; gap: 8px; }
  .truth-sep { display: none; }
}