:root{
  --royal:#175EEC; --navy:#0A1B40; --ink:#0B0C0D; --paper:#FAF9F8;
  --line:#e5e7ee; --muted:#5f6880; --card:#ffffff;
  --maxw:1080px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--navy); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--royal); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.nav img{height:30px}
.nav-links a{margin-left:22px; color:var(--navy); font-weight:500; font-size:.95rem}
.btn{display:inline-block; padding:.72rem 1.25rem; border-radius:10px; font-weight:600; font-size:.96rem; border:1px solid transparent; cursor:pointer}
.btn--primary{background:var(--royal); color:#fff}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn--dark{background:var(--navy); color:#fff}
.btn--lg{padding:.9rem 1.6rem; font-size:1.02rem}

.hero{padding:64px 0 34px; text-align:center}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.08; letter-spacing:-.02em; margin:.2em 0 .35em}
.hero p.sub{font-size:1.16rem; color:var(--muted); max-width:640px; margin:0 auto 1.6em}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.kicker{display:inline-block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--royal); font-weight:700}

.shot{max-width:940px; margin:36px auto 0; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 26px 60px -30px rgba(10,27,64,.4); overflow:hidden}
.shot .bar{height:34px; background:#f2f3f8; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 12px; gap:6px}
.shot .bar i{width:10px; height:10px; border-radius:50%; background:#cfd4e2; display:block}

section{padding:52px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 34px}
.section-head h2{font-size:1.9rem; letter-spacing:-.01em; margin:.2em 0}
.section-head p{color:var(--muted)}
.grid{display:grid; gap:20px; grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.feat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px}
.feat h3{margin:.1em 0 .35em; font-size:1.08rem}
.feat p{margin:0; color:var(--muted); font-size:.95rem}
.feat .ic{width:38px; height:38px; border-radius:9px; background:#eaf0fe; color:var(--royal); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:12px}

.split{background:var(--navy); color:#fff}
.split .wrap{display:flex; gap:40px; align-items:center; flex-wrap:wrap}
.split .col{flex:1 1 320px}
.split h2{color:#fff; font-size:1.8rem}
.split p{color:#c4cbdd}
.steps li{margin:.5em 0; color:#dfe4f0}

.price-grid{display:grid; gap:22px; grid-template-columns:repeat(3,1fr); align-items:stretch}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.plan{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; flex-direction:column}
.plan.pop{border:2px solid var(--royal); box-shadow:0 20px 44px -26px rgba(23,94,236,.6); position:relative}
.plan .tag{position:absolute; top:-12px; left:26px; background:var(--royal); color:#fff; font-size:.72rem; font-weight:700; padding:.25em .7em; border-radius:20px; letter-spacing:.05em}
.plan h3{margin:.1em 0; font-size:1.15rem}
.plan .amt{font-size:2.2rem; font-weight:700; letter-spacing:-.02em; margin:.2em 0}
.plan .amt small{font-size:.9rem; font-weight:500; color:var(--muted)}
.plan ul{list-style:none; padding:0; margin:14px 0 20px; flex:1}
.plan li{padding:.34em 0; color:#2c3550; font-size:.94rem; border-bottom:1px dashed #eef0f6}
.plan li::before{content:"✓"; color:var(--royal); font-weight:700; margin-right:.5em}
.ltd{background:linear-gradient(180deg,#fff, #f4f8ff); border:2px solid var(--royal)}
.badge-as{display:inline-block; background:#111; color:#fff; font-weight:700; font-size:.72rem; padding:.3em .7em; border-radius:6px; letter-spacing:.04em}

.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid var(--line); padding:14px 0}
.faq summary{font-weight:600; cursor:pointer}
.faq p{color:var(--muted)}

footer{padding:40px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.center{text-align:center}
.mt{margin-top:22px}
.dl{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.dl .btn small{display:block; font-weight:400; font-size:.76rem; opacity:.8}
.note{font-size:.82rem; color:var(--muted); margin-top:10px}
input.code{padding:.7rem .8rem; border:1px solid var(--line); border-radius:10px; font-size:1rem; width:260px; max-width:100%}