/* ============================================================
   SPIN & WIN — Production CSS
   Mobile-first, safe-area aware, CLS-optimised
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: #080808;
  color: #f0e6c8;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
  /* prevent iOS Safari rubber-band on horizontal */
  position: relative;
  width: 100%;
}
/* iPhone notch landscape — safe-area sides */
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); }
}
/* Tap target minimum (WCAG AAA) */
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }

/* ---------- BACKGROUND DIAMONDS ---------- */
.bg-diamonds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}
.diamond {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, rgba(200,150,42,.4), rgba(255,224,102,.25));
  transform: rotate(45deg);
  opacity: 0;
  animation: diamondFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes diamondFloat {
  0%   { transform: rotate(45deg) translateY(0) scale(.7); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: rotate(45deg) translateY(-110vh) scale(1.1); opacity: 0; }
}

/* ---------- PARTICLE CANVAS ---------- */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8,8,8,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200,155,42,.4);
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);
}
.navbar-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 11px clamp(14px,4vw,24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nav-left { display: flex; align-items: center; gap: 9px; }
.shield-icon { flex-shrink: 0; filter: drop-shadow(0 0 7px rgba(200,150,42,.7)); }
.nav-title {
  font-weight: 800;
  font-size: clamp(11.5px,3vw,14.5px);
  color: #f0e6c8;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nav-free-label {
  font-weight: 600;
  font-size: clamp(11px,2.8vw,13.5px);
  color: rgba(240,230,200,.7);
  white-space: nowrap;
}
.nav-free-text {
  color: #ffe066;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 0 10px rgba(255,224,102,.7), 0 0 20px rgba(255,180,0,.35);
}

/* ---------- MAIN WRAPPER ---------- */
.main-wrapper {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 clamp(14px,4vw,24px);
  padding-bottom: calc(clamp(20px,5vw,36px) + env(safe-area-inset-bottom,0px));
}

/* ---------- HERO ---------- */
.hero-section {
  text-align: center;
  padding: clamp(20px,5vw,38px) 0 clamp(10px,2.5vw,18px);
}
.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.hero-line1 {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(38px,10.5vw,68px);
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.6),
    0 0 30px rgba(255,255,255,.25),
    0 0 60px rgba(200,150,42,.15);
  text-wrap: balance;
}
.hero-line2 {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(22px,6.2vw,44px);
  line-height: 1.05;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  text-wrap: balance;
}
.hero-gold {
  background: linear-gradient(130deg, #d4a017 0%, #ffe37a 35%, #f5d060 60%, #c9962a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(200,150,42,.65));
}
.hero-sub {
  font-weight: 600;
  font-size: clamp(13.5px,3.6vw,17.5px);
  color: rgba(240,230,200,.85);
  letter-spacing: .02em;
}
.gold-accent {
  background: linear-gradient(130deg, #ffe066, #c9962a, #ffe066);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

/* ---------- SOCIAL PROOF ---------- */
.social-proof-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200,155,42,.28);
  border-radius: 50px;
  padding: 9px 18px 9px 12px;
  margin-bottom: clamp(14px,3.5vw,24px);
  box-shadow: 0 0 22px rgba(200,150,42,.12), inset 0 1px 0 rgba(255,255,255,.05);
  max-width: 100%;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.avatars { display: flex; flex-shrink: 0; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid #c9962a;
  margin-left: -10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(200,150,42,.5);
  background: #1a1200;
}
.avatar:first-child { margin-left: 0; }
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 50%;
}
.social-text {
  font-weight: 700;
  font-size: clamp(11.5px,3vw,14px);
  color: rgba(240,230,200,.9);
  line-height: 1.3;
}
.gold-num {
  color: #ffe066;
  font-weight: 900;
  font-size: 1.1em;
  text-shadow: 0 0 12px rgba(255,224,102,1), 0 0 28px rgba(200,150,42,.7);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
}

/* ---------- WHEEL SECTION ---------- */
.wheel-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(18px,4.5vw,32px);
}
.wheel-ambient {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(520px,140vw);
  height: min(520px,140vw);
  background: radial-gradient(ellipse at center,
    rgba(200,150,42,.22) 0%,
    rgba(200,120,20,.09) 40%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: ambientPulse 4s ease-in-out infinite;
}
@keyframes ambientPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: .9; }
  50%      { transform: translate(-50%,-50%) scale(1.04); opacity: .75; }
}
.pointer-wrap {
  position: relative;
  z-index: 10;
  margin-bottom: -10px;
}
.wheel-ptr {
  width: clamp(34px,8.5vw,50px);
  filter: drop-shadow(0 4px 14px rgba(200,150,42,.9));
  animation: ptrBob 2.2s ease-in-out infinite;
}
@keyframes ptrBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.wheel-wrap {
  position: relative;
  z-index: 5;
  width: min(350px, 94vw);
  height: min(350px, 94vw);
}
.wheel-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a1f00, #1a1200, #2a1f00);
  box-shadow:
    0 0 0 4px #c9962a,
    0 0 0 7px rgba(200,150,42,.25),
    0 0 50px rgba(200,150,42,.45),
    0 0 100px rgba(180,120,0,.2),
    inset 0 0 40px rgba(0,0,0,.65);
  animation: ringGlow 3s ease-in-out infinite alternate;
}
@keyframes ringGlow {
  from { box-shadow: 0 0 0 4px #c9962a, 0 0 0 7px rgba(200,150,42,.22), 0 0 50px rgba(200,150,42,.4),  0 0 100px rgba(180,120,0,.18), inset 0 0 40px rgba(0,0,0,.65); }
  to   { box-shadow: 0 0 0 4px #d8a830, 0 0 0 7px rgba(220,170,50,.25), 0 0 60px rgba(210,160,45,.48), 0 0 110px rgba(200,140,0,.22), inset 0 0 40px rgba(0,0,0,.65); }
}
.bulbs-layer {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.bulb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9e0, #ffe066, #b87c10);
  box-shadow: 0 0 7px 3px rgba(255,220,80,.85), 0 0 18px rgba(200,150,42,.5);
  transform-origin: 0 0;
}
.bulb.dim {
  background: radial-gradient(circle at 35% 30%, #3a2c00, #1f1500, #0d0a00);
  box-shadow: 0 0 3px rgba(80,55,0,.4);
}
#wheelCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 20;
  width: clamp(76px,19vw,104px);
  height: clamp(76px,19vw,104px);
  border-radius: 50%;
  border: 3px solid rgba(200,150,42,.85);
  background: radial-gradient(circle at 35% 30%, #2e2200, #0d0d00, #1a1400);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow:
    0 0 0 2px rgba(200,150,42,.3),
    0 0 22px rgba(200,150,42,.45),
    0 0 45px rgba(180,120,0,.22),
    inset 0 0 22px rgba(200,150,42,.08);
}
.spin-btn:hover {
  transform: translate(-50%,-50%) scale(1.07);
  box-shadow: 0 0 0 3px rgba(240,190,60,.6), 0 0 35px rgba(220,170,50,.65), 0 0 70px rgba(200,140,0,.32), inset 0 0 22px rgba(200,150,42,.1);
}
.spin-btn:active { transform: translate(-50%,-50%) scale(.95); }
.spin-btn.spinning { pointer-events: none; }
.spin-glow-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(200,150,42,.5) 25%, transparent 50%, rgba(200,150,42,.5) 75%, transparent 100%);
  animation: ringRotate 2.5s linear infinite;
  opacity: .7;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
.spin-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(16px,4.2vw,22px);
  letter-spacing: .1em;
  background: linear-gradient(180deg, #fff5c0, #c9962a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.spin-sublabel {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(6.5px,1.8vw,8.5px);
  letter-spacing: .04em;
  color: rgba(200,150,42,.75);
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* ---------- FEATURES ---------- */
.features-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200,155,42,.22);
  border-radius: 16px;
  padding: clamp(14px,3.5vw,22px) clamp(8px,2.5vw,18px);
  margin-bottom: clamp(12px,3vw,22px);
  box-shadow: 0 4px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.feat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 2px 6px;
  text-align: center;
}
.feat-icon { filter: drop-shadow(0 0 9px rgba(200,150,42,.55)); }
.feat-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(12.5px,3.5vw,15.5px);
  letter-spacing: .04em;
  background: linear-gradient(135deg, #ffe066, #c9962a, #ffe8a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.feat-sub {
  font-weight: 600;
  font-size: clamp(9.5px,2.5vw,11.5px);
  color: rgba(240,230,200,.6);
  line-height: 1.35;
}
.feat-sep {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,155,42,.45), transparent);
  align-self: stretch;
  flex-shrink: 0;
  margin: 0 2px;
}

/* ---------- CTA ---------- */
.cta-section { margin-bottom: clamp(14px,3.5vw,24px); }
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px,3vw,18px);
  width: 100%;
  padding: clamp(18px,4.5vw,26px) clamp(16px,4vw,24px);
  border-radius: 60px;
  background: linear-gradient(90deg, #b07a10 0%, #e8b030 15%, #ffe366 35%, #f5d060 50%, #ffe366 65%, #e8b030 85%, #b07a10 100%);
  background-size: 200% 100%;
  color: #0a0700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: none;
  box-shadow:
    0 0 35px rgba(200,150,42,.6),
    0 0 70px rgba(180,120,0,.28),
    0 5px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.2);
  animation: ctaPulse 3.2s ease-in-out infinite, shimmerBg 4s linear infinite;
  will-change: box-shadow;
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 0 35px rgba(200,150,42,.55), 0 0 70px rgba(180,120,0,.25), 0 5px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45); }
  50%      { box-shadow: 0 0 50px rgba(220,170,50,.7),  0 0 95px rgba(200,140,0,.35), 0 5px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45); }
}
@keyframes shimmerBg { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.cta-btn:hover   { animation-play-state: paused; }
.cta-btn:active  { transform: scale(.98); animation-play-state: paused; }
.cta-ico, .cta-arr { display: flex; align-items: center; flex-shrink: 0; color: #0a0700; }
.cta-lbl {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(16px,4.8vw,26px);
  letter-spacing: .06em;
  color: #0a0700;
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 360px) {
  .cta-lbl { letter-spacing: .04em; font-size: 15px; }
  .cta-btn { gap: 8px; padding: 16px 12px; }
}
.cta-shine {
  position: absolute;
  top: 0;
  left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: ctaShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShine { 0%,70%,100% { left: -110%; } 35% { left: 140%; } }

/* ---------- FOOTER ---------- */
.footer { text-align: center; padding-bottom: 4px; }
.footer p {
  font-size: clamp(9.5px,2.3vw,11.5px);
  color: rgba(240,230,200,.32);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
}

/* ---------- WIN MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.modal.open { pointer-events: all; opacity: 1; }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  cursor: pointer;
}
.modal-box {
  position: relative;
  z-index: 2;
  background: linear-gradient(155deg, #1e1900, #0e0e00, #1a1200);
  border: 1px solid rgba(200,155,42,.55);
  border-radius: 24px;
  padding: clamp(24px,6vw,48px) clamp(18px,5vw,40px);
  max-width: min(430px, calc(100vw - 24px));
  width: 100%;
  min-width: 0;
  max-height: calc(100dvh - 32px);
  text-align: center;
  box-shadow: 0 0 0 1px rgba(200,150,42,.28), 0 0 70px rgba(200,150,42,.45), 0 22px 70px rgba(0,0,0,.65);
  transform: scale(.85);
  transition: transform .36s cubic-bezier(.34,1.56,.64,1);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.modal-box > * { min-width: 0; max-width: 100%; }
.modal.open .modal-box { transform: scale(1); }
.modal-glow {
  position: absolute;
  inset: -60%;
  background: radial-gradient(ellipse at center, rgba(200,150,42,.14) 0%, transparent 60%);
  pointer-events: none;
  animation: mGlow 3s ease-in-out infinite alternate;
}
@keyframes mGlow { from { opacity: .6; } to { opacity: 1; } }
.modal-trophy {
  font-size: clamp(52px,13vw,78px);
  margin-bottom: 12px;
  filter: drop-shadow(0 0 24px rgba(200,150,42,.75));
  animation: trophyIn .9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes trophyIn { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
.modal-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(20px,5.5vw,32px);
  letter-spacing: .06em;
  background: linear-gradient(135deg, #ffe066, #c9962a, #ffe8a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-wrap: balance;
}
.modal-prize {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(22px,6.5vw,42px);
  letter-spacing: .01em;
  background: linear-gradient(135deg, #fff 0%, #ffe8a0 40%, #f5d060 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(200,150,42,.65));
  line-height: 1.15;
  margin-bottom: 10px;
  text-wrap: balance;
  word-spacing: -.04em;
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}
.modal-brand {
  font-weight: 700;
  font-size: clamp(13px,3.5vw,16px);
  color: #c9962a;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  min-height: 1.2em;
}
.modal-sub {
  font-weight: 600;
  font-size: clamp(12px,3.2vw,15px);
  color: rgba(240,230,200,.72);
  margin-bottom: 24px;
}
.modal-cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border-radius: 50px;
  background: linear-gradient(135deg, #c9962a, #ffe366, #c9962a);
  color: #0a0700;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(15px,4.5vw,20px);
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 0 0 32px rgba(200,150,42,.55), 0 4px 22px rgba(0,0,0,.42);
  transition: box-shadow .2s ease;
  animation: ctaPulse 3.2s ease-in-out infinite;
}
.modal-cta:active { transform: scale(.98); animation-play-state: paused; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 359px) {
  .social-proof-bar { flex-wrap: wrap; justify-content: center; gap: 8px; border-radius: 18px; }
  .social-text { text-align: center; }
  .avatar { width: 36px; height: 36px; margin-left: -8px; }
  .hero-line1 { font-size: 36px; }
  .hero-line2 { font-size: 20px; }
  .modal-trophy { font-size: 48px; }
  .modal-title { font-size: 19px; letter-spacing: .04em; }
  .modal-prize { font-size: 26px; }
  .hiw-steps { padding: 12px 8px; }
  .hiw-arrow { display: none; }
  .features-row { padding: 12px 6px; }
  .feat-title { font-size: 11.5px; letter-spacing: .02em; }
  .nav-title { font-size: 11px; }
  .nav-free-label { font-size: 10.5px; }
  .navbar-inner { padding: 9px 12px; gap: 6px; }
}
/* Landscape phones — modal must fit, content scrollable */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-line1 { font-size: clamp(28px, 7vw, 42px); margin-bottom: 2px; }
  .hero-line2 { font-size: clamp(16px, 4vw, 22px); margin-bottom: 6px; }
  .hero-sub { font-size: 13px; margin-bottom: 8px; }
  .social-proof-bar { margin-bottom: 10px; padding: 6px 14px 6px 8px; }
  .wheel-wrap { width: min(280px, 50vh); height: min(280px, 50vh); }
  .features-row { padding: 8px 10px; margin-bottom: 10px; }
  .cta-section { margin-bottom: 10px; }
  .modal-box { max-height: calc(100dvh - 16px); padding: 20px 24px; }
  .modal-trophy { font-size: 36px; margin-bottom: 6px; }
  .modal-title  { font-size: 18px; margin-bottom: 4px; }
  .modal-prize  { font-size: 26px; margin-bottom: 6px; }
  .modal-sub    { font-size: 12px; margin-bottom: 14px; }
  .modal-cta { padding: 12px 20px; font-size: 14px; }
  .modal { padding: 8px; }
}

/* Modal-open body scroll lock — iOS-safe (position:fixed pattern set in JS) */
body.modal-open { overflow: hidden; width: 100%; }
@media (min-width: 420px) {
  .wheel-wrap { width: min(390px, 94vw); height: min(390px, 94vw); }
}
@media (min-width: 600px) {
  .wheel-wrap { width: min(440px, 90vw); height: min(440px, 90vw); }
  .social-proof-bar { padding: 10px 22px 10px 14px; }
}
@media (hover: none) {
  .cta-btn:hover  { animation-play-state: running; transform: none; }
  .spin-btn:hover { transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(200,150,42,.3), 0 0 22px rgba(200,150,42,.45), 0 0 45px rgba(180,120,0,.22), inset 0 0 22px rgba(200,150,42,.08); }
  .modal-cta:hover { transform: none; animation-play-state: running; }
}
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
.gold-num.bump { display: inline-block; animation: bump .35s ease-out; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bg-diamonds, #particle-canvas { display: none !important; }
}

/* Calm-down: cap simultaneous motion on low-end devices */
@media (max-width: 380px) {
  .bg-diamonds { opacity: .5; }
}

/* ====================================================
   SCARCITY BAR (unused — kept as inert orphan)
   ==================================================== */
.scarcity-bar, .scarcity-bar * { display: none !important; }
.scarcity-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(90deg, rgba(180,30,0,.18), rgba(200,60,0,.12));
  border: 1px solid rgba(255,80,0,.35);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: clamp(12px,3vw,20px);
  position: relative;
  overflow: hidden;
}
.scarcity-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scarcity-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4400;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255,68,0,.8);
  animation: scarcPulse 1.1s ease-in-out infinite;
}
@keyframes scarcPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .6; }
}
.scarcity-text {
  font-weight: 700;
  font-size: clamp(12px,3.2vw,14px);
  color: #ffb380;
  flex: 1;
}
.scarcity-text strong { color: #ff6633; font-size: 1.1em; }
.scarcity-track {
  width: 70px;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  flex-shrink: 0;
  overflow: hidden;
}
.scarcity-fill {
  height: 100%;
  width: 80%;
  background: linear-gradient(90deg, #ff4400, #ff8800);
  border-radius: 3px;
  transition: width 1s ease;
}

/* ====================================================
   HOW IT WORKS
   ==================================================== */
.how-it-works {
  margin-bottom: clamp(12px,3vw,20px);
}
.hiw-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(15px,4vw,20px);
  letter-spacing: .05em;
  text-align: center;
  background: linear-gradient(135deg, #ffe066, #c9962a, #ffe8a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.hiw-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,155,42,.2);
  border-radius: 14px;
  padding: clamp(14px,3.5vw,20px) clamp(10px,2.5vw,16px);
}
.hiw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 2px;
}
.hiw-icon {
  font-size: clamp(24px,6.5vw,34px);
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(200,150,42,.5));
}
.hiw-step-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(10.5px,2.8vw,13px);
  letter-spacing: .03em;
  color: #f0e6c8;
  line-height: 1.2;
}
.hiw-step-sub {
  font-size: clamp(8.5px,2.2vw,10.5px);
  color: rgba(240,230,200,.5);
  line-height: 1.4;
}
.hiw-arrow {
  font-size: clamp(18px,4.5vw,24px);
  color: rgba(200,155,42,.45);
  flex-shrink: 0;
  margin-top: clamp(20px,5.5vw,28px);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

/* ====================================================
   TESTIMONIALS
   ==================================================== */
.testimonials {
  margin-bottom: clamp(14px,3.5vw,24px);
}
.test-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(16px,4.5vw,22px);
  letter-spacing: .05em;
  text-align: center;
  background: linear-gradient(135deg, #ffe066, #c9962a, #ffe8a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}
.test-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.test-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,155,42,.2);
  border-radius: 14px;
  padding: clamp(14px,3.5vw,20px);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}
.test-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.test-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid rgba(200,150,42,.55);
  flex-shrink: 0;
}
.test-name {
  font-weight: 700;
  font-size: clamp(12px,3vw,14px);
  color: #f0e6c8;
}
.test-loc {
  font-weight: 500;
  color: rgba(240,230,200,.5);
  font-size: .9em;
}
.test-stars {
  color: #ffe066;
  font-size: clamp(11px,2.8vw,13px);
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(255,224,102,.7);
}
.test-date {
  font-size: clamp(9px,2.2vw,10.5px);
  color: rgba(240,230,200,.4);
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-text-fill-color: rgba(240,230,200,.4);
}
.test-quote {
  font-size: clamp(11.5px,2.9vw,13.5px);
  color: rgba(240,230,200,.75);
  line-height: 1.55;
  margin-bottom: 10px;
  font-style: italic;
}
.test-badge {
  display: inline-block;
  font-size: clamp(10px,2.5vw,11.5px);
  font-weight: 700;
  color: #4cba5e;
  background: rgba(76,186,94,.1);
  border: 1px solid rgba(76,186,94,.3);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: .03em;
}