/* ============================================================
   LAMGroup Criminal DE — Design Tokens
   v4 · Brand-first cinematic (Manrope, brand blue + yellow)
   ============================================================ */

:root {
  /* —— LAMGroup brand palette —— */
  --brand:       #3757EA;
  --brand-600:   #2942cc;
  --brand-50:    #eef1ff;
  --accent:      #FFE94A;          /* yellow — use boldly, not as decor */
  --accent-600:  #f5d800;

  --ink:         #0a0e1a;          /* navy ink */
  --ink-2:       #141a2e;          /* deeper layer */
  --paper:       #f7f5f0;          /* warm off-white */

  --fg:          #f3eee5;          /* text on dark */
  --fg-70:       rgba(243, 238, 229, .72);
  --fg-45:       rgba(243, 238, 229, .45);
  --fg-25:       rgba(243, 238, 229, .22);
  --rule:        rgba(243, 238, 229, .14);
  --rule-strong: rgba(243, 238, 229, .28);

  --danger:      #e0344b;
  --success:     #16a373;

  /* —— Typography — single sans (Manrope) + mono utility —— */
  --font-sans: 'Manrope', 'Manrope-fallback', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — calibrated for 100dvh fit */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);   /* 36 → 68 */
  --fs-h2:      clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --fs-lead:    clamp(.95rem, .85rem + .35vw, 1.0625rem);  /* 15 → 17 */
  --fs-body:    1rem;
  --fs-sm:      .8125rem;          /* 13 */
  --fs-xs:      .75rem;            /* 12 */
  --fs-cap:     .6875rem;          /* 11 */
  --fs-mini:    .625rem;           /* 10 */

  /* Tight line-heights for big text */
  --lh-display: .92;               /* H1 — щільно */
  --lh-h2:      1.02;
  --lh-snug:    1.25;
  --lh-body:    1.5;

  /* —— Spacing scale —— */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;

  --container: 1440px;
  --container-pad: clamp(1.25rem, .75rem + 2.5vw, 4rem);

  /* —— Safe-area & viewport tokens —— */
  --nav-h: 64px;
  --m-bar-h: 56px;
  --hero-h: 100dvh;

  /* —— Motion —— */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .18s;
  --dur: .32s;
}

/* —— Base —— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: var(--lh-display);
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--brand); color: #fff; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ EXTRACTED FROM INDEX.HTML <style> ============ */
/* ============================================================
   LAMGroup Criminal DE — v4 brand-first cinematic
   ============================================================
   [✓] 01 Hero
   [✓] 02 Services (12 cards · slider)
   [✓] 03 Why us (brand-blue panel · 4 cards)
   [✓] 04 Cases (40 cases · filter + load more)
   [✓] 05 Reviews (20 reviews · dark · slider)
   [✓] 06 Pricing (4-plan comparison table · paper)
   [✓] 07 Team (3 lawyers · vertical cards)
   [✓] 08 FAQ (10 questions · accordion)
   [✓] 09 CTA band + Contact form + Offices + Footer
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   09a — CTA BAND · yellow accent strip between FAQ and Contact
   ───────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--accent);
  color: var(--ink);
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0;
}
.cta-band__row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--s-6);
}
.cta-band__title {
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  max-width: 32ch;
}
.cta-band__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  border-radius: 4px;
  transition: background var(--dur), transform var(--dur);
  white-space: nowrap;
}
.cta-band__btn:hover { background: var(--ink-2); transform: translateY(-1px); }
.cta-band__btn svg { width: 14px; height: 14px; }


/* ─────────────────────────────────────────────────────────────
   09b — CONTACT · split layout: dark info panel (left) + form (right)
   ───────────────────────────────────────────────────────────── */
.contact {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(10, 14, 26, .08);
  border: 1px solid rgba(10, 14, 26, .08);
  border-radius: 8px;
  overflow: hidden;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* LEFT: dark ink panel — contacts + urgency */
.contact__info {
  background: var(--ink);
  color: var(--fg);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: flex; flex-direction: column;
  gap: var(--s-6);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact__info::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 50% at 0% 100%, rgba(55, 87, 234, .22), transparent 70%);
}

.contact__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent);
}
.contact__title {
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--fg);
  margin: 0;
}
.contact__title em { font-style: normal; color: var(--accent); }
.contact__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-70);
  line-height: 1.6;
}

/* Quick contact channels */
.contact__channels {
  display: flex; flex-direction: column;
  gap: 10px;
}
.contact__channel {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(243, 238, 229, .04);
  border: 1px solid rgba(243, 238, 229, .12);
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
.contact__channel:hover { background: rgba(243, 238, 229, .08); border-color: rgba(255, 233, 74, .4); transform: translateX(2px); }
.contact__channel-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(55, 87, 234, .22);
  border-radius: 50%;
  color: var(--accent);
}
.contact__channel-icon svg { width: 16px; height: 16px; }
.contact__channel-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.contact__channel-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-45);
}
.contact__channel-value {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.005em;
}
.contact__channel-arrow {
  flex-shrink: 0;
  color: var(--fg-45);
  transition: color var(--dur), transform var(--dur);
}
.contact__channel-arrow svg { width: 14px; height: 14px; }
.contact__channel:hover .contact__channel-arrow { color: var(--accent); transform: translateX(2px); }

/* Urgency note inside info panel */
.contact__urgent {
  margin-top: auto;
  padding: 14px 16px;
  background: rgba(224, 52, 75, .14);
  border-left: 3px solid var(--danger);
  border-radius: 0 4px 4px 0;
}
.contact__urgent-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff7a8a;
  margin-bottom: 4px;
}
.contact__urgent-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg);
  line-height: 1.5;
}
.contact__urgent-text strong { color: #fff; }

/* RIGHT: form panel */
.cfm {
  background: #fff;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.cfm-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 600px) { .cfm-row { grid-template-columns: 1fr 1fr; } }

.cfm-field { display: flex; flex-direction: column; gap: 6px; }
.cfm label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.cfm input,
.cfm select,
.cfm textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(10, 14, 26, .12);
  border-radius: 4px;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--dur), background var(--dur);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.cfm input:focus,
.cfm select:focus,
.cfm textarea:focus { border-color: var(--brand); background-color: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(55, 87, 234, .14); }
/* Re-assert no-repeat для select на focus (background shorthand вище міг би скинути) */
.cfm select:focus {
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

/* Invalid state — після спроби submit або blur */
.cfm input.is-invalid,
.cfm select.is-invalid,
.cfm textarea.is-invalid {
  border-color: var(--danger);
  background: rgba(224, 52, 75, .04);
}
.cfm input.is-invalid:focus,
.cfm select.is-invalid:focus,
.cfm textarea.is-invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(224, 52, 75, .14);
}
.cfm-error {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--danger);
  margin-top: 4px;
}
.cfm input::placeholder,
.cfm textarea::placeholder { color: rgba(10, 14, 26, .35); }
.cfm textarea { min-height: 110px; resize: vertical; }
.cfm select {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a0e1a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
  transition: border-color var(--dur), background var(--dur), background-position var(--dur);
}
/* Стрілка обертається при відкритті (focus) — без стрибків */
.cfm select:focus {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%233757EA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

#other-city-wrap { display: none; margin-top: 8px; }

/* Urgent checkbox */
.cfm-urgent {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(224, 52, 75, .07);
  border-left: 3px solid var(--danger);
  border-radius: 0 4px 4px 0;
}
/* Custom checkbox — кросбраузерний візуал з SVG-галочкою */
.cfm-urgent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  flex-shrink: 0;
  border: 2px solid var(--danger);
  border-radius: 4px;
  background: #fff center / 14px no-repeat;
  cursor: pointer;
  transition: background-color var(--dur), border-color var(--dur);
  padding: 0;
}
.cfm-urgent input[type="checkbox"]:hover { border-color: #b91c1c; }
.cfm-urgent input[type="checkbox"]:checked {
  background-color: var(--danger);
  border-color: var(--danger);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.cfm-urgent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}
.cfm-urgent label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  line-height: 1.5;
}
.cfm-urgent label strong { color: var(--danger); font-weight: 700; }

.cfm-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 16px 28px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: .02em;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur), transform var(--dur);
  box-shadow: 0 14px 32px -10px rgba(55, 87, 234, .45);
}
.cfm-submit:hover { background: var(--brand-600); transform: translateY(-1px); }
.cfm-submit svg { width: 16px; height: 16px; }

.cfm-note {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: rgba(10, 14, 26, .55);
  text-align: center;
  margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   09c — OFFICES · brand-blue panel · 2 cards
   ───────────────────────────────────────────────────────────── */
.offices {
  background: var(--brand);
  color: #fff;
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.offices::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 60% at 90% 0%, rgba(255, 233, 74, .1), transparent 70%);
}

.offices__head {
  display: flex; flex-direction: column;
  gap: clamp(1rem, .75rem + 1vw, 1.5rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.offices__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.offices__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent);
}
.offices__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0;
}
.offices__title em { font-style: normal; color: var(--accent); }

.offices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 768px) { .offices__grid { grid-template-columns: 1fr 1fr; } }

.office {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  padding: var(--s-8) var(--s-6);
  transition: background var(--dur), border-color var(--dur);
}
.office:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 233, 74, .35); }

.office__flag {
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  padding: 4px 9px;
  border: 1px solid rgba(255, 233, 74, .4);
  border-radius: 3px;
  margin-bottom: var(--s-4);
}
.office__city {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 4px 0;
}
.office__role {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-5);
}

.office__list {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: var(--s-5);
}
.office__row {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .75);
  line-height: 1.5;
}
.office__row svg {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--accent);
  margin-top: 4px;
}
.office__row a { color: rgba(255, 233, 74, .9); transition: color var(--dur); font-weight: 500; }
.office__row a:hover { color: var(--accent); }
.office__row small { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, .45); margin-top: 2px; }

.office__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  border-radius: 4px;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.office__cta--solid {
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--accent);
}
.office__cta--solid:hover { background: #fff; border-color: #fff; }
.office__cta--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(255, 233, 74, .45);
}
.office__cta--ghost:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.office__cta svg { width: 12px; height: 12px; }

.offices__note {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: rgba(255, 233, 74, .08);
  border: 1px solid rgba(255, 233, 74, .2);
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .8);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.offices__note svg { color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────
   09d — FOOTER · dark · multi-column
   ───────────────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--fg);
  padding: clamp(3rem, 2.5rem + 2vw, 5rem) 0 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(55, 87, 234, .14), transparent 70%);
}

.footer__top {
  display: grid;
  /* Mobile: 2 колонки — Сторінка | Послуги поруч, Brand і Contacts по всій ширині */
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, .5rem + 2vw, 2rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.footer__top > .footer__brand,
.footer__top > div:last-child {
  grid-column: 1 / -1; /* Brand і Contacts займають всю ширину на мобілці */
}
@media (min-width: 640px) {
  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--s-8);
  }
  .footer__top > .footer__brand,
  .footer__top > div:last-child {
    grid-column: auto; /* На десктопі — звичайна 4-col розкладка */
  }
}

/* Brand block */
.footer__brand { display: flex; flex-direction: column; gap: var(--s-4); }
.footer__logo {
  display: inline-flex;
  height: 24px;
  color: var(--fg);
}
.footer__logo svg { height: 100%; width: auto; }
.footer__tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-70);
  max-width: 32ch;
}
.footer__quick {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-2);
}
.footer__quick a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(243, 238, 229, .06);
  border: 1px solid rgba(243, 238, 229, .14);
  color: var(--fg);
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.footer__quick a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.footer__quick svg { width: 16px; height: 16px; }

/* Column headers */
.footer__col-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4) 0;
  position: relative;
  padding-bottom: 8px;
}
.footer__col-title::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 24px; height: 2px; background: var(--accent);
}

.footer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer__list a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-70);
  transition: color var(--dur), transform var(--dur);
  display: inline-block;
}
.footer__list a:hover { color: var(--accent); transform: translateX(2px); }

/* Contact column rows */
.footer__contact-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-70);
  line-height: 1.5;
}
.footer__contact-row svg {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--accent);
  margin-top: 4px;
}
.footer__contact-row a { color: var(--fg); transition: color var(--dur); font-weight: 500; }
.footer__contact-row a:hover { color: var(--accent); }
.footer__contact-row small { display: block; color: var(--fg-45); font-size: var(--fs-xs); margin-top: 2px; }

/* Bottom bar */
.footer__bottom {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .footer__bottom {
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
  }
  .footer__bottom > :last-child { text-align: right; }
}
.footer__copy {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-45);
  line-height: 1.55;
  margin: 0;
}
.footer__bottom-links {
  display: flex; flex-wrap: wrap;
  gap: 8px var(--s-5);
  list-style: none; margin: 0; padding: 0;
  justify-content: center;
}
.footer__bottom-links a {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-70);
  transition: color var(--dur);
}
.footer__bottom-links a:hover { color: var(--accent); }

.footer__credit {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-45);
}
.footer__credit a {
  color: var(--fg);
  font-weight: 700;
  transition: color var(--dur);
  border-bottom: 1px solid var(--fg-45);
  padding-bottom: 1px;
}
.footer__credit a:hover { color: var(--accent); border-color: var(--accent); }


/* ─────────────────────────────────────────────────────────────
   08 — FAQ · paper · 2-col layout · accordion
   ───────────────────────────────────────────────────────────── */
.faq {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
}
.faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* LEFT column */
.faq__aside { display: flex; flex-direction: column; gap: var(--s-4); }
.faq__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
}
.faq__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--brand);
}
.faq__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
}
.faq__title em { font-style: normal; color: var(--brand); }
.faq__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(10, 14, 26, .65);
  max-width: 32ch;
}
.faq__call {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 13px 22px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand);
  border: 1px solid rgba(55, 87, 234, .35);
  border-radius: 999px;
  transition: background var(--dur), color var(--dur);
  margin-top: 4px;
}
.faq__call:hover { background: var(--brand); color: #fff; }
.faq__call svg { width: 14px; height: 14px; }

.faq__urgent {
  margin-top: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: rgba(224, 52, 75, .07);
  border-left: 3px solid var(--danger);
  border-radius: 0 6px 6px 0;
}
.faq__urgent-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 6px;
}
.faq__urgent-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
}
.faq__urgent-text strong { color: var(--danger); }

/* RIGHT column — accordion */
.faq__list {
  border-top: 1px solid rgba(10, 14, 26, .12);
}
.faq__item {
  border-bottom: 1px solid rgba(10, 14, 26, .12);
}
.faq__item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: clamp(1rem, .9rem + .3vw, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color var(--dur);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand); }

.faq__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 14, 26, .18);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur);
}
.faq__icon svg { width: 12px; height: 12px; }
.faq__item summary:hover .faq__icon {
  border-color: var(--brand);
  color: var(--brand);
}
.faq__item[open] .faq__icon {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: rotate(45deg);
}
/* На open-стані: hover не повинен ховати «×» */
.faq__item[open] summary:hover .faq__icon {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

/* Smooth open/close — grid-rows trick */
.faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq__item[open] .faq__answer-wrap { grid-template-rows: 1fr; }
.faq__answer-wrap > div { overflow: hidden; }

.faq__answer {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(10, 14, 26, .72);
  padding: var(--s-4) 56px var(--s-6) 0;
  margin: 0;
}
.faq__answer strong { color: var(--ink); font-weight: 700; }


/* ─────────────────────────────────────────────────────────────
   06 — PRICING · paper · 4-plan comparison table
   ───────────────────────────────────────────────────────────── */
.pricing {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  position: relative;
}

.pricing__head {
  text-align: center;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.pricing__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}
.pricing__label::before,
.pricing__label::after {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--brand);
}
.pricing__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
}
.pricing__title em { font-style: normal; color: var(--brand); }
.pricing__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: rgba(10, 14, 26, .65);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* Table wrap — desktop має внутрішні відступи; mobile тільки top для badge */
.ptable-wrap {
  overflow-x: auto;
  margin: 0 calc(var(--container-pad) * -1);
  padding: 18px var(--container-pad) 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .ptable-wrap { padding: 14px 0 0; }
}
.ptable {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.ptable th, .ptable td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(10, 14, 26, .1);
}

/* Header row */
.ptable thead th {
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  text-align: center;
  padding: 20px 16px;
  border-top: 1px solid rgba(10, 14, 26, .1);
  position: relative;
}
.ptable thead th:first-child {
  text-align: left;
  background: var(--paper);
  border-top: 0;
  color: rgba(10, 14, 26, .45);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ptable thead th small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(10, 14, 26, .55);
  margin-top: 4px;
  letter-spacing: .04em;
  text-transform: none;
}
.ptable thead th.is-featured {
  background: var(--brand);
  color: #fff;
  border-top-color: var(--brand);
  padding-top: 28px;
  position: relative;
}
.ptable thead th.is-featured::before {
  content: "POPULAR";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 4;
}
.ptable thead th.is-featured small { color: rgba(255, 255, 255, .85); }

/* Body cells */
.ptable tbody td {
  text-align: center;
  color: var(--ink);
  background: #fff;
}
.ptable tbody td:first-child {
  text-align: left;
  background: var(--paper);
  color: rgba(10, 14, 26, .75);
  font-weight: 500;
  font-size: 90%;
  padding-right: 10px;
  padding-left: 14px;
}
.ptable thead th:first-child {
  padding-right: 10px;
  padding-left: 14px;
}
.ptable tbody td.is-featured {
  background: rgba(55, 87, 234, .06);
  border-left: 1px solid rgba(55, 87, 234, .25);
  border-right: 1px solid rgba(55, 87, 234, .25);
}

/* Sticky first column on mobile */
@media (max-width: 768px) {
  .ptable tbody td:first-child,
  .ptable thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 rgba(10, 14, 26, .08);
    min-width: 144px;
    max-width: 144px;
    font-size: 11px;
  }
}

/* Price row */
.ptable__price-row td {
  padding: 22px 16px;
}
.ptable__price-row td:first-child {
  font-size: var(--fs-cap);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(10, 14, 26, .45);
  font-weight: 700;
}
.ptable__price {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--ink);
  display: block;
  line-height: 1.1;
  white-space: nowrap;
}
.ptable__price-row td.is-featured .ptable__price { color: var(--brand); }
.ptable__price-row td small {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(10, 14, 26, .45);
  margin-top: 4px;
  font-weight: 400;
}

/* Plan rows */
.ptable__plan-row td:not(:first-child) {
  font-size: var(--fs-xs);
  color: rgba(10, 14, 26, .65);
  font-style: italic;
}
.ptable__plan-row td:first-child {
  font-size: var(--fs-cap);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(10, 14, 26, .45);
  font-weight: 700;
}

/* Group header rows */
.ptable__group td {
  padding-top: 26px;
  padding-bottom: 10px;
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--paper) !important;
  border-bottom: 1px solid rgba(10, 14, 26, .12);
  border-top: 1px solid rgba(10, 14, 26, .06);
}

/* Check / dash */
.ptable__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(22, 163, 115, .14);
  color: var(--success);
}
.ptable__check svg { width: 12px; height: 12px; }
.ptable__dash { color: rgba(10, 14, 26, .3); font-weight: 400; }

/* CTA row */
.ptable__cta-row td {
  padding: 22px 16px;
  border-bottom: 0;
}
.ptable__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 1px solid rgba(10, 14, 26, .25);
  border-radius: 4px;
  color: var(--ink);
  transition: background var(--dur), border-color var(--dur), color var(--dur);
  white-space: nowrap;
}
.ptable__cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ptable__cta.is-featured {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.ptable__cta.is-featured:hover { background: var(--brand-600); border-color: var(--brand-600); }

.pricing__note {
  margin-top: clamp(1.5rem, 1rem + 1vw, 2rem);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: rgba(10, 14, 26, .55);
}

/* Mobile compactness */
@media (max-width: 640px) {
  .ptable { min-width: 580px; font-size: 12px; }
  .ptable th, .ptable td { padding: 10px 12px; }
  .ptable thead th { font-size: 14px; padding: 16px 12px; }
  .ptable__price-row td { padding: 16px 12px; }
  .ptable__price { font-size: 1.125rem; }
  .ptable__cta-row td { padding: 16px 10px; }
  .ptable__cta { padding: 9px 14px; font-size: 12px; }
}

/* Group headers — текст залишається у viewport при свайпі, фон їде з таблицею */
@media (max-width: 768px) {
  .ptable__group td { padding-left: 0; padding-right: 0; }
  .ptable__group td > span {
    display: inline-block;
    position: sticky;
    left: var(--container-pad);
    padding: 0 12px;
  }
}


/* ─────────────────────────────────────────────────────────────
   07 — TEAM · dark · ExportLex pattern (photo/init + bio + tags)
   ───────────────────────────────────────────────────────────── */
.team {
  background: var(--ink);
  color: var(--fg);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  position: relative;
}

.team__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.team__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.team__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent);
}
.team__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--fg);
  margin: 0;
}
.team__title em { font-style: normal; color: var(--accent); }

.team__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-70);
  line-height: 1.5;
  max-width: 36ch;
}

/* Header layout — title left, arrows right */
.team__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.team__nav {
  display: flex; gap: 10px;
  align-self: end;
}
.team__nav-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(243, 238, 229, .22);
  background: transparent;
  color: var(--fg);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur);
}
.team__nav-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.team__nav-btn:disabled { opacity: .25; cursor: not-allowed; }
@media (max-width: 640px) {
  .team__nav { gap: 6px; }
  .team__nav-btn { width: 36px; height: 36px; }
  .team__nav-btn svg { width: 14px; height: 14px; }
}

.team__head-text { display: flex; flex-direction: column; }
.team__sub { margin-top: var(--s-3); }

/* Slider track — only mobile/tablet < 768px */
.team__track-wrap {
  position: relative;
}
.team__track {
  display: flex;
  gap: clamp(1rem, .75rem + 1vw, 1.5rem);
}

@media (max-width: 767px) {
  .team__track-wrap {
    margin: 0 calc(var(--container-pad) * -1);
    padding: 4px 0 24px;
  }
  .team__track-wrap::before,
  .team__track-wrap::after {
    content: "";
    position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
    width: var(--container-pad);
  }
  .team__track-wrap::before { left: 0;  background: linear-gradient(90deg,  var(--ink), transparent); }
  .team__track-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

  .team__track {
    overflow-x: auto;
    scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scroll-padding-left: var(--container-pad);
    padding: 0 var(--container-pad);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }
  .team__track::-webkit-scrollbar { display: none; }
  .team__track .tc {
    flex: 0 0 auto;
    width: clamp(280px, 85vw, 380px);
    scroll-snap-align: start;
  }
}

/* Desktop ≥768px: тривимірна grid 1fr 1fr 1fr — без слайдера */
@media (min-width: 768px) {
  .team__track { display: grid; grid-template-columns: repeat(3, 1fr); }
  .team__nav { display: none; }
  .team__progress { display: none; }
}

/* Progress bar (mobile only) */
.team__progress {
  margin-top: var(--s-4);
  height: 2px;
  background: rgba(243, 238, 229, .12);
  border-radius: 2px;
  overflow: hidden;
  max-width: 240px;
}
.team__progress-bar {
  height: 100%;
  background: var(--accent);
  width: 30%;
  transition: width var(--dur), transform var(--dur);
}

/* Card — завжди вертикальна (фото зверху, контент знизу) */
.tc {
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background var(--dur) var(--ease), border-color var(--dur);
}
.tc:hover {
  background: var(--ink-2);
  border-color: rgba(255, 233, 74, .25);
}

/* Media — full-width portrait 4:5 */
.tc__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(55, 87, 234, .14), rgba(55, 87, 234, .03));
}
.tc__photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(100%) contrast(.95);
  transition: filter .5s var(--ease), transform .6s var(--ease);
  display: block;
}
.tc:hover .tc__photo {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.03);
}
.tc__init {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 80px);
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, rgba(55, 87, 234, .18), rgba(55, 87, 234, .04));
  position: relative;
}
.tc__init::after {
  content: "";
  position: absolute; inset: 12px;
  border: 1.5px dashed rgba(55, 87, 234, .3);
  border-radius: 10px;
  pointer-events: none;
}

/* Body wrapper — handles inner padding + vertical layout */
.tc__body {
  padding: 22px 22px 26px;
  display: flex; flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tc__name {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--fg);
  margin: 0;
  line-height: 1.15;
}
.tc__role {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: 4px;
  line-height: 1.3;
}
.tc__bio {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247, 244, 239, .55);
  margin-top: 12px;
}

.tc__tags {
  list-style: none; padding: 0; margin: 12px 0 18px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tc__tags li {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(55, 87, 234, .16);
  color: var(--brand);
  border-radius: 999px;
  line-height: 1.4;
}

.tc__contacts {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
}

/* Messenger icons row (Viber / WhatsApp / Telegram) */
.tc__msg {
  display: flex; gap: 8px;
}
.tc__msg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #fff;
  transition: transform var(--dur), opacity var(--dur), filter var(--dur);
}
.tc__msg-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.tc__msg-btn--viber    { background: transparent; padding: 0; }
.tc__msg-btn--viber img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.tc__msg-btn--whatsapp { background: #25D366; }
.tc__msg-btn--telegram { background: #0088CC; }

.tc__email {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(247, 244, 239, .65);
  transition: color var(--dur);
}
.tc__email:hover { color: var(--accent); }
.tc__email svg { color: var(--accent); flex-shrink: 0; }
.tcc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(247, 244, 239, .45);
  display: flex; align-items: center; gap: 8px;
}
.tcc-flag {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  padding: 2px 6px;
  background: rgba(255, 233, 74, .1);
  border-radius: 3px;
  min-width: 24px;
  text-align: center;
}
.tcc a {
  color: rgba(255, 255, 255, .82);
  transition: color var(--dur);
  font-weight: 500;
}
.tcc a:hover { color: var(--accent); }

.team__footer {
  text-align: center;
  margin-top: 24px;
}
.team__footer a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: opacity var(--dur);
}
.team__footer a:hover { opacity: .75; }
.team__footer svg { width: 14px; height: 14px; }


/* ─────────────────────────────────────────────────────────────
   05 — REVIEWS · dark · horizontal slider
   ───────────────────────────────────────────────────────────── */
.rev {
  background: var(--ink);
  color: var(--fg);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.rev::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(55, 87, 234, .18), transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(255, 233, 74, .06), transparent 70%);
}
.rev > .container { position: relative; z-index: 1; }

.rev__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.rev__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.rev__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent);
}

.rev__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--fg);
  margin: 0;
}
.rev__title em {
  font-style: normal;
  color: var(--accent);
}

.rev__nav {
  display: flex; gap: 10px;
  align-self: end;
}
.rev__nav-btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(243, 238, 229, .22);
  background: transparent;
  color: var(--fg);
  border-radius: 4px;
  transition: background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur);
}
.rev__nav-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.rev__nav-btn:disabled { opacity: .25; cursor: not-allowed; }
.rev__nav-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .rev__nav { gap: 6px; }
  .rev__nav-btn { width: 36px; height: 36px; }
  .rev__nav-btn svg { width: 14px; height: 14px; }
}

/* Track */
.rev__track-wrap {
  position: relative;
  margin: 0 calc(var(--container-pad) * -1);
  padding: 8px 0;
}
.rev__track-wrap::before,
.rev__track-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: var(--container-pad);
}
.rev__track-wrap::before { left: 0;  background: linear-gradient(90deg,  var(--ink), transparent); }
.rev__track-wrap::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.rev__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-padding-left: var(--container-pad);
  padding: 0 var(--container-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.rev__track::-webkit-scrollbar { display: none; }

/* Review card */
.rev__card {
  flex: 0 0 auto;
  width: clamp(280px, 85vw, 400px);
  scroll-snap-align: start;
  background: rgba(243, 238, 229, .04);
  border: 1px solid rgba(243, 238, 229, .12);
  border-radius: 4px;
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  transition: background var(--dur), border-color var(--dur);
}
.rev__card:hover {
  background: rgba(243, 238, 229, .06);
  border-color: rgba(255, 233, 74, .35);
}

.rev__stars {
  display: inline-flex; gap: 3px;
  color: var(--accent);
}
.rev__stars svg { width: 14px; height: 14px; }
.rev__stars svg.is-off { color: rgba(255, 233, 74, .22); }

.rev__quote {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-70);
  font-weight: 400;
}
.rev__quote::before {
  content: "“";
  font-family: Georgia, serif;
  font-size: 2.5rem;
  line-height: 0;
  color: var(--brand);
  vertical-align: -.5em;
  margin-right: 4px;
  opacity: .6;
}

.rev__author {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(243, 238, 229, .1);
  display: flex; align-items: center;
  gap: var(--s-3);
}
.rev__init {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(55, 87, 234, .2);
  border: 1px solid rgba(55, 87, 234, .4);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.rev__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rev__name {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg);
}
.rev__city {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-45);
}
.rev__badge {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 700;
  margin-top: 4px;
}

.rev__footnote {
  text-align: center;
  margin-top: clamp(1.5rem, 1rem + 1vw, 2rem);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-45);
}

/* Reviews progress bar */
.rev__progress {
  margin-top: var(--s-4);
  height: 2px;
  background: rgba(243, 238, 229, .12);
  border-radius: 2px;
  overflow: hidden;
  max-width: 240px;
}
.rev__progress-bar {
  height: 100%;
  background: var(--accent);
  width: 12%;
  transition: width var(--dur);
}


/* ─────────────────────────────────────────────────────────────
   04 — CASES · paper bg · paginated grid (6/page)
   ───────────────────────────────────────────────────────────── */
.cases {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  position: relative;
}

.cases__head {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.cases__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}
.cases__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--brand);
}

.cases__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
}
.cases__title em {
  font-style: normal;
  color: var(--brand);
}

/* Filter tabs (ExportLex pattern) */
.cases__filters {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-self: end;
}
.cf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(10, 14, 26, .65);
  background: transparent;
  border: 1px solid rgba(10, 14, 26, .15);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
  white-space: nowrap;
}
.cf:hover { color: var(--ink); border-color: rgba(10, 14, 26, .35); }
.cf.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.cf-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: .55;
  font-weight: 500;
}
.cf.is-on .cf-count { opacity: .7; color: var(--accent); }

/* Grid */
.cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 640px)  { .cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cases__grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
.cc {
  background: #fff;
  border: 1px solid rgba(10, 14, 26, .08);
  border-radius: 4px;
  padding: var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur), opacity var(--dur);
}
.cc:hover {
  border-color: var(--brand);
  box-shadow: 0 16px 32px -16px rgba(55, 87, 234, .22);
  transform: translateY(-2px);
}
.cc.is-hidden { display: none; }

.cc__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}
.cc__title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}
.cc__text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(10, 14, 26, .65);
}
.cc__out {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(10, 14, 26, .08);
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--success);
}
.cc__out svg { flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; }

/* Load more */
.cases__more-wrap {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-3);
}
.cases__more {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.cases__more:hover { background: var(--ink); color: #fff; }
.cases__more:disabled { opacity: .35; cursor: not-allowed; }
.cases__more svg { width: 14px; height: 14px; transition: transform var(--dur); }
.cases__more:hover svg { transform: translateY(2px); }
.cases__count {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: rgba(10, 14, 26, .55);
  margin: 0;
  text-align: center;
}

.cases__empty {
  text-align: center;
  padding: var(--s-12) 0;
  color: rgba(10, 14, 26, .55);
  font-family: var(--font-sans);
}


/* ─────────────────────────────────────────────────────────────
   03 — WHY US · brand-blue panel · 4 cards
   ───────────────────────────────────────────────────────────── */
.why {
  position: relative;
  background: var(--brand);
  color: #fff;
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  overflow: hidden;
  isolation: isolate;
}
/* subtle texture: grid pattern + radial brand glow */
.why::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 60% at 90% 0%, rgba(255, 233, 74, .12), transparent 70%),
    radial-gradient(ellipse 80% 80% at 0% 100%, rgba(10, 14, 26, .35), transparent 70%);
}

.why__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 900px) {
  .why__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-10); }
}
.why__head-text { max-width: none; }
.why__title { max-width: 18ch; }
@media (min-width: 1200px) { .why__title { max-width: 22ch; } }
.why__head-note {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  max-width: 44ch;
}

.why__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.why__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--accent);
}

.why__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0;
}
.why__title em {
  font-style: normal;
  color: var(--accent);
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }

.why__card {
  padding: var(--s-6) 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transition: background var(--dur);
}

/* Vertical hairline between cards on multi-col layouts */
@media (min-width: 640px) {
  .why__card {
    padding: var(--s-8) var(--s-5);
    border-left: 1px solid rgba(255, 255, 255, .18);
  }
  .why__card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .why__card:nth-child(2n)   { padding-right: 0; }
  .why__card { transition: border-color var(--dur); }
  .why__card:hover { border-top-color: var(--accent); }
  .why__card:hover .why__card-num { -webkit-text-stroke-color: var(--accent); }
}
@media (min-width: 980px) {
  .why__card {
    border-left: 1px solid rgba(255, 255, 255, .18);
    padding: var(--s-8) var(--s-5);
  }
  .why__card:nth-child(2n+1),
  .why__card:nth-child(2n) {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
    border-left: 1px solid rgba(255, 255, 255, .18);
  }
  .why__card:first-child { border-left: 0; padding-left: 0; }
  .why__card:last-child  { padding-right: 0; }
}

.why__card-num {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 2rem + 2vw, 4.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35);
  margin-bottom: var(--s-3);
}
.why__card-title {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #fff;
}
.why__card-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  max-width: 32ch;
}


/* ─────────────────────────────────────────────────────────────
   02 — SERVICES · paper bg · horizontal slider
   ───────────────────────────────────────────────────────────── */
.svc {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(3rem, 2.5rem + 3vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}

.svc__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: end;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
@media (min-width: 900px) {
  .svc__head { grid-template-columns: 1fr auto; }
}

.svc__head-text { max-width: 60ch; }

.svc__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}
.svc__label::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--brand);
}

.svc__title {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 var(--s-4) 0;
}
.svc__title em {
  font-style: normal;
  color: var(--brand);
}
.svc__sub {
  font-family: var(--font-sans);
  font-size: clamp(.9375rem, .85rem + .35vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(10, 14, 26, .65);
}

/* Arrow controls */
.svc__nav {
  display: flex; gap: 10px;
  align-self: end;
}
.svc__nav-btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(10, 14, 26, .15);
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  transition: background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur);
}
.svc__nav-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.svc__nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.svc__nav-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .svc__nav { display: none; } }

/* Slider track */
.svc__track-wrap {
  position: relative;
  margin: 0 calc(var(--container-pad) * -1);
  padding: 8px 0 24px;
}
/* edge fades */
.svc__track-wrap::before,
.svc__track-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: var(--container-pad);
}
.svc__track-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.svc__track-wrap::after  { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }

.svc__track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-padding-left: var(--container-pad);
  padding: 8px var(--container-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.svc__track::-webkit-scrollbar { display: none; }

/* Card */
.svc__card {
  flex: 0 0 auto;
  width: clamp(280px, 85vw, 360px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(10, 14, 26, .08);
  border-radius: 4px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
  position: relative;
}
.svc__card:hover {
  border-color: var(--brand);
  box-shadow: 0 20px 40px -20px rgba(55, 87, 234, .25);
  transform: translateY(-2px);
}

.svc__card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.svc__card-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(55, 87, 234, .08);
  border-radius: 4px;
  color: var(--brand);
  flex-shrink: 0;
}
.svc__card-icon svg { width: 22px; height: 22px; }
.svc__card-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: .14em;
  color: rgba(10, 14, 26, .35);
  font-weight: 600;
  margin-top: 6px;
}

.svc__card-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.svc__card-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.svc__card-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(10, 14, 26, .65);
}

.svc__card-divider {
  height: 1px; background: rgba(10, 14, 26, .08);
  margin: var(--s-3) 0 var(--s-2);
}

.svc__card-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.svc__card-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(10, 14, 26, .82);
}
.svc__card-list li::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--brand);
  margin-top: 10px;
  flex-shrink: 0;
}

.svc__card-cta {
  margin-top: auto;
  padding-top: var(--s-4);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand);
  letter-spacing: .02em;
  align-self: flex-start;
  position: relative;
}
.svc__card-cta::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.svc__card:hover .svc__card-cta::after,
.svc__card-cta:hover::after { transform: scaleX(1); transform-origin: left; }
.svc__card-cta svg { width: 14px; height: 14px; transition: transform var(--dur); }
.svc__card:hover .svc__card-cta svg { transform: translateX(3px); }

/* Progress bar (slider position) */
.svc__progress {
  margin-top: var(--s-4);
  height: 2px;
  background: rgba(10, 14, 26, .08);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  max-width: 240px;
}
.svc__progress-bar {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--brand);
  width: 12%;
  transition: width var(--dur), transform var(--dur);
}


/* ─────────────────────────────────────────────────────────────
   HERO WRAPPER — 100dvh strict, includes nav inside
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: var(--hero-h);
  min-height: 640px;
  background: var(--ink);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: var(--nav-h) 1fr auto;
}

/* ── Background photo with brand-blue duotone (img + overlay) ───────────── */
.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg,
      rgba(10, 14, 26, .95) 0%,
      rgba(10, 14, 26, .82) 30%,
      rgba(10, 14, 26, .55) 65%,
      rgba(10, 14, 26, .25) 100%),
    linear-gradient(180deg,
      transparent 60%,
      rgba(10, 14, 26, .85) 100%);
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(55, 87, 234, .28), transparent 70%);
  mix-blend-mode: screen;
}

/* Film grain */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── Giant outlined section-number behind H1 (signature) ── */
.hero__chapter-bg {
  position: absolute;
  right: clamp(-2rem, -5vw, 1rem);
  bottom: clamp(2rem, 5vh, 6rem);
  z-index: -1;
  font-family: var(--font-sans);
  font-size: clamp(14rem, 32vw, 28rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule-strong);
  user-select: none;
  pointer-events: none;
  opacity: .9;
}


/* ─────────────────────────────────────────────────────────────
   NAV (in hero grid row 1)
   ───────────────────────────────────────────────────────────── */
.nav {
  grid-row: 1;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--rule);
  background: rgba(10, 14, 26, .55);
  backdrop-filter: blur(8px);
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
}
.nav__logo {
  display: inline-flex;
  color: var(--fg);
  height: 22px;
}
.nav__logo svg { height: 100%; width: auto; color: var(--fg); }
.nav__logo-sep {
  display: none;
  margin-left: var(--s-3); padding-left: var(--s-3);
  border-left: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-45);
  align-self: center;
}
@media (min-width: 600px) { .nav__logo-sep { display: inline-flex; align-items: center; } }

.nav__links {
  display: none;
  list-style: none; margin: 0; padding: 0;
  gap: var(--s-8);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.nav__links a {
  color: var(--fg-70);
  transition: color var(--dur-fast);
  position: relative;
  padding-bottom: 2px;
}
.nav__links a:hover { color: var(--fg); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--brand);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 980px) { .nav__links { display: flex; } }

.nav__phone {
  display: inline-flex;
  align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--fg);
  padding: 9px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  transition: background var(--dur), border-color var(--dur);
  white-space: nowrap;
}
.nav__phone:hover { background: var(--brand); border-color: var(--brand); }
.nav__phone svg { color: var(--accent); width: 12px; height: 12px; }
/* Mobile: компактна версія — тільки іконка телефону */
@media (max-width: 640px) {
  .nav__phone {
    padding: 8px;
    width: 38px; height: 38px;
    justify-content: center;
  }
  .nav__phone-text { display: none; }
  .nav__phone svg { width: 16px; height: 16px; }
}


/* ─────────────────────────────────────────────────────────────
   HERO MAIN (grid row 2) — copy bottom-anchored
   ───────────────────────────────────────────────────────────── */
.hero__main {
  grid-row: 2;
  position: relative;
  display: grid;
  align-content: end;
  gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  padding-top: clamp(2rem, 4vh, 5rem);
  padding-bottom: clamp(1.5rem, 2.5vh, 3rem);
}

/* Eyebrow with brand-blue stroke + yellow dot */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg);
}
.hero__eyebrow::before {
  content: "";
  display: block;
  width: 28px; height: 2px;
  background: var(--brand);
}
.hero__eyebrow-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  margin-left: 4px;
  animation: y-pulse 2.4s infinite;
}
@keyframes y-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 233, 74, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 233, 74, 0); }
}

/* H1 — Manrope ExtraBold, tight */
.hero__h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -.035em;
  color: var(--fg);
  max-width: 17ch;
  text-wrap: balance;
}
.hero__h1 mark {
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}

/* Lead */
.hero__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-70);
  max-width: 54ch;
}

/* CTA row */
.hero__cta {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
}
.btn-brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  border-radius: 4px;
  transition: background var(--dur), transform var(--dur);
  box-shadow: 0 14px 32px -10px rgba(55, 87, 234, .55);
}
.btn-brand:hover { background: var(--brand-600); transform: translateY(-1px); }
.btn-brand svg { width: 14px; height: 14px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  border-radius: 4px;
  transition: background var(--dur), border-color var(--dur);
}
.btn-ghost:hover { background: rgba(243,238,229,.06); border-color: var(--fg-45); }
.btn-ghost svg { width: 14px; height: 14px; color: var(--accent); }


/* ─────────────────────────────────────────────────────────────
   HERO BOTTOM (grid row 3) — compact stats + chapter marker
   ───────────────────────────────────────────────────────────── */
.hero__bottom {
  grid-row: 3;
  position: relative;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: stretch;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--s-5);
  border-left: 1px solid var(--rule);
  font-family: var(--font-sans);
}
.hero__stat:first-child { padding-left: 0; border-left: 0; }
.hero__stat-num {
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -.03em;
  line-height: 1;
}
.hero__stat-num em {
  font-style: normal;
  color: var(--accent);
  font-weight: 800;
}
.hero__stat-label {
  font-size: var(--fs-mini);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-45);
  font-weight: 600;
  line-height: 1.35;
}

.hero__chapter-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-45);
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.hero__chapter-tag strong {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-cap);
  font-family: var(--font-sans);
}


/* ─────────────────────────────────────────────────────────────
   Top-right rail — compact metadata (desktop only)
   ───────────────────────────────────────────────────────────── */
.hero__rail {
  position: absolute;
  top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3rem));
  right: var(--container-pad);
  display: none;
  flex-direction: column;
  gap: var(--s-3);
  z-index: 5;
}
.hero__rail-item {
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
}
.hero__rail-key {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--fg-45);
}
.hero__rail-val {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: .02em;
}
@media (min-width: 1100px) { .hero__rail { display: flex; } }


/* ─────────────────────────────────────────────────────────────
   Mobile / safe-area tweaks
   ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero__h1 { max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  .hero { min-height: 560px; }
  .nav__logo { height: 18px; }
  .hero__chapter-bg { font-size: 11rem; opacity: .25; right: -1rem; bottom: 30%; }
  .hero__bg::before {
    background:
      linear-gradient(180deg,
        rgba(10, 14, 26, .75) 0%,
        rgba(10, 14, 26, .88) 45%,
        rgba(10, 14, 26, .96) 100%);
  }
  .hero__bg::after { opacity: .4; }
  .hero__main {
    padding-top: var(--s-6);
    padding-bottom: var(--s-3);
  }
  .hero__h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
    letter-spacing: -.03em;
  }
  .hero__lead { font-size: .9375rem; line-height: 1.45; }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .btn-brand, .btn-ghost { justify-content: center; padding: 14px 18px; }
  .hero__bottom {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
  }
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3) 0;
  }
  .hero__stat {
    padding: var(--s-3) var(--s-4);
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
  }
  .hero__stat:first-child { padding-left: var(--s-4); border-left: 0; }
  .hero__stat:nth-child(2) { border-left: 1px solid var(--rule); }
  .hero__stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__stat:nth-child(even) { padding-right: 0; }
  .hero__stat-num { font-size: 1.5rem; }
  .hero__chapter-tag { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   Mobile bottom sticky bar
   ───────────────────────────────────────────────────────────── */
.m-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
  will-change: transform;
}
.m-bar.is-visible { transform: translateY(0); }
.m-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 10px;
  color: var(--fg);
  border-right: 1px solid var(--rule);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), filter .2s var(--ease);
}
.m-bar a:last-child { border-right: 0; }
.m-bar a:active { background: rgba(255,255,255,.06); }
.m-bar a.m-primary { background: var(--brand); color: #fff; }
.m-bar a.m-primary:active { filter: brightness(.92); background: var(--brand); }
.m-bar svg { width: 18px; height: 18px; flex-shrink: 0; }
.m-bar a.m-primary svg { color: #fff; }
@media (min-width: 768px) { .m-bar { display: none; } }

/* ─────────────────────────────────────────────────────────────
   PERF: вимкнули content-visibility (викликав CLS 0.3+ через
   неточний contain-intrinsic-size). Браузер сам ефективно
   рендерить через native lazy на картинках.
   ───────────────────────────────────────────────────────────── */

/* Smooth anchor-scroll з offset щоб секції не приклеювались до верху */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
section[id] { scroll-margin-top: 24px; }

/* Mobile: відступ знизу щоб sticky m-bar не перекривав footer-links */
@media (max-width: 767px) {
  .footer { padding-bottom: calc(var(--m-bar-h, 56px) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ─────────────────────────────────────────────────────────────
   NAV · burger menu (mobile)
   ───────────────────────────────────────────────────────────── */
.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
  padding: 0;
}
.nav__toggle:hover { background: rgba(243, 238, 229, .08); border-color: var(--fg-45); }
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav__toggle { display: inline-flex; order: 99; }
  .nav__row { gap: 10px; }
  .nav__phone {
    margin-left: auto;
    order: 98;
  }
  .nav__links {
    display: flex !important;       /* override default display:none */
    position: fixed;
    inset: var(--nav-h, 64px) 0 auto 0;
    z-index: 99;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 12px 0 20px;
    background: rgba(10, 14, 26, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rule);
    max-height: calc(100dvh - var(--nav-h, 64px));
    overflow-y: auto;
    transform: translateY(-110%);
    transition: transform .35s var(--ease), visibility .35s;
    visibility: hidden;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
  }
  .nav.is-open .nav__links {
    transform: translateY(0);
    visibility: visible;
  }
  .nav__links li { border-bottom: 1px solid var(--rule); list-style: none; }
  .nav__links li:last-child { border-bottom: 0; }
  .nav__links a {
    display: block;
    padding: 18px var(--container-pad);
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -.005em;
  }
  .nav__links a::after { display: none; }
  .nav__links a:hover { background: rgba(255, 233, 74, .08); color: var(--accent); }
}

/* =========================================================
   LEGAL PAGES (privacy-policy, terms-of-offer)
   ========================================================= */
.legal {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px);
  min-height: 70vh;
}
.legal-page {
  max-width: 820px;
  margin: 0 auto;
}
.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(10, 14, 26, .14);
  border-radius: 999px;
  background: #fff;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  margin-bottom: 24px;
}
.legal-page__back:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateX(-2px);
}
.legal-page__title {
  font-family: var(--font-display, "Manrope", "Manrope-fallback", system-ui, sans-serif);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--ink);
}
.legal-page__meta {
  font-size: 13px;
  color: rgba(10, 14, 26, .55);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(10, 14, 26, .1);
}
.legal-page__content {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(10, 14, 26, .85);
}
.legal-page__content > * + * { margin-top: 1em; }
.legal-page__content p { margin: 0 0 1em; }
.legal-page__content p:last-child { margin-bottom: 0; }
.legal-page__content strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-page__content h1,
.legal-page__content h2,
.legal-page__content h3,
.legal-page__content h4 {
  font-family: var(--font-display, "Manrope", "Manrope-fallback", system-ui, sans-serif);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 2em 0 .6em;
}
.legal-page__content h2 { font-size: clamp(20px, 2.4vw, 24px); }
.legal-page__content h3 { font-size: clamp(17px, 2vw, 19px); }
.legal-page__content ul,
.legal-page__content ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.legal-page__content li {
  margin-bottom: .5em;
}
.legal-page__content li::marker { color: var(--brand); }
.legal-page__content a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
  word-break: break-word;
}
.legal-page__content a:hover {
  color: var(--brand-600);
  text-decoration-thickness: 2px;
}
.legal-page__content blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-left: 3px solid var(--brand);
  background: rgba(55, 87, 234, .04);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.legal-page__content code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .92em;
  background: rgba(10, 14, 26, .06);
  padding: 2px 6px;
  border-radius: 4px;
}
.legal-page__content hr {
  border: 0;
  height: 1px;
  background: rgba(10, 14, 26, .1);
  margin: 2em 0;
}
@media (max-width: 640px) {
  .legal-page__content { font-size: 15px; }
  .legal-page__content ul,
  .legal-page__content ol { padding-left: 1.2em; }
}

.nav__cross{color:var(--brand)!important;font-weight:700}
.nav__cross:hover{text-decoration:underline}

/* lgx-messengers */
.m-bar { grid-template-columns: repeat(4, 1fr) !important; }
.m-msg { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 2px; text-decoration:none; color:#f3eee5; line-height:1; min-width:0; }
.m-msg svg, .m-msg img { width:20px; height:20px; display:block; }
.m-msg span { font-size:10px; font-weight:600; letter-spacing:.01em; }
.m-msg--whatsapp svg { color:#25D366; }
.m-msg--telegram svg { color:#29A9EB; }
.m-msg--call svg { color:#FFE94A; }
.m-msg:active { opacity:.7; }
.contact__channel-icon img { width:16px; height:16px; object-fit:contain; border-radius:4px; }
.contact__channel--telegram .contact__channel-icon { color:#29A9EB; }
.contact__channel--whatsapp .contact__channel-icon { color:#25D366; }
.contact__channel--call .contact__channel-icon { color:#FFE94A; }
.footer__quick a img { width:20px; height:20px; object-fit:contain; border-radius:4px; vertical-align:middle; }

/* hero messengers */
.hero__msgr{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.hero__msgr .msgr-ic{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(243,238,229,.08);border:1px solid rgba(243,238,229,.16);transition:transform .2s,border-color .2s;text-decoration:none;}
.hero__msgr .msgr-ic svg,.hero__msgr .msgr-ic img{width:21px;height:21px;}
.hero__msgr .msgr-ic--telegram svg{color:#29A9EB;}
.hero__msgr .msgr-ic--call svg{color:#FFE94A;}
.hero__msgr .msgr-ic:hover{transform:translateY(-2px);border-color:rgba(255,233,74,.5);}

/* lgx-team-phones */
.tc__phone { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: rgba(247,244,239,.92); }
.tc__phone-flag { margin-right: 3px; }
.tc__phone a { color: rgba(247,244,239,.92); text-decoration: none; transition: color var(--dur); }
.tc__phone a:hover { color: var(--accent); }
.tc__contacts { gap: 7px; }
.tc__contacts .tc__email { margin-top: 5px; }

.hero__msgr .msgr-ic--whatsapp svg{color:#25D366;}


/* lgx-hero-fit — повернути hero у перший екран (100dvh) після додавання месенджерів */
@media (max-width: 640px) {
  .hero__main { padding-top: var(--s-4); padding-bottom: var(--s-2); gap: 10px; }
  .hero__lead { font-size: .9rem; line-height: 1.4; }
  .hero__cta { margin-top: var(--s-1); }
  .btn-brand { padding: 13px 18px; }
  .hero__msgr { margin-top: 10px; gap: 8px; }
  .hero__msgr .msgr-ic { width: 40px; height: 40px; }
  .hero__msgr .msgr-ic svg, .hero__msgr .msgr-ic img { width: 19px; height: 19px; }
  .hero__bottom { padding-top: var(--s-3); padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  .hero__stats { gap: var(--s-2) 0; }
  .hero__stat { padding: var(--s-2) var(--s-4); }
  .hero__stat-num { font-size: 1.35rem; }
  .hero__stat-label { font-size: 11px; }
}

/* lgx-custom-select */
.cfm-select { position: relative; }
.cfm-select select { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.cfm-select__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--ink); background: var(--paper); border: 1px solid rgba(10,14,26,.12); border-radius: 4px; padding: 12px 14px; cursor: pointer; text-align: left; transition: border-color var(--dur), box-shadow var(--dur); }
.cfm-select.is-open .cfm-select__trigger, .cfm-select__trigger:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(55,87,234,.14); outline: 0; background: #fff; }
.cfm-select__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfm-select__val.is-placeholder { color: rgba(10,14,26,.4); }
.cfm-select__chev { display: flex; flex: none; transition: transform .2s; color: var(--ink); }
.cfm-select__chev svg { width: 12px; height: 8px; }
.cfm-select.is-open .cfm-select__chev { transform: rotate(180deg); color: var(--brand); }
.cfm-select__list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid rgba(10,14,26,.1); border-radius: 10px; box-shadow: 0 20px 48px -14px rgba(10,14,26,.35); max-height: 264px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cfm-select__opt { padding: 11px 12px; border-radius: 7px; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.3; color: var(--ink); cursor: pointer; transition: background .15s; }
.cfm-select__opt:hover { background: rgba(55,87,234,.08); }
.cfm-select__opt[aria-selected="true"] { background: rgba(55,87,234,.12); font-weight: 600; }
.cfm-select.is-invalid .cfm-select__trigger { border-color: var(--danger); }

/* lgx-trust — «Нам довіряють» marquee */
.trust { background: var(--ink); padding: clamp(2.5rem, 5vw, 4rem) 0; overflow: hidden; }
.trust__inner { max-width: var(--container, 1200px); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.trust__header { text-align: center; }
.trust__label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-70, rgba(247,244,239,.7)); }
.trust__label::before, .trust__label::after { content: ''; display: block; width: 36px; height: 1px; background: var(--brand); }
.trust__marquee { position: relative; overflow: hidden; margin-top: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.trust__track { display: flex; gap: 40px; align-items: center; width: max-content; animation: trust-scroll var(--trust-speed, 38s) linear infinite; will-change: transform; }
.trust__marquee:hover .trust__track, .trust__marquee:focus-within .trust__track { animation-play-state: paused; }
.trust__logo { flex-shrink: 0; height: 66px; background: #fff; border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); }
.trust__logo img { height: 100%; max-width: 160px; width: auto; object-fit: contain; display: block; }
@keyframes trust-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.trust--static .trust__marquee { -webkit-mask-image: none; mask-image: none; }
.trust--static .trust__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { .trust { padding: 2.25rem 0; } .trust__logo { height: 50px; padding: 8px 14px; } .trust__logo img { max-width: 120px; } .trust__track { gap: 28px; } }
@media (prefers-reduced-motion: reduce) { .trust__track { animation: none; } }

/* lgx-nav-dd — перемикач напрямків */
.nav__dd { position: relative; }
.nav__dd-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.nav__dd-btn svg { width: 11px; height: 7px; transition: transform .2s; }
.nav__dd.is-open .nav__dd-btn svg { transform: rotate(180deg); }
.nav__dd-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: var(--ink, #0a0e1a); border: 1px solid rgba(243,238,229,.14); border-radius: 12px; box-shadow: 0 22px 50px -16px rgba(0,0,0,.65); z-index: 120; }
.nav__dd.is-open .nav__dd-menu { display: block; }
.nav__dd-menu li { margin: 0; }
.nav__dd-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--fg, #f3eee5); text-decoration: none; font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.nav__dd-menu a:hover { background: rgba(255,233,74,.1); }
.nav__dd-menu a[aria-current="page"] { color: var(--accent, #FFE94A); font-weight: 700; }
@media (max-width: 980px) {
  .nav__dd-menu { display: block; position: static; min-width: 0; margin-top: 8px; padding: 6px 0 0; background: none; border: 0; box-shadow: none; }
  .nav__dd-btn { pointer-events: none; opacity: .55; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
  .nav__dd-btn svg { display: none; }
  .nav__dd-menu a { padding-left: 0; }
}
.footer__list a[aria-current="page"] { color: var(--accent, #FFE94A); }

/* lgx-ig */
.contact__channel--instagram .contact__channel-icon { color: #E1306C; }
.footer__quick a[aria-label="Instagram"]:hover { color: #E1306C; }

.hero__msgr .msgr-ic--instagram svg{color:#E1306C;}