:root{--p:#6755d9;--ink:#182230;--muted:#667085;--line:#e7eaf0;--bg:#f5f7fb}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);
  font:15px Inter,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:#ffffffee;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav-inner{max-width:1220px;margin:auto;display:flex;align-items:center;
  justify-content:space-between;padding:16px 24px;gap:20px}
.brand{display:flex;align-items:center;gap:11px}
.mark{width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,#7767ef,#a057d6);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:15px}
.brand b{display:block;font-size:15px}.brand small{font-size:10px;color:var(--muted)}
.nav-links{display:flex;gap:26px;font-size:13px;color:#475467;font-weight:600}
.nav-cta{display:flex;gap:9px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:9px;padding:10px 15px;font-weight:800;
  font-size:12px;cursor:pointer;transition:.15s}
.btn.primary{background:var(--p);color:#fff}
.btn.primary:hover{background:#5847c5;transform:translateY(-1px)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--p);color:var(--p)}
.btn.lg{padding:14px 20px;font-size:13px}

/* Hero */
.hero{padding:80px 24px 60px;background:
  radial-gradient(circle at 85% 10%,#efebff 0,transparent 45%),
  radial-gradient(circle at 10% 90%,#f0f7ff 0,transparent 40%)}
.hero-inner{max-width:1220px;margin:auto;display:grid;
  grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero .eyebrow{font-size:10px;letter-spacing:1.4px;color:var(--p);font-weight:800;margin:0 0 14px}
.hero h1{font-size:52px;line-height:1.06;margin:0 0 20px;letter-spacing:-1.4px}
.hero .lede{font-size:16px;line-height:1.65;color:#475467;margin:0 0 26px;max-width:560px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.hero-badges{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;
  color:var(--muted);font-weight:600}

.hero-art{position:relative}
.art-card{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px;box-shadow:0 30px 80px rgba(60,40,140,.14);z-index:2}
.art-row{display:flex;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:12px}
.art-row:last-child{border:0}
.art-row b{color:#475467;font-weight:600}
.art-row span{font-weight:800}
.up{color:#138a63!important}
.art-glow{position:absolute;inset:auto -40px -40px auto;width:220px;height:220px;
  background:radial-gradient(circle,#6755d94d 0,transparent 70%);border-radius:50%;z-index:1}

/* Features */
.features{max-width:1220px;margin:auto;padding:80px 24px}
.features h2{font-size:34px;margin:0 0 8px;letter-spacing:-1px;text-align:center}
.features .sub{text-align:center;color:var(--muted);margin:0 0 44px;font-size:15px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;
  transition:.2s}
.feature:hover{border-color:#d6cfff;box-shadow:0 12px 30px rgba(90,70,200,.08);
  transform:translateY(-2px)}
.f-icon{width:38px;height:38px;border-radius:10px;background:#f0edff;color:var(--p);
  display:grid;place-items:center;font-size:17px;margin-bottom:12px}
.feature h3{font-size:14px;margin:0 0 6px}
.feature p{font-size:12px;color:var(--muted);line-height:1.6;margin:0}

/* Why */
.why{padding:80px 24px;background:#fafbff;border-block:1px solid var(--line)}
.why-inner{max-width:1220px;margin:auto;display:grid;
  grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.why h2{font-size:32px;margin:0 0 24px;letter-spacing:-.8px}
.why-list{list-style:none;padding:0;margin:0}
.why-list li{position:relative;padding:0 0 18px 26px;font-size:13px;
  color:#475467;line-height:1.65}
.why-list li:before{content:'✓';position:absolute;left:0;top:0;
  color:var(--p);font-weight:800}
.why-list b{color:var(--ink)}
.why-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:0 20px 50px rgba(60,40,140,.08)}
.mini-row{display:flex;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:12px}
.mini-row:last-child{border:0}
.mini-row span{color:var(--muted)}
.mini-row b{font-weight:800}

/* Pricing */
.pricing{max-width:1220px;margin:auto;padding:80px 24px}
.pricing h2{font-size:34px;margin:0 0 8px;letter-spacing:-1px;text-align:center}
.pricing .sub{text-align:center;color:var(--muted);margin:0 0 44px;font-size:15px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:28px 24px}
.price.popular{border-color:var(--p);box-shadow:0 24px 60px rgba(103,85,217,.18);
  transform:translateY(-8px)}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--p);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.6px;padding:5px 11px;border-radius:20px}
.price h3{font-size:15px;margin:0 0 12px}
.price .amount{font-size:28px;font-weight:800;margin:0 0 20px;letter-spacing:-.8px}
.price .amount small{font-size:12px;color:var(--muted);font-weight:500;margin-left:4px}
.price ul{list-style:none;padding:0;margin:0 0 22px}
.price ul li{font-size:12px;color:#475467;padding:6px 0 6px 22px;position:relative}
.price ul li:before{content:'✓';position:absolute;left:0;color:var(--p);font-weight:800}
.price .btn{width:100%}

/* CTA */
.cta{padding:60px 24px;background:linear-gradient(135deg,#241c55,#6755d9)}
.cta-inner{max-width:760px;margin:auto;text-align:center;color:#fff}
.cta h2{font-size:32px;margin:0 0 12px;letter-spacing:-1px}
.cta p{color:#e6e2ff;margin:0 0 24px;font-size:15px}
.cta .btn{background:#fff;color:var(--p)}
.cta .btn:hover{background:#f0edff}

/* Footer */
.foot{background:#0f1421;color:#94a0b5;padding:50px 24px 24px;font-size:12px}
.foot-inner{max-width:1220px;margin:auto;display:grid;
  grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot b{display:block;color:#fff;margin-bottom:10px;font-size:12px}
.foot p{margin:5px 0;line-height:1.6}
.foot a{color:#c8cce4}
.foot a:hover{color:#fff}
.foot .copy{grid-column:1/-1;border-top:1px solid #ffffff14;
  padding-top:20px;margin-top:20px;font-size:10px;text-align:center;color:#5a6478}

/* Responsive */
@media(max-width:960px){
  .hero-inner,.why-inner{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:38px}
  .feature-grid,.price-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .price.popular{transform:none}
}
@media(max-width:640px){
  .feature-grid,.price-grid{grid-template-columns:1fr}
  .nav-cta .btn.ghost{display:none}
  .hero h1{font-size:30px}
  .hero{padding:50px 18px 40px}
  .hero-badges{gap:10px}
  .features,.pricing,.why{padding:55px 18px}
  .features h2,.pricing h2,.why h2{font-size:26px}
  .foot-inner{grid-template-columns:1fr}
}