:root{ --accent:#a78bfa; --dark:#1f1147; --light:#eee8ff; }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:Roboto Slab, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; color:var(--dark); background:radial-gradient(1200px 600px at 80% 0%, rgba(167,139,250,.12), transparent 60%), linear-gradient(180deg,#eee8ff,white); }
a{ color:var(--accent); text-decoration:none }
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid rgba(0,0,0,.06) }
.container{ max-width:1100px; margin:0 auto; padding:0 16px }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand img{ height:36px }
.brand .name{ font-weight:700; letter-spacing:.5px; color:var(--dark) }
.hamburger{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.1); border-radius:8px; background:white }
.hamburger span{ display:block; width:20px; height:2px; background:var(--dark); position:relative }
.hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--dark) }
.hamburger span::before{ top:-6px } .hamburger span::after{ top:6px }
nav ul{ list-style:none; display:flex; gap:18px; padding:0; margin:0 }
nav a{ padding:8px 10px; border-radius:8px }
nav a:hover{ background:rgba(0,0,0,.05) }
@media (max-width: 860px){ nav{ position:fixed; inset:56px 12px auto 12px; background:white; border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:12px; transform:translateY(-16px); display:none }
nav.open{ display:block }
nav ul{ flex-direction:column; gap:8px } }
main{ padding:24px 0 }
.hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center }
.hero h1{ margin:0 0 10px; font-size:40px; line-height:1.1; color:var(--dark) }
.hero p.lead{ font-size:18px; color:#333 }
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 0 }
.badge{ background:var(--dark); color:#eee8ff; padding:6px 10px; border-radius:999px; font-size:12px }
.card{ background:white; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:14px; box-shadow:0 10px 20px rgba(0,0,0,.05) }
.iframe-wrap{ aspect-ratio: 4 / 3; background:#000; border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,.2) }
.iframe-wrap iframe{ width:100%; height:100%; border:0; display:block; background:#000 }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px }
@media (max-width: 900px){ .hero{ grid-template-columns:1fr } .grid-3{ grid-template-columns:1fr } .hero h1{ font-size:32px } }
footer{ margin-top:40px; border-top:1px solid rgba(0,0,0,.08); padding:20px 0; background:rgba(255,255,255,.7) }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap }
.small{ font-size:12px; color:#444 }
#age-gate{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:1000 }
#age-gate .modal{ width:min(520px, 92vw); background:white; border-radius:16px; padding:20px; border:1px solid rgba(0,0,0,.1); text-align:center }
#age-gate h2{ margin:0 0 6px }
#age-gate p{ color:#333 }
.actions{ display:flex; gap:12px; justify-content:center; margin-top:16px }
.btn{ padding:10px 14px; border-radius:10px; border:1px solid rgba(0,0,0,.1); background:var(--accent); color:white; cursor:pointer; font-weight:600 }
.btn.secondary{ background:white; color:var(--dark) }
.notice{ background:rgba(255,255,255,.8); border:1px dashed rgba(0,0,0,.2); padding:10px; border-radius:10px }