/* =============================== 
   UNIFIED THEME (default: LIGHT)
   =============================== */

/* Фон сайта */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html, body { overflow-x: hidden; }


/* ---- БАЗА: СВЕТЛАЯ (по умолчанию) ---- */
:root{
  --bg: #BEEEFF;

  /* Градиенты */
  --grad-topbar: linear-gradient(180deg, #020122 0%, #00BBFF 100%);
  --grad-bottom: linear-gradient(180deg, #00BBFF 0%, #020122 100%);

  /* Шапка */
  --menu-link: #FFFFFF;
  --address:   #FFFFFF;

  /* Главный экран */
  --text-main: #020122;
  --cta-text:  #020122;

  /* Текст на карточках */
  --card-text: #D4FFFC;

  /* Низ */
  --bottom-text: #FFFFFF;

  /* О НАС (светлая) */
  --about-title: #020122;
  --about-text:  #020122;
  --about-team-title: #020122;

  /* ОТЗЫВЫ (светлая) */
  --reviews-title: #020122;
  --reviews-ink:   #020122;

  /* Контактовая плашка (светлая тема) */
  --contacts-bg:   #00BBFF ;
  --contacts-text: #FFFFFF;
    /* Текст на страницах услуг (светлая тема) */
  --svc-ink: #020122;
}

/* ---- ТЁМНАЯ ---- */
html:not(.theme-light),
html.theme-dark,
body.theme-dark,
[data-theme="dark"]{
  --bg: #020122;

  --grad-topbar: linear-gradient(180deg, #00BBFF 0%, #BEEEFF 100%);
  --grad-bottom: linear-gradient(180deg, #00BBFF 0%, #BEEEFF 100%);

  --menu-link: #020122;
  --address:   #020122;

  --text-main: #BEEEFF;
  --cta-text:  #00BBFF;

  --card-text: #020122;

  --bottom-text: #020122;

  --about-title: #00BBFF;
  --about-text:  #BEEEFF;
  --about-team-title: #00BBFF;

  --reviews-title: #00BBFF;
  --reviews-ink:   #BEEEFF;

  --contacts-bg:   #BEEEFF;
  --contacts-text: #020122;
    /* Текст на страницах услуг (тёмная тема) */
  --svc-ink: #D4FFFC;
}

/* ---- Явная светлая ---- */
body.theme-light,
[data-theme="light"]{
  --bg: #D4FFFC;

  --grad-topbar: linear-gradient(180deg, #020122 0%, #0080AF 100%);
  --grad-bottom: linear-gradient(180deg, #0080AF 0%, #020122 100%);

  --menu-link: #FFFFFF;
  --address:   #FFFFFF;

  --text-main: #020122;
  --cta-text:  #020122;

  /* Текст на карточках */
  --card-text: #D4FFFC;

  /* Низ */
  --bottom-text: #FFFFFF;

  /* О НАС (светлая) */
  --about-title: #020122;
  --about-text:  #020122;
  --about-team-title: #020122;

  /* ОТЗЫВЫ (светлая) */
  --reviews-title: #020122;
  --reviews-ink:   #020122;

  /* Контактовая плашка (светлая тема) */
  --contacts-bg:   #00BBFF;
  --contacts-text: #FFFFFF;
}

/* --------- ШАПКА --------- */
.topbar {
  width: 100%;
  height: 114px;
  margin: 0;
  background: var(--grad-topbar);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.topbar__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 191px 1fr auto; /* лого | центр | правый блок */
  align-items: center;
  column-gap: 24px;
  padding-left: 51px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Логотип 191×114 */
.logo { width: 191px; height: 114px; display: block; object-fit: contain; }

/* Меню по центру */
.menu {
  position: absolute;
  left: 45%;
  top: 0;
  transform: translateX(-50%);
  height: 114px;
  display: flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  pointer-events: auto;
}
.menu a{
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--menu-link);
  text-decoration: none;
}

/* Правый блок */
.right { display: flex; align-items: center; gap: 60px; justify-self: end; }

/* Переключатель темы */
.dark-toggle{ width:110.8px; height:26.15px; display:block; object-fit:contain; cursor:pointer; }

/* Адрес */
.address{
  font-family:"Roboto", Arial, sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1.15;
  color:var(--address);
  text-align:right;
}

/* --------- АДАПТИВ ШАПКИ НА НОУТБУКАХ --------- */

/* чуть ужимаем отступы/шрифт */
@media (max-width: 1350px) {
  .topbar__inner {
    padding-left: 32px;
    padding-right: 16px;
  }
  .menu {
    gap: 48px;
  }
  .menu a {
    font-size: 22px;
  }
  .address {
    font-size: 22px;
  }
}

/* ещё компактнее, чтобы меню не наезжало на адрес */
@media (max-width: 1250px) {
  .menu {
    gap: 32px;
  }
  .menu a {
    font-size: 20px;
  }
  .address {
    font-size: 20px;
  }
}

/* очень узкие ноутбуки */
@media (max-width: 1120px) {
  .menu {
    left: 50%;
    gap: 24px;
  }
  .menu a {
    font-size: 18px;
  }
  .address {
    font-size: 18px;
    line-height: 1.2;
  }
}

/* почти планшет по ширине, но ещё десктоп */
@media (max-width: 1000px) {
  .menu {
    gap: 18px;
  }
  .menu a {
    font-size: 16px;
  }
  .address {
    font-size: 16px;
  }
}

/* --------- Технические --------- */
img{ display:block; }
.menu a{ margin:0; padding:0; }

/* Шрифты */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@800&family=Roboto:wght@400;500;900&family=Roboto+Condensed:wght@700&family=Oswald:wght@400&display=swap');

/* Доп. переменные */
:root{ --ink:#D4FFFC; --ink2:#00BBFF; --dark:#020122; }

/* Контейнер сцены — фиксированная ширина 1440, центрируем. */
.stage{
  position:relative;
  width:1440px;
  margin:0 auto;
  height:auto;
  min-height:600px;
}

/* ===== ВАРИАНТ А — МАСШТАБИРОВАНИЕ ЧЕРЕЗ ZOOM НА ВСЮ СТРАНИЦУ ===== */
/* ВАЖНО: zoom на html+body, чтобы гарантированно работало на всех страницах */

@media (max-width: 1400px) {
  html, body{ zoom:0.95; }
}
@media (max-width: 1300px) {
  html, body{ zoom:0.90; }
}
@media (max-width: 1200px) {
  html, body{ zoom:0.85; }
}
@media (max-width: 1100px) {
  html, body{ zoom:0.80; }
}
@media (max-width: 1024px) {
  html, body{ zoom:0.75; }
}
@media (max-width: 900px) {
  html, body{ zoom:0.70; }
}

/* ===== Заголовок ===== */
.welcome{
  position:absolute; left:91px; top:190px;
  width:657px; height:158px;
  font-family:"Overpass", sans-serif;
  font-weight:800; font-size:32px; line-height:1.25;
  color:var(--text-main);
  text-align:right; margin:0;
}

/* Текст справа под монитором */
.pitch{
  position:absolute; left:827px; top:550px;
  width:440px; height:246px;
  font-family:"Oswald", sans-serif;
  font-weight:400; font-size:20px; line-height:1.25;
  color:var(--text-main);
  text-align:left; white-space:pre-line;
}

/* ===== Иконки + подписи ===== */
.ico{ position:absolute; display:block; }
.label{
  position:absolute; display:flex; align-items:center; justify-content:center;
  font-family:"Roboto Condensed", sans-serif;
  font-weight:700; font-size:24px; text-transform:uppercase;
  color:var(--text-main); text-align:center;
}

/* diagn */
.ico-diagn{left:243px; top:445px; width:73.29px; height:94.57px}
.label-diagn{left:164px; top:537px; width:242px; height:88px}

/* home */
.ico-home{left:535px; top:430px; width:133px; height:120px}
.label-home{left:503px; top:537px; width:192px; height:88px}

/* 365 */
.ico-365{left:230.32px; top:640px; width:97.52px; height:91px}
.label-365{left:211px; top:720px; width:136px; height:88px}

/* fast */
.ico-fast{left:554px; top:640px; width:93.01px; height:91.04px}
.label-fast{left:497px; top:716px; width:208px; height:88px}

/* 24 */
.ico-24{left:232px; top:810px; width:95px; height:95px}
.label-24{left:158px; top:893px; width:242px; height:88px}

/* pro */
.ico-pro{left:542px; top:797px; width:114px; height:94px}
.label-pro{left:477px; top:893px; width:242px; height:88px}

/* ===== Кнопка "Оставить заявку" ===== */
.btn-apply{ position:absolute; left:800px; top:900px; width:409px; height:103px; display:block; }

/* ===== Карточки ===== */
.card{position:absolute; width:409px; height:735px; display:block}

/* Плашка 1 */
.card-1{left:219px; top:1083px}
.img.tv{position:absolute; left:244px; top:1144px; width:357px; height:238px}
.img.electro{position:absolute; left:282px; top:1151px; width:259.82px; height:350px}
.card-title{
  position:absolute; width:328px; height:88px;
  font-family:"Roboto Condensed", sans-serif; font-weight:700; font-size:24px;
  text-transform:uppercase; text-align:center;
  color:var(--card-text);
  display:flex; align-items:center; justify-content:center;
}
.card1-title{left:259px; top:1496px}

/* ✅ ИСПРАВЛЕНО: было white-space:pre-line; из-за этого при <br> + переносах в HTML получались двойные строки */
.card-list{
  position:absolute;
  white-space: normal;              /* было: pre-line */
  line-height: 1.25;                /* компактный интервал как раньше */
  font-family:"Roboto", sans-serif; font-weight:400; font-size:20px;
  color:var(--card-text);
  text-align:left;
}

/* =========================================================
   ✅ ЕДИНСТВЕННОЕ ВНЕДРЕНИЕ: ссылки ТОЛЬКО внутри .card-list
   НЕ трогаем display/позиционирование, чтобы НИЧЕГО не ехало
   ========================================================= */
.card-list a{
  color: inherit;
  text-decoration: none;
}
.card-list a:hover{
  text-decoration: underline;
}
/* ========================================================= */

.card1-list{left:279px; top:1594px; width:287px; height:156px}

/* Плашка 2 */
.card-2{left:787px; top:1083px}
.img.dyson{
  position:absolute; left:1028px; top:1083px; width:219.49px; height:329.23px;
  transform:rotate(20.63deg);
  transform-origin: top left;
}
.img.humid{position:absolute; left:728px; top:1151px; width:468px; height:312px}
.card2-title{left:833px; top:1496px}
.card2-list{left:855px; top:1594px; width:287px; height:161px}

/* Плашка 3 */
.card-3{left:221px; top:1859px}
.img.micro{position:absolute; left:240px; top:1924px; width:319.5px; height:213px}
.img.coffee{position:absolute; left:351px; top:1859px; width:228px; height:342px}
.card3-title{left:259px; top:2168px}
.card3-list{left:279px; top:2254px; width:265px; height:353px}

/* ===== Правый блок CTA ===== */
.cta-text{
  position:absolute; left:800px; top:1934px; width:390px; height:309px;
  font-family:"Roboto", sans-serif; font-weight:400; font-size:24px; line-height:1.25;
  color:var(--cta-text);
  text-align:left; white-space:pre-line;
}
.btn-contact{position:absolute; left:780px; top:2100px; width:408px; height:100px}
.soc{position:absolute; width:50px; height:50px}
.soc-ig-dark{left:855px; top:2220px}
.soc-wa-dark{left:1000px; top:2220px; width:70px}

/* ===================================================================
   ===== НИЖНЯЯ ПАНЕЛЬ (ФИКС: НЕ ДЁРГАЕТСЯ ПРИ ZOOM + ОДИНАКОВО ВЕЗДЕ)
   =================================================================== */

/* ===================================================================
   ===== НИЖНЯЯ ПАНЕЛЬ (FULL-BLEED ГРАДИЕНТ ВЕЗДЕ + 80px ОТСТУП)
   =================================================================== */

/* Футер — контентный блок под макет, в потоке */
.bottom{
  position: relative;
  z-index: 1;

  /* ВАЖНО: 80px ниже последнего контента (на страницах с контентом в потоке) */
  margin: 80px auto 0;

  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
  padding: 24px 24px 32px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
  flex-wrap: nowrap;
}

/* Градиентная плашка НА ВСЮ ШИРИНУ ЭКРАНА (не зависит от .stage 1440px) */
.bottom::before{
  content:"";
  position:absolute;
  inset:0;

  left:50%;
  transform:translateX(-50%);

  /* ✅ компенсируем zoom */
  width: calc(100vw / var(--page-zoom, 1));

  background: var(--grad-bottom);
  z-index:-1;
}


/* Типографика футера */
.b-col{
  font-family:"Roboto", sans-serif;
  font-weight:400;
  font-size: clamp(16px, 1.25vw, 22px);
  line-height:1.4;
  color:var(--bottom-text);
  white-space:pre-line;
  text-align:left;
}

.b-social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:20px 0 auto;
}
.b-social-text{ margin:0 0 15px 0; }
.b-social-icons{ display:flex; align-items:center; gap:16px; }

.b-phones,
.b-address,
.b-hours{ flex:0 0 auto; }

.b-hours{ line-height:1.3; }

/* Соц-иконки внутри футера — статичные */
.bottom .soc{
  position: static;
  width: clamp(28px, 2.2vw, 36px);
  height: clamp(28px, 2.2vw, 36px);
  display:block;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.bottom .soc img{ display:block; width:100%; height:100%; }
.bottom .soc:hover{ transform: scale(1.04); opacity: .95; }

/* Ссылки в адресе — без подчёркивания */
.b-address a{
  text-decoration: none !important;
  color: inherit !important;
}
.b-address a:hover{ text-decoration: none !important; }


/* Узкие экраны — разрешаем перенос колонок (чтобы не было “огрызка”) */
@media (max-width: 900px){
  .bottom{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}



/* ===== О НАС ===== */
.about__title{
  position:absolute; left:138px; top:220px; width:146px; height:49px;
  font-family:"Roboto", Arial, sans-serif; font-weight:900; font-size:48px; line-height:1;
  color:var(--about-title); text-align:left; margin:0;
}
.about__text{
  position:absolute; left:140px; top:325px; width:1030px; height:868px;
  font-family:"Roboto", Arial, sans-serif; font-weight:400; font-size:24px; line-height:1.25;
  color:var(--about-text); text-align:left; white-space:pre-line;
}
.about__team-title{
  position:absolute; left:138px; top:1400px; width:515px; height:56px;
  font-family:"Roboto", Arial, sans-serif; font-weight:900; font-size:48px; line-height:1;
  color:var(--about-team-title); text-align:left; margin:0;
}
/* TS FIX: фото команды на всю ширину, высота авто */
.about__team-img{ position:absolute; left:0; top:1524px; width:1440px; height:auto; object-fit:cover; display:block; }
.about__btn-call{ position:absolute; left:140px; top:2354px; width:393px; height:95px; display:block; }
.about__ig{ position:absolute; left:591px; top:2370px; width:60px; height:60px; display:block; }
.about__wa{ position:absolute; left:695px; top:2370px; width:60px; height:60px; display:block; }

/* ===== ОТЗЫВЫ ===== */
.rv-title{
  position:absolute; left:138px; top:136px; width:544px; height:127px;
  font:900 48px/1 "Roboto", Arial, sans-serif;
  color:var(--reviews-title); text-align:left; margin:0;
}
.rv-lead{
  position:absolute; left:143px; top:246px; width:986px; height:237px;
  font:400 32px/1.25 "Roboto", Arial, sans-serif;
  color:var(--reviews-ink); text-align:left;
}
.rv-meta-label{
  position:absolute; left:146px; top:460px; width:493px; height:115px;
  font:400 32px/1 "Roboto", Arial, sans-serif; color:var(--reviews-ink); text-align:left;
}
.rv-meta-count{
  position:absolute; left:790px; top:475px;
  font:900 32px/1 "Roboto", Arial, sans-serif; color:var(--reviews-ink); text-align:left;
}

/* Блоки отзывов */
.review{ position:absolute; left:138px; width:1014px; }
.review .rv-name{
  position:absolute; left:0; top:0;
  font:900 32px/1 "Roboto", Arial, sans-serif;
  color:var(--reviews-ink);
}
.review .rv-stars{ position:absolute; left:105px; top:0; width:141px; height:28px; display:block; }
/* НЕ обрезаем текст отзывов */
.review .rv-text{
  position:absolute; left:0; top:38px; width:1014px;
  font:500 24px/1.25 "Roboto", Arial, sans-serif; color:var(--reviews-ink); text-align:left;
}
.review .rv-splitter{ position:absolute; left:0; width:1061px; height:3px; display:block; }

/* Первый отзыв — заданная вертикаль */
.review:nth-of-type(1){ top:800px; }

/* Число среднего рейтинга */
.rv-avg{
  position:absolute; left:636px; top:430px; width:183px; height:96px;
  font-family:"Roboto", Arial, sans-serif; font-weight:900; font-size:96px; line-height:1;
  color:var(--reviews-title); text-align:left;
}

/* Средние звёзды */
.avgstar{ position:absolute; width:60px; height:60px; }
.avgstar.s1{ left:636px; top:530px; } .avgstar.s2{ left:717px; top:530px; }
.avgstar.s3{ left:797px; top:530px; } .avgstar.s4{ left:874px; top:530px; }
.avgstar.s5{ left:954px; top:530px; }
.st{ width:100%; height:100%; display:block; }
.bg{ fill:#B6B6B6; } .fg{ fill:#00BBFF; }
.avgstar .clip{ position:absolute; left:0; top:0; height:100%; width:0; overflow:hidden; }

/* Кнопка "Оставить отзыв" */
.rv-open{ position:absolute; left:126px; top:500px; width:404x; height:130px; display:block; }
.rv-open img{ width:100%; height:100%; display:block }

/* ===== Модальные (отзывы) ===== */
.rvm{
  position:absolute; left:101px; top:412px; width:1233px; min-height:730px;
  background:#D4FFFC; border-radius:32px; z-index:6000; padding:0;
}
.rvm-close{
  position:absolute; left:1167px; top:33px; width:31px; height:31px;
  background: url('assets/exit.svg') no-repeat center / contain; border:0; cursor:pointer;
}
.rvm-close:hover{ background-image:url('assets/exithighlight.svg'); }
.rvm-label{ position:absolute; font:900 32px/1 "Roboto", Arial, sans-serif; color:#020122; text-align:left; }
.rvm-l-name { left:144px; top:142px; width:116px; height:74px; }
.rvm-l-phone{ left:468px; top:142px; width:171px; height:49px; }
.rvm-l-order{ left:810px; top:142px; width:262px; height:38px; }
.rvm-input{
  position:absolute; height:56px; border:1px solid #020122; border-radius:6px;
  background:#D4FFFC; color:#020122; padding:0 14px; font:100 24px/56px "Roboto", Arial, sans-serif; outline:none;
}
.rvm-input::placeholder{ color:#020122; opacity:.7; font-weight:100; }
.rvm-in-name { left:144px; top:193px; width:252px; }
.rvm-in-phone{ left:467px; top:193px; width:252px; }
.rvm-in-order{ left:809px; top:193px; width:273px; }
.rvm-rate-label{ position:absolute; left:142px; top:285px; width:592px; height:65px; font:400 24px/1 "Roboto", Arial, sans-serif; color:#020122; }
.rvm-stars{ position:absolute; left:392px; top:285px; display:flex; gap:5px; }
.rvm-stars .star{ width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; }
.rvm-stars .star svg{ width:100%; height:100%; fill:#B6B6B6; transition:fill .12s ease }
.rvm-stars .star.active svg{ fill:#09FFFB; }
.rvm-text{
  position:absolute; left:142px; top:350px; width:938px; min-height:186px;
  border:1px solid #020122; border-radius:6px; background:#D4FFFC; color:#020122;
  padding:12px 14px; resize:none; font:100 24px/1.25 "Roboto", Arial, sans-serif; outline:none; overflow:hidden;
}
.rvm-text::placeholder{ color:#020122; opacity:.7; font-weight:100; }
.rvm-submit{ position:absolute; left:397px; top:580px; width:408px; height:103px; border:0; padding:0; background:transparent; cursor:pointer; }
.rvm-submit img{ width:100%; height:100%; display:block }

/* Плашка "Спасибо" */
.rvm2{
  position:absolute; left:240px; top:460px; width:1000px; min-height:400px;
  background:#D4FFFC; border-radius:32px; z-index:7000;
}
.rvm2-text{
  position:absolute; left:87px; top:80px; width:810px; height:267px;
  font:900 30px/1.25 "Roboto", Arial, sans-serif; color:#020122; white-space:pre-line; text-align:left;
}
.rvm2-home{ position:absolute; left:83px; top:250px; width:408px; height:108px; display:block; }
.rvm2-home img{ width:100%; height:100%; display:block }

/* ===== HERO ===== */
.hero-anim{
  position:relative; width:1440px; height:800px; pointer-events:auto;
}
.hero-anim img{ position:absolute; display:block; user-select:none; -webkit-user-drag:none }
.hero.monitor{ left:807px; top:200px; width:446px; height:311px; z-index:10; }

/* ... (дальше файл без изменений — я НЕ трогала) */


.crack{ z-index:15; }
.crack-1{ left:823px; top:305px; width:211px; height:151px; }
.crack-2{ left:979px; top:360px; width:89px;  height:97px;  }
.crack-3{ left:976px; top:216px; width:92px;  height:130px;  }
.crack-4{ left:823px; top:216px; width:1px; height:151px; }

.hero.mantiya{ left:1100px; top:281px; width:212px; height:204px; z-index:20; }

.gear{ transform-origin:center center; z-index:30; }
.gear-big{   left:1193px; top:297px; width:114px; height:106px; }
.gear-mid{   left:1110px; top:408px; width:88px;  height:82px;  }
.gear-small{ left:1200px; top:407px; width:68px;  height:64px;  }

.hero-anim.play .gear-big{   animation:gearBig 3s linear forwards; }
.hero-anim.play .gear-mid{   animation:gearMid 3s linear forwards; }
.hero-anim.play .gear-small{ animation:gearSmall 3s linear forwards; }
@keyframes gearBig{   to{ transform:rotate(-91deg); } }
@keyframes gearMid{   to{ transform:rotate(-130deg); } }
@keyframes gearSmall{ to{ transform:rotate(160deg); } }

/* Трещины — градиентное исчезновение */
.crack{
  --ms:320% 320%;
  -webkit-mask-size:var(--ms); mask-size:var(--ms);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.crack.dir-tr{
  -webkit-mask-image:linear-gradient(to bottom left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 55%);
          mask-image:linear-gradient(to bottom left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 55%);
}
.hero-anim.play .crack.dir-tr{ animation:fadeTR 3s linear forwards; }
@keyframes fadeTR{
  from{ -webkit-mask-position:-120% -120%; mask-position:-120% -120%; opacity:1; }
  to{   -webkit-mask-position: 120%  120%; mask-position: 120%  120%; opacity:0; }
}
.crack.dir-tb{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 65%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 65%);
}
.hero-anim.play .crack.dir-tb{ animation:fadeTB 3s linear forwards; }
@keyframes fadeTB{
  from{ -webkit-mask-position:0% -120%; mask-position:0% -120%; opacity:1; }
  to{   -webkit-mask-position:0%  120%; mask-position:0%  120%; opacity:0; }
}
.crack.dir-lb-tr{
  -webkit-mask-image:linear-gradient(to top right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 60%);
          mask-image:linear-gradient(to top right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 60%);
}
.hero-anim.play .crack.dir-lb-tr{ animation:fadeLBTR 3s linear forwards; }
@keyframes fadeLBTR{
  from{ -webkit-mask-position:-120% 120%; mask-position:-120% 120%; opacity:1; }
  to{   -webkit-mask-position: 120% -120%; mask-position: 120% -120%; opacity:0; }
}
.crack.dir-br-tl{
  -webkit-mask-image:linear-gradient(to top left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
          mask-image:linear-gradient(to top left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
}
.hero-anim.play .crack.dir-br-tl{ animation:fadeBRTL 3s linear forwards; }
@keyframes fadeBRTL{
  from{ -webkit-mask-position:120% 120%; mask-position:120% 120%; opacity:1; }
  to{   -webkit-mask-position:-120% -120%; mask-position:-120% -120%; opacity:0; }
}

/* --- Контактовая плашка --- */
.contacts-panel{
  background: var(--contacts-bg);
  color: var(--contacts-text);
}
.contacts-panel, .contacts-panel *{ color: var(--contacts-text); }

.contacts-panel .soc-ig img,
.contacts-panel .soc-wa img{
  filter: none !important;
}

/* ссылка-адрес — без подчёркивания, цвет как у текста вокруг */
.b-address a,
.address a {
  text-decoration: none !important;
  color: inherit !important;
}
.b-address a:hover,
.address a:hover {
  text-decoration: none !important;
}
.btn-apply,
.btn-contact{
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 50; /* на всякий, чтобы ничто не перекрывало */
}

a.cta-link{ /* обёртка-ссылка ничего не ломает */
  display: inline-block;
}

/* ===========================================
   СТРАНИЦЫ РАЗДЕЛОВ РЕМОНТА
   (сеточка белых плашек)
   =========================================== */

/* контейнер для карточек раздела */
.cards-grid{
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

/* универсальная белая плашка */
.svc-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 32px;
  border-radius: 32px;
  background: #FFFFFF; /* всегда белая — и в светлой, и в тёмной теме */
  box-shadow: 0 20px 60px rgba(2, 1, 34, 0.30);
  text-decoration: none;
  color: #020122;
  min-height: 220px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 80px rgba(2, 1, 34, 0.40);
}

/* КАРТИНКИ ВНУТРИ ПЛАШЕК */
.svc-card__img{
  width: 100%;
  height: 180px;
  margin-bottom: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Телевизоры */
.svc-card__img--tv{
  background-image: url('assets/sample-tv.png');
}

/* Электросамокаты / электротранспорт (общий пример) */
.svc-card__img--escooter{
  background-image: url('assets/sample-electro.png');
}

/* Электроскутеры */
.svc-card__img--scooter{
  background-image: url('assets/neotrikescooter.png');
}

/* Гироскутеры */
.svc-card__img--gyro{
  background-image: url('assets/smartbalancegiro.png');
}

/* Электровелосипеды */
.svc-card__img--ebike{
  background-image: url('assets/jorgataybike.png');
}

/* Игрушечные машинки — временно тот же образец, можно заменить */
.svc-card__img--toycar{
  background-image: url('assets/sample-electro.png');
}

/* ===========================
   ДОБАВЛЕНО: БЫТОВАЯ ТЕХНИКА
   (remont-bytovoj-tehniki.php)
   =========================== */

/* Робот-пылесос */
.svc-card__img--robotvacuum{
  background-image: url('assets/samsungrobot.png');
}

/* Вертикальный пылесос */
.svc-card__img--verticalvacuum{
  background-image: url('assets/dysonverti.png');
}

/* Фен */
.svc-card__img--hairdryer{
  background-image: url('assets/sample-dyson.png');
}

/* Утюг */
.svc-card__img--iron{
  background-image: url('assets/braunutyg.png');
}

/* Парогенератор */
.svc-card__img--steamgenerator{
  background-image: url('assets/braunparo.png');
}

/* Увлажнитель воздуха */
.svc-card__img--humidifier{
  background-image: url('assets/avavozduh.png');
}

/* ===========================
   ДОБАВЛЕНО: КУХОННАЯ ТЕХНИКА
   (remont-kuhonnoj-tehniki.php)
   =========================== */

/* Микроволновая печь */
.svc-card__img--microwave{
  background-image: url('assets/sample-micro.png');
}

/* Кофемашина */
.svc-card__img--coffeemachine{
  background-image: url('assets/saecocoffeemachine.png');
}

/* Кофемолка */
.svc-card__img--coffeemill{
  background-image: url('assets/polarismolka.png');
}

/* Кофеварка */
.svc-card__img--coffeemaker{
  background-image: url('assets/polariscoffeevarka.png');
}

/* Печь */
.svc-card__img--oven{
  background-image: url('assets/mideaoven.png');
}

/* Кухонный комбайн */
.svc-card__img--foodprocessor{
  background-image: url('assets/kenwoodfoodprocessor.png');
}

/* Грильница */
.svc-card__img--grill{
  background-image: url('assets/braungrill.png');
}

/* Миксер */
.svc-card__img--mixer{
  background-image: url('assets/moulinexmeat.png');
}

/* Мясорубка */
.svc-card__img--meatgrinder{
  background-image: url('assets/kenwoodmeat.png');
}

/* Хлебопечка */
.svc-card__img--breadmaker{
  background-image: url('assets/kenwoodbread.png');
}

/* Термопод */
.svc-card__img--thermopot{
  background-image: url('assets/galaxythermopot.png');
}

/* заголовок внутри плашки */
.svc-card .title,
.svc-card__title{
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

/* картинка техники (если есть <img>) */
.svc-card img{
  max-width: 100%;
  max-height: 180px;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}

/* на всякий, чтобы ссылки внутри не подчеркивались */
.svc-card,
.svc-card *{
  text-decoration: none;
}
.service-page{
  color: var(--svc-ink);
}

/* Заголовки/пояснения/хлебные крошки */
.service-page h1,
.service-page h2,
.service-page h3,
.service-page .catalog-intro,
.service-page .brand-intro,
.service-page .faults-title,
.service-page .service-note,
.service-page .tv-samsung-note,
.service-page .breadcrumbs{
  color: var(--svc-ink);
}

/* Крошки: ссылки делаем тоже “текстом страницы” */
.service-page .breadcrumbs a{
  color: var(--svc-ink);
}

/* Но ссылки внутри примечания (WhatsApp/Instagram) оставляем фирменными */
.service-page .service-note a,
.service-page .tv-samsung-note a{
  color:#01B7B4;
}
/* ✅ По умолчанию: десктопный hero видим, мобильный скрыт */
.hero-mobile{ display:none; }
.hero-desktop{ display:block; }

/* ✅ На мобиле наоборот */
@media (max-width: 768px){
  .hero-desktop{ display:none !important; }
  .hero-mobile{ display:block !important; }
}
/* ===========================================
   CONTACTS (простая страница контактов)
   =========================================== */
.contacts-simple{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

.contact-btn{
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 12px 30px rgba(2, 1, 34, 0.18);
  text-decoration: none;
  color: var(--svc-ink);
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  transition: transform .12s ease, box-shadow .12s ease;
}

.contact-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(2, 1, 34, 0.22);
}

/* тёмная тема — делаем кнопку не белой */
html:not(.theme-light) .contact-btn,
html.theme-dark .contact-btn,
body.theme-dark .contact-btn,
[data-theme="dark"] .contact-btn{
  background: rgba(190, 238, 255, 0.92);
  color: #020122;
}
/* ✅ ТЕКСТ КАК НА ОСТАЛЬНЫХ СТРАНИЦАХ */
.articles-page{
  color: var(--svc-ink);
}
.articles-page h1,
.articles-page h2,
.articles-page h3,
.articles-page p,
.articles-page .articles-lead,
.articles-page .articles-section-title,
.articles-page .article-card__cat,
.articles-page .article-card__title,
.articles-page .article-card__teaser,
.articles-page .article-card__tags,
.articles-page .breadcrumbs{
  color: var(--svc-ink);
}
.articles-page .breadcrumbs a{
  color: var(--svc-ink);
}

/* ✅ Карточка белая, значит текст внутри делаем тёмным ВСЕГДА */
.article-card{
  color:#020122;
}
.article-card h3,
.article-card .article-card__cat,
.article-card .article-card__teaser,
.article-card .article-card__tags{
  color:#020122;
}

/* "Читать статью" — фирменный цвет, но не ломаем читаемость */
.article-card__link{
  color:#020122;
}
html:not(.theme-light) .article-card__link,
html.theme-dark .article-card__link,
body.theme-dark .article-card__link,
[data-theme="dark"] .article-card__link{
  color:#0080AF;
}