/* Solana Acolytes Donation Page - CSS (mobile-first, single stylesheet) */
:root{
  --bg:#0a0a0f;
  --grid: rgba(160, 0, 255, 0.25);
  --panel: rgba(15,0,40,0.65);
  --text:#e9d7ff;
  --muted:#d2b3ff;
  --beige:#f0e0ff;
  --glow: 0 8px 28px rgba(122, 0, 255, 0.45);
  --radius:14px;
}
*,
*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:#0a0a0f;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:40px 40px;
  background-attachment: fixed;
}

/* Frosted glass look for hacker-night vibe */
.glass{ background: rgba(255,255,255,0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,0.25); border-radius: var(--radius); box-shadow: var(--glow); }

/* Header */
.site-header{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:12px 16px;
  background: rgba(0,0,0,0.5);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.brand-text{
  font-weight:700; text-transform:uppercase; color:#e8d6ff;
  letter-spacing:.5px; font-size:1rem;
}

/* Layout */
main{ padding:14px; display:flex; justify-content:center; }

/* Hero: centerpiece QR with frosted container */
.hero{
  display:grid; place-items:center; text-align:center;
  padding:18px; gap:20px;
  max-width:980px; width:100%;
  border-radius:16px;
  background: rgba(15,0,40,0.65);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
}
.qr-area{ width:100%; display:grid; place-items:center; padding:6px; }
.qr-code{
  width:68vmin; max-width:520px; height:auto; aspect-ratio:1/1;
  border-radius:12px; padding:8px;
  background: rgba(0,0,0,.25);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.hero h1{ margin:0; font-size:1.6rem; color:#e9d7ff; }
.hero h2{ margin:0; font-size:1.1rem; color:#d8c4ff; font-weight:500; }

/* CTA-styled link (no buttons allowed) */
.telegram-link{ font-size:0.95rem; color:#e8d3ff; margin:4px 0 0; }
.telegram-link a{
  display:inline-block; margin-left:6px;
  padding:0.5em 1.05em; border-radius:999px;
  background: rgba(167, 107, 255, 0.45);
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.4);
  font-weight:600;
}
.telegram-link a:hover, .telegram-link a:focus{ outline:2px solid #ffd8ff; outline-offset:2px; }

.site-footer{
  padding:14px; text-align:center;
  color:#d9c6ff; background: rgba(0,0,0,0.34);
  border-top:1px solid rgba(255,255,255,.15);
}
.footer-ad{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:6px 0; }
.footer-ad a{
  color:#e9d5ff; text-decoration:none;
  border-bottom:1px solid rgba(233,213,255,.6);
  padding-bottom:2px;
}
.footer-ad a:hover, .footer-ad a:focus{
  outline:2px solid #d8b3ff; outline-offset:2px; border-bottom:none;
}
.gratitude{ margin-top:6px; font-size:0.95rem; }

/* Focus styles for accessibility */
:focus-visible{ outline:2px solid #b889ff; outline-offset:2px; border-radius:6px; }

/* Responsive tweaks (mobile-first) */
@media (min-width:640px){
  .hero{ padding:28px; gap:22px; border-radius:18px; }
  .hero h1{ font-size:2rem; }
  .hero h2{ font-size:1.25rem; }
  .qr-code{ width:60vmin; }
  .brand-text{ font-size:1.05rem; }
}
@media (min-width:1024px){
  .hero{ padding:40px; }
  .hero h1{ font-size:2.4rem; }
  .hero h2{ font-size:1.4rem; }
  .qr-code{ width:48vmin; }
}