/* ============================================================
   bezikaron — мобильный сайт. Токены и база.
   Палитра и характер из ТЗ: спокойное достоинство + ясность.
   Структура под RTL: используем логические свойства (inline-start/end).
   ============================================================ */

:root {
  /* фон и текст */
  --bg:         #F3EFE9;   /* тёплый off-white */
  --surface:    #FBFAF6;   /* карточки чуть светлее фона */
  --surface-2:  #EDE7DD;   /* мягкая заливка-секция */
  --ink:        #33352F;   /* глубокий графит */
  --ink-soft:   rgba(51, 53, 47, 0.66);
  --ink-faint:  rgba(51, 53, 47, 0.40);
  --line:       rgba(51, 53, 47, 0.12);
  --line-soft:  rgba(51, 53, 47, 0.07);

  /* акценты */
  --sage:       #7C8B7A;
  --sage-deep:  #5E6D5D;
  --sage-tint:  #E7EAE3;
  --bronze:     #A8895C;
  --bronze-deep:#8A6E43;
  --bronze-tint:#EEE6D8;

  /* активный акцент (переключается в Tweaks) */
  --accent:      var(--sage);
  --accent-deep: var(--sage-deep);
  --accent-tint: var(--sage-tint);
  --on-accent:   #FBFAF6;

  /* радиусы и тени */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-card: 0 1px 2px rgba(51,53,47,0.04), 0 6px 22px rgba(51,53,47,0.06);
  --shadow-soft: 0 1px 2px rgba(51,53,47,0.03), 0 2px 10px rgba(51,53,47,0.05);
  --shadow-pop:  0 12px 40px rgba(51,53,47,0.16);

  /* шрифты */
  --font-head: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;

  --maxw: 460px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #d9d4ca;       /* нейтральный фон вокруг телефона */
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- типографика ---- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
  line-height: 1.16;
}

p { margin: 0; }

/* размеры под аудиторию 45+ — крупно */
.t-display { font-family: var(--font-head); font-weight: 500; font-size: 34px; line-height: 1.18; letter-spacing: -0.015em; }
.t-h2      { font-family: var(--font-head); font-weight: 500; font-size: 26px; line-height: 1.2; }
.t-h3      { font-family: var(--font-head); font-weight: 500; font-size: 21px; line-height: 1.25; }
.t-lead    { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.t-body    { font-size: 17px; line-height: 1.6; }
.t-small   { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.t-eyebrow { font-size: 13px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.t-price   { font-family: var(--font-head); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* ---- кнопки ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform .14s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(51,53,47,0.08), 0 8px 22px color-mix(in oklch, var(--accent) 30%, transparent);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-ghost {
  background: transparent;
  color: var(--accent-deep);
  border: 1.5px solid color-mix(in oklch, var(--accent) 45%, var(--line));
}
.btn-ghost:hover { background: var(--accent-tint); }

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.btn-quiet:hover { border-color: var(--ink-faint); }

.btn-sm { min-height: 46px; font-size: 16px; border-radius: var(--r-sm); width: auto; padding: 0 18px; }

/* ---- утилиты ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* помеченная заглушка-плейсхолдер */
.placeholder-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bronze-deep);
  background: var(--bronze-tint);
  border: 1px dashed color-mix(in oklch, var(--bronze) 45%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
}

/* мягкая «фото-заглушка» */
.photo-ph {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,0.5), transparent 60%),
    linear-gradient(160deg, var(--surface-2), #e3ddd1);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  overflow: hidden;
}

/* скрытие нативного скролл-бара внутри телефона */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

input, textarea, select, button { font-family: inherit; }

/* поля формы — крупные, высокий контраст */
.field {
  width: 100%;
  min-height: 56px;
  padding: 16px 16px;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.field-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .45s ease; }

/* ============================================================
   Движение — спокойное, медленное, с уважением к аудитории 45+.
   Никаких резких эффектов. Анимация помогает понять, а не отвлекает.
   ============================================================ */

/* плавное появление секций при прокрутке */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* мягкий пульс-подсказка у ползунка «до/после» (3 раза, затем тишина) */
@keyframes baPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 18px color-mix(in oklch, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
}
.ba-pulse { animation: baPulse 2.3s ease-out 3; }

/* мягкий подъём карточек при наведении — только на устройствах с курсором */
@media (hover: hover) {
  .card-lift { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
  .card-lift:hover { transform: translateY(-2px); }
}

/* уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- верификация надгробия: «сканирование» данных ---- */
@keyframes scanSweep {
  0%   { top: 4%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 96%; opacity: 0; }
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px 2px color-mix(in oklch, var(--accent) 60%, transparent);
  animation: scanSweep 1.7s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes bracketBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.scan-bracket { animation: bracketBreathe 1.7s ease-in-out infinite; }
@keyframes ringOut {
  0%   { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}
.verify-ring { animation: ringOut 2s ease-out infinite; }

/* ---- нижняя навигация ---- */
.navtab { -webkit-tap-highlight-color: transparent; }
.navtab-pill { transition: background .26s ease, color .2s ease, transform .2s cubic-bezier(.2,.85,.3,1); }
.navtab:active .navtab-pill { transform: scale(0.86); }
.navtab:active .navtab-label { opacity: 0.7; }