:root{
      --bg:#0f172a;          /* slate-900 */
      --panel:#111827;       /* gray-900 */
      --card:#0b1224;        /* deep */
      --text:#e5e7eb;        /* gray-200 */
      --muted:#9ca3af;       /* gray-400 */
      --brand:#22d3ee;       /* cyan-400 */
      --brand-2:#60a5fa;     /* blue-400 */
      --accent:#10b981;      /* emerald-500 */
      --shadow:0 8px 24px rgba(0,0,0,.25);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:system-ui,-apple-system,segoue ui,roboto,ubuntu,cantarell,"noto sans",tahoma,arial,"apple color emoji","segoe ui emoji";
      background: linear-gradient(135deg,var(--bg),#030712 55%);
      color:var(--text);
      min-height:100dvh;
      display:flex;
      flex-direction:column;
    }
.page-wrap{
    margin: 5%;
}
    /* header / nav */
    .site-header{
      position:sticky; top:0; z-index:10;
      backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(0deg,rgba(2,6,23,.65),rgba(2,6,23,.65));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav{
      max-width:1200px; margin:auto; padding:14px 20px;
      display:flex; align-items:center; gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
    }
    .brand-badge{
      width:36px; height:36px; border-radius:12px;
      background: conic-gradient(from 210deg, var(--brand), var(--brand-2));
      box-shadow:0 0 0 2px rgba(255,255,255,.08) inset, 0 8px 24px rgba(37, 99, 235, .35);
    }
    .brand-title{font-size:18px; font-weight:700; letter-spacing:.2px}
    .nav-links{margin-inline-start:auto; display:flex; gap:10px; flex-wrap:wrap}
    .nav a{
      color:var(--muted); text-decoration:none; font-size:14px; padding:8px 12px; border-radius:999px;
      border:1px solid rgba(255,255,255,.06);
    }
    .nav a:hover{ color:var(--text); border-color:rgba(255,255,255,.14) }

    /* hero */
    .hero{
      max-width:1200px; margin:28px auto 10px; padding:0 20px;
      display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    }
    .hero h1{
      margin:0; font-size:clamp(22px, 4vw, 32px);
      background:linear-gradient(90deg,var(--brand),var(--brand-2));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      font-weight:800;
    }
    .hero p{ margin:6px 0 0; color:var(--muted); font-size:14px }

    /* grid */
    .wrap{
      max-width:1200px; width:100%; margin:0 auto; padding:12px 20px 32px;
      flex:1 1 auto;
    }
    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
      gap:14px;
    }
    .card{
      position:relative; overflow:hidden; border-radius:var(--radius);
      background:
        radial-gradient(1200px 1200px at -20% -10%, rgba(46,139,235,.12), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.07);
      box-shadow:var(--shadow);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      min-height:110px;
      display:flex; align-items:center; justify-content:center; text-align:center;
      text-decoration:none; color:var(--text);
      isolation:isolate;
    }
    .card .label{
      font-size:clamp(18px, 2.8vw, 22px); font-weight:800; letter-spacing:.2px;
    }
    .card .sub{
      margin-top:6px; font-size:12px; color:var(--muted);
    }
    .card::after{
      content:""; position:absolute; inset:auto auto 10px 10px; width:120px; height:120px;
      background: radial-gradient(closest-side, rgba(16,185,129,.25), transparent 70%);
      filter: blur(14px); opacity:.0; transition:opacity .25s ease;
      z-index:-1;
    }
    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 16px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
    }
    .card:hover::after{ opacity:1 }

    /* footer */
    footer{
      border-top:1px solid rgba(255,255,255,.06);
      background:linear-gradient(0deg, rgba(2,6,23,.7), rgba(2,6,23,.7));
    }
    .footer-inner{
      max-width:1200px; margin:auto; padding:18px 20px;
      display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
      color:var(--muted); font-size:13px;
    }
    .foot-links{display:flex; gap:12px; flex-wrap:wrap}
    .foot-links a{ color:var(--muted); text-decoration:none }
    .foot-links a:hover{ color:var(--text) }

    /* cookie */
    .cookie{
      position: fixed; inset:auto 12px 12px 12px; z-index:9999;
      border-radius:16px; border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
      box-shadow:0 10px 30px rgba(0,0,0,.45);
      padding:14px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
      max-width:920px; margin-inline:auto;
    }
    .cookie p{ margin:0; color:var(--text); font-size:14px }
    .cookie .actions{display:flex; gap:8px; flex-wrap:wrap}
    .btn{
      cursor:pointer; border:none; border-radius:999px; padding:9px 14px; font-weight:700; font-size:14px;
    }
    .btn-primary{
      background: linear-gradient(90deg, var(--brand), var(--accent));
      color:#001018; box-shadow: 0 6px 16px rgba(34,211,238,.35);
    }
    .btn-ghost{
      background: transparent; color:var(--text);
      border:1px solid rgba(255,255,255,.14);
    }

    @media (max-width:480px){
      .nav a{padding:6px 10px}
      .card{min-height:96px}
    }