:root{
  --indigo:#4F46E5; --indigo-d:#3f37c9; --teal:#14B8A6;
  --ink:#0f172a; --body:#334155; --muted:#64748b;
  --line:#e2e8f0; --bg:#ffffff; --bg2:#f8fafc; --bg3:#f1f5f9;
  --warn:#b45309; --bad:#b91c1c; --radius:10px;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--body);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
h1,h2,h3{color:var(--ink);line-height:1.2;margin:0}
h1{font-size:44px;font-weight:700;letter-spacing:-0.02em}
h2{font-size:30px;font-weight:700;letter-spacing:-0.01em;margin-bottom:28px}
h3{font-size:18px;font-weight:600}
p{margin:12px 0}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.btn{display:inline-block;border:none;border-radius:var(--radius);font:inherit;font-weight:600;cursor:pointer;padding:12px 20px;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-d);text-decoration:none}
.btn-ghost{background:transparent;color:var(--indigo);border:1px solid var(--line);padding:9px 16px}
.btn-ghost:hover{border-color:var(--indigo);text-decoration:none}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--body);font-weight:500;font-size:15px}
.nav-links a.btn-ghost{color:var(--indigo)}

.hero{background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:72px 24px}
.eyebrow{color:var(--teal);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.lede{font-size:18px;max-width:560px;margin:18px 0 26px}
.scan{display:flex;gap:10px;max-width:520px}
.scan input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:16px;color:var(--ink);background:#fff}
.scan input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.hint{font-size:14px;color:var(--muted);margin-top:16px}
.scanstate{margin-top:16px;font-size:14px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg3);color:var(--body)}
.scanstate.err{border-color:#fecaca;background:#fef2f2;color:var(--bad)}
.scanstate.run{border-color:#c7d2fe;background:#eef2ff;color:var(--indigo-d)}
.scanstate.done{border-color:#99f6e4;background:#f0fdfa;color:#0f766e}

.hero-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(15,23,42,.06);padding:20px}
.hc-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hc-head .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(20,184,166,.2)}
.hc-rows{list-style:none;margin:0;padding:8px 0 0}
.hc-rows li{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--bg3);font-size:14px}
.hc-rows li:last-child{border-bottom:none}
.hc-rows b{color:var(--ink);font-weight:600}
.hc-rows b.warn{color:var(--warn)} .hc-rows b.bad{color:var(--bad)}
.hc-foot{margin-top:10px;font-size:12px;color:var(--muted)}

.band{padding:72px 0}
.band.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card .ci{font-size:22px;color:var(--indigo);line-height:1;margin-bottom:12px}
.card p{font-size:14.5px;margin:8px 0 0;color:var(--body)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.steps li{display:flex;gap:16px}
.sn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center}
.steps p{font-size:14.5px;margin-top:6px}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.trust p{font-size:14.5px;margin-top:6px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;position:relative}
.plan.featured{border-color:var(--indigo);box-shadow:0 10px 30px rgba(79,70,229,.12)}
.plan .tag{position:absolute;top:-11px;left:26px;background:var(--indigo);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px}
.pname{font-weight:600;color:var(--ink);font-size:16px}
.price{font-size:36px;font-weight:700;color:var(--ink);margin-top:10px;line-height:1}
.per{color:var(--muted);font-size:13px;margin-bottom:16px}
.plan ul{list-style:none;margin:0 0 20px;padding:0}
.plan ul li{padding:8px 0;font-size:14.5px;border-bottom:1px solid var(--bg3)}
.plan ul li:last-child{border-bottom:none}
.plan .btn{width:100%;text-align:center}

.code{display:flex;gap:10px;max-width:520px;margin-top:18px}
.code input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:16px;letter-spacing:.04em;color:var(--ink)}
.code input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.muted{color:var(--muted)}

.foot{background:var(--ink);color:#cbd5e1;padding:36px 0}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot img{filter:brightness(0) invert(1);opacity:.92}
.foot-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:#94a3b8}
.foot-meta a{color:#cbd5e1}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:48px 24px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps,.trust{grid-template-columns:1fr}
  h1{font-size:34px}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .scan,.code{flex-direction:column}
}