/* ============================================================
   Sheker.Agency — Homepage styles (mobile-first)
   Брейкпоінти: 320 / 375 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-black); color: var(--c-white);
  border-bottom: 1px solid var(--c-line-inv);
}
/* WordPress keeps the admin bar fixed above the document. Keep the shared
   sticky header below it for logged-in visual QA and editing sessions. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  /* On mobile WP changes #wpadminbar to absolute, so it scrolls away. The
   header must then stick to the viewport edge instead of leaving a gap. */
  .admin-bar .site-header { top: 0; }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
  /* At tablet width WP keeps the admin bar fixed at 46px. */
  .admin-bar .site-header { top: 46px; }
}
.site-header__bar {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  height: var(--header-h-m);
}
.site-header__right { margin-left: auto; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-white); white-space: nowrap; text-decoration: none;
}
.logo__mark { display: block; flex-shrink: 0; width: 48px; height: 48px; }
.logo__word {
  font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -.03em;
  color: currentColor; line-height: 1;
}
.logo:hover { color: var(--c-white); }
.logo .logo__dash { color: var(--c-red); }
.site-nav { display: none; }
.site-header__cta { display: none; }
.site-header__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-header__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--c-white); flex-shrink: 0; }
.site-header__tel svg { color: var(--c-red); }
.site-header__tel .tel-dd__chev { color: var(--c-white); transition: transform .2s ease; }
.tel-dd:hover .tel-dd__chev, .tel-dd:focus-within .tel-dd__chev { transform: rotate(180deg); }
.site-header__tel-num { display: none; font-size: 12px; letter-spacing: .04em; font-family: var(--f-mono); }
.lang-switch { display: inline-flex; border: 1px solid var(--c-line-inv); flex-shrink: 0; }
/* Language dropdown */
.lang-dd { position: relative; flex-shrink: 0; }
.lang-dd__trigger { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--c-line-inv); background: none; color: var(--c-white); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.lang-dd__trigger:hover { border-color: var(--c-white); }
.lang-dd__chev { transition: transform .2s ease; }
.lang-dd__trigger[aria-expanded="true"] .lang-dd__chev { transform: rotate(180deg); }
.lang-dd__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; margin: 0; padding: 0; list-style: none; background: var(--c-black); border: 1px solid var(--c-line-inv); display: none; z-index: 60; }
.lang-dd.is-open .lang-dd__menu { display: block; }
.lang-dd__opt { display: block; width: 100%; text-align: left; height: 40px; padding: 0 16px; background: none; border: none; color: var(--c-white); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.lang-dd__opt:hover { color: var(--c-red); }
.lang-dd__opt.is-active { color: var(--c-red); }
.lang-switch__btn { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; min-width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-right: 1px solid var(--c-line-inv); color: var(--c-text-2-inv); cursor: pointer; transition: color var(--t-fast); }
.lang-switch__btn:last-child { border-right: none; }
.lang-switch__btn:hover { color: var(--c-white); }
.lang-switch__btn.is-active { color: var(--c-red); }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: none; cursor: pointer; padding: 10px;
}
.nav-toggle span { display: block; height: 1px; background: var(--c-white); transition: transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Мобільне меню — бічний drawer 70% + mega-menu */
.mobile-menu { position: fixed; inset: 0; z-index: 49; visibility: hidden; }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s ease; }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 70%; min-width: 280px; max-width: 420px;
  background: var(--c-black); color: var(--c-white);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform .3s ease;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mm__top { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--page-margin); border-bottom: 1px solid var(--c-line-inv); position: sticky; top: 0; background: var(--c-black); z-index: 1; }
.mm__top .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2-inv); }
.mm__close { background: none; border: none; color: var(--c-white); font-size: 20px; line-height: 1; cursor: pointer; width: 44px; height: 44px; margin: -10px -10px -10px 0; }
.mm__tel { display: flex; align-items: center; gap: 12px; padding: 16px var(--page-margin); border-bottom: 1px solid var(--c-line-inv); color: var(--c-white); font-family: var(--f-mono); font-size: 14px; letter-spacing: .06em; }
.mm__tel svg { color: var(--c-red); flex-shrink: 0; }
.mm__nav { position: relative; flex: 1 1 auto; min-height: 0; }
.mm__panel { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mm__panel--root { padding-bottom: 8px; }
.mm__panel--sub { background: var(--c-black); transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility .28s ease; }
.mm__panel--sub.is-active { transform: translateX(0); visibility: visible; }
.mm__eyebrow { padding: 22px var(--page-margin) 6px; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2-inv); }
.mm__drill { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; border-bottom: 1px solid var(--c-line-inv); padding: 15px var(--page-margin); min-height: 44px; color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
.mm__drill:hover { color: var(--c-red); }
.mm__drill .mm__chev { color: var(--c-text-2-inv); display: inline-flex; flex-shrink: 0; }
.mm__drill:hover .mm__chev { color: var(--c-red); }
.mm__back { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: var(--c-black); border: none; border-bottom: 1px solid var(--c-line-inv); padding: 15px var(--page-margin); min-height: 44px; color: var(--c-white); font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; position: sticky; top: 0; z-index: 1; }
.mm__back span { display: inline-flex; color: var(--c-red); }
.mm__links--sub { padding: 0; }
.mm__links--sub a { padding: 12px var(--page-margin); min-height: 0; border-bottom: 1px solid var(--c-line-inv); color: #CCCCCC; font-size: 15px; }
.mm__links--sub a:hover { color: var(--c-red); }
.mm__links { display: grid; padding: 0 var(--page-margin) 12px; }
.mm__links a { color: #CCCCCC; padding: 9px 0; font-size: 15px; min-height: 40px; display: flex; align-items: center; }
.mm__links a:hover { color: var(--c-red); }
.mm__link { display: flex; align-items: center; padding: 15px var(--page-margin); border-bottom: 1px solid var(--c-line-inv); color: var(--c-white); font-family: var(--f-display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
.mm__cta { display: grid; gap: 10px; padding: 18px var(--page-margin) calc(18px + env(safe-area-inset-bottom, 0)); position: sticky; bottom: 0; background: var(--c-black); border-top: 1px solid var(--c-line-inv); }
.mm__cta .btn { width: 100%; justify-content: center; }
.mm__cta .btn--secondary { color: var(--c-white); border-color: var(--c-white); }
.mm__cta .btn--secondary:hover { background: var(--c-white); color: var(--c-black); }
.mm__panel--root .mm__link:last-child { border-bottom: none; }
body.menu-open { overflow: hidden; }

/* Липка нижня панель дій (мобільні) */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; background: var(--c-white); border-top: 1px solid var(--c-line); padding: 10px var(--page-margin) calc(10px + env(safe-area-inset-bottom, 0)); }
.action-bar__inner { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.action-bar__btn { flex: 1; min-height: 48px; }
body { padding-bottom: 72px; }
@media (min-width: 1024px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}
/* На мобільних/планшетах у футері лишаємо тільки бренд + копірайт (послуги — в меню) */
@media (max-width: 1023px) { .site-footer .sf__top { display: none; } }

@media (min-width: 1024px) {
  .site-header__bar { height: var(--header-h); }
  .nav-toggle, .mobile-menu { display: none !important; }
  .site-nav { display: flex; gap: clamp(24px, 3vw, 40px); margin-left: clamp(32px, 4vw, 64px); }
  .site-nav a {
    font-family: var(--f-mono); font-size: var(--fs-label);
    letter-spacing: .14em; text-transform: uppercase; color: var(--c-white); white-space: nowrap;
    padding: 12px 0;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--c-red); }
  .site-header__cta { display: inline-flex; }
  /* The approved desktop header exposes the phone icon/dropdown only. */
  .site-header__tel-num { display: none; }

  /* Мегаменю послуг (ДС 3.1) */
  .has-mega { position: static; display: flex; }
  .site-nav__trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--f-mono); font-size: var(--fs-label);
    letter-spacing: .14em; text-transform: uppercase; color: var(--c-white);
    padding: 12px 0; white-space: nowrap;
  }
  .site-nav__chev { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s linear; }
  .has-mega.is-open .site-nav__trigger, .site-nav__trigger:hover { color: var(--c-red); }
  .has-mega.is-open .site-nav__chev { transform: translateY(1px) rotate(-135deg); }

  .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #151515; color: var(--c-white);
    border-top: 1px solid var(--c-line-inv);
    border-bottom: 1px solid var(--c-red);
  }
  .mega[hidden] { display: none; }
  .mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 40px; padding-bottom: 40px; }
  .mega__col { display: grid; gap: 14px; align-content: start; padding-left: 32px; padding-right: 32px; border-left: 1px solid var(--c-line-inv); }
  .mega__col:first-child { border-left: 0; padding-left: 0; }
  .mega__col:last-child { padding-right: 0; }
  .mega__col-title { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-2-inv); margin: 0 0 6px; }
  .mega__col a {
    font-family: var(--f-body); font-size: 15px; line-height: 1.35;
    letter-spacing: 0; text-transform: none; color: var(--c-white);
    padding: 0; display: flex; align-items: baseline; gap: 10px; white-space: normal;
    transition: color .12s linear;
  }
  .mega__col a:hover { color: var(--c-red); }
  .mega__dot { width: 6px; height: 6px; background: var(--c-red); flex-shrink: 0; transform: translateY(-3px); }
  .mega__col a[aria-current="page"] { color: var(--c-red); }
  .mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--c-line-inv); }
  .mega__note { margin: 0; font-size: 11px; letter-spacing: .06em; color: var(--c-text-2-inv); text-transform: none; }
  .mega__cta { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); display: inline-flex; gap: 10px; padding: 0; }
  .mega__cta:hover { color: var(--c-white); }
}

/* ---------- Hero (світла, редакційна центрична композиція) ---------- */
.hero { padding: clamp(56px, 7vw, 96px) 0 0; position: relative; background: var(--c-white); }
.hero .container { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  left: max(var(--page-margin), calc((100% - var(--container)) / 2 + var(--page-margin)));
  right: max(var(--page-margin), calc((100% - var(--container)) / 2 + var(--page-margin)));
  background-image: repeating-linear-gradient(to right,
    rgba(0,0,0,.045) 0, rgba(0,0,0,.045) 1px,
    transparent 1px, transparent calc((100% - 1px) / 6));
  pointer-events: none;
}
.hero__top { display: flex; justify-content: center; align-items: baseline; gap: 20px; }
.hero__top .mono { position: relative; padding-left: 44px; }
.hero__top .mono::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: var(--c-line); }
.hero__title { margin: clamp(40px, 5vw, 72px) auto 0; max-width: 16ch; text-align: center; text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--c-red); }
.hero__serif { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-5); margin-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 72px); }
.hero__lead { color: var(--c-text-2); max-width: 560px; text-align: center; margin-inline: auto; }
.hero__side { display: grid; gap: var(--s-4); justify-items: center; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__actions .btn { flex: 0 1 auto; }
.hero__proof { display: flex; align-items: baseline; gap: 16px; color: var(--c-text-2); font-size: 15px; text-align: center; }
.hero__proof::before { content: ""; width: 24px; height: 1px; background: var(--c-red); flex-shrink: 0; align-self: center; }
/* Бічні нотатки — журнальні маргіналії */
.hero__note-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2); border-top: 1px solid var(--c-line); padding-top: 10px; margin: 0 0 10px; }
.hero__ticker { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hero__ticker::-webkit-scrollbar { display: none; }
.hero__ticker li { flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); white-space: nowrap; }
.hero__ticker li::before { content: ""; width: 5px; height: 5px; background: var(--c-red); }
.hero__geo { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); margin: 0; }
.hero__principle {
  padding: 20px 0 28px; margin-top: var(--s-5);
  font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.hero__principle span:last-child { color: var(--c-text-2); }
.hero__note { margin-top: var(--s-5); }
@media (min-width: 1280px) {
  .hero__note { position: absolute; top: clamp(140px, 15vw, 230px); width: 200px; margin-top: 0; }
  .hero__ticker { display: grid; gap: 6px; overflow: visible; }
  .hero__note--left { left: 0; }
  .hero__note--right { right: 0; text-align: right; }
  .hero__note--right .hero__ticker li { justify-content: flex-end; }
  .hero__principle { margin-top: var(--s-6, 64px); }
}

/* ---------- Спільне: секції ---------- */
.section { padding-block: var(--s-section); }
#directions { padding-top: 0; padding-bottom: 0; }
/* Блоки-переваги при банері */
.advantages { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .advantages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.advantage { padding: clamp(24px, 3.2vw, 44px); }
.advantage__big { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 46px); line-height: 1; letter-spacing: -.02em; }
.advantage__sub { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.advantage__sub::before { content: ""; width: 20px; height: 1px; background: var(--c-red); }
.advantages + .section-head { margin-top: clamp(28px, 3.5vw, 48px); }
.section--flush-bottom { padding-bottom: 0; }

/* ---------- Напрямки (Створюємо/Залучаємо/Масштабуємо) ---------- */
.directions { counter-reset: dir; }
.direction {
  display: grid; gap: var(--s-4);
  padding-block: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--c-line);
}
.direction:first-of-type { border-top: 1px solid var(--c-black); }
.direction__index { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-red); }
.direction__body { display: grid; gap: var(--s-3); max-width: var(--measure); }
.direction__list { display: flex; flex-wrap: wrap; gap: 8px; }
.direction__meta { display: grid; gap: var(--s-3); align-content: start; }
.direction__competences { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); line-height: 1.8; }
.direction__result {
  border-top: none; border-left: 2px solid var(--c-red);
  background: var(--c-surface, #F5F5F3);
  padding: 18px 20px;
  font-weight: 500; max-width: 46ch; text-wrap: pretty;
}
.direction__result .mono { display: block; color: var(--c-red); margin-bottom: 8px; }

@media (min-width: 1024px) {
  .direction { grid-template-columns: 90px minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6); }
  .direction__media { grid-column: 2 / 4; }
}
.direction__media { aspect-ratio: 21 / 7; }
@media (max-width: 767px) { .direction__media { aspect-ratio: 16 / 9; } }

/* ---------- One team ---------- */
.oneteam__cols { margin-top: 0; }
.oneteam__col { padding: var(--card-pad); display: grid; gap: var(--s-4); align-content: start; }
.oneteam__col ul { display: grid; gap: 0; }
.oneteam__col li {
  padding: 14px 0; border-bottom: 1px solid var(--c-line-inv);
  display: flex; gap: 14px; align-items: baseline; font-size: 16px; line-height: 1.55;
}
.oneteam__col li:last-child { border-bottom: none; }
.oneteam__col--problem li::before { content: "✕"; font-family: var(--f-mono); font-size: 11px; color: var(--c-text-2-inv); flex-shrink: 0; }
.oneteam__col--solution li::before { content: "→"; font-family: var(--f-mono); font-size: 11px; color: var(--c-red); flex-shrink: 0; }
.oneteam__col--problem { color: var(--c-text-2-inv); }
.oneteam__summary {
  display: grid; gap: var(--s-4); align-items: center;
  padding: var(--card-pad);
  border: 1px solid var(--c-line-inv); border-top: none;
}
.oneteam__summary p { font-family: var(--f-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; letter-spacing: -.01em; max-width: 60ch; }
.oneteam__statement { border: 1px solid var(--c-line); display: grid; gap: 0; }
.oneteam__statement-text { font-family: var(--f-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; margin: 0; padding: clamp(48px, 6vw, 88px) clamp(24px, 3vw, 44px); align-self: center; }
.oneteam__statement-media { aspect-ratio: 16 / 10; border-top: 1px solid var(--c-line); }
@media (min-width: 768px) {
  .oneteam__statement { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .oneteam__statement-media { aspect-ratio: auto; border-top: none; border-left: 1px solid var(--c-line); }
}
@media (min-width: 768px) {
  .oneteam__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oneteam__summary { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- One team — варіант: картки-порівняння (карусель) ---------- */
.cmp__head { margin-bottom: clamp(24px, 3vw, 36px); }
.cmp__title-note { margin: clamp(12px, 1.6vw, 20px) 0 0; max-width: 44ch; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -.01em; color: var(--c-text-2-inv); text-wrap: pretty; }
.cmp__mid { display: flex; gap: 24px; align-items: center; justify-content: space-between; border: 1px solid var(--c-line-inv); padding: clamp(24px, 3vw, 40px) var(--card-pad); }
.cmp__statement { margin: 0; max-width: 60ch; font-family: var(--f-body); font-weight: 400; font-size: 14px; line-height: 1.6; letter-spacing: 0; color: var(--c-text-2-inv); text-wrap: pretty; }
.cmp__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line-inv); border: 1px solid var(--c-line-inv); border-bottom: none; }
.cmp__flow li { background: var(--c-black); padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; min-height: 68px; }
.cmp__flow-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--c-red); }
.cmp__flow-label { font-family: var(--f-display); font-weight: 500; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -.01em; color: var(--c-white); }
@media (min-width: 768px) {
  .cmp__flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cmp__flow li { position: relative; }
  .cmp__flow li:not(:last-child)::after { content: "→"; position: absolute; right: -1px; top: 50%; transform: translate(50%, -50%); background: var(--c-black); color: var(--c-red); font-family: var(--f-mono); font-size: 13px; padding: 4px 0; line-height: 1; z-index: 1; }
}
.cmp__track { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 1px; background: var(--c-line-inv); border: 1px solid var(--c-line-inv); border-top: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cmp__track::-webkit-scrollbar { display: none; }
.cmp-card { scroll-snap-align: start; background: var(--c-black); padding: var(--card-pad); display: grid; gap: 20px; align-content: start; min-height: clamp(230px, 24vw, 300px); }
.cmp-card__topic { color: var(--c-red); }
.cmp-card__row { display: flex; gap: 14px; align-items: flex-start; }
.cmp-card__row--good { border-top: 1px solid var(--c-line-inv); padding-top: 20px; }
.cmp-card__mark { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; flex-shrink: 0; }
.cmp-card__row--bad .cmp-card__mark { color: var(--c-text-2-inv); }
.cmp-card__row--good .cmp-card__mark { color: var(--c-red); }
.cmp-card__state { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.cmp-card__row--bad .cmp-card__state { color: var(--c-text-2-inv); }
.cmp-card__row--good .cmp-card__state { color: var(--c-white); }
.cmp-card__row p { margin: 0; font-size: 15px; line-height: 1.5; }
.cmp-card__row--bad p { color: var(--c-text-2-inv); }
.cmp-card__row--good p { color: var(--c-white); }
.cmp__nav { display: none; gap: 8px; flex-shrink: 0; }
.cmp__nav--below { justify-content: flex-end; margin: 20px 0 clamp(28px, 3.5vw, 44px); }
.cmp__arrow { width: 48px; height: 48px; border: 1px solid var(--c-line-inv); background: none; color: var(--c-white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cmp__arrow:hover { border-color: var(--c-white); color: var(--c-red); }
.oneteam__summary--v2 { border: 1px solid var(--c-line-inv); margin-top: 0; }
@media (min-width: 768px) {
  .cmp__nav { display: flex; }
  .cmp__track { grid-auto-columns: calc((100% - 2px) / 3); }
}

/* ---------- Проєкти ---------- */
.projects__head { display: grid; gap: var(--s-4); }
.projects__grid { margin-top: clamp(40px, 5vw, 64px); }
.project-card { display: grid; }
.project-card__media { aspect-ratio: 16 / 10; border: none; border-bottom: 1px solid var(--c-line); }
.project-card__body { padding: var(--card-pad); display: grid; gap: var(--s-3); align-content: start; }
.project-card__meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.project-card__result { border-top: 1px solid var(--c-line); padding-top: 14px; font-size: 15px; }
.project-card__result .mono { display: block; color: var(--c-text-2); margin-bottom: 6px; }
.project-card { transition: background var(--t-fast); }
.project-card:hover { background: var(--c-surface); }
.projects__all { margin-top: var(--s-6); display: flex; justify-content: flex-end; }
@media (min-width: 768px) {
  .projects__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .projects__grid .project-card:first-child { grid-column: 1 / -1; }
  .projects__grid .project-card:first-child { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .projects__grid .project-card:first-child .project-card__media { aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--c-line); }
}
@media (min-width: 1280px) {
  .projects__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
}

/* ---------- eCommerce ---------- */
.ecom { border-block: 1px solid var(--c-line-inv); }
.ecom__intro { display: grid; gap: var(--s-4); margin-bottom: clamp(40px, 5vw, 64px); }
.ecom__col { padding: var(--card-pad); display: grid; gap: var(--s-3); align-content: start; }
.theme-dark .seam-grid > .ecom__col { background: #181818; }
.ecom__col h3 { display: flex; align-items: baseline; gap: 12px; }
.ecom__col h3 .mono { color: var(--c-red); }
.ecom__col ul { display: grid; gap: 10px; color: var(--c-text-2-inv); font-size: 15px; }
.ecom__col li { display: flex; gap: 12px; align-items: baseline; }
.ecom__col li::before { content: ""; width: 12px; height: 1px; background: var(--c-line-inv); flex-shrink: 0; align-self: center; }
.ecom__advantage {
  margin-top: var(--s-6);
  display: grid; gap: var(--s-4); align-items: center;
}
.ecom__advantage p { font-family: var(--f-display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; max-width: 56ch; }
.ecom__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* eCommerce: цикл продажів */
.ecom__cycle-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2-inv); display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.ecom__cycle-label::before { content: ""; width: 24px; height: 1px; background: var(--c-red); }
.ecycle { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; gap: 0; border: 1px solid var(--c-line-inv); }
.ecycle__step { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; padding: 16px 24px; border-bottom: 1px solid var(--c-line-inv); position: relative; }
.ecycle__step:last-child { border-bottom: none; }
.ecycle__step::before { content: "↓"; position: absolute; right: 24px; top: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--c-red); }
.ecycle__step:last-child::before { content: "↺"; }
.ecycle__n { grid-row: 1 / 3; align-self: start; color: var(--c-red); font-size: 11px; letter-spacing: .1em; padding-top: 4px; }
.ecycle__label { font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.ecycle__desc { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2-inv); }
@media (min-width: 768px) {
  .ecycle { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--c-line-inv); border: none; }
  .ecycle__step { grid-template-columns: 1fr; background: var(--c-black); border-bottom: none; align-content: start; gap: 10px; min-height: 148px; padding: clamp(18px, 1.6vw, 24px); }
  .ecycle__step::before { content: "→"; right: -1px; left: auto; top: 50%; bottom: auto; transform: translate(50%, -50%); z-index: 1; background: var(--c-black); padding: 4px 0; line-height: 1; }
  .ecycle__step:last-child::before { content: none; }
  .ecycle__n { grid-row: auto; padding-top: 0; }
  .ecycle__label { font-size: clamp(16px, 1.3vw, 20px); }
}
@media (min-width: 768px) { .ecom__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .ecom__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .ecom__advantage { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Stage — варіант 2: редакційний індекс ---------- */
.stageidx { border-top: 1px solid var(--c-black); }
.stageidx-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px);
  border-bottom: 1px solid var(--c-line);
  color: inherit; text-decoration: none;
  transition: background .25s ease, color .25s ease, padding-left .25s ease;
}
.stageidx-row__index { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--c-red); }
.stageidx-row__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: -.02em; margin: 0; }
.stageidx-row__title em { font-style: normal; color: var(--c-red); }
.stageidx-row__sub { margin: 10px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); }
.stageidx-row__desc { font-size: 15px; line-height: 1.55; color: var(--c-text-2); max-width: 44ch; margin: 0; }
.stageidx-row__btn { white-space: nowrap; justify-self: start; }
.stageidx-row__btn span { transition: transform .25s ease; }
.stageidx-row:hover { background: var(--c-black); color: var(--c-white); padding-left: clamp(24px, 3vw, 48px); }
.stageidx-row:hover .stageidx-row__title { color: var(--c-white); }
.stageidx-row:hover .stageidx-row__title em { color: var(--c-red); }
.stageidx-row:hover .stageidx-row__desc, .stageidx-row:hover .stageidx-row__sub { color: rgba(255,255,255,.7); }
.stageidx-row:hover .stageidx-row__btn span { transform: translateX(6px); }
.stageidx__hint { margin-top: var(--s-4); font-size: 13px; color: var(--c-text-2); }
@media (min-width: 1024px) {
  .stageidx-row { grid-template-columns: 72px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 3vw, 56px); }
  .stageidx-row__index { padding-top: 6px; align-self: start; }
}

/* ---------- Experience — цифри і факти (одна червона ячейка) ---------- */
#experience { padding-top: clamp(40px, 5vw, 64px); }
.exp__grid { margin-top: 0; }
.exp-fact {
  padding: clamp(24px, 3.2vw, 44px);
  min-height: clamp(200px, 20vw, 300px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.exp-fact__num { font-family: var(--f-display); font-weight: 500; font-size: clamp(44px, 4.8vw, 72px); line-height: 1; letter-spacing: -.02em; color: var(--c-red); }
.exp-fact__cap { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: 14px; color: var(--c-text-1, var(--c-black)); }
.exp-fact__cap .mono { font-size: 12px; letter-spacing: .1em; color: var(--c-text-2); white-space: nowrap; flex-shrink: 0; }
.exp-fact__cap span:last-child { text-align: right; max-width: 22ch; }
/* Червона ячейка ряду */
.exp-fact--key { background: var(--c-red) !important; color: var(--c-white); }
.exp-fact--key .exp-fact__num { color: var(--c-white); }
.exp-fact--key .exp-fact__cap, .exp-fact--key .exp-fact__cap .mono { color: var(--c-white); }
.exp__lead { margin-top: clamp(16px, 2vw, 24px); max-width: 22ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.exp__note { margin-top: var(--s-5); max-width: 44ch; font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -.01em; color: var(--c-black); text-wrap: pretty; }
.exp__testimonials { margin-top: var(--s-6); }
.testimonial { padding: var(--card-pad); display: grid; gap: var(--s-4); align-content: start; }
.testimonial__author { font-size: 14px; color: var(--c-text-2); }
.testimonial blockquote { margin: 0; font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) {
  .exp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp__testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .exp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Final CTA ---------- */
.cta-final { padding-block: 0; background: var(--c-white); color: var(--c-black); }
.cta-final__inner { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--c-line-inv); background: var(--c-black); color: var(--c-white); }
.cta-final__aside { padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; border-bottom: 1px solid var(--c-line-inv); }
.cta-final__eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2-inv); margin: 0 0 24px; }
.cta-final__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(34px, 4vw, 44px); line-height: 1; letter-spacing: -.02em; margin: 0; }
.cta-final__desc { font-size: 15px; color: var(--c-text-2-inv); line-height: 1.6; margin: 20px 0 0; max-width: 34ch; }
.cta-final__contacts { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.6; color: var(--c-text-2-inv); margin: 48px 0 0; }
@media (min-width: 1024px) {
  .cta-final__inner { grid-template-columns: 5fr 7fr; }
  .cta-final__aside { border-bottom: none; border-right: 1px solid var(--c-line-inv); }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--c-line-inv); }
.site-footer__grid {
  display: grid; gap: var(--s-6);
  padding-block: clamp(48px, 6vw, 72px);
}
.site-footer__brand { display: grid; gap: 16px; align-content: start; max-width: 320px; }
.site-footer__brand .logo { font-size: 24px; }
.site-footer nav h4, .site-footer__contacts h4 {
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2);
  margin-bottom: 16px;
}
.site-footer nav ul, .site-footer__contacts ul { display: grid; gap: 4px; }
.site-footer nav a, .site-footer__contacts a {
  color: var(--c-white); font-size: 15px;
  display: inline-flex; align-items: center; min-height: 36px;
}
.site-footer nav a:hover, .site-footer__contacts a:hover { color: var(--c-red); }
.site-footer__watermark {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(56px, 12.5vw, 210px); line-height: .85; letter-spacing: -.025em;
  color: var(--c-surface-inv); user-select: none; overflow: hidden; white-space: nowrap;
  max-width: 100%;
}
.site-footer__bottom {
  border-top: 1px solid var(--c-line-inv);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2);
}
.site-footer__bottom a { color: var(--c-text-2); }
.site-footer__bottom a:hover { color: var(--c-red); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* ---------- Wide desktop (1920) ---------- */
@media (min-width: 1800px) {
  :root { --container: 1520px; }
}

/* ---------- Compact mobile (320) ---------- */
@media (max-width: 359px) {
  .hero__actions .btn { flex-basis: 100%; }
  .logo__word { font-size: 20px; }
  .logo__mark { width: 40px; height: 40px; }
}

/* ---------- Stack (Стек технологій) ---------- */
.stack__grid { display: grid; gap: var(--s-5); }
.stack__intro { display: grid; gap: 24px; align-content: start; justify-items: start; }
.stack__lead { color: var(--c-text-2-inv); max-width: 380px; }
.stack__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.stack-chip { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--c-line-inv); color: var(--c-text-2-inv); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.stack-chip:hover { border-color: var(--c-white); color: var(--c-white); }
.stack-chip.is-active { border-color: var(--c-red); color: var(--c-red); }
.stack__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-line-inv); border: 1px solid var(--c-line-inv); margin-top: 24px; }
.stack-tile { background: var(--c-black); min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: background .2s ease; }
.stack-tile:hover { background: #111111; }
.stack-tile b { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--c-white); }
.stack-tile span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2-inv); }
@media (min-width: 768px) { .stack__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stack__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .stack__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Final CTA — форма заявки ---------- */
.cta-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; padding: clamp(28px, 5vw, 56px); }
.cta-form__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cta-chip { font-family: var(--f-body); font-size: 13px; height: 36px; display: inline-flex; align-items: center; padding: 0 16px; background: none; border: 1px solid var(--c-line-inv); color: var(--c-white); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.cta-chip:hover { border-color: var(--c-white); }
.cta-chip.is-active { border-color: var(--c-red); color: var(--c-red); }
.cta-form__req { position: relative; margin-top: 8px; }
.cta-form__req textarea { font-family: var(--f-body); font-size: 16px; width: 100%; min-width: 0; max-width: 100%; height: 150px; border: 1px solid var(--c-line-inv); background: transparent; color: var(--c-white); padding: 16px 20px 52px; outline: none; resize: none; display: block; }
.cta-form__req textarea:focus { border-color: var(--c-white); }
.cta-form__req textarea::placeholder { color: var(--c-text-2-inv); }
.cta-form__ai { position: absolute; right: 12px; bottom: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; height: 32px; padding: 0 14px; background: transparent; border: 1px solid var(--c-red); color: var(--c-red); cursor: pointer; transition: background .2s ease, color .2s ease; }
.cta-form__ai:hover { background: var(--c-red); color: var(--c-white); }
.cta-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cta-form__row > input { font-family: var(--f-body); font-size: 16px; height: 56px; border: 1px solid var(--c-line-inv); background: transparent; color: var(--c-white); padding: 0 20px; outline: none; min-width: 0; width: 100%; }
.cta-form__row > input:focus { border-color: var(--c-white); }
.cta-form__row input::placeholder { color: var(--c-text-2-inv); }
.cta-form__contact { display: flex; align-items: stretch; height: 56px; border: 1px solid var(--c-line-inv); }
.cta-form__contact > input { flex: 1 1 0; min-width: 0; width: 0; font-family: var(--f-body); font-size: 16px; border: none; background: transparent; color: var(--c-white); padding: 0 16px; outline: none; }
.cta-dd { position: relative; display: flex; flex-shrink: 0; }
.cta-dd__btn { font-family: var(--f-body); font-size: 14px; border: none; border-right: 1px solid var(--c-line-inv); background: none; color: var(--c-white); padding: 0 16px 0 20px; cursor: pointer; width: 148px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cta-dd__list { position: absolute; top: calc(100% + 1px); left: -1px; width: 148px; background: var(--c-black); border: 1px solid var(--c-line-inv); z-index: 20; }
.cta-dd__opt { font-family: var(--f-body); font-size: 14px; height: 44px; display: flex; align-items: center; padding: 0 20px; cursor: pointer; color: var(--c-white); }
.cta-dd__opt:hover { background: #161616; }
.cta-dd__opt.is-active { color: var(--c-red); }
.cta-form__req-note { font-size: 12px; color: var(--c-text-2-inv); margin: 0; }
.cta-form__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.cta-form__agree { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--c-text-2-inv); cursor: pointer; }
.cta-form__box { width: 20px; height: 20px; border: 1px solid var(--c-white); flex-shrink: 0; }
.cta-form__contacts { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; line-height: 1.9; color: var(--c-text-2-inv); }
@media (min-width: 768px) { .cta-form__row { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); } }

/* ---------- SEO-блок ---------- */
.seo__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.seo-chip { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; height: 36px; display: inline-flex; align-items: center; padding: 0 16px; background: none; border: 1px solid var(--c-line); color: var(--c-text-2); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.seo-chip:hover { border-color: var(--c-black); color: var(--c-black); }
.seo-chip.is-active { border-color: var(--c-red); color: var(--c-red); }
.seo__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .seo__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.seo__main { padding: var(--card-pad); }
.seo__intro { font-size: 16px; line-height: 1.65; max-width: 640px; margin: 0; }
.seo__note { font-size: 15px; line-height: 1.65; color: var(--c-text-2); max-width: 640px; margin: 16px 0 0; }
.seo__faq { border: 1px solid var(--c-black); margin-top: var(--s-5); padding: clamp(24px, 3vw, 44px); }
.seo__faq-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2); display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.seo__faq-label::before { content: ""; width: 24px; height: 1px; background: var(--c-red); }
.seo-faq__item { border-bottom: 1px solid var(--c-line); padding: 20px 0; }
.seo-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.seo-faq__q { display: flex; gap: 20px; align-items: baseline; }
.seo-faq__q .mono { font-size: 11px; color: var(--c-red); flex-shrink: 0; }
.seo-faq__q h3 { font-family: var(--f-display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; margin: 0; }
.seo-faq__a { font-size: 15px; color: var(--c-text-2); line-height: 1.6; margin: 12px 0 0; padding-left: 52px; }
.seo__side { padding: var(--card-pad); display: grid; gap: 24px; align-content: start; }
.seo__links { background: var(--c-surface, #F5F5F3); padding: clamp(24px, 2.5vw, 32px); }
.seo__links-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2); display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.seo__links-label::before { content: ""; width: 24px; height: 1px; background: var(--c-red); }
.seo__links-list { display: grid; gap: 12px; font-size: 15px; }
.seo__links-list a { color: var(--c-black); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-line); }
.seo__links-list a:hover { color: var(--c-red); }
.seo__links-more { margin-top: 24px; }
.seo__order { padding: clamp(24px, 2.5vw, 32px); display: grid; gap: 12px; justify-items: start; }
.seo__order-title { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.seo__order-note { font-size: 14px; color: var(--c-text-2-inv); margin: 0; }
.seo__order .btn { width: 100%; text-align: center; justify-content: center; }

/* ---------- Footer — багаторівневий ---------- */
.sf__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--c-line-inv); }
@media (min-width: 768px) { .sf__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  /* Колонки послуг — як мега-меню: вертикальні шви 1px */
  .sf__top { grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .sf__top .sf__col { border-left: 1px solid var(--c-line-inv); padding-left: 32px; padding-right: 24px; }
  .sf__top .sf__col:first-child { border-left: none; padding-left: 0; }
}
.sf__logo { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.sf__logo .logo__word { font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.sf__tagline { font-size: 14px; color: var(--c-text-2-inv); line-height: 1.6; margin: 16px 0 0; max-width: 220px; }
.sf__contacts { font-size: 12px; letter-spacing: .1em; line-height: 2; margin: 24px 0 0; }
.sf__contacts a { color: var(--c-text-2-inv); text-decoration: none; }
.sf__contacts a:hover { color: var(--c-white); }
.sf__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-2-inv); margin: 0 0 18px; }
.sf__links { display: grid; gap: 11px; font-size: 14px; }
.sf__links a { color: #CCCCCC; text-decoration: none; }
.sf__links a:hover { color: var(--c-red); }
.sf__ecom { padding: clamp(24px, 3vw, 36px) 0 32px; border-bottom: 1px solid var(--c-line-inv); }
.sf__brandbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 48px; }
.sf__brandbar .sf__logo .logo__word { font-size: 24px; }
.sf__brandbar .sf__tagline { margin: 0; max-width: 420px; }
.sf__brandbar .sf__contacts { margin: 0; }
.sf__ecom-links { display: flex; flex-wrap: wrap; gap: 8px 0; font-size: 13px; line-height: 1.5; }
.sf__ecom-links a { color: #CCCCCC; text-decoration: none; padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--c-line-inv); }
.sf__ecom-links a:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.sf__ecom-links a:hover { color: var(--c-red); }
.sf__legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2-inv); flex-wrap: wrap; }
.sf__social { display: flex; gap: 24px; }
.sf__social a { color: var(--c-text-2-inv); text-decoration: none; }
.sf__social a:hover { color: var(--c-white); }

.sf__more { margin-top: 16px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--c-line-inv); color: var(--c-text-2-inv); cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.sf__more:hover { border-color: var(--c-white); color: var(--c-white); }
.sf__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.sf__extra[hidden] { display: none; }

/* ---------- Mobile UX ---------- */
@media (max-width: 767px) {
  /* Повноширинні CTA — зручні під палець */
  .hero__actions { width: 100%; }
  .hero__actions .btn, .stageidx-row__btn, .cta-form__foot .btn { width: 100%; justify-content: center; text-align: center; }
  .cta-form__foot { flex-direction: column-reverse; align-items: stretch; }
  /* Чипи та стрілки — тап-таргет 44px */
  .cta-chip, .seo-chip, .stack-chip { height: 44px; }
  .sf__more { width: 44px; height: 44px; }
  /* Дропдаун способу зв'язку вужчий на малих екранах */
  .cta-dd__btn { width: 118px; padding: 0 12px 0 14px; }
  .cta-dd__list { width: 118px; }
  /* Компактніші великі блоки */
  .advantage, .exp-fact { min-height: 0; }
  .exp-fact { gap: 20px; }
  .stack-tile { min-height: 108px; }
  .seo-faq__a { padding-left: 0; }
  .seo__main, .seo__side { padding: clamp(20px, 5vw, 32px); }
  /* Легальний рядок футера — колонкою */
  .sf__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* Мега-меню: сітка 5 колонок у два ряди */
@media (min-width: 1024px) {
  .mega__grid--rows { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; align-items: stretch; }
  .mega__grid--rows .mega__col { padding-left: 24px; padding-right: 24px; }
  .mega__grid--rows .mega__col:nth-child(5n + 1) { border-left: 0; padding-left: 0; }
  .mega__grid--rows .mega__col:nth-child(-n + 5) { padding-bottom: 36px; }
  .mega__grid--rows .mega__col:nth-child(n + 6) { padding-top: 36px; padding-bottom: 40px; border-top: 1px solid var(--c-line-inv); }
  .mega__grid--rows { padding-bottom: 0; }
  .mega__grid--rows .mega__col a { font-size: 14px; }
}
.mega__all { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-red) !important; }
.mega__all:hover { color: var(--c-white) !important; }

/* Пункти меню без власних сторінок — приглушені */
.mega__soon, .mega__soon:visited { color: var(--c-disabled-inv) !important; }
.mega__soon:hover { color: var(--c-white) !important; }
.mega__soon .mega__dot { opacity: .45; }
.mm__soon { color: var(--c-disabled-inv) !important; }


/* ---------- Партнер, а не підрядник (ДС 3.16 · спліт + маркери) ---------- */
.pship { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--c-line); margin-top: clamp(24px, 3vw, 36px); }
.pship__aside { background: var(--c-black); color: var(--c-white); padding: clamp(32px, 4vw, 56px); display: grid; align-content: start; gap: clamp(20px, 2.4vw, 28px); }
.pship__label { display: inline-flex; align-items: center; justify-self: start; margin: 0; padding: 9px 14px; background: var(--c-red); font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-white); }
.pship__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.02em; }
.pship__title span { color: var(--c-red); }
.pship__lead { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--c-text-2-inv); max-width: 44ch; text-wrap: pretty; }
.pship__note { margin: 0; max-width: 62ch; font-family: var(--f-display); font-weight: 500; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -.01em; }
.pship__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px); padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--c-line); }
.pship__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-black); white-space: nowrap; }
.pship__cta:hover { color: var(--c-red); }
.pship__cols { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .pship__cols { grid-template-columns: 1fr 1fr; } }
.pship__col { padding: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--c-line); }
@media (min-width: 700px) { .pship__col + .pship__col { border-left: 1px solid var(--c-line); } }
@media (min-width: 700px) { .pship__col { border-top: 0; } }
.pship__col-h { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 2vw, 26px); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pship__col-h i { font-style: normal; color: var(--c-red); }
.pship__col--muted .pship__col-h { color: var(--c-text-2); }
.pship__list { list-style: none; margin: 0; padding: 0; display: grid; }
.pship__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--c-line); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.pship__list li:first-child { border-top: 0; padding-top: 0; }
.pship__list li b { font-weight: 500; }
.pship__list em { font-style: normal; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; }
.pship__col--good .pship__list em { color: var(--c-red); }
.pship__col--muted .pship__list { color: var(--c-text-2); }
.pship__col--muted .pship__list em { color: var(--c-disabled); }

/* ---------- Мобільна шапка: компактний кластер ---------- */
@media (max-width: 599px) {
  .site-header__right { gap: 8px; }
}

/* Keep decorative tracks clipped without turning the document into a nested
   scroll container. The latter breaks position: sticky for the shared header
   (and every other sticky element on the page). */
html, body { overflow-x: clip; }
.marquee { overflow: hidden; }

/* ---------- Телефон у шапці: випадне меню каналів ---------- */
.tel-dd { position: relative; flex-shrink: 0; }
.tel-dd__menu {
  position: absolute; top: 100%; right: 0; min-width: 300px; padding-top: 6px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 60;
}
.tel-dd:hover .tel-dd__menu,
.tel-dd:focus-within .tel-dd__menu,
.tel-dd.is-open .tel-dd__menu { opacity: 1; visibility: visible; }
.tel-dd.is-open .tel-dd__chev { transform: rotate(180deg); }
@media (hover: none) {
  .tel-dd:hover .tel-dd__menu { opacity: 0; visibility: hidden; }
  .tel-dd.is-open .tel-dd__menu { opacity: 1; visibility: visible; }
  .tel-dd__opt { min-height: 52px; }
}
.tel-dd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 46px; padding: 10px 16px; background: var(--c-black);
  border: 1px solid var(--c-line-inv); border-bottom: none; color: var(--c-white);
}
.tel-dd__opt:last-child { border-bottom: 1px solid var(--c-line-inv); }
.tel-dd__opt:hover { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }
.tel-dd__opt:hover + .tel-dd__opt { border-top-color: var(--c-red); }
.tel-dd__ch { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2-inv); white-space: nowrap; }
.tel-dd__opt:hover .tel-dd__ch { color: var(--c-white); }
.tel-dd__num { font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 599px) {
  .tel-dd__menu { min-width: 280px; }
}

/* Обкладинка кейсу як посилання */
a.project-card__media { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.project-card__body h3 a { text-decoration: none; }
.project-card__body h3 a:hover { color: var(--c-red); }
#seo-tab-data { display: none !important; }

/* Slider controls are hidden only when their track has no horizontal overflow. */
[data-cmp-prev][hidden], [data-cmp-next][hidden], [data-fmt-dot][hidden] { display: none !important; }
.is-slider-scrollable .fmt__nav, .is-slider-scrollable .cmp__nav { display: flex; }

.tel-dd__chev, .lang-dd__chev { display: inline-block; width: 8px; height: 8px; font-size: 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.tel-dd:hover .tel-dd__chev, .tel-dd:focus-within .tel-dd__chev, .tel-dd.is-open .tel-dd__chev { transform: rotate(225deg) translate(-1px, -1px); }
.lang-dd__trigger[aria-expanded="true"] .lang-dd__chev { transform: rotate(225deg) translate(-1px, -1px); }