:root{
  --color-primary:#fbbf24;
  --color-primary-glow:rgba(251,191,36,0.4);
  --color-secondary:#f59e0b;
  --color-accent:#fb923c;
  --color-accent-glow:rgba(251,146,60,0.3);
  --bg-from:#1c1917; /* from */
  --bg-via:#292524;  /* via */
  --bg-to:#0c0a09;   /* to */
  --card-bg:rgba(41,37,36,0.7);
  --card-border:rgba(251,191,36,0.2);
  --heading-font:'Montserrat',system-ui,sans-serif;
  --body-font:'Open Sans',system-ui,sans-serif;
  --mono-font:'Source Code Pro',monospace;
  --radius-lg:20px;
  --radius-md:16px;
  --transition-fast:0.2s ease-out;
  --transition:0.4s ease-out; /* Elegant Glow profile */
  --hover-scale:1.03;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:#fafaf9; background:linear-gradient(180deg,var(--bg-from),var(--bg-via),var(--bg-to));
  font-family:var(--body-font); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}

/* Nav */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:linear-gradient(180deg,rgba(12,10,9,0.65),rgba(12,10,9,0.35) 60%,rgba(12,10,9,0)); border-bottom:1px solid rgba(255,255,255,0.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-title{font-family:var(--heading-font); font-weight:800; letter-spacing:.3px; color:var(--color-primary)}
.main-nav{display:none; gap:20px}
.main-nav a{color:#e7e5e4; text-decoration:none; padding:10px 12px; border-radius:10px; transition:transform var(--transition), color var(--transition)}
.main-nav a:hover{transform:translateY(-2px); color:var(--color-primary)}
.main-nav a.active{color:var(--color-primary)}
.header-cta{display:flex; align-items:center; gap:12px}
.header-badge{border:1px solid var(--card-border)}
.hamburger{width:40px; height:40px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:1px solid rgba(255,255,255,0.08); border-radius:12px; cursor:pointer; transition:transform var(--transition)}
.hamburger:hover{transform:scale(var(--hover-scale))}
.hamburger span{display:block; width:20px; height:2px; background:#e7e5e4; border-radius:2px}

@media(min-width:768px){.main-nav{display:flex}.hamburger{display:none}}

/* Hero */
.hero{position:relative; min-height:86vh; display:flex; align-items:center; overflow:hidden; background-image:var(--hero-bg); background-size:cover; background-position:center}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(1200px 600px at 20% 10%, rgba(251,146,60,0.15), transparent 60%), radial-gradient(1000px 600px at 80% 50%, rgba(251,191,36,0.12), transparent 60%), linear-gradient(180deg, rgba(12,10,9,0.55), rgba(12,10,9,0.9))}
.hero-inner{position:relative; z-index:2}
.hero-content h1{font-family:var(--heading-font); font-weight:800; font-size:clamp(36px,6vw,64px); margin:0 0 10px}
.hero-content p{font-size:clamp(16px,2.5vw,20px); color:#e7e5e4; margin:0 0 20px}
.hero-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cta-note{font-size:12px; opacity:.9}
.corner-age{position:absolute; top:20px; right:20px; background:linear-gradient(135deg,var(--color-primary),var(--color-accent)); color:#0c0a09; padding:10px 14px; font-weight:800; border-radius:999px; box-shadow:0 0 0 2px rgba(0,0,0,0.25), 0 0 30px var(--color-primary-glow)}
.hero-waves::before, .hero-waves::after{content:""; position:absolute; left:-10%; right:-10%; height:160px; bottom:-40px; background:radial-gradient(60% 100% at 50% 0%, rgba(251,191,36,0.18), rgba(251,146,60,0.06) 60%, transparent 80%); filter:blur(20px); animation:floatwave 8s ease-in-out infinite alternate}
.hero-waves::after{bottom:-80px; animation-duration:10s; opacity:.8}
@keyframes floatwave{from{transform:translateY(0)}to{transform:translateY(16px)}}

/* Buttons */
.btn{appearance:none; border:none; border-radius:16px; padding:12px 18px; font-weight:700; cursor:pointer; transition:transform var(--transition), box-shadow var(--transition), background-position 1.8s var(--transition); position:relative; isolation:isolate}
.btn.primary{background:linear-gradient(120deg,var(--color-primary),var(--color-accent)); color:#0c0a09; box-shadow:0 10px 30px -10px var(--color-accent-glow), 0 0 0 1px var(--card-border) inset}
.btn.ghost{background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.12)}
.btn:hover{transform:scale(var(--hover-scale)); box-shadow:0 12px 40px -12px var(--color-primary-glow)}

/* Shimmer overlay */
.shimmering{overflow:hidden}
.shimmering::after{content:""; position:absolute; inset:-200% -50%; background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0)); transform:translateX(-60%); animation:shimmer 3s ease-out infinite}
@keyframes shimmer{to{transform:translateX(60%)}}

/* Sections */
.section{padding:90px 0}
.section-head{display:flex; align-items:center; gap:12px; margin-bottom:28px}
.section h2{font-family:var(--heading-font); font-weight:800; font-size:clamp(26px,4vw,40px); margin:0}
.section-disclaimer{margin-top:20px; font-size:12px; color:#d6d3d1}
.hero-min{padding-top:60px}
.lead{color:#e7e5e4; max-width:800px}

/* Badges */
.age-badge{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-weight:800; color:#0c0a09; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); box-shadow:0 0 0 1px var(--card-border) inset, 0 0 24px var(--color-primary-glow)}
.age-badge.large{padding:10px 14px; font-size:18px}

/* Cards base */
.games-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:640px){.games-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.games-grid{grid-template-columns:repeat(3,1fr)}}
.game-card{background:var(--card-bg); border-radius:var(--radius-lg); border:1px solid var(--card-border); overflow:hidden; position:relative; transition:transform var(--transition), box-shadow var(--transition)}
.game-card::before{content:""; position:absolute; inset:-1px; border-radius:calc(var(--radius-lg) + 1px); padding:1px; background:linear-gradient(135deg, rgba(251,191,36,0.6), rgba(251,146,60,0.5), rgba(251,191,36,0.6)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.game-card:hover{transform:translateY(-4px) scale(var(--hover-scale)); box-shadow:0 20px 60px -20px var(--color-accent-glow)}
.game-image-container{position:relative; aspect-ratio:16/9; background:linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,146,60,0.06)); display:flex; align-items:center; justify-content:center}
.game-image{width:100%; height:100%; object-fit:cover}
.game-image-fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; padding:10px; font-weight:800; font-family:var(--heading-font); color:#fff; background:repeating-linear-gradient(45deg, rgba(251,191,36,0.08), rgba(251,191,36,0.08) 10px, rgba(251,146,60,0.08) 10px, rgba(251,146,60,0.08) 20px)}
.game-info{display:flex; align-items:center; justify-content:space-between; padding:12px 14px 0}
.game-category{font-size:12px; padding:6px 10px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1)}
.game-title{font-family:var(--heading-font); font-weight:800; font-size:18px; margin:8px 14px 12px}
.play-demo-btn{margin:0 14px 16px; width:calc(100% - 28px); padding:12px; border-radius:14px; border:none; background:linear-gradient(120deg,var(--color-primary),var(--color-accent)); color:#0c0a09; font-weight:800; cursor:pointer; transition:transform var(--transition), box-shadow var(--transition)}
.play-demo-btn:hover{transform:scale(var(--hover-scale)); box-shadow:0 10px 30px -10px var(--color-primary-glow)}

/* HIW */
.hiw-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.hiw-grid{grid-template-columns:repeat(3,1fr)}}
.hiw-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:20px; position:relative; overflow:hidden}
.hiw-card::before{content:""; position:absolute; inset:0; background:radial-gradient(300px 160px at -10% -10%, rgba(251,191,36,0.12), transparent); pointer-events:none}
.hiw-icon{font-size:26px; margin-bottom:10px}

/* Features */
.features-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:22px; min-height:120px}

/* Responsible */
.responsible-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:768px){.responsible-grid{grid-template-columns:repeat(2,1fr)}}
.responsible-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:22px}
.links-list{list-style:none; padding-left:0}
.links-list li{margin:8px 0}
.links-list a{color:var(--color-primary); text-decoration:none}
.links-list a:hover{text-decoration:underline}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:1fr; gap:12px}
.faq-item{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:14px}
.faq-item summary{cursor:pointer; font-weight:700}

/* Filters */
.filters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.filter-btn{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#fff; padding:8px 12px; border-radius:12px; cursor:pointer; transition:transform var(--transition), background var(--transition)}
.filter-btn:hover{transform:scale(var(--hover-scale))}
.filter-btn.active{background:linear-gradient(120deg,var(--color-primary),var(--color-accent)); color:#0c0a09}

/* Banner */
.banner.age-banner{padding:16px 0; background:linear-gradient(90deg, rgba(251,191,36,0.08), rgba(251,146,60,0.08)); border-bottom:1px solid var(--card-border)}
.banner-inner{display:flex; align-items:center; gap:10px}

/* Modal */
.game-modal{position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none; align-items:center; justify-content:center; padding:20px; z-index:60}
.game-modal.active{display:flex}
.modal-content{width:100%; max-width:1100px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,0.6); overflow:hidden; animation:pop var(--transition)}
@keyframes pop{from{transform:translateY(10px) scale(.98); opacity:0}to{transform:translateY(0) scale(1); opacity:1}}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.08)}
.modal-header h2{font-family:var(--heading-font); font-weight:800; margin:0; font-size:18px}
.close-btn{background:transparent; border:none; color:#fff; font-size:26px; cursor:pointer}
#game-iframe{width:100%; height:70vh; border:0; display:none; background:#000}
.demo-unavailable{display:none; align-items:center; justify-content:center; height:70vh; font-weight:700}

/* Age modal */
.age-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:80}
.age-modal.active{display:flex}
.age-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px)}
.age-dialog{position:relative; z-index:2; width:min(520px,92%); background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:24px; text-align:center; box-shadow:0 20px 60px -20px rgba(0,0,0,0.7)}
.age-icon{width:84px; height:84px; border-radius:999px; margin:0 auto 10px; display:grid; place-items:center; font-weight:800; font-family:var(--heading-font); color:#0c0a09; background:linear-gradient(135deg,var(--color-primary),var(--color-accent)); box-shadow:0 0 0 1px var(--card-border) inset, 0 0 30px var(--color-accent-glow)}
.age-actions{display:flex; gap:10px; justify-content:center; margin-top:18px}

/* Footer */
.site-footer{padding-top:40px; border-top:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(12,10,9,0), rgba(12,10,9,0.6))}
.footer-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:flex-start}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-links{display:grid; gap:10px}
.footer-links a{color:#e7e5e4; text-decoration:none}
.footer-links a:hover{color:var(--color-primary)}
.footer-age{justify-self:start}
.age-emblem{font-family:var(--heading-font); font-weight:800; font-size:28px; display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; color:#0c0a09; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); box-shadow:0 0 0 2px var(--card-border) inset, 0 0 40px var(--color-primary-glow)}
.footer-note{color:#d6d3d1}
.footer-base{margin-top:20px; padding:16px 0; border-top:1px solid rgba(255,255,255,0.06); text-align:center; color:#d6d3d1}

/* Utility */
.card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:20px}
.gradient-card{position:relative}
.gradient-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(251,191,36,0.6), rgba(251,146,60,0.5), rgba(251,191,36,0.6)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}

/* Active mobile menu */
.mobile-open .main-nav{display:flex; position:absolute; top:64px; left:0; right:0; padding:14px 20px; flex-direction:column; gap:8px; background:rgba(12,10,9,0.9); border-bottom:1px solid rgba(255,255,255,0.08)}