/* ============================================================
   1. ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   ============================================================ */
:root{
  --navy-900:#071324;
  --navy-800:#0a192f;
  --navy-700:#0e2140;
  --navy-600:#122a4f;
  --accent:#64ffda;
  --accent-dim:rgba(100,255,218,.12);
  --text:#e6f1ff;
  --text-muted:#8da2c0;

  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --radius:18px;
  --radius-sm:12px;
  --header-h:78px;

  --shadow-card:0 18px 40px -24px rgba(2,8,20,.9);
  --shadow-glow:0 0 0 1px rgba(100,255,218,.35),0 24px 60px -28px rgba(100,255,218,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --container:1200px;
  
  --font-ticker:'Geist',system-ui,sans-serif;

}

/* ============================================================
   2. БАЗОВЫЕ СБРОСЫ
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy-800);
  color:var(--text);
  font:400 clamp(15px,.4vw + 14px,17px)/1.7 var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-head);line-height:1.12;letter-spacing:-.02em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ============================================================
   3. УТИЛИТЫ РАЗМЕТКИ
   ============================================================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(40px,5vw,64px) 0;position:relative}
.section__head{max-width:640px;margin-bottom:clamp(36px,4vw,60px)}

.section__head--full{
  max-width:100%;
  text-align:center;
}
.section__head--full .section__text{
  margin-inline:auto;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:500 13px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);opacity:.7}
.section__title{font-size:clamp(28px,3.4vw,46px);font-weight:600}
.section__text{margin-top:18px;color:var(--text-muted);max-width:56ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   4. КНОПКИ
   ============================================================ */
.btn{
  --btn-fill:var(--accent);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid var(--accent);border-radius:999px;
  background:transparent;color:var(--accent);cursor:pointer;
  font:500 15px/1 var(--font-body);letter-spacing:.01em;
  overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--btn-fill);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.btn:hover,.btn:focus-visible{color:var(--navy-900);box-shadow:0 16px 38px -18px rgba(100,255,218,.75)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--accent);color:var(--navy-900);--btn-fill:transparent}
.btn--solid::before{background:var(--navy-800);transform:scaleX(0)}
.btn--solid:hover{color:var(--accent)}
.btn--ghost{border-color:rgba(230,241,255,.22);color:var(--text)}
.btn--ghost::before{background:rgba(230,241,255,.08)}
.btn--ghost:hover{color:var(--text);box-shadow:none}
.btn__arrow{transition:transform .35s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ============================================================
   5. ШАПКА
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease),height .35s var(--ease);
}
.header.is-scrolled{
  height:66px;
  background:rgba(10,25,47,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(100,255,218,.14);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}

.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:600;font-size:18px}

.logo__mark{
  flex:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  display:flex;
  align-items:center;
}
.logo__mark img{
  height:46px;   /* совпадает с высотой кнопки .btn */
  width:auto;    /* пропорциональная ширина */
  display:block;
}

.logo__mark span{transform:translateY(-1px)}
.logo b{font-weight:600}
.logo em{font-style:normal;color:var(--text-muted);font-weight:500}

.nav{display:flex;align-items:center;gap:6px}
.nav__link{
  position:relative;padding:10px 14px;border-radius:10px;
  font-size:15px;color:var(--text-muted);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--text);background:rgba(230,241,255,.05)}
.nav__link.is-active{color:var(--text)}
.nav__link.is-active::after{transform:scaleX(1)}
.header__cta{display:inline-flex}

.burger{
  display:none;width:44px;height:44px;border:1px solid rgba(230,241,255,.18);
  border-radius:12px;background:transparent;cursor:pointer;
  place-items:center;gap:5px;flex-direction:column;
}
.burger span{display:block;width:18px;height:1.6px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(40px,5vw,74px));padding-bottom:clamp(30px,2.5vw,50px);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}

.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__grid{
  position:absolute;inset:-10% -10% 0;
  background-image:radial-gradient(circle,rgba(100,255,218,.16) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 12%,#000 0%,transparent 72%);
          mask-image:radial-gradient(120% 80% at 50% 12%,#000 0%,transparent 72%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{to{background-position:34px 34px}}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.hero__glow--1{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(100,255,218,.5),transparent 68%)}
.hero__glow--2{width:460px;height:460px;top:120px;right:-140px;background:radial-gradient(circle,rgba(58,168,255,.42),transparent 68%)}
.particle{position:absolute;border-radius:50%;background:var(--accent);opacity:.5;animation:float 12s ease-in-out infinite}
.particle:nth-child(3){width:8px;height:8px;top:22%;left:12%}
.particle:nth-child(4){width:5px;height:5px;top:64%;left:26%;animation-duration:16s;animation-delay:-3s}
.particle:nth-child(5){width:10px;height:10px;top:34%;left:57%;animation-duration:19s;animation-delay:-7s;opacity:.28}
.particle:nth-child(6){width:6px;height:6px;top:78%;left:70%;animation-duration:14s;animation-delay:-5s}
.particle:nth-child(7){width:4px;height:4px;top:12%;left:82%;animation-duration:18s;animation-delay:-9s}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(18px,-26px,0) scale(1.35)}
  66%{transform:translate3d(-14px,16px,0) scale(.85)}
}

.hero__badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 12px;margin-bottom:26px;
  border:1px solid rgba(100,255,218,.28);border-radius:999px;
  background:var(--accent-dim);color:var(--accent);
  font-size:13px;letter-spacing:.02em;
}
.hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(100,255,218,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(100,255,218,0)}}

.hero__title{font-size:clamp(34px,5.6vw,64px);font-weight:700}
.hero__title span{
  background:linear-gradient(100deg,var(--accent),#7ee8ff 55%,#a9b8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__text{margin-top:24px;max-width:52ch;color:var(--text-muted);font-size:clamp(16px,.5vw + 15px,18px)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* ── hero__meta: один ряд без переноса ── */
.hero__meta{
  display:flex;
  flex-wrap:nowrap;          /* ← зафиксировано в одну строку */
  gap:14px 34px;
  margin-top:44px;padding-top:28px;
  border-top:1px solid rgba(230,241,255,.1);
  overflow-x:auto;           /* горизонтальный скролл на очень узких экранах */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;      /* скрываем скроллбар, но функция остаётся */
}
.hero__meta::-webkit-scrollbar{display:none}
.hero__meta div{flex:none;font-size:14px;color:var(--text-muted)}
.hero__meta b{display:block;font-family:var(--font-head);font-size:22px;font-weight:600;color:var(--text)}

/* Тизер-полоса под шапкой */
.hero__ticker{
  position:absolute;
  top:var(--header-h);
  left:0;right:0;
  border-bottom:1px solid rgba(100,255,218,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:10;
}
.hero__ticker-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:16px;
  font:300 16px/1 var(--font-ticker);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600
}

.hero__ticker-inner span:not(.hero__ticker-dot){
  transition:color .3s var(--ease);
}
.hero__ticker-inner:hover span:not(.hero__ticker-dot){
  color:var(--text);
}
.hero__ticker-dot{
  display:inline-block;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
  flex:none;
}

/* Изометрическая композиция */
.iso{perspective:1400px;display:grid;place-items:center}
.iso__stage{
  position:relative;width:100%;max-width:440px;aspect-ratio:1/1;
  transform:rotateX(52deg) rotateZ(-42deg);
  transform-style:preserve-3d;
  animation:isoFloat 9s ease-in-out infinite;
}
@keyframes isoFloat{50%{transform:rotateX(52deg) rotateZ(-42deg) translateZ(26px)}}
.iso__plate{
  position:absolute;inset:12% 12%;border-radius:20px;
  background:linear-gradient(150deg,rgba(18,42,79,.95),rgba(10,25,47,.9));
  border:1px solid rgba(100,255,218,.2);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.95);
}
.iso__plate--1{transform:translateZ(0);background-image:radial-gradient(circle,rgba(100,255,218,.14) 1px,transparent 1px);background-size:22px 22px}
.iso__plate--2{transform:translateZ(46px);padding:22px;display:flex;flex-direction:column;gap:12px}
.iso__plate--3{transform:translateZ(96px);inset:26% 26%;border-color:rgba(100,255,218,.45);background:linear-gradient(150deg,rgba(100,255,218,.16),rgba(10,25,47,.6))}
.iso__bar{height:9px;border-radius:999px;background:rgba(230,241,255,.16)}
.iso__bar:nth-child(1){width:42%;background:var(--accent);opacity:.85}
.iso__bar:nth-child(2){width:88%}
.iso__bar:nth-child(3){width:66%}
.iso__chart{margin-top:auto;display:flex;align-items:flex-end;gap:8px;height:44%}
.iso__chart i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--accent),rgba(100,255,218,.15))}
.iso__chart i:nth-child(1){height:38%}
.iso__chart i:nth-child(2){height:62%}
.iso__chart i:nth-child(3){height:48%}
.iso__chart i:nth-child(4){height:86%}
.iso__chart i:nth-child(5){height:70%}

/* ============================================================
   7. УСЛУГИ
   ============================================================ */
.services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px}
.card{
  position:relative;padding:32px 28px 30px;border-radius:var(--radius);
  background:linear-gradient(165deg,var(--navy-700),rgba(10,25,47,.75));
  border:1px solid rgba(230,241,255,.08);
  box-shadow:var(--shadow-card);
  overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:radial-gradient(420px circle at 50% -10%,rgba(100,255,218,.2),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover{transform:translateY(-8px);border-color:rgba(100,255,218,.4);box-shadow:var(--shadow-glow)}
.card:hover::after{opacity:1}
.card__icon{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(100,255,218,.26);
  color:var(--accent);font-size:24px;margin-bottom:22px;
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.card:hover .card__icon{transform:translateY(-2px) scale(1.06);background:rgba(100,255,218,.2)}
.card__title{font-size:19px;font-weight:600;margin-bottom:12px}
.card__text{color:var(--text-muted);font-size:15px}
.card__list{margin-top:18px;display:grid;gap:8px;font-size:14px;color:var(--text-muted)}
.card__list li{display:flex;gap:9px}
.card__list li::before{content:"▸";color:var(--accent)}

/* ============================================================
   8. БИТРИКС24 — новая секция
   ============================================================ */
.bitrix{
  background:
    radial-gradient(ellipse 90% 55% at 10% 0,rgba(100,255,218,.065),transparent 65%),
    radial-gradient(ellipse 70% 60% at 90% 100%,rgba(58,168,255,.07),transparent 65%);
}
/* Разделитель-полоса сверху и снизу */
.bitrix::before,.bitrix::after{
  content:"";display:block;position:absolute;
  left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(100,255,218,.2) 50%,transparent);
}
.bitrix::before{top:0}
.bitrix::after{bottom:0}

/* Верхняя зона: текст + схема процесса */
.bitrix__top{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:clamp(44px,5vw,72px)}
.bitrix__desc{color:var(--text-muted);font-size:clamp(15px,.3vw + 14px,17px);line-height:1.75;margin-top:20px}
.bitrix__desc + .bitrix__desc{margin-top:14px}
.bitrix__cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* Схема процесса (правая колонка) */
.bx-process{display:flex;flex-direction:column;gap:0}
.bx-step{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid rgba(230,241,255,.07);
  transition:padding-left .35s var(--ease);
}
.bx-step:last-child{border-bottom:none}
.bx-step:hover{padding-left:6px}
.bx-step__num{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--accent-dim);border:1px solid rgba(100,255,218,.26);
  font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--accent);
  transition:background .35s var(--ease);
}
.bx-step:hover .bx-step__num{background:rgba(100,255,218,.22)}
.bx-step__title{font-family:var(--font-head);font-size:15.5px;font-weight:600;margin-bottom:4px}
.bx-step__text{font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* Сетка видов работ */
.bitrix__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(270px, 1fr));
  gap:20px;
  justify-content:center;
 }
 
.bitem{
  padding:26px 24px;border-radius:var(--radius-sm);
  background:rgba(14,33,64,.7);
  border:1px solid rgba(230,241,255,.08);
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  display:flex;gap:16px;align-items:flex-start;
}
.bitem:hover{transform:translateY(-5px);border-color:rgba(100,255,218,.36);box-shadow:var(--shadow-glow)}
.bitem__icon{
  flex:none;width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;font-size:20px;
  background:var(--accent-dim);border:1px solid rgba(100,255,218,.2);color:var(--accent);
  transition:transform .4s var(--ease);
}
.bitem:hover .bitem__icon{transform:scale(1.08) rotate(-4deg)}
.bitem__title{font-family:var(--font-head);font-size:15.5px;font-weight:600;margin-bottom:6px}
.bitem__text{font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* Нижняя плашка-баннер */
.bitrix__banner{
  margin-top:clamp(36px,4vw,56px);
  padding:clamp(24px,3vw,40px) clamp(24px,4vw,48px);
  border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(100,255,218,.1),rgba(58,168,255,.09));
  border:1px solid rgba(100,255,218,.24);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.bitrix__banner-title{font-family:var(--font-head);font-size:clamp(17px,1.5vw,22px);font-weight:600;margin-bottom:6px}
.bitrix__banner-text{font-size:14.5px;color:var(--text-muted);max-width:56ch}

/* ============================================================
   9. ПОРТФОЛИО
   ============================================================ */
.portfolio__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.work{
  display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-700);border:1px solid rgba(230,241,255,.08);
  box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.work:hover{transform:translateY(-7px);border-color:rgba(100,255,218,.38);box-shadow:var(--shadow-glow)}
.work__thumb{
  position:relative;aspect-ratio:16/10;
  background:
    linear-gradient(135deg,rgba(100,255,218,.07),transparent 55%),
    linear-gradient(160deg,#22314a,#161f31);
  display:grid;place-items:center;overflow:hidden;
}
.work__thumb::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(230,241,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(230,241,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
}
.work__num{font-family:var(--font-head);font-size:54px;font-weight:700;color:rgba(230,241,255,.16);transition:color .45s var(--ease),transform .45s var(--ease)}
.work:hover .work__num{color:rgba(100,255,218,.3);transform:scale(1.08)}
.work__overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(7,19,36,.72);backdrop-filter:blur(3px);
  color:var(--accent);font-size:15px;font-weight:500;
  opacity:0;transition:opacity .4s var(--ease);
}
.work:hover .work__overlay{opacity:1}
.work__body{padding:22px 24px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.work__title{font-size:17px;font-weight:600;margin-bottom:6px}
.work__tag{font-size:13px;color:var(--text-muted)}
.work__year{font-size:13px;color:var(--accent);white-space:nowrap;padding-top:2px}

/* ============================================================
   10. О НАС
   ============================================================ */
.about__inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.about__photo{
  position:relative;aspect-ratio:4/3.4;border-radius:22px;overflow:hidden;
  background:linear-gradient(155deg,#22314a,#111a2b);
  border:1px solid rgba(230,241,255,.1);box-shadow:var(--shadow-card);
  display:grid;place-items:center;text-align:center;
}
.about__photo::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 20% 0,rgba(100,255,218,.16),transparent 65%)}
.about__photo span{position:relative;color:var(--text-muted);font-size:14px;letter-spacing:.04em}
.about__photo b{display:block;font-family:var(--font-head);font-size:44px;color:rgba(230,241,255,.2);margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.stat{padding:22px 20px;border-radius:var(--radius-sm);background:rgba(18,42,79,.5);border:1px solid rgba(230,241,255,.08);transition:border-color .4s var(--ease),transform .4s var(--ease)}
.stat:hover{border-color:rgba(100,255,218,.35);transform:translateY(-4px)}
.stat__num{font-family:var(--font-head);font-size:clamp(28px,3vw,38px);font-weight:700;color:var(--accent);line-height:1}
.stat__label{margin-top:8px;font-size:13.5px;color:var(--text-muted)}

/* ============================================================
   11. КОНТАКТЫ
   ============================================================ */
.contacts__inner{display:grid;grid-template-columns:1fr .9fr;gap:clamp(30px,4vw,56px);align-items:start}
.form{
  padding:clamp(26px,3vw,40px);border-radius:var(--radius);
  background:linear-gradient(165deg,var(--navy-700),rgba(10,25,47,.8));
  border:1px solid rgba(230,241,255,.09);box-shadow:var(--shadow-card);
}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.field input,.field textarea{
  width:100%;padding:15px 17px;border-radius:var(--radius-sm);
  background:rgba(7,19,36,.65);border:1px solid rgba(230,241,255,.12);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.field textarea{resize:vertical;min-height:132px}
.field input::placeholder,.field textarea::placeholder{color:rgba(141,162,192,.6)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(7,19,36,.9);
  box-shadow:0 0 0 4px rgba(100,255,218,.13);
}
.field.has-error input,.field.has-error textarea{border-color:#ff7a8a;box-shadow:0 0 0 4px rgba(255,122,138,.12)}
.field__error{display:none;margin-top:8px;font-size:13px;color:#ff9aa6}
.field.has-error .field__error{display:block}
.form__note{margin-top:16px;font-size:13px;color:var(--text-muted)}
.form__status{margin-top:18px;font-size:14.5px;color:var(--accent);min-height:22px}
.form .btn{width:100%}

.contacts__list{display:grid;gap:14px}
.contact{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 22px;border-radius:var(--radius-sm);
  background:rgba(18,42,79,.4);border:1px solid rgba(230,241,255,.08);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.contact:hover{transform:translateX(5px);border-color:rgba(100,255,218,.35);background:rgba(18,42,79,.7)}
.contact__icon{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--accent-dim);color:var(--accent);font-size:18px}
.contact__label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.contact__value{font-family:var(--font-head);font-size:16.5px;font-weight:500;margin-top:4px}
.contact a.contact__value:hover{color:var(--accent)}

/* ============================================================
   12. ФУТЕР
   ============================================================ */
.footer{background:var(--navy-900);border-top:1px solid rgba(230,241,255,.08);padding:44px 0}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.footer__copy{font-size:14px;color:var(--text-muted)}
.socials{display:flex;gap:12px}
.socials a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(230,241,255,.14);color:var(--text-muted);
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.socials a:hover{color:var(--navy-900);background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}

/* ============================================================
   13. АНИМАЦИЯ ПОЯВЛЕНИЯ
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   14. АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width:1024px){
  .hero__inner,.about__inner,.contacts__inner,.bitrix__top{grid-template-columns:1fr}
  .iso{order:-1}
  .iso__stage{max-width:340px}
  .about__photo{max-width:520px}
}

@media (max-width:860px){
  :root{--header-h:66px}
  .burger{display:flex}

  /* Шапка на мобильных: логотип — бургер — кнопка (переносится строкой ниже) */
  .header__inner{flex-wrap:wrap}
  .logo{order:1}
  .burger{order:2}
  .header__cta{display:none}
  
  /* Высота шапки фиксирована, поэтому кнопку выносим в поток мобильного меню */
  .header{height:auto;min-height:var(--header-h);padding-block:10px}
  .header.is-scrolled{height:auto;min-height:60px}

  .nav{
    position:fixed;inset:var(--header-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:20px 24px 28px;
    background:rgba(7,19,36,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(100,255,218,.16);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__link{padding:14px 12px;font-size:16px;border-bottom:1px solid rgba(230,241,255,.06)}
  .nav__link::after{display:none}
  
  /* Скрываем кнопку, пока мобильное меню открыто */
  .nav.is-open ~ .header__cta {
    display: none;
  }
}

@media (max-width:640px){
  .container{padding-inline:18px}
  .hero__actions .btn{width:100%}
  .stats{grid-template-columns:1fr;gap:12px}
  .portfolio__grid{grid-template-columns:1fr}
  .footer__inner{flex-direction:column;text-align:center}
  .bitrix__banner{flex-direction:column}

  /* Тикер на мобильных: показываем полностью, переносим по фразам */
  .hero__ticker-inner{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
    text-align:center;
    padding:10px 18px;
  }
  /* Точки-разделители скрываем при переносе — они теряют смысл между строк */
  .hero__ticker-dot{display:none}
}

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

@media (max-width:1024px){
  .bitrix__grid{
    grid-template-columns:repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width:640px){
  .bitrix__grid{
    grid-template-columns:1fr;
  }
}

.about__blob {
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
}
.about__blob svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  overflow: visible;
}
.blob-shape {
  animation: blobMorph 14s ease-in-out infinite;
  transform-origin: center;
}
@keyframes blobMorph {
  0%, 100% {
    d: path("M245 80 C310 72 390 108 418 175 C448 248 432 340 372 390 C308 442 210 448 148 410 C84 370 58 284 68 210 C78 136 178 90 245 80Z");
  }
  33% {
    d: path("M260 72 C330 60 406 94 426 168 C448 248 420 352 355 396 C290 440 196 452 132 406 C68 360 62 270 76 196 C90 124 188 84 260 72Z");
  }
  66% {
    d: path("M232 88 C298 76 382 118 410 184 C440 256 438 344 376 392 C312 440 218 442 156 402 C92 362 60 278 72 204 C84 130 166 100 232 88Z");
  }
}

/* Адаптация SVG под мобильные */
.it-svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  overflow: visible;
}

/* Градиентная заливка заголовка секции (как в hero) */
.section__title--gradient{
  background:linear-gradient(100deg,var(--accent),#7ee8ff 55%,#a9b8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Центрированная шапка секции */
.section__head--center{
  margin-inline:auto;
  text-align:center;
}
.section__head--center .section__text{margin-inline:auto}
/* Симметричные штрихи по бокам надзаголовка */
.section__head--center .eyebrow::after{
  content:"";width:28px;height:1px;background:var(--accent);opacity:.7;
}

/* Надзаголовок секции — по центру, над двухколоночной зоной */
.bitrix__eyebrow{
  text-align:center;
  margin-bottom:clamp(20px,2.5vw,32px);
}
/* Симметричный штрих справа, чтобы акцент не висел только слева */
.bitrix__eyebrow .eyebrow::after{
  content:"";width:28px;height:1px;background:var(--accent);opacity:.7;
}
.bitrix__eyebrow .eyebrow{margin-bottom:0}

.portfolio__eyebrow{
  text-align:center;
  margin-bottom:clamp(20px,2.5vw,32px);
}
.portfolio__eyebrow .eyebrow::after{
  content:"";width:28px;height:1px;background:var(--accent);opacity:.7;
}
.portfolio__eyebrow .eyebrow{margin-bottom:0}

.about__eyebrow{
  text-align:center;
  grid-column:1 / -1;   /* растягиваем на обе колонки грида .about__inner */
}
.about__eyebrow .eyebrow::after{
  content:"";width:28px;height:1px;background:var(--accent);opacity:.7;
}
.about__eyebrow .eyebrow{margin-bottom:0}

.contacts__eyebrow{
  text-align:center;
  margin-bottom:clamp(20px,2.5vw,32px);
}
.contacts__eyebrow .eyebrow::after{
  content:"";width:28px;height:1px;background:var(--accent);opacity:.7;
}
.contacts__eyebrow .eyebrow{margin-bottom:0}