:root{
    --bg0:#070a10;
    --bg1:#0b0f14;
    --card:#0f1621cc;
    --border:#ffffff1a;
    --text:#e9eef6;
    --muted:#a8b3c4;
    --accent:#7cc4ff;
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --radius: 18px;
}
*{box-sizing:border-box}

html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 10% 10%, rgba(124,196,255,.14), transparent 60%),
        radial-gradient(900px 600px at 90% 20%, rgba(130,255,214,.10), transparent 55%),
        radial-gradient(900px 650px at 50% 110%, rgba(255,170,210,.10), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      display:grid;
      place-items:center;
      padding:24px;
    }
    .wrap{
      width:min(860px, 100%);
      display:grid;
      gap:18px;
    }
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(10px);
    }

    main{
      padding:26px 28px 28px;
      display:grid;
      gap:16px;
    }
    .lead{
      margin:0;
      font-size:clamp(18px, 2.4vw, 22px);
      line-height:1.45;
      letter-spacing:-.01em;
      text-align: center;
    }
    .muted{color:var(--muted)}
    a{
      color:var(--accent);
      text-decoration:none;
    }
    a:hover{text-decoration:underline}
    .links{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
    }

    @media (max-width: 720px){
      header{flex-direction:column; align-items:flex-start}
      .pill{align-self:flex-start}
      .grid{grid-template-columns: 1fr}
    }