:root { --bg:#08090c; --surface:#14161c; --line:#262a33; --text:#f4f5f7; --muted:#a4a9b5; --red:#e8141c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.logo { font-weight:800; font-size:26px; color:var(--red); text-decoration:none; letter-spacing:-.5px; }
nav a { color:var(--muted); text-decoration:none; margin-left:22px; font-size:15px; }
nav a:hover { color:var(--text); }
.hero { padding:90px 0 80px; background:radial-gradient(60% 90% at 75% 20%,rgba(232,20,28,.26),transparent 70%); }
.hero h1 { font-size:clamp(38px,7vw,68px); line-height:1.05; margin:0 0 20px; letter-spacing:-1.5px; max-width:760px; }
.hero p { color:var(--muted); font-size:20px; max-width:600px; margin:0 0 32px; }
.btn { display:inline-block; background:var(--red); color:#fff; font-weight:700; padding:14px 26px; border-radius:999px; text-decoration:none; }
.btn:hover { background:#ff2730; }
.btn.ghost { background:none; border:1px solid var(--line); margin-left:10px; }
section { padding:60px 0; }
h2 { font-size:32px; letter-spacing:-.5px; margin:0 0 28px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; }
.card h3 { margin:0 0 8px; font-size:19px; }
.card p { margin:0; color:var(--muted); font-size:16px; }
.notice { border-left:3px solid var(--red); background:var(--surface); padding:20px 24px; border-radius:0 12px 12px 0; }
.notice p { margin:0; color:var(--muted); }
.notice strong { color:var(--text); }
.page { padding:40px 0 70px; max-width:760px; }
.page h1 { font-size:40px; letter-spacing:-1px; margin:10px 0 24px; }
.page h2 { font-size:22px; margin:32px 0 8px; }
.page p,.page li { color:var(--muted); }
ol.steps li { margin-bottom:10px; }
footer { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:14px; }
footer a { margin-right:18px; }
@media (max-width:520px) { nav a { margin-left:14px; font-size:14px; } .btn.ghost { margin:12px 0 0; } .hero { padding:60px 0; } }