:root { --ink:#172033; --muted:#68738a; --line:#e4e8f0; --paper:#f7f8fb; --white:#fff; --navy:#15203a; --violet:#5964e8; --lime:#b9ec81; --mint:#e7f7ed; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans SC","Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--violet); }
.topbar { border-bottom:1px solid var(--line); background:rgba(247,248,251,.92); backdrop-filter:blur(16px); }
.nav { max-width:1080px; height:72px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em; }
.mark { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--lime); color:var(--navy); font-weight:900; }
.nav-links { display:flex; gap:20px; color:var(--muted); font-size:13px; }
.btn { display:inline-block; padding:11px 15px; border-radius:10px; font-weight:750; font-size:13px; }
.btn-primary { background:var(--navy); color:#fff; }
.btn-soft { background:#fff; border:1px solid var(--line); }
.wrap { max-width:1080px; margin:auto; padding:0 24px; }
.hero { padding:84px 0 70px; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.eyebrow { color:var(--violet); font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:16px 0; max-width:700px; font-size:clamp(42px,6vw,72px); line-height:1.04; letter-spacing:-.075em; }
h2 { margin:0 0 14px; font-size:32px; letter-spacing:-.06em; }
h3 { margin:0 0 8px; font-size:19px; }
.lead { max-width:620px; color:var(--muted); font-size:18px; line-height:1.75; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.note { color:var(--muted); font-size:12px; line-height:1.7; }
.hero-card { padding:24px; background:var(--navy); color:#fff; border-radius:22px; box-shadow:0 24px 55px rgba(21,32,58,.18); }
.hero-card .kicker { color:var(--lime); font-size:11px; font-weight:800; letter-spacing:.12em; }
.hero-card .big { margin:26px 0 8px; color:var(--lime); font-size:42px; font-weight:850; letter-spacing:-.07em; }
.hero-card p { margin:0; color:#c9d1e4; line-height:1.7; font-size:13px; }
.section { padding:64px 0; border-top:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card { min-height:190px; padding:22px; background:var(--white); border:1px solid var(--line); border-radius:16px; }
.card:nth-child(2) { background:var(--mint); border-color:var(--mint); }
.card p, .faq p, li { color:var(--muted); line-height:1.75; font-size:14px; }
.faq { max-width:780px; }
details { padding:18px 0; border-top:1px solid var(--line); }
summary { cursor:pointer; font-weight:750; }
footer { padding:28px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:15px; flex-wrap:wrap; }
.article { max-width:820px; padding:68px 0 100px; }
.article h1 { font-size:48px; }
.article h2 { margin-top:42px; font-size:24px; }
.article p, .article li { color:var(--muted); line-height:1.85; }
.notice { margin:24px 0; padding:16px 18px; border-radius:12px; background:#eef2ff; color:#3f4bab; line-height:1.7; font-size:14px; }
code { padding:2px 5px; border-radius:5px; background:#edf0f6; }
@media (max-width:760px) { .nav-links { display:none; } .hero { grid-template-columns:1fr; padding-top:54px; } .grid { grid-template-columns:1fr; } h1 { font-size:48px; } }