
:root{
  --m-bg-deep:#0b1220; --m-text:#e8f6ff; --m-muted:#a8c1cc;
  --m-accent: rgba(0,224,255,.92); --m-accent-soft: rgba(0,224,255,.15);
  --m-border:#1A2533;
}
html,body{overflow-x:hidden;background-color:var(--m-bg-deep);color:var(--m-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}
.m-container{max-width:1100px;margin:0 auto;padding:24px}
.m-section{padding:28px 0}
.m-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}

.m-nav{position:sticky;top:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(7,12,22,.72);border-bottom:1px solid rgba(0,224,255,.14);z-index:1000}
.m-nav.is-stuck{box-shadow:0 14px 40px -28px rgba(0,0,0,.7),0 1px 0 rgba(0,224,255,.18) inset}
.m-nav-inner{display:flex;align-items:center;gap:18px;min-height:64px}
.m-nav a{color:#dff6ff;text-decoration:none}
.m-nav a:hover{color:#ffffff;text-decoration:underline}
.m-nav a.m-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px;color:#e8f6ff;text-decoration:none}
.m-logo-icon{width:28px;height:28px;display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 10px rgba(0,224,255,.25))}
.m-spacer{flex:1}
.m-btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--m-accent);background:var(--m-accent-soft);font-weight:700;color:var(--m-text);text-decoration:none;cursor:pointer}
.m-btn:hover{filter:brightness(1.05)}
.m-btn-ghost{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06)}
.m-small{font-size:13px;color:var(--m-muted)}

.m-hero{padding:64px 0}
.m-hero-grid{display:grid;grid-template-columns: 1.25fr 1fr;gap:18px;align-items:center}
.m-h1{font-size:44px;margin:0 0 12px;line-height:1.08;letter-spacing:.2px}
.m-subtitle{color:var(--m-muted);font-size:18px;margin-bottom:18px}
.m-k-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.m-k{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(10,16,28,.55)}
.m-k .m-kv{font-size:28px;font-weight:800}
.m-k .m-s{color:var(--m-muted);font-size:12px}

.m-hero-graphic{position:relative;height:320px;border-radius:18px;overflow:hidden;border:1px solid rgba(0,224,255,.14);background:linear-gradient(180deg, rgba(41,224,255,.06), rgba(41,224,255,.01));}
.m-hero-chart{position:absolute;inset:0}
.m-hero-floats{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;gap:8px;pointer-events:none}
.m-fchip{padding:8px 10px;border-radius:10px;border:1px solid rgba(41,224,255,.25);background:rgba(10,16,28,.55);font-weight:700;font-size:12px;box-shadow:0 10px 30px -12px rgba(41,224,255,.35)}

.m-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.m-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.m-card{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(10,16,28,.55)}
.m-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-compare-col{border:1px solid var(--m-border);border-radius:16px;padding:16px;background:rgba(10,16,28,.55)}
.m-compare-col.m-chosen{border-color: rgba(41,224,255,.28); box-shadow: 0 8px 26px -12px rgba(41,224,255,.35)}
.m-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid rgba(41,224,255,.18);background:linear-gradient(180deg, rgba(41,224,255,.06), rgba(41,224,255,.02));border-radius:16px;padding:16px}
.m-footer{color:var(--m-muted);padding:28px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:48px}

#galaxy-bg{position:fixed;inset:-15%;z-index:0;pointer-events:none;background:
radial-gradient(1200px 800px at 12% 8%, rgba(34,211,238,.12), transparent 60%),
radial-gradient(1000px 700px at 88% 18%, rgba(0,224,255,.12), transparent 60%),
radial-gradient(900px 650px at 50% 110%, rgba(34,211,238,.18), transparent 65%),
conic-gradient(from 210deg at 50% 50%, rgba(0,224,255,.04), rgba(34,211,238,.03), rgba(0,224,255,.04))}
#galaxy-bg::before{content:"";position:absolute;inset:-10%;background:
radial-gradient(60% 60% at 25% 20%, rgba(0,224,255,.08), transparent 55%),
radial-gradient(55% 55% at 75% 75%, rgba(0,224,255,.08), transparent 60%);
filter:blur(60px);opacity:.7;animation:m-galaxy-rot 80s linear infinite}
#galaxy-bg::after{content:"";position:absolute;inset:-10%;background-image:
radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.05), transparent 60%),
radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.04), transparent 60%),
radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.05), transparent 60%),
radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.04), transparent 60%);
background-repeat:repeat;background-size:300px 300px,260px 260px,340px 340px,280px 280px;mix-blend-mode:screen;opacity:.35}
@keyframes m-galaxy-rot{from{transform:rotate(0) scale(1.05)}to{transform:rotate(360deg) scale(1.05)}}
.m-page>*{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){ #galaxy-bg::before{ animation:none } }
@media (max-width: 960px){ .m-hero-grid{grid-template-columns:1fr} .m-k-cards{grid-template-columns:1fr 1fr} .m-compare{grid-template-columns:1fr} }
@media (max-width:640px){ .m-h1{font-size:34px} .m-k-cards{grid-template-columns:1fr} }
