:root{
  --bg:#0b0b12;
  --bg2:#12121c;
  --card:#171726;
  --card2:#1e1e31;
  --ink:#f4f4fa;
  --muted:#a6a6c0;
  --pink:#fe2c55;
  --pink2:#ff5c7c;
  --cyan:#25f4ee;
  --gold:#ffd166;
  --line:rgba(255,255,255,.10);
  --glow-pink:0 10px 40px rgba(254,44,85,.35);
  --glow-cyan:0 10px 40px rgba(37,244,238,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6; font-size:17px; overflow-x:hidden;
}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.15}

.wrap{max-width:1080px; margin:0 auto; padding:0 18px}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.isVisible{opacity:1; transform:none}
.reveal2{opacity:0; transform:translateY(24px); transition:opacity .6s ease .12s, transform .6s ease .12s}
.reveal2.isVisible{opacity:1; transform:none}

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:600; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(11,11,18,.72); backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.liveDot{
  width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--pink), #b3123a); font-size:13px; font-weight:900; letter-spacing:.04em;
  box-shadow:var(--glow-pink); position:relative;
}
.liveDot::after{
  content:""; position:absolute; right:-3px; top:-3px; width:11px; height:11px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 0 rgba(37,244,238,.7); animation:ping 1.8s infinite;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(37,244,238,.7)} 70%{box-shadow:0 0 0 10px rgba(37,244,238,0)} 100%{box-shadow:0 0 0 0 rgba(37,244,238,0)}}
.brand__name{font-weight:800; font-size:17px}
.brand__note{color:var(--muted); font-size:12.5px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
  padding:13px 24px; border-radius:999px; font-weight:800; font-size:16px; text-decoration:none;
  font-family:inherit; transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; min-height:48px;
  text-align:center; max-width:100%;
}
.btn--pink{background:linear-gradient(135deg, var(--pink2), var(--pink)); color:#fff; box-shadow:var(--glow-pink)}
.btn--pink:hover{transform:translateY(-2px); filter:brightness(1.07)}
.btn--ghost{background:rgba(255,255,255,.07); color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.13)}
.btn--sm{padding:9px 18px; min-height:40px; font-size:14px}
.btn:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(37,244,238,.45)}
.btn:disabled{opacity:.6; cursor:wait; transform:none}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden; padding:54px 0 70px;
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(254,44,85,.30), transparent 70%),
    radial-gradient(55% 45% at 100% 20%, rgba(37,244,238,.20), transparent 70%),
    var(--bg);
}
.heroGrid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:center}
.heroGrid > *{min-width:0}
@media (max-width:880px){ .heroGrid{grid-template-columns:minmax(0,1fr); gap:30px} }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(254,44,85,.14); border:1px solid rgba(254,44,85,.45); color:#ffd3dc;
  font-weight:700; font-size:13px; margin-bottom:18px;
}
.hero h1{font-size:46px; font-weight:900; letter-spacing:-.5px; margin-bottom:16px}
.hero h1 em{font-style:normal; background:linear-gradient(100deg, var(--pink2), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
@media (max-width:560px){ .hero h1{font-size:32px} }
.hero .lead{color:var(--muted); font-size:18px; max-width:520px; margin:0 0 22px}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); font-size:14px; font-weight:600;
}

/* ===== Registration card ===== */
.regCard{
  background:linear-gradient(160deg, var(--card2), var(--card)); border:1px solid var(--line);
  border-radius:28px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.5), var(--glow-cyan);
}
.regCard h2{font-size:24px; margin-bottom:6px}
.regCard .sub{color:var(--muted); font-size:14.5px; margin:0 0 18px}

.form{display:flex; flex-direction:column; gap:12px}
.field{
  width:100%; padding:15px 18px; border-radius:16px; border:1.5px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink); font-size:16px; font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder{color:#7d7d98}
.field:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(37,244,238,.15)}
textarea.field{resize:vertical; min-height:82px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:420px){ .row2{grid-template-columns:1fr} }
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.agree{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:13px}
.agree input{margin-top:3px; accent-color:var(--pink)}
.agree a{color:var(--cyan)}
.formError{
  display:none; background:rgba(254,44,85,.14); border:1px solid rgba(254,44,85,.5);
  color:#ffd3dc; border-radius:14px; padding:11px 14px; font-size:14px; font-weight:600;
}
.formError.isShown{display:block}
.fine{color:var(--muted); font-size:12.5px; text-align:center; margin:2px 0 0}

/* ===== Result (the code) ===== */
.result{display:none; text-align:center}
.result.isShown{display:block}
.result .tag{color:var(--cyan); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.result .codeBox{
  margin:14px auto 12px; padding:18px 10px; border-radius:22px; max-width:340px;
  background:linear-gradient(135deg, rgba(254,44,85,.2), rgba(37,244,238,.14)); border:1.5px dashed rgba(255,255,255,.35);
}
.result .code{
  font-size:clamp(46px,15vw,68px); font-weight:900; letter-spacing:.1em; line-height:1; padding-left:.1em;
  background:linear-gradient(100deg, #fff, var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.result .say{font-size:19px; font-weight:700; margin:8px 0 4px}
.result .say b{color:var(--pink2)}
.result .note{color:var(--muted); font-size:14px; margin:4px 0 14px}
.result .warn{
  background:rgba(255,209,102,.12); border:1px solid rgba(255,209,102,.45); color:#ffe6a8;
  border-radius:14px; padding:10px 14px; font-size:13.5px; margin:0 0 14px; text-align:left;
}
.result .actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.result .actions .btn{flex:1 1 auto}

/* ===== Ticker ===== */
.ticker{background:var(--bg2); border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:13px 0}
.ticker__track{display:inline-flex; gap:42px; animation:tick 30s linear infinite; font-weight:700; font-size:14.5px; color:#d9d9ee}
.ticker__track span{display:inline-flex; align-items:center; gap:10px}
@keyframes tick{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker__track{animation:none} }

/* ===== Sections ===== */
.section{padding:64px 0}
.section__eyebrow{color:var(--pink2); text-align:center; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px}
.section__title{font-size:32px; text-align:center; font-weight:900; margin-bottom:10px}
.section__note{color:var(--muted); text-align:center; max-width:600px; margin:0 auto 38px}

/* ===== Steps ===== */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; counter-reset:s}
.steps::before{
  content:""; position:absolute; top:28px; left:7%; right:7%; height:2px;
  background:repeating-linear-gradient(90deg, rgba(37,244,238,.6) 0 10px, transparent 10px 18px);
}
@media (max-width:960px){
  .steps{grid-template-columns:1fr; gap:0}
  .steps::before{top:0; bottom:0; left:27px; right:auto; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, rgba(37,244,238,.6) 0 10px, transparent 10px 18px)}
}
.step{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px 16px 18px;
}
@media (max-width:960px){ .step{margin:0 0 14px 56px; padding:16px 18px} }
.step__num{
  counter-increment:s; width:44px; height:44px; border-radius:50%; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px;
  background:linear-gradient(145deg, var(--pink2), var(--pink)); box-shadow:var(--glow-pink);
}
@media (max-width:960px){ .step__num{position:absolute; left:-56px; top:14px; margin:0} }
.step h3{font-size:17px; margin-bottom:6px}
.step p{margin:0; color:var(--muted); font-size:14.5px}

/* ===== Chat mock ===== */
.explain{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center}
@media (max-width:800px){ .explain{grid-template-columns:1fr} }
.explainText h3{font-size:26px; margin-bottom:10px}
.explainText p{color:var(--muted); margin:0 0 12px}
.explainText ul{margin:0; padding-left:20px; color:var(--muted)}
.explainText li{margin:6px 0}
.chat{
  background:var(--card); border:1px solid var(--line); border-radius:24px; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.chat__head{display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; margin-bottom:12px; color:#e9e9f7}
.chat__head i{width:9px; height:9px; border-radius:50%; background:var(--pink); display:inline-block; animation:ping 1.8s infinite}
.msg{display:flex; gap:10px; align-items:flex-start; margin:10px 0}
.msg__ava{width:32px; height:32px; border-radius:50%; flex:none; background:linear-gradient(145deg,#6c63ff,#25f4ee)}
.msg__ava.b{background:linear-gradient(145deg,#ff9a3c,#fe2c55)}
.msg__body b{font-size:13px; color:var(--muted); display:block}
.msg__body span{font-size:15.5px}
.msg__body em{font-style:normal; color:var(--cyan); font-weight:900}
.msg--host .msg__body span{color:#ffd3dc}

/* ===== FAQ ===== */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:4px 20px}
.faq summary{cursor:pointer; font-weight:700; padding:15px 0; list-style:none; display:flex; justify-content:space-between; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; line-height:1; color:var(--cyan); flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px; color:var(--muted); font-size:15.5px}

/* ===== CTA band ===== */
.ctaBand{
  margin:0 18px; border-radius:32px; padding:46px 20px; text-align:center;
  background:linear-gradient(135deg, rgba(254,44,85,.35), rgba(37,244,238,.2)), var(--card); border:1px solid var(--line);
}
.ctaBand h2{font-size:30px; font-weight:900; margin-bottom:8px}
.ctaBand p{color:#d7d7ea; margin:0 0 20px}

/* ===== Footer ===== */
.footer{padding:34px 0 50px; text-align:center; color:var(--muted); font-size:14px}
.footer a{color:var(--muted); text-decoration:underline}
.footer__links{margin-top:8px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:13px}

/* ===== v2: main CTA, preview, register page ===== */
[hidden]{display:none !important}
.btn--lg{padding:17px 34px; font-size:18px; min-height:56px}
.heroCta{margin:0 0 20px}

.preview{
  background:linear-gradient(160deg, var(--card2), var(--card)); border:1px solid var(--line);
  border-radius:28px; padding:30px 22px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5), var(--glow-cyan);
  transform:rotate(2deg); max-width:380px; margin:0 auto; width:100%;
}
.preview__tag{color:var(--cyan); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.preview__box{margin:14px 0; padding:18px 10px; border-radius:22px; background:linear-gradient(135deg, rgba(254,44,85,.2), rgba(37,244,238,.14)); border:1.5px dashed rgba(255,255,255,.35)}
.preview__code{font-size:clamp(46px,15vw,68px); font-weight:900; letter-spacing:.1em; padding-left:.1em; line-height:1; background:linear-gradient(100deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.preview__say{font-size:18px; font-weight:700}
.preview__say b{color:var(--pink2)}

.regPage .topbar{justify-content:space-between}
.back{color:var(--muted); text-decoration:none; font-weight:700; font-size:15px; padding:8px 4px}
.back:hover{color:var(--ink)}
.regWrap{max-width:560px; padding-top:34px; padding-bottom:70px}
.regTitle{font-size:34px; font-weight:900; margin:0 0 10px; letter-spacing:-.3px}
.regLead{color:var(--muted); margin:0 0 22px}

.deliveryPick{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px}
@media (max-width:460px){ .deliveryPick{grid-template-columns:1fr} }
.dcard{
  text-align:left; cursor:pointer; font-family:inherit; color:var(--ink);
  background:linear-gradient(160deg, var(--card2), var(--card)); border:1.5px solid var(--line); border-radius:22px;
  padding:20px 18px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dcard:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.3)}
.dcard.isActive{border-color:var(--cyan); box-shadow:0 0 0 4px rgba(37,244,238,.14), var(--glow-cyan)}
.dcard__name{font-size:22px; font-weight:900}
.dcard__price{color:var(--pink2); font-weight:800; font-size:15px}
.dcard__hint{color:var(--muted); font-size:13.5px}

.regForm{background:linear-gradient(160deg, var(--card2), var(--card)); border:1px solid var(--line); border-radius:26px; padding:24px}
.formTitle{font-size:22px; font-weight:900}
.costLine{margin:-4px 0 4px; color:var(--cyan); font-weight:700; font-size:14.5px}
.hint{margin:6px 4px 0; color:var(--muted); font-size:13px}
.deliveryNote{margin:0 0 14px; color:var(--cyan); font-weight:700; font-size:14px}
.regPage .regCard{padding:30px 22px}

/* ===== Viber group button ===== */
.btn--viber{background:linear-gradient(135deg,#8b7bff,#7360f2); color:#fff; box-shadow:0 10px 30px rgba(115,96,242,.35)}
.btn--viber:hover{transform:translateY(-2px); filter:brightness(1.07)}
.heroCta{display:flex; gap:12px; flex-wrap:wrap}
.result .actions .btn--viber{flex:1 1 100%}