/* =========================================================
   Перголы · маркизы · ZIP · рефлексоли · мягкие окна
   Стили лендинга. Цвета собраны в переменных ниже —
   меняете их здесь, и меняется весь сайт.
   ========================================================= */

:root{
  color-scheme: dark;

  --bg:        #131517;   /* основний фон сторінки */
  --surface:   #1b1e21;   /* картки, форма, блок «про підхід» */
  --surface-2: #22262a;   /* смуги-секції, підвал */
  --ink:       #edeff1;   /* основний текст */
  --ink-2:     #c3c8ce;   /* другорядний текст */
  --muted:     #8b9299;   /* підписи, дрібний текст */
  --line:      #2d3237;   /* рамки й лінії */
  --accent:    #a9b3bd;   /* кнопки, іконки, галочки */
  --accent-ink:#c5ced7;   /* акцент при наведенні */
  --on-accent: #14171a;   /* текст на акцентних кнопках */
  --deep:      #262b31;   /* темна картка в контактах */

  --radius:    16px;
  --radius-lg: 22px;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7);
  --wrap:      1180px;
}

/* Світла версія палітри — на випадок, якщо колись захочете
   повернути денний вигляд. Просто перенесіть ці значення у :root вище
   (і поміняйте color-scheme на light):

  --bg:#f4f5f6; --surface:#ffffff; --surface-2:#e9ebed;
  --ink:#191c1f; --ink-2:#454b52; --muted:#767d85;
  --line:#dcdfe3; --accent:#59636e; --accent-ink:#3f474f;
  --on-accent:#ffffff; --deep:#23272b;
  --shadow:0 1px 2px rgba(27,25,22,.05), 0 12px 32px -12px rgba(27,25,22,.16);
*/

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:84px}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.65 'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0 0 .5em; line-height:1.12; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(34px,5.4vw,60px)}
h2{font-size:clamp(27px,3.4vw,40px)}
h3{font-size:20px; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.wrap--narrow{max-width:820px}
.accent{color:var(--accent)}

/* ---------- Кнопки ---------- */
.btn{
  --btn-bg:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border:1px solid transparent; border-radius:999px;
  background:var(--btn-bg); color:var(--on-accent); text-decoration:none;
  font-weight:700; font-size:16px; line-height:1.2; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
}
.btn:hover{transform:translateY(-1px); background:var(--accent-ink)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:16px 30px; font-size:17px}
.btn--sm{padding:10px 18px; font-size:15px}
.btn--block{display:flex; width:100%}
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line); box-shadow:none;
}
.btn--ghost:hover{background:var(--surface); border-color:var(--accent); color:var(--accent)}

/* ---------- Шапка ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header__in{display:flex; align-items:center; gap:18px; min-height:72px}

.logo{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.logo__mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
}
.logo__mark svg{width:22px; height:22px}
.logo__txt{display:flex; flex-direction:column; line-height:1.15}
.logo__txt b{font-size:17px; font-weight:800; letter-spacing:-.01em}
.logo__txt i{font-style:normal; font-size:11.5px; color:var(--muted); letter-spacing:.02em}

.nav{display:flex; gap:20px; margin-left:auto; font-size:14.5px; font-weight:600}
.nav a{text-decoration:none; color:var(--ink-2); white-space:nowrap}
.nav a:hover{color:var(--accent)}

.header__cta{display:flex; align-items:center; gap:16px}
.phone{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:800; font-size:16px; white-space:nowrap;
}
.phone:hover{color:var(--accent)}
.phone__ic{display:none; width:20px; height:20px}
.phone__ic svg{width:20px; height:20px}

/* Перемикач мови */
.lang{
  display:flex; gap:2px; padding:3px; margin-left:4px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
}
.lang button{
  padding:6px 11px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--muted);
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.03em;
  transition:background .15s ease, color .15s ease;
}
.lang button:hover{color:var(--ink)}
.lang button.is-on{background:var(--accent); color:var(--on-accent)}

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:1px solid var(--line); border-radius:12px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer;
}
.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Первый экран ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px)}
/* Фото тераси — головний елемент першого екрана, тому воно лишається
   світлим і без суцільного затемнення.
   Щоб поставити інше фото — покладіть його в assets/img/
   і замініть тут ім'я файлу (обидва рядки з url). */
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* м'яка підкладка тільки під текстом — ліворуч, зникає до середини кадру */
    linear-gradient(100deg,
      color-mix(in srgb, var(--bg) 68%, transparent) 0%,
      color-mix(in srgb, var(--bg) 46%, transparent) 24%,
      color-mix(in srgb, var(--bg) 16%, transparent) 42%,
      transparent 56%),
    /* нижня смуга під рядком «Повний цикл…» і перехід до наступної секції;
       маркіза у верхній частині кадру, її це не торкається */
    linear-gradient(180deg,
      transparent 0%,
      transparent 42%,
      color-mix(in srgb, var(--bg) 52%, transparent) 66%,
      color-mix(in srgb, var(--bg) 84%, transparent) 84%,
      var(--bg) 100%),
    url('../img/hero-terrace.jpg');
  background-size: auto, auto, cover;
  background-position: center, center, center 42%;
  background-repeat: no-repeat;
}

/* Замість затемнення фото — м'яка тінь на самому тексті:
   літери лишаються читабельними, а знімок не темніє */
.hero__in h1,
.hero__in .lead,
.hero__facts b,
.hero__facts span{
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 8px 26px rgba(0,0,0,.5);
}
.hero__in .lead{color:var(--ink)}
.hero__facts span{color:var(--ink-2)}
.hero__in{position:relative; z-index:1; max-width:900px}
.eyebrow{
  display:inline-block; margin:0 0 18px; padding:7px 15px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--ink-2); letter-spacing:.01em;
}
.lead{font-size:clamp(17px,1.5vw,19.5px); color:var(--ink-2); max-width:65ch}
.lead--sm{font-size:16.5px; max-width:62ch}
.hero .lead{margin-bottom:14px}
.hero .lead:last-of-type{margin-bottom:32px}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px}
/* Друга кнопка прозора, а під нею фото — додаємо легку підкладку */
.hero__actions .btn--ghost{
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(6px);
  border-color:color-mix(in srgb, var(--ink) 25%, transparent);
}
.hero__actions .btn--ghost:hover{background:var(--surface)}

.hero__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  list-style:none; margin:56px 0 0; padding:26px 0 0; border-top:1px solid var(--line);
}
.hero__facts li{display:flex; flex-direction:column; gap:9px}
/* Назва — короткий підпис великими літерами, під нею пояснення */
.hero__facts b{font-size:13.5px; font-weight:800; letter-spacing:.1em; color:var(--ink)}
.hero__facts span{font-size:14.5px; color:var(--muted); line-height:1.5}

/* ---------- Блок про підхід (під першим екраном) ---------- */
.intro{
  padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.intro__in{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px); align-items:start}
.intro__claim{
  margin:0; font-size:clamp(21px,2.5vw,29px); font-weight:800;
  line-height:1.24; letter-spacing:-.02em; color:var(--ink);
  padding-left:22px; border-left:3px solid var(--accent);
}
.intro__text p{margin:0 0 16px; color:var(--ink-2); font-size:17px}
/* Останній абзац — про монтаж, тому виділений */
.intro__text p:last-child{margin:0; color:var(--ink); font-weight:600}

/* ---------- Секции ---------- */
.section{padding:clamp(56px,7vw,96px) 0}
.section--alt{background:var(--surface-2)}
.sec-head{max-width:70ch; margin-bottom:clamp(32px,4vw,52px)}
.sec-head p{color:var(--ink-2); font-size:17.5px; margin:0}

/* ---------- Карточки услуг ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px 26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 45%, var(--line))}
.card__icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:18px;
  display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%, transparent);
}
.card__icon svg{width:30px; height:30px}

/* Фото послуги: на всю ширину картки, зверху, з обрізанням по центру.
   Щоб замінити знімок — покладіть новий файл з тим самим ім'ям
   у assets/img/services/ */
.card__photo{
  display:block;
  width:calc(100% + 52px);
  max-width:none;
  height:auto;
  margin:-28px -26px 20px;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--surface-2);
}
.card p{color:var(--ink-2); font-size:15.5px; margin-bottom:16px}
.card--muted{background:transparent; box-shadow:none}
/* Виділена картка — монтаж і заміри */
.card--hl{
  border-color:color-mix(in srgb,var(--accent) 40%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%, transparent), transparent 60%),
    var(--surface);
}

.ticks{list-style:none; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:9px}
.ticks li{position:relative; padding-left:26px; font-size:14.8px; color:var(--ink-2)}
.ticks li::before{
  content:""; position:absolute; left:2px; top:.52em; width:11px; height:6px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.ticks--lg{border:0; padding:0; gap:14px; margin:0 0 22px}
.ticks--lg li{font-size:16.5px; padding-left:30px}
.ticks--lg li::before{top:.6em; width:13px; height:7px}
.ticks--lg b{color:var(--ink)}

/* ---------- Преимущества ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.feat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
}
.feat__num{
  display:block; font-size:13px; font-weight:800; letter-spacing:.12em;
  color:var(--accent); margin-bottom:14px;
}
.feat p{margin:0; color:var(--ink-2); font-size:15.5px}

/* ---------- Этапы ---------- */
.steps{
  list-style:none; counter-reset:s; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.steps li{counter-increment:s; position:relative; padding-top:52px}
.steps li::before{
  content:counter(s); position:absolute; top:0; left:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-weight:800; font-size:15px;
}
.steps li::after{
  content:""; position:absolute; top:19px; left:46px; right:-20px; height:1px;
  background:var(--line);
}
.steps li:last-child::after{display:none}
.steps b{display:block; font-size:17.5px; font-weight:700; margin-bottom:6px}
.steps p{margin:0; font-size:15px; color:var(--ink-2)}

/* ---------- Стоимость ---------- */
.price{display:grid; grid-template-columns:1.5fr .95fr; gap:44px; align-items:start}
.note{
  margin:0; padding:16px 18px; border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 9%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 25%, transparent);
  font-size:15.5px; color:var(--ink-2);
}
.price__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow);
  position:sticky; top:96px;
}
/* У картці лишилися тільки фраза та дві кнопки, тому текст —
   не дрібний підпис, а повноцінне речення */
.price__card p{font-size:17px; color:var(--ink-2); margin-bottom:24px}
.price__card .btn{margin-bottom:10px}
.price__card .btn:last-child{margin-bottom:0}

/* ---------- Форма ---------- */
.lead-sec__in{display:grid; grid-template-columns:1fr .9fr; gap:48px; align-items:start}
.lead-sec__contacts{display:grid; gap:12px; margin-top:28px}
.contact-line{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  padding:12px 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); width:fit-content; transition:.18s;
}
.contact-line:hover{border-color:var(--accent); color:var(--accent)}
.contact-line__ic{width:22px; height:22px; color:var(--accent); flex:0 0 auto}
.contact-line__ic svg{width:22px; height:22px}

.form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow);
}
.field{display:block; margin-bottom:16px}
.field>span{display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:7px}
.field>span i{font-style:normal; font-weight:400; color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; font:inherit; font-size:16px;
  color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:12px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent);
}
.field input.invalid{border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.15)}
.form__hint{margin:12px 0 0; font-size:13px; color:var(--muted); text-align:center}
.form__ok{
  margin:14px 0 0; padding:12px 14px; border-radius:12px; font-size:14.5px;
  background:color-mix(in srgb,#2e7d32 14%, transparent);
  border:1px solid color-mix(in srgb,#2e7d32 40%, transparent);
}
/* Те саме віконце, але коли заявку не вдалося надіслати */
.form__ok--err{
  background:color-mix(in srgb,#c0392b 16%, transparent);
  border-color:color-mix(in srgb,#c0392b 45%, transparent);
}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px}
.faq details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:4px 22px;
}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-weight:700; font-size:17px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:4px; top:26px; width:10px; height:10px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); top:30px}
.faq p{margin:0 0 18px; color:var(--ink-2); font-size:16px}

/* ---------- Контакты ---------- */
.contacts{display:grid; grid-template-columns:1.4fr .9fr; gap:44px; align-items:start}
.contacts__list{margin:26px 0 0; display:grid; gap:0}
.contacts__list>div{
  display:grid; grid-template-columns:210px 1fr; gap:16px;
  padding:14px 0; border-top:1px solid var(--line);
}
.contacts__list dt{color:var(--muted); font-size:15px}
.contacts__list dd{margin:0; font-weight:600}
.contacts__list a{
  color:var(--ink); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--accent) 50%, transparent);
}
.contacts__list a:hover{text-decoration-color:var(--accent)}
.contacts__cta{
  background:var(--deep); color:var(--ink); border-radius:var(--radius-lg);
  border:1px solid var(--line);
  padding:30px 28px; box-shadow:var(--shadow);
}
.contacts__cta h3{color:var(--ink)}
.contacts__cta p{color:var(--ink-2); font-size:15.5px}
.contacts__cta .btn{box-shadow:none}

/* ---------- Подвал ---------- */
.footer{border-top:1px solid var(--line); padding:32px 0; background:var(--surface-2)}
.footer__in{display:flex; flex-direction:column; gap:6px}
.footer p{margin:0; font-size:14.5px; color:var(--ink-2)}
.footer__note{color:var(--muted); font-size:13px}

/* ---------- Плавающая кнопка ---------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:#229ed9;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  transition:transform .15s ease;
}
.fab:hover{transform:scale(1.06)}
.fab svg{width:27px; height:27px}

/* ---------- Адаптив ---------- */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li::after{display:none}
}

/* Кнопка «Замовити замір» у шапці зайва, щойно місця стає мало:
   поруч лишається телефон, а сама заявка — у першому екрані */
@media (max-width:1240px){
  .header__cta .btn{display:none}
}

@media (max-width:1080px){
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 22px 20px; display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:17px}
  .burger{display:flex; order:4; margin-left:0}
  .lang{order:2; margin-left:auto}
  .header__cta{order:3; margin-left:0}
}

@media (max-width:900px){
  .price,.lead-sec__in,.contacts,.intro__in{grid-template-columns:1fr; gap:32px}
  .price__card{position:static}
  .intro__in{gap:24px}
}

@media (max-width:900px){
  /* На телефоні текст іде на всю ширину, тому підкладка тут вертикальна,
     але слабка: верх кадру з маркізою лишається світлим.
     У смузі заголовка (18–34 % висоти) градієнт трохи щільніший —
     це не окремий прямокутник, а плавне потовщення тієї самої підкладки.
     Заміри показали: без нього другий рядок заголовка давав контраст
     лише 1,64:1 на світлій тканині маркізи. */
  /* Фото — окремим шаром, без жодних градієнтів у ньому */
  .hero__bg{
    background:url('../img/hero-terrace-mobile.jpg');
    background-size:cover;
    background-position:28% top;   /* кадр із полотном маркізи */
    background-repeat:no-repeat;
  }

  /* Затемнення — окремий шар МІЖ фото і текстом.
     Найщільніше внизу кадру, вгору плавно тане до повної прозорості:
     верхня частина знімка лишається природною, а за білим заголовком
     фон стає достатньо темним. Свідомо на rgba(), а не color-mix() —
     працює навіть у старих версіях мобільних браузерів. */
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;                 /* .hero__bg теж 0, але ::after малюється пізніше */
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(19,21,23,0)    0%,
      rgba(19,21,23,0)    5%,
      rgba(19,21,23,.42) 15%,
      rgba(19,21,23,.62) 25%,
      rgba(19,21,23,.66) 34%,
      rgba(19,21,23,.70) 50%,
      rgba(19,21,23,.84) 72%,
      rgba(19,21,23,1)  100%);
  }

  /* Текст завжди вище затемнення */
  .hero__in{position:relative; z-index:2}

  /* Заголовок білий, тінь м'яка й розсіяна — без обведення */
  .hero__in h1{
    color:#ffffff;
    text-shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.4);
  }
  .hero__in h1 .accent{color:#f2f6fa}
}

@media (max-width:640px){
  body{font-size:16px}
  .cards,.grid-4,.steps{grid-template-columns:1fr}
  .hero__facts{grid-template-columns:repeat(2,1fr); gap:18px}
  .header__in{gap:10px; min-height:64px}
  .header__cta{gap:10px}
  .phone{font-size:14.5px}
  .logo__txt b{font-size:15px}
  .logo__txt i{display:none}
  .logo__mark{width:34px; height:34px; border-radius:10px}
  .burger{width:40px; height:40px}
  .nav{inset:64px 0 auto}
  .form{padding:24px 20px}
  .card{padding:24px 20px 22px}
  .card__photo{width:calc(100% + 40px); margin:-24px -20px 18px}
  .contacts__list>div{grid-template-columns:1fr; gap:2px}
  .fab{width:52px; height:52px; right:14px; bottom:14px}
  .hero__actions .btn{flex:1 1 100%}
}

/* На вузьких екранах у шапці лишаються знак, мова, дзвінок і меню —
   номер стає круглою кнопкою, щоб нічого не виїжджало за край */
@media (max-width:560px){
  .logo__txt{display:none}
  .phone{
    width:40px; height:40px; justify-content:center; gap:0;
    border:1px solid var(--line); border-radius:50%; color:var(--accent);
  }
  .phone__ic{display:block}
  .phone span[data-phone]{display:none}
  .lang{margin-left:auto; padding:2px}
  .lang button{padding:6px 8px; font-size:12px}
  .hero__facts{gap:18px 14px}
}

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