/* ==========================================================
   RateMe — ядро стилей лендинга
   ==========================================================
   Структура одна на все варианты, внешность — разная.
   Всё, что красит, вынесено в токены; каждый вариант
   переопределяет их в своём блоке в theme.css.
   Правило: в компонентах никаких literal-цветов, только var().
   ========================================================== */
:root{
  /* поверхности */
  --bg:#0B0B0D;
  --surface:#141416;
  --line:#242428;
  --track:#1E1E22;

  /* текст */
  --text:#FFFFFF;
  --text-soft:#D6D4DA;
  --muted:#95939C;
  --dim:#8A8891;

  /* акцент */
  --accent:#FFFFFF;
  --accent-soft:rgba(255,255,255,.10);
  --accent-line:rgba(255,255,255,.28);
  --glow:transparent;

  /* кнопка */
  --cta-bg:var(--accent);
  --cta-color:#0B0B0D;
  --cta-radius:16px;
  --cta-shadow:none;
  --cta-weight:700;

  /* типографика */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --h1-weight:800;
  --h1-tracking:-.02em;
  --h1-size:clamp(31px,9vw,40px);
  --h1-leading:1.1;

  /* геометрия */
  --radius:16px;
  --radius-lg:22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* .wrap задаёт ТОЛЬКО боковые поля — иначе перебивает вертикальные
   отступы секций по специфичности (класс > тип). */
.wrap{max-width:480px;margin:0 auto;padding-left:22px;padding-right:22px}

/* ---------- Переключатель вариантов ---------- */
.variant{display:none}
.variant.on{display:block}

/* ---------- CTA ---------- */
.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:60px;
  background:var(--cta-bg);
  color:var(--cta-color);text-decoration:none;
  font-family:var(--font-display);
  font-size:18px;font-weight:var(--cta-weight);letter-spacing:-.01em;
  border:0;border-radius:var(--cta-radius);
  box-shadow:var(--cta-shadow);
  cursor:pointer;
  transition:transform .12s ease;
}
.cta:active{transform:scale(.975)}
.cta svg{width:21px;height:21px;flex:none}
.cta-note{margin:13px 0 0;text-align:center;font-size:13px;color:var(--dim)}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 24px) 0 32px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:-20% -40% auto -40%;height:70%;
  background:radial-gradient(60% 60% at 50% 35%,var(--glow),transparent 70%);
  filter:blur(20px);pointer-events:none;
}
.hero-inner{position:relative;display:flex;flex-direction:column;flex:1}
.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:34px 0 28px}

.brand{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-size:15px;font-weight:700;letter-spacing:-.01em;
}
.brand::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent);
}

.eyebrow{
  align-self:flex-start;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  padding:7px 13px;border-radius:100px;margin-bottom:20px;
}
h1{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:var(--h1-size);
  line-height:var(--h1-leading);
  letter-spacing:var(--h1-tracking);
  font-weight:var(--h1-weight);
}
h1 b{font-weight:inherit;color:var(--accent)}
.sub{margin:0;color:var(--muted);font-size:17px}
.sub strong{color:var(--text-soft);font-weight:600}

/* ---------- SECTIONS ---------- */
section{padding-top:52px;padding-bottom:52px}
h2{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:25px;line-height:1.15;
  letter-spacing:var(--h1-tracking);font-weight:var(--h1-weight);
}
.center{text-align:center}

/* ---------- Шаги ---------- */
.steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{
  position:relative;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 16px 16px 56px;
  counter-increment:s;
}
.steps li::before{
  content:counter(s);
  position:absolute;left:16px;top:15px;
  width:26px;height:26px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:13px;font-weight:700;
  background:var(--accent);color:var(--cta-color);
}
.steps b{display:block;font-size:16px;margin-bottom:3px}
.steps span{display:block;font-size:14px;color:var(--muted);line-height:1.4}

/* ---------- Голосовые ---------- */
.voices{display:flex;flex-direction:column;gap:9px}
.voice{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 15px;
}
.ava{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--accent);color:var(--cta-color);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.voice-body{flex:1;min-width:0}
.voice-body i{font-style:normal;display:block;font-size:12px;color:var(--dim);margin-bottom:3px}
.wave{display:flex;align-items:center;gap:2.5px;height:22px}
.wave b{display:block;width:3px;border-radius:2px;opacity:.8;background:var(--accent)}
.voice time{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.voice.locked{opacity:.55}
.voice.locked .wave b{background:var(--line);opacity:1}
.voice.locked time{color:var(--dim)}

/* ---------- Панель / чеклист ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--accent-line);
  border-radius:var(--radius-lg);padding:26px 22px;
}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.checks li{position:relative;padding-left:29px;font-size:15px;color:var(--text-soft);line-height:1.35}
.checks li::before{
  content:"";position:absolute;left:0;top:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.checks li::after{
  content:"";position:absolute;left:6px;top:8px;
  width:5px;height:8px;
  border:solid var(--accent);border-width:0 2px 2px 0;
  transform:rotate(42deg);
}

/* ---------- Шкала баллов (вариант 4) ---------- */
.scale{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.scale-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.scale-row:last-child{margin-bottom:0}
.scale-row em{font-style:normal;flex:none;width:96px;font-size:14px;color:var(--muted)}
.scale-bar{flex:1;height:8px;border-radius:5px;background:var(--track);overflow:hidden}
.scale-bar i{display:block;height:100%;border-radius:5px;background:var(--accent)}
.scale-row u{
  text-decoration:none;flex:none;width:26px;text-align:right;
  font-family:var(--font-mono);
  font-size:14px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;
}
.scale-you u{color:var(--accent)}
.scale-you em{color:var(--text);font-weight:600}

/* ==========================================================
   КВИЗ — «привет, я Кристина» (варианты 1 и 3)
   Ответы никуда не уходят: имя живёт в памяти вкладки
   и только подставляется в текст.
   ========================================================== */
.quiz{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px 18px 20px;
}
.quiz-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.quiz-head .ava{width:40px;height:40px;font-size:15px}
.quiz-who{min-width:0}
.quiz-who i{font-style:normal;display:block;font-size:15px;font-weight:600}
.quiz-who span{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--dim);
}
.quiz-who span::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}

.quiz-step{display:none}
.quiz-step.on{display:block;animation:quiz-in .22s ease}
@keyframes quiz-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.quiz-q{
  margin:0 0 14px;
  font-size:16px;line-height:1.4;color:var(--text-soft);
}
.quiz-q b{color:var(--accent);font-weight:600}

.quiz-form{display:flex;gap:9px}
.quiz-form input{
  flex:1;min-width:0;
  height:50px;padding:0 15px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--text);
  font-family:var(--font);font-size:16px;
}
.quiz-form input::placeholder{color:var(--dim)}
.quiz-form input:focus{outline:none;border-color:var(--accent)}
.quiz-form button{
  flex:none;width:50px;height:50px;
  background:var(--accent);color:var(--cta-color);
  border:0;border-radius:13px;
  font-size:20px;font-weight:700;line-height:1;
  cursor:pointer;
}

.quiz-opts{display:flex;flex-direction:column;gap:8px}
.quiz-opt{
  width:100%;text-align:left;
  padding:14px 15px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--text-soft);
  font-family:var(--font);font-size:15px;
  cursor:pointer;
  transition:border-color .12s ease,transform .12s ease;
}
.quiz-opt:active{transform:scale(.985)}
.quiz-opt:hover{border-color:var(--accent-line)}
.quiz-done .cta{margin-top:4px}

/* ---------- FOOTER ---------- */
footer{
  padding-top:26px;
  padding-bottom:calc(env(safe-area-inset-bottom) + 130px);
  font-size:12.5px;color:var(--dim);line-height:1.6;text-align:center;
}
footer a{color:var(--muted)}

/* ---------- STICKY ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:14px 22px calc(env(safe-area-inset-bottom) + 14px);
  background:var(--bg);
  border-top:1px solid var(--line);
  transform:translateY(130%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.sticky.on{transform:translateY(0);pointer-events:auto}
.sticky .inner{max-width:480px;margin:0 auto}

/* Вариант 5 — один экран, sticky не нужен */
body.no-sticky .sticky{display:none}
body.no-sticky footer{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}

@media (min-width:560px){
  .hero{min-height:auto;padding-top:44px;padding-bottom:20px}
  .hero-mid{padding:44px 0 32px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}