/* =========================================================
   TRUE VOICE — REMIX · PREMIUM POLISH LAYER
   Loaded AFTER remix.css + remix-2.css.
   Same copy, same structure — refined craft:
   quieter texture, disciplined rhythm, precise red,
   first-class mobile (360–430px).
   ========================================================= */

/* ── 1 · RHYTHM — one vertical scale for the whole page ── */
:root {
  --sect-y: clamp(72px, 11vw, 152px);   /* section breathing */
  --head-gap: clamp(36px, 6vw, 72px);   /* section head → content */
  --hairline:        rgba(246,244,240,0.07);
  --hairline-strong: rgba(246,244,240,0.15);
}
.tv-section { padding-top: var(--sect-y); padding-bottom: var(--sect-y); }
@media (min-width: 900px) {
  .tv-section { padding-top: var(--sect-y); padding-bottom: var(--sect-y); }
}
.tv-sh { margin-bottom: var(--head-gap); }

/* optical care on the big condensed heads */
.tv-h2 { letter-spacing: 0.002em; line-height: 0.94; }
.tv-body { font-size: 15.5px; line-height: 1.7; max-width: 62ch; }

/* ── 2 · QUIETER TEXTURE — grain felt, not seen ────────── */
body::before { opacity: 0.038 !important; }
body::after  { opacity: 0.028; animation-duration: 40s; }
#root::after {
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.45) 100%);
}
.tv-drift-blob { opacity: 0.32; }

/* ghost watermarks — a whisper */
.hx-ghost { -webkit-text-stroke-color: rgba(246,244,240,0.045); }
.kx-ghost { -webkit-text-stroke: 1px rgba(246,244,240,0.038); }

/* scroll progress — hairline, no neon */
.kx-progress {
  height: 2px;
  background: var(--tv-accent);
  box-shadow: none;
}

/* cursor dot — smaller halo */
.kx-cursor { box-shadow: 0 0 10px rgba(230,0,18,0.4); }

/* ── 3 · PRECISE RED — accent as a scalpel, not a flood ── */
.tv-hero {
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(230,0,18,0.09) 0%, transparent 60%),
    linear-gradient(180deg, #060607 0%, #0A0A0B 60%, #060607 100%);
}
.tv-hero-wordmark .t2 { text-shadow: 0 0 46px rgba(230,0,18,0.32); }
.tv-final {
  background:
    radial-gradient(85% 70% at 50% 0%, rgba(230,0,18,0.14), transparent 58%),
    linear-gradient(180deg, #0B0405 0%, var(--bg-deep) 100%);
}
.tv-guarantee {
  background: radial-gradient(60% 80% at 50% 50%, rgba(230,0,18,0.055), transparent 65%), var(--bg);
}
.tv-how-step .num { box-shadow: 0 0 18px rgba(230,0,18,0.3); }
.tv-guarantee-seal { filter: drop-shadow(0 0 24px rgba(230,0,18,0.22)); }
.tv-popup { box-shadow: 0 30px 100px rgba(0,0,0,0.75), 0 0 48px rgba(230,0,18,0.2); }

/* marquee words — finer stroke, calmer contrast */
.kx-word { -webkit-text-stroke-width: 1.1px; -webkit-text-stroke-color: rgba(246,244,240,0.32); }
.kx-word--solid, .kx-word--red { -webkit-text-stroke-width: 0; }
.kx-band--accent .kx-word { -webkit-text-stroke-width: 1.1px; }
.kx-band--accent .kx-word--solid { -webkit-text-stroke-width: 0; }

/* ── 4 · BUTTONS — engineered, unhurried ───────────────── */
.tv-btn {
  min-height: 52px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 0 28px rgba(230,0,18,0.22);
  transition:
    color 420ms var(--ease-power),
    box-shadow 420ms var(--ease-power),
    transform 200ms var(--ease-power);
}
.tv-btn::before { transition: transform 480ms var(--ease-power); }
.tv-btn:hover { box-shadow: inset 0 0 0 1px rgba(230,0,18,0.7), 0 0 28px rgba(230,0,18,0.28); }
.tv-btn:active { transform: translateY(1px) scale(0.995); }
.tv-btn .arrow { transition: transform 420ms var(--ease-power); }
.tv-btn--ghost { box-shadow: inset 0 0 0 1px var(--hairline-strong); background: transparent; }
.tv-btn--ghost::before { display: none; }
.tv-btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(246,244,240,0.4); background: rgba(246,244,240,0.03); }

/* focus ring — visible, on-brand */
.tv-btn:focus-visible, .tv-faq-item summary:focus-visible, a:focus-visible {
  outline: 1px solid var(--tv-accent);
  outline-offset: 3px;
}

/* links */
a { color: inherit; }
a:hover { color: var(--fg); }

/* ── 5 · CARD CRAFT — hairlines + lift, no noise ───────── */
.tv-pain-card, .tv-bonus-card, .tv-method-card, .tv-day, .tv-final-card, .tv-voice {
  transition: border-color 380ms var(--ease-power), transform 380ms var(--ease-power), background 380ms var(--ease-power);
}
.tv-day:hover, .tv-method-card:hover, .tv-bonus-card:hover, .tv-pain-card:hover {
  transform: translateY(-2px);
}
.tv-hero-price {
  border: 1px solid var(--hairline-strong);
  background: rgba(10,10,11,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 18px 22px;
  margin-top: 14px;
}
.tv-final-card { border: 1px solid var(--hairline-strong); background: rgba(10,10,11,0.6); }

/* reveal — slightly slower, more decisive */
.kx-reveal {
  transform: translateY(30px);
  transition-duration: 1050ms, 1050ms, 1050ms;
}

/* ── 6 · AIR around money moments ──────────────────────── */
.tv-hero-inner { display: flex; flex-direction: column; gap: 18px; }
.tv-hero-ctas { margin-top: 10px; }
.tv-hero-bullets { margin-top: 20px; }

/* ── 7 · MOBILE — 360–430px first-class ────────────────── */
@media (max-width: 719px) {
  :root {
    --safe-x: 20px;
    --sect-y: 64px;
    --head-gap: 32px;
  }

  /* hero: tighter stack, no crowding */
  .tv-hero { padding-top: 108px; padding-bottom: 96px; }
  .tv-hero-inner { gap: 14px; }
  .tv-hero-wordmark { font-size: clamp(64px, 24vw, 110px); }
  .tv-hero-headline { font-size: clamp(26px, 8vw, 38px); line-height: 1.02; max-width: 100%; }
  .tv-hero-sub { font-size: 14.5px; line-height: 1.6; }
  .tv-hero-price { width: 100%; padding: 14px 16px; }
  .tv-hero-price .new { font-size: 34px; }
  .tv-hero-trust { font-size: 12px; line-height: 1.55; }
  .tv-hero-tape { display: none; }
  .hx-ghost { opacity: 0.45; font-size: 46vw; }

  /* type scale: calmer maxima on narrow screens */
  /* .tv-sh is a column flex with align-items:flex-start, so the head sizes to
     min-content — at this scale a long word ("непередбачуваним") pushes the
     page wider than the viewport. Cap the box and let it break. */
  .tv-h2 {
    font-size: clamp(34px, 10.5vw, 46px);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .kx-word { font-size: clamp(40px, 13vw, 58px); -webkit-text-stroke-width: 1px; }
  .kx-band { padding: 22px 0; }
  .kx-star { width: 16px; height: 16px; margin: 0 0.34em; }

  /* buttons: full-width, ≥52px targets */
  .tv-btn { width: 100%; min-height: 54px; padding: 16px 22px; }
  .tv-nav-cta { width: auto !important; min-height: 40px; padding: 10px 14px !important; }
  .tv-sticky .tv-btn { width: auto; min-height: 48px; }

  /* day-number watermark: smaller, inside the card */
  .tv-day::before { font-size: 84px; right: 10px; bottom: -6px; }

  /* faq: generous tap area */
  .tv-faq-item summary { padding-top: 20px; padding-bottom: 20px; min-height: 56px; }

  /* drawer links breathe */
  .tv-drawer a { font-size: 34px; padding: 18px 0; }

  /* popup: comfortable form, no iOS zoom */
  .tv-popup-form input { font-size: 16px; min-height: 48px; }
  .tv-popup-close { width: 44px; height: 44px; }

  /* performance: kill costly fixed layers on phones */
  body::after { animation: none; opacity: 0.02; }
  .tv-drift { display: none; }
  #root::after { display: none; }
}

/* very narrow (≤370px): protect the wordmark and prices */
@media (max-width: 370px) {
  .tv-hero-wordmark { font-size: 58px; }
  .tv-hero-price { gap: 8px; }
  .cd-num { font-size: 26px; }
}

/* ── 8 · MOTION RESPECT ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after, .tv-drift-blob, .kx-marquee, .tv-hero-armature { animation: none !important; }
  .tv-btn, .tv-btn::before, .tv-day, .tv-method-card, .tv-bonus-card, .tv-pain-card { transition: none !important; }
}