@font-face {
  font-family:'Yeseva One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/yesevaone-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Yeseva One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/yesevaone-400-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family:'Russo One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/russoone-rub.woff2') format('woff2');
  unicode-range:U+20BD;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/exo2-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/exo2-400-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/exo2-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/exo2-500-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/exo2-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/exo2-600-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/exo2-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Exo 2'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../assets/fonts/exo2-700-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Russo One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/russoone-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Russo One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/russoone-400-latin.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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  
  --navy-950:#0B1220; --navy-800:#141B2E;
  --blue-600:#068CD2; --blue-500:#2FA9E4;
  --white:#FFFFFF; --gray-50:#F5F7FA; --gray-200:#E3E7EE;
  --gray-500:#6B7280; --ink-900:#10141C; --gold-400:#FFB020;
  --patina-amber:#C4813A; --patina-dark:#1C1712;

  
  --dur-instant:100ms; --dur-fast:200ms; --dur-base:400ms;
  --dur-slow:700ms; --dur-cinematic:1600ms;
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);

  
  --lens-r-inner:90px; --lens-r-outer:150px;

  
  --font-display:'Russo One','Exo 2',sans-serif;
  --font-body:'Exo 2',system-ui,-apple-system,sans-serif;
  --font-retro:'Yeseva One',Georgia,serif;

  --shadow:0 2px 8px rgba(10,20,40,.05), 0 10px 28px rgba(10,20,40,.07);
  --shadow-up:0 4px 12px rgba(10,20,40,.08), 0 18px 44px rgba(10,20,40,.13);
  --radius:16px; --radius-btn:9px;
  --header-h:76px;
}

@view-transition { navigation: auto; }
::selection{background:rgba(6,140,210,.18)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0; color:var(--ink-900); background:var(--white);
  font-family:var(--font-body);
  font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blue-600)}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.14; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,2.1vw + .9rem,2.9rem); font-weight:400; letter-spacing:.01em}
h1,h2,h3{text-wrap:balance; overflow-wrap:break-word}
h2{font-size:clamp(1.35rem,1.1vw + .85rem,1.85rem); font-weight:400}
h3{font-size:clamp(1.02rem,.6vw + .85rem,1.2rem); font-weight:400}
.accent{color:var(--blue-600)}

.container{max-width:1320px; margin:0 auto; padding-inline:24px}
@media(min-width:1024px){.container{padding-inline:64px}}

.section{padding-block:60px}
.section--alt{background:var(--gray-50)}
.section__title{
  text-align:center; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em;
  display:flex; align-items:center; justify-content:center; gap:20px;
}
.section__title::before,.section__title::after{
  content:''; width:44px; height:2px; border-radius:2px; background:var(--blue-600); opacity:.85; flex-shrink:0;
}
.section__lead{text-align:center; color:var(--gray-500); max-width:620px; margin:0 auto 28px; font-size:.95rem}
.section__cta{text-align:center; margin-top:40px}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
@media(max-width:768px){
  .section{padding-block:44px}
  .section__title::before,.section__title::after{width:24px}
}

:focus-visible{outline:2px solid var(--blue-600); outline-offset:2px; border-radius:4px}

.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font:600 .95rem var(--font-body); padding:13px 26px; border-radius:var(--radius-btn);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast), color var(--dur-fast);
}
.btn--primary{background:var(--blue-600); color:#fff}
.btn--primary:hover{transform:translateY(-1px); background:var(--blue-500); box-shadow:0 8px 20px rgba(6,140,210,.25)}
.btn--outline{border-color:var(--blue-600); color:var(--blue-600); background:transparent; position:relative; overflow:hidden; isolation:isolate}
.btn--outline::before{content:''; position:absolute; inset:0; background:var(--blue-600); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease-out-soft); z-index:-1}
.btn--outline:hover{color:#fff}
.btn--outline:hover::before{transform:scaleX(1)}
.btn--amber{background:var(--patina-amber); color:#fff}
.btn--amber:hover{transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 8px 20px rgba(196,129,58,.28)}
.btn--sm{padding:9px 18px; font-size:.85rem; border-radius:8px}
.btn--roll svg{transition:transform var(--dur-fast) var(--ease-out-soft)}
.btn--roll:hover svg{transform:translateX(4px)}

.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--blue-600); z-index:200}

html.is-loading{overflow:hidden}
.preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:
    radial-gradient(560px 360px at 50% 42%, rgba(6,140,210,.08), transparent 70%),
    linear-gradient(180deg, #fff, #F0F7FC);
  clip-path:circle(141% at 50% 50%);
  transition:clip-path 700ms var(--ease-in-out), visibility 0s 750ms;
}
.preloader--done{clip-path:circle(0% at 50% 50%); visibility:hidden}
.preloader__inner{display:flex; flex-direction:column; align-items:center; gap:14px; transition:transform 500ms var(--ease-in-out), opacity 500ms}
.preloader--done .preloader__inner{transform:scale(.86); opacity:0}
.preloader__dial{position:relative; width:126px; height:126px}
.preloader__ring{width:100%; height:100%; transform:rotate(-90deg)}
.preloader__track{fill:none; stroke:#DFEDF6; stroke-width:6}
.preloader__barc{
  fill:none; stroke:var(--blue-600); stroke-width:6; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(6,140,210,.45));
}
.preloader__gear{
  position:absolute; inset:0; margin:auto; width:46px; height:46px; color:var(--blue-600);
  animation:plGear 5s linear infinite;
}
@keyframes plGear{to{transform:rotate(360deg)}}
.preloader__pct{font:400 1.05rem var(--font-display); color:var(--blue-600); letter-spacing:.08em; font-variant-numeric:tabular-nums}
.preloader__brand{font:400 1.6rem var(--font-display); letter-spacing:.06em; color:var(--ink-900); animation:plPulse 1.8s ease-in-out infinite}
.preloader__brand span{color:var(--blue-600)}
@keyframes plPulse{50%{opacity:.7}}
.preloader__line{
  width:190px; height:4px; border-radius:99px; position:relative; overflow:hidden;
  background:linear-gradient(90deg, rgba(6,140,210,.2), rgba(6,140,210,.45), rgba(6,140,210,.2));
}
.preloader__line::after{
  content:''; position:absolute; inset:0 auto 0 0; width:56px; border-radius:99px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation:plSweep 1.4s var(--ease-in-out) infinite;
}
@keyframes plSweep{from{transform:translateX(-60px)}to{transform:translateX(196px)}}
@media(prefers-reduced-motion:reduce){
  .preloader__gear,.preloader__brand,.preloader__line::after{animation:none}
}

.header{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--header-h);
  background:rgba(255,255,255); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-200);
  transition:box-shadow var(--dur-base) var(--ease-in-out);
}
.header--solid{box-shadow:0 6px 24px rgba(10,20,40,.08)}
.header__in{display:flex; align-items:center; gap:20px; height:100%}
/* Строка города стоит ровно под словом в логотипе: слева отступ на иконку,
   справа - до края букв. Доли взяты из самой картинки логотипа (слово занимает
   с 132 до 767 пикселя при ширине 800), поэтому строка тянется вместе с ним. */
.logo{
  position:relative; display:block; text-decoration:none; flex-shrink:0;
  padding-bottom:12px;                       /* место под строку города */
  --logo-word-start:16.5%; --logo-word-end:4.15%;
}
.logo__img{height:30px; width:auto; display:block}
.logo__city{
  position:absolute; bottom:0; left:var(--logo-word-start); right:var(--logo-word-end);
  display:flex; justify-content:space-between;
  font:600 .58rem/1 var(--font-body); text-transform:uppercase; color:var(--gray-500);
}
.logo__city i{font-style:normal}

.nav{display:flex; gap:0; margin-inline:auto}
.nav__link{
  font:600 .76rem var(--font-body); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink-900); text-decoration:none;
  padding:9px 11px; border-radius:8px; background:none; border:0; cursor:pointer;
  position:relative; display:inline-flex; align-items:center; gap:5px;
  transition:background-color var(--dur-fast), color var(--dur-fast);
}
.nav__link:hover{background:rgba(6,140,210,.08); color:var(--blue-600)}
.nav__chev{transition:transform var(--dur-fast) var(--ease-out-soft); color:var(--blue-600); flex-shrink:0}
.nav__item--drop{position:relative}
.nav__item--drop:hover .nav__chev,
.nav__item--drop:focus-within .nav__chev{transform:rotate(180deg)}
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:290px;
  background:#fff; border-radius:14px; box-shadow:var(--shadow-up); padding:10px;
  border:1px solid var(--gray-200);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft), visibility 0s var(--dur-fast);
}
.nav__item--drop:hover .dropdown, .nav__item--drop:focus-within .dropdown{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.dropdown a{
  display:block; padding:10px 14px; border-radius:8px; text-decoration:none;
  color:var(--ink-900); font:500 .92rem var(--font-body);
  opacity:0; transform:translateY(6px);
  transition:background-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.nav__item--drop:hover .dropdown a, .nav__item--drop:focus-within .dropdown a{opacity:1; transform:none}
.dropdown a:nth-child(1){transition-delay:0ms}.dropdown a:nth-child(2){transition-delay:40ms}
.dropdown a:nth-child(3){transition-delay:80ms}.dropdown a:nth-child(4){transition-delay:120ms}
.dropdown a:nth-child(5){transition-delay:160ms}.dropdown a:nth-child(6){transition-delay:200ms}
.dropdown a:nth-child(7){transition-delay:240ms}
.dropdown a:hover{background:var(--gray-50); color:var(--blue-600)}

.header__contact{display:flex; align-items:center; gap:10px; color:var(--ink-900); flex-shrink:0; position:relative}
.header__contact .dropdown{left:auto; right:0; min-width:310px}
.header__hours{display:flex; align-items:center; gap:4px; cursor:pointer}
.dropdown--phones a b{display:block; font:700 .95rem var(--font-body); color:var(--ink-900)}
.dropdown--phones a span{display:block; font:500 .76rem var(--font-body); color:var(--gray-500); margin-top:1px}
/* группа: несколько номеров одного подразделения и общая подпись под ними */
.phone-grp{padding:8px 14px 10px}
.phone-grp + .phone-grp{border-top:1px solid var(--gray-200)}
.phone-grp a{display:block; padding:2px 0; border-radius:6px}
.phone-grp a:hover b{color:var(--blue-600)}
.phone-grp > span{display:block; font:500 .78rem var(--font-body); color:var(--gray-500); margin-top:3px}
.dropdown__hours{padding:10px 14px 4px; font-size:.74rem; color:var(--gray-500); border-top:1px solid var(--gray-200); margin-top:6px}
.header__phone-ico{
  width:38px; height:38px; border-radius:50%; padding:9px; flex-shrink:0;
  background:rgba(6,140,210,.1); color:var(--blue-600);
  animation:phonePulse 3s ease-in-out infinite;
}
@keyframes phonePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.header__phone{font:700 .95rem var(--font-body); color:inherit; text-decoration:none; letter-spacing:.01em; white-space:nowrap}
.header__hours{font-size:.72rem; color:var(--gray-500)}
.header__cta{padding:11px 18px; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; border-radius:8px; white-space:nowrap}

.burger{display:none; background:none; border:0; width:44px; height:44px; cursor:pointer; padding:10px; flex-direction:column; justify-content:center; gap:5px}
.burger span{display:block; height:2px; background:var(--ink-900); border-radius:2px; transition:transform var(--dur-fast) var(--ease-in-out), opacity var(--dur-fast)}
.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)}

.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--navy-950);
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out-soft);
  padding:calc(var(--header-h) + 24px) 24px 24px; overflow:auto;
}
.mobile-menu--open{transform:none}
.mobile-menu__nav{display:flex; flex-direction:column; gap:6px}
.mobile-menu__nav > a{
  color:#fff; text-decoration:none; font:400 1.25rem var(--font-display); padding:11px 8px;
  text-transform:uppercase; letter-spacing:.03em;
  opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.mobile-menu--open .mobile-menu__nav > a{opacity:1; transform:none}
.mobile-menu__nav > a:nth-child(1){transition-delay:60ms}.mobile-menu__nav > a:nth-child(2){transition-delay:120ms}
.mobile-menu__nav > a:nth-child(3){transition-delay:180ms}.mobile-menu__nav > a:nth-child(4){transition-delay:240ms}
.mobile-menu__nav > a:nth-child(5){transition-delay:300ms}.mobile-menu__nav > a:nth-child(6){transition-delay:360ms}
.mobile-menu__nav > a:nth-child(7){transition-delay:420ms}.mobile-menu__nav > a:nth-child(8){transition-delay:480ms}
.mobile-menu__nav .btn{margin-top:16px; font-size:1rem}
.mobile-menu__phone{color:#fff !important; font:600 1.05rem var(--font-body) !important; opacity:.8; text-transform:none !important; letter-spacing:0 !important}

@media(max-width:1200px){
  .nav, .header__contact{display:none}
  .burger{display:flex}
  .header__cta{margin-left:auto}
}
@media(max-width:480px){
  .header__cta{display:none}
  .burger{margin-left:auto}
}

.hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + 22px); padding-bottom:30px;
  background:
    radial-gradient(1100px 560px at 82% 38%, rgba(6,140,210,.06), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
  display:flex; align-items:center;
}
.hero__in{display:grid; grid-template-columns:minmax(380px,.78fr) 1.5fr; gap:30px; align-items:center; width:100%}
.hero__title{
  margin-bottom:20px; font-family:var(--font-body); font-weight:800;
  letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(2rem,2.4vw + .9rem,3.15rem);
}
.hero__title .accent{font-family:var(--font-display); font-weight:400; letter-spacing:.025em}
.hero__line{display:block; opacity:0; transform:translateY(40px)}
.hero--loaded .hero__line{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft)}
.hero--loaded .hero__line:nth-child(2){transition-delay:120ms}
.hero--loaded .hero__line:nth-child(3){transition-delay:240ms}
.hero-brand{
  font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  display:inline-block; position:relative;
}
.hero-brand__a{color:var(--ink-900)}
.hero-brand__b{
  background:linear-gradient(105deg, #045E8F 0%, #068CD2 40%, #2FA9E4 60%, #068CD2 100%);
  background-size:220% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--blue-600);
}
.hero--loaded .hero-brand__b{animation:brandFlow 7s ease-in-out 2s infinite}
@keyframes brandFlow{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero__sub{color:var(--gray-500); max-width:480px; margin-bottom:26px; font-size:.98rem; opacity:0; transform:translateY(24px)}
.hero--loaded .hero__sub{opacity:1; transform:none; transition:all var(--dur-slow) var(--ease-out-soft) 460ms}
.hero__cta{display:flex; gap:13px; flex-wrap:wrap; margin-bottom:34px}
.hero__cta .btn{opacity:0}
.hero--loaded .hero__cta .btn{opacity:1; animation:heroIn var(--dur-slow) var(--ease-out-soft) backwards}
.hero--loaded .hero__cta .btn:nth-child(1){animation-delay:560ms}
.hero--loaded .hero__cta .btn:nth-child(2){animation-delay:640ms}
@keyframes heroIn{from{opacity:0; transform:translateY(20px)}}
.hero__badges{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,230px)); gap:16px 24px}
.hero__badges li{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:11px; align-items:center; justify-content:start; opacity:0; transform:translateY(18px)}
.hero--loaded .hero__badges li{opacity:1; transform:none; transition:all var(--dur-slow) var(--ease-out-soft)}
.hero--loaded .hero__badges li:nth-child(1){transition-delay:720ms}
.hero--loaded .hero__badges li:nth-child(2){transition-delay:790ms}
.hero--loaded .hero__badges li:nth-child(3){transition-delay:860ms}
.hero--loaded .hero__badges li:nth-child(4){transition-delay:930ms}
.hero__badges svg{
  grid-row:1/3; width:40px; height:40px; padding:9px; border-radius:50%;
  color:var(--blue-600); background:#fff; box-shadow:0 0 0 1.5px rgba(6,140,210,.35) inset, var(--shadow);
}
.hero__badges b{font:400 1.12rem/1.2 var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.hero__badges li > span{font-size:.78rem; color:var(--gray-500); line-height:1.3}

.hero__team{
  position:relative; opacity:0; transform:scale(1.04); will-change:transform;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite:intersect;
}
.hero--loaded .hero__team{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out-soft) 280ms, transform var(--dur-slow) var(--ease-out-soft) 280ms}
.hero__team img{width:100%; height:auto; display:block}

.lens{
  position:relative; aspect-ratio:1528/1029; cursor:crosshair;
  opacity:0; transform:scale(1.05);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(0deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite:intersect;
}
.hero--loaded .lens{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out-soft) 280ms, transform var(--dur-slow) var(--ease-out-soft) 280ms}
.lens img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none}
.lens__glossy{
  --mx:50%; --my:50%; --r1:0px; --r2:0px;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent var(--r1), black var(--r2));
  mask-image:radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent var(--r1), black var(--r2));
  will-change:-webkit-mask-image;
}
.lens__ring{
  position:absolute; width:calc(var(--lens-r-outer)*2); height:calc(var(--lens-r-outer)*2);
  border-radius:50%; pointer-events:none; left:0; top:0;
  transform:translate(-50%,-50%); opacity:0;
  box-shadow:0 0 10px 2px rgba(47,169,228,.55), inset 0 0 14px 2px rgba(47,169,228,.35);
  transition:opacity var(--dur-base) var(--ease-out-soft);
}
.lens--active .lens__ring{opacity:.75}
.lens__hint{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%); white-space:nowrap;
  padding:8px 14px; border-radius:999px;
  background:rgba(11,18,32,.72); color:#fff; font-size:.78rem; backdrop-filter:blur(6px);
  transition:opacity var(--dur-base);
}
.lens--active .lens__hint{opacity:0}

.hero__scroll{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--gray-200);
  background:#fff; color:var(--blue-600); cursor:pointer; display:grid; place-items:center;
  animation:scrollNudge 1.5s ease-in-out infinite; transition:opacity var(--dur-base);
}
@keyframes scrollNudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.hero__scroll--hidden{opacity:0; pointer-events:none}

@media(max-width:960px){
  .hero{min-height:0}
  .hero__in{grid-template-columns:1fr; gap:28px}
  .hero__badges{grid-template-columns:1fr 1fr}
  .hero__scroll{display:none}
}

.fork{padding-block:8px 0; position:relative; z-index:5}
.fork__in{display:grid; grid-template-columns:1fr 1fr; gap:24px; transform:translateY(-30px)}
.fork__card{
  display:flex; gap:16px; align-items:center; background:#fff; border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink-900);
  border:1px solid var(--gray-200);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.fork__card:hover{transform:translateY(-6px); box-shadow:var(--shadow-up)}
.fork__card > svg:first-child{
  color:var(--blue-600); flex-shrink:0; width:44px; height:44px; padding:10px;
  border-radius:12px; background:rgba(6,140,210,.08);
}
.fork__card h3{margin:0 0 3px; font-size:1.02rem}
.fork__card p{margin:0; font-size:.86rem; color:var(--gray-500)}
.fork__arr{margin-left:auto; color:var(--blue-600); flex-shrink:0; transition:transform var(--dur-fast) var(--ease-out-soft)}
.fork__card:hover .fork__arr{transform:translateX(4px)}
@media(max-width:820px){.fork__in{grid-template-columns:1fr; transform:none; padding-top:24px}}

.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:12px; margin-top:40px}
.bento__main{
  grid-column:1/3; grid-row:1/3; position:relative; border-radius:18px; overflow:hidden;
  background:var(--navy-800); cursor:crosshair; isolation:isolate;
}
.bento__main img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
  transition:opacity 230ms var(--ease-in-out);
}
.bento__main--swap img{opacity:0}
.bento__main--swap .bento__info{opacity:0}
.bento__info{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:44px 20px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(180deg, transparent, rgba(11,18,32,.85));
  transition:opacity 230ms var(--ease-in-out); pointer-events:none;
}
.bento__info h3{color:#fff; margin:0; font-size:1.15rem; text-shadow:0 1px 8px rgba(0,0,0,.5)}
.bento__info .btn{flex-shrink:0}
/* вся большая карточка - ссылка на активное направление */
.bento__main-link{position:absolute; inset:0; z-index:3}
.bento__main:hover .bento__info .btn{background:var(--blue-500); box-shadow:0 8px 20px rgba(6,140,210,.25)}
.bento__tile{
  display:block; position:relative; border:0; padding:0; border-radius:14px; overflow:hidden; cursor:pointer;
  background:var(--navy-800); text-align:left; isolation:isolate; text-decoration:none; color:inherit;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.bento__tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-up)}
.bento__tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-base) var(--ease-out-soft);
}
.bento__tile:hover img{transform:scale(1.07)}
.bento__tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.02) 30%, rgba(11,18,32,.8) 100%);
}
.bento__tile-icon{
  position:absolute; left:12px; top:12px; z-index:2; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:rgba(6,140,210,.92); color:#fff;
  box-shadow:0 4px 12px rgba(6,140,210,.4);
}
.bento__tile-name{
  position:absolute; left:12px; right:12px; bottom:11px; z-index:2;
  color:#fff; font:600 .78rem/1.3 var(--font-body); text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.bento__tile--wide{grid-column:span 2}
.bento__tile[hidden]{display:none}
/* последняя ячейка сетки направлений - призыв оставить заявку */
.bento__tile--cta{
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:18px 20px;
  background:linear-gradient(150deg, #045E8F, #068CD2 55%, #12A5EC); color:#fff;
}
.bento__tile--cta::after{display:none}
.bento__cta-ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); color:#fff; margin-bottom:2px;
}
.bento__cta-title{font:400 1.05rem/1.2 var(--font-display); letter-spacing:.01em}
.bento__cta-note{font:500 .78rem var(--font-body); color:rgba(255,255,255,.8)}
.bento__cta-arrow{position:absolute; right:14px; bottom:14px; color:#fff; opacity:.85; transition:transform var(--dur-fast) var(--ease-out-soft)}
.bento__tile--cta:hover .bento__cta-arrow{transform:translateX(4px)}
.bento__tile--active{box-shadow:0 0 0 2px var(--blue-600), var(--shadow)}
.bento__tile--active .bento__tile-icon{background:#fff; color:var(--blue-600)}
.bento__tile--active::after{background:linear-gradient(180deg, rgba(6,140,210,.15) 20%, rgba(11,18,32,.86) 100%)}
@media(max-width:1100px){
  .bento{grid-template-columns:repeat(3,1fr); grid-auto-rows:150px}
  .bento__main{grid-column:1/3}
}
@media(max-width:640px){
  .bento{grid-template-columns:1fr 1fr; grid-auto-rows:128px; gap:10px}
  .bento__main{grid-column:1/3; grid-row:1/3}
  .bento__info{padding:36px 14px 14px}
  .bento__info h3{font-size:.98rem}
}

.dirs{display:grid; grid-template-columns:repeat(8,1fr); gap:12px; margin-top:40px}
.dir-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:#fff; border:1.5px solid var(--blue-500); border-radius:14px;
  padding:18px 14px 16px; min-height:216px; text-decoration:none; color:var(--ink-900);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast);
}
.dir-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-up); border-color:var(--blue-600)}
.dir-tile__icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-600); color:#fff; box-shadow:0 4px 14px rgba(6,140,210,.35);
  transition:transform var(--dur-fast) var(--ease-out-soft);
}
.dir-tile:hover .dir-tile__icon{transform:scale(1.1) rotate(4deg)}
.dir-tile h3{
  margin:auto 0 0; font:700 .82rem/1.3 var(--font-body); color:var(--blue-600);
  text-wrap:balance;
}
.dir-tile__more{
  display:inline-flex; align-items:center; gap:5px;
  font:600 .74rem var(--font-body); color:var(--ink-900); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(16,20,28,.35);
}
.dir-tile__more svg{transition:transform var(--dur-fast) var(--ease-out-soft)}
.dir-tile:hover .dir-tile__more svg{transform:translateX(4px)}
@media(max-width:1100px){
  .dirs{grid-template-columns:repeat(4,1fr)}
  .dir-tile{min-height:180px}
}
@media(max-width:640px){
  .dirs{grid-template-columns:1fr 1fr; gap:10px}
  .dir-tile{min-height:150px; padding:14px 12px}
}
.dir-card{
  position:relative; border-radius:14px; overflow:hidden; text-decoration:none;
  aspect-ratio:3/4.6; display:block; background:var(--navy-800);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.dir-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-up)}
.dir-card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-base) var(--ease-out-soft);
}
.dir-card:hover .dir-card__img{transform:scale(1.06)}
.dir-card__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 15px; gap:5px;
  background:linear-gradient(180deg, rgba(11,18,32,.05) 30%, rgba(11,18,32,.62) 62%, rgba(11,18,32,.92) 100%);
  transition:background var(--dur-base);
}
.dir-card:hover .dir-card__overlay{
  background:linear-gradient(180deg, rgba(11,18,32,.14) 14%, rgba(11,18,32,.68) 52%, rgba(11,18,32,.94) 100%);
}
.dir-card__icon{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-600); color:#fff; margin-bottom:5px;
  box-shadow:0 4px 14px rgba(6,140,210,.45);
}
.dir-card__overlay h3{color:#fff; font-size:1rem; margin:0; line-height:1.2}
.dir-card__overlay p{color:rgba(255,255,255,.72); font-size:.76rem; line-height:1.4; margin:0}
.dir-card__more{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font:600 .8rem var(--font-body); color:#fff;
}
.dir-card__more svg{transition:transform var(--dur-fast) var(--ease-out-soft)}
.dir-card:hover .dir-card__more svg{transform:translateX(4px)}

.services{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.service{
  position:relative; background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  padding:22px 20px 20px; text-align:left; overflow:hidden; isolation:isolate;
  cursor:pointer; font-family:var(--font-body);
  display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; column-gap:16px; align-items:center;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast);
}
.service::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(340px 160px at 110% -20%, rgba(6,140,210,.09), transparent 70%),
    linear-gradient(180deg, #fff, #FAFBFD);
  opacity:0; transition:opacity var(--dur-base);
}
.service::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--blue-600), var(--blue-500));
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out-soft);
}
.service:hover,.service:focus-visible{transform:translateY(-5px); box-shadow:var(--shadow-up); border-color:transparent}
.service:hover::before,.service:hover::after{opacity:1; transform:none}
.service__icon{
  grid-row:1/3; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  color:var(--blue-600); background:linear-gradient(160deg, rgba(6,140,210,.12), rgba(47,169,228,.05));
  box-shadow:0 0 0 1px rgba(6,140,210,.14) inset;
  transition:transform var(--dur-fast) var(--ease-out-soft), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.service:hover .service__icon{
  transform:scale(1.08) rotate(3deg); color:#fff;
  background:linear-gradient(160deg, var(--blue-500), var(--blue-600)); box-shadow:0 6px 16px rgba(6,140,210,.4);
}
.service b{display:block; font:600 .9rem/1.3 var(--font-body)}
.service span{
  justify-self:start; margin-top:5px; font:400 .8rem var(--font-display); letter-spacing:.03em;
  color:var(--blue-600); background:rgba(6,140,210,.08); padding:3px 10px; border-radius:999px;
}
@media(max-width:1100px){.services{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .services{gap:10px}
  .service{
    grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:start;
    padding:16px 14px 14px; row-gap:8px;
  }
  .service__icon{grid-row:auto; width:42px; height:42px; border-radius:11px}
  .service__icon svg{width:22px; height:22px}
  .service b{font-size:.82rem}
  .service span{margin-top:0; font-size:.74rem}
}

/* воздух над и под синей плашкой одинаковый: снизу иначе вплотную подходит
   серый фон следующей секции */
.stats{--stats-gap:10px; padding-block:var(--stats-gap)}
.stats__in{
  background:linear-gradient(150deg, #045E8F, #068CD2 55%, #12A5EC); color:#fff; border-radius:20px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  padding:38px 28px; position:relative; overflow:hidden; isolation:isolate;
}
.stats__in::before{
  content:''; position:absolute; right:-70px; top:-90px; width:240px; height:240px; border-radius:50%;
  border:44px solid rgba(255,255,255,.07); z-index:-1; pointer-events:none;
}
.stats__in::after{
  content:''; position:absolute; left:-90px; bottom:-120px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); z-index:-1; pointer-events:none;
}
.stat{
  position:relative; text-align:center; padding:6px 8px; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.stat + .stat::before{
  content:''; position:absolute; left:0; top:12%; height:76%; width:1px; background:rgba(255,255,255,.28);
  transform:scaleY(0); transform-origin:top;
}
.stats--seen .stat + .stat::before{transform:scaleY(1); transition:transform var(--dur-slow) var(--ease-out-soft)}
.stat svg{color:#CFEFFF}
.stat b{font:400 1.7rem/1.1 var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:.02em}
.stat > span{font-size:.76rem; color:rgba(255,255,255,.82); line-height:1.35}
@media(max-width:960px){.stats__in{grid-template-columns:repeat(3,1fr); gap:22px 8px}.stat:nth-child(4)::before{display:none}}
@media(max-width:560px){.stats__in{grid-template-columns:repeat(2,1fr)}.stat + .stat::before{display:none}}

.process{position:relative; margin-top:44px}
.process__line{position:absolute; top:-16px; left:0; width:100%; height:40px; opacity:0; pointer-events:none}
.process__steps{
  list-style:none; margin:0; padding:0; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
  counter-reset:step;
}
.step{
  position:relative; background:#fff; border:1px solid var(--gray-200); border-radius:14px;
  padding:20px 16px 18px; overflow:hidden; counter-increment:step;
  transition:box-shadow var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.step::after{
  content:counter(step, decimal-leading-zero);
  position:absolute; right:8px; top:-4px; z-index:0;
  font:400 3.2rem/1 var(--font-display); color:var(--blue-600); opacity:.07;
}
.step__num{
  position:relative; z-index:1;
  width:46px; height:46px; margin-bottom:12px; border-radius:12px; display:grid; place-items:center;
  background:rgba(6,140,210,.09); color:var(--blue-600);
  transform:scale(0);
}
.step--on .step__num{transform:scale(1); transition:transform var(--dur-base) var(--ease-bounce)}
.step:hover .step__num svg{animation:stepWiggle .5s var(--ease-bounce)}
@keyframes stepWiggle{30%{transform:rotate(-8deg) scale(1.1)}70%{transform:rotate(6deg)}}
.step h3{font-size:.92rem; margin-bottom:3px; position:relative; z-index:1; opacity:0; transform:translateY(12px)}
.step p{font-size:.75rem; color:var(--gray-500); margin:0; position:relative; z-index:1; opacity:0; transform:translateY(12px)}
.step--on h3,.step--on p{opacity:1; transform:none; transition:all var(--dur-base) var(--ease-out-soft) 120ms}
@media(max-width:1100px){.process__steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.process__steps{grid-template-columns:1fr 1fr; gap:10px}}

.filters{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:32px; position:relative}
.filter{
  font:600 .84rem var(--font-body); padding:9px 18px; border-radius:999px; border:1px solid var(--gray-200);
  background:#fff; color:var(--ink-900); cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-in-out), color var(--dur-base) var(--ease-in-out), border-color var(--dur-base);
}
.filter:hover{border-color:var(--blue-500); color:var(--blue-600)}
.filter--active{background:var(--blue-600); border-color:var(--blue-600); color:#fff}
.filter--active:hover{color:#fff}

.works-row-wrap{position:relative}
.works-row{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 20px; scrollbar-width:thin; cursor:grab;
}
.works-row--grabbing{cursor:grabbing; scroll-snap-type:none}
.works-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:var(--blue-600);
  box-shadow:var(--shadow-up); cursor:pointer; display:grid; place-items:center;
  transition:opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out-soft);
}
.works-nav:hover{transform:translateY(-50%) scale(1.08)}
.works-nav--prev{left:-14px}
.works-nav--next{right:-14px}
.works-nav--off{opacity:0; pointer-events:none}

.work-card{
  flex:0 0 316px; scroll-snap-align:start; border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); position:relative;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-in-out);
}
.work-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-up)}
.work-card--out{opacity:0; transform:scale(.94)}
.work-card--in{animation:cardIn var(--dur-base) var(--ease-out-soft) backwards}
@keyframes cardIn{from{opacity:0; transform:scale(.94) translateY(10px)}}
.work-card__title{padding:13px 16px; font:600 .88rem var(--font-body); margin:0}

.ba__stage{position:relative; aspect-ratio:4/5; overflow:hidden; touch-action:pan-y; user-select:none}
.works-row .ba__stage{cursor:ew-resize}
.ba__stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; pointer-events:none}
.ba__after{opacity:var(--ba-fade,0); transition:opacity 800ms var(--ease-in-out)}
.ba--drag .ba__after{opacity:1; transition:none; clip-path:polygon(var(--split,50%) 0, 100% 0, 100% 100%, var(--split,50%) 100%)}
.ba__divider{
  position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.4); opacity:0; transition:opacity var(--dur-fast);
  transform:translateX(-1px);
}
.ba--drag .ba__divider{opacity:1}
.ba__handle{
  position:absolute; top:50%; left:1px; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:var(--shadow-up);
  display:grid; place-items:center;
}
.ba__handle::before{content:'◂ ▸'; font-size:.7rem; color:var(--blue-600); letter-spacing:1px}
@media(hover:none){
  .ba__handle{width:48px; height:48px}
}
.ba--amber .ba__handle::before{color:var(--patina-amber)}
.ba__tag{
  position:absolute; bottom:12px; padding:5px 13px; border-radius:7px;
  font:400 .68rem var(--font-display); letter-spacing:.12em; text-transform:uppercase;
  background:rgba(11,18,32,.72); color:#fff; backdrop-filter:blur(4px);
}
.ba__tag--before{left:12px}
.ba__tag--after{right:12px; background:rgba(6,140,210,.85)}

.work-card--reel .work-card__poster{position:relative; aspect-ratio:4/5; overflow:hidden}
.work-card--reel img{width:100%; height:100%; object-fit:cover}

.playbtn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(6,140,210,.92); color:#fff; display:grid; place-items:center;
  transition:transform var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast);
}
.playbtn:hover{transform:translate(-50%,-50%) scale(1.08); background:var(--blue-500)}
.playbtn::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(6,140,210,.8);
  animation:playRing 2s ease-out infinite;
}
@keyframes playRing{from{transform:scale(1); opacity:1}to{transform:scale(1.6); opacity:0}}
.playbtn--overlay{background:rgba(11,18,32,.75)}

.promos{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px}
.promo{
  border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow);
  display:flex; flex-direction:column; position:relative;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.promo:hover{transform:translateY(-6px); box-shadow:var(--shadow-up)}
.promo__imgwrap{position:relative; overflow:hidden; aspect-ratio:16/9; order:-1}
.promo__imgwrap img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-base) var(--ease-out-soft);
}
.promo:hover .promo__imgwrap img{transform:scale(1.05)}
.promo__body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1}
.promo__body h3{font-size:.98rem; margin:0; line-height:1.3}
.promo__price{font:400 1.35rem var(--font-display); color:var(--blue-600); letter-spacing:.02em}
.promo__note{font-size:.8rem; color:var(--gray-500); margin:0; flex:1}
.promo__body .btn{align-self:flex-start; margin-top:6px}
.promo__badge{
  position:absolute; top:12px; left:12px; z-index:2; padding:4px 12px; border-radius:999px;
  background:#E22B2B; color:#fff;
  font:400 .66rem var(--font-display); text-transform:uppercase; letter-spacing:.09em;
  animation:badgePulse 2s ease-in-out infinite;
}
.promo--banner{position:relative; display:block; overflow:hidden; min-height:340px}
.promo--banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform var(--dur-base) var(--ease-out-soft);
}
.promo--banner:hover img{transform:scale(1.04)}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.promo--dark{
  background:var(--navy-950); color:#fff; justify-content:space-between; padding:24px 22px;
  overflow:hidden; isolation:isolate;
}
.promo--dark::before{
  content:''; position:absolute; inset:-40% auto auto -30%; width:80%; height:180%;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform:translateX(-120%) rotate(8deg); z-index:1; pointer-events:none;
}
.promo--dark:hover::before{transform:translateX(240%) rotate(8deg); transition:transform 500ms var(--ease-in-out)}
.promo--dark h3{font-size:1.1rem}
.promo--dark ul{list-style:none; margin:0 0 16px; padding:0; font-size:.8rem; color:rgba(255,255,255,.7); display:grid; gap:8px}
.promo--dark .promo__percent{position:absolute; right:-20px; bottom:-24px; width:130px; height:130px; color:rgba(47,169,228,.22); animation:spinSlow 8s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@media(max-width:1140px){.promos{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.promos{grid-template-columns:1fr}}

.patina{position:relative; background:var(--patina-dark); color:#F4EDE3; overflow:hidden}
.patina h2,.patina h3{font-family:var(--font-retro); font-weight:400}
.patina__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:overlay; z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:grainShift 9s steps(6) infinite;
}
@keyframes grainShift{0%,100%{transform:translate(0,0)}50%{transform:translate(-4%,3%)}}
.patina__hero{position:relative; min-height:560px; display:flex; align-items:flex-end}
.patina__hero-img{position:absolute; inset:0; overflow:hidden}
.patina__hero-img img{
  width:100%; height:100%; object-fit:cover;
  filter:sepia(.85) saturate(.5) contrast(.95);
  transition:filter 1.6s var(--ease-in-out);
  transform:scale(1.06);
  animation:patinaDrift 18s ease-in-out infinite alternate;
}
@keyframes patinaDrift{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.06) translateX(-1.6%)}}
.patina__photo--color img{filter:none}
.patina__hero-img::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(22,17,12,.72) 0%, rgba(22,17,12,.42) 45%, rgba(22,17,12,.18) 100%),
    linear-gradient(180deg, rgba(28,23,18,.55) 0%, rgba(28,23,18,.18) 36%, rgba(28,23,18,.86) 76%, var(--patina-dark) 100%);
}
.patina__hero-in{position:relative; z-index:2; padding-bottom:56px; width:100%}
.eyebrow{
  display:inline-block; font:400 .68rem var(--font-display); letter-spacing:.26em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; margin-bottom:18px;
}
.eyebrow--amber{background:rgba(28,23,18,.55); color:#E8B478; border:1px solid rgba(196,129,58,.55); backdrop-filter:blur(4px)}
.patina__title{
  font-family:var(--font-retro); font-weight:400;
  font-size:clamp(3rem,6.4vw,5.4rem); letter-spacing:.1em; text-transform:uppercase;
  color:#F4EDE3; margin:0 0 6px; text-shadow:0 2px 28px rgba(0,0,0,.55); line-height:1.05;
}
.patina__flourish{
  width:150px; height:11px; margin:8px 0 16px; position:relative; overflow:visible;
}
.patina__flourish::before,.patina__flourish::after{
  content:''; position:absolute; left:0; right:0; height:1.5px; background:linear-gradient(90deg, var(--patina-amber), rgba(196,129,58,0));
}
.patina__flourish::before{top:0}
.patina__flourish::after{top:6px; width:62%}
.patina__sub{color:#F4EDE3; max-width:540px; margin:0 0 22px; font-size:1.02rem; text-shadow:0 1px 10px rgba(0,0,0,.65)}
.patina__badges{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.patina__badges li{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid rgba(196,129,58,.55); border-radius:999px; color:#F4EDE3;
  font:500 .82rem var(--font-body); background:rgba(28,23,18,.45); backdrop-filter:blur(4px);
  transform:scale(0);
}
.patina--badges-on .patina__badges li{transform:scale(1); transition:transform var(--dur-base) var(--ease-bounce)}
.patina--badges-on .patina__badges li:nth-child(2){transition-delay:70ms}
.patina--badges-on .patina__badges li:nth-child(3){transition-delay:140ms}
.patina--badges-on .patina__badges li:nth-child(4){transition-delay:210ms}
.patina--badges-on .patina__badges li:nth-child(5){transition-delay:280ms}
.patina__badges svg{color:var(--patina-amber)}
.patina__cta-row{display:flex; gap:14px; flex-wrap:wrap}
.btn--ghost{border:1.5px solid rgba(244,237,227,.4); color:#F4EDE3; background:rgba(28,23,18,.35); backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:#E8B478; color:#E8B478; transform:scale(1.02)}
.btn--amber{background:var(--patina-amber); color:#fff}

.patina__stamp{
  position:absolute; right:110px; bottom:72px; z-index:2; width:170px; height:170px;
  color:#C4813A; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
}
.patina__stamp-rot{transform-origin:80px 80px; animation:stampSpin 32s linear infinite}
@keyframes stampSpin{to{transform:rotate(360deg)}}
.patina__stamp-text{
  font:400 11.5px var(--font-retro); letter-spacing:.09em; text-transform:uppercase;
  fill:#E8B478;
}
@media(max-width:1100px){.patina__stamp{display:none}}
@media(prefers-reduced-motion:reduce){.patina__stamp-rot{animation:none}}

.patina__body{position:relative; z-index:2; padding-block:72px 88px}

.patina__story{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; margin-bottom:80px}
.patina__overline{
  font:400 .7rem var(--font-display); letter-spacing:.26em; text-transform:uppercase;
  color:var(--patina-amber); margin-bottom:14px; display:flex; align-items:center; gap:14px;
}
.patina__overline::before{content:''; width:34px; height:1px; background:var(--patina-amber)}
.patina__story h3{font-size:clamp(1.5rem,1.8vw,2.1rem); line-height:1.3; margin-bottom:18px; color:#F4EDE3}
.patina__story-text{color:rgba(244,237,227,.68); font-size:.95rem; line-height:1.75; margin-bottom:28px; max-width:480px}
.patina__facts{display:grid; grid-template-columns:repeat(3,auto); gap:12px 36px; justify-content:start; margin-bottom:30px}
.patina__fact b{display:block; font:400 1.7rem var(--font-retro); color:#E8B478; line-height:1.15}
.patina__fact span{font-size:.76rem; color:rgba(244,237,227,.55); line-height:1.35; display:block; max-width:120px}
.patina__stack{position:relative; min-height:560px}
.patina__polaroid{
  position:absolute; background:#F4EDE3; padding:10px 10px 34px; border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base);
}
.patina__polaroid img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block}
.patina__polaroid figcaption{
  position:absolute; left:6px; right:6px; bottom:8px; text-align:center;
  font:400 .74rem var(--font-retro); color:#6B5B45; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.patina__polaroid--a{width:58%; left:0; top:28%; transform:rotate(-3.5deg); z-index:1}
.patina__polaroid--b{width:54%; right:0; bottom:0; transform:rotate(2.5deg); z-index:2}
.patina__polaroid--c{width:46%; right:4%; top:-2%; transform:rotate(3.5deg); z-index:0}
.patina__polaroid--d{width:44%; left:2%; top:-4%; transform:rotate(-4deg); z-index:0}
.patina__polaroid:hover{transform:rotate(0) scale(1.03); z-index:5; box-shadow:0 32px 80px rgba(0,0,0,.6)}

.film-strip{
  position:relative; background:#0F0B07; border-radius:14px; padding:34px 26px; margin-bottom:72px;
  border:1px solid rgba(196,129,58,.2);
}
.film-strip::before,.film-strip::after{
  content:''; position:absolute; left:22px; right:22px; height:9px; border-radius:2px;
  background-image:repeating-linear-gradient(90deg, rgba(244,237,227,.16) 0 15px, transparent 15px 30px);
}
.film-strip::before{top:12px}
.film-strip::after{bottom:12px}
.patina__media-title{
  text-align:center; color:#E8B478; font-size:1.25rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.patina__media-title::before,.patina__media-title::after{
  content:''; width:38px; height:1px; background:rgba(196,129,58,.55); flex-shrink:0;
}
.patina-reels{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 12px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.patina-reels .reel-card{flex:0 0 236px; scroll-snap-align:start}
.reel-card{
  position:relative; border-radius:10px; overflow:hidden; border:0; padding:0; cursor:pointer;
  aspect-ratio:9/14; background:#000; text-align:left;
  box-shadow:0 10px 32px rgba(0,0,0,.4);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.reel-card:hover{transform:translateY(-6px) scale(1.015); box-shadow:0 18px 48px rgba(0,0,0,.55)}
.reel-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-base) var(--ease-out-soft)}
.reel-card:hover img{transform:scale(1.05)}
.reel-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(15,11,7,.85) 100%);
}
.reel-card__play{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:2;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(196,129,58,.92); color:#fff;
  transition:transform var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast);
}
.reel-card:hover .reel-card__play{transform:translate(-50%,-50%) scale(1.1); background:var(--patina-amber)}
.reel-card__play::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(196,129,58,.8);
  animation:playRing 2s ease-out infinite;
}
.reel-card__title{
  position:absolute; left:14px; right:14px; bottom:13px; z-index:2;
  color:#F4EDE3; font:500 .88rem var(--font-body); line-height:1.3;
}
.patina__ba-title{
  text-align:center; color:#E8B478; font-size:1.25rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:26px;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.patina__ba-title::before,.patina__ba-title::after{
  content:''; width:38px; height:1px; background:rgba(196,129,58,.55); flex-shrink:0;
}
.patina__ba{max-width:720px; margin:0 auto}
.patina__ba .ba__stage{aspect-ratio:16/10; border-radius:var(--radius); cursor:ew-resize}
.patina__quote{
  max-width:760px; margin:72px auto 0; text-align:center; position:relative; padding-top:34px;
}
.patina__quote::before{
  content:'\201C'; position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  font:400 5rem/1 var(--font-retro); color:var(--patina-amber); opacity:.85;
}
.patina__quote p{font:400 1.35rem/1.5 var(--font-retro); color:#F4EDE3; margin:0 0 14px}
.patina__quote cite{font:500 .82rem var(--font-body); color:rgba(244,237,227,.55); font-style:normal; letter-spacing:.08em; text-transform:uppercase}
.patina .section__cta{margin-top:48px}
@media(max-width:900px){
  .patina__hero-img::after{background:linear-gradient(180deg, rgba(22,17,12,.78) 0%, rgba(22,17,12,.55) 40%, rgba(22,17,12,.9) 78%, var(--patina-dark) 100%)}
  .patina__hero{min-height:460px}
  .patina__story{grid-template-columns:1fr; gap:40px}
  .patina__stack{min-height:480px; max-width:420px}
  .patina-reels .reel-card{flex-basis:46%}
  .patina__facts{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .patina-reels{
    gap:12px; margin-inline:-26px; padding:4px 26px 12px;
    scrollbar-width:none; scroll-snap-type:x mandatory;
  }
  .patina-reels::-webkit-scrollbar{display:none}
  .patina-reels .reel-card{flex-basis:76%; scroll-snap-align:center}
}

/* Фон-паттерн: плитка 860px не бесшовная по вертикали, поэтому не повторяем её
   вниз (иначе посреди секции идёт ряд обрезанных иконок), выравниваем по верху
   и гасим к низу маской - обрезанного края не видно на любой высоте секции. */
#parts{--parts-tile:860px; --parts-tile-h:574px; --parts-fade:96px; position:relative; overflow:hidden; background:#fff}
#parts::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../assets/img/banners/bg-parts.webp') center top/var(--parts-tile) repeat-x;
  opacity:.22;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--parts-fade), #000 calc(var(--parts-tile-h) * .6), transparent var(--parts-tile-h));
          mask-image:linear-gradient(180deg, transparent 0, #000 var(--parts-fade), #000 calc(var(--parts-tile-h) * .6), transparent var(--parts-tile-h));
}
#parts > *{position:relative; z-index:1}
@media(max-width:560px){#parts{--parts-tile:560px; --parts-tile-h:374px; --parts-fade:64px}}
#parts .parts{
  background:#fff; border:1px solid var(--gray-200); border-radius:20px; padding:28px;
  box-shadow:var(--shadow);
}
.parts__slider{aspect-ratio:1/1; overflow:hidden}
.parts__slider img{aspect-ratio:auto}
.parts__slider .parts__slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 650ms var(--ease-in-out);
}
.parts__slider .parts__slide--active{opacity:1}
.parts__dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:7px; justify-content:center; z-index:2}
.parts__dot{
  width:8px; height:8px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.6); box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:width var(--dur-base) var(--ease-in-out), background-color var(--dur-base);
}
.parts__dot--active{width:22px; background:#fff}
.parts{display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:28px; align-items:center; margin-top:40px}
.parts__photo{margin:0; border-radius:14px; overflow:hidden; position:relative; opacity:0; aspect-ratio:1/1}
.parts__photo img{width:100%; height:100%; object-fit:cover}
.parts__photo--left{transform:translateX(-56px)}
.parts__photo--right{transform:translateX(56px)}
.parts--seen .parts__photo{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft)}
.parts__list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.parts__list li{display:flex; gap:13px; align-items:flex-start; font:600 .98rem var(--font-body); opacity:0; transform:translateY(14px)}
.parts--seen .parts__list li{opacity:1; transform:none; transition:all var(--dur-base) var(--ease-out-soft)}
.parts--seen .parts__list li:nth-child(2){transition-delay:80ms}
.parts--seen .parts__list li:nth-child(3){transition-delay:160ms}
.parts--seen .parts__list li:nth-child(4){transition-delay:240ms}
.parts--seen .parts__list li:nth-child(5){transition-delay:320ms}
.parts__check{
  flex-shrink:0; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(6,140,210,.1); color:var(--blue-600); transform:scale(0) rotate(45deg);
}
.parts--seen .parts__check{transform:scale(1) rotate(0); transition:transform var(--dur-base) var(--ease-bounce) 150ms}
.parts__contact{font:500 .85rem var(--font-body) !important; color:var(--gray-500)}
.tilt{transition:transform 150ms ease-out}
@media(max-width:900px){
  .parts{grid-template-columns:1fr 1fr}
  .parts__list{grid-column:1/3; order:-1}
}
@media(max-width:560px){.parts{grid-template-columns:1fr; padding:20px}.parts__list{grid-column:auto}}

.brands{padding-block:64px 84px}
.marquee{
  overflow:hidden; margin-top:36px;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__track{display:flex; gap:14px; width:max-content; animation:marquee 34s linear infinite; padding:6px 0}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.brand{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-width:150px; height:76px; padding:0 28px;
  border:1px solid var(--gray-200); border-radius:12px; background:#fff;
  transition:border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast);
}
.brand:hover{border-color:transparent; transform:translateY(-3px); box-shadow:var(--shadow)}
.brand img{
  height:38px; width:auto; max-width:96px; object-fit:contain;
  filter:grayscale(1) opacity(.55); transition:filter var(--dur-fast), transform var(--dur-fast) var(--ease-out-soft);
}
.brand:hover img{filter:none; transform:scale(1.08)}
.brand--text{font:400 1rem var(--font-display); color:var(--gray-500); letter-spacing:.06em; white-space:nowrap}
.brand--text:hover{color:var(--ink-900)}

.rating-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; margin:0 auto 40px}
.rating-tile{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--gray-200);
  border-radius:14px; padding:16px 20px; text-decoration:none; color:var(--ink-900);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast);
}
.rating-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.rating-tile__dot{
  min-width:42px; height:42px; padding:0 8px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
  background:var(--gray-50); border:1px solid var(--gray-200);
}
.rating-tile__dot img{display:block; max-height:26px; width:auto}
.rating-tile__dot--wide img{max-height:16px}
.rating-tile b{font:400 1.25rem var(--font-display); display:flex; align-items:center; gap:6px}
.rating-tile b svg{width:15px; height:15px; fill:var(--gold-400)}
.rating-tile span{display:flex; justify-content:center; font-size:.74rem; color:var(--gray-500)}
.reviews-cats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.reviews-col{display:flex; flex-direction:column; gap:16px}
.reviews-col__chip{
  align-self:center; font:600 .86rem var(--font-body); padding:9px 22px; border-radius:999px;
  background:#fff; border:1px solid var(--gray-200); box-shadow:var(--shadow);
}
.reviews-col .review{padding:24px 22px}
.reviews-col .review__text{font-size:.94rem}
@media(max-width:1000px){.reviews-cats{grid-template-columns:1fr; max-width:560px; margin:0 auto}}
.reviews-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:stretch}
.reviews{position:relative; display:flex; flex-direction:column}
.review{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:30px 32px;
  position:absolute; inset:0; opacity:0; transition:opacity 500ms var(--ease-in-out);
  display:flex; flex-direction:column;
}
.review::before{
  content:'\201C'; font:400 4rem/0.6 var(--font-retro); color:rgba(6,140,210,.18); display:block; margin-bottom:14px;
}
.review--active{opacity:1; position:relative; flex:1}
.review__head{display:flex; justify-content:space-between; align-items:center; order:3; margin-top:auto; padding-top:16px; border-top:1px solid var(--gray-50)}
.review__source{font:600 .74rem var(--font-body); color:var(--gray-500); padding:4px 11px; border:1px solid var(--gray-200); border-radius:999px}
.review__stars{display:flex; gap:3px; color:var(--gold-400); margin-bottom:12px}
.review__stars svg{width:17px; height:17px; fill:currentColor; transform:scale(0)}
.reviews--seen .review--active .review__stars svg{transform:scale(1); transition:transform var(--dur-base) var(--ease-bounce)}
.reviews--seen .review--active .review__stars svg:nth-child(2){transition-delay:60ms}
.reviews--seen .review--active .review__stars svg:nth-child(3){transition-delay:120ms}
.reviews--seen .review--active .review__stars svg:nth-child(4){transition-delay:180ms}
.reviews--seen .review--active .review__stars svg:nth-child(5){transition-delay:240ms}
.review__text{font-size:1.05rem; line-height:1.65; margin:0 0 8px}
.review__name{font:600 .95rem var(--font-body); color:var(--ink-900)}
.reviews__dots{display:flex; gap:8px; justify-content:center; margin-top:18px}
.reviews__dot{width:8px; height:8px; border-radius:999px; border:0; padding:0; background:var(--gray-200); cursor:pointer; transition:width var(--dur-base) var(--ease-in-out), background-color var(--dur-base)}
.reviews__dot--active{width:24px; background:var(--blue-600)}
.video-card{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--navy-800); height:100%; min-height:380px}
.video-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92}
.video-card__label{
  position:absolute; left:16px; bottom:14px; right:16px; z-index:2; color:#fff;
  font:600 .9rem var(--font-body); text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.video-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,18,32,.75))}
.video-card .playbtn{z-index:3}
@media(max-width:1000px){
  .rating-tiles{grid-template-columns:1fr; max-width:420px}
  .reviews-grid{grid-template-columns:1fr}
  .video-card{min-height:300px; aspect-ratio:9/12}
}

.faq-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:stretch}
.faq{display:grid; gap:10px}
.faq-item{background:#fff; border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; position:relative; transition:box-shadow var(--dur-fast)}
.faq-item:hover{box-shadow:var(--shadow)}
.faq-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue-600);
  transform:scaleY(0); transition:transform var(--dur-base) var(--ease-out-soft);
}
.faq-item--open::before{transform:scaleY(1)}
.faq-item--open{background:#F8FAFF}
.faq-item__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:600 .95rem var(--font-body); color:var(--ink-900); padding:17px 48px 17px 20px; position:relative;
}
.faq-item__q::after{
  content:''; position:absolute; right:20px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--blue-600); border-bottom:2px solid var(--blue-600);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--dur-base) var(--ease-in-out);
}
.faq-item--open .faq-item__q::after{transform:translateY(-30%) rotate(225deg)}
.faq-item__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-in-out)}
.faq-item--open .faq-item__a{grid-template-rows:1fr}
.faq-item__a > div{overflow:hidden}
.faq-item__a p{margin:0; padding:0 20px 17px; font-size:.9rem; color:var(--gray-500)}
.faq-banner{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-up);
}
.faq-banner img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.faq-banner__btn{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  background:#fff; color:var(--ink-900); white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.faq-banner__btn:hover{transform:translateX(-50%) translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.35)}
.faq-help{
  position:sticky; top:calc(var(--header-h) + 20px);
  background:var(--navy-950); color:#fff; border-radius:var(--radius); padding:28px; overflow:hidden; isolation:isolate;
}
.faq-help::before{
  content:''; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(6,140,210,.35), transparent 70%);
}
.faq-help__img{width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid rgba(47,169,228,.6); margin-bottom:16px}
.faq-help h3{color:#fff; font-size:1.15rem; margin-bottom:8px}
.faq-help p{color:rgba(255,255,255,.65); font-size:.88rem; margin:0 0 20px}

.branches{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
@media(max-width:1100px){.branches{grid-template-columns:1fr 1fr}}
.branch{
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.branch:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.branch h3{font-size:1rem; margin-bottom:13px}
.branch p{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; margin:0 0 9px; color:var(--gray-500)}
.branch svg{flex-shrink:0; margin-top:3px; color:var(--blue-600)}
.branch a{color:var(--ink-900); text-decoration:none; font-weight:600}
.branch a:hover{color:var(--blue-600)}
.branch__route{display:inline-flex; align-items:center; gap:6px; margin-top:5px; font:600 .84rem var(--font-body); color:var(--blue-600) !important}
@media(max-width:900px){.branches{grid-template-columns:1fr}}

.booking{
  margin-top:56px; border-radius:24px; color:#fff;
  background:linear-gradient(150deg, #045E8F, #068CD2 55%, #12A5EC);
  display:grid; grid-template-columns:1fr 1.35fr; overflow:hidden; isolation:isolate; position:relative;
}
.booking__text{
  position:relative; padding:46px 44px; background:rgba(0,30,50,.12);
  border-right:1px solid rgba(255,255,255,.14);
}
.booking__text h3{font-size:1.5rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px}
.booking__text > p{color:rgba(255,255,255,.82); font-size:.94rem; margin-bottom:30px}
.booking__contacts{display:grid; gap:16px}
.booking__contact{display:flex; gap:13px; align-items:flex-start}
.booking__contact svg{flex-shrink:0; margin-top:2px; color:#CFEFFF}
.booking__contact b{display:block; font:600 .92rem var(--font-body)}
.booking__contact span{font-size:.8rem; color:rgba(255,255,255,.68)}
.booking__contact a{color:#fff; text-decoration:none; font-weight:600}
.booking__contact a:hover{color:#CFEFFF}
.booking__form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; padding:46px 44px; position:relative; z-index:1}
/* колонки не должны расширяться под длинный текст в списках - иначе форма вылезает из карточки */
.booking__form label{min-width:0}
.booking__form input,.booking__form select,.booking__form textarea{min-width:0; max-width:100%}
.booking__form label{display:grid; gap:7px; font:600 .74rem var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.booking__form input,.booking__form select,.booking__form textarea{
  font:500 .98rem var(--font-body); color:#fff; background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px; padding:13px 15px;
  transition:border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.booking__form input::placeholder,.booking__form textarea::placeholder{color:rgba(255,255,255,.3)}
.booking__form input:hover,.booking__form select:hover,.booking__form textarea:hover{border-color:rgba(255,255,255,.28)}
.booking__form input:focus,.booking__form select:focus,.booking__form textarea:focus{
  border-color:var(--blue-500); outline:none; background:rgba(6,140,210,.09);
  box-shadow:0 0 0 3px rgba(6,140,210,.22);
}
.booking__wide{grid-column:1/3}
.booking__submit{grid-column:1/3; justify-self:stretch; padding:16px; font-size:1rem}
/* ловушка для ботов: не занимает места и ничего не рисует */
.hp{position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.booking__hint{display:block; margin-top:6px; font-size:.75rem; color:var(--gray-500)}
.booking__warn{display:block; margin-top:6px; font-size:.75rem; color:var(--warn, #B45309)}

.booking__note{grid-column:1/3; font-size:.74rem; color:rgba(255,255,255,.4); margin:0}
.booking__done{grid-column:1/3; color:#6EE7A0; font-weight:600; margin:0; display:flex; align-items:center; gap:10px}
.booking > .booking__form label{color:rgba(255,255,255,.92)}
.booking > .booking__form input,
.booking > .booking__form select,
.booking > .booking__form textarea{
  background:#fff; color:var(--ink-900); border:1.5px solid transparent; border-radius:12px;
  box-shadow:0 3px 10px rgba(2,48,75,.16);
}
.booking > .booking__form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23068CD2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; cursor:pointer;
}
.booking > .booking__form input::placeholder,
.booking > .booking__form textarea::placeholder{color:#9AA1AE}
.booking > .booking__form input:hover,
.booking > .booking__form select:hover,
.booking > .booking__form textarea:hover{border-color:rgba(255,255,255,.85)}
.booking > .booking__form input:focus,
.booking > .booking__form select:focus,
.booking > .booking__form textarea:focus{
  background:#fff; border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35);
}
.booking > .booking__form .booking__submit{
  background:#fff; color:#068CD2; font-weight:700; border-radius:12px;
  box-shadow:0 6px 18px rgba(2,48,75,.22);
}
.booking > .booking__form .booking__submit:hover{
  transform:translateY(-2px); background:#F4FBFF; box-shadow:0 12px 28px rgba(2,48,75,.3);
}
.booking > .booking__form .booking__note{color:rgba(255,255,255,.78)}
.booking > .booking__form .booking__done{color:#fff}
.booking > .booking__form .booking__fail{color:#FFD9D9}
.booking__done[hidden],.booking__fail[hidden]{display:none}
.booking__fail{grid-column:1/3; color:#FF8080; font-weight:600; font-size:.88rem; margin:0}
.book-modal .booking__fail{grid-column:1/3}
@media(max-width:900px){.booking__fail{grid-column:auto}}
@media(max-width:900px){
  .booking{grid-template-columns:1fr}
  .booking__text{border-right:0; border-bottom:1px solid rgba(255,255,255,.07); padding:32px 24px}
  .booking__form{grid-template-columns:1fr; padding:32px 24px}
  .booking__wide,.booking__submit,.booking__done,.booking__note{grid-column:auto}
}

.modal__body--book{width:min(560px, 94vw)}
.book-modal{
  background:#fff; border:0;
  border-radius:22px; padding:38px 34px 30px; color:var(--ink-900); position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 40px 120px rgba(2,42,66,.4);
}
.book-modal::before{
  content:''; position:absolute; right:-90px; top:-90px; width:260px; height:260px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(6,140,210,.12), transparent 70%);
}
.book-modal::after{
  content:''; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg, #068CD2, #2FA9E4);
}
.book-modal h3{font-size:1.35rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; color:#068CD2}
.book-modal__sub{color:var(--gray-500); font-size:.88rem; margin:0 0 24px}
.book-modal .booking__form label{color:var(--gray-500)}
.book-modal .booking__form input,
.book-modal .booking__form select,
.book-modal .booking__form textarea{
  background:var(--gray-50); color:var(--ink-900); border:1.5px solid var(--gray-200); border-radius:11px;
}
.book-modal .booking__form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23068CD2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer;
}
.book-modal .booking__form input::placeholder,
.book-modal .booking__form textarea::placeholder{color:#9AA1AE}
.book-modal .booking__form input:hover,
.book-modal .booking__form select:hover,
.book-modal .booking__form textarea:hover{border-color:var(--blue-500)}
.book-modal .booking__form input:focus,
.book-modal .booking__form select:focus,
.book-modal .booking__form textarea:focus{
  background:#fff; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(6,140,210,.16);
}
.book-modal .booking__note{color:var(--gray-500)}
.book-modal .booking__fail{color:#D23A3A}
.book-modal__success h4{color:var(--ink-900)}
.book-modal__success p{color:var(--gray-500)}
.book-modal .booking__form{padding:0; grid-template-columns:1fr 1fr}
.book-modal .booking__wide,.book-modal .booking__submit,.book-modal .booking__note,.book-modal .booking__done{grid-column:1/3}
.book-modal__success{
  display:none; flex-direction:column; align-items:center; text-align:center; padding:34px 0 22px;
}
.book-modal--done .booking__form{display:none}
.book-modal--done .book-modal__success{display:flex}
.book-modal__check{width:84px; height:84px; margin-bottom:20px}
.book-modal__check circle{
  fill:none; stroke:#2FBF71; stroke-width:2.4; stroke-dasharray:227; stroke-dashoffset:227;
  animation:drawRing 700ms var(--ease-out-soft) forwards;
}
.book-modal__check path{
  fill:none; stroke:#2FBF71; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:drawCheck 450ms var(--ease-out-soft) 500ms forwards;
}
@keyframes drawRing{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.book-modal__success h4{font:400 1.3rem var(--font-display); margin:0 0 8px; letter-spacing:.03em; color:var(--ink-900)}
.book-modal__success p{color:var(--gray-500); font-size:.9rem; margin:0}
@media(max-width:600px){
  .book-modal{padding:26px 20px}
  .book-modal .booking__form{grid-template-columns:1fr}
  .book-modal .booking__wide,.book-modal .booking__submit,.book-modal .booking__note,.book-modal .booking__done{grid-column:auto}
}

.footer{background:linear-gradient(160deg, #045E8F, #068CD2 60%, #0B98DC); color:rgba(255,255,255,.85); padding-top:56px}
.footer__in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px}
.footer__brand p{font-size:.86rem; max-width:280px}
.logo__img--footer{height:32px; margin-bottom:16px; opacity:0; transform:translateY(10px); filter:brightness(0) invert(1)}
.footer--seen .logo__img--footer{opacity:1; transform:none; transition:all var(--dur-slow) var(--ease-out-soft)}
.footer__soc{display:flex; gap:10px; margin-top:16px}
.footer__soc a{
  width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  display:grid; place-items:center; color:#fff; text-decoration:none; font:400 .74rem var(--font-display); letter-spacing:.05em;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-bounce), background-color var(--dur-fast), border-color var(--dur-fast);
}
.footer--seen .footer__soc a{opacity:1; transform:none}
.footer--seen .footer__soc a:nth-child(2){transition-delay:60ms}
.footer--seen .footer__soc a:nth-child(3){transition-delay:120ms}
.footer__soc a:hover{transform:scale(1.12); border-color:transparent}
.footer__soc a[data-soc="vk"]:hover{background:#0077FF}
.footer__soc a[data-soc="tg"]:hover{background:#26A5E4}
.footer__soc a[data-soc="wa"]:hover{background:#25D366}
.footer__soc img{width:18px; height:18px; display:block}
.footer__col h4{color:#fff; font-size:.85rem; margin-bottom:15px; text-transform:uppercase; letter-spacing:.08em}
.footer__col a{
  display:block; color:rgba(255,255,255,.88); text-decoration:none; font-size:.86rem; margin-bottom:9px;
  width:fit-content; position:relative;
}
.footer__col a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform 200ms var(--ease-out-soft);
}
.footer__col a:hover{color:#fff}
.footer__col a:hover::after{transform:scaleX(1)}
.footer__col p{display:flex; gap:8px; align-items:center; font-size:.84rem; margin:0 0 9px}
.footer__col p a{display:inline-flex; align-items:center; gap:8px; margin:0}
.footer__col svg{color:#CFEFFF}
.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.25); padding-block:20px; font-size:.78rem;
}
.footer__bottom a{color:rgba(255,255,255,.85)}
.footer__made{display:flex; gap:4px; align-items:center; color:rgba(255,255,255,.85)}
.footer__made a{
  background:linear-gradient(90deg, #ff4d9d, #ff8ccf);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; text-decoration:none; transition:opacity .2s;
}
.footer__made a:hover{opacity:.75}
@media(max-width:900px){.footer__in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__in{grid-template-columns:1fr}}

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(11,18,32,.94); backdrop-filter:blur(10px);
  transform:translateY(100%); transition:transform var(--dur-base) var(--ease-out-soft);
}
.sticky-cta--visible{transform:none}
.sticky-cta .btn{flex:1; padding:12px}
.sticky-cta .btn--outline{border-color:rgba(255,255,255,.4); color:#fff}
@media(max-width:768px){.sticky-cta{display:flex}}

.modal{position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
       overflow:auto; padding:24px 16px; overscroll-behavior:contain}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(8,12,22,.82); backdrop-filter:blur(4px); animation:fadeIn 250ms both}
@keyframes fadeIn{from{opacity:0}}
.modal__body{position:relative; z-index:1; margin:auto; animation:zoomIn 350ms var(--ease-out-soft) both}
@keyframes zoomIn{from{opacity:0; transform:scale(.8)}}
.modal__body--wide{width:min(880px, 92vw)}
.modal__stage .ba__stage{aspect-ratio:4/3; border-radius:var(--radius); cursor:ew-resize}
.modal__stage img{border-radius:0}
.modal__caption{color:#fff; text-align:center; font:600 .95rem var(--font-body); margin-top:14px}
.modal__close{
  position:absolute; top:-48px; right:0; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; cursor:pointer;
  transition:background-color var(--dur-fast);
}
.modal__close:hover{background:rgba(255,255,255,.25)}
/* у светлых карточек (запись, акция) крестик внутри, у тёмных окон - снаружи */
.modal__body--book .modal__close,
.modal__body--promo .modal__close{
  top:14px; right:14px; width:38px; height:38px; z-index:3;
  background:rgba(15,23,42,.07); color:#64748B; font-size:1.35rem; line-height:1;
}
.modal__body--book .modal__close:hover,
.modal__body--promo .modal__close:hover{background:rgba(15,23,42,.14); color:var(--ink-900)}
.book-modal{padding-top:34px}
.modal__arr{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--blue-600);
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-up);
}
.modal__arr--prev{left:-23px}
.modal__arr--next{right:-23px}
.modal__body--phone{width:min(380px, 92vw)}
.phone-frame{
  position:relative; border-radius:28px; overflow:hidden; background:#000;
  border:6px solid #1B2233; aspect-ratio:9/16; box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.phone-frame video{width:100%; height:100%; object-fit:cover}
.phone-frame--next video{animation:reelSlideUp 320ms var(--ease-out-soft)}
.phone-frame--prev video{animation:reelSlideDown 320ms var(--ease-out-soft)}
@keyframes reelSlideUp{from{transform:translateY(46%); opacity:0}to{transform:none; opacity:1}}
@keyframes reelSlideDown{from{transform:translateY(-46%); opacity:0}to{transform:none; opacity:1}}
.phone-frame__sound{
  position:absolute; right:12px; top:12px; width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(11,18,32,.7); color:#fff; cursor:pointer; font-size:1rem;
}
.phone-frame__title{
  position:absolute; left:14px; bottom:12px; margin:0; color:#fff; font:600 .88rem var(--font-body);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.phone-frame__hint{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-size:.68rem; color:rgba(255,255,255,.7); background:rgba(11,18,32,.55); padding:4px 10px; border-radius:999px;
}
@media(max-width:600px){
  .modal{padding:16px 12px}
  .modal__arr--prev{left:6px}.modal__arr--next{right:6px}
  .modal__close{top:-46px; right:6px}
  .modal__body--book .modal__close,.modal__body--promo .modal__close{top:10px; right:10px}
}

.reveal{opacity:0; transform:translateY(28px)}
.reveal--seen{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft)}
.reveal-item{opacity:0; transform:translateY(28px)}
.reveal-item--seen{opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft)}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .hero__line,.hero__sub,.hero__cta .btn,.hero__badges li,.lens,.reveal,.reveal-item,
  .parts__photo,.parts__list li,.step h3,.step p{opacity:1; transform:none}
  .step__num,.parts__check,.patina__badges li,.review__stars svg{transform:scale(1)}
  .marquee__track{animation:none}
  .lens__ring{display:none}
  .patina__hero-img img{filter:none}
}

.page-hero{
  position:relative; padding:calc(var(--header-h) + 64px) 0 64px;
  background:var(--navy-950); color:#fff; overflow:hidden;
}
.page-hero__img{position:absolute; inset:0}
.page-hero__img img{width:100%; height:100%; object-fit:cover; opacity:.38}
.page-hero__img::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,18,32,.94) 22%, rgba(11,18,32,.55) 60%, rgba(11,18,32,.3) 100%)}
.page-hero .container{position:relative; z-index:2}
.breadcrumbs{font-size:.8rem; color:rgba(255,255,255,.55); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap}
.breadcrumbs a{color:rgba(255,255,255,.75); text-decoration:none}
.breadcrumbs a:hover{color:#fff}
.page-hero h1{color:#fff; max-width:700px; margin-bottom:14px}
.page-hero__lead{color:rgba(255,255,255,.7); max-width:560px; font-size:1rem; margin-bottom:26px}
.page-hero__cta{display:flex; gap:13px; flex-wrap:wrap}
.page-section{padding-block:72px}
.page-section--alt{background:var(--gray-50)}
.page-section h2{margin-bottom:28px}
.feature-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; max-width:900px}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font:500 .95rem var(--font-body)}
.feature-list .parts__check{margin-top:1px}
/* ─── Блоки страниц услуг: группы, этапы, ссылки ─────────────────────────── */
.page-groups{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.page-group{background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:24px 26px}
.page-group h3{font-size:1.05rem; margin:0 0 16px}
.page-group ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.page-group li{display:flex; gap:12px; align-items:flex-start; font:500 .93rem/1.45 var(--font-body)}
.page-group .parts__check{flex:0 0 auto; transform:none; margin-top:1px}
@media(max-width:760px){.page-groups{grid-template-columns:1fr}}

.page-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:step}
.page-steps li{display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:18px 22px}
.page-steps__num{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-600); color:#fff; font:700 .9rem var(--font-display)}
.page-steps h3{font-size:1rem; margin:2px 0 6px}
.page-steps p{margin:0; color:var(--gray-500); font-size:.92rem; line-height:1.55}
.page-steps__time{display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font:600 .78rem var(--font-body); color:var(--blue-600)}

.page-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.page-link{display:flex; gap:13px; align-items:center; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:16px 18px;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast), border-color var(--dur-fast)}
.page-link:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--blue-500)}
.page-link__ico{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--blue-050, #EAF6FD); color:var(--blue-600)}
.page-link b{display:block; font:600 .93rem var(--font-body)}
.page-link i{display:block; font-style:normal; font-size:.8rem; color:var(--gray-500); margin-top:2px}
@media(max-width:900px){.page-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.page-links{grid-template-columns:1fr}}

.srv-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.srv-card{display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--gray-200);
  border-radius:14px; padding:20px 22px; transition:box-shadow var(--dur-fast), border-color var(--dur-fast)}
.srv-card:hover{box-shadow:var(--shadow); border-color:var(--blue-500)}
.srv-card h3{font-size:.98rem; margin:0; line-height:1.35}
.srv-card p{margin:0; color:var(--gray-500); font-size:.87rem; line-height:1.55}
.srv-card__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:8px}
.srv-card__price{font:400 1.02rem var(--font-display); color:var(--blue-600); white-space:nowrap}
@media(max-width:960px){.srv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.srv-cards{grid-template-columns:1fr}}

.faq--page{max-width:900px}

/* ─── Вопросы-ответы на телефоне ─────────────────────────────────────────
   Раньше блок оставался в две колонки: карточки жались слева, справа торчал
   кусок фона. Теперь на узких экранах одна колонка, баннер уходит под список. */
@media(max-width:768px){
  #faq .container{padding-left:16px; padding-right:16px}
  .faq-grid{grid-template-columns:1fr; gap:16px}
  .faq{gap:10px}
  .faq-item__q{font-size:.95rem; line-height:1.3; padding:15px 44px 15px 16px;
    word-break:normal; overflow-wrap:break-word; hyphens:none}
  .faq-item__q::after{right:16px}
  .faq-item__a p{padding:0 16px 15px; font-size:.9rem; line-height:1.5}
  .faq-banner{order:2; aspect-ratio:16/9; max-height:260px}
  .faq-banner img{object-position:center 22%}
  /* последнюю карточку не должна перекрывать плавающая панель снизу */
  #faq{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}


/* ─── Поиск по спискам с ценами ─────────────────────────────────────────── */
.finder{display:flex; align-items:center; gap:12px; margin:0 0 18px}
.finder--center{justify-content:center; margin:-6px 0 26px}
.finder__field{display:flex; align-items:center; gap:9px; flex:0 1 340px;
  background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:0 14px;
  transition:border-color var(--dur-base), box-shadow var(--dur-base)}
.finder__field:focus-within{border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(6,140,210,.14)}
.finder__field svg{flex:none; color:var(--gray-500)}
.finder__field input{flex:1; min-width:0; border:0; outline:0; background:none; padding:11px 0;
  font:400 .93rem/1.4 var(--font-body); color:var(--ink-900)}
.finder__count{font-size:.83rem; color:var(--gray-500); white-space:nowrap}
.finder__count::after{content:' поз.'}
.finder--active .finder__count{color:var(--blue-600); font-weight:600}
.finder__empty{margin:16px 0 0; color:var(--gray-500); font-size:.92rem}
.finder--center ~ .finder__empty{text-align:center}
@media(max-width:560px){.finder__field{flex:1}}

/* спрятанные фильтром пункты: свои display перебивают hidden, поэтому явно */
.services > [hidden], .promos > [hidden], .price-table tbody > [hidden]{display:none !important}

/* таблица цен занимает ту же ширину, что плитки и заголовки секции */
.pricebox .price-table{max-width:none}
.price-table th:last-child{text-align:right}
.price-table td:first-child{width:auto}
.price-table td:last-child, .price-table th:last-child{width:1%; padding-left:32px}
.pricebox__note{color:var(--gray-500); margin:16px 0 0; font-size:.9rem}
/* таблица прокручивается внутри своего контейнера, страница вбок не едет */
.pricebox__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding:0 2px}
.price-table--matrix{min-width:700px}
.price-table--matrix td:first-child{min-width:250px}
.pricebox__swipe{display:none; margin:0 0 8px; font-size:.8rem; color:var(--gray-500)}
@media(max-width:760px){
  .pricebox__swipe{display:block}
  .pricebox__scroll{position:relative;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, rgba(0,0,0,.25));
    mask-image:linear-gradient(90deg, #000 88%, rgba(0,0,0,.25))}
}
.price-table--matrix th:not(:first-child), .price-table--matrix td:not(:first-child){text-align:right; white-space:nowrap}
.price-table--matrix td:not(:first-child){font:400 .95rem var(--font-display); color:var(--blue-600)}
.price-table--matrix th{font-size:.72rem}
.pricebox__btn{margin-top:18px}

.price-table{width:100%; max-width:860px; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.price-table th{
  text-align:left; font:400 .78rem var(--font-display); letter-spacing:.08em; text-transform:uppercase;
  background:var(--navy-950); color:#fff; padding:14px 20px;
}
.price-table td{padding:13px 20px; border-top:1px solid var(--gray-200); font-size:.92rem}
.price-table td:last-child{font:400 .98rem var(--font-display); color:var(--blue-600); white-space:nowrap; text-align:right}
.price-table tr:hover td{background:var(--gray-50)}
.page-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.page-gallery .work-card{flex:none}
.page-gallery--reels{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
  .page-gallery--reels{
    display:flex; overflow-x:auto; gap:14px; scroll-snap-type:x mandatory;
    margin-inline:-24px; padding:4px 24px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .page-gallery--reels::-webkit-scrollbar{display:none}
  .page-gallery--reels .work-card{flex:0 0 76%; scroll-snap-align:center}
}
.page-split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px 34px; align-items:start}
.page-split__media{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.page-split__media .work-card{flex:none}
.page-split__text{font-size:.95rem; line-height:1.7}
.page-split__text ul{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px}
.page-split__text li{display:flex; gap:12px; align-items:flex-start}
.page-split__text .parts__check{transform:none; margin-top:1px}
@media(max-width:900px){
  .page-split{grid-template-columns:1fr}
  .page-split__media{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){.page-split__media{grid-template-columns:1fr}}

.page-cta{
  background:var(--navy-950); border-radius:22px; color:#fff; padding:44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.page-cta h2{margin:0}
.page-cta p{color:rgba(255,255,255,.65); margin:6px 0 0}
@media(max-width:768px){
  .feature-list{grid-template-columns:1fr}
  .page-gallery{grid-template-columns:1fr}
  .page-cta{padding:28px 22px}
}

.patina-page{background:var(--patina-dark); color:#F4EDE3}
.patina-page .page-hero__img::after{background:linear-gradient(90deg, rgba(22,17,12,.94) 22%, rgba(22,17,12,.5) 60%, rgba(22,17,12,.3) 100%)}
.patina-page .page-hero{background:#16110C}
.patina-page h1,.patina-page h2,.patina-page h3{font-family:var(--font-retro); font-weight:400}
.patina-page .page-section h2{color:#F4EDE3}
.patina-page .page-section--alt{background:#16110C}
.patina-page .feature-list li{color:#F4EDE3}
.patina-page .parts__check{background:rgba(196,129,58,.16); color:var(--patina-amber)}
.patina-page .work-card{background:#241C13; box-shadow:0 12px 36px rgba(0,0,0,.45)}
.patina-page .work-card__title{color:#F4EDE3}
.patina-page .page-cta{background:#241C13; border:1px solid rgba(196,129,58,.3)}
.patina-page .btn--primary{background:var(--patina-amber)}
.patina-page .price-table th{background:#241C13}
.patina-page .playbtn{background:rgba(196,129,58,.92)}
.patina-page .playbtn::after{border-color:rgba(196,129,58,.8)}
.patina-page .footer{background:#16110C}
.patina-page .breadcrumbs a{color:rgba(232,180,120,.8)}

.page-hero__chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px}
.page-hero__chips span{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
  font:500 .8rem var(--font-body); color:rgba(255,255,255,.85);
}
.page-hero__chips svg{color:var(--blue-500)}
.patina-page .page-hero__chips svg{color:var(--patina-amber)}

.blog-row-wrap{position:relative}
.blog-row{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 20px; scrollbar-width:thin;
}
.blog-card{
  flex:0 0 316px; scroll-snap-align:start; border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); display:flex; flex-direction:column; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-up)}
.blog-card__image{position:relative; aspect-ratio:16/10; overflow:hidden}
.blog-card__image img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-base) var(--ease-out-soft)}
.blog-card:hover .blog-card__image img{transform:scale(1.06)}
.blog-card__cat{
  position:absolute; top:12px; left:12px; padding:4px 12px; border-radius:999px;
  background:rgba(11,18,32,.72); color:#fff; font:600 .68rem var(--font-body);
  letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(4px);
}
.blog-card__content{padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1}
.blog-card__title{font:600 1rem/1.35 var(--font-body); color:var(--ink-900); margin:0}
.blog-card:hover .blog-card__title{color:var(--blue-600)}
.blog-card__excerpt{font-size:.84rem; color:var(--gray-500); margin:0; flex:1; line-height:1.55}
.blog-card__link{
  display:inline-flex; align-items:center; gap:7px; font:600 .86rem var(--font-body); color:var(--blue-600);
}
.blog-card__link svg{transition:transform var(--dur-fast) var(--ease-out-soft)}
.blog-card:hover .blog-card__link svg{transform:translateX(4px)}
.blog-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.blog-grid .blog-card{flex:none}
@media(max-width:1100px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}

.article-body{max-width:760px; margin:0 auto}
/* текстовый блок страницы услуг выравниваем по левому краю секции */
.page-section .article-body{max-width:900px; margin:0}
.article-body p{color:#3A414E; line-height:1.75; margin:0 0 18px}
.article-body h2{font-size:1.3rem; margin:34px 0 14px; display:block; text-align:left}
.article-body ul{color:#3A414E; line-height:1.7; padding-left:22px; margin:0 0 18px; display:grid; gap:6px}
.article-body strong{color:var(--ink-900)}
.article-note{
  border-left:3px solid var(--blue-600); background:var(--gray-50); border-radius:0 12px 12px 0;
  padding:16px 20px; margin:26px 0; font-size:.92rem; color:var(--ink-900);
}
.article-meta{display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.6); font-size:.82rem; margin-bottom:18px}
.article-meta .blog-card__cat{position:static}

.modal__body--promo{width:min(600px, 94vw)}
.promo-modal{
  background:#fff; border-radius:22px; overflow:hidden; position:relative;
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  max-height:88vh; display:flex; flex-direction:column;
}
.promo-modal__img{position:relative; aspect-ratio:21/9; overflow:hidden; flex-shrink:0}
.promo-modal__img img{width:100%; height:100%; object-fit:cover}
.promo-modal__img .promo__badge{top:14px; left:16px; right:auto}
.promo-modal__body{padding:26px 30px 30px; overflow:auto}
.promo-modal__body h3{font-size:1.3rem; margin:0 0 4px}
.promo-modal__price{font:400 1.7rem var(--font-display); color:var(--blue-600); letter-spacing:.02em; display:block; margin-bottom:12px}
.promo-modal__full{color:var(--gray-500); font-size:.94rem; line-height:1.65; margin:0 0 18px}
.promo-modal__terms{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px}
.promo-modal__terms li{display:flex; gap:10px; align-items:flex-start; font-size:.88rem}
.promo-modal__terms svg{flex-shrink:0; margin-top:3px; color:var(--blue-600)}
.promo-modal__cta{display:flex; gap:12px; flex-wrap:wrap}
@media(max-width:600px){.promo-modal__body{padding:20px}}

.page-hero{
  position:relative; padding:calc(var(--header-h) + 56px) 0 64px;
  background:
    radial-gradient(700px 420px at 8% 110%, rgba(6,140,210,.22), transparent 65%),
    var(--navy-950);
  color:#fff; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
/* текстовая колонка всегда начинается на одной высоте - иначе крошки и заголовок
   «прыгают» между разделами; картинку центрируем отдельно */
.page-hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; position:relative; z-index:2}
.page-hero__media{align-self:center}
.page-hero__media{
  border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1); aspect-ratio:4/3;
}
.page-hero__media img{width:100%; height:100%; object-fit:cover; opacity:1}
.patina-page .page-hero{background:radial-gradient(700px 420px at 8% 110%, rgba(196,129,58,.25), transparent 65%), #16110C}
@media(max-width:960px){
  .page-hero__grid{grid-template-columns:1fr; gap:32px}
  .page-hero__media{max-width:520px}
}

.feature-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.feature-card{
  display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--gray-200);
  border-radius:14px; padding:18px 20px; font:500 .93rem/1.45 var(--font-body);
  transition:transform var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.feature-card .parts__check{transform:none; margin-top:1px}
.page-section--alt .feature-card{background:#fff}
.patina-page .feature-card{background:#241C13; border-color:rgba(196,129,58,.28); color:#F4EDE3}
.patina-page .feature-card:hover{border-color:rgba(196,129,58,.6); box-shadow:0 12px 32px rgba(0,0,0,.4)}
/* четыре позиции в сетке из трёх колонок дают одинокую карточку во второй
   строке - для таких блоков ставим четыре в ряд, дальше 2х2 и по одной */
.feature-cards[data-count="4"]{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.feature-cards[data-count="4"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.feature-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.feature-cards,.feature-cards[data-count="4"]{grid-template-columns:1fr}}

/* ═══ Галерея работ на внутренних страницах (фото + видео с пролистыванием) ═══ */
.page-works{margin-top:8px}
.page-works .works-row{scroll-snap-type:x mandatory}
.work-card__photo{
  display:block; position:relative; width:100%; padding:0; border:0; cursor:zoom-in;
  aspect-ratio:4/5; overflow:hidden; background:var(--navy-800);
}
.work-card__photo img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-base) var(--ease-out-soft)}
.work-card:hover .work-card__photo img{transform:scale(1.05)}
.work-card__zoom{
  position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(11,18,32,.6); color:#fff; backdrop-filter:blur(4px);
  transition:background-color var(--dur-fast);
}
.work-card__photo:hover .work-card__zoom{background:var(--blue-600)}
.photo-lb{position:relative; display:flex; flex-direction:column; align-items:center; gap:14px}
.photo-lb img{max-height:78vh; width:auto; border-radius:14px; box-shadow:0 40px 120px rgba(0,0,0,.6)}
.photo-lb__cap{color:#fff; font:600 .92rem var(--font-body); margin:0; text-align:center}

/* ═══ Тёмное оформление внутренних страниц в фирменном синем ═════════════════
   Гамма взята из блока записи и футера: #045E8F → #068CD2 → #12A5EC.
   Включается классом page-dark на <body> (стоит на всех внутренних страницах).
   Посмотреть светлый вариант для сравнения: ?theme=light в адресе или клавиша T.
   Совсем отключить - убрать class="page-dark" из <body> нужных страниц. */
.page-dark{
  --pd-top:#0B7BB9;                  /* светлый верх страницы */
  --pd-bg:#065C8D;                   /* середина */
  --pd-deep:#04405F;                 /* тёмный низ: подвал, шапка таблиц, блок призыва */
  --surface:rgba(255,255,255,.12);   /* карточки поверх синего */
  --surface-solid:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.2);
  /* перекрываем «светлые» токены, чтобы текст и рамки читались на синем */
  --gray-500:rgba(255,255,255,.75); --gray-200:rgba(255,255,255,.2);
  --gray-50:rgba(255,255,255,.08); --ink-900:#F1F8FD;
  color:#E4F1FA;
  /* градиент на всю высоту страницы: сверху светлее, книзу глубже */
  background:linear-gradient(180deg, var(--pd-top) 0%, var(--pd-bg) 42%, var(--pd-deep) 100%) no-repeat;
  background-size:100% 100%;
}
/* внутри модалок карточка остаётся светлой - возвращаем исходные токены и цвета */
.page-dark .modal{
  --gray-500:#6B7280; --gray-200:#E3E7EE; --gray-50:#F5F7FA; --ink-900:#10141C;
}
.page-dark .modal h1,.page-dark .modal h2,.page-dark .modal h3,.page-dark .modal h4{color:var(--ink-900)}
.page-dark .book-modal h3{color:var(--blue-600)}
.page-dark h1,.page-dark h2,.page-dark h3,.page-dark h4{color:#FFFFFF}

.page-dark .header{background:rgba(8,98,150,.94); border-bottom-color:var(--line)}
.page-dark .header--solid{box-shadow:0 6px 24px rgba(2,26,42,.45)}
.page-dark .header .logo__img{filter:brightness(0) invert(1)}
.page-dark .logo__city{color:rgba(255,255,255,.55)}
.page-dark .nav__link{color:#E4F1FA}
.page-dark .nav__link:hover{background:rgba(255,255,255,.14); color:#fff}
.page-dark .nav__chev{color:#8FD3F4}
.page-dark .dropdown{background:var(--pd-deep); border-color:var(--line); box-shadow:0 18px 44px rgba(2,26,42,.55)}
.page-dark .dropdown a{color:#E4F1FA}
.page-dark .dropdown a:hover{background:rgba(255,255,255,.12); color:#fff}
.page-dark .header__contact{color:#fff}
.page-dark .header__hours{color:rgba(255,255,255,.6)}
.page-dark .header__phone-ico{background:rgba(255,255,255,.16); color:#fff}
.page-dark .burger span{background:#fff}
.page-dark .mobile-menu{background:var(--pd-deep)}
.page-dark .sticky-cta{background:rgba(4,64,95,.96)}

/* секции не перекрывают градиент страницы, а лишь подсвечивают/затемняют его */
.page-dark .page-hero{background:radial-gradient(760px 440px at 8% 110%, rgba(255,255,255,.14), transparent 65%), rgba(255,255,255,.05)}
.page-dark .page-section--alt{background:rgba(2,26,42,.14)}
.page-dark .section__lead,.page-dark .page-hero__lead{color:rgba(255,255,255,.78)}
.page-dark .feature-card,
.page-dark .page-section--alt .feature-card{background:var(--surface); border-color:var(--line); color:#F1F8FD}
.page-dark .feature-card:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); box-shadow:0 12px 32px rgba(2,26,42,.35)}
.page-dark .feature-list li{color:#F1F8FD}
.page-dark .parts__check{background:rgba(255,255,255,.18); color:#fff}
.page-dark .breadcrumbs a{color:rgba(255,255,255,.85)}
.page-dark main a:not(.btn){color:#8FD3F4}   /* телефоны и ссылки в тексте - светло-голубые */
.page-dark .btn--outline{border-color:#fff; color:#fff}
.page-dark .btn--outline::before{background:#fff}
.page-dark .btn--outline:hover{color:var(--blue-600)}

.page-dark .price-table{background:var(--surface); box-shadow:0 12px 32px rgba(2,26,42,.3)}
.page-dark .price-table th{background:var(--pd-deep)}
.page-dark .price-table td{border-top-color:var(--line); color:#F1F8FD}
.page-dark .price-table td:last-child{color:#8FD3F4}
.page-dark .price-table tr:hover td{background:rgba(255,255,255,.08)}

.page-dark .work-card,.page-dark .blog-card,.page-dark .promo{background:var(--surface-solid); box-shadow:0 14px 36px rgba(2,26,42,.35)}
.page-dark .promo__body h3{color:#fff}
.page-dark .promo__price{color:#8FD3F4}
.page-dark .work-card__title,.page-dark .blog-card__title{color:#FFFFFF}
.page-dark .blog-card__excerpt{color:rgba(255,255,255,.72)}
.page-dark .blog-card:hover .blog-card__title{color:#8FD3F4}
.page-dark .blog-card__link{color:#8FD3F4}
.page-dark .filter{background:var(--surface); border-color:var(--line); color:#F1F8FD}

.page-dark .article-body p,.page-dark .article-body ul{color:#DCEDF8}
.page-dark .article-body strong{color:#fff}
.page-dark .article-note{background:var(--surface); color:#F1F8FD; border-left-color:#8FD3F4}

.page-dark .page-cta{background:rgba(2,26,42,.32); border:1px solid var(--line)}
.page-dark .page-cta p{color:rgba(255,255,255,.78)}
.page-dark .footer{background:linear-gradient(160deg, #032B44, #04405F 60%, #065C8D)}