/* ==========================================================================
   IT Boss — Landing styles
   База: дизайн-система из prototype_landing.html (тёмная тема, neon cyan/violet)
   Дополнено: адаптивность per TZ, a11y, реальные изображения, security states
   ========================================================================== */
:root{
  /* Высота фиксированного верхнего меню (шапка + scroll-padding) */
  --nav-h:46px;
  --bg:#09090B; --bg2:#111111; --bg3:#1A1A1A; --hero:#0B1F3A;
  --tx:#FAFAFA; --tx2:#A1A1AA; --tx3:#71717A;
  --cyan:#06B6D4; --blue:#1AB2FF; --violet:#8B5CF6; --green:#10B981; --pink:#EC4899; --amber:#F59E0B;
  --grad:linear-gradient(135deg,#8B5CF6 0%,#06B6D4 100%);
  --grad-accent:linear-gradient(135deg,#1AB2FF 0%,#06B6D4 50%,#8B5CF6 100%);
  --grad-warm:linear-gradient(135deg,#EC4899 0%,#8B5CF6 100%);
  --grad-ai:linear-gradient(135deg,#06B6D4 0%,#8B5CF6 50%,#EC4899 100%);
  --bd:rgba(255,255,255,.08); --bd-a:rgba(6,182,212,.35);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
/* Страховка от горизонтального скролла на любом экране */
html,body{max-width:100%;overflow-x:hidden}
body{
  background:var(--bg); color:var(--tx);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden; margin:0;
}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(2rem,5vw,4rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.5vw,2.75rem);font-weight:600}
h3{font-size:clamp(1.1rem,1.6vw,1.6rem);font-weight:600}
p{color:var(--tx2);line-height:1.65}
a{color:var(--cyan);text-decoration:none}
.container-x{max-width:1280px;margin:0 auto;padding:0 24px}

/* ==========================================================================
   РИТМ ЭКРАНОВ
   Каждый экран занимает не более одной высоты десктопного окна.
   max-height страхует от переполнения, но НЕ обрезает контент
   (min-height:auto + overflow:visible), поэтому длинные экраны
   просто растут вниз на мобильных.
   ========================================================================== */
section{
  position:relative;
  min-height:calc(100vh - var(--nav-h));
  max-height:calc(100vh - var(--nav-h));
  overflow:visible;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,3.4vh,54px) 0;
}
@media(max-width:991px){
  section{max-height:none;display:block;padding:56px 0}
}

/* ===== GLOBAL BACKGROUND GRID ===== */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(139,92,246,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}

/* ===== PARTICLES ===== */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--cyan);opacity:.5;
  box-shadow:0 0 8px var(--cyan);
  animation:floatParticle 12s linear infinite;
}
.particles span:nth-child(1){left:10%;top:20%;animation-delay:0s}
.particles span:nth-child(2){left:30%;top:60%;animation-delay:2s;background:var(--violet);box-shadow:0 0 8px var(--violet)}
.particles span:nth-child(3){left:50%;top:30%;animation-delay:4s}
.particles span:nth-child(4){left:70%;top:70%;animation-delay:1s;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.particles span:nth-child(5){left:85%;top:40%;animation-delay:3s;background:var(--violet);box-shadow:0 0 8px var(--violet)}
.particles span:nth-child(6){left:20%;top:80%;animation-delay:5s}
.particles span:nth-child(7){left:60%;top:15%;animation-delay:6s;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.particles span:nth-child(8){left:90%;top:80%;animation-delay:7s}
@keyframes floatParticle{
  0%,100%{transform:translate(0,0);opacity:.2}
  50%{transform:translate(30px,-40px);opacity:.8}
}

/* Ambient orbs */
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;z-index:0}
.orb-1{width:520px;height:520px;background:var(--violet);top:-160px;right:-120px;animation:float1 24s ease-in-out infinite}
.orb-2{width:420px;height:420px;background:var(--cyan);bottom:-140px;left:-120px;animation:float2 30s ease-in-out infinite}
.orb-3{width:360px;height:360px;background:var(--pink);top:40%;right:-100px;animation:float1 28s ease-in-out infinite;opacity:.2}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,80px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-80px)}}

/* Отладочный переключатель сегментов (только локально).
   Позиционируется ПОД фиксированной шапкой и не влияет на её слот. */
.segment-bar{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:940;
  background:rgba(9,9,11,.85);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
  padding:7px 16px;
  display:flex;gap:6px;overflow-x:auto;align-items:center;
  scrollbar-width:none;
}
.segment-bar::-webkit-scrollbar{display:none}
.segment-bar .label{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tx3);margin-right:8px;white-space:nowrap;font-weight:600;
}
.seg-btn{
  background:transparent;border:1px solid var(--bd);
  color:var(--tx2);border-radius:999px;padding:5px 12px;
  font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:all .25s ease;
}
.seg-btn:hover{border-color:var(--bd-a);color:var(--tx)}
.seg-btn.active{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 0 20px rgba(139,92,246,.35);
}
/* Основной контент начинается под фиксированной шапкой */
body{padding-top:var(--nav-h)}
/* На мобильном варианты сегмента не выводим, шапка остаётся фиксированной */
@media(max-width:991px){
  .segment-bar--debug{display:none}
  .navbar-x{position:fixed;top:0;height:var(--nav-h)}
}

/* ===== LOGO IT Boss — метафора: чип + корона ======= */
.logo{
  display:flex;align-items:center;gap:12px;
  font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--tx);
  position:relative;
}
.logo-mark{
  width:44px;height:44px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark svg{width:100%;height:100%;filter:drop-shadow(0 0 12px rgba(6,182,212,.5))}
.logo-mark .crown{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  animation:crownPulse 3s ease-in-out infinite;
}
@keyframes crownPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(236,72,153,.6))}
  50%{filter:drop-shadow(0 0 18px rgba(236,72,153,.9))}
}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text .l1{font-size:20px;font-weight:700}
.logo-text .l2{font-size:9px;letter-spacing:.15em;color:var(--cyan);text-transform:uppercase;margin-top:2px}

/* Navbar — узкая по высоте, только ссылки */
.navbar-x{
  position:fixed;top:0;left:0;right:0;z-index:950;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(9,9,11,.82);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd);
}
.navbar-x .inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;padding-top:0;padding-bottom:0;
}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--tx2);font-size:14px;font-weight:500;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--cyan)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--cyan);transition:width .3s;
}
.nav-links a:hover::after{width:100%}
/* Компактная кнопка «Задать вопрос» в шапке */
.btn-ask{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bd-a);background:rgba(6,182,212,.10);
  color:var(--cyan);font-size:13px;font-weight:600;font-family:inherit;
  transition:all .25s ease;white-space:nowrap;
}
.btn-ask:hover{background:rgba(6,182,212,.2);box-shadow:0 0 24px rgba(6,182,212,.28)}
.btn-ask i{font-size:14px}
@media(max-width:900px){.nav-links{display:none}}

/* Buttons */
.btn-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--grad);background-size:200% 200%;
  color:#fff;font-weight:600;font-size:16px;
  padding:16px 32px;border-radius:999px;border:none;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
  animation:gradShift 4s ease infinite;
  box-shadow:0 0 0 rgba(139,92,246,0);
}
.btn-cta::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .6s;
}
.btn-cta:hover::before{left:100%}
.btn-cta:hover{
  transform:translateY(-2px) scale(1.02);color:#fff;
  box-shadow:0 12px 40px rgba(139,92,246,.4),0 0 60px rgba(6,182,212,.25);
}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--tx);
  border:1px solid var(--bd);padding:15px 28px;border-radius:999px;
  font-weight:500;font-size:15px;cursor:pointer;
  transition:all .25s;
}
.btn-ghost:hover{border-color:var(--bd-a);color:var(--cyan);background:rgba(6,182,212,.05)}
.btn-sm{padding:10px 22px;font-size:14px}

/* ===== IMG PLACEHOLDER ===== */
.img-ph{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(6,182,212,.1));
  border:1px solid var(--bd);
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  transition:all .4s;
}
.img-ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%,rgba(139,92,246,.25),transparent 60%),
    radial-gradient(circle at 70% 70%,rgba(6,182,212,.2),transparent 60%);
  animation:imgGlow 6s ease-in-out infinite;
}
@keyframes imgGlow{0%,100%{opacity:.7}50%{opacity:1}}
.img-ph::after{
  content:"";position:absolute;inset:0;
  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:32px 32px;
  mask-image:radial-gradient(ellipse at center,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 80%);
}
.img-ph .ph-icon{
  font-size:64px;color:rgba(255,255,255,.15);
  position:relative;z-index:1;
  animation:phIconFloat 5s ease-in-out infinite;
}
@keyframes phIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2deg)}}
.img-ph .ph-label{
  position:absolute;bottom:8px;left:8px;right:8px;
  font-size:10px;color:rgba(255,255,255,.5);
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  padding:6px 10px;border-radius:6px;
  font-family:monospace;line-height:1.4;
  z-index:2;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  transition:all .3s;
}
.img-ph .ph-label::before{content:"рџЋЁ ";opacity:.7}
.img-ph:hover .ph-label{-webkit-line-clamp:8;color:rgba(255,255,255,.8)}
.img-ph:hover{transform:translateY(-4px);border-color:var(--bd-a);box-shadow:0 20px 60px rgba(6,182,212,.15)}
.img-ph.square{aspect-ratio:1/1}
.img-ph.tall{aspect-ratio:4/5}
.img-ph.wide{aspect-ratio:21/9}

/* Cards */
.card-glass{
  background:rgba(17,17,17,.55);
  backdrop-filter:blur(20px);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:28px;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;height:100%;
}
.card-glass::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(6,182,212,.5),transparent);
  opacity:0;transition:opacity .3s;
}
.card-glass:hover::before{opacity:1}
.card-glass:hover{
  transform:translateY(-6px);
  border-color:var(--bd-a);
  box-shadow:0 20px 60px rgba(6,182,212,.15),0 0 40px rgba(139,92,246,.1);
}
.card-glass .img-ph{margin-bottom:20px;aspect-ratio:16/10}
.card-glass h3{font-size:19px;margin-bottom:10px;color:var(--tx)}
.card-glass p{font-size:15px;color:var(--tx2);margin:0}

/* Badge — на лендинге скрыт (п. ТЗ: убрать pill с верха каждого экрана) */
.pill{display:none!important}

/* ==========================================================================
   HERO — главный экран
   Фон: горизонтальная картинка (объект справа, свободный фон слева).
   Текст: слева на десктопе. На мобильном — картинка как фон, текст по центру.
   ========================================================================== */
.hero{
  min-height:calc(100vh - var(--nav-h));
  max-height:none;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:clamp(20px,3vh,44px) 0;
  background-color:var(--bg);
  background-image:
    linear-gradient(90deg,rgba(9,9,11,.97) 0%,rgba(9,9,11,.92) 22%,rgba(9,9,11,.72) 40%,rgba(9,9,11,.40) 58%,rgba(9,9,11,.30) 100%),
    linear-gradient(180deg,rgba(9,9,11,.65) 0%,rgba(9,9,11,0) 26%,rgba(9,9,11,0) 62%,rgba(9,9,11,.92) 100%),
    image-set(url("../img/hero-desk.webp") type("image/webp"), url("../img/hero-desk.jpg") type("image/jpeg"));
  background-size:cover,cover,cover;
  background-position:center right,center,center right;
  background-repeat:no-repeat;
}
/* Локальный сервер (XAMPP) может не поддерживать image-set — усиливаем фон через <img> */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,9,11,.96) 0%,rgba(9,9,11,.90) 24%,rgba(9,9,11,.66) 44%,rgba(9,9,11,.34) 64%,rgba(9,9,11,.26) 100%),
    linear-gradient(180deg,rgba(9,9,11,.55) 0%,rgba(9,9,11,0) 26%,rgba(9,9,11,0) 60%,rgba(9,9,11,.92) 100%);
}
/* Текстовая колонка */
.hero-inner{
  max-width:min(640px,54%);margin:0;text-align:left;
  position:relative;z-index:3;
}
.hero h1{
  background:linear-gradient(180deg,#FAFAFA 60%,#A1A1AA 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:clamp(1.75rem,3.5vw,3.4rem);
  margin-bottom:clamp(12px,2vh,22px);
}
.hero h1 .accent{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:clamp(15px,1.25vw,17px);
  max-width:58ch;margin:0 0 clamp(14px,2.2vh,30px);color:var(--tx2);
}
.hero-cta-row{
  display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;
  margin-bottom:clamp(10px,1.6vh,18px);
}
.hero-note{font-size:14px;color:var(--tx3);margin:0 0 8px}
.trust-line{
  display:flex;flex-wrap:wrap;gap:18px 24px;justify-content:flex-start;
  margin-top:clamp(12px,2vh,26px);font-size:14px;color:var(--tx2);
}
.trust-line span{display:flex;align-items:center;gap:8px}
.trust-line i{color:var(--cyan)}

/* Плавающие карточки не должны налезать на текст — держим их в правой зоне */
.float-cards{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.float-card{
  position:absolute;background:rgba(17,17,17,.7);backdrop-filter:blur(20px);
  border:1px solid var(--bd);border-radius:14px;padding:14px 18px;
  font-size:13px;color:var(--tx2);display:flex;align-items:center;gap:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation:floatUp 6s ease-in-out infinite;
}
.float-card i{color:var(--cyan);font-size:16px}
.float-card .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:pulseDot 2s ease-in-out infinite;
}
.float-card.fc-1{top:14%;right:32%;animation-delay:0s}
.float-card.fc-2{top:26%;right:5%;animation-delay:1.5s}
.float-card.fc-3{bottom:20%;right:28%;animation-delay:3s}
.float-card.fc-4{bottom:30%;right:4%;animation-delay:2s}
@media(max-width:1400px){.float-card.fc-1,.float-card.fc-3{display:none}}
@media(max-width:1100px){.float-card{display:none}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 10px var(--green)}50%{box-shadow:0 0 20px var(--green)}}

.scroll-arrow{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:var(--tx3);font-size:24px;animation:pulseDown 2s ease-in-out infinite;
}
@keyframes pulseDown{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,10px);opacity:1}}

/* Section header */
.sec-head{text-align:center;max-width:760px;margin:0 auto 64px}
.sec-head p{font-size:17px;margin-top:16px}
.sec-head .pill{margin-bottom:20px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{
  background:rgba(17,17,17,.5);backdrop-filter:blur(20px);
  border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:24px;position:relative;
  transition:all .35s;
}
.step:hover{border-color:var(--bd-a);transform:translateY(-6px);box-shadow:0 20px 40px rgba(6,182,212,.1)}
.step .img-ph{margin-bottom:16px;aspect-ratio:16/10}
.step-num{
  position:absolute;top:-14px;left:24px;
  width:40px;height:40px;border-radius:50%;
  background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;
  box-shadow:0 0 24px rgba(139,92,246,.4);
  z-index:3;
}
.step-num::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(139,92,246,.4);animation:ripple 2s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.step h4{font-size:16px;margin-bottom:8px;color:var(--tx)}
.step p{font-size:14px;margin:0;color:var(--tx2)}

/* Numbers */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:768px){.numbers{grid-template-columns:repeat(2,1fr)}}
.num-item{
  padding:36px 20px;border-radius:var(--r-lg);
  background:rgba(17,17,17,.5);border:1px solid var(--bd);
  transition:all .3s;position:relative;overflow:hidden;
}
.num-item::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(6,182,212,.15),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.num-item:hover{border-color:var(--bd-a);transform:translateY(-4px)}
.num-item:hover::after{opacity:1}
.num-value{
  font-family:'Space Grotesk';font-weight:700;
  font-size:clamp(2rem,4vw,3.2rem);
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:12px;position:relative;z-index:1;
}
.num-label{font-size:14px;color:var(--tx2);position:relative;z-index:1}

/* FAQ */
.faq-item{
  background:rgba(17,17,17,.5);border:1px solid var(--bd);
  border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;
  transition:border-color .3s;
}
.faq-item.open{border-color:var(--bd-a);box-shadow:0 10px 40px rgba(6,182,212,.1)}
.faq-q{
  padding:22px 28px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:600;font-size:16px;color:var(--tx);
}
.faq-q i{color:var(--cyan);transition:transform .3s;font-size:18px}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{padding:0 28px 24px;color:var(--tx2);font-size:15px;line-height:1.65}

/* Form */
.form-x{
  background:rgba(17,17,17,.55);backdrop-filter:blur(20px);
  border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:40px;max-width:520px;margin:0 auto;
  position:relative;overflow:hidden;
}
.form-x::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-accent);background-size:200% 200%;
  animation:gradShift 3s ease infinite;
}
.form-x input,.form-x select,.form-x textarea{
  width:100%;background:rgba(9,9,11,.6);
  border:1px solid var(--bd);border-radius:var(--r-md);
  padding:14px 16px;color:var(--tx);font-size:15px;
  transition:all .25s;margin-bottom:14px;font-family:inherit;
}
.form-x input:focus,.form-x select:focus{
  outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(6,182,212,.15),0 0 20px rgba(6,182,212,.2);
}
.form-x input::placeholder{color:var(--tx3)}
.form-x select{appearance:none;cursor:pointer}
.form-x button{width:100%;justify-content:center;margin-top:8px}

/* Table */
.price-table{
  background:rgba(17,17,17,.5);border:1px solid var(--bd);
  border-radius:var(--r-lg);overflow:hidden;
}
.price-row{
  display:grid;grid-template-columns:60px 2fr 1fr 2fr;
  padding:20px 28px;border-bottom:1px solid var(--bd);
  gap:16px;align-items:center;transition:background .2s;
}
.price-row:last-child{border-bottom:none}
.price-row:hover{background:rgba(6,182,212,.05)}
.price-row .ico{
  width:44px;height:44px;border-radius:10px;
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);font-size:20px;
  transition:all .3s;
}
.price-row:hover .ico{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(-6deg) scale(1.05)}
.price-row .name{font-weight:600;color:var(--tx)}
.price-row .price{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700;font-family:'Space Grotesk';font-size:17px;
}
.price-row .desc{color:var(--tx2);font-size:14px}
@media(max-width:700px){
  .price-row{grid-template-columns:44px 1fr;gap:8px}
  .price-row .desc{grid-column:2;font-size:13px}
}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Footer */
footer{
  padding:60px 0 40px;border-top:1px solid var(--bd);
  text-align:center;color:var(--tx3);font-size:14px;
}
footer a{color:var(--tx2);margin:0 12px}
footer a:hover{color:var(--cyan)}
.footer-brand{
  display:flex;justify-content:center;align-items:center;gap:12px;
  margin-bottom:16px;font-family:'Space Grotesk';font-weight:600;flex-wrap:wrap;
}
.footer-mark{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-size:16px;
}
.footer-tagline{color:var(--tx2);font-size:14px}
.footer-nav{margin-bottom:16px}
.footer-desc{font-size:13px;color:var(--tx3);margin:0 0 8px}
.footer-links{font-size:13px;color:var(--tx3);margin:0 0 8px}
.footer-copy{font-size:12px;color:var(--tx3);margin:12px 0 0}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* Case cards */
.case-card{
  background:rgba(17,17,17,.55);backdrop-filter:blur(20px);
  border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:24px;height:100%;transition:all .35s;
  position:relative;overflow:hidden;
}
.case-card:hover{border-color:var(--bd-a);transform:translateY(-6px);box-shadow:0 20px 60px rgba(6,182,212,.15)}
.case-card .img-ph{margin-bottom:20px;aspect-ratio:16/9}
.case-tag{
  display:inline-block;font-size:12px;color:var(--cyan);
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);
  padding:4px 12px;border-radius:999px;margin-bottom:16px;
}
.case-card h4{font-size:18px;color:var(--tx);margin-bottom:16px}
.case-line{font-size:14px;color:var(--tx2);margin-bottom:8px;display:flex;gap:10px}
.case-line strong{color:var(--tx)}
.case-result{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--bd);
  display:flex;flex-wrap:wrap;gap:12px;
}
.case-result span{
  background:rgba(16,185,129,.1);color:var(--green);
  border:1px solid rgba(16,185,129,.25);
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;
}

/* ===== SVG DASHBOARD MOCKUP ===== */
.dash-mock{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(6,182,212,.05));
  border:1px solid var(--bd);padding:24px;
}
.dash-mock::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(139,92,246,.25),transparent 50%),
             radial-gradient(circle at 70% 80%,rgba(6,182,212,.2),transparent 50%);
  pointer-events:none;
}
.dash-header{display:flex;gap:8px;margin-bottom:20px;position:relative;z-index:1}
.dash-header .d{width:10px;height:10px;border-radius:50%}
.dash-header .d1{background:#EF4444}
.dash-header .d2{background:#F59E0B}
.dash-header .d3{background:#10B981}
.dash-body{position:relative;z-index:1;display:grid;gap:12px}
.dash-row{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.dash-card{
  background:rgba(9,9,11,.7);border:1px solid var(--bd);
  border-radius:12px;padding:16px;
}
.dash-label{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.dash-value{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--tx)}
.dash-bar{
  height:6px;border-radius:3px;background:rgba(255,255,255,.08);
  overflow:hidden;margin-top:10px;
}
.dash-bar > div{
  height:100%;background:var(--grad);border-radius:3px;
  animation:barGrow 2.5s ease-out infinite;
}
@keyframes barGrow{0%{width:0}70%{width:var(--w,70%)}100%{width:var(--w,70%)}}
.dash-chart{display:flex;align-items:flex-end;gap:6px;height:80px;margin-top:8px}
.dash-chart > span{
  flex:1;background:var(--grad-accent);border-radius:4px 4px 0 0;
  animation:chartPulse 2s ease-in-out infinite;
}
.dash-chart > span:nth-child(1){height:40%;animation-delay:0s}
.dash-chart > span:nth-child(2){height:65%;animation-delay:.2s}
.dash-chart > span:nth-child(3){height:50%;animation-delay:.4s}
.dash-chart > span:nth-child(4){height:80%;animation-delay:.6s}
.dash-chart > span:nth-child(5){height:70%;animation-delay:.8s}
.dash-chart > span:nth-child(6){height:95%;animation-delay:1s}
@keyframes chartPulse{0%,100%{opacity:.7;transform:scaleY(.95)}50%{opacity:1;transform:scaleY(1)}}

/* ===== PROCESS FLOW ===== */
.flow-wrap{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;margin-top:32px;
}
.flow-node{
  background:rgba(17,17,17,.7);border:1px solid var(--bd);
  border-radius:12px;padding:12px 20px;font-size:13px;
  display:flex;align-items:center;gap:8px;
  transition:all .3s;position:relative;
}
.flow-node i{color:var(--cyan);font-size:16px}
.flow-node:hover{border-color:var(--bd-a);transform:translateY(-3px);box-shadow:0 10px 30px rgba(6,182,212,.15)}
.flow-arrow{
  color:var(--violet);font-size:18px;
  animation:arrowSlide 2s ease-in-out infinite;
}
@keyframes arrowSlide{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(4px);opacity:1}}

/* Logo ticker */
.ticker-wrap{
  overflow:hidden;margin-top:32px;padding:20px 0;
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
}
.ticker{display:flex;gap:60px;animation:tickerScroll 30s linear infinite;width:max-content}
.ticker span{
  font-family:'Space Grotesk';font-weight:600;font-size:20px;
  color:var(--tx3);white-space:nowrap;display:flex;align-items:center;gap:10px;
  transition:color .3s;
}
.ticker span:hover{color:var(--cyan)}
.ticker span i{color:var(--violet)}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Pulse icon */
.pulse-icon{animation:pulseIcon 2.4s ease-in-out infinite}
@keyframes pulseIcon{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* AI chip animation */
.ai-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--grad-ai);background-size:200% 200%;
  color:#fff;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:600;
  animation:gradShift 3s ease infinite;
  box-shadow:0 0 24px rgba(139,92,246,.4);
  margin-bottom:16px;
}
.ai-chip i{animation:pulseIcon 2s ease-in-out infinite}

/* Slogan */
.slogan{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk';font-weight:600;
  font-size:clamp(15px,1.6vw,18px);
  color:var(--tx2);
  padding:12px 24px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:rgba(17,17,17,.5);
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
}
.slogan::before{
  content:"";position:absolute;inset:0;
  background:var(--grad-ai);opacity:.08;
  animation:gradShift 4s ease infinite;
}
.slogan i{
  background:var(--grad-ai);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:20px;position:relative;z-index:1;
}

/* ==========================================================================
   PRODUCTION ADDITIONS
   Реальные изображения, адаптивность, доступность, состояния форм
   ========================================================================== */

/* ===== Реальные изображения ===== */
.img-real{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--bd);
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(6,182,212,.1));
  transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .35s,box-shadow .35s;
  display:block;width:100%;
}
.img-real img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.card-glass:hover .img-real,
.case-card:hover .img-real,
.step:hover .img-real{
  border-color:var(--bd-a);
  box-shadow:0 20px 60px rgba(6,182,212,.15);
}
.img-real.ratio-16x9{aspect-ratio:16/9}
.img-real.ratio-16x10{aspect-ratio:16/10}
.img-real.ratio-4x3{aspect-ratio:4/3}

/* Hero-изображение (LCP — без lazy) */
.hero-media{
  position:relative;margin-top:56px;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--bd);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 80px rgba(139,92,246,.15);
}
.hero-media img{display:block;width:100%;height:auto;border-radius:inherit}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(9,9,11,.85) 100%);
}
@media(max-width:768px){.hero-media{margin-top:32px;border-radius:var(--r-lg)}}

/* ===== Заглушка (когда картинки нет) ===== */
.ph{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(6,182,212,.1));
  border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:40px;
}
.ph-16x9{aspect-ratio:16/9}
.ph-16x10{aspect-ratio:16/10}
.ph-4x3{aspect-ratio:4/3}
.ph .ph-label{
  position:absolute;bottom:8px;left:8px;right:8px;font-size:10px;
  color:rgba(255,255,255,.5);background:rgba(0,0,0,.6);
  padding:6px 10px;border-radius:6px;font-family:monospace;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Схема 8 шагов */
.steps-line{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.steps-line{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps-line{grid-template-columns:1fr}}

/* ==========================================================================
   КОМПАКТНАЯ ВЫСОТА (десктоп, ширина >= 992px)
   Цель: каждый экран укладывается в одну высоту десктопного окна.
   Все значения — в vh/клампах, поэтому подстраиваются под высоту окна.
   ========================================================================== */
@media(min-width:992px){
  /* Заголовок экрана компактнее — даёт больше всего экономии */
  .sec-head{margin-bottom:clamp(12px,1.8vh,30px)}
  .sec-head h2{font-size:clamp(1.4rem,2.6vw,2.1rem)}
  .sec-head p{margin-top:8px;font-size:15px;line-height:1.5}

  /* Изображения в карточках не раздувают экран */
  .card-glass .img-real,
  .card-glass .img-ph,
  .step .img-real,
  .step .img-ph{
    aspect-ratio:auto;
    height:clamp(74px,9.5vh,124px);
    margin-bottom:clamp(8px,1.1vh,14px);
  }
  .card-glass h3{font-size:17px;margin-bottom:6px}
  .card-glass p{font-size:14px;line-height:1.5}
  .case-card .img-real,.case-card .img-ph{aspect-ratio:auto;height:clamp(80px,10.5vh,140px);margin-bottom:12px}
  .case-card{padding:clamp(14px,1.5vh,22px)}
  .case-card:hover{transform:none}

  /* Крупное изображение «Прототип» — не выше трети экрана */
  .img-real.ratio-4x3,.img-real.ratio-16x9,.img-real.ratio-16x10{aspect-ratio:auto}
  .img-real.ratio-4x3{height:clamp(160px,26vh,255px)}
  .img-real.ratio-16x9,.img-real.ratio-16x10{height:clamp(110px,17vh,200px)}

  /* Шаги «Как работаем» */
  .process-card{padding:clamp(14px,1.5vh,24px)}
  .process-card .pc-num{width:38px;height:38px;font-size:17px;margin-bottom:10px}
  .process-card h3{font-size:17px;margin-bottom:4px}
  .process-card .pc-time{margin-bottom:10px}
  .process-card ul{margin-bottom:10px}
  .process-card li{margin-bottom:5px;font-size:13px;line-height:1.45}
  .process-card .pc-result{padding-top:10px;font-size:13px}
  .process-grid{gap:clamp(12px,1.4vw,22px)}

  /* Экран «Контакты» (#final): форма диагностики компактнее и в две колонки */
  #final .row.g-5{margin-top:0!important;--bs-gutter-y:0;align-items:flex-start}
  /* Колонки не растягиваются по самой высокой (иначе форма раздувает экран) */
  #final .row.g-5 > [class*="col-"]{align-self:flex-start;min-height:0;height:auto!important}
  #final .row.g-5 > [class*="col-"] > .form-x,
  #final .row.g-5 > [class*="col-"] > *{height:auto!important;min-height:0}
  #final .sec-head{margin-bottom:clamp(10px,1.5vh,22px)}
  #final .sec-head h2{font-size:clamp(1.3rem,2.2vw,1.9rem)}
  #final .form-x{padding:clamp(14px,1.7vh,24px)}
  #final .form-x .field{margin-bottom:6px}
  #final .form-x .err-msg{margin-top:2px;font-size:11px}
  #final .form-x input,
  #final .form-x select,
  #final .form-x textarea{padding:9px 13px;font-size:13.5px;margin-bottom:0}
  #final .form-x textarea{min-height:46px!important;height:46px}
  #final .form-x label{font-size:12px;margin-bottom:2px}
  #final .form-x button{margin-top:2px;padding:12px 24px;font-size:14px}
  #final .form-x p{margin-top:7px!important;font-size:11px!important}
  #final .form-msg{margin-bottom:8px;padding:9px 13px;font-size:13px}
  /* Сетка «Имя/Телефон» и «Ниша/Боль» — по два поля в ряд */
  #final .diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  #final .diag-grid .field{margin-bottom:6px}
  #final .card-glass{padding:clamp(15px,1.8vh,22px)!important;margin-bottom:12px!important}
  #final .card-glass h3{margin-bottom:10px!important;font-size:16px!important}
  #final .card-glass p{margin-bottom:9px!important;font-size:13.5px}
  /* Сетка «Имя/Телефон» и «Ниша/Боль» — по два поля в ряд */
  #final .diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

  /* Числа-результаты */
  .num-item{padding:clamp(12px,1.8vh,24px) 14px}
  .num-value{font-size:clamp(1.5rem,2.4vw,2.2rem);margin-bottom:8px}
  .num-label{font-size:13px}

  /* Таблица цен */
  .price-table{border-radius:var(--r-lg)}
  /* Две колонки: слева таблица, справа форма «Получить смету».
     Так экран «Цены» укладывается в одну высоту окна. */
  .prices-cols{display:grid;grid-template-columns:1.32fr .98fr;gap:clamp(16px,2vw,36px);align-items:start}
  .prices-cols .calc-form-wrap{margin-top:0!important}
  .prices-cols .form-x{
    padding:clamp(13px,1.6vh,20px) clamp(13px,1.2vw,20px);
    max-width:none;margin:0;
  }
  .prices-cols .form-x h3{font-size:16px;margin-bottom:3px}
  .prices-cols .form-x > p{font-size:12px;margin-bottom:11px!important}
  .prices-cols .field{margin-bottom:6px}
  .prices-cols .form-x label{font-size:12px;margin-bottom:3px}
  .prices-cols .form-x input,
  .prices-cols .form-x select,
  .prices-cols .form-x textarea{
    padding:8px 12px;font-size:13.5px;margin-bottom:0;border-radius:9px;
  }
  .prices-cols .form-x textarea{min-height:52px!important;height:52px;resize:none}
  .prices-cols .form-x button{margin-top:4px;padding:12px 20px;font-size:14px}
  .prices-cols .form-x p:last-child{font-size:11px;margin-top:9px!important}
  /* Строки таблицы компактнее */
  .price-row{
    padding:clamp(6px,0.95vh,12px) clamp(13px,1.3vw,20px);
    gap:11px;grid-template-columns:46px 2fr 1fr 2fr;
  }
  .price-row .ico{width:32px;height:32px;font-size:14px;border-radius:9px}
  .price-row .name{font-size:14px}
  .price-row .price{font-size:clamp(14px,1.05vw,16px)}
  .price-row .desc{font-size:12px;line-height:1.3}

  /* FAQ */
  .faq-item{margin-bottom:9px}
  .faq-q{padding:clamp(10px,1.25vh,16px) 20px;font-size:15px}
  .faq-a-inner{padding:0 20px clamp(10px,1.3vh,16px);font-size:14px;line-height:1.5}

  /* Общие блоки */
  .card-glass{padding:clamp(14px,1.5vw,22px)}
  /* Экран «Решение»: иконки и карточки компактнее + CTA в одну строку */
  .sol-cards > [class*="col-"] > .card-glass{padding:clamp(13px,1.4vw,20px)!important}
  .sol-icon{
    width:clamp(34px,3vw,42px);height:clamp(34px,3vw,42px);
    border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);
    color:var(--cyan);font-size:clamp(17px,1.6vw,21px);
    margin-bottom:clamp(8px,1.2vh,14px);
  }
  .sol-cards .card-glass h3{font-size:16px;margin-bottom:5px}
  .sol-cards .card-glass p{font-size:13.5px;line-height:1.5}
  .calc-box{padding:clamp(16px,2vh,28px)}
  .calc-box h3{font-size:17px;margin-bottom:10px}
  .calc-box p{font-size:14px;margin:0 0 5px}
  .leadmagnet-grid{gap:clamp(20px,3vw,44px)}
  .leadmagnet-list{margin-bottom:clamp(12px,1.8vh,24px)}
  .leadmagnet-list li{font-size:14px;margin-bottom:7px;line-height:1.5}
  .steps{margin-bottom:0}
  .step{padding:clamp(12px,1.5vh,20px)}
  .step .img-ph{margin-bottom:10px}

  /* Блок расчёта потерь: на десктопе — колонкой справа от карточек,
     так экран «Проблемы» укладывается в одну высоту окна */
  .pain-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(16px,2vw,36px);align-items:start}
  .pain-grid .calc-box{margin:0}
  .pain-grid .calc-box h3{font-size:16px}
  .pain-grid .calc-box p{font-size:13px;line-height:1.5}
  .pain-grid .calc-box .btn-cta{margin-top:8px!important}

  /* Поток данных и тикер */
  .flow-wrap{gap:clamp(6px,0.8vw,14px);margin-top:clamp(12px,1.8vh,26px)}
  .flow-node{padding:clamp(6px,0.9vh,12px) clamp(8px,0.9vw,16px);font-size:12px}
  .flow-arrow{font-size:13px}
  .ticker-wrap{margin-top:clamp(12px,1.8vh,28px);padding:clamp(10px,1.4vh,18px) 0}
  .ticker span{font-size:15px}
  .slogan{font-size:clamp(14px,1.3vw,18px);padding:clamp(8px,1.1vh,14px) 22px}
  /* CTA-строки внутри секций — без лишнего вертикального запаса */
  section [style*="margin-top:40px"]{margin-top:clamp(14px,2vh,30px)!important}
  section [style*="margin-top:48px"]{margin-top:clamp(16px,2.2vh,34px)!important}

  /* Отступы внутри секций и после карточек */
  section > .container-x > *:last-child{margin-bottom:0}
  section [class*="col-"] > *:last-child{margin-bottom:0}
  section .btn-cta{margin-bottom:0}
}

/* ===== Процесс: 3 шага (ядро) ===== */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.process-grid{grid-template-columns:1fr}}
.process-card{
  background:rgba(17,17,17,.55);backdrop-filter:blur(20px);
  border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:32px;height:100%;position:relative;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.process-card:hover{transform:translateY(-6px);border-color:var(--bd-a);box-shadow:0 20px 60px rgba(6,182,212,.15)}
.process-card .pc-num{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:20px;
  margin-bottom:20px;box-shadow:0 0 30px rgba(139,92,246,.35);
}
.process-card h3{font-size:20px;margin-bottom:6px}
.process-card .pc-time{
  display:inline-block;font-size:12px;color:var(--cyan);
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);
  padding:4px 12px;border-radius:999px;margin-bottom:18px;
}
.process-card ul{list-style:none;padding:0;margin:0 0 20px}
.process-card li{
  color:var(--tx2);font-size:15px;line-height:1.6;
  padding-left:24px;position:relative;margin-bottom:10px;
}
.process-card li::before{
  content:"\F26A";font-family:"bootstrap-icons";position:absolute;left:0;top:1px;
  color:var(--cyan);font-size:13px;
}
.process-card .pc-result{padding-top:18px;border-top:1px solid var(--bd);font-size:14px;color:var(--tx);font-weight:500}
.process-card .pc-result i{color:var(--green);margin-right:8px}

/* ===== Блок расчёта потерь ===== */
.calc-box{
  margin-top:48px;padding:32px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(6,182,212,.06));
  border:1px solid var(--bd-a);position:relative;overflow:hidden;
}
.calc-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-accent);background-size:200% 200%;
  animation:gradShift 4s ease infinite;
}
.calc-box h3{font-size:18px;margin-bottom:16px;color:var(--tx)}
.calc-box p{font-size:15px;margin:0 0 8px;color:var(--tx2)}
.calc-box strong{color:var(--cyan);font-weight:600}

/* ===== Лид-магнит ===== */
.leadmagnet-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media(max-width:900px){.leadmagnet-grid{grid-template-columns:1fr;gap:32px}}
.leadmagnet-list{list-style:none;padding:0;margin:0 0 32px}
.leadmagnet-list li{color:var(--tx2);font-size:15px;line-height:1.65;padding-left:28px;position:relative;margin-bottom:12px}
.leadmagnet-list li::before{
  content:"\F26B";font-family:"bootstrap-icons";position:absolute;left:0;top:2px;
  color:var(--cyan);font-size:14px;
}

/* ===== Тикер ===== */
.ticker-wrap{margin-top:48px}
.ticker span{font-size:16px}
@media(max-width:768px){.ticker span{font-size:14px}.ticker{gap:36px}}

/* ===== Формы: поля, состояния, ошибки ===== */
.form-x .field{position:relative;margin-bottom:14px}
.form-x .field input,
.form-x .field select,
.form-x .field textarea{margin-bottom:0}
.form-x textarea{
  width:100%;background:rgba(9,9,11,.6);border:1px solid var(--bd);
  border-radius:var(--r-md);padding:14px 16px;color:var(--tx);
  font-size:15px;font-family:inherit;resize:vertical;min-height:110px;
  transition:all .25s;
}
.form-x textarea:focus{
  outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(6,182,212,.15),0 0 20px rgba(6,182,212,.2);
}
.form-x label{display:block;font-size:13px;color:var(--tx3);margin-bottom:6px;font-weight:500}
.form-x .field-error input,
.form-x .field-error select,
.form-x .field-error textarea{border-color:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.form-x .err-msg{display:none;color:#EF4444;font-size:12px;margin-top:6px}
.form-x .field-error .err-msg{display:block}
.form-x button[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}
.form-x .btn-cta.loading{pointer-events:none}
.form-x .btn-cta.loading i{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Honeypot — невидимое поле для ботов */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* Сообщения формы */
.form-msg{display:none;padding:14px 18px;border-radius:var(--r-md);font-size:14px;line-height:1.5;margin-bottom:16px}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:#6EE7B7}
.form-msg.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#FCA5A5}

/* ===== Навигация: burger на mobile (варианты меню не выводим) ===== */
.nav-toggle{
  display:none;background:transparent;border:1px solid var(--bd);
  border-radius:10px;color:var(--tx);font-size:20px;
  width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--bd-a);color:var(--cyan)}
@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:930;
    flex-direction:column;gap:0;padding:6px 18px 14px;
    background:rgba(9,9,11,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--bd);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--bd);width:100%}
  .nav-links a::after{display:none}
  .nav-links a:last-child{border-bottom:none}
}

/* ==========================================================================
   POPUP: «Задать вопрос»
   ========================================================================== */
.modal-x{
  position:fixed;inset:0;z-index:1200;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.modal-x.open{display:flex}
.modal-x__backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,8,.72);backdrop-filter:blur(6px);
  animation:modalFade .25s ease both;
}
.modal-x__dialog{
  position:relative;z-index:1;width:100%;max-width:520px;
  max-height:calc(100vh - 40px);overflow-y:auto;
  background:linear-gradient(180deg,rgba(23,23,28,.98),rgba(13,13,16,.98));
  border:1px solid var(--bd-a);border-radius:var(--r-xl);
  padding:30px 28px 26px;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(6,182,212,.12);
  animation:modalPop .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.modal-x__head{margin-bottom:18px;padding-right:36px}
.modal-x__head h3{font-size:21px;margin:0 0 8px}
.modal-x__head p{font-size:14px;margin:0}
.modal-x__close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--bd);
  color:var(--tx2);font-size:16px;cursor:pointer;transition:all .2s;
}
.modal-x__close:hover{color:#fff;border-color:var(--bd-a);background:rgba(6,182,212,.15)}
.modal-x .form-x{background:transparent;border:none;padding:0;box-shadow:none;max-width:none}
.modal-x .form-x::before{display:none}
body.modal-open{overflow:hidden}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:600px){
  .modal-x{padding:0;align-items:flex-end}
  .modal-x__dialog{
    max-width:none;max-height:92vh;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:24px 18px 22px;
  }
}

/* ===== Skip-link и фокус (a11y) ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--grad);color:#fff;padding:14px 24px;
  border-radius:0 0 12px 0;font-weight:600;
}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.faq-q:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px;
}

/* ==========================================================================
   АДАПТИВНОСТЬ (мобильный лендинг)
   Правило: блоки идут во всю ширину экрана, отступы минимальные.
   ========================================================================== */
@media(max-width:991px){
  /* ---- HERO на мобильном: просто красивая картинка-фон, текст по центру ---- */
  .hero{
    min-height:calc(100svh - var(--nav-h));
    display:flex;align-items:center;justify-content:center;
    padding:40px 0 72px;
    background-image:none;background-color:var(--bg);
  }
  /* Картинка-обложка. Масштаб делаем через object-position и width,
     а не через transform:scale — иначе картинка вылезает и появляется
     горизонтальный скролл страницы. */
  .hero-bg{overflow:hidden}
  .hero-bg img{
    object-position:center center;
    transform:none;
    width:100%;height:100%;
  }
  .hero-bg::after{
    background:
      radial-gradient(ellipse at 50% 42%,rgba(9,9,11,.66) 0%,rgba(9,9,11,.38) 45%,rgba(9,9,11,.58) 100%),
      linear-gradient(180deg,rgba(9,9,11,.9) 0%,rgba(9,9,11,.45) 30%,rgba(9,9,11,.6) 70%,rgba(9,9,11,.96) 100%);
  }
  .hero-inner{max-width:none;width:100%;text-align:center;margin:0 auto}
  .hero-sub{max-width:52ch;margin-left:auto;margin-right:auto}
  .hero-cta-row{justify-content:center}
  .trust-line{justify-content:center;align-items:center}
  .hero-note{text-align:center}
  .scroll-arrow{bottom:14px}
}

@media(max-width:768px){
  /* Блоки во всю ширину экрана */
  .container-x{padding:0 14px;max-width:none}
  .sec-head{margin-bottom:32px}
  .sec-head p{font-size:15px}

  .hero-sub{font-size:16px}
  .btn-cta{width:100%;justify-content:center;padding:15px 24px;font-size:15px}
  .btn-ghost{width:100%;justify-content:center}
  .trust-line{flex-direction:column;gap:10px;align-items:center}
  .numbers{grid-template-columns:1fr 1fr;gap:12px}
  .num-item{padding:22px 12px}
  .num-value{font-size:clamp(1.6rem,8vw,2.2rem)}
  .form-x{padding:22px 16px}
  .faq-q{padding:16px 18px;font-size:15px}
  .faq-a-inner{padding:0 18px 18px}
  .card-glass{padding:20px 16px}
  .calc-box{padding:20px 16px}
  .process-card{padding:22px 16px}
  .price-row{padding:16px 14px}
  .case-card{padding:18px 14px}

  /* Bootstrap-сетки: колонки без боковых паддингов, чтобы карточки были шире */
  .row.g-4,.row.g-5{--bs-gutter-x:1rem;--bs-gutter-y:1rem;margin-left:0;margin-right:0}
  .row.g-4 > [class*="col-"],.row.g-5 > [class*="col-"]{padding-left:0;padding-right:0}

  /* Изображения в карточках — во всю ширину */
  .img-real,.img-ph,.card-glass .img-real,.step .img-real,.case-card .img-real{border-radius:var(--r-md)}

  /* Схема потока и тикер — компактнее */
  .flow-wrap{gap:8px;margin-top:22px}
  .flow-node{padding:9px 12px;font-size:12px}
  .flow-arrow{font-size:14px}
  .ticker-wrap{margin-top:26px;padding:14px 0}

  /* Двухколоночные блоки на мобильном — в одну колонку */
  .prices-cols,.pain-grid{grid-template-columns:1fr;gap:22px}
  .prices-cols .calc-form-wrap{margin-top:0!important}
  .pain-grid .calc-box{margin-top:0}

  /* ---- ФУТЕР на мобильном ---- */
  footer{
    padding:34px 0 28px;
    text-align:center;
  }
  footer .container-x{padding:0 16px}
  footer nav{
    display:flex;flex-direction:column;gap:0;
    margin-bottom:22px;border-top:1px solid var(--bd);
  }
  footer nav a{
    display:block;margin:0;padding:13px 0;font-size:15px;
    border-bottom:1px solid var(--bd);
  }
  footer p{font-size:13px}
  #toTop{right:14px;bottom:14px;width:44px;height:44px}
}

@media(max-width:480px){
  .numbers{grid-template-columns:1fr;gap:10px}
  .case-result{gap:8px}
  .case-result span{font-size:12px;padding:5px 10px}
  .btn-ask{padding:7px 12px;font-size:12px}
  .btn-ask span{display:none}
}

/* Таблица цен → карточки на mobile */
@media(max-width:700px){
  .price-row{grid-template-columns:44px 1fr;gap:10px;align-items:start}
  .price-row .price{grid-column:2;font-size:16px;margin-top:4px}
  .price-row .desc{grid-column:1 / -1;font-size:13px}
}

/* ===== prefers-reduced-motion ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
}

/* ===== Печать ===== */
@media print{
  body{background:#fff;color:#000}
  .orb,.particles,.segment-bar,.scroll-arrow,.nav-toggle,.float-cards{display:none!important}
  a{color:#000}
}

/* Текст, доступный краулерам, но не мешающий визуально */
.ai-summary{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.slogan span{position:relative;z-index:1}



/* cache-bust marker */


/* ══════════════════════════════════════════════════════════════════════════
   ITBOSS-UPDATES — правки по ТЗ заказчика.
   Блок идёт последним и намеренно переопределяет более ранние правила.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ПОЛОСА СЕГМЕНТОВ: вдвое ниже, без капсул ─────────────────────── */
.segment-bar{
  padding:3px 16px;
  gap:14px;
  min-height:0;
  background:rgba(9,9,11,.78);
}
.segment-bar .label{
  font-size:10px;
  letter-spacing:.06em;
  margin-right:4px;
}
.seg-btn{
  border:none;
  border-radius:0;
  padding:2px 0;
  font-size:11px;
  line-height:1.2;
  color:var(--tx3);
  background:transparent;
  box-shadow:none;
  position:relative;
  transition:color .2s ease;
}
.seg-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.seg-btn:hover{border:none;color:var(--tx2)}
.seg-btn:hover::after{transform:scaleX(1)}
.seg-btn.active{
  background:transparent;
  color:var(--cyan);
  border:none;
  box-shadow:none;
  font-weight:600;
}
.seg-btn.active::after{transform:scaleX(1)}

/* ── 2. HERO: картинка фоном под весь блок ───────────────────────────── */
.hero{
  min-height:calc(100vh - var(--nav-h));
  background-image:none;
  background-color:var(--bg);
  padding:clamp(28px,5vh,64px) 0;
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center right;
  display:block;
}
.hero-bg__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(9,9,11,.97) 0%,rgba(9,9,11,.93) 26%,rgba(9,9,11,.74) 46%,rgba(9,9,11,.42) 66%,rgba(9,9,11,.30) 100%),
    linear-gradient(180deg,rgba(9,9,11,.62) 0%,rgba(9,9,11,.10) 24%,rgba(9,9,11,.10) 58%,rgba(9,9,11,.94) 100%);
}
.hero-inner{max-width:min(660px,56%)}

/* ── 3. ЭТАПЫ РАБОТ: графическая цепочка со стрелками ────────────────── */
.stages{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  align-items:stretch;
  gap:10px 0;
}
.stage{
  display:flex;align-items:center;
  flex:0 0 auto;
  width:calc(100% / 4 - 30px);
}
.stage-card{
  position:relative;
  flex:1 1 auto;
  height:100%;
  background:rgba(17,17,17,.55);
  backdrop-filter:blur(20px);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:24px 20px 22px;
  transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .35s,box-shadow .35s;
}
.stage-card:hover{
  transform:translateY(-6px);
  border-color:var(--bd-a);
  box-shadow:0 20px 50px rgba(6,182,212,.14);
}
.stage-num{
  position:absolute;top:16px;right:18px;
  font-family:'Space Grotesk';font-weight:700;font-size:13px;
  color:var(--tx3);
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--bd);
}
.stage-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;
  background:rgba(6,182,212,.10);
  border:1px solid rgba(6,182,212,.26);
  color:var(--cyan);font-size:20px;
  margin-bottom:16px;
}
.stage-title{
  font-family:'Space Grotesk';
  font-size:15px;font-weight:600;
  line-height:1.35;
  margin:0 0 8px;
  color:var(--tx);
  padding-right:28px;
}
.stage-text{
  font-size:13px;line-height:1.55;
  color:var(--tx2);
  margin:0;
}
/* Стрелка перехода между этапами */
.stage-arrow{
  flex:0 0 40px;
  width:40px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);
  opacity:.55;
  align-self:center;
}
.stage-arrow svg{width:34px;height:16px;overflow:visible}
.stage-arrow path:first-child{animation:stageDash 1.6s linear infinite}
@keyframes stageDash{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-16}
}

.stages-cta{text-align:center;margin-top:52px}
.stages-note{margin-top:14px;font-size:14px;color:var(--tx3)}

@media(max-width:1100px){
  .stage{width:calc(50% - 30px)}
}
@media(max-width:640px){
  .stages{flex-direction:column;gap:0}
  .stage{width:100%;flex-direction:column;align-items:stretch}
  .stage-arrow{
    width:100%;flex:0 0 42px;height:42px;
    transform:rotate(90deg);
    opacity:.5;
  }
  .stage-card{padding:20px 18px}
}

/* ── 4. КАРТОЧКИ: иконка и заголовок в одной строке ──────────────────── */
.card-with-icon .ci-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.card-with-icon .ci-head h3{
  margin:0;
  font-size:18px;
  line-height:1.3;
}
.sol-icon{flex:0 0 auto;margin-bottom:0 !important}
.why-icon{
  flex:0 0 auto;
  width:48px;height:48px;border-radius:13px;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.28);
  display:flex;align-items:center;justify-content:center;
  color:var(--violet);font-size:22px;
}
.card-with-icon p{margin-bottom:0}

/* ── 5. КАК РАБОТАЕМ: номер и заголовок в одной строке ───────────────── */
.process-card .pc-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}
.process-card .pc-head .pc-num{
  margin-bottom:0;
  flex:0 0 auto;
}
.process-card .pc-headtext{flex:1 1 auto;min-width:0}
.process-card .pc-headtext h3{margin:0 0 6px;font-size:19px;line-height:1.25}
.process-card .pc-headtext .pc-time{margin-bottom:0}

/* ── 6. ПРОТОТИП: картинка обрезана слева, по высоте текста ──────────── */
.proto-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:stretch;
}
.proto-media{display:flex;min-height:0}
.proto-body{display:flex;flex-direction:column;justify-content:center}
.proto-img{
  flex:1 1 auto;
  width:100%;
  aspect-ratio:auto;
  min-height:420px;
  align-self:stretch;
  overflow:hidden;
}
.proto-img img{
  width:100%;height:100%;
  object-fit:cover;
  /* Обрезаем слева: показываем правую часть кадра */
  object-position:100% 50%;
}
.proto-note{
  padding:20px;border-radius:var(--r-md);
  background:rgba(6,182,212,.06);
  border:1px solid var(--bd-a);
  margin-bottom:24px;
}
.proto-note p{margin:0;font-size:15px;color:var(--tx2)}
.proto-note strong{color:var(--cyan)}
@media(max-width:991px){
  .proto-grid{grid-template-columns:1fr;gap:28px}
  .proto-img{min-height:0;aspect-ratio:16/10}
}

/* ── 7. КОММЕНТАРИЙ: 3 строки, без стрелок справа ────────────────────── */
.form-x textarea{
  resize:vertical;
  min-height:calc(3 * 1.55em + 26px);
  line-height:1.55;
  background-image:none !important;
  padding-right:16px !important;
}
.field{position:relative}
.field > i,
.field .field-arrow,
.field::after{display:none !important}

/* ── 8. КОНТАКТЫ = высота формы слева ────────────────────────────────── */
#final .row{align-items:stretch}
.final-side{display:flex}
.contact-card{
  display:flex;
  flex-direction:column;
  width:100%;
  padding:32px;
  margin-bottom:0;
}
.contact-row{
  display:flex;align-items:center;gap:12px;
  margin:0 0 16px;font-size:15px;
}
.contact-row i{color:var(--cyan);font-size:18px;flex:0 0 auto}
.contact-row a{color:var(--tx);transition:color .2s}
.contact-row a:hover{color:var(--cyan)}
.contact-btn{
  width:100%;
  justify-content:center;
  margin-top:auto;      /* прижимаем к низу — карточка равна форме */
  margin-bottom:14px;
}
.contact-note{
  margin:0;
  text-align:center;
  font-size:12px;
  color:var(--tx3);
}
@media(max-width:991px){
  .contact-card{padding:26px}
  .contact-btn{margin-top:20px}
}

/* ── 9. ОТЗЫВЫ: слайдер ──────────────────────────────────────────────── */
#reviews .sec-head{margin-bottom:36px}
.rev-slider{position:relative;outline:none}
.rev-viewport{overflow:hidden;padding:6px 0}
.rev-track{
  display:flex;
  gap:22px;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.rev-card{
  flex:0 0 calc(50% - 11px);
  display:flex;flex-direction:column;
  background:rgba(17,17,17,.6);
  backdrop-filter:blur(20px);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  padding:26px 24px;
  transition:border-color .3s,box-shadow .3s;
}
.rev-card:hover{border-color:var(--bd-a);box-shadow:0 18px 44px rgba(6,182,212,.12)}
.rev-head{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:16px;
}
.rev-avatar{
  flex:0 0 auto;
  width:64px;height:64px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(6,182,212,.35);
  display:block;
}
.rev-avatar img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.03);
}
.rev-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.rev-who strong{font-size:15px;color:var(--tx);font-family:'Space Grotesk'}
.rev-role{font-size:12.5px;color:var(--tx3);line-height:1.4}
.rev-niche{
  font-size:11px;color:var(--cyan);
  display:inline-flex;align-items:center;gap:5px;
  margin-top:2px;
}
.rev-stars{
  flex:0 0 auto;
  color:#FBBF24;
  font-size:12px;
  letter-spacing:1px;
  white-space:nowrap;
}
.rev-stars .bi-star{color:var(--tx3);opacity:.5}
.rev-text{
  margin:0 0 18px;
  font-size:14.5px;
  line-height:1.68;
  color:var(--tx2);
  flex:1 1 auto;
}
.rev-metrics{
  list-style:none;margin:0;padding:16px 0 0;
  border-top:1px solid var(--bd);
  display:flex;flex-wrap:wrap;gap:8px;
}
.rev-metrics li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;
  color:var(--green);
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.22);
  border-radius:999px;
  padding:4px 11px;
}
.rev-metrics li i{font-size:11px}

/* Разная стилистика писем */
.rev-card--short .rev-text{font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.rev-card--long .rev-text{font-size:14px;line-height:1.75}
.rev-card--formal .rev-text{font-size:14px;line-height:1.6}
.rev-card--emotional .rev-text{font-style:italic}
.rev-card--technical .rev-text{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:13px;line-height:1.7;
}

.rev-controls{
  display:flex;align-items:center;justify-content:center;
  gap:18px;margin-top:30px;
}
.rev-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(17,17,17,.7);
  border:1px solid var(--bd);
  color:var(--tx2);font-size:16px;cursor:pointer;
  transition:all .25s ease;
}
.rev-btn:hover:not(:disabled){border-color:var(--bd-a);color:var(--cyan);transform:translateY(-2px)}
.rev-btn:disabled{opacity:.35;cursor:default}
.rev-dots{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;max-width:340px}
.rev-dot{
  width:8px;height:8px;padding:0;border-radius:50%;
  background:var(--tx3);opacity:.4;border:none;cursor:pointer;
  transition:all .25s ease;
}
.rev-dot:hover{opacity:.75}
.rev-dot.active{
  opacity:1;width:22px;border-radius:999px;
  background:var(--grad);
}
@media(max-width:900px){
  .rev-card{flex:0 0 100%}
  .rev-card{padding:22px 20px}
  .rev-avatar{width:56px;height:56px}
}

/* ── 10. ПЛАВАЮЩИЕ БЛОКИ ─────────────────────────────────────────────── */
.floaters{
  position:fixed;
  inset:0;
  z-index:850;          /* ниже шапки (950) и модалки */
  pointer-events:none;
  overflow:hidden;
}
.floater{
  position:absolute;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;
  border-radius:999px;
  font-size:13px;font-weight:600;
  white-space:nowrap;
  background:rgba(17,17,17,.82);
  backdrop-filter:blur(16px);
  border:1px solid var(--bd-a);
  color:var(--tx);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(16px) scale(.94);
  transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;
  max-width:min(320px,32vw);
  overflow:hidden;
  text-overflow:ellipsis;
}
.floater i{font-size:14px;flex:0 0 auto}
.floater span{overflow:hidden;text-overflow:ellipsis}

.floater--g{border-color:rgba(16,185,129,.30)}
.floater--g i{color:var(--green)}
.floater--c{border-color:rgba(6,182,212,.30)}
.floater--c i{color:var(--cyan)}
.floater--v{border-color:rgba(139,92,246,.32)}
.floater--v i{color:var(--violet)}

/* Появление: всплывает и начинает медленный дрейф */
.floater.is-on{
  opacity:1;
  transform:translateY(0) scale(1);
  animation:floaterDrift var(--f-drift,14s) ease-in-out var(--f-drift-delay,0s) infinite;
}
.floater.is-off{
  opacity:0;
  transform:translateY(-18px) scale(.95);
  animation:none;
}
@keyframes floaterDrift{
  0%  {margin-top:0;margin-left:0}
  25% {margin-top:-14px;margin-left:8px}
  50% {margin-top:6px;margin-left:-10px}
  75% {margin-top:-8px;margin-left:-6px}
  100%{margin-top:0;margin-left:0}
}

/* Не мешаем чтению: прячем при открытой модалке */
body.modal-open .floaters{opacity:0;transition:opacity .3s}
@media(max-width:991px){
  .floaters{display:none}
}

/* ============================================================
   УСЛУГИ ИЗ КАТАЛОГА (секция #services) — SEO-расширение
   ============================================================ */
.svc-card{
  height:100%;display:flex;flex-direction:column;gap:12px;
  padding:26px 22px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.svc-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(139,92,246,.10),transparent 55%);
  opacity:0;transition:opacity .3s;
}
.svc-card:hover{border-color:var(--bd-a);transform:translateY(-5px);box-shadow:0 20px 50px rgba(6,182,212,.14)}
.svc-card:hover::before{opacity:1}

.svc-head{display:flex;gap:14px;align-items:flex-start}
.svc-head .sol-icon{flex:0 0 auto}
.svc-head h3{font-size:16.5px;line-height:1.32;color:var(--tx);margin:0 0 5px}
.svc-who{
  display:block;font-size:11.5px;line-height:1.4;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.4px;
}

.svc-short{font-size:14px;line-height:1.55;color:var(--tx2);margin:0;flex:1}

.svc-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.svc-price,.svc-term{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;border:1px solid var(--bd);
  background:rgba(139,92,246,.07);color:var(--tx2);white-space:nowrap;
}
.svc-price{color:var(--tx);border-color:rgba(139,92,246,.35);font-weight:600}
.svc-price i{color:var(--violet)}
.svc-term i{color:var(--cyan)}

/* Ключевые запросы: видны краулерам, аккуратно оформлены для людей */
.svc-kw{
  font-size:11px;line-height:1.6;color:var(--tx3);margin:0;
  padding-top:10px;border-top:1px dashed rgba(255,255,255,.07);
  word-break:break-word;
}

.svc-link{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:13.5px;font-weight:600;color:var(--cyan);text-decoration:none;
  transition:gap .25s,color .25s;
}
.svc-link:hover{gap:12px;color:var(--violet)}

/* ── Блок «решения по отраслям» ─────────────────────────────── */
.svc-industries{margin-top:64px}
.svc-industries__title{
  text-align:center;font-size:clamp(1.2rem,2.2vw,1.7rem);
  margin-bottom:32px;color:var(--tx);
}
.ind-card{
  display:flex;flex-direction:column;gap:10px;height:100%;
  padding:24px 20px;border-radius:var(--r-lg);
  border:1px solid var(--bd);background:rgba(20,20,25,.72);
  text-decoration:none;color:inherit;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.ind-card:hover{border-color:var(--bd-a);transform:translateY(-5px);box-shadow:0 18px 44px rgba(139,92,246,.16)}
.ind-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;font-size:21px;
  background:var(--grad);color:#fff;
}
.ind-card h4{font-size:16px;margin:2px 0 4px;color:var(--tx)}
.ind-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;flex:1}
.ind-card li{
  position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:var(--tx2);
}
.ind-card li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--grad-accent);
}
.ind-card__more{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--cyan);margin-top:4px;
  transition:gap .25s;
}
.ind-card:hover .ind-card__more{gap:12px}

/* ── Нижний CTA ─────────────────────────────────────────────── */
.svc-cta{text-align:center;margin-top:56px}
.svc-cta__note{font-size:13.5px;color:var(--tx3);margin-top:14px}

@media(max-width:991px){
  .svc-card{padding:22px 18px}
  .svc-head h3{font-size:16px}
  .svc-industries{margin-top:44px}
  .svc-cta{margin-top:40px}
  .svc-link:hover,.ind-card:hover{transform:none}
}
@media(max-width:480px){
  .svc-meta{gap:6px;font-size:12px}
  .svc-price,.svc-term{padding:4px 9px}
  .svc-kw{font-size:10.5px}
}