:root{
      --bg:#0b0b0d;
      --panel:#121217;
      --text:#e9ecf1;
      --muted:#a8b0bd;
      --brand:#9333ea;
      --cta-bg:#9333ea;   
      --cta-text:#000000; 
      --border:#1f2430;
      --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height:1.5;
    }

    /* Header */
    .site-header{
      position:sticky; top:0; z-index:10;
      backdrop-filter: blur(10px);
      background: color-mix(in oklab, var(--panel) 80%, transparent);
      border-bottom:1px solid var(--border);
    }
    .wrap{max-width:1100px; margin:0 auto; padding: 16px 20px;}
    .nav{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);
    }
    .brand .logo{
      width:36px; height:36px; border-radius:999px; background:#1e1e26;
      display:grid; place-items:center; font-weight:700; border:1px solid var(--border);
      box-shadow: var(--shadow);
    }
    .brand span{font-weight:700; letter-spacing:.2px}
    .logo-img{ width:32px; height:32px; border-radius:999px; }
    .ring{ box-shadow: 0 0 0 2px rgba(168,85,247,0.4); }
    .glow{ filter: drop-shadow(0 4px 8px rgba(147,51,234,0.30)); }


    .nav-links{
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    }
    .nav-links a{
      color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
    }
    .nav-links a:hover, .nav-links a:focus-visible{ color:var(--text); background:rgba(147,51,234,0.12); outline:none }
    .donate{
      margin-left:6px;
      color:#000000;
      background:var(--cta-bg);
      font-weight:700;
      padding:10px 14px;
      border-radius:999px;
      text-decoration:none;
      border:1px solid #5b21b6;
    }
    .donate:hover, .donate:focus-visible{ filter:brightness(1.1); outline:none}

    /* Hero / intro */
    .hero{ padding:36px 20px 10px; text-align:center; }
    .hero h1{ font-size: clamp(22px, 2.5vw, 28px); margin: 0 0 6px; }
    .hero p{ margin:0; color:var(--muted) }

    /* Cards row */
    .cards{
      display:grid; gap:18px;
      grid-template-columns: repeat(3, 1fr);
      padding: 22px 20px 60px;
    }
    @media (max-width: 960px){
      .cards{ grid-template-columns: 1fr; }
    }

    .card{
      background: var(--panel);
      border:1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      display:flex; flex-direction:column; min-height: 360px;
    }
    .shot{
      aspect-ratio: 16/9; background:#0f1218;
      border-bottom:1px solid var(--border);
      display:block; width:100%; object-fit:cover;
    }
    .card-body{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1 }
    .card h2{ margin:0; font-size:20px }
    .card p{ margin:0; color:var(--muted) }

    .cta-row{
      margin-top:auto;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .btn{
      flex:1;
      text-align:center;
      padding:10px 14px;
      border-radius:12px;
      text-decoration:none;
      border:1px solid var(--border);
      background:#1a1f2b;
      color:var(--text);
      font-weight:600;
    }
    .btn:hover, .btn:focus-visible{ outline:none; background:#212836 }
    .btn-primary{ background: var(--brand); color:#000000; border-color: color-mix(in oklab, var(--brand) 60%, black);
      font-weight:800;
    }
    .btn-primary:hover, .btn-primary:focus-visible{ filter:brightness(1.05) }

    /* Footer */
    .site-footer{ border-top:1px solid var(--border); color:var(--muted); padding:18px 20px 40px; text-align:center; }
    .site-footer a{ color:var(--brand); text-decoration:none }
    .site-footer a:hover{ text-decoration:underline }