:root{
      --bg: #0b1220;
      --bg-soft:#0f172a;
      --text:#e5f2ff;
      --muted:#a9c1d9;
      --brand:#0ea5e9; /* sky-500 */
      --brand-600:#0284c7;
      --accent:#22d3ee; /* cyan-400 */
      --ok:#10b981; /* emerald */
      --warn:#f59e0b; /* amber */
      --danger:#ef4444; /* red */
      --card: rgba(15, 23, 42, 0.72);
      --card-border: rgba(148, 163, 184, 0.18);
      --shadow: 0 10px 30px rgba(2, 132, 199, 0.15);
      --radius-xl: 1.25rem;
      --radius-2xl: 1.5rem;
      --maxw: 1200px;
      --grid-gap: clamp(14px, 2vw, 22px);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg:#f8fafc;
        --bg-soft:#ffffff;
        --text:#0b1220;
        --muted:#4b5563;
        --card: #ffffffcc;
        --card-border: rgba(2, 132, 199, 0.15);
        --shadow: 0 8px 24px rgba(2, 132, 199, 0.10);
      }
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text); background: radial-gradient(1200px 800px at 80% -10%, rgba(34,211,238,0.15), transparent 40%), radial-gradient(1000px 600px at -10% 10%, rgba(14,165,233,0.18), transparent 40%), var(--bg);
      overflow-x:hidden;
    }
    a{color:inherit; text-decoration:none}
    .container{max-width: var(--maxw); margin:0 auto; padding: clamp(16px, 3vw, 32px)}
    .btn{display:inline-flex; gap:.6rem; align-items:center; padding:.8rem 1.1rem; border-radius:999px; background:linear-gradient(180deg, var(--brand), var(--brand-600)); color:white; border:1px solid rgba(255,255,255,.15); box-shadow: var(--shadow); font-weight:600; letter-spacing:.2px}
    .btn.secondary{background:transparent; color:var(--text); border:1px solid var(--card-border)}
    .btn:focus-visible{outline: 3px solid color-mix(in oklab, var(--accent) 40%, transparent)}
    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); background: color-mix(in oklab, var(--bg-soft) 88%, transparent); border-bottom:1px solid var(--card-border)}
    nav{display:flex; align-items:center; justify-content:space-between}
    .brand{display:flex; align-items:center; gap:.75rem; font-weight:800}
    .brand-logo{width:36px; height:36px; border-radius:10px; background:radial-gradient(120% 120% at 30% 20%, var(--accent), var(--brand-600)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2)}
    .nav-links{display:flex; gap:1rem}
    .nav-links a{padding:.6rem .9rem; border-radius:999px}
    .nav-links a:hover{background: color-mix(in oklab, var(--brand) 12%, transparent)}
    .menu-btn{display:none}
    @media (max-width: 860px){
      .menu-btn{display:inline-flex;}
      .nav-links{position:fixed; inset:60px 16px auto 16px; background:var(--card); border:1px solid var(--card-border); border-radius: var(--radius-xl); padding:12px; flex-direction:column; transform:translateY(-130%); transition: transform .25s ease; box-shadow: var(--shadow)}
      .nav-links.open{transform:translateY(0)}
    }

    .hero{display:grid; grid-template-columns: 1.2fr 1fr; gap: var(--grid-gap); align-items:center; padding: clamp(24px, 6vw, 64px) 0}
    .hero-card{background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-2xl); padding: clamp(18px, 3.5vw, 32px); box-shadow: var(--shadow)}
    .hero h1{font-size: clamp(28px, 4vw, 48px); line-height:1.1; margin:0 0 .6rem; letter-spacing:.2px}
    .hero p{margin:0 0 1.2rem; color: var(--muted)}
    .hero .actions{display:flex; gap:.75rem; flex-wrap:wrap}
    .hero-visual{min-height: 280px; border-radius: var(--radius-2xl); background: conic-gradient(from 220deg at 70% 30%, rgba(14,165,233,.22), rgba(34,211,238,.18), transparent 60%), linear-gradient(180deg, rgba(2,8,23,.2), rgba(2,8,23,.4)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400"><defs><linearGradient id="g" x1="0" x2="1"><stop stop-color="%230ea5e9"/><stop offset="1" stop-color="%2322d3ee"/></linearGradient></defs><g fill="none" stroke="url(%23g)" stroke-opacity="0.6"><circle cx="400" cy="200" r="160"/><circle cx="400" cy="200" r="120"/><circle cx="400" cy="200" r="80"/></g></svg>'); background-size:cover; border:1px solid var(--card-border); box-shadow: var(--shadow); position:relative; overflow:hidden}
    .pill{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; background: color-mix(in oklab, var(--brand) 16%, transparent); border:1px solid var(--card-border); color: var(--text); font-size:.85rem}

    section{padding: clamp(28px, 6vw, 72px) 0}
    h2{font-size: clamp(22px, 3.2vw, 34px); margin:.2rem 0 1rem}
    .grid{display:grid; gap: var(--grid-gap)}
    .grid.cards{grid-template-columns: repeat(3, 1fr)}
    @media (max-width: 980px){ .hero{grid-template-columns: 1fr} .grid.cards{grid-template-columns: 1fr 1fr} }
    @media (max-width: 640px){ .grid.cards{grid-template-columns: 1fr} }
    .card{background: var(--card); border:1px solid var(--card-border); border-radius: var(--radius-xl); padding: clamp(14px, 2.5vw, 22px); box-shadow: var(--shadow)}
    .card h3{margin:.2rem 0 .4rem; font-size:1.1rem}
    .muted{color: var(--muted)}

    .features{display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap)}
    @media (max-width: 980px){ .features{grid-template-columns: repeat(2, 1fr)} }
    @media (max-width: 520px){ .features{grid-template-columns: 1fr} }

    .badge{display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:10px; background: color-mix(in oklab, var(--ok) 16%, transparent); border:1px solid var(--card-border); font-size:.9rem}

    .cta{display:grid; grid-template-columns: 1fr 1.1fr; gap: var(--grid-gap); align-items:center}
    @media (max-width: 900px){ .cta{grid-template-columns:1fr} }

    .footer{border-top:1px solid var(--card-border); padding: 28px 0 40px; color: var(--muted)}
    .small{font-size:.9rem}

    /* Accessible skip link */
    .skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
    .skip:focus{position:static; width:auto; height:auto; background:var(--brand); color:white; padding:.5rem 1rem; border-radius:8px}

    /* Utility */
    .center{display:grid; place-items:center}
    .right{justify-content:flex-end}