:root{
  --brand:#4b2df2; --brand-2:#7c3aed; --ink:#0f0b2e; --muted:#5a5680;
  --bg:#f4f2ff; --card:#ffffff; --err:#dc2626;
  --c10:#7c3aed; --c15:#0ea5e9; --c20:#4b2df2; --c25:#f43f5e; --cfree:#ffd166;
  --ring:0 0 0 4px rgba(75,45,242,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);
  min-height:100dvh;overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 110% -10%,rgba(124,58,237,.22),transparent 60%),
    radial-gradient(700px 400px at -20% 110%,rgba(75,45,242,.18),transparent 60%);
}
.wrap{max-width:520px;margin:0 auto;padding:20px 16px 48px}
header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 18px}
header img{height:34px;width:auto}
header .tag{font-size:10px;letter-spacing:.28em;font-weight:700;color:var(--brand);text-transform:uppercase}
.hero{margin-bottom:18px}
.hero h1{font-size:clamp(30px,8.5vw,40px);line-height:1.02;font-weight:800;letter-spacing:-.02em}
.hero h1 span{color:var(--brand)}
.hero p{margin-top:10px;color:var(--muted);font-size:15px;font-weight:500;line-height:1.5}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e6e2ff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;color:var(--brand);margin-bottom:14px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(75,45,242,.15)}

/* prize chips on the landing page */
.prizes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{font-size:12px;font-weight:800;color:#fff;padding:7px 11px;border-radius:999px;letter-spacing:.02em}
.chip.c10{background:var(--c10)} .chip.c15{background:var(--c15)} .chip.c20{background:var(--c20)} .chip.c25{background:var(--c25)}
.chip.cfree{background:var(--cfree);color:#2a1a7a}

/* ---------- wheel ---------- */
.stage{position:relative;width:min(86vw,340px);aspect-ratio:1;margin:8px auto 22px}
.pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:5;width:38px;height:48px;filter:drop-shadow(0 6px 10px rgba(15,11,46,.35))}
.wheel{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -36deg, var(--c20) 0 72deg, var(--c10) 72deg 144deg, var(--cfree) 144deg 216deg, var(--c15) 216deg 288deg, var(--c25) 288deg 360deg);
  box-shadow:0 20px 50px rgba(75,45,242,.35),0 0 0 10px #fff,0 0 0 12px #e6e2ff;
  transition:transform 5.4s cubic-bezier(.12,.72,.08,1);
  will-change:transform;
}
.wheel .seg{position:absolute;left:50%;top:50%;width:50%;transform-origin:0 50%;display:flex;justify-content:flex-end;padding-right:16px;
  color:#fff;font-weight:800;font-size:17px;letter-spacing:.01em;text-align:right;line-height:1.05;pointer-events:none}
.wheel .seg small{display:block;font-size:10px;font-weight:700;opacity:.85;letter-spacing:.14em}
.wheel .seg.free{color:#2a1a7a}
.wheel .seg.free b{font-size:14px}
.wheel::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),transparent 55%)}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:#fff;z-index:4;border:0;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(15,11,46,.25);font:inherit;font-weight:800;color:var(--brand);font-size:13px;letter-spacing:.14em;cursor:pointer}
.hub::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed #ddd6ff}
.hub[disabled]{cursor:default;color:#b9b3e6}
.hub.idle{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(15,11,46,.25),0 0 0 0 rgba(75,45,242,.35)}50%{box-shadow:0 6px 18px rgba(15,11,46,.25),0 0 0 16px rgba(75,45,242,0)}}

/* ---------- card / form ---------- */
.card{background:var(--card);border:1px solid #e9e6ff;border-radius:22px;padding:20px;box-shadow:0 12px 40px rgba(75,45,242,.10)}
.card h2{font-size:18px;font-weight:800;margin-bottom:4px}
.card .sub{color:var(--muted);font-size:13px;margin-bottom:14px}
label{display:block;font-size:12px;font-weight:700;color:#3b3765;margin:12px 0 6px}
label span{color:var(--muted);font-weight:600}
input,select{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid #dcd8f5;border-radius:12px;background:#faf9ff;color:var(--ink);outline:none;transition:.15s}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234b2df2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
select:invalid{color:var(--muted)}
input:focus,select:focus{border-color:var(--brand);box-shadow:var(--ring);background-color:#fff}
.phone{display:flex;gap:8px}
.phone .cc{flex:0 0 64px;display:grid;place-items:center;border:1.5px solid #dcd8f5;border-radius:12px;background:#f1eeff;font-weight:700;color:var(--brand)}
.btn{width:100%;margin-top:18px;font:inherit;font-size:17px;font-weight:800;color:#fff;border:0;border-radius:14px;padding:16px;cursor:pointer;
  background:linear-gradient(135deg,#4b2df2,#7c3aed);box-shadow:0 12px 28px rgba(75,45,242,.35);transition:transform .12s,opacity .2s;text-align:center}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.65;cursor:default}
.btn.ghost{background:#fff;color:var(--brand);border:1.5px solid #dcd8f5;box-shadow:none;margin-top:10px}
.btn.wa{background:#25d366;box-shadow:0 12px 28px rgba(37,211,102,.35)}
.error{color:var(--err);font-size:13px;font-weight:600;margin-top:10px;display:none}
.fine{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}

/* ---------- result ---------- */
.result{display:none;text-align:center}
.result .big{font-size:clamp(34px,10vw,48px);font-weight:800;line-height:1;color:var(--brand);margin:6px 0 2px}
.result .big.free{font-size:clamp(26px,8vw,36px)}
.result .what{font-weight:700;color:#3b3765;margin-bottom:14px}
.code{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:.14em;font-weight:700;padding:12px 18px;border-radius:12px;
  background:#f1eeff;border:1.5px dashed var(--brand);color:var(--ink)}
.result .note{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.already{background:#fff7e6;border:1px solid #ffe3a3;color:#7a4b00;font-size:13px;font-weight:600;border-radius:12px;padding:10px 12px;margin-bottom:12px;display:none}

/* ---------- services strip ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.services div{background:#fff;border:1px solid #e9e6ff;border-radius:14px;padding:12px 8px;text-align:center;font-size:11px;font-weight:700;color:#3b3765}
.services div b{display:block;font-size:18px;margin-bottom:4px}
footer{margin-top:28px;text-align:center;font-size:12px;color:var(--muted);line-height:1.7}
footer a{color:var(--brand);font-weight:700;text-decoration:none}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.wheel{transition-duration:1.2s}.hub.idle{animation:none}}