/* HIL STUDIO — main.css (секції нижче першого екрана, спільні для всіх сторінок) */

/* ---------- Секції: загальне ---------- */
.section{padding:72px 0}
/* Секції нижче фолду — не рендеримо, поки не близько до вьюпорта */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 700px}
/* ---------- Плашка «в цифрах» ---------- */
.stats{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 8px 26px rgba(0,0,0,.07);border-radius:16px;padding:26px 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
/* ---------- Послуги ---------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* ---------- Експертиза в нішах ---------- */
.niches{position:relative}
/* ---------- CTA-банер «партнер» ---------- */
.partner{position:relative;color:#fff;padding:88px 0;background:var(--dark)}
/* ---------- Кейси ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* ---------- 6 кроків ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;text-align:center;padding:0}
/* ---------- Відгуки (слайдер) ---------- */
.reviews{position:relative}
/* ---------- Контакти ---------- */
.contact{display:grid;grid-template-columns:1fr}
/* ---------- Декоративні зірочки ---------- */
.section{position:relative}
/* ---------- Блог ---------- */
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* ---------- Нам довіряють: стрічка логотипів ---------- */
.trust__sub{font-size:17px;font-weight:700;margin:0 0 12px}
/* ---------- Попап ---------- */
.popup{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
/* ---------- Кнопка вгору ---------- */
.to-top{position:fixed;right:18px;bottom:18px;z-index:40;width:42px;height:42px;border-radius:8px;border:0;background:var(--dark);color:#fff;font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
/* ---------- Адаптив ---------- */
@media (max-width:1024px){
  .services{grid-template-columns:repeat(2,1fr)}
  .svc{min-height:0}
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:28px}
}
/* ---------- Доступність / анімації ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ---------- Покращення дизайну ---------- */
/* Плавна поява при скролі (вмикається тільки коли є JS) */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .5s ease}
/* Hover: картки послуг підіймаються */
.svc{transition:transform .25s ease,box-shadow .25s ease}
/* Hover: стрілка на кейсах з'являється при наведенні */
@media (hover:hover){
  .case__arrow{opacity:0;transform:translate(-6px,6px);transition:opacity .25s,transform .25s}
  .case:hover .case__arrow{opacity:1;transform:none}
}
/* 6 кроків: маршрут зі стрілками між кроками */
.steps li{position:relative}
/* Reduced motion: контент завжди видно, маркі не рухається */
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none}
  .marquee__inner{animation:none}
}
/* ---------- Про власницю ---------- */
.founder{background:var(--dark);color:#fff;padding:80px 0}
/* ---------- Сторінка кейсів ---------- */
.hero--cases__inner{max-width:760px;padding:64px 0 40px;text-align:left}
/* ---------- Блок «під ключ» ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- Картка кейсу (нова обкладинка) ---------- */
.cases{grid-template-columns:repeat(3,1fr);gap:24px}
/* ---------- Картка «всі проєкти» замість кнопки ---------- */
.case--all{background:var(--surface);border:1.5px solid var(--red);box-shadow:none;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:100%;transition:background .25s,transform .25s,box-shadow .25s}
/* ---------- «Тут може бути ваша історія» ---------- */
.yourcase{padding:72px 0}
/* ---------- FAQ ---------- */
.faq__list{max-width:none}
/* ---------- Велика зациклена стрічка ---------- */
.bigmarquee{overflow:hidden;padding:34px 0 44px;user-select:none}
/* ---------- Про компанію ---------- */
.about__h2{margin-bottom:10px;position:relative;display:inline-block}
/* ---------- Наша команда ---------- */
.team__sub{max-width:660px;margin:16px 0 40px;font-size:16px;line-height:1.6;color:var(--text-2)}
/* ================= СТОРІНКА КЕЙСУ ================= */
.chero{padding:56px 0 40px}
.chero__art img{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 36px rgba(0,0,0,.14);background:var(--surface-2)}
.csteps__media img{width:100%;height:auto}
/* ---------- Перемикач теми ---------- */
.theme-toggle{position:fixed;top:88px;right:18px;z-index:45;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;padding:0;box-shadow:0 6px 20px var(--shadow);transition:background .2s,border-color .2s,transform .2s}
/* ---------- Темна тема: доведення секцій ---------- */
html[data-theme="dark"] .header{background:var(--bg);backdrop-filter:none;border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .stats,html[data-theme="dark"] .founder,html[data-theme="dark"] .turnkey{background:var(--surface)}
html[data-theme="dark"] .csteps{background:#090d1a}
html[data-theme="dark"] .creative img,html[data-theme="dark"] .chero__art img{background:var(--surface-2)}
/* Кнопка в хмарі ніш — той самий вигляд, що й плашки */
.niches__cloud{align-items:center}
/* ---------- Темна тема: доведення (2-й прохід) ---------- */
/* Секції, які й у світлій темі кольорові — лишаємо як є, лише гасимо яскравість */
html[data-theme="dark"] .credcta{background:#b81a21}
/* Плашки-обкладинки й службові поверхні */
html[data-theme="dark"] .case__media,
html[data-theme="dark"] .creative img,
html[data-theme="dark"] .chero__art img{background:var(--surface-2)}
/* мокап телефона прозорий — жодних підкладок у будь-якій темі */
.csteps__media img{background:none!important}
/* Текстові блоки сторінки кейсу */
html[data-theme="dark"] .ab__grid p{color:var(--text-2)}
/* Форми і дрібні елементи */
html[data-theme="dark"] .form label:not(.check){color:var(--text)}
/* Фото в блоці «Про компанію» */
.about__art img{width:100%;height:auto;border-radius:14px;box-shadow:0 16px 44px var(--shadow)}
/* Темна тема: панелі мають читатись як панелі */
html[data-theme="dark"] .stats,
html[data-theme="dark"] .case,
html[data-theme="dark"] .case--all,
html[data-theme="dark"] .review__text,
html[data-theme="dark"] .yourcase__form,
html[data-theme="dark"] .popup__box{border:1px solid rgba(255,255,255,.08)}
/* Текст на кольорових картках — завжди білий, у будь-якій темі */
.niche:not(.niche--cta),.credcta,.credcta h2,.credcta p,
.cvideo,.cvideo__h2,
.tagchip__badge{color:#fff}
/* Фото офісу: своя версія для кожної теми */
.about__pic--dark{display:none}
/* Соцмережі під фото засновниці */
.founder__soc{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
/* ---------- Плаваюча кнопка Telegram ---------- */
.tg-fab{position:fixed;right:18px;bottom:18px;z-index:46;display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,#2aabee,#229ed9);
  color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(34,158,217,.45);
  transition:gap .25s,padding .25s,transform .2s,box-shadow .2s;overflow:hidden}
/* Кнопка «вгору» піднімається над телеграмом */
.to-top{bottom:86px}
/* Темна тема: один відтінок синього і червоного на всіх елементах */
html[data-theme="dark"] .btn--blue,
html[data-theme="dark"] .contact__btn--blue,
html[data-theme="dark"] .tagchip__badge--blue,
html[data-theme="dark"] .cvideo{background:#1848c9}
/* ---------- Банер cookie ---------- */
.cookie{position:fixed;left:18px;bottom:18px;z-index:70;width:min(380px,calc(100vw - 36px));
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;
  padding:20px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
/* ---------- Екосистема компаній ---------- */
.ecosystem__lead{max-width:760px;font-size:16px;line-height:1.6;color:var(--text-2);margin:-16px 0 44px}
/* стовбур від кореня */
.eco__tree::before{content:"";position:absolute;left:50%;top:-52px;width:1.5px;height:26px;background:var(--line)}
/* горизонтальна перекладина */
.eco__tree::after{content:"";position:absolute;left:16.6%;right:16.6%;top:-26px;height:1.5px;background:var(--line)}
/* ніжка від перекладини до картки */
.eco__card::before{content:"";position:absolute;left:50%;top:-26px;width:1.5px;height:26px;background:var(--line)}
/* фінальні перевизначення: прозорі персонажі в обох темах */html[data-theme="dark"] .chero__art--one img,.chero__art--one img{background:transparent;box-shadow:none;border-radius:0}
html[data-theme="dark"] .csteps__mascots img,.csteps__mascots img{background:transparent;box-shadow:none;border-radius:0}
.chero__grid{grid-template-columns:1fr 1.05fr;align-items:stretch}
.chero__art--one{max-width:none;align-self:stretch;display:grid;place-items:center;overflow:visible}
.chero__art--one img{height:100%;width:100%;object-fit:contain;object-position:right center;transform:scale(1.3);transform-origin:right center}
@media(max-width:960px){.chero__art--one img{height:auto;transform:scale(1.12);object-position:center;transform-origin:center}}
.chero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:stretch}
.chero__art--one{position:relative;display:block;max-width:none;padding:0;overflow:visible;align-self:stretch;min-width:0;min-height:340px}
.chero__art--one img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:right center;transform:none;margin:0}
@media(max-width:920px){.chero__grid{grid-template-columns:1fr;gap:28px;align-items:center}.chero__art--one{align-self:center;min-height:0}.chero__art--one img{position:static;height:auto;width:100%;max-width:320px;object-position:center;margin:0 auto}}
.carstories{grid-auto-columns:calc((100% - 64px)/5)}
.carstories--6{grid-auto-columns:calc((100% - 64px)/5)}
.carstories .story{scroll-snap-align:start;margin:0}
.carstories img{width:100%;height:auto;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.12);background:var(--surface-2)}
@media(max-width:1100px){.carstories,.carstories--6{grid-auto-columns:calc((100% - 48px)/4)}}
@media(max-width:860px){.carstories,.carstories--6{grid-auto-columns:calc((100% - 16px)/2)}}
@media(max-width:560px){.carstories,.carstories--6{grid-auto-columns:70%}}