*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(1200px 600px at 80% -5%, rgba(0,87,255,.15), transparent 60%),
  radial-gradient(1200px 600px at 20% 105%, rgba(225,6,0,.12), transparent 60%),
  var(--bg);
color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
font-size:clamp(15px,0.6vw + 12px,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;display:flex;align-items:center;justify-content:center}
.wrap{width:min(1100px,92vw);padding:clamp(36px,6vw,72px) 0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:10px;top:10px;background:#000;color:#fff;padding:8px;border-radius:8px}

.site-header{display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.site-header img{height:72px;width:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.hero{text-align:center;padding:28px 20px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--ring);border-radius:24px;backdrop-filter:blur(6px);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.kicker{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600;font-size:.9rem;margin:0}
h1{margin:.4rem 0 0;font-size:clamp(1.8rem,2.6vw + 1rem,3rem);line-height:1.1}
.gradient{background:linear-gradient(90deg,var(--accentRed),var(--accentBlue));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:14px auto 18px;color:var(--muted);max-width:60ch}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:8px}
.btn{appearance:none;border:none;cursor:pointer;font-weight:700;border-radius:14px;padding:14px 18px;box-shadow:inset 0 0 0 1px var(--ring), 0 8px 22px rgba(0,0,0,.35);transition:transform .15s ease, box-shadow .2s ease;text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--accentRed),var(--accentBlue));color:#fff}
.btn.secondary{background:transparent;color:var(--fg)}
.btn:hover{transform:translateY(-2px)}
.hero-media{display:block;margin:20px auto 0;max-width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--ring)}

.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin:28px 0 10px}
.card{grid-column:span 4;background:var(--card);border:1px solid var(--ring);border-radius:18px;padding:18px;min-height:120px}
.card h2{margin:0 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--muted)}
@media (max-width:900px){.card{grid-column:span 6}}
@media (max-width:640px){.card{grid-column:span 12}}

.coords{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:22px}
.list{list-style:none;margin:0;padding:0}
.list li{margin:6px 0}
.link{color:var(--fg);text-decoration:none;padding:6px 10px;border-radius:10px;transition:background .15s ease;display:inline-block}
.link:hover{background:rgba(255,255,255,.06)}
.qr{width:120px;height:auto;border-radius:12px;border:1px solid var(--ring);background:#fff;padding:6px}

.site-footer{margin-top:30px;text-align:center;color:var(--muted);font-size:.95rem}
.site-footer p{margin:6px 0}
.site-footer a{color:var(--fg);text-decoration:none;border-bottom:1px dotted var(--ring)}
.site-footer a:hover,.site-footer a:focus-visible{border-bottom-color:transparent}

@media (max-width:640px){.coords{grid-template-columns:1fr;justify-items:center;text-align:center}.qr{width:96px}}
@media (max-width:520px){.cta .btn{width:100%}.site-header img{height:56px}}
.btn:focus-visible,.link:focus-visible{outline:2px solid var(--accentBlue);outline-offset:3px}