html, body {
    width: 100%;
    max-width: 100%;
}

/* 防止动画或伪元素在视口外产生溢出 */
*, *::before, *::after {
    box-sizing: border-box;
    max-width: 100vw;
    overflow-wrap: break-word;
}

/* 特别处理 ticker 滚动动画防溢出 */
.ticker {
    overflow: hidden;
    position: relative;
}
.ticker-track {
    will-change: transform;
    display: inline-flex;
    animation: ticker 28s linear infinite;
    transform: translate3d(0, 0, 0);
}

/* 修正按钮闪光动画区域溢出问题 */
.cta {
    overflow: hidden;
    position: relative;
}
.cta::after {
    inset: -30% -60%; /* 缩小闪光范围，避免撑开布局 */
}

/* 容器安全限制 */
.wrap, .hero, .grid, .stats, .card {
    overflow-x: clip;
    position: relative;
}

.ticker { overflow:hidden; }
.ticker-track { display:inline-flex; will-change:transform; }

* { -webkit-tap-highlight-color: transparent; }
:root{
    --bg:#0b1020; --panel:#101737; --ink:#eef3ff; --muted:#9fb0cf;
    --brand1:#7fb0ff; --brand2:#3a7aff; --ok:#22c55e; --warn:#f59e0b;
    --card:#0f1734; --bd:rgba(255,255,255,.10); --glow:rgba(62,126,255,.35);
    --r:16px;
}
*{box-sizing:border-box} html,body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,#13214e 0%,transparent 60%), var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{max-width:980px;margin:0 auto;padding:18px 14px 64px}
h1,h2,h3{margin:0 0 8px}
h1{font-weight:900;letter-spacing:.2px;line-height:1.08;font-size:clamp(28px,6vw,48px)}
.sub{color:var(--muted);font-size:clamp(14px,3.2vw,18px)}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 28px 50px rgba(0,0,0,.35);padding:18px 16px}
.center{text-align:center}
.hero{display:grid;gap:12px;place-items:center;text-align:center;margin:8px 0 18px; position:relative}
.badge{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#cfe0ff 38%,#7fb0ff 60%,#3a7aff);box-shadow:0 10px 26px inset rgba(62,126,255,.35),0 6px 22px rgba(46,86,255,.25);filter:drop-shadow(0 4px 12px rgba(62,126,255,.35))}
.title-grad{background:linear-gradient(180deg,#ffffff 0%,#bcd3ff 60%,#7fb0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 22px rgba(0,0,0,.35)}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:14px;border:0;cursor:pointer;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--brand1),var(--brand2));box-shadow:0 14px 30px var(--glow);position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;inset:-40% -120% -40% -120%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%);mix-blend-mode:soft-light;animation:shine 2.8s ease-in-out infinite}
.cta:active{transform:translateY(1px)}
@keyframes shine{0%{transform:translateX(-50%) skewX(-18deg)}50%{transform:translateX(50%) skewX(-18deg)}100%{transform:translateX(150%) skewX(-18deg)}}

/* ticker */
.ticker{margin:14px 0; background:#0f1630;border:1px solid var(--bd);border-radius:999px;overflow:hidden}
.ticker-track{display:flex;gap:24px;white-space:nowrap;animation:ticker 28s linear infinite;padding:10px 18px}
.ti{display:flex;gap:10px;align-items:center;color:#cfe0ff}
.ti b{color:#fff}
.ti .up{color:#34d399} .ti .dn{color:#f87171}
@keyframes ticker{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;text-align:center}
.stat .num{font-size:clamp(18px,4.6vw,28px);font-weight:900}
.stat .cap{color:var(--muted);font-size:12px}

/* features */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.item{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px}
.item h3{font-size:18px}
.item p{color:var(--muted);margin:6px 0 0}

/* quiz */
.progress{height:12px;background:#0f1630;border-radius:999px;overflow:hidden}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand1),var(--brand2));transition:width .35s ease}
.tag{display:inline-block;background:#0f1630;border:1px solid var(--bd);padding:6px 10px;border-radius:999px;color:#cfe0ff;font-weight:800;font-size:12px;letter-spacing:.4px}
.qtitle{margin:12px 0 10px;font-size:clamp(20px,4.6vw,28px);font-weight:900}
.opts{display:grid;gap:12px;margin-top:10px}
.opt{display:flex;gap:12px;align-items:center;cursor:pointer;border:1px solid var(--bd);border-radius:14px;padding:14px 12px;transition:transform .12s ease,border-color .12s ease, box-shadow .12s ease;font-size:clamp(15px,3.6vw,18px)}
.opt:hover{transform:translateY(-1px);border-color:rgba(127,176,255,.65);box-shadow:0 8px 18px rgba(58,121,255,.25)}
.opt.active{border-color:#7fb0ff;background:#0e1d48; color:#fff;}
.dot{width:20px;height:20px;border-radius:50%;border:2px solid #7fb0ff;position:relative}
.opt.active .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#7fb0ff}
.nav{display:flex;gap:10px;margin-top:14px}
.btn{flex:1;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:14px;border-radius:12px;border:0;cursor:pointer;font-weight:900}
.btn.sec{background:#0f1630;border:1px solid var(--bd);color:#cfe0ff}
.btn.pri{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:white;box-shadow:0 14px 30px var(--glow)}
.hide{display:none}

/* result */
.result{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;background:#0f1630;border:1px solid var(--bd);color:#bdd2ff;padding:6px 10px;border-radius:999px;font-size:12px}
.rcta{display:grid;gap:10px;margin-top:10px}
.linklike{font-weight:900;text-decoration:none;color:white}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
.reveal.show{opacity:1;transform:none}

/* particles canvas covers hero only */
#px{position:absolute;inset:0;pointer-events:none;opacity:.6}
@media (max-width:820px){
    .grid{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}