@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

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

:root{
  --purple:#7c3aed;
  --purple-light:#a78bfa;
  --purple-bright:#8b5cf6;
  --purple-dark:#4c1d95;
  --purple-dim:rgba(124,58,237,.15);
  --purple-glow:rgba(124,58,237,.4);
  --surface:#0d0a14;
  --surface2:#120e1c;
  --surface3:#181228;
  --border:rgba(124,58,237,.14);
  --border-light:rgba(255,255,255,.06);
  --text:#f0ebff;
  --text2:#c4b5fd;
  --muted:#7c6fa0;
  --font:'Inter',sans-serif;
  --font-display:'Space Grotesk',sans-serif;
}

body{background:#06040d;color:var(--text);overflow-x:hidden;position:relative;font-family:var(--font);}

/* ── CANVAS PARTICLES ── */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* ── MOUSE GLOW (replaced by canvas trail) ── */
.mouse-glow{display:none;}

/* ── BG ANIMATION ── */
.bg-animation{
  position:fixed;width:100%;height:100%;z-index:0;
  background:
    radial-gradient(ellipse at 10% 20%,rgba(109,40,217,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 90% 80%,rgba(76,29,149,.05) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 110%,rgba(124,58,237,.04) 0%,transparent 40%);
  animation:bgmove 20s infinite alternate ease-in-out;
}
@keyframes bgmove{0%{transform:scale(1);}100%{transform:scale(1.08) translate(20px,-20px);}}

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

/* ── NAVBAR ── */
header{position:sticky;top:0;z-index:1000;padding:14px 20px;backdrop-filter:blur(24px);}
nav{
  width:92%;margin:auto;display:flex;justify-content:space-between;align-items:center;
  padding:12px 28px;
  background:rgba(9,6,18,.88);
  border:1px solid var(--border);border-radius:18px;
  transition:all .3s;
}
nav.scrolled{box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(124,58,237,.15);border-color:rgba(124,58,237,.2);}
.logo{font-size:21px;font-weight:800;letter-spacing:-0.5px;font-family:var(--font-display);}
.logo span{color:var(--purple-light);text-shadow:0 0 24px rgba(139,92,246,.5);}
ul{display:flex;gap:32px;list-style:none;}
ul a{text-decoration:none;color:var(--muted);transition:.25s;font-size:14px;font-weight:500;}
ul a:hover{color:var(--text);}
.nav-right{display:flex;gap:12px;align-items:center;}
.login{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:.25s;padding:8px 14px;border-radius:10px;}
.login:hover{color:var(--text);background:rgba(255,255,255,.04);}
.start-btn{
  background:linear-gradient(135deg,var(--purple),var(--purple-bright));
  padding:9px 20px;border-radius:11px;color:white;text-decoration:none;
  font-size:13px;font-weight:700;
  box-shadow:0 0 20px rgba(124,58,237,.3),inset 0 1px 0 rgba(255,255,255,.1);
  transition:.3s;
}
.start-btn:hover{transform:translateY(-1px);box-shadow:0 4px 30px rgba(124,58,237,.45);}
.nav-pseudo{color:var(--muted);font-size:13px;font-weight:600;}

/* ── SECTIONS ── */
section{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;padding:130px 30px;position:relative;z-index:2;
}
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:4px;
  color:var(--purple-light);margin-bottom:20px;
  padding:6px 14px;border-radius:999px;
  background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);
}

/* ── HERO ── */
.hero-eyebrow{font-size:11px;color:var(--muted);margin-bottom:14px;letter-spacing:4px;font-weight:600;text-transform:uppercase;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;border-radius:999px;
  background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);
  margin-bottom:32px;color:var(--text2);font-size:12px;font-weight:500;
  animation:fadeUp .8s ease both;
}
.badge .dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--purple-light);
  box-shadow:0 0 8px var(--purple-light);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(.85);}}

h1{
  font-size:100px;font-weight:900;letter-spacing:-5px;line-height:.95;
  animation:fadeUp .8s .1s ease both;font-family:var(--font-display);
}
h1 span{
  color:transparent;
  background:linear-gradient(135deg,var(--purple-light),var(--purple-bright),#c4b5fd);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 40px rgba(139,92,246,.4));
}
h2{
  font-size:48px;font-weight:800;
  color:transparent;
  background:linear-gradient(135deg,#e0d7ff,var(--purple-light));
  -webkit-background-clip:text;background-clip:text;
  letter-spacing:-1.5px;animation:fadeUp .8s .2s ease both;
  font-family:var(--font-display);
}
.hero-desc{
  color:var(--muted);margin:26px 0;font-size:17px;line-height:1.85;
  max-width:520px;animation:fadeUp .8s .3s ease both;font-weight:400;
}
.hero-actions{display:flex;gap:14px;align-items:center;animation:fadeUp .8s .4s ease both;}

.hero-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--purple),var(--purple-bright));
  padding:15px 32px;border-radius:14px;
  text-decoration:none;color:white;font-weight:700;font-size:15px;
  box-shadow:0 0 30px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.12);
  transition:.3s;border:none;cursor:pointer;font-family:var(--font);
}
.hero-btn:hover{transform:translateY(-3px);box-shadow:0 8px 50px rgba(124,58,237,.5);}

.hero-btn-ghost{
  color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;
  border:1px solid rgba(124,58,237,.2);padding:15px 26px;border-radius:14px;
  transition:.3s;background:rgba(124,58,237,.04);
}
.hero-btn-ghost:hover{color:var(--text);border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.08);}

.hero-stats{
  display:flex;align-items:center;gap:48px;margin-top:64px;
  animation:fadeUp .8s .5s ease both;
  padding:24px 40px;
  background:rgba(124,58,237,.04);
  border:1px solid var(--border);border-radius:20px;
}
.stat span{font-size:28px;font-weight:800;color:var(--text);font-family:var(--font-display);}
.stat p{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;}
.stat-sep{width:1px;height:38px;background:rgba(124,58,237,.15);}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* ── FEATURES ── */
#features h3{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin-bottom:14px;line-height:1.15;font-family:var(--font-display);}
#features h3 span{
  color:transparent;
  background:linear-gradient(135deg,var(--purple-light),#c4b5fd);
  -webkit-background-clip:text;background-clip:text;
}
.section-sub{color:var(--muted);font-size:15px;max-width:480px;margin-bottom:12px;line-height:1.7;font-weight:400;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px;max-width:980px;width:100%;}
.card{
  padding:32px;
  background:linear-gradient(145deg,var(--surface2),var(--surface));
  border:1px solid var(--border-light);border-radius:20px;
  text-align:left;transition:.35s;position:relative;overflow:hidden;
}
.card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% -20%,rgba(124,58,237,.08) 0%,transparent 60%);
  opacity:0;transition:.35s;
}
.card:hover::after{opacity:1;}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,58,237,.25);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(124,58,237,.12);
}
.card-icon{
  font-size:22px;margin-bottom:18px;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,.1);border-radius:12px;
  border:1px solid rgba(124,58,237,.18);
}
.card h4{font-size:16px;font-weight:700;margin-bottom:10px;color:var(--text);font-family:var(--font-display);}
.card p{color:var(--muted);font-size:13.5px;line-height:1.75;}

/* ── COMPARE ── */
#compare h3{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin-bottom:14px;font-family:var(--font-display);}
#compare h3 span{color:transparent;background:linear-gradient(135deg,var(--purple-light),#c4b5fd);-webkit-background-clip:text;background-clip:text;}
.compare-table{
  margin-top:50px;width:880px;max-width:95vw;
  border-radius:22px;overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface2);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.compare-header{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  padding:20px 32px;
  background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(76,29,149,.06));
  border-bottom:1px solid var(--border);
}
.compare-col{text-align:center;font-weight:700;font-size:14px;}
.compare-col-other{color:var(--muted);}
.compare-col-void{color:var(--purple-light);text-shadow:0 0 16px rgba(139,92,246,.4);}
.compare-row{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  padding:18px 32px;border-bottom:1px solid rgba(124,58,237,.06);
  align-items:center;transition:.2s;
}
.compare-row:hover{background:rgba(124,58,237,.03);}
.compare-row:last-child{border-bottom:none;}
.compare-feature{font-weight:600;font-size:14px;color:var(--text2);}
.icon-yes{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(124,58,237,.12);color:var(--purple-light);
  font-size:13px;font-weight:700;
  box-shadow:0 0 12px rgba(124,58,237,.15);
}
.icon-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.03);color:#3a3050;font-size:13px;
}
.compare-row-price{background:rgba(124,58,237,.04);}
.price-other{font-size:13px;color:#3a3050;}
.price-void{font-size:14px;font-weight:700;color:var(--purple-light);text-shadow:0 0 14px rgba(139,92,246,.4);}

/* ── PRICING ── */
#pricing h3{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin-bottom:14px;font-family:var(--font-display);}
#pricing h3 span{color:transparent;background:linear-gradient(135deg,var(--purple-light),#c4b5fd);-webkit-background-clip:text;background-clip:text;}
.pricing-wrapper{margin-top:50px;}
.two-plans{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;justify-content:center;}
.two-plans .price-card{width:350px;}

.price-card{
  padding:44px 38px;
  background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--border);border-radius:26px;text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:.35s;
}
.price-card:hover{transform:translateY(-5px);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(124,58,237,.2);}
.price-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.5),transparent);
}

.price-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:999px;
  background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(139,92,246,.15));
  border:1px solid rgba(124,58,237,.3);
  color:var(--purple-light);font-size:12px;font-weight:700;margin-bottom:20px;
}
.price-badge-outline{
  display:inline-block;padding:6px 16px;border-radius:999px;
  background:transparent;border:1px solid rgba(124,58,237,.15);
  color:var(--muted);font-size:12px;font-weight:600;margin-bottom:20px;
}
.price-card h4{font-size:20px;font-weight:800;margin-bottom:20px;font-family:var(--font-display);color:var(--text);}
.price-amount{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:14px;}
.price-currency{font-size:22px;font-weight:700;color:var(--muted);margin-top:8px;font-family:var(--font-display);}
.price{font-size:62px;font-weight:900;letter-spacing:-3px;line-height:1;font-family:var(--font-display);}
.price-period{font-size:15px;color:var(--muted);}
.price-desc{color:var(--muted);font-size:13.5px;margin-bottom:26px;line-height:1.7;}
.price-features{list-style:none;text-align:left;margin-bottom:28px;display:flex;flex-direction:column;gap:11px;}
.price-features li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--text2);}
.price-note{font-size:11px;color:#3a3050;margin-top:14px;}

.lifetime{
  border-color:rgba(139,92,246,.3)!important;
  background:linear-gradient(160deg,#120d20,#0d0a14)!important;
}
.lifetime::before{background:linear-gradient(90deg,transparent,rgba(167,139,250,.5),transparent)!important;}
.lifetime .price{
  color:transparent;
  background:linear-gradient(135deg,var(--purple-light),#c4b5fd);
  -webkit-background-clip:text;background-clip:text;
}

.hero-btn-ghost-full{
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(124,58,237,.2);color:var(--muted);
  padding:14px;border-radius:13px;text-decoration:none;
  font-size:14px;font-weight:600;transition:.3s;
  background:rgba(124,58,237,.04);
}
.hero-btn-ghost-full:hover{color:var(--text);border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.08);}

/* ── CTA ── */
#cta{min-height:55vh;position:relative;overflow:hidden;}
.cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.cta-glow{
  position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.1) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
#cta h3{font-size:52px;font-weight:900;letter-spacing:-2px;margin-bottom:16px;line-height:1.1;font-family:var(--font-display);}
#cta h3 span{color:transparent;background:linear-gradient(135deg,var(--purple-light),#c4b5fd);-webkit-background-clip:text;background-clip:text;}

/* ── FOOTER ── */
footer{padding:70px 30px;text-align:center;color:var(--muted);position:relative;z-index:2;border-top:1px solid rgba(124,58,237,.06);}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:12px;}
footer .logo{font-size:22px;font-weight:800;margin-bottom:4px;font-family:var(--font-display);}
footer p{font-size:14px;color:var(--muted);}
.footer-links{display:flex;gap:14px;align-items:center;font-size:13px;}
.footer-links a{color:#3a3050;text-decoration:none;transition:.2s;}
.footer-links a:hover{color:var(--muted);}
.footer-links span{color:#2a1f40;}
.footer-copy{font-size:12px;color:#2a1f40;margin-top:6px;}

/* ── AUTH MODAL ── */
.auth-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(3,1,10,.88);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.auth-modal.open{opacity:1;pointer-events:all;}
.auth-box{
  background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid rgba(124,58,237,.25);
  border-radius:24px;padding:42px 38px;width:420px;max-width:95vw;
  position:relative;box-shadow:0 0 100px rgba(124,58,237,.12),0 40px 80px rgba(0,0,0,.6);
  animation:modalIn .3s ease;
}
@keyframes modalIn{from{transform:translateY(18px) scale(.98);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.auth-close{
  position:absolute;top:16px;right:18px;
  background:rgba(255,255,255,.05);border:none;color:var(--muted);
  width:30px;height:30px;border-radius:8px;
  font-size:16px;cursor:pointer;transition:.2s;
  display:flex;align-items:center;justify-content:center;
}
.auth-close:hover{color:var(--text);background:rgba(255,255,255,.08);}
.auth-logo{font-size:22px;font-weight:800;text-align:center;margin-bottom:6px;font-family:var(--font-display);}
.auth-logo span{color:var(--purple-light);}
.auth-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:24px;}
.auth-tabs{display:flex;margin-bottom:26px;background:rgba(0,0,0,.3);border-radius:12px;padding:4px;border:1px solid var(--border);}
.auth-tab{
  flex:1;padding:9px;border:none;background:none;color:var(--muted);
  font-family:var(--font);font-size:13px;font-weight:600;
  border-radius:9px;cursor:pointer;transition:.2s;
}
.auth-tab.active{background:var(--surface3);color:var(--text);box-shadow:0 2px 12px rgba(0,0,0,.4);}
.auth-field{margin-bottom:14px;text-align:left;}
.auth-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.auth-field input{
  width:100%;padding:12px 15px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(124,58,237,.12);border-radius:11px;
  color:var(--text);font-size:14px;font-family:var(--font);
  transition:.2s;outline:none;
}
.auth-field input:focus{border-color:rgba(124,58,237,.4);box-shadow:0 0 0 3px rgba(124,58,237,.08);}
.auth-error{color:#f87171;font-size:12px;min-height:16px;margin:4px 0;}
.hidden{display:none!important;}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.cards .card:nth-child(2){transition-delay:.08s;}
.cards .card:nth-child(3){transition-delay:.16s;}
.cards .card:nth-child(4){transition-delay:.24s;}
.cards .card:nth-child(5){transition-delay:.32s;}
.cards .card:nth-child(6){transition-delay:.4s;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  h1{font-size:56px;letter-spacing:-3px;}
  h2{font-size:32px;}
  .cards{grid-template-columns:1fr;}
  .hero-stats{gap:22px;padding:18px 24px;flex-wrap:wrap;justify-content:center;}
  .hero-actions{flex-direction:column;width:100%;}
  .hero-btn,.hero-btn-ghost{width:100%;justify-content:center;}
  nav ul{display:none;}
  .two-plans{flex-direction:column;align-items:center;}
  .two-plans .price-card{width:min(350px,90vw);}
}