/* =========================================================
   ФЕНИКС — стили сайта
   Цвета, шрифты, скругления и отступы — в разделе «НАСТРОЙКИ» (:root).
   Раскладка: белая страница, секции — скруглённые панели с отступом от края,
   тоновые подложки чередуются с белыми, оранжевый — только для акцентов.
   ========================================================= */

/* ---------- Шрифты (лежат в папке fonts): Montserrat — заголовки, Inter — текст, Geist Mono — метки ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/geist-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/geist-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- НАСТРОЙКИ ---------- */
:root{
  --accent:#D9441C;        /* фирменный оранжевый: кнопки, акценты */
  --accent-hover:#B9370F;  /* кнопка при наведении */
  --accent-grad:linear-gradient(135deg,#E2401E 0%,#F07A2A 100%); /* яркая панель — как пламя в логотипе */
  --btn-grad:linear-gradient(100deg,#D9441C 0%,#EA6A2A 100%);   /* лёгкий градиент кнопок */
  --ink:#16181B;           /* заголовки */
  --text:#4B4844;          /* обычный текст */
  --muted:#8A847E;         /* подписи */
  --ghost:#BDB7B0;         /* слова заголовка до проявления */
  --bg:#FFFFFF;            /* фон страницы */
  --tone:#F3F2F0;          /* тоновая подложка секций */
  --tone-2:#EAE8E4;        /* подложка чипов на тоне */
  --line:#E2DFDA;          /* линии и рамки */
  --ph:#D6D4D0;            /* цвет фото, пока грузится */

  --font-head:"Montserrat",Arial,sans-serif;
  --font-text:"Inter",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;

  --frame:8px;             /* отступ панелей от края экрана */
  --r-lg:20px;             /* скругление секций */
  --r:12px;                /* скругление карточек и фото */
  --r-sm:8px;              /* скругление кнопок и полей */
  --max:1920px;
  --gut:64px;              /* поля внутри панели */
  --sec:120px;             /* отступ сверху и снизу внутри секции */
  --gap:16px;              /* расстояние между карточками */
  --header:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1599px){:root{--gut:48px;--sec:104px}}
@media (max-width:1199px){:root{--gut:32px;--sec:88px}}
@media (max-width:959px){:root{--gut:24px;--sec:72px;--r-lg:16px}}
@media (max-width:639px){:root{--gut:16px;--sec:56px;--frame:6px;--gap:12px;--header:64px}}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 8px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ol{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.acc{color:inherit}  /* выделение в заголовках — тем же цветом; оранжевый только у кнопок и деталей */

/* Секция-панель */
.sec{margin:var(--frame);border-radius:var(--r-lg);padding:var(--sec) 0}
.sec--tone{background:var(--tone)}

/* ---------- Типографика ---------- */
.h1,.h2,.h3,.h3l{font-family:var(--font-head);color:var(--ink);text-wrap:balance}
.h1{font-size:clamp(32px,3.5vw,68px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
.h2{font-size:clamp(28px,3.2vw,60px);line-height:1.06;font-weight:700;letter-spacing:-.035em;max-width:1000px}
.h3{font-size:clamp(18px,1.15vw,22px);line-height:1.25;font-weight:700;letter-spacing:-.015em}
.h3l{font-size:clamp(22px,1.7vw,32px);line-height:1.12;font-weight:700;letter-spacing:-.025em}
.lead{font-size:clamp(15px,.95vw,18px);line-height:1.65}
.lead b{font-weight:600;color:var(--ink)}
.sub{margin-top:16px;font:600 clamp(16px,1.15vw,22px)/1.3 var(--font-head);letter-spacing:-.01em;color:var(--muted)}

/* Чип-метка: моноширинный шрифт, подложка */
.chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:6px;background:var(--bg);
  font:500 12px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap;flex:none;align-self:flex-start;justify-self:start}
.sec:not(.sec--tone) .chip{background:var(--tone)}
.chip--sm{height:26px;padding:0 9px;font-size:11px}
.chip--light{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(8px)}
.chip--accent{background:var(--accent)!important;color:#fff}
.chip--onaccent{background:rgba(255,255,255,.18)!important;color:#fff}
.chip--ghost{background:transparent!important;border:1px solid var(--line);color:var(--muted)}
.sq{display:inline-block;width:8px;height:8px;background:var(--accent);flex:none}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2DB55D;box-shadow:0 0 0 3px rgba(45,181,93,.2);flex:none}

/* Шапка секции: чип слева, заголовок справа */
.shead{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;margin-bottom:clamp(40px,3.6vw,72px)}
.shead .chip{margin-top:.6em}
@media (max-width:959px){.shead{grid-template-columns:1fr;gap:16px}.shead .chip{margin-top:0}}


/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 8px 0 20px;border-radius:var(--r-sm);
  font:600 13px/1 var(--font-text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
/* Основная кнопка: лёгкий градиент как пламя в логотипе, при наведении — плотный фирменный цвет */
.btn--primary{position:relative;isolation:isolate;overflow:hidden;background:var(--btn-grad);color:#fff}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);opacity:0;transition:opacity .35s var(--ease)}
.btn--primary:hover::before{opacity:1}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--ink);color:#fff}
.btn--chip{height:44px;padding:0 18px;background:#fff;color:var(--ink);border-color:var(--line)}
.btn--chip{justify-content:flex-start;gap:8px;padding:0 18px 0 12px}
.btn--chip:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.btn__ic{width:24px;height:24px;flex:none}
.btn:not(:has(.arw)){padding-right:20px}
@media (max-width:959px){.btn{height:48px;font-size:12px}}

/* Текст кнопки прокручивается (две копии — JS) */
.roll{display:inline-block;height:1.2em;overflow:hidden;vertical-align:top;line-height:1.2}
.roll>span{display:block;transition:transform .35s var(--ease)}
.roll>span+span{margin-top:.4em}  /* зазор, чтобы надстрочные знаки (Й, Ё) второй копии не выглядывали */
a:hover .roll>span,.btn:hover .roll>span{transform:translateY(calc(-100% - .4em))}
/* Стрелка в квадрате справа */
.arw{position:relative;width:36px;height:36px;border-radius:6px;overflow:hidden;flex:none;background:rgba(255,255,255,.18)}
.btn--outline .arw,.btn--light .arw{background:var(--tone)}
.btn--outline:hover .arw,.btn--light:hover .arw{background:rgba(255,255,255,.14)}
.arw svg{position:absolute;left:11px;top:11px;width:14px;height:14px;transition:transform .35s var(--ease)}
.arw svg+svg{transform:translate(-36px,36px)}
.btn:hover .arw svg:first-child{transform:translate(36px,-36px)}
.btn:hover .arw svg+svg{transform:none}
@media (max-width:959px){.arw{width:32px;height:32px}.arw svg{left:9px;top:9px}}

/* ---------- Шапка: плашки ---------- */
.header{position:sticky;top:0;z-index:50;padding:var(--frame) var(--frame) 0;pointer-events:none}
.header__in{display:flex;align-items:center;gap:8px;height:var(--header)}
.header__in>*{pointer-events:auto}
.pill{display:flex;align-items:center;height:100%;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px}
.logo{display:flex;align-items:center;flex:none;line-height:0}
.logo.pill{padding:0 22px}
.logo img{height:44px;width:auto}
.nav{gap:4px;padding:0 6px;margin-right:auto}
.nav a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:9px;font:500 13px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:background-color .25s,color .25s}
.nav a:hover{background:var(--tone)}
.header__right{display:flex;align-items:center;gap:8px;height:100%}
.header__phone{padding:0 20px;font:700 18px/1 var(--font-head);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;transition:color .25s}
.header__phone:hover{color:var(--muted)}
.header__cta{height:100%;padding-left:24px;border-radius:14px}
.burger{display:none;width:var(--header);height:var(--header);border:0;border-radius:14px;background:var(--ink);cursor:pointer;position:relative;padding:0;flex:none}
.burger span{position:absolute;left:30%;right:30%;height:2px;background:#fff;border-radius:2px}
.burger span:first-child{top:42%}.burger span:last-child{bottom:42%}
.header.is-scrolled .pill{box-shadow:0 8px 24px rgba(22,24,27,.06)}
@media (max-width:1199px){.nav a{padding:0 10px;font-size:12px}.header__phone{display:none}}
@media (max-width:959px){.nav{display:none}.header__phone{display:flex;margin-left:auto}.burger{display:block}.logo.pill{padding:0 16px}.logo img{height:38px}}
@media (max-width:639px){.header__phone,.header__cta{display:none}.header__right{margin-left:auto}.logo img{height:34px}.logo.pill{padding:0 14px}}

/* Меню на телефоне */
.mmenu{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;padding:var(--frame) calc(var(--frame) + 12px) 24px;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s;overflow-y:auto}
.mmenu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .55s var(--ease)}
.mmenu__top{display:flex;align-items:center;justify-content:space-between;height:var(--header);flex:none}
.mmenu__top .logo img{height:34px}
.mmenu__close{width:var(--header);height:var(--header);border:0;border-radius:14px;background:var(--ink);cursor:pointer;position:relative;margin-right:-12px}
.mmenu__close::before,.mmenu__close::after{content:"";position:absolute;left:32%;right:32%;top:50%;height:2px;background:#fff;transform:rotate(45deg)}
.mmenu__close::after{transform:rotate(-45deg)}
.mmenu nav{display:flex;flex-direction:column;gap:6px;margin:24px 0 32px}
.mmenu nav a{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--r);background:var(--tone);
  font:700 clamp(24px,6.5vw,34px)/1.1 var(--font-head);letter-spacing:-.03em;color:var(--ink);
  opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s var(--ease),color .25s}
.mmenu nav a small{font:500 12px/1 var(--font-mono);color:var(--accent);letter-spacing:.04em}
.mmenu.is-open nav a{opacity:1;transform:none;transition-delay:calc(.12s + var(--i)*.05s)}
.mmenu nav a:hover{color:var(--muted)}
.mmenu__bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.mmenu__phone{font:700 26px/1 var(--font-head);letter-spacing:-.02em;color:var(--ink)}
.mmenu__info{font-size:14px;color:var(--muted);margin-bottom:12px}
.mmenu .btn{align-self:stretch}

/* ---------- Фото: шторка и приближение ---------- */
.ph{position:relative;overflow:hidden;background:var(--ph);border-radius:var(--r)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.js .rv-ph{clip-path:inset(0 0 100% 0 round var(--r));transition:clip-path 1.2s var(--ease)}
.js .rv-ph.in{clip-path:inset(0 0 0 0 round var(--r))}
.zoom:hover .ph img{transform:scale(1.04)}
/* Наведение на фото: тёплый фирменный засвет в правом нижнем углу + рисунок «плюс + точка» (слои добавляет JS) */
.ph .pt,.ph .glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .55s var(--ease)}
.ph:hover .pt,.ph:hover .glow,.zoom:hover .pt,.zoom:hover .glow{opacity:1}
.ph .glow{background:radial-gradient(100% 80% at 100% 100%,rgba(234,106,42,.5) 0,rgba(217,68,28,.15) 38%,transparent 65%);mix-blend-mode:screen}
.ph .pt{-webkit-mask:radial-gradient(circle at 100% 100%,#000 0,#000 20%,transparent 60%);mask:radial-gradient(circle at 100% 100%,#000 0,#000 20%,transparent 60%)}
.ph .pt i{position:absolute;inset:0}
.ph .pt .x{background:linear-gradient(transparent 23.5px,rgba(255,255,255,.75) 23.5px 24.5px,transparent 24.5px) 0 0/48px 48px,linear-gradient(90deg,transparent 23.5px,rgba(255,255,255,.75) 23.5px 24.5px,transparent 24.5px) 0 0/48px 48px;
  -webkit-mask:radial-gradient(circle at 24px 24px,#000 6px,transparent 6.5px) 0 0/48px 48px;mask:radial-gradient(circle at 24px 24px,#000 6px,transparent 6.5px) 0 0/48px 48px}
.ph .pt .d{background:radial-gradient(circle,rgba(255,255,255,.75) 1.3px,transparent 1.8px) 24px 24px/48px 48px}
@media (hover:none){.ph .pt,.ph .glow{display:none}}  /* на телефонах наведения нет — слои не нужны */
/* Панель «вырастает» при прокрутке (масштаб — JS) */
.grow{transform-origin:50% 0;will-change:transform}
@media (prefers-reduced-motion:reduce){.js .rv-ph{clip-path:none}.grow{transform:none!important}}

/* ---------- 01 Первый экран ---------- */
.hero{margin:var(--frame);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;gap:var(--frame);
  height:clamp(640px,calc(100vh - var(--header) - var(--frame)*3),940px)}
.hero__main{background:var(--tone);border-radius:var(--r-lg);padding:clamp(28px,3vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-width:0}
.hero__text .lead{max-width:560px;margin-top:20px}
.hero__cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 22px 22px clamp(28px,3vw,56px);border-radius:var(--r-lg);
  background:var(--btn-grad);color:#fff;font:700 clamp(18px,1.4vw,26px)/1.1 var(--font-head);letter-spacing:-.02em;transition:filter .3s}
.hero__cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);opacity:0;transition:opacity .35s var(--ease)}
.hero__cta:hover::before{opacity:1}
.hero__cta-ic{width:56px;height:56px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease)}
.hero__cta-ic svg{width:20px;height:20px}
.hero__cta:hover .hero__cta-ic{transform:rotate(45deg)}
.hero__media{grid-column:2;grid-row:1/3;border-radius:var(--r-lg)}
.hero__media img{transform:scale(1.06);transition:transform 2.4s var(--ease)}
.hero__media.in img{transform:scale(1)}
.hero__tags{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hero__tags .chip{max-width:100%;height:auto;min-height:30px;padding-block:7px;white-space:normal;line-height:1.3}
@media (max-width:959px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto}
  .hero__media{grid-column:1;grid-row:auto;aspect-ratio:16/10}
  .hero__main{gap:32px}
}
@media (max-width:639px){
  .hero__media{aspect-ratio:4/3}
  .hero__tags .chip{height:auto;min-height:28px;padding:6px 10px;white-space:normal;line-height:1.3;flex:0 1 auto}
  .hero__cta{padding:16px 16px 16px 20px}
  .hero__cta-ic{width:48px;height:48px}
}

/* Бегущая строка */
.marq{overflow:hidden;padding:clamp(36px,3vw,56px) 0 clamp(28px,2.6vw,48px);white-space:nowrap}
.marq__track{display:inline-flex;will-change:transform}
.marq__item{display:inline-flex;align-items:center;gap:40px;padding-right:40px;font:700 clamp(20px,1.6vw,30px)/1 var(--font-head);letter-spacing:-.03em;color:var(--ink)}
.marq__logo{height:var(--h,32px);width:auto;max-width:128px;flex:none}
@media (max-width:639px){.marq__logo{height:calc(var(--h,32px)*.75);max-width:96px}}

/* ---------- 02 Почему ---------- */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.fcard{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);border-radius:var(--r);padding:28px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
/* Наведение: в свободном правом верхнем углу проявляется светло-серый рисунок «плюс + точка» и лёгкий тёплый засвет */
.fcard:not(.fcard--accent)::before,.fcard:not(.fcard--accent)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .55s var(--ease)}
.fcard:not(.fcard--accent)::before{  /* перекрестья: сетка, от которой оставлены узлы, и угол-градиент */
  background:linear-gradient(transparent 23.5px,rgba(22,24,27,.16) 23.5px 24.5px,transparent 24.5px) 0 0/48px 48px,linear-gradient(90deg,transparent 23.5px,rgba(22,24,27,.16) 23.5px 24.5px,transparent 24.5px) 0 0/48px 48px;
  -webkit-mask:radial-gradient(circle at 24px 24px,#000 6px,transparent 6.5px) 0 0/48px 48px,radial-gradient(circle at 100% 0,#000 0,#000 18%,transparent 58%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 24px 24px,#000 6px,transparent 6.5px) 0 0/48px 48px,radial-gradient(circle at 100% 0,#000 0,#000 18%,transparent 58%);
  mask-composite:intersect}
.fcard:not(.fcard--accent)::after{   /* точки + засвет */
  background:radial-gradient(circle,rgba(22,24,27,.18) 1.3px,transparent 1.8px) 24px 24px/48px 48px,radial-gradient(90% 70% at 100% 0,rgba(234,106,42,.14) 0,rgba(234,106,42,.04) 40%,transparent 65%);
  -webkit-mask:radial-gradient(circle at 100% 0,#000 0,#000 22%,transparent 62%);mask:radial-gradient(circle at 100% 0,#000 0,#000 22%,transparent 62%)}
.fcard:hover::before,.fcard:hover::after{opacity:1}
@media (hover:none){.fcard::before,.fcard::after{display:none}}
.fcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.fcard__ic{width:60px;height:60px;color:var(--accent);flex:none}
.fcard__ic *{vector-effect:non-scaling-stroke}  /* линия иконки всегда 1px при любом размере */
.fcard__fig{font:600 clamp(44px,3.6vw,72px)/.9 var(--font-head);letter-spacing:-.05em;color:var(--ink);text-align:right}
.fcard__fig small{font-size:.32em;letter-spacing:0;margin-left:4px;color:var(--muted);font-weight:600}
.fcard .h3{margin-bottom:10px}
.fcard p{font-size:15px;color:var(--text)}
.fcard--accent{background:var(--accent-grad);color:#fff}
.fcard .fcard__cta{font:700 clamp(22px,1.7vw,32px)/1.12 var(--font-head);letter-spacing:-.03em;color:#fff;margin-bottom:24px}
@media (max-width:1199px){.fcard{min-height:260px;padding:24px}}
@media (max-width:959px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.fcard__ic{width:52px;height:52px}.why{grid-template-columns:1fr}.fcard{min-height:0;gap:24px}.fcard p{font-size:14px}}

/* ---------- 03 Услуги ---------- */
.svc{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px var(--gap)}
.svc__card{display:flex;flex-direction:column;min-width:0}
.svc__card .ph{aspect-ratio:4/3}
.svc__card--main{grid-row:span 2}
.svc__card--main .ph{aspect-ratio:auto;flex:1;min-height:300px}
.svc__badge{position:absolute;top:14px;left:14px;z-index:2}
.svc__row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
.svc__title{transition:color .25s}
.svc__go{width:36px;height:36px;border-radius:8px;background:var(--tone);display:grid;place-items:center;flex:none;transition:background-color .3s,color .3s}
.svc__go svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.svc__card:hover .svc__title{color:var(--muted)}
.svc__card:hover .svc__go{background:var(--accent);color:#fff}
.svc__card:hover .svc__go svg{transform:rotate(45deg)}
.svc__price{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:14px;color:var(--muted)}
.price{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:6px;background:var(--tone);font:500 13px/1 var(--font-mono);color:var(--ink)}
@media (max-width:959px){
  .svc{grid-template-columns:1fr 1fr;gap:28px var(--gap)}
  .svc__card--main{grid-column:1/-1;grid-row:auto}
  .svc__card--main .ph{aspect-ratio:16/10;flex:none;min-height:0}
}
@media (max-width:479px){.svc{grid-template-columns:1fr}}

/* ---------- 04 Как мы работаем ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.step{background:var(--bg);border-radius:var(--r);padding:14px 14px 24px;display:flex;flex-direction:column}
.step__head{display:flex;justify-content:space-between;align-items:center;margin:4px 4px 14px}
.step__num{font:500 14px/1 var(--font-mono);color:var(--accent)}
.step .chip{background:var(--tone)}
.step .ph{aspect-ratio:3/4;border-radius:8px}
.step .h3{margin:18px 6px 8px}
.step p{margin:0 6px;font-size:14px;line-height:1.6}
@media (min-width:640px) and (max-width:1199px){
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 4px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 clamp(240px,34vw,300px);scroll-snap-align:start;scroll-margin-left:var(--gut)}
}
@media (max-width:639px){
  .steps{grid-template-columns:1fr}
  .step{display:grid;grid-template-columns:96px 1fr;column-gap:14px;padding:12px}
  .step .ph{grid-column:1;grid-row:1/4;aspect-ratio:3/4}
  .step__head{grid-column:2;margin:2px 0 8px}
  .step .h3{grid-column:2;margin:0 0 6px}
  .step p{grid-column:2;margin:0}
}

/* ---------- 05 До и после ---------- */
.case{display:none;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gap)}
.case.is-on{display:grid;animation:fadeIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ph);border-radius:var(--r);--x:50%;touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba__knob{position:absolute;top:50%;left:var(--x);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.ba__knob svg{width:22px;height:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba__lbl{position:absolute;top:14px;z-index:2;pointer-events:none}
.ba__lbl--b{left:14px}.ba__lbl--a{right:14px}
.case__card{background:var(--tone);border-radius:var(--r);padding:32px;display:flex;flex-direction:column}
.case__card .h3l{margin:16px 0 28px}
.spec{margin:0;padding:0}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.spec div:last-child{border-bottom:1px solid var(--line)}
.spec dt{color:var(--muted)}
.spec dd{margin:0;color:var(--ink);font:500 13px/1.5 var(--font-mono);text-align:right}
.cnav{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:28px}
.cnav__cnt{font:500 15px/1 var(--font-mono);color:var(--ink)}
.cnav__cnt span{color:var(--muted)}
.cnav__btns{display:flex;gap:6px}
.abtn{width:48px;height:48px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s,color .25s}
.abtn svg{width:16px;height:16px}
.abtn:hover{background:var(--ink);color:#fff}
@media (max-width:959px){.case{grid-template-columns:1fr}.case__card .h3l{margin-bottom:20px}}
@media (max-width:639px){.case__card{padding:22px 18px}.spec div{font-size:13px}.ba__knob{width:44px;height:44px;margin:-22px 0 0 -22px}}

/* ---------- 06 Отзывы: одна большая цитата ---------- */
.rv{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px}
.rv__side{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.rv__score{font:600 clamp(64px,6vw,112px)/.9 var(--font-head);letter-spacing:-.06em;color:var(--ink);display:flex;align-items:baseline;gap:.1em}
.rv__star{width:.72em;height:.7em;color:var(--accent);flex:none}  /* высота = высоте цифр (cap height Montserrat ≈ .7em), стоит на базовой линии */
.rv__cap{font-size:14px;color:var(--muted);margin-bottom:12px}
.rv__main{background:var(--bg);border-radius:var(--r);padding:clamp(24px,3vw,48px);display:flex;flex-direction:column;min-height:420px}
.rv__slide{display:none;flex-direction:column;gap:20px;flex:1}
.rv__slide.is-on{display:flex;animation:fadeIn .5s var(--ease)}
.rv__lead{font:700 clamp(24px,2.2vw,40px)/1.15 var(--font-head);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.rv__full{font-size:16px;color:var(--text);max-width:720px}
.rv__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.rv__meta b{font:700 17px/1.2 var(--font-head);color:var(--ink)}
.rv__meta>span:not(.rv__src){font-size:14px;color:var(--muted)}
.rv__src{margin-left:auto;font:500 11px/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rv__nav{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px}
.rv__bar{display:flex;gap:6px;flex:1;max-width:240px}
.rv__bar i{height:3px;flex:1;background:var(--line);border-radius:2px;transition:background-color .3s}
.rv__bar i.on{background:var(--accent)}
.rv .abtn{background:var(--tone)}
.rv .abtn:hover{background:var(--ink)}
@media (max-width:959px){.rv{grid-template-columns:minmax(0,1fr)}.rv__side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px}.rv__cap{margin:0}.rv__side .btn{margin-left:auto}}
@media (max-width:639px){.rv__side .btn{margin-left:0;width:100%}.rv__src{margin-left:0;width:100%}.rv__main{min-height:0}.rv__full{font-size:15px}}

/* ---------- 07 Экскурсии ---------- */
.tour{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,96px);align-items:center}
.tour__media{position:relative}
.tour__media .ph{aspect-ratio:4/5;border-radius:var(--r-lg)}
.badge{position:absolute;top:32px;right:-48px;z-index:2;width:150px;height:150px;border-radius:50%;background:var(--accent-grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 12px 32px rgba(217,68,28,.3)}
.badge b{font:700 28px/1 var(--font-head);letter-spacing:-.03em}
.badge small{margin-top:6px;font:500 11px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge svg{animation:none}}
.tour__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tour__body .h2{margin-bottom:28px}
.tour__text{display:flex;flex-direction:column;gap:14px;max-width:640px}
.stations{display:flex;flex-wrap:wrap;gap:6px;margin:32px 0 0;padding:0;list-style:none}
.stations li{flex:1 1 110px}
.stations li{display:flex;flex-direction:column;gap:18px;padding:14px;border-radius:10px;background:var(--tone);font:700 14px/1.2 var(--font-head);letter-spacing:-.01em;color:var(--ink)}
.stations li span{font:500 11px/1 var(--font-mono);color:var(--accent)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
@media (max-width:1199px){.tour{align-items:start}}
@media (max-width:959px){.badge{width:130px;height:130px;top:auto;bottom:20px;right:-24px}.badge b{font-size:24px}}
@media (max-width:639px){
  .tour{grid-template-columns:1fr;gap:56px}
  .badge{width:116px;height:116px;right:14px;bottom:-36px}.badge b{font-size:22px}.badge small{font-size:10px}
  .btns .btn{flex:1 1 auto}
}

/* ---------- 09 Контакты ---------- */
.contacts{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap)}
.form-card{background:var(--bg);border-radius:var(--r);padding:clamp(24px,2.6vw,48px)}
.form-card .h3l{margin-bottom:28px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field span{font:500 11px/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tone);font:400 16px/1.4 var(--font-text);color:var(--ink);transition:border-color .25s,background-color .25s;appearance:none}
.field textarea{height:auto;min-height:110px;padding:14px 16px;resize:vertical}
.field select{background:var(--tone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23D9441C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background-color:#fff}
.field input::placeholder,.field textarea::placeholder{color:#A9A49E}
.field.is-err input,.field.is-err select{border-color:var(--accent)}
.check{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
.check a{text-decoration:underline}
.form .btn{grid-column:1/-1;justify-self:stretch;margin-top:4px}
.form__msg{grid-column:1/-1;font-size:15px;color:var(--ink)}
.form__msg.is-err{color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form.is-sent>*:not(.form__msg){display:none}
.form.is-sent .form__msg{font:700 clamp(20px,1.5vw,26px)/1.2 var(--font-head);letter-spacing:-.02em}
.contacts__side{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.map{position:relative;height:420px;background:var(--tone-2);border-radius:var(--r);overflow:hidden;z-index:0}
/* Подложка карты в серых тонах под сайт */
.map .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.04)}
.map .leaflet-container{font-family:var(--font-text);background:var(--tone-2)}
.map .leaflet-control-zoom{border:0!important;box-shadow:none!important;margin:12px!important}
.map .leaflet-control-zoom a{width:40px;height:40px;line-height:38px;border:0!important;border-radius:8px!important;margin-bottom:4px;background:#fff;color:var(--ink);font:400 20px/40px var(--font-text)}
.map .leaflet-control-zoom a:hover{background:var(--ink);color:#fff}
.map .leaflet-control-attribution{font:500 10px/1.4 var(--font-mono);background:rgba(255,255,255,.8)!important;border-radius:6px 0 0 0}
/* Метка в стиле компании: пламя логотипа в оранжевом квадрате + подпись */
.pin{position:relative;display:flex;align-items:center;gap:10px;transform:translate(-26px,-50%);width:max-content}  /* центр квадрата — точно на адресе */
.pin__ic{position:relative;z-index:1;width:52px;height:52px;border-radius:14px;background:var(--btn-grad);display:grid;place-items:center;box-shadow:0 10px 24px rgba(217,68,28,.35)}
.pin__ic svg{width:26px;height:30px}
.pin__ic::before{content:"";position:absolute;inset:-8px;border-radius:18px;border:2px solid rgba(217,68,28,.35);animation:pinPulse 2.2s var(--ease) infinite}
@keyframes pinPulse{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
.pin__lbl{display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(22,24,27,.12);line-height:1.2}
.pin__lbl b{font:700 14px/1.2 var(--font-head);color:var(--ink)}
.pin__lbl small{font:500 11px/1.3 var(--font-mono);color:var(--muted)}
.leaflet-div-icon.pin-wrap{background:none;border:0}
@media (prefers-reduced-motion:reduce){.pin__ic::before{animation:none;opacity:0}}
.cinfo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cinfo__item{background:var(--bg);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.cinfo__item .chip{background:var(--tone)}
.cinfo__v{display:block;font:700 19px/1.25 var(--font-head);letter-spacing:-.015em;color:var(--ink)}
.cinfo__v2{margin-top:-6px}
a.cinfo__v:hover{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1199px){.form{grid-template-columns:1fr}.cinfo{grid-template-columns:1fr}.map{height:380px}}
@media (max-width:959px){.contacts{grid-template-columns:1fr}.form{grid-template-columns:1fr 1fr}.cinfo{grid-template-columns:repeat(3,minmax(0,1fr))}.map{height:340px}}
@media (max-width:639px){.form{grid-template-columns:1fr}.cinfo{grid-template-columns:1fr}.map{height:280px}.field input,.field select,.field textarea{font-size:15px}}

/* ---------- Подвал ---------- */
.footer{margin:var(--frame);border-radius:var(--r-lg);background:var(--tone)}
.footer__in{max-width:var(--max);margin:0 auto;padding:40px var(--gut) 32px}
.footer__top{display:flex;align-items:center;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.footer__top .logo img{height:44px}
.footer__nav{display:flex;flex-wrap:wrap;gap:4px;margin:0 auto}
.footer__nav a{display:flex;align-items:center;height:40px;padding:0 12px;border-radius:9px;font:500 13px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:background-color .25s,color .25s}
.footer__nav a:hover{background:var(--bg)}
.footer__phone{font:700 20px/1 var(--font-head);letter-spacing:-.01em;color:var(--ink)}
.footer__phone:hover{color:var(--muted)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;padding-top:24px;font:500 12px/1.5 var(--font-mono);color:var(--muted)}
.footer__bottom a:hover{color:var(--ink)}
@media (max-width:959px){.footer__top{flex-wrap:wrap;gap:20px}.footer__nav{order:3;width:100%;margin:0 -12px}.footer__phone{margin-left:auto}}
@media (max-width:639px){.footer__phone{margin-left:0;width:100%;order:2}.footer__bottom{flex-direction:column}}

/* ---------- Плашка cookie (включается вместе с Метрикой) ---------- */
.cookie{position:fixed;left:var(--frame);right:var(--frame);bottom:var(--frame);z-index:90;max-width:560px;background:var(--ink);color:#fff;border-radius:var(--r);padding:18px 18px 18px 22px;display:none;gap:20px;align-items:center;font-size:14px;line-height:1.5}
.cookie.is-on{display:flex}
.cookie a{text-decoration:underline}
.cookie .btn{height:42px;flex:none}
@media (max-width:479px){.cookie{flex-direction:column;align-items:flex-start}}

/* ---------- Большие мониторы (2K/4K): сайт не растягивается шире 1920 px ---------- */
@media (min-width:2000px){
  html{background:var(--bg)}
  body{max-width:1936px;margin:0 auto}
}
/* ---------- Невысокие ноутбуки (1366×768, 1280×720): первый экран компактнее ---------- */
@media (min-width:960px) and (max-height:820px){
  .hero{height:max(560px,calc(100vh - var(--header) - var(--frame)*3))}
  .hero__main{padding:28px 36px;gap:24px}
  .hero__text .lead{margin-top:14px}
  .hero__cta{padding-block:16px}
  .hero__cta-ic{width:48px;height:48px}
}
/* ---------- Узкие телефоны (320–360 px) ---------- */
@media (max-width:374px){
  :root{--gut:14px}
  .h1{font-size:28px}.h2{font-size:26px}
  .btn{padding-left:14px;letter-spacing:.03em}
  .logo img{height:30px}
}
/* ---------- Планшеты: крупнее заголовки ---------- */
@media (min-width:640px) and (max-width:959px){
  .h1{font-size:clamp(36px,6.2vw,54px)}
  .h2{font-size:clamp(30px,5vw,44px)}
}

/* =========================================================
   ВНУТРЕННИЕ СТРАНИЦЫ: политика конфиденциальности, 404
   ========================================================= */
.page-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gut)}
.page-top .logo img{height:40px}
.doc{max-width:820px;margin:0 auto;padding:var(--sec) var(--gut)}
.sec .doc{padding-block:0}
.doc h1,.doc h2{font-family:var(--font-head)}
.doc h1{font-size:clamp(28px,3vw,48px);line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:16px 0 12px}
.doc h2{font-size:clamp(19px,1.5vw,24px);line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:40px 0 12px}
.doc p,.doc li{font-size:16px;line-height:1.7}
.doc ul{padding-left:20px;margin:0 0 12px}
.doc a{color:var(--accent)}
.doc__date{color:var(--muted);font-size:14px}
.e404{min-height:calc(100vh - 100px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:40px var(--gut)}
.e404 b{font:700 clamp(96px,16vw,220px)/1 var(--font-head);letter-spacing:-.05em;color:var(--ink)}
.e404 p{max-width:420px;margin:0}