:root{
  --bg:#0b0c10; --fg:#eaf2ff; --muted:#a9b3c7; --card:#11141a;
  --accent:#27d3b5; --accent-2:#7b61ff; --ring:rgba(39,211,181,.35);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --max:1100px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9fd; --fg:#0b1020; --muted:#4c556a; --card:#fff; --shadow:0 10px 30px rgba(17,24,39,.08); }
}
*{box-sizing:border-box}
/* Base background stays solid; blobs are a fixed overlay */
html, body { min-height: 100%; }

/* Decorative gradient layer, fixed to the viewport */
.bg-blobs{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--accent-2) 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, var(--accent) 0%, transparent 55%);
  background-repeat: no-repeat;
}

/* Tweak sizes/positions on small screens so blobs don’t crowd content */
@media (max-width: 900px){
  .bg-blobs{
    background:
      radial-gradient(900px 520px at 80% -15%, var(--accent-2) 0%, transparent 60%),
      radial-gradient(700px 480px at -15% 115%, var(--accent) 0%, transparent 55%);
  }
}
body{
  margin:0;
  background: var(--bg);
  color:var(--fg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Layout primitives */
.container{width:min(var(--max), 92vw); margin-inline:auto; padding-inline:16px}
.section{padding-block: clamp(24px, 5vw, 48px)}
/* Full-bleed utility: make a section edge-to-edge while content inside can still use .container */
.full-bleed{margin-inline: calc(50% - 50vw); width:100vw}

/* Nav + brand */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#26c6da,#5e35b1); box-shadow:var(--shadow)}
.logo svg{width:24px; height:24px}
.brand-name{font-weight:700; letter-spacing:.2px}
.pill{padding:8px 14px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:var(--muted); text-decoration:none}
.pill:hover{border-color:rgba(255,255,255,.25)}

/* Cards + hero */
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; color:var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow:auto}
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:42px; align-items:center;
  background: color-mix(in oklab, var(--card), transparent 20%);
  border: 1px solid rgba(255,255,255,.08); border-radius:22px;
  padding: clamp(28px, 5vw, 48px); box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
@media (max-width: 900px){ .hero{grid-template-columns:1fr; padding:28px} }

/* Type + buttons */
h1{font-size: clamp(36px, 5.2vw, 56px); line-height:1.1; margin:0 0 10px}
.lead{font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); margin:0 0 24px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin: 28px 0}
.btn{appearance:none; border:0; cursor:pointer; text-decoration:none; font-weight:650;
  padding:12px 18px; border-radius:12px; color:#0b0f14; background:linear-gradient(135deg,var(--accent),#58e1ff);
  box-shadow: 0 10px 20px var(--ring)}
.btn:hover{transform: translateY(-1px)}
.btn.secondary{background: transparent; color:var(--fg); border:1px solid rgba(255,255,255,.16)}

/* Footer */
.foot{margin-top:28px; display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:13px}
.foot a{color:inherit}