/* Portfolio.Photographer.ru — светлый вариант «Развески» (Squarespace-стиль).
   Белый/тёплый-белый фон, много воздуха, один тёплый акцент. Vanilla CSS.
   Hero, финал и «Редактор» остаются на тёмных кадрах, их текст светлый. */

:root {
  --bg:        #FFFFFF;
  --bg-1:      #F6F4EF; /* чередующиеся секции, тёплый off-white */
  --bg-2:      #FFFFFF; /* карточки */
  --ink:       #1A1A1A;
  --head:      #141414;
  --mut:       #6B6B6B;
  --faint:     #70706A; /* тёмнее прежнего #9A9A93 ради контраста AA на белом и кремовом */
  --nav:       #2E2E2E;
  --accent:    #FF5A3C;
  /* ховер акцента светлее, а не темнее: на акценте лежит тёмный текст,
     и затемнение фона роняло бы контраст (на прежнем #E64327 было 4.31:1) */
  --accent-h:  #FF7452;
  --accent-s:  #C63A24; /* акцентный текст на светлом: глубже прежнего #D8442B ради AA на белом и кремовом */
  /* тёмный текст на акценте: 5.62:1. Белый давал 3.10:1 – ниже AA для 16px */
  --on-accent: #1A1A1A;
  --accent-wash: rgba(255,90,60,.06); /* заливка акцентных плашек */
  --accent-line: rgba(255,90,60,.35); /* рамка акцентных плашек */
  --accent-ring: rgba(198,58,36,.28); /* кольцо фокуса на полях формы */
  --ink-deep:  #0E0F12; /* тёмные интерлюдии: редактор */
  --surface-modal: #F0EFEC;
  --fab:       #2F2F2F;
  --fab-h:     #111111;
  --danger:    #9F261D;
  --hair:      rgba(20,20,20,.12);
  --hair-soft: rgba(20,20,20,.07);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --label: "Archivo", system-ui, sans-serif;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 60px);
  --gap-section: clamp(72px, 8vw, 108px);
  --gap-section-compact: clamp(48px, 5vw, 72px);
  --gap-section-showcase: clamp(88px, 10vw, 132px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  /* iOS Safari: запрет самовольного увеличения текста – без этого hero-подзаголовок
     раздувается, контент героя становится выше экрана и уезжает под fixed-шапку */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--head); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.container--narrow { max-width: 820px; }

/* ---- shared bits ---- */
.eyebrow {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-s);
  margin: 0 0 22px;
}
.section { padding-block: var(--gap-section); }
.section--panel { background: var(--bg-1); }
.reviews { padding-block: clamp(68px, 7vw, 100px); }
.russia-section { padding-block: var(--gap-section-compact); }
.features { padding-block: clamp(68px, 7vw, 96px); }
.section.editor { padding-block: var(--gap-section-showcase); }
.pricing,
.faq { padding-block: clamp(64px, 7vw, 96px); }
.section__head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 68px); }
.section__title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.01em;
}
.section__title em { font-style: italic; color: var(--ink); }
.section__sub { color: var(--mut); font-size: 1.1rem; margin: 18px 0 0; max-width: 640px; }

/* ---- accessibility ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 4px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; text-decoration: none;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--on-accent); padding: 14px 26px; font-size: 1rem; }
.btn--primary:hover { background: var(--accent-h); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: rgba(20,20,20,.3); padding: 13px 24px; font-size: 1rem;
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(20,20,20,.04); }
.btn--lg { padding: 17px 34px; font-size: 1.06rem; }
.btn--block { width: 100%; }

/* ---- header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--hair);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 20px;
  transition: padding-block .2s ease;
}
.site-header.is-scrolled .site-header__inner { padding-block: 14px; }
.site-header__logo { display: inline-flex; align-items: center; min-width: 0; }
/* над hero логотип белый; на светлой прокрученной шапке инвертируется в тёмный */
.site-header__logo img { width: 300px; height: auto; max-width: 48vw; transition: filter .2s ease; }
.site-header.is-scrolled .site-header__logo img { filter: invert(1); }
.site-header__nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.site-header__link {
  font-size: .95rem; color: rgba(255,255,255,.85); text-decoration: none; transition: color .15s ease;
}
.site-header__link:hover { color: #fff; }
.site-header.is-scrolled .site-header__link { color: var(--nav); }
.site-header.is-scrolled .site-header__link:hover { color: #000; }
.site-header__cta {
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: 2px; text-decoration: none;
  font-weight: 600; font-size: .92rem; transition: background-color .18s ease;
}
.site-header__cta:hover { background: var(--accent-h); }
.site-header__cta-short { display: none; }

/* ---- hero (на тёмном кадре, текст светлый независимо от темы) ---- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; display: flex; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 50%; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.55) 40%, rgba(8,9,11,0) 66%),
    linear-gradient(0deg, rgba(8,9,11,.85) 0%, rgba(8,9,11,0) 36%),
    linear-gradient(180deg, rgba(8,9,11,.6) 0%, rgba(8,9,11,0) 20%);
}
.hero__inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--pad);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(64px, 9vw, 92px);
  /* верхний зазор под fixed-шапку: работает только когда контент героя выше
     экрана (маленькие телефоны) – иначе контент прижат к низу и отступ не виден */
  padding-top: calc(96px + env(safe-area-inset-top, 0px));
}
.hero__content { max-width: 830px; }
.hero__title {
  font-size: clamp(2.7rem, 6.4vw, 5rem);
  line-height: 1.0; letter-spacing: -.015em; color: #fff;
  margin: 0 0 26px;
}
.hero__title em { font-style: italic; color: #fff; }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: rgba(255,255,255,.82); max-width: 560px; margin: 0 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 30px; }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 8px; }
.hero__meta li { font-size: .92rem; color: rgba(255,255,255,.72); position: relative; padding-left: 18px; }
.hero__meta li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--accent); }
.hero__price { font-size: 1.02rem; color: #fff; margin: 14px 0 2px; font-weight: 500; }
.hero__price-sub { font-size: .92rem; color: rgba(255,255,255,.62); margin: 0; }
.hero__credit {
  position: absolute; right: 26px; bottom: 24px; z-index: 1;
  font-family: var(--label); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); writing-mode: vertical-rl;
}

/* ---- examples: галерейная развеска, светлое паспарту ---- */
.hang {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.examples__counter { display: none; }
.frame { margin: 0; }
.frame__link { display: block; text-decoration: none; color: inherit; }
.frame__fig {
  margin: 0; background: var(--bg-2);
  border: 1px solid var(--hair); padding: 10px;
  transition: box-shadow .18s ease, transform .18s ease;
}
/* в покое форму держит паспарту, без тени; тень появляется на ховере
   как подъём кадра от стены – она здесь отклик, а не украшение */
.frame__link:hover .frame__fig { box-shadow: 0 3px 8px rgba(20,20,20,.14); transform: translateY(-3px); }
.frame__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.frame__cap {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 4px 4px;
}
.frame__name { font-size: .95rem; line-height: 1.25; color: var(--ink); min-width: 0; }
.frame__role {
  flex: none; margin-top: 2px;
  font-family: var(--label); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap; text-align: right;
}

/* ---- reviews: каталог-цитаты, светлые карточки ---- */
.quotes { columns: 2; column-gap: 28px; }
.reviews__counter { display: none; }
.quote {
  break-inside: avoid; margin: 0 0 28px;
  background: var(--bg-2); border: 1px solid var(--hair); border-radius: 3px;
  padding: 36px 34px;
  display: flex; flex-direction: column; gap: 22px;
}
.section--panel .quote { background: #fff; }
/* сброс браузерного дефолта blockquote (1em 40px) – он воровал треть ширины на мобильном */
.quote__body { margin: 0; }
.quote__headline {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.4rem; line-height: 1.3; color: var(--head); margin: 0 0 10px;
}
.quote__text { font-size: 1rem; color: var(--mut); margin: 0; }
.quote__by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
/* автор над отзывом: имя и титул работают как социальное доказательство до чтения */
.quote__by--top { margin-top: 0; margin-bottom: 18px; }
.quote__portrait {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--hair); flex: none;
}
.quote__meta { display: flex; flex-direction: column; min-width: 0; }
.quote__name { font-size: .95rem; color: var(--ink); }
.quote__role { font-size: .82rem; color: var(--faint); }
.quote__site {
  font-family: var(--label); font-size: .72rem; letter-spacing: .04em;
  color: var(--accent-s); text-decoration: none; margin-top: 2px;
}
.quote__site:hover { text-decoration: underline; }

/* ---- comparison (на случай возврата) ---- */
.vs-grid { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vs { padding: 0; }
.vs__name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; margin: 0 0 12px; color: var(--ink); padding-top: 18px; border-top: 1px solid var(--hair); }
.vs__text { font-size: .98rem; color: var(--mut); margin: 0; }
.vs--us { background: #fff; border: 1px solid rgba(255,90,60,.4); border-left: 2px solid var(--accent); border-radius: 3px; padding: 34px 36px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgba(20,20,20,.05); }
.vs--us .vs__name { color: var(--accent-s); border-top: 0; padding-top: 0; font-size: 1.5rem; }
.vs--us .vs__text { color: var(--ink); max-width: 760px; }

/* ---- Russia band ---- */
/* плашку держит акцентная заливка и полная рамка – вместо боковой полоски и тени */
.russia { padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 60px); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 3px; }
.russia__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.06; letter-spacing: -.01em; margin: 0 0 18px; max-width: 760px; }
.russia__text { color: var(--mut); font-size: 1.1rem; max-width: 820px; margin: 0; }

/* ---- features: тихий колофон ---- */
.index {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.index__item { padding: 34px 32px; border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.index__title { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 8px; color: var(--ink); }
.index__text { font-size: .96rem; color: var(--mut); margin: 0; }

/* ---- scenarios: зачем автору сайт ---- */
.scenarios__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(40px, 6vw, 84px);
  border-bottom: 1px solid var(--hair);
}
.scenario { border-top: 1px solid var(--hair); padding: 30px 0 36px; }
.scenario__label {
  font-family: var(--label); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-s); margin: 0 0 14px;
}
.scenario__title {
  font-family: var(--serif); font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  margin: 0 0 12px; color: var(--ink);
}
.scenario__text { font-size: 1rem; color: var(--mut); margin: 0; max-width: 46ch; }
.scenario__quote { margin: 20px 0 0; padding-left: 16px; border-left: 2px solid var(--accent-s); }
.scenario__quote p {
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--ink); margin: 0 0 6px;
}
.scenario__quote cite { font-style: normal; font-size: .85rem; color: var(--mut); }

/* ---- pricing ---- */
.pricing__grid { display: grid; grid-template-columns: 1fr 440px; gap: clamp(40px, 6vw, 72px); align-items: center; }
.pricing__lede { color: var(--mut); font-size: 1.1rem; }
/* карточку цены выделяет сплошная акцентная рамка, а не широкая тень */
.price {
  background: var(--bg-2); border: 1px solid var(--accent); border-radius: 4px;
  padding: clamp(34px, 4vw, 48px) clamp(28px, 3.4vw, 42px);
}
.price__free { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: var(--accent-s); margin: 0 0 18px; }
.price__amount { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--head); margin: 0 0 8px; }
.price__note { color: var(--mut); font-size: .96rem; margin: 0 0 26px; }
.price__points { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 12px; }
.price__point { position: relative; padding-left: 22px; font-size: .98rem; color: var(--ink); }
.price__point::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--accent); }

/* ---- FAQ ---- */
.faq__list { border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q-wrap { margin: 0; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; color: var(--ink); font-family: var(--sans);
  font-size: 1.12rem; font-weight: 500; text-align: left; padding: 26px 0; cursor: pointer;
}
.faq__q:hover { color: #000; }
.faq__icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent);
  transition: transform .2s ease, opacity .2s ease;
}
.faq__icon::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__a {
  height: 0; overflow: hidden; opacity: 0; color: var(--mut); max-width: 680px;
  transition: height .34s cubic-bezier(.2,.6,.2,1), opacity .24s ease;
}
.faq__a[hidden] { display: none; }
.faq__a.is-open { opacity: 1; }
.faq__a-inner { padding: 0 0 28px; }
.faq__a p { margin: 0; font-size: 1.02rem; }
.faq__a p + p { margin-top: 1em; }

/* ---- editor (тёмная интерлюдия на светлой странице) ---- */
.editor { background: var(--ink-deep); }
.editor__head { text-align: center; margin-inline: auto; }
.editor .section__title { color: #F5F1EA; }
.editor .section__sub { color: rgba(255,255,255,.72); }
.editor__shot { margin: 0; }
.editor__shot img {
  width: 100%; max-width: 1060px; height: auto; margin: 0 auto; display: block;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.55));
}
.editor__cap {
  text-align: center; margin-top: 22px;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .14em;
  font-size: .68rem; color: rgba(255,255,255,.45);
}

/* ---- final CTA (на тёмном кадре, текст светлый) ---- */
.final { position: relative; min-height: clamp(520px, 70vh, 700px); overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.final__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; z-index: -2; }
.final::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(270deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.55) 46%, rgba(8,9,11,.2) 100%),
    linear-gradient(0deg, rgba(8,9,11,.5), rgba(8,9,11,0) 40%);
}
.final__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); display: flex; justify-content: flex-end; }
.final__box { max-width: 560px; text-align: right; }
.final__title { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; margin: 0 0 26px; color: #fff; }
.final__title em { font-style: italic; color: #fff; }
.final__cta-row { display: flex; justify-content: flex-end; }
.final__sub { color: rgba(255,255,255,.82); margin: 22px 0 0; font-size: 1.02rem; }
.final__credit { position: absolute; left: 22px; bottom: 22px; font-family: var(--label); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); writing-mode: vertical-rl; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--hair); padding-block: 48px; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer__copy { color: var(--mut); font-size: .92rem; margin: 0; max-width: 640px; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; }
.site-footer__link { color: var(--accent-s); text-decoration: none; font: inherit; font-size: .92rem; }
.site-footer__link:hover { text-decoration: underline; }
.site-footer__button { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; }

/* ---- support ---- */
.support-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  min-width: 133px; height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 18px; background: var(--fab); color: #fff;
  box-shadow: 0 6px 18px rgba(20,20,20,.2); cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  transition: background-color .18s ease, transform .18s ease, bottom .2s ease;
}
.support-fab:hover { background: var(--fab-h); transform: translateY(-1px); }
.support-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.support-fab img { width: 16px; height: 16px; flex: 0 0 auto; }

.support-dialog { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.support-dialog[hidden] { display: none; }
.support-dialog__backdrop { position: absolute; inset: 0; background: rgba(8,9,11,.76); }
.support-dialog__panel {
  position: relative; z-index: 1; width: min(100%, 560px); max-height: calc(100vh - 48px);
  overflow: auto; padding: 28px 26px 26px; background: var(--surface-modal); color: var(--ink);
  border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,.34);
}
.support-dialog__close {
  position: absolute; top: 16px; right: 18px; border: 0; padding: 2px 0;
  background: transparent; color: var(--mut); cursor: pointer;
  font: 500 .78rem/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px;
}
.support-dialog__close:hover { color: var(--ink); }
.support-dialog__title { margin: 0 84px 6px 0; font: 600 1.65rem/1.2 var(--sans); }
.support-dialog__intro { margin: 0 0 24px; color: var(--mut); font-size: .9rem; }
.support-form { display: grid; gap: 16px; }
.support-form[hidden] { display: none; }
.support-form__field { display: grid; gap: 7px; font: 500 .98rem/1.4 var(--sans); }
.support-form__field input,
.support-form__field textarea {
  width: 100%; border: 1px solid rgba(20,20,20,.18); border-radius: 2px;
  background: #fff; color: var(--ink); font: 400 1rem/1.45 var(--sans);
}
.support-form__field input { min-height: 46px; padding: 9px 11px; }
.support-form__field textarea { min-height: 156px; padding: 11px; resize: vertical; }
.support-form__field input:focus,
.support-form__field textarea:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); }
.support-form__note { margin: -4px 0 2px; font-size: .82rem; font-weight: 600; color: var(--mut); }
.support-form__error { margin: 0; color: var(--danger); font-size: .86rem; line-height: 1.5; }
.support-form__error a { color: inherit; text-underline-offset: 3px; }
.support-form__submit { justify-self: start; min-width: 160px; margin-top: 2px; }
.support-form__submit:disabled { cursor: wait; opacity: .65; }
.support-form__honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }
.support-form__success { padding: 26px 0 8px; text-align: center; }
.support-form__success[hidden] { display: none; }
.support-form__success h3 { margin: 0 0 10px; font: 600 1.55rem/1.25 var(--sans); }
.support-form__success p { margin: 0 0 24px; color: var(--mut); }
body.support-dialog-open { overflow: hidden; }

/* ---- cookie consent ---- */
.cookie-consent {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: min(calc(100% - 40px), 400px);
  background: rgba(255,255,255,.98);
  border: 1px solid var(--hair);
  border-radius: 3px;
  /* панель висит над контентом – тень здесь несёт высоту, поэтому не убрана,
     но собрана до внятной, а не размытой на полэкрана */
  box-shadow: 0 8px 24px rgba(20,20,20,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  display: grid; grid-template-columns: 1fr;
  align-items: start; gap: 20px; padding: 24px;
}
.cookie-consent__title {
  font-family: var(--sans); font-size: 1rem; line-height: 1.3;
  font-weight: 600; margin: 0 0 6px;
}
.cookie-consent__text { color: var(--mut); font-size: .9rem; line-height: 1.5; margin: 0; }
.cookie-consent__text a { color: var(--accent-s); text-underline-offset: 3px; }
.cookie-consent__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cookie-consent__actions button { width: 100%; }
.cookie-consent__allow { padding: 12px 18px; font-size: .88rem; }
.cookie-consent__decline {
  min-height: 45px; padding: 11px 16px;
  border: 1px solid rgba(20,20,20,.25); border-radius: 2px;
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: var(--sans); font-size: .88rem; font-weight: 500;
}
.cookie-consent__decline:hover { border-color: var(--ink); background: var(--bg-1); }
.cookie-consent__decline[hidden] { display: none; }
.cookie-consent:not([hidden]) + .to-top { display: none; }
body.has-cookie-consent #support_fab {
  bottom: var(--cookie-consent-offset, 160px) !important;
  transition: bottom .2s ease;
}

/* ---- to-top ---- */
.to-top {
  position: fixed; right: 170px; bottom: 20px; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--hair); background: #fff;
  color: var(--ink); font-size: 1.1rem; cursor: pointer; z-index: 30;
  box-shadow: 0 6px 20px rgba(20,20,20,.12);
  transition: border-color .18s ease, color .18s ease;
}
.to-top:hover { border-color: rgba(20,20,20,.3); color: #000; }
.to-top[hidden] { display: none; }

/* ====================== responsive ====================== */
@media (max-width: 1100px) {
  .pricing__grid { grid-template-columns: 1fr; gap: 36px; }
  .price { max-width: 480px; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hang { grid-template-columns: repeat(2, 1fr); }
  .vs-grid { grid-template-columns: 1fr; gap: 0; }
  .vs { border-top: 0; }
  .vs__name { padding-top: 20px; }
  .index { grid-template-columns: repeat(2, 1fr); }
  .final__box { max-width: 460px; }
}
@media (max-width: 680px) {
  .hang {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(var(--pad) * -1);
    padding: 2px var(--pad) 8px 0;
  }
  .hang::-webkit-scrollbar { display: none; }
  .frame {
    display: flex;
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
  .frame__link { width: 100%; }
  .frame__fig {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .frame__cap { flex: 1; }
  .examples__counter {
    display: block;
    margin: 18px 0 0;
    text-align: center;
    color: var(--mut);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
  }
  .examples__counter [data-examples-current] { color: var(--ink); font-weight: 600; }
  .quotes {
    display: flex;
    align-items: stretch;
    gap: 16px;
    columns: initial;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(var(--pad) * -1);
    padding: 2px var(--pad) 8px 0;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote {
    /* почти во всю ширину: текст выигрывает ~20px, хвостик следующей карточки
       остаётся виден у правого края экрана как подсказка листания */
    flex: 0 0 calc(100% - 16px);
    min-width: 0;
    margin: 0;
    padding: 26px 20px;
    scroll-snap-align: start;
  }
  .quote__headline { font-size: 1.25rem; line-height: 1.25; }
  .quote__text { font-size: .92rem; line-height: 1.5; }
  .quote__role { font-size: .76rem; }
  .quote__site { overflow-wrap: anywhere; }
  .reviews__counter {
    display: block;
    margin: 18px 0 0;
    text-align: center;
    color: var(--mut);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
  }
  .reviews__counter [data-reviews-current] { color: var(--ink); font-weight: 600; }
  .index { grid-template-columns: 1fr; }
  .site-header__inner { padding-block: 14px; gap: 12px; }
  .site-header__nav { gap: 12px; }
  .scenarios__grid { grid-template-columns: 1fr; }
  .scenario { padding: 24px 0 30px; }
  .site-header__link { display: none; }
  .site-header__logo img { width: 150px; }
  .site-header__cta { padding: 9px 13px; font-size: .8rem; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
  .hero__credit, .final__credit { display: none; }
  .hero__cta .btn { flex: 1 1 auto; }
  .final__box { max-width: 100%; text-align: left; }
  .final__inner { justify-content: flex-start; }
  .final__cta-row { justify-content: flex-start; }
  .final::after { background: linear-gradient(0deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.5) 60%, rgba(8,9,11,.3) 100%); }
  .site-footer__inner { align-items: flex-start; }
  .site-footer__links { justify-content: flex-start; }
  .cookie-consent { right: 12px; bottom: 12px; width: min(calc(100% - 24px), 400px); }
  .cookie-consent__inner { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .support-fab { right: 12px; bottom: 12px; min-width: 44px; width: 44px; padding: 0; }
  .support-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .support-dialog { padding: 12px; }
  .support-dialog__panel { max-height: calc(100vh - 24px); padding: 24px 20px 22px; }
  .support-dialog__title { font-size: 1.45rem; }
  .support-form__submit { width: 100%; }
  .to-top { right: 64px; bottom: 12px; }
}
@media (max-width: 460px) {
  .frame__role { font-size: .6rem; }
}

/* ====================== motion / «жизнь» ====================== */
/* без will-change: класс вешается сразу на ~40 узлов, и каждый удерживал бы
   отдельный слой композитора с первой отрисовки – ровно в тот момент, когда
   страница грузится. Transform/opacity браузер и так промотит на время перехода. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: kenburns-hero 30s ease-in-out infinite alternate; transform-origin: 64% 50%; }
  .final__img { animation: kenburns-final 36s ease-in-out infinite alternate; transform-origin: 30% 45%; }
  @keyframes kenburns-hero { from { transform: scale(1.0); } to { transform: scale(1.085) translateX(-1.2%); } }
  @keyframes kenburns-final { from { transform: scale(1.0); } to { transform: scale(1.07); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}