:root{
  --bg:#0a0a0c; --bg2:#141418; --bg3:#1b1b20;
  --line:#2a2a30;
  --text:#f3efe8; --muted:#9a99a2;
  --accent:#ff4b1f; --accent2:#ff8a4d;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --r-lg:26px; --r-md:16px; --r-sm:10px; --r-pill:999px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--safe-t); scroll-behavior:smooth}
html,body{height:100%}
:focus-visible{outline:2px solid var(--accent2); outline-offset:3px; border-radius:4px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; line-height:1.55;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark{font-family:'Rajdhani',system-ui,sans-serif}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
img{max-width:100%}

/* NAV */
header{
  position:fixed; top:var(--safe-t); left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:flex-end;
  padding:16px 24px; background:linear-gradient(180deg,rgba(10,10,12,.9),transparent);
}
.brand-logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:34px; display:block}
.brand-logo img{height:100%; width:auto; display:block}
#menu-btn{
  display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--line);
  color:var(--text); padding:9px 18px; border-radius:var(--r-pill); cursor:pointer; font-family:'Rajdhani';
  font-size:.95rem; letter-spacing:.08em; font-weight:600;
}
#menu-btn:hover{border-color:var(--accent)}
#menu-btn .bars{width:20px;height:14px;position:relative}
#menu-btn .bars span{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s ease,opacity .25s ease}
#menu-btn .bars span:nth-child(1){top:0} #menu-btn .bars span:nth-child(2){top:6px} #menu-btn .bars span:nth-child(3){top:12px}
body.menu-open #menu-btn .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open #menu-btn .bars span:nth-child(2){opacity:0}
body.menu-open #menu-btn .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

#menu-panel{
  position:fixed; inset:0; z-index:39; background:var(--bg2);
  display:flex; flex-direction:column; justify-content:center; padding:24px;
  transform:translateY(-100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
}
body.menu-open #menu-panel{transform:translateY(0)}
#menu-panel nav{display:flex; flex-direction:column; gap:6px; margin-bottom:40px}
#menu-panel nav a{font-family:'Rajdhani'; font-size:2.2rem; font-weight:600; text-decoration:none; padding:8px 0; border-bottom:1px solid var(--line); transition:color .25s ease, opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1); opacity:0; transform:translateY(14px)}
#menu-panel nav a:hover{color:var(--accent)}
body.menu-open #menu-panel nav a{opacity:1; transform:translateY(0)}
body.menu-open #menu-panel nav a:nth-child(1){transition-delay:.08s}
body.menu-open #menu-panel nav a:nth-child(2){transition-delay:.14s}
body.menu-open #menu-panel nav a:nth-child(3){transition-delay:.2s}
body.menu-open #menu-panel nav a:nth-child(4){transition-delay:.26s}
#menu-panel nav a[aria-current]{color:var(--accent2); border-color:var(--accent2)}
.menu-legal{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.85rem; color:var(--muted)}
.menu-legal a{text-decoration:none}
.menu-legal a:hover{color:var(--text)}

/* HERO */
.hero{min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:120px 0 60px}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(2.1rem,4.5vw,3.4rem); font-weight:600; line-height:1.12; margin:0 0 20px; max-width:16ch}
.hero p{color:var(--muted); max-width:44ch; margin:0 0 30px; font-size:1.05rem}
.btn{
  display:inline-block; background:var(--accent); color:#0a0a0c; text-decoration:none;
  font-weight:600; padding:14px 26px; border-radius:var(--r-pill); font-family:'Rajdhani'; letter-spacing:.03em;
  font-size:1.05rem; transition:background .3s ease, transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
  border:none; cursor:pointer;
}
.btn:hover{background:var(--accent2); transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,75,31,.28)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:none; border:1px solid var(--line); color:var(--text); margin-left:12px; box-shadow:none}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent2); background:none; box-shadow:none}

.gear-frame{
  position:relative; height:420px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(155deg,#1a1a1f,#0c0c0f 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -40px 70px rgba(0,0,0,.55),
             inset 0 0 0 1px #232328, 0 24px 60px rgba(0,0,0,.4);
}
.gear-frame::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px);
}
.gear-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 65% 30%, rgba(255,75,31,.14), transparent 55%);
}
.gear-frame .piece{
  position:absolute; top:50%; left:50%; width:58%; max-height:66%; object-fit:contain;
  transform:translate(-50%,-50%); opacity:0;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  animation:gearCycle 18s infinite cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
@keyframes gearCycle{
  0%,100%{opacity:0; transform:translate(-50%,-46%) scale(.94) rotate(-1.5deg)}
  3%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0)}
  13%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0)}
  17%{opacity:0; transform:translate(-50%,-54%) scale(.94) rotate(1.5deg)}
}

/* SECTIONS */
section.view{display:none}
section.view.active{display:block; animation:viewIn .5s cubic-bezier(.4,0,.2,1)}
@keyframes viewIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.section-pad{padding:90px 0}
.section-head{margin-bottom:44px; max-width:60ch; opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1)}
.section-head.in{opacity:1; transform:translateY(0)}
.section-head h2{font-size:2rem; font-weight:600; margin:0 0 12px}
.section-head p{color:var(--muted); margin:0}

.grid-guides{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px}
.card{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.4,0,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.card:hover{transform:translateY(-6px); border-color:#3a3a42; box-shadow:0 16px 34px rgba(0,0,0,.35)}
.card .cover{aspect-ratio:16/10; background:linear-gradient(135deg,var(--bg3),#0c0c0f); display:flex; align-items:center; justify-content:center; overflow:hidden}
.card .cover img{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.card:hover .cover img{transform:scale(1.06)}
.card .body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.tag{align-self:flex-start; font-size:.75rem; letter-spacing:.06em; color:var(--accent2); border:1px solid rgba(255,138,77,.35); padding:3px 10px; border-radius:20px}
.card h3{margin:0; font-size:1.25rem; font-weight:600}
.card .desc{color:var(--muted); font-size:.95rem; flex:1}
.card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.price{font-family:'Rajdhani'; font-weight:600; font-size:1.15rem}
.link-btn{background:none; border:1px solid var(--line); color:var(--text); padding:9px 18px; border-radius:var(--r-pill); cursor:pointer; font-family:'Rajdhani'; font-weight:600; text-decoration:none; font-size:.95rem; transition:border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.4,0,.2,1)}
.link-btn:hover{border-color:var(--accent); color:var(--accent2); transform:translateY(-2px)}

/* GUIDE DETAIL */
.guide-hero{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding-top:50px}
.guide-hero .cover{aspect-ratio:4/3; background:linear-gradient(135deg,var(--bg3),#0c0c0f); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; border-radius:var(--r-lg); overflow:hidden}
.guide-hero .price-box{background:var(--bg2); border:1px solid var(--line); padding:22px; margin-top:22px; border-radius:var(--r-md)}
.guide-hero .price-box .price{font-size:1.8rem}
.list-check{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.list-check li{padding-left:26px; position:relative; color:var(--muted)}
.list-check li::before{content:"›"; position:absolute; left:0; color:var(--accent); font-weight:700}
.games{display:flex; flex-wrap:wrap; gap:10px}
.games span{border:1px solid var(--line); padding:6px 14px; border-radius:20px; font-size:.85rem; color:var(--muted)}
.faq details{border-bottom:1px solid var(--line); padding:16px 0}
.faq summary{cursor:pointer; font-weight:600; font-family:'Rajdhani'; font-size:1.1rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted); margin:10px 0 0}
.stripe-note{font-size:.8rem; color:var(--muted); margin-top:8px}

/* LEGAL / SIMPLE PAGE */
.legal-body h2{margin-top:38px; font-size:1.3rem}
.legal-body p, .legal-body li{color:var(--muted)}
.placeholder{color:var(--accent2)}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:60px 0 40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
.foot-grid h4{font-family:'Rajdhani'; font-size:1rem; letter-spacing:.05em; margin:0 0 14px}
.foot-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.foot-grid a{text-decoration:none; color:var(--muted); font-size:.92rem}
.foot-grid a:hover{color:var(--accent2)}
.foot-bottom{margin-top:40px; color:var(--muted); font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* COOKIE BANNER */
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:calc(16px + var(--safe-b)); z-index:50;
  background:var(--bg2); border:1px solid var(--line); padding:18px 20px; max-width:520px;
  display:flex; flex-direction:column; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  border-radius:var(--r-md);
}
#cookie-banner p{margin:0; font-size:.88rem; color:var(--muted)}
#cookie-banner .actions{display:flex; gap:10px}
#cookie-banner button{font-size:.85rem; padding:9px 16px}

@media (max-width:820px){
  .hero .container{grid-template-columns:1fr}
  .gear-frame{height:260px; order:-1}
  .guide-hero{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}