:root{--bg:#0b0d10;--fg:#e6edf3;--muted:#94a3b8;--brand:#7dd3fc;--accent:#a78bfa;--card:#101419;--card2:#0e1217;--border:#1f2937}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans','Helvetica Neue',Arial}
a{color:var(--brand)}a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.button{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:#031420;border-radius:9999px;padding:.7rem 1.1rem;font-weight:700;border:0;cursor:pointer}
.button.ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:9999px;background:var(--card2);border:1px solid var(--border);font-size:12px;color:var(--muted)}
.caption{font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.header{position:sticky;top:0;z-index:40;background:rgba(11,13,16,.8);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.header .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav{display:flex;gap:.6rem;align-items:center}
.nav a{color:var(--fg);padding:.4rem .6rem;border-radius:10px}
.nav a:hover{background:var(--card2)}
.ann{display:flex;align-items:center;justify-content:center;background:#091016;border-bottom:1px solid var(--border);padding:8px;color:var(--muted)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:980px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}
.hero{position:relative;padding:64px 0;background:linear-gradient(180deg,rgba(125,211,252,.08),transparent)}
.hero h1{margin:0 0 10px}
.product-card{display:flex;flex-direction:column;gap:.6rem}
.product-card .img{background:var(--card2);border:1px solid var(--border);border-radius:12px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table td,.table th{padding:10px 12px;text-align:left}
.notice{padding:12px;border:1px dashed var(--border);border-radius:12px;background:rgba(125,211,252,.06)}
.footer{margin-top:48px;padding:30px 0;border-top:1px solid var(--border);background:rgba(15,19,23,.6)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
@media (max-width:980px){.footer .cols{grid-template-columns:1fr}}
.select{background:var(--card2);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem}