/* =========================================================
   Casino Montréal — Wheel landing
   Кольори взяті з Figma.
   ========================================================= */

:root{
  --navy:      #001D40;
  --navy-2:    #0E4D9D;
  --pink:      #FA136C;
  --pink-2:    #F60076;
  --orange:    #F87038;
  --gold:      #FDF697;
  --white:     #FFFFFF;

  --grad-btn:  linear-gradient(90deg, #F60076 0%, #F87038 100%);
  --grad-bar:  linear-gradient(90deg, #F18942 0%, #E73088 100%);
  --font:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wheel-size: 630px;   /* десктоп — за макетом */
  --orbit-size: 900px;   /* більші іконки — трохи ширша орбіта, щоб не лізли на обід */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  overflow:hidden;
  background:var(--navy);
  font-family:var(--font);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

img{ display:block; max-width:100%; user-select:none; -webkit-user-drag:none; pointer-events:none; }

/* ---------------------------------------------------------
   BACKGROUND
   --------------------------------------------------------- */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--navy); }

.bg__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.9;
  transform:scale(1.06);
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{ from{ transform:scale(1.06);} to{ transform:scale(1.14) translateY(-1%);} }

.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(75% 65% at 50% 45%, rgba(14,77,157,.55) 0%, rgba(0,29,64,.55) 55%, rgba(0,14,34,.92) 100%);
}

.bg__shapes{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  animation:shapesPulse 9s ease-in-out infinite;
}
@keyframes shapesPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03);} }

.bg__confetti{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.9;
  animation:confDrift 14s ease-in-out infinite alternate;
}
@keyframes confDrift{ from{ transform:translateY(-1.5%) scale(1.02);} to{ transform:translateY(1.5%) scale(1.05);} }

.confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---------------------------------------------------------
   PRELOADER
   --------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-hidden{ opacity:0; visibility:hidden; }

.loader__inner{ display:grid; justify-items:center; gap:38px; width:min(84vw,460px); }

.loader__logo{
  width:min(66vw,340px);
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.6));
  animation:logoIn .9s cubic-bezier(.2,.9,.25,1.2) both, logoPulse 2.6s ease-in-out 1s infinite;
}
@keyframes logoIn{ from{ opacity:0; transform:scale(.8) translateY(16px);} to{ opacity:1; transform:none;} }
@keyframes logoPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} }

.loader__bar{
  position:relative;
  width:100%; height:34px;
  padding:1px;
  border:3px solid #2E7BD6;
  border-radius:999px;
  background:
    repeating-linear-gradient(115deg,
      #FFFFFF 0 12px,
      #E4E9EF 12px 24px);
  box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 2px 4px rgba(0,0,0,.18);
  overflow:hidden;
  animation:dropIn .6s ease .2s both;
}
/* Градієнт зафіксований на всю ширину смуги, а показуємо його через clip-path.
   Так колір не «стискається» і нічого не мигає — просто рівний рух зліва направо. */
.loader__fill{
  position:absolute; inset:1px;
  border-radius:999px;
  background:var(--grad-btn);
  clip-path:inset(0 100% 0 0);      /* JS зменшує праву відсічку */
}

/* ---------------------------------------------------------
   STAGE
   --------------------------------------------------------- */
.stage{
  position:relative; z-index:10;
  height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:14px;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease .1s, visibility .6s ease .1s;
}
.stage.is-visible{ opacity:1; visibility:visible; }

.stage__logo{
  position:absolute; top:18px; left:24px; z-index:14;
  width:clamp(90px,10vw,150px);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));
  animation:dropIn .7s cubic-bezier(.2,.9,.25,1.2) .2s both;
}

.head{ text-align:center; }
.head__sub{
  font-size:clamp(16px,2.1vw,30px); font-weight:700; letter-spacing:.06em;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
  animation:dropIn .7s cubic-bezier(.2,.9,.25,1.2) .3s both;
}
.head__main{
  font-size:clamp(32px,5.4vw,72px); font-weight:900; font-style:italic;
  line-height:1.05;
  text-shadow:0 5px 22px rgba(0,0,0,.7);
  animation:dropIn .7s cubic-bezier(.2,.9,.25,1.2) .45s both;
}
@keyframes dropIn{ from{ opacity:0; transform:translateY(-22px) scale(.94);} to{ opacity:1; transform:none;} }

/* ---------------------------------------------------------
   SCENE / WHEEL
   --------------------------------------------------------- */
.scene{
  position:relative; width:100%; max-width:1180px;
  flex:1 1 auto; display:grid; place-items:center; min-height:0;
}

.wheel-wrap{
  position:relative; z-index:5;
  width:var(--wheel-size); height:var(--wheel-size);
  display:grid; place-items:center;
  animation:wheelIn 1s cubic-bezier(.2,.9,.25,1.2) .5s both;
}
@keyframes wheelIn{ from{ opacity:0; transform:scale(.6) rotate(-25deg);} to{ opacity:1; transform:none;} }

/* мʼяке золоте гало навколо колеса */
.wheel-glow{
  position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,200,80,.85) 34%,
    rgba(255,150,40,.45) 46%,
    rgba(250,19,108,.25) 58%,
    transparent 70%);
  filter:blur(14px);
  animation:glowPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{ 0%,100%{ transform:scale(.96); opacity:.65;} 50%{ transform:scale(1.06); opacity:1;} }

/* золоті іскри-дуги з макета — ПОВЕРХ колеса, повільно обертаються */
/* ядро дуги в PNG сидить на 0.717 від пів-розміру; 157% виводить його на новий, ширший обід */
.wheel-light{
  position:absolute; inset:-28.5%;
  width:157%; height:157%;
  max-width:none;
  z-index:5;                       /* вище диска, нижче стрілки */
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:screen;
  animation:lightSpin 9s linear infinite, lightPulse 2.2s ease-in-out infinite;
}
@keyframes lightSpin{ to{ transform:rotate(360deg);} }
@keyframes lightPulse{ 0%,100%{ opacity:.8;} 50%{ opacity:1;} }

/* під час спіну іскри крутяться швидше */
.wheel.is-spinning ~ .wheel-light{ animation:lightSpin 1.6s linear infinite, lightPulse 1s ease-in-out infinite; }

.wheel{
  position:relative; width:100%; height:100%;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--white);
  /* золотий кант + широкий рожевий обід, як у макеті */
  box-shadow:
    0 22px 60px rgba(0,0,0,.6),
    0 0 0 9px #EFC559,
    0 0 0 30px var(--pink),
    0 0 46px 10px rgba(255,190,70,.55);
}

.wheel__disc{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:50%;
  transform:rotate(0deg);
  will-change:transform;
}
.wheel:not(.is-spinning) .wheel__disc{ animation:wobble 5s ease-in-out infinite; }
@keyframes wobble{ 0%,100%{ transform:rotate(-1.2deg);} 50%{ transform:rotate(1.2deg);} }

.wheel__hub{
  position:relative; z-index:3;
  width:30%; height:30%;
  border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #17418C, #001D40);
  display:grid; place-items:center;
  padding:6%;
  box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 0 5px var(--white);
}
.wheel__hub img{ width:100%; }

/* Пін: більший і «лежить» на колесі — вістря заходить у сектор,
   основа перекриває обід (як у макеті). */
.wheel__pointer{
  position:absolute; top:-5.5%; left:50%; z-index:6;
  width:18%;
  transform:translateX(-50%);
  transform-origin:50% 0%;          /* хитається від основи, вістря не відривається */
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
  animation:pointerTick 2.4s ease-in-out infinite;
}
@keyframes pointerTick{ 0%,100%{ transform:translateX(-50%) rotate(0);} 50%{ transform:translateX(-50%) rotate(-6deg);} }

/* під час спіну пін «клацає» частіше */
.wheel.is-spinning + .wheel-light + .wheel__pointer,
.wheel.is-spinning ~ .wheel__pointer{ animation:pointerTick .18s ease-in-out infinite; }

/* ---------------------------------------------------------
   ORBIT — іконки ігор навколо колеса
   --------------------------------------------------------- */
.orbit{
  position:absolute;
  width:var(--orbit-size); height:var(--orbit-size);
  animation:orbitSpin 36s linear infinite;
  pointer-events:none;
}
@keyframes orbitSpin{ to{ transform:rotate(360deg);} }

.orbit__item{
  position:absolute; top:50%; left:50%;
  width:18%; height:18%;
  margin:-9% 0 0 -9%;
  transform:rotate(var(--a)) translateY(calc(var(--orbit-size) / -2)) rotate(calc(var(--a) * -1));
}
.orbit__item i{ display:block; width:100%; height:100%; animation:orbitCounter 36s linear infinite; }
@keyframes orbitCounter{ to{ transform:rotate(-360deg);} }

.orbit__item img{
  width:100%; height:100%; object-fit:contain;
  animation:iconPulse 2s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes iconPulse{
  0%,100%{ transform:scale(.85); filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) brightness(.9); }
  50%    { transform:scale(1.15); filter:drop-shadow(0 8px 22px rgba(250,19,108,.7)) brightness(1.12); }
}

/* ---------------------------------------------------------
   PEOPLE
   --------------------------------------------------------- */
/* Люди «прибиті» до нижніх кутів. Жодних вертикальних зсувів угору —
   інакше зʼявляється рівний зріз знизу. «Дихають» масштабом від нижньої точки,
   плюс запас -2% нижче краю екрана. */
.person{
  position:absolute; bottom:-8vh; z-index:1;   /* зріз PNG іде за нижній край екрана */
  height:min(98vh, 1020px); width:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
  transform-origin:50% 100%;
  will-change:transform;
}
.person--l{ left:0;  animation:personInL .9s cubic-bezier(.2,.9,.25,1.2) .55s both, swayL 5s ease-in-out 1.6s infinite; }
.person--r{ right:0; animation:personInR .9s cubic-bezier(.2,.9,.25,1.2) .65s both, swayR 5.6s ease-in-out 1.8s infinite; }

@keyframes personInL{ from{ opacity:0; transform:translateX(-70px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes personInR{ from{ opacity:0; transform:translateX(70px)  scale(.96);} to{ opacity:1; transform:none;} }

@keyframes swayL{ 0%,100%{ transform:scale(1);}      50%{ transform:scale(1.018); } }
@keyframes swayR{ 0%,100%{ transform:scale(1);}      50%{ transform:scale(1.022); } }

.stage.is-spinning .person--l{ animation:cheerL .5s ease-in-out infinite; }
.stage.is-spinning .person--r{ animation:cheerR .5s ease-in-out infinite; }
@keyframes cheerL{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045); } }
@keyframes cheerR{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);  } }

/* ---------------------------------------------------------
   CHIPS
   --------------------------------------------------------- */
.chip{ position:absolute; z-index:6; width:110px; filter:drop-shadow(0 12px 26px rgba(0,0,0,.6)); }
.float{ animation:floatY 6s ease-in-out infinite; }
@keyframes floatY{
  0%,100%{ transform:translateY(0)     rotate(-7deg); }
  50%    { transform:translateY(-28px) rotate(7deg);  }
}
.chip--1{ left:1%;  top:8%;    width:120px; animation-duration:5.2s; }
.chip--2{ left:6%;  bottom:2%; width:150px; animation-duration:7s;   animation-delay:.6s; }
.chip--3{ right:2%; top:6%;    width:130px; animation-duration:6.4s; animation-delay:.3s; }
.chip--4{ right:5%; bottom:4%; width:110px; animation-duration:5.8s; animation-delay:.9s; }
.chip--5{ left:24%; top:2%;    width:70px;  animation-duration:6.8s; animation-delay:1.2s; }
.chip--6{ right:23%;bottom:1%; width:80px;  animation-duration:6.1s; animation-delay:.4s; }

.chip--l1{ left:9%;  bottom:16%; width:140px; }
.chip--l2{ right:8%; top:16%;    width:110px; animation-delay:.8s; }
.chip--l3{ right:20%;bottom:12%; width:80px;  animation-delay:1.4s; }

.chip--m1{ left:-6%;  bottom:14%; width:120px; }
.chip--m2{ right:-4%; top:20%;    width:100px; animation-delay:.7s; }

/* ---------------------------------------------------------
   FLARE + SHOCKWAVE
   --------------------------------------------------------- */
.flare{
  position:absolute; z-index:7;
  width:200%; height:200%;
  object-fit:contain; opacity:0; pointer-events:none;
  mix-blend-mode:screen;
}
.flare.is-burst{ animation:flareBurst 1.3s ease-out forwards; }
@keyframes flareBurst{
  0%  { opacity:0; transform:scale(.25) rotate(0);}
  28% { opacity:1; transform:scale(1.1) rotate(25deg);}
  100%{ opacity:0; transform:scale(1.5) rotate(65deg);}
}

.shockwave{
  position:absolute; z-index:6;
  width:100%; height:100%;
  border-radius:50%;
  border:6px solid rgba(253,246,151,.95);
  opacity:0; pointer-events:none;
}
.shockwave.is-burst{ animation:shock .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes shock{
  0%  { opacity:.95; transform:scale(.7); border-width:16px; }
  100%{ opacity:0;   transform:scale(2.5); border-width:1px; }
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  position:relative; z-index:12;
  display:inline-grid; place-items:center;
  border:0; cursor:pointer;
  font-family:var(--font); font-weight:800; letter-spacing:.08em;
  color:var(--white); text-decoration:none;
  background:var(--grad-btn);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(250,19,108,.5), inset 0 -3px 0 rgba(0,0,0,.2);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn::after{
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg);
  animation:shine 2.6s ease-in-out infinite;
}
@keyframes shine{ 0%{ left:-60%;} 55%,100%{ left:130%;} }
.btn:active{ transform:scale(.96); }

.btn--spin{
  width:min(82vw,400px); height:82px; font-size:34px;
  border-radius:16px;
  animation:btnPop .7s cubic-bezier(.2,.9,.25,1.2) .8s both, btnPulse 1.6s ease-in-out 1.6s infinite;
}
@keyframes btnPop{ from{ opacity:0; transform:translateY(26px) scale(.9);} to{ opacity:1; transform:none;} }
@keyframes btnPulse{
  0%,100%{ transform:scale(1);    box-shadow:0 10px 30px rgba(250,19,108,.5); }
  50%    { transform:scale(1.055); box-shadow:0 14px 44px rgba(250,19,108,.85); }
}
.btn--spin.is-disabled{ pointer-events:none; filter:grayscale(.5) brightness(.8); animation:none; }

.btn--cta{
  width:min(72%,300px); height:58px; font-size:20px; margin-top:16px;
  animation:btnPulse 1.4s ease-in-out infinite;
}

.attempts{
  margin-top:10px; font-size:14px; font-weight:600; opacity:.9;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.attempts b{ color:var(--gold); }

/* ---------------------------------------------------------
   WIN MODAL
   --------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.modal.is-open{ opacity:1; visibility:visible; }

.modal__backdrop{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 45%, rgba(14,77,157,.55) 0%, rgba(0,14,34,.94) 100%);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal__confetti{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
}
.modal.is-open .modal__confetti{ animation:confIn .8s ease .2s forwards; }
@keyframes confIn{ from{ opacity:0; transform:scale(1.1);} to{ opacity:1; transform:scale(1);} }

.confetti--modal{ position:absolute; inset:0; z-index:1; }

.modal__box{
  position:relative; z-index:2;
  width:min(92vw,600px);
  padding:26px 22px 34px;
  text-align:center;
  transform:scale(.7); opacity:0;
}
.modal.is-open .modal__box{ animation:boxIn .7s cubic-bezier(.2,.9,.25,1.35) .1s forwards; }
@keyframes boxIn{ to{ transform:scale(1); opacity:1; } }

.modal__logo{ width:190px; margin:0 auto 14px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.65)); }

.modal__title{
  display:grid;
  font-size:clamp(50px,11vw,104px); font-weight:900; font-style:italic; line-height:.9;
  text-shadow:0 8px 0 rgba(0,0,0,.22), 0 16px 44px rgba(0,0,0,.65);
}
.modal__title span{ display:block; opacity:0; }
.modal.is-open .modal__title span:nth-child(1){ animation:titlePop .55s cubic-bezier(.2,.9,.25,1.5) .35s forwards; }
.modal.is-open .modal__title span:nth-child(2){ animation:titlePop .55s cubic-bezier(.2,.9,.25,1.5) .5s forwards; }
@keyframes titlePop{
  0%  { opacity:0; transform:scale(.4) rotate(-8deg); }
  70% { opacity:1; transform:scale(1.13) rotate(2deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}

.modal__panel{
  margin-top:22px; padding:24px 18px 28px;
  border:2px solid rgba(255,255,255,.4);
  border-radius:18px;
  background:rgba(0,29,64,.4);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
}
.modal.is-open .modal__panel{ animation:panelIn .5s ease .65s forwards; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.modal__prize{
  font-size:clamp(22px,4.6vw,38px); font-weight:800;
  text-shadow:0 4px 16px rgba(0,0,0,.65);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
/* колесо не має «з'їдати» невисокі екрани */
@media (max-height:900px){ :root{ --wheel-size:520px; --orbit-size:750px; } }
@media (max-height:800px){ :root{ --wheel-size:450px; --orbit-size:650px; } }

@media (max-width:1400px){
  .person{ height:min(88vh, 900px); bottom:-7vh; }
}

@media (max-width:1100px){
  :root{ --wheel-size:400px; --orbit-size:590px; }
  .person{ height:min(70vh, 700px); bottom:-6vh; }
  .chip{ width:80px !important; }
}

/* =========================  MOBILE  ========================= */
@media (max-width:620px){
  :root{
    --wheel-size: min(320px, 80vw);   /* колесо суттєво більше */
    --orbit-size: min(430px, 107vw);  /* іконки ближче до обода */
  }

  .stage{ gap:0; padding:8px 8px 16px; justify-content:flex-start; }
  .stage__logo{ position:static; margin:4px auto 6px; width:126px; }
  .head{ padding-top:0; }
  .head__sub{ font-size:15px; }
  .head__main{ font-size:26px; }

  .scene{ margin-top:6vh; }

  /* на мобілці — тільки дівчина, на передньому плані */
  .person--r{ display:none; }
  .person--l{
    left:-16%; bottom:-2vh;
    height:48vh;
    z-index:9;                      /* передній план: поверх колеса, іконок і фішок */
  }

  /* іконки ігор — більші */
  .orbit__item{ width:21%; height:21%; margin:-10.5% 0 0 -10.5%; }

  .chip{ width:56px !important; }
  .chip--5,.chip--6{ display:none; }
  .chip--1{ left:2%;  top:4%; }
  .chip--3{ right:2%; top:2%; }
  .chip--4{ right:2%; bottom:14%; }

  .wheel{
    box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 6px #EFC559, 0 0 0 18px var(--pink),
               0 0 26px 5px rgba(255,190,70,.5);
  }
  .wheel__pointer{ width:21%; top:-5%; }

  .loader__bar{ height:28px; border-width:2px; }

  .btn--spin{ width:min(86vw,340px); height:66px; font-size:28px; margin-top:auto; }
  .attempts{ margin-top:8px; font-size:13px; }

  .modal__logo{ width:140px; }
  .btn--cta{ height:52px; font-size:18px; }
}

/* невисокі телефони */
@media (max-height:720px) and (max-width:620px){
  :root{ --wheel-size:min(280px,74vw); --orbit-size:min(375px,100vw); }
  .head__main{ font-size:24px; }
  .stage__logo{ width:104px; margin-bottom:2px; }
  .scene{ margin-top:3vh; }
  .person--l{ height:43vh; }
  .attempts{ display:none; }
  .btn--spin{ height:60px; font-size:25px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ===== Canada 649 mobile-first rebuild ===== */
:root{--navy:#062B5C;--navy-2:#0B4EA2;--pink:#D71920;--pink-2:#D71920;--orange:#F04444;--grad-btn:linear-gradient(90deg,#D71920,#F04444);--grad-bar:linear-gradient(90deg,#0B4EA2,#D71920);--wheel-size:clamp(360px,42vh,560px);--orbit-size:clamp(520px,60vh,760px)}
html,body{min-height:100%;background:#062B5C}
.bg{background:linear-gradient(160deg,#062B5C,#0B4EA2 58%,#041A37)}
.bg__img{opacity:.13;filter:hue-rotate(155deg) saturate(.5)}
.bg__vignette{background:radial-gradient(70% 65% at 50% 44%,rgba(255,255,255,.08),rgba(11,78,162,.16) 45%,rgba(3,18,40,.9) 100%)}
.bg__shapes,.person,.chip{display:none!important}
.stage{height:100dvh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow:hidden}
.hero-top{width:min(100%,1100px);margin:0 auto;flex:0 0 auto;position:relative;z-index:15}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:88px}
.stage__logo{position:static;width:clamp(120px,14vw,190px);margin:0;filter:drop-shadow(0 5px 15px rgba(0,0,0,.45));animation:none;flex:0 0 auto}
.lang-switch{display:flex;gap:6px;padding:5px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);border-radius:999px;backdrop-filter:blur(7px);flex:0 0 auto}
.lang{border:0;background:transparent;color:#fff;font:800 13px var(--font);padding:8px 12px;border-radius:999px;cursor:pointer}.lang.is-active{background:#fff;color:#0B4EA2}
.head{width:100%;text-align:center;padding:2px 12px 0}.head__sub{font-size:clamp(16px,2vw,27px);font-weight:700;letter-spacing:.035em;line-height:1.2}.head__main{font-size:clamp(34px,5vw,68px);font-style:normal;line-height:1.02;margin-top:5px;text-wrap:balance}.trust{font-size:12px;font-weight:600;opacity:.66;margin-top:8px;line-height:1.3}
.scene{width:100%;max-width:1180px;min-height:0;flex:1 1 auto;margin:4px auto 0;display:grid;place-items:center;overflow:visible}
.wheel-wrap{width:var(--wheel-size);height:var(--wheel-size)}
.wheel{box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 7px #E6EBF0,0 0 0 17px #0B4EA2,0 0 32px 8px rgba(255,255,255,.12)}
.wheel__hub{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 5px #DDE4EC;padding:5%}.wheel__hub img{width:100%}
.wheel__pointer{filter:hue-rotate(145deg) saturate(1.2) drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.orbit__item{width:12%;height:12%;margin:-6% 0 0 -6%}.lotto-ball{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#fff,#dfe6ee);color:#0B4EA2;border:4px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.34);font-weight:900;font-size:clamp(17px,2vw,29px);animation:iconPulse 2.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes iconPulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}
.cta-zone{flex:0 0 auto;width:100%;display:grid;justify-items:center;gap:5px;padding-top:4px;position:relative;z-index:20}.btn{box-shadow:0 10px 30px rgba(215,25,32,.35),inset 0 -3px 0 rgba(0,0,0,.2)}.btn--spin{width:min(460px,82vw);height:64px;border-radius:999px;border:3px solid rgba(255,255,255,.75);font-size:28px;margin:0}.attempts{margin:0;font-size:12px}.attempts b{color:#FFD54A}.responsible{font-size:9px;opacity:.5;text-align:center;line-height:1.25;max-width:640px}.legal{position:fixed;z-index:70;left:50%;bottom:max(2px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(94vw,880px);font:500 7px/1.2 var(--font);text-align:center;color:rgba(255,255,255,.35);pointer-events:none}.loader__logo{width:min(56vw,300px)}.modal__backdrop{background:radial-gradient(70% 60% at 50% 45%,rgba(11,78,162,.72),rgba(2,17,38,.96))}.modal__title{font-style:normal}.modal__micro{font-size:13px;opacity:.72;margin-top:8px;line-height:1.4}

/* Phones: topbar is IN NORMAL FLOW so logo/title can never overlap. */
@media (max-width:620px){
  :root{--wheel-size:min(69vw,315px);--orbit-size:min(94vw,430px)}
  .stage{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .hero-top{width:100%}.topbar{min-height:76px;padding:0 4px}.stage__logo{width:112px}.lang-switch{padding:4px}.lang{font-size:12px;padding:7px 11px}
  .head{padding:0 14px}.head__sub{font-size:14px;line-height:1.18}.head__main{font-size:clamp(25px,7.2vw,34px);line-height:1.03;margin-top:3px}.trust{font-size:9px;margin-top:5px}
  .scene{margin-top:2px;min-height:0}.orbit__item{width:15%;height:15%;margin:-7.5% 0 0 -7.5%}.lotto-ball{font-size:17px;border-width:3px}
  .btn--spin{width:min(88vw,360px);height:58px;font-size:25px}.attempts{font-size:11px}.responsible{font-size:8px}.legal{font-size:6px}
}
@media (max-width:380px){
  :root{--wheel-size:min(66vw,285px);--orbit-size:min(91vw,390px)}
  .topbar{min-height:68px}.stage__logo{width:96px}.lang{font-size:11px;padding:6px 9px}.head{padding:0 8px}.head__sub{font-size:12px}.head__main{font-size:24px}.trust{font-size:8px}.lotto-ball{font-size:15px}.btn--spin{height:54px;font-size:22px}
}
@media (max-width:620px) and (max-height:760px){
  :root{--wheel-size:min(62vw,275px);--orbit-size:min(84vw,370px)}
  .topbar{min-height:60px}.stage__logo{width:90px}.head__sub{font-size:11px}.head__main{font-size:22px}.trust{display:none}.scene{margin-top:0}.btn--spin{height:50px;font-size:21px}.attempts{font-size:9px}.responsible{font-size:7px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
  :root{--wheel-size:min(54vh,240px);--orbit-size:min(77vh,330px)}
  .stage{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(280px,1.1fr);grid-template-rows:1fr auto;column-gap:18px;align-items:center;justify-items:center;padding-top:max(8px,env(safe-area-inset-top))}
  .hero-top{grid-column:1;grid-row:1;width:100%;align-self:center}.topbar{min-height:52px}.stage__logo{width:82px}.lang{font-size:9px;padding:5px 7px}.head{text-align:left;padding:0}.head__sub{font-size:10px}.head__main{font-size:clamp(22px,4vw,34px);line-height:1}.trust{font-size:7px;margin-top:4px}
  .scene{grid-column:2;grid-row:1 / span 2;margin:0;height:100%}.orbit__item{width:14%;height:14%;margin:-7% 0 0 -7%}.lotto-ball{font-size:12px;border-width:2px}
  .cta-zone{grid-column:1;grid-row:2;align-self:end}.btn--spin{width:min(34vw,270px);height:44px;font-size:18px}.attempts{font-size:9px}.responsible{font-size:6px}.legal{display:none}
}

/* =========================================================
   PL-ТЕМА — дописано поверх базових стилів.
   Уся палітра лендінга живе тут: синій + золото.
   ========================================================= */
:root{
  --navy:      #06204F;
  --navy-2:    #0B3F9E;
  --gold:      #FFE07A;
  --gold-deep: #C9962B;

  --grad-btn:  linear-gradient(180deg, #FFF3B0 0%, #F3C544 42%, #C9962B 100%);
  --grad-bar:  linear-gradient(90deg, #C9962B 0%, #FFE07A 50%, #FFF3B0 100%);
}

/* колесо тепер SVG, а не картинка */
.wheel__disc{ display:block; overflow:visible; }
.wheel__bulb{ animation:bulbBlink 1.4s ease-in-out infinite; transform-origin:center; }
@keyframes bulbBlink{
  0%,100%{ opacity:1;   filter:drop-shadow(0 0 7px #FFE07A); }
  50%    { opacity:.35; filter:drop-shadow(0 0 2px #C9962B); }
}

/* кнопки — золото, текст темно-синій */
.btn--spin, .btn--cta{
  background:var(--grad-btn);
  color:#06204F;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  border:2px solid #FFF3B0;
}
@keyframes btnPulse{
  0%,100%{ transform:scale(1);     box-shadow:0 10px 30px rgba(255,224,122,.45); }
  50%    { transform:scale(1.055); box-shadow:0 14px 44px rgba(255,224,122,.85); }
}

/* заголовок як на макеті — білий із золотим обрисом */
.head__main{
  color:#FFFFFF;
  text-shadow:0 3px 0 #C9962B, 0 6px 18px rgba(0,0,0,.6);
}
.head__sub{ color:var(--gold); }

.loader__logo, .stage__logo, .modal__logo{ width:min(58vw,250px); height:auto; }
.legal{ font-size:11px; opacity:.72; }

/* кульки орбіти не мають налізати на золотий обід */
@media (max-width:560px){ :root{ --orbit-size:min(104vw,472px); } }
@media (max-width:420px){ :root{ --orbit-size:min(101vw,430px); } }

/* «ODBLOKOWANY!» довше за англійське «UNLOCKED!» — тримаємо в межах екрана */
.modal__title{ font-size:clamp(34px,8.2vw,74px); }
.modal__title span{ white-space:nowrap; }
.modal__box{ max-width:min(94vw,560px); margin-inline:auto; }

/* =========================================================
   Диск-обгортка: крутиться div, SVG усередині просто лежить.
   У SVG немає offsetWidth, тому форс-рефлоу на ньому не працював
   і колесо стрибало замість обертання.
   ========================================================= */
.wheel__disc{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:50%;
  transform:rotate(0deg);
  will-change:transform;
}
.wheel__art{ display:block; width:100%; height:100%; overflow:visible; }

/* =========================================================
   АДАПТИВ: колесо прив'язане і до ширини, і до висоти екрана,
   тому ні заголовок, ні кнопка на нього не налазять.
   ========================================================= */
:root{
  --wheel-size: min(58vw, 44vh, 500px);
  --orbit-size: calc(var(--wheel-size) * 1.40);
}
@media (min-width:900px){
  :root{ --wheel-size: min(42vw, 46vh, 520px); --orbit-size: calc(var(--wheel-size) * 1.42); }
  .head__main{ font-size:clamp(30px,3.6vw,56px); }
  .head__sub{ font-size:clamp(14px,1.5vw,22px); }
  .btn--spin{ width:min(420px,38vw); height:clamp(54px,7vh,70px); font-size:clamp(20px,2.2vw,28px); }
}
@media (max-width:620px){
  :root{ --wheel-size: min(76vw, 42vh, 340px); --orbit-size: calc(var(--wheel-size) * 1.38); }
  .btn--spin{ width:min(88vw,420px); height:clamp(52px,7.6vh,64px); font-size:clamp(19px,5.6vw,26px); }
  .head__main{ font-size:clamp(22px,6.6vw,32px); }
}
/* низькі вікна (ноут з розгорнутою консоллю) — тиснемо все разом */
@media (max-height:700px){
  :root{ --wheel-size: min(52vw, 40vh, 380px); }
  .trust{ display:none; }
  .responsible{ font-size:8px; }
}

/* низ екрана: дисклеймер 18+ і юридичний рядок не мають накладатися */
.cta-zone{ padding-bottom:30px; }
.legal{ bottom:3px; font-size:8px; line-height:1.25; }
@media (max-width:620px){
  .cta-zone{ padding-bottom:34px; gap:6px; }
  .responsible{ font-size:9px; line-height:1.3; max-width:92vw; }
  .legal{ font-size:7px; width:94vw; }
  /* кульки не мають зрізатися краєм екрана */
  :root{ --orbit-size: calc(var(--wheel-size) * 1.34); }
  .orbit__item{ width:13.5%; height:13.5%; margin:-6.75% 0 0 -6.75%; }
}

/* десктоп: кульки не мають лізти під заголовок */
@media (min-width:900px){
  :root{ --wheel-size: min(34vw, 41vh, 440px); --orbit-size: calc(var(--wheel-size) * 1.30); }
  .orbit__item{ width:11%; height:11%; margin:-5.5% 0 0 -5.5%; }
  .scene{ padding-top:14px; }
  .trust{ margin-top:10px; }
}

/* дуже низький екран (телефон у горизонталі) — тиснемо шапку */
@media (max-height:600px){
  :root{ --wheel-size: min(44vw, 58vh, 300px); --orbit-size: calc(var(--wheel-size) * 1.30); }
  .head__sub{ display:none; }
  .head__main{ font-size:clamp(18px,3.4vh,26px); }
  .topbar{ min-height:52px; }
  .stage__logo, .loader__logo{ width:min(34vw,150px); }
  .cta-zone{ padding-bottom:22px; }
  .btn--spin{ height:48px; font-size:19px; }
}

/* ступиця: логотип у центрі колеса, не обертається разом із диском */
.wheel__hub{
  position:absolute; top:50%; left:50%;
  width:27%; height:27%;
  transform:translate(-50%,-50%);
  z-index:4;
  display:grid; place-items:center;
  border-radius:50%;
  background:none; box-shadow:none; padding:0;
  pointer-events:none;
}
.wheel__hub img{
  width:88%; height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* =========================================================
   ФОН ЯК НА МАКЕТІ: насичений синій + промені з центру + монети zł
   ========================================================= */
.bg{ background:#07255E; }
.bg__img{ opacity:.55; }

.bg__rays{
  position:absolute; left:50%; top:42%;
  width:220vmax; height:220vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(104,170,255,.16) 0deg 5deg,
    rgba(104,170,255,0)   5deg 14deg);
  animation:raysSpin 70s linear infinite;
  pointer-events:none;
}
@keyframes raysSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.bg__vignette{
  background:radial-gradient(72% 62% at 50% 44%,
    rgba(26,92,200,.42) 0%, rgba(8,42,104,.62) 52%, rgba(3,16,42,.94) 100%);
}

.bg__coins{ position:absolute; inset:0; pointer-events:none; }
.coin{
  position:absolute; width:clamp(42px,9vw,96px);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  animation:coinFloat 7s ease-in-out infinite;
}
@keyframes coinFloat{
  0%,100%{ transform:translateY(0)    rotate(var(--r,0deg)); }
  50%    { transform:translateY(-14px) rotate(calc(var(--r,0deg) + 6deg)); }
}
.coin--1{ top:14%;  left:4%;   --r:-18deg; animation-delay:0s;   }
.coin--2{ top:30%;  right:3%;  --r:14deg;  animation-delay:.8s;  }
.coin--3{ bottom:22%; left:6%;  --r:22deg;  animation-delay:1.6s; }
.coin--4{ bottom:13%; right:7%; --r:-12deg; animation-delay:2.4s; }
.coin--5{ top:6%;   right:22%; --r:8deg;   animation-delay:3.2s; width:clamp(32px,6vw,68px); }
.coin--6{ bottom:5%; left:26%; --r:-26deg; animation-delay:4s;   width:clamp(32px,6vw,68px); }

/* логотип у ступиці — трохи більший */
.wheel__hub{ width:30%; height:30%; }
.wheel__hub img{ width:96%; }

/* доведення фону */
.bg__rays{
  background:repeating-conic-gradient(from 0deg,
    rgba(120,180,255,.24) 0deg 4.5deg,
    rgba(120,180,255,0)   4.5deg 13deg);
}
.coin--6{ bottom:36%; left:2%; }          /* не лізе на дисклеймер */
.coin--4{ bottom:17%; right:5%; }

@media (max-width:620px){
  :root{ --orbit-size: calc(var(--wheel-size) * 1.26); }   /* кульки не зрізаються краєм */
  .coin--1{ top:11%; left:2%; }
  .coin--2{ top:27%; right:1%; }
}

/* лотерейні білети по боках — як на макеті */
.bg__tickets{ position:absolute; inset:0; pointer-events:none; }
.ticket{
  position:absolute;
  width:clamp(84px,17vw,190px);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));
  opacity:.95;
  animation:ticketFloat 9s ease-in-out infinite;
}
@keyframes ticketFloat{
  0%,100%{ transform:translateY(0)     rotate(var(--tr,0deg)); }
  50%    { transform:translateY(-12px) rotate(calc(var(--tr,0deg) + 2.5deg)); }
}
.ticket--l{ top:20%; left:-5%;  --tr:-13deg; }
.ticket--r{ top:18%; right:-5%; --tr:12deg; animation-delay:1.4s; }

@media (max-width:620px){
  .ticket--l{ top:23%; left:-9%;  width:clamp(78px,24vw,120px); }
  .ticket--r{ top:21%; right:-9%; width:clamp(78px,24vw,120px); }
}

/* коли активний GSAP — рух монет/білетів веде він, CSS-флоат вимикаємо */
.gsap-on .coin,
.gsap-on .ticket{ animation:none; }
.wheel-glow{ will-change:transform,opacity; }

/* текст заголовка завжди над колесом/орбітою — щоб не ховався під кульки */
.hero-top{ position:relative; z-index:30; }
.head{ position:relative; z-index:31; }
.head__main, .head__sub{ position:relative; }
.scene{ z-index:5; }
/* трохи опускаємо колесо, щоб орбіта не лізла на заголовок */
.scene{ margin-top:8px; }
@media (max-width:620px){ .scene{ margin-top:4px; } :root{ --orbit-size: calc(var(--wheel-size) * 1.22); } }

/* === ПРАВКИ 10.10: логотип менший, текст вище колеса === */
@media (max-width:620px){
  /* менший логотип на мобілці */
  .stage__logo{ width:clamp(96px,30vw,128px) !important; }
  .loader__logo{ width:min(44vw,180px); }
  /* опускаємо сцену з колесом — за заголовком лишається чистий фон */
  .scene{ margin-top:34px; }
  /* менше колесо й орбіта, щоб верхні кульки не лізли під текст */
  :root{ --wheel-size: min(70vw, 38vh, 310px); --orbit-size: calc(var(--wheel-size) * 1.20); }
  /* заголовок компактніший і трохи піднятий */
  .head{ padding-top:2px; }
  .head__main{ font-size:clamp(23px,6.6vw,32px); }
}
/* заголовок гарантовано над колесом */
.hero-top, .head{ position:relative; z-index:40; }

/* =========================================================
   ТЕМА HIT: чорне срібло поверх базових стилів
   ========================================================= */
:root{
  --navy:      #0A0A0C;
  --navy-2:    #1B1E24;
  --gold:      #D9DEE6;
  --gold-deep: #8A929E;
  --grad-btn:  linear-gradient(180deg, #F2F4F7 0%, #C2C9D2 45%, #8A929E 100%);
  --grad-bar:  linear-gradient(90deg, #6B7380 0%, #D9DEE6 50%, #F2F4F7 100%);
}
.bg{ background:#0A0A0C; }

/* логотип JPG на чорному фоні — screen прибирає чорний на темному тлі */
.loader__logo, .stage__logo, .modal__logo, .wheel__hub img{
  mix-blend-mode:screen;
}

/* кнопки — срібло, текст темний */
.btn--spin, .btn--cta{
  background:var(--grad-btn); color:#14171C;
  text-shadow:0 1px 0 rgba(255,255,255,.4); border:2px solid #EDEFF2;
}
@keyframes btnPulse{
  0%,100%{ transform:scale(1);     box-shadow:0 10px 30px rgba(217,222,230,.35); }
  50%    { transform:scale(1.055); box-shadow:0 14px 44px rgba(217,222,230,.7); }
}
.head__main{ color:#F4F6F8; text-shadow:0 3px 0 #6B7380, 0 6px 18px rgba(0,0,0,.7); }
.head__sub{ color:var(--gold); }
.attempts b{ color:#F4F6F8; }

/* ступиця колеса — темна, щоб логотип зливався */
.wheel__hub{ background:radial-gradient(circle at 40% 30%, #2A2E36, #0A0A0C) !important; }

/* =========================================================
   ПУШ-СПОВІЩЕННЯ (після 1-го спіна)
   ========================================================= */
.push{
  position:fixed; z-index:80; left:50%; top:calc(14px + env(safe-area-inset-top));
  transform:translate(-50%,-140%); opacity:0;
  width:min(92vw,420px); display:flex; gap:12px; align-items:center;
  padding:13px 16px; border-radius:16px;
  background:linear-gradient(180deg, rgba(32,35,42,.98), rgba(18,20,25,.98));
  border:1px solid rgba(217,222,230,.25);
  box-shadow:0 14px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px); pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.9,.25,1.2), opacity .4s ease;
}
.push.is-show{ transform:translate(-50%,0); opacity:1; }
.push__icon{ font-size:26px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.push__title{ font:800 15px/1.2 var(--font); color:#F4F6F8; }
.push__text{ font:600 12px/1.3 var(--font); color:#AEB6C1; margin-top:2px; }

/* перекриваємо сині залишки Lotto під HIT */
.wheel{ box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 7px #2A2E36, 0 0 0 17px #14171C, 0 0 32px 8px rgba(255,255,255,.1) !important; }
.bg{ background:#0A0A0C !important; }
.lotto-ball{ color:#1B1E24 !important; background:linear-gradient(145deg,#fff,#d2d7df) !important; }
.wheel__pointer{ filter:grayscale(1) brightness(1.4) drop-shadow(0 6px 12px rgba(0,0,0,.6)) !important; }
.loader__fill{ background:var(--grad-bar) !important; }
/* логотип у шапці — прибрати зайвий чорний прямокутник країв */
.stage__logo, .loader__logo{ max-width:min(62vw,260px); object-fit:contain; }

/* === ПРАВКИ: чорний фон (без фасаду), срібний логотип PNG === */
/* логотип тепер прозорий PNG — blend не потрібен */
.loader__logo, .stage__logo, .modal__logo, .wheel__hub img{ mix-blend-mode:normal !important; }
.stage__logo, .loader__logo{ width:min(64vw,270px); filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.modal__logo{ width:min(60vw,250px); }

/* фон: чистий чорний преміум, без фасаду */
.bg__img{ display:none !important; }
.bg{ background:radial-gradient(130% 90% at 50% 18%, #1A1D24 0%, #0C0D11 55%, #060608 100%) !important; }
.bg__rays{
  background:repeating-conic-gradient(from 0deg,
    rgba(200,206,216,.10) 0deg 4deg,
    rgba(200,206,216,0)   4deg 13deg) !important;
}
.bg__vignette{
  background:radial-gradient(72% 62% at 50% 42%,
    rgba(60,66,76,.35) 0%, rgba(14,15,19,.6) 55%, rgba(4,4,6,.95) 100%) !important;
}

/* === монети керує GSAP (дощ), скидаємо CSS-позиції === */
.coin{ top:0; left:0; }

/* === ПУШ по центру екрана — великий, читабельний === */
.push{
  left:50%; top:50%; transform:translate(-50%, -50%) scale(.8);
  width:min(90vw,440px); flex-direction:column; text-align:center; gap:10px;
  padding:30px 28px; border-radius:22px;
  background:linear-gradient(180deg, rgba(30,33,40,.98), rgba(14,16,20,.99));
  border:1.5px solid rgba(217,222,230,.35);
  box-shadow:0 24px 70px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1), 0 0 44px rgba(217,222,230,.12);
}
.push.is-show{ transform:translate(-50%, -50%) scale(1); }
.push__icon{ font-size:52px; }
.push__title{ font:900 24px/1.15 var(--font); color:#F4F6F8; }
.push__text{ font:700 16px/1.4 var(--font); color:#C2C9D2; margin-top:4px; }

/* === срібний блиск-shimmer по логотипу (преміум) === */
.stage__logo{ position:relative; }
@keyframes logoShine{ 0%{ filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)) brightness(1); } 48%{ filter:drop-shadow(0 4px 18px rgba(217,222,230,.4)) brightness(1.35); } 100%{ filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)) brightness(1); } }
.stage.is-visible .stage__logo{ animation:logoShine 4.5s ease-in-out 1.5s infinite; }

/* === ПУШ у стилі ленда: чорно-срібло преміум === */
.push{
  background:
    linear-gradient(180deg, rgba(26,29,36,.99), rgba(10,11,14,.99)) padding-box,
    linear-gradient(145deg, #F2F4F7, #6B7380 45%, #AEB6C1 70%, #EDEFF2) border-box !important;
  border:2px solid transparent !important;
  box-shadow:0 26px 74px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14),
             0 0 50px rgba(217,222,230,.16) !important;
}
.push::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(217,222,230,.14), transparent 60%);
}
.push__title{
  background:linear-gradient(180deg,#FFFFFF,#AEB6C1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  letter-spacing:.3px;
}
.push__icon{ filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); }

/* === фон-фото будівлі повертаємо (було приховано), текст крупніше === */
.bg__img{ display:block !important; opacity:1 !important; }
.bg{ background:#0A0A0C !important; }

@media (max-width:620px){
  .head__main{ font-size:clamp(30px,8.4vw,42px) !important; line-height:1.05; }
  .head__sub{ font-size:clamp(16px,4.4vw,22px) !important; }
  .trust{ font-size:clamp(12px,3.4vw,15px) !important; }
  .stage__logo{ width:clamp(120px,38vw,170px) !important; }
}

/* === розводимо логотип і заголовок, щоб текст не налазив === */
.hero-top{ display:flex; flex-direction:column; align-items:center; }
.topbar{ justify-content:center !important; width:100%; }
.stage__logo{ margin:0 auto; }
.head{ margin-top:18px; }
@media (max-width:620px){
  .topbar{ min-height:auto !important; padding-bottom:6px; }
  .head{ margin-top:22px; }
  .head__sub{ margin-bottom:6px; }
  .head__main{ margin-top:2px; }
}