/* ============================================================
   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;
  /* Иконка слева, заголовок справа; текст и список — на всю ширину */
  display:grid;grid-template-columns:auto 1fr;
  column-gap:16px;row-gap:14px;align-items:center;
  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{
  grid-column:1;               /* левая колонка */
  width:54px;height:54px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);border:1px solid rgba(100,255,218,.26);
  color:var(--accent);font-size:24px;
  line-height:1;margin:0;
  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{
  grid-column:2;               /* правая колонка, рядом с иконкой */
  font-size:19px;font-weight:600;margin:0;
}
.card__text{
  grid-column:1 / -1;          /* на всю ширину карточки */
  color:var(--text-muted);font-size:15px;
}
.card__list{
  grid-column:1 / -1;          /* на всю ширину карточки */
  margin:0;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;line-height: 1.5}
.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;transition:opacity .3s var(--ease)}
.form__status--success{color:#64ffda;font-weight:500}
.form__status--error{color:#ff6b6b;font-weight:500}
.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}


/* ============================================================
   15. НОВОСТИ / БЛОГ
   ============================================================ */
.news__eyebrow{text-align:center;margin-bottom:clamp(20px,2.5vw,32px)}
.news__eyebrow .eyebrow::after{content:"";width:28px;height:1px;background:var(--accent);opacity:.7}
.news__eyebrow .eyebrow{margin-bottom:0}

.news__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:24px;
}
.news__empty{
  grid-column:1/-1;text-align:center;color:var(--text-muted);
  padding:40px 0;font-size:16px;
}

.news-card{
  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);
}
.news-card:hover{transform:translateY(-7px);border-color:rgba(100,255,218,.38);box-shadow:var(--shadow-glow)}
.news-card__link{display:flex;flex-direction:column;height:100%}
.news-card__thumb{
  aspect-ratio:16/9;background-size:cover;background-position:center;
  background-color:#16223a;position:relative;
}
.news-card__thumb--placeholder{
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(100,255,218,.12),transparent 60%),linear-gradient(160deg,#22314a,#161f31);
}
.news-card__thumb--placeholder span{
  font-family:var(--font-head);font-size:48px;font-weight:700;
  color:rgba(100,255,218,.35);
}
.news-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:10px}
.news-card__cat{
  align-self:flex-start;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-dim);
  padding:4px 11px;border-radius:999px;border:1px solid rgba(100,255,218,.24);
}
.news-card__title{font-family:var(--font-head);font-size:18px;font-weight:600;line-height:1.3;color:var(--text)}
.news-card__excerpt{font-size:14px;color:var(--text-muted);flex:1}
.news-card__meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;padding-top:14px;border-top:1px solid rgba(230,241,255,.08);
  font-size:13px;
}
.news-card__date{color:var(--text-muted)}
.news-card__more{color:var(--accent);font-weight:500;transition:transform .3s var(--ease)}
.news-card:hover .news-card__more{transform:translateX(4px)}

.news__actions{margin-top:clamp(32px,4vw,48px);display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---- Пагинация ---- */
.pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:clamp(32px,4vw,48px)}
.pagination__link{
  min-width:42px;height:42px;padding:0 14px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(230,241,255,.14);color:var(--text-muted);
  font-size:14px;transition:.25s var(--ease);
}
.pagination__link:hover{border-color:var(--accent);color:var(--text)}
.pagination__link.is-active{background:var(--accent);color:var(--navy-900);border-color:var(--accent);font-weight:600}

/* ---- Контакты в ряд ---- */
.contacts__list--row{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* ============================================================
   16. СТРАНИЦА ОДНОЙ СТАТЬИ
   ============================================================ */
/*.container--narrow{max-width:820px} */
*.container--narrow{} 

.breadcrumbs{font-size:13px;color:var(--text-muted);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumbs a{color:var(--accent)}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span{color:var(--text-muted)}

.article-single__head{margin-bottom:28px}
.article-single__title{
  font-size:clamp(28px,4vw,44px);font-weight:700;margin:14px 0 16px;line-height:1.15;
}
.article-single__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--text-muted)}
.article-single__cover{border-radius:var(--radius);overflow:hidden;margin-bottom:32px;border:1px solid rgba(230,241,255,.08)}
.article-single__cover img{width:100%;height:auto;display:block}

.article-single__content{font-size:17px;line-height:1.8;color:#c8d6ec}
.article-single__content p{margin-bottom:20px}
.article-single__content h2{font-size:26px;margin:36px 0 16px;color:var(--text)}
.article-single__content h3{font-size:21px;margin:28px 0 12px;color:var(--text)}
.article-single__content ul,.article-single__content ol{margin:0 0 20px;padding-left:26px}
.article-single__content li{margin-bottom:8px}
.article-single__content a{color:var(--accent);text-decoration:underline}
.article-single__content img{max-width:100%;height:auto;border-radius:12px;margin:20px 0}
.article-single__content blockquote{
  border-left:3px solid var(--accent);padding:8px 20px;margin:24px 0;
  background:var(--accent-dim);border-radius:0 10px 10px 0;color:var(--text-muted);font-style:italic;
}
.article-single__content pre{
  background:var(--navy-900);padding:18px;border-radius:10px;overflow-x:auto;
  border:1px solid rgba(100,255,218,.14);margin:20px 0;font-size:14px;
}
.article-single__content code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
.article-single__content table{width:100%;border-collapse:collapse;margin:20px 0}
.article-single__content th,.article-single__content td{
  border:1px solid rgba(230,241,255,.14);padding:10px 14px;text-align:left;
}

@media (max-width:560px){
  .news__grid{grid-template-columns:1fr}
  .article-single__content{font-size:16px}
}


/* ============================================================
   17. КНОПКА «НАВЕРХ» (стрелка справа)
   ============================================================ */
.to-top{
  position:fixed;
  right:clamp(18px,3vw,34px);
  bottom:clamp(18px,3vw,34px);
  z-index:90;

  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;

  color:var(--navy-900);
  background:var(--accent);
  border:1px solid rgba(100,255,218,.6);
  box-shadow:0 14px 34px -14px rgba(100,255,218,.75),0 6px 18px -8px rgba(2,8,20,.7);

  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.85);
  transition:opacity .35s var(--ease),transform .35s var(--ease),
             visibility .35s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.to-top:hover{
  background:#7dffe2;
  box-shadow:0 18px 42px -12px rgba(100,255,218,.9),0 8px 22px -8px rgba(2,8,20,.8);
  transform:translateY(-3px) scale(1.05);
}
.to-top:active{transform:translateY(-1px) scale(.97)}
.to-top svg{display:block}

/* Пульсирующее кольцо (аккуратный намёк на действие) */
.to-top::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid rgba(100,255,218,.55);
  animation:toTopPulse 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes toTopPulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

@media (max-width:560px){
  .to-top{width:46px;height:46px;right:16px;bottom:16px}
}

/* Уважаем настройку «уменьшить движение» */
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .2s linear,visibility .2s linear}
  .to-top::after{animation:none}
}


/* ============================================================
   18. КАРТОЧКА КЕЙСА С ИЗОБРАЖЕНИЕМ + СТРАНИЦА КЕЙСА
   ============================================================ */
/* Фото-превью в карточке портфолио */
.work__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.work:hover .work__img{transform:scale(1.06)}
.work__thumb--photo::before{display:none}
.work__thumb--photo .work__num{
  position:absolute;top:14px;left:16px;z-index:2;
  font-size:17px;line-height:1;padding:7px 12px;border-radius:9px;
  color:#eaf2ff;background:rgba(7,19,36,.74);backdrop-filter:blur(6px);
  border:1px solid rgba(230,241,255,.18);transition:color .45s var(--ease);
}
.work__thumb--photo .work__overlay{z-index:3}
.work:hover .work__thumb--photo .work__num{color:var(--accent);transform:none}

/* Блок фактов на странице кейса */
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0 0 34px}
.case-fact{background:var(--navy-700);border:1px solid rgba(230,241,255,.08);border-radius:14px;padding:18px 20px}
.case-fact__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.case-fact__value{font-size:16px;font-weight:600;margin-top:6px;color:var(--text)}
.case-fact__value a{color:var(--accent);text-decoration:none}
.case-fact__value a:hover{text-decoration:underline}
.case-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ============================================================
   19. СЛАЙДЕР КЕЙСА
   ============================================================ */
.case-slider{
  position:relative;margin:0 0 34px;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(230,241,255,.08);
  background:var(--navy-900,#071324);
  box-shadow:var(--shadow-card);
  
  
}
.case-slider:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.case-slider__viewport{position:relative;overflow:hidden}

.case-slider__track{
  display:flex;
  transition:transform .55s var(--ease);
  will-change:transform;
}
.case-slider__slide{flex:0 0 100%;min-width:100%}
.case-slider__slide img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/10;object-fit:cover;
}

/* Стрелки */
.case-slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:var(--text,#e6f1ff);
  background:rgba(7,19,36,.66);
  border:1px solid rgba(230,241,255,.2);
  backdrop-filter:blur(6px);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),opacity .25s var(--ease);
  opacity:.85;
}
.case-slider__nav:hover{
  background:var(--accent);color:var(--navy-900);
  border-color:var(--accent);opacity:1;
}
.case-slider__nav--prev{left:14px}
.case-slider__nav--next{right:14px}

/* Счётчик */
.case-slider__counter{
  position:absolute;top:14px;right:16px;
  padding:6px 13px;border-radius:999px;
  font-size:13px;color:var(--text,#e6f1ff);
  background:rgba(7,19,36,.7);backdrop-filter:blur(6px);
  border:1px solid rgba(230,241,255,.16);
}

/* Точки */
.case-slider__dots{
  display:flex;justify-content:center;gap:9px;
  padding:14px 0 16px;
}
.case-slider__dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(230,241,255,.24);
  border:1px solid transparent;
  transition:background .3s var(--ease),transform .3s var(--ease),width .3s var(--ease);
}
.case-slider__dot:hover{background:rgba(100,255,218,.55)}
.case-slider__dot.is-active{
  background:var(--accent);width:26px;border-radius:999px;
}

@media (max-width:560px){
  .case-slider__nav{width:38px;height:38px}
  .case-slider__nav--prev{left:8px}
  .case-slider__nav--next{right:8px}
  .case-slider__counter{font-size:12px;padding:5px 10px}
}

@media (prefers-reduced-motion:reduce){
  .case-slider__track{transition:none}
}

/* Два телефона в одном блоке контактов */
.contact__values{display:flex;flex-direction:column;gap:6px}