/* ===== 3А GROUP — v3. Каркас вдохновлён 2x2-agency.ru, светлая палитра ===== */
:root{
  --bg:#F1F0EB;         /* светлый шершавый фон (текстура + градиент — на body) */
  --bg-soft:#E7E5DE;    /* чуть темнее для чередования секций */
  --bg-deep:#16161A;    /* тёмный футер — контрастная "рамка" снизу */
  --footer-ink:#F5F4F0;
  --footer-ink-mute:#9A9A96;
  --ink:#15151A;        /* чёрный текст на светлом фоне */
  --ink-soft:#4B4B4A;
  --ink-mute:#7B7A76;
  --line:rgba(21,21,26,0.16);
  --line-soft:rgba(21,21,26,0.09);
  --pill-bg:#15151A;    /* чёрные кнопки, как у референса */
  --pill-text:#FFFFFF;
  --card-bg:rgba(21,21,26,0.03);
  --glow:#FFFFFF;

  --orange:#F5A11D;     /* фирменный жёлтый — точечный акцент (буквы «А», цена) */
  --orange-dk:#C97C08;  /* притемнённый — безопасен по контрасту на светлом фоне для текста */

  --chart-1:#15151A; --chart-2:#8B8A86; --chart-3:#C9C7C0; --chart-good:#15151A;

  --font:'Raleway', 'Segoe UI', sans-serif;

  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px;

  --container-max:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.65;
  color:var(--ink);-webkit-font-smoothing:antialiased;
  font-weight:400;overflow-x:hidden;max-width:100%;
  background-color:var(--bg);
  background-image:
    linear-gradient(115deg, rgba(20,20,18,0) 42%, rgba(20,20,18,0.13) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:no-repeat, repeat;
  background-size:cover, 180px 180px;
  background-attachment:fixed, fixed;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
p{margin:0 0 var(--space-2);}

h1,h2,h3{font-family:var(--font);font-weight:300;line-height:1.08;margin:0 0 var(--space-3);overflow-wrap:break-word;}
h1{font-size:clamp(40px,6.5vw,100px);letter-spacing:-0.01em;}
h2{font-size:clamp(30px,4.5vw,58px);letter-spacing:-0.01em;}
h3{font-size:clamp(20px,2vw,26px);font-weight:400;}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4);}
.container-narrow{max-width:820px;}
.section{padding:var(--space-7) 0;}
.section-soft{background:var(--bg-soft);}
.section-tight{padding:var(--space-6) 0;}

.eyebrow{font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--space-2);}

/* ===== Заголовок страницы + кнопка справа — универсальный ряд с выравниванием
   по базовой линии текста (align-items:baseline) ===== */
.page-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;}
.lead{font-size:19px;color:var(--ink-soft);max-width:620px;font-weight:300;}

/* ===== Кнопки-пилюли ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-weight:600;font-size:14px;
  padding:15px 30px;border:1.5px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn-primary{background:var(--pill-bg);color:var(--pill-text);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-lg{padding:19px 38px;font-size:15px;}
/* Кнопка внутри .page-title-row — крупный кегль, идёт после .btn-lg,
   чтобы точно переопределить его font-size (тот же баг с порядком CSS, что уже чинили раньше).
   --sm — та же кнопка, но на 30% меньше (напр. одна в колонке текста, не рядом с h1). */
.title-row-btn{font-size:clamp(32px,5vw,64px);line-height:1;padding:0.12em 0.55em;}
.title-row-btn--sm{font-size:clamp(22px,3.5vw,45px);margin-top:var(--space-4);}

/* ===== Шапка ===== */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(241,240,235,0.92);
  backdrop-filter:none; /* избегаем контейнинг-блок бага с position:fixed внутри */
  border-bottom:1px solid var(--line-soft);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:108px;gap:var(--space-4);}

.logo{display:flex;flex-direction:column;line-height:1;gap:3px;border:2px solid var(--ink);padding:10px 16px;}
.logo-mark{display:flex;align-items:baseline;gap:1px;font-size:42px;font-weight:800;letter-spacing:0.01em;}
.logo-mark svg{width:28px;height:36px;margin-left:2px;position:relative;top:3px;}
.logo-sub{font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);}

/* Акцентная буква «А» — в логотипе и в заголовках Анализ/Аналитика/Автоматизация */
.accent-a{color:var(--orange-dk);}
/* Акцентное слово — уровень позиции услуги (базовый/расширенный/комплексный) */
.accent-word{color:var(--orange-dk);}

.main-nav{display:flex;align-items:center;gap:var(--space-4);}
.nav-item{position:relative;}
.nav-link{font-size:17px;font-weight:600;letter-spacing:0.01em;display:flex;align-items:center;gap:6px;padding:8px 0;}
.nav-link:hover{color:var(--ink-soft);}
.nav-caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s ease;}
.nav-item.open .nav-caret{transform:rotate(-135deg);margin-top:2px;}

.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:230px;background:var(--bg-soft);border:1px solid var(--line-soft);
  padding:var(--space-2);margin-top:var(--space-2);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown a{display:block;padding:10px 14px;font-size:14px;border-radius:6px;}
.dropdown a:hover{background:rgba(255,255,255,0.06);}

.header-actions{display:flex;align-items:center;gap:var(--space-3);}
.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.nav-toggle span{width:22px;height:1.5px;background:var(--ink);}

/* ===== Hero =====
   .hero-viewport оборачивает hero + бегущую строку на главной так, чтобы
   вместе с шапкой (108px) они ровно заполняли экран при загрузке —
   плашки услуг оказываются у нижней границы окна без скролла. */
.hero-viewport{
  display:flex;flex-direction:column;
  min-height:calc(100vh - 108px);
  min-height:calc(100dvh - 108px);
}
.hero-viewport .hero{flex:1 0 auto;display:flex;align-items:center;padding:var(--space-4) 0;}
.hero-viewport .ticker{flex:none;}

.hero{padding:var(--space-5) 0 var(--space-4);}
.hero-title{font-weight:300;font-size:clamp(30px,4vw,60px);line-height:1.16;margin-bottom:0;}
.hero-line{display:block;}
/* Десктоп и мобильный видят разный текст в hero (разная длина/структура
   фразы, не только вёрстка) — оба блока лежат в разметке всегда, десктопный
   виден по умолчанию, мобильный подменяет его в @media(max-width:768px). */
.hero-mobile-text{display:none;}
.hero-capsule{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--pill-text);border-radius:999px;
  padding:6px 28px;margin:6px 0;line-height:1;vertical-align:middle;
}
.hero-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;}

/* ===== Бегущая строка услуг ===== */
.ticker{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:var(--space-4) 0;}
.ticker-track{display:flex;gap:var(--space-3);width:max-content;animation:ticker-scroll 28s linear infinite;}
.ticker-pill{
  flex:none;display:flex;align-items:center;padding:22px 38px;border-radius:999px;
  border:1.5px solid var(--line);font-size:19px;font-weight:500;color:var(--ink);white-space:nowrap;
}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== Строка "слово слева — текст справа" (агентство/подход) ===== */
.split-row{display:grid;grid-template-columns:470px 1fr;gap:var(--space-5);padding:var(--space-5) 0;border-top:1px solid var(--line-soft);align-items:start;}
.split-row:last-child{border-bottom:1px solid var(--line-soft);}
.split-row .split-label{font-size:clamp(34px,4.6vw,64px);font-weight:400;letter-spacing:-0.01em;}
.split-row .split-text{font-size:18px;color:var(--ink-soft);max-width:60ch;font-weight:300;}

/* ===== Блок «О компании» — тизер на главной ===== */
.company-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-5);align-items:center;}
.company-people{display:flex;flex-direction:column;align-items:center;flex:none;}
.company-circle{
  width:68px;height:68px;border-radius:50%;overflow:hidden;flex:none;
  border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line-soft);margin-top:-20px;
}
.company-circle:first-child{margin-top:0;}
.company-circle img{width:100%;height:100%;object-fit:cover;}
.company-count{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:14px;}
.company-count-num{font-size:14px;font-weight:600;}
.company-count-arrow{width:1px;height:26px;background:var(--line);position:relative;}
.company-count-arrow::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid var(--ink-mute);
}
.company-count-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);}

.company-media{border-radius:130px;overflow:hidden;height:260px;background:#000;min-width:280px;}
.company-media img{width:100%;height:100%;object-fit:cover;}

.company-card{
  background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:28px;
  padding:var(--space-4);width:230px;flex:none;
}
.company-card-logo{margin-bottom:var(--space-3);}
.company-card-logo .logo-mark{font-size:22px;}
.company-card-logo .logo-mark svg{width:15px;height:19px;}
.company-card-stat{font-size:44px;font-weight:300;line-height:1;}
.company-card-text{font-size:14px;color:var(--ink-soft);margin:8px 0 var(--space-3);}

.company-heading{margin-top:var(--space-6);max-width:640px;}

/* ===== Призыв к действию — промо-цена ===== */
.promo-inner{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:center;}
.promo-photo{width:160px;height:160px;border-radius:50%;overflow:hidden;border:1px solid var(--line);flex:none;}
.promo-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.price-row{display:flex;align-items:baseline;gap:18px;margin:var(--space-3) 0 var(--space-4);}
.price-old{font-size:22px;color:var(--ink-mute);text-decoration:line-through;}
.price-new{font-size:48px;font-weight:700;color:var(--orange-dk);line-height:1;}

/* ===== Партнёрская программа — визуальный блок =====
   Те же классы, что и в "О компании" (.company-media/.company-card),
   просто в 2-колоночном ряду без кружков и без наложения. */
.partner-row-2col{
  display:grid;grid-template-columns:1fr 320px;gap:var(--space-4);align-items:stretch;
}
.partner-row-2col .company-media{width:100%;min-width:0;}
.partner-row-2col .company-card{width:100%;display:flex;flex-direction:column;justify-content:center;}
.partner-stat{font-size:60px;font-weight:800;line-height:1;letter-spacing:-0.02em;}
.svc-card-title{font-size:clamp(20px,2.2vw,30px);font-weight:700;line-height:1.15;text-align:center;}

/* ===== Страницы услуг — список позиций с ценой в 3 валютах =====
   Заголовок услуги + цена в одной строке; абзац с описанием — опционально
   ниже, во всю ширину (не у всех позиций есть развёрнутое описание). */
.svc-block{margin-bottom:var(--space-8);}
.svc-price-list{margin-top:var(--space-5);}
.svc-item{padding:22px 0;border-top:1px solid var(--line-soft);}
.svc-item:last-child{border-bottom:1px solid var(--line-soft);}
.svc-item-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;}
.svc-item-title{font-size:18px;font-weight:600;max-width:60ch;}
.svc-item-price{font-size:15px;font-weight:600;white-space:nowrap;color:var(--ink);}
.svc-item-price .cur-usd{color:var(--orange-dk);}
.svc-item-period{font-size:13px;font-weight:400;color:var(--ink-mute);}

/* ===== Сноска-звёздочка под прайсом ===== */
.price-footnote{display:flex;gap:16px;align-items:flex-start;margin-top:var(--space-5);}
.price-footnote-mark{font-size:40px;line-height:1;font-weight:700;color:var(--orange-dk);flex:none;}
.price-footnote p{font-size:14px;color:var(--ink-mute);max-width:65ch;margin:6px 0 0;}
.svc-item-desc{font-size:15px;color:var(--ink-soft);margin-top:10px;max-width:75ch;font-weight:300;line-height:1.65;}
.svc-item-desc a{text-decoration:underline;color:var(--ink);}

@media (max-width:640px){
  .svc-item-head{flex-direction:column;align-items:flex-start;gap:4px;}
  .svc-item-price{white-space:normal;}
}

/* ===== Круги команды ===== */
.team-row{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.team-circle{
  width:150px;height:150px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--card-bg);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
}
.team-circle img{width:100%;height:100%;object-fit:cover;}
.team-circle svg{width:46%;height:46%;color:var(--ink-mute);}

/* ===== Список команды: фото-кружок слева, имя + описание справа ===== */
.team-list{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6);}
.team-member{display:grid;grid-template-columns:150px 1fr;gap:var(--space-5);align-items:start;}
.team-member-photo{
  width:150px;height:150px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--card-bg);border:1px solid var(--line-soft);
}
.team-member-photo img{width:100%;height:100%;object-fit:cover;}
.team-member-name{font-size:20px;font-weight:700;margin:0 0 8px;}
.team-member-bio{font-size:15px;color:var(--ink-soft);font-weight:300;line-height:1.65;max-width:70ch;margin:0;}

/* ===== Утверждение «О компании» на главной — средний кегль ===== */
.company-statement{font-size:18px;line-height:1.55;font-weight:400;margin:0;color:var(--ink);}
.company-statement strong{font-weight:700;}

/* ===== Круглые рамки под будущие фото ===== */
.photo-frame{
  border-radius:28px;border:1px solid var(--line);background:var(--card-bg);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  color:var(--ink-mute);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;overflow:hidden;
  position:relative;
}
.photo-frame img{width:100%;height:100%;object-fit:cover;border-radius:28px;}
.photo-frames{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}

/* Лёгкая "рябь" на фото — перекликается с зерном/шумом gif в блоке «О компании»:
   мягкое размытие + анимированный шумовой слой поверх фото. */
.photo-frame--rippled img{filter:blur(0.4px) saturate(1.05) contrast(1.03);}
.photo-frame--rippled::after{
  content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ripple-flicker 1.4s steps(2) infinite;
}
@keyframes ripple-flicker{0%,100%{opacity:0.35;}50%{opacity:0.55;}}

/* ===== Ticklist ===== */
.ticklist{display:grid;gap:12px;}
.ticklist li{position:relative;padding-left:24px;font-size:16px;color:var(--ink-soft);font-weight:300;}
.ticklist li::before{content:'';position:absolute;left:0;top:0.55em;width:8px;height:8px;border:1.5px solid var(--ink);border-radius:50%;}

/* ===== Основатель ===== */
.founder-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-6);align-items:center;}
.founder-photo{border-radius:28px;overflow:hidden;border:1px solid var(--line);}
.founder-photo img{filter:grayscale(1) contrast(1.05);width:100%;height:100%;object-fit:cover;}
.founder-quote{font-weight:300;font-style:italic;font-size:22px;border-left:2px solid var(--ink);padding-left:var(--space-3);margin-top:var(--space-3);}

/* ===== Контакты ===== */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);}
.contact-row{padding:var(--space-3) 0;border-top:1px solid var(--line-soft);}
.contact-row:last-child{border-bottom:1px solid var(--line-soft);}
.contact-row .value{font-size:20px;font-weight:400;display:inline-block;margin-bottom:4px;}
.contact-row .value:hover{color:var(--ink-soft);text-decoration:underline;}
.contact-row .hint{font-size:14px;color:var(--ink-mute);}

/* ===== Цифровой двойник (страница «Цифровые двойники») =====
   Слайдер на 2 картинки: оба слайда лежат друг на друге абсолютным
   позиционированием внутри рамки фиксированного соотношения 3:2 (совпадает
   с исходным размером обеих иллюстраций — обрезка минимальна), JS
   (main.js) раз в 1.5с переключает класс .is-active, CSS делает кроссфейд. */
.twin-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-6);align-items:center;}
.twin-image-frame{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;aspect-ratio:3/2;}
.twin-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;}
.twin-slide.is-active{opacity:1;}
.twin-slide img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);}
/* Текстовая колонка на этой странице подогнана компактнее образца .lead/.ticklist,
   чтобы вся связка (картинки + текст + кнопка) помещалась по высоте без скролла. */
.twin-content h2{font-size:clamp(24px,2.6vw,36px);line-height:1.15;margin-bottom:var(--space-2);}
.twin-content .lead{font-size:16px;margin-bottom:var(--space-2);}
.twin-content .ticklist{gap:8px;}
.twin-content .ticklist li{font-size:15px;}
.twin-content .title-row-btn--sm{
  margin-top:var(--space-2);display:flex;width:fit-content;margin-left:auto;margin-right:auto;
}
.pulse-spot{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0) 72%);
  /* screen вместо overlay: overlay почти не осветляет тёмные (близкие к чёрному)
     участки — формула overlay на тёмном фоне ведёт себя как multiply, поэтому
     на тёмных комнатах плана этажа свечения не было видно вообще (было видно
     только на светлой рамке по краям). screen светлеет одинаково сильно
     независимо от того, тёмный фон или светлый. */
  mix-blend-mode:screen;animation:pulse-glow 1.6s ease-in-out infinite;
}
.pulse-spot--drone{left:16%; top:12%; width:14%; padding-top:14%;}
.pulse-spot--sensor{left:34%; top:19%; width:11%; padding-top:11%; animation-delay:.3s;}
.pulse-spot--panel{left:64%; top:12%; width:20%; padding-top:20%; animation-delay:.6s;}
.pulse-spot--twin{left:52%; top:38%; width:24%; padding-top:24%; animation-delay:.9s;}
/* Второй слайд — план этажа, координаты по значкам датчиков на картинке */
.pulse-spot--floor-a{left:11.5%; top:16%; width:15%; padding-top:15%;}
.pulse-spot--floor-b{left:44.5%; top:10%; width:15%; padding-top:15%; animation-delay:.2s;}
.pulse-spot--floor-c{left:74.5%; top:16%; width:15%; padding-top:15%; animation-delay:.4s;}
.pulse-spot--floor-d{left:43%; top:49%; width:15%; padding-top:15%; animation-delay:.6s;}
.pulse-spot--floor-e{left:11.5%; top:55%; width:15%; padding-top:15%; animation-delay:.8s;}
.pulse-spot--floor-f{left:74.5%; top:55%; width:15%; padding-top:15%; animation-delay:1s;}
@keyframes pulse-glow{0%,100%{opacity:0.3;transform:scale(0.92);}50%{opacity:0.95;transform:scale(1.08);}}

.chart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.chart-card{border:1px solid var(--line-soft);background:var(--card-bg);border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;align-items:center;}
.chart-card svg{margin-bottom:8px;}
.chart-title{font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;text-align:center;}
.legend{display:grid;gap:8px;width:100%;margin-top:10px;}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.legend-swatch{width:10px;height:10px;border-radius:2px;flex:none;}
.legend-value{margin-left:auto;font-weight:600;color:var(--ink);white-space:nowrap;}
.big-stat{font-family:var(--font);font-size:36px;font-weight:300;fill:var(--ink);}
.bar-value{font-size:11px;fill:var(--ink);font-weight:600;}
.bar-label{font-size:9.5px;fill:var(--ink-mute);text-transform:uppercase;}
.axis-label{font-size:9px;fill:var(--ink-mute);}

/* ===== Пустая заглушка (Анализ/Аналитика услуги) ===== */
.placeholder-block{
  border:1px dashed var(--line);border-radius:20px;padding:var(--space-7) var(--space-4);
  text-align:center;color:var(--ink-mute);
}

/* ===== Футер ===== (тёмный, контрастный к светлой странице — свои токены цвета текста) */
.site-footer{
  background:var(--bg-deep);color:var(--footer-ink);
  padding:var(--space-7) 0 var(--space-4);border-top:1px solid var(--line-soft);
}
.site-footer h2{color:var(--footer-ink);}
.footer-cta h2 a{color:inherit;transition:color .2s ease;}
.footer-cta h2 a:hover{color:var(--footer-ink-mute);}
.footer-cta{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6);}
.footer-cta h2{margin-bottom:0;}
.footer-contacts{text-align:right;font-size:16px;}
.footer-contacts a{display:block;margin-bottom:6px;}
.footer-contacts a:hover{color:var(--footer-ink-mute);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);border-top:1px solid rgba(245,244,240,0.14);padding-top:var(--space-3);font-size:13px;color:var(--footer-ink-mute);}
.footer-bottom a:hover{color:var(--footer-ink);}

/* ===== Focus ===== */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ===== Кастомный курсор — полупрозрачный серый кружок =====
   Только для устройств с точным указателем (мышь); класс на <html>
   ставится из main.js после успешной инициализации, поэтому если скрипт
   почему-то не запустится — родной курсор останется видимым. */
@media (hover:hover) and (pointer:fine){
  html.has-custom-cursor,html.has-custom-cursor body,html.has-custom-cursor a,html.has-custom-cursor button{cursor:none;}
}
.cursor-dot{
  position:fixed;top:0;left:0;width:28px;height:28px;border-radius:50%;
  background:rgba(120,120,120,0.35);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .2s ease;
}
.cursor-dot.is-active{opacity:1;}

/* ===== Reduced motion =====
   Крупные эффекты (плавный скролл) отключаем по системной настройке,
   но локальные декоративные анимации — бегущую строку услуг и лёгкий
   пульс на иллюстрации — оставляем: это небольшие, безопасные по
   вестибулярным ощущениям движения, а не полноэкранный эффект. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .twin-inner{grid-template-columns:1fr;}
  .chart-grid{grid-template-columns:repeat(2,1fr);}
  .founder-inner{grid-template-columns:1fr;}
  .contact-cols{grid-template-columns:1fr;gap:var(--space-3);}
  .photo-frames{grid-template-columns:1fr;}
  .split-row{grid-template-columns:1fr;gap:var(--space-2);}

  .company-row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--space-4);max-width:100%;}
  /* flex-wrap — на узких экранах (320-375px) круги + блок "10+ команда" в один
     ряд не помещаются и раньше вылезали за край вьюпорта; перенос строки чинит это. */
  .company-people{flex-direction:row;flex-wrap:wrap;justify-content:center;row-gap:var(--space-2);max-width:100%;}
  .company-circle{margin-top:0;margin-left:-20px;}
  .company-circle:first-child{margin-left:0;}
  .company-count{flex-direction:row;margin-top:0;margin-left:var(--space-2);}
  .company-count-arrow{width:26px;height:1px;}
  .company-count-arrow::before{top:50%;left:auto;right:-1px;transform:translateY(-50%) rotate(90deg);}
  .company-count-label{writing-mode:horizontal-tb;transform:none;}
  .company-media{width:100%;min-width:0;}
  .company-heading{margin-top:var(--space-4);text-align:center;}

  .promo-inner{grid-template-columns:1fr;justify-items:center;text-align:center;}
}

@media (max-width:768px){
  .main-nav{
    position:fixed;top:80px;left:0;right:0;bottom:0;background:var(--bg);
    flex-direction:column;align-items:stretch;padding:var(--space-3);gap:0;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .nav-item{border-bottom:1px solid var(--line-soft);}
  .nav-link{padding:18px 4px;font-size:17px;justify-content:space-between;}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;display:none;background:none;border:none;margin:0 0 8px;padding:0 0 0 12px;}
  .nav-item.open .dropdown{display:block;transform:none;}
  .nav-toggle{display:flex;}
  .header-actions .btn{display:none;}

  .header-inner{height:80px;}
  .logo{padding:6px 10px;}
  .logo-mark{font-size:32px;}
  .logo-mark svg{width:22px;height:28px;}
  .hero-viewport{min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);}

  /* Смысловые строки hero — разносим отступами, все по одному левому краю.
     На мобильном показываем короткий текст (hero-mobile-text) вместо
     десктопного — это разное содержимое, а не просто другая вёрстка. */
  .hero-title{text-align:left;}
  .hero-desktop-text{display:none;}
  .hero-mobile-text{display:block;}
  .hero-mobile-text .hero-line{margin-top:4px;text-align:left;}
  .hero-mobile-text .hero-line:first-child{margin-top:0;}
  .hero-mobile-text .hero-line.hero-gap{margin-top:var(--space-3);}
  .hero-actions{justify-content:flex-start;}

  .split-row{grid-template-columns:1fr;gap:var(--space-2);}
  .chart-grid{grid-template-columns:1fr;}
  .footer-cta{align-items:flex-start;}
  .footer-contacts{text-align:left;}

  .company-media{height:180px;}
  .company-card{width:100%;}
  .promo-photo{width:120px;height:120px;}
  .price-new{font-size:38px;}

  .partner-row-2col{grid-template-columns:1fr;}
  .partner-row-2col .company-media{height:220px;}
}

@media (max-width:640px){
  .team-member{grid-template-columns:1fr;gap:var(--space-2);}
  .team-member-photo{width:112px;height:112px;}
  .team-list{gap:var(--space-5);}
  .company-statement{font-size:16px;}
}