:root { --bg:#1a1b3a; --panel:#26284f; --grid:#3a3d6b; --text:#fff6e5; --muted:#a9accf; --sun:#ffd93d; --sky:#4d96ff; --coral:#ff6b6b; --mint:#6bcb77; --grape:#c77dff; --peach:#ffb26b; --ink:#1a1b3a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--sky); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
nav { display:flex; align-items:center; gap:22px; padding: 18px 0; flex-wrap:wrap; }
nav .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--text); text-decoration:none; margin-right:auto; }
nav a.link { color: var(--muted); text-decoration:none; font-size:15px; }
nav a.link:hover, nav a.link.on { color: var(--text); }
.mark { display:inline-grid; grid-template-columns: 1fr 1fr; gap:3px; width:28px; height:28px; }
.mark i { display:block; border-radius:4px; }
.mark i:nth-child(1){background:var(--coral)} .mark i:nth-child(2){background:var(--sun)} .mark i:nth-child(3){background:var(--sky)} .mark i:nth-child(4){background:var(--mint)}
.btn { display:inline-block; background: var(--sky); color:var(--ink); text-decoration:none; padding: 11px 18px; border-radius: 10px; font-weight: 700; font-size:15px; border:0; cursor:pointer; }
.btn.sun { background: var(--sun); } .btn.mint { background: var(--mint); } .btn.ghost { background: var(--grid); color: var(--text); }
.btn:disabled { opacity:.5; cursor:default; }
h1, h2, h3 { line-height:1.15; margin: 0 0 12px; }
h1 { font-size: clamp(34px, 6vw, 56px); }
h2 { font-size: 28px; }
p.lead { font-size: 19px; color: var(--muted); max-width: 640px; }
section { padding: 48px 0; }
.hero { padding: 56px 0 40px; display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px; }
.device { background: #0e0f22; border-radius: 22px; padding: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.screen { background: var(--bg); border-radius: 12px; aspect-ratio: 3/2; padding: 10px; display:grid; grid-template-rows: 30px 1fr 1fr 70px; gap: 6px; font-size: 11px; overflow:hidden; }
.screen .bar { display:flex; align-items:center; gap:8px; color: var(--muted); }
.screen .bar b { margin-left:auto; background: var(--grid); border-radius:6px; padding: 3px 8px; color: var(--text); }
.screen .row { display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
.card { background: var(--panel); border-radius: 10px; padding: 8px 10px; overflow:hidden; }
.card small { color: var(--muted); display:block; }
.card .big { font-size: 24px; font-weight: 700; letter-spacing: 1px; }
.card .up { color: var(--mint); } .card .dn { color: var(--coral); }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tile { background: var(--panel); border-radius: 14px; padding: 18px; border-top: 6px solid var(--sun); display:flex; flex-direction:column; gap:8px; }
.tile:nth-child(6n+2){border-top-color:var(--coral)} .tile:nth-child(6n+3){border-top-color:var(--mint)} .tile:nth-child(6n+4){border-top-color:var(--sky)} .tile:nth-child(6n+5){border-top-color:var(--grape)} .tile:nth-child(6n){border-top-color:var(--peach)}
.tile h3 { margin:0; font-size:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tile p { margin:0; color: var(--muted); flex:1; font-size: 15px; }
.badge { font-size: 12px; color: var(--ink); background: var(--sun); border-radius: 10px; padding: 2px 8px; font-weight:700; }
.badge.mint { background: var(--mint); } .badge.grid { background: var(--grid); color: var(--text); } .badge.coral { background: var(--coral); }
.meta { font-size: 12px; color: var(--muted); word-break: break-all; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; counter-reset: s; }
.step { background: var(--panel); border-radius: 14px; padding: 18px 18px 18px 60px; position:relative; color: var(--muted); }
.step::before { counter-increment: s; content: counter(s); position:absolute; left:18px; top:16px; width:30px; height:30px; border-radius:50%; background: var(--sun); color: var(--ink); font-weight:700; display:flex; align-items:center; justify-content:center; }
.step b { color: var(--text); display:block; margin-bottom:4px; }
.note { background: var(--panel); border-left: 6px solid var(--coral); padding: 12px 16px; border-radius: 8px; margin: 18px 0; color: var(--muted); }
.note b { color: var(--text); }
code { background: var(--grid); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.specs { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.spec { background: var(--panel); border-radius: 12px; padding: 14px; }
.spec small { color: var(--muted); display:block; font-size: 12px; }
.spec b { font-size: 17px; }
footer { color: var(--muted); font-size: 13px; text-align:center; padding: 30px 24px; border-top: 1px solid var(--grid); margin-top: 30px; }
footer a { color: var(--muted); }