/* ════════════════════════════════════════════════════════════
   kovalov.tattoo — main page styles
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NAV ─────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px;
  transition: background 0.5s, border-color 0.5s, padding 0.4s;
}
#nav.scrolled {
  background: rgba(11, 10, 8, 0.92);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--border);
  padding: 16px 56px;
}

/* ── Страницы без героя ──────────────────────────────────
   На главной #nav прозрачен поверх героя и получает фон
   только после скролла. На блоге и служебных страницах
   героя нет, поэтому фон нужен сразу. */
body.doc-page #nav {
  background: rgba(11, 10, 8, 0.92);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-logo svg { display: block; height: 26px; width: 72.8px; }
.nav-logo svg path,
.nav-logo svg rect { transition: fill 0.3s cubic-bezier(0.16,1,0.3,1), stroke 0.3s cubic-bezier(0.16,1,0.3,1); }
.nav-logo:hover { color: var(--accent); }
.nav-clock { font-size: 11px; letter-spacing: 0.1em; color: var(--text-2); font-weight: 300; }

.nav-links { display: flex; gap: 48px; list-style: none; }
.nav-links a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  font-weight: 400;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--text); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 150px;
  justify-content: flex-end;
}
.nav-cta { padding: 11px 22px 9px; font-size: 11px; letter-spacing: 0.14em; }
.nav-cta-short { display: none; }

/* Кнопка появляется, когда герой ушёл с экрана: на первом экране призыв
   и так есть, две одинаковые кнопки рядом читаются как ошибка.
   Класс is-auto ставит скрипт — без него кнопка просто видна всегда,
   иначе при отключённом JS призыв исчез бы совсем. */
.nav-cta {
  position: relative;
  transition: background 0.25s, color 0.25s, border-color 0.25s,
              opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Зона нажатия добирается до 44px по вертикали, не раздувая саму кнопку:
   рекомендация Apple по минимальному размеру цели для пальца. */
.nav-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
/* Автопоявление только на телефоне. На широких экранах шапка просторная,
   и постоянный призыв там уместен: класс is-auto скрипт ставит всегда,
   но за пределами этого медиа-запроса он ни на что не влияет. */
@media (max-width: 720px) {
  .nav-cta.is-auto {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: background 0.25s, color 0.25s, border-color 0.25s,
                opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.35s;
  }
  .nav-cta.is-auto.show {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: background 0.25s, color 0.25s, border-color 0.25s,
                opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
  }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .nav-cta.is-auto, .nav-cta.is-auto.show { transition: none; }
  .nav-cta.is-auto { transform: none; }
}

/* ── BURGER + MOBILE MENU ────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 320;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.nav-burger.open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 90px 28px 48px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), visibility 0.35s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.mobile-menu-links a {
  font-size: 30px;
  font-weight: 200;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-menu-links a:active { color: var(--accent); }
.mobile-menu-cta { padding: 15px 32px 13px; font-size: 12px; }
.mobile-menu-social { display: flex; gap: 14px; margin-top: 4px; }
.mobile-menu-lang {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.mobile-lang-btn {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-2);
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--border);
  transition: color 0.2s, border-color 0.2s;
}
.mobile-lang-btn.active { color: var(--text); border-color: var(--border-2); }
.mobile-lang-btn:hover { color: var(--text); border-color: var(--border-2); }
body.menu-locked { overflow: hidden; }

.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent);
  width: 0%;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── HERO ────────────────────────────────────── */
#hero {
  height: 100vh;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 136px 56px 64px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
}
.hero-bg img {
  height: 100%;
  width: clamp(520px, 62vw, 1060px);
  object-fit: cover;
  object-position: 30% center;
  display: block;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(11,10,8,0.97) 0%, rgba(11,10,8,0.82) 35%, rgba(11,10,8,0.25) 65%, rgba(11,10,8,0.08) 100%),
    linear-gradient(to bottom, rgba(11,10,8,0.6)  0%, transparent 30%, transparent 70%, rgba(11,10,8,0.5) 100%);
}

.hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 640px;
}
.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
  margin-bottom: 22px;
}
.hero-h1 {
  font-size: clamp(40px, 7vw, 100px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 26px;
}
.hero-copy {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 34px;
  max-width: 520px;
}
.hero-meta {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--text-2);
  font-weight: 300;
  opacity: 0.85;
}
.hero-actions { display: flex; gap: 16px; align-items: center; }
.hero-actions-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-2);
  margin: 4px 0;
}
.hero-social { display: flex; gap: 10px; }

@keyframes scrollArrow {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  55%       { transform: translateY(6px); opacity: 1; }
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.6; }
}
.hero-scroll svg { animation: scrollArrow 2.6s ease-in-out infinite; }
.hero-scroll::after { animation: scrollLine 2.6s ease-in-out infinite; }
.hero-scroll {
  position: absolute;
  bottom: 64px;
  right: 56px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--border-2), transparent);
}

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn-solid { padding: 16px 36px 14px; background: var(--text); color: var(--bg); }
.btn svg { position: relative; top: -2px; }
.btn-solid:hover { background: var(--accent); }
.btn-ghost {
  padding: 15px 28px 13px;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--text-2); color: var(--text); }

.icon-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(184, 168, 138, 0.06);
}


/* ── SECTIONS ────────────────────────────────── */
section { position: relative; }

.section-inner {
  padding: 120px 56px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.section-inner > * { grid-column: 1 / -1; min-width: 0; }

.label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
  margin-bottom: 20px;
}
.section-h2 {
  font-size: clamp(36px, 4vw, 68px);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

/* ── ABOUT ───────────────────────────────────── */
.about-left { grid-column: 1 / span 4; position: sticky; top: 120px; }
.about-right { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: 64px; }
.about-block {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.about-block-head {
  grid-column: span 2;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.about-block-body { grid-column: span 6; min-width: 0; }
.about-block p { font-size: 17px; line-height: 1.8; color: var(--text-2); font-weight: 300; text-wrap: pretty; }
.about-block p + p { margin-top: 24px; }

/* ── PORTFOLIO ───────────────────────────────── */
#portfolio .section-inner { padding-bottom: 80px; }
.portfolio-top {
  display: flex;
  /* По нижнему краю строка выглядела съехавшей: у заголовка
     и у кнопок разная высота, и совпадал только низ. */
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 32px;
  flex-wrap: wrap;
}

.filter-bar { display: flex; border: 1px solid var(--border-2); }
.filter-btn {
  padding: 11px 18px 9px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-2);
  background: none;
  border: none;
  border-right: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-btn:last-child { border-right: none; }
.filter-btn.active, .filter-btn:hover { background: var(--text); color: var(--bg); }

.filter-select { display: none; position: relative; width: 100%; }
.filter-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
  background: none;
  border: 1px solid var(--border-2);
  cursor: pointer;
  padding: 14px 18px;
  transition: border-color 0.2s;
}
.filter-chevron { stroke: var(--text-2); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.filter-select.open .filter-chevron { transform: rotate(180deg); }
.filter-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 0; right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border-2);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.filter-select.open .filter-dropdown { opacity: 1; transform: translateY(0); pointer-events: all; }
.filter-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.filter-opt:last-child { border-bottom: none; }
.filter-opt:hover, .filter-opt.active { background: var(--border); color: var(--text); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 40px;
}
.portfolio-cell {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--surface);
  transition: opacity 0.35s;
}
.portfolio-cell.hidden { display: none; }
.portfolio-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ── FLASH MARQUEE ───────────────────────────── */
#flash { padding: 100px 0 104px; overflow: hidden; }
.flash-head {
  padding: 0 56px;
  margin-bottom: 52px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.flash-head-text { max-width: 640px; min-width: 0; }
.flash-title {
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 4px 0 16px;
}
.flash-sub { font-size: 15px; line-height: 1.7; color: var(--text-2); font-weight: 300; }

.flash-hint {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
@keyframes flashHintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.flash-hint svg { animation: flashHintNudge 1.6s ease-in-out infinite; }

.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.marquee-inner {
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: flashScroll 75s linear infinite;
}
@keyframes flashScroll {
  from { transform: translateX(var(--flash-start, 0px)); }
  to   { transform: translateX(calc(var(--flash-start, 0px) - 50%)); }
}
.flash-card {
  flex: 0 0 auto;
  width: 184px;
  height: 327px;
  margin-right: 16px;
  background: linear-gradient(180deg, #f6f6f6 0%, #ececec 100%);
  overflow: hidden;
  position: relative;
}
.flash-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flash-card-id {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  z-index: 1;
  pointer-events: none;
}
.flash-book {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11,10,8,0.88);
  padding: 11px 8px;
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  z-index: 1;
}
.flash-card:hover .flash-book { transform: translateY(0); }
@media (hover: none) { .flash-book { transform: translateY(0); } }
.flash-card--done img { filter: brightness(0.78) grayscale(0.25); }
.flash-book--done { cursor: default; background: rgba(11,10,8,0.72); letter-spacing: 0.16em; }

/* Flash prev/next nav */
.flash-nav { display: none; gap: 8px; flex-shrink: 0; margin-top: 8px; }
@media (min-width: 721px) { .flash-nav { display: flex; } }
.flash-nav-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}
.flash-nav-btn:hover { background: var(--accent); }
.flash-nav-btn:active { background: var(--accent); }

.see-more-row { display: flex; justify-content: center; padding-top: 32px; }
.see-more {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.25s;
}
.see-more::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--border-2);
  transition: width 0.3s, background 0.3s;
}
.see-more:hover { color: var(--text); }
.see-more:hover::after { width: 64px; background: var(--text-2); }

/* ── PROCESS ─────────────────────────────────── */
.process-intro {
  grid-column: 1 / span 4;
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.process-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-2);
  font-weight: 300;
  max-width: 420px;
  text-wrap: pretty;
}
.timeline {
  /* Колонка 5 оставлена пустой: на 24px жёлоба таймлайн слипался
     с заголовком слева. Правый край по-прежнему вровень с about и faq. */
  grid-column: 6 / span 7;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 28px;
  align-items: start;
}
.step::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: -72px;
  width: 1px;
  background: var(--border-2);
}
.step:last-child::before { display: none; }
.step-circle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border-2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 400;
  line-height: 1;
  padding-top: 2px;
  padding-left: 1px;
}
.step-body { max-width: 580px; min-width: 0; }
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; height: 36px; }
.step-name { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; line-height: 36px; }
.step-meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 400; white-space: nowrap; }
.step-text { font-size: 15px; color: var(--text-2); line-height: 1.7; font-weight: 300; margin-top: 8px; max-width: 440px; text-wrap: pretty; }

/* ── PRICING ─────────────────────────────────── */
.pricing-top { margin-bottom: 56px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.pricing-col {
  grid-column: span 4;
  min-width: 0;
  padding: 52px 44px;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
}
.pricing-col.featured { background: rgba(255,255,255,0.05); }

.p-tier { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); font-weight: 400; margin-bottom: 28px; }
.p-od { font-size: 14px; font-weight: 300; color: var(--text-2); letter-spacing: 0.05em; }
.p-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 6px;
}
.p-price sub { font-size: 18px; font-weight: 300; color: var(--text-2); vertical-align: baseline; }
.p-tagline { font-size: 15px; font-weight: 200; color: var(--text); opacity: 0.7; line-height: 1.5; margin-bottom: 32px; }

.p-divider { height: 1px; background: var(--border); margin-bottom: 32px; }

.p-features { list-style: none; flex: 1; margin-bottom: 0; }
.p-features li {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 300;
}
.p-features li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289C13.3166 6.90237 12.6834 6.90237 12.2929 7.29289L9 10.5858L7.70711 9.29289C7.31658 8.90237 6.68342 8.90237 6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L8.29289 12.7071C8.68342 13.0976 9.31658 13.0976 9.70711 12.7071L13.7071 8.70711Z' fill='%23b8a88a'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px;
}
.p-features li.cross::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.165 6.80078C12.7746 6.41034 12.1405 6.4105 11.75 6.80078L9.98242 8.56836L8.25 6.83594C7.85953 6.44584 7.22637 6.44577 6.83594 6.83594C6.44557 7.22635 6.44577 7.85946 6.83594 8.25L8.56836 9.98242L6.80078 11.75C6.41026 12.1405 6.41026 12.7745 6.80078 13.165C7.19127 13.555 7.82446 13.5552 8.21484 13.165L9.98242 11.3965L11.7861 13.2002C12.1767 13.5904 12.8098 13.5906 13.2002 13.2002C13.5904 12.8098 13.5903 12.1766 13.2002 11.7861L11.3965 9.98242L13.165 8.21484C13.5549 7.82444 13.5549 7.19119 13.165 6.80078Z' fill='%236b6760'/%3E%3C/svg%3E");
}
.p-cta {
  margin-top: 36px;
  display: block;
  text-decoration: none;
  padding: 16px 15px 14px;
  text-align: center;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  /* Текст белый, а не приглушённый: серый читался как неактивная кнопка.
     Рамка остаётся тёмной — белая по контуру перетягивала внимание
     с выделенного тарифа. */
  color: var(--text);
  background: none;
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.p-cta:hover, .pricing-col.featured .p-cta { background: var(--text); color: var(--bg); border-color: var(--text); }
.pricing-col.featured .p-cta:hover { background: var(--accent); border-color: var(--accent); }
.pricing-footer-note { margin-top: 20px; font-size: 12px; color: var(--text-2); }

/* ── LANG SWITCHER ───────────────────────────── */
.lang-switcher { position: relative; }
.lang-current {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.2s;
}
.lang-current:hover { color: var(--text); }
.lang-current:hover .lang-chevron { stroke: var(--text); }
.lang-chevron { stroke: var(--text-2); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), stroke 0.2s; }
.lang-switcher.open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  min-width: 160px;
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lang-switcher.open .lang-dropdown { opacity: 1; transform: translateY(0); pointer-events: all; }
.lang-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 20px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-2);
  text-align: left;
  transition: background 0.18s, color 0.18s;
}
.lang-option:last-child { border-bottom: none; }
.lang-option:hover { background: var(--border); color: var(--text); }
.lang-option.active { color: var(--text); }
.lang-abbr { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; min-width: 24px; }
.lang-option.active .lang-abbr { color: var(--accent); }
.lang-name { font-size: 13px; letter-spacing: 0.02em; font-weight: 300; }
.lang-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-left: auto; flex-shrink: 0; }

/* ── FAQ ─────────────────────────────────────── */
.faq-cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.faq-left { grid-column: 1 / span 4; position: sticky; top: 120px; }
.faq-list { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: 64px; }
.faq-group {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.faq-group-title {
  grid-column: span 2;
  padding-top: 32px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.faq-group-items { grid-column: span 6; min-width: 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 26px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  transition: color 0.2s;
}
.faq-question:hover { color: var(--accent); }
.faq-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text-2);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s;
}
.faq-icon::before { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-icon::after  { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-item.open .faq-icon::before { transform: translateX(-50%) scaleY(0); opacity: 0; }

.faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1); }
.faq-item.open .faq-answer { max-height: 900px; }
.faq-answer-inner {
  padding-bottom: 28px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
  font-weight: 300;
  max-width: 700px;
}
.faq-answer-inner p + p { margin-top: 14px; }
/* Ссылки в тексте: тот же вид в ответах FAQ и в блоках about/local,
   иначе браузер рисует их дефолтным синим прямо на тёмном фоне. */
.faq-answer-inner a,
.about-block-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  transition: border-color 0.2s;
}
.faq-answer-inner a:hover,
.about-block-body a:hover { border-color: var(--accent); }
.faq-checklist { list-style: none; margin: 14px 0 0; padding: 0; }
.faq-checklist li { position: relative; padding-left: 24px; }
.faq-checklist li + li { margin-top: 10px; }
.faq-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.faq-checklist li strong { font-weight: 500; color: var(--text); }

/* ── APPROACH ─────────────────────────────────── */
.approach-head { grid-column: 1 / span 8; margin-bottom: 96px; }
.principles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.principle {
  grid-column: span 4;
  min-width: 0;
  padding: 48px 44px 52px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
}
.principle-icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 48px; }
.principle-icon svg { width: 100%; height: 100%; display: block; }
.principle-name { font-size: 21px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 22px; }
.principle-text { font-size: 14px; line-height: 1.75; color: var(--text-2); font-weight: 300; }

/* ── TRUST STRIP ──────────────────────────────── */
.trust-strip {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
}
.trust-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
  margin-right: 4px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--text);
  font-weight: 300;
}
.trust-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.trust-strip--standalone { margin-top: 0; padding-top: 0; border-top: none; }

/* ── CTA ─────────────────────────────────────── */
#cta .section-inner { text-align: center; padding: 160px 56px; }
.cta-title {
  font-size: clamp(52px, 7vw, 112px);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin-bottom: 36px;
}
.cta-body { font-size: 18px; color: var(--text-2); max-width: 520px; margin: 0 auto 60px; line-height: 1.75; font-weight: 300; }
.cta-actions { display: flex; gap: 12px; justify-content: center; }

/* ── FOOTER ──────────────────────────────────── */
#footer {
  border-top: 1px solid var(--border);
  padding: 28px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-brand { font-size: 13px; letter-spacing: 0.12em; color: var(--text-2); font-weight: 400; }
.footer-copy { font-size: 12px; color: var(--text-2); }
.footer-right { display: flex; align-items: center; gap: 28px; }
.footer-cookies {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-cookies:hover { color: var(--text); }

/* ── COOKIE CONSENT (GDPR) ───────────────────── */
html.cc-locked, body.cc-locked { overflow: hidden !important; overscroll-behavior: none; }
.cc[hidden] { display: none; }
.cc-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(11, 10, 8, 0.4); animation: ccFade 0.5s ease both; }
.cc-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 901;
  background: var(--surface);
  border-top: 1px solid var(--border-2);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45);
  animation: ccSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cc-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}
.cc-text-wrap { max-width: 760px; }
.cc-title { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 12px; }
.cc-text { font-size: 14px; line-height: 1.7; color: var(--text-2); font-weight: 300; }
.cc-text a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.cc-text a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cc-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cc-btn {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cc-reject { padding: 15px 30px 13px; background: transparent; color: var(--text-2); border: 1px solid var(--border-2); }
.cc-reject:hover { border-color: var(--text-2); color: var(--text); }
.cc-accept { padding: 16px 38px 14px; background: var(--text); color: var(--bg); border: 1px solid var(--text); }
.cc-accept:hover { background: var(--accent); border-color: var(--accent); }

/* ── SCROLL REVEAL ───────────────────────────── */
.r { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.r.visible { opacity: 1; transform: translateY(0); }
.r-delay-1 { transition-delay: 0.08s; }
.r-delay-2 { transition-delay: 0.16s; }
.r-delay-3 { transition-delay: 0.24s; }
.r-delay-4 { transition-delay: 0.32s; }
.r-delay-5 { transition-delay: 0.40s; }

/* ── NAV: burger on tablet ───────────────────── */
@media (max-width: 1100px) {
  .about-block { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .about-block-head, .about-block-body { grid-column: auto; }
  .faq-group { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .faq-group-title { grid-column: auto; padding-top: 0; }
  .faq-group-items { grid-column: auto; }
}

@media (max-width: 1000px) {
  /* В полосе 720–1000px колонки узкие: сдвиг таймлайна вправо
     съедал бы ширину текста шага. Здесь он остаётся на месте. */
  .timeline { grid-column: 5 / span 8; }

  .nav-links { display: none; }
  .nav-burger { display: flex; }

  /* Там, где появляется бургер, меняем порядок: призыв уходит левее,
     смена языка встаёт вплотную к бургеру. Порядком, а не разметкой,
     чтобы на широких экранах ничего не поехало.
     Список языков открывается по правому краю (right: 0), поэтому
     от сдвига вправо он не вылезает за экран. */
  .nav-cta       { order: 1; }
  .lang-switcher { order: 2; }
  .nav-burger    { order: 3; }
}

/* ── MOBILE ──────────────────────────────────── */
@media (max-width: 720px) {
  #nav { padding: 18px 22px; z-index: 300; }
  #nav.scrolled { padding: 14px 22px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  /* Призыв переехал из нижней полосы в шапку: на айфоне светлая кнопка
     у нижнего края перекрашивала панель Safari в белый, и зазором это
     не лечилось. В шапке кнопка мелкая и тёмный фон вокруг преобладает. */
  /* Призыв на телефоне живёт плавающей кнопкой внизу экрана — в шапке
     он дублировал бы её. На планшете и десктопе кнопка в шапке остаётся:
     плавающей там нет. */
  .nav-cta { display: none; }
  .nav-right { gap: 18px; min-width: 0; }
  .nav-clock { display: none; }
  .vline { display: none; }
  .section-inner { padding: 72px 22px; grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .section-h2 { font-size: clamp(30px, 8vw, 40px); }
  #hero { padding: 116px 22px 48px; min-height: 600px; }
  .hero-bg img { width: 100%; object-position: 33% center; }
  .hero-bg::after {
    background: linear-gradient(to bottom,
      rgba(11,10,8,0.30) 0%,
      rgba(11,10,8,0.08) 22%,
      rgba(11,10,8,0.26) 42%,
      rgba(11,10,8,0.64) 57%,
      rgba(11,10,8,0.89) 76%,
      rgba(11,10,8,0.98) 100%);
  }
  .hero-eyebrow { margin-bottom: 18px; color: rgba(236,231,220,0.6); text-shadow: 0 1px 12px rgba(11,10,8,0.85); }
  .hero-h1, .hero-copy { text-shadow: 0 1px 18px rgba(11,10,8,0.6); }
  .hero-h1 { font-size: clamp(42px, 12vw, 56px); margin-bottom: 22px; }
  .hero-copy { font-size: 15px; margin-bottom: 28px; }
  .hero-actions { flex-wrap: wrap; gap: 14px; }
  .hero-actions-divider { display: none; }
  .hero-meta { font-size: 12px; }
  .hero-scroll { display: none; }
  .about-left, .about-right { grid-column: auto; }
  /* Заголовок секции должен отстоять от подписи первого блока дальше,
     чем подпись от своего текста (14px) и чем блоки друг от друга (40px).
     Без этого «Раньше» читается как часть заголовка, а не как ярлык абзаца. */
  .about-left { position: static; margin-bottom: 56px; }
  .about-right { gap: 40px; }
  .about-block p { font-size: 16px; }
  #portfolio .section-inner { padding-bottom: 56px; }
  .portfolio-top { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .filter-bar { display: none; }
  .filter-select { display: block; }
  .portfolio-top > div:last-child { width: 100%; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  #flash { padding: 64px 0 68px; }
  .flash-head { padding: 0 22px; margin-bottom: 36px; }
  .flash-hint { display: inline-flex; }
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: 22px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; padding: 0 22px; }
  .flash-card { scroll-snap-align: start; }
  .marquee-track [aria-hidden="true"] { display: none; }
  .process-intro { grid-column: auto; position: static; gap: 20px; margin-bottom: 48px; }
  .timeline { grid-column: auto; padding-top: 0; gap: 44px; }
  .step { column-gap: 20px; }
  .step::before { bottom: -44px; }
  .step-head { height: auto; align-items: flex-start; flex-direction: column; gap: 4px; }
  .step-name { font-size: 20px; line-height: 1.3; }
  .pricing-top { margin-bottom: 36px; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .pricing-col { grid-column: auto; padding: 40px 26px; }
  /* Было 32px — меньше, чем 40px между группами вопросов, и заголовок
     притягивался к первой подписи сильнее, чем группы друг к другу. */
  .faq-cols { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .faq-left, .faq-list { grid-column: auto; }
  .faq-list { gap: 40px; }
  .faq-left { position: static; }
  .faq-question { gap: 20px; padding: 24px 0; font-size: 16px; }
  .faq-answer-inner p { font-size: 15px; }
  #cta .section-inner { padding: 88px 22px; }
  .cta-title { font-size: clamp(40px, 12vw, 64px); }
  .cta-body { font-size: 16px; margin-bottom: 40px; }
  .cta-actions { flex-direction: column; gap: 12px; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  #footer { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
  .cc-inner { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px)); }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; text-align: center; padding-left: 12px; padding-right: 12px; }
  .principles { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .principle { grid-column: auto; padding: 36px 26px 40px; }
  .principle-icon { margin-bottom: 32px; }
  .approach-head { grid-column: auto; margin-bottom: 44px; }
  .flash-head { flex-direction: column; gap: 22px; }
  .trust-strip { gap: 13px 22px; }
  #footer { flex-wrap: wrap; gap: 14px; padding: 22px; }
  .footer-right { gap: 18px; }
}

@media (max-width: 460px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .section-h2 { font-size: clamp(28px, 9vw, 36px); }
  .mobile-menu-links a { font-size: 26px; }
  .p-price { font-size: 46px; }
}

@media (min-width: 1100px) {
  .hero-main { max-width: 880px; }
  .hero-h1 { white-space: nowrap; }
}

/* ── Локальный блок «Татуировка в Праге» ───────────────────
   Переиспользует сетку секции about и её же ритм: блоки здесь
   короче, но разный шаг между секциями сбивал иерархию. */
.local-blocks { gap: 40px; }

/* На узких телефонах (320–374px) логотип, язык, призыв и бургер
   в одну строку не помещаются: переключатель языка налезал на логотип.
   Ужимаем отступы и кнопку — прятать язык нельзя, в мобильном меню
   его нет. */
@media (max-width: 374px) {
  #nav { padding: 16px 16px; }
  #nav.scrolled { padding: 13px 16px; }
  .nav-right { gap: 14px; }
}

/* ── ПЛАВАЮЩИЙ ПРИЗЫВ (тест) ──────────────────
   Компактная кнопка поверх контента: подложки нет намеренно,
   чтобы было видно, как элементы прокручиваются за ней.
   Углы прямые — как у остальных кнопок сайта.

   Осторожно: это тот самый светлый элемент у нижнего края, из-за
   которого Safari на iPhone перекрашивал свою панель в белый.
   Здесь кнопка узкая и не на всю ширину, но проверять только на
   живом телефоне. Если панель побелеет — вариант отменяется. */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 250;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 62px 12px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s,
              visibility 0s linear 0.35s;
}
.float-cta.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s,
              visibility 0s;
}
/* Кнопка стала ниже, поэтому зону нажатия добираем до 44px невидимым
   псевдоэлементом — как у кнопки в шапке. */
.float-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}
.float-cta:hover { background: var(--accent); }
@media (max-width: 720px) { .float-cta { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) {
  .float-cta, .float-cta.show { transition: none; }
  .float-cta { transform: translate(-50%, 0); }
}

/* ── REVIEWS ─────────────────────────────────────
   Секция по макету из Figma-хендоффа. Ленты бесконечные, поэтому
   высота секции не зависит от числа отзывов: хоть 7, хоть 100. */
#reviews .section-inner {
  padding: 120px 0;          /* горизонтальных полей нет — ленты идут в край */
  display: block;
}
.reviews-head {
  padding: 0 56px;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
}
.reviews-h2 {
  grid-column: 1 / span 6;
  font-size: clamp(36px, 4vw, 68px);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
}
.reviews-score {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.reviews-score-row { display: flex; align-items: baseline; gap: 14px; }
.reviews-score-num {
  font-size: 44px;
  font-weight: 100;
  letter-spacing: -0.03em;
  line-height: 1;
}
.reviews-stars {
  position: relative;
  top: -4px;
  display: inline-flex;
  gap: 5px;
  color: var(--accent);
}
.reviews-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.25s;
}
.reviews-link::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--border-2);
  margin-left: 14px;
}
.reviews-link:hover { color: var(--text); }

.reviews-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reviews-row {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: revMarquee 90s linear infinite;
}
/* Второй ряд едет в обратную сторону и медленнее — ряды не синхронны */
.reviews-row.is-reverse { animation: revMarqueeBack 104s linear infinite; }
@keyframes revMarquee     { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes revMarqueeBack { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

.rev {
  width: 360px;
  height: 210px;              /* фиксированная: карточки одинаковые при любой длине текста */
  flex-shrink: 0;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rev-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rev-stars { display: inline-flex; gap: 4px; color: var(--accent); flex-shrink: 0; }
.rev-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  font-weight: 300;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* обрезка ровно на четырёх строках */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1000px) {
  /* Рейтинг уходит под заголовок: в узкой сетке он налезал бы на него */
  .reviews-score { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 720px) {
  #reviews .section-inner { padding: 80px 0; }
  .reviews-head { padding: 0 22px; }
  .rev { width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-row, .reviews-row.is-reverse { animation: none; }
  .reviews-rows { overflow-x: auto; }
}