/* ══════════════════════════════════════════════
   CREATE VYRAL MARKETING LLP — PREMIUM STYLESHEET
   ══════════════════════════════════════════════ */

:root {
  --black:        #0A0A0A;
  --black-2:      #111111;
  --cream:        #F4F1E8;
  --cream-2:      #EDE8DA;
  --text-dark:    #0A0A0A;
  --text-dark-dim: rgba(10,10,10,0.55);
  --text-light:   #F4F1E8;
  --text-light-dim: rgba(244,241,232,0.55);
  --border-dark:  rgba(244,241,232,0.1);
  --border-light: rgba(10,10,10,0.08);
  --accent:       #C5FF3E;
  --accent-warm:  #D4FF57;
  --accent-soft:  rgba(197,255,62,0.1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--black);
  color: var(--text-light);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* grain overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity:0.035; pointer-events:none; z-index:100; mix-blend-mode:overlay;
}

::selection { background:var(--accent); color:var(--black); }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul { list-style:none; }

h1,h2,h3,h4 {
  font-family:'Syne',sans-serif;
  letter-spacing:-0.035em;
  line-height:0.95;
  font-weight:700;
}

.mono {
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.container { max-width:1320px; margin:0 auto; padding:0 40px; }
@media(max-width:768px){ .container{ padding:0 24px; } }

/* ══════════════════════════════════════════════
   NAV — floating pill
   ══════════════════════════════════════════════ */
nav {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:500;
  padding:8px;
  background:rgba(16,16,16,0.72);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(244,241,232,0.08);
  border-radius:999px;
  display:flex; align-items:center; gap:4px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transition:background 0.4s, border-color 0.4s;
  white-space:nowrap;
}

nav.on-cream {
  background:rgba(244,241,232,0.82);
  border-color:rgba(10,10,10,0.08);
}
nav.on-cream .nav-brand,
nav.on-cream .nav-link { color:var(--black); }
nav.on-cream .nav-link { color:rgba(10,10,10,0.55); }
nav.on-cream .nav-link:hover { color:var(--black); }
nav.on-cream .nav-divider { background:rgba(10,10,10,0.12); }

.nav-brand {
  font-family:'Syne',sans-serif;
  font-weight:800; font-size:15px; letter-spacing:-0.02em;
  padding:8px 14px 8px 16px;
  display:flex; align-items:center; gap:8px;
  color:var(--text-light);
  transition:color 0.4s;
}
.dot {
  width:7px; height:7px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 10px var(--accent);
  flex-shrink:0;
}
.nav-divider {
  width:1px; height:16px;
  background:var(--border-dark); margin:0 4px;
  transition:background 0.4s;
}
.nav-inner-links { display:flex; }
.nav-link {
  padding:8px 14px; font-size:13px;
  color:var(--text-light-dim); font-weight:400;
  border-radius:999px;
  transition:color 0.2s, background 0.2s;
}
.nav-link:hover { color:var(--text-light); }
/* Voice Forge nav CTA */
.nav-vf-cta {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; margin-left:2px;
  font-size:12px; font-weight:700;
  color:#080808;
  background:var(--accent);
  border-radius:999px;
  text-decoration:none;
  letter-spacing:-.01em;
  transition:opacity .15s, transform .1s;
  box-shadow:0 0 14px rgba(197,255,62,.25);
  white-space:nowrap;
}
.nav-vf-cta:hover { opacity:.9; transform:translateY(-1px); }

.nav-login {
  padding:8px 16px; margin-left:2px;
  font-size:13px; font-weight:500;
  color:var(--text-light-dim);
  border:1px solid var(--border-dark);
  border-radius:999px;
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-login:hover { color:var(--text-light); border-color:var(--text-light-dim); }
nav.on-cream .nav-login { color:rgba(10,10,10,0.55); border-color:rgba(10,10,10,0.15); }
nav.on-cream .nav-login:hover { color:var(--black); border-color:rgba(10,10,10,0.4); }
.nav-cta {
  background:var(--accent) !important;
  color:var(--black) !important;
  padding:9px 18px; margin-left:4px;
  font-weight:600; font-size:13px;
  transition:transform 0.2s, background 0.2s;
}
.nav-cta:hover { transform:translateY(-1px); background:var(--accent-warm) !important; }

@media(max-width:768px){
  .nav-inner-links { display:none !important; }
  nav { padding:6px; }
  .nav-brand { padding:6px 10px 6px 14px; font-size:14px; }
  .nav-login { padding:7px 12px; font-size:12px; }
  .nav-cta { padding:8px 14px; font-size:12px; }
}

/* ══════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════ */
section { position:relative; overflow:hidden; }
.section-black { background:var(--black); color:var(--text-light); }
.section-cream { background:var(--cream); color:var(--text-dark); }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.hero {
  min-height:100vh; padding:120px 0 80px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.hero::before {
  content:''; position:absolute;
  top:20%; right:-20%;
  width:800px; height:800px;
  background:radial-gradient(circle, rgba(197,255,62,0.08) 0%, transparent 60%);
  filter:blur(80px); pointer-events:none;
}
.hero-mono {
  margin-bottom:32px;
  color:var(--text-light-dim);
  display:flex; align-items:center; gap:12px;
}
.hero-mono .line { width:40px; height:1px; background:var(--text-light-dim); }
.hero h1 {
  font-size:clamp(52px,10vw,168px);
  font-weight:700; line-height:0.92;
  letter-spacing:-0.045em;
  max-width:1300px;
}
.hero h1 em {
  font-style:normal; color:var(--accent);
  font-weight:600; position:relative; display:inline-block;
}
.hero h1 em::before {
  content:''; position:absolute; inset:-4px -8px;
  background:rgba(197,255,62,0.08);
  border-radius:4px; z-index:-1;
}
.hero-foot {
  margin-top:auto; padding-top:80px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}
.hero-desc {
  max-width:480px; font-size:16px;
  color:var(--text-light-dim); line-height:1.6;
}
.hero-scroll {
  display:flex; align-items:center; gap:10px;
  color:var(--text-light-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
}
.arrow-down {
  width:28px; height:28px;
  border:1px solid var(--border-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* ══════════════════════════════════════════════
   MARQUEE STRIP
   ══════════════════════════════════════════════ */
.strip {
  padding:28px 0;
  border-top:1px solid var(--border-dark);
  border-bottom:1px solid var(--border-dark);
  overflow:hidden; white-space:nowrap;
  background:var(--black);
}
.strip-track {
  display:inline-flex; gap:64px;
  animation:marquee 38s linear infinite;
  font-family:'Syne',sans-serif;
  font-weight:600; font-size:20px;
  color:var(--text-light); letter-spacing:-0.02em;
}
.strip-track span { display:inline-flex; align-items:center; gap:64px; }
.strip-track .star { color:var(--accent); font-size:13px; }
@keyframes marquee {
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ══════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════ */
.about { padding:180px 0 140px; }
.about-head {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-dark-dim); margin-bottom:60px;
  display:flex; align-items:center; gap:14px;
}
.about-head::before {
  content:''; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(197,255,62,0.2);
}
.about h2 {
  font-size:clamp(40px,7.5vw,116px);
  font-weight:700; max-width:1200px;
  line-height:0.95; margin-bottom:80px;
}
.about h2 em {
  font-style:normal; color:var(--black);
  position:relative; display:inline-block;
}
.about h2 em::after {
  content:''; position:absolute;
  left:-2%; right:-2%; bottom:8%; height:28%;
  background:var(--accent); z-index:-1;
  transform:skewX(-4deg);
}
.about-detail {
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:100px; padding-top:60px;
  border-top:1px solid var(--border-light);
}
.about-detail .mono { color:var(--text-dark-dim); }
.about-detail p {
  font-size:17px; line-height:1.65;
  color:rgba(10,10,10,0.72); margin-bottom:20px;
}
.about-detail p strong { color:var(--black); font-weight:600; }
@media(max-width:900px){
  .about-detail{ grid-template-columns:1fr; gap:28px; }
}

/* ══════════════════════════════════════════════
   PILLARS / SERVICES
   ══════════════════════════════════════════════ */
.pillars { padding:180px 0 140px; }
.pillars-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:100px; gap:40px; flex-wrap:wrap;
}
.pillars-head h2 {
  font-size:clamp(44px,7vw,108px); max-width:900px;
}
.pillars-head h2 em { font-style:normal; color:var(--accent); }

.pillars-tag {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--text-light-dim);
  display:flex; align-items:center; gap:10px;
}
.pillars-tag .count {
  font-family:'Syne',sans-serif; font-size:40px;
  color:var(--accent); line-height:1;
}
.pillars-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border-dark);
}
.pillar {
  border-bottom:1px solid var(--border-dark);
  border-right:1px solid var(--border-dark);
  padding:44px 36px 36px;
  position:relative; transition:background 0.3s;
}
.pillar:nth-child(3n){ border-right:none; }
.pillar:hover { background:rgba(197,255,62,0.03); }
.pillar-num {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.12em; color:var(--accent);
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:48px;
}
.pillar-num .arrow { width:16px; height:16px; opacity:0.3; transition:opacity 0.2s, transform 0.2s; }
.pillar:hover .pillar-num .arrow { opacity:1; transform:translateX(4px) translateY(-4px); }
.pillar h3 { font-size:clamp(26px,2.8vw,36px); margin-bottom:20px; font-weight:700; }
.pillar p { color:var(--text-light-dim); font-size:15px; line-height:1.6; }

@media(max-width:900px){
  .pillars-grid{ grid-template-columns:1fr; }
  .pillar{ border-right:none !important; }
}

/* ══════════════════════════════════════════════
   BLUEPRINT / DASHBOARD MOCKUP
   ══════════════════════════════════════════════ */
.blueprint { padding:180px 0 140px; }
.blueprint-head { margin-bottom:80px; }
.blueprint-head .mono {
  color:var(--text-dark-dim); margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.blueprint-head .mono::before {
  content:''; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(197,255,62,0.2);
}
.blueprint-head h2 {
  font-size:clamp(40px,6.5vw,96px); max-width:1100px; font-weight:700;
}
.blueprint-head h2 em { font-style:normal; color:var(--accent); font-weight:600; }

.blueprint-frame {
  border-radius:24px; overflow:hidden; position:relative;
  aspect-ratio:16/10;
  background-image:
    linear-gradient(rgba(197,255,62,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,255,62,0.06) 1px, transparent 1px);
  background-size:40px 40px; background-color:#0C0C0C;
  border:1px solid rgba(197,255,62,0.15);
}
.bp-inner {
  position:absolute; inset:24px;
  display:grid; grid-template-columns:200px 1fr; gap:16px;
}
.bp-sidebar {
  background:rgba(16,16,16,0.85);
  backdrop-filter:blur(8px);
  border:1px solid rgba(244,241,232,0.06);
  border-radius:12px; padding:16px;
}
.bp-brand {
  font-family:'Syne',sans-serif; font-weight:700; font-size:12px;
  padding:4px 8px; color:var(--accent); letter-spacing:0.08em;
  margin-bottom:4px;
}
.bp-sb-label {
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-light-dim); margin:14px 0 8px;
}
.bp-sb-item {
  padding:8px 10px; border-radius:6px;
  font-size:12px; color:var(--text-light-dim);
  margin-bottom:2px; display:flex; align-items:center; gap:8px;
}
.bp-sb-item.active { background:rgba(197,255,62,0.1); color:var(--accent); }
.bp-sb-dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:0.6; }

.bp-main { position:relative; }
.bp-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-bottom:16px;
}
.bp-stat {
  background:rgba(16,16,16,0.6); backdrop-filter:blur(8px);
  border:1px solid rgba(244,241,232,0.06);
  border-radius:10px; padding:14px 16px;
}
.bp-stat.accent .val { color:var(--accent); }
.bp-stat .lab {
  font-family:'JetBrains Mono',monospace; font-size:8px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-light-dim); margin-bottom:8px;
}
.bp-stat .val {
  font-family:'Syne',sans-serif; font-weight:700; font-size:26px;
  letter-spacing:-0.02em; color:var(--text-light);
}
.bp-calendar {
  background:rgba(16,16,16,0.6); backdrop-filter:blur(8px);
  border:1px solid rgba(244,241,232,0.06);
  border-radius:12px; padding:16px;
}
.bp-cal-head {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
}
.bp-cal-head .t {
  font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--text-light);
}
.bp-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.bp-cell {
  aspect-ratio:1;
  background:rgba(244,241,232,0.03); border:1px solid rgba(244,241,232,0.05);
  border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-light-dim);
}
.bp-cell.filled {
  background:rgba(197,255,62,0.1); border-color:rgba(197,255,62,0.3); color:var(--accent);
}
.bp-cell.today { background:var(--accent); color:var(--black); font-weight:700; border-color:var(--accent); }

.bp-label {
  position:absolute;
  font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:0.1em; color:var(--accent);
  padding:3px 7px;
  background:rgba(10,10,10,0.85);
  border:1px solid rgba(197,255,62,0.3);
  border-radius:3px; text-transform:uppercase;
  z-index:2; pointer-events:none;
}
.bp-label::after {
  content:''; position:absolute; left:-18px; top:50%;
  width:16px; height:1px; background:rgba(197,255,62,0.4);
}
.bp-label.top-left { top:38px; left:260px; }
.bp-label.mid-right { top:45%; right:40px; }
.bp-label.bottom { bottom:45px; left:50%; transform:translateX(-50%); }
.bp-label.bottom::after { display:none; }

@media(max-width:768px){
  .blueprint-frame{ aspect-ratio:4/5; }
  .bp-inner{ grid-template-columns:1fr; inset:12px; }
  .bp-sidebar{ display:none; }
  .bp-label{ display:none; }
}

/* ══════════════════════════════════════════════
   TRACTION / WHO WE SERVE
   ══════════════════════════════════════════════ */
.traction { padding:180px 0 140px; }
.traction-label {
  color:var(--text-light-dim); margin-bottom:32px;
  display:flex; align-items:center; gap:12px;
}
.dot-accent {
  display:inline-block; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(197,255,62,0.2);
  flex-shrink:0;
}
.dot-accent-dark {
  display:inline-block; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(197,255,62,0.2);
  flex-shrink:0;
}
.traction-statement {
  font-size:clamp(44px,7vw,112px);
  font-weight:700; max-width:1300px;
  margin-bottom:100px; line-height:0.95;
  font-family:'Syne',sans-serif; letter-spacing:-0.04em;
}
.traction-statement em { font-style:normal; color:var(--accent); }

.traction-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border-dark);
}
.t-stat { padding:44px 36px; border-right:1px solid var(--border-dark); min-width:0; }
.t-stat:first-child { padding-left:0; }
.t-stat:last-child { border-right:none; padding-right:0; }
.t-stat .mono { color:var(--text-light-dim); margin-bottom:28px; display:block; }
.t-stat .big {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:clamp(38px,4vw,60px); letter-spacing:-0.035em;
  line-height:1; margin-bottom:14px; white-space:nowrap;
}
.t-stat .big .unit { color:var(--accent); }
.t-stat .cap { color:var(--text-light-dim); font-size:13px; line-height:1.55; }

@media(max-width:900px){
  .traction-stats{ grid-template-columns:repeat(2,1fr); }
  .t-stat{ padding:28px 20px; border-bottom:1px solid var(--border-dark); }
  .t-stat:first-child{ padding-left:20px; }
  .t-stat:last-child{ padding-right:20px; }
  .t-stat:nth-child(2n){ border-right:none; }
}

.brand-badges {
  margin-top:80px; padding:40px 0;
  border-top:1px dashed var(--border-dark);
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
}
.brand-badges .lbl {
  color:var(--text-light-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
}
.brand-badges .name {
  font-family:'Syne',sans-serif; font-weight:600;
  font-size:20px; color:var(--text-light); letter-spacing:-0.02em;
}

/* ══════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════ */
.pricing { padding:180px 0 80px; }
.pricing-head { margin-bottom:56px; }
.pricing-head .mono {
  color:var(--text-dark-dim); margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.pricing-head .mono::before {
  content:''; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(197,255,62,0.2);
}
.pricing-head h2 {
  font-size:clamp(44px,7vw,108px); max-width:1100px; font-weight:700;
}
.pricing-head h2 em {
  font-style:normal; color:var(--black);
  position:relative; display:inline-block;
}
.pricing-head h2 em::after {
  content:''; position:absolute;
  left:-2%; right:-2%; bottom:8%; height:28%;
  background:var(--accent); z-index:-1; transform:skewX(-4deg);
}

/* billing toggle */
.billing-row {
  display:flex; align-items:center; gap:14px;
  margin-bottom:56px; flex-wrap:wrap;
}
.billing-label {
  font-size:14px; font-weight:500;
  color:var(--text-dark-dim); transition:color 0.2s;
  display:flex; align-items:center; gap:8px;
}
.billing-label.active { color:var(--text-dark); font-weight:600; }
.toggle-pill {
  width:48px; height:26px;
  background:rgba(10,10,10,0.12); border-radius:999px;
  position:relative; cursor:pointer; border:1px solid rgba(10,10,10,0.15);
  transition:background 0.3s;
}
.toggle-pill.on { background:var(--accent); border-color:var(--accent); }
.toggle-thumb {
  width:20px; height:20px; background:#fff;
  border-radius:50%; position:absolute; top:2px; left:2px;
  transition:transform 0.3s;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.toggle-pill.on .toggle-thumb { transform:translateX(22px); }
.save-tag {
  font-size:11px; font-weight:700;
  background:rgba(10,10,10,0.1);
  color:#5a8a00; border-radius:999px;
  padding:3px 9px; border:1px solid rgba(10,10,10,0.1);
}

/* pricing grid */
.pricing-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; border:1px solid var(--border-light);
  border-radius:20px; overflow:hidden; margin-bottom:64px;
}
.tier {
  padding:40px 36px; background:transparent;
  border-right:1px solid var(--border-light);
  display:flex; flex-direction:column; position:relative;
  transition:background 0.3s;
}
.tier:last-child { border-right:none; }
.tier:hover { background:rgba(10,10,10,0.03); }
.tier.featured {
  background:var(--black); color:var(--text-light);
}
.tier.featured:hover { background:#141414; }
.tier.featured::before {
  content:'MOST POPULAR';
  position:absolute; top:24px; right:24px;
  background:var(--accent); color:var(--black);
  padding:4px 10px; border-radius:999px;
  font-size:9px; font-weight:700; letter-spacing:0.12em;
  font-family:'JetBrains Mono',monospace;
}
.tier-emoji { font-size:1.8rem; margin-bottom:12px; }
.tier-name {
  font-family:'Syne',sans-serif; font-weight:700; font-size:28px;
  margin-bottom:10px; letter-spacing:-0.02em;
}
.tier-desc {
  font-size:14px; color:var(--text-dark-dim);
  margin-bottom:32px; min-height:42px; line-height:1.55;
}
.tier.featured .tier-desc { color:var(--text-light-dim); }
.tier-price {
  display:flex; align-items:baseline; gap:6px;
  margin-bottom:8px;
}
.tier-price .amount {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:50px; letter-spacing:-0.04em; line-height:1;
  transition:all 0.25s ease;
}
.tier.featured .tier-price .amount { color:var(--accent); }
.tier-price .period {
  font-size:13px; color:var(--text-dark-dim);
  font-family:'JetBrains Mono',monospace;
}
.tier.featured .tier-price .period { color:var(--text-light-dim); }
.annual-price-note {
  font-size:12px; color:var(--text-dark-dim);
  margin-bottom:28px; font-family:'JetBrains Mono',monospace;
  min-height:18px;
}
.tier.featured .annual-price-note { color:var(--text-light-dim); }
.tier-features {
  list-style:none; margin-bottom:32px; flex:1;
}
.tier-features li {
  padding:9px 0; font-size:14px;
  display:flex; align-items:flex-start; gap:12px;
  line-height:1.45; color:rgba(10,10,10,0.75);
  border-bottom:1px dashed var(--border-light);
}
.tier-features li:last-child { border-bottom:none; }
.tier.featured .tier-features li {
  color:rgba(244,241,232,0.75); border-color:var(--border-dark);
}
.tier-features li::before {
  content:'→'; color:var(--accent); font-weight:600;
  flex-shrink:0; font-family:'Syne',sans-serif;
}
.tier-cta {
  display:block; text-align:center;
  padding:15px 20px; border-radius:999px;
  font-weight:600; font-size:14px;
  border:1px solid var(--black); color:var(--black);
  background:transparent; transition:all 0.2s;
  cursor:pointer; font-family:'DM Sans',sans-serif; width:100%;
}
.tier:not(.featured) .tier-cta:hover {
  background:var(--black); color:var(--cream);
}
.tier.featured .tier-cta {
  background:var(--accent); color:var(--black); border-color:var(--accent);
}
.tier.featured .tier-cta:hover {
  background:var(--accent-warm);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(197,255,62,0.3);
}

@media(max-width:900px){
  .pricing-grid{ grid-template-columns:1fr; }
  .tier{ border-right:none; border-bottom:1px solid var(--border-light); }
  .tier:last-child{ border-bottom:none; }
}

/* add-ons */
.addons-wrap {
  padding-top:48px; border-top:1px solid var(--border-light);
  margin-bottom:48px;
}
.addons-label { color:var(--text-dark-dim); margin-bottom:28px; display:block; }
.addons-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin-bottom:24px;
}
.addon {
  display:flex; align-items:center; gap:14px;
  background:rgba(10,10,10,0.04);
  border:1px solid var(--border-light);
  border-radius:14px; padding:18px;
  transition:all 0.2s;
}
.addon:hover { background:rgba(10,10,10,0.07); border-color:rgba(10,10,10,0.14); }
.addon-ico { font-size:1.5rem; flex-shrink:0; }
.addon div { display:flex; flex-direction:column; gap:3px; }
.addon strong { font-size:.9rem; font-weight:700; color:var(--black); }
.addon span { font-size:.8rem; color:var(--text-dark-dim); }
.annual-note {
  text-align:center; font-size:.9rem;
  color:var(--text-dark-dim); padding:18px;
  background:rgba(197,255,62,0.08);
  border:1px solid rgba(197,255,62,0.2); border-radius:12px;
}
.annual-note strong { color:#5a8a00; }

@media(max-width:900px){ .addons-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .addons-row{ grid-template-columns:1fr; } }

/* elite strip */
.elite-strip {
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
  background:var(--black); color:var(--text-light);
  border-radius:20px; padding:48px 48px;
}
.elite-left .mono { color:var(--accent); margin-bottom:12px; display:block; }
.elite-price {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:clamp(24px,3vw,40px); letter-spacing:-0.02em;
  margin-bottom:16px;
}
.elite-left p { font-size:15px; color:var(--text-light-dim); line-height:1.65; max-width:560px; }
.elite-btn {
  background:var(--accent); color:var(--black);
  padding:18px 32px; border-radius:999px;
  font-weight:600; font-size:15px; white-space:nowrap;
  transition:transform 0.2s, box-shadow 0.2s;
  flex-shrink:0;
}
.elite-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(197,255,62,0.3);
}

/* ══════════════════════════════════════════════
   WHY US
   ══════════════════════════════════════════════ */
.why { padding:200px 0 160px; }
.why-label {
  color:var(--text-dark-dim); margin-bottom:40px;
  display:flex; align-items:center; gap:12px;
}
.why h2 {
  font-size:clamp(40px,6.5vw,100px); font-weight:700;
  max-width:1200px; line-height:0.98; margin-bottom:80px;
}
.why h2 em {
  font-style:normal; color:var(--black);
  position:relative; display:inline-block;
}
.why h2 em::after {
  content:''; position:absolute;
  left:-2%; right:-2%; bottom:8%; height:28%;
  background:var(--accent); z-index:-1; transform:skewX(-4deg);
}
.why-compare {
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
}
.why-col { padding:40px 0; }
.why-col:first-child { padding-right:60px; border-right:1px solid var(--border-light); }
.why-col:last-child { padding-left:60px; }
.why-col .col-label {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.15em; text-transform:uppercase; margin-bottom:28px;
}
.why-col.others .col-label { color:var(--text-dark-dim); }
.why-col.us .col-label { color:#5a8a00; }
.why-col.us .col-label::before { content:'★ '; }
.why-col li {
  padding:14px 0; font-size:17px;
  border-bottom:1px dashed var(--border-light);
  display:flex; gap:14px; align-items:flex-start;
}
.why-col li:last-child { border-bottom:none; }
.why-col.others li { color:var(--text-dark-dim); }
.why-col.others li::before { content:'—'; color:var(--text-dark-dim); font-family:'JetBrains Mono',monospace; }
.why-col.us li::before { content:'✓'; color:#5a8a00; font-weight:700; }

@media(max-width:768px){
  .why-compare{ grid-template-columns:1fr; }
  .why-col:first-child{ padding-right:0; border-right:none; border-bottom:1px solid var(--border-light); }
  .why-col:last-child{ padding-left:0; padding-top:40px; }
}

/* ══════════════════════════════════════════════
   FINAL CTA
   ══════════════════════════════════════════════ */
.final-cta { padding:200px 0 180px; position:relative; }
.final-cta::before {
  content:''; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:1000px; height:1000px;
  background:radial-gradient(circle, rgba(197,255,62,0.1) 0%, transparent 60%);
  filter:blur(100px); pointer-events:none;
}
.final-cta-inner { position:relative; }
.cta-label {
  color:var(--text-light-dim); margin-bottom:32px;
  display:flex; align-items:center; gap:12px;
}
.final-cta h2 {
  font-size:clamp(48px,9vw,168px); font-weight:700;
  line-height:0.92; letter-spacing:-0.045em; margin-bottom:60px;
}
.final-cta h2 em { font-style:normal; color:var(--accent); font-weight:600; }
.final-cta-actions {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:56px;
}
.btn-huge {
  background:var(--accent); color:var(--black);
  padding:22px 38px; border-radius:999px;
  font-weight:600; font-size:16px;
  display:inline-flex; align-items:center; gap:12px;
  transition:transform 0.2s, box-shadow 0.2s;
}
.btn-huge:hover {
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(197,255,62,0.3);
}
.btn-huge-ghost {
  padding:22px 38px; border:1px solid var(--border-dark);
  border-radius:999px; font-weight:500; font-size:16px;
  color:var(--text-light); transition:border-color 0.2s;
}
.btn-huge-ghost:hover { border-color:var(--accent); }

.final-cta-login {
  margin-top:24px;
  font-size:14px; color:var(--text-light-dim);
}
.final-cta-login a {
  color:var(--accent); font-weight:500;
  transition:opacity 0.2s;
}
.final-cta-login a:hover { opacity:0.75; }

.contact-links {
  display:flex; gap:40px; flex-wrap:wrap;
  padding-top:48px; border-top:1px solid var(--border-dark);
}
.contact-link {
  display:flex; flex-direction:column; gap:6px;
  transition:opacity 0.2s;
}
.contact-link:hover { opacity:0.8; }
.contact-link .mono { color:var(--text-light-dim); font-size:10px; }
.contact-link span:last-child {
  font-family:'Syne',sans-serif; font-size:clamp(16px,2vw,24px);
  font-weight:600; color:var(--text-light); letter-spacing:-0.01em;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
footer {
  border-top:1px solid var(--border-dark);
  padding:80px 0 40px; background:var(--black);
}
.footer-big {
  font-family:'Syne',sans-serif;
  font-size:clamp(44px,8vw,120px); font-weight:700;
  letter-spacing:-0.04em; line-height:0.95; margin-bottom:80px;
}
.footer-big em { font-style:normal; color:var(--accent); }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px; padding-bottom:60px;
  border-bottom:1px solid var(--border-dark);
}
.footer-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:17px;
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px; letter-spacing:-0.02em;
}
.footer-brand p {
  color:var(--text-light-dim); font-size:14px; line-height:1.7;
  max-width:340px; margin-bottom:12px;
}
.footer-tagline {
  font-size:13px; font-style:italic;
  color:var(--accent); font-weight:600; letter-spacing:0.01em;
}
.footer-col h4 {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-light-dim); margin-bottom:20px; font-weight:500;
}
.footer-col li { margin-bottom:12px; }
.footer-col a { color:var(--text-light); font-size:14px; transition:color 0.2s; }
.footer-col a:hover { color:var(--accent); }

.footer-bottom {
  padding-top:32px; display:flex; justify-content:space-between;
  font-size:12px; color:var(--text-light-dim);
  flex-wrap:wrap; gap:16px;
  font-family:'JetBrains Mono',monospace;
}
.lang-pills { display:flex; gap:6px; flex-wrap:wrap; }
.lang-pills span {
  padding:3px 10px; border:1px solid var(--border-dark);
  border-radius:999px; font-size:10px; letter-spacing:0.1em;
}
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media(max-width:600px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
}

/* ══════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:600; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; visibility:hidden;
  transition:opacity 0.3s, visibility 0.3s;
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
  background:var(--black); border:1px solid var(--accent);
  border-radius:24px; max-width:520px; width:100%;
  padding:48px 40px 40px; text-align:center;
  position:relative;
  transform:scale(0.92) translateY(16px);
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 30px 80px rgba(197,255,62,0.15); overflow:hidden;
}
.modal-overlay.active .modal { transform:scale(1) translateY(0); }
.modal::before {
  content:''; position:absolute; top:-100px; left:50%;
  transform:translateX(-50%); width:400px; height:400px;
  background:radial-gradient(circle, rgba(197,255,62,0.15) 0%, transparent 60%);
  filter:blur(40px); pointer-events:none;
}
.modal-close {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(244,241,232,0.05);
  border:1px solid var(--border-dark);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-light-dim); transition:all 0.2s; z-index:2;
}
.modal-close:hover { color:var(--text-light); border-color:var(--accent); }
.modal-inner { position:relative; z-index:1; }
.modal-icon {
  width:88px; height:88px; margin:0 auto 28px;
  border-radius:50%; background:var(--accent); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(197,255,62,0.5);
  animation:bounceIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
@keyframes bounceIn {
  0%{ transform:scale(0); }
  100%{ transform:scale(1); }
}
.modal-badge {
  display:inline-block; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.15em;
  padding:6px 14px; background:rgba(197,255,62,0.1);
  color:var(--accent); border-radius:999px; border:1px solid var(--accent);
  margin-bottom:20px; text-transform:uppercase; font-weight:600;
}
.modal h3 { font-size:36px; margin-bottom:16px; }
.modal h3 span { color:var(--accent); }
.modal-sub {
  color:var(--text-light-dim); font-size:15px; line-height:1.6;
  margin-bottom:32px; max-width:400px; margin-left:auto; margin-right:auto;
}
.modal-perks {
  background:rgba(244,241,232,0.03);
  border:1px solid var(--border-dark);
  border-radius:12px; padding:20px; margin-bottom:28px; text-align:left;
}
.modal-perks-head {
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:0.12em; color:var(--text-light-dim);
  text-transform:uppercase; margin-bottom:12px;
}
.modal-perks li {
  font-size:13px; padding:6px 0;
  display:flex; align-items:center; gap:10px;
}
.modal-perks li::before { content:'✓'; color:var(--accent); font-weight:700; font-size:12px; }
.modal-btn {
  background:var(--accent); color:var(--black);
  padding:16px 32px; border-radius:999px;
  font-weight:600; font-size:15px; width:100%;
  transition:transform 0.2s, box-shadow 0.2s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.modal-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(197,255,62,0.4);
}
body.modal-open { overflow:hidden; }

/* confetti */
.confetti {
  position:fixed; width:8px; height:8px;
  pointer-events:none;
  animation:confetti-fall 3s ease-out forwards; z-index:700;
}
@keyframes confetti-fall {
  0%{ transform:translateY(0) rotate(0); opacity:1; }
  100%{ transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* scroll reveal */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity:1; transform:none; }