:root { --bg:#050b16; --card:#0c1626; --line:#1e3554; --fg:#f4f8ff; --muted:#9aabc2; --red:#e0162b; --red2:#ff4d5e; --blue:#087eff; --blue2:#35b9ff; --ok:#2e9e5b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--red2); }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }
nav.top { position:sticky; top:0; background:rgba(11,11,13,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:5; }
nav.top .wrap { display:flex; align-items:center; justify-content:space-between; height:56px; gap:12px; }
nav.top .brand { font-weight:800; display:flex; gap:8px; align-items:center; color:var(--fg); text-decoration:none; }
nav.top .links { display:flex; gap:16px; font-size:14px; overflow-x:auto; }
nav.top .links a { color:var(--muted); text-decoration:none; white-space:nowrap; }
.brand-logo { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(8,126,255,.45)); }
header.hero { padding:72px 0 48px; }
.hero .wrap { position:relative; }
.hero-logo { width:min(240px,42vw); aspect-ratio:1; object-fit:contain; float:right; margin:-32px 0 20px 42px; filter:drop-shadow(0 22px 50px rgba(8,126,255,.36)); animation:hero-in .9s cubic-bezier(.2,.9,.2,1) both; }
.hero h1 { font-size:clamp(34px,6vw,58px); line-height:1.05; margin:0 0 16px; letter-spacing:-.02em; }
.hero h1 em { color:var(--blue2); font-style:normal; }
.hero p.lead { font-size:clamp(17px,2.2vw,21px); color:var(--muted); max-width:720px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none; border:1px solid var(--line); color:var(--fg); }
.btn.primary { background:linear-gradient(135deg,var(--blue),#0052cc); border-color:var(--blue); color:#fff; box-shadow:0 8px 24px rgba(8,126,255,.25); }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.tag { font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
section { padding:48px 0; border-top:1px solid var(--line); }
section h2 { font-size:clamp(26px,4vw,36px); margin:0 0 8px; }
section p.sub { color:var(--muted); margin:0 0 28px; max-width:760px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
.card h3 { margin:0 0 8px; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
.num { width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800; margin-bottom:10px; }
.flow { display:grid; gap:12px; }
.flow .step { display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.flow .step b { display:block; margin-bottom:4px; }
.flow .step span { color:var(--muted); font-size:15px; }
.diagram { width:100%; height:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.tablewrap { overflow-x:auto; }
details { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
details summary { cursor:pointer; font-weight:700; }
details p { color:var(--muted); margin:10px 0 0; }
form.unlist { display:grid; gap:12px; max-width:440px; }
input { padding:12px; border-radius:10px; border:1px solid var(--line); background:#0f0f13; color:var(--fg); font-size:16px; width:100%; }
button { padding:12px 18px; border-radius:10px; border:0; background:var(--red); color:#fff; font-weight:700; font-size:16px; cursor:pointer; }
.msg { min-height:1.5em; } .msg.ok { color:#6fdc9b; } .msg.err { color:var(--red2); }
.note { background:#1b1410; border:1px solid #4a3418; color:#f5d7a8; border-radius:10px; padding:10px 14px; font-size:14px; }
footer { padding:32px 0 48px; color:var(--muted); font-size:14px; border-top:1px solid var(--line); }
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand img { width:52px; height:52px; object-fit:contain; }
@keyframes hero-in { from { opacity:0; transform:scale(.72) rotate(-5deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@media (prefers-reduced-motion:reduce) { .hero-logo { animation:none; } }
@media (max-width:600px) { nav.top .links a.hide-sm { display:none; } header.hero { padding:48px 0 32px; } .hero-logo { float:none; display:block; width:150px; margin:-16px auto 20px; } .footer-brand { align-items:flex-start; } }