:root{--bg:#09060f;--card:#130d1f;--ink:#f5f2fb;--mute:#a49cb6;--p:#8930fd;--line:rgba(137,48,253,.22);--sans:'Inter Tight',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);background-image:radial-gradient(50% 35% at 50% 0%,rgba(137,48,253,.28),transparent 70%),radial-gradient(30% 30% at 0% 60%,rgba(137,48,253,.12),transparent)}
a{color:inherit}
em{font-family:var(--serif);font-style:italic;font-weight:400;color:#b48cff}
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;padding:14px 32px;background:rgba(9,6,15,.8);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:700}
.nav nav{margin-left:auto;display:flex;gap:26px;font-size:14px}
.nav nav a{text-decoration:none;color:var(--mute)}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:12px;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{padding:9px 16px;font-size:14px;border:1px solid rgba(255,255,255,.15)}
.btn-main{padding:16px 34px;background:linear-gradient(90deg,#7a1ff0,#a855f7);color:#fff;box-shadow:0 12px 40px rgba(137,48,253,.5)}
.hero{max-width:980px;margin:0 auto;padding:80px 20px 30px;text-align:center}
.badge{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;color:var(--mute);margin-bottom:24px}
h1{font-size:clamp(40px,6.6vw,74px);line-height:1.04;letter-spacing:-.035em;font-weight:900;margin-bottom:22px}
.under{background:linear-gradient(transparent 82%,var(--p) 82%)}
h2{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin-bottom:14px}
h3{font-size:21px;margin:10px 0 6px}
h4{font-size:15px;text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-bottom:14px}
.lead{max-width:660px;margin:0 auto 34px;color:var(--mute);font-size:19px}
.chips{position:relative;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.chip{min-width:170px;padding:16px 20px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:var(--card)}
.chip b{display:block;font-size:24px;font-weight:800}
.chip span{font-size:12px;color:var(--mute)}
.note{position:absolute;right:-10px;top:-34px;font:600 22px 'Caveat',cursive;color:var(--mute);transform:rotate(-6deg)}
.sec{max-width:1100px;margin:0 auto;padding:120px 20px 0;text-align:center}
.tag{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#c9a8ff;margin-bottom:14px}
.sub{max-width:660px;margin:0 auto;color:var(--mute)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;text-align:left}
.steps article{position:relative;overflow:hidden;padding:30px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1030,var(--card))}
.big{position:absolute;right:16px;top:-6px;font-size:96px;font-weight:900;color:rgba(255,255,255,.05);line-height:1}
.ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--p);color:#fff}
.steps p{color:var(--mute)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;text-align:left}
.compare>div{padding:28px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:var(--card)}
ul{list-style:none;padding:0;display:grid;gap:10px}
.yes li::before{content:"✓";color:#22c55e;margin-right:10px;font-weight:800}
.no li::before{content:"✕";color:#ef4444;margin-right:10px;font-weight:800}
.case{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-top:44px;text-align:left;padding:24px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
.case-shot{aspect-ratio:16/10;border-radius:14px;background:linear-gradient(135deg,#2a1650,#0c0816);display:grid;place-items:center;color:var(--mute);font-size:14px;text-align:center;padding:16px}
.case-copy p{color:var(--mute);margin-top:10px}
.case-copy .quote{color:var(--ink);font-style:italic}
.cta{padding:80px 28px;border-radius:26px;border:1px solid var(--line);background:radial-gradient(60% 100% at 50% 100%,rgba(137,48,253,.45),#120a20)}
.cta .sub{margin-bottom:30px}
.foot{max-width:1100px;margin:0 auto;padding:60px 20px 40px;display:flex;justify-content:space-between;gap:12px;color:var(--mute);font-size:14px}
@media (max-width:820px){
 .nav{padding:12px 16px}.nav nav{display:none}.nav .btn{margin-left:auto}
 .hero{padding-top:50px}.note{display:none}
 .steps,.compare,.case{grid-template-columns:1fr}
 .chip{min-width:0;flex:1 1 140px}
 .cta{padding:56px 20px}
 .foot{flex-direction:column;align-items:center}
}