/* === BUNDLED CSS — generated 2026-05-13 === */
/* Source files in css/ — edit individual files, then rerun ./build.sh */

/* ===== fonts.css ===== */
/* Self-hosted Montserrat — cyrillic + latin (variable WOFF2, weights 400–700) */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== reset.css ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
ul, ol { list-style: none; }
/* ===== style.css ===== */
/* =============================================
   GLOBAL TOKENS & BASE
   ============================================= */
:root {
  --color-bg:          #000;
  --color-surface:     #1d1d1f;
  --color-text:        #f5f5f7;
  --color-text-muted:  rgba(245,245,247,.6);
  --color-accent:      #1d6fdb;
  --color-accent-hover:#2176e8;
  --color-white:       #fff;

  /* Light section tokens (Apple #f5f5f7 palette) */
  --lt-bg:      #f5f5f7;
  --lt-surface: #ffffff;
  --lt-text:    #1d1d1f;
  --lt-muted:   #6e6e73;
  --lt-border:  rgba(0,0,0,0.08);
  --lt-border-hover: rgba(0,0,0,0.14);
  --lt-shadow-hover: 0 20px 60px rgba(0,0,0,0.10);

  --font-family: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 17px;
  --line-height: 1.47059;

  --nav-height: 56px;
  --local-nav-height: 52px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.42, 0, 0.58, 1);
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 980px;
  padding: 12px 28px;
  transition: background 0.22s var(--ease-out-expo),
              color      0.22s var(--ease-out-expo),
              transform  0.18s var(--ease-out-expo),
              box-shadow 0.22s var(--ease-out-expo);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 20px rgba(29,111,219,.45);
}

.btn--ghost {
  background: rgba(255,255,255,.15);
  color: var(--color-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.25);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.25);
}

.btn--nav {
  font-size: 13px;
  padding: 7px 16px;
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--nav:hover { background: var(--color-accent-hover); }

/* Screen-reader only */
.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;
}

/* =============================================
   SKIP-TO-MAIN (a11y)
   ============================================= */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: #1d6fdb;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: top .2s var(--ease-out-expo);
}
.skip-to-main:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* =============================================
   GLOBAL NAV
   ============================================= */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: var(--nav-height);
  background: rgba(0,0,0,.28);
  backdrop-filter: saturate(200%) blur(28px);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .35s var(--ease-out-expo),
              border-color .35s var(--ease-out-expo);
}

.global-nav.scrolled {
  background: rgba(0,0,0,.52);
  border-bottom-color: rgba(255,255,255,.12);
}

/* Light variant — used when current section under nav is light. */
.global-nav.is-light {
  background: rgba(255,255,255,.65);
  border-bottom-color: rgba(0,0,0,.08);
}
.global-nav.is-light.scrolled {
  background: rgba(255,255,255,.82);
  border-bottom-color: rgba(0,0,0,.12);
}

.global-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.global-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  flex-shrink: 0;
  transition: color .35s var(--ease-out-expo);
}
.global-nav__logo svg {
  flex-shrink: 0;
  transition: color .35s var(--ease-out-expo);
}
.global-nav__logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 4px;
}
.global-nav__logo-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.global-nav__logo-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
}
.global-nav.is-light .global-nav__logo { color: var(--lt-text); }

.global-nav__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}
.global-nav__menu a {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  transition: color .35s var(--ease-out-expo);
  white-space: nowrap;
}
.global-nav__menu a:hover { color: var(--color-white); }
.global-nav.is-light .global-nav__menu a { color: rgba(0,0,0,.7); }
.global-nav.is-light .global-nav__menu a:hover { color: var(--lt-text); }

.global-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
/* ─── Phone CTA — outline pill with icon + online indicator ───────────────── */
.global-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.88);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  white-space: nowrap;
  transition: background .25s var(--ease-out-expo),
              border-color .25s var(--ease-out-expo),
              color .25s var(--ease-out-expo),
              transform .15s ease-out;
}
.global-nav__phone:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-1px);
}
.global-nav__phone:active { transform: translateY(0); }

.global-nav__phone-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Pulsing green dot — signals "rieltor is online, call now" */
.global-nav__phone-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
  animation: phoneDotPulse 2.2s var(--ease-in-out) infinite;
}
@keyframes phoneDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .global-nav__phone-dot { animation: none; }
}

/* Light theme variant (nav over a white section) */
.global-nav.is-light .global-nav__phone {
  color: var(--lt-text);
  border-color: rgba(0, 0, 0, 0.18);
}
.global-nav.is-light .global-nav__phone:hover {
  color: var(--color-white);
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.global-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin-left: auto;
}
.global-nav__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s,
              background .35s var(--ease-out-expo);
}
.global-nav.is-light .global-nav__burger span { background: var(--lt-text); }

/* =============================================
   LOCAL NAV
   ============================================= */
.local-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 8000;
  height: var(--local-nav-height);
  background: rgba(0,0,0,.18);
  backdrop-filter: saturate(200%) blur(24px);
  -webkit-backdrop-filter: saturate(200%) blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: top .3s,
              background .35s var(--ease-out-expo),
              border-color .35s var(--ease-out-expo);
}
.local-nav.is-light {
  background: rgba(255,255,255,.55);
  border-bottom-color: rgba(0,0,0,.06);
}

.local-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.local-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .35s var(--ease-out-expo),
              border-color 0.18s;
}
.local-nav__link:hover,
.local-nav__link.active {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}
.local-nav.is-light .local-nav__link { color: rgba(0,0,0,.65); }
.local-nav.is-light .local-nav__link:hover,
.local-nav.is-light .local-nav__link.active {
  color: var(--lt-text);
  border-bottom-color: var(--lt-text);
}

/* Phone link visible only inside open burger menu */
.global-nav__phone-in-menu { display: none; }

/* =============================================
   RESPONSIVE OVERRIDES
   ============================================= */

/* Tablet-portrait range (iPad Pro 1024 ↓) —
   Replace «Залишити заявку» CTA with prominent phone-call pill (acent color + icon).
   The form CTA remains accessible from Hero, Speed band, and Contact section. */
@media (max-width: 1080px) {
  .btn--nav { display: none; }

  /* On tablet/mobile the phone reverts to the solid-filled CTA pill:
     hide the desktop-only inline icon + pulse dot — a CSS-drawn icon
     (::before, declared below) replaces them for sharper rendering on small screens. */
  .global-nav__phone-icon,
  .global-nav__phone-dot { display: none; }

  .global-nav__phone,
  .global-nav.is-light .global-nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;                                       /* white text on solid bg */
    padding: 8px 16px;
    border-radius: 999px;
    background: #1d6fdb;                               /* solid filled — bright CTA */
    border: none;
    box-shadow: 0 2px 8px rgba(29, 111, 219, 0.32);
    transition: background .2s, box-shadow .2s, transform .15s;
    white-space: nowrap;
  }
  .global-nav__phone:hover {
    background: #1659b8;
    box-shadow: 0 4px 12px rgba(29, 111, 219, 0.42);
    transform: translateY(-1px);
  }
  .global-nav__phone:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(29, 111, 219, 0.4);
  }
  .global-nav__phone::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>') center/contain no-repeat;
  }

  .global-nav__menu  { gap: 18px; }
  .global-nav__inner { gap: 24px; }

  /* Local-nav: tighten on tablet portrait (5 long labels look loose at gap 40) */
  .local-nav__inner { gap: 28px; padding: 0 20px; }
}

@media (max-width: 900px) {
  .global-nav__menu { display: none; }
  /* phone stays visible — replaces the hidden CTA button on tablets/mobile */
  .global-nav__burger { display: flex; margin-left: 0; }

  /* Phone "centered" via space-between distribution:
     logo (left), phone (middle with equal gaps to both sides), burger (right).
     Pure flex — no overlap risk on any viewport. */
  .global-nav__inner {
    justify-content: space-between;
    gap: 0;
  }
  .global-nav__actions { margin: 0; }

  /* Phone uses SHORT number (data-short) for a compact pill */
  .global-nav__phone,
  .global-nav.is-light .global-nav__phone {
    font-size: 0;
  }
  .global-nav__phone::after {
    content: attr(data-short);
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
  }

  /* Burger drop-down panel */
  .global-nav__menu.open {
    display: flex;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 8px 24px 20px;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
    z-index: 7500;
  }
  .global-nav__menu.open a {
    padding: 16px 4px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .global-nav__menu.open a:last-child { border-bottom: none; }
  .global-nav__menu.open .global-nav__phone-in-menu {
    display: block;
    color: #4a9eff;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 4px;
  }

  /* Light theme variant — when navbar passes over a light-background section,
     burger drop-down must follow (white panel, dark text). */
  .global-nav.is-light .global-nav__menu.open {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
  }
  .global-nav.is-light .global-nav__menu.open a {
    color: rgba(0, 0, 0, 0.78);
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }
  .global-nav.is-light .global-nav__menu.open .global-nav__phone-in-menu {
    color: #1d6fdb;
  }

  /* Burger → X animation when open */
  .global-nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .global-nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .global-nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Local-nav: at ≤900px swap full labels for short ones (data-short attribute).
     Original text hidden via font-size: 0; AT readers use it as accessible name.
     All 5 items remain visible and centered — no scroll needed. */
  .local-nav__inner {
    gap: 16px;
    padding: 0 12px;
  }
  .local-nav__link {
    padding: 14px 6px;     /* tap area ≥ 44px */
    font-size: 0;          /* hide full text */
    white-space: nowrap;
  }
  .local-nav__link::before {
    content: attr(data-short);
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .btn { font-size: 15px; padding: 11px 22px; }
  .local-nav__inner { gap: 12px; padding: 0 10px; }
  .local-nav__link  { padding: 14px 4px; }
  .local-nav__link::before { font-size: 12.5px; }
}

/* Narrowest phones — placed LAST so its overrides win the cascade against the
   wide-pill rules from @1080 (which still match at ≤480). */
@media (max-width: 480px) {
  .global-nav__logo-sub { display: none; }

  /* Compact pill — uses short number via ::after (rule set in @900) */
  .global-nav__phone,
  .global-nav.is-light .global-nav__phone {
    padding: 7px 12px;
    gap: 6px;
  }
  .global-nav__phone::after {
    font-size: 12.5px;
  }
  .global-nav__phone::before { width: 14px; height: 14px; }

  /* Tighter outer padding so phone has room when centered */
  .global-nav__inner { padding: 0 12px; }
}
/* ===== lang-switcher.css ===== */
/* =============================================
   LANGUAGE SWITCHER
   - Desktop (≥901px): dropdown ([data-lang-dropdown]) inside .global-nav__actions
   - Mobile (≤900px):  pill-style radio group inside the burger menu
   ============================================= */

/* ───── Desktop dropdown ───── */
.lang-dropdown {
  position: relative;
  flex-shrink: 0;
}

.lang-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: border-color .2s, background .2s, color .2s;
}
.lang-dropdown__trigger:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.lang-dropdown.is-open .lang-dropdown__trigger {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.lang-dropdown__chevron {
  width: 10px;
  height: 10px;
  transition: transform .2s var(--ease-out-expo);
}
.lang-dropdown.is-open .lang-dropdown__chevron { transform: rotate(180deg); }

.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: rgba(20, 20, 22, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s var(--ease-out-expo),
              transform .22s var(--ease-out-expo);
  z-index: 9100;
}
.lang-dropdown.is-open .lang-dropdown__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lang-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-radius: 9px;
  transition: background .15s, color .15s;
}
.lang-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}
.lang-dropdown__item-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.45);
}
.lang-dropdown__item.is-active {
  background: rgba(29, 111, 219, 0.20);
  color: var(--color-white);
  cursor: default;
}
.lang-dropdown__item.is-active .lang-dropdown__item-code {
  color: rgba(255, 255, 255, 0.80);
}

/* ── Light theme ── */
.global-nav.is-light .lang-dropdown__trigger {
  color: rgba(0, 0, 0, 0.72);
  border-color: rgba(0, 0, 0, 0.16);
}
.global-nav.is-light .lang-dropdown__trigger:hover,
.global-nav.is-light .lang-dropdown.is-open .lang-dropdown__trigger {
  color: var(--lt-text);
  border-color: rgba(0, 0, 0, 0.32);
  background: rgba(0, 0, 0, 0.04);
}
.global-nav.is-light .lang-dropdown__menu {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.global-nav.is-light .lang-dropdown__item { color: rgba(0, 0, 0, 0.72); }
.global-nav.is-light .lang-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--lt-text);
}
.global-nav.is-light .lang-dropdown__item-code { color: rgba(0, 0, 0, 0.40); }
.global-nav.is-light .lang-dropdown__item.is-active {
  background: rgba(29, 111, 219, 0.10);
  color: var(--color-accent);
}
.global-nav.is-light .lang-dropdown__item.is-active .lang-dropdown__item-code {
  color: var(--color-accent);
}

/* ───── Mobile pill (unchanged behaviour) ───── */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  flex-shrink: 0;
  transition: border-color .25s var(--ease-out-expo);
}

.lang-switcher__btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  line-height: 1;
  transition: background .2s, color .2s;
}
.lang-switcher__btn:hover { color: var(--color-white); }
.lang-switcher__btn.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  cursor: default;
}

.global-nav.is-light .lang-switcher { border-color: rgba(0, 0, 0, 0.16); }
.global-nav.is-light .lang-switcher__btn { color: rgba(0, 0, 0, 0.62); }
.global-nav.is-light .lang-switcher__btn:hover { color: var(--lt-text); }
.global-nav.is-light .lang-switcher__btn.is-active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--lt-text);
}

/* The "--in-menu" copy is for the mobile burger dropdown only.
   Hide it everywhere by default — it gets shown explicitly when the
   menu opens on small screens (rule below). */
.lang-switcher--in-menu { display: none; }

/* Hide the switcher entirely on the smallest phones (≤480px) to save room
   for the phone CTA. */
@media (max-width: 480px) {
  .lang-switcher,
  .lang-dropdown,
  .global-nav__menu.open .lang-switcher--in-menu { display: none; }
}

/* On burger-collapsed nav (≤900px): hide the desktop dropdown,
   reveal the pill inside the open menu. */
@media (max-width: 900px) {
  .lang-dropdown { display: none; }
  .global-nav__actions .lang-switcher { display: none; }

  .global-nav__menu.open .lang-switcher--in-menu {
    display: inline-flex;
    align-self: center;       /* don't stretch in the column flex */
    margin: 14px auto 4px;
    padding: 4px;
    gap: 4px;
    border-color: rgba(255, 255, 255, 0.28);
  }
  /* Override the wide-link padding inherited from `.global-nav__menu.open a`
     so the pill buttons keep their pill shape instead of becoming tall + skinny. */
  .global-nav__menu.open .lang-switcher--in-menu .lang-switcher__btn {
    padding: 7px 14px;
    font-size: 12px;
    border: none;             /* the surrounding pill provides the outline */
    color: rgba(255, 255, 255, 0.78);
  }
  .global-nav__menu.open .lang-switcher--in-menu .lang-switcher__btn:last-child {
    border-bottom: none;      /* override .menu.open a:not(:last-child) bottom-border */
  }

  .global-nav.is-light .global-nav__menu.open .lang-switcher--in-menu {
    border-color: rgba(0, 0, 0, 0.18);
  }
  .global-nav.is-light .global-nav__menu.open .lang-switcher--in-menu .lang-switcher__btn {
    color: rgba(0, 0, 0, 0.68);
  }
}
/* ===== hero.css ===== */
/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--local-nav-height));
}

/* ----- Video background ----- */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Многослойный оверлей: сверху темнее, снизу с синеватым градиентом */
.hero__video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.55)  0%,
      rgba(0,0,0,.25)  40%,
      rgba(0,0,0,.55)  75%,
      rgba(0,0,0,.80) 100%
    );
}

/* ----- Main content ----- */
.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 880px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 20px;
}

.hero__title {
  font-size: clamp(64px, 9.5vw, 120px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin-bottom: 28px;
}

.hero__subtitle {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,.85);
  margin-bottom: 44px;
  letter-spacing: -0.01em;
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ----- Scroll hint — pinned to bottom edge, centered horizontally
   Centering uses inset+margin (NOT transform) so .animate-fade-up keyframe
   that sets transform: translateY(0) doesn't clobber horizontal centering. */
.hero__scroll-hint {
  position: absolute;
  bottom: 36px;
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero__scroll-arrow {
  animation: scrollBounce 1.8s var(--ease-in-out) infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%       { transform: translateY(6px); opacity: 1;  }
}

/* =============================================
   ENTRANCE ANIMATIONS
   ============================================= */
.animate-fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s var(--ease-out-expo) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ----- Video fallback (no file) ----- */
.hero__video-wrap {
  background: url('../assets/img/hero-poster.svg') center 60% / cover no-repeat,
              linear-gradient(135deg, #0a1628 0%, #0d2240 40%, #112a4a 70%, #0a1628 100%);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 600px) {
  .hero {
    justify-content: flex-start;
    padding-top: calc(var(--nav-height) + var(--local-nav-height) + 40px);
    min-height: 100svh;
  }

  .hero__title {
    font-size: clamp(52px, 14vw, 80px);
  }

  .hero__cta {
    flex-direction: column;
    gap: 12px;
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 320px;
  }
}
/* ===== highlights.css ===== */
/* =============================================
   HIGHLIGHTS — «Наші переваги»
   Bento grid (4×3 asymmetric layout)
   IntersectionObserver scroll-in + visual crossfade.
   ============================================= */

.highlights {
  position: relative;
  background: var(--lt-bg);
  padding-bottom: 120px;
}

/* ────────── Section head ────────── */
.highlights__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 120px 24px 64px;
  max-width: 880px;
  margin: 0 auto;
}

.highlights__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.highlights__title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--lt-text);
  margin-bottom: 20px;
}

.highlights__subtitle {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--lt-muted);
  line-height: 1.45;
  max-width: 560px;
}

/* ────────── Bento grid ────────── */
.highlights__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(260px, 28vh);
  gap: 16px;
}

/* ────────── Card base ────────── */
.hl-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;

  /* enter state */
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition:
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);

  /* visual crossfade driver */
  --p: 0;
  will-change: opacity, transform;
}

.hl-card.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hl-card.is-in.is-played {
  --p: 1;
}

/* Grid placement: 4 cols × 3 rows
   Row 1: [HERO 03 ][HERO 03 ][ 01 ][ 02 ]
   Row 2: [HERO 03 ][HERO 03 ][   04 wide   ]
   Row 3: [   05 wide   ][   06 wide   ]  */
.hl-card--hero { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.hl-card--c1   { grid-column: 3; grid-row: 1; }
.hl-card--c2   { grid-column: 4; grid-row: 1; }
.hl-card--wide { grid-column: 3 / span 2; grid-row: 2; }
.hl-card--w1   { grid-column: 1 / span 2; grid-row: 3; }
.hl-card--w2   { grid-column: 3 / span 2; grid-row: 3; }

/* ────────── Backgrounds (tones) ────────── */
.hl-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hl-card--dark     .hl-card__bg { background: radial-gradient(120% 80% at 30% 20%, #1a3a5c 0%, #0d2240 55%, #07172e 100%); }
.hl-card--ocean    .hl-card__bg { background: linear-gradient(135deg, #1d6fdb 0%, #0a3b8e 100%); }
.hl-card--neutral  .hl-card__bg { background: linear-gradient(150deg, #fafafa 0%, #e8e8ec 100%); }
.hl-card--graphite .hl-card__bg { background: linear-gradient(160deg, #2c2c2e 0%, #0d0d0f 100%); }

/* Subtle inner ring */
.hl-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 4;
}

/* ────────── Visual area ────────── */
.hl-card__visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 28px 0;
  overflow: hidden;
}

.hl-card--hero .hl-card__visual { padding: 40px 40px 0; }

.hl-card__layer {
  position: absolute;
  inset: 28px 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-out-expo);
}

.hl-card--hero .hl-card__layer { inset: 40px 40px 0; }

.hl-card__layer--start { opacity: calc(1 - var(--p) * 1.3); }
.hl-card__layer--end   { opacity: calc(var(--p) * 1.3); }

.hl-card__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ────────── Body ────────── */
.hl-card__body {
  position: relative;
  z-index: 2;
  padding: 20px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hl-card--hero .hl-card__body { padding: 24px 40px 32px; gap: 8px; }

.hl-card--dark .hl-card__body,
.hl-card--ocean .hl-card__body,
.hl-card--graphite .hl-card__body { color: #fff; }
.hl-card--neutral .hl-card__body { color: var(--lt-text); }

.hl-card__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hl-card--neutral .hl-card__tag { color: var(--color-accent); opacity: 1; }
.hl-card__tag::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.hl-card__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.hl-card--hero .hl-card__title {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hl-card__desc {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.7;
  margin: 0;
  max-width: 480px;
}
.hl-card--hero .hl-card__desc { font-size: 16px; }
.hl-card--c1 .hl-card__desc,
.hl-card--c2 .hl-card__desc { display: none; }

.hl-card__meta {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.hl-card__meta-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hl-card--hero .hl-card__meta-num { font-size: 30px; }
.hl-card__meta-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ────────── Wide cards: visual left, body right ────────── */
.hl-card--wide,
.hl-card--w1,
.hl-card--w2 {
  grid-template-rows: 1fr;
  grid-template-columns: 1.1fr 0.9fr;
}
.hl-card--wide .hl-card__visual,
.hl-card--w1 .hl-card__visual,
.hl-card--w2 .hl-card__visual {
  padding: 24px 8px 24px 28px;
}
.hl-card--wide .hl-card__layer,
.hl-card--w1 .hl-card__layer,
.hl-card--w2 .hl-card__layer {
  inset: 24px 8px 24px 28px;
}
.hl-card--wide .hl-card__body,
.hl-card--w1 .hl-card__body,
.hl-card--w2 .hl-card__body {
  padding: 28px 32px 28px 16px;
  justify-content: center;
}

/* ────────── Responsive ────────── */
@media (max-width: 1080px) {
  .highlights__grid {
    grid-auto-rows: minmax(220px, 26vh);
  }
  .hl-card--hero .hl-card__title { font-size: 28px; }
}

@media (max-width: 820px) {
  .highlights__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(240px, auto);
  }
  .hl-card--hero { grid-column: 1 / -1; grid-row: auto; min-height: 360px; }
  .hl-card--c1   { grid-column: 1; grid-row: auto; }
  .hl-card--c2   { grid-column: 2; grid-row: auto; }
  .hl-card--wide,
  .hl-card--w1,
  .hl-card--w2 {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
  }
  .hl-card--wide .hl-card__visual,
  .hl-card--w1 .hl-card__visual,
  .hl-card--w2 .hl-card__visual {
    padding: 24px 24px 0;
  }
  .hl-card--wide .hl-card__layer,
  .hl-card--w1 .hl-card__layer,
  .hl-card--w2 .hl-card__layer {
    inset: 24px 24px 0;
  }
  .hl-card--wide .hl-card__body,
  .hl-card--w1 .hl-card__body,
  .hl-card--w2 .hl-card__body {
    padding: 20px 24px 24px;
  }
}

@media (max-width: 540px) {
  .highlights__head { padding-top: 80px; padding-bottom: 48px; }
  .highlights__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;       /* override @820 minmax so cards size to content */
    gap: 12px;
  }
  .hl-card--c1, .hl-card--c2 { grid-column: 1; }

  /* Match deal-safety feg-card dimensions on stacked mobile:
     visual area 300px, body grows to content. SVG remains readable. */
  .hl-card,
  .hl-card--hero,
  .hl-card--wide,
  .hl-card--w1,
  .hl-card--w2 {
    grid-template-rows: 300px auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    --p: 1 !important;
  }
  .hl-card__layer { transition: none !important; }
}
/* ===== deal-safety.css ===== */
/* =============================================
   DEAL SAFETY — «Безпека угоди»
   ============================================= */

.deal-safety {
  background: var(--lt-bg);
}

/* ─── HERO ─────────────────────────────────── */
.ds-hero {
  position: relative;
  width: 100%;
  height: min(92vh, 860px);
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background SVG scene */
.ds-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ds-hero__bg svg,
.ds-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Multi-layer overlay — darkens edges (sits on top of video) */
.ds-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.65) 100%);
}

/* ─── BLUR ALERT CARD ───────────────────────── */
.ds-hero__card-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.ds-alert {
  width: min(440px, calc(100vw - 48px));
  border-radius: 26px;

  /* Frosted glass */
  background: rgba(10, 22, 42, 0.55);
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.18) inset;

  overflow: hidden;

  /* Entrance — hidden until .is-visible */
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: opacity .8s var(--ease-out-expo),
              transform .8s var(--ease-out-expo),
              box-shadow .4s;
}

.ds-alert.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ds-alert:hover {
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(29, 111, 219, 0.3) inset,
    0 1px 0 rgba(255,255,255,.22) inset;
}

/* Shimmer line */
.ds-alert::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.5) 40%,
    rgba(29,111,219,.6) 60%,
    transparent 100%);
}

/* Alert header */
.ds-alert__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ds-alert__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(192,57,43,.4);
}

.ds-alert__icon svg { display: block; }

.ds-alert__meta {
  flex: 1;
  min-width: 0;
}

.ds-alert__app {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 3px;
}

.ds-alert__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
}

.ds-alert__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: 3px 8px;
}

/* Alert body */
.ds-alert__body {
  padding: 18px 24px;
}

/* Summary row — overall risk assessment of the check */
.ds-alert__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231,76,60,.2);
  margin-bottom: 16px;
}

.ds-alert__summary-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(231,76,60,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shieldPulse 2.4s ease-in-out infinite;
}

@keyframes shieldPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(231,76,60,0); }
  50%       { box-shadow: 0 0 0 6px rgba(231,76,60,.15); }
}

.ds-alert__summary-icon svg { display: block; }

.ds-alert__summary-text {
  flex: 1;
  min-width: 0;
}

.ds-alert__summary-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 2px;
}

.ds-alert__summary-value {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  line-height: 1.2;
}

.ds-alert__summary-value strong {
  color: #fff;
  font-weight: 700;
}

.ds-alert__summary-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Checklist */
.ds-alert__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.ds-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

.ds-check__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-check--ok   .ds-check__icon { background: rgba(52,199,89,.2);  }
.ds-check--warn .ds-check__icon { background: rgba(255,159,10,.2); }
.ds-check--fail .ds-check__icon { background: rgba(231,76,60,.2);  }

/* CTA inside card */
.ds-alert__cta {
  display: flex;
  gap: 10px;
}

.ds-alert__btn {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 12px;
  transition: background .22s, transform .18s;
}

.ds-alert__btn:active { transform: scale(0.97); }

.ds-alert__btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.ds-alert__btn--primary:hover { background: var(--color-accent-hover); }

.ds-alert__btn--secondary {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.12);
}
.ds-alert__btn--secondary:hover { background: rgba(255,255,255,.16); }

/* ─── HEADLINE ──────────────────────────────── */
.ds-headline {
  padding: 72px 24px 64px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.ds-headline__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out-expo),
              transform .7s var(--ease-out-expo);
}

.ds-headline__title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s var(--ease-out-expo) .1s,
              transform .75s var(--ease-out-expo) .1s;
}

.ds-headline__desc {
  font-size: 19px;
  line-height: 1.55;
  color: var(--lt-muted);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out-expo) .2s,
              transform .7s var(--ease-out-expo) .2s;
}

.ds-headline.in-view .ds-headline__eyebrow,
.ds-headline.in-view .ds-headline__title,
.ds-headline.in-view .ds-headline__desc {
  opacity: 1;
  transform: translateY(0);
}

/* ─── THREE PILLARS ─────────────────────────── */
.ds-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 900px;
  margin: 0 auto 100px;
  padding: 0 24px;
}

.ds-pillar {
  padding: 40px 32px;
  text-align: center;
  border-top: 1px solid var(--lt-border);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out-expo),
              transform .7s var(--ease-out-expo);
}

.ds-pillar:nth-child(2) { transition-delay: .12s; }
.ds-pillar:nth-child(3) { transition-delay: .24s; }

.ds-pillar.in-view {
  opacity: 1;
  transform: translateY(0);
}

.ds-pillar__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(29,111,219,.12);
  border: 1px solid rgba(29,111,219,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  transition: background .3s, border-color .3s;
}

.ds-pillar:hover .ds-pillar__icon-wrap {
  background: rgba(29,111,219,.2);
  border-color: rgba(29,111,219,.4);
}

/* Animated stroke icon */
.ds-pillar__icon-wrap svg path,
.ds-pillar__icon-wrap svg circle,
.ds-pillar__icon-wrap svg polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s var(--ease-out-expo);
}

.ds-pillar.in-view .ds-pillar__icon-wrap svg path,
.ds-pillar.in-view .ds-pillar__icon-wrap svg circle,
.ds-pillar.in-view .ds-pillar__icon-wrap svg polyline {
  stroke-dashoffset: 0;
}

.ds-pillar__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--lt-text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.ds-pillar__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lt-muted);
}


@media (max-width: 600px) {
  .ds-hero { height: 70vh; min-height: 480px; }
  .ds-headline { padding: 52px 24px 44px; }
}
/* ─── 6 FEATURES — Reveal Grid 3×2 ───────────── */
.ds-feg {
  padding: 96px 24px 120px;
  background: var(--lt-bg);
}

.ds-feg__head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out-expo),
              transform .8s var(--ease-out-expo);
}
.ds-feg__head.in-view {
  opacity: 1;
  transform: translateY(0);
}

.ds-feg__title {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 14px;
}

.ds-feg__sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--lt-muted);
}

.ds-feg__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.ds-feg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--lt-border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);

  opacity: 0;
  transform: translateY(48px) scale(0.96);
  transition:
    opacity 0.85s var(--ease-out-expo) var(--delay, 0s),
    transform 0.85s var(--ease-out-expo) var(--delay, 0s),
    box-shadow 0.35s var(--ease-out-expo);
}

.ds-feg-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ds-feg-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px) scale(1);
}

.ds-feg-card--dark {
  background: #1d1d1f;
  border-color: rgba(255, 255, 255, 0.06);
}

.ds-feg-card__visual {
  position: relative;
  height: 230px;
  padding: 20px 24px 0;
  background: linear-gradient(180deg, rgba(29, 111, 219, 0.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--lt-border);
  overflow: hidden;
}

.ds-feg-card--dark .ds-feg-card__visual {
  background: linear-gradient(180deg, #2a2a2c 0%, #1d1d1f 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.ds-feg-card__visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ds-feg-card[data-tone="mint"] .ds-feg-card__visual {
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.06) 0%, transparent 100%);
}
.ds-feg-card[data-tone="sand"] .ds-feg-card__visual {
  background: linear-gradient(180deg, rgba(255, 159, 10, 0.06) 0%, transparent 100%);
}
.ds-feg-card[data-tone="neutral"] .ds-feg-card__visual {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.025) 0%, transparent 100%);
}

.ds-feg-card__body {
  position: relative;
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ds-feg-card__num {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.18);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.ds-feg-card--dark .ds-feg-card__num {
  color: rgba(255, 255, 255, 0.25);
}

.ds-feg-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.ds-feg-card--dark .ds-feg-card__tag {
  color: #5b9aef;
}

.ds-feg-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--lt-text);
  margin-bottom: 10px;
}

.ds-feg-card--dark .ds-feg-card__title {
  color: #fff;
}

.ds-feg-card__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--lt-muted);
  margin-bottom: 20px;
  flex: 1;
}

.ds-feg-card--dark .ds-feg-card__desc {
  color: rgba(255, 255, 255, 0.65);
}

.ds-feg-card__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--lt-border);
}

.ds-feg-card--dark .ds-feg-card__meta {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.ds-feg-card__meta-num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.ds-feg-card--dark .ds-feg-card__meta-num {
  color: #5b9aef;
}

.ds-feg-card__meta-label {
  font-size: 13px;
  color: var(--lt-muted);
}

.ds-feg-card--dark .ds-feg-card__meta-label {
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive — Reveal Grid */
@media (max-width: 1024px) {
  .ds-feg__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .ds-pillars { grid-template-columns: 1fr; gap: 24px; }
  .ds-pillar { padding: 28px 24px; }

  .ds-feg { padding: 80px 16px 80px; }
  .ds-feg__head { margin-bottom: 48px; }
  .ds-feg__grid { grid-template-columns: 1fr; gap: 20px; }
  .ds-feg-card__visual { height: 300px; }  /* was 200 — SVG content readable now */
  .ds-feg-card__body { padding: 24px; }
  .ds-feg-card__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-feg-card,
  .ds-feg__head {
    opacity: 1 !important;
    transform: none !important;
    transition: box-shadow 0.35s ease;
  }
  .ds-feg-card:hover { transform: none !important; }
}

/* ===== team.css ===== */
/* =============================================
   TEAM IN ACTION — «Наша команда в дії»
   ============================================= */

.team {
  background: var(--lt-bg);
  overflow: hidden;
}

/* ─── SECTION INTRO ──────────────────────────── */
.team__intro {
  text-align: center;
  padding: 120px 24px 72px;
  max-width: 680px;
  margin: 0 auto;
}

.team__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out-expo),
              transform .7s var(--ease-out-expo);
}

.team__intro-title {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--lt-text);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease-out-expo) .1s,
              transform .75s var(--ease-out-expo) .1s;
}

.team__intro-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--lt-muted);
  opacity: 0;
  transition: opacity .7s var(--ease-out-expo) .22s;
}

.team__intro.in-view .team__eyebrow,
.team__intro.in-view .team__intro-title,
.team__intro.in-view .team__intro-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ─── HERO SCENE — scroll-driven width reveal ─── */
.team-hero {
  --reveal: 0;                              /* 0..1 — set from JS */
  --start-w: min(1180px, 86vw);             /* initial collapsed width */
  --hero-r:  calc(32px * (1 - var(--reveal)));

  position: relative;
  width: calc(var(--start-w) + (100vw - var(--start-w)) * var(--reveal));
  max-width: 100%;
  margin: 0 auto;
  height: min(80vh, 700px);
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border-radius: var(--hero-r);
  box-shadow: 0 calc(40px * (1 - var(--reveal))) calc(80px * (1 - var(--reveal)))
              calc(-30px * (1 - var(--reveal))) rgba(0,0,0,calc(0.25 * (1 - var(--reveal))));
}
@media (max-width: 600px) {
  .team-hero {
    --start-w: 94vw;                        /* keep mostly full-width on mobile */
    --hero-r:  calc(20px * (1 - var(--reveal)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-hero { --reveal: 1 !important; }
}

.team-hero__bg {
  position: absolute;
  inset: 0;
}

.team-hero__bg svg,
.team-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.1)  0%,
      rgba(0,0,0,.15) 40%,
      rgba(0,0,0,.65) 75%,
      rgba(0,0,0,.92) 100%);
}

.team-hero__text {
  position: relative;
  z-index: 5;
  padding: 0 60px 52px;
  max-width: 700px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--ease-out-expo),
              transform .85s var(--ease-out-expo);
}

.team-hero__text.in-view {
  opacity: 1;
  transform: translateY(0);
}

.team-hero__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
}

.team-hero__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: 14px;
}

.team-hero__desc {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
  max-width: 480px;
}

@media (max-width: 600px) {
  .team-hero__text { padding: 0 24px 36px; }
}

/* ─── ACTIVITY RINGS ─────────────────────────── */
.team-rings {
  padding: 100px 24px 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Subtle background glow — adapted for light */
.team-rings::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(29,111,219,.05) 0%,
    transparent 70%);
  pointer-events: none;
}

.team-rings__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.team-rings__title {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--lt-text);
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}

.team-rings.in-view .team-rings__title { opacity: 1; transform: translateY(0); }

/* Rings SVG container */
.team-rings__svg-wrap {
  display: inline-block;
  position: relative;
  margin-bottom: 56px;
}

.team-rings__svg {
  width: min(520px, 85vw);
  height: min(520px, 85vw);
  display: block;
}

/* Ring circles — start unfilled */
.ring-track { opacity: .15; }

.ring-fill {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease-out-expo);
}

/* R=88 → circumference=553 */
.ring-fill--1 { stroke-dasharray: 553; stroke-dashoffset: 553; }
/* R=66 → circumference=415 */
.ring-fill--2 { stroke-dasharray: 415; stroke-dashoffset: 415; }
/* R=44 → circumference=277 */
.ring-fill--3 { stroke-dasharray: 277; stroke-dashoffset: 277; }

/* Filled states (values set in JS per actual percent) */
.team-rings.in-view .ring-fill--1 { stroke-dashoffset:  66; transition-delay: .0s; }
.team-rings.in-view .ring-fill--2 { stroke-dashoffset: 116; transition-delay: .15s; }
.team-rings.in-view .ring-fill--3 { stroke-dashoffset: 111; transition-delay: .3s; }

/* Center counter */
.team-rings__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.team-rings__center-num {
  font-size: clamp(56px, 12vw, 84px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--lt-text);
  line-height: 1;
}

.team-rings__center-label {
  font-size: 17px;
  color: var(--lt-muted);
  margin-top: 10px;
}

/* Ring legend — colored numbers, left-aligned within each item */
.team-rings__legend {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 6vw, 88px);
  flex-wrap: wrap;
}

.ring-legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out-expo),
              transform .6s var(--ease-out-expo);
}

.team-rings.in-view .ring-legend-item:nth-child(1) { opacity: 1; transform: none; transition-delay: .5s; }
.team-rings.in-view .ring-legend-item:nth-child(2) { opacity: 1; transform: none; transition-delay: .65s; }
.team-rings.in-view .ring-legend-item:nth-child(3) { opacity: 1; transform: none; transition-delay: .8s; }

.ring-legend-item__info { text-align: left; }

.ring-legend-item__val {
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.ring-legend-item__val > span {
  font-size: .7em;
  opacity: .45;
}

.ring-legend-item__name {
  font-size: 20px;
  color: var(--lt-muted);
  margin-top: 12px;
}

/* ─── BUDDY CARD — kept as dark product card on light section ─── */
.team-buddy {
  margin: 120px 24px 0;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Background gradient — intentionally dark (Apple-style dark product card) */
.team-buddy__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    #0a1628 0%,
    #0d2244 35%,
    #071830 100%);
  overflow: hidden;
}

/* Decorative SVG blobs */
.team-buddy__bg::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(29,111,219,.2) 0%,
    transparent 65%);
}

.team-buddy__bg::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(52,199,89,.08) 0%,
    transparent 65%);
}

/* Decorative grid lines */
.team-buddy__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Quote area */
.team-buddy__quote {
  position: relative;
  z-index: 5;
  padding: 60px 60px 24px;
}

.team-buddy__quote-mark {
  font-size: 96px;
  line-height: .7;
  color: rgba(29,111,219,.3);
  font-family: Georgia, serif;
  margin-bottom: 8px;
  display: block;
}

.team-buddy__quote-text {
  font-size: clamp(26px, 3.8vw, 48px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--color-white);
  max-width: 760px;
  margin-bottom: 28px;
}

.team-buddy__quote-text em {
  font-style: normal;
  color: #1d6fdb;
}

/* Message bubble inside the card */
.team-buddy__bubble-wrap {
  position: relative;
  z-index: 5;
  padding: 0 60px 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.team-buddy__bubble {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 460px;

  background: rgba(255,255,255,.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out-expo) .4s,
              transform .8s var(--ease-out-expo) .4s;
}

.team-buddy.in-view .team-buddy__bubble {
  opacity: 1;
  transform: translateY(0);
}

.team-buddy__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d6fdb, #0a3a8a);
  border: 2px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
  position: relative;
}

/* Online dot */
.team-buddy__avatar::after {
  content: '';
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #34c759;
  border: 1.5px solid #0a1628;
}

.team-buddy__bubble-body { flex: 1; }

.team-buddy__bubble-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
}

.team-buddy__bubble-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
}

/* Typing dots animation */
.team-buddy__typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.team-buddy__typing span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  animation: typingDot 1.4s ease-in-out infinite;
}

.team-buddy__typing span:nth-child(2) { animation-delay: .2s; }
.team-buddy__typing span:nth-child(3) { animation-delay: .4s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* Stats row inside buddy card */
.team-buddy__stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.buddy-stat { text-align: center; }

.buddy-stat__val {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -.02em;
  line-height: 1;
}

.buddy-stat__label {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .team-buddy { margin: 80px 16px 0; }
  .team-buddy__quote  { padding: 40px 32px 20px; }
  .team-buddy__bubble-wrap { padding: 0 32px 40px; flex-direction: column; }
}

@media (max-width: 600px) {
  .team-buddy__quote  { padding: 32px 24px 16px; }
  .team-buddy__bubble-wrap { padding: 0 24px 32px; }
  .team-buddy__quote-mark { font-size: 64px; }
}


/* ===== team-extras.css ===== */
/* =============================================
   TEAM EXTRAS — Segments / Cases / Testimonials
   Three sub-sections appended after team-buddy.
   ============================================= */

/* ────────── SEGMENTS — Кому ми допомагаємо ────────── */
.team-segments {
  max-width: 1200px;
  margin: 120px auto 120px;
  padding: 0 24px;
}

.team-segments__head {
  text-align: center;
  margin-bottom: 56px;
}

.team-segments__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.team-segments__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 14px;
}

.team-segments__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--lt-muted);
  max-width: 580px;
  margin: 0 auto;
}

.team-segments__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.seg-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  transition: transform .25s var(--ease-out-expo),
              box-shadow .25s var(--ease-out-expo),
              border-color .2s;
  text-decoration: none;
  color: inherit;
}

.seg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(29, 111, 219, 0.25);
}

.seg-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.seg-card__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seg-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lt-text);
  margin: 0 0 8px;
}

.seg-card__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--lt-muted);
  margin: 0 0 16px;
  flex-grow: 1;
}

.seg-card__cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-top: auto;
}

/* ────────── CASES — Кейси-челенджі ────────── */
.team-cases {
  max-width: 1200px;
  margin: 120px auto 0;
  padding: 0 24px;
}

.team-cases__head {
  text-align: center;
  margin-bottom: 56px;
}

.team-cases__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.team-cases__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 14px;
}

.team-cases__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--lt-muted);
  max-width: 580px;
  margin: 0 auto;
}

.team-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.case-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.case-card__badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 6px 12px;
  background: rgba(29, 111, 219, 0.10);
  border-radius: 999px;
}

.case-card__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--lt-text);
  margin: 0;
}

.case-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
}

.case-step__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.case-step--problem .case-step__label {
  background: rgba(255, 59, 48, 0.10);
  color: #c93429;
}
.case-step--action  .case-step__label {
  background: rgba(29, 111, 219, 0.12);
  color: var(--color-accent);
}
.case-step--result  .case-step__label {
  background: rgba(52, 199, 89, 0.12);
  color: #1d8f3e;
}

.case-step__text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
}
.case-step--result .case-step__text { font-weight: 600; color: var(--lt-text); }

.case-card__metric {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--lt-border);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.case-card__metric-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lt-text);
}
.case-card__metric-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lt-muted);
}

/* ────────── TESTIMONIALS — Відгуки клієнтів ────────── */
.team-testimonials {
  max-width: 100%;
  margin: 120px auto 0;
  padding: 0;
}

.team-testimonials__head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.team-testimonials__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.team-testimonials__title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 14px;
}

.team-testimonials__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--lt-muted);
  max-width: 580px;
  margin: 0 auto;
}

/* Horizontal scroll-snap carousel */
.team-testimonials__track {
  display: flex;
  gap: 20px;
  padding: 8px max(60px, calc((100vw - 1200px) / 2 + 24px)) 32px;
  scroll-padding-inline-start: max(60px, calc((100vw - 1200px) / 2 + 24px));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.team-testimonials__track::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 380px;
  min-height: 280px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 24px;
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  position: relative;
}

.testimonial-card__quote-mark {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 64px;
  line-height: 1;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: rgba(29, 111, 219, 0.18);
  pointer-events: none;
}

.testimonial-card__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lt-text);
  margin: 0 0 24px;
  font-style: italic;
  flex-grow: 1;
}

.testimonial-card__author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--lt-border);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.testimonial-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.testimonial-card__meta {
  font-size: 12px;
  color: var(--lt-muted);
  margin: 2px 0 0;
}

.testimonial-card__stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 4px;
}
.testimonial-card__stars span {
  color: #ff9f0a;
  font-size: 11px;
  letter-spacing: 1px;
}

/* Scroll hint (chevron at right edge) */
.team-testimonials__hint {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lt-muted);
  margin-top: 8px;
}

/* ────────── Responsive ────────── */
@media (max-width: 1024px) {
  .team-segments__grid { grid-template-columns: repeat(3, 1fr); }
  .team-cases__grid    { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .team-segments      { margin: 80px auto; }
  .team-cases         { margin-top: 80px; }
  .team-testimonials  { margin-top: 80px; }

  .team-segments__head, .team-cases__head, .team-testimonials__head { margin-bottom: 40px; }

  .team-segments__grid { grid-template-columns: 1fr; }

  .testimonial-card { flex: 0 0 86vw; }
  .team-testimonials__track {
    padding: 8px 24px 28px;
    scroll-padding-inline-start: 24px;
    gap: 14px;
  }
}
/* ===== speed.css ===== */
/* =============================================
   SPEED & RESULTS — «Швидкість та результат»
   ============================================= */

.speed {
  background: #000;
  overflow: hidden;
  position: relative;
}

/* Ambient background glow */
.speed::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(29,111,219,.07) 0%,
    transparent 65%);
  pointer-events: none;
}

/* ─── STATEMENT ──────────────────────────────── */
.speed-statement {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 120px 24px 0;
}

.speed-statement__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out-expo),
              transform .7s var(--ease-out-expo);
}

.speed-statement.in-view .speed-statement__eyebrow { opacity: 1; transform: none; }

/* Giant headline — Apple Battery style */
.speed-statement__line1 {
  font-size: clamp(52px, 9vw, 128px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--color-white);
  display: block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease-out-expo) .08s,
              transform .85s var(--ease-out-expo) .08s;
}

.speed-statement__line2 {
  font-size: clamp(52px, 9vw, 128px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
  background: linear-gradient(135deg, var(--color-accent) 0%, #34c759 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease-out-expo) .18s,
              transform .85s var(--ease-out-expo) .18s;
}

.speed-statement.in-view .speed-statement__line1,
.speed-statement.in-view .speed-statement__line2 {
  opacity: 1;
  transform: none;
}

.speed-statement__sub {
  font-size: clamp(17px, 2vw, 22px);
  color: rgba(255,255,255,.55);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
  opacity: 0;
  transition: opacity .7s var(--ease-out-expo) .3s;
}

.speed-statement.in-view .speed-statement__sub { opacity: 1; }

/* ─── DEAL PIPELINE TIMELINE ─────────────────── */
.speed-pipeline {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 100px auto 0;
  padding: 0 24px;
}

.speed-pipeline__title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out-expo),
              transform .7s var(--ease-out-expo);
}

.speed-pipeline.in-view .speed-pipeline__title { opacity: 1; transform: none; }

/* Stages row */
.pipeline-stages {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
}

/* Connecting track under circles */
.pipeline-track {
  position: absolute;
  top: 28px;
  left: calc(10% + 28px);
  right: calc(10% + 28px);
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 1px;
  overflow: hidden;
}

.pipeline-track__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-accent), #34c759);
  border-radius: 1px;
  transition: width 1.6s var(--ease-out-expo) .3s;
}

.speed-pipeline.in-view .pipeline-track__fill { width: 100%; }

/* Individual stage */
.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 1;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-out-expo),
              transform .6s var(--ease-out-expo);
}

.speed-pipeline.in-view .pipeline-stage:nth-child(1) { opacity: 1; transform: none; transition-delay: .1s; }
.speed-pipeline.in-view .pipeline-stage:nth-child(2) { opacity: 1; transform: none; transition-delay: .25s; }
.speed-pipeline.in-view .pipeline-stage:nth-child(3) { opacity: 1; transform: none; transition-delay: .4s; }
.speed-pipeline.in-view .pipeline-stage:nth-child(4) { opacity: 1; transform: none; transition-delay: .55s; }
.speed-pipeline.in-view .pipeline-stage:nth-child(5) { opacity: 1; transform: none; transition-delay: .7s; }

.pipeline-stage__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: border-color .4s, background .4s, box-shadow .4s;
  flex-shrink: 0;
}

/* Last stage = done (green) */
.pipeline-stage:last-child .pipeline-stage__circle {
  border-color: #34c759;
  background: rgba(52,199,89,.12);
  box-shadow: 0 0 20px rgba(52,199,89,.25);
}

/* Filled stages */
.speed-pipeline.in-view .pipeline-stage:not(:last-child) .pipeline-stage__circle {
  border-color: var(--color-accent);
  background: rgba(29,111,219,.14);
}

.pipeline-stage__day {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: -8px;
}

.pipeline-stage:last-child .pipeline-stage__day { color: #34c759; }

.pipeline-stage__name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-align: center;
  line-height: 1.3;
}

.pipeline-stage__desc {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  text-align: center;
  line-height: 1.4;
  max-width: 100px;
}

/* ─── THREE METRICS ──────────────────────────── */
.speed-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: 100px auto 0;
  padding: 0 24px;
  gap: 2px;
}

.speed-metric {
  padding: 52px 32px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s var(--ease-out-expo),
              transform .75s var(--ease-out-expo);
}

.speed-metric:nth-child(2) { transition-delay: .12s; }
.speed-metric:nth-child(3) { transition-delay: .24s; }

.speed-metric.in-view { opacity: 1; transform: none; }

/* Vertical dividers between metrics */
.speed-metric:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0; top: 52px; bottom: 52px;
  width: 1px;
  background: rgba(255,255,255,.08);
}

.speed-metric__num {
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--color-white);
  display: block;
  margin-bottom: 4px;
}

.speed-metric__unit {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 12px;
}

.speed-metric__label {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  margin-bottom: 8px;
}

.speed-metric__desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
  max-width: 200px;
  margin: 0 auto;
}

/* ─── ACHIEVEMENT BAND ───────────────────────── */
.speed-band {
  position: relative;
  z-index: 2;
  margin: 100px 24px 0;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 28px;
  overflow: hidden;
}

.speed-band__inner {
  background: linear-gradient(135deg, #071830 0%, #0d2244 50%, #071830 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 28px;
  padding: 56px 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Subtle grid overlay */
.speed-band__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  border-radius: 28px;
}

/* Glow blob */
.speed-band__inner::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,111,219,.14) 0%, transparent 65%);
  pointer-events: none;
}

.speed-band__text {
  position: relative;
  z-index: 2;
}

.speed-band__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.speed-band__title {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 12px;
}

.speed-band__desc {
  font-size: 16px;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
  max-width: 520px;
}

.speed-band__cta {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Entrance for band */
.speed-band {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease-out-expo),
              transform .85s var(--ease-out-expo);
}

.speed-band.in-view { opacity: 1; transform: none; }

/* ─── TICKER ROW ─────────────────────────────── */
.speed-ticker {
  margin-top: 80px;
  padding-bottom: 120px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.speed-ticker__track {
  display: flex;
  gap: 16px;
  animation: tickerScroll 28s linear infinite;
  width: max-content;
}

.speed-ticker__track:hover { animation-play-state: paused; }

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .speed-ticker__track { animation: none; }
}

.ticker-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 10px 20px 10px 14px;
  white-space: nowrap;
}

.ticker-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ticker-item__text {
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

.ticker-item__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
}

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
  .pipeline-stages { flex-wrap: wrap; gap: 32px 0; }
  .pipeline-track  { display: none; }

  .pipeline-stage { flex: 0 0 33.33%; }
  .pipeline-stage:last-child { flex: 0 0 100%; }

  .speed-metrics { grid-template-columns: 1fr; }

  .speed-metric:not(:first-child)::before { display: none; }
  .speed-metric {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 36px 24px;
  }

  .speed-band__inner {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    text-align: center;
  }
  .speed-band__cta { margin: 0 auto; }
  .speed-band__desc { margin: 0 auto; }
}

@media (max-width: 600px) {
  .speed-statement { padding-top: 80px; }
  .pipeline-stage { flex: 0 0 50%; }
  .speed-band { margin: 80px 16px 0; }
}
/* ===== faq.css ===== */
/* =============================================
   FAQ — Часті питання
   Native <details>/<summary> with smooth height
   animation via grid-template-rows trick.
   ============================================= */

.faq {
  background: var(--lt-bg);
  padding: 120px 24px 120px;
  border-top: 1px solid var(--lt-border);
}

.faq__inner {
  max-width: 880px;
  margin: 0 auto;
}

/* ────────── Head ────────── */
.faq__head {
  text-align: center;
  margin-bottom: 56px;
}

.faq__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.faq__title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--lt-text);
  margin-bottom: 16px;
}

.faq__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--lt-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* ────────── Accordion items ────────── */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--lt-border);
}

.faq-item {
  border-bottom: 1px solid var(--lt-border);
}

/* Question (always-visible header) */
.faq-item__question {
  list-style: none;
  cursor: pointer;
  padding: 24px 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lt-text);
  transition: color .2s var(--ease-out-expo);
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker               { display: none; content: ''; }

.faq-item__question:hover { color: var(--color-accent); }

/* Chevron icon */
.faq-item__chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(29, 111, 219, 0.10);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease-out-expo), background .2s;
}
.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
  background: rgba(29, 111, 219, 0.20);
}
.faq-item__chevron svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Answer — animated via grid-template-rows trick */
.faq-item__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out-expo);
}
.faq-item[open] .faq-item__answer-wrap {
  grid-template-rows: 1fr;
}
.faq-item__answer {
  overflow: hidden;
}
.faq-item__answer p {
  padding: 0 4px 24px;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--lt-muted);
  max-width: 720px;
}
.faq-item__answer p + p { padding-top: 0; padding-bottom: 16px; }

/* ────────── CTA bottom ────────── */
.faq__cta {
  margin-top: 56px;
  text-align: center;
  padding: 32px 24px;
  background: rgba(29, 111, 219, 0.05);
  border: 1px solid rgba(29, 111, 219, 0.15);
  border-radius: 20px;
}
.faq__cta-text {
  font-size: 17px;
  color: var(--lt-text);
  margin-bottom: 16px;
}
.faq__cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s, transform .15s;
}
.faq__cta-btn:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

/* ────────── Responsive ────────── */
@media (max-width: 700px) {
  .faq { padding: 80px 16px 80px; }
  .faq__head { margin-bottom: 40px; }
  .faq-item__question { padding: 20px 4px; gap: 16px; }
  .faq-item__answer p { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__chevron,
  .faq-item__answer-wrap { transition: none; }
}
/* ===== contact.css ===== */
/* =============================================
   CONTACT — «Зв'язатись з нами»
   ============================================= */

.contact {
  background: var(--lt-bg);
  overflow: hidden;
  position: relative;
}

/* Ambient background glow — light version */
.contact::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(29,111,219,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ─── INTRO ──────────────────────────────────── */
.contact__intro {
  text-align: center;
  padding: 120px 24px 72px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.contact__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out-expo),
              transform .7s var(--ease-out-expo);
}

.contact__title {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--lt-text);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease-out-expo) .1s,
              transform .75s var(--ease-out-expo) .1s;
}

.contact__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--lt-muted);
  opacity: 0;
  transition: opacity .7s var(--ease-out-expo) .22s;
}

.contact__intro.in-view .contact__eyebrow,
.contact__intro.in-view .contact__title,
.contact__intro.in-view .contact__sub {
  opacity: 1;
  transform: translateY(0);
}

/* ─── MAIN GRID ──────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 80px;
  position: relative;
  z-index: 2;
}

/* ─── FORM CARD ──────────────────────────────── */
.contact-form-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 28px;
  padding: 44px 40px 40px;
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s var(--ease-out-expo),
              transform .85s var(--ease-out-expo);
}

/* No shimmer line on light card */
.contact-form-card::before { display: none; }

.contact-form-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.contact-form-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--lt-text);
  margin-bottom: 6px;
}

.contact-form-card__sub {
  font-size: 14px;
  color: var(--lt-muted);
  margin-bottom: 32px;
}

/* ─── FORM FIELDS ────────────────────────────── */
.cf-form { display: flex; flex-direction: column; gap: 16px; }

/* Floating label field */
.cf-field {
  position: relative;
}

.cf-field__input,
.cf-field__select,
.cf-field__textarea {
  width: 100%;
  background: var(--lt-bg);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 22px 18px 10px;
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--lt-text);
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
  -webkit-appearance: none;
  appearance: none;
}

.cf-field__input::placeholder,
.cf-field__textarea::placeholder { color: transparent; }

.cf-field__input:focus,
.cf-field__select:focus,
.cf-field__textarea:focus {
  background: #fff;
  border-color: rgba(29,111,219,.5);
  box-shadow: 0 0 0 3px rgba(29,111,219,.1);
}

/* Floating label */
.cf-field__label {
  position: absolute;
  top: 50%; left: 18px;
  transform: translateY(-50%);
  font-size: 15px;
  color: rgba(0,0,0,.58);
  pointer-events: none;
  transition: top .22s var(--ease-out-expo),
              font-size .22s var(--ease-out-expo),
              color .22s var(--ease-out-expo),
              transform .22s var(--ease-out-expo);
}

/* Textarea label starts at top */
.cf-field--textarea .cf-field__label { top: 22px; transform: none; }

/* Focused or filled → float up */
.cf-field__input:focus        ~ .cf-field__label,
.cf-field__input:not(:placeholder-shown) ~ .cf-field__label,
.cf-field__textarea:focus     ~ .cf-field__label,
.cf-field__textarea:not(:placeholder-shown) ~ .cf-field__label {
  top: 10px;
  font-size: 11px;
  color: var(--color-accent);
  transform: none;
}

/* Select doesn't use floating label trick */
.cf-field__select-wrap {
  position: relative;
}

.cf-field__select-wrap::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(0,0,0,.35);
  pointer-events: none;
  transition: border-top-color .2s;
}

.cf-field__select-wrap:focus-within::after {
  border-top-color: rgba(29,111,219,.9);
}

.cf-field__select {
  padding: 18px 40px 18px 18px;
  cursor: pointer;
  color: rgba(0,0,0,.6);
}

.cf-field__select option {
  background: #ffffff;
  color: var(--lt-text);
}

.cf-field__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
  padding-top: 22px;
}

/* Checkbox */
.cf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--lt-muted);
  line-height: 1.5;
  user-select: none;
}

.cf-checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(0,0,0,.2);
  background: var(--lt-bg);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  margin-top: 1px;
  position: relative;
}

.cf-checkbox__input:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.cf-checkbox__input:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 6px;
  width: 5px; height: 9px;
  border: 2px solid white;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* Submit button */
.cf-submit {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  border: none;
  cursor: pointer;
  transition: background .22s, transform .18s, box-shadow .22s;
  position: relative;
  overflow: hidden;
}

.cf-submit:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 8px 28px rgba(29,111,219,.45);
}

.cf-submit:active { transform: scale(0.98); }

/* Submit ripple */
.cf-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .3s;
}

.cf-submit.loading {
  pointer-events: none;
  background: #1558b0;
}

/* Success state */
.cf-form.is-success .cf-submit {
  background: #1e7e34;
  pointer-events: none;
}

.cf-form.is-success .cf-submit::before {
  content: '✓ ';
}

/* ─── MAP + INFO CARD ────────────────────────── */
.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s var(--ease-out-expo) .14s,
              transform .85s var(--ease-out-expo) .14s;
}

.contact-info-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Map */
.contact-map {
  flex: 1;
  min-height: 260px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--lt-border);
  position: relative;
  background: #e8e8ed;
}

.contact-map svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pulsing pin */
.map-pin-pulse {
  animation: pinPulse 2.2s ease-out infinite;
  transform-origin: 50% 50%;
}

@keyframes pinPulse {
  0%   { opacity: .7; transform: scale(1); }
  60%  { opacity: 0;  transform: scale(2.4); }
  100% { opacity: 0;  transform: scale(2.4); }
}

/* Info list */
.contact-info-list {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ci-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ci-row__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(29,111,219,.1);
  border: 1px solid rgba(29,111,219,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ci-row__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lt-muted);
  margin-bottom: 3px;
}

.ci-row__value {
  font-size: 15px;
  font-weight: 500;
  color: var(--lt-text);
  line-height: 1.4;
  text-decoration: none;
  transition: color .18s;
}

a.ci-row__value:hover { color: var(--color-accent); }

/* ─── CONTACT METHOD CARDS ───────────────────── */
.contact-methods {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 120px;
  position: relative;
  z-index: 2;
}

.contact-methods__title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--lt-text);
  text-align: center;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}

.contact-methods__title.in-view { opacity: 1; transform: none; }

.cm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cm-card {
  background: var(--lt-surface);
  border-radius: 20px;
  padding: 28px 24px 24px;
  border: 1px solid var(--lt-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .3s, transform .3s var(--ease-out-expo), box-shadow .3s;
  opacity: 0;
  transform: translateY(24px);
}

.cm-card.in-view {
  animation: cmEnter .65s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--cm-delay,0) * 1ms);
}

@keyframes cmEnter { to { opacity: 1; transform: translateY(0); } }

.cm-card:hover {
  border-color: var(--lt-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--lt-shadow-hover);
}

.cm-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--lt-text);
  line-height: 1.3;
}

.cm-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt-muted);
  flex: 1;
}

.cm-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap .2s;
}

.cm-card:hover .cm-card__link { gap: 9px; }

/* ─── FOOTER — stays dark ────────────────────── */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 48px 24px 36px;
  position: relative;
  z-index: 2;
}

.site-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 40px;
  align-items: start;
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  text-decoration: none;
  margin-bottom: 14px;
}

.footer-brand__logo svg {
  flex-shrink: 0;
}

.footer-brand__wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer-brand__tagline {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-links__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 8px;
}

.footer-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color .18s;
  white-space: nowrap;
}

.footer-links a:hover { color: var(--color-white); }

/* Brief highlight when a service link auto-fills the form type */
.cf-field.is-prefilled {
  animation: prefilledPulse 1.4s var(--ease-out-expo);
}
@keyframes prefilledPulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 111, 219, 0.45); }
  30%  { box-shadow: 0 0 0 6px rgba(29, 111, 219, 0.20); }
  100% { box-shadow: 0 0 0 0 rgba(29, 111, 219, 0); }
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.footer-social__label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 2px;
}

.footer-social__icons {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, transform .18s;
}

.social-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-2px);
}

.site-footer__bottom {
  max-width: 1140px;
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

.site-footer__bottom a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .18s;
}

.site-footer__bottom a:hover { color: rgba(255,255,255,.7); }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 960px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cm-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .footer-brand { grid-column: 1 / -1; }
  .footer-social { align-items: flex-start; }
}

@media (max-width: 600px) {
  .contact__intro { padding: 80px 24px 52px; }
  .contact-form-card { padding: 32px 24px 28px; }
  .cm-grid { grid-template-columns: 1fr; }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-links a {
    display: block;
    padding: 8px 0;     /* tap area */
  }

  .social-btn { width: 44px; height: 44px; }  /* WCAG min touch target */

  .footer-social { align-items: flex-start; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}