:root {
  --bg: #0b0f1a;
  --text: #f7f7fb;
  --accent: #ff80bf;
  --accent2: #80d8ff;
  --card: #11182a;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 600px at 50% -20%, #1a2454, #0b0f1a); }
.container { max-width: 980px; margin: 0 auto; padding: 24px; }
.hero { text-align:center; padding: 36px 12px 12px; }
.hero img.banner { width:100%; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.title { font-size: clamp(28px, 6vw, 64px); font-weight: 800; letter-spacing: 1px; margin: 18px 0 6px; }
.tagline { font-size: clamp(14px, 2.3vw, 22px); opacity: .9; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 28px 0; }
.card { background: linear-gradient(160deg, rgba(255,128,191,.08), rgba(128,216,255,.08)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 18px; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.card h3 { margin: 0 0 8px; }
.kv { display:grid; grid-template-columns: 120px 1fr; gap:12px; }
.kv div { padding:6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer { text-align:center; opacity:.7; padding:18px 0 40px; font-size:14px; }
.btn { display:inline-block; margin-top:10px; padding: 12px 16px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#0b0f1a; text-decoration:none; font-weight: 700; }
.gallery { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.gallery img { width:100%; border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.placeholder { opacity: .7; font-style: italic; }