/* =========================================================
   ПАЛИТРА «Arctic Glass» — белый + холодный голубой + стекло
   Меняется в одном месте: JS-объект C (js/data.js) и :root здесь.
   ========================================================= */
:root{
  --accent:#2f80ed;        /* основной холодный голубой */
  --accent-dk:#1b66d6;     /* насыщеннее (цифры, маркеры) */
  --ink:#15263a;           /* основной тёмный текст */
  --ink-soft:#0f2236;      /* крупные заголовки */
  --bg:#e9f1fb;            /* фон страницы (холодный светлый) */
  --light:#f4f9ff;         /* светлые секции (почти белый) */
  --band:#e0ebf8;          /* полосы CTA / футер */
  --muted:#52647d;         /* приглушённый текст */
  /* тёмные токены (hero + кинематографичные секции) */
  --bg-dark:#060d18;       /* почти чёрный навигатор-синий */
  --bg-dark2:#0a1626;
  --ink-on-dark:#f4f9ff;   /* белый текст на тёмном */
  --neon:#38bdf8;          /* неон-голубой для свечения/акцентов */
}

/* =========================================================
   ТЁМНАЯ ТЕМА ВСЕГО САЙТА — один переключатель.
   data.js: config.DARK_MODE = true  ->  на обёртке вешается .theme-dark,
   и переменные ниже переопределяют светлые. Тело становится тёмным.
   (Тёмный hero не зависит от этого флага — он тёмный всегда.)
   ========================================================= */
.theme-dark{
  --ink:#f4f9ff;
  --ink-soft:#ffffff;
  --bg:#060d18;
  --light:#0a1626;
  --band:#0a1626;
  --muted:#9fb3cc;
}
.theme-dark body{background:var(--bg)}
/* стеклянные карточки в тёмной теме — тёмное «матовое стекло» */
.theme-dark .svc-card,
.theme-dark .contact-row{background:rgba(255,255,255,0.04) !important;border-color:rgba(255,255,255,0.12) !important}
.theme-dark .ghost-btn{background:rgba(255,255,255,0.05) !important;color:var(--ink) !important;border-color:rgba(255,255,255,0.18) !important}
.theme-dark .field{background:rgba(255,255,255,0.05) !important;color:var(--ink) !important;border-color:rgba(255,255,255,0.15) !important}
/* хедер и светлые градиентные баннеры в тёмной теме (инлайн-градиенты перекрываем !important) */
.theme-dark .site-header{background:rgba(6,13,24,0.72) !important;border-bottom-color:rgba(255,255,255,0.08) !important}
.theme-dark .page-hero{background:radial-gradient(120% 90% at 50% 0%, #0a1626 0%, #060d18 60%) !important;border-bottom-color:rgba(255,255,255,0.06) !important}
.theme-dark .cta-band{background:linear-gradient(180deg,#0a1626,#060d18) !important;border-top-color:rgba(255,255,255,0.06) !important}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{overflow-x:hidden}            /* страховка от гориз. скролла при трансформациях */
body{font-family:'Onest',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#2f80ed;color:#ffffff}
a{color:inherit}
@keyframes ivg-spin{to{transform:rotate(360deg)}}
@keyframes ivg-spin-rev{to{transform:rotate(-360deg)}}
@keyframes ivg-pulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes ivg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* hover/focus interactions (replacing the dc style-hover/style-focus attributes) */
.nav-link{transition:opacity .2s ease}
.nav-link:hover{opacity:.7}
.primary-btn{transition:transform .2s ease, filter .2s ease}
.primary-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
.primary-btn-sm{transition:filter .2s ease}
.primary-btn-sm:hover{filter:brightness(1.06)}
.ghost-btn:hover{background:rgba(20,45,80,0.05)}
.link-arrow{transition:gap .2s ease}
.link-arrow:hover{gap:12px}
.svc-card{transition:transform .3s ease,box-shadow .3s ease}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 34px 60px -28px rgba(20,45,80,0.28)}
.contact-row{transition:background .2s ease,border-color .2s ease}
.contact-row:hover{background:rgba(255,255,255,0.85);border-color:rgba(47,128,237,0.55)}
.field{transition:border-color .2s ease}
.field:focus{border-color:rgba(47,128,237,0.65)}
.footer-link{transition:color .2s ease}
.footer-link:hover{color:#15263a}
.filter-chip{transition:all .2s ease}
.tier-btn{transition:filter .2s ease}
.tier-btn:hover{filter:brightness(1.04)}

/* =========================================================
   HERO — тёмный кинематографичный первый экран с видео,
   которое перематывается скроллом (см. js/app.js).
   ========================================================= */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--bg-dark);color:var(--ink-on-dark)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--bg-dark)}
/* тёмный градиентный оверлей для читаемости текста */
.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,13,24,0.78) 0%, rgba(6,13,24,0.30) 38%, rgba(6,13,24,0.55) 72%, rgba(6,13,24,0.92) 100%),
    radial-gradient(120% 90% at 18% 30%, rgba(6,13,24,0.55), transparent 60%)}
/* лёгкое неоновое свечение */
.hero__glow{position:absolute;z-index:1;left:8%;top:42%;width:520px;height:520px;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.5;
  background:radial-gradient(circle, rgba(56,189,248,0.55) 0%, transparent 68%)}
.hero__inner{position:relative;z-index:2;max-width:1280px;height:100%;margin:0 auto;padding:0 40px;
  display:flex;flex-direction:column;justify-content:center}
.hero__copy{max-width:720px;will-change:transform,opacity}
.hero__eyebrow{font:600 13px 'JetBrains Mono',monospace;letter-spacing:0.28em;color:var(--neon);text-transform:uppercase}
.hero__title{margin:22px 0 0;font:800 clamp(40px,7vw,92px)/1.0 'Onest',sans-serif;letter-spacing:-0.03em;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,0.45)}
.hero__title span{display:block}
.hero__sub{margin:26px 0 0;max-width:560px;font:400 clamp(16px,1.5vw,20px)/1.6 'Onest',sans-serif;color:rgba(244,249,255,0.82)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
/* контурная (вторичная) кнопка hero — на тёмном фоне */
.hero__ghost{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,0.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;padding:15px 28px;border-radius:40px;font:600 15px 'Onest',sans-serif;
  border:1px solid rgba(56,189,248,0.5);transition:background .2s ease,border-color .2s ease}
.hero__ghost:hover{background:rgba(56,189,248,0.14);border-color:rgba(56,189,248,0.85)}
/* строка доверия (цифры впишет владелец; пустые не выводятся) */
.hero__trust{display:flex;gap:34px;flex-wrap:wrap;margin-top:46px}
.hero__trust-item{display:flex;flex-direction:column;gap:2px}
.hero__trust-val{font:800 26px 'Onest',sans-serif;color:#fff}
.hero__trust-label{font:500 12px 'JetBrains Mono',monospace;letter-spacing:0.08em;color:rgba(159,179,204,0.9)}
/* подсказка прокрутки */
.hero__scroll{position:absolute;left:40px;bottom:28px;z-index:2;font:500 11px 'JetBrains Mono',monospace;
  letter-spacing:0.18em;color:rgba(159,179,204,0.85);display:flex;align-items:center;gap:8px}
.hero__scroll i{display:block;width:1px;height:26px;background:linear-gradient(var(--neon),transparent);animation:ivg-scrollhint 1.8s ease-in-out infinite}
@keyframes ivg-scrollhint{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* =========================================================
   CYBER — тёмная секция (робот за пультом), видео перематывается
   по мере прохождения секции через вьюпорт (без жёсткого пина).
   ========================================================= */
.cyber{position:relative;overflow:hidden;background:var(--bg-dark);color:var(--ink-on-dark)}
.cyber__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--bg-dark)}
.cyber__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(6,13,24,0.92) 0%, rgba(6,13,24,0.62) 45%, rgba(6,13,24,0.25) 100%)}
.cyber__inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:140px 40px;min-height:80vh;display:flex;flex-direction:column;justify-content:center}
.cyber__eyebrow{font:600 12px 'JetBrains Mono',monospace;letter-spacing:0.2em;color:var(--neon)}
.cyber__title{margin:16px 0 0;max-width:680px;font:700 clamp(28px,4vw,56px)/1.1 'Onest',sans-serif;letter-spacing:-0.02em;color:#fff;white-space:pre-line}
.cyber__text{margin:22px 0 0;max-width:520px;font:400 clamp(15px,1.4vw,18px)/1.6 'Onest',sans-serif;color:rgba(244,249,255,0.82)}

/* =========================================================
   REVEAL — плавные появления (начальное состояние ставит GSAP в JS,
   но если JS/CDN не загрузились — контент остаётся видимым).
   ========================================================= */
[data-reveal]{will-change:transform,opacity}

/* =========================================================
   ВИДЕО-ПРЕВЬЮ (длинные ролики): постер + кнопка play, клик играет
   ========================================================= */
.vprev{position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(20,45,80,0.12)}
.vprev.is-click{cursor:pointer}
.vprev__play{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:rgba(15,34,56,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.5);display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.vprev.is-click:hover .vprev__play{transform:scale(1.08);background:rgba(47,128,237,0.78)}
.vprev__tri{width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vprev__badge{position:absolute;z-index:2;top:12px;left:12px;font:600 10px 'JetBrains Mono',monospace;color:#15263a;background:rgba(244,249,255,0.92);padding:5px 9px;border-radius:6px;letter-spacing:0.05em}
.vprev__label{position:absolute;z-index:2;bottom:10px;left:10px;font:500 10px 'JetBrains Mono',monospace;color:#dbe7f6;background:rgba(15,34,56,0.5);padding:4px 7px;border-radius:5px;letter-spacing:0.02em}

/* =========================================================
   «ОЖИВАЮЩИЕ» КАРТОЧКИ ТОВАРА (короткий луп играет при наведении)
   ========================================================= */
.hcard__media{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:18px;background:#0a1626;border:1px solid rgba(20,45,80,0.12)}
.hcard__media .hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hcard__hint{position:absolute;z-index:1;bottom:12px;left:12px;font:600 11px 'JetBrains Mono',monospace;color:#fff;background:rgba(15,34,56,0.55);padding:5px 9px;border-radius:6px;letter-spacing:0.04em;transition:opacity .25s ease;pointer-events:none}
.hcard:hover .hcard__hint{opacity:0}

/* =========================================================
   КОМАНДА («О нас») — тёмная секция с размытым фото-фоном.
   Фон медленно «дышит» (Ken Burns); при prefers-reduced-motion
   анимация отключается глобальным правилом ниже.
   ========================================================= */
.team-dark{position:relative;overflow:hidden;background:var(--bg-dark);color:var(--ink-on-dark)}
.team-dark__bg{position:absolute;inset:-48px;background-position:center;background-size:cover;
  filter:blur(22px) brightness(0.42) saturate(1.15);
  animation:team-drift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes team-drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(-18px)}}
.team-dark__overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(6,13,24,0.72) 0%, rgba(6,13,24,0.35) 45%, rgba(6,13,24,0.82) 100%)}
.team-dark__glow{position:absolute;right:-120px;top:-140px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  filter:blur(80px);opacity:.35;background:radial-gradient(circle, rgba(56,189,248,0.6) 0%, transparent 68%)}
.team-dark__inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:110px 40px}
.team-dark__eyebrow{font:600 12px 'JetBrains Mono',monospace;letter-spacing:0.2em;color:var(--neon)}
.team-dark__title{margin:14px 0 0;font:700 clamp(30px,3.8vw,52px)/1.08 'Onest',sans-serif;letter-spacing:-0.02em;color:#fff}
.team-dark__sub{margin:18px 0 0;max-width:620px;font:400 17px/1.6 'Onest',sans-serif;color:rgba(244,249,255,0.8)}
.team-dark__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.team-dark__card{background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.13);border-radius:20px;padding:30px;min-height:230px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .25s ease,transform .25s ease}
.team-dark__card:hover{border-color:rgba(56,189,248,0.55);transform:translateY(-4px)}
.team-dark__num{font:600 13px 'JetBrains Mono',monospace;letter-spacing:0.1em;color:var(--neon)}
.team-dark__cardtitle{margin:0;font:700 21px 'Onest',sans-serif;letter-spacing:-0.01em;color:#fff}
.team-dark__carddesc{margin:0;font:400 15px/1.6 'Onest',sans-serif;color:rgba(244,249,255,0.75)}

/* =========================================================
   КАРТОЧКИ ПРЕЗЕНТАЦИЙ (PDF) — клик открывает файл в новой вкладке
   ========================================================= */
.pdf-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .2s ease}
.pdf-card:hover{transform:translateY(-4px)}
.pdf-card:hover .pdf-cover{border-color:rgba(56,189,248,0.5)}
/* обложка-слайд 16:9 (1-я страница PDF); если cover нет — тёмная плитка с тегом */
.pdf-cover{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:14px;padding:14px;background:linear-gradient(160deg,#0a1626,#1d3e63) center/cover;border:1px solid rgba(255,255,255,0.08)}
.pdf-cover__tag{font:800 22px 'Onest',sans-serif;color:#fff;letter-spacing:-0.01em;text-shadow:0 1px 14px rgba(0,0,0,0.4)}
.pdf-cover__open{position:absolute;right:10px;bottom:10px;font:600 11px 'JetBrains Mono',monospace;color:var(--neon);background:rgba(6,13,24,0.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(56,189,248,0.5);padding:4px 8px;border-radius:6px}
.pdf-card__name{font:600 14px 'Onest',sans-serif;color:var(--ink)}

/* =========================================================
   БУРГЕР-МЕНЮ (мобильная навигация, ≤920px)
   ========================================================= */
.burger{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;padding:10px;flex:none}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-nav{display:none}
.mobile-nav.open{display:block}
.mobile-nav{position:fixed;inset:0;z-index:55;background:rgba(244,249,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:96px 28px 40px;flex-direction:column;gap:6px;overflow-y:auto}
.theme-dark .mobile-nav{background:rgba(6,13,24,0.97)}
.mobile-nav button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(20,45,80,0.10);
  cursor:pointer;font:600 22px 'Onest',sans-serif;color:var(--ink);padding:18px 4px;min-height:44px}
.theme-dark .mobile-nav button{border-bottom-color:rgba(255,255,255,0.12)}
.mobile-nav a{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;min-height:44px}

/* =========================================================
   ДОСТУПНОСТЬ: уважаем prefers-reduced-motion — никаких
   декоративных анимаций; видео показывается постером.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero__scroll i{animation:none}
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:920px){
  .grid-2,.grid-3,.svc-grid,.svc-body,.contacts-grid{grid-template-columns:1fr !important}
  .svc-cases{grid-template-columns:1fr !important}   /* карточки ботов с описаниями — в столбик */
  .nav{display:none !important}          /* десктоп-меню прячем */
  .header-cta{display:none !important}    /* десктоп-CTA прячем (есть в бургер-меню) */
  .burger{display:block}                  /* показываем бургер */
  .hero-visual{min-height:340px !important}
  .hero__inner,.cyber__inner{padding-left:24px;padding-right:24px}
  .cyber__inner{padding-top:96px;padding-bottom:96px}
  .hero__scroll{left:24px}
  .team-dark__inner{padding:80px 24px}
}
@media (max-width:620px){
  .svc-gallery{grid-template-columns:repeat(2,1fr) !important}  /* галерея фото — 2 колонки */
  .svc-videos{grid-template-columns:1fr !important}             /* видео-превью — в столбик */
}
@media (max-width:620px){
  /* заголовок должен помещаться по ширине самого длинного слова (АВТОМАТИЗИРУЕМ.) */
  .hero__title{font-size:clamp(23px,7.2vw,40px);letter-spacing:-0.02em}
  .hero__sub{font-size:15px}
  .hero__trust{gap:22px;margin-top:34px}
  .hero__cta{gap:10px}
  .hero__cta .primary-btn,.hero__cta .hero__ghost{flex:1 1 100%;justify-content:center}
  .cyber__inner{padding-top:80px;padding-bottom:80px}
}