/* Ловцы света — лендинг «Дизайн».
   Десктоп (>=1024px) повторяет макет 1920px: 1rem = 10px макета, масштаб пропорционален ширине окна
   и не растёт выше 1920px. Координаты элементов — из PSD (left/top относительно секции).
   Мобильная версия (<1024px) — обычный поток, 1rem = 10px при ширине 375px. */

@font-face { font-family: "Bebas Neue Cyrillic"; src: url(../fonts/bebas-neue-cyrillic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 300; src: url(../fonts/open-sans-300.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 300; src: url(../fonts/open-sans-latin-300.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 300; font-style: italic; src: url(../fonts/open-sans-300i.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 300; font-style: italic; src: url(../fonts/open-sans-latin-300i.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 400; src: url(../fonts/open-sans-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 400; src: url(../fonts/open-sans-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 700; src: url(../fonts/open-sans-700.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Open Sans"; font-weight: 700; src: url(../fonts/open-sans-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; font-display: swap; }
@font-face { font-family: "Fira Sans"; font-weight: 600; src: url(../fonts/fira-sans-600.woff2) format("woff2"); font-display: swap; }

:root {
  --lime: #aeff00;
  --lime-btn: #9bde00;
  --lime-text: #cbff08;
  --lime-soft: #c8ff00;
  --lime-pale: #cefa2d;
  --lime-deep: #b0dd07;
  --gold: #d4ba83;
  --white: #fff;
  --bebas: "Bebas Neue Cyrillic", "Bebas Neue", "Oswald", Impact, sans-serif;
  --sans: "Open Sans", Arial, sans-serif;
  --fira: "Fira Sans", "Open Sans", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; -webkit-text-stroke-width: var(--fb); } /* имитация Faux Bold из макета */
html { font-size: min(10px, 100vw / 192); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #000; color: var(--white); font: 400 1.88rem/2.5rem var(--sans); overflow-x: hidden; --fb: .02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: none; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.up { text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ---------- каркас: секция + холст 1920 ---------- */
.s { position: relative; background: #000 no-repeat center top / 192rem auto; }
.c { position: relative; width: 192rem; height: 100%; margin: 0 auto; left: 50%; margin-left: -96rem; }
.s .c > *, .header .c > * { position: absolute; }

.h2, .hero__title, .hero__badge, .step__t, .prices__title, .country__title, .quote, .step__d { --fb: 0; }
.h2 { font: 400 6.25rem/6.25rem var(--bebas); letter-spacing: .025em; text-transform: uppercase; }
.lead { font-size: 1.88rem; line-height: 2.5rem; text-transform: uppercase; color: var(--lime-text); }

.btn { display: flex; align-items: center; justify-content: center; border-radius: 99rem; font: 600 1.88rem/1 var(--fira); text-transform: uppercase; --fb: 0; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.btn--green { background: var(--lime); color: #000; }
.btn--lime { background: var(--lime-btn); color: #000; }
.btn--grey { background: #4e4e4e; color: rgba(255,255,255,.5); }
.btn--line { border: .3rem solid var(--lime); color: #fff; }
.btn--green:hover, .btn--lime:hover { background: #c6ff4a; box-shadow: 0 0 2.4rem rgba(174,255,0,.45); }
.btn--line:hover { background: rgba(174,255,0,.12); box-shadow: 0 0 2.4rem rgba(174,255,0,.3); }
.btn--grey:hover { background: #5d5d5d; color: #fff; }

/* ---------- шапка ---------- */
.header { position: relative; height: 18.5rem; background: #000; z-index: 20; }
.header .c { position: relative; height: 100%; }
.topbar { position: absolute; inset: 0 0 auto; height: 5.2rem; background: #101010; }
.navbar { position: absolute; inset: 5.2rem 0 0; }
.navbar .c { top: -5.2rem; height: 18.5rem; }
.navbar::after { content: ""; position: absolute; left: 0; right: 0; top: 13.5rem; height: 1px; background: #282013; }
.topbar__hours { left: 98rem; top: 1.65rem; font-size: 1.67rem; line-height: 2.4rem; letter-spacing: .05em; color: var(--gold); white-space: pre; }
.topbar__ico img { width: 100%; height: auto; }
.topbar__ico--max { left: 126.9rem; top: 1.8rem; width: 2.1rem; }
.topbar__ico--tg { left: 129.6rem; top: 1.8rem; width: 2.2rem; }
.topbar__ico--wa { left: 132.5rem; top: 1.7rem; width: 2rem; }
.topbar__ico--phone { left: 134.9rem; top: 1.7rem; width: 2rem; }
.topbar__ico--mail { left: 155.3rem; top: 1.8rem; width: 2.6rem; }
.topbar__phone, .topbar__mail { top: 1.65rem; font-size: 1.67rem; line-height: 2.4rem; letter-spacing: .05em; }
.topbar__phone { left: 138.5rem; }
.topbar__mail { left: 159.1rem; }
.topbar a:hover { color: var(--lime); }
.logo { left: 9rem; top: 7.6rem; width: 13.3rem; }
.logo img { width: 100%; height: auto; }
.nav { position: static !important; }
.nav__a { position: absolute; top: 9.89rem; font-size: 2.08rem; line-height: 3rem; white-space: nowrap; transition: color .2s; }
.nav__a:hover { color: var(--lime); }
.nav__a--1 { left: 53.7rem; } .nav__a--2 { left: 68.6rem; } .nav__a--3 { left: 90.5rem; } .nav__a--4 { left: 100.2rem; }
.nav__a--5 { left: 114.7rem; } .nav__a--6 { left: 135.9rem; } .nav__a--7 { left: 153rem; }
.nav__contacts, .burger { display: none; }
.by-fursov { left: 167.1rem; top: 10.1rem; width: 15rem; }
.by-fursov img { width: 100%; height: auto; }

/* ---------- 1. первый экран ---------- */
.hero { height: 96.5rem; background-image: url(../img/bg/hero.webp); }
.hero__title { left: .4rem; width: 190.2rem; top: 13.575rem; font: 400 15rem/13.75rem var(--bebas); letter-spacing: .005em; text-transform: uppercase; text-align: center; }
.hero__badge { left: 111rem; top: 32.6rem; width: 39.8rem; pointer-events: none; }
.hero__badge img { width: 100%; height: auto; }
.hero__badge span { position: absolute; left: 20.4rem; top: 9.75rem; font: 400 8.63rem/1 var(--bebas); letter-spacing: .005em; text-transform: uppercase; color: var(--lime-text); transform: translate(-50%, -50%) rotate(-12.48deg); white-space: nowrap; }
.hero__sub { left: 0; width: 192rem; top: 54.37rem; text-align: center; }
.hero__btn1, .hero__btn2 { padding-top: .2rem; }
.hero__btn1 { left: 60.5rem; top: 78.8rem; width: 33.4rem; height: 5.1rem; }
.hero__btn2 { left: 100.6rem; top: 78.5rem; width: 29.4rem; height: 5.5rem; }

/* ---------- 2. шаги ---------- */
.steps { height: 91rem; background-image: url(../img/bg/steps.webp); }
.steps__title { left: 0; width: 191.8rem; top: 6.89rem; text-align: center; }
.steps__lead { left: 0; width: 192.1rem; top: 21.36rem; text-align: center; }
.steps__list { inset: 0; }
.step { position: absolute; top: 0; height: 100%; width: 40rem; text-align: center; }
.step > * { position: absolute; left: 0; right: 0; }
.step__num { left: auto; right: auto; top: 39.8rem; height: auto; }
.step__line { height: 1px; background: linear-gradient(90deg, #4f7400, #b3ff00); }
.step__t { font: 400 6.25rem/6.25rem var(--bebas); letter-spacing: .035em; text-indent: .035em; text-transform: uppercase; }
.step__d { font-weight: 300; letter-spacing: .02em; }
.step--1 { left: 23.75rem; } .step--2 { left: 57.5rem; } .step--3 { left: 93.35rem; } .step--4 { left: 128.3rem; }
.step--1 .step__num { left: 10.75rem; width: 18.1rem; }
.step--2 .step__num { left: 10.3rem; width: 20.2rem; }
.step--3 .step__num { left: 9.95rem; width: 20rem; }
.step--4 .step__num { left: 8.7rem; width: 20.3rem; }
.step--1 .step__line { left: 12.15rem; right: 12.95rem; top: 62.7rem; }
.step--2 .step__line { left: 12.3rem; right: 11.3rem; top: 63rem; }
.step--3 .step__line { left: 11.35rem; right: 12.55rem; top: 62.6rem; }
.step--4 .step__line { left: 11.3rem; right: 12rem; top: 62.4rem; }
.step--1 .step__t { top: 66.69rem; } .step--2 .step__t { top: 66.89rem; } .step--3 .step__t { top: 66.59rem; } .step--4 .step__t { top: 66.39rem; }
.step--1 .step__d { top: 75.35rem; } .step--2 .step__d { top: 75.72rem; } .step--3 .step__d { top: 75.29rem; } .step--4 .step__d { top: 75.07rem; }

/* ---------- 3. о руководителе ---------- */
.about { height: 114rem; background-image: url(../img/bg/about.webp); }
.about__photo { display: none; }
.about__name { left: 127.5rem; top: 13.09rem; white-space: nowrap; }
.about__role { left: 124.8rem; top: 20.76rem; white-space: nowrap; }
.about__text { left: 107.1rem; top: 26.56rem; width: 58.15rem; }
.jl { display: block; text-align: justify; text-align-last: justify; white-space: nowrap; }
.jl:last-child { text-align-last: right; }
.feats { inset: 0; }
.feat { position: absolute; inset: 0; pointer-events: none; }
.feat > * { position: absolute; pointer-events: auto; }
.feat i { width: .2rem; height: 4.9rem; background: var(--lime); }
.feat b { font-weight: 400; text-transform: uppercase; color: var(--lime-soft); white-space: nowrap; }
.feat span { white-space: nowrap; }
.feat--1 img { left: 87.5rem; top: 47rem; width: 5rem; }
.feat--1 i { left: 94.9rem; top: 46.7rem; }
.feat--1 b { left: 97.2rem; top: 43.86rem; }
.feat--1 span { left: 97.2rem; top: 49.15rem; }
.feat--2 img { left: 87.5rem; top: 63.4rem; width: 5.2rem; }
.feat--2 i { left: 94.2rem; top: 63rem; }
.feat--2 b { left: 97rem; top: 59.96rem; }
.feat--2 span { left: 97.1rem; top: 65.37rem; }
.feat--3 img { left: 127.8rem; top: 47rem; width: 5rem; }
.feat--3 i { left: 134.9rem; top: 46.7rem; }
.feat--3 b { left: 136.6rem; top: 43.86rem; }
.feat--3 span { left: 136.6rem; top: 49.17rem; }
.feat--4 img { left: 128.2rem; top: 62.9rem; width: 4.6rem; }
.feat--4 i { left: 135.1rem; top: 62.8rem; }
.feat--4 b { left: 136.9rem; top: 62.46rem; }
.feat--4 span { left: 137.3rem; top: 65.22rem; }
.quote img { position: absolute; left: 26.8rem; top: 87rem; width: 4.4rem; }
.quote p { position: absolute; left: 32.8rem; top: 88.66rem; font-style: italic; font-weight: 300; color: #6d6d6d; white-space: nowrap; }
.quote { inset: 0; pointer-events: none; }
.about__cert { left: 128.3rem; top: 76.5rem; width: 36.5rem; height: auto; }

/* ---------- 4. клиенты по миру ---------- */
.clients { height: 138rem; background-image: url(../img/bg/clients.webp); }
.clients__title { left: 27.1rem; top: 9.59rem; }
.stats { inset: 0; }
.stat { position: absolute; top: 0; width: 26rem; text-align: center; }
.stat img { margin: 0 auto; height: auto; }
.stat span { position: absolute; left: 0; right: 0; text-transform: uppercase; color: var(--lime-soft); white-space: nowrap; }
.stat--1 { left: 90.3rem; } .stat--1 img { margin-top: 7.8rem; width: 7.7rem; } .stat--1 span { top: 17.96rem; }
.stat--2 { left: 116.05rem; } .stat--2 img { margin-top: 7.5rem; width: 7.9rem; } .stat--2 span { top: 17.96rem; }
.stat--3 { left: 142.85rem; } .stat--3 img { margin-top: 7.5rem; width: 6.6rem; transform: translateX(-.15rem); } .stat--3 span { top: 17.56rem; }
.stat--1::after, .stat--2::after { content: ""; position: absolute; top: 6.9rem; height: 16.3rem; width: 1px; background: linear-gradient(#8bc700, #b3ff00 45%, #5c8100); }
.stat--1::after { left: 25.1rem; }
.stat--2::after { left: 26.85rem; }
.clients__text { left: 110.75rem; top: 28.06rem; width: 54.7rem; }
.clients__text .jl:first-child { letter-spacing: -.012em; }

.map { inset: 0; pointer-events: none; }
.map__world { display: none; } /* на десктопе карта и точки — часть фона секции */
.map__labels { position: absolute; inset: 0; }
.map__lines { position: absolute; left: 0; top: 0; width: 192rem; height: 138rem; overflow: visible; pointer-events: none; }
.map__label { position: absolute; pointer-events: auto; padding: .4rem .6rem; margin: -.4rem -.6rem; font: 400 1.88rem/1.88rem var(--sans); text-transform: uppercase; color: #fff; white-space: nowrap; transition: color .2s, text-shadow .2s; }
.map__label:hover { color: var(--lime-deep); }
.map__label.is-active { color: var(--lime-deep); text-shadow: 0 0 1.2rem rgba(176,221,7,.5); }
.map__dot { position: absolute; pointer-events: auto; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; transition: box-shadow .25s; }
.map__dot.is-mobile { display: none; }
.map__dot:hover, .map__dot.is-active { box-shadow: 0 0 0 .4rem rgba(174,255,0,.25), 0 0 2.4rem .6rem rgba(174,255,0,.55); }

.country { left: 27.2rem; top: 38rem; width: 69rem; height: 93.9rem; background: url(../img/map/card.webp) 0 0 / 100% 100% no-repeat; opacity: 0; visibility: hidden; transform: translateY(1.6rem); transition: opacity .25s, visibility .25s, transform .25s; }
/* карточка появляется при наведении на страну; для стран под карточкой она уходит вправо */
.clients.is-open .country { opacity: 1; visibility: visible; transform: none; }
.country.country--right { left: 100rem; }
.country { isolation: isolate; }
.country::before { content: ""; position: absolute; inset: .4rem; z-index: -1; border-radius: 3.6rem; background: rgba(0,0,0,.75); } /* фон карточки полупрозрачный — глушим карту под ней */
.country > * { position: absolute; }
.country__head { inset: 0 auto auto 0; }
.country__flag { position: absolute; height: auto; }
.country__title { position: absolute; left: 10.6rem; top: 3.37rem; font: 400 6.58rem/6.58rem var(--bebas); letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.country__clients { left: 3.1rem; top: 11.53rem; }
.country__clients li { height: 3.29rem; }
.country__clients button { display: flex; align-items: center; gap: .5rem; font: 600 2.19rem/3.29rem var(--fira); --fb: 0; white-space: nowrap; transition: color .2s; }
.country__clients button::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; transition: background-color .2s; }
.country__clients button:hover, .country__clients .is-active { color: var(--lime-pale); }
.country__clients button:hover::before, .country__clients .is-active::before { background: var(--lime-pale); }
.country__photo { inset: 0; pointer-events: none; }
.country__photo img { position: absolute; height: auto; transition: opacity .3s; }
.country.is-switching .country__photo img, .country.is-switching .country__head, .country.is-switching .country__clients, .country.is-switching .country__client { opacity: 0; }
.country__head, .country__clients, .country__client { transition: opacity .25s; }
.country__client, .country-nav { display: none; } /* подпись клиента и стрелки — только в мобильной версии */

/* ---------- бегущая строка ---------- */
.brands { height: 30rem; overflow: hidden; background-image: url(../img/bg/brands.webp); }
.marquee { position: absolute; left: 0; right: 0; overflow: hidden; }
.marquee--1 { top: 6.6rem; height: 7.4rem; }
.marquee--2 { top: 16rem; height: 7rem; }
.marquee__track { display: flex; width: max-content; align-items: flex-start; animation: marquee 48s linear infinite; }
.marquee--2 .marquee__track { animation-direction: reverse; }
.marquee__track img { height: auto; width: calc(var(--w) * 1rem); margin: calc(var(--y) * .1rem) 4.8rem 0 0; mix-blend-mode: screen; }
.brands:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- 5. что мы разрабатываем ---------- */
.works { height: 170rem; background-image: url(../img/bg/works.webp); }
.works__title { left: 27.1rem; top: 15.89rem; white-space: nowrap; letter-spacing: .005em; }
.works__lead { left: 27.3rem; top: 23.51rem; line-height: 3.6rem; white-space: nowrap; }
.works__tabs { left: 27.1rem; top: 44.8rem; width: 58.2rem; display: flex; flex-direction: column; z-index: 2; }
.wcard { position: relative; display: block; width: 58.2rem; height: 18.4rem; padding: 0 0 0 4.5rem; text-align: left; border-radius: 3.4rem; border: .2rem solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); color: rgba(252,255,255,.4); transition: color .3s, border-color .3s, background-color .3s; }
.wcard--2, .wcard--4 { margin-top: 5rem; } /* интервалы как в макете: 234 / 227 / 234 */
.wcard--3 { margin-top: 4.3rem; }
.wcard::before { content: ""; position: absolute; inset: -.2rem; border-radius: inherit; background: linear-gradient(#acfd00 0%, #5d8913 40%, #34481a 62%, #101410 85%, #070707 100%); opacity: 0; transition: opacity .3s; }
.wcard > * { position: absolute; left: 4.5rem; }
.wcard b { top: 2.76rem; font: 400 4.8rem/3.8rem var(--bebas); letter-spacing: .026em; text-transform: uppercase; white-space: nowrap; --fb: .02em; }
.wcard.wcard--1 span { top: 8.52rem; }
.wcard span { top: 7.72rem; white-space: nowrap; }
.wcard:hover { color: rgba(252,255,255,.8); border-color: rgba(255,255,255,.7); }
.wcard.is-active { color: #fcffff; border-color: transparent; background: transparent; }
.wcard.is-active::before { opacity: 1; }
.works__dots { display: none; } /* точки слайдера направлений — только в мобильной версии */
.gallery { inset: 0; pointer-events: none; z-index: 1; }
.gallery img { position: absolute; height: auto; transition: opacity .35s; }
.gallery img.is-hidden { opacity: 0; }
.gallery__nav { left: 122.5rem; top: 150.6rem; display: flex; gap: 1.5rem; z-index: 2; }
.arrow { position: relative; width: 9.4rem; height: 9.4rem; border-radius: 1.8rem; background: #686868; transition: background-color .2s, transform .2s; }
.arrow--next { background: #bafa00; }
.arrow::after { content: ""; position: absolute; inset: 0; background: url(../img/ui/arrow-left.png) center / 4.8rem no-repeat; }
.arrow--next::after { background-image: url(../img/ui/arrow-right.png); }
.arrow:hover { transform: translateY(-.3rem); }
.arrow--prev:hover { background: #7a7a7a; }
.arrow--next:hover { background: #c9ff3a; }

/* ---------- 6. пакеты ---------- */
.prices { height: 114rem; background-image: url(../img/bg/prices.webp); }
.prices__title { left: 0; width: 192.8rem; top: 8.08rem; font: 400 12.34rem/12.34rem var(--bebas); letter-spacing: .024em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.plans { inset: 0; }
.plan { position: absolute; top: 14.6rem; width: 43.3rem; height: 48.5rem; background: no-repeat 0 0 / 100% 100%; text-transform: uppercase; letter-spacing: .01em; }
.plan--1 { left: 27.5rem; background-image: url(../img/ui/price-1.webp); }
.plan--2 { left: 75rem; background-image: url(../img/ui/price-2.webp); }
.plan--3 { left: 122.4rem; top: 14.4rem; height: 48.7rem; width: 43.4rem; background-image: url(../img/ui/price-3.webp); }
.plan > * { position: absolute; }
.plan__name { left: 0; right: 0; top: 5.87rem; text-align: center; }
.plan__list { left: 3.5rem; top: 11.46rem; font-weight: 300; line-height: 5.5rem; letter-spacing: .035em; white-space: nowrap; }
.plan--1 .plan__name, .plan--1 .plan__list, .plan--3 .plan__name, .plan--3 .plan__list { opacity: .5; }
.plan--2 .plan__name { font-weight: 700; }
.plan--2 .plan__list { left: 8.4rem; }
.plan--2 .plan__list li { position: relative; }
.plan--2 .plan__list li::before { content: ""; position: absolute; left: -2.9rem; top: 2.24rem; width: 1.2rem; height: 1.2rem; background: url(../img/ui/check.png) 0 0 / 100% no-repeat; }
.plan--3 .plan__list { left: 7.9rem; top: 11.76rem; }
.plan--3 .plan__name { top: 6.07rem; }
.plan__btn { left: 6.6rem; top: 41.4rem; width: 26.9rem; height: 4.9rem; letter-spacing: 0; }
.plan--2 .plan__btn { left: 8.2rem; }
.plan--3 .plan__btn { left: 8.3rem; top: 41.6rem; }

/* ---------- 7. FAQ ---------- */
.faq { min-height: 88rem; background-image: url(../img/bg/faq.webp); }
.faq .c { min-height: 88rem; }
.faq__title { left: 27.1rem; top: 10.09rem; letter-spacing: .005em; }
.faq__lead { left: 27.2rem; top: 18.29rem; line-height: 2.25rem; text-transform: uppercase; color: var(--lime-pale); }
.faq__list { position: relative !important; margin-left: 79.8rem; padding: 6.9rem 0 2.2rem; width: 85.7rem; display: flex; flex-direction: column; gap: 1.38rem; }
.qa { border-radius: 3.2rem; border: 1px solid rgba(160,160,160,.5); background: rgba(40,34,36,.5); transition: border-color .25s, background-color .25s; }
.qa[open] { border-color: rgba(174,255,0,.45); background: rgba(40,40,36,.7); }
.qa summary { position: relative; display: block; height: 11.8rem; padding: 4.41rem 12rem 0 4.6rem; cursor: pointer; list-style: none; color: #fcffff; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 4.4rem; top: 3.8rem; width: 4.1rem; height: 4.1rem; background: url(../img/ui/plus.png) 0 0 / 100% no-repeat; transition: transform .3s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--lime-pale); }
.qa__a { padding: 0 12rem 3.6rem 4.6rem; margin-top: -2rem; font-weight: 300; color: rgba(255,255,255,.8); }

/* ---------- 8. заявка ---------- */
.contact { height: 106rem; background-image: url(../img/bg/contact.webp); }
.contact__title { left: 27.1rem; top: 41.89rem; white-space: nowrap; letter-spacing: .005em; }
.contact__title span { background: linear-gradient(90deg, #fff 0, #fff 52%, #d7ecc4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact__lead { left: 27.2rem; top: 56.16rem; color: var(--lime-deep); font-size: 1.87rem; white-space: nowrap; }
.contact__tg { left: 30.2rem; top: 73rem; width: 35.7rem; height: 6.6rem; font-size: 1.87rem; letter-spacing: .02em; }
.form { left: 98.5rem; top: 41.9rem; width: 67rem; height: 52.1rem; border: .3rem solid #fff; border-radius: 4.2rem; background: #000; }
.form__f { position: absolute; left: 3.1rem; width: 59.8rem; }
.form__f:nth-of-type(1) { top: 2.9rem; }
.form__f:nth-of-type(2) { top: 12.6rem; }
.form__f--area { top: 22.3rem; width: 60rem; }
.form input, .form textarea { display: block; width: 100%; height: 8.1rem; padding: 0 2.3rem; border-radius: 3.6rem; border: 1px solid rgba(249,249,249,.25); background: rgba(101,101,101,.27); color: #fcffff; font: 400 2.2rem/7.3rem var(--sans); padding-bottom: .6rem; outline: none; transition: border-color .2s, background-color .2s; }
.form textarea { height: 16.1rem; padding-top: 1.9rem; line-height: 3rem; resize: none; }
.form ::placeholder { color: #fcffff; opacity: 1; }
.form input:focus, .form textarea:focus { border-color: var(--lime); background: rgba(101,101,101,.4); }
.form .is-invalid { border-color: #ff5c5c; }
.form__btn { position: absolute; left: 19.4rem; top: 42.7rem; width: 27.7rem; height: 6rem; font-size: 1.87rem; }
.form__msg { position: absolute; left: 0; right: 0; top: 49.6rem; font-size: 1.5rem; line-height: 2rem; text-align: center; color: var(--lime); }
.form__msg.is-error { color: #ff7a7a; }
.form.is-sent .form__f, .form.is-sent .form__btn { visibility: hidden; }
.form.is-sent .form__msg { top: 50%; transform: translateY(-50%); padding: 0 6rem; font-size: 2.2rem; line-height: 3.2rem; color: #fff; }

/* ---------- подвал ---------- */
.footer { height: 50.9rem; background: #000; font-weight: 300; font-size: 1.4rem; line-height: 1.9rem; letter-spacing: .028em; }
.footer__logo { left: 12rem; top: 4.6rem; width: 17rem; height: auto; }
.footer__about { left: 12rem; top: 16.61rem; white-space: nowrap; }
.footer__col h3 { font-weight: 300; }
.footer__col ul { margin-top: 1.9rem; }
.footer__col--services { left: 84.8rem; top: 12.71rem; }
.footer__col--contacts { left: 157.3rem; top: 12.71rem; white-space: nowrap; }
.footer__col a:hover, .footer__policy a:hover { color: var(--lime); }
.footer__soc { position: absolute; left: -.2rem; top: 12.69rem; display: flex; gap: 2.5rem; }
.footer__soc img { width: 2.2rem; height: 2.2rem; }
.footer__policy { left: 12rem; top: 28.21rem; }

/* ====================================================================
   Мобильная версия
   ==================================================================== */
@media (max-width: 1023px) {
  html { font-size: min(100vw / 37.5, 16px); }
  body { font-size: 1.5rem; line-height: 2.2rem; }
  .s { background-size: cover; }
  .c { width: auto; max-width: 64rem; margin: 0 auto; left: 0; padding: 0 1.6rem; height: auto; }
  .s .c > *, .header .c > * { position: static; inset: auto; }
  .d { display: none; }
  .jl { display: inline; white-space: normal; text-align: left; text-align-last: auto !important; }
  .h2 { font-size: 4.2rem; line-height: 4rem; }
  .lead { font-size: 1.4rem; line-height: 2rem; }
  .btn { font-size: 1.5rem; height: 5.2rem; padding: 0 2.4rem; }

  /* шапка */
  .header { position: sticky; top: 0; height: 6.4rem; background: none; }
  /* размытие на псевдоэлементе: backdrop-filter на самой шапке сломал бы position: fixed у меню */
  .header::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .topbar { display: none; }
  .navbar { inset: 0; }
  .navbar::after { top: auto; bottom: 0; }
  .navbar .c { top: 0; height: 6.4rem; display: flex; align-items: center; gap: 1.2rem; max-width: none; }
  .logo { width: 7.4rem; margin-right: auto; }
  .by-fursov { width: 9.6rem; }
  .burger { position: relative !important; display: block; width: 4.4rem; height: 4.4rem; margin-right: -.8rem; }
  .burger span, .burger span::before, .burger span::after { position: absolute; left: 1rem; width: 2.4rem; height: 2px; background: #fff; transition: transform .25s, opacity .25s; }
  .burger span { top: 2.1rem; }
  .burger span::before, .burger span::after { content: ""; left: 0; }
  .burger span::before { top: -.8rem; }
  .burger span::after { top: .8rem; }
  .is-menu .burger span { background: transparent; }
  .is-menu .burger span::before { transform: translateY(.8rem) rotate(45deg); }
  .is-menu .burger span::after { transform: translateY(-.8rem) rotate(-45deg); }
  .header .nav { position: fixed !important; inset: 6.4rem 0 0; z-index: 30; display: flex; flex-direction: column; gap: .4rem; padding: 2.4rem 1.6rem 4rem; overflow-y: auto; background: #000; opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .is-menu .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  .is-menu { overflow: hidden; }
  .nav__a { position: static; font: 400 3.2rem/4.4rem var(--bebas); letter-spacing: .02em; text-transform: uppercase; }
  .nav__contacts { display: flex; flex-direction: column; gap: .6rem; margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid #282013; font-size: 1.5rem; }
  .nav__contacts span { color: var(--gold); }

  /* первый экран */
  .hero { height: auto; padding: 5.6rem 0 6rem; background-position: 72% 0; }
  .hero .c { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero__title { width: auto; font-size: 5.8rem; line-height: 5.4rem; }
  .hero__badge { position: relative !important; width: 20rem; margin: -1.2rem 0 0 10rem; }
  .hero__badge span { left: 10.25rem; top: 4.9rem; font-size: 4.34rem; }
  .hero__sub { width: auto; margin-top: 2.4rem; font-size: 1.5rem; line-height: 2.2rem; }
  .hero__btn1, .hero__btn2 { width: 100%; max-width: 34rem; height: 5.2rem; }
  .hero__btn1 { margin-top: 3.2rem; }
  .hero__btn2 { margin-top: 1.2rem; }

  /* шаги */
  .steps { height: auto; padding: 4rem 0 5rem; background-position: center top; }
  .steps .c { text-align: center; }
  .steps__title, .steps__lead { width: auto; }
  .steps__lead { margin-top: 1.6rem; }
  .steps__list { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem 1.6rem; margin-top: 3.6rem; }
  .step, .step > * { position: static; width: auto; height: auto; }
  .step { display: flex; flex-direction: column; align-items: center; }
  .step .step__num { width: auto; height: 10.4rem; }
  .step .step__line { width: 9rem; margin: 1.2rem 0 1.4rem; }
  .step__t { font-size: 3.4rem; line-height: 3.4rem; }
  .step__d { margin-top: .6rem; }

  /* о руководителе */
  .about { height: auto; padding: 2rem 0 5rem; background: #000; }
  .about .c { display: flex; flex-direction: column; }
  .about__photo { display: block; width: calc(100% + 3.2rem); max-width: none; height: auto; margin: 0 -1.6rem; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
  .about__name { margin-top: -2rem; white-space: normal; }
  .about__role { margin-top: .8rem; white-space: normal; }
  .about__text { width: auto; margin-top: 1.6rem; text-align: left; text-align-last: auto; }
  .feats, .feat, .feat > * { position: static; }
  .feats { display: grid; gap: 2.4rem; margin-top: 3.2rem; }
  .feat { display: grid; grid-template-columns: 4.4rem 2px 1fr; grid-template-rows: auto auto; column-gap: 1.4rem; align-items: start; }
  .feat img { grid-row: 1 / 3; width: 4.4rem !important; height: auto; margin-top: .4rem; }
  .feat i { grid-row: 1 / 3; width: 2px; height: 100%; min-height: 4.4rem; }
  .feat b, .feat span { grid-column: 3; white-space: normal; }
  .feat b { font-size: 1.4rem; line-height: 2rem; }
  .quote { position: relative !important; margin-top: 4rem; padding-left: 5.4rem; }
  .quote img { left: 0; top: .2rem; width: 3.8rem; }
  .quote p { position: static; white-space: normal; color: #8a8a8a; }
  .about__cert { width: 100%; max-width: 36.5rem; margin: 3.2rem auto 0; }

  /* клиенты */
  .clients { height: auto; padding: 4rem 0 5rem; background: #000; }
  .clients__title { font-size: 4rem; }
  .stats { display: grid; grid-template-columns: 1fr 1fr 1.3fr; margin-top: 3.2rem; }
  .stat, .stat span { position: static; width: auto; }
  .stat { display: flex; flex-direction: column; align-items: center; padding: 0 .4rem; }
  .stat:not(:last-child) { border-right: 1px solid var(--lime); }
  .stat::after { display: none; }
  .stat img { margin: 0 0 1rem !important; width: 4.4rem !important; transform: none !important; }
  .stat span { font-size: 1.15rem; line-height: 1.6rem; white-space: normal; }
  .clients__text { width: auto; margin-top: 2.8rem; text-align: left; text-align-last: auto; }
  .map { position: relative !important; margin: 2.4rem -1.6rem 0; aspect-ratio: 780 / 528; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
  .map__world { display: block; position: absolute; inset: 0; width: 100%; height: 100%; --fade: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent); -webkit-mask: var(--fade); -webkit-mask-composite: source-in; mask: var(--fade); mask-composite: intersect; }
  .map__label, .map__lines, .map__dot.is-desktop { display: none; }
  .map__dot.is-mobile { display: block; }
  /* точки уже нарисованы на картинке; кнопки лежат поверх них, касание выбирает ближайшую */
  .map__dot { left: var(--mx) !important; top: var(--my) !important; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; }
  .map__dot:hover { box-shadow: none; }
  .map__dot.is-active { box-shadow: 0 0 0 .3rem rgba(174,255,0,.3), 0 0 1.6rem .4rem rgba(174,255,0,.6); }
  /* карточка как в мобильном макете: страна, фото, клиент; листается стрелками */
  .country { position: relative !important; width: auto; height: auto; opacity: 1; visibility: visible; transform: none; margin: 1.2rem .5rem 0; padding: 1.2rem 4.2rem 1.5rem; border: 1px solid rgba(190,255,0,.55); border-radius: 1.6rem; background: #000; box-shadow: inset 0 0 2.4rem rgba(174,255,0,.45), 0 0 1.6rem rgba(174,255,0,.2); text-align: center; touch-action: pan-y; }
  .country > *, .country__title { position: static; }
  .country::before, .country__flag, .country__clients { display: none; }
  .country__title { font: 600 1.3rem/1.6rem var(--sans); --fb: 0; letter-spacing: .02em; color: var(--lime-text); white-space: normal; }
  .country__photo { position: relative !important; margin-top: 1.6rem; aspect-ratio: 247 / 162; background: #fff; overflow: hidden; }
  .country__photo img { position: absolute; inset: 0 !important; width: 100% !important; height: 100%; object-fit: contain; }
  /* фото не на белом фоне вписываем целиком, поля заполняем размытой копией */
  .country__photo::before { content: ""; position: absolute; inset: -2rem; background: var(--ph) center / cover no-repeat; filter: blur(1.4rem) brightness(.85); opacity: 0; transition: opacity .3s; }
  .country__photo.is-blur::before { opacity: 1; }
  .country__client { display: block; margin-top: 1.1rem; font-size: 1.2rem; line-height: 1.6rem; overflow-wrap: anywhere; }
  .country-nav { display: flex; position: static !important; justify-content: center; gap: 1.6rem; margin-top: 2rem; }
  .country-nav .arrow { width: 5rem; height: 5rem; border-radius: 1.2rem; background: #bafa00; }
  .country-nav .arrow::after { background-size: 2.6rem; }

  /* бегущая строка */
  .brands { height: auto; padding: 2.4rem 0; }
  .marquee { position: relative; top: auto !important; height: auto; }
  .marquee + .marquee { margin-top: 1.6rem; }
  .marquee__track { align-items: center; animation-duration: 36s; }
  .marquee__track img { width: calc(var(--w) * .5rem); margin: 0 2.8rem 0 0; }

  /* что мы разрабатываем */
  .works { height: auto; padding: 4rem 0 5rem; background-position: center top; }
  .works__title, .works__lead { white-space: normal; }
  .works__lead { margin-top: 1.4rem; line-height: 2rem; }
  /* направления — горизонтальный слайдер со свайпом, соседняя карточка выглядывает справа */
  .works__tabs { width: auto; flex-direction: row; gap: 1rem; margin: 2.8rem -1.6rem 0; padding: 0 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1.6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .works__tabs::-webkit-scrollbar { display: none; }
  .wcard { flex: 0 0 84%; width: auto; height: auto; margin: 0 !important; padding: 1.6rem 2rem 1.8rem; border-radius: 2.4rem; scroll-snap-align: start; }
  .works__dots { display: flex; position: static !important; justify-content: center; gap: .8rem; margin-top: 1.4rem; }
  .works__dots i { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(255,255,255,.3); transition: background-color .3s, width .3s; }
  .works__dots i.is-on { width: 2rem; border-radius: .35rem; background: #bafa00; }
  .wcard > *, .wcard b, .wcard span, .wcard.wcard--1 span { position: relative; left: 0; top: 0; display: block; }
  .wcard b { font-size: 3rem; line-height: 3rem; white-space: normal; }
  .wcard span { margin-top: .6rem; font-size: 1.35rem; line-height: 1.9rem; white-space: normal; }
  .gallery { position: relative !important; margin-top: 2.4rem; aspect-ratio: 3 / 4; }
  .gallery img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; }
  .gallery__nav { justify-content: center; margin-top: 1.6rem; }
  .arrow { width: 6rem; height: 6rem; border-radius: 1.4rem; }
  .arrow::after { background-size: 3rem; }

  /* пакеты */
  .prices { height: auto; padding: 4rem 0 5rem; background-position: center 30%; }
  .prices__title { width: auto; font-size: 4.2rem; line-height: 4rem; white-space: normal; text-align: left; }
  .plans { display: grid; gap: 1.6rem; margin-top: 2.8rem; }
  .plan, .plan > * { position: static; width: auto !important; height: auto !important; }
  .plan { display: flex; flex-direction: column; align-items: center; padding: 2.4rem 2rem; border-radius: 2.4rem; background: rgba(28,28,28,.85) none !important; border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 1.4rem; }
  .plan--2 { background: linear-gradient(#1b1d18, #121a05) !important; border-color: rgba(174,255,0,.35); }
  .plan__list { align-self: stretch; margin: 1.6rem 0 2rem; line-height: 3.6rem; white-space: normal; }
  .plan__list li { border-top: 1px solid rgba(255,255,255,.08); }
  .plan--2 .plan__list li { padding-left: 2.2rem; }
  .plan--2 .plan__list li::before { left: 0; top: 1.2rem; }
  .plan__btn { width: 100% !important; max-width: 30rem; height: 4.8rem !important; font-size: 1.5rem; }

  /* FAQ */
  .faq, .faq .c { min-height: 0; }
  .faq { padding: 4rem 0 4rem; background-position: center top; }
  .faq__lead { margin-top: 1.4rem; font-size: 1.4rem; line-height: 2rem; }
  .faq__list { margin: 2.8rem 0 0; padding: 0; width: auto; gap: 1rem; }
  .qa { border-radius: 2rem; }
  .qa summary { height: auto; min-height: 6.4rem; padding: 2.1rem 6.4rem 2.1rem 2rem; font-size: 1.5rem; line-height: 2.2rem; }
  .qa summary::after { right: 1.8rem; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; }
  .qa__a { padding: 0 2rem 2rem; margin: 0; font-size: 1.4rem; line-height: 2.1rem; }

  /* заявка */
  .contact { height: auto; padding: 13rem 0 4rem; background-position: 50% -1rem; background-size: 260% auto; }
  .contact .c { display: flex; flex-direction: column; }
  .contact__title { font-size: 4rem; line-height: 4rem; white-space: normal; }
  .contact__lead { margin-top: 1.6rem; white-space: normal; font-size: 1.4rem; }
  .contact__tg { order: 3; width: 100%; height: 5.2rem; margin-top: 1.6rem; font-size: 1.4rem; }
  .form { position: relative !important; width: auto; height: auto; margin-top: 2.8rem; padding: 2rem 1.6rem; border-width: 2px; border-radius: 2.8rem; display: flex; flex-direction: column; gap: 1.2rem; }
  .form__f, .form__btn, .form__msg { position: static !important; width: auto !important; }
  .form input { height: 5.6rem; line-height: 5.4rem; font-size: 1.6rem; padding: 0 2rem; border-radius: 2.8rem; }
  .form textarea { height: 12rem; padding: 1.6rem 2rem; line-height: 2.2rem; font-size: 1.6rem; border-radius: 2.4rem; }
  .form__btn { height: 5.2rem; margin-top: .8rem; font-size: 1.5rem; }
  .form__msg:empty { display: none; }
  .form.is-sent .form__f, .form.is-sent .form__btn { display: none; }
  .form.is-sent .form__msg { transform: none; padding: 4rem 1rem; font-size: 1.8rem; line-height: 2.6rem; }

  /* подвал */
  .footer { height: auto; padding: 4rem 0 3rem; font-size: 1.3rem; line-height: 1.9rem; border-top: 1px solid #141414; }
  .footer .c { display: grid; gap: 2.8rem; }
  .footer__logo { width: 13rem; }
  .footer__about { white-space: normal; }
  .footer__col { position: relative !important; }
  .footer__col h3 { font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: var(--lime-text); }
  .footer__col ul { margin-top: 1rem; }
  .footer__col li + li { margin-top: .4rem; }
  .footer__col--contacts { white-space: normal; }
  .footer__soc { position: static; margin-top: 1.6rem; gap: 2rem; }
  .footer__soc img { width: 2.8rem; height: 2.8rem; }
  .footer__policy { color: #8a8a8a; }
}