:root{
      --bg: #0b1020;
      --panel: #0f1530;
      --muted: #94a3b8;
      --text: #e2e8f0;
      --brand: #7c3aed;
      --brand-2: #06b6d4;
      --ring: 0 0 0 4px rgba(124,58,237,.2);
      --radius: 18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background: radial-gradient(1200px 800px at 80% -10%, rgba(124,58,237,.25), transparent 60%),
                  radial-gradient(900px 600px at -10% 20%, rgba(6,182,212,.25), transparent 60%),
                  var(--bg);
      color:var(--text);
      line-height:1.65;
    }
    header{
      position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);
      background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.6));
      border-bottom:1px solid rgba(226,232,240,.08);
      z-index:50
    }
    .container{max-width:1100px;margin:0 auto;padding:0 20px}
    .row{display:grid;gap:24px}
    .hero{padding:56px 0 28px}
    .hero .title{font-size:clamp(28px,4vw,33px);line-height:1.1;margin:12px 0}
    .hero .kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
    .hero p{font-size:clamp(16px,1.4vw,15px);max-width:760px}
    .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
    .btn{appearance:none;border:0;cursor:pointer;padding:12px 18px;border-radius:14px;font-weight:600}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;box-shadow:0 10px 30px rgba(124,58,237,.25)}
    .btn.primary:focus{outline:none;box-shadow:var(--ring)}
    .btn.ghost{background:rgba(148,163,184,.08);color:var(--text);border:1px solid rgba(226,232,240,.08)}
    section{padding:40px 0}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
          border:1px solid rgba(226,232,240,.08);border-radius:var(--radius);padding:22px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    h2{font-size:26px;margin:0 0 8px}
    h3{font-size:20px;margin:10px 0}
    p{margin:8px 0}
    ul{padding-left:18px;margin:6px 0}
    .muted{color:var(--muted)}
    footer{color:var(--muted);border-top:1px solid rgba(226,232,240,.08)}
    .badge{display:inline-block;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid rgba(226,232,240,.14);background:rgba(255,255,255,.03)}

 

    /* Mobile menu */
  .menu-toggle {
    display: none;
    background: rgba(148, 163, 184, .08);
    color: var(--text);
    border: 1px solid rgba(226, 232, 240, .08);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    max-width: 57px;
    margin: auto;
}
    nav.mobile {
      display:none;
      flex-direction:column;
      gap:14px;
      padding:12px 0;
    }
    nav.mobile a {
      color:var(--text);
      text-decoration:none;
      font-size:16px;
    }
    nav.mobile.show {display:flex;}

    .desktop{
      display: flex;
      justify-content: center;
      gap:20px;
      font-size:14px;
    }
    .card a {
    color: #fff;
}
.disclaimer a {
    color: #dbdbdb;
    letter-spacing: 2px;
}
.disclaimer {
    font-size: 14px;
    text-align: center;
}
.muted {
   text-decoration: none;
    font-size: 15px;
}
.card ol,
.card ul{
    /* margin-left: 1px; */
    padding-left: 17px;
}

       /* Responsive grids */
    @media (max-width:960px){.grid-3{grid-template-columns:1fr 1fr}}
    @media (max-width:720px){
      .grid-3,.grid-2{grid-template-columns:1fr}
      .hero{padding:42px 0 18px}
      nav.desktop {display:none;}
      .menu-toggle {display:block;}
       
         footer .container {
        padding: 0 12px;
        grid-template-columns: auto!important;
        text-align: center;
    }

    }
    @media (max-width:480px){
      .container {padding:0 12px;}
      .btn {width:100%; text-align:center;}
      .hero .title{font-size:24px;}
      .hero p{font-size:15px;}

    }