*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#071326;
  --bg-2:#0b1d39;
  --card:#102446;
  --accent:#b7ff00;
  --accent-2:#dbff6f;
  --text:#ffffff;
  --muted:#cfd8e8;
  --line:rgba(183,255,0,.18);
  --glow:0 0 0 rgba(183,255,0,0), 0 0 24px rgba(183,255,0,.18), 0 0 60px rgba(183,255,0,.08);
  --radius:24px;
  --header-h:82px;
  --container:min(1180px, 92vw);
}
html{scroll-behavior:smooth}
body{
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(183,255,0,.12), transparent 25%),
    radial-gradient(circle at 85% 15%, rgba(183,255,0,.08), transparent 18%),
    linear-gradient(180deg, #071326 0%, #081a31 45%, #071326 100%);
  color:var(--text);
  overflow-x:hidden;
  padding-bottom:110px;
}
a{color:inherit}
img{max-width:100%;display:block}
.section-shell{width:var(--container);margin:0 auto}
.glow-orb{
  position:absolute;border-radius:50%;filter:blur(28px);pointer-events:none;opacity:.55;mix-blend-mode:screen
}
.glow-1{width:220px;height:220px;background:rgba(183,255,0,.16);top:8%;left:3%}
.glow-2{width:280px;height:280px;background:rgba(183,255,0,.10);right:-2%;top:18%}
.glow-3{width:180px;height:180px;background:rgba(183,255,0,.12);bottom:12%;left:42%}
header{
  position:sticky;top:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,19,38,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(183,255,0,.16)
}
.header-inner{width:var(--container);display:flex;align-items:center;justify-content:space-between;gap:16px}
header img{height:48px}
.header-chip{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;
  font-size:.86rem;font-weight:700;color:var(--accent);border:1px solid rgba(183,255,0,.22);
  background:rgba(255,255,255,.03);white-space:nowrap;flex-shrink:0
}
.header-chip strong{color:#fff;font-size:1rem;letter-spacing:.6px}
main{position:relative}
.hero{
  position:relative;width:100vw;height:calc(100svh - var(--header-h));min-height:calc(100svh - var(--header-h));
  overflow:hidden;background:linear-gradient(180deg, #041123 0%, #071326 100%)
}
.hero-media,.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%}
.hero img{object-fit:cover;object-position:center top}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(6,16,33,.35) 0%, rgba(6,16,33,0) 32%, rgba(6,16,33,.12) 100%);
  z-index:2
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:160px;
  background:linear-gradient(to top, rgba(7,19,38,.98), rgba(7,19,38,.35), rgba(7,19,38,0));z-index:3
}
.hero-light{
  position:absolute;inset:auto auto 8% 50%;transform:translateX(-50%);
  width:min(68vw, 900px);height:180px;z-index:2;pointer-events:none;
  background:radial-gradient(circle, rgba(183,255,0,.10) 0%, rgba(183,255,0,.05) 35%, rgba(183,255,0,0) 72%);
  filter:blur(10px)
}
.hero-content{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:5;
  width:min(1120px,92vw);display:flex;justify-content:flex-end;pointer-events:none
}
.hero-badge{
  pointer-events:auto;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  border:1px solid rgba(183,255,0,.28);background:rgba(7,19,38,.68);box-shadow:var(--glow);font-weight:700;color:#f7ffe1
}
.section{
  position:relative;padding:86px 0
}
.section-title{
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1;
  text-transform:uppercase;color:var(--accent);text-align:center;margin-bottom:16px;letter-spacing:.6px
}
.section-subtitle{
  max-width:820px;margin:0 auto 36px;text-align:center;color:var(--muted);font-size:1.04rem;line-height:1.7
}
.cta-block{padding-top:70px}
.cta-panel{
  position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(16,36,70,.96), rgba(10,24,46,.96));
  border:1px solid var(--line);border-radius:32px;padding:42px 26px;box-shadow:0 20px 60px rgba(0,0,0,.22), var(--glow)
}
.cta-panel::before{
  content:"";position:absolute;inset:-20% auto auto -5%;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(183,255,0,.18), rgba(183,255,0,0) 68%);filter:blur(20px)
}
.buttons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 36px;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.35px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform
}
.btn-primary{
  background:linear-gradient(180deg, var(--accent-2), var(--accent));color:#071326;
  box-shadow:0 0 0 rgba(183,255,0,.18), 0 0 30px rgba(183,255,0,.16)
}
.btn-secondary{
  background:rgba(255,255,255,.03);color:var(--text);border:1px solid rgba(183,255,0,.22)
}
.btn:hover{transform:translateY(-3px)}
.neon-pulse{animation:neonPulse 2.8s ease-in-out infinite}
@keyframes neonPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(183,255,0,0),0 0 18px rgba(183,255,0,.16)}
  50%{transform:scale(1.04);box-shadow:0 0 0 rgba(183,255,0,0),0 0 26px rgba(183,255,0,.24),0 0 52px rgba(183,255,0,.16)}
}
.feature-grid,.stats-grid,.footer-grid{display:grid;gap:22px}
.feature-grid{grid-template-columns:repeat(3, minmax(0,1fr));margin-top:32px}
.stats-grid{grid-template-columns:repeat(4, minmax(0,1fr));margin-top:20px}
.premium-card{
  position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(17,40,76,.92), rgba(12,28,53,.96));
  border:1px solid rgba(183,255,0,.14);border-radius:24px;padding:26px;transform-style:preserve-3d;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;box-shadow:0 15px 38px rgba(0,0,0,.2)
}
.premium-card:hover{border-color:rgba(183,255,0,.28);box-shadow:0 20px 46px rgba(0,0,0,.26),0 0 24px rgba(183,255,0,.10)}
.premium-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(183,255,0,.18), transparent 35%, transparent 65%, rgba(183,255,0,.10));opacity:.7
}
.card-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;
  font-size:1.35rem;background:rgba(183,255,0,.12);color:var(--accent);border:1px solid rgba(183,255,0,.18)
}
.premium-card h3{font-size:1.08rem;margin-bottom:10px}
.premium-card p{color:var(--muted);line-height:1.7;font-size:.97rem}
.stat-card{text-align:center}
.stat-number{font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1;color:var(--accent);margin-bottom:10px}
.stat-label{color:#f3f7ff;font-weight:700;margin-bottom:8px}
.stat-detail{color:var(--muted);font-size:.95rem;line-height:1.6}
.testimonials-wrap{position:relative;overflow:hidden;margin-top:18px}
.testimonials-track{display:flex;gap:24px;transition:transform .6s ease;will-change:transform}
.testimonial-card{min-width:calc((100% - 48px)/3)}
.stars{color:#FFD400;font-size:1.15rem;margin-bottom:14px;letter-spacing:2px}
.name{margin-top:18px;color:var(--accent);font-weight:700}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);border:none;cursor:pointer;transition:transform .2s ease, background .2s ease}
.dot.active{background:var(--accent);transform:scale(1.12)}
.faq-list{display:grid;gap:14px;max-width:920px;margin:0 auto}
.faq-item{
  background:linear-gradient(180deg, rgba(14,31,57,.94), rgba(11,24,45,.98));border:1px solid rgba(183,255,0,.14);
  border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.18)
}
.faq-question{
  width:100%;border:none;background:none;color:var(--text);text-align:left;padding:20px 22px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:1rem;font-weight:700
}
.faq-question span:last-child{color:var(--accent);font-size:1.35rem;line-height:1;transition:transform .2s ease}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer p{padding:0 22px 20px;color:var(--muted);line-height:1.75}
.faq-item.active .faq-question span:last-child{transform:rotate(45deg)}
footer{
  position:relative;padding:68px 0 36px;border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(7,19,38,.35), rgba(7,19,38,.95))
}
.footer-grid{grid-template-columns:1.2fr .9fr .9fr .9fr;align-items:start}
.footer-brand img{height:44px;margin-bottom:18px}
.footer-brand p,.footer-col li,.footer-bottom{color:#aebad0;line-height:1.8;font-size:.95rem}
.footer-brand-center{text-align:center;max-width:860px;margin:0 auto}
.footer-brand-center img{height:48px;margin:0 auto 18px}
.footer-bottom-center{justify-content:center;text-align:center}
.footer-col h4{color:var(--accent);font-size:1rem;margin-bottom:12px}
.footer-col ul{list-style:none}
.footer-col a{text-decoration:none}
.footer-bottom{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-cta-wrap{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;justify-content:center;padding:12px 14px 18px;
  pointer-events:none;background:linear-gradient(to top, rgba(7,19,38,.98), rgba(7,19,38,.72), rgba(7,19,38,0))
}
.footer-cta{
  min-width:min(92vw,440px);pointer-events:auto;border:1px solid rgba(183,255,0,.22);
  box-shadow:0 0 0 rgba(183,255,0,0),0 0 26px rgba(183,255,0,.24),0 0 56px rgba(183,255,0,.14)
}
.reveal{opacity:0;transform:translateY(24px)}
@media (max-width:1024px){
  .feature-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .testimonial-card{min-width:calc((100% - 24px)/2)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  :root{--header-h:76px;--container:min(94vw, 94vw)}
  body{padding-bottom:120px}
  header img{height:42px}
  .header-chip{display:inline-flex;font-size:.73rem;padding:8px 10px;gap:6px;max-width:58vw;overflow:hidden;text-overflow:ellipsis}
  .header-chip strong{font-size:.92rem}
  .hero{height:calc(100svh - var(--header-h));min-height:calc(100svh - var(--header-h))}
  .desktop-only{display:none}
  .hero-mobile{display:block}
  .hero-light{width:88vw;height:140px;bottom:8%}
  .section{padding:68px 0}
  .cta-panel{padding:34px 18px;border-radius:24px}
  .feature-grid,.stats-grid,.footer-grid{grid-template-columns:1fr}
  .testimonial-card{min-width:100%}
  .footer-bottom{flex-direction:column}
  .btn{width:min(100%,420px);padding:17px 24px}
}
@media (min-width:769px){
  .hero-mobile{display:none}
}

button.btn{border:none;cursor:pointer;font-family:inherit}

/* =========================
   UNAPIX Premium Prize Wheel
   ========================= */
.roulette-overlay{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease, visibility .28s ease;
}
.roulette-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.roulette-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.roulette-modal{
  --lime:#c9ff13;--lime-soft:#b7ff00;--navy:#071B3A;--navy-deep:#031123;--yellow:#ffd400;
  position:relative;width:min(94vw, 1480px);aspect-ratio:14 / 8;max-height:92svh;overflow:auto;border-radius:20px;
  background:
    radial-gradient(circle at 18% 8%, rgba(183,255,0,.18), transparent 22%),
    radial-gradient(circle at 84% 20%, rgba(255,212,0,.10), transparent 20%),
    linear-gradient(180deg, #06162f 0%, #071b3a 46%, #031123 100%);
  border:1px solid rgba(183,255,0,.72);
  box-shadow:0 0 0 1px rgba(183,255,0,.12) inset, 0 0 28px rgba(183,255,0,.28), 0 30px 100px rgba(0,0,0,.72);
  padding:22px 24px 18px;
  transform:translateY(18px) scale(.97);transition:transform .3s ease;
}
.roulette-overlay.is-open .roulette-modal{transform:translateY(0) scale(1)}
.roulette-modal::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 22%, transparent 78%, rgba(183,255,0,.10));
}
.roulette-close,.winner-close{
  position:absolute;right:14px;top:14px;width:54px;height:54px;border-radius:50%;border:2px solid rgba(183,255,0,.65);
  color:#fff;background:rgba(7,27,58,.86);font-size:34px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:25;
  box-shadow:0 0 18px rgba(183,255,0,.18);transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.roulette-close:hover,.winner-close:hover{transform:scale(1.05);background:rgba(183,255,0,.15);box-shadow:0 0 24px rgba(183,255,0,.32)}
.roulette-frame{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;min-height:100%}
.roulette-layout{
  display:grid;grid-template-columns:minmax(290px,.95fr) minmax(360px,1.05fr) minmax(230px,.72fr);
  align-items:center;gap:clamp(14px,1.8vw,28px);flex:1;min-height:0;
}
.roulette-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:6px 8px 0 8px}
.roulette-brand{width:min(100%, 420px);height:auto;object-fit:contain;filter:drop-shadow(0 0 12px rgba(183,255,0,.12))}
.roulette-big-title{
  margin:0;font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(3.8rem,6vw,6.5rem);
  line-height:.87;letter-spacing:.01em;color:#fff;text-transform:uppercase;text-shadow:0 0 18px rgba(0,0,0,.45);
}
.roulette-big-title span{color:var(--lime);text-shadow:0 0 18px rgba(183,255,0,.46)}
.roulette-description{
  margin:0;color:#eef5ff;font-size:clamp(1rem,1.45vw,1.24rem);line-height:1.46;max-width:430px;
}
.roulette-description strong{color:var(--lime)}
.roulette-stage{position:relative;display:grid;place-items:center;min-height:100%;padding-top:10px}
.roulette-shell{
  position:relative;width:min(520px, 34vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle, #0b2a54 0%, #071B3A 58%, #020912 76%, #0b244a 100%);
  border:14px solid #081a34;
  box-shadow:0 0 0 4px #163761, 0 0 0 6px rgba(183,255,0,.45), inset 0 0 34px rgba(0,0,0,.86), 0 24px 55px rgba(0,0,0,.55), 0 0 55px rgba(183,255,0,.22);
}
.roulette-shell::after{content:"";position:absolute;inset:12px;border-radius:50%;pointer-events:none;border:3px solid rgba(1,5,12,.82);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 26px rgba(0,0,0,.60)}
.roulette-led-ring{position:absolute;inset:-3px;border-radius:50%;z-index:4;pointer-events:none}
.roulette-led-ring .led{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--lime-soft);
  box-shadow:0 0 7px var(--lime-soft), 0 0 16px rgba(183,255,0,.8), 0 0 24px rgba(183,255,0,.4);
  transform:rotate(var(--led-angle)) translateY(calc(-1 * min(248px, 16.6vw)));
  animation:ledTwinkle 1.7s ease-in-out infinite;animation-delay:var(--led-delay);
}
@keyframes ledTwinkle{0%,100%{opacity:.58;transform:rotate(var(--led-angle)) translateY(calc(-1 * min(248px, 16.6vw))) scale(.85)}50%{opacity:1;transform:rotate(var(--led-angle)) translateY(calc(-1 * min(248px, 16.6vw))) scale(1.22)}}
.wheel-rotor{position:absolute;inset:24px;border-radius:50%;overflow:hidden;will-change:transform;transform:rotate(0deg);z-index:2;background:#071B3A;box-shadow:inset 0 0 28px rgba(0,0,0,.72)}
.prize-wheel{width:100%;height:100%;display:block}
.wheel-segment{stroke:#02050b;stroke-width:4;filter:drop-shadow(0 0 2px rgba(0,0,0,.35));transition:filter .2s ease, opacity .2s ease}
.wheel-segment.is-winning{animation:segmentFlash .45s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 18px rgba(183,255,0,.8))}
@keyframes segmentFlash{0%,100%{opacity:1}50%{opacity:.58}}
.wheel-label-layer{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3}
.wheel-label{position:absolute;left:50%;top:50%;width:0;height:0;text-align:center;transform:rotate(var(--slice-angle));transform-origin:0 0}
.wheel-label-inner{position:absolute;left:-67px;top:-188px;width:134px;min-height:86px;display:grid;place-items:center;gap:3px;transform:rotate(calc(-1 * var(--slice-angle)));text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.7)}
.wheel-label.bonus .wheel-label-inner{gap:0}
.wheel-label strong{font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-weight:950;font-size:24px;line-height:.88;letter-spacing:.01em;color:#fff;-webkit-text-stroke:1px rgba(0,0,0,.42);text-transform:uppercase}
.wheel-label.product strong{font-size:10px;line-height:1.02;max-width:116px;letter-spacing:.02em;color:#fff;text-wrap:balance}
.wheel-label.product img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,255,255,.18))}
.wheel-label .yellow-detail{color:#FFD400;text-shadow:0 0 8px rgba(255,212,0,.55)}
.wheel-label.is-winning .wheel-label-inner{animation:labelFlash .45s ease-in-out infinite}
@keyframes labelFlash{0%,100%{transform:rotate(calc(-1 * var(--slice-angle))) scale(1)}50%{transform:rotate(calc(-1 * var(--slice-angle))) scale(1.13)}}
.wheel-center{position:absolute;z-index:8;width:122px;height:122px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle, #0c2852 0%, #071B3A 54%, #020814 100%);border:5px solid rgba(183,255,0,.85);box-shadow:inset 0 0 18px rgba(0,0,0,.85), 0 0 24px rgba(183,255,0,.40), 0 0 0 5px rgba(0,0,0,.45)}
.wheel-center img{width:92px;height:92px;object-fit:cover;border-radius:50%;filter:drop-shadow(0 0 10px rgba(183,255,0,.34))}
.roulette-pointer{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:12;width:72px;height:82px;display:grid;place-items:start center;pointer-events:none;filter:drop-shadow(0 9px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(183,255,0,.58))}
.roulette-pointer::before{content:"";width:48px;height:56px;background:linear-gradient(180deg, #e3ff86 0%, #b7ff00 55%, #6ec300 100%);clip-path:polygon(50% 100%, 0 0, 100% 0);border-radius:4px;display:block}
.roulette-pointer span{position:absolute;top:8px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 9px rgba(255,255,255,.9),0 0 15px rgba(183,255,0,.55)}
.roulette-result-panel{
  align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
  min-height:min(72%, 450px);padding:24px 18px;border-radius:28px;background:linear-gradient(180deg, rgba(5,22,47,.95), rgba(4,17,35,.92));
  border:1px solid rgba(183,255,0,.6);box-shadow:0 0 24px rgba(183,255,0,.16), inset 0 0 0 1px rgba(255,255,255,.04);
}
.roulette-result-badge{display:inline-flex;align-items:center;justify-content:center;min-width:118px;padding:8px 18px;border-radius:999px;border:1px solid rgba(183,255,0,.6);font-weight:900;font-size:1rem;color:var(--lime);letter-spacing:.03em}
.roulette-result-gift{display:grid;place-items:center;width:118px;height:118px;margin:4px 0 8px;filter:drop-shadow(0 0 16px rgba(183,255,0,.24))}
.gift-box{position:relative;width:88px;height:72px;border-radius:10px;background:linear-gradient(180deg,#dfff7a 0%, #b7ff00 50%, #8cd600 100%);box-shadow:0 0 18px rgba(183,255,0,.34), inset 0 0 0 2px rgba(255,255,255,.18)}
.gift-ribbon-v,.gift-ribbon-h{position:absolute;background:#172419}
.gift-ribbon-v{left:50%;top:0;transform:translateX(-50%);width:10px;height:100%}
.gift-ribbon-h{left:0;top:50%;transform:translateY(-50%);width:100%;height:10px}
.gift-bow{position:absolute;top:-14px;width:28px;height:24px;border:8px solid #e8ff9f;border-radius:50% 50% 40% 40%;background:transparent}
.bow-left{left:14px;transform:rotate(-35deg)}
.bow-right{right:14px;transform:rotate(35deg)}
.roulette-result-panel h3{margin:0;font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(2.2rem,3vw,3.4rem);line-height:.9;color:#fff;text-transform:uppercase}
.roulette-result-panel p{margin:0;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:800;color:#d8e5fb;letter-spacing:.03em}
.roulette-result-value{font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(3rem,4.4vw,5.2rem);line-height:.88;text-transform:uppercase;color:var(--lime);text-shadow:0 0 18px rgba(183,255,0,.26)}
.roulette-result-placeholder{font-size:clamp(1.8rem,2.5vw,2.9rem);line-height:.94;color:#dfff7a}
.roulette-result-panel.is-bonus .roulette-result-value{font-size:clamp(2.8rem,4vw,4.6rem)}
.roulette-spin-button{
  min-width:310px;max-width:100%;border:none;border-radius:999px;padding:22px 30px;cursor:pointer;font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(1.5rem,2.2vw,2.4rem);line-height:1;letter-spacing:.04em;color:#081a34;background:linear-gradient(180deg, #f1ffd6 0%, #c6ff15 42%, #98e700 100%);
  box-shadow:0 6px 0 #5f8d00, 0 0 24px rgba(183,255,0,.38), 0 0 60px rgba(183,255,0,.18);transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.roulette-spin-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 9px 0 #5f8d00, 0 0 30px rgba(183,255,0,.48), 0 0 72px rgba(183,255,0,.23)}
.roulette-spin-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 #5f8d00, 0 0 20px rgba(183,255,0,.33)}
.roulette-spin-button:disabled{cursor:not-allowed;opacity:.72;filter:saturate(.8)}
.roulette-note{margin:0;max-width:430px;color:#cdd9ed;font-size:.92rem;line-height:1.5;background:rgba(0,0,0,.18);border:1px solid rgba(183,255,0,.14);border-radius:16px;padding:12px 14px}
.roulette-bottom-strip{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:12px;margin-top:18px}
.roulette-feature-card{display:flex;align-items:center;gap:12px;min-height:84px;padding:12px 14px;border-radius:18px;background:linear-gradient(180deg, rgba(4,18,38,.92), rgba(5,17,35,.85));border:1px solid rgba(130,160,230,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.roulette-feature-icon{flex:0 0 54px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--lime);font-size:1.75rem;font-weight:900;border:2px solid rgba(183,255,0,.45);box-shadow:0 0 18px rgba(183,255,0,.12)}
.roulette-feature-card strong{display:block;font-size:1rem;line-height:1.1;color:var(--lime);font-weight:900;margin-bottom:4px}
.roulette-feature-card span{display:block;color:#f2f7ff;font-size:.94rem;line-height:1.25}
.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:14;border-radius:inherit}
.confetti-piece{position:absolute;top:-18px;width:8px;height:14px;border-radius:2px;background:var(--confetti-color);left:var(--confetti-left);opacity:.95;transform:translate3d(0,0,0) rotate(0deg);animation:confettiFall var(--confetti-duration) cubic-bezier(.2,.8,.35,1) forwards;animation-delay:var(--confetti-delay)}
@keyframes confettiFall{0%{transform:translate3d(0,-20px,0) rotate(0deg);opacity:1}100%{transform:translate3d(var(--confetti-x), 720px,0) rotate(var(--confetti-rotate));opacity:0}}

.exit-confirm{position:absolute;inset:0;z-index:19;display:grid;place-items:center;padding:22px;background:rgba(0,0,0,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, visibility .22s ease;border-radius:inherit}
.exit-confirm.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.exit-card{position:relative;width:min(100%, 610px);text-align:center;border-radius:28px;padding:28px 22px 22px;background:linear-gradient(180deg, rgba(9,27,57,.98), rgba(4,15,32,.98));border:1px solid rgba(183,255,0,.54);box-shadow:0 0 28px rgba(183,255,0,.18), 0 24px 70px rgba(0,0,0,.62);transform:scale(.94);transition:transform .22s ease;overflow:hidden}
.exit-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(183,255,0,.16), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.05), transparent 26%, transparent 74%, rgba(183,255,0,.07));pointer-events:none}
.exit-confirm.is-visible .exit-card{transform:scale(1)}
.exit-gift{position:relative;width:82px;height:82px;margin:0 auto 12px;display:grid;place-items:center;filter:drop-shadow(0 0 20px rgba(183,255,0,.28))}
.exit-gift-box{display:block;width:54px;height:46px;border-radius:10px;background:linear-gradient(180deg, #eaffb0 0%, #b7ff00 56%, #86d900 100%);box-shadow:0 0 18px rgba(183,255,0,.28), inset 0 0 0 2px rgba(255,255,255,.2)}
.exit-gift-ribbon-v,.exit-gift-ribbon-h{position:absolute;background:#c0331a;border-radius:4px}
.exit-gift-ribbon-v{width:10px;height:46px;top:18px;left:50%;transform:translateX(-50%)}
.exit-gift-ribbon-h{width:54px;height:10px;top:37px;left:50%;transform:translateX(-50%)}
.exit-gift-bow{position:absolute;top:10px;width:22px;height:18px;border:7px solid #b7ff00;border-radius:50% 50% 42% 42%;background:transparent}
.exit-gift-bow-left{left:18px;transform:rotate(-35deg)}
.exit-gift-bow-right{right:18px;transform:rotate(35deg)}
.exit-card h3{position:relative;z-index:1;margin:0 0 12px;font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(2rem,4vw,3.5rem);line-height:.92;color:#b7ff00;text-transform:uppercase;text-shadow:0 0 14px rgba(255,212,0,.12)}
.exit-card p{position:relative;z-index:1;margin:0 auto 22px;max-width:470px;color:#f4f7ff;font-size:clamp(1rem,1.65vw,1.2rem);font-weight:700;line-height:1.45}
.exit-confirm-buttons{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.exit-primary,.exit-secondary{width:100%;min-height:56px;border-radius:999px;border:none;cursor:pointer;padding:16px 20px;font-weight:950;font-size:clamp(1rem,1.8vw,1.22rem);letter-spacing:.01em;font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}
.exit-primary{background:linear-gradient(180deg, #f4ffd7 0%, #b7ff00 55%, #8fd800 100%);color:#071326;box-shadow:0 8px 20px rgba(183,255,0,.24), inset 0 0 0 1px rgba(255,255,255,.28)}
.exit-secondary{background:linear-gradient(180deg, rgba(33,49,78,.98), rgba(13,24,43,.98));color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}

.winner-confirm{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;background:rgba(0,0,0,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, visibility .22s ease;border-radius:inherit}
.winner-confirm.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.winner-card{position:relative;width:min(100%, 560px);text-align:center;border-radius:24px;padding:34px 24px 28px;background:linear-gradient(180deg, #0b244a, #06162f);border:1px solid rgba(183,255,0,.72);box-shadow:0 0 28px rgba(183,255,0,.32), 0 24px 70px rgba(0,0,0,.62);transform:scale(.94);transition:transform .22s ease}
.winner-confirm.is-visible .winner-card{transform:scale(1)}
.winner-trophy{font-size:3.2rem;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(255,212,0,.55))}
.winner-card h3{font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:.03em;color:#b7ff00;text-transform:uppercase;text-shadow:0 0 16px rgba(183,255,0,.36);margin-bottom:12px}
.winner-card p{font-size:clamp(1rem,2.4vw,1.18rem);font-weight:700;line-height:1.55;color:#fff;margin:0 auto 22px;max-width:440px}
.winner-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.winner-redeem,.winner-secondary{min-width:190px;min-height:52px;border-radius:999px;border:none;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:950;cursor:pointer;letter-spacing:.02em;padding:15px 20px;font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}
.winner-redeem{background:linear-gradient(180deg, #efffd3, #b7ff00);color:#071326;box-shadow:0 0 24px rgba(183,255,0,.32)}
.winner-secondary{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.16)}
@media (max-width:1100px){
  .roulette-modal{width:min(96vw, 980px);aspect-ratio:auto;max-height:94svh;padding:18px 16px}
  .roulette-layout{grid-template-columns:minmax(240px,.95fr) minmax(320px,1fr);grid-template-areas:"copy result" "stage stage";align-items:start}
  .roulette-copy{grid-area:copy;padding-top:10px}
  .roulette-stage{grid-area:stage;min-height:auto}
  .roulette-result-panel{grid-area:result;min-height:330px}
  .roulette-shell{width:min(500px, 74vw)}
  .wheel-label-inner{left:-61px;top:-182px;width:124px}
  .roulette-bottom-strip{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:820px){
  .roulette-overlay{padding:10px}
  .roulette-modal{width:min(96vw, 520px);aspect-ratio:auto;padding:16px 10px 18px;max-height:94svh}
  .roulette-close,.winner-close{width:48px;height:48px;font-size:30px}
  .roulette-layout{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .roulette-copy{display:contents;text-align:center}
  .roulette-brand{order:1;width:min(100%, 255px);align-self:center;margin:0 auto}
  .roulette-big-title{order:2;text-align:center;font-size:clamp(2.45rem,10.5vw,4.15rem);margin:0 auto}
  .roulette-description{order:3;text-align:center;max-width:none;margin:0 auto;font-size:.98rem;line-height:1.35;padding:0 8px}
  .roulette-stage{order:4;min-height:auto;padding:2px 0 0;display:grid;place-items:center;overflow:visible}
  .roulette-spin-button{order:5;min-width:0;width:100%;padding:17px 18px;margin-top:0;align-self:center}
  .roulette-result-panel{order:6;min-height:auto;padding:16px 14px;margin-top:2px}
  .roulette-note{order:7;max-width:none;margin:0;font-size:.86rem;line-height:1.4;padding:10px 12px}
  .roulette-shell{width:min(340px, 76vw);border-width:9px}
  .wheel-rotor{inset:16px}
  .wheel-label-inner{left:clamp(-46px,-11.6vw,-35px);top:clamp(-132px,-35vw,-104px);width:clamp(70px,22vw,92px);min-height:54px}
  .wheel-label strong{font-size:clamp(12.8px,3.7vw,15.5px);-webkit-text-stroke:.65px rgba(0,0,0,.45)}
  .wheel-label.product strong{font-size:clamp(6.6px,2vw,8px);max-width:82px;line-height:1.03}
  .wheel-label.product img{width:clamp(26px,8vw,34px);height:clamp(26px,8vw,34px)}
  .wheel-center{width:80px;height:80px;border-width:4px}
  .wheel-center img{width:56px;height:56px}
  .roulette-pointer{top:-2px;width:48px;height:56px}
  .roulette-pointer::before{width:32px;height:38px}
  .roulette-pointer span{top:5px;width:10px;height:10px}
  .roulette-result-gift{width:82px;height:82px;margin:0 auto 4px}.gift-box{width:66px;height:54px}
  .gift-bow{width:22px;height:18px;top:-11px}
  .roulette-result-panel h3{font-size:2rem}
  .roulette-result-panel p{font-size:.95rem}
  .roulette-result-value{font-size:2.8rem}
  .roulette-result-placeholder{font-size:1.55rem;line-height:.98}
  .roulette-led-ring .led{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:rotate(var(--led-angle)) translateY(calc(-1 * min(162px, 36.5vw)))}
  @keyframes ledTwinkle{0%,100%{opacity:.55;transform:rotate(var(--led-angle)) translateY(calc(-1 * min(162px, 36.5vw))) scale(.82)}50%{opacity:1;transform:rotate(var(--led-angle)) translateY(calc(-1 * min(162px, 36.5vw))) scale(1.18)}}
  .roulette-bottom-strip{grid-template-columns:1fr;gap:10px;margin-top:12px}
  .roulette-feature-card{min-height:unset;padding:10px 12px}
}
@media (max-width:430px){
  .exit-card{padding:22px 16px 18px}
  .exit-card h3{font-size:1.9rem}
  .exit-card p{font-size:.95rem}
  .roulette-modal{padding:14px 8px 18px}
  .roulette-brand{width:230px}
  .roulette-big-title{font-size:2.25rem}
  .roulette-description{font-size:.88rem;line-height:1.3}
  .roulette-note{font-size:.8rem}
  .roulette-shell{width:min(315px, 78vw);border-width:8px}
  .wheel-rotor{inset:14px}
  .wheel-label-inner{left:-36px;top:-108px;width:72px;min-height:50px}
  .wheel-label strong{font-size:11.8px;line-height:.88}
  .wheel-label.product strong{font-size:6.4px;line-height:1.02;max-width:68px}
  .wheel-label.product img{width:25px;height:25px}
  .wheel-center{width:66px;height:66px}
  .wheel-center img{width:45px;height:45px}
  .roulette-result-panel{padding:14px 12px}
  .roulette-result-panel h3{font-size:1.75rem}
  .roulette-result-value{font-size:2.35rem}
  .roulette-result-placeholder{font-size:1.34rem}
  .winner-buttons{flex-direction:column}
  .winner-redeem,.winner-secondary{width:100%}
}