:root{
  --red:#E30613; --ink:#0b0d10; --card:#121417; --line:#232a33; --fg:#e9eef3;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#fff;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* Topbar */
.bf-topbar{border-bottom:1px solid #151a20;background:#0a0c0f;position:sticky;top:0;z-index:50}
.bf-topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.brand img{height:40px}
.addr{opacity:.9;font-size:.95rem}

/* HERO */
.hero{position:relative;overflow:hidden;padding:48px 0;background:
  radial-gradient(1200px 400px at 20% -10%, rgba(227,6,19,.22), transparent 60%),
  url('/assets/img/honeycomb_dark.webp'), linear-gradient(180deg,#0b0d10,#0b0d10);}
.hero--compact{padding-bottom:36px}
.hero-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
.hero-grid--single{grid-template-columns:1fr}
.kicker{letter-spacing:.25em;color:#ffefef;font-weight:700;margin-bottom:8px}
.hero h1{font-family:"Bebas Neue",Inter,sans-serif;line-height:.9;margin:0 0 10px}
.hero h1 span{font-size:72px;letter-spacing:.02em}
.hero h1 i{font-style:normal;font-size:96px;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.sub{opacity:.9;max-width:820px}

.cta-row{display:flex;gap:12px;margin:16px 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 18px;border:1px solid #303845;background:#171b22}
.btn.primary{background:var(--red);border-color:var(--red);font-weight:800}
.btn.ghost:hover,.btn:hover{background:#202733}

/* Countdown */
.countdown{display:flex;align-items:flex-end;gap:12px;margin:20px 0 8px;flex-wrap:wrap}
.cd-box{display:flex;flex-direction:column;align-items:center;background:#0e1217;border:1px solid #222b34;border-radius:12px;padding:10px 12px;min-width:72px}
.cd-box strong{font-size:28px}
.cd-box span{font-size:12px;opacity:.8}
.timer-note{opacity:.8;margin-left:6px}
.early-note{display:inline-flex;align-items:center;gap:10px;margin-top:8px;background:#11161d;border:1px dashed rgba(255,255,255,.15);border-radius:12px;padding:10px 12px}

/* Wheel */
.wheel-section{padding:52px 0;border-top:1px solid #151a20;background:linear-gradient(180deg,#0b0d10,#0c1015)}
.wheel-wrap{position:relative;display:flex;justify-content:center;margin:18px 0}
.wheel{width:320px;height:320px;border-radius:50%;border:10px solid #f6f6f6;background:#d7d7d7;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:18px solid var(--red);z-index:3}
.wheel .slice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900; font-size:20px;color:#111}
.wheel .slice:nth-child(odd){clip-path:polygon(50% 50%, 0 0, 100% 0);background:#fff}
.wheel .slice:nth-child(even){clip-path:polygon(50% 50%, 100% 0, 100% 100%);background:#ffebeb}
.wheel-actions{text-align:center}
.spin-note{opacity:.8;margin-top:6px}

/* Popup */
.pop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.pop.hidden{display:none}
.pop-card{position:relative;background:#0f1318;border:1px solid #293342;border-radius:16px;padding:22px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.pop-x{position:absolute;right:18px;top:12px;background:transparent;border:0;color:#bbb;font-size:28px;cursor:pointer}
.pop-kicker{letter-spacing:.25em;font-size:12px;opacity:.8}
.pop-prize{font-family:"Bebas Neue";font-size:72px;margin:4px 0 8px}
.pop-sub{opacity:.9;margin-bottom:12px}
.pop-actions{display:flex;gap:10px;justify-content:center}

/* Benefits & Partners */
.benefits{padding:48px 0;background:
  radial-gradient(800px 300px at 80% -30%, rgba(227,6,19,.14), transparent 60%),
  url('/assets/img/honeycomb_dark.webp'), #0b0d10;}
.benefits h2{margin:0 0 14px}
.benefit-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.benefit-grid{grid-template-columns:repeat(2,1fr)}}
.benefit{background:#0f1318;border:1px solid #263041;border-radius:12px;padding:14px}
.benefit i{color:var(--red);margin-right:8px}
.benefit-note{margin-top:12px;opacity:.9}

.partners{padding:48px 0;border-top:1px solid #151a20}
.logo-strip{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:10px}
.logo-strip img{height:42px;opacity:.95;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.partners-cta{display:flex;justify-content:center;margin-top:14px}

/* Footer */
.site-footer{border-top:1px solid #151a20;background:#0a0c0f;padding:18px 0}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.foot-left img{height:32px;margin-right:6px}
.foot-right a{margin-left:10px;opacity:.9}
/* --- HEADER (Responsive, Bold, Clean) --- */
.bf-topbar {
  background: #0b0d10;
  border-bottom: 1px solid #13171d;
  padding: 24px 0; /* more breathing room */
  position: relative;
  z-index: 10;
}

.bf-topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bf-topbar .brand img {
  height: 85px; /* increased for desktop */
  width: auto;
  transition: transform 0.25s ease, filter 0.25s;
  filter: brightness(0.95);
}

.bf-topbar .brand img:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* --- Optional CTA or logo centering tweak on mobile --- */
@media (max-width: 768px) {
  .bf-topbar {
    padding: 18px 0;
  }

  .bf-topbar .wrap {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .bf-topbar .brand img {
    height: 75px;
  }
}

/* --- Larger header feel for desktop --- */
@media (min-width: 992px) {
  .bf-topbar {
    padding: 30px 0;
  }

  .bf-topbar .brand img {
    height: 100px;
  }
}
/* --- FOOTER (Responsive, Centered on Mobile, Larger on Desktop) --- */
.site-footer {
  background: #0b0d10;
  border-top: 1px solid #13171d;
  padding: 70px 0 50px; /* increased height for desktop presence */
  color: #e9eef3;
  position: relative;
  overflow: hidden;
  text-align: center; /* default for mobile */
}

.site-footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 85%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #E30613, transparent);
  box-shadow: 0 0 25px rgba(227,6,19,0.4);
  transform: translateX(-50%);
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.foot-left img {
  height: 90px;
  width: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(227,6,19,0.4));
}

.foot-left div {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ff6666;
  text-shadow: 0 0 8px rgba(227,6,19,0.3);
  letter-spacing: 0.4px;
}

.foot-right {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.foot-right a {
  color: #fff;
  font-size: 1.7rem;
  transition: color 0.25s, transform 0.25s;
}

.foot-right a:hover {
  color: #E30613;
  transform: translateY(-4px) scale(1.1);
}

/* --- Desktop layout: side-by-side alignment --- */
@media (min-width: 992px) {
  .site-footer .wrap {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .foot-left {
    text-align: left;
  }

  .foot-right {
    justify-content: flex-end;
  }

  .foot-left img {
    height: 100px;
  }

  .foot-left div {
    font-size: 1.2rem;
  }
}
/* Footer — modern, centered-on-mobile, red-outlined social icons */
.footer-modern{
  background:#12161b;
  border-top:1px solid #1b2129;
  padding:28px 0 22px;
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.footer-logo{
  height:38px;
  width:auto;
  display:block;
  filter:brightness(0.95);
}

.footer-modern .tagline{
  color:#e9eef3;
  opacity:.75;
  margin-top:8px;
  font-size:.95rem;
}

.socials{
  list-style:none;
  display:flex;
  gap:14px;
  margin:0;
  padding:0;
}

.socials a{
  --red:#E30613;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:2px solid var(--red);
  color:#e9eef3;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.socials a i{
  font-size:18px;
  line-height:1;
}

.socials a:hover,
.socials a:focus-visible{
  background:var(--red);
  color:#0b0d10;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(227,6,19,.25), inset 0 0 0 2px rgba(0,0,0,.15);
  outline:none;
}

/* Mobile: center everything */
@media (max-width: 820px){
  .footer-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* Desktop: give footer a little breathing room and presence */
@media (min-width: 1024px){
  .footer-modern{ padding:36px 0 28px; }
  .footer-logo{ height:44px; }
  .socials a{ width:48px; height:48px; }
  .socials a i{ font-size:20px; }
}
/* WHO */
.who{background:#0b0d10;border-top:1px solid #13171d;border-bottom:1px solid #13171d;padding:48px 0}
.who-title{margin:0 0 8px}
.who-lead{max-width:920px;margin:8px 0 18px;color:#c8d5e3}
.who-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:10px
}
.who-card{
  background:#111418;border:1px solid #262c35;border-radius:14px;padding:14px;
  display:flex;flex-direction:column;gap:6px
}
.who-card b{color:#e9eef3}
.who-card .note{color:#9fb0bf;font-size:.95rem}
.who-foot{margin-top:12px;color:#9fb0bf}

/* TESTIMONIALS */
.testimonials{background:#0b0d10;border-top:1px solid #13171d;padding:48px 0}
.testi-grid{display:grid;grid-template-columns:1.2fr 1.8fr;gap:20px;align-items:center}
.testi-copy h2{margin:0 0 6px}
.testi-copy .sub{color:#c8d5e3;max-width:620px}
.ticks{margin:12px 0 16px;padding-left:18px;color:#e9eef3}
.ticks li{margin:6px 0}
.testi-player{display:flex;flex-direction:column;gap:10px}
.vid-frame{
  width:100%;aspect-ratio:16/9;background:#0f1318;border:1px solid #262c35;border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);object-fit:cover
}
.testi-controls{display:flex;gap:8px;align-items:center;justify-content:center}
.testi-controls .dot{
  --red:#E30613;width:12px;height:12px;border-radius:999px;border:2px solid var(--red);
  background:transparent;cursor:pointer;transition:all .15s ease
}
.testi-controls .dot.is-active{background:var(--red);box-shadow:0 0 0 3px rgba(227,6,19,.18)}
@media (max-width:980px){
  .who-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr;gap:16px}
}
/* Wheel animation polish */
#wheelCanvas {
  will-change: transform;
  transform: rotate(0deg);
}

#wheelCanvas.is-spinning {
  /* transition is applied per-spin from JS; class is just a hook */
}
/* ================================
   WHEEL — visual skin + animation
   ================================ */
.wheel-section .wheel-wrap{
  position:relative;
  width:min(92vw, 440px);
  margin:0 auto 14px;
}
.wheel{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  /* 8 slices: red / white / dark to match the screenshot feel */
  background:
    conic-gradient(
      #E30613 0deg   45deg,
      #ffffff 45deg  90deg,
      #1b1f26 90deg  135deg,
      #E30613 135deg 180deg,
      #ffffff 180deg 225deg,
      #1b1f26 225deg 270deg,
      #E30613 270deg 315deg,
      #ffffff 315deg 360deg
    );
  box-shadow:
    inset 0 0 0 6px #111,
    inset 0 0 0 12px #333,
    0 12px 35px rgba(0,0,0,.55);
  transform:rotate(0deg);
  transform-origin:50% 50%;
  will-change: transform;
}

/* Rim bolts */
.wheel::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,.25), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 14% 50%, rgba(255,255,255,.15), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 86% 50%, rgba(255,255,255,.15), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 96%, rgba(255,255,255,.25), rgba(255,255,255,0) 30%);
  box-shadow: inset 0 0 0 4px #0e1116;
}

/* Centre hub */
.wheel::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:32%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #5c636e, #2a2f36 60%, #14181f 61%);
  border:6px solid #4b515c;
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.06),
    0 2px 10px rgba(0,0,0,.35);
  z-index:2;
}

/* Pointer */
.wheel-pointer{
  position:absolute;
  top:-10px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:22px solid #E30613;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
  z-index:5;
}

/* Slice labels (use existing <div class="slice"><span>..) */
.wheel .slice{ position:absolute; inset:0; }
.wheel .slice span{
  position:absolute; left:50%; top:50%;
  transform-origin:0 0;
  font-weight:900; font-size:1rem; letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* Place labels at mid of each slice (centered on pointer @ top).
   Angles: 22.5deg + k*45deg; the translate pushes text out from centre. */
.wheel .slice:nth-child(1) span{ transform: rotate(22.5deg)  translate(16%, -148%);  color:#111; }
.wheel .slice:nth-child(2) span{ transform: rotate(67.5deg)  translate(16%, -148%);  color:#111; }
.wheel .slice:nth-child(3) span{ transform: rotate(112.5deg) translate(16%, -148%);  color:#fff; }
.wheel .slice:nth-child(4) span{ transform: rotate(157.5deg) translate(16%, -148%);  color:#111; }
.wheel .slice:nth-child(5) span{ transform: rotate(202.5deg) translate(16%, -148%);  color:#111; }
.wheel .slice:nth-child(6) span{ transform: rotate(247.5deg) translate(16%, -148%);  color:#fff; }
.wheel .slice:nth-child(7) span{ transform: rotate(292.5deg) translate(14%, -148%);  color:#fff; }
.wheel .slice:nth-child(8) span{ transform: rotate(337.5deg) translate(16%, -148%);  color:#111; }

/* Animation class applied by JS */
.wheel.spin-anim{ transition: transform 4.6s cubic-bezier(.17,.67,.23,1); }

/* ========= CHIPS (restored) ========= */
.section-chips{
  background:#0b0d10;
  padding:20px 0;
  border-bottom:1px solid #13171d;
}
.chips{
  display:flex; flex-wrap:wrap;
  gap:12px; justify-content:center; align-items:center;
}
.minibadge{
  background:#12161b; border:1px solid #2a2f36; color:#e9eef3;
  font-weight:600; padding:10px 14px; border-radius:999px;
  box-shadow:0 0 6px rgba(0,0,0,.35); transition:.2s;
}
.minibadge:hover{ transform:translateY(-2px); background:#171b21; }

/* ========= TESTIMONIALS (restored) ========= */
.testimonials{
  background:#0b0d10; text-align:center; padding:60px 20px;
  border-top:1px solid #13171d;
}
.testimonials h2{ font-size:2rem; font-weight:700; color:#fff; margin-bottom:10px; }
.testimonials .sub{
  color:#bbb; margin:0 auto 40px; max-width:700px;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px; justify-content:center; align-items:start;
}
.video-wrap{
  aspect-ratio:16/9; width:100%;
  border-radius:12px; overflow:hidden;
  box-shadow:0 0 20px rgba(0,0,0,.4);
  transition:transform .3s, box-shadow .3s;
}
.video-wrap:hover{ transform:translateY(-4px); box-shadow:0 0 30px rgba(227,6,19,.4); }
.video-wrap iframe{ width:100%; height:100%; border:0; }

@media (max-width:600px){
  .testimonials{ padding:40px 10px; }
  .testimonials h2{ font-size:1.6rem; }
}
/* ================================
   WHEEL — bulletproof round shape
   ================================ */

/* 1) Container is a perfect square using the padding-top trick */
.wheel-section .wheel-wrap{
  position: relative;
  width: min(92vw, 440px);
  margin: 0 auto 14px;
}
.wheel-section .wheel-wrap::before{
  content: "";
  display: block;
  padding-top: 100%;   /* <- forces exact square */
}

/* 2) The wheel fills that square exactly (can’t go oval) */
.wheel{
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 50%;
  /* 8 slices */
  background:
    conic-gradient(
      #E30613 0deg   45deg,
      #ffffff 45deg  90deg,
      #1b1f26 90deg  135deg,
      #E30613 135deg 180deg,
      #ffffff 180deg 225deg,
      #1b1f26 225deg 270deg,
      #E30613 270deg 315deg,
      #ffffff 315deg 360deg
    );
  box-shadow:
    inset 0 0 0 6px #111,
    inset 0 0 0 12px #333,
    0 12px 35px rgba(0,0,0,.55);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Rim bolts (subtle) */
.wheel::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  box-shadow: inset 0 0 0 4px #0e1116;
}

/* Center hub */
.wheel::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:32%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #5c636e, #2a2f36 60%, #14181f 61%);
  border:6px solid #4b515c;
  box-shadow: inset 0 3px 10px rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.35);
  z-index: 2;
}

/* Pointer */
.wheel-pointer{
  position:absolute; top:-10px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:22px solid #E30613;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
  z-index:5;
}

/* ===========================
   WHEEL 12 – never oval again
   =========================== */
.wheel12-wrap{
  position: relative;
  width: min(92vw, 440px);
  margin: 8px auto 16px;
}
.wheel12{
  position: relative;
  aspect-ratio: 1 / 1;         /* forces perfect circle */
  border-radius: 50%;
  /* conic layout (12 slices @ 30deg) — visual like your screenshot:
     alternating dark/white/red, you can tweak colours below */
  background:
    conic-gradient(
      #d32b2b 0deg   30deg,    /* 0 red */
      #f5f5f5 30deg  60deg,    /* 1 white */
      #2a2f36 60deg  90deg,    /* 2 dark */
      #d32b2b 90deg  120deg,   /* 3 red */
      #2a2f36 120deg 150deg,   /* 4 dark */
      #f5f5f5 150deg 180deg,   /* 5 white */
      #2a2f36 180deg 210deg,   /* 6 dark */
      #d32b2b 210deg 240deg,   /* 7 red */
      #2a2f36 240deg 270deg,   /* 8 dark */
      #f5f5f5 270deg 300deg,   /* 9 white (FREE) */
      #2a2f36 300deg 330deg,   /*10 dark */
      #d32b2b 330deg 360deg    /*11 red */
    );
  box-shadow:
    inset 0 0 0 6px #0f1217,
    inset 0 0 0 12px #2b2f36,
    0 12px 36px rgba(0,0,0,.55);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Rim sheen */
.wheel12::before{
  content:"";
  position:absolute; inset:8px;
  border-radius:50%;
  box-shadow: inset 0 0 0 4px #101419;
}

/* Hub */
.wheel12::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:32%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #616a77, #2b3038 58%, #171b21 60%);
  border:6px solid #4c535e;
  box-shadow: inset 0 3px 10px rgba(255,255,255,.07), 0 2px 10px rgba(0,0,0,.35);
  z-index: 2;
}

/* Pointer */
.wheel12-pointer{
  position:absolute; top:-12px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:26px solid #E30613;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
  z-index: 5;
}

/* Labels */
.wheel12 .w12-slice{ position:absolute; inset:0; }
.wheel12 .w12-slice span{
  position:absolute; left:50%; top:50%;
  transform-origin:0 0;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* Place each label in the middle of its slice (30deg apart) */
:root { --w12-step: 30deg; }
.wheel12 .w12-slice:nth-child(1)  span{ transform: rotate(calc( 0*var(--w12-step) + 15deg))  translate(18%, -154%); color:#111; }
.wheel12 .w12-slice:nth-child(2)  span{ transform: rotate(calc( 1*var(--w12-step) + 15deg))  translate(18%, -154%); color:#111; }
.wheel12 .w12-slice:nth-child(3)  span{ transform: rotate(calc( 2*var(--w12-step) + 15deg))  translate(18%, -154%); color:#fff; }
.wheel12 .w12-slice:nth-child(4)  span{ transform: rotate(calc( 3*var(--w12-step) + 15deg))  translate(18%, -154%); color:#111; }
.wheel12 .w12-slice:nth-child(5)  span{ transform: rotate(calc( 4*var(--w12-step) + 15deg))  translate(18%, -154%); color:#fff; }
.wheel12 .w12-slice:nth-child(6)  span{ transform: rotate(calc( 5*var(--w12-step) + 15deg))  translate(18%, -154%); color:#111; }
.wheel12 .w12-slice:nth-child(7)  span{ transform: rotate(calc( 6*var(--w12-step) + 15deg))  translate(18%, -154%); color:#fff; }
.wheel12 .w12-slice:nth-child(8)  span{ transform: rotate(calc( 7*var(--w12-step) + 15deg))  translate(18%, -154%); color:#111; }
.wheel12 .w12-slice:nth-child(9)  span{ transform: rotate(calc( 8*var(--w12-step) + 15deg))  translate(18%, -154%); color:#fff; }
.wheel12 .w12-slice:nth-child(10) span{ transform: rotate(calc( 9*var(--w12-step) + 15deg))  translate(16%, -154%); color:#111; }
.wheel12 .w12-slice:nth-child(11) span{ transform: rotate(calc(10*var(--w12-step) + 15deg))  translate(18%, -154%); color:#fff; }
.wheel12 .w12-slice:nth-child(12) span{ transform: rotate(calc(11*var(--w12-step) + 15deg))  translate(18%, -154%); color:#111; }

/* Spin easing */
.wheel12.spin-anim{ transition: transform 4.8s cubic-bezier(.17,.67,.23,1); }
/* Wheel safety + layout */
.wheel-section .wrap { overflow: visible; }

#wheel12{
  display:block;
  width:min(92vw, 560px);
  height:auto;
  aspect-ratio:1/1;
  margin:12px auto 0;
}