/* ============================
   ИнтермедЛТД — чистый, стильный UI
   — минимализм, мягкие тени, аккуратные отступы
   — full-bleed герой, кликабельные CTA на слайдах
   — мобильный хедер = только бургер
   ============================ */

/* ---------- Токены дизайна ---------- */
:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#5b6b82;

  --brand:#0ea5e9;     /* primary */
  --brand-600:#0284c7; /* hover / border */
  --brand-700:#0369a1; /* text on light */

  --card:#f9fbff;      /* card surface */
  --line:#e6edf5;      /* borders */
  --ring:rgba(14,165,233,.28); /* focus ring */

  --radius:14px;
  --radius-lg:18px;

  --shadow-sm:0 4px 10px rgba(15,23,42,.06);
  --shadow-md:0 10px 24px rgba(15,23,42,.08);
  --shadow-lg:0 18px 36px rgba(15,23,42,.10);

  --container:1200px;
}

/* ---------- Базовые сбросы ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:10px}

/* Контейнер */
.container{max-width:var(--container);margin:0 auto;padding:0 18px}

/* ======================================
   ФОН САЙТА (фото, приглушённое вуалью)
   ====================================== */
html{
  background:
    /* мягкая вуаль, чтобы фото было еле заметно */
    linear-gradient(180deg, rgba(255,255,255,.47), rgba(255,255,255,.685)),
    /* само фото: на всю ширину/высоту, фикс при скролле */
    url("https://kartinki.pics/uploads/posts/2021-07/thumbs/1625709940_57-kartinkin-com-p-meditsina-oboi-krasivie-59.jpg") center / cover no-repeat fixed,
    /* лёгкие радиальные блики для глубины */
    radial-gradient(1000px 520px at 120% -10%, rgba(224,242,254,.7) 0%, rgba(224,242,254,0) 60%),
    radial-gradient(900px 520px at -20% 120%, rgba(238,242,255,.7) 0%, rgba(238,242,255,0) 60%);
  background-attachment: scroll, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Тело страницы */
body{
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:transparent; /* фон — на html */
}

/* ======================================
   ХЕДЕР / НАВИГАЦИЯ
   ====================================== */
.header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.86));
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(10px);
}
.nav{display:flex;align-items:center;gap:16px;padding:12px 0}
.nav .logo{display:flex;align-items:center;gap:12px}
.nav img{height:42px;width:auto}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:#0f172a;font-weight:600}
.nav .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.lang-switch a{font-weight:700;color:#334155;padding:4px 10px;border-radius:10px}
.lang-switch a.active{background:#e9f2fb}

/* CTA в хедере только на десктопе */
.cta-desktop{display:inline-flex}

/* Бургер */
.burger{display:none;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}
.burger span{display:block;width:100%;height:2px;background:#0f172a;margin:6px 0;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Mobile drawer */
.mobile-menu[hidden]{display:none}
.mobile-menu{
  position:fixed;inset:64px 0 0 0;z-index:55;
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(10px);
  padding:18px 0 28px;
}
.mobile-menu .container{display:flex;flex-direction:column;gap:12px}
.mobile-menu a{
  display:block;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;color:#0f172a;font-weight:700;box-shadow:var(--shadow-sm)
}
.mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.mobile-actions .btn{width:100%;justify-content:center}

/* ======================================
   Кнопки / Иконки
   ====================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;min-height:46px;
  border-radius:12px;border:1px solid var(--brand-600);
  background:var(--brand);color:#fff;font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, filter .08s ease
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#fff;color:var(--brand-700);border-color:#cbd5e1}
.btn.ghost{background:#fff;color:#0f172a;border-color:var(--line)}

.icon{display:inline-flex;width:20px;height:20px;line-height:0;flex:0 0 20px}
.icon img{width:20px;height:20px;display:block}

/* ======================================
   ГЕРОЙ / СЛАЙДЕР (full-bleed + клики)
   ====================================== */
.hero{
  position:relative;padding:0;background:transparent;overflow:hidden;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); /* до краёв экрана */
}
.slider{position:relative;height:440px;width:100vw}
@media (min-width:1100px){.slider{height:560px}}

.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02) saturate(1.02)}
/* overlay под кнопками/текстом — НЕ перехватывает клики */
.slide .overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(2,6,23,.68), rgba(2,6,23,.28) 60%, rgba(2,6,23,0) 92%)
}
/* кликабельный слой */
.slide .caption{
  position:absolute;top:18%;left:6%;z-index:2;pointer-events:auto;
  color:#fff;max-width:760px
}
.slide .caption h1{font-size:44px;line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:.2px}
.slide .caption p{color:#e6edf5;margin:0 0 18px}

/* Стрелки/точки поверх, контейнер не блокирует caption */
.slider-controls{
  position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;
  padding:0 10px;z-index:3;pointer-events:none
}
.slider-controls button{
  pointer-events:auto;background:rgba(255,255,255,.45);border:none;width:40px;height:40px;border-radius:12px;
  box-shadow:var(--shadow-sm)
}
.slider-controls button:hover{background:rgba(255,255,255,.7)}
.slider-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:8px;z-index:3}
.slider-dots button{width:10px;height:10px;border-radius:999px;border:1px solid #fff;background:rgba(255,255,255,.3)}
.slider-dots button.active{background:#fff}

/* CTA в герое на мобилках — единая колонка */
@media (max-width:640px){
  .slide .caption{top:12%;left:5%;max-width:92%}
  .slide .caption h1{font-size:28px}
  .slide .caption .btn{width:100%;justify-content:center}
}

/* ======================================
   СЕКЦИИ / ГРИД / КАРТОЧКИ
   ====================================== */
.section{padding:44px 0}
.grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card .thumb{aspect-ratio:4/3;background:#e8f1fb;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .content{padding:16px}
.card h3{margin:0 0 8px;font-size:18px}
.badge{
  display:inline-block;font-size:12px;color:#0f172a;background:#eaf3ff;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-bottom:8px
}
.card p{color:var(--muted);margin:8px 0 14px;flex:1}
.card .actions{padding:0 16px 16px}

/* ======================================
   ДОП. СЕКЦИИ ГЛАВНОЙ (управляемые)
   ====================================== */
.home-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 0 12px}
.home-title h2{margin:0;font-size:28px}
.home-title p{margin:0;color:var(--muted)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.features{grid-template-columns:1fr}}
.feature{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
.feature .i48{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e9f7ff;margin-bottom:10px}
.feature .i48 img{width:26px;height:26px}
.feature h3{margin:0 0 6px;font-size:18px}
.feature p{margin:0;color:var(--muted)}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.services{grid-template-columns:1fr}}
.service{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
.service .i56{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#eef6ff;margin-bottom:10px}
.service .i56 img{width:28px;height:28px}
.service h3{margin:0 0 6px;font-size:18px}
.service p{margin:0;color:var(--muted)}

/* ======================================
   ФОРМЫ / ТАБЛИЦЫ / СИСТЕМНЫЕ
   ====================================== */
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px;color:#334155;margin:12px 0}
.kv b{color:#0f172a}
@media (max-width:640px){.kv{grid-template-columns:120px 1fr}}

.form{display:grid;gap:12px}
.input,.textarea,.select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #d7e2ee;background:#fff;
  transition:box-shadow .1s ease,border-color .1s ease
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.textarea{min-height:120px;resize:vertical}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:13px;color:#5b6b82;text-align:left;padding:6px 10px}
.table td{background:#f8fbff;border:1px solid var(--line);padding:10px;border-radius:12px}

.alert{
  padding:12px 14px;border-radius:12px;background:#ecfeff;color:#075985;border:1px solid #a5f3fc;
  box-shadow:var(--shadow-sm)
}

/* Небольшие утилиты (админ тоже использует) */
.cardpad{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px}
.muted{color:#64748b}

/* ======================================
   ПОДВАЛ
   ====================================== */
.footer{
  border-top:1px solid var(--line);padding:22px 0;color:#55657d;background:#fcfdff
}
.footer a{color:#0f172a}

/* ======================================
   Плавающий CTA (телефон/WA)
   ====================================== */
.fab{
  position:fixed;right:14px;bottom:14px;z-index:65;display:flex;gap:10px;flex-direction:column
}
.fab a{box-shadow:var(--shadow-md)}

/* ======================================
   Адаптив / точки
   ====================================== */
@media (max-width:1024px){
  .menu{display:none}                 /* скрываем пункты меню */
  .cta-desktop,.lang-switch{display:none} /* и десктопные CTA + переключатель языка */
  .burger{display:inline-block}       /* оставляем только бургер */
  .slide .caption h1{font-size:34px}
}
@media (max-width:640px){
  .nav img{height:36px}
  .nav .right{gap:6px}
  .slider{height:390px}
  .mobile-actions{grid-template-columns:1fr}
  /* поисковые/фильтр формы в каталогах — стекаем */
  form[method="get"]{grid-template-columns:1fr !important}
}
/* ======== Header logo: size + frame (override) ======== */
:root{
  /* меняй эти значения под себя */
  --logo-size: 64px;          /* размер на десктопе */
  --logo-size-mobile: 44px;   /* размер на мобилке */
}

/* увеличиваем логотип и даём аккуратную рамку прямо картинке */
.header .nav .logo img{
  height: calc(var(--logo-size) - 12px); /* минус паддинги, чтобы итоговый размер был ~ --logo-size */
  width: auto;

  padding: 6px;                    /* «воздух» внутри рамки */
  border-radius: 14px;             /* скругление рамки */
  background: var(--card);         /* фон рамки (автоматически светлый/тёмный из темы) */
  border: 1px solid var(--line);   /* тонкая окантовка */
  box-shadow: var(--shadow-sm);    /* мягкая тень */
}

/* адаптивный размер на телефонах */
@media (max-width: 640px){
  .header .nav .logo img{
    height: calc(var(--logo-size-mobile) - 12px);
  }
}
/* ==== Каталог: сетка 4×4 на десктопе ==== */
.grid.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:1200px){ .grid.grid-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:900px){  .grid.grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){  .grid.grid-4{ grid-template-columns: 1fr; } }

/* Пагинация поменьше, чтобы не «орала» */
.pagination .btn{ min-height:38px; padding:8px 12px; }

/* ==== Ширина сайта: минимальные поля по бокам, контент почти на всю ширину ==== */
:root{
  --container: 1480px; /* шире, чем было (можно 1600px, если хочешь ещё шире) */
}
.container{
  /* всегда маленькие поля по краям даже на 4K */
  max-width: min(100vw - 24px, var(--container));
  padding: 0 12px;
}

/* Чуть плотнее сетка и симпатичнее карточки каталога */
.catalog-grid.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:1200px){ .catalog-grid.grid-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:900px){  .catalog-grid.grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){  .catalog-grid.grid-4{ grid-template-columns: 1fr; } }

.catalog-grid .card{
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)),
              var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.catalog-grid .card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14,165,233,.35);
}
.catalog-grid .thumb{ aspect-ratio: 4/3; position: relative; background:#e8f1fb; }
.catalog-grid .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.0), rgba(2,6,23,.06));
  pointer-events:none;
}
.catalog-grid .content{ padding:16px 16px 10px; }
.catalog-grid h3{ margin: 0 0 8px; font-size: 18px; line-height: 1.25; }
.catalog-grid .badge{
  display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px;
  background:#eaf3ff; color:#0f172a; border:1px solid var(--line); margin-bottom:8px;
}

/* Характеристики — аккуратным списком */
.specs{
  margin: 8px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px;
  display: grid; gap: 6px;
}
.specs li{ display: flex; gap: 8px; align-items: flex-start; }
.specs li::before{
  content:"•"; opacity:.55; line-height:1; transform: translateY(1px);
}

/* Зона действий */
.catalog-grid .actions{
  padding: 12px 16px 16px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.catalog-grid .btn.pdf{
  background:#fff; color:#0f172a; border-color:#cbd5e1;
}
.catalog-grid .btn.secondary .icon img{ filter: none; }
/* ==== Header XL: просторнее, аккуратнее (override) ==== */
:root{
  --logo-size: 78px;        /* размер логотипа на десктопе */
  --logo-size-mobile: 54px; /* размер логотипа на мобиле */
}

.header .nav{
  padding: 18px 0;                 /* выше/ниже больше воздуха */
  gap: 22px;                       /* расстояние между блоками */
}
.nav .logo{
  display:flex; align-items:center; gap:14px;
}
.nav .logo img{
  height: calc(var(--logo-size) - 12px);
  width:auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.brand-text{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
}
.menu{ gap: 22px; }
.menu a{ font-weight: 700; }

.nav .right{ gap: 12px; }

/* Чуть шире контейнер именно у хедера, чтобы меньше полей по бокам */
.header .container{
  max-width: min(100vw - 16px, 1560px);
  padding: 0 8px;
}

@media (max-width:1024px){
  .brand-text{ display:none; } /* на мобе только логотип */
}
@media (max-width:640px){
  .nav .logo img{ height: calc(var(--logo-size-mobile) - 12px); }
}
/* ====== HEADER XL — шире, выше, аккуратнее ====== */
:root{
  --header-max: 1680px;      /* ширина контейнера в хедере */
  --logo-size: 84px;         /* размер логотипа на десктопе */
  --logo-size-mobile: 58px;  /* размер логотипа на мобиле */
}

/* фон+граница+лёгкая тень */
.header.header-xl{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

/* шире контейнер именно в хедере + совсем маленькие поля по бокам */
.header .container{
  max-width: min(100vw - 16px, var(--header-max));
  padding: 0 8px;
}

/* высота, отступы, ритм */
.header .nav{
  padding: 18px 0;
  gap: 22px;
}

/* логотип-«капсула» + текст бренда */
.nav .logo{ display:flex; align-items:center; gap:14px; }
.nav .logo img{
  height: calc(var(--logo-size) - 12px);
  width:auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.brand-text{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .2px;
  color: #0f172a;
}

/* меню посолиднее */
.menu{ display:flex; gap: 24px; align-items:center; }
.menu a{
  color:#0f172a; font-weight:700; position:relative;
  padding: 8px 0;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, rgba(14,165,233,0), rgba(14,165,233,.9), rgba(14,165,233,0));
  transform:scaleX(0); transform-origin: center; transition: transform .18s ease;
}
.menu a:hover::after{ transform:scaleX(1); }

/* правый блок: языки + CTA + бургер */
.nav .right{ margin-left:auto; display:flex; gap:12px; align-items:center; }
.lang-switch a{
  font-weight:700; color:#334155; padding:6px 12px; border-radius:10px;
  border:1px solid transparent;
}
.lang-switch a.active{ background:#e9f2fb; border-color:#dbe7f5 }

/* CTA в хедере только на десктопе (как было), но гармоничнее по высоте */
.cta-desktop{ display:inline-flex; min-height:42px; }

/* бургер оставляем как есть, только подогнём под рост хедера */
.burger{ width:46px; height:46px; }

/* мобильный вид: скрыть бренд-текст, уменьшить логотип, меню в дровере */
@media (max-width:1024px){
  .menu{ display:none }
  .cta-desktop,.lang-switch{ display:none }
  .brand-text{ display:none }
  .nav .logo img{ height: calc(var(--logo-size-mobile) - 10px); }
}
/* =========================
   Minimal Red Accents Pack
   ========================= */
:root{
  --red:     #ef4444;   /* лёгкий красный */
  --red-600: #dc2626;   /* hover/активный */
  --red-100: #fee2e2;   /* мягкий фон */
  --accent-grad: linear-gradient(
    90deg,
    rgba(14,165,233,0),        /* brand-синий прозрачно */
    rgba(14,165,233,.85) 28%,  /* плавно из синего */
    rgba(239,68,68,.85) 72%,   /* в красный к концу */
    rgba(239,68,68,0)
  );
}

/* 1) Подсветка выделения текста — лёгкий красный вуаль */
::selection{
  background: rgba(239,68,68,.16);
  color: #0b1220;
}

/* 2) Хедер: подчёркивание пунктов меню с синее-красным градиентом */
.header .menu a::after{
  background: var(--accent-grad);
}

/* 3) Акцентные точки/контролы слайдера — едва заметный красный контур */
.slider-dots button{
  border-color: rgba(239,68,68,.45);
}
.slider-dots button.active{
  box-shadow: 0 0 0 2px rgba(239,68,68,.18);
}

/* 4) Заголовки секций — тонкая акцентная линия */
.home-title h2,
.section .container > h1,
.section .container > h2{
  position: relative;
  padding-bottom: 8px;
}
.home-title h2::after,
.section .container > h1::after,
.section .container > h2::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:3px; width:120px;
  border-radius:999px;
  background: var(--accent-grad);
  opacity:.65;
}

/* 5) PDF-кнопка в каталоге — красный вторичный стиль (у тебя <a class="btn pdf">) */
.btn.pdf{
  border-color: var(--red-600);
  color: var(--red-600);
  background:#fff;
}
.btn.pdf:hover{
  background: var(--red-100);
  border-color: var(--red-600);
  color: var(--red-600);
}

/* 6) Небольшой «тёплый» акцент у карточек при ховере */
.card:hover{
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(239,68,68,.08); /* тончайшая красная окантовка */
}

/* 7) Мини-бейджи с красным — можно использовать класс .badge.red при необходимости */
.badge.red{
  background: #fff5f5;
  color: var(--red-600);
  border-color: rgba(239,68,68,.35);
}

/* 8) Лёгкий красный штрих в футере (верхняя линия/блик) */
.footer{
  box-shadow: inset 0 1px 0 0 rgba(239,68,68,.08);
}

/* 9) Фокус-кольцо для интерактивных элементов — слегка теплый */
:focus-visible{
  box-shadow: 0 0 0 3px rgba(239,68,68,.22);
}

/* 10) Иконка PDF внутри .btn.pdf (если есть <img>) без перекраски — просто размер */
.btn.pdf .icon img{
  width:20px; height:20px;
}

/* 11) Акцент для ссылок в текстах при hover — лёгкий красный оттенок */
.section a:hover{
  color: var(--red-600);
}
/* ===== Мобильный переключатель языка рядом с бургером ===== */
.lang-switch--mobile{ display:none; }

@media (max-width:1024px){
  /* Прячем десктопный свитчер и показываем мобильный */
  .lang-switch:not(.lang-switch--mobile){ display:none; }
  .lang-switch--mobile{
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-right:8px; /* отступ перед бургером */
  }
  .lang-switch--mobile a{
    font-weight:700;
    font-size:14px;
    line-height:1;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    color:#334155;
    background:#ffffffcc; /* чуть прозрачнее, чтобы не «кричало» */
    text-decoration:none;
  }
  .lang-switch--mobile a.active{
    background:#ffecec;            /* еле заметный красный (в духе последних акцентов) */
    border-color:#f3caca;
    color:#b91c1c;
  }
  /* Чуть ближе кнопки справа друг к другу */
  .header .right{ gap:8px; }
}
/* ===== Центрированный бренд в хедере ===== */
.header .brand-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;                 /* ниже кнопок справа, но выше фона */
  pointer-events:auto;       /* кликабельно (ссылка на главную) */
  text-decoration:none;
  color:#0f172a;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
  max-width:60vw;
  overflow:hidden;
  text-overflow:ellipsis;

  /* размеры: крупно, но без ломания сетки */
  font-size:28px;
  line-height:1;
}

/* Чуть крупнее на широких экранах */
@media (min-width:1280px){
  .header .brand-center{ font-size:32px; }
}

/* На планшете/мобилке ужимаем, чтобы не мешать бургеру */
@media (max-width:1024px){
  .header .brand-center{
    font-size:22px;
    max-width:52vw;
  }
}
@media (max-width:640px){
  .header .brand-center{
    font-size:18px;
    max-width:56vw;
  }
}
/* Скрыть старую подпись бренда возле логотипа во всех режимах */
.brand-text{ display:none !important; }
/* Reveal-анимации (мягкие, незаметные на старте) */
.reveal{
  opacity:0;
  transform: translateY(10px) scale(0.995);
  transition: opacity .45s ease, transform .45s ease, box-shadow .3s ease;
}
.reveal.reveal-on{
  opacity:1;
  transform: translateY(0) scale(1);
}