/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --bg:#dcebfff5;
  --panel:#faf8f8;
  --ink:#0c0c0c;
  --muted:#344863;
  --primary:#3b82f6;
  --primary-600:#2563eb;
  --accent:#ad93fc;
  --ring:rgba(59,130,246,.35);
  --shadow:0 10px 30px rgba(2,8,23,.06);
}

*{box-sizing:border-box;}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.6; overflow-x:hidden;
}
.container{width:min(1120px,92%); margin-inline:auto;}
section{margin-bottom:3rem}

/* =========================================================
   BUTTONS & PILLS
========================================================= */
.btn{
  display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
  padding:.9rem 1.25rem; border-radius:9999px; font-weight:700; letter-spacing:.2px;
  text-decoration:none; position:relative; isolation:isolate;
  will-change:transform, box-shadow, filter;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}
.btn-primary{
  color:#fff; background:linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:var(--shadow);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.035); filter:saturate(1.08); box-shadow:0 14px 36px rgba(59,130,246,.35);}
.btn-ghost{background:rgba(255,255,255,.7); border:1px solid rgba(2,8,23,.06); color:var(--primary-600); backdrop-filter:blur(8px);}
.btn-ghost:hover{transform:translateY(-2px) scale(1.035); background:#fff; box-shadow:0 10px 28px rgba(2,8,23,.10);}

/* lightweight CTA for header */
.apply-btn{
  background:linear-gradient(90deg,#b3beff,#d1c7fc); color:#1c1c1e;
  padding:.6rem 1.2rem; border-radius:8px; font-weight:600; border:0; cursor:pointer;
  will-change:transform, box-shadow, background; transition:transform .22s, box-shadow .22s, background .22s;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.apply-btn:hover{background:linear-gradient(90deg,#5c74fc,#c0a5ff); transform:translateY(-2px) scale(1.03); box-shadow:0 12px 30px rgba(2,8,23,.12);}

.pill{background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:9999px; padding:.4rem .8rem; font-size:.85rem; color:var(--muted);}
.badge{padding:.35rem .7rem; border-radius:999px; font-weight:700; font-size:.8rem; background:#eef2ff; color:#3730a3;}

h1,h2{font-family:Inter, sans-serif; letter-spacing:.2px;}
h2{font-size:clamp(1.8rem,2.4vw,2.4rem); margin:0 0 1rem;}
p.lead{font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--muted);}

/* Cards: subtle zoom + highlight */
.card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change:transform, box-shadow;}
.card:hover{transform:translateY(-4px) scale(1.03); box-shadow:0 18px 46px rgba(2,8,23,.14); border-color:rgba(59,130,246,.18);}

/* Focus states */
.btn:focus-visible, .apply-btn:focus-visible, .card:focus-within{outline:none; box-shadow:0 0 0 3px var(--ring);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn,.apply-btn,.card{transition:none;}
  .btn:hover,.apply-btn:hover,.card:hover{transform:none;}
}

/* =========================================================
   HEADER
========================================================= */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:rgba(255,255,255,.7); border-bottom:1px solid rgba(2,8,23,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0;}
.brand{display:flex; align-items:center; gap:.8rem;}
.brand img{width:160px; height:auto; object-fit:contain;}
.nav-links{display:flex; align-items:center; gap:1.25rem;}
.nav-links a{text-decoration:none; color:var(--muted); font-weight:600; padding:.4rem .8rem; border-radius:10px; transition:.2s;}
.nav-links a:hover{background:#e7eaff; color:#0f172a; box-shadow:var(--shadow);}
.mobile-toggle{display:none; background:transparent; border:none; font-size:1.6rem;}
@media (max-width:860px){
  .nav-links{position:fixed; inset:64px 0 auto 0; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid rgba(2,8,23,.06); padding:1rem 1.25rem; display:none; flex-direction:column; align-items:flex-start;}
  .nav-links.show{display:flex;}
  .mobile-toggle{display:block;}
}

/* =========================================================
   HERO (IMAGE LEFT • CONTENT RIGHT)
   Use .hero for static bg, OR add .hero--video and include a video element
========================================================= */
.hero{
  position:relative; color:#fff; overflow:hidden;
  display:grid; align-items:center; min-height:clamp(560px,88vh,900px);
}
.hero--video .hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); z-index:0;}
.hero--video .hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 120% at 85% 20%, rgba(246,173,85,.28) 0%, transparent 40%),
    radial-gradient(120% 120% at 10% 10%, rgba(124,138,203,.35) 0%, transparent 45%),
    linear-gradient(180deg, rgba(15,31,58,.55) 0%, rgba(15,31,58,.35) 60%, rgba(15,31,58,.55) 100%);
}

/* Inner grid: image LEFT, copy RIGHT */
.hero__grid{
  position:relative; z-index:2;
  width:min(1240px,100%); margin:0 auto; padding:clamp(16px,4vw,36px);
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns: 1fr; /* mobile */
}

/* Desktop split */
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(420px,.95fr) minmax(420px,1.05fr); align-items:center;}
}

/* LEFT: Media */
.hero__media{position:relative; display:grid; place-items:center; justify-self:center;}
.hero__phone{
  width:min(2000px,60vw); height:auto; display:block;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));
}
.hero__glow{
  position:absolute; inset:auto 0 -4% 0; height:48%;
  background:radial-gradient(60% 70% at 50% 0%, rgba(124,138,203,.45), rgba(196,181,253,.35) 45%, transparent 70%);
  filter:blur(28px); border-radius:50%; pointer-events:none; z-index:-1;
}

/* RIGHT: Copy */
.hero__copy{max-width:56ch; justify-self:start;}
.hero__eyebrow{display:flex; gap:.6rem; flex-wrap:wrap;}
.hero__eyebrow .pill{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff;}
.hero__title{
  text-wrap:balance;
  font-size:clamp(2.2rem,4.8vw,4.6rem); line-height:1.05;
  margin:5rem 0 1rem; color:#fff; max-width:18ch;
}
.hero__lead{font-size:clamp(1.06rem,1.6vw,1.25rem); color:#fff;}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem;}
.hero__trust{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem;}
.hero__trust .pill{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff;}

/* Align on desktop vs mobile */
@media (min-width:960px){
  .hero__cta, .hero__trust{justify-content:flex-start;}
}
@media (max-width:959px){
  .hero__grid{text-align:center;}
  .hero__media{order:-1;}
  .hero__phone{width:min(460px,88vw);}
  .hero__copy{justify-self:center;}
    .hero__cta,
  .hero__trust{
    justify-content:center;
  }
}
@media (max-width:959px){
  .hero__title {
    margin: 2rem 0 1rem; /* reduce top space only on mobile */
  }
}

/* Optional scroll cue (light on hero) */
.scroll-ind{margin-top:2rem; display:inline-flex; flex-direction:column; align-items:center; color:#e6e9f2; font-size:.9rem;}
.scroll-ind .mouse{width:26px; height:38px; border:2px solid rgba(255,255,255,.35); border-radius:18px; position:relative;}
.scroll-ind .wheel{position:absolute; left:50%; top:6px; width:4px; height:8px; background:rgba(255,255,255,.65); border-radius:2px; transform:translateX(-50%); animation:wheel 1.8s ease-in-out infinite;}
@keyframes wheel{0%{opacity:0; transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0; transform:translate(-50%,14px)}}

/* =========================================================
   WHY JOIN (features)
========================================================= */
.features{padding:3rem 0 1rem;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
@media (max-width:860px){.grid-3{grid-template-columns:1fr;}}
.feature{
  background:var(--panel); border:1px solid rgba(2,8,23,.06); border-radius:20px;
  padding:1.4rem 1.2rem; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.feature::after{content:""; position:absolute; inset:auto -20% -40% -20%; height:120px; background:radial-gradient(60% 80% at 50% 0%, rgba(59,130,246,.08), transparent 70%);}
.icon{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; background:linear-gradient(135deg,#e0f2fe,#ede9fe); border:1px solid rgba(2,8,23,.06);}
.feature::before{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#69db7c,#4dabf7); border-bottom-left-radius:20px; border-bottom-right-radius:20px;}

/* =========================================================
   PATHS (tabs + panels)
========================================================= */
.tabs{margin-top:.8rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;}
.tabs .tab{
  padding:.7rem 1.4rem; font-weight:600; border-radius:9999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.8); color:#1e3a8a; box-shadow:0 4px 10px rgba(0,0,0,.05);
  will-change:transform, box-shadow; transition:transform .22s, box-shadow .22s, background .22s;
}
.tabs .tab:hover{transform:translateY(-2px) scale(1.035); box-shadow:0 12px 28px rgba(59,130,246,.25); background:#fff;}
.tabs .tab.active{background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 10px 26px rgba(59,130,246,.3);}
.path-panels{margin-top:1.2rem;}
.panel{display:none;}
.panel.show{display:block;}

.path-card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.2rem;
  background:var(--panel); border:1px solid rgba(2,8,23,.06); border-radius:22px; padding:1.2rem; box-shadow:var(--shadow);
}
@media (max-width:860px){.path-card{grid-template-columns:1fr;}}
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem;}
.kpi{background:#f8fafc; border:1px solid rgba(2,8,23,.06); border-radius:16px; padding:1rem; text-align:center;}
.kpi b{font-size:1.3rem;}

/* =========================================================
   PAYOUTS
========================================================= */
.payouts{
  margin-top:2rem;
  background:var(--panel);
  border:1px solid rgba(2,8,23,.06);
  border-radius:22px;
  padding:1.2rem;
  box-shadow:var(--shadow);
}

.range-row{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

input[type="range"]{
  accent-color:var(--primary);
  width:260px;
}

/* KPI grid above the table */
.calc-grid{
  display:grid;
  grid-template-columns: 30% 10% 25% 25%; /* matches table colgroup widths */
  gap:1rem;
  margin-top:1rem;
}

.calc-grid .cell{
  background:#f8fafc;
  border:1px solid rgba(2,8,23,.06);
  border-radius:14px;
  padding:.9rem;
  text-align:center;
}

.calc-grid .cell-bonus{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ===== Payouts table (clean + consolidated) ===== */
table.tier{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
  border:1px solid rgba(2,8,23,.06);
  overflow:hidden;
  table-layout:fixed;                 /* stable column widths */
}

.tier th,
.tier td{
  padding:.9rem;
  text-align:center;
  border-bottom:1px solid rgba(2,8,23,.06);
  white-space:normal;                 /* wrap at natural points */
  word-break:normal;
  overflow-wrap:break-word;
}

.tier thead th{
  background:#f1f5f9;
  color:#0f172a;
}

/* ===== Small phones: give Amb/Aff more room & tighten spacing ===== */
@media (max-width:420px){
  /* requires <colgroup> with 4 <col> elements */
  .tier colgroup col:nth-child(1){ width:26% !important; } /* Tier */
  .tier colgroup col:nth-child(2){ width:14% !important; } /* Subs */
  .tier colgroup col:nth-child(3){ width:32% !important; } /* Ambassador */
  .tier colgroup col:nth-child(4){ width:28% !important; } /* Affiliate  */

  .tier thead th{ font-size:.96rem; }
  .tier th, .tier td{ padding:.8rem .6rem; }

  /* KPI cards: keep grid, 2-up, Bonus full-width */
  .calc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
  }
  .calc-grid .cell-bonus{ grid-column:1 / -1; }
  .calc-grid .cell{ font-size:clamp(.95rem,3.6vw,1.05rem); }
}




/* =========================================================
   TIMELINE
========================================================= */
.timeline{margin-top:2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
@media (max-width:860px){.timeline{grid-template-columns:1fr;}}
.step{background:var(--panel); border:1px solid rgba(2,8,23,.06); border-radius:20px; padding:1.1rem; box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden;}
.step .num{width:46px; height:46px; border-radius:999px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent)); margin:.4rem auto .7rem;}
.step::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#69db7c,#4dabf7); pointer-events:none; z-index:1;}

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonials{margin-top:2rem; position:relative;}
.carousel{overflow:hidden; border-radius:20px; border:1px solid rgba(2,8,23,.06); background:var(--panel); box-shadow:var(--shadow);}
.track{display:flex; transition:transform .6s ease;}
.t-card{flex:0 0 100%; padding:1.2rem; display:grid; grid-template-columns:70px 1fr; gap:1rem; align-items:center;}
.avatar{width:64px; height:64px; border-radius:999px; background:#e2e8f0; display:grid; place-items:center; font-weight:800; color:#334155;}
.dots{display:flex; gap:.4rem; justify-content:center; margin-top:.6rem;}
.dots button{width:8px; height:8px; border-radius:999px; background:#cbd5e1; border:none;}
.dots button.active{background:var(--primary);}

/* =========================================================
   FAQ
========================================================= */
.faq-item{background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:14px; padding:.9rem 1rem; margin:.6rem 0;}

/* =========================================================
   FOOTER
========================================================= */
footer{margin-top:3rem; background:linear-gradient(135deg,#e0f2fe,#f5f3ff); border-top:1px solid rgba(2,8,23,.06); padding:2rem 0; text-align:center;}

/* =========================================================
   SCROLL REVEAL
========================================================= */
.reveal{opacity:0; transform:translateY(16px); transition:.6s ease;}
.reveal.visible{opacity:1; transform:none;}




/* ===== Tier celebration visuals ===== */
.celebration-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
}

.payouts{
  position:relative;
  transition: box-shadow .3s ease, border-color .3s ease;
}

/* tier-colored glow on change */
@keyframes tierFlash {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0); }
  40% { box-shadow: 0 0 0 8px var(--tier-glow); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.payouts.tier-flash { animation: tierFlash .9s ease; }

/* map dataset tier -> CSS var */
.payouts[data-tier="Silver"] { --tier-glow: rgba(203, 213, 225, .35); /* slate-200 */ }
.payouts[data-tier="Gold"] { --tier-glow: rgba(245, 158, 11, .35); /* amber-500 */ }
.payouts[data-tier="Platinum"] { --tier-glow: rgba(167, 139, 250, .35); /* violet-400-ish */ }
.payouts[data-tier="Bronze"] { --tier-glow: rgba(234, 179, 8, .20); /* softer */ }

/* Optional: color the Bonus card border subtly per tier */
.calc-grid .cell-bonus{
  border-color: color-mix(in srgb, var(--tier-glow, rgba(2,8,23,.06)) 60%, transparent);
}

/* === Plan toggle (mobile-only) === */
/* Hidden by default (desktop) */
.view-toggle { display: none; }

/* Toggle button base styles (uses your design tokens) */
.vt-btn{
  padding:.6rem 1.1rem;
  font-weight:700;
  border-radius:9999px;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.85);
  color:#1e293b;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}
.vt-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(2,8,23,.12);
}
.vt-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  box-shadow:0 10px 26px rgba(59,130,246,.30);
}

/* --- Mobile behavior: show toggle + switchable columns/cards --- */
@media (max-width: 860px){
  /* Show the toggle on mobile */
  .view-toggle{
    display:flex;
    gap:.6rem;
    margin:.8rem 0 0;
    justify-content:center;
    flex-wrap:wrap;
  }

  /* KPI cards: show only the selected plan */
  /* Requires HTML KPI cells to have .cell-amb and .cell-aff classes */
  .payouts[data-view="amb"] .cell-aff{ display:none; }
  .payouts[data-view="aff"] .cell-amb{ display:none; }

  /* Tier table (columns: 1 Tier, 2 Subs, 3 Ambassador, 4 Affiliate) */
  .payouts[data-view="amb"] table.tier th:nth-child(4),
  .payouts[data-view="amb"] table.tier td:nth-child(4){ display:none; }

  .payouts[data-view="aff"] table.tier th:nth-child(3),
  .payouts[data-view="aff"] table.tier td:nth-child(3){ display:none; }

  /* Emphasize the visible KPI card a bit */
  .payouts[data-view="amb"] .cell-amb,
  .payouts[data-view="aff"] .cell-aff{
    transform:scale(1.02);
    box-shadow:0 12px 28px rgba(2,8,23,.10);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  @media (max-width:860px){
  .tier thead th:nth-child(3){
    font-size: .82rem;
    white-space: nowrap;
  }
}
}