:root{--navy:#262d63;--blue:#3aa9f7;--purple:#5a3ea6;--sky:#8bd3e6}
*{box-sizing:border-box}
body{margin:0;font-family:'Roboto Condensed',Arial,sans-serif;color:#333;background:#fff;text-align:center}
h1,h2,.btn{font-family:'Bungee',Impact,sans-serif;font-weight:400}
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;color:#fff;border-radius:999px;padding:28px 90px;font-size:18px;letter-spacing:.04em;background:linear-gradient(90deg,var(--purple),#6bb8f5)}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.sky{background:radial-gradient(circle at 25% 30%,#1b2a6b,transparent 45%),radial-gradient(circle at 80% 70%,#c8571f55,transparent 40%),#03040f}
.astro{width:100%;height:100%}
/* age gate */
.gate{max-width:1000px;margin:15px auto 0}
.gate .hero{height:507px;display:flex;justify-content:flex-end;align-items:center;gap:40px;padding-right:60px;position:relative}
.gate .cube{width:110px;height:110px;background:#c4423f;border-radius:6px;transform:rotate(-12deg);box-shadow:0 0 50px #ff7a5a88;position:absolute;left:52%;top:32%}
.gate .hero .astro{width:260px;height:320px}
.gate h1{font-size:62px;margin:200px 0 40px;color:#000;transform:scaleX(.8)}
.gate p{font-family:'Khand','Roboto Condensed',sans-serif;font-size:38px;font-weight:600;text-transform:uppercase;line-height:1.4;margin:90px auto 110px;max-width:960px;color:#222}
.gate p a{color:#000}
.gate .under{color:#000;margin-bottom:60px}
/* landing */
.wrap{max-width:1066px;margin:0 auto}
.top{background:radial-gradient(circle at 50% 100%,#48b8ff,transparent 70%),linear-gradient(#1f4fe0,#2e8df2);color:#fff;padding:60px 20px 85px}
.top h1{font-size:56px;margin:0 0 24px;transform:scaleX(.85)}
.top p{margin:4px 0;font-size:20px}
.pill{background:var(--navy);padding:22px 32px;margin-top:28px;font-size:15px;letter-spacing:.14em}
.pill b{letter-spacing:.06em}
.reason{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;text-align:left;padding:60px 28px}
.reason .pic{height:390px;display:flex;align-items:center;justify-content:center}
.reason .pic.space{background:linear-gradient(160deg,#0b1240,#5b4aa0 60%,#2b8a86);border-radius:18px}
.reason .pic.space .astro{width:70%}
.reason .pic svg{height:100%}
.reason .num{display:inline-block;background:var(--sky);color:#000;font:700 12px sans-serif;border-radius:6px;padding:9px 12px}
.reason h2{color:var(--navy);font-size:38px;line-height:1.15;margin:34px 0 22px;transform-origin:left;transform:scaleX(.82);width:122%}
.reason p{font-size:18px;line-height:1.6;max-width:520px;margin:0}
.badge{background:linear-gradient(90deg,#1e8ae6,#48bcff);color:#fff;font-weight:700;padding:26px;text-align:center;border-radius:8px;margin-top:30px;font-size:18px}
.reason.flip .pic{order:2}
.foot{padding:30px 20px 70px}
.foot .pill{margin:0;font-family:'Khand',sans-serif;color:#fff;display:inline-block;border-radius:999px}
small{display:block;color:#666;padding:0 20px 40px;font-size:13px}
@media(max-width:760px){.gate h1{font-size:40px;margin-top:80px}.gate p{font-size:22px;margin:50px 16px}.gate .hero{height:300px;padding-right:10px}.gate .hero .astro{width:150px}.gate .cube{width:70px;height:70px}.btn{padding:22px 40px}.reason{grid-template-columns:1fr;gap:20px}.reason.flip .pic{order:0}.reason h2{width:100%;transform:none;font-size:28px}.reason .pic{height:260px}.top h1{font-size:34px;transform:none}}
/* photo layer */
.gate .hero{background:linear-gradient(90deg,#03040fcc,transparent 60%),url("https://images.pexels.com/photos/2156/sky-earth-space-working.jpg?auto=compress&cs=tinysrgb&w=1600") center/cover,#03040f}
.gate .cube{left:22%;top:34%}
.top{background:linear-gradient(#1f4fe0b8,#2e8df2cc),url("https://images.pexels.com/photos/17809481/pexels-photo-17809481/free-photo-of-space-with-stars.jpeg?auto=compress&cs=tinysrgb&w=1600") center/cover,#1f4fe0}
.reason .pic{background:#0b1240;border-radius:18px;overflow:hidden}
.reason .pic img{width:100%;height:100%;object-fit:cover;display:block}
.reason .pic.space{background:#0b1240}
/* age gate: fit one screen, no scrolling */
html:has(body.gp),body.gp{height:100%;overflow:hidden}
body.gp .gate{height:100dvh;max-width:1000px;margin:0 auto;padding:1.5dvh 16px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1dvh}
body.gp .gate .hero{flex:0 0 36dvh;width:100%;height:auto;padding:0}
body.gp .gate .cube{width:clamp(50px,11dvh,110px);height:clamp(50px,11dvh,110px);left:22%;top:30%}
body.gp .gate h1{font-size:clamp(28px,7dvh,62px);margin:0;transform:none;line-height:1}
body.gp .gate .btn{padding:clamp(12px,3dvh,28px) clamp(36px,8vw,90px);font-size:clamp(14px,2.2dvh,18px);flex:none}
body.gp .gate p{font-size:clamp(14px,3dvh,32px);line-height:1.3;margin:0;max-width:900px}
body.gp .gate .under{margin:0}