/* =========================================================
   ChaynoTown v2 — кинематографичный тёмный дизайн
   Mobile-first. Палитра и типографика по брендбуку v2.0:
   Plex Sans — заголовки, Golos Text — текст, Plex Mono — маркировка и цифры.
   Cormorant и Onest выведены из системы (v2.0, раздел 04).
   ========================================================= */
:root{
  /* интерфейсные числа набираем в линию, иначе цифры антиквы «ныряют» */
  --ink:#14160F;       /* самый глубокий фон (тёпло-чёрный) */
  --graphite:#1F211E;
  --pine:#26332A;
  --cream:#F4EEE2;
  --beige:#E4D7BC;
  --red:#C1352B;
  --leaf:#7A9A4E;
  --amber:#E0A44A;
  --gold:#C7A868;

  /* Типографика v2.0. Plex Sans в заголовках, Plex Mono — артикулы, цены,
     кнопки, надрубрики. Golos Text остался текстовым. */
  --font-display:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-text:'Golos Text',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --font-han:'Noto Serif SC',Georgia,serif;

  --line:rgba(244,238,226,.14);   /* тонкие линии на тёмном */
  --muted:rgba(244,238,226,.74);  /* приглушённый текст на тёмном — поднят контраст для читаемости */
  --radius:0;            /* карточки и блоки — прямые углы (v2.0) */
  --radius-control:4px;  /* кнопки, поля ввода, печати категорий */
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Golos Text', system-ui, sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
::selection{background:var(--amber);color:var(--ink);}

/* Видимый фокус для клавиатурной навигации (WCAG 2.4.7) */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px;}
.sheet :focus-visible{outline-color:#9A6A16;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.container--narrow{max-width:780px;}
.section{padding:44px 0;}
.section--tight-top{padding-top:6px;}

/* ---------- Типографика ---------- */
.h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,4.4vw,2.4rem);line-height:1.16;
  letter-spacing:-.014em;margin-bottom:28px;
  padding-bottom:.06em; /* запас для хвостиков букв (у/р/д) у градиентного текста */
}
.h2--dark{color:var(--graphite);}
.h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.15;margin-bottom:8px;}

.eyebrow{
  font-family:var(--font-mono);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--muted);margin-bottom:14px;
}
.eyebrow--amber{color:var(--amber);}
.accent-red{color:var(--red);}
.section-lead{color:var(--muted);max-width:560px;margin:-20px 0 34px;}

/* Градиентный текст (крем → золото) */
.grad-text{
  background:linear-gradient(180deg,#F4EEE2 0%, #C7A868 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.h2--dark.grad-text{-webkit-text-fill-color:transparent;}
.grad-amber{
  background:linear-gradient(180deg,#E0A44A 0%, #C7A868 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* =========================================================
   Кнопки
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-weight:500;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;   /* трекинг +12% по v2.0 */
  padding:16px 22px;border-radius:4px;border:0;cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:hover{}
.btn__icon{width:20px;height:20px;flex:0 0 auto;}
.btn__icon--max{width:28px;height:28px;} /* иконка Max крупнее — в PNG больше прозрачных полей */
/* Кнопки мессенджеров — в палитре сайта, а не в фирменных цветах Telegram и Max.
   Раньше голубой и сине-фиолетовый градиенты были единственными насыщенными
   пятнами на странице и перетягивали внимание с заголовка и цен.
   Иконки остаются узнаваемыми по форме, поэтому смысл кнопки читается. */
/* Брендбук v2.0: основная кнопка — янтарь с графитовым текстом, вторичная —
   контур. Золото заливкой запрещено прямо (раздел 18, Don't). */
.btn--tg{background:var(--amber);color:var(--ink);}
.btn--tg:hover{background:#EBB463;}
.btn--max{background:transparent;border:1px solid var(--gold);color:var(--gold);}
.btn--max:hover{border-color:var(--amber);color:var(--amber);}
/* Иконки оставляем цветными: перекраска через filter превращала их
   в сплошные кружки — терялся самолётик Telegram и знак Max.
   Палитру рушили именно градиентные фоны кнопок, а не иконки в 20 px. */
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--cream);text-transform:none;letter-spacing:.01em;font-size:14px;padding:12px 20px;}
.btn--ghost:hover{background:rgba(244,238,226,.07);border-color:var(--gold);}
.btn--outline{
  flex-direction:column;gap:3px;background:transparent;
  border:1.5px solid var(--line);color:var(--cream);text-transform:none;padding:20px 24px;
}
.btn--outline small{font-family:'Golos Text',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);}
.btn--outline:hover{border-color:var(--gold);background:rgba(199,168,104,.06);}

/* Пара TG+Max — строго одинаковая ширина */
.btn-pair{display:flex;gap:12px;max-width:520px;}
.btn-pair .btn{flex:1 1 0;min-width:0;padding-left:16px;padding-right:16px;}
.btn-pair--center{margin-left:auto;margin-right:auto;}

/* =========================================================
   HERO
   ========================================================= */
/* Липкое верхнее меню — едет вместе с сайтом, фон появляется при скролле */
.nav{
  position:sticky;top:0;z-index:50;width:100%;
  display:flex;align-items:center;justify-content:center; /* на мобиле — по центру */
  padding:12px 20px;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
/* На внутренних страницах фон шапки нужен сразу: там нет скрипта, который вешает
   класс scrolled при прокрутке, и логотип наезжал бы на текст. */
.nav--solid{background:rgba(20,22,15,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);}
.nav.scrolled{background:rgba(20,22,15,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);}
.nav__logo{display:inline-flex;align-items:center;gap:12px;}
.nav__emblem{height:46px;width:auto;transition:height .3s ease;}
.nav.scrolled .nav__emblem{height:38px;}
.nav__wordmark{display:flex;flex-direction:column;align-items:center;line-height:1;}
.nav__title{font-family:var(--font-display);font-weight:600;font-size:27px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold);line-height:.95;}
.nav__sub{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:9px;color:var(--gold);opacity:.85;margin-top:5px;}
.nav__links{display:none;gap:30px;font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:13px;}
.nav__links a{color:var(--muted);transition:color .2s;}
.nav__links a:hover{color:var(--cream);}

/* ---------- Бургер-меню (мобильная версия — основной трафик) ---------- */
.nav__burger{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;z-index:2;
}
.nav__burger span{
  display:block;position:relative;width:22px;height:2px;background:var(--gold);
  transition:background .2s ease;
}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--gold);
  transition:transform .25s ease, top .25s ease;
}
.nav__burger span::before{top:-7px;}
.nav__burger span::after{top:7px;}
.nav__burger[aria-expanded="true"] span{background:transparent;}
.nav__burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav__burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* Горизонтальное меню только когда оно реально помещается рядом с логотипом. */
@media (min-width:1100px){
  /* Верхнее меню — с 1100 px: с подписями «Каталог чая» и «Каталог посуды»
     на 1000–1100 оно упиралось в логотип, там остаётся бургер.
     До 1180 меню поджато: шрифт и разрядка меньше, перенос строк запрещён. */
  .nav__links{display:flex;gap:16px;font-size:12px;letter-spacing:.06em;}
  .nav__links a{white-space:nowrap;}
  .nav__burger{display:none;}
  .nav{justify-content:space-between;}
  .nav__emblem{height:52px;}
  .nav.scrolled .nav__emblem{height:42px;}
  .nav__title{font-size:31px;}
  .nav__sub{font-size:10px;letter-spacing:.22em;}
}
@media (min-width:1180px){
  .nav__links{gap:22px;font-size:13px;letter-spacing:.08em;}
}
@media (min-width:1360px){
  .nav__links{gap:28px;letter-spacing:.1em;}
}

/* Подвал. Раньше жил только в catalog.css — на /kontakty/, которая его не
   подключает, ссылки теряли золотой цвет и выпадали из общего вида. */
.c-foot{
  border-top:1px solid var(--line);padding:28px 0 40px;margin-top:20px;
  font-size:13px;color:var(--muted);
}
.c-foot p{margin-bottom:6px;}
.c-foot a{color:var(--gold);}
.c-foot a:hover{text-decoration:underline;}

/* Логотип центрируется, а бургер лежит слева абсолютом — на 375px они
   налезали друг на друга и читались одним пятном. Симметричные отступы
   сохраняют центровку и разводят их. */
@media(max-width:600px){
  .nav{padding-left:56px;padding-right:56px;}
  .nav__emblem{height:38px;}
  .nav.scrolled .nav__emblem{height:32px;}
  .nav__logo{gap:8px;min-width:0;}
  .nav__wordmark{min-width:0;}
  .nav__title{font-size:clamp(17px,5.4vw,23px);white-space:nowrap;}
  .nav__sub{
    font-size:clamp(6px,1.85vw,9px);letter-spacing:.1em;margin-top:4px;
    white-space:nowrap;      /* иначе «· КРАСНОДАР» уезжает на вторую строку */
  }
}

.nav__drawer{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
  background:var(--graphite);border-left:1px solid var(--line);
  padding:84px 26px 32px;z-index:60;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
.nav__drawer.is-open{transform:translateX(0);}
.nav__drawer a{
  display:block;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-weight:600;font-size:16px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cream);
}
.nav__drawer a:hover{color:var(--gold);}
.nav__drawer-title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:26px 0 4px;
}
.nav__drawer-close{
  position:absolute;top:18px;right:20px;width:40px;height:40px;
  background:none;border:0;color:var(--muted);font-size:28px;line-height:1;cursor:pointer;
}
.nav__scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.nav__scrim.is-open{opacity:1;pointer-events:auto;}
body.nav-locked{overflow:hidden;}


.hero{
  position:relative;min-height:calc(100svh - 78px);display:flex;flex-direction:column;
  background:radial-gradient(120% 80% at 78% 12%, rgba(224,164,74,.16) 0%, rgba(224,164,74,0) 55%), var(--ink);
  overflow:hidden;
}

.hero__inner{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin:0 auto;width:100%;padding:10px 20px 40px;gap:8px;
}
.hero__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.8rem,12vw,6.5rem);line-height:1.08;letter-spacing:-.02em;
  text-transform:none;margin:6px 0 18px;max-width:12ch;
  padding-bottom:.05em; /* запас для хвостиков букв (у/р/д) у градиентного текста */
}
.hero__lead{color:var(--muted);font-size:clamp(1rem,2.4vw,1.2rem);max-width:520px;margin-bottom:26px;}
.hero__cta-label{font-weight:500;margin-bottom:12px;}
.hero__ghost{margin-top:14px;}

.hero__portrait{display:flex;justify-content:center;margin-top:26px;}
.chao{position:relative;display:inline-flex;will-change:transform;}
.chao picture{display:contents;} /* <picture> не участвует в раскладке — img остаётся flex-элементом */
.chao__img{position:relative;z-index:2;width:auto;max-height:min(46vh,420px);
  filter:drop-shadow(0 0 34px rgba(224,164,74,.30));}  /* янтарное свечение вместо тени */
.chao::before{
  content:"";position:absolute;z-index:1;top:50%;left:50%;
  width:92%;padding-bottom:92%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(224,164,74,.55) 0%, rgba(224,164,74,.2) 42%, rgba(224,164,74,0) 70%);
  border-radius:50%;animation:glow 5s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07);}}

/* =========================================================
   БЕГУЩАЯ ЛЕНТА
   ========================================================= */
.marquee{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--graphite);}
.marquee__row{display:flex;overflow:hidden;}
.marquee__track{
  display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,4vw,2.3rem);
  color:var(--cream);animation:scroll 34s linear infinite;
}
.marquee__row--rev .marquee__track{animation-direction:reverse;}
.marquee__track span{padding:0 22px;opacity:.9;}
.marquee__track i{color:var(--amber);font-style:normal;font-size:.6em;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   О НАС (посимвольное проявление)
   ========================================================= */
.about{padding:60px 0 16px;}
.about__eyebrow{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(15px,2.6vw,20px);color:var(--amber);
  margin-bottom:22px;
}
.about__text{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,4.5vw,2.6rem);line-height:1.36;letter-spacing:-.01em;
}
.about__text .ch{transition:color .2s ease;}

/* =========================================================
   ЭТО ДЛЯ ТЕБЯ, ЕСЛИ
   ========================================================= */
.fit-grid{display:grid;gap:14px;grid-template-columns:1fr;}
.fit{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(244,238,226,.03), rgba(244,238,226,0));
  transition:border-color .25s ease, transform .25s ease;
}
.fit:hover{border-color:var(--gold);}
.fit__num{font-family:var(--font-mono);font-weight:700;color:var(--amber);font-size:14px;letter-spacing:.06em;flex:0 0 auto;padding-top:4px;}
.fit p{font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:500;line-height:1.35;}

/* =========================================================
   ГАЙД
   ========================================================= */
.gift{padding:56px 0;background:radial-gradient(90% 70% at 20% 40%, rgba(224,164,74,.12), transparent 60%), var(--pine);}
.gift__inner{display:flex;flex-direction:column;gap:18px;}
.gift__portrait{display:flex;justify-content:center;}
.gift__text{color:var(--muted);max-width:540px;margin-bottom:26px;}

/* =========================================================
   КАЛЬКУЛЯТОР — светлый лист
   ========================================================= */
.sheet{background:var(--cream);color:var(--graphite);border-radius:0;padding:72px 0;}
.sheet .h2{color:var(--graphite);}
.sheet .section-lead{color:rgba(31,33,30,.7);}
.calc{background:#fff;border:1px solid var(--beige);padding:24px;}
.calc__row{margin-bottom:22px;}
.calc__label{font-family:var(--font-mono);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(31,33,30,.72);display:block;margin-bottom:12px;}
.calc__formats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.calc__format{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--graphite);
  padding:16px 8px;border-radius:0;border:1.5px solid var(--beige);background:var(--cream);
  cursor:pointer;transition:all .2s ease;
}
.calc__format svg{color:var(--leaf);transition:color .2s;}
.calc__format:hover{border-color:var(--gold);}
.calc__format.is-active{background:var(--pine);color:var(--cream);border-color:var(--pine);}
.calc__format.is-active svg{color:var(--amber);}

.calc__level input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--beige);outline:none;margin:4px 0 12px;}
.calc__level input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--amber);border:4px solid #fff;cursor:pointer;}
.calc__level input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber);border:4px solid #fff;cursor:pointer;}
.calc__level-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:500;}
.calc__level-labels span{opacity:.62;}
.calc__level-labels span.is-active{opacity:1;color:var(--leaf);font-weight:700;}

.calc__breakdown{border-top:1px solid var(--beige);margin-top:6px;}
.calc__breakdown li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--beige);}
.calc__breakdown li span:first-child{color:rgba(31,33,30,.85);}
.calc__breakdown li span:last-child{font-weight:600;white-space:nowrap;}
.calc__breakdown li.is-first{background:rgba(224,164,74,.14);margin:0 -14px;padding:14px;border-radius:0;border-bottom:0;}
.calc__breakdown li.is-first span:last-child{color:#B07A1E;}
.calc__total{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:20px;}
@media(min-width:520px){.calc__total{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;}}
.calc__total span{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.04em;}
.calc__total strong{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.8rem,6vw,2.6rem);color:var(--graphite);white-space:nowrap;}
.calc__monthly{font-style:italic;color:rgba(31,33,30,.7);font-size:14px;margin-top:6px;}
.calc__note{background:var(--cream);border-radius:0;padding:15px 18px;margin:18px 0 18px;font-weight:500;}
.calc .btn-pair{max-width:none;}
.calc__disclaimer{font-size:13px;color:rgba(31,33,30,.72);margin-top:14px;}

/* =========================================================
   ПОЧЕМУ ВЫБИРАЮТ (липкая стопка)
   ========================================================= */
.why{padding-bottom:20px;}
.stack{max-width:960px;margin:0 auto;padding:0 20px;}
.stack__card{
  position:sticky;top:96px;margin-bottom:26px;
  display:flex;gap:22px;align-items:flex-start;
  background:var(--graphite);border:1px solid var(--line);border-radius:0;
  padding:32px 26px;will-change:transform;
}
.stack__num{font-family:var(--font-mono);font-weight:700;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--amber);flex:0 0 auto;}
.stack__body p{color:var(--muted);}

/* =========================================================
   ОФФЕР
   ========================================================= */
.offer{
  border:1px solid var(--gold);border-radius:var(--radius);
  background:radial-gradient(80% 90% at 50% 0%, rgba(224,164,74,.1), transparent 60%), rgba(244,238,226,.02);
  text-align:center;padding:44px 24px;
}
/* Старая минималка — всегда в две строки: подпись сверху, зачёркнутая сумма снизу.
   Красная черта поперёк суммы делает выгоду заметной с одного взгляда. */
.offer__old{margin-bottom:10px;}
.offer__old-label{display:block;font-family:var(--font-mono);text-transform:uppercase;
  font-size:12px;letter-spacing:.1em;color:var(--muted);margin-bottom:2px;}
.offer__old-price{display:block;font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1.7rem,6.4vw,2.3rem);line-height:1.1;color:rgba(244,238,226,.82);
  text-decoration:line-through;text-decoration-color:rgba(193,53,43,.85);
  text-decoration-thickness:2px;white-space:nowrap;}
.offer__price{font-family:var(--font-mono);font-weight:700;font-size:clamp(3rem,12vw,5rem);line-height:1;margin-bottom:16px;}
/* Чао с вывеской заменяет крупную цифру цены — сам ценник нарисован на доске */
.offer__sign{display:block;width:min(560px,100%);margin:0 auto 6px;}
.offer__sign .chao__img{max-height:none;width:100%;height:auto;}
.offer__signnote{font-family:var(--font-mono);text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--muted);margin-bottom:20px;}
.offer__text{color:var(--muted);max-width:600px;margin:0 auto 26px;}
.offer__sets{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:26px;text-align:left;}
.offer__set{background:rgba(244,238,226,.04);border:1px solid var(--line);border-radius:0;padding:22px;}
.offer__set p{color:var(--muted);}
.offer__cta-label{font-weight:500;margin-bottom:14px;}
.offer .btn-pair{margin:0 auto;}

/* =========================================================
   КАК ПРОХОДИТ ЗАКУПКА
   ========================================================= */
.safenote{background:rgba(122,154,78,.12);border-left:4px solid var(--leaf);border-radius:0;padding:20px 22px;margin-bottom:40px;color:var(--cream);}
.safenote strong{color:var(--cream);}
.steps{display:grid;gap:16px;max-width:760px;}
.step{display:flex;gap:18px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:0;transition:border-color .25s;}
.step:hover{border-color:var(--gold);}
.step__num{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--pine);color:var(--amber);font-family:var(--font-mono);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;}
.step p{color:var(--muted);}
.steps__total{max-width:760px;margin-top:20px;padding:16px 20px;border-radius:0;background:rgba(224,164,74,.1);border:1px solid rgba(224,164,74,.28);}
.steps__total b{color:var(--amber);}

/* =========================================================
   FAQ
   ========================================================= */
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--cream);font-family:'Golos Text',sans-serif;font-weight:500;font-size:clamp(1rem,2.6vw,1.2rem);padding:20px 44px 20px 0;position:relative;}
.faq__ico{position:absolute;right:6px;top:50%;width:16px;height:16px;transform:translateY(-50%);}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;top:50%;left:0;width:16px;height:2px;background:var(--amber);transition:transform .25s ease;}
.faq__ico::after{transform:rotate(90deg);}
.faq__item.is-open .faq__ico::after{transform:rotate(0);}
.faq__a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.faq__a p{color:var(--muted);padding:0 0 14px;max-width:68ch;} /* 65-75 символов — оптимальная длина строки */
.faq__a > p:last-child{padding-bottom:20px;}
.faq__list{display:grid;gap:9px;padding:2px 0 16px;max-width:68ch;}
.faq__list li{position:relative;padding-left:22px;color:var(--muted);}
.faq__list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--amber);}
.faq__list b{color:var(--amber);font-weight:600;}

/* =========================================================
   ПРАЙС
   ========================================================= */
.price-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.price-row .btn{flex:1 1 240px;}
.price-ask{text-align:center;font-weight:500;margin-bottom:16px;color:var(--muted);}
.price-pair{max-width:560px;}
.price-pair .btn{padding:20px 24px;}

/* =========================================================
   ФИНАЛ
   ========================================================= */
.final{padding:56px 0;background:radial-gradient(90% 70% at 82% 50%, rgba(224,164,74,.14), transparent 60%), var(--graphite);}
.final__inner{display:flex;flex-direction:column;gap:20px;}
.final__text{color:var(--muted);max-width:520px;margin-bottom:26px;}
.final__portrait{display:flex;justify-content:center;order:-1;}

/* =========================================================
   ФУТЕР
   ========================================================= */
.footer{padding:56px 0 40px;background:var(--ink);border-top:1px solid var(--line);}
.footer__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.chip{font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.02em;background:rgba(244,238,226,.05);border:1px solid var(--line);color:var(--cream);padding:9px 15px;border-radius:var(--radius-control);transition:all .2s;}
.chip:hover{border-color:var(--gold);background:rgba(199,168,104,.08);}
.footer__contacts{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:20px;font-weight:500;}
.footer__contacts a{display:inline-flex;align-items:center;gap:9px;color:var(--cream);transition:color .2s;}
.footer__contacts a:hover{color:var(--gold);}
.footer__contacts svg{color:var(--gold);flex:0 0 auto;}
.footer__ico{width:20px;height:20px;flex:0 0 auto;}
.footer__ico--max{width:22px;height:22px;}
.footer__hours{color:var(--muted);margin-bottom:22px;}
.footer__legal,.footer__copy{font-size:13px;color:rgba(244,238,226,.6);}
/* Навигация в подвале: с /novichkam/ иначе нельзя было уйти на главную */
.footer__nav{font-size:14px;margin:10px 0 6px;line-height:2;}
.footer__nav a{color:var(--gold);}
.footer__nav a:hover{text-decoration:underline;}
.footer__legal{margin-bottom:4px;}

/* =========================================================
   ПОЧЕМУ НЕ КАК У ДРУГИХ (Они / Я)
   ========================================================= */
.diff__intro{color:var(--muted);max-width:64ch;margin:-20px 0 34px;line-height:1.65;} /* 65-75 символов + воздух */
.diff-grid{display:grid;gap:14px;}
.diff-row{display:grid;grid-template-columns:1fr;gap:1px;border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--line);}
.diff-col{padding:22px 24px;}
.diff-col--them{background:var(--ink);color:var(--muted);}
.diff-col--me{background:rgba(224,164,74,.08);}
.diff-tag{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;display:inline-block;margin-bottom:8px;}
.diff-col--them .diff-tag{color:var(--muted);}
.diff-col--me .diff-tag{color:var(--amber);}
.diff-col p{margin:0;}
.diff-col--me p{color:var(--cream);font-weight:500;}

/* =========================================================
   Анимация появления
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.js .reveal[data-fade="down"]{transform:translateY(-20px);}
.js .reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  .chao::before,.marquee__track{animation:none;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   ПЛАНШЕТ / ДЕСКТОП
   ========================================================= */
@media (min-width:768px){
  .section{padding:88px 0;}
  .section--tight-top{padding-top:24px;}
  .gift,.final{padding:88px 0;} /* та же шкала, что у .section — симметрия отступов между блоками */
  .nav{padding:12px 40px;}

  .hero__inner{padding:20px 40px 60px;}
  .hero__inner{flex-direction:row;align-items:center;gap:40px;}
  .hero__text{flex:1 1 56%;}
  .hero__portrait{flex:1 1 44%;margin-top:0;}
  .chao__img{max-height:min(64vh,560px);}

  .container{padding:0 40px;}
  .fit-grid{grid-template-columns:repeat(2,1fr);gap:18px;}

  .gift__inner{flex-direction:row;align-items:center;gap:48px;}
  .gift__portrait{flex:1 1 40%;order:-1;}
  .gift__content{flex:1 1 60%;}

  .offer__sets{grid-template-columns:1fr 1fr;}

  .final__inner{flex-direction:row;align-items:center;gap:48px;}
  .final__content{flex:1 1 58%;}
  /* Чао слева: он указывает вправо, жест должен вести к тексту и кнопкам */
  .final__portrait{flex:1 1 42%;order:-1;}

  .sheet{border-radius:0;padding:100px 0;}
  .stack__card{padding:40px 40px;}
  .diff-row{grid-template-columns:1fr 1fr;gap:1px;}
}

@media (min-width:1024px){
  .fit-grid{grid-template-columns:repeat(4,1fr);}
}

/* =========================================================
   ТОЛЬКО МОБИЛКА: «Это для тебя» и «В чём разница» —
   липкая стопка, как «Почему выбирают меня» (скейл — в script.js)
   ========================================================= */
@media (max-width:767px){
  .fit-grid{display:block;}
  .fit{position:sticky;top:96px;margin-bottom:18px;background:var(--graphite);}

  .diff-grid{display:block;}
  .diff-row{position:sticky;top:96px;margin-bottom:18px;background:var(--graphite);}

  .steps{display:block;}
  .step{position:sticky;top:96px;margin-bottom:18px;background:var(--graphite);}
}

/* =========================================================
   Липкая мобильная CTA (только мобилка)
   ========================================================= */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(20,22,15,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(130%);transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.mcta.is-visible{transform:translateY(0);}
.mcta__label{display:block;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--amber);margin-bottom:8px;}
.mcta__btns{display:flex;gap:10px;}
.mcta__btns .btn{flex:1 1 0;min-width:0;padding:13px 12px;font-size:14px;border-radius:var(--radius-control);}
@media (min-width:768px){ .mcta{display:none;} }
@media (prefers-reduced-motion:reduce){ .mcta{transition:none;} }


/* Цены и счётчики — табличные цифры: колонки выравниваются, как в спецификации (v2.0) */
.fact b,.term__price,.c-price__cny,.c-card__price,.step__num,.offer__price,.stack__num{font-variant-numeric:tabular-nums lining-nums;}

/* ---------- мобильная версия: основной трафик ---------- */
@media(max-width:600px){
  .section{padding:34px 0;}
  .h2{margin-bottom:22px;font-size:clamp(1.6rem,6vw,2.1rem);}
  .container{padding:0 16px;}
  /* кнопки в столбик: на узком экране две в ряд ужимаются до нечитаемых */
  .btn-pair{flex-direction:column;gap:10px;max-width:none;}
  .btn{width:100%;padding:15px 20px;min-height:52px;}
  .section-lead{margin-bottom:22px;}
}

/* Активный раздел в меню: видно, где находишься. Подсветка янтарём —
   рабочий акцент по брендбуку v2.0. */
.nav__links a[aria-current="page"]{
  color:var(--amber);
  border-bottom:1px solid var(--amber);
  padding-bottom:3px;
}
.nav__drawer a[aria-current="page"]{color:var(--amber);}

/* =========================================================
   Мотив «терраса» (брендбук v2.0, признак 03)
   Ступенчатая волосяная линия, снятая с чайных террас эмблемы.
   Единственный орнамент системы — рядом с ним ничего «чтобы не пусто».

   Рисуем SVG-штрихом, а не CSS-градиентами: градиентами получалась
   сплошная золотая плашка, а золото заливкой брендбук запрещает прямо.
   ========================================================= */
.terrace{
  height:26px;margin:0 auto;max-width:var(--maxw);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26' viewBox='0 0 96 26'%3E%3Cpath d='M0 5 H28 V13 H60 V21 H96' fill='none' stroke='%23C7A868' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left center;
  background-size:96px 26px;
  opacity:.45;
}
@media(max-width:600px){
  .terrace{height:20px;background-size:72px 20px;}
}