:root{
  --bg:#0f172a; --panel:#0b1224; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#22d3ee; --accent2:#2dd4bf; --cta:#f59e0b; --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5}
a{color:var(--accent)} .container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(6px);background:rgba(15,23,42,.7);
border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{height:32px;width:auto} .nav{display:none;gap:18px}
.nav a{color:#cbd5e1;text-decoration:none;font-size:14px}.nav a:hover{color:#fff}
@media(min-width:880px){ .nav{display:flex}}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:14px;padding:12px 18px;text-decoration:none;font-weight:600}
.btn-cta{background:var(--cta);color:#111}.btn-ghost{border:1px solid var(--border);color:var(--text)}
section{padding:56px 0;border-top:1px solid var(--border)} .hero{padding:72px 0 56px;border:0}
.grid{display:grid;gap:18px} @media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}}
.card{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:18px;padding:18px}
.h1{font-size:40px;font-weight:800;margin:8px 0 10px} .h2{font-size:28px;font-weight:800;margin:0 0 8px}
.h3{font-size:18px;font-weight:700;margin:0 0 6px} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--muted)}
.list{margin:8px 0 0 0;padding:0 0 0 14px} .kicker{letter-spacing:.22em;text-transform:uppercase;color:#67e8f9;font-size:12px}
.muted{color:var(--muted)} .footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);font-size:14px}
.badge{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:#a5b4fc}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap} .teasers{display:grid;gap:14px}
@media(min-width:900px){.teasers{grid-template-columns:repeat(3,1fr)}} ul.clean{list-style:none;margin:0;padding:0;display:grid;gap:8px}