:root{
  --bg:#05050a;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.12);
  --a:#b34cff; --b:#ff4fd8; --c:#6c2bff;
  --shadow: 0 34px 140px rgba(0,0,0,.58);
  --radius: 20px;
  --blur: blur(18px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  overflow-x:hidden;
}
a{color:inherit}
.container{width:min(1240px, calc(100% - 52px)); margin:0 auto}
.cursor{
  position:fixed; left:0; top:0; width:18px; height:18px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.0) 55%);
  pointer-events:none; z-index:999; opacity:0; mix-blend-mode:screen;
}
.cursor::after{
  content:""; position:absolute; inset:-90px; border-radius:999px;
  background: radial-gradient(circle, rgba(179,76,255,.18), rgba(255,79,216,.10), rgba(108,43,255,0) 60%);
  filter: blur(2px);
}
.bg{position:fixed; inset:0; z-index:-4; overflow:hidden; background:var(--bg)}
.bg__img{position:absolute; inset:-40px; background-size:cover; background-position:center; transform:scale(1.03); filter:saturate(1.14) contrast(1.08) brightness(.92)}
.bg__img.alt{opacity:.55}
.bg__grad{
  position:absolute; inset:-20px;
  background:
    radial-gradient(980px 580px at 16% 14%, rgba(179,76,255,.26), transparent 62%),
    radial-gradient(980px 580px at 84% 18%, rgba(255,79,216,.18), transparent 62%),
    radial-gradient(1100px 700px at 50% 92%, rgba(108,43,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.54), rgba(0,0,0,.78));
}
.bg__bokeh{
  position:absolute; inset:0;
  background-image:url("/assets/img/bokeh_overlay.png");
  background-size:cover; background-position:center;
  opacity:.22; mix-blend-mode:screen; filter: blur(0.2px);
}
.bg__grain{
  position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
canvas#fx{position:absolute; inset:0; width:100%; height:100%; opacity:.62}
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter: var(--blur);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.20));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:46px; height:46px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px; object-fit:contain}
.brand b{display:block; font-weight:950; letter-spacing:.2px}
.brand span{display:block; color:var(--muted2); font-weight:780; font-size:.88rem; margin-top:2px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:850; font-size:.96rem}
.nav a:hover{color:var(--text)}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--text); text-decoration:none; font-weight:920;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn--primary{border:none; background: linear-gradient(90deg,var(--a),var(--b)); box-shadow:0 24px 90px rgba(179,76,255,.26)}
.btn--ghost{background:rgba(255,255,255,.06)}
.burger{display:none; width:46px; height:46px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); cursor:pointer}
.burger span{display:block; width:18px; height:2px; margin:4px auto; background:var(--text)}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.14);
  color:var(--muted); font-weight:860; font-size:.92rem
}
.kdot{width:10px; height:10px; border-radius:999px; background:linear-gradient(90deg,var(--b),var(--a)); box-shadow:0 0 0 0 rgba(179,76,255,.45); animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(179,76,255,.45)}70%{box-shadow:0 0 0 10px rgba(179,76,255,0)}100%{box-shadow:0 0 0 0 rgba(179,76,255,0)}}
.grad{background:linear-gradient(90deg,var(--b),var(--a),var(--c)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero{padding:72px 0 34px}
.grid{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:center}
h1{margin:18px 0 10px; font-size:clamp(2.35rem,4.8vw,4.35rem); line-height:1.02; letter-spacing:-.9px}
.lead{margin:0; color:var(--muted); font-size:1.08rem; line-height:1.78; max-width:66ch}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.panel{
  border-radius:22px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow);
  overflow:hidden; position:relative;
}
.panel::before{
  content:""; position:absolute; inset:-2px;
  background:
    radial-gradient(760px 360px at 18% 18%, rgba(255,79,216,.16), transparent 62%),
    radial-gradient(760px 360px at 84% 26%, rgba(179,76,255,.18), transparent 60%);
  pointer-events:none;
}
.panel__img{width:100%; display:block; filter:saturate(1.06) contrast(1.06)}
.panel__cap{display:flex; gap:10px; flex-wrap:wrap; padding:14px; position:relative}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); font-weight:920; color:var(--muted);
}
.pill b{color:var(--text)}
section{padding:74px 0}
.section--alt{
  background: rgba(0,0,0,.22);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px}
h2{margin:0; font-size:clamp(1.85rem,2.9vw,2.6rem); letter-spacing:-.6px}
.sub{margin:0; color:var(--muted); font-weight:760; line-height:1.6}
.cards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.card{
  padding:18px; border-radius:20px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  position:relative; overflow:hidden;
  box-shadow: 0 24px 78px rgba(0,0,0,.26);
}
.card::after{
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(620px 320px at 12% 12%, rgba(179,76,255,.18), transparent 62%),
    radial-gradient(620px 320px at 85% 30%, rgba(255,79,216,.14), transparent 62%);
  opacity:.95; pointer-events:none;
}
.icon{width:48px; height:48px; border-radius:18px; display:grid; place-items:center; background:rgba(179,76,255,.15); border:1px solid rgba(179,76,255,.22); font-size:1.2rem; position:relative}
.card h3{margin:10px 0 6px; font-size:1.05rem; position:relative}
.card p{margin:0; color:var(--muted); font-weight:740; line-height:1.65; position:relative}
.pricing{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.price{
  padding:20px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  position:relative; overflow:hidden;
}
.price.featured{border-color:rgba(179,76,255,.35); box-shadow:0 30px 120px rgba(179,76,255,.12)}
.price .badge{display:inline-flex; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.20); color:var(--muted); font-weight:860; font-size:.9rem}
.price h3{margin:10px 0 8px}
.amount{font-size:2rem; font-weight:980; letter-spacing:-.4px}
.unit{color:var(--muted2); font-weight:850; font-size:.95rem}
.list{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:var(--muted); font-weight:780}
.list li{display:flex; gap:10px; align-items:flex-start}
.tick{width:18px; height:18px; border-radius:6px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; margin-top:2px}
.steps{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.step{
  padding:18px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  display:flex; gap:14px; align-items:flex-start
}
.num{width:44px; height:44px; border-radius:16px; display:grid; place-items:center; font-weight:950; background:linear-gradient(90deg,var(--a),var(--b)); box-shadow:0 18px 60px rgba(179,76,255,.18)}
.step b{display:block}
.step small{color:var(--muted2); font-weight:800; display:block; margin-top:6px; line-height:1.5}
.media{border-radius:22px; border:1px solid rgba(255,255,255,.14); overflow:hidden; background:rgba(0,0,0,.22); box-shadow:var(--shadow)}
.media img{width:100%; display:block}
.faq{display:grid; gap:12px}
details{padding:16px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
summary{cursor:pointer; font-weight:920}
details p{margin:10px 0 0; color:var(--muted); font-weight:740; line-height:1.65}
.contact{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:grid; gap:8px; margin-top:12px}
label{color:var(--muted2); font-weight:860; font-size:.9rem}
input,textarea{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18); color:var(--text); font:inherit; font-weight:680; outline:none;
}
input:focus,textarea:focus{border-color:rgba(179,76,255,.45); box-shadow:0 0 0 5px rgba(179,76,255,.12)}
.honey{position:absolute; left:-9999px; opacity:0; height:0; width:0}
footer{padding:34px 0 42px; border-top:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.foot__left{display:flex; gap:12px; align-items:center}
.foot__left img{width:46px; height:46px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px; object-fit:contain}
.foot__links{display:flex; gap:14px; flex-wrap:wrap}
.foot__links a{color:var(--muted); text-decoration:none; font-weight:860}
.foot__links a:hover{color:var(--text)}
.store{display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06)}
.store img{width:22px; height:22px}
[data-reveal]{opacity:0; transform:translateY(12px); transition:opacity .95s ease, transform .95s ease}
.reveal{opacity:1!important; transform:translateY(0)!important}
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{position:absolute; left:24px; right:24px; top:74px; display:none; flex-direction:column; padding:14px;
       border-radius:18px; background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.12); backdrop-filter: var(--blur)}
  .nav.open{display:flex}
  .burger{display:block}
}

/* ULTRA CINEMA LAYER */
.cinema{position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden; mix-blend-mode:screen; opacity:.18}
.cinema img{position:absolute; inset:-60px; width:calc(100% + 120px); height:calc(100% + 120px); object-fit:cover;
  filter:saturate(1.35) contrast(1.10) brightness(.92); animation:cinemaFloat 18s ease-in-out infinite}
.cinema img:nth-child(2){animation-duration:24s; opacity:.72}
.cinema img:nth-child(3){animation-duration:30s; opacity:.55}
@keyframes cinemaFloat{0%{transform:scale(1.05)}50%{transform:scale(1.10) translate3d(-14px,10px,0)}100%{transform:scale(1.05)}}

/* ULTRA MOTION PACK */
.pt.pt--in{opacity:1}
.pt.pt--out{opacity:1}
.pt.pt--in .pt.pt--out }
to{transform:scaleX(0)}}
to{transform:scaleX(1)}}

.sbar{position:fixed; left:0; top:0; width:100%; height:3px; z-index:70; background:rgba(255,255,255,.06);}
.sbar__in{height:100%; width:100%; transform-origin:left; transform:scaleX(0);
background:linear-gradient(90deg, var(--a), var(--b)); box-shadow:0 0 16px rgba(190,120,255,.55)}

.mag{transition:transform .25s ease}
.tilt{position:relative; transform-style:preserve-3d; border-radius:22px; overflow:hidden}
.tilt::after{content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(460px 280px at var(--hx,50%) var(--hy,50%), rgba(220,160,255,.18), transparent 60%);
mix-blend-mode:screen; opacity:.9}

.reveal--in [data-stagger]{animation:stg .7s cubic-bezier(.2,.9,.2,1) both; animation-delay:var(--st,0ms)}
@keyframes stg{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .pt__glow,.cinema img{animation:none!important}
  .mag{transition:none}
}


/* OPTIM: anthracite pro layer (sober + premium) */
:root{
  --anthra-0:#0e0f13;
  --anthra-1:#14151b;
  --anthra-2:#1b1c24;
  --anthra-3:#242634;
  --glass: rgba(20,21,27,.62);
  --stroke: rgba(255,255,255,.10);
}
body{background: radial-gradient(1100px 700px at 18% 10%, rgba(140,70,210,.18), transparent 60%),
      radial-gradient(900px 600px at 88% 30%, rgba(90,40,160,.14), transparent 55%),
      linear-gradient(180deg, var(--anthra-0), #05050a 65%);}
.card,.panel,.media,.pricing__card{background: linear-gradient(180deg, rgba(24,26,34,.78), rgba(10,10,14,.72));
  border:1px solid var(--stroke);}
.nav a{color: rgba(255,255,255,.78);}
.nav a:hover{color:#fff;}
.btn--ghost{background:rgba(20,21,27,.48); border:1px solid rgba(255,255,255,.10);}
.btn--ghost:hover{background:rgba(30,32,42,.55);}
.section__head .lead{color: rgba(255,255,255,.70);}

/* OPTIM: disable scroll reveal animation */
[data-reveal]{opacity:1 !important; transform:none !important; filter:none !important}
.reveal--in [data-stagger]{animation:none !important}

/* OPTIM: cinema layer more subtle */
.cinema{opacity:.10 !important}

/* OPTIM: improved 3D hover (premium + sober) */
.tilt{will-change:transform; transition:transform .18s ease, filter .18s ease}
.tilt:hover{filter:brightness(1.03)}
.tilt::after{opacity:.75}
.media img,.panel__img,.heroSlides img{transform:translateZ(0); transition:transform .28s ease}
.tilt:hover .panel__img,.tilt:hover img{transform:scale(1.02)}

/* OPTIM: tilt v2 — smoother and more premium */
.tilt{transition:transform .16s ease, filter .16s ease}
.tilt::after{transition:opacity .16s ease}
.tilt:hover::after{opacity:.82}

/* LOGO SIZE FIX — premium branding */
.topbar .brand img{height:44px !important; width:auto !important;}
@media (max-width:640px){.topbar .brand img{height:38px !important;}}

/* BACKGROUND CLEANUP — remove double layer / blur */
.bg__img.alt{display:none !important;}
.bg__bokeh{opacity:.45 !important;}
.bg__grain{opacity:.14 !important;}
/* LOGO EPURE FIX — bigger + no box */
.topbar .brand{background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important}
.topbar .brand img{height:62px !important; width:auto !important; filter:drop-shadow(0 10px 28px rgba(0,0,0,.35))}
@media (max-width:640px){.topbar .brand img{height:52px !important;}}
/* CARD PRESS EFFECT — premium tactile feel */
.card, .gcard, .qcard, .game-card, .feature, .price, .tile { transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.card:hover, .gcard:hover, .qcard:hover, .game-card:hover, .feature:hover, .price:hover, .tile:hover { transform: translateY(-2px); filter: brightness(1.02); }
.card:active, .gcard:active, .qcard:active, .game-card:active, .feature:active, .price:active, .tile:active { transform: translateY(0) scale(.992); filter: brightness(0.995); }
@media (prefers-reduced-motion: reduce){ .card,.gcard,.qcard,.game-card,.feature,.price,.tile{transition:none} }