/* Global foundations and generic UI primitives are owned by uikit.css.
   styles.css starts with site/component rules only. */

.section-title{ margin:0 0 var(--space-3); }

*{box-sizing:border-box}

section{padding:64px 0}

/* Лого в шапке: ссылка без подчёркивания и белая «плашка» */
.site-header .brand .logo {
  display: inline-flex;              /* центрирование эмодзи */
  align-items: center;
  justify-content: center;
  width: 40px;                       /* подгони под свой размер */
  height: 40px;
  border-radius: 10px;
  background: #fff;                  /* белый фон */
  border: 1px solid var(--neutral-300);         /* тонкая серая рамка (по желанию) */
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  text-decoration: none;             /* убираем подчёркивание */
  color: inherit;                    /* эмодзи не перекрашиваем */
}

/* убрать подчёркивание во всех состояниях */
.site-header .brand .logo:link,
.site-header .brand .logo:visited,
.site-header .brand .logo:hover,
.site-header .brand .logo:active {
  text-decoration: none;
  background: #fff;
}

/* доступный фокус (если лого — ссылка) */
.site-header .brand .logo:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(246,232,213,.75);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid rgba(0,0,0,.06)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:36px;height:36px;border-radius:10px;background:var(--color-action-primary);display:grid;place-items:center}
.brand-meta small{display:block;color:#666;line-height:1}



/* === Унифицируем высоту «пилюль» в хедере */
:root{
  --hdr-pill-h: 28px;            /* такая же высота у avail-badge */
}

/* === Переключатель языка === */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;                       /* расстояние между RU, /, SR */
  height:var(--hdr-pill-h);
  padding:0 8px;                 /* компактные внутренние отступы */
  border:1px solid #e2e6ea;
  border-radius:999px;
  background:#fff;               /* как у бейджа (светлая плашка) */
  line-height:1;                 /* убираем «надбавку» по высоте */
}

.lang-switch .lang-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  text-decoration:none;
  padding:0 6px;                 /* компактный inline-padding */
  height:calc(var(--hdr-pill-h) - 8px);
  border-radius:8px;             /* мини-пилюлька подсветки */
  font-weight:700;
  font-size:.9rem;
  color:var(--neutral-900);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}

.lang-switch .lang-btn:hover{
  background:#f2f4f7;            /* лёгкий hover */
}

.lang-switch .lang-btn:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(34,197,94,.18); /* как у подсказок/калькулятора */
}

/* активная метка — мягкий фон, хороший контраст */
.lang-switch .lang-btn.active{
  background:#eaf7f0;            /* нежно-зелёный (в тон сайту) */
  color:#14532d;
}

/* разделитель «/» — компактный и не расширяет блок */
.lang-switch .sep{
  display:inline-block;
  line-height:1;
  padding:0 2px;
  opacity:.6;
  font-weight:700;
}




/* ===== Unified dashed links ===== */

.link-dashed { display:inline-flex; align-items:center; gap:6px; color:var(--neutral-500); text-decoration:none; font-size:14px; }
.link-dashed .txt { border-bottom: 1px dashed transparent; transition:color .15s ease, border-color .15s ease; }
.link-dashed:hover .txt { color:var(--green-600); border-bottom: 1px dashed var(--green-600); padding-bottom: 2px; }
.link-dashed--inverse { color:var(--green-600); border-bottom: 1px dashed var(--green-600); padding-bottom: 2px; }
.link-dashed--inverse:hover { color:var(--neutral-500); border-bottom-color:transparent; }



/* === HERO: layout === */
#top.hero{ padding:96px 0 56px; }

#top .container.hero-grid{
  display:grid;
  grid-template-columns: minmax(420px,1fr) clamp(420px,36vw,560px);
  gap: clamp(24px,4vw,56px);
  align-items: stretch;
}

/* колонки */
#top .hero-copy{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column;
  min-width:0;
}
#top .hero-visual{
  grid-column:2; grid-row:1;
  display:flex; flex-direction:column;
  justify-self:stretch;      /* ← было end, из-за этого картинка «липла» вправо */
  align-self:start;
  min-width:0;
}

/* === Типографика и бейджи === */
#top .hero-copy h1{
  margin:0 0 8px;
  font-size:clamp(32px,3.6vw,48px);
  line-height:1.08; letter-spacing:-0.01em;
  max-inline-size:26ch; text-wrap:balance; hyphens:auto;
}
#top .hero-copy .sub{ font-size:16px; color:#333; margin:8px 0 14px; }

#top .hero-tags{ display:flex; flex-wrap:wrap; gap: 0; column-gap: 8px; row-gap: 4px; margin-top: 16px; margin-bottom: 16px; padding:0; list-style:none;  }
#top .hero-tags + .hero-tags{ margin-top: 8px; }
#top .hero-tags li{
  display:inline-flex; align-items:center; height:30px; gap:8px; margin:0;
  padding:0 10px; border:1px solid #d9dee6; border-radius:999px; background:#fff;
  font-weight:500; font-size:13px; color:var(--neutral-900);
}
#top .hero-tags li::before{ content:attr(data-emoji); line-height:1; }

#top .cta{ display:flex; gap:12px; margin:16px 0 12px; flex-wrap:wrap; }
#top .cta-quote{ font-weight:700; }

@media (max-width: 980px){
  #top .cta-quote{
    margin-bottom: 24px;             /* одинаковый эффект */
  }
}


/* === Фото: строго по ширине колонки, без absolute === */
#top .hero-photo{
  display:block;
  width:100%;
  max-width:100%;             /* ← важно: не шире своей колонки */
  aspect-ratio:4 / 3;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
#top .hero-photo picture{
  display:block;
  width:100%;
  height:100%;
}
/* === Рейтинг + цитата: стабильная строка без рефлоу === */
#top .hero-visual .hero-social{
  margin-top:14px;
  min-height:28px;
  display:flex; align-items:center; gap:10px;
  flex-wrap:nowrap; min-width:0;
}
#top .rating-badge{ display:inline-flex; align-items:center; gap:6px; }
#top .rating-badge .star{ width:18px; height:18px; fill:#F5B400; }
#top .rating-score{ font-weight:700; color:var(--blue-800); }

#top .hero-visual .hero-social a{ white-space:nowrap; flex:0 0 auto; }

/* === Адаптив === */
@media (max-width:1024px){
  #top .hero-visual{ justify-self:stretch; }
  #top .hero-visual .hero-social{ margin-top:16px; flex-wrap:wrap; }
}

/* === HERO: гибрид для отступа CTA === */
/* База: прижимаем CTA книзу левой колонки (красиво, когда колонка высокая) */
#top .hero-copy { display:flex; flex-direction:column; }
#top .hero-copy .cta { margin-top:auto; }

/* На «широких и высоких» экранах большой зазор от auto — ограничим его: */
@media (min-width: 1280px) and (min-height: 820px){
  #top .hero-copy .cta{
    /* вместо auto используем вменяемый адаптивный промежуток */
    margin-top: clamp(20px, 3vh, 40px);
  }
}

/* На планшетах/узких — снова лёгкий фикс-отступ, чтобы не залипало вплотную */
@media (max-width: 1024px){
  #top .hero-copy .cta{ margin-top: 16px; }
}


/* Lang switch
.lang-switch{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e5e3df;border-radius:999px;padding:6px 10px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.lang-switch .sep{color:#94a3b8}
.lang-switch .lang-btn{background:transparent;border:0;padding:0 2px;font-weight:800;letter-spacing:.3px;color:#1d2b38;cursor:pointer}
.lang-switch .lang-btn:hover{color:#16324a}
.lang-switch .lang-btn.active{color:#0f2a45}

/* === SITUATIONS / PARENT JTBD === */
#situations .section-title{
  margin: 0;
}

#situations .situations-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

#situations .situation-card{
  grid-column: span 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

#situations .situation-card:nth-child(n + 4){
  grid-column: span 3;
}

#situations .situation-icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-action-primary-soft);
  color: var(--color-action-primary);
}

#situations .situation-icon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#situations .situation-title{
  margin: 1px 0 var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.3;
}

#situations .situation-text{
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.55;
}

@media (max-width: 1024px){
  #situations .situations-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #situations .situation-card,
  #situations .situation-card:nth-child(n + 4){
    grid-column: auto;
  }
}

@media (max-width: 640px){
  #situations .situations-grid{
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  #situations .situation-card{
    padding: var(--space-4);
  }

  #situations .situation-icon{
    width: 36px;
    height: 36px;
  }

  #situations .situation-icon svg{
    width: 20px;
    height: 20px;
  }
}

/* === SERVICES === */

/* --- layout секции: заголовок/подсказка, ниже единая сетка карточек --- */
#services .container{
  display: block;
}

/* секционный header (внутри: заголовок + подсказка) */
#services .section-head{ margin: 0; }
#services .section-head .section-title{ margin: 0 0 2px; }
#services .section-head .section-hint{
  margin: 0;
  display: flex; align-items: center; gap: 8px;
  color: var(--neutral-500); font-size: 14px;
}
#services .section-head .section-hint .dot{
  width: 6px; height: 6px; border-radius: 999px; background: #D1D5DB;
}


/* сетка карточек */
#services .svc-grid{
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

/* фикс числа колонок по брейкпоинтам (чтобы контент не «ломался») */
@media (min-width: 1100px){
  #services .svc-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1099.98px) and (min-width: 641px){
  #services .svc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px){
  #services .svc-grid{
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
}


/* --- карточка услуги --- */
#services .svc-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--neutral-300);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  padding: 16px;                                   /* равные внутренние отступы */
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
#services .svc-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border-color: #DFE4EA;
}

/* шапка карточки: эмоджи + заголовок в одну строку */
#services .svc-card .svc-head{
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
}
#services .svc-card .svc-emoji{
  position: static; left: auto; top: auto;
  font-size: 20px; line-height: 1;
}
#services .svc-card .svc-title{
  margin: 0; padding-left: 0;
  font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--neutral-900);
}

/* текст */
#services .svc-card .svc-desc,
#services .svc-card .svc-text{
  margin: 0; color: var(--neutral-700); font-size: 14px; line-height: 1.5;
}

/* Вторичный badge дополнительных услуг */
#services .svc-card .svc-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  background: #F3F4F6;
  color: var(--neutral-500);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

/* мелкий адаптив шрифтов в карточке */
@media (max-width: 640px){
  #services .svc-card .svc-title{ font-size: 17px; }
  #services .svc-card .svc-desc,
  #services .svc-card .svc-text{ font-size: 13.5px; }
}



/* (опционально) ограничить описание тремя строками — ровная сетка высот
#services .svc-desc,
#services .svc-text{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
*/



/* ====================== WHY (Преимущества) — CLEAN ====================== */

/* Палитра иконок (можно менять централизованно) */
#why.panel--list{
  --ico-ink:       #C8A77C;     /* бежевый цвет иконок по умолчанию */
  --ico-ink-hover: var(--green-700);     /* зелёный при hover/focus */
  --ico-bg:        #FFF7EC;     /* фон «плитки» иконки */
  --ico-brd:       #F1E7DB;     /* контур плитки иконки */
}

/* Секция: белое полотно без скруглений + больше «воздуха» */
#why.panel--list{
  background:#fff;
  border:0;
  border-radius:0;
  padding-top: clamp(40px, 6vh, 88px);
  margin-inline: calc(-1 * var(--layout-gutter, 20px)); /* растягиваем подложку на ширину контейнера */
}

@media (max-width: 768px){
  #why.panel--list{ padding-top: clamp(28px, 5vh, 56px); }
}

/* Грид преимуществ */
#why.panel--list .why-grid{
  display:grid;
  gap:32px 36px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (min-width:1280px){ #why.panel--list .why-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width:980px){  #why.panel--list .why-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:640px){  #why.panel--list .why-grid{ grid-template-columns: 1fr;} }

/* Карточка-строка без левой «синей» линии */
#why.panel--list .why-card{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;   /* одна колонка: иконка + заголовок сверху */
  row-gap:0;
  border-left:0 !important;
  background:transparent;
  box-shadow:none;
  padding:0;
  transition: transform var(--duration-fast) var(--ease-standard);
}
#why.panel--list .why-card:hover{ transform: translateY(-1px); }

/* Шапка: иконка сверху, затем заголовок, затем тонкий разделитель */
#why.panel--list .why-headline{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:24px; margin:0 0 2px;
}
#why.panel--list .why-headline::after{
  content:""; width:100%; height:1px; background:#E8EEF7; margin-top:10px; border-radius:1px;
}

@media (max-width:640px){
  #why.panel--list .why-headline{ gap:16px; }
}

/* Заголовок — крупнее; галочка показывается только при hover/focus карточки */
#why.panel--list .why-title{
  margin:0;
  white-space:normal;
  text-wrap:balance;
  hyphens:auto;
  font-size: clamp(17px, 2.1vw, 19px);
  line-height:1.25;
  font-weight:800;
  color:var(--neutral-900);
  display:flex; align-items:center; gap:8px;
  transition: color var(--duration-fast) var(--ease-standard);
}
#why.panel--list .why-card:hover .why-title,
#why.panel--list .why-card:focus-within .why-title{
  color:var(--color-action-primary);
}
@media (min-width: 641px){
  #why.panel--list .why-title--nowrap{
    white-space: nowrap;
  }
}

#why.panel--list .why-title::after{
  content:""; width:14px; height:14px; flex:0 0 14px; opacity:0;
  background:center/100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.2l2.7 2.7 6-6' fill='none' stroke='%2315803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translateY(-2px) scale(.9);
  transition: opacity .15s ease, transform .15s ease;
}
#why.panel--list .why-card:hover .why-title::after,
#why.panel--list .why-card:focus-within .why-title::after{
  opacity:1; transform:none;
}

/* Текст — ровно по сетке, без «ступеньки» слева */
#why.panel--list .why-text{
  position:relative;
  grid-column:1 / -1;
  margin:12px 0 0;
  color:var(--neutral-600);
  font-size:14.5px;
  line-height:1.55;
  text-align:left;
}

/* ИКОНКА: плитка + маска-глиф, которую можно перекрашивать */
#why.panel--list .why-icon{
  width:56px; height:56px;
  display:grid; place-items:center;
  background:var(--ico-bg);
  border:1px solid var(--ico-brd);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  position:relative; overflow:visible;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow .15s ease;
}
#why.panel--list .why-card:hover .why-icon{ transform: translateY(-1px); box-shadow:0 8px 22px rgba(200,167,124,.20); }

/* Сам глиф — через маску: цвет задаём background-color */
#why.panel--list .why-icon::before{
  content:""; width:28px; height:28px; display:block;
  background-color: var(--ico-ink);
  transition: background-color .15s ease, filter .2s ease;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
}

/* Привязка файлов (проверь регистр и наличие файлов на проде) */
#why .ico-security::before{ -webkit-mask-image:url("/img/icons/security.svg");    mask-image:url("/img/icons/security.svg"); }
#why .ico-empathy::before{  -webkit-mask-image:url("/img/icons/empathy.svg");     mask-image:url("/img/icons/empathy.svg"); }
#why .ico-dev::before{      -webkit-mask-image:url("/img/icons/development.svg"); mask-image:url("/img/icons/development.svg"); }
#why .ico-home::before{     -webkit-mask-image:url("/img/icons/homemode.svg");    mask-image:url("/img/icons/homemode.svg"); }

/* Ховер: перекрашиваем только глиф + лёгкое свечение */
#why.panel--list .why-card:hover .why-icon::before,
#why.panel--list .why-card:focus-within .why-icon::before{
  background-color: var(--ico-ink-hover);
  filter: drop-shadow(0 0 8px rgba(20,108,67,.28));
}

/* Адаптив иконки */
@media (max-width:640px){
  #why.panel--list .why-icon{ width:48px; height:48px; border-radius:12px; }
  #why.panel--list .why-icon::before{ width:26px; height:26px; }
}

/* Доступность: без лишних анимаций при reduce-motion */
@media (prefers-reduced-motion: reduce){
  #why.panel--list .why-card,
  #why.panel--list .why-icon,
  #why.panel--list .why-title{ transition:none; }
}

/* базовая линия скрыта (scaleX(0)) */
#why.panel--list .why-text::after{
  content:"";
  position:absolute; left:0; bottom:-10px;
  width:100%; height:1px; background:#E8EEF7;   /* тот же цвет, что под заголовком */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s ease;
  border-radius:1px;
}
/* показываем при hover/focus карточки */
#why.panel--list .why-card:hover .why-text::after,
#why.panel--list .why-card:focus-within .why-text::after{
  transform: scaleX(1);
}



/* По умолчанию (десктоп/планшет) — без анимации, сразу видимы */
[data-anim="adv"]{
  opacity: 1;
  transform: none;
}

/* Только смартфоны: маленький вьюпорт + тач */
@media (max-width: 640px) and (pointer: coarse){
  /* стартовое состояние */
  [data-anim="adv"]{
    opacity: 0;
    transform: translateY(8px) scale(.96);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
    will-change: transform, opacity;
  }
  /* когда вошло в зону видимости */
  [data-anim="adv"].play{
    opacity: 1;
    transform: none;
  }
  /* опциональная «искра» для внутренних элементов */
  [data-anim="adv"].play .sparkle{
    animation: advSpark 1.2s ease-out .2s 2;
  }
}

@keyframes advSpark{
  0%   { transform: scale(.8);  opacity:.4 }
  60%  { transform: scale(1.08); opacity:1 }
  100% { transform: scale(1);   opacity:1 }
}





/* === WHY / XP ===================== */

/* WHY: заголовок → сетка преимуществ */
#why.panel--list :is(h2,.section-title){ 
  margin-bottom: 0 !important; 
}
#why.panel--list :is(h2,.section-title) + .why-grid{
  margin-top: 48px !important;        /* десктоп */
}
@media (max-width: 768px){
  #why.panel--list :is(h2,.section-title) + .why-grid{
    margin-top: 36px !important;      /* мобилки */
  }
}

/* EXPERIENCE: заголовок → лента/сетка опыта */
#experience :is(h2,.section-title){
  margin-bottom: 0 !important;
}
#experience :is(h2,.section-title) + :is(.xp-grid,.timeline,.grid,.cards){
  margin-top: 48px !important;        /* десктоп */
}
@media (max-width: 768px){
  #experience :is(h2,.section-title) + :is(.xp-grid,.timeline,.grid,.cards){
    margin-top: 36px !important;      /* мобилки */
  }
}





/* ==================== /WHY (Преимущества) — CLEAN ====================== */




/* ============ EXPERIENCE (Рельса + карточки) ============ */
/* Component tokens stay local; spacing comes from the global foundation scale. */
#experience{
  /* colors */
  --c-accent: var(--green-600);        /* зелёный акцент */
  --c-rail:   var(--neutral-300);        /* цвет рельсы */

  /* timeline geometry */
  --xp-rail-top: 26px;        /* вертикальная позиция рельсы */
  --xp-rail-h:   2px;         /* толщина рельсы */
  --xp-pin-sz:  10px;         /* диаметр зелёной точки */
}

/* сетка + горизонтальная рельса по верхней базовой линии карточек */
#experience .xp-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));  /* 4 этапа в одной линии на десктопе */
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

/* рельса */
#experience .xp-grid::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--xp-rail-top);
  height: var(--xp-rail-h);
  background: var(--c-rail);
  border-radius: 999px;
  z-index: 1;
}

/* элемент рельсы */
#experience .xp-item{
  position: relative;                 /* якорь для чипа и точки */
  padding-top: 40px;                  /* место под чип и точку */
}

/* чип-диапазон (год/годы) — над рельсой по центру точки */
#experience .xp-chip{
  position: absolute;
  left: 50%;
  top: calc(var(--xp-rail-top) + var(--xp-rail-h) / 2);
  transform: translate(-50%, calc(-100% - 8px));      /* поднять над рельсой на 8px */
  z-index: 3;

  background: transparent;
  border: 0;
  color: var(--neutral-600);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 0;
  text-shadow: 0 1px 0 #fff;                           /* читаемость на рельсе */
}

/* Точки опыта: завершённые этапы серые, текущий этап выделен зелёным */
#experience .xp-pin{
  position: absolute;
  left: 50%;
  top: calc(var(--xp-rail-top) + var(--xp-rail-h) / 2); /* центр линии */
  transform: translate(-50%, -50%);
  width: var(--xp-pin-sz);
  height: var(--xp-pin-sz);
  background-color: var(--neutral-500);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--neutral-200);
  z-index: 2;
}


/* XP: бежевые карточки как у иконок WHY */
#experience{
  --exp-bg:  #FFF7EC;     /* фон плитки */
  --exp-brd: #F1E7DB;     /* контур */
  --exp-shadow: 0 10px 24px rgba(200,167,124,.18);
}


/* карточка этапа */
#experience .xp-card{
  background: var(--exp-bg) !important; 
  border: 1px solid var(--exp-brd) !important;
  border-radius: 14px;
  padding: var(--space-4);
  box-shadow: var(--exp-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align: left;
}
#experience .xp-card:hover{
  background: #FFF3E0;
  border-color: #EAD7C3;
  box-shadow: 0 14px 30px rgba(200,167,124,.22);
  transform: translateY(-2px);
}
/* клавиатурный фокус — на содержимом карточки */
#experience .xp-card:focus-within{
  outline: 2px solid rgba(21,128,61,.35);
  outline-offset: 2px;
}
#experience .xp-card h3{
  margin: 0 0 var(--space-2);
  font-weight: 700;
  font-size: 16px;
  color: var(--neutral-900);
}
#experience .xp-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral-700);
}

/* Последний этап — текущая частная практика */
#experience .xp-item--current .xp-chip{
  color: var(--c-accent);
  font-weight: 700;
}
#experience .xp-item--current .xp-pin{
  background-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(21,128,61,.18);
}
#experience .xp-item--current .xp-card{
  border-color: #B9E0D1 !important;
  box-shadow: 0 10px 24px rgba(21,128,61,.12);
}

/* ===== адаптив ===== */

/* Ниже 900px переходим на вертикальную ленту, чтобы рельса не ломалась на несколько рядов */
@media (max-width: 900px){
  #experience .xp-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #experience .xp-grid::before{
    top: 0;
    bottom: 0;
    left: 14px;
    right: auto;
    width: var(--xp-rail-h);
    height: 100%;
  }
  #experience .xp-item{
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    column-gap: 12px;
    align-items: start;
    padding: 0;
  }
  #experience .xp-pin{
    grid-column: 1;
    grid-row: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 18px;
    justify-self: center;
  }
  #experience .xp-chip{
    grid-column: 2;
    position: static;
    transform: none;
    margin: 0 0 6px;
    padding: 0;
    text-shadow: none;
  }
  #experience .xp-card{
    grid-column: 2;
    margin-top: 0;
  }
}

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #experience .xp-card{ transition: none; }
}

/* ====== EXPERIENCE: белая подложка на всю ширину, как у WHY ====== */
#experience.section{
  background:#fff;
  border-radius:0;
}

/* палитра для карточек опыта */
/* Experience palette tokens are declared once above and inherited here. */

/* фон/бордер именно у карточек внутри опыта */
#experience .card{
  background: var(--exp-bg) !important;
  border: 1px solid var(--exp-brd);
  box-shadow: var(--exp-shadow);
}

/* ховер (лёгкое подсветление, опционально) */
#experience .card:hover{
  background: #FFF3E0;
  border-color: #EAD7C3;
}





/* Shared compact note; Contact also uses this class. */
.subnote{font-size:10px;color:#777}

/* Error state */
.field-error{color:#B42318;font-size:12px;margin-top:4px}
/* Tooltip */
.hint{position:relative;display:inline-block;width:16px;height:16px}
.hint .i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:999px;background:#E9EDF7;color:#334;font-size:12px;font-weight:600}
.hint:hover .i,.hint:focus-within .i{background:#E7F7EF;color:var(--green-700);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.hint .tip{position:absolute;left:0;bottom:calc(100% + 10px);background:#111;color:#fff;padding:8px 10px;border-radius:8px;font-size:12px;white-space:normal;max-width:320px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:9999}
.hint:hover .tip,.hint:focus-within .tip{opacity:1}

/* Notice + euro */
.notice{margin-top:8px;color:#9b4d00;background:#FFF4E5;border:1px solid #FFE1BF;padding:10px 12px;border-radius:10px;display:none}




/* ===== Cookie Banner — tokens (final) ===== */

:root{
  --ck-z: 9999;
  --ck-bg: rgba(15,23,42,.88);  /* слегка прозрачный */
  --ck-fg: var(--neutral-300);

  --ck-panel-bg:#fff;
  --ck-border:var(--neutral-300);
  --ck-text:#1F2937;

  --ck-primary:var(--green-600);
  --ck-primary-ink:#fff;

  /* стили ссылок «как в футере»: серые в статике, зелёные и подчёркнутые при hover */
  --ck-link-base:var(--neutral-500);    /* gray-600 */
  --ck-link-hover:var(--green-600);   /* зелёный акцент */
}

/* уважать hidden */
.ck-banner[hidden], .ck-modal[hidden]{ display:none !important; }

/* ===== Banner: текст слева, кнопки справа, ссылки под текстом ===== */
.ck-banner{
  position: fixed; inset: auto 0 0 0;
  background: var(--ck-bg); color: var(--ck-fg);
  z-index: var(--ck-z);
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.ck-inner{
  max-width: 1200px; margin: 0 auto; padding: 24px 20px 16px;
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-areas:
    "text    actions"
    "links   actions";
  column-gap: 20px; row-gap: 12px;
  align-items: start;
}

/* текстовая колонка */
.ck-text{ grid-area: text; color: var(--ck-fg); }
.ck-text strong{
  display:block;
  font-weight:700; font-size:16px; line-height:1.25;
  margin:0 0 32px;          /* от заголовка до описания — 32px */
}
.ck-text p{
  margin:0; line-height:1.55; font-size:14px;
}
.ck-text p + p{ margin-top: 4px !important; }

/* блок ссылок — строго под текстом; десктоп: в строку, мобайл: 2 колонки */
.ck-links{
  grid-area: links;
  display:flex; flex-wrap:wrap; gap: 0 16px;
}
.ck-footlink{
  display:inline-block; margin-top:10px;   /* как новый абзац */
  font-size:13px; color: var(--ck-link-base);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ck-footlink:hover{
  color: var(--ck-link-hover);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

/* правая колонка с кнопками (порядок «Принять» затем «Только необходимые») */
.ck-actions{
  grid-area: actions;
  display:flex; flex-direction: column;
  gap: 10px;                    /* компактный зазор между кнопками */
  align-self: center;
  justify-content:center;
}

/* кнопки */
.ck-btn{
  appearance:none; border:0; border-radius:12px;
  padding:14px 16px; font-size:15px; cursor:pointer;
}

/* большая зелёная */
.ck-primary{
  background: var(--ck-primary); color: var(--ck-primary-ink);
  font-weight:700;
}

/* «Только необходимые»: бледная, без заливки, без жирного */
.ck-ghost{
  background: transparent;
  color:#CBD5E1;                      /* светло-серый текст */
  border: 2px solid rgba(229,231,235,.55);
  font-weight:400;                    /* НЕ жирная */
}
.ck-ghost:hover{
  border-color: rgba(229,231,235,.85);
  color:var(--neutral-300);
}

/* ===== Mobile (≤640): кнопки сверху, тексты ниже, ссылки — 2 колонки ===== */
@media (max-width:640px){
  .ck-banner{ border-top-left-radius:16px; border-top-right-radius:16px; }
  .ck-inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "actions"
      "text"
      "links";
    row-gap: 12px;
    padding: 20px 16px 18px;
  }
  .ck-actions{ gap: 10px; }
  .ck-btn{ font-size:14px; padding:12px 14px; }

  .ck-text strong{ font-size:13px; margin-bottom:12px; }
  .ck-text p{ font-size:11px; }

  .ck-links{
    display:grid;
    grid-template-columns: repeat(2, max-content);
    column-gap:16px; row-gap:8px;
  }
  .ck-footlink{ font-size:10px; margin-top:8px; }
}

/* ===== Modal (стили настроек) ===== */
.ck-modal{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: calc(var(--ck-z) + 1);
  display: grid; place-items: end center;
}
.ck-panel{
  width: min(720px,100%); background: var(--ck-panel-bg); color: var(--ck-text);
  border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow: 0 -16px 40px rgba(0,0,0,.25); padding:16px;
  max-height: 90dvh; overflow:auto;
}
@media (min-width:641px){
  .ck-modal{ place-items:center; }
  .ck-panel{ border-radius:16px; padding:20px 22px; max-height:80dvh; }
}
.ck-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ck-x{
  appearance:none; border:0; width:36px; height:36px; border-radius:10px;
  background:#F3F4F6; color:var(--neutral-800); font-size:20px; line-height:1; cursor:pointer;
}
.ck-desc{ margin: 10px 0 14px; color:var(--neutral-600); }

.ck-groups{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ck-group{ border:1px solid var(--ck-border); border-radius:12px; padding:12px; }
.ck-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ck-name{ font-weight:700; }
.ck-state{ font-weight:600; color:#047857; }
.ck-note{ margin:8px 0 0; color:var(--neutral-500); line-height:1.5; }

.ck-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.ck-foot .ck-btn{ min-width:180px; }
@media (max-width:640px){
  .ck-foot{ flex-direction:column-reverse; }
  .ck-foot .ck-btn{ width:100%; min-width:0; }
}

/* свитчер в модалке */
.ck-switch{ position:relative; width:44px; height:26px; display:inline-block; }
.ck-switch input{ position:absolute; inset:0; opacity:0; }
.ck-slider{
  position:absolute; inset:0; border-radius:999px; background:var(--neutral-300);
  box-shadow: inset 0 0 0 1px #D1D5DB; transition: background .2s;
}
.ck-slider::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition: transform .2s;
}
.ck-switch input:checked + .ck-slider{ background:#eaf7f0; border:1px solid #b7dbc9; box-shadow: inset 0 0 0 1px #6EE7B7; }
.ck-switch input:checked + .ck-slider::after{ transform: translateX(18px); }

/* опционально: скрыть плавающую кнопку управления */
#ck-manage{ display:none !important; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .ck-slider, .ck-slider::after { transition:none; }
}

/* Базовый контейнер подсказки — больше не фиксируем размер тут */
.hint{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

/* Никаких размеров здесь — размер кружка задаётся в едином правиле */
.hint .i{
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}


.hint:hover .i, .hint:focus-within .i{
  background:#E7F7EF; color:var(--green-700); box-shadow:0 0 0 3px rgba(34,197,94,.18);
}

.hint .tip{
  position:absolute;
  left:0;               /* от левого края подписи поля */
  bottom:calc(100% + 8px);
  background:#111; color:#fff;
  padding:6px 8px; border-radius:8px;
  font-size:12px; line-height:1; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s;
  z-index:50;
}
.hint:hover .tip, .hint:focus-within .tip{ opacity:1; }



.input.error{
  border-color:#E5484D;
  box-shadow:0 0 0 3px rgba(229,72,77,.15);
}
/* ссылка поделиться */
.share-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--neutral-500); text-decoration:none;
  font-size:14px;
}
.share-link .txt{
  border-bottom:1px dashed transparent;
  transition:color .15s, border-color .15s;
}
.share-link:hover .txt{
  color:var(--green-600);
  border-bottom-color:var(--green-600);  /* пунктир у текста */
}
.share-link:hover .icon{
  filter:none;                 /* эмодзи без подчёркиваний */
}
.share-link.copied .txt{
  color:var(--green-600);
  border-bottom-color:var(--green-600);
}





/* общий контейнер страницы (используется всеми секциями) */


.section-head{ margin-bottom: 24px; }
.section-title{ font: 700 28px/1.25 var(--font-heading); }
.section-kicker{ color:#8a8a8a; font-size:14px; margin:0 0 6px; }




/* ===== FAQ (финальная версия) ===== */

.faq { margin: 56px 0 48px; }
.faq-title { margin-bottom: 0 !important; }

.faq-list,
.faq-item { list-style:none; margin:0; padding:0; }
.faq-list { padding-left:0; }
.faq-item{
  position:relative;
  scroll-margin-top:calc(var(--header-h) + 12px);
}

/* карточка вопроса */
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border: 1px solid #d2d6db !important;
  border-radius:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  background:#fff;
  cursor:pointer;
  transition:background var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  position:relative;
  text-align:left;
}
.faq-q:hover{ border-color: #c8cfd6; background:var(--green-50); }                /* нежно-зелёный hover */
.faq-item.is-open .faq-q{
  border-color: #b9e0d1;
  background:#eefaf4;                              /* шапка открытого */
  box-shadow:0 8px 24px rgba(0,0,0,.07);
}
.faq-q:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:2px;
}

.faq-q__text{
  flex:1 1 auto;
  min-width:0;
  font-weight:200;
  font-size:var(--faq-q-size);
  letter-spacing:.1px;
  line-height:1.35;
  font-family:inherit;
}

/* иконки (скрепка и стрелка) через встроенный SVG */
.faq-q__copy,
.faq-q__chev{
  width:24px; height:24px; min-width:24px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  opacity:.8; transition:opacity .15s ease, transform .2s ease;
}
.faq-q__copy:hover,
.faq-q__chev:hover{ opacity:1; }

/* место под sibling copy-button, чтобы текст не заходил под иконку */
.faq-q__chev{ margin-left:34px; }

/* скрепка */
.faq-q__copy{
  appearance:none;
  position:absolute;
  top:16px;
  right:52px;
  z-index:2;
  padding:0;
  border:0;
  border-radius:6px;
  background-color:transparent;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 1 0-7.07-7.07L10 5'/><path d='M14 11a5 5 0 0 0-7.07 0L4.81 13.12a5 5 0 1 0 7.07 7.07L14 19'/></svg>");
}
.faq-q__copy:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:2px;
  opacity:1;
}
.faq-q__copy.copied{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23008050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M20 6L9 17l-5-5'/></svg>");
  opacity:1;
}

/* стрелка */
.faq-q__chev{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/></svg>");
  transform:rotate(0deg);
}
.faq-item.is-open .faq-q__chev{ transform:rotate(180deg); }

/* панель ответа — анимируем высоту, содержимое внутри с «воздухом» */
.faq-a{
  overflow:hidden;
  height:0;                                     /* закрыта */
  transition:height .26s ease;                  /* плавное открытие/закрытие */
}
.faq-a__inner{
  padding:16px 22px 22px;
  line-height:1.6;
}

/* аккуратные списки внутри */
.faq-a ul, .faq-a ol { margin:8px 0 0; padding-left:1.25rem; }
.faq-a li { margin:6px 0; }
.faq-a ul { list-style:disc; }
.faq-a ol { list-style:decimal; }
.faq-a ::marker { color:#222; font-weight:600; }

.faq-a p { margin:8px 0 0; }
.faq-a a{
  color:#2f7d68;
  text-decoration:underline dotted;
  text-underline-offset:2px;
}
.faq-a a:hover{ color:#1e6a57; text-decoration-style:solid; }

/* интервал между пунктами */
.faq-item + .faq-item{ margin-top:12px; }

.section-hint{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--neutral-500);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}
.section-hint .dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #D1D5DB;
}


/* === Бейдж статуса слотов в шапке ========================================= */
.avail-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#eaf7f0; color:#1f5a47; border:1px solid #b7dbc9;
  font-size:14px; line-height:1; position:relative; overflow:visible;
  text-decoration:none;
}
.avail-badge:hover{ background:#def2e7; }
.avail-badge:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
.avail-badge.is-section-active{
  border-color:var(--color-focus-outline);
  box-shadow:0 0 0 2px rgba(120,198,167,.22);
}
.avail-badge .dot{ width:8px; height:8px; border-radius:50%; position:relative; }

/* цвета состояний */
.avail-badge{ --ok:#22c55e; --tom:#3b82f6; --next:#f59e0b; --none:#e11d48; --pulse:rgba(34,197,94,.5); }
.avail-badge.is-today    .dot{ background:var(--ok); }
.avail-badge.is-tomorrow .dot{ background:var(--tom); }
.avail-badge.is-next     .dot{ background:var(--next); }
.avail-badge.is-none     .dot{ background:var(--none); }
.avail-badge.is-today    { --pulse:rgba(34,197,94,.5); }
.avail-badge.is-tomorrow { --pulse:rgba(59,130,246,.5); }
.avail-badge.is-next     { --pulse:rgba(245,158,11,.5); }
.avail-badge.is-none     { --pulse:rgba(225,29,72,.45); }

/* пульсация точки — включается классом .is-live из JS */
.avail-badge.is-live .dot::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 var(--pulse); animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 var(--pulse); }
  70%{ box-shadow:0 0 0 12px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){
  .avail-badge.is-live .dot::after{ content:none !important; animation:none !important; }
}

/* === Slots Cards Свободные слоты ======================= */
.slots{ margin:40px 0 24px; }
.slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:12px;
}
.slot-card{
  background:#fff;
  border:1px solid #e2e6ea;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.slot-date{ color:var(--neutral-500); font-size:.9rem; margin-bottom:4px; text-transform:lowercase; }
.slot-time{ font-weight:700; margin-bottom:8px; }
.slot-cta{
  width:100%;
}

/* === Корректный якорный скролл под фикс-хедер ======================= */
:root{ --header-h: 64px; }          /* поправьте, если у шапки другая высота */
   /* плавный скролл по якорям */
section[id], #services, #calc, #faq, #contact, #main, #faq .faq-item {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* === Skip-link ======================================================= */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  background:#fff; color:#111; padding:8px 12px; border-radius:8px;
  box-shadow:0 4px 24px rgba(0,0,0,.12); z-index:9999;
}

/* чёткие focus-стили для ссылок/кнопок в шапке */
.header-nav a, .lang-btn { outline: none; }
.header-nav a:focus-visible, .lang-btn:focus-visible, .slot-cta:focus-visible, .faq-q:focus-visible, .faq-q__copy:focus-visible{
  outline:2px solid var(--color-focus-outline); outline-offset:2px; border-radius:8px;
}

/* активный пункт меню при прокрутке */
.header-nav a.is-active{
  background:#f2f6fb; color:#0f2a45;
}

/* немного больше отступ между логотипом и бейджем (оставляем текущую сетку) */
.header-bar .brand{ gap: 18px; }
@media (min-width:1024px){ .header-bar .brand{ gap: 20px; } }

/* === Tooltip в шапке рядом с бейджем ===================================== */
.site-header .tz-tip.info{
  display:inline-flex;
  align-items:center;
  margin-left:8px;               /* небольшой отступ от бейджа */
  vertical-align:middle;
  position:relative;
  z-index:10;
}

/* Круглая кнопка "i" — типографика и поведение как в калькуляторе */
.site-header .tz-tip.info .i{
  display:inline-grid;
  place-items:center;

  width:18px;
  height:18px;
  border-radius:999px;

  background:#E9EDF7;            /* тот же серый фон */
  color:#334;

  /* ключ к одинаковой «толщине» символа */
  font-size:12px;
  line-height:1;
  font-weight:800;
  font-family:inherit;

  border:none;
  cursor:help;
  padding:0;
  outline:0;
  transition:background .15s, color .15s, box-shadow .15s;
}

/* Для variable-шрифтов (например, Inter) фиксируем wght */
@supports (font-variation-settings: normal){
  .site-header .tz-tip.info .i{ font-variation-settings: 'wght' 800; }
}

/* Hover/Focus — как в калькуляторе */
.site-header .tz-tip.info:hover .i,
.site-header .tz-tip.info:focus-within .i{
  background:#E7F7EF;
  color:var(--green-700);
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
}

/* Само «облачко» подсказки */
.site-header .tz-tip.info .tt{
  position:absolute;
  left:0; top:100%;
  transform:translateY(8px);
  min-width:260px; max-width:320px;
  padding:10px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e2e6ea;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  color:#333;
  font-size:14px;
  line-height:1.45;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}

/* маленькая «стрелка» у облачка */
.site-header .tz-tip.info .tt::before{
  content:"";
  position:absolute;
  top:-6px; left:12px;
  width:10px; height:10px;
  background:#fff;
  border-left:1px solid #e2e6ea;
  border-top:1px solid #e2e6ea;
  transform:rotate(45deg);
}

/* показываем по hover и по фокусу с клавиатуры */
.site-header .tz-tip.info:hover .tt,
.site-header .tz-tip.info:focus-within .tt{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(4px);
}

/* На очень узких экранах прячем тултип, чтобы не перекрывал хедер */
@media (max-width:700px){
  .site-header .tz-tip.info{ display:none; }
}

/* ============ PROCESS / Как всё происходит ============ */
#process.process{
  --process-marker-size: 44px;
  --process-step-gap: var(--space-6);
  background: var(--color-surface);
}

#process .process-head{
  max-width: 760px;
}

#process .process-head .section-title{
  margin: 0;
}

#process .process-intro{
  margin: var(--space-3) 0 0;
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: 1.55;
}

#process .process-steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--process-step-gap);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

#process .process-steps::before{
  display: none;
}

#process .process-step{
  position: relative;
  min-width: 0;
}

#process .process-step:not(:last-child)::after{
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--process-marker-size) / 2 - 1px);
  left: calc(var(--process-marker-size) / 2);
  width: calc(100% + var(--process-step-gap));
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

#process .process-step__number{
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: var(--process-marker-size);
  height: var(--process-marker-size);
  border: 1px solid #B9E0D1;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 0 0 6px var(--color-surface);
  color: var(--color-action-primary-hover);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
}

#process .process-step__body{
  margin-top: var(--space-5);
  padding-right: var(--space-2);
}

#process .process-step h3{
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  line-height: 1.3;
  text-wrap: balance;
}

#process .process-step p{
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 900px){
  #process .process-steps{
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
  }

  #process .process-step:not(:last-child)::after{
    display: block;
    top: calc(var(--process-marker-size) / 2);
    left: calc(var(--process-marker-size) / 2 - 1px);
    width: 2px;
    height: calc(100% + var(--process-step-gap));
  }

  #process .process-step{
    display: grid;
    grid-template-columns: var(--process-marker-size) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
  }

  #process .process-step__number{
    grid-column: 1;
    grid-row: 1;
  }

  #process .process-step__body{
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding: 2px 0 var(--space-2);
  }
}

@media (max-width: 640px){
  #process.process{
    --process-marker-size: 40px;
    --process-step-gap: var(--space-5);
  }

  #process .process-intro{
    font-size: var(--text-sm);
  }

  #process .process-steps{
    margin-top: var(--space-6);
  }

  #process .process-step{
    column-gap: var(--space-3);
  }

  #process .process-step__number{
    box-shadow: 0 0 0 5px var(--color-surface);
    font-size: var(--text-xs);
  }

  #process .process-step h3{
    font-size: 17px;
  }

  #process .process-step p{
    font-size: 13.5px;
  }
}

/* ===== Reviews: text-first cards ====================================== */
.rv-reviews{
  margin: 48px 0;
}
.rv-reviews .container{
  position: relative;
}
.rv-title{
  margin: 24px 0 28px;
}

.reviews-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.review-card{
  min-width: 0;
  background: #fff;
  border: 1px solid var(--neutral-300);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15,23,42,.025);
  padding: 22px;
}

.review-card__head{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
}

.review-card__author{
  color: var(--neutral-900);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

.review-card__meta{
  color: var(--neutral-500);
  font-size: 14px;
  line-height: 1.45;
}

.review-card__text{
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--neutral-600);
  font-size: 15px;
  line-height: 1.65;
}

.review-card__quote-mark{
  display: block;
  height: 22px;
  margin-bottom: 6px;
  color: #D1D5DB;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.review-card__text p{
  margin: 0;
}
.review-card__text p + p{
  margin-top: 14px;
}

.review-card__footer{
  margin-top: 18px;
}

.review-source{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px dashed #9CA3AF;
  background: transparent;
  color: var(--neutral-500);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.review-source__icon{
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}
.review-source:hover{
  color: var(--green-600);
  border-bottom-color: var(--green-600);
}
.review-source:focus-visible{
  outline: 2px solid rgba(21,128,61,.45);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

@media (max-width: 767.98px){
  .reviews-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .review-card{
    padding: 18px;
  }
}

/* Review source lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}
.lightbox[hidden]{
  display: none;
}
.lightbox .lb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.78);
}
.lightbox .lb-content{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: min(720px, 92vw);
  max-height: 90vh;
  margin: 0;
  outline: none;
}
.lightbox img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
  background: #fff;
}
.lb-close{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(15,23,42,.74);
  color: #fff;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lb-close:hover{
  background: rgba(15,23,42,.9);
}
.lb-close:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
}
body.lightbox-open{
  overflow: hidden;
}

@media (max-width: 640px){
  .lightbox{
    padding: 12px;
  }
  .lightbox .lb-content{
    width: 94vw;
    max-height: 92vh;
  }
  .lightbox img{
    max-height: 92vh;
  }
  .lb-close{
    top: 6px;
    right: 6px;
  }
}


/* ===== Contact ===== */

#contact .contact-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* текст слева, капсула справа */
  gap:10px;
  margin:0 0 32px !important;
  color:var(--neutral-500);
}

/* Левая часть: "Режим работы…" */
#contact .contact-meta .meta-left{
  flex:1 1 auto;
  min-width:0;                     /* не выпирает при узких ширинах */
}

/* Правая часть: капсула RU/SRB и иконка i */
#contact .contact-meta .meta-right{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Капсула RU/SRB
#contact .contact-meta .meta-lang{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--neutral-300);
  background:#eef2f6;
  border-radius:999px;
  font-weight:600;
  color:var(--neutral-700);
  line-height:1;
  white-space:nowrap;
}

/* Кружок "i" (если есть свои стили .hint — это не мешает) */
#contact .contact-meta .hint .i{
  display:inline-grid;
  place-items:center;
  width:20px; height:20px;
  border-radius:50%;
  background:#eef2f6;
  color:var(--neutral-700);
  border:1px solid var(--neutral-300);
  font-weight:700;
  font-size:12px;
}

/* Мобилки: правая часть уходит на строку под режимом работы */
@media (max-width:640px){
  #contact .contact-meta{
    flex-wrap:wrap;
    gap:6px;
  }
  #contact .contact-meta .meta-left{
    width:100%;
  }
  #contact .contact-meta .meta-right{
    width:100%;
    justify-content:flex-start;    /* прижать влево под текстом */
    margin-top:2px;
  }
}

.contact.card{ padding:20px; border-radius:16px; background:#fff; box-shadow:0 12px 36px rgba(0,0,0,.06); }
.contact-head h2{ margin:0 0 6px; }

/* две колонки: слева кнопки, справа поля */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:18px 22px;
}

/* === ЛЕВАЯ: крупные кликабельные кнопки === */
.contact-actions{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }

/* === ПРАВАЯ: поля одной колонкой + высокая textarea === */
.contact-form{ display:grid; grid-template-columns: 1fr; gap:12px; }
.fld{ display:grid; gap:6px; }
.lbl{ color:var(--neutral-700); font-size:.95rem; }
.fld input,
.fld textarea{
  width:100%; padding:var(--field-padding-y) var(--field-padding-x);
  border:1px solid #e4e7eb; border-radius:var(--radius-sm);
  background:#fff; box-shadow:inset 0 1px 0 rgba(0,0,0,.03);
  transition:border-color .15s, box-shadow .15s;
}
.fld textarea{ min-height: 124px; height: 124px; resize:vertical; }
.fld input:focus,
.fld textarea:focus{ outline:0; border-color:#b9e0d1; box-shadow:0 0 0 3px rgba(120,198,167,.2); }

@media (max-width: 720px){
  #contact textarea{
    min-height: 140px;
    height: 140px;
  }
}

.agree{ display:flex; align-items:flex-start; gap:8px; font-size:.95rem; color:var(--neutral-700); }
.agree a{ color:#2b6e59; text-decoration:underline dotted; text-underline-offset:2px; }
.agree a:hover{ color:var(--green-600); text-decoration-style:solid; }


/* адаптив */
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Доступность: подсветка всей строки, когда чекбокс в фокусе с клавиатуры */
#contact .agree:focus-within{
  box-shadow: 0 0 0 3px rgba(120,198,167,.18);
}

/* Contact: увеличиваем стартовую высоту поля Сообщение */
#contact .fld-message textarea{
  min-height: 200px;
  height: 200px;       /* стартовая высота; пользователь может растягивать */
  box-sizing: border-box; /* на всякий случай, чтобы паддинги/бордеры входили в размер */
  resize: vertical;
}

/* На очень узких экранах можно сделать ещё выше */
@media (max-width: 720px){
  #contact .fld-message textarea{
    min-height: 220px;
    height: 220px;
  }
}

/* Ровная симметрия вокруг точки-разделителя */
.meta-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;                 /* общий зазор между блоками */
  white-space: nowrap;
}

.meta-right .sep{
  /* фиксированный бокс под разделитель */
  --sep-box: 12px;           /* при желании 10–14px */
  width: var(--sep-box);
  height: var(--sep-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* скрываем текстовый символ внутри (чтобы не влиял метриками) */
  font-size: 0;
  line-height: 0;
}

.meta-right .sep::before{
  content: "";
  width: 4px;                /* сама «точка» */
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}




/* ===== Footer ===== */

.site-footer{
  margin-top: 48px;
  padding: 22px 0 24px;
  background: #f7f3ec;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Планка футера */
.footer-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;  /* новая логика: слева локация+копирайт, справа нав */
  gap: 16px;
  /* без padding/border здесь — они уже на .site-footer */
}

/* ===== Левая колонка: иконка + город + копирайт ===== */
.foot-left{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;                 /* чтобы не ломалось при небольших ширинах */
  color: var(--neutral-700);
}

.foot-loc{
  width:18px;
  height:18px;
  background-color:#C8A77C;
  -webkit-mask: url('/img/icons/location.svg') no-repeat center / contain;
          mask: url('/img/icons/location.svg') no-repeat center / contain;
}

.foot-city{ color:#2b6e59; }       /* dashed-линк может переопределить цвет — не критично */
.foot-city:hover{ color:#1e6a57; }
.foot-left .sep{ opacity:.6; }

.foot-copy{
  font-size: 14px;
  line-height: 1.4;
  color: var(--neutral-500);
}

/* ===== Правая колонка: навигация ===== */
.foot-nav{
  display: flex;
  justify-content: flex-end;
  gap: 12px;                       /* умеренный зазор, чтобы влезало */
  flex-wrap: nowrap;               /* без переносов на десктопе */
  white-space: nowrap;             /* и внутри ссылок тоже не переносим */
}

.site-footer .foot-nav a{
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Чуть ужимаем на узких десктопах */
@media (max-width: 1280px){
  .site-footer .foot-nav{ gap: 10px; }
  .site-footer .foot-nav a{ font-size: 13.5px; }
}
@media (max-width: 1140px){
  .site-footer .foot-nav{ gap: 8px; }
  .site-footer .foot-nav a{ font-size: 13px; }
}

/* ===== Мобильная/планшетная компоновка: 2 строки по центру ===== */
@media (max-width: 980px){
  .footer-bar{
    flex-wrap: wrap;               /* разрешаем перенос */
    justify-content: center;
    text-align: center;
    gap: 12px;
  }

  .foot-left,
  .foot-nav{
    flex: 1 1 100%;
    justify-content: center;       /* по центру обе строки */
  }

  .foot-nav{
    order: 3;
    flex-wrap: wrap;               /* можно переносить ссылки */
    white-space: normal;
    gap: 12px 18px;
  }
}





/* FAQ question-size token */
.faq-q{ --faq-q-size: 1.125rem; }

/* На узких экранах делаем помягче, чтобы не «раздувать» кнопку */
@media (max-width: 640px){
  .faq-q{ --faq-q-size: 1.0625rem; }       /* ≈17px; можно поставить 1rem (=16px) */
}

/* ——— «воздух» карточке контактов ——— */
.contact.card{
  padding: 26px 24px;                     /* было чуть меньше — добавим воздуха */
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
}

/* ——— сетка на 3 колонки ——— */
.contact-form.contact-3col{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;     /* 3 равные колонки */
  gap: 18px 22px;
  align-items: start;
}

/* стили колонок */
.contact-form .col{ display:flex; flex-direction:column; gap:14px; }
.col-actions .contact-actions{ display:flex; flex-direction:column; gap:12px; }

/* Desktop: поджимаем только колонку полей для выравнивания нижней границы. */
@media (min-width: 1025px){
  #contact .contact-form .col-fields{ gap:8px; }
}

/* поля/лейблы/ошибки — чуть легче и крупнее */
.contact-form .lbl{ font-weight:600; margin-bottom:6px; }
.contact-form .req{ color:#E11D48; margin-left:4px; }
.contact-form .input{ height:auto; padding:var(--field-padding-y) var(--field-padding-x); border-radius:var(--field-radius); }
.contact-form .fld + .fld{ margin-top:4px; }
.contact-form .err{ color:#E11D48; font-size:.85rem; }

/* кнопка «Отправить» во всю ширину колонки справа */
.w-100{ width:100%; }

/* ——— адаптив ——— */
@media (max-width: 1024px){
  .contact-form.contact-3col{
    grid-template-columns: 1fr 1fr;       /* 2 колонки */
  }
  .contact-form .col-message{ grid-column: span 2; } /* сообщение на всю ширину снизу */
}

@media (max-width: 640px){
  .contact-form.contact-3col{ grid-template-columns: 1fr; } /* 1 колонка */
  .contact-form .col-message{ grid-column: auto; }
}

/* Заголовок колонки с кнопками */
#contact .c-col-title{
  font-weight:700;
  color:var(--neutral-700);
  margin:0;
}

/* Чуть больше воздуха от строки «Режим работы…» */
#contact .c-meta{           /* это ваш контейнер со строкой режима */
  margin-bottom: 14px;      /* было меньше — сделаем заметнее */
}

/* Контейнер кнопок + выравнивание верха под поля ввода */
#contact .c-col--links .c-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  /* ключ: поднимаем список до уровня «полей ввода», 
     чтобы верх Telegram совпал с верхом инпутов, а заголовок остался выше */
  margin-top: 28px;         /* подберите 24–32px по факту вашего кегля лейблов */
}

/* Чек-бокс и текст согласия — делаем компактнее, чтобы влезало в одну строку */
#contact .c-agree{                      /* контейнер строки согласия */
  font-size: 13px;                      /* было крупнее */
  line-height: 1.3;
}
#contact .c-agree a{
  color:var(--green-600);
  text-decoration: underline dotted;
}

/* на очень узких — можно капельку уменьшить ещё */
@media (max-width: 560px){
  #contact .c-agree{ font-size:12.5px; }
}

/* === Contact: правки по вашим текущим классам =================== */

/* 4) Чуть больше воздуха после строки "Режим работы" */
.contact-meta{ margin-bottom: 16px; }

/* 1) Заголовок над кнопками контактов */
.actions-title{
  font-weight: 700;
  color:var(--neutral-700);
  margin: 0;                 /* сам заголовок без отступа снизу */
}
/* выравниваем верх первой кнопки с верхом полей ввода справа */
.contact-grid .contact-actions{ margin-top: 32px !important; } /* подберите 24–32px под свой кегль */

/* 3) Текст чекбокса делаем компактнее, чтобы влезал в строку */
.agree{
  font-size: 13px;
  line-height: 1.35;
}
.agree a{
  color:var(--green-600);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.agree a:hover{ text-decoration-style: solid; }

/* небольшая адаптация: на узких экранах возвращаем прежний верхний отступ,
   чтобы заголовок и кнопки не "склеивались" */
@media (max-width: 640px){
  .contact-grid .contact-actions{ margin-top: 16px; }
}

/* Заголовок колонки слева */
#contact .actions-title,
#contact .c-col-title{
  font-weight: 700;
  color:var(--neutral-700);
  margin: 0 0 8px;
}

/* Контактная форма: высота текстового поля = 2 инпута + зазор */
.contact .col-message .fld textarea#cmsg{
  /* базовая высота обычного инпута на сайте (под ваши текущие стили) */
  min-height: 124px;
  resize: vertical;         /* можно растянуть вручную при желании */
}

#contact #cmsg{ min-height: 124px;
                height: 124px; }

/* аккуратнее визуальные размеры самой карточки-сообщения */
.contact .col-message .fld { margin-bottom: 16px; }

/* === Contact (левый столбец): "карточка" + крупные кнопки === */

/* контейнер левой колонки — единая карточка, «встроенная» в форму */
#contact .col-actions{
  background:#fff;
  border:1px solid var(--neutral-300);
  border-radius:14px;
  padding: 14px 14px 68px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* заголовок группы */
#contact .actions-title{
  font-weight:700;
  margin:2px 0 10px;
  color:#1f2937;
}

/* список кнопок-каналов */
#contact .c-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Каналы связи используют ту же геометрию .btn; здесь только neutral-variant. */
#contact .c-btn{
  --btn-bg:#f9fafb;
  --btn-brd:var(--neutral-300);
  --btn-ink:var(--color-text-primary);
  width:100%;
  justify-content:flex-start;
  font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

#contact .c-btn:hover,
#contact .c-btn:focus-visible{
  --btn-bg:var(--color-action-primary-soft);
  --btn-brd:#b9e0d1;
  --btn-ink:var(--color-action-primary-hover);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* маленькая «онлайн-точка» */
#contact .c-btn .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.15);
}

/* — необязательно, но полезно: чуть увеличим отступ «режим работы» → «контакты» */
#contact .contact-meta{ margin-bottom: 40px !important; }

/* компактные тексты ошибок (если ещё не применены) */
#contact .fld .err,
#contact .fld .error,
#contact .error-text{
  font-size:12px;
  line-height:1.3;
  margin-top:6px;
  color:var(--color-error-text);
}

/* чтобы не прыгала верстка при появлении ошибки */
#contact .fld{ margin-bottom:14px; }
#contact .fld.has-error{ margin-bottom:10px; }

/* === Contact: component-local field typography ===
   Touch/coarse-pointer controls stay at 16px to avoid mobile browser zoom.
   Fine-pointer desktop uses the shared 14px text foundation. */
#contact{
  --contact-field-font: var(--font-sans);
  --contact-field-size: var(--text-base);
  --contact-field-line: 1.35;
  --contact-field-color: var(--color-text-secondary);
  --contact-field-focus-color: var(--color-text-primary);
  --contact-error-size: var(--text-xs);
  --contact-placeholder-color: var(--color-text-muted);
  --contact-error-color: var(--color-error-text);
}

#contact .fld .input,
#contact .fld textarea{
  font-family: var(--contact-field-font);
  font-size: var(--contact-field-size);
  line-height: var(--contact-field-line);
  color: var(--contact-field-color);
}
#contact .fld .input:focus,
#contact .fld textarea:focus{
  color: var(--contact-field-focus-color);
}

/* одинаковые плейсхолдеры */
#contact .fld .input::placeholder,
#contact .fld textarea::placeholder{
  color: var(--contact-placeholder-color);
  opacity: 1;
}

/* подписи-ошибки под полями — тем же кеглем */
#contact .fld .err{
  font-family: var(--font-sans);
  font-size: var(--contact-error-size);
  line-height: 1.3;
  color: var(--contact-error-color);
}

/* Для даты/времени сохраняем ровный ритм цифр без отдельной monospace-гарнитуры. */
#contact #ctime{
  font-variant-numeric: tabular-nums;
}

/* Contact field/error sizes are owned by the local contract above. */

/* подписи-ошибки под полем (если где-то ещё показываются) */
#contact .fld .err{
  font-size: var(--contact-error-size, calc(var(--contact-field-size) - 1px));
  line-height: var(--contact-field-line);
}

#contact .agree-err{
  font-family: var(--font-sans);
  font-size: var(--contact-error-size, 12px);
  line-height: 1.3;
  color: var(--contact-error-color);
}
/* Валидация имени/контакта: сообщение внутри поля без изменения высоты. */
#contact .field-control{
  position:relative;
  width:100%;
}
#contact .field-control .input{
  height:52px;
}
#contact .field-control .input.invalid,
#contact .field-control .input.invalid:focus{
  border-color:#e8a0a0;
  box-shadow:0 0 0 3px rgba(185,28,28,.10);
}
#contact .field-control .field-error{
  position:absolute;
  left:14px;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  padding:1px 2px;
  background:#fff;
  font-size:var(--contact-error-size, 12px);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

/* Consent error: постоянный слот под кнопкой, чтобы форма не прыгала. */
#contact .submit-wrap{
  display:grid;
  gap:6px;
  width:100%;
}
#contact .submit-wrap #contactSubmit{
  width:100%;
}
#contact .submit-error-slot{
  min-height:calc(var(--contact-error-size, 12px) * 2.7);
  display:grid;
  place-items:start center;
}
#contact .submit-error-slot .agree-err:not([hidden]){
  display:block;
  width:100%;
  margin:0;
  text-align:center;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
}

/* уменьшенный кегль для placeholder-состояний ошибок */
#contact .fld .input.is-error::placeholder,
#contact .fld textarea.is-error::placeholder{
  font-size: var(--contact-error-size, calc(var(--contact-field-size) - 1px));
}

/* чтобы сами поля тоже стали компактнее по кеглю */
#contact .fld .input,
#contact .fld textarea{
  font-size: var(--contact-field-size);
  line-height: var(--contact-field-line);
}
/* Compact field typography is desktop-only.
   Touch/coarse-pointer devices keep 16px to avoid iOS Safari auto-zoom. */
@media (min-width: 641px) and (pointer: fine){
  #contact{
    --contact-field-size: var(--text-sm);
  }
}

/* Подсветка ошибки чекбокса без текста */

/* обычный цвет галочки */
#contact input[type="checkbox"] {
  accent-color: var(--color-action-primary);          /* зелёная галочка (поддерживается в современных браузерах) */
}

/* ошибка — подсвечаем именно сам чекбокс */
#contact input[type="checkbox"].is-error{
  /* красный «ореол» вокруг чекбокса — видно даже когда он не отмечен */
  box-shadow: 0 0 0 3px rgba(239,68,68,.28);
  border-radius: 4px;              /* чтобы ореол был скруглённый */
  outline: none;                   /* на всякий случай */
  accent-color: #EF4444;           /* если чекбокс всё же отмечен — галочка будет красной */
}

/* равные отступы вокруг строки согласия: убираем локальный margin у textarea-блока */
.contact .col-message .fld{ margin-bottom: 0 !important; }

/* сама строка согласия — высота как у инпутов, без внутренних паддингов */
#contact{ --control-h: 52px; }
#contact .agree{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--control-h);
  padding:0 !important;
  margin:0;
  border-radius:8px;
  font-size: 12px;
  line-height:1.35;
}
#contact .agree > span{ display:block; line-height:1.35; }

/* обычная галочка — зелёная (как и было) */
#contact .agree input[type="checkbox"]{
  margin:0;
  transform:none;
  accent-color:var(--color-action-primary);
  cursor:pointer;
}

/* браузерный :invalid не подсвечиваем постоянно */
#contact .agree input[type="checkbox"]:invalid{
  outline:none !important;
  box-shadow:none !important;
}

/* ВКЛЮЧАЕМ подсветку только при ошибке после проверки формы */
#contactForm.was-validated .agree input[type="checkbox"]:invalid,
#contact .agree input[type="checkbox"].is-error{
  /* тонкий красный контур + небольшая мягкая тень,
     по стилю как у полей ввода с ошибкой */
  outline:1px solid #E5484D;
  outline-offset:1px;
  box-shadow:0 0 0 2px rgba(229,72,77,.15) !important;
  border-radius:4px;
  accent-color:#EF4444; /* если вдруг отмечен — галочка красная */
}

/* Колонки */
#top .hero-copy{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; min-width:0;
}
#top .hero-visual{
  grid-column:2; grid-row:1;
  display:flex; flex-direction:column;
  justify-self: start;     /* было end/stretch → начинаем строго от левого края колонки */
  align-self: start;
  min-width:0;
}

/* Карточка фото — растягиваем по колонке, без авто-отступов */
#top .hero-photo{
  box-sizing:border-box;
  align-self: stretch !important;
  margin: 0 !important;
  width: 100%;
  max-width: none;         /* не ограничиваем — шириной рулит колонка */
  aspect-ratio: 4 / 3;
  border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
#top .hero-photo img{
  display:block; width:100%; height:100%; object-fit:cover;
}



#top .hero-visual .hero-social{ margin-top:14px; min-height:28px; display:flex; align-items:center; gap:10px; min-width:0; }
#top .hero-visual .hero-social a{ white-space:nowrap; }

#top .hero-visual .hero-social .quote-wrap{
  position:relative; margin-left:auto; flex:1 1 auto; min-width:0;
  height:1.35em; line-height:1.35em; text-align:right;
}
#top .hero-visual .hero-social .quote-wrap .quote{
  position:absolute; inset:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--neutral-700); font-style:italic; font-size:14px;
  opacity:0; transition:opacity var(--duration-slow) var(--ease-standard);
}
#top .hero-visual .hero-social .quote-wrap .quote.is-active{ opacity:.9; }

@media (max-width:1024px){
  #top .hero-visual .hero-social{ flex-wrap:wrap; }
  #top .hero-visual .hero-social .quote-wrap{ text-align:left; margin-left:0; height:auto; line-height:inherit; }
  #top .hero-visual .hero-social .quote-wrap .quote{ position:static; opacity:.9; }
}






/* ===================== CALCULATOR (final clean) ===================== */

/* Calculator container preserves the existing 24px × 16px computed padding. */
#calc > .container.card,
#calc > .container.calc-elevate{
  padding:24px 16px;
}

/* Сетка */
.calc-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
#calc .calc-head h2{ margin:0; }
.calc-grid{
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
  align-items:start; margin-top:var(--space-16, 64px);
}
.calc-grid > .field{ display:flex; flex-direction:column; gap:var(--space-3, 12px); }
@media (max-width:1024px){ .calc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .calc-grid{ grid-template-columns:1fr; gap:14px; } }

/* Лейблы и иконки */
#calc .label-row{ display:flex; align-items:center; gap:8px; font-weight:600; }
#calc .label-row > svg{
  width:20px; height:20px; flex:0 0 20px;
  color:var(--neutral-500);
  fill:var(--color-action-primary) !important;
  stroke:var(--color-action-primary) !important;
}
#calc .label-row .hint{ display:inline-flex; align-items:center; }
#calc .label-row .hint .i{
  inline-size: 22px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  padding: 0; border: 0;
  background: var(--neutral-200);
  color: var(--neutral-500);
  font: 600 12px/1 var(--font-sans);
}
#calc .label-row .hint .tip{ white-space:nowrap; }

/* Поля формы: единый вид */
#calc .input,
#calc select,
#calc input[type="number"]{
  width:100%;
  min-height:52px;
  padding:var(--field-padding-y) var(--field-padding-x);
  border:1px solid var(--field-border);
  border-radius:var(--field-radius);
  background:#fff;
  line-height:1.35;
  transition:border-color .15s, box-shadow .15s;
}
#calc .input:focus,
#calc select:focus,
#calc input[type="number"]:focus{
  outline:none;
  border-color:#A7DCC2;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

/* Number: всегда нативные спиннеры у часов */
#hours{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  -moz-appearance:auto !important;
  padding-right:40px; /* запас справа под спиннеры */
}
#hours::-webkit-inner-spin-button,
#hours::-webkit-outer-spin-button{
  -webkit-appearance:auto !important;
  opacity:1; /* не прятать до hover */
  margin:0;
}

/* Быстрые пресеты (чипы) */
#calc .presets{ margin:var(--space-5, 20px) 0 10px; display:flex; gap:8px; flex-wrap:wrap; }
#calc .presets .tag{
  padding:6px 12px; border:1px solid var(--neutral-300); border-radius:999px;
  background:#fff; color:var(--neutral-500); cursor:pointer; font-size:14px;
  transition:background .12s, border-color .12s, color .12s, transform .12s;
}
#calc .presets .tag:hover{ transform:translateY(-1px); border-color:#B9E0D1; background:var(--green-50); color:var(--green-700); }
#calc .presets .tag.active{ color:var(--neutral-600); }
#calc .presets .tag:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:2px;
  border-color:#B9E0D1;
}

/* Результат */
#calc .result-card{
  position:relative;
  overflow:visible;
  margin-top:var(--space-6, 24px);
  padding:20px !important;
  border:1px solid var(--neutral-300);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}
#calc .result-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--color-action-primary);
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
#calc .result-card .result-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
#calc .result-main{ min-width:0; }
#calc .result-label{
  margin-bottom:4px;
  color:var(--neutral-500);
  font-size:13px;
  line-height:1.35;
  font-weight:500;
}
#calc .result-total{
  color:var(--neutral-900);
  font-size:clamp(28px, 3vw, 36px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
}
#calc .result-total .eur{
  display:inline-block;
  opacity:.85;
  margin-left:8px;
  color:var(--neutral-500);
  font-size:14px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:0;
}
#calc .calc-line{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
}
#calc .calc-rate{
  color:#555;
  font-size:14px;
  line-height:1.5;
}
#calc .calc-chips, #calc #badges{ display:flex; gap:8px; flex-wrap:wrap; }
#calc .badge{
  display:inline-block;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:var(--green-50);
  border:1px solid #B9E0D1;
  color:var(--green-700);
  font-size:12px;
  white-space:normal;
}
#calc #eurWrap{
  display:inline-flex;
  align-items:flex-start;
  max-width:100%;
  margin:16px 0 0 !important;
}
#calc #eurLabel{ min-width:0; font-size:12px; font-weight:400 !important; color:#777; line-height:1.3; }
#calc #eurWrap input{ transform:translateY(1px); }
#calc .cta-bottom-wrap{ margin-top:18px; }
#calc .share-link{ flex:0 0 auto; }
#calc .share-link:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:3px;
  border-radius:6px;
}
#calc .calc-live{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:640px){
  #calc .result-card{ padding:18px !important; }
  #calc .result-card .result-row{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  #calc .result-total{ font-size:30px; }
  #calc .result-total .eur{
    display:block;
    margin:4px 0 0;
  }
  #calc .calc-line{ gap:8px; }
  #calc #eurWrap{ margin-top:14px !important; }
}

@media (prefers-reduced-motion: reduce){
  #calc .presets .tag,
  #calc .subcheck,
  #calc #eurWrap,
  #calc .hint .tip{
    transition:none !important;
  }
}

/* Чекбоксы в калькуляторе — нативные, 14px */
#calc .subcheck, #calc #eurWrap{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--check-brd); border-radius:10px; background:transparent;
  box-shadow:none;
  transition:box-shadow .18s, border-color .18s, background-color .18s, color .18s;
  cursor:pointer; user-select:none;
}
#calc input[type="checkbox"]{
  appearance:auto !important; -webkit-appearance:auto !important; -moz-appearance:auto !important;
  width:14px; height:14px; accent-color:var(--color-action-primary); cursor:pointer;
}
#calc input[type="checkbox"]:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:2px;
}



/* 3) Чипы «доп. занятия»: текст меньше + отступ перед ценой */
#calc .subcheck{
  font-size:14px;
  line-height:1.3;
  font-weight:400;
  color:var(--color-text-secondary);
}
#calc .subcheck .subnote{
  font-size:12px;
  margin-left:6px;                      /* зазор между текстом и ценой */
  color:var(--color-text-muted);
}



/* === Calc: принудительно показываем кастомные стрелки у селектов ======= */
#calc #kids,
#calc #dayType{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 18px 18px !important;

  padding-right: 48px !important; /* запас под стрелку */
}

/* Фокус — зелёная стрелка */
#calc #kids:focus,
#calc #dayType:focus,
#calc #kids:focus-visible,
#calc #dayType:focus-visible{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146C43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  outline: none;
}




#calc{
  position: relative;
  z-index: 0;
  background: transparent;
}
#calc::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0; bottom:0;
  left:50%; right:50%;
  margin-left:-50vw;     /* тянем к левому краю окна */
  margin-right:-50vw;    /* и к правому */
  background:#fff;
  border-radius:0;
}

/* внутри просто стандартные паддинги */
#calc > .container{
  padding-inline: var(--layout-gutter, 20px);
}

/* гасим старые скругления/тени */
#calc > .container.card,
#calc > .container.calc-elevate,
#calc > .container.card.calc-elevate,
#calc .card{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}



/* === CALC — чекбоксы: прозрачная капсула с рамкой; поля: серый фон ====== */
#calc{
  /* Поля ввода/селекты */
  --field-bg: #F6F8FB;
  --field-brd: #E6ECF3;
  --field-brd-hover: #DEE6F0;

  /* Чекбоксы-капсулы */
  --check-brd: #e6ebf3;
  --check-brd-hover: #34d399;
  --check-ring: rgba(16,185,129,.14);
  --check-ring-checked: rgba(16,185,129,.10);
}

/* hover: зелёный акцент */
#calc .subcheck:hover,
#calc #eurWrap:hover{
  background: transparent !important;
  border-color: var(--check-brd-hover) !important;
  box-shadow: 0 0 0 2px var(--check-ring) inset !important;
}

/* checked: мягкий внутренний подсвет */
#calc .subcheck:has(input:checked),
#calc #eurWrap:has(input:checked){
  background: transparent !important;
  border-color: var(--check-brd) !important;
  box-shadow: 0 0 0 2px var(--check-ring-checked) inset !important;
}

/* 2) Поля «Часы», «Дети», «День недели» — мягкий серый фон + светлая рамка */
#calc #hours,
#calc #kids,
#calc #dayType{
  background-color: var(--field-bg) !important;
  border: 1px solid var(--field-brd) !important;
}

/* hover: рамка чуть темнее (фон не меняем) */
#calc #hours:hover, #calc #kids:hover, #calc #dayType:hover{
  border-color: var(--field-brd-hover) !important;
}


/* =================== /CALCULATOR ===================== */






/* === Back-to-top === */

/* Контейнер ссылки между формой и футером */
.back-to-top{
  display: flex;
  justify-content: center;
  margin: 8px 0 20px;
}

/* Ссылка */
.back-top-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--green-600);                 /* фирменный зелёный */
  text-decoration: none !important;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color .2s ease;
}

/* Пунктир — ТОЛЬКО под текстом */
.back-top-label{
  display: inline-block;
  line-height: 1.2;
  border-bottom: 1px dashed currentColor;
  transition: border-color .2s ease;
}

/* Иконка-стрелка */
.back-top-link .icon{
  flex: 0 0 16px;
  color: currentColor;
  transform: translateY(0);
  transition: transform .2s ease;
}

/* Hover: серый текст, пунктир исчезает, стрелка «дышит» вверх-вниз */
@media (hover:hover){
  .back-top-link:hover{ color:var(--neutral-500); }
  .back-top-link:hover .back-top-label{ border-bottom-color: transparent; }
  .back-top-link:hover .icon{
    animation: backTopArrow 800ms ease-in-out infinite alternate;
    will-change: transform;
  }
}

/* Фокус с клавиатуры — заметно и аккуратно */
.back-top-link:focus-visible{
  outline: 2px solid #16a34a;
  outline-offset: 2px;
  color:var(--neutral-500);
}

/* Ключевые кадры для стрелки */
@keyframes backTopArrow{
  from { transform: translateY(3px); }   /* старт чуточку ниже */
  to   { transform: translateY(-3px); }  /* плавно вверх */
}

/* Уважение к предпочтению «reduce motion» */
@media (prefers-reduced-motion: reduce){
  .back-top-link:hover .icon{ animation: none; }
}







input, textarea, [contenteditable="true"], .allow-select {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-drag: none;
}

/* ===== Footer developer link ===== */

.site-footer .footer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
}

.site-footer .foot-left {
  justify-self: start;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer .foot-dev {
  justify-self: center;
}

.site-footer .foot-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dev-credit {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 150px;
  height: 24px;
  padding: 0 4px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.dev-credit__front,
.dev-credit__back {
  grid-area: 1 / 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.dev-credit__front {
  opacity: 1;
  transform: translateY(0);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--neutral-500);
}

.dev-credit__back {
  opacity: 0;
  transform: translateY(115%);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--green-600);
}

.dev-credit__handle {
  margin-left: 4px;
  font-weight: 600;
  color: var(--neutral-600);
}

.dev-credit:hover .dev-credit__front,
.dev-credit:focus-visible .dev-credit__front {
  opacity: 0;
  transform: translateY(-115%);
}

.dev-credit:hover .dev-credit__back,
.dev-credit:focus-visible .dev-credit__back {
  opacity: 1;
  transform: translateY(0);
}

.dev-credit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

@media (max-width: 980px) {
  .site-footer .footer-bar {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer .foot-left,
  .site-footer .foot-nav,
  .site-footer .foot-dev {
    justify-self: center;
  }

  .site-footer .foot-left,
  .site-footer .foot-nav {
    justify-content: center;
  }

  .dev-credit {
    min-width: 140px;
  }
}












































































































































































































































/* ===== Regular schedule request MVP ===== */
.slots-grid .slots-empty{
  grid-column:1 / -1;
  margin:0;
}
.regular-slot-card{
  grid-column:span 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6, 24px);
  min-width:0;
  padding:var(--space-5, 20px);
  border-color:#B9E0D1;
  background:var(--color-action-primary-soft);
}
.regular-slot-copy{ min-width:0; }
.regular-slot-title{
  margin:0 0 var(--space-2, 8px);
  color:var(--color-text-primary);
  font-size:1.05rem;
  line-height:1.3;
}
.regular-slot-text{
  margin:0;
  color:var(--color-text-secondary);
  font-size:.925rem;
  line-height:1.45;
}
.regular-slot-cta{ flex:0 0 auto; }

@media (max-width:719px){
  .regular-slot-card{
    grid-column:1 / -1;
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-4, 16px);
  }
  .regular-slot-cta{ width:100%; }
}

#calc .calc-presets-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4, 16px);
  margin-top:var(--space-5, 20px);
}
#calc .calc-presets-row .presets{
  margin-top:0;
  min-width:0;
}
#calc .regular-context-link{
  appearance:none;
  flex:0 0 auto;
  min-height:44px;
  padding:8px 0;
  border:0;
  background:transparent;
  color:var(--color-action-primary-hover);
  font:inherit;
  font-size:14px;
  line-height:1.35;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
#calc .regular-context-link:hover{
  color:var(--color-action-primary);
  text-decoration-thickness:2px;
}
#calc .regular-context-link:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:3px;
  border-radius:6px;
}

@media (max-width:640px){
  #calc .calc-presets-row{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-2, 8px);
  }
  #calc .regular-context-link{
    align-self:flex-start;
    max-width:100%;
    text-align:left;
  }
}

.regular-request-modal .regular-request-panel{
  width:min(560px, 100%);
}
.regular-request-title{
  margin:0;
  font-size:1.35rem;
  line-height:1.25;
}
.regular-request-form{
  display:grid;
  gap:var(--space-4, 16px);
}
.regular-request-form .fld{
  display:grid;
  gap:var(--space-2, 8px);
}
.regular-request-form .lbl{
  color:var(--color-text-secondary);
  font-weight:600;
}
.regular-request-form .req{
  margin-left:4px;
  color:#E11D48;
}
.regular-request-form .input{
  width:100%;
}
.regular-request-form textarea.input{
  min-height:124px;
  resize:vertical;
}
.regular-request-form .input.invalid,
.regular-request-form .input.invalid:focus{
  border-color:#E8A0A0;
  box-shadow:0 0 0 3px rgba(185,28,28,.10);
}
.regular-request-form .err{
  color:var(--color-error-text);
  font-size:12px;
  line-height:1.35;
}
.regular-request-form .agree{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  color:var(--color-text-secondary);
  font-size:12px;
  line-height:1.4;
}
.regular-request-form .agree input{
  margin-top:2px;
  accent-color:var(--color-action-primary);
}
.regular-request-form .agree input.is-error{
  outline:1px solid #E5484D;
  outline-offset:1px;
  box-shadow:0 0 0 2px rgba(229,72,77,.15);
  border-radius:4px;
}
.regular-request-form .agree input:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:2px;
}
.regular-request-form .btn{
  width:100%;
}
.regular-request-notice{
  min-height:1.4em;
  color:var(--color-text-secondary);
  font-size:13px;
  line-height:1.4;
}
.regular-request-notice a{
  color:var(--color-action-primary-hover);
  text-decoration:underline;
  text-underline-offset:2px;
}
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
body.regular-modal-open{
  overflow:hidden;
}

@media (max-width:640px){
  .regular-request-modal .regular-request-panel{
    max-height:90dvh;
  }
}


/* ===== Slots direct selection ===== */
.avail-badge{ --loading:#64748b; --error:#e11d48; }
.avail-badge.is-loading .dot{ background:var(--loading); }
.avail-badge.is-error .dot{ background:var(--error); }
.avail-badge.is-error{ border-color:#f1b6c3; background:#fff2f5; color:#8f1230; }

.slot-card{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.slot-time{
  margin:6px 0 12px;
}
.slot-cta{
  margin-top:auto;
}
.slot-feedback{
  min-height:1.3em;
  margin:8px 0 0;
  color:#b42318;
  font-size:.82rem;
  line-height:1.35;
}
.slots-loading,
.slots-status{
  grid-column:1 / -1;
}
.slots-status{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding:14px;
  border:1px solid #e2e6ea;
  border-radius:12px;
  background:#fff;
}
.slots-status__main,
.slots-status__secondary{ margin:0; }
.slots-status__main{ font-weight:650; }
.slots-status__secondary{ color:var(--color-text-secondary, #667085); }
.slots-status__cta{ margin-left:auto; }
.slots-status--notice{
  border-color:#f0d59c;
  background:#fffaf0;
}

/* Later generic slot-card rules must not collapse the wide regular card into a column. */
.slots-grid .regular-slot-card{
  flex-direction:row;
}

@media (max-width:719px){
  .slots-grid .regular-slot-card{
    flex-direction:column;
    align-items:stretch;
  }
}
@media (max-width:640px){
  .slots-status{ align-items:stretch; }
  .slots-status__cta{ width:100%; margin-left:0; }
}

/* ===== Site-specific rules migrated from uikit.css ===== */
/* CONTACT: поле "Сообщение" растягивается по вертикали вручную */

#contact .fld-message textarea{
  /* стартовая высота */
  min-height: 150px;              /* без */
  height: auto;                   /* не фиксируем */
  max-height: 60vh;               /* чтобы не разъезжалось на полэкрана */
  resize: vertical;               /* ручной ресайз только по вертикали */
  overflow: auto;                 /* условие для сработки resize в некоторых браузерах */
  box-sizing: border-box;
}

@media (min-width: 980px) {
  #contact .fld-message textarea {
    height: 150px;
    min-height: 0;
  }
}

/* ================ HERO — мобильный фикс (≤768px) ================== */

@media (max-width: 768px){

  /* 1) Сетка: одна колонка, фото строго после левой колонки/CTA */
  #top.hero{ padding: 56px 0 28px; }
  #top .container.hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  #top .hero-copy{  grid-column: 1; grid-row: 1; min-width: 0; }
  #top .hero-visual{ grid-column: 1; grid-row: 2; min-width: 0; }
  /* если есть отдельный блок отзывов/рейтинга — он третий */
  #top .hero-reviews{ grid-column: 1; grid-row: 3; }

  /* 2) Заголовок и подзаголовок: без вылета за экран, размер компактнее */
  #top .hero-copy h1{
    /* убираем ограничение 26ch и делаем адаптив меньше */
    max-inline-size: none;
    font-size: clamp(24px, 8.6vw, 40px);
    line-height: 1.12;
    /* страховка от длинных слов/переносов */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
  #top .hero-copy .sub{
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  /* 4) CTA-кнопки — на всю ширину, одна под другой */
  #top .cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 16px 0 0;
  }
  #top .cta .btn{
    width: 100%;
    justify-content: center;
  }

  /* 5) Фото: всегда видно и вписывается по ширине */
  #top .hero-photo{
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
  }
  #top .hero-photo img{
    width: 100%; height: 100%; object-fit: cover;
  }

  /* 6) Рейтинг/цитата — не ломают строку */
  #top .hero-visual .hero-social{
    margin-top: 12px;
    flex-wrap: wrap;
    min-width: 0;
  }
  #top .hero-visual .hero-social .quote-wrap{
    text-align: left;
    margin-left: 0;
    height: auto;
    line-height: inherit;
  }
  #top .hero-visual .hero-social .quote-wrap .quote{
    position: static; opacity: .9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

@media (max-width: 640px){
  .hero-social .quote-wrap{ display:none; }
}

/* === SERVICES: отступы ================================ */

#services{
  --srv-hint-cards: 32px;   
}

@media (min-width: 1024px){
  #services{
    --srv-hint-cards: 40px;
  }
}

#services .section-head .section-hint{
  margin-top: 0; /* чтобы не суммировалось */
}

/* 2) Описание → карточки */
#services .svc-grid{
  margin-top: var(--srv-hint-cards);
}

/* ================== HERO TUNE: 14–16" ноутбуки и десктопы ================== */

/* 1) Ноутбуки ≤1440px: заголовок компактнее и шире по "символьной" колонке,
      чтобы держаться в 2 строки; добавляем фикс-зазор перед CTA */
@media (min-width: 1280px) and (max-width: 1600px){
  #top .hero-copy h1{
    /* Onest шире прежнего шрифта: держим две сбалансированные строки. */
    font-size: clamp(36px, 2.8vw, 48px);
    max-inline-size: 32ch;
    line-height: 1.1;
  }
  /* небольшой предзазор от бейджей, даже если margin-top:auto не сработал */
  #top .hero-copy .cta{ margin-top: clamp(14px, 2vh, 24px); }
  }

/* 2) Широкие десктопы ≥1600px: держим аккуратные 2 строки и не даём гигантского "провала" */
@media (min-width: 1600.98px){
  #top .hero-copy h1{
    /* На широком desktop сохраняем две строки без чрезмерного кегля. */
    max-inline-size: 32ch;
    font-size: clamp(36px, 3vw, 48px);
  }
  /* авто-прижим к низу уже есть, но ограничим верхний зазор, чтобы не «проваливалось» */
  #top .hero-copy .cta{ margin-top: clamp(16px, 2.5vh, 32px); }
}

/* 3) Страховка: если высоты всё равно не хватает (маленький экран по высоте),
      даём минимальный "стержень" левой колонке, чтобы поместились бейджи + CTA */
@media (max-height: 820px) and (min-width: 1025px){
  #top .hero-copy{
    min-height: 520px; /* подгони 480–560px по вкусу под свой контент */
  }
}


/* === HERO chips — стабильные отступы и раскладка ======= */
#top{
  --hero-tags-mt: 24px;      /* отступ сверху блока чипов */
  --hero-tags-mb: 24px;      /* отступ снизу блока чипов  */
  --hero-tags-gap-x: 8px;    /* горизонтальный зазор между чипами */
  --hero-tags-gap-y: 8px;    /* вертикальный зазор между строками */
}

/* Общий блок списка чипов */
#top .hero-tags{
  margin: var(--hero-tags-mt) 0 var(--hero-tags-mb);
  padding: 0;
  list-style: none;
}

/* Базовый вид «капсул» */
#top .hero-tags li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d9dee6;
  border-radius: var(--radius-pill);
  background: #fff;
  font: 500 13px/1.2 var(--font-sans);
  color: var(--neutral-900);
  white-space: nowrap;       /* внутри чипа не переносим строки */
  text-align: center;
  justify-content: center;
}

/* ===== Desktop/Laptop (≥1025px): 4 колонки по контенту, ровно 2 строки ===== */
@media (min-width: 1025px){
  #top .hero-tags{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, max-content);
    column-gap: var(--hero-tags-gap-x);
    row-gap: var(--hero-tags-gap-y);
    justify-content: start;   /* группа чипов прижата к левому краю */
    align-items: center;
  }
}

/* ===== Tablet/Mobile (≤1024.98px): 2 равные колонки, одинаковые зазоры ===== */
@media (max-width: 1024.98px){
  #top .hero-tags{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--hero-tags-gap-x);
    row-gap: var(--hero-tags-gap-y);
  }
  #top .hero-tags > li{
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    justify-content: center;
  }
}

/* Hero: разрешаем <br> в описании на любых ширинах */
.hero .lead br,
#hero .lead br { display:inline; }  /* подгони селектор под свой блок */


/* ================= SECTION RHYTHM — h2 → hint → content ================= */

/* Canonical section-rhythm values live in uikit.css.
   --gap-* names remain compatibility aliases for existing consumers. */

/* Сбрасываем нижний margin у h2 внутри секций, чтобы не суммировался */
:where(section, .section, [data-section], #services, #faq, #contact)
  :is(h2,.section-title){
  margin-bottom: 0;
}

/* h2 → строка описания (hint/lead/note) */
:where(section, .section, [data-section], #services, #faq, #contact)
  :is(h2,.section-title) + :is(p,.section-hint,.note,.lead){
  margin-top: var(--section-title-note-gap);
  margin-bottom: 0;
}

/* описание → контент (сетки/списки/карточки/гриды) */
:where(section, .section, [data-section], #services, #faq, #contact)
  :is(p,.section-hint,.note,.lead)
  + :is(.grid,.cards,.svc-grid,.faq-list,.contact-grid,.content,.container,.services-grid,.srv-grid){
  margin-top: var(--section-note-content-gap);
}

/* Повышаем специфичность для секций с .section-head (перебиваем UI Kit, если надо) */
@media (min-width: 769px){
  #services .section-head .section-title + .section-hint,
  #faq      .section-head .section-title + .section-hint,
  #contact  .section-head .section-title + .section-hint{
    margin-top: var(--section-title-note-gap);
  }
  #services .section-head + :is(.svc-grid,.grid,.cards),
  #faq      .section-head + :is(.faq-list,.grid,.cards),
  #contact  .section-head + :is(.contact-grid,.grid,.cards,.content){
    margin-top: var(--section-note-content-gap);
  }
}

/* ================= FAQ: локальные токены и мелкий фикс ================== */

#faq{
  --faq-title-note-gap: 12px;
  --faq-head-content-gap: 48px;
}
/* Мобайл для FAQ */
@media (max-width: 768px){
  #faq{
    --faq-title-note-gap: 16px;
    --faq-head-content-gap: 40px;
  }
}

/* FAQ owns its local rhythm; do not shadow the global section-rhythm contract. */
#faq .faq-title + :is(p,.section-hint,.note,.lead){
  margin-top: var(--faq-title-note-gap);
}
#faq :is(p,.section-hint,.note,.lead) + .faq-list{
  margin-top: var(--faq-head-content-gap);
}

#faq .faq-title{ margin-bottom: 0; }


/* === SLOTS — ритм "заголовок → контент" === */
#slots.slots{
  --gap-head-content-d: 36px;
  --gap-head-content-m: 24px;
}

#slots.slots .section-title{
  margin-bottom: 0;
}
#slots.slots .section-title + .slots-grid{
  margin-top: var(--gap-head-content-d);
}

@media (max-width: 768px){
  #slots.slots .section-title + .slots-grid{
    margin-top: var(--gap-head-content-m);
  }
}


/* === Unify "i" badges (Header + Contacts + Calculator) === */
:root{
  --info-badge-size: 22px;
  --info-badge-bg:   var(--neutral-200);
  --info-badge-fg:   var(--neutral-500);
}

/* Контейнеры подсказок — без жёстких размеров */
.contact-meta .hint,
#calc .label-row .hint,
.site-header .tz-tip.info{
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* В шапке нужен небольшой отступ от текста слева */
.site-header .tz-tip.info{ margin-left: 6px; }

/* Сам кружок "i" — единый квадрат 22×22 */
.contact-meta .hint > .i,
#calc .label-row .hint > .i,
.site-header .tz-tip.info .i{
  width: var(--info-badge-size);
  height: var(--info-badge-size);
  flex: 0 0 var(--info-badge-size); /* не даём сплющиться во flex */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  box-sizing: border-box;
  padding: 0;
  border: 0;

  background: var(--info-badge-bg);
  color: var(--info-badge-fg);
  font: 600 12px/1 var(--font-sans);
  vertical-align: middle;

  /* УБИРАЕМ отступ внутри кружка, чтобы не было двойного зазора */
  margin-left: 0;
}

.contact-meta .hint:hover > .i, #calc .label-row .hint:hover > .i, .site-header .tz-tip.info:hover .i { color:var(--green-600); }

/* Центрирование тултипа "tip" по горизонтали относительно иконки "i" */
.contact-meta .hint .tip,
#calc .label-row .hint .tip,
.site-header .tz-tip.info .tip{
  left: 50%;
  transform: translateX(-50%);  /* ровно по центру */
  text-align: center;                      /* текст по центру, если нужно */
  white-space: nowrap;
  bottom: calc(100% + 10px);
}

/* Стрелочка тултипа по центру */
.contact-meta .hint .tip::after,
#calc .label-row .hint .tip::after,
.site-header .tz-tip.info .tip::after{
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 640px){
  .site-header .tz-tip.info{ display: none; }
}


/* WHY: мобильная анимация при появлении в вьюпорте */
@media (max-width: 767px){
  #why .why-card .why-icon,
  #why .why-card .why-title,
  #why .why-card .why-text{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
  }

  /* лёгкая «ступенька» по времени: иконка -> заголовок -> текст */
  #why .why-card .why-title{ transition-delay: .06s; }
  #why .why-card .why-text { transition-delay: .12s; }

  #why .why-card.play .why-icon,
  #why .why-card.play .why-title,
  #why .why-card.play .why-text{
    opacity: 1;
    transform: none;
  }

  /* поп-эффект для иконки при первом показе */
  #why .why-card.play .why-icon{
    animation: whyPop .55s ease-out;
  }
  @keyframes whyPop{
    0%   { transform: scale(.9); opacity:.85; }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1);   opacity:1; }
  }
}

/* Уважение к настройке «уменьшить анимацию» */
@media (prefers-reduced-motion: reduce){
  #why .why-card .why-icon,
  #why .why-card .why-title,
  #why .why-card .why-text{
    transition: none;
    transform: none;
    opacity: 1;
  }
  #why .why-card.play .why-icon{ animation: none; }
}


/* ===== CANON Final: Header + Burger + Overlay (desktop/tablet/mobile) =====
   Responsive contract:
   640px  — mobile
   768px  — content/tablet
   980px  — navigation
   1024px — desktop layout
   Other thresholds are component/content breakpoints, not global foundations.
   CSS custom properties are intentionally not used as @media breakpoints. */
:root{
  --z-header: 1000;     /* шапка поверх оверлея */
  --z-mnav: 900;        /* оверлей ниже шапки, чтобы шапку было видно */
}

/* Шапка поверх контента */
.site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* По умолчанию на desktop: бургер скрыт, десктоп-меню и десктоп-язык видны */
.burger{ display:none; }
.header-bar > .lang-switch{ display:flex; }
.header-nav{ display:flex; }

/* Tablet/Mobile: прячем ТОЛЬКО десктоп-элементы в шапке, бургер показываем */
@media (max-width:980px){
  .header-nav{ display:none; }
  .header-bar > .lang-switch{ display:none; }   /* критично: только прямой потомок шапки */

  .burger{
    display:inline-grid;
    place-items:center;
    width:44px; height:44px;
    border:1px solid var(--neutral-300); border-radius:12px;
    background:#fff;
    line-height:0; cursor:pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
  }
  .burger:active{ transform: translateY(1px); }

  /* Иконки бургера/креста — чистый CSS */
  .burger .ic-open,
  .burger .ic-close{
    width:18px; height:2px; background:#111; position:relative; border-radius:2px;
  }
  .burger .ic-open::before,
  .burger .ic-open::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#111; border-radius:2px;
  }
  .burger .ic-open::before{ transform: translateY(-6px); }
  .burger .ic-open::after { transform: translateY( 6px); }
  .burger .ic-close{ display:none; }
  .burger.is-open .ic-open{ display:none; }
  .burger.is-open .ic-close{
    display:block; transform: rotate(45deg);
  }
  .burger.is-open .ic-close::before,
  .burger.is-open .ic-close::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#111; border-radius:2px;
  }
  .burger.is-open .ic-close::before{ transform: rotate(90deg); }
}

/* ===== Оверлей мобильного меню — снизу, НИЖЕ шапки ===== */
.mobile-nav{
  position: fixed;
  /* ВАЖНО: top задаём динамически из JS как высоту шапки, чтобы меню «из-под шапки» */
  top: var(--hdr-h, 56px); left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-rows: 1fr;           /* панель прижмём к низу */
  background: rgba(17,24,39,.72);    /* затемнение контента, но не шапки */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--z-mnav);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.mobile-nav__panel{
  align-self: start;
  background:#f8f9fb;
  border-radius: 0 0 16px 16px;
  padding:16px;
  height: 58dvh;
  max-height: calc(100dvh - var(--hdr-h,56px));
  overflow: auto;  
  transform: translateY(-16px);
  will-change: transform;
  transition: transform .24s ease;
  border-bottom: 1px solid rgba(17,24,39,.18);
}

/* Состояние «открыто» */
.mobile-nav.is-open{ opacity:1; pointer-events:auto; }
.mobile-nav.is-open .mobile-nav__panel{ transform: translateY(0); }

/* Содержимое панели */
.mobile-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.mobile-brand{ display:flex; align-items:center; gap:10px; }
.mobile-brand .logo{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; background:#eaf7f0; border:1px solid #b7dbc9;
}
.mobile-brand .meta strong{ display:block; font-size:16px; line-height:1.1; color:var(--neutral-800); }
.mobile-brand .meta small{ display:block; font-size:13px; color:var(--neutral-500); }


/* Переключатель языка iOS-style RU/SR toggle === */

:root{
  /* подгони под высоту бренда; 40px = как квадратное эмодзи-лого */
  --ios-h:        40px;   /* высота трека */
  --ios-w:        72px;   /* ширина трека */
  --ios-knob:     36px;   /* диаметр круглой ручки (обычно h - 4px) */
  --ios-on:       #33be4b;
  --ios-on-soft:  #4cd964;
  --ios-off:      var(--neutral-300);
  --ios-text-on:  #166534;
  --ios-text-off: var(--neutral-700);
  --ios-font:     13px;
}

/* выравниваем тумблер вправо в .mobile-top */
#langIosWrap{
  margin-left:auto;
  display:inline-block; position:relative;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  line-height:0;
}

/* прячем input, но оставляем доступность */
#langIosWrap input{ position:absolute; inset:0; opacity:0; }

/* трек */
#langIosWrap input + span{
  position:relative; display:inline-block;
  inline-size:var(--ios-w); block-size:var(--ios-h);
  background:#fff; border-radius:calc(var(--ios-h)/2);
  box-shadow: inset 0 0 0 2px var(--ios-off);
  transition: box-shadow .25s cubic-bezier(.17,.67,.43,.98), background .25s;
}

/* эффект «нажатия» */
#langIosWrap:active input + span,
#langIosWrap input + span:active{
  box-shadow: inset 0 0 0 calc(var(--ios-h)*0.45) var(--ios-off);
}

/* ручка + текст RU/SR внутри */
#langIosWrap input + span::after{
  content:"RU";
  position:absolute; top:50%; left:2px; transform:translateY(-50%);
  inline-size:var(--ios-knob); block-size:var(--ios-knob);
  border-radius:50%; background:#fff; display:grid; place-items:center;
  font-weight:700; font-size:var(--ios-font); color:var(--ios-text-off);
  box-shadow:
    inset 0 0 0 .6px rgba(0,0,0,.10),
    0 .5px .5px rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.18);
  transition: left var(--duration-slow) var(--ease-standard), inline-size var(--duration-normal) var(--ease-standard), color .2s ease, box-shadow var(--duration-slow) var(--ease-standard);
}
#langIosWrap:active input + span::after{ inline-size:calc(var(--ios-knob) + 6px); }

/* включено (SR) */
#langIosWrap input:checked + span{
  box-shadow: inset 0 0 0 calc(var(--ios-h)*0.45) var(--ios-on-soft);
}
#langIosWrap input:checked + span::after{
  content:"SR";
  left: calc(100% - var(--ios-knob) - 2px);
  color: var(--ios-text-on);
  box-shadow:
    inset 0 2px 6px rgba(22,101,52,.12),
    inset 0 -1px 0 rgba(255,255,255,.65),
    0 1px 0 rgba(0,0,0,.04);
}

/* фокус */
#langIosWrap input:focus + span{ box-shadow: inset 0 0 0 2px #d1d5db; }
#langIosWrap input:focus:checked + span{
  box-shadow: inset 0 0 0 calc(var(--ios-h)*0.45) var(--ios-on);
}

/* компактнее на очень узких экранах */
@media (max-width:360px) and (pointer:coarse){
  :root{ --ios-h:36px; --ios-w:68px; --ios-knob:32px; --ios-font:12px; }
}


/* Нав-ссылки карточками */
.mobile-nav .nav-links{ display:grid; gap:10px; }
.mobile-nav .nav-links a{
  display:block; padding:12px 14px; border-radius:12px;
  border:1px solid var(--neutral-300); background:#fff; color:#111; font-size:16px;
  text-decoration:none; transition: background .15s, transform .05s;
}
.mobile-nav .nav-links a:hover{ background:#F8FAFC; }
.mobile-nav .nav-links a:active{ transform: translateY(1px); }

/* Контент панели появляется после начала движения */
  .mobile-nav__panel > *{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
  }
  .mobile-nav.is-open .mobile-nav__panel > *{
    opacity: 1;
    transform: none;
    transition-delay: .12s; /* запаздывание контента относительно панели */
  }

/* Без анимаций для reduce-motion */
@media (prefers-reduced-motion: reduce){
  .mobile-nav{ transition: none; }
  .mobile-nav__panel{ transition: none; }
}



/* === Desktop header nav (restore) === */
@media (min-width: 981px){
  .header-nav{
    display:flex;                   /* горизонтальное меню */
    gap:12px;                       /* расстояние между пунктами */
  }

  .header-nav a{
    display:inline-flex;            /* кликабельная «пилюля» */
    align-items:center;
    padding:8px 10px;               /* внутренние отступы */
    border-radius:10px;             /* скругление как было */
    text-decoration:none;           /* убрать подчёркивание */
    color:#1d2b38;                  /* тёмный текст */
    line-height:1;
    transition:
      background .15s ease,
      color .15s ease,
      box-shadow .15s ease;
  }

  .header-nav a:hover{
    background:#f2f6fb;           
    color:var(--green-600);
  }

  .header-nav a:focus-visible{
    outline:2px solid var(--color-focus-outline);     
    outline-offset:2px;
    color:var(--green-600);
  }

  .header-nav a:active{ transform: translateY(1px); color:#B42318; }
}

.header-nav a.is-active{ font-weight:500; }


/* === HERO: планшеты, фикс карусели и однострочного ряда === */
@media (min-width: 641px) and (max-width: 1024px){
  /* 1) Строка не переносится */
  #top .hero-visual .hero-social{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;      /* перекрываем wrap */
    min-width: 0;                       /* чтобы правая колонка сжималась */
  }

  /* 2) Слева (звезда, рейтинг, ссылка, разделитель) — без переносов */
  #top .hero-visual .hero-social .rating,
  #top .hero-visual .hero-social .reviews-link,
  #top .hero-visual .hero-social .sep{
    white-space: nowrap;
  }

  /* 3) Справа — контейнер цитаты занимает остаток строки */
  #top .hero-visual .hero-social .quote-wrap{
    flex: 1 1 auto;
    min-width: 0;              /* критично для Safari/iPad */
    text-align: right;
    height: 1.4em;             /* высота в одну строку */
    line-height: 1.4;
    overflow: hidden;
  }

  /* 4) Два quote-слоя управляются единым JS-ротатором */
  #top .hero-visual .hero-social .quote-wrap .quote{
    position: absolute;
    inset: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    animation: none;
    transition: opacity 240ms ease 0s;
  }
  #top .hero-visual .hero-social .quote-wrap .quote.is-active{
    opacity: .9;
  }
  
  /* 5) Если под строкой есть дублирующий параграф — спрячем (дать ему класс .hero-usp) */
  #top .hero-visual .hero-social + .hero-usp{
    display: none;
  }
}

/* === EXPERIENCE: mobile (≤640px) === */
@media (max-width: 640px){
  /* компактные токены */
  #experience{ --xp-pin-sz: 8px; }

  /* список */
  #experience .xp-grid{
    position: relative;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* вертикальная рельса на всю высоту и под пинами */
  #experience .xp-grid::before{
    top: 0; bottom: 0;
    left: 12px; right: auto;
    width: var(--xp-rail-h);
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  /* строка таймлайна: слева рельса/пин (24px), справа контент */
  #experience .xp-item{
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    column-gap: 10px;
    align-items: start;
    padding: 0;
  }

  /* пин на рельсе */
  #experience .xp-pin{
    grid-column: 1;
    grid-row: 1;
    position: relative;
    margin-top: 18px;           /* к базовой линии года */
    width: var(--xp-pin-sz);
    height: var(--xp-pin-sz);
    transform: none;
    left: auto; top: auto;
    justify-self: center;
    z-index: 2;                  /* поверх рельсы */
  }

  /* год — без капсулы, потоковый элемент над карточкой */
  #experience .xp-chip{
    grid-column: 2;
    position: static;
    transform: none;
    margin: 0 0 6px 0;

    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: none;

    color: var(--neutral-700);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .2px;
  }

  /* карточка — компактнее */
  #experience .xp-card{
    grid-column: 2;
    margin-top: 0;
    padding: 12px;
    border-radius: 12px;
  }
  #experience .xp-card h3{
    margin: 0 0 6px;
    font-size: 15px;
  }
  #experience .xp-card p{
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }
}




/* Mobile: в шапке скрываем бренд-блок и «i» — остаются бейдж и бургер */
@media (max-width: 640px){
  .site-header .brand-meta{ display:none; }
  .site-header .brand > .logo{ display:none; }
  .site-header .tz-tip{ display:none; }
  /* точка статуса */
  .site-header #headerFreeBadge .dot{
    width:8px; height:8px;
  }
  /* бейдж: не переносить, компактнее на мобиле */
  .site-header #headerFreeBadge{
    white-space: nowrap;
    padding: 8px 16px;
  }
  .site-header #headerFreeBadge .avail-text{
    font-size: 14px;
    line-height: 1.3;
  }
}
@media (max-width: 360px){
  .site-header #headerFreeBadge{
    padding: 6px 12px;
  }
}


/* ===== Contact alignment follow-up ===== */
#contact .agree{
  font-size:11px;
}

@media (min-width:1025px){
  #contact .contact.card{
    padding-bottom:64px;
  }

  #contact .contact-form.contact-3col{
    align-items:stretch;
  }

  /* The first two field groups keep their rhythm; only the final date/time
     group is pulled into the common lower baseline. */
  #contact .col-fields .fld:last-child{
    margin-top:-8px;
    margin-bottom:0;
  }

  /* Keep the CTA on the established lower baseline. Validation feedback is
     positioned below it and therefore never shifts the button upward. */
  #contact .col-message .submit-wrap{
    position:relative;
    margin-top:auto;
  }

  #contact .submit-error-slot{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    min-height:0;
  }

  #contact #contactNotice:empty{
    display:none;
  }
}