/* ═══════════════════════════ FONTS ═══════════════════════════ */
/* Aeonik Pro лежить у проєкті — раніше він був лише в стеку, без жодного файлу,
   і підхоплювався з системи в тих, у кого встановлений. Через це сайт виглядав
   по-різному в різних людей і браузерів.
   ВАЖЛИВО: у src немає local(). Постачальник кладе туди local('Aeonik Pro') у
   КОЖНЕ накреслення — і браузер, знайшовши в системі одну гарнітуру з таким
   іменем, підставляє її замість усіх ваг, а решту домальовує сам. Саме це й
   ламало вигляд у Safari. З самими лише файлами накреслення однозначні.
   Курсиву в пакеті не беремо: на сайті він ніде не вживається.
   Ваги 600 в гарнітурі немає — три місця з font-weight: 600 браузер за
   стандартом віддасть у 700. */
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/AeonikPro-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/AeonikPro-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/AeonikPro-700.woff2) format('woff2');
}

/* ═══════════════════════════ TOKENS ═══════════════════════════ */
:root {
  --bg: #05070f;
  --bg-deep: #050b1b;
  --blue: #0660ff;
  --blue-2: #095fff;
  --blue-3: #3493ff;
  --blue-soft: #90d5f3;
  --blue-pale: #d1e5fe;
  --blue-text: #accaff;

  --txt: #fff;
  --txt-80: rgba(255,255,255,0.8);
  --txt-60: rgba(255,255,255,0.6);
  --txt-40: rgba(255,255,255,0.4);

  /* unified hairline borders */
  --hairline: rgba(255,255,255,.08);
  --hairline-strong: rgba(255,255,255,.14);

  --glass: rgba(14,18,29,0.88);
  --glass-soft: rgba(185,197,232,0.12);
  --glass-faint: rgba(185,197,232,0.06);

  --grad-text: linear-gradient(103deg, #217CFF 5.68%, #3493FF 46.25%, #E7EEFF 85.67%);
  --grad-btn: linear-gradient(24deg, #0660ff 21%, #90d5f3 104%);
  --grad-card: linear-gradient(-32deg, rgba(5,7,15,0) 30%, rgba(0,47,138,0.33) 65%, rgba(0,100,249,0.8) 95%, #fff 116%), linear-gradient(90deg, var(--glass), var(--glass));

  /* unified entrance/reveal easing — every scroll-in animation uses this curve */
  --ease-out: cubic-bezier(.22,1,.36,1);

  --r-section: 8rem;
  --r-card: 4rem;
  --r-pill: 62.4375rem;
  --maxw: 87.5rem;
  --pad-x: 2rem;

  /* signature inset highlight used across glass surfaces */
  --hl: inset -0.375rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.375rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.5rem 0.5rem 1.5rem -0.5rem rgba(255,255,255,0.04);
  --hl-btn: inset -0.5rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.8), inset 0.5rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.8), inset 0.5rem 0.5rem 1.5rem -0.5rem #90d5f3;
  --hl-ghost: inset -0.5rem -0.375rem 0.25rem -0.5rem rgba(78,157,249,0.64), inset 0.5rem 0.375rem 0.25rem -0.5rem rgba(78,157,249,0.64), inset 0.5rem 0.5rem 1.5rem -0.5rem rgba(78,157,249,0.32);
}

/* ═══════════════════════════ BASE / RESET ═══════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Корінь задає масштаб усієї rem-верстки. Макет намальовано на 1512px (1rem = 15px).
   ≥1512 — рівно 15px; 1024–1511 — пропорційно, але не дрібніше за 12px, щоб текст
   лишався читабельним; планшет і телефон мають власні значення (див. RESPONSIVE). */
html { font-size: clamp(12px, calc(100vw / 100.8), 15px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
/* brand selection + thin styled scrollbar */
::selection { background: #2d89ff; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 62.4375rem; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
body {
  font-family: 'Aeonik Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* static backdrop (replaces the old WebGL Stripe gradient canvas) */
  background-color: #000000;
  color: #fff;
  overflow-x: hidden;
  -webkit-user-select: none; user-select: none; /* text/images not selectable */
}
/* premium film-grain — static gray noise over everything, below modal/cursor */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 10rem 10rem; opacity: 0.06; mix-blend-mode: overlay;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; } /* prevent image drag/select */
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* keyboard focus ring (only for keyboard users, not mouse clicks) */
:focus-visible { outline: 0.125rem solid var(--blue-soft); outline-offset: 0.1875rem; }
.case-tile:focus-visible { outline-offset: 0.25rem; border-radius: 2rem; }

/* ═══════════════════════════ LAYOUT & TYPE ═══════════════════════════ */
.shell { padding: 0 var(--pad-x); }
.shell#cases { background: linear-gradient(180deg, #050B1B 0%, rgba(5, 11, 27, 0.00) 70%); } /* gradient only on the Cases section */
.inner { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.panel { position: relative; border-radius: var(--r-section); overflow: hidden; }
.panel-cases, .panel-testi, .panel-process, .panel-faq { margin-bottom: 2rem; } /* gap below these sections */
/* semi-transparent section bases so the body gradient shows through (hero excluded) */
.panel-cases, .panel-services,
.panel-testi, .panel-process, .panel-faq, .panel-cta {
  background-color: rgba(5, 11, 27, 0.96);
  /* depth: лише зовнішня тінь. Внутрішні шари прибрано — світла кайма по
     периметру всередині читалася як брудний край, а не як обʼєм. */
  box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.6);
}

.eyebrow { font-size: 1.25rem; letter-spacing: 0.075rem; text-transform: uppercase; color: var(--txt-60); }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.h-sec { font-weight: 700; font-size: 5rem; line-height: 1.2; letter-spacing: -0.02em; }
.lede { font-size: 1.25rem; line-height: 1.6; color: var(--txt-80); }

/* ═══════════════════════════ BUTTONS / PILLS ═══════════════════════════ */
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 1rem;
  height: 3.375rem; padding: 0 1.5rem; border-radius: var(--r-pill);
  font-weight: 500; font-size: 1.25rem; color: #fff; white-space: nowrap; overflow: hidden;
}
.pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.pill-ghost { background: rgba(6,96,255,0.24); }
.pill-ghost::after { box-shadow: var(--hl-ghost); }
.pill-solid { background: var(--grad-btn); }
.pill-solid::after { box-shadow: var(--hl-btn); }

.cta {
  position: relative; display: inline-flex; align-items: center; gap: 1rem;
  height: 4.875rem; padding: 0.75rem 5.125rem 0.75rem 2rem; border-radius: var(--r-pill); /* right pad reserves the absolutely-positioned knob */
  font-weight: 500; font-size: 1.375rem; color: #fff; white-space: nowrap; overflow: hidden;
  isolation: isolate; /* so the dotted shine (::before) sits above the bg but below the label */
}
.cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--hl-btn); }
/* dotted halftone with an animated glare sweeping across (light revealed through a static dot-grid mask) */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(60deg, rgba(217, 217, 217, 0) 44%, #D9D9D9 50%, rgba(217, 217, 217, 0) 56%);
  background-size: 300% 100%; background-repeat: no-repeat; /* thin single glint: off-screen (no dots) at both ends → blink-like, seamless */
  /* square grid intersected with a vertical fade → squares concentrated in the middle, fading top/bottom */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                repeating-linear-gradient(0deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-composite: source-in, source-in;
          mask: repeating-linear-gradient(90deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                repeating-linear-gradient(0deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-composite: intersect;
  animation: cta-shine 5s linear infinite;
}
/* glint sweeps left → right in the first ~45% of the cycle, then holds off-screen (button clean) until it loops */
@keyframes cta-shine { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .cta::before { animation: none; background-position: 50% 0; } }
/* статичний градієнт — без переливання (раніше тут їздив цикл cta-flow) */
.cta-solid { background: linear-gradient(90deg, #186FFD 0%, #6DB7F5 100%); }
.cta-ghost { background: rgba(6,96,255,0.24); }
.cta-ghost::after { box-shadow: var(--hl-ghost); }
.cta-ghost::before { opacity: 0.1; } /* dim the glint on the secondary button */
@property --knob-pop { syntax: "<number>"; inherits: false; initial-value: 1; }
.cta-knob {
  position: absolute; top: 50%; /* vertically centered; horizontal set per side below */
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.375rem; height: 3.375rem; border-radius: var(--r-pill); flex: none;
  background: var(--blue-pale); box-shadow: 0 0.75rem 0.5rem -0.5rem rgba(0,30,81,0.2), inset 0.25rem 0.25rem 0.5rem 0 #fff;
  transform: translateY(-50%) scale(var(--knob-pop)); /* center (Y) + pop pulse */
  animation: knob-pop 5s ease-in-out infinite; /* pulses as the glint finishes near it (synced with .cta::before) */
  transition: left .42s cubic-bezier(.16,1,.3,1), right .42s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
/* default: right knob shown at the right edge, left knob parked off-screen on the left */
.cta-knob-right { right: 0.625rem; }
.cta-knob-left  { left: -3.375rem; opacity: 0; }
/* slight enlarge when the shine sweep reaches the knob (~24% of the 5s cycle) */
@keyframes knob-pop { 0%, 18% { --knob-pop: 1; } 24% { --knob-pop: 1.1; } 32%, 100% { --knob-pop: 1; } }
@media (prefers-reduced-motion: reduce) { .cta-knob { animation: none; } }
.cta-knob.on-blue { background: var(--grad-btn); box-shadow: var(--hl-btn); }

/* premium button hovers */
.cta, .pill, .watch, .case-filter {
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, filter .28s ease;
}
.cta:active, .pill:active, .watch:active, .case-filter:active { transform: scale(0.98); transition-duration: .1s; }
.cta-label { transition: transform .42s cubic-bezier(.16,1,.3,1); }
/* Лише для пристроїв із мишею: на тачі :hover лишається після тапу, і кнопка
   застигала збільшеною, з текстом, зсунутим управо, і кнобом за краєм. */
@media (hover: hover) {
  .cta:hover, .pill:hover, .watch:hover, .case-filter:hover {
    transform: scale(1.03); /* all buttons enlarge slightly on hover (no position shift) */
    filter: brightness(1.06) saturate(1.04);
    box-shadow: 0 0.875rem 2rem -0.75rem rgba(8, 70, 180, 0.6);
  }
  /* secondary (ghost) buttons: softer, smaller hover shadow */
  .cta-ghost:hover, .pill-ghost:hover { box-shadow: 0 0.5rem 1.125rem -0.75rem rgba(8, 70, 180, 0.35); }
  /* on CTA hover: text slides right, right knob exits to the right, left knob enters from the left */
  .cta:hover .cta-label { transform: translateX(3.125rem); }
  .cta:hover .cta-knob-right { right: -3.375rem; opacity: 0; }
  .cta:hover .cta-knob-left  { left: 0.625rem; opacity: 1; }
}

/* ═══════════════════════════ ICONS ═══════════════════════════ */
/* local SVG masks embedded as data URIs so they also work via file:// */
.ic { display: inline-block; flex: none; background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-arrow  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.91 9.72 12.75 2.72a1 1 0 0 0-1.4 1.43l5.52 5.38c.45.43.22 1.44-.56 1.44H3.26a1.05 1.05 0 1 0 0 2.1h13.05c.79 0 1.01 1.02.56 1.46l-5.56 5.39a1 1 0 1 0 1.4 1.43l7.2-7.06a3.2 3.2 0 0 0 0-4.57Z'/%3E%3C/svg%3E"); }
.ic-plus   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-clock  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/g%3E%3C/svg%3E"); }
.ic-play   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M49.6 25.69c10.1 5.83 10.1 10.79 0 16.62L27.4 55.13C17.8 60.67 13 57.9 13 46.82V21.18C13 10.1 17.8 7.33 27.4 12.87L49.6 25.69Z'/%3E%3C/svg%3E"); }
.ic-star   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.43 2.86 4.68 5.47 1.08-3.83 4.78.63 5.63L10 15.38 4.87 17.6l.63-5.63-3.83-4.78 5.47-1.08L10 1.43Z'/%3E%3C/svg%3E"); }
.ic-close  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cta-knob .ic-arrow { width: 1.5rem; height: 1.5rem; color: #06204a; }
.cta-knob.on-blue .ic-arrow { color: #fff; }

/* ═══════════════════════════ LOADER ═══════════════════════════ */
/* staged intro: icon → wordmark slide-out → shimmer → fly to the header */
.page-loader {
  position: fixed; inset: 0; z-index: 5000;
  background: #05070f;
  display: grid; place-items: center;
  transition: background .5s ease, opacity .5s ease, visibility .5s ease;
}
.pl-logo {
  position: relative; width: 32rem;
  opacity: 0; transform: translateX(37%) scale(0.92); /* icon (left ~26% of the lockup, with air) sits visually centered */
  clip-path: inset(-20% 74% -20% -6%);                 /* show only the mark — negative edges so nothing clips */
  transition: opacity .8s ease, transform .95s cubic-bezier(.22,1,.36,1), clip-path .95s cubic-bezier(.22,1,.36,1);
  will-change: transform, clip-path;
}
.pl-img { display: block; width: 100%; height: auto; }
.page-loader.s1 .pl-logo { opacity: 1; transform: translateX(37%) scale(1); }             /* 2. іконка зʼявляється */
.page-loader.s2 .pl-logo { clip-path: inset(-20% 0% -20% -6%); transform: translateX(0) scale(1); } /* 3. текст виїжджає справа */
.pl-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask: url(../assets/img/logo.svg) center / contain no-repeat;
          mask: url(../assets/img/logo.svg) center / contain no-repeat;
}
/* смуга світла їздить transform-ом — рендериться на компоziторі, не лагає під навантаженням */
.pl-shine::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(70deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%);
  transform: translateX(105%); will-change: transform;
}
.page-loader.s3 .pl-shine { opacity: 1; }                                                    /* 4. переливання */
.page-loader.s3 .pl-shine::before { animation: pl-shine 1.25s ease-in-out forwards; }
@keyframes pl-shine { from { transform: translateX(105%); } to { transform: translateX(-105%); } }
.page-loader.fly { background: rgba(5,7,15,0); }                                           /* 5. фон тане, лого летить у хедер */
.page-loader.fly .pl-logo { transition: transform .85s cubic-bezier(.22,1,.36,1); }
.page-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .pl-logo, .page-loader.s1 .pl-logo, .page-loader.s2 .pl-logo { transition: none; clip-path: none; transform: none; opacity: 1; }
  .page-loader.s3 .pl-shine { animation: none; opacity: 0; }
}
/* while the loader plays, the header logo stays hidden — the flying logo "lands" into its place */
html.tf-loading .nav-brand img { opacity: 0; }

/* ═══════════════════════════ BACKDROP ═══════════════════════════ */
/* ambient blue blobs — compositor-only transform animation (no blur filters, no repaints → cheap) */
html::before, html::after {
  content: ""; position: fixed; z-index: -2; pointer-events: none;
  width: 60vw; height: 60vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 100, 249, 0.22) 0%, rgba(0, 47, 138, 0.10) 45%, transparent 70%);
  will-change: transform;
}
html::before { top: -20vw; left: -12vw; animation: blob-a 46s ease-in-out infinite alternate; }
html::after  { bottom: -25vw; right: -15vw; width: 70vw; height: 70vw; animation: blob-b 62s ease-in-out infinite alternate; }
@keyframes blob-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(28vw, 18vh, 0) scale(1.25); }
  100% { transform: translate3d(55vw, 4vh, 0) scale(0.9); }
}
@keyframes blob-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  50%  { transform: translate3d(-24vw, -16vh, 0) scale(0.85); }
  100% { transform: translate3d(-48vw, -3vh, 0) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { html::before, html::after { animation: none; } }
/* ambient particles + pixel glints (canvas injected by js/particles.js) */
#particles-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: 0.7; /* background layer — behind the semi-transparent sections */
}

/* ═══════════════════════════ NAV ═══════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: 7.5rem; padding: 0 2rem; will-change: height;
  transition: height .3s ease, background .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled { background: rgba(5,7,15,0.72); backdrop-filter: blur(1rem); height: 5.5rem; }
.nav-brand { display: flex; align-items: center; gap: 1rem; }
.nav-brand img { height: 3rem; width: auto; transition: opacity .25s ease; } /* opacity fades in after the loader lands */
.nav-brand .wordmark { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03125rem; }
.nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3rem; align-items: center;
}
.nav-center a { font-size: 1.25rem; opacity: 0.6; transition: opacity .2s; padding-block: 0.875rem; }
/* anchor targets stop below the fixed nav */
header[id], section[id] { scroll-margin-top: 6.25rem; }
.nav-center a:hover { opacity: 1; }
.nav-actions { display: flex; gap: 1rem; align-items: center; }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero {
  position: relative;
  padding-top: 7.5rem; /* offset for the fixed nav (out of flow) */
  background: url(../assets/img/hero-bg.png) center / cover no-repeat;
}
.hero-body { padding: 0 2rem 2rem; }
.hero-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4.5rem 2rem; border-radius: var(--r-section); overflow: hidden;
}
.hero-grid { display: flex; gap: 4rem; align-items: center; max-width: var(--maxw); width: 100%; }
.hero-copy { flex: 1; display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.hero-title { font-size: 5rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; position: relative; isolation: isolate; }
.hero-title .row { display: flex; align-items: center; gap: 1rem; }
/* typewriter hero word — gradient text; padding extends the gradient over descenders (g, y) so they aren't clipped */
.rotator { display: inline-flex; align-items: center; vertical-align: bottom; line-height: 1; }
.rotator > .word { display: inline-block; white-space: nowrap; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.rotator .caret {
  display: inline-block; width: 0.06em; height: 0.82em; margin-left: 0.06em; flex: none;
  background: #fff;
  animation: caret-blink 1.05s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.hero-visual { flex: 1; align-self: stretch; display: flex; align-items: center; }
.hero-video {
  width: 100%; aspect-ratio: 400/300; border-radius: 2rem; object-fit: cover; display: block; /* 32px */
  background: linear-gradient(160deg, #cfd6df, #aeb6c2);
  box-shadow: inset 0 0.125rem 0.75rem rgba(255,255,255,0.35), 0 2.5rem 5rem -1.25rem rgba(0,0,0,0.5);
}

/* hero glass mockup (recreated) */
.glass-mock {
  position: relative; width: 100%; aspect-ratio: 400/300; border-radius: var(--r-card);
  background: linear-gradient(160deg, #cfd6df, #aeb6c2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0.125rem 0.75rem rgba(255,255,255,0.5), 0 2.5rem 5rem -1.25rem rgba(0,0,0,0.5);
}
.glass-mock-inner {
  width: 64%; border-radius: 2.5rem; padding: 2.25rem 2.5rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18));
  backdrop-filter: blur(0.5rem); box-shadow: inset 0 0.0625rem 0.5rem rgba(255,255,255,0.6);
  display: flex; flex-direction: column; gap: 1.75rem;
}
.glass-row { display: flex; align-items: center; gap: 1rem; color: #1a1a1a; font-size: 1.625rem; font-weight: 500; }
.glass-row .sh { width: 1.875rem; height: 1.875rem; flex: none; }
.glass-row .sh svg { width: 100%; height: 100%; }
.glass-row .sh svg * { stroke: #1a1a1a; stroke-width: 1.8; fill: none; }

/* ═══════════════════════════ LOGO STRIP ═══════════════════════════ */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 3rem; align-items: center; width: max-content; animation: scroll-x 120s linear infinite reverse; }
.marquee-track img { opacity: 0.5; }
/* Смуга логотипів однією картинкою (2410×72). Замірено по реальних межах
   графіки всередині файла: логотипи займають 34 з 72 одиниць висоти, тобто
   зверху й знизу вже є по 19 одиниць власного поля, а з боків — 25 і 23.
   Звідси наслідки:
   • висота 5.0625rem (76px) дає логотипи рівно 36px — як було до заміни;
   • gap: 0 — проміжок між повторами (≈50px) дають власні бічні поля графіки;
   • власного вертикального відступу секції не треба, він уже в картинці;
   • opacity не чіпаємо — 0.5 закладено всередині svg, інакше вийшло б 0.25. */
.marquee-track--line { gap: 0; animation-duration: 40s; }
.marquee-track--line img { opacity: 1; height: 5.0625rem; width: auto; max-width: none; }
/* вертикального відступу немає: власні поля закладені в саму смугу-картинку */
.logo-strip { display: flex; align-items: center; justify-content: center; background-color: rgb(5 11 27); }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* also drives .stat-track */

/* ═══════════════════════════ CASES ═══════════════════════════ */
.panel-cases {
  padding: 8rem 2rem; display: flex; flex-direction: column; gap: 4rem; align-items: center;
  background-image: url(../assets/img/cases-grad-bg.png);
  background-repeat: no-repeat; background-position: top center; background-size: 100% auto; /* top-aligned, full width */
}
.panel-cases::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 2.8125rem 2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.40) inset, -2.8125rem 2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.50) inset, 2.1875rem 2.1875rem 0.3125rem -2.875rem #fff inset, -2.1875rem 2.1875rem 0.3125rem -2.875rem #fff inset; }
.cases-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; max-width: var(--maxw); width: 100%; }
.cases-head .title-block { flex: 1; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cases-head .h-sec { font-size: 4.25rem; font-weight: 500; }
.cases-head .h-sec .grad { display: block; }
.stat-scroll { width: 100%; min-width: 0; overflow: hidden; border-radius: 2rem; }
.stat-track { display: flex; gap: 0.5rem; width: max-content; animation: scroll-x 30s linear infinite; }
.stat-card {
  width: 14.6875rem; height: 12.9375rem; flex: none; border-radius: 2rem; padding: 1rem;
  background: var(--glass-soft); box-shadow: var(--hl); color: inherit; text-decoration: none; cursor: pointer;
  overflow: hidden; /* ріже завеликі пігулки логотипів */
  display: flex; flex-direction: column; gap: 1.5rem; align-items: center; justify-content: center; text-align: center;
}
.stat-card .num { font-size: 2rem; font-weight: 700; }
.stat-card .cap { font-size: 1rem; color: var(--txt-60); line-height: 1.2; margin-top: 0.25rem; } /* +4px gap from the number */
.stat-card .chip { position: relative; overflow: hidden; max-width: calc(100% - 1rem); height: 4rem; padding: 0 1.5rem; border-radius: 6.25rem; background: var(--glass-soft); box-shadow: var(--hl); display: flex; align-items: center;
  transition: box-shadow .28s ease; }
/* white circle that grows from the centre to fill the pill on hover */
.stat-card .chip::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%) scale(0); transition: transform .5s cubic-bezier(.16,1,.3,1); z-index: 0; }
.stat-card .chip img { position: relative; z-index: 1; height: 2rem; width: auto; max-width: 100%; object-fit: contain; transition: filter .28s ease; }
/* hover anywhere on the card → white circle expands, logo flips dark */
.stat-card:hover .chip { box-shadow: 0 0.5rem 1.5rem -0.625rem rgba(0,30,81,0.45); }
.stat-card:hover .chip::before { transform: translate(-50%, -50%) scale(1); }
.stat-card:hover .chip img { filter: brightness(0); }
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: var(--maxw); width: 100%; }
/* tiles slide in on scroll — left column from the left, right column from the right */
.cases-grid .case-tile { opacity: 0; transform: translateX(-3rem); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.cases-grid .case-tile:nth-child(even) { transform: translateX(3rem); }
.cases-grid .case-tile.in { opacity: 1; transform: none; }
.case-tile {
  position: relative; aspect-ratio: 1920/1080; border-radius: 2rem; overflow: hidden; /* 32px */
  border: 0.0625rem solid var(--hairline);
  cursor: pointer;
}
/* hover meta — title + category over a bottom scrim */
.tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; gap: 0.375rem; padding: 3rem 1.75rem 1.5rem;
  background: linear-gradient(180deg, rgba(5,7,15,0) 0%, rgba(5,7,15,0.82) 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.tile-meta b { font-size: 1.1rem; font-weight: 600; color: #fff; }
.tile-meta i { font-style: normal; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--txt-60); }
.case-tile:hover .tile-meta, .case-tile:focus-visible .tile-meta { opacity: 1; transform: none; }
.case-tile img, .case-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-tile video { transition: transform .4s ease; }
.case-tile:hover video { transform: scale(1.03); }
.case-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset -0.375rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.375rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.5rem 0.5rem 1.5rem -0.5rem rgba(255,255,255,0.04); }
/* magnetic play button (injected by js/tile-fx.js) */
.tile-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none; /* clicks pass through to the tile */
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translate(-50%, -50%) scale(0.82);
  transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.tile-play .ic-play { width: 2rem; height: 2rem; color: #06204a; } /* dark icon on the white disc */
.case-tile:hover .tile-play, .case-tile:focus-visible .tile-play {
  --tile-play-scale: 1.15;
  opacity: 1;
  transform: translate(-50%, -50%) scale(var(--tile-play-scale));
}

/* ═══════════════════════════ SERVICES ═══════════════════════════ */
.panel-services {
  position: relative; padding: 8rem 2rem 25rem; display: flex; flex-direction: column; align-items: center;
  background-image: url(../assets/img/services-grad-bg.png);
  background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; /* bottom-aligned, full width */
}
/* same inner white glow as .panel-cases, mirrored to the BOTTOM edge (negative offset-y) */
.panel-services::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 2.8125rem -2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.40) inset, -2.8125rem -2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.50) inset, 2.1875rem -2.1875rem 0.3125rem -2.875rem #fff inset, -2.1875rem -2.1875rem 0.3125rem -2.875rem #fff inset; }
.services-stack { display: flex; flex-direction: column; align-items: center; max-width: var(--maxw); width: 100%; }
.services-stack .h-sec { display: flex; gap: 0.75rem; justify-content: center; }
.connectors { width: 100%; aspect-ratio: 1098 / 277; margin: 0.5rem 0 -2rem; position: relative; z-index: 1; }
.connectors svg { width: 100%; height: 100%; overflow: visible; }
.connectors svg:not(.lines-ready) path { opacity: 0; }
.services-grid { display: flex; gap: 1.5rem; align-items: stretch; width: 100%; position: relative; z-index: 2; }
.service-card {
  flex: 1; min-width: 0; border-radius: 2rem; padding: 0.5rem;
  background: var(--grad-card); backdrop-filter: blur(1.875rem);
  display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--hl); position: relative;
  opacity: 0; transform: translateY(1.875rem) scale(0.97);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.service-card.show { opacity: 1; transform: none; }
/* levitation: gentle bob starts after the entrance transition settles; staggered per card */
.service-card.show { animation: svc-float 5.5s ease-in-out infinite alternate; }
.service-card.show:nth-child(1) { animation-delay: 0.9s; }
.service-card.show:nth-child(2) { animation-delay: 1.5s; }
.service-card.show:nth-child(3) { animation-delay: 2.1s; }
.service-card.show:nth-child(4) { animation-delay: 2.7s; }
@keyframes svc-float { from { transform: translateY(0); } to { transform: translateY(-0.7rem); } }
@media (prefers-reduced-motion: reduce) { .service-card.show { animation: none; } }
.service-card .copy { padding: 1.5rem 1rem 1rem; text-align: center; align-items: center; display: flex; flex-direction: column; gap: 0.5rem; }
.service-card .copy h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.service-card .copy p { font-size: 1rem; line-height: 1.5; color: #a9a9a9; }
.service-media { height: 13.75rem; margin-top: auto; border-radius: 1.5rem; background: radial-gradient(120% 100% at 50% 0%, rgba(120,167,255,0.3), rgba(5,7,15,0.6)); border: 0.0625rem solid var(--hairline); object-fit: cover; display: block; width: 100%; }

/* ═══════════════════════════ VSL ═══════════════════════════ */
.vsl-wrap { padding: 0 2rem 8rem; display: flex; justify-content: center; position: relative; z-index: 3; margin-top: -16rem; }
.vsl-card {
  position: relative; display: flex; max-width: var(--maxw); width: 100%; height: 37.5rem;
  border-radius: var(--r-card); overflow: hidden; backdrop-filter: blur(1.875rem);
  background: url(../assets/img/vsl-bg.png) center / cover no-repeat;
  box-shadow: var(--hl);
}
.vsl-copy { flex: 1 1 50%; min-width: 0; padding: 4rem; display: flex; flex-direction: column; gap: 1.375rem; position: relative; z-index: 2; } /* equal half (border-box 50%) */
.vsl-copy .title { font-size: 4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.vsl-copy .title .row { display: flex; gap: 0.75rem; align-items: center; }
.vsl-media {
  flex: 1 1 50%; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center;
  background: none; /* card's vsl-bg.png shows through */
}
.vsl-card > img.person { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 103%; width: auto; max-width: none; z-index: 1; } /* centered across the whole card */
.vsl-quote {
  position: absolute; top: 6.5rem; right: 4rem; width: 25rem; padding: 1.8125rem 3.75rem 1.8125rem 2.3125rem;
  border-radius: 2rem 2rem 2rem 0; color: #fff; z-index: 2; overflow: hidden; /* tl/tr/br rounded, bottom-left square (Figma) */
  /* exact Figma fill: corner radial glow (dark → blue → white) over a dark base */
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 212.41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' width='400' height='212.41' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.9 28.126 -74.386 -4.0706 258 -12.6)'><stop stop-color='rgba(5,7,15,0)' offset='0.21847'/><stop stop-color='rgba(0,47,138,0.33)' offset='0.52234'/><stop stop-color='rgba(0,74,193,0.565)' offset='0.68674'/><stop stop-color='rgba(0,100,249,0.8)' offset='0.85114'/><stop stop-color='rgba(64,139,251,0.85)' offset='0.88836'/><stop stop-color='rgba(128,178,252,0.9)' offset='0.92557'/><stop stop-color='rgba(191,216,254,0.95)' offset='0.96279'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(90deg, #0b0e19, #0b0e19);
  background-size: 100% 100%; background-repeat: no-repeat;
  box-shadow: 0 1.0279rem 4.1114rem 0 rgba(36,137,241,0.57);
  animation: vsl-quote-float 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes vsl-quote-float {
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }
  50% { transform: translateY(-0.75rem) rotate(0.35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vsl-quote { animation: none; }
}
.vsl-quote .q { font-size: 1.5418rem; font-weight: 500; line-height: 1.5; }
.vsl-quote .a { font-size: 1.2848rem; opacity: 0.6; margin-top: 0.803rem; }
.play-btn {
  position: absolute; left: 30%; top: 74%; transform: translate(-50%,-50%); z-index: 2;
  width: 10rem; height: 10rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.vsl-card .play-btn { display: none; }
.play-btn .ring { position: absolute; inset: 0; border-radius: 50%; border: 0.125rem dashed rgba(255,255,255,0.7); animation: spin 16s linear infinite; }
.play-btn .core { width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--grad-btn); box-shadow: var(--hl-btn); display: flex; align-items: center; justify-content: center; }
.play-btn .core .ic-play { width: 2.875rem; height: 2.875rem; color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════ TESTIMONIALS ═══════════════════════════ */
.panel-testi { padding: 8rem 0; display: flex; flex-direction: column; gap: 4rem; align-items: center; } /* no side padding → marquee clips later, nearer the edges */
.testi-head { text-align: center; display: flex; flex-direction: column; gap: 1rem; max-width: var(--maxw); width: 100%; }
.testi-head .h-sec { display: flex; flex-direction: column; align-items: center; }
.testi-head .h-sec .row { display: flex; gap: 0.75rem; align-items: center; }
.testi-marquee { width: 100%; overflow: hidden; }
.testi-track { display: flex; gap: 1rem; width: max-content; cursor: grab; touch-action: pan-y; user-select: none; will-change: transform; }
.testi-track.dragging { cursor: grabbing; }
.testi-track img { -webkit-user-drag: none; user-drag: none; }
.testi-card {
  width: 32.5rem; flex: none; border-radius: var(--r-card); padding: 3rem; position: relative; cursor: pointer; /* whole card opens the case modal */
  background: var(--grad-card);
  display: flex; flex-direction: column; gap: 2rem;
}
.testi-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset -0.375rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.375rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.8), inset 0.5rem 0.5rem 1.5rem -0.5rem rgba(255,255,255,0.04); }
/* Рейтинг і кнопка «Watch Case» приховані. Кліки це не ламає: картку
   відкриває вона сама через data-case, а не ця кнопка. */
.testi-top { display: none; }
.testi-rating .score { font-size: 1.25rem; font-weight: 700; line-height: 0.9; margin-bottom: 0.75rem; }
.stars { display: flex; gap: 0.125rem; }
.stars .ic-star { width: 1.25rem; height: 1.25rem; color: #ffc24b; }
.watch { height: 3.3125rem; padding: 0 1.5rem; border-radius: var(--r-pill); background: rgba(6,96,255,0.24); display: flex; align-items: center; font-size: 1.25rem; font-weight: 500; position: relative; overflow: hidden; cursor: pointer; }
.watch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--hl-ghost); }
/* flex: 1 — цитата забирає весь вільний простір картки, тож автор завжди
   стоїть на дні. Картки в ряду тягнуться по найвищій, і без цього блок
   автора висів би одразу під текстом на різній висоті в кожній. */
.testi-quote { flex: 1; min-height: 12.5rem; font-size: 1.5rem; line-height: 1.4; color: var(--txt-80); }
.testi-author { display: flex; gap: 1rem; align-items: center; }
.testi-author img.av { width: 4rem; height: 4rem; border-radius: 50%; flex: none; }
.testi-author .name { display: flex; gap: 0.625rem; align-items: center; font-size: 1.5rem; font-weight: 500; }
.testi-author .name img { width: 1.5rem; height: 1.5rem; border-radius: 100px; }
.testi-author .role { font-size: 1.25rem; color: var(--txt-40); margin-top: 0.5rem; } /* breathing room under the name */

/* ═══════════════════════════ PROCESS ═══════════════════════════ */
.panel-process {
  position: relative; z-index: 3; overflow: visible; /* visible so sticky step cards work */
  padding: 8rem 2rem; display: flex; flex-direction: column; gap: 4rem; align-items: center;
  background-image: url(../assets/img/cases-grad-bg.png);
  background-repeat: no-repeat; background-position: top center; background-size: 100% auto; /* top-aligned, full width */
}
/* same inner white glow as .panel-cases — on the TOP edge */
.panel-process::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 2.8125rem 2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.40) inset, -2.8125rem 2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.50) inset, 2.1875rem 2.1875rem 0.3125rem -2.875rem #fff inset, -2.1875rem 2.1875rem 0.3125rem -2.875rem #fff inset; }
.process-head { text-align: center; display: flex; flex-direction: column; gap: 1rem; }
.process-head .h-sec { display: flex; flex-direction: column; align-items: center; }
.process-head .h-sec .row { display: flex; gap: 0.75rem; align-items: center; }
.steps { position: relative; display: flex; flex-direction: column; gap: 1rem; max-width: var(--maxw); width: 100%; }
/* all step cards stack on top of each other (each slides over the previous) */
.steps > .step { position: sticky; top: 10rem; }
.steps > :nth-child(1) { z-index: 1; }
.steps > :nth-child(2) { z-index: 2; }
.steps > :nth-child(3) { z-index: 3; }
.steps > :nth-child(4) { z-index: 4; }
.steps > :nth-child(5) { z-index: 5; }
.step {
  position: relative; transform-origin: center top; will-change: transform, filter, opacity; /* stacking recede scrubs all three */
  display: flex; align-items: stretch; height: 30rem; border-radius: var(--r-card); overflow: hidden;
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-size: cover; background-position: center;
}
/* individual card backgrounds (static — no parallax) */
.steps .step:nth-child(1) { background-image: url(../assets/img/process-a.png); }
.steps .step:nth-child(2) { background-image: url(../assets/img/process-b.png); }
.steps .step:nth-child(3) { background-image: url(../assets/img/process-c.png); }
.steps .step:nth-child(4) { background-image: url(../assets/img/process-d.png); }
/* process media panel — video on the right half (mapping in render-home.js) */
/* scroll-dim overlay: the covered card sinks into #050B1B (driven by --dim from main.js) */
.step::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; background: #050B1B; opacity: var(--dim, 0);
}
.step-media { flex: 1; min-width: 0; position: relative; display: flex; padding: 1rem 1rem 1rem 0; order: 2; }
.step-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: calc(var(--r-card) - 1rem);
  background: #05070f;
  border: 0.0625rem solid var(--hairline);
}
.step-media::after {
  content: ""; position: absolute; inset: 1rem 1rem 1rem 0; border-radius: calc(var(--r-card) - 1rem);
  pointer-events: none;
  box-shadow: inset -0.375rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.375rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.5rem 0.5rem 1.5rem -0.5rem rgba(255,255,255,0.04);
}
.step-body { flex: 1; min-width: 0; display: flex; gap: 2rem; padding: 4rem 0 4rem 4rem; order: 1; }
.step-main { display: flex; flex-direction: column; gap: 2rem; }
/* small tabular index above each step title */
.step-index {
  display: block;
  font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.18em;
  color: #fff;
  margin-bottom: -1.5rem; /* 2rem flex gap − 1.5rem → effective .5rem below the index */
}
.step-main h3 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
.step-main p { font-size: 1.2875rem; line-height: 1.6; color: var(--txt-60); max-width: 24rem; }
.step-main p b { color: #fff; font-weight: 400; }
.duration { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--r-pill); background: rgba(65,138,248,0.24); color: var(--blue-text); font-weight: 500; font-size: 1.25rem; position: relative; overflow: hidden; width: fit-content;
  -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); /* frosts over the card video/art behind the pill */ }
.duration::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--hl-ghost); }
.duration .ic-clock { width: 1.5rem; height: 1.5rem; }

/* ═══════════════════════════ FAQ ═══════════════════════════ */
.panel-faq { position: relative; padding: 8rem 2rem; display: flex; flex-direction: column; align-items: center; }
.faq-stack { display: flex; flex-direction: column; gap: 5rem; align-items: center; max-width: var(--maxw); width: 100%; }
.faq-head { text-align: center; display: flex; flex-direction: column; gap: 1rem; }
.accordion { display: flex; flex-direction: column; gap: 0.9375rem; max-width: 60rem; width: 100%; }
/* items follow the site's glass-card language: gradient glass + signature inset highlight
   (без бордера й backdrop-filter — разом із ними відпав і background-clip:
   padding-box, який тримав градієнт поза смужкою напівпрозорого бордера) */
.faq-item {
  border-radius: 2rem; overflow: hidden; position: relative;
  background: var(--grad-card);
  transition: background .25s ease, box-shadow .25s ease;
}
.faq-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset -0.375rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.2), inset 0.375rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.35), inset 0.5rem 0.5rem 1.5rem -0.5rem rgba(255,255,255,0.04); }
.faq-item.open {
  background: linear-gradient(135deg, rgba(6,96,255,0.14), rgba(5,11,27,0.42) 60%), var(--grad-card);
  box-shadow: 0 1rem 2.5rem -1.5rem rgba(8,70,180,0.55);
}
.faq-q { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.875rem 2rem; text-align: left; }
.faq-q .text { flex: 1; min-width: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.faq-toggle { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--grad-btn); }
.faq-toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--hl-btn); }
.faq-item.open .faq-toggle { background: var(--glass-soft); }
.faq-item.open .faq-toggle::after { box-shadow: none; }
.faq-toggle .ic-plus { width: 1.25rem; height: 1.25rem; color: #fff; position: relative; z-index: 1; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.faq-item.open .faq-toggle .ic-plus { transform: rotate(45deg); }
.faq-a { height: 0; overflow: hidden; } /* slide animation is scripted (main.js, Web Animations API) */
.faq-a .pad { margin: 0 2rem 2rem; padding: 1.5rem 5rem 0 0; border-top: 0.0625rem solid var(--hairline); font-size: 1.25rem; line-height: 1.65; color: var(--txt-60); }
.faq-item.open .faq-a { height: auto; }

/* ═══════════════════════════ CTA / CONTACTS ═══════════════════════════ */
.panel-cta {
  position: relative; min-height: 60rem; padding: 8rem; border-radius: var(--r-section);
  display: flex; flex-direction: column; gap: 5.5rem; align-items: center; justify-content: center; overflow: hidden;
  background-image: url(../assets/img/services-grad-bg.png);
  background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; /* same bg as Services */
}
/* same inner white glow as .panel-services — on the BOTTOM edge */
.panel-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 2.8125rem -2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.40) inset, -2.8125rem -2.8125rem 0.625rem -3.75rem rgba(255,255,255,0.50) inset, 2.1875rem -2.1875rem 0.3125rem -2.875rem #fff inset, -2.1875rem -2.1875rem 0.3125rem -2.875rem #fff inset; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 4rem; max-width: var(--maxw); width: 100%; }
.cta-left { display: flex; flex-direction: column; gap: 4rem; }
.cta-left .h-sec { font-size: 5rem; }
.cta-left .h-sec .row { display: flex; gap: 0.75rem; align-items: center; }
.cta-left .h-sec .grad { display: block; }
.author {
  position: relative; display: inline-flex; align-items: center; gap: 1rem; height: 6rem; width: fit-content;
  padding: 0.75rem 2rem 0.75rem 1rem; border-radius: var(--r-pill); background: var(--glass-soft); overflow: hidden;
  -webkit-backdrop-filter: blur(1.25rem); backdrop-filter: blur(1.25rem);
}
.author::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset -0.5rem -0.375rem 0.25rem -0.5rem rgba(255,255,255,0.4), inset 0.5rem 0.375rem 0.25rem -0.5rem rgba(255,255,255,0.4); }
.author img { width: 4rem; height: 4rem; border-radius: 50%; box-shadow: 0 0.75rem 0.5rem -0.5rem rgba(0,30,81,0.2), inset 0.25rem 0.25rem 0.5rem 0 #4487dc; }
.author .nm { font-size: 1.5rem; font-weight: 500; }
.author .rl { font-size: 1.25rem; color: var(--txt-60); margin-top: 0.5rem; } /* breathing room under the name */

/* Calendly booking card — the widget renders at a fixed design-px size (491×830 — fits the day view with
   no trailing whitespace) and is zoomed via transform to follow the page's rem scale.
   The box reserves the scaled layout space: 491px/13 = 37.77rem, 830px/13 = 63.85rem. */
.cta-cal-box { width: 37.77rem; height: 63.85rem; flex: none; position: relative; }
.cta-cal { position: absolute; left: 0; top: 0; width: 491px; height: 830px; transform: scale(var(--cal-scale, 1)); transform-origin: top left; border-radius: 26px; overflow: hidden; background: #fff; }

.contacts { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; max-width: var(--maxw); width: 100%; flex-wrap: wrap; }
.contact .label { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.625rem; }
.contact .val { display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.6; font-size: 1.25rem; transition: opacity .25s ease; }
.contact:hover .val { opacity: 1; }
/* arrow hidden by default, slides + fades in on hover */
.contact .val .ic-arrow { width: 1.25rem; height: 1.25rem; opacity: 0; transform: translateX(-0.375rem); transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.contact:hover .val .ic-arrow { opacity: 1; transform: none; }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.footer { margin-top: 1rem; padding: 2.5rem 2rem; text-align: center; }
.footer p { font-size: 1rem; color: var(--txt-40); }

/* ═══════════════════════════ CASE MODAL ═══════════════════════════ */
html.modal-open { overflow: hidden; }
.case-modal {
  position: fixed; inset: 0; z-index: 1000; display: none; overflow-y: auto; overscroll-behavior: contain;
  padding: 3.5rem 2rem; background: rgba(3,5,12,0.86); backdrop-filter: blur(0.625rem);
}
.case-modal.open { display: flex; align-items: center; justify-content: center; animation: case-modal-fade .35s ease both; }
/* staggered entrance: video leads, the info and review cards follow — one shared ease */
.case-modal.open .case-modal-video { animation: case-modal-rise .6s var(--ease-out) both; }
.case-modal.open .case-info       { animation: case-modal-rise .6s var(--ease-out) .08s both; }
.case-modal.open .case-testi      { animation: case-modal-rise .6s var(--ease-out) .14s both; }
.case-modal.open .case-modal-close { animation: case-modal-fade .45s ease .2s both; }
/* animated close: the whole dialog softly sinks while the scrim fades */
.case-modal.closing { animation: case-modal-fade .28s ease reverse both; }
.case-modal.closing .case-modal-inner { animation: case-modal-sink .28s ease both; }
@keyframes case-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes case-modal-rise { from { opacity: 0; transform: translateY(1.5rem) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes case-modal-sink { to { opacity: 0; transform: translateY(0.75rem) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .case-modal.open, .case-modal.open .case-modal-inner, .case-modal.open .case-modal-video, .case-modal.open .case-info, .case-modal.open .case-testi, .case-modal.open .case-modal-close, .case-modal.closing, .case-modal.closing .case-modal-inner { animation: none; }
}
/* secondary (ghost) button styling — matches .pill-ghost */
.case-modal-close {
  position: fixed; top: 1.75rem; right: 1.75rem; z-index: 2; overflow: hidden;
  width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(6,96,255,0.24); color: #fff;
  transition: transform .28s cubic-bezier(.16,1,.3,1), filter .28s ease, box-shadow .28s ease;
}
.case-modal-close::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--hl-ghost); pointer-events: none; }
.case-modal-close:hover { transform: scale(1.06); filter: brightness(1.06) saturate(1.04); box-shadow: 0 0.875rem 2rem -0.75rem rgba(8,70,180,0.6); }
.case-modal-close:active { transform: scale(0.98); }
.case-modal-close .ic-close { width: 1.25rem; height: 1.25rem; color: #fff; position: relative; z-index: 1; }
/* layout: video on the left, info + testimonial stacked on the right */
.case-modal-inner { width: 100%; max-width: 108rem; margin: auto; display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; }
.case-modal-video { position: relative; flex: 1.55 1 0; min-width: 0; aspect-ratio: 16 / 9; border-radius: 1.5rem; overflow: hidden; background: #0b0e19; box-shadow: var(--hl); }
.case-modal-video video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
/* minimal custom player */
.cp-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 5rem; height: 5rem; border-radius: 50%;
  background: rgba(8,12,24,0.45); backdrop-filter: blur(0.5rem); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.cp-big img { width: 2rem; height: 2rem; margin-left: 0.2rem; }
.case-modal-video.is-paused .cp-big { opacity: 1; pointer-events: auto; }
.cp-big:hover { transform: translate(-50%,-50%) scale(1.15); }
.cp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.875rem; padding: 1.5rem 1.25rem 1rem;
  background: linear-gradient(0deg, rgba(5,7,15,0.72), rgba(5,7,15,0) 100%); opacity: 0; transition: opacity .25s ease; }
.case-modal-video:hover .cp-bar, .case-modal-video.is-paused .cp-bar { opacity: 1; }
.cp-bar button { width: 1.5rem; height: 1.5rem; flex: none; color: #fff; display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity .2s ease; }
.cp-bar button:hover { opacity: 1; }
.cp-bar button img { width: 100%; height: 100%; }
.cp-track { flex: 1; height: 0.25rem; border-radius: 1rem; background: rgba(255,255,255,0.25); position: relative; cursor: pointer; touch-action: none; }
.cp-track::before { content: ""; position: absolute; inset: -0.5rem 0; } /* taller hit area */
.cp-fill { height: 100%; width: 0%; border-radius: inherit; background: #fff; }
.cp-time { flex: none; min-width: 5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
.case-modal-grid { flex: 1 1 0; min-width: 24rem; max-width: 32rem; align-self: stretch; display: flex; flex-direction: column; gap: 1rem; }
.case-info { flex: 1; background: var(--glass-soft); border-radius: 1.5rem; padding: 2.5rem; box-shadow: var(--hl); }
.case-info h3 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1.25rem; }
.case-info .desc p { font-size: 1.125rem; line-height: 1.6; color: var(--txt-60); }
.case-info .desc p + p { margin-top: 1rem; }
.case-testi {
  border-radius: 1.5rem; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; box-shadow: var(--hl);
  background: linear-gradient(150deg, rgba(0,100,249,0.85), rgba(9,16,37,0.96) 72%), var(--bg-deep);
}
.case-testi .top { display: flex; align-items: center; gap: 0.625rem; }
.case-testi .top .score { font-size: 1.125rem; font-weight: 700; }
.case-testi .quote { font-size: 1.375rem; line-height: 1.5; color: #fff; flex: 1; }
/* clean author link — no pill container (overrides the CTA .author styles), opens the review site */
.case-testi .author { display: inline-flex; align-items: center; gap: 0.875rem; width: fit-content; height: auto; padding: 0; background: none; box-shadow: none; overflow: visible; text-decoration: none; color: inherit; transition: opacity .2s ease; }
.case-testi .author::after { display: none; }
.case-testi .author:hover { opacity: 0.9; }
.case-testi .author .av { width: 3rem; height: 3rem; border-radius: 50%; flex: none; box-shadow: none; }
.case-testi .author .who { display: flex; flex-direction: column; min-width: 0; }
.case-testi .author .name { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 600; }
.case-testi .author .name img { width: 1.125rem; height: 1.125rem; border-radius: 100px; }
.case-testi .author .role { font-size: 0.9375rem; color: var(--txt-60); margin-top: 0.5rem; }

/* ═══════════════════════════ CASES PAGE ═══════════════════════════ */
.cases-body {
  background-image:
    url(../assets/img/services-grad-bg.png),
    radial-gradient(85% 60% at 50% 0%, rgba(0,100,249,0.45), rgba(0,47,138,0.16) 36%, transparent 62%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 55%);
  background-position: center bottom, center top, center top; /* image pinned to the bottom */
  background-size: 100% auto, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.cases-page {
  padding: 12.5rem 2rem 8rem; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  background: transparent;
}
.cases-page-head { display: flex; flex-direction: column; align-items: center; max-width: var(--maxw); width: 100%; text-align: center; }
.cases-page-head .h-sec { display: flex; flex-direction: column; align-items: center; }
.cases-page-head .h-sec .row { display: flex; gap: 1rem; justify-content: center; }
/* Слот лишається в потоці й тримає висоту ряду, поки той зафіксований унизу —
   без нього решта сторінки підстрибувала б угору в момент відліплення. */
.case-filters-slot { display: flex; justify-content: center; width: 100%; }
.case-filters {
  --dock-gap: 1.5;      /* відступ від низу екрана в rem; js читає це саме значення */
  z-index: 90;
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  width: fit-content; max-width: var(--maxw); padding: 0;
  border: 0.0625rem solid transparent; border-radius: 2rem;
  background: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  box-shadow: none;
  transition: padding .3s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* Проїхали ряд — він перечіплюється до низу екрана й лишається там до кінця
   сторінки. fixed, а не sticky: sticky з bottom тримав би його внизу ще ДО
   того, як до нього догортали, а треба навпаки — після. */
.case-filters.is-stuck {
  /* left+right+auto-поля, а не left:50% з translate: так fixed-елементу доступна вся
     ширина екрана, а не половина, і ряд не переносився вдвічі раніше, ніж у потоці */
  position: fixed; left: 0; right: 0; margin-inline: auto; bottom: calc(var(--dock-gap) * 1rem);
  max-width: min(var(--maxw), calc(100vw - 2rem));
  padding: 0.5rem;
  border-color: var(--hairline-strong);
  background: rgba(5,11,27,0.74);
  -webkit-backdrop-filter: blur(1.25rem) saturate(1.2); backdrop-filter: blur(1.25rem) saturate(1.2);
  box-shadow: 0 1rem 3rem -1.25rem rgba(0,0,0,0.72), inset 0 0.0625rem 0 rgba(255,255,255,0.14);
}
@media (prefers-reduced-motion: reduce) { .case-filters { transition: none; } }
.case-filter {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2.375rem; padding: 0 1rem; border-radius: var(--r-pill);
  white-space: nowrap; flex: none;
  font-size: 0.9375rem; font-weight: 500; color: #fff; background: rgba(6,96,255,0.24); text-decoration: none;
  position: relative; overflow: hidden; cursor: pointer;
  /* transform/box-shadow/filter transition comes from the shared premium-hovers rule (Buttons section) */
}
.case-filter::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--hl-ghost); pointer-events: none; }
.case-filter .ic { width: 1rem; height: 1rem; color: currentColor; }
.case-filter.active { background: #fff; color: #06204a; }
.case-filter.active::after { box-shadow: none; }
#casesPage { width: 100%; max-width: var(--maxw); margin-top: 2.5rem; display: flex; flex-direction: column; gap: 5rem; }
.cases-group { display: flex; flex-direction: column; gap: 2rem; scroll-margin-top: 7rem; } /* під шапку: острівець фільтрів стоїть унизу й заголовок не перекриває */
.cases-group-title { font-size: 2.5rem; font-weight: 700; text-align: center; }
.cases-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ═══════════════════════════ BOOK PAGE ═══════════════════════════ */
.book-page { padding-top: 7.5rem; }

/* ═══════════════════════════ UTILITIES / ANIMATIONS ═══════════════════════════ */
/* scroll reveal */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }
/* opt-in direction / scale / blur variants — combine with .reveal (e.g. class="reveal reveal-left") */
.reveal-left  { transform: translateX(-2rem); }
.reveal-right { transform: translateX(2rem); }
.reveal-up    { transform: translateY(2.5rem); }
.reveal-scale { transform: scale(.92); }
.reveal-blur  { filter: blur(0.5rem); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--rd, 0s); }
.reveal-left.in, .reveal-right.in, .reveal-up.in, .reveal-scale.in { transform: none; }
.reveal-blur.in { filter: none; }
/* staggered groups — children appear one after another while scrolling into view */
#faq .faq-item:nth-child(2) { --rd: .08s; }
#faq .faq-item:nth-child(3) { --rd: .16s; }
#faq .faq-item:nth-child(4) { --rd: .24s; }
#faq .faq-item:nth-child(5) { --rd: .32s; }
#faq .faq-item:nth-child(6) { --rd: .40s; }
.contacts .contact:nth-child(2) { --rd: .10s; }
.contacts .contact:nth-child(3) { --rd: .20s; }
.contacts .contact:nth-child(4) { --rd: .30s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-up, .reveal-scale, .reveal-blur {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════
   Уся верстка в rem, тож основна робота — корінь на кожному класі пристроїв,
   а далі перебудова лише там, де макет фізично не влазить.
     ≥1512      веб       15px (макет)
     1024–1511  ноутбук   clamp(12px, 100vw/100.8, 15px) — див. html вище
     744–1023   планшет   14px; колонки героя, CTA і модалки стають у стовпчик
     <744       телефон   clamp(14px, 100vw/26, 16px): 14 на 360, 15 на 390, 16 від 416
   Межі в px: rem у медіазапиті рахується від 16px, а не від нашого кореня.
   744, а не 768 — щоб iPad mini портретом отримав планшетний макет. */

/* ─── Тач-пристрої: те, що на десктопі з'являється при наведенні ─── */
@media (hover: none) {
  .tile-meta { opacity: 1; transform: none; }          /* інакше на плитках кейсів немає назв */
  .case-modal-video .cp-bar { opacity: 1; }            /* інакше звук і перемотку не знайти, поки відео грає */
}

/* ─── Ноутбук і більше ─── */
@media (min-width: 1024px) {
  /* Пропорцією, а не фіксованою висотою: на 1512 це ті самі 87.5×37.5rem, але коли
     корінь упирається в 12px, картка стає вужчою, і людина на фото наїжджала на текст. */
  .vsl-card { height: auto; aspect-ratio: 7 / 3; }
  .tile-meta i { font-size: max(0.8125rem, 11px); }
}

/* ─── Ноутбук 1024–1279: контейнер 68rem (816px на 1024, 863px на 1279) ─── */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root { --maxw: 68rem; }

  /* hero: у двох рівних колонках по ~384px заголовок розсипався на 6–7 рядків
     («& product / videos», «designed to / flow»). Тексту більша частка, шрифт 4.5rem —
     кожен рядок лишається одним рядком і на 1024, і на 1279. */
  .hero-grid { gap: 3rem; }
  .hero-copy { flex: 1.3 1 0; }
  .hero-title { font-size: 4.5rem; }

  /* services: чотири картки в ряд лишаються (під них намальовані лінії), але опис
     при корені 12px був 12px — трохи більшим, щоб читався */
  .service-card .copy p { font-size: 1.125rem; }

  /* CTA / book: Calendly (~38rem) поруч лишав тексту ~27rem — заголовок на 6 рядків,
     ручний <br> у ліді рвав рядок. Ставимо в стовпчик: текст по центру, віджет під ним. */
  .panel-cta { min-height: 0; padding: 6rem 4rem; gap: 4.5rem; }
  .cta-row { flex-direction: column; align-items: center; gap: 3.5rem; }
}

/* ─── Планшет (і, каскадом, телефон) ─── */
@media (max-width: 1023.98px) {
  html { font-size: 14px; }
  :root { --r-section: 4rem; --r-card: 2.5rem; --pad-x: 1.5rem; --maxw: 44rem; } /* 44rem = 616px */
  header[id], section[id] { scroll-margin-top: 5rem; }
  .h-sec, .cases-head .h-sec, .cta-left .h-sec, .vsl-copy .title { font-size: 3.5rem; }

  /* nav: чотири посилання ще вміщаються між лого й кнопкою, бургер не потрібен */
  .nav { height: 5.5rem; padding-inline: 1.5rem; }
  .nav.scrolled { height: 4.5rem; }
  .nav-brand img { height: 2.5rem; }
  .nav-center { gap: 2rem; }
  .nav-center a { font-size: 1.125rem; }
  .nav-actions .pill { height: 3.125rem; padding: 0 1.25rem; font-size: 1.125rem; }

  /* hero */
  .hero { padding-top: 5.5rem; }
  .hero-body { padding: 0 1.5rem 1.5rem; }
  .hero-stage { padding: 3rem 2rem; }
  .hero-grid { flex-direction: column; align-items: stretch; gap: 3rem; }
  .hero-copy, .hero-visual { flex: none; width: 100%; }
  .hero-copy { gap: 2rem; }
  .hero-title { font-size: 4.5rem; }
  .hero-video { border-radius: 1.5rem; }

  /* cases */
  .panel-cases { padding: 5rem 2rem; gap: 3rem; }
  .cases-head { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .case-tile { border-radius: 1.5rem; }

  /* services: лінії-конектори ведуть до карток у ряд — коли картки переносяться,
     вони вказують у порожнечу, тож ховаємо (main.js тоді відкриває картки за прогресом) */
  .panel-services { padding: 5rem 2rem 22rem; }
  .connectors { display: none; }
  .services-grid { flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
  .service-card { flex: 1 1 calc(50% - 0.5rem); }
  .service-media { height: auto; aspect-ratio: 16 / 10; }

  /* VSL: текст зверху, людина й цитата внизу окремою смугою */
  .vsl-wrap { padding: 0 2rem 5rem; margin-top: -14rem; }
  .vsl-card { flex-direction: column; height: auto; }
  .vsl-copy { flex: none; padding: 3rem 3rem 0; }
  .vsl-media { flex: none; height: 28rem; }
  .vsl-card > img.person { top: auto; bottom: 0; left: 42%; transform: translateX(-50%); height: 28rem; }
  .vsl-quote { top: auto; bottom: 2.5rem; right: 2rem; width: 19rem; padding: 1.5rem 2.5rem 1.5rem 1.75rem; border-radius: 1.5rem 1.5rem 1.5rem 0; }
  .vsl-quote .q { font-size: 1.25rem; }
  .vsl-quote .a { font-size: 1rem; margin-top: 0.5rem; }

  /* testimonials */
  .panel-testi { padding: 5.5rem 0; gap: 3rem; }
  .testi-card { width: 26rem; padding: 2.25rem; gap: 1.5rem; }
  .testi-quote { font-size: 1.25rem; line-height: 1.45; min-height: 0; }
  .testi-author img.av { width: 3.25rem; height: 3.25rem; }
  .testi-author .name { font-size: 1.25rem; }
  .testi-author .role { font-size: 1rem; margin-top: 0.25rem; }

  /* process */
  .panel-process { padding: 5.5rem 2rem; gap: 3rem; }
  .steps > .step { top: 7rem; }
  .step { height: auto; min-height: 26rem; }
  .step-body { padding: 2.5rem 1.5rem 2.5rem 2.5rem; }
  .step-main { gap: 1.5rem; }
  .step-index { margin-bottom: -1rem; }
  .step-main h3 { font-size: 2rem; }
  .step-main p { font-size: 1.0625rem; max-width: none; }
  .duration { font-size: 1rem; padding: 0.625rem 0.875rem; }
  .duration .ic-clock { width: 1.25rem; height: 1.25rem; }

  /* FAQ */
  .panel-faq { padding: 5.5rem 2rem; }
  .faq-stack { gap: 3.5rem; }
  .faq-item { border-radius: 1.75rem; }
  .faq-q { padding: 1.5rem 1.75rem; }
  .faq-q .text { font-size: 1.25rem; }
  .faq-a .pad { margin: 0 1.75rem 1.75rem; padding: 1.25rem 2rem 0 0; font-size: 1.0625rem; }

  /* CTA / book: Calendly у повний розмір, без масштабу від кореня — при 14px він
     уже був би 529px, а на планшеті ширина дозволяє показати віджет як є */
  .panel-cta { min-height: 0; padding: 5.5rem 2rem; gap: 4rem; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 3rem; }
  .cta-left { gap: 2.5rem; }
  .cta-cal-box { width: 100%; height: auto; display: flex; justify-content: center; }
  .cta-cal { position: relative; transform: none; max-width: 100%; }
  .contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .contact .val { min-height: 2.75rem; }              /* текстове посилання: зона натискання ≈40px, а не висота рядка */
  .book-page { padding-top: 6.5rem; }

  /* cases page */
  .cases-page { padding: 9rem 2rem 7rem; gap: 2rem; }
  #casesPage { margin-top: 1.5rem; gap: 3.5rem; }
  .cases-group { gap: 1.5rem; scroll-margin-top: 6.5rem; }
  .cases-group-title { font-size: 2rem; }
  .case-filter { height: 2.75rem; padding: 0 1.125rem; font-size: 1rem; }

  /* case modal: відео над описом, а не поруч */
  .case-modal { padding: 5rem 2rem 2.5rem; }
  .case-modal-inner { flex-direction: column; align-items: stretch; max-width: 48rem; }
  .case-modal-video { flex: none; width: 100%; }
  .case-modal-grid { flex: none; min-width: 0; max-width: none; align-self: auto; }
  .case-info { flex: none; }
  .case-modal-close { top: 1rem; right: 1rem; width: 3.25rem; height: 3.25rem; background: rgba(6,96,255,.55); }
  .cp-bar button { width: 2.75rem; height: 2.75rem; padding: 0.625rem; }
  .cp-track::before { inset: -1rem 0; }
}

/* ─── Планшет 744–1023 без телефона: уточнення, які не мають каскадитись на телефон ─── */
@media (min-width: 744px) and (max-width: 1023.98px) {
  /* VSL: у стовпчику картка ~616×685, а межа темної й світлої половин фону стояла
     посередині — білий заголовок і лід заходили на світле. Зсуваємо фон, щоб межа
     йшла праворуч від тексту (~70% ширини); цитата лишається на ній, як на десктопі. */
  .vsl-card { background-position: 36% center; }
}

/* ─── Планшет і ноутбук 744–1279: CTA в стовпчик — текст по центру над Calendly ─── */
@media (min-width: 744px) and (max-width: 1279.98px) {
  .cta-left { align-items: center; text-align: center; }
  .cta-left .h-sec .row { justify-content: center; }
}

/* ─── Телефон ─── */
@media (max-width: 743.98px) {
  html { font-size: clamp(14px, calc(100vw / 26), 16px); }
  :root { --r-section: 2rem; --r-card: 1.5rem; --pad-x: 0.75rem; }
  header[id], section[id] { scroll-margin-top: 4.5rem; }
  .h-sec, .cases-head .h-sec, .cta-left .h-sec, .vsl-copy .title { font-size: 2.25rem; line-height: 1.15; }
  .lede { font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; } /* pretty: без самотнього слова в останньому рядку */
  .lede br { display: none; }                          /* ручні переноси розраховані на десктопну ширину */
  .eyebrow { font-size: 0.9375rem; letter-spacing: 0.14em; } /* 1.25rem був завеликим поруч із 2.25rem заголовком — мітка перетягувала увагу */

  /* nav: на посилання місця немає — лишаємо лого й «Book a Call» */
  .nav { height: 4rem; padding-inline: 1rem; }
  .nav.scrolled { height: 3.5rem; }
  .nav-brand img { height: 2.25rem; }
  .nav-center { display: none; }
  .nav-actions .pill { height: 2.75rem; padding: 0 1rem; font-size: 1rem; }

  /* hero */
  .hero { padding-top: 4rem; }
  .hero-body { padding: 0 0.75rem 1rem; }
  .hero-stage { padding: 2rem 1rem; }
  .hero-grid { gap: 2rem; }
  .hero-copy { gap: 1.5rem; }
  .hero-title { font-size: 2.625rem; line-height: 1.05; }
  .hero-title .row { gap: 0.26em; }                    /* той самий пробіл від кегля, що й у заголовках секцій */
  .hero-video { border-radius: 1.25rem; }
  .cta { height: 4rem; padding: 0.5rem 4.25rem 0.5rem 1.5rem; font-size: 1.125rem; }
  .cta-knob { width: 3rem; height: 3rem; }
  .cta-knob-right { right: 0.5rem; }
  .cta-knob-left { left: -3rem; }
  /* На низькій кнопці растр відблиску, найщільніший посередині, ішов прямо під літерами —
     «Book» наче надруковано на крапках. Маска навпаки: крапки над і під рядком, центр чистий */
  .cta::before {
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                  repeating-linear-gradient(0deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                  linear-gradient(180deg, #000 8%, transparent 38%, transparent 62%, #000 92%);
    -webkit-mask-composite: source-in, source-in;
            mask: repeating-linear-gradient(90deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                  repeating-linear-gradient(0deg, #000 0 0.25rem, transparent 0.25rem 0.5rem),
                  linear-gradient(180deg, #000 8%, transparent 38%, transparent 62%, #000 92%);
            mask-composite: intersect;
  }

  .marquee-track--line img { height: 3.75rem; }        /* логотипи ≈26px */
  .footer { padding: 2rem 1rem; }
  .footer p { font-size: 0.875rem; }
  .pl-logo { width: min(32rem, 80vw); }                /* лоадер: 32rem ширший за екран */

  /* cases */
  .panel-cases { padding: 4rem 1rem; gap: 2.5rem; }    /* 4rem зверху — як у решти секцій, один ритм */
  .cases-head { gap: 1.5rem; }
  .cases-head .title-block { align-items: center; text-align: center; } /* у стовпчик заголовки інших секцій по центру — ліворуч цей випадав */
  .stat-scroll { border-radius: 0;                     /* картки обрізались заокругленим краєм — замість цього м'яко тануть */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }
  .stat-track { animation-duration: 45s; }             /* на вузькій смузі 30s мигтіли б занадто швидко */
  .stat-card { width: 11.5rem; height: 10.5rem; gap: 1rem; padding: 0.75rem; border-radius: 1.25rem; }
  .stat-card .num { font-size: 1.75rem; }
  .stat-card .cap { font-size: 0.875rem; }
  .stat-card .chip { height: 3rem; padding: 0 1rem; }
  .stat-card .chip img { height: 1.5rem; }
  .cases-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  /* одна колонка: з'їзд зліва/справа виглядав би як випадковий зсув — лише знизу */
  .cases-grid .case-tile, .cases-grid .case-tile:nth-child(even) { transform: translateY(1.5rem); }
  .cases-grid .case-tile.in { transform: none; }
  .case-tile { border-radius: 1.25rem; }

  /* services */
  .panel-services { padding: 4rem 1rem 14rem; }
  .services-stack .h-sec { display: block; }           /* flex давав між «What we» і «Make» проміжок ширший за звичайний пробіл */
  .services-grid { flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
  .service-card { flex: none; }
  .service-card .copy { padding: 1.25rem 0.75rem 0.75rem; }
  .service-card .copy h3 { font-size: 1.375rem; }
  .service-card .copy p { font-size: 0.9375rem; text-wrap: balance; } /* два рівні рядки по центру замість довгого й куцого */

  /* VSL: усе в потік — довжину цитати редагують в адмінці, тож поверх обличчя її не кладемо */
  /* з боків --pad-x, як у панелей: при 1rem картка була на 4px вужча за панель послуг під нею,
     і її світлий нижній кант стирчав тонкими смужками по краях. 2rem знизу — проміжок як між панелями */
  .vsl-wrap { padding: 0 var(--pad-x) 2rem; margin-top: -9rem; }
  /* vsl-bg.png — дві половини, темна й світла. У вузькій високій картці cover клав світлу
     під заголовок і лід, і текст зникав. Тут лише темна частина, відтворена градієнтом */
  .vsl-card { background: radial-gradient(110% 55% at 100% 100%, rgba(52,147,255,.85) 0%, rgba(6,70,200,.55) 38%, transparent 72%),
                          linear-gradient(165deg, #040a1c 0%, #051538 55%, #072a86 100%); }
  .vsl-copy .title .row { gap: 0.26em; }               /* 0.75rem ≈ 1.75 пробілу — «Think  Before»; рахуємо від кегля, як у CTA */
  .vsl-copy { padding: 2rem 1.5rem 0; gap: 1rem; }
  .vsl-media { display: none; }
  .vsl-card > img.person { position: relative; inset: auto; transform: none; width: 100%; height: auto; max-width: 100%; }
  .vsl-quote { position: relative; inset: auto; width: auto; margin: -4rem 1rem 1rem; padding: 1rem 1.25rem; border-radius: 1.25rem 1.25rem 1.25rem 0; }
  .vsl-quote .q { font-size: 1.0625rem; line-height: 1.4; }
  .vsl-quote .a { font-size: 0.875rem; margin-top: 0.375rem; }

  /* testimonials */
  .panel-testi { padding: 4rem 0; gap: 2.5rem; }
  .testi-head { padding: 0 1.25rem; }
  .testi-head .h-sec .row { gap: 0.26em; }             /* 0.75rem ≈ 1.75 пробілу — «that  Ship Fast» */
  .testi-track { gap: 0.75rem; }
  .testi-card { width: min(22rem, calc(100vw - 4rem)); padding: 1.75rem; gap: 1.25rem; }
  .testi-quote { font-size: 1.125rem; text-wrap: pretty; }
  .testi-author img.av { width: 2.75rem; height: 2.75rem; }
  .testi-author .name { font-size: 1.0625rem; gap: 0.375rem; }
  .testi-author .name img { width: 1rem; height: 1rem; }
  .testi-author .role { font-size: 0.875rem; }

  /* process: стос карток вищий за екран, низ картки перекривала б наступна — без sticky */
  .panel-process { padding: 4rem 0.75rem; gap: 2.5rem; }
  .process-head .h-sec .row { gap: 0.26em; }           /* «to  Delivery» — той самий подвійний пробіл */
  .steps { gap: 0.75rem; }
  .steps > .step { position: relative; top: auto; }
  .step { flex-direction: column; min-height: 0; }
  .step-media { order: 0; flex: none; padding: 0.75rem 0.75rem 0; }
  .step-video { height: auto; aspect-ratio: 16 / 10; border-radius: calc(var(--r-card) - 0.75rem); }
  .step-media::after { inset: 0.75rem 0.75rem 0; border-radius: calc(var(--r-card) - 0.75rem); }
  .step-body { flex: none; padding: 1.5rem 1.5rem 1.75rem; }
  .step-main { gap: 1rem; }
  .step-index { font-size: 0.875rem; letter-spacing: 0.06em; margin-bottom: -0.5rem; } /* 0.18em на 14px розривав «01» на «0 1» */
  .step-main h3 { font-size: 1.625rem; }
  .step-main p { font-size: 1rem; text-wrap: pretty; }
  .duration { font-size: 0.9375rem; padding: 0.5rem 0.875rem; }

  /* FAQ */
  .panel-faq { padding: 4rem 0.75rem; }
  .faq-stack { gap: 2.5rem; }
  .accordion { gap: 0.625rem; }
  .faq-item { border-radius: 1.25rem; }
  .faq-q { padding: 1.125rem 1.125rem 1.125rem 1.25rem; gap: 0.75rem; }
  .faq-q .text { font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; } /* без «work?» самотою в другому рядку */
  .faq-toggle { width: 2.25rem; height: 2.25rem; }
  .faq-toggle .ic-plus { width: 1rem; height: 1rem; }
  .faq-a .pad { margin: 0 1.25rem 1.25rem; padding: 1rem 0 0; font-size: 1rem; line-height: 1.6; }

  /* CTA / book */
  /* з боків 0.75rem притискали текст до краю панелі з радіусом 2rem — даємо 1.25rem */
  .panel-cta { padding: 3.5rem 1.25rem 2.5rem; gap: 2.5rem; }
  .cta-row { gap: 2.5rem; }
  .cta-left { gap: 1.75rem; }
  /* gap у rem на дрібному кеглі давав подвійний пробіл «the  Right Video» — рахуємо від кегля */
  .cta-left .h-sec .row { gap: 0.26em; }
  .panel-cta .author { height: 4.5rem; padding: 0.5rem 1.5rem 0.5rem 0.5rem; gap: 0.75rem; }
  .panel-cta .author img { width: 3.5rem; height: 3.5rem; }
  .panel-cta .author .nm { font-size: 1.125rem; }
  .panel-cta .author .rl { font-size: 0.9375rem; margin-top: 0.25rem; }
  /* Calendly ширший за колонку тексту, з рівною рамкою ≈8px до краю панелі; на 360 це 325px ≥ 320 — мінімум віджета */
  .cta-cal-box { margin-inline: -0.75rem; width: calc(100% + 1.5rem); }
  .cta-cal { width: 100%; border-radius: 1.25rem; }
  /* контакти — список із розділювачами: підпис і значення тримаються разом, а не
     розпливаються рівними відступами; стрілку видно без hover, бо на тачі його немає */
  .contacts { grid-template-columns: 1fr; gap: 0; }
  .contact { padding: 0.875rem 0 0.25rem; border-top: 0.0625rem solid var(--hairline); }
  .contact .label { font-size: 1rem; margin-bottom: 0; }
  .contact .val { display: flex; justify-content: space-between; gap: 1rem; min-height: 2.75rem; font-size: 1.0625rem; opacity: 0.72; overflow-wrap: anywhere; }
  .contact .val .ic-arrow { width: 1.125rem; height: 1.125rem; opacity: 1; transform: none; }
  .book-page { padding-top: 5rem; }

  /* cases page: у доці острівець гортається вбік, а не росте в рядки */
  /* низ 3rem: місце під острівцем уже тримає футер, 6.5rem лишали порожню смугу над ним */
  .cases-page { padding: 6.5rem 1rem 3rem; gap: 1.5rem; }
  .cases-page-head .h-sec .row { gap: 0.26em; }       /* 1rem на 2.25rem-кеглі — подвійний пробіл «that  Ship Fast» */
  #casesPage { margin-top: 1rem; gap: 3rem; }
  .cases-group { gap: 1rem; scroll-margin-top: 6rem; }
  .cases-group-title { font-size: 1.625rem; }
  .cases-page-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  /* на світлих постерах назва й категорія губилися: щільніший низ скріму, категорія світліша */
  .tile-meta { padding: 2.5rem 1rem 0.875rem; gap: 0.25rem;
    background: linear-gradient(180deg, rgba(5,7,15,0) 0%, rgba(5,7,15,0.55) 45%, rgba(5,7,15,0.88) 100%); }
  .tile-meta b { font-size: 1.0625rem; line-height: 1.25; text-shadow: 0 0.0625rem 0.5rem rgba(0,0,0,0.35); }
  .tile-meta i { font-size: max(0.75rem, 12px); color: rgba(255,255,255,0.72); }
  .case-filter { padding: 0 1rem; font-size: 0.9375rem; }
  .case-filters.is-stuck {
    --dock-gap: 0.75; flex-wrap: nowrap; justify-content: flex-start;
    max-width: calc(100vw - 1.5rem); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .case-filters.is-stuck::-webkit-scrollbar { display: none; }
  .cases-body .footer { padding-bottom: 6rem; }        /* острівець не перекриває футер */

  /* case modal */
  .case-modal { padding: 4.5rem 0.75rem 1.5rem; }
  .case-modal-close { top: 0.75rem; right: 0.75rem; width: 3rem; height: 3rem; }
  .case-modal-video { border-radius: 1rem; }
  .cp-big { width: 4rem; height: 4rem; }
  .cp-bar { gap: 0.25rem; padding: 1.25rem 0.25rem 0.25rem; }
  .cp-time { min-width: 4.25rem; font-size: 0.75rem; }
  .case-info, .case-testi { padding: 1.5rem; border-radius: 1rem; }
  .case-info h3 { font-size: 1.625rem; margin-bottom: 0.75rem; }
  .case-info .desc p { font-size: 1rem; }
  .case-testi { gap: 1.25rem; }
  .case-testi .quote { font-size: 1.125rem; }
}

/* Ширші телефони й маленькі планшети в портреті: заголовок можна трохи більшим */
@media (min-width: 540px) and (max-width: 743.98px) {
  .hero-title { font-size: 3.25rem; }
  /* послуги у дві колонки: одна картка на ~550px давала відео вищим за пів екрана,
     а опис розтягувався в один довгий рядок */
  .services-grid { flex-direction: row; flex-wrap: wrap; }
  .service-card { flex: 1 1 calc(50% - 0.375rem); }
}

/* Великі телефони: сторінка кейсів у дві колонки — одна плитка на ~570px займала
   весь екран, і гортати десятки кейсів ставало задовго */
@media (min-width: 540px) and (max-width: 743.98px) {
  .cases-page-grid { grid-template-columns: 1fr 1fr; }
  .tile-meta { padding: 2rem 0.875rem 0.75rem; }
  .tile-meta b { font-size: 0.9375rem; }
}

/* Телефон у ландшафті потрапляє в «планшет» за шириною, але sticky-стек процесу
   не влазить у висоту екрана. main.js на цій же умові вимикає ефект відступу. */
@media (max-height: 640px) {
  .steps > .step { position: relative; top: auto; }
}

/* ═══ MOBILE NAV (бургер) ═══ */
/* Бургер, затемнення й шторка з посиланнями — лише для телефона (<744px).
   На планшеті й ширше посилання вміщаються в шапку, тож усе це прибрано зовсім. */
.nav-burger, .nav-scrim, .nav-panel { display: none; }

@media (max-width: 743.98px) {
  html.nav-open { overflow: hidden; }                  /* сторінка під меню не прокручується */

  /* шапка: лого · «Book a Call» · бургер; обидві кнопки по 44px — мінімальна зона дотику */
  .nav-actions { gap: 0.5rem; }
  .nav-actions .pill {
    height: max(2.75rem, 44px);
    transition: opacity .25s ease, visibility 0s, transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, filter .28s ease;
  }
  /* меню відкрите — та сама кнопка вже є внизу шторки, тож у шапці її ховаємо (місце лишається, нічого не стрибає) */
  html.nav-open .nav-actions .pill {
    opacity: 0; visibility: hidden; transform: scale(0.96);
    transition: opacity .2s ease, visibility 0s linear .2s, transform .28s cubic-bezier(.16,1,.3,1);
  }
  .nav-burger {
    display: flex; align-items: center; justify-content: center; flex: none;
    position: relative; overflow: hidden;
    width: max(2.75rem, 44px); height: max(2.75rem, 44px); border-radius: 50%;
    background: rgba(6,96,255,0.24); color: #fff;
    -webkit-tap-highlight-color: transparent;
    transition: transform .28s cubic-bezier(.16,1,.3,1), background-color .3s ease;
  }
  .nav-burger::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--hl-ghost); pointer-events: none; }
  .nav-burger:active { transform: scale(0.94); transition-duration: .1s; }
  html.nav-open .nav-burger { background: rgba(6,96,255,0.4); }

  /* дві риски → X: з'їжджаються до центру й повертаються на ±45° */
  .nav-burger-lines { position: relative; width: 18px; height: 8px; }
  .nav-burger-lines::before, .nav-burger-lines::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .4s cubic-bezier(.16,1,.3,1);
  }
  .nav-burger-lines::before { top: 0; }
  .nav-burger-lines::after { bottom: 0; }
  html.nav-open .nav-burger-lines::before { transform: translateY(3px) rotate(45deg); }
  html.nav-open .nav-burger-lines::after { transform: translateY(-3px) rotate(-45deg); }

  /* затемнення: над острівцем фільтрів (90), під шапкою (100) */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 98;
    background: rgba(3,5,12,0.6);
    -webkit-backdrop-filter: blur(0.625rem); backdrop-filter: blur(0.625rem);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  html.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
  /* відкрите меню: шапка без власної смуги, лежить прямо на затемненні */
  html.nav-open .nav.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* шторка — скляний острівець під шапкою; visibility прибирає її з табуляції, поки закрита */
  .nav-panel {
    display: flex; flex-direction: column; gap: 0.5rem;
    position: fixed; z-index: 99; left: 0.75rem; right: 0.75rem; top: 4.5rem;
    max-height: calc(100vh - 5.25rem); max-height: calc(100dvh - 5.25rem); overflow-y: auto; overscroll-behavior: contain;
    padding: 0.5rem; border-radius: var(--r-card);
    border: 0.0625rem solid var(--hairline-strong);
    /* ледь помітне синє сяйво з боку кнопки, як на картках сайту */
    background: radial-gradient(90% 70% at 100% 0%, rgba(6,96,255,0.2), rgba(6,96,255,0) 70%), rgba(5,11,27,0.84);
    -webkit-backdrop-filter: blur(1.25rem) saturate(1.2); backdrop-filter: blur(1.25rem) saturate(1.2);
    box-shadow: 0 1.5rem 3.5rem -1.5rem rgba(0,0,0,0.8), inset 0 0.0625rem 0 rgba(255,255,255,0.12);
    transform-origin: top right;
    opacity: 0; visibility: hidden; transform: translateY(-0.5rem) scale(0.98);
    transition: opacity .25s ease, transform .45s var(--ease-out), visibility 0s linear .45s;
  }
  .nav.scrolled ~ .nav-panel { top: 4rem; }            /* шапка після прокрутки нижча */
  html.nav-open .nav-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .3s ease, transform .5s var(--ease-out), visibility 0s;
  }

  .nav-panel-links { display: flex; flex-direction: column; }
  .nav-panel-links a {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 3.5rem; padding: 0 1rem; border-radius: calc(var(--r-card) - 0.5rem);
    font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; color: #fff;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-panel-links a:focus-visible { outline-offset: -0.125rem; } /* інакше рамку обрізає прокрутка шторки */
  /* волосяні розділювачі між пунктами, з відступом від країв */
  .nav-panel-links a + a::before { content: ""; position: absolute; top: 0; left: 1rem; right: 1rem; height: 0.0625rem; background: var(--hairline); }
  .nav-panel-links .ic-arrow { width: 1.125rem; height: 1.125rem; opacity: 0.4; transition: opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
  .nav-panel-links a:active { background: var(--glass-faint); }
  .nav-panel-links a:active .ic-arrow { opacity: 1; transform: translateX(0.25rem); }
  .nav-panel-links a[aria-current="page"] { color: var(--blue-text); }
  .nav-panel-links a[aria-current="page"] .ic-arrow { opacity: 1; }
  .nav-panel-cta { justify-content: center; width: 100%; height: 3.5rem; margin-top: 0.25rem; font-size: 1.125rem; flex: none; }

  /* пункти виринають драбинкою слідом за шторкою; закриваються всі разом */
  .nav-panel-links a, .nav-panel-cta {
    --d: 0s; opacity: 0; transform: translateY(0.5rem);
    transition: opacity .3s ease var(--d), transform .5s var(--ease-out) var(--d), background-color .2s ease;
  }
  html.nav-open .nav-panel-links a, html.nav-open .nav-panel-cta { opacity: 1; transform: none; }
  html.nav-open .nav-panel-links a:nth-child(1) { --d: .04s; }
  html.nav-open .nav-panel-links a:nth-child(2) { --d: .08s; }
  html.nav-open .nav-panel-links a:nth-child(3) { --d: .12s; }
  html.nav-open .nav-panel-links a:nth-child(4) { --d: .16s; }
  html.nav-open .nav-panel-cta { --d: .2s; }
  html.nav-open .nav-panel-cta:active { transform: scale(0.98); }

  @media (hover: hover) {
    .nav-burger:hover { background: rgba(6,96,255,0.36); }
    .nav-panel-links a:hover { background: var(--glass-faint); }
    .nav-panel-links a:hover .ic-arrow { opacity: 1; transform: translateX(0.25rem); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-burger-lines::before, .nav-burger-lines::after,
    .nav-scrim, html.nav-open .nav-scrim, .nav-panel, html.nav-open .nav-panel,
    .nav-panel-links a, .nav-panel-cta { transition: none; }
    .nav-panel, .nav-panel-links a, .nav-panel-cta { transform: none; }
  }
}