:root { --ink:#0E1B25; --muted:#596A77; --canvas:#EEF2F5; --surface:#FFFFFF; --line:#D6DEE4; --accent:#3B44D1; --supply:#0B8FA7;
  --hero1:#3B44D1; --hero2:#161A5C; }
@media (prefers-color-scheme: dark) { :root { --ink:#E9EFF3; --muted:#8C9DAA; --canvas:#090E13; --surface:#121A21; --line:#24313C;
  --accent:#8F97FF; --supply:#40CBE0; } }
* { box-sizing: border-box; }
body { margin:0; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color:var(--ink); background:var(--canvas); }
a { color:var(--accent); }
.hero { background: linear-gradient(170deg, var(--hero1), var(--hero2)); color:#fff; padding:56px 20px 64px; }
.hero .wrap, main { max-width: 980px; margin: 0 auto; }
.brand { display:flex; align-items:center; gap:16px; }
.brand img { width:72px; height:72px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.brand b { font-size:30px; letter-spacing:-.01em; }
.hero h1 { font-size: clamp(32px, 6vw, 54px); line-height:1.08; margin:28px 0 12px; letter-spacing:-.02em; max-width: 760px; }
.hero p { font-size:19px; color:#C4E2F6; max-width:680px; margin:0; }
.shots { display:flex; gap:16px; margin-top:36px; overflow-x:auto; padding-bottom:8px; }
.shots img { width: 220px; border-radius: 18px; flex: 0 0 auto; box-shadow:0 10px 30px rgba(0,0,0,.35); }
main { padding: 40px 20px 60px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; }
.card h3 { margin:0 0 6px; font-size:18px; }
.card p, .card li { color:var(--muted); margin:0; font-size:15.5px; }
.card ul { padding-left:18px; margin:0; }
h2 { font-size:26px; margin:44px 0 14px; letter-spacing:-.01em; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:14px; padding:24px 20px 40px; text-align:center; }
.doc { max-width: 760px; }
.doc h1 { font-size:34px; margin: 8px 0 18px; }
.doc h2 { font-size:21px; margin:30px 0 8px; }
.top { padding:18px 20px; border-bottom:1px solid var(--line); background:var(--surface); }
.top a { text-decoration:none; color:var(--ink); font-weight:600; display:inline-flex; align-items:center; gap:10px; }
.top img { width:32px; height:32px; border-radius:8px; }