/* Доповнення до дизайну (не з мокапу): skip-link, collapse-лого, a11y. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

.reveal.rl[data-revealed] {
  transform: none !important;
}

/* Case/service FAQ: довші відповіді не обрізати max-height:260–340px з site.css */
.gm-faq[data-faq-open] .gm-faq-a {
  max-height: 1200px;
}

/* Service SEO longform (markdown body) */
.gm-seo-longform h2 {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #F5F5F5;
  margin: 36px 0 14px;
  line-height: 1.25;
}
.gm-seo-longform h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #F5F5F5;
  margin: 28px 0 10px;
  line-height: 1.3;
}
.gm-seo-longform p { margin: 0 0 14px; }
.gm-seo-longform ul,
.gm-seo-longform ol {
  margin: 0 0 16px;
  padding-left: 1.25em;
}
.gm-seo-longform li { margin: 0 0 8px; }
.gm-seo-longform a {
  color: #E91E96;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gm-seo-longform a:hover { color: #FF4DE8; }
.gm-seo-longform strong { color: #F5F5F5; font-weight: 600; }

.gm-hero-h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Client proof moves as one calm editorial strip, not a dashboard grid. */
.gm-trusted-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.gm-trusted-track {
  display: flex;
  width: max-content;
  animation: gm-trusted-loop 72s linear infinite;
  will-change: transform;
}

.gm-trusted-marquee:hover .gm-trusted-track,
.gm-trusted-marquee:focus-within .gm-trusted-track { animation-play-state: paused; }

.gm-trusted-brand {
  position: relative;
  flex: 0 0 clamp(178px, 16vw, 234px);
  min-height: 116px;
  padding: 18px 16px 17px;
  display: flex;
  flex-direction: column;
  color: #F5F5F5;
  border-right: 1px solid rgba(255,255,255,.09);
  opacity: 1;
  text-decoration: none;
  transform: none;
  filter: none;
  transition: background .22s ease, border-color .22s ease;
}

.gm-trusted-brand:hover {
  background: rgba(233,30,150,.08);
  border-color: rgba(233,30,150,.42);
  transform: none;
  filter: none;
}

.gm-trusted-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: .95;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.gm-trusted-tagline,
.gm-trusted-period {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 8.5px;
  line-height: 1.35;
  letter-spacing: .13em;
  overflow-wrap: anywhere;
}

.gm-trusted-tagline { margin-top: 9px; color: #A8A8A8; }
.gm-trusted-period {
  margin-top: auto;
  padding-top: 11px;
  color: #E91E96;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
}

@keyframes gm-trusted-loop { to { transform: translateX(-50%); } }

.gm-partner-strip {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  margin-top: 30px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
}

.gm-partner-strip-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .2em;
  color: rgba(245,245,245,.48);
}

.gm-partner-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 18px clamp(20px, 2vw, 28px);
  min-width: 0;
}

.gm-partner-badge {
  display: block;
  flex: 0 1 auto;
  width: auto;
  height: clamp(28px, 2.5vw, 36px);
  max-width: min(205px, 23vw);
  object-fit: contain;
  opacity: .86;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

.gm-partner-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 12px rgba(245,245,245,.16));
}

@media (prefers-reduced-motion: reduce) {
  .gm-trusted-marquee {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .gm-trusted-track { animation: none; }
  .gm-trusted-copy { display: none !important; }
}

@media (max-width: 640px) {
  .gm-trusted-brand { flex-basis: 178px; min-height: 110px; padding: 16px 13px; }
  .gm-trusted-name { font-size: 18px; }
  .gm-trusted-period { font-size: 10px; }
  .gm-partner-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
  }
  .gm-partner-badges {
    justify-content: flex-start;
    gap: 16px 20px;
    overflow: visible;
    padding-bottom: 0;
  }
  .gm-partner-badge {
    flex: 0 1 auto;
    height: clamp(21px, 6.2vw, 25px);
    max-width: 46%;
  }
}

/* Contact's concise two-part invitation needs room to read as two phrases on desktop. */
@media (min-width: 1025px) {
  [data-screen-label="Contact hero"] .gm-contact-hero-title {
    font-size: clamp(56px, 5.1vw, 80px) !important;
  }
}

@media (max-width: 720px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  main,
  section,
  footer {
    width: 100%;
    max-width: 100vw;
  }

  main {
    overflow-x: clip;
  }

  main section > div,
  footer > div,
  .gm-hero-grid,
  .gm-cta-grid {
    max-width: 100% !important;
  }

  .gm-hero-grid,
  .gm-cta-grid,
  .gm-filterbar-inner,
  section[data-screen-label="Hero"],
  section[data-screen-label="Trusted by brands"] > div,
  section[data-screen-label="What we do"] > div,
  section[data-screen-label="Featured cases"] > div,
  section[data-screen-label="About"] > div,
  section[data-screen-label="Process"] > div,
  section[data-screen-label="Testimonials"] > div,
  section[data-screen-label="Compare services"] > div,
  section[data-screen-label="Combinations"] > div,
  section[data-screen-label="Featured case"] > div,
  section[data-screen-label="FAQ"] > div,
  section[data-screen-label="Spotlight"] > div,
  section[data-screen-label="CTA"] > div,
  section[data-screen-label="Contact hero"] > div,
  section[data-screen-label="Contact form"] > div,
  section[data-screen-label="Channels"] > div,
  section[data-screen-label="Services hero"] > div,
  section[data-screen-label="Service hero"] > div,
  section[data-screen-label="Problem"] > div,
  section[data-screen-label="Why Grandma"] > div,
  section[data-screen-label="Process overview"] > div,
  section[data-screen-label="Case hero"] > div,
  section[data-screen-label="Case challenge"] > div,
  section[data-screen-label="Our solution"] > div,
  section[data-screen-label="Secondary proof"] > div,
  section[data-screen-label="Before vs after"] > div,
  section[data-screen-label="Client feedback"] > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  section[data-screen-label="Hero"] {
    overflow: hidden;
  }

  section[data-screen-label="Hero"] > div:first-child,
  .gm-hero-art,
  .gm-case-hero-art,
  .gm-cta-art {
    max-width: 100% !important;
    overflow: hidden;
  }

  section[data-screen-label="Hero"] > div:first-child {
    height: min(92vw, 360px) !important;
  }

  section[data-screen-label="Hero"] > div:last-child {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section[data-screen-label="Hero"] h1,
  section[data-screen-label="Hero"] .gm-hero-title {
    font-size: clamp(58px, 18vw, 76px) !important;
    overflow-wrap: anywhere;
  }

  section[data-screen-label="Hero"] [style*="margin-top:96px"] {
    margin-top: 42px !important;
  }

  section[data-screen-label="Trusted by brands"] > div {
    height: auto !important;
    min-height: 96px;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow: hidden;
  }

  section[data-screen-label="Trusted by brands"] > div > div:last-child {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 28px !important;
    padding-bottom: 8px;
  }

  /* .gm-side-note ховається централізовано в @media (max-width: 1279px) — див.
     блок «Бічна рукописна нотатка» вище. Селектори по [style*="left:1378px"]
     прибрано: інлайнової координати більше немає. */

  .gm-srow {
    height: auto !important;
    min-height: 86px;
    align-items: flex-start !important;
    padding: 18px 0 !important;
    gap: 12px !important;
  }

  .gm-srow .gm-stitle {
    width: min(42vw, 160px) !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .gm-srow > span:last-child {
    max-width: none !important;
    min-width: 0;
  }

  .gm-pullquote {
    padding: 34px 26px !important;
  }

  .gm-cmp-scroll {
    width: 100%;
    max-width: calc(100vw - 48px);
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
  }

  .gm-cmp-scroll > div {
    min-width: 680px !important;
  }

  .gm-fpills,
  .gm-pills {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .gm-selrow,
  .gm-sel,
  .gm-sel select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .gm-case-meta {
    width: 100%;
  }

  .gm-case-meta > div {
    min-width: 0;
  }

  .gm-hero-art > div[aria-hidden="true"],
  .gm-case-hero-art > div[aria-hidden="true"],
  .gm-cta-art > div[aria-hidden="true"],
  .gm-cta-art > div:first-child {
    max-width: 100vw !important;
  }

  .gm-bw {
    max-width: 100% !important;
  }

  .gm-gallery {
    max-width: 100% !important;
  }

  .gm-gallery > * {
    min-width: 0;
  }

  .gm-figure,
  .gm-featcase,
  .gm-case-chart,
  .gm-case-result-chart {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .gm-featcase {
    padding: 28px 20px !important;
  }

  .gm-featcase > div {
    min-width: 0;
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  svg {
    max-width: 100%;
  }

  .gm-spot-art {
    flex-direction: column !important;
  }

.gm-approval-stamp {
    width: 178px;
    height: 178px;
    transform: rotate(-7deg);
  }

}

/* CTA buttons: compact type and no decorative arrow suffixes. Functional
   carousel/pagination controls keep their arrows; marketing CTAs do not. */
.gm-primary,
.gm-secondary,
.gm-cta,
.gm-spot-btn,
.gm-404-cta-button,
.gm-outline-d,
.gm-check-cta {
  font-size: 13px !important;
}

.gm-chan-label { font-size: 14px !important; }
.gm-404-action-link { font-size: 13px !important; }

.gm-svc-ico {
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), rgba(255,255,255,.02) 58%, transparent 72%);
  box-shadow: 0 0 24px rgba(255,255,255,.06), inset 0 0 18px rgba(255,255,255,.03);
}
.gm-svc-ico svg { filter: drop-shadow(0 0 5px rgba(255,255,255,.25)); }

@media (max-width: 720px) {
  .gm-msg-reasons { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  section[data-screen-label="Case hero"] .gm-hero-grid,
  section[data-screen-label="Case challenge"] > div,
  section[data-screen-label="Our solution"] > div,
  section[data-screen-label="Secondary proof"] > div,
  section[data-screen-label="Before vs after"] > div,
  section[data-screen-label="Client feedback"] > div,
  .gm-case-cta-wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .gm-case-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 20px !important;
  }

  .gm-case-hero-art {
    min-height: 0 !important;
  }

  .gm-case-01,
  .gm-case-secondary-proof,
  .gm-case-result-chart,
  .gm-case-cta-grid {
    grid-template-columns: 1fr !important;
  }

  .gm-case-chart,
  .gm-case-result-chart,
  .gm-case-bars {
    padding: 22px 18px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .gm-case-secondary-proof {
    gap: 48px !important;
  }

  .gm-case-proof-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 24px 0 !important;
  }

  .gm-case-chart svg,
  .gm-case-result-chart svg {
    max-width: 100% !important;
    height: auto !important;
  }

  .gm-case-steps-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid items otherwise inherit the 5-card track's min-content width (756px)
     and make the entire case section wider than the phone viewport. Keep the
     carousel inside its rail; only the rail may scroll horizontally. */
  section[data-screen-label="Our solution"] > div,
  section[data-screen-label="Secondary proof"] > div,
  section[data-screen-label="Before vs after"] > div,
  section[data-screen-label="Client feedback"] > div {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gm-case-steps-wrap > div[aria-hidden="true"] {
    display: none !important;
  }

  /* Не форсити 5 колонок — кількість кроків різна; хвіст лінії = баг */
  .gm-case-steps {
    grid-template-columns: repeat(var(--gm-case-steps, 3), minmax(132px, 1fr)) !important;
    min-width: calc(var(--gm-case-steps, 3) * 148px) !important;
  }
  .gm-case-steps-wrap[data-steps="2"] { --gm-case-steps: 2; }
  .gm-case-steps-wrap[data-steps="3"] { --gm-case-steps: 3; }
  .gm-case-steps-wrap[data-steps="4"] { --gm-case-steps: 4; }
  .gm-case-steps-wrap[data-steps="5"] { --gm-case-steps: 5; }
  .gm-case-steps-wrap[data-steps="6"] { --gm-case-steps: 6; }

  .gm-case-cta-grid {
    padding: 36px 24px !important;
  }

  section[data-screen-label="Our solution"] h2,
  section[data-screen-label="Secondary proof"] h2,
  section[data-screen-label="Before vs after"] h2,
  .gm-case-cta-grid h2 {
    font-size: clamp(38px, 14vw, 56px) !important;
    overflow-wrap: anywhere;
  }

  section[data-screen-label="Our solution"] h2 span {
    display: block !important;
  }
}

/* skip-link (борг з аудиту — на кожній сторінці) */
.gm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #E91E96; color: #060606; padding: 10px 18px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none; border-radius: 0 0 6px 0;
}
.gm-skip-link:focus { left: 0; }

/* фокус-контур для клавіатури (a11y) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #E91E96; outline-offset: 2px;
}

/* ---- Лого-collapse: .grandma → .g при скролі (build-spec 3.3) ----
 * Хвіст "randma" — inline-block span'и в overflow:hidden контейнері;
 * схлопування max-width:0 + opacity:0 зі стаггером 35ms справа наліво.
 * Ширину кожної літери JS пинить у --w (gm-behaviors initHeader). */
.gm-tail { display: inline-flex; overflow: hidden; vertical-align: baseline; }
.gm-tail > span {
  display: inline-block; max-width: var(--w, 1ch); opacity: 1;
  /* Зазор між ізольованими inline-block літерами задається запасом У САМІЙ
     --w (JS, gm-behaviors measureLockupWidths) — letter-spacing НЕ працює
     тут: браузер не додає trailing letter-spacing до intrinsic-ширини
     однолітерного inline-block боксу (перевірено емпірично). */
  transition: max-width .32s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
}
.gm-lockup.is-collapsed .gm-tail > span { max-width: 0 !important; opacity: 0; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(1) { transition-delay: 0ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(2) { transition-delay: 35ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(3) { transition-delay: 70ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(4) { transition-delay: 105ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(5) { transition-delay: 140ms; }
.gm-lockup.is-collapsed .gm-tail > span:nth-last-child(6) { transition-delay: 175ms; }
/* підпис "MARKETING AGENCY" стискається разом з хвостом */
.gm-lockup .gm-sub {
  max-width: 220px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width .32s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
}
.gm-lockup.is-collapsed .gm-sub { max-width: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .gm-tail > span, .gm-lockup .gm-sub { transition: none; }
}

/* ---- Lang-switcher (статичний, замість shadow-DOM веб-компонента) ---- */
/* desktop: dropdown через <details> */
.gm-lang-dd { display: inline-block; position: relative; }
@media (max-width: 1024px) { .gm-lang-dd { display: none; } }
/* Compact outline control, a visual pair to the theme rocker: same height
   class, same restraint, an icon that animates on open. Three languages is
   why this stays a disclosure rather than a two-state toggle — cycling would
   make DE a two-click trip from EN. */
.gm-lang-dd > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px; cursor: pointer;
  color: var(--gm-lang-ink, #F5F5F5);
  border: 1px solid var(--gm-lang-line, rgba(245,245,245,.22)); border-radius: 8px;
  background: var(--gm-lang-bg, transparent);
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .06em;
  transition: border-color .22s ease, background .22s ease, color .22s ease;
}
.gm-lang-dd > summary:hover,
.gm-lang-dd[open] > summary { border-color: var(--gm-accent); color: var(--gm-accent); }
.gm-lang-dd > summary::-webkit-details-marker { display: none; }
.gm-lang-dd > summary:focus-visible { outline: 2px solid var(--gm-accent); outline-offset: 2px; }

/* "On air" indicator: a small filled dot with a soft halo, breathing slowly.
   Replaces an outlined globe, whose meridians only drew themselves on open —
   closed, it was a bare ring that read as an unfinished icon. Green is a
   status colour here, deliberately outside the brand palette: it means "this
   language is live", so it must not be confused with the magenta accent.
   The paper value is darker because the dark-theme green is too light to
   register on #F5F3EF. */
.gm-lang-live {
  --gm-live: #22C55E;
  width: 7px; height: 7px; flex: none; border-radius: 999px;
  background: var(--gm-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-live) 22%, transparent);
  animation: gm-live-pulse 2.6s ease-in-out infinite;
}
html[data-gm-theme="light"] .gm-lang-live { --gm-live: #15803D; }
@keyframes gm-live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-live) 20%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gm-live) 8%, transparent); }
}
.gm-lang-dd > summary .caret { font-size: 9px; opacity: .6; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.gm-lang-dd[open] > summary .caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .gm-lang-live { animation: none; }
  .gm-lang-dd > summary .caret { transition: none; }
}

/* theme switch + language sit as one group, so the header's space-between
   cannot fling them to opposite ends of the free space */
.gm-header-tools { display: inline-flex; align-items: center; gap: 10px; }
.gm-lang-panel {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px;
  background: #0E0E11; border: 1px solid rgba(255,255,255,.1); border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5); padding: 6px; z-index: 120;
}
.gm-lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
  background: transparent; border: none; border-radius: 6px; color: #F5F5F5;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px; text-align: left;
  cursor: pointer; transition: background .18s, color .18s;
}
.gm-lang-item .code { font-weight: 600; letter-spacing: .06em; min-width: 26px; }
.gm-lang-item .name { font-size: 12.5px; color: rgba(245,245,245,.5); }
.gm-lang-item:hover { background: rgba(255,255,255,.05); color: #E91E96; }
.gm-lang-item[aria-current="true"] { color: #E91E96; }
.gm-lang-item[aria-current="true"] .name { color: rgba(233,30,150,.7); }
.gm-lang-item .check { margin-left: auto; color: #E91E96; opacity: 0; font-size: 13px; }
.gm-lang-item[aria-current="true"] .check { opacity: 1; }

/* mobile: segmented */
.gm-lang-seg { display: none; }
@media (max-width: 1024px) {
  .gm-lang-seg {
    display: flex; flex-direction: column; gap: 10px; padding: 2px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 18px; width: 100%;
  }
}
.gm-lang-seg .lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; color: rgba(245,245,245,.4); }
.gm-lang-seg .row { display: flex; gap: 8px; }
.gm-lang-seg .seg {
  min-width: 56px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #F5F5F5;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.gm-lang-seg .seg:hover { border-color: #E91E96; color: #E91E96; }
.gm-lang-seg .seg[aria-current="true"] { border-color: #E91E96; color: #E91E96; background: rgba(233,30,150,.1); }

/* Мобільний фікс: водяний знак «.grandma» у футері на вузьких екранах
   лише зменшується, не ховається — у його крапку сідає крапля-провідник
   (gm-ink.js), а при 22vw він налазив на соцкнопки. */
@media (max-width: 900px) {
  .gm-footer-watermark {
    font-size: clamp(4rem, 20vw, 7rem);
    bottom: -.12em;
  }

  footer .gm-social,
  footer .gm-social[aria-hidden="true"] {
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
  }
}

/* ---- Why Us: responsive для нових сіток (6-крок процес, галузі, метрики) ---- */
.gm-spotlight-card {
  --gm-spot-x: 50%;
  --gm-spot-y: 50%;
  --gm-spot-rx: 0deg;
  --gm-spot-ry: 0deg;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, opacity .28s ease;
}

.gm-spotlight-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(220px circle at var(--gm-spot-x) var(--gm-spot-y), rgba(233,30,150,.16), transparent 72%);
  transition: opacity .24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gm-spotlight-card[data-revealed].is-spotlight-hovered {
    z-index: 2;
    border-color: rgba(233,30,150,.62) !important;
    background-color: rgba(233,30,150,.08) !important;
    transform: perspective(900px) translateY(-5px) rotateX(var(--gm-spot-rx)) rotateY(var(--gm-spot-ry));
  }
  .gm-spotlight-card.is-spotlight-hovered::before { opacity: 1; }
  .gm-why-ind.is-spotlight-active .gm-spotlight-card:not(.is-spotlight-hovered) { opacity: .68; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-spotlight-card, .gm-spotlight-card::before { transition: none !important; }
}

@media (max-width: 1080px) {
  .gm-why-steps { grid-template-columns: repeat(3, 1fr) !important; gap: 34px 22px !important; }
  .gm-why-steps-line { display: none !important; }
  .gm-why-ind { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-why-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 0 !important; }
}
@media (max-width: 900px) {
  .gm-why-hero { grid-template-columns: 1fr !important; }
  .gm-why-hero-art { order: -1; min-height: 420px !important; }
  .gm-why-ind-grid { grid-template-columns: 1fr !important; }
  .gm-talk-grid { grid-template-columns: 1fr !important; text-align: center; }
  .gm-talk-btns { flex-direction: column !important; align-items: stretch !important; }
  .gm-talk-btns a { justify-content: flex-start !important; }
}
@media (max-width: 640px) {
  .gm-why-points { grid-template-columns: 1fr !important; }
  .gm-why-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .gm-why-ind { grid-template-columns: 1fr !important; }
  .gm-why-metric { padding: 0 16px !important; }
}

/* ---- Фінальний блок каналів (Telegram/WhatsApp/Email) — services + why-us ---- */
@media (min-width: 1025px) {
  .gm-talk-btns > a,
  .gm-cta-btns > a { min-width: 0; white-space: nowrap; }
}

/* ---- Service hero CTA: довгі локалізовані labels не мають ламатись на 2 рядки ---- */
.gm-hero-btns {
  flex-wrap: wrap;
}
.gm-hero-btns > a {
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}
@media (min-width: 960px) {
  .gm-hero-btns > a {
    min-width: 192px;
  }
  .gm-hero-btns > a.gm-secondary {
    min-width: 322px;
  }
}
@media (max-width: 520px) {
  .gm-hero-btns {
    align-items: stretch !important;
  }
  .gm-hero-btns > a {
    width: 100%;
    min-width: 0;
    padding-left: 18px !important;
    padding-right: 18px !important;
    white-space: normal;
  }
}

/* ---- Services hero: дві колонки без окремого зображення ---- */
@media (max-width: 1024px) {
  [data-screen-label="Services hero"] .gm-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .gm-hero-side {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px !important;
  }
}
@media (max-width: 700px) {
  .gm-services-note {
    display: none;
  }
  .gm-hero-side {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Cases hero: 4 стати завжди в один ряд на десктопі, 2×2 нижче 900px ---- */
.gm-cases-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: center; }
@media (max-width: 900px) {
  .gm-cases-stats { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}
@media (max-width: 460px) {
  .gm-cases-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   Кириличний fallback для дисплейних шрифтів (гібридна UA-локалізація).
   Bebas Neue та Outfit — латиниця-лише (див. fonts.css). Замість правок сотень
   inline `font-family` підставляємо кириличні гліфи ПІД ТИМ САМИМ імʼям родини,
   обмежені кириличним unicode-range — браузер сам обирає цю грань для кирилиці.
   Латиниця (EN/DE) далі рендериться Bebas/Outfit; кирилиця (UA) — з fallback.
     Bebas Neue (condensed display) → Oswald (condensed, має кирилицю)
     Outfit    (geometric label)    → Montserrat (geometric, кирилиця вже є)
   Німецькі спецсимволи (ä ö ü ß) — у latin-ext Bebas/Outfit, їх не чіпаємо.
   ========================================================================== */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/static/fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400;
  font-display: swap;
  /* Oswald має cap-height 162 проти 140 у Bebas при 200px (виміряно в Chromium
     через canvas actualBoundingBoxAscent). Без корекції кирилиця виглядає на
     ~16% більшою за латиницю, і в змішаних заголовках ("SEO ДЛЯ ПОСЛУГ",
     "AI З МЕЖАМИ") латинське слово здається меншим. 140/162 = 0.864. */
  size-adjust: 86.4%;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/static/fonts/montserrat-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 800;
  font-display: swap;
}
/* Contact: рукописний конектор нотатка→кнопка «Надіслати». На десктопі
   показуємо довгий конектор (тягнеться до кнопки), на вужчому екрані гріда
   стекається — там лишається мала стрілка біля нотатки. */
.gm-note-arrow-lg { display: none; }
@media (min-width: 1024px) {
  .gm-note-arrow-sm { display: none; }
  .gm-note-arrow-lg { display: block; }
}

/* Permanent Marker (рукописні нотатки) → Caveat: єдиний Google-хендрайт із
   кирилицею, близький за настроєм. Кирилична UA-нотатка більше не падає на
   системний serif. Латиниця (EN-нотатки на кшталт «Hold my coffee») — далі
   Permanent Marker. */
@font-face {
  font-family: 'Permanent Marker';
  src: url('/static/fonts/caveat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-weight: 400;
  font-display: swap;
}

/* Caveat (кирилична підміна Permanent Marker вище) метрично тонший і нижчий
   за той самий кегль — UA-написи читались як шепіт поряд з EN на маркері.
   html[lang="uk"] — єдина кирилична локаль сайту (de лишається на латиниці
   й справжньому Permanent Marker, її не займаємо). Один селектор по
   інлайновому font-family ловить усі написи одразу — без дублювання px у
   кожному шаблоні. zoom, не transform:scale: він не конфліктує з inline
   transform:rotate(...), який стоїть в кожного напису окремо (scale довелось
   би !important-ити разом із чужим rotate і губити нахил). Кегль піднято на
   18% — підібрано по скриншотах contact hero EN/UA (elshot.mjs, CI=1).
   zoom підтримують Chrome/Safari/Edge завжди, Firefox — з версії 126. */
html[lang="uk"] [style*="Permanent Marker"] {
  zoom: 1.18;
}

/* ---- Бічна рукописна нотатка секції «What we do» на головній ---- */

/* Горизонтальна позиція живе тут, а не в інлайні шаблону. Раніше стояв
   жорсткий left:1378px при контейнері 1320px — напис починався за 62px до
   правої межі viewport 1440, і жоден з трьох перекладів не вміщався
   (EN 203px, UA 211px, DE 255px — найдовший саме німецький, не український).
   Тепер прив'язка до ПРАВОЇ межі: відступ росте разом із гутером контейнера,
   тож на 1920 напис стоїть у полі праворуч від контенту, а на 1280–1440
   притискається до краю з гарантованим зазором 24px. Верхня межа 96px — щоб
   на дуже широких екранах він не відліпився від композиції.
   100%, а не 100vw: 100vw включає вертикальний скролбар і з'їдав би зазор.
   Не повертати фіксовані координати — на рукописному шарі це вже третій
   такий дефект (пор. прибраний «STRATEGY FIRST.», 08.08.2026). */
.gm-side-note {
  right: clamp(24px, calc((100% - 1320px) / 2 - 24px), 96px);
}

/* Нижче 1280px гутера вже нема: напис поїхав би на текст сервісних рядків
   (заміряно — на 1200px UA перекриває його на 44px, DE на 4px; на 1280px
   найтісніший зазор 36px у UA). Тому ховаємо — як і раніше, просто поріг
   тепер по реальній колізії, а не по 900px, за яким напис лишався в
   розмітці й просто висів за краєм екрана. */
@media (max-width: 1279px) {
  .gm-side-note {
    display: none !important;
  }
}

/* ВИНЯТОК: zoom масштабує не лише кегль, а ВСІ довжини всередині елемента —
   зокрема offset'и позиціонування. З попереднім left:1378px при zoom 1.18 він
   ставав 1626px, і напис виїжджав за viewport 1440, зникаючи для українських
   відвідувачів (scroll-reveal при цьому ніколи не спрацьовував, бо елемент
   поза екраном — лишався opacity:0). Виняток потрібен і після переїзду на
   right: clamp(...) — zoom так само спотворив би і відступ, і базу 1320px, з
   якої він рахується. Тому тут zoom скасовано, а кегль піднято напряму.
   Те саме правило треба застосувати до будь-якого рукописного напису,
   позиціонованого абсолютно. */
html[lang="uk"] .gm-side-note {
  zoom: 1;
  font-size: 22px !important;
}

/* На планшетній ширині About уже стає в одну колонку. Даємо нотатці
   окремий повітряний зазор після ілюстрації, щоб її нахил не торкався
   нижнього краю зображення навіть геометрично. */
@media (min-width: 721px) and (max-width: 1024px) {
  [data-screen-label="About"] .gm-about-note {
    margin-top: 24px !important;
  }
}

/* ---- Mobile QA hardening (real iPhone pass, 2026-07-09) ---- */
@media (max-width: 720px) {
  .gm-header {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .gm-burger-cb:checked ~ .gm-nav {
    top: 72px !important;
    bottom: 0 !important;
    height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #090909 !important;
    padding: 28px 32px max(40px, env(safe-area-inset-bottom)) !important;
    border-bottom: 0 !important;
  }

  .gm-burger-cb:checked ~ .gm-nav::after {
    content: none !important;
  }

  [data-screen-label="Hero"] .gm-hero-title,
  .gm-hero-h1,
  [data-screen-label$="hero"] h1,
  [data-screen-label="Services hero"] h1,
  [data-screen-label="Cases hero"] h1,
  [data-screen-label="Blog hero"] h1,
  [data-screen-label="Contact hero"] h1,
  [data-screen-label="About hero"] h1,
  [data-screen-label="Why us hero"] h1 {
    max-width: 100% !important;
    font-size: clamp(48px, 14.5vw, 64px) !important;
    line-height: .9 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  html[lang="uk"] [data-screen-label="Hero"] .gm-hero-title,
  html[lang="uk"] .gm-hero-h1,
  html[lang="uk"] [data-screen-label$="hero"] h1,
  html[lang="uk"] [data-screen-label="Services hero"] h1,
  html[lang="uk"] [data-screen-label="Contact hero"] h1,
  html[lang="uk"] [data-screen-label="About hero"] h1,
  html[lang="uk"] [data-screen-label="Why us hero"] h1 {
    font-size: clamp(44px, 12.8vw, 58px) !important;
    line-height: .94 !important;
  }

  .gm-hero-h1 span,
  [data-screen-label="Hero"] h1 span,
  [data-screen-label$="hero"] h1 span,
  [data-screen-label="Services hero"] h1 span,
  [data-screen-label="Contact hero"] h1 span,
  [data-screen-label="About hero"] h1 span,
  [data-screen-label="Why us hero"] h1 span,
  section h2 span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .reveal.rl {
    transform: translateY(22px) !important;
  }

  [data-screen-label="What we do"] {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  [data-screen-label="About"] {
    padding-top: 78px !important;
    padding-bottom: 84px !important;
  }

  [data-screen-label="About"] > div {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: start !important;
  }

  [data-screen-label="About"] > div > div:first-child {
    order: 2;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
  }

  [data-screen-label="About"] > div > div:last-child {
    order: 1;
    min-width: 0;
  }

  [data-screen-label="About"] > div > div:first-child img {
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  [data-screen-label="About"] > div > div:first-child > div:first-child {
    width: min(118vw, 460px) !important;
    height: min(118vw, 460px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  [data-screen-label="About"] .gm-about-note {
    display: none !important;
  }

  [data-screen-label="About"] h2 {
    font-size: clamp(38px, 11.5vw, 50px) !important;
    line-height: .98 !important;
  }

  [data-screen-label="About"] p,
  [data-screen-label="About"] [style*="max-width:520px"] {
    max-width: 100% !important;
  }

  [data-screen-label="About"] [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 32px !important;
  }

  [data-screen-label="About"] .gm-value {
    min-width: 0;
  }

  [data-screen-label="FAQ"] {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
  }

  [data-screen-label="FAQ"] > div,
  [data-screen-label="FAQ"] .gm-faq-grid,
  [data-screen-label="FAQ"] .gm-why-ind-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    align-items: start !important;
  }

  [data-screen-label="FAQ"] h2 {
    font-size: clamp(38px, 11.5vw, 50px) !important;
    line-height: .98 !important;
    max-width: 100% !important;
  }

  [data-screen-label="FAQ"] h2 span {
    display: block !important;
    overflow-wrap: anywhere;
  }

  [data-screen-label="FAQ"] p {
    max-width: 100% !important;
  }

  [data-screen-label="What we do"] h2,
  [data-screen-label="Where to start"] h2,
  [data-screen-label="Problem"] h2,
  [data-screen-label="Case challenge"] h2,
  [data-screen-label="Our solution"] h2,
  [data-screen-label="Before vs after"] h2 {
    font-size: clamp(42px, 13.5vw, 58px) !important;
    line-height: .94 !important;
  }

  .gm-srow {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px 14px !important;
    padding: 20px 0 !important;
  }

  .gm-srow > span:first-child {
    width: auto !important;
  }

  .gm-srow .gm-stitle {
    width: auto !important;
    min-width: 0 !important;
  }

  .gm-srow > span:last-child {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .gm-hero-grid,
  .gm-story-grid,
  .gm-team-grid,
  .gm-talk-grid,
  .gm-contact-grid,
  .gm-where-grid,
  .gm-cta-grid,
  [data-screen-label="Final CTA"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  [data-screen-label="Final CTA"] {
    padding: 80px 0 !important;
  }

  [data-screen-label="Final CTA"] > div[style*="grid-template-columns"] {
    align-items: start !important;
  }

  [data-screen-label="Final CTA"] > div[style*="grid-template-columns"] > div,
  [data-screen-label="CTA"] .gm-cta-grid > div,
  .gm-talk-grid > div,
  .gm-contact-grid > div {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  [data-screen-label="Final CTA"] p,
  [data-screen-label="CTA"] p,
  [data-screen-label="Contact hero"] p,
  [data-screen-label="About hero"] p {
    max-width: 100% !important;
  }

  .gm-cta-btns,
  .gm-talk-btns {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .gm-chan,
  .gm-msgcard,
  .gm-primary,
  .gm-outline {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .gm-chan span,
  .gm-msgcard span {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .gm-hero-art,
  .gm-story-art,
  .gm-team-art {
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .gm-hero-art img {
    max-height: min(92vw, 430px);
    object-fit: contain !important;
  }

  [data-screen-label="About hero"] .gm-hero-art,
  [data-screen-label="Contact hero"] .gm-hero-art {
    order: 2 !important;
  }

  .gm-method {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .gm-method > div {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .gm-gallery {
    max-width: 100% !important;
  }

  .gm-trust,
  .gm-hero-btns,
  [data-screen-label="Services hero"] [style*="margin-top:38px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  /* .gm-side-note — див. централізоване правило @media (max-width: 1279px). */

  section[data-screen-label="Trusted by brands"] > div {
    height: auto !important;
    min-height: 104px;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 18px !important;
    overflow: hidden;
  }

  section[data-screen-label="Trusted by brands"] > div > div:last-child {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 36px !important;
    padding-bottom: 8px;
  }
}

[data-gm-cookie-settings][hidden] {
  display: none !important;
}

/* Cookie-банер на вузьких екранах: три кнопки по minmax(140px) не влазять
   у 390px (3×140 + gaps = 440px), тому "ACCEPT ALL" зрізало правим краєм.
   Дві колонки + accept на всю ширину — головна дія лишається найпомітнішою. */
@media (max-width: 560px) {
  .gm-cookie-actions {
    grid-template-columns: 1fr 1fr !important;
    width: 100%;
  }
  .gm-cookie-actions [data-gm-cookie-action="accept"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  html[lang="uk"] [data-screen-label="Hero"] .gm-hero-title,
  html[lang="uk"] .gm-hero-h1,
  html[lang="uk"] [data-screen-label$="hero"] h1,
  html[lang="uk"] [data-screen-label="Services hero"] h1,
  html[lang="uk"] [data-screen-label="Contact hero"] h1,
  html[lang="uk"] [data-screen-label="About hero"] h1,
  html[lang="uk"] [data-screen-label="Why us hero"] h1 {
    font-size: clamp(40px, 11.8vw, 52px) !important;
  }

  [data-screen-label="Hero"] .gm-hero-title {
    font-size: clamp(54px, 16vw, 68px) !important;
  }
}

/* Case / services card metrics — never wrap "1 222" mid-number.
   F-02 fix (2026-08-08): each usage site now sizes its own column/font so a
   long value ("+373 %", "40,594") should always fit without hitting this
   limit. Kept only as a last-resort safety net — text-overflow:ellipsis
   (not the old `clip`) so if some future value still doesn't fit, it visibly
   truncates with "…" instead of silently losing a trailing digit or the "%"
   sign (which used to render "+373%" as the misleading "+3739"). */
.gm-metric-value {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-count-decorating {
  position: relative;
  display: inline-block;
  min-width: var(--gm-count-width, auto);
  color: transparent !important;
}

.gm-count-decorating::after {
  content: attr(data-count-visual);
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--gm-count-color, currentColor);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Копіювання email (футер + email-картка /contact) + тост ---- */
.gm-email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: rgba(245,245,245,.55);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.gm-email-copy svg { width: 15px; height: 15px; display: block; }
.gm-email-copy:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); }
.gm-email-copy:active { transform: scale(0.92); }
.gm-email-copy:focus-visible { outline: 2px solid rgba(233,30,150, 0.8); outline-offset: 2px; }
.gm-email-copy.is-copied { color: #34D399; border-color: rgba(52, 211, 153, 0.55); background: rgba(52, 211, 153, 0.12); }

/* Світлий варіант — email-картка на світлому тлі /contact */
.gm-email-copy-light { border-color: rgba(180, 12, 134, 0.35); background: rgba(180, 12, 134, 0.07); color: #A8156A; }
.gm-email-copy-light:hover { background: rgba(180, 12, 134, 0.14); border-color: rgba(180, 12, 134, 0.6); }
.gm-email-copy-light.is-copied { color: #0F8A5F; border-color: rgba(15, 138, 95, 0.5); background: rgba(15, 138, 95, 0.1); }

.gm-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  background: #0a0207;
  border: 1px solid rgba(233,30,150, 0.5);
  border-radius: 6px;
  color: #F5F5F5;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.gm-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.gm-toast svg { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .gm-toast { transition: opacity .12s ease; }
}

.gm-team-showcase {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(250px, .72fr);
  gap: 34px;
  align-items: center;
  width: 100%;
}

.gm-team-photos {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow: visible;
}

.gm-team-photo-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-team-photo-col-2 { padding-top: 58px; }
.gm-team-photo-col-3 { padding-top: 26px; }

.gm-team-photo,
.gm-team-row {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gm-team-photo {
  position: relative;
  display: block;
  flex: none;
  width: 132px;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: opacity .25s ease, box-shadow .25s ease, transform .25s ease;
}

.gm-team-photo-col-2 .gm-team-photo {
  width: 150px;
  height: 170px;
}

.gm-team-photo-col-3 .gm-team-photo {
  width: 140px;
  height: 160px;
}

.gm-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.72) contrast(1.04);
  transition: filter .3s ease, transform .35s ease;
}

.gm-team-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.gm-team-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  width: 100%;
  color: #F5F5F5;
  background: transparent;
  transition: opacity .22s ease, transform .22s ease;
}

.gm-team-mark {
  display: block;
  width: 16px;
  height: 11px;
  margin-top: 4px;
  border-radius: 5px;
  background: rgba(245,245,245,.22);
  transition: width .25s ease, background .25s ease;
}

.gm-team-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gm-team-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: 0;
  color: rgba(245,245,245,.86);
  transition: color .22s ease;
}

.gm-team-role {
  margin-top: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(245,245,245,.42);
}

.gm-team-person:focus-visible {
  outline: 2px solid rgba(233,30,150,.85);
  outline-offset: 4px;
}

.gm-team-showcase[data-active-member] .gm-team-person { opacity: .42; }
.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"],
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"],
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"],
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"],
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"],
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] {
  opacity: 1;
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"].gm-team-photo,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"].gm-team-photo,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"].gm-team-photo,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"].gm-team-photo,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"].gm-team-photo,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"].gm-team-photo {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(233,30,150,.5), 0 18px 34px rgba(0,0,0,.32);
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"] img,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"] img,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"] img,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"] img,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"] img,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] img,
.gm-team-photo:hover img,
.gm-team-photo:focus-visible img {
  filter: grayscale(.12) brightness(.98) contrast(1.02);
  transform: scale(1.035);
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"] .gm-team-mark,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"] .gm-team-mark,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"] .gm-team-mark,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"] .gm-team-mark,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"] .gm-team-mark,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] .gm-team-mark,
.gm-team-row:hover .gm-team-mark,
.gm-team-row:focus-visible .gm-team-mark {
  width: 22px;
  background: #E91E96;
}

.gm-team-showcase[data-active-member="strategy"] [data-gm-team-member="strategy"] .gm-team-name,
.gm-team-showcase[data-active-member="paid-media"] [data-gm-team-member="paid-media"] .gm-team-name,
.gm-team-showcase[data-active-member="seo-content"] [data-gm-team-member="seo-content"] .gm-team-name,
.gm-team-showcase[data-active-member="analytics"] [data-gm-team-member="analytics"] .gm-team-name,
.gm-team-showcase[data-active-member="creative"] [data-gm-team-member="creative"] .gm-team-name,
.gm-team-showcase[data-active-member="dev-automation"] [data-gm-team-member="dev-automation"] .gm-team-name,
.gm-team-row:hover .gm-team-name,
.gm-team-row:focus-visible .gm-team-name {
  color: #F5F5F5;
}

@media (max-width: 1180px) {
  .gm-team-showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .gm-team-photos {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
  }
}

@media (max-width: 720px) {
  .gm-team-showcase {
    gap: 24px;
  }

  .gm-team-photos {
    gap: 8px;
    margin-right: -48px;
    padding-right: 48px;
  }

  .gm-team-photo-col {
    gap: 8px;
  }

  .gm-team-photo-col-2 { padding-top: 46px; }
  .gm-team-photo-col-3 { padding-top: 21px; }

  .gm-team-photo,
  .gm-team-photo-col-2 .gm-team-photo,
  .gm-team-photo-col-3 .gm-team-photo {
    width: 112px;
    height: 130px;
  }

  .gm-team-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .gm-team-name {
    font-size: 17px;
  }

  .gm-team-role {
    font-size: 12px;
  }
}

/* Blog and case cards enter once, then hand transform control back to :hover.
   `both` kept the animation's final transform above the interaction state. */
.gm-card,
.gm-case {
  animation-fill-mode: backwards;
}

/* ============================================================
   Homepage light-theme pilot — header + bg drops + hero only
   ============================================================
   2026-08-21. `html[data-gm-theme="light"]` is set ONLY by the toggle script
   in templates/pages/home.html.j2 — no other template reads or writes it, so
   every rule below is inert on every page except the homepage. Everything
   here is an ADDITIVE override (!important against existing inline hex), not
   a rewrite: base.html.j2, header.html.j2 and macros.html.j2 are untouched,
   so this pilot carries zero risk to any other route.
   Paper values match the canon already live on contact/thank-you/blog
   (#F5F3EF / #14110E) and the paper-violet documented in
   docs/design/DS-SPLATTER-SPEC.md (#7B1FD1). Light splatter assets are a new
   "ink-blot" shape family (static/icons/blots-a.svg / blots-b.svg) — a
   rounded stain instead of the drip-with-bead anatomy, on purpose: the drip's
   trailing bead reads as a drop of blood, which is wrong on paper. */
:root {
  --gm-fg-rgb: 245 245 245;
  --gm-bg: #090909;
  --gm-accent: #E91E96;
  --gm-violet: #A736FF;
  --gm-note-shadow: 0 2px 10px rgba(0,0,0,.7);
  /* alpha for de-emphasised text. .58 measured 4.45:1 on paper — just under
     the 4.5 floor — so muted copy is one token, not a per-rule guess. */
  --gm-muted-a: .62;
}
html[data-gm-theme="light"] {
  --gm-fg-rgb: 20 17 14;
  --gm-bg: #F5F3EF;
  --gm-accent: #A8156A;
  --gm-violet: #7B1FD1;
  --gm-note-shadow: 0 2px 14px rgba(255,255,255,.6);
}

/* Almost everything on this site is inline-styled (style="color:#F5F5F5"),
   which always outranks an external stylesheet rule regardless of selector
   specificity. Every property below competes with an inline value, so
   !important is load-bearing here, not decorative — without it this whole
   block is a silent no-op. */
/* PAGE STRUCTURE IN LIGHT MODE — paper ground, dark islands
   ==========================================================
   The ground goes on `body`. An earlier revision painted it per-section with
   a full-bleed ::before, because at that point only the hero was themed and a
   body-wide colour leaked under unthemed sections. Now that the theme covers
   whole pages, body is the right place: it needs no per-section registry, it
   cannot leave dark bars on wide monitors, and it removes a pseudo-element
   whose z-index had to be negative to avoid covering in-flow content.

   What stays dark is then explicit rather than accidental: anything marked
   `.gm-dark` is an island that keeps the dark design inside it — the closing
   CTA slab, the footer, the cookie banner, and media cards that carry their
   own scrim (case posters, process comics). Two things matter for an island:
   it must set an OPAQUE background of its own, and the gm-t-* text classes
   inside it flip back to the dark palette (see the revert block below).
   Opacity matters because several islands paint a semi-transparent gradient
   and let the page show through — tuned for a dark body, that reads as depth;
   over paper it turns into washed mauve. */
html[data-gm-theme="light"] body { background: var(--gm-bg) !important; color: rgb(var(--gm-fg-rgb)) !important; }

/* Islands that must keep the dark design. Most already paint an opaque
   surface of their own (.gm-poster #0D0D0D, .gm-comic #0A0A0A, the cookie
   banner #0C0C0E, the newsletter card #14110E) and need nothing added. Two
   do not: the closing CTA paints a radial whose inner stops are translucent,
   and the footer paints a gradient that fades to transparent at both edges.
   Both were tuned to sit on a dark body; over paper they turn washed mauve,
   so they get an explicit opaque backing. */
html[data-gm-theme="light"] .gm-dark { background-color: #0A0A0C; }
html[data-gm-theme="light"] [data-screen-label="Final CTA"] { background-color: #0a0207 !important; }
html[data-gm-theme="light"] [data-screen-label="Footer"] { background-color: #070707 !important; }

/* Inside a dark island the semantic text classes mean the opposite, so they
   revert to the dark-design palette. This is what lets the annotation pass be
   blanket: mark the text once, and its location decides how it resolves.
   Nothing needs re-declaring per class: every gm-t-* rule below is written in
   terms of --gm-fg-rgb / --gm-accent, so redefining those two custom
   properties on the island makes each descendant resolve to the dark palette
   by inheritance. */
html[data-gm-theme="light"] :is(.gm-dark, .gm-poster, .gm-comic, .gm-tst-stage, .gm-nl-card, [data-gm-cookie], [data-screen-label="Final CTA"], [data-screen-label="Footer"]) {
  --gm-fg-rgb: 245 245 245;
  --gm-accent: #E91E96;
  --gm-violet: #A736FF;
}

/* ---- themed middle sections ----
   Driven by four semantic classes added to home.html.j2 (gm-t-ink /
   gm-t-body / gm-t-muted / gm-t-accent / gm-t-line) rather than by matching
   the inline style strings. Attribute matching looked tempting on a codebase
   that is 100% inline-styled, but gm-behaviors.js writes to element.style on
   every [data-reveal] node (the stagger sets transition-delay), and any
   CSSOM write makes the browser re-serialise the whole attribute in
   normalised form — "rgba(245,245,245,.5)" becomes "rgba(245, 245, 245,
   0.5)". Half the selectors silently stopped matching, which is exactly the
   class of bug that shipped white-on-white to production.
   The classes are applied only in the sections that go light; the Final CTA
   (white text on magenta) and the case/process cards (light text on their
   own dark surfaces) deliberately keep their dark-design colours. */
html[data-gm-theme="light"] .gm-t-ink,
html[data-gm-theme="light"] .gm-stitle,
html[data-gm-theme="light"] .gm-trusted-name { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-t-body { color: rgb(var(--gm-fg-rgb) / .74) !important; }
html[data-gm-theme="light"] .gm-t-muted { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)) !important; }
html[data-gm-theme="light"] .gm-t-accent { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-trusted-tagline,
html[data-gm-theme="light"] .gm-trusted-period { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)) !important; }
html[data-gm-theme="light"] .gm-partner-badge { filter: invert(1) opacity(.86); }
html[data-gm-theme="light"] .gm-partner-badge:hover { filter: invert(1) opacity(1); }

/* keylines: the dark design draws them in white alpha, invisible on paper */
html[data-gm-theme="light"] .gm-t-line,
html[data-gm-theme="light"] [data-screen-label="Featured cases"] { border-color: rgb(var(--gm-fg-rgb) / .12) !important; }
html[data-gm-theme="light"] .gm-srow:hover { background: rgb(var(--gm-fg-rgb) / .04) !important; }
html[data-gm-theme="light"] .gm-srow:hover .gm-stitle { color: var(--gm-accent) !important; }

/* outline CTAs (What we do / Cases / About) */
html[data-gm-theme="light"] main .gm-cta { color: rgb(var(--gm-fg-rgb)) !important; border-color: var(--gm-accent) !important; }
html[data-gm-theme="light"] main .gm-cta:hover { background: var(--gm-accent) !important; color: #FFF !important; }
html[data-gm-theme="light"] .gm-carousel-btn { border-color: rgb(var(--gm-fg-rgb) / .22) !important; color: rgb(var(--gm-fg-rgb)) !important; }

/* About: handwritten note, value rings and their icons */
html[data-gm-theme="light"] .gm-about-note { color: rgb(var(--gm-fg-rgb) / .78) !important; }
html[data-gm-theme="light"] .gm-about-note span { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-vring { border-color: rgb(var(--gm-fg-rgb) / .22) !important; }
html[data-gm-theme="light"] .gm-vring svg { stroke: rgb(var(--gm-fg-rgb) / .6); }
html[data-gm-theme="light"] .gm-value:hover .gm-vring { border-color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-side-note { color: rgb(var(--gm-fg-rgb) / .28) !important; }

/* Flow diagram: підписи каналів стоять на папері, а не на чорному диску —
   у dark-палітрі вони світлі й на світлому тлі зникали. Іконки всередині
   дисків лишаються світлими (див. .gm-flow-ico), диски навмисно чорні. */
html[data-gm-theme="light"] .gm-flow-label { fill: rgb(var(--gm-fg-rgb) / .7); }

/* violet decor deepens on paper (canon: DS-SPLATTER-SPEC.md §palette) */
html[data-gm-theme="light"] [data-screen-label="Process"] path[stroke="#A736FF"] { stroke: var(--gm-violet); }

/* ---- alpha that only works over a dark ground ----
   Two places de-emphasise or soften an element with partial opacity. Over
   #090909 the ground bleeding through is black, so it reads as "dimmed".
   Over paper the same alpha bleeds white through the element and reads as a
   milky haze — visible on the hero artwork and on the two non-active case
   cards (measured: the side cards jumped +25 and +94 mean brightness against
   +2 for the active one). Light mode keeps the intent but expresses it by
   darkening instead of by letting the background through. */
html[data-gm-theme="light"] [data-screen-label="Hero"] [data-gm-art] img { opacity: 1 !important; }
html[data-gm-theme="light"] .gm-case-slide:not(.is-active) { opacity: 1; filter: brightness(.93) saturate(.92); }

/* ============================================================
   Theme rocker — the CSS "rocker switch" pattern
   ============================================================
   Ported from the reference Max supplied (a React/Tailwind snippet wrapping
   the well-known `.rocker` / `.switch-left` / `.switch-right` CSS switch).
   This site is Jinja + plain CSS with no React, so the component is rebuilt
   in our stack: the markup keeps the reference's shape — a real
   `<input type="checkbox">` inside a `<label class="rocker rocker-small">`
   with two spans — and the geometry is the reference's, unchanged in kind:
   the idle half is lifted and tilted with rotate+skewX, the selected half
   sits flat and full-size, and each half's `::before` is the skewed side
   face that gives the switch its thickness. Yes/No become moon/sun.

   Sizing is driven entirely by the element's own font-size (everything below
   is in `em`), so `.rocker-small` is the only knob for fitting the header. */
.rocker {
  display: inline-block; position: relative; vertical-align: middle;
  font-size: 2em; text-align: center; text-transform: uppercase;
  width: 7em; height: 4em; overflow: hidden;
  border-bottom: 0.5em solid var(--gm-rk-frame);
  cursor: pointer;
  --gm-rk-frame: #2b2b31;   /* housing */
  --gm-rk-well: #17171a;    /* recess behind the halves */
  --gm-rk-idle: #33333b;    /* raised, unselected half */
  --gm-rk-edge: #23232a;    /* its side face */
  --gm-rk-idle-ink: rgba(245,245,245,.42);
}
html[data-gm-theme="light"] .rocker {
  --gm-rk-frame: #e2ddd3;
  --gm-rk-well: #cfc9be;
  --gm-rk-idle: #f4f1ea;
  --gm-rk-edge: #ddd7cb;
  --gm-rk-idle-ink: rgba(20,17,14,.45);
}
/* header fit: 11px base => 77 x 44px */
.rocker-small { font-size: 11px; margin: 0 2px 0 0; }

.rocker::before {
  content: ""; position: absolute; top: 0.5em; left: 0; right: 0; bottom: 0;
  background-color: var(--gm-rk-well);
  border: 0.5em solid var(--gm-rk-frame); border-bottom: 0;
}
.rocker input { opacity: 0; width: 0; height: 0; position: absolute; }

.switch-left,
.switch-right {
  cursor: pointer; position: absolute; display: flex;
  align-items: center; justify-content: center;
  height: 2.5em; width: 3em; transition: 0.2s; user-select: none;
}
.switch-left svg, .switch-right svg { width: 1.5em; height: 1.5em; display: block; }

/* default (unchecked) = dark theme: the moon is the pressed side */
.switch-left {
  left: 0.5em; bottom: 0; height: 2.5em; width: 3em;
  background-color: var(--gm-accent); color: #fff;
  transform: rotate(0deg) skewX(0deg);
}
.switch-right {
  right: 0.5em; bottom: 0.4em; height: 2.4em; width: 2.75em;
  background-color: var(--gm-rk-idle); color: var(--gm-rk-idle-ink);
  transform: rotate(-15deg) skewX(-15deg);
}
.switch-left::before,
.switch-right::before {
  content: ""; position: absolute; width: 0.4em; height: 2.45em; bottom: -0.45em;
  background-color: var(--gm-rk-edge);
}
.switch-left::before { left: -0.4em; background-color: transparent; transform: skewY(-65deg); }
.switch-right::before { right: -0.375em; transform: skewY(65deg); }

/* checked = light theme: the sun takes the pressed position, moon lifts */
.rocker input:checked + .switch-left {
  background-color: var(--gm-rk-idle); color: var(--gm-rk-idle-ink);
  bottom: 0.4em; left: 0.85em; height: 2.4em; width: 2.75em;
  transform: rotate(15deg) skewX(15deg);
}
.rocker input:checked + .switch-left::before { background-color: var(--gm-rk-edge); }
.rocker input:checked + .switch-left + .switch-right {
  background-color: var(--gm-accent); color: #fff;
  bottom: 0; right: 0.5em; height: 2.5em; width: 3em;
  transform: rotate(0deg) skewX(0deg);
}
.rocker input:checked + .switch-left + .switch-right::before {
  background-color: transparent; width: 3.0833em;
}

.rocker input:focus-visible + .switch-left { outline: 2px solid var(--gm-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch-left, .switch-right { transition: none; } }
@media (max-width: 860px) { .rocker-small { font-size: 9.5px; } }

/* header (shared partial, untouched — pure attribute-scoped override).
   Needs its own opaque background: it's fixed, so once the page scrolls past
   the (now light) hero it would otherwise show dark-ink text over whatever
   dark section is currently underneath it. */
html[data-gm-theme="light"] .gm-header { background: var(--gm-bg) !important; border-bottom-color: rgba(0,0,0,.08) !important; }
html[data-gm-theme="light"] .gm-header,
html[data-gm-theme="light"] .gm-header .gm-nav a,
html[data-gm-theme="light"] .gm-logo,
html[data-gm-theme="light"] .gm-logo span { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-logo .gm-dot { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-logo .gm-sub { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)) !important; }
html[data-gm-theme="light"] .gm-header .gm-cta { border-color: var(--gm-accent) !important; color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-header .gm-burger span { background: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-lang-dd > summary { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-lang-dd > summary .caret { color: rgb(var(--gm-fg-rgb) / .6) !important; }

/* hero */
html[data-gm-theme="light"] .gm-hero-eyebrow { color: rgb(var(--gm-fg-rgb) / .85) !important; }
html[data-gm-theme="light"] .gm-hero-star { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-hero-line-1 { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-hero-line-2 { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-hero-sub { color: rgb(var(--gm-fg-rgb) / .72) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-ring { border-color: rgb(var(--gm-fg-rgb) / .28) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-arrow { color: rgb(var(--gm-fg-rgb) / .7) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-label { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)) !important; }
html[data-gm-theme="light"] .gm-hero-note { color: rgb(var(--gm-fg-rgb) / .76) !important; text-shadow: var(--gm-note-shadow) !important; }
html[data-gm-theme="light"] [data-screen-label="Hero"] .gm-secondary { border-color: rgb(var(--gm-fg-rgb) / .32) !important; color: rgb(var(--gm-fg-rgb)) !important; }

/* ---- shared components in light mode ----
   These live in site.css (generated) with hard-coded dark values, so every
   page inherits them. Overriding them once here covers all pages at once and
   keeps the per-template work to text annotation only. Rules that only apply
   inside a dark island are deliberately absent: the island redefines the
   colour tokens, so anything token-driven already resolves correctly there. */
html[data-gm-theme="light"] .gm-secondary { border-color: rgb(var(--gm-fg-rgb) / .3) !important; color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-secondary:hover { background: rgb(var(--gm-fg-rgb) / .05) !important; border-color: rgb(var(--gm-fg-rgb) / .5) !important; }

html[data-gm-theme="light"] :is(.gm-timeline-control, .gm-spot-control, .gm-carousel-btn, .gm-tst-arrow) {
  border-color: rgb(var(--gm-fg-rgb) / .24) !important; color: rgb(var(--gm-fg-rgb)) !important;
}
html[data-gm-theme="light"] :is(.gm-timeline-control, .gm-spot-control):hover:not(:disabled),
html[data-gm-theme="light"] :is(.gm-timeline-control, .gm-spot-control):focus-visible {
  border-color: var(--gm-accent) !important; background: var(--gm-accent) !important; color: #fff !important;
}

html[data-gm-theme="light"] .gm-faq { border-color: rgb(var(--gm-fg-rgb) / .14) !important; }
html[data-gm-theme="light"] .gm-pill:hover { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-pill.is-active { background: var(--gm-accent) !important; border-color: var(--gm-accent) !important; color: #fff !important; }
html[data-gm-theme="light"] .gm-sel select { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-sel select option { background: #FFFFFF; color: #14110E; }

/* the compare table's scroll fade is a mask, not a colour — it survives the
   theme swap; only its column hover was tuned for a dark ground */
html[data-gm-theme="light"] .gm-cmp-col:hover { background: rgb(var(--gm-fg-rgb) / .04) !important; }

/* FAQ cards are body copy, so on paper they become light cards rather than
   staying dark islands (a dark block of Q&A reads as a foreign object in an
   otherwise light article). Surface only — the text is annotated. */
html[data-gm-theme="light"] .gm-faq { background: #FFFFFF !important; }
html[data-gm-theme="light"] .gm-faq[data-faq-open] { border-color: rgb(168 21 106 / .4) !important; }

/* Full-bleed content bands (.gm-band) — the dark design uses a horizontal
   gradient that fades to transparent at both edges to lift a section off the
   page. That device is about rhythm, not about being a dark object: the
   content inside is ordinary body copy. On paper it becomes a slightly deeper
   sheet instead of a black stripe, which keeps the alternation without
   turning a light page into a zebra. */
html[data-gm-theme="light"] .gm-band { --gm-bg: #EFEBE3; background: var(--gm-bg) !important; }

/* Handwritten decorative notes. In the dark design they are drawn in the
   violet decor layer or in soft magenta; both were picked to glow against
   near-black. On paper the same hues lose contrast, so they deepen to the
   documented paper values (DS-SPLATTER-SPEC.md: violet #7B1FD1, accent
   #A8156A). They stay decorative — no attempt to make them body-copy dark. */
html[data-gm-theme="light"] .gm-t-note { color: var(--gm-violet) !important; text-shadow: none !important; }

/* Empty rating stars are drawn in #3a3a3a — a dark grey that disappears into
   near-black and so reads as "unfilled". On paper that same grey is darker
   than the page and would read as FILLED, inverting the meaning of the row. */
/* Empty rating stars. The dark design draws them #3a3a3a on #080808 — about
   1.9:1, deliberately "unfilled". Paper keeps that intent but lands a little
   higher than the original, so the row is easier to read while the filled
   stars still carry the signal. A rating that leans on contrast alone is a
   pre-existing weakness of this table in BOTH themes, not something the light
   theme introduced; fixing it properly means changing the glyphs, not the
   colour, and that is a redesign. */
html[data-gm-theme="light"] .gm-t-faint { color: rgb(var(--gm-fg-rgb) / .42) !important; }

/* ---- content cards become light cards on paper ----
   These surfaces are defined by class in the generated site.css (a grouped
   `background:#080808 !important` block plus a few singles), not inline, so
   they survived the switch to a paper body and left ink text sitting on
   near-black. They are content containers — service cards, value and step
   cards, comparison columns, quiz options, timeline cards — not media
   objects, so on paper they become light cards rather than dark islands.
   Deliberately NOT in this list: .gm-poster / .gm-case / .gm-comic and the
   other photographic cards, which keep their scrim and stay dark islands.
   The !important is required to beat site.css's own !important. */
html[data-gm-theme="light"] :is(
  .gm-svc, .gm-quiz-opt, .gm-rec-card, .gm-cmp-scroll, .gm-combo, .gm-pcard,
  .gm-val, .gm-step, .gm-ind, .gm-chan-out, .gm-timeline-card, .gm-spotlight-card,
  .gm-featcase, .gm-tst-arrow
) {
  background: #FFFFFF !important;
  border-color: rgb(var(--gm-fg-rgb) / .12) !important;
}
html[data-gm-theme="light"] :is(.gm-svc, .gm-combo, .gm-cmp-col, .gm-timeline-card):hover {
  background: #FFFFFF !important; border-color: rgb(168 21 106 / .4) !important;
}
html[data-gm-theme="light"] .gm-timeline-image { background: #EFEBE3 !important; }

/* Blog and article carry their own opaque `background:#090909` on the hero and
   closing CTA — the body of both pages was already paper in the dark design,
   so these two bands were the contrast, not the ground. With the whole site on
   paper that inversion no longer holds: the bands would be the only dark thing
   on an otherwise light page, and their copy is annotated as ink. Both become
   ground-coloured, which also makes the blog read as one continuous sheet. */
html[data-gm-theme="light"] :is(
  [data-screen-label="Blog hero"],
  [data-screen-label="Article hero"],
  [data-screen-label="CTA"]
) { background: var(--gm-bg) !important; color: rgb(var(--gm-fg-rgb)) !important; }

/* ---- class-driven text colours (About timeline + team showcase) ----
   These two blocks style their text through CSS classes rather than inline
   attributes, so the per-element annotation pass could not reach them: the
   markup carries no `color:` to classify. They are mapped here by hand
   against the same token set, so they follow the theme like everything else.
   Anything whose colour lives in a stylesheet rather than in the markup needs
   an entry like this — worth remembering when a new component is added. */
html[data-gm-theme="light"] :is(.gm-timeline-title, .gm-timeline-count, .gm-timeline-statement, .gm-team-name) { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] :is(.gm-timeline-intro, .gm-timeline-description) { color: rgb(var(--gm-fg-rgb) / .74) !important; }
html[data-gm-theme="light"] :is(.gm-timeline-eyebrow, .gm-timeline-hint, .gm-timeline-meta, .gm-timeline-meta span:first-child, .gm-team-role) { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)) !important; }
html[data-gm-theme="light"] :is(.gm-timeline-statement strong, .gm-team-mark) { color: var(--gm-accent) !important; }

/* Markdown-rendered longform: its headings, links and emphasis are styled by
   descendant rules (the HTML comes from the Markdown filter, so there is no
   markup to annotate). Same situation as the timeline and team blocks. */
html[data-gm-theme="light"] :is(.gm-seo-longform h2, .gm-seo-longform h3, .gm-seo-longform strong) { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-seo-longform a { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-seo-longform a:hover { color: #7E0F4F !important; }

/* Pagination and filter pills: white-on-dark defaults that survive on paper */
html[data-gm-theme="light"] .gm-page { color: rgb(var(--gm-fg-rgb)) !important; border-color: rgb(var(--gm-fg-rgb) / .16) !important; }
html[data-gm-theme="light"] .gm-page.is-active { background: var(--gm-accent) !important; border-color: var(--gm-accent) !important; color: #fff !important; }
html[data-gm-theme="light"] .gm-page:hover { border-color: var(--gm-accent) !important; color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-fpill { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-fpill:hover { color: var(--gm-accent) !important; }
/* an active filter is a magenta chip — its label must stay white on that fill,
   not inherit the page's ink (measured 3.51:1 before this) */
html[data-gm-theme="light"] .gm-fpill[aria-pressed="true"],
html[data-gm-theme="light"] .gm-fpill.is-active {
  background: var(--gm-accent) !important; border-color: var(--gm-accent) !important; color: #fff !important;
}

/* ---- SVG icons ----
   Icons are coloured with SVG presentation attributes (stroke="rgba(245,…)"),
   not inline style, so the annotation pass skipped them and they stayed
   near-white — invisible on paper. Attribute selectors are safe here in a way
   they are not for style="": presentation attributes are plain attributes,
   never re-serialised by CSSOM, so the string matches exactly. Any CSS rule
   also outranks a presentation attribute, so no !important is needed.
   Inside a dark island --gm-fg-rgb flips back, so these resolve to light
   strokes there automatically. */
html[data-gm-theme="light"] [stroke="rgba(245,245,245,.55)"],
html[data-gm-theme="light"] [stroke="rgba(245,245,245,.5)"],
html[data-gm-theme="light"] [stroke="rgba(245,245,245,.72)"],
html[data-gm-theme="light"] [stroke="rgba(255,255,255,.18)"] { stroke: rgb(var(--gm-fg-rgb) / .66); }
html[data-gm-theme="light"] [fill="rgba(245,245,245,.55)"] { fill: rgb(var(--gm-fg-rgb) / .66); }

/* violet decor deepens on paper (canon: DS-SPLATTER-SPEC.md) */
html[data-gm-theme="light"] [stroke="#A736FF"] { stroke: var(--gm-violet); }
html[data-gm-theme="light"] [fill="#A736FF"] { fill: var(--gm-violet); }

/* chart dots are outlined in the dark page colour to punch them off the line */
html[data-gm-theme="light"] [stroke="#0A0A0A"] { stroke: var(--gm-bg); }

/* ---- pink glows off on paper ----
   Sixteen decorative radial washes (rgba(233,30,150,.22….34)) sit behind hero
   artwork and contact blocks. Over near-black they read as light spilling off
   the magenta; over paper the same wash is a pink smudge on white — the same
   family of problem as the opacity haze. Depth on paper comes from contrast
   and keylines, not from glow, so they are simply off. */
html[data-gm-theme="light"] .gm-glow { display: none !important; }

/* Sticky filter bar: a translucent scrim so cards stay readable while they
   scroll under it. It was a dark scrim; on paper that is a smoky band. */
html[data-gm-theme="light"] [data-screen-label="Filters"] {
  background: linear-gradient(90deg, rgba(245,243,239,0) 0%, rgba(245,243,239,.24) 16%, rgba(245,243,239,.9) 30%, rgba(245,243,239,.9) 70%, rgba(245,243,239,.24) 84%, rgba(245,243,239,0) 100%) !important;
}

/* ---- approval stamp ----
   The stamp fakes worn ink by overprinting near-black strokes (#080808) that
   match the dark page, so the violet looks eaten away. On paper those strokes
   stop being absence and become grey bars painted across the stamp. They must
   be the colour behind the stamp instead — hence --gm-bg, which .gm-band
   redefines for the section the stamp actually sits in. The violets are also
   dark-tuned and go to the canon paper violet. */
html[data-gm-theme="light"] .gm-approval-stamp-wear { stroke: var(--gm-bg); }
html[data-gm-theme="light"] .gm-approval-stamp-rings { stroke: var(--gm-violet); }
html[data-gm-theme="light"] .gm-approval-stamp-ring-text,
html[data-gm-theme="light"] .gm-approval-stamp-word { fill: var(--gm-violet); }
html[data-gm-theme="light"] .gm-approval-stamp {
  filter: drop-shadow(0 14px 26px rgba(20,17,14,.16));
  opacity: .92;
}

/* ---- splatter back in the footer ----
   The footer's own gradient fades to transparent at both edges, which in the
   dark design let the fixed drops layer show through — that is where the
   footer's paint splashes came from. Giving the footer an opaque backing for
   paper covered them up. Painting the same two drop clusters inside the
   footer restores them without reopening the edges to the page colour.
   z-index 0 keeps them under .gm-footer-grid, which is already z-index 1. */
html[data-gm-theme="light"] [data-screen-label="Footer"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/static/icons/drops-a.svg'), url('/static/icons/drops-b.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: -60px top, right -70px bottom;
  background-size: 250px auto, 300px auto;
  opacity: .42;
}

/* Stepper nodes colour their icon through `currentColor`, and that colour is
   set by a class in site.css rather than in the markup — so neither the
   annotation pass nor the stroke-attribute overrides reached them, and the
   icons stayed near-white. The beam line and its glow are violet decor. */
html[data-gm-theme="light"] .gm-beam-node { color: rgb(var(--gm-fg-rgb) / .55); }
html[data-gm-theme="light"] [data-drawn] .gm-beam-node { color: var(--gm-accent); border-color: rgb(168 21 106 / .45); }
html[data-gm-theme="light"] .gm-beam-node:hover { box-shadow: 0 0 26px rgb(168 21 106 / .22); border-color: rgb(168 21 106 / .6); }
html[data-gm-theme="light"] [stroke="rgba(167,54,255,.42)"] { stroke: rgb(123 31 209 / .45); }

/* language control on paper */
html[data-gm-theme="light"] .gm-lang-dd > summary {
  --gm-lang-ink: rgb(var(--gm-fg-rgb));
  --gm-lang-line: rgb(var(--gm-fg-rgb) / .2);
}
html[data-gm-theme="light"] .gm-lang-panel {
  background: #FFFFFF; border-color: rgb(var(--gm-fg-rgb) / .12);
  box-shadow: 0 18px 44px rgb(20 17 14 / .16);
}
html[data-gm-theme="light"] .gm-lang-item { color: rgb(var(--gm-fg-rgb)); }
html[data-gm-theme="light"] .gm-lang-item .name { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)); }
html[data-gm-theme="light"] .gm-lang-item:hover { background: rgb(var(--gm-fg-rgb) / .05); color: var(--gm-accent); }
html[data-gm-theme="light"] .gm-lang-item[aria-current="true"],
html[data-gm-theme="light"] .gm-lang-item .check { color: var(--gm-accent); }
html[data-gm-theme="light"] .gm-lang-item[aria-current="true"] .name { color: rgb(168 21 106 / .8); }

/* ---- full-bleed article hero on paper ----
   31 of 43 articles put a photo behind the hero with a scrim that fades from
   near-opaque #090909 on the left, so light copy reads over it. Annotating the
   copy as ink turned that into dark-on-dark: measured, the title sat at
   rgb(20,17,14) on a scrim of mean brightness 13 — effectively invisible.
   The contrast gate cannot see this: it deliberately skips text over images
   and gradients, because contrast against arbitrary imagery is not computable.
   Found by sampling the rendered pixels instead. The scrim becomes paper, so
   the ink copy reads and the photo still fades in from the right. */
html[data-gm-theme="light"] .gm-editorial-hero-bg::after {
  background: linear-gradient(90deg, rgba(245,243,239,.97) 0%, rgba(245,243,239,.93) 34%, rgba(245,243,239,.34) 66%, rgba(245,243,239,.06) 100%) !important;
}
@media (max-width: 680px) {
  html[data-gm-theme="light"] .gm-editorial-hero-bg::after {
    background: linear-gradient(180deg, rgba(245,243,239,.9) 0%, rgba(245,243,239,.96) 58%, rgba(245,243,239,.76) 100%) !important;
  }
}

/* hero headline flip (prototype port) */
.gm-cycle-word { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: .9; cursor: pointer; }
.gm-flip-row { display: flex; }
.gm-flip-top { position: relative; z-index: 1; }
.gm-flip-bottom { position: absolute; inset: 0; z-index: 2; }
.gm-flip-row .gm-ltr { display: inline-block; transform: translateY(0); transition: transform .46s cubic-bezier(.65,0,.35,1); }
.gm-flip-bottom .gm-ltr { transform: translateY(110%); }
.gm-flip-top.is-out .gm-ltr { transform: translateY(-110%); }
.gm-flip-bottom.is-in .gm-ltr { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .gm-flip-row .gm-ltr { transition: none; } }

/* =====================================================================
   Перенесення з концептів ink.grandma.click і next.grandma.click
   (рішення Макса 03.09.2026, v0.38.0). Логіка — static/js/gm-ink.js.
   Кожен блок opt-in через клас або data-атрибут у шаблоні.
   ===================================================================== */

/* ---- крапля-провідник (ink · B2): гуї-кулька, що летить між секціями ---- */
.gm-comet { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .6s; }
.gm-comet.is-live { opacity: 1; }
.gm-comet-goo { position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; filter: url(#gm-goo); }
.gm-comet-b { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: var(--gm-accent, #E91E96); transform: translate(-50%,-50%); box-shadow: 0 0 40px -6px rgba(233,30,150,.7); will-change: transform; }
.gm-comet-b:nth-child(1) { width: 34px; height: 34px; }
.gm-comet-b:nth-child(2) { width: 24px; height: 24px; }
.gm-comet-b:nth-child(3) { width: 18px; height: 18px; }
.gm-comet-b:nth-child(4) { width: 12px; height: 12px; }
.gm-comet-b:nth-child(5) { width: 8px; height: 8px; }
@media (max-width: 900px) { .gm-comet-goo { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .gm-comet { display: none !important; } }

/* ---- маркі клієнтів (ink · B5): на всю ширину екрана, скіс від скролу ---- */
.gm-marq { position: relative; z-index: 1; width: 100%; padding: 40px 0 20px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.09); }
.gm-marq-row { position: relative; overflow: hidden; white-space: nowrap; padding: 8px 0; }
.gm-marq-track { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(34px, 4.6vw, 72px); line-height: 1; text-transform: uppercase; color: rgba(245,245,245,.9); will-change: transform; }
.gm-marq-clone { position: absolute; left: 0; top: 8px; }
.gm-marq-track i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #E91E96; }
.gm-marq-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; color: inherit; text-decoration: none; transition: color .3s; }
.gm-marq-brand:hover { color: #E91E96; }
/* категорія бренду — щоб було зрозуміло, хто це (запит Ксю) */
.gm-marq-cat { font-family: 'JetBrains Mono', monospace; font-size: clamp(9px, .8vw, 11px); letter-spacing: .28em; line-height: 1; color: rgba(245,245,245,.45); }
.gm-marq-row-alt .gm-marq-track { gap: 48px; padding-right: 48px; font-family: 'JetBrains Mono', monospace; font-size: clamp(13px, 1.3vw, 17px); letter-spacing: .3em; color: #9A9A9A; }
.gm-marq-row-alt .gm-marq-track i { width: 6px; height: 6px; background: #A736FF; }
/* партнерства й рейтинги — рядок ink: підпис ліворуч, сірі логотипи, колір на hover */
.gm-marq .gm-partner-strip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3.5vw, 56px); width: min(1320px, 100% - 96px); margin: 0 auto; padding: 38px 0 30px; border-top: 0; }
.gm-marq .gm-partner-strip-label { margin-right: auto; font-size: 10px; letter-spacing: .3em; color: rgba(245,245,245,.38); }
.gm-marq .gm-partner-badges { display: contents; }
.gm-marq .gm-partner-badge { height: 32px; max-width: none; opacity: .55; filter: grayscale(1) brightness(1.4); transition: opacity .35s, filter .35s; }
.gm-marq .gm-partner-badge:hover { opacity: 1; filter: none; transform: none; }
html[data-gm-theme="light"] .gm-marq { border-top-color: rgb(var(--gm-fg-rgb) / .12); }
html[data-gm-theme="light"] .gm-marq-track { color: rgb(var(--gm-fg-rgb) / .9); }
html[data-gm-theme="light"] .gm-marq-brand:hover { color: var(--gm-accent); }
html[data-gm-theme="light"] .gm-marq .gm-partner-badge { opacity: .6; filter: invert(1) grayscale(1); }
html[data-gm-theme="light"] .gm-marq .gm-partner-badge:hover { opacity: 1; filter: invert(1); }
@media (max-width: 900px) {
  .gm-marq { padding-top: 28px; }
  .gm-marq .gm-partner-strip { width: calc(100% - 48px); gap: 16px 22px; padding: 28px 0 20px; }
  .gm-marq .gm-partner-strip-label { width: 100%; margin-right: 0; }
  .gm-marq .gm-partner-badge { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-marq-row { overflow-x: auto; }
  .gm-marq-clone { display: none; }
}

/* ---- плашки каналів (ink · B10): заливка маджентою зліва при hover ----
   Спільний вигляд для всіх сторінок; базові стилі — в макросі
   channel_button. Без магніту: інлайновий transform від magnet бився з
   hover-зсувом і давав ривки. */
.gm-chan { transition: border-color .35s, transform .5s cubic-bezier(.16,1,.3,1); }
.gm-chan::before { content: ""; position: absolute; inset: 0; background: #E91E96; transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.16,1,.3,1); z-index: -1; }
.gm-chan:hover::before, .gm-chan:focus-visible::before { transform: scaleX(1); }
.gm-chan:hover, .gm-chan:focus-visible { border-color: #E91E96 !important; transform: translateX(6px); }
.gm-chan-label { grid-row: 1; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px !important; line-height: 1.2; }
.gm-chan-note { grid-row: 2; font-family: 'Montserrat', sans-serif; font-size: 12px; transition: color .3s; }
.gm-chan-arrow { grid-row: 1 / 3; grid-column: 2; font-size: 22px; line-height: 1; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.gm-chan:hover .gm-chan-arrow, .gm-chan:focus-visible .gm-chan-arrow { transform: translate(4px,-4px); }
.gm-chan:hover .gm-chan-label, .gm-chan:hover .gm-chan-arrow, .gm-chan:focus-visible .gm-chan-label { color: #fff !important; }
.gm-chan:hover .gm-chan-note, .gm-chan:focus-visible .gm-chan-note { color: rgba(255,255,255,.85) !important; }
html[data-gm-theme="light"] .gm-chan::before { background: var(--gm-accent); }
html[data-gm-theme="light"] .gm-chan-out { background: rgba(255,255,255,.7) !important; border-color: rgb(var(--gm-fg-rgb) / .18) !important; }
html[data-gm-theme="light"] .gm-chan-primary { background: linear-gradient(120deg, #FF4FA3, #A8156A) !important; border-color: transparent !important; }
html[data-gm-theme="light"] .gm-chan:hover, html[data-gm-theme="light"] .gm-chan:focus-visible { border-color: var(--gm-accent) !important; }
@media (prefers-reduced-motion: reduce) {
  .gm-chan, .gm-chan::before, .gm-chan-arrow { transition: none; }
  .gm-chan:hover { transform: none; }
}

/* ---- водяний знак «.grandma» у футері (next) — сюди сідає крапля ---- */
.gm-footer-watermark { position: absolute; left: 50%; bottom: -.22em; z-index: 0; display: flex; align-items: baseline; gap: .03em; transform: translateX(-50%); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(6rem, 22vw, 22rem); line-height: 1; letter-spacing: -.04em; color: rgba(255,255,255,.035); white-space: nowrap; pointer-events: none; user-select: none; }
.gm-footer-dot { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: rgba(233,30,150,.35); }

/* ---- маніфест (next): слова заливаються за прогресом скролу ---- */
.gm-manifesto { position: relative; z-index: 1; width: 100%; padding: clamp(80px, 12vw, 180px) 0; background: #0E0E0E; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); }
.gm-manifesto-text { margin: 0; max-width: 1200px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2.2rem, 5.4vw, 5.2rem); line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; }
.gm-manifesto-text .gm-w { color: rgba(245,245,245,.16); transition: color .2s; }
.gm-manifesto-text .gm-w.is-lit { color: #F5F5F5; }
.gm-manifesto-text em { font-style: normal; }
.gm-manifesto-text em .gm-w.is-lit { color: #E91E96; }
html[data-gm-theme="light"] .gm-manifesto { background: #EFEBE2; border-color: rgb(var(--gm-fg-rgb) / .12); }
html[data-gm-theme="light"] .gm-manifesto-text .gm-w { color: rgb(var(--gm-fg-rgb) / .16); }
html[data-gm-theme="light"] .gm-manifesto-text .gm-w.is-lit { color: rgb(var(--gm-fg-rgb)); }
html[data-gm-theme="light"] .gm-manifesto-text em .gm-w.is-lit { color: var(--gm-accent); }
@media (prefers-reduced-motion: reduce) {
  .gm-manifesto-text .gm-w { color: #F5F5F5; }
  .gm-manifesto-text em .gm-w { color: #E91E96; }
}

/* ---- процес «04 how it works» (next): липка ліва колонка з лічильником ---- */
.gm-proc-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.gm-proc-sticky { position: sticky; top: 120px; }
.gm-proc-hand { display: block; margin-top: .15em; font-family: 'Permanent Marker', cursive; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.25; letter-spacing: .01em; color: #A736FF; text-transform: none; }
.gm-proc-counter { display: flex; align-items: baseline; gap: .2em; margin-top: 2.4rem; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(5rem, 12vw, 11rem); line-height: .8; color: #E91E96; }
.gm-proc-num { display: inline-block; }
.gm-proc-num.is-flip { animation: gm-proc-flip .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes gm-proc-flip { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
.gm-proc-of { font-size: .28em; color: rgba(245,245,245,.46); }
.gm-proc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(24px, 4vw, 56px); }
.gm-proc-step { display: grid; grid-template-columns: .42fr .58fr; gap: clamp(18px, 2.5vw, 36px); align-items: center; padding: clamp(18px, 2.4vw, 32px); border-radius: 24px; background: #111111; border: 1px solid rgba(255,255,255,.09); transition: border-color .4s; }
.gm-proc-step.is-current { border-color: rgba(233,30,150,.6); }
.gm-proc-step img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 16px; }
.gm-proc-role { display: block; font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,245,245,.46); }
.gm-proc-step h3 { margin: .4em 0 .5em; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: .95; letter-spacing: .005em; color: #F5F5F5; }
.gm-proc-step p { margin: 0; font-family: 'Montserrat', sans-serif; font-size: .95rem; line-height: 1.6; color: rgba(245,245,245,.72); }
html[data-gm-theme="light"] .gm-proc-step { background: #FBFAF7; border-color: rgb(var(--gm-fg-rgb) / .14); }
html[data-gm-theme="light"] .gm-proc-step.is-current { border-color: rgb(168 21 106 / .6); }
@media (max-width: 900px) {
  .gm-proc-grid { grid-template-columns: 1fr; }
  .gm-proc-sticky { position: static; }
  .gm-proc-counter { display: none; }
  .gm-proc-step { grid-template-columns: 1fr; }
  .gm-proc-step img { aspect-ratio: auto; max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .gm-proc-num.is-flip { animation: none; } }

/* На сторінках із сітками .gm-cta-btns / .gm-talk-btns site.css примусово
   робить плашку flex-рядком з !important (стара іконна версія). Повертаємо
   вигляд ink тією ж специфічністю — цей файл підключений пізніше. */
.gm-cta-btns .gm-chan,
.gm-talk-btns .gm-chan,
.gm-chan {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 18px 22px !important;
  border-radius: 18px !important;
}
.gm-cta-btns .gm-chan-note,
.gm-talk-btns .gm-chan-note { margin-top: 0 !important; }
.gm-cta-btns .gm-chan-label,
.gm-talk-btns .gm-chan-label { font-size: 18px !important; }
.gm-cta-btns .gm-chan-primary,
.gm-talk-btns .gm-chan-primary,
.gm-chan-primary {
  background: linear-gradient(120deg, rgba(255,79,163,.35), rgba(168,21,106,.35)) !important;
  border: 1px solid rgba(233,30,150,.6) !important;
}
.gm-cta-btns .gm-chan-out,
.gm-talk-btns .gm-chan-out,
.gm-cta-btns .gm-chan:not(.gm-chan-primary),
.gm-talk-btns .gm-chan:not(.gm-chan-primary),
.gm-chan-out {
  background: rgba(9,9,9,.4) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.gm-chan:hover, .gm-chan:focus-visible { transform: translateX(6px); border-color: #E91E96 !important; filter: none; }
html[data-gm-theme="light"] .gm-cta-btns .gm-chan-out,
html[data-gm-theme="light"] .gm-talk-btns .gm-chan-out,
html[data-gm-theme="light"] .gm-chan-out { background: rgba(255,255,255,.7) !important; border: 1px solid rgb(var(--gm-fg-rgb) / .18) !important; }
html[data-gm-theme="light"] .gm-cta-btns .gm-chan-primary,
html[data-gm-theme="light"] .gm-talk-btns .gm-chan-primary,
html[data-gm-theme="light"] .gm-chan-primary { background: linear-gradient(120deg, #FF4FA3, #A8156A) !important; border: 1px solid transparent !important; }
@media (prefers-reduced-motion: reduce) { .gm-chan:hover { transform: none; } }
/* У темних островах світлої теми (Final CTA, футер, .gm-dark) плашка лишається
   темною: там --gm-fg-rgb уже світлий, і біла підкладка дала б білий текст
   на білому. */
html[data-gm-theme="light"] :is(.gm-dark, [data-screen-label="Final CTA"], [data-screen-label="Footer"]) .gm-chan-out {
  background: rgba(9,9,9,.4) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
/* Article reader tools: progressive enhancement with an explicit noscript fallback. */
.gm-reader-tool { margin:46px 0; padding:clamp(24px,4vw,38px); border:1px solid rgba(168,21,106,.24); border-top:4px solid #E91E96; border-radius:6px; background:#fff; box-shadow:0 18px 50px rgba(73,35,57,.08); color:#14110e; }
.gm-reader-tool__eyebrow { margin-bottom:12px; font:700 10px/1.2 'JetBrains Mono',monospace; letter-spacing:.2em; color:#A8156A; }
.gm-reader-tool h3 { margin:0; font:750 clamp(24px,3vw,34px)/1.08 'Outfit',sans-serif; letter-spacing:-.025em; }
.gm-reader-tool__intro { margin:12px 0 0; color:#5a544c; font-size:15px; line-height:1.65; }
.gm-reader-tool__fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px; }
.gm-reader-tool__field > label:not(.gm-reader-tool__check) { display:block; margin-bottom:7px; font:650 13px/1.35 'Outfit',sans-serif; }
.gm-reader-tool input:not([type='checkbox']), .gm-reader-tool select { box-sizing:border-box; width:100%; min-height:48px; padding:10px 12px; border:1px solid rgba(20,17,14,.24); border-radius:4px; background:#f8f5ef; color:#14110e; font:500 15px/1.3 'Montserrat',sans-serif; }
.gm-reader-tool__check { display:flex; align-items:flex-start; gap:10px; min-height:48px; padding:12px; box-sizing:border-box; border:1px solid rgba(20,17,14,.16); border-radius:4px; background:#f8f5ef; font:600 14px/1.4 'Montserrat',sans-serif; }
.gm-reader-tool__check input { width:18px; height:18px; margin:1px 0 0; accent-color:#A8156A; }
.gm-reader-tool input:focus-visible, .gm-reader-tool select:focus-visible, .gm-reader-tool button:focus-visible { outline:3px solid rgba(233,30,150,.42); outline-offset:2px; }
.gm-reader-tool__submit, .gm-reader-tool__copy { margin-top:20px; min-height:46px; padding:0 20px; border:0; border-radius:4px; background:#A8156A; color:#fff; cursor:pointer; font:700 13px/1 'Outfit',sans-serif; letter-spacing:.03em; }
.gm-reader-tool__error { margin:10px 0 0; color:#9b1c1c; font-size:13px; }
.gm-reader-tool__result { margin-top:24px; padding:22px; border-left:3px solid #E91E96; background:#f0ebe2; }
.gm-reader-tool__result:focus { outline:none; }
.gm-reader-tool__result h4 { margin:0; font:750 20px/1.2 'Outfit',sans-serif; }
.gm-reader-tool__result p, .gm-reader-tool__fallback p { margin:9px 0 0; font-size:14.5px; line-height:1.65; }
.gm-reader-tool__copy[data-copied='true']::after { content:' ✓'; }
@media (max-width:680px) { .gm-reader-tool__fields { grid-template-columns:1fr; } .gm-reader-tool { margin:36px 0; padding:24px 20px; } }
@media (prefers-reduced-motion:reduce) { .gm-reader-tool * { scroll-behavior:auto !important; transition:none !important; } }
@media print { .gm-reader-tool form, .gm-reader-tool__results { display:none !important; } .gm-reader-tool__fallback { display:block !important; } }
/* Site-wide WebGL paint: a transparent fixed layer above section surfaces.
   Keeping it above `main` is intentional: several lower-page sections paint
   opaque backgrounds, which used to hide the canvas after the first screen.
   The restrained opacity keeps copy legible and pointer-events:none preserves
   every interaction underneath. */
.gm-site-fluid {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity .3s ease;
}
.gm-site-fluid-ready .gm-site-fluid { opacity: .76; }
@media (max-width: 720px), (hover: none), (pointer: coarse) {
  .gm-site-fluid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-site-fluid { display: none; transition: none; }
}

/* ============================================================
   Homepage — Diagnose + Fit sections (new)
   ============================================================
   2026-09-10. Two new homepage sections, ported 1:1 from the concept at
   /opt/products/grandma-next/site/style.css (`.diagnose`/`.diag` block and
   `.contact`/`.gmform` block) under new namespaced classes (`gm-diag*`,
   `gm-fit*`) so nothing collides with existing site.css/site-additions.css
   selectors — verified empty via grep before writing this block.

   Colours are expressed through the light-theme pilot's tokens
   (--gm-fg-rgb / --gm-accent / --gm-violet, defined on :root and overridden
   under html[data-gm-theme="light"] earlier in this file) so both themes
   resolve automatically; --gm-surface-rgb below is this block's own token
   for the dark card surface (#111111), since the shared tokens above don't
   carry one. Per the brief these two sections stay "on paper" in light mode
   (no dark islands): cards/panels/fields get explicit white overrides under
   html[data-gm-theme="light"] rather than inheriting the dark surface. */
.gm-diag,
.gm-fit {
  --gm-surface-rgb: 17 17 17;
}
.gm-diag [hidden],
.gm-fit [hidden] { display: none !important; }

/* ---- Diagnose ---- */
#diagnose.gm-diag,
.gm-diag {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) 0 0;
}
.gm-diag__wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
}
.gm-diag__head {
  max-width: 760px;
  position: relative;
  z-index: 1;
}
.gm-diag__eyebrow {
  display: flex;
  align-items: center;
  gap: .8em;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--gm-fg-rgb) / .46);
  margin-bottom: 1.2rem;
}
.gm-diag__num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--gm-accent);
}
.gm-diag__h2 {
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 6.4rem);
  line-height: .92;
  letter-spacing: .005em;
  color: rgb(var(--gm-fg-rgb));
}
.gm-diag__h2-line { display: block; }
.gm-diag__h2-line--accent { color: var(--gm-accent); }
.gm-diag__lead {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  color: rgb(var(--gm-fg-rgb) / .72);
  max-width: 56ch;
  line-height: 1.65;
  margin-top: 1.2rem;
}
.gm-diag__board {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(72px, 10vw, 140px);
  margin-top: clamp(40px, 5vw, 72px);
}
.gm-diag__stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gm-stage {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .9em;
  padding: clamp(22px, 2.6vw, 36px);
  min-height: 300px;
  border-radius: 22px;
  background: rgb(var(--gm-surface-rgb));
  border: 1px solid rgba(255, 255, 255, .09);
  overflow: hidden;
  transition: transform .6s cubic-bezier(.16,1,.3,1), border-color .3s;
  isolation: isolate;
  cursor: pointer;
}
.gm-stage::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 120%;
  background: radial-gradient(closest-side, var(--gm-accent), transparent 70%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .6s, transform .8s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}
.gm-stage:hover { transform: translateY(-6px); border-color: rgb(var(--gm-fg-rgb) / .5); }
.gm-stage:hover::before { opacity: .35; transform: scale(1); }
.gm-stage.is-active { border-color: var(--gm-accent); transform: none; }
.gm-stage.is-active::before { opacity: .55; transform: scale(1.1); }
.gm-stage.is-dim { opacity: .35; transform: scale(.97); }
.gm-stage__num {
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-size: 1.4rem;
  color: var(--gm-accent);
  letter-spacing: .1em;
}
.gm-stage__name {
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: .9;
  color: rgb(var(--gm-fg-rgb));
}
.gm-stage__desc {
  color: rgb(var(--gm-fg-rgb) / .72);
  font-size: .95rem;
  max-width: 30ch;
}
.gm-stage__pick {
  margin-top: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--gm-fg-rgb) / .46);
  display: flex;
  align-items: center;
  gap: .6em;
}
.gm-stage__pick::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background .3s;
}
.gm-stage.is-active .gm-stage__pick { color: var(--gm-accent); }
.gm-stage.is-active .gm-stage__pick::before { background: var(--gm-accent); }

.gm-diag__panel {
  margin-top: 14px;
  border-radius: 22px;
  background: rgb(var(--gm-surface-rgb));
  border: 1px solid rgba(255, 255, 255, .09);
  padding: clamp(22px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.gm-diag__panel.is-in { opacity: 1; transform: translateY(0); }

.gm-diag__set[data-diag-set] { display: contents; }

.gm-diag__symptoms {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gm-diag__label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--gm-fg-rgb) / .46);
  margin-bottom: .4em;
}
.gm-diag__label--accent { color: var(--gm-accent); }

.gm-sym {
  display: flex;
  align-items: flex-start;
  gap: .9em;
  text-align: left;
  width: 100%;
  padding: 1em 1.15em;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: var(--gm-bg);
  transition: border-color .3s, background .3s, transform .4s cubic-bezier(.16,1,.3,1);
  font-size: .95rem;
  line-height: 1.45;
  cursor: pointer;
  color: rgb(var(--gm-fg-rgb));
}
.gm-sym i {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgb(var(--gm-fg-rgb) / .46);
  margin-top: .15em;
  position: relative;
  transition: background .3s, border-color .3s;
}
.gm-sym i::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: #fff;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.gm-sym:hover { border-color: rgb(var(--gm-fg-rgb) / .3); transform: translateX(4px); }
.gm-sym.is-on { border-color: var(--gm-accent); background: rgb(from var(--gm-accent) r g b / .08); }
.gm-sym.is-on i { background: var(--gm-accent); border-color: var(--gm-accent); }
.gm-sym.is-on i::after { transform: scale(1); }

.gm-diag__result {
  display: flex;
  flex-direction: column;
  gap: .7em;
}
.gm-diag__result .gm-diag__label,
.gm-diag__title,
.gm-diag__text,
.gm-diag__checks,
.gm-diag__cta,
.gm-diag__hand {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.gm-diag__result.is-in > * { opacity: 1; transform: translateY(0); }
.gm-diag__result.is-in > *:nth-child(1) { transition-delay: 0ms; }
.gm-diag__result.is-in > *:nth-child(2) { transition-delay: 60ms; }
.gm-diag__result.is-in > *:nth-child(3) { transition-delay: 120ms; }
.gm-diag__result.is-in > *:nth-child(4) { transition-delay: 180ms; }
.gm-diag__result.is-in > *:nth-child(5) { transition-delay: 240ms; }
.gm-diag__result.is-in > *:nth-child(6) { transition-delay: 300ms; }
.gm-diag__result.is-in > *:nth-child(7) { transition-delay: 360ms; }
.gm-diag__result.is-in > *:nth-child(8) { transition-delay: 420ms; }
.gm-diag__title {
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: .95;
  color: rgb(var(--gm-fg-rgb));
}
.gm-diag__text { color: rgb(var(--gm-fg-rgb) / .72); }
.gm-diag__checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-bottom: .6em;
  padding: 0;
}
.gm-diag__checks li {
  position: relative;
  padding-left: 1.5em;
  color: rgb(var(--gm-fg-rgb));
  font-size: .95rem;
}
.gm-diag__checks li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--gm-accent);
}
.gm-diag__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: .4em;
}
.gm-diag__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  height: 52px;
  padding: 0 26px;
  border-radius: 6px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .5s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s;
  cursor: pointer;
}
.gm-diag__btn b {
  font-weight: 600;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.gm-diag__btn:hover b { transform: translateX(.3em); }
.gm-diag__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #FF4FA3, #A8156A);
  box-shadow: 0 12px 40px -12px rgba(233, 30, 150, .55);
  border: 0;
}
.gm-diag__btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gm-accent), #FF4FA3);
  opacity: 0;
  transition: opacity .35s;
}
.gm-diag__btn--primary:hover::after { opacity: 1; }
.gm-diag__btn--primary > * { position: relative; z-index: 1; }
.gm-diag__btn--ghost {
  border: 1px solid rgb(var(--gm-fg-rgb) / .35);
  color: rgb(var(--gm-fg-rgb));
  background: transparent;
}
.gm-diag__btn--ghost:hover {
  border-color: var(--gm-accent);
  color: #fff;
  background: rgb(from var(--gm-accent) r g b / .08);
}
.gm-diag__hand {
  font-family: "Permanent Marker", "Caveat", cursive;
  color: var(--gm-violet);
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: pre-line;
  margin-top: .6em;
}

.gm-diag__fig {
  position: absolute;
  right: -6%;
  top: 6%;
  width: clamp(240px, 30vw, 460px);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
.gm-diag__fig img {
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
}

@media (max-width: 900px) {
  .gm-diag__stages { grid-template-columns: 1fr; }
  .gm-stage { min-height: 0; }
  .gm-diag__panel { grid-template-columns: 1fr; }
  .gm-diag__fig {
    position: relative;
    right: auto;
    top: auto;
    width: 70%;
    margin: 0 auto -40px;
    opacity: .7;
  }
}

/* Diagnose — light theme: cards and panel move to paper, not a dark island */
html[data-gm-theme="light"] .gm-stage,
html[data-gm-theme="light"] .gm-diag__panel {
  background: #fff;
  border-color: rgba(20, 17, 14, .09);
}
html[data-gm-theme="light"] .gm-stage:hover { border-color: rgb(var(--gm-fg-rgb) / .5); }
html[data-gm-theme="light"] .gm-sym {
  background: #fff;
  border-color: rgba(20, 17, 14, .09);
}
html[data-gm-theme="light"] .gm-sym i { border-color: rgb(var(--gm-fg-rgb) / .46); }

/* ---- Fit (contact form) ---- */
#fit.gm-fit,
.gm-fit {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 11vw, 160px) 0 clamp(60px, 8vw, 120px);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.gm-fit__splat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 80% 30%, rgb(from var(--gm-accent) r g b / .28), transparent 70%),
    radial-gradient(30% 40% at 10% 90%, rgb(from var(--gm-violet) r g b / .22), transparent 70%);
}
html[data-gm-theme="light"] .gm-fit__splat {
  background:
    radial-gradient(40% 50% at 80% 30%, rgb(from var(--gm-accent) r g b / .14), transparent 70%),
    radial-gradient(30% 40% at 10% 90%, rgb(from var(--gm-violet) r g b / .11), transparent 70%);
}
.gm-fit__grid {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.gm-fit__eyebrow {
  display: flex;
  align-items: center;
  gap: .8em;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--gm-fg-rgb) / .46);
  margin-bottom: 1.2rem;
}
.gm-fit__h2 {
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 7.6rem);
  line-height: .9;
  letter-spacing: .005em;
  color: rgb(var(--gm-fg-rgb));
}
.gm-fit__h2-line { display: block; }
.gm-fit__lead {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  color: rgb(var(--gm-fg-rgb) / .72);
  max-width: 56ch;
  line-height: 1.65;
  margin-top: 1.4rem;
}
.gm-fit__form {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-fit__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gm-fit__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gm-fit__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gm-fit__field label {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .03em;
  color: rgb(var(--gm-fg-rgb) / .72);
}
.gm-fit__field label i {
  font-style: normal;
  color: var(--gm-accent);
}
.gm-fit__field label small {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .08em;
  color: rgb(var(--gm-fg-rgb) / .46);
}
.gm-fit__form input,
.gm-fit__form textarea {
  width: 100%;
  font: inherit;
  color: rgb(var(--gm-fg-rgb));
  background: rgb(var(--gm-fg-rgb) / .04);
  border: 1px solid rgb(var(--gm-fg-rgb) / .16);
  border-radius: 16px;
  padding: 16px 18px;
  transition: border-color .3s, background .3s;
  resize: vertical;
}
.gm-fit__form textarea {
  font-size: 1.02rem;
  line-height: 1.55;
  min-height: 130px;
}
.gm-fit__form input:focus,
.gm-fit__form textarea:focus {
  outline: 0;
  border-color: var(--gm-accent);
  background: rgb(from var(--gm-accent) r g b / .05);
}
.gm-fit__form ::placeholder { color: rgb(var(--gm-fg-rgb) / .46); }
.gm-fit__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .85rem;
  line-height: 1.5;
  color: rgb(var(--gm-fg-rgb) / .72);
  cursor: pointer;
}
.gm-fit__check input[type="checkbox"] {
  margin-top: .2em;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--gm-accent);
}
.gm-fit__check a {
  color: rgb(var(--gm-fg-rgb));
  text-decoration: underline;
  text-underline-offset: .2em;
}
.gm-fit__err {
  display: block; /* .gm-err у site.css ховає за замовчуванням; [hidden] вище має !important і перемагає */
  margin: 0;
  font-size: .85rem;
  color: var(--gm-accent);
}
.gm-fit__submit {
  align-self: flex-start;
  margin-top: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  height: 56px;
  padding: 0 34px;
  border-radius: 6px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #FF4FA3, #A8156A);
  box-shadow: 0 12px 40px -12px rgba(233, 30, 150, .55);
  border: 0;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s;
}
.gm-fit__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gm-accent), #FF4FA3);
  opacity: 0;
  transition: opacity .35s;
}
.gm-fit__submit:hover::after { opacity: 1; }
.gm-fit__submit > * { position: relative; z-index: 1; }
.gm-fit__fine {
  font-size: .78rem;
  color: rgb(var(--gm-fg-rgb) / .46);
}
.gm-fit__fine a {
  color: rgb(var(--gm-fg-rgb) / .72);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.gm-fit__fine a:hover { color: rgb(var(--gm-fg-rgb)); }

.gm-fit__fig { position: relative; }
.gm-fit__fig img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.gm-fit__hand {
  position: absolute;
  right: 6%;
  bottom: -8px;
  font-family: "Permanent Marker", "Caveat", cursive;
  color: var(--gm-violet);
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: .01em;
  transform: rotate(-4deg);
}

@media (max-width: 900px) {
  .gm-fit__grid { grid-template-columns: 1fr; }
  .gm-fit__row { grid-template-columns: 1fr; }
  .gm-fit__fig { max-width: 420px; }
}

/* Fit — light theme: fields and figure caption stay on paper */
html[data-gm-theme="light"] .gm-fit__form input,
html[data-gm-theme="light"] .gm-fit__form textarea {
  background: #fff;
  border-color: rgba(20, 17, 14, .16);
}

@media (prefers-reduced-motion: reduce) {
  .gm-stage,
  .gm-stage::before,
  .gm-diag__panel,
  .gm-diag__result > *,
  .gm-sym,
  .gm-sym i::after,
  .gm-diag__btn,
  .gm-diag__btn b,
  .gm-diag__btn--primary::after,
  .gm-fit__submit,
  .gm-fit__submit::after,
  .gm-fit__form input,
  .gm-fit__form textarea {
    transition: none !important;
  }
  .gm-diag__panel { opacity: 1; transform: none; }
  .gm-diag__panel.is-in { opacity: 1; transform: none; }
  .gm-diag__result > * { opacity: 1; transform: none; transition-delay: 0ms !important; }
}

/* Fit form: підсвітка незаповненого поля після спроби відправити (data-invalid
   ставить gm-diagnose.js; той самий контракт, що .gm-input[data-invalid] у site.css). */
.gm-fit__field[data-invalid] input,
.gm-fit__field[data-invalid] textarea { border-color: var(--gm-accent); box-shadow: 0 0 0 3px rgb(233 30 150 / .14); }


/* ============================================================
   Services — the desk (next)
   ============================================================
   Ported 10.09.2026 з /opt/products/grandma-next/site/services/services.css
   (усі 229 рядків) + спільні класи /opt/products/grandma-next/site/style.css,
   потрібні для services/index.html (контракт: scratchpad/services-contract.md).
   Увесь контент сторінки лежить у `.gm-desk-page` — кожен селектор скопійовано з цим
   префіксом, щоб не витекти на інші сторінки. Не перенесено: cursor, grain,
   header, footer, loader, mobile-menu, .mix--fig (картинка Mixes), .gmform*
   (бойова форма — gm-fit__*, стилі вже вище у файлі), магнітні кнопки/курсор
   (data-hover/data-magnet/data-cursor — атрибути прибирає шаблон, не CSS).

   Токени на .gm-desk-page — SPEC 0.1 дефолти (простір grandma.agency, темний за
   замовчуванням). --ink/--ink-2/--ink-3/--mag/--violet/--line зав'язані на
   бойові --gm-fg-rgb/--gm-accent/--gm-violet/--gm-muted-a (site-additions.css,
   розділ «Homepage light-theme pilot»), тож світла тема нижче — явний,
   але узгоджений з формулою override. --mag-deep/--paper/--on-paper-* /
   --decor-paper/--display/--body/--ui/--mono/--hand/--ease фіксовані в обох
   темах (папір лишається папером, шрифти не залежать від теми). */
.gm-desk-page{
  --bg:var(--gm-bg,#090909);
  --bg-2:#0E0E0E;
  --surface:#111111;
  --line:rgb(var(--gm-fg-rgb) / .09);
  --ink:rgb(var(--gm-fg-rgb));
  --ink-2:rgb(var(--gm-fg-rgb) / .74);
  --ink-3:rgb(var(--gm-fg-rgb) / .46);
  --mag:var(--gm-accent,#E91E96);
  --mag-deep:#A8156A;
  --mag-light:#FF4FA3;
  --violet:var(--gm-violet,#A736FF);
  --hi:#DFFF3A;
  --paper:#F5F3EF;
  --paper-2:#EFEBE2;
  --on-paper:#14110E;
  --on-paper-2:#3A352F;
  --decor-paper:#7B1FD1;
  --display:"Bebas Neue","Oswald",Impact,sans-serif;
  --body:Montserrat,system-ui,sans-serif;
  --ui:Outfit,Montserrat,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --hand:"Permanent Marker","Caveat",cursive;
  --ease:cubic-bezier(.16,1,.3,1);
}
.gm-desk-page [hidden]{display:none!important}
.gm-desk-page img{max-width:100%;height:auto}

/* ─── Base utility classes (style.css) ─── */
.gm-desk-page .wrap{width:min(1360px,100% - 2*clamp(20px,4vw,64px));margin-inline:auto}
.gm-desk-page .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.gm-desk-page .hand{font-family:var(--hand);color:var(--violet);font-size:1.05rem;line-height:1.25;letter-spacing:.01em}
.gm-desk-page .hand--lg{font-size:clamp(1.4rem,2.6vw,2.2rem);display:block;margin-top:.1em}
.gm-desk-page .accent{color:var(--mag)}
.gm-desk-page .eyebrow{display:flex;align-items:center;gap:.8em;font-family:var(--ui);font-weight:500;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1.2rem}
.gm-desk-page .eyebrow .mono{color:var(--mag)}
.gm-desk-page .h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,7.2vw,6.4rem);line-height:.92;letter-spacing:.005em;color:var(--ink)}
.gm-desk-page .h2--xl{font-size:clamp(3.6rem,9vw,8rem)}
.gm-desk-page .lead{font-size:clamp(1rem,1.25vw,1.2rem);color:var(--ink-2);max-width:56ch;line-height:1.65}
.gm-desk-page .sec-head{padding-block:clamp(72px,10vw,140px) clamp(40px,5vw,72px)}
.gm-desk-page .sec-head .lead{margin-top:1.4rem}
.gm-desk-page .sec-head--row{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,64px);align-items:end}
.gm-desk-page .sec-head--row .lead{margin-top:0;padding-bottom:.5rem}
@media(max-width:900px){.gm-desk-page .sec-head--row{grid-template-columns:1fr}}

/* ─── Buttons (radius 6px, не pill; висота 52/56px; Outfit 600, без uppercase) ─── */
.gm-desk-page .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;height:52px;padding:0 1.7em;border-radius:6px;font-family:'Outfit',var(--ui);font-weight:600;font-size:.92rem;letter-spacing:.01em;text-transform:none;line-height:1;white-space:nowrap;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s;will-change:transform}
.gm-desk-page .btn small{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.12em;opacity:.6;margin-left:.2em;text-transform:uppercase}
.gm-desk-page .btn b{font-weight:700;transition:transform .5s var(--ease)}
.gm-desk-page .btn:hover b{transform:translateX(.3em)}
.gm-desk-page .btn--lg{height:56px;padding:0 2em;font-size:1rem}
.gm-desk-page .btn--primary{color:#fff;background:linear-gradient(135deg,#FF4FA3,#A8156A);box-shadow:0 12px 40px -12px rgba(233,30,150,.55)}
.gm-desk-page .btn--primary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--mag-light),var(--mag));opacity:0;transition:opacity .35s}
.gm-desk-page .btn--primary:hover::after{opacity:1}
.gm-desk-page .btn--primary>*{position:relative;z-index:1}
.gm-desk-page .btn--ghost{border:1.5px solid rgb(var(--gm-fg-rgb) / .22);color:var(--ink)}
.gm-desk-page .btn--ghost:hover{border-color:var(--mag);color:var(--ink);background:rgba(233,30,150,.08)}

/* ─── Hero building blocks (style.css, used by .console__title etc.) ─── */
.gm-desk-page .hero__eyebrow{display:flex;align-items:center;gap:1em;flex-wrap:wrap;margin-bottom:1.4rem}
.gm-desk-page .hero__eyebrow .hand{font-size:1.25rem}
.gm-desk-page .hero__title{font-family:var(--display);font-weight:400;font-size:clamp(4.4rem,11.5vw,11.5rem);line-height:.86;letter-spacing:.005em;margin-left:-.03em;color:var(--ink)}
.gm-desk-page .hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.gm-desk-page .hero__title .word{display:inline-block;will-change:transform;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.gm-desk-page.is-loaded .hero__title .word{transform:none}
/* stagger 80ms: рядок × 80ms, друге слово в рядку +80ms */
.gm-desk-page .hero__title .line:nth-child(2) .word{transition-delay:80ms}
.gm-desk-page .hero__title .line:nth-child(3) .word{transition-delay:160ms}
.gm-desk-page .hero__title .line:nth-child(3) .word:nth-child(2){transition-delay:240ms}
.gm-desk-page .hero__title .line:nth-child(4) .word{transition-delay:320ms}
.gm-desk-page .word--accent{position:relative;color:var(--mag);transition:opacity .35s,transform .35s}
.gm-desk-page .word--accent.is-swap{opacity:0;transform:translateY(6px)}
.gm-desk-page .scribble{position:absolute;left:-2%;right:-2%;bottom:-.08em;width:104%;height:.22em;fill:none;stroke:var(--hi);stroke-width:7;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;mix-blend-mode:screen;opacity:.9;transition:stroke-dashoffset 1.1s cubic-bezier(.19,1,.22,1) .3s}
.gm-desk-page.is-loaded .scribble{stroke-dashoffset:0}
.gm-desk-page .hero__lead{margin-top:1.8rem;font-size:clamp(1rem,1.3vw,1.22rem);color:var(--ink-2);max-width:52ch}
.gm-desk-page .hero__lead em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 55%,rgba(223,255,58,.28) 55%)}
.gm-desk-page .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}
.gm-desk-page .hero__scroll{position:absolute;left:clamp(20px,4vw,64px);bottom:26px;z-index:2;display:flex;align-items:center;gap:.8em;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.gm-desk-page .hero__scroll span{width:36px;height:1px;background:var(--ink-3);position:relative;overflow:hidden}
@media(max-width:1000px){.gm-desk-page .hero__scroll{display:none}}

/* ─── Cases building blocks (style.css §Cases — extended below by Proof) ─── */
.gm-desk-page .cases{background:var(--bg)}
.gm-desk-page .case-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:16px}
.gm-desk-page .case{position:relative;display:flex;flex-direction:column;border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .3s,transform .6s var(--ease)}
.gm-desk-page .case--wide{grid-column:span 2}
.gm-desk-page .case:hover{border-color:rgba(233,30,150,.6);transform:translateY(-6px)}
.gm-desk-page .case__media{aspect-ratio:3/2;overflow:hidden;background:#0c0c0c}
.gm-desk-page .case--wide .case__media{aspect-ratio:21/9}
.gm-desk-page .case__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85)}
.gm-desk-page .case:hover .case__media img{transform:scale(1.06);filter:saturate(1.1)}
.gm-desk-page .case__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:.6em}
.gm-desk-page .case__client{display:flex;align-items:center;gap:.6em;font-family:var(--ui);font-weight:700;font-size:1rem;letter-spacing:.04em;color:var(--ink)}
.gm-desk-page .case__client span{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-left:0}
.gm-desk-page .case__num{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.gm-desk-page .case__num b{font-family:var(--display);font-size:clamp(3rem,5vw,4.6rem);line-height:.9;color:var(--mag);font-variant-numeric:tabular-nums}
.gm-desk-page .case__num span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gm-desk-page .case__note{color:var(--ink-2);font-size:.92rem}
.gm-desk-page .cases__more{display:flex;justify-content:center;padding:48px 0 clamp(72px,10vw,140px)}
@media(max-width:1000px){.gm-desk-page .case-grid{grid-template-columns:1fr 1fr}.gm-desk-page .case--wide{grid-column:span 2}}
@media(max-width:640px){.gm-desk-page .case-grid{grid-template-columns:1fr}.gm-desk-page .case--wide{grid-column:span 1}.gm-desk-page .case--wide .case__media{aspect-ratio:3/2}}

/* ─── Contact building blocks (style.css §Contact) ─── */
.gm-desk-page .contact{position:relative;overflow:hidden;padding:clamp(80px,11vw,160px) 0 clamp(60px,8vw,120px);border-top:1px solid var(--line)}
.gm-desk-page .contact__splat{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(40% 50% at 80% 30%,rgba(233,30,150,.28),transparent 70%),
  radial-gradient(30% 40% at 10% 90%,rgba(167,54,255,.22),transparent 70%)}
.gm-desk-page .contact__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center}
.gm-desk-page .contact .lead{margin-top:1.4rem}
.gm-desk-page .ask{margin-top:2.2rem;display:flex;flex-direction:column;gap:14px}
.gm-desk-page .ask__fine{font-size:.78rem;color:var(--ink-3)}
.gm-desk-page .ask__fine a{color:var(--ink-2);text-decoration:underline;text-underline-offset:.2em}
.gm-desk-page .ask__fine a:hover{color:var(--ink)}
.gm-desk-page .contact__fig{position:relative}
.gm-desk-page .contact__fig img{border-radius:24px}
.gm-desk-page .contact__fig figcaption{position:absolute;right:6%;bottom:-8px;font-size:1.3rem;transform:rotate(-4deg)}
@media(max-width:900px){.gm-desk-page .contact__grid{grid-template-columns:1fr}}

/* ============================================================
   Below: services.css verbatim (229 рядків), кожен селектор з .gm-desk-page.
   ============================================================ */

.gm-desk-page .nav a.is-current{color:var(--ink)}.gm-desk-page .nav a.is-current::after{transform:scaleX(1);transform-origin:left}

/* ─── Console (hero) ─── */
.gm-desk-page .console{position:relative;min-height:100svh;padding:clamp(96px,12vh,140px) 0 clamp(48px,6vw,80px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.gm-desk-page .console__glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(38% 42% at 74% 62%,rgba(233,30,150,.22),transparent 70%),
  radial-gradient(26% 30% at 92% 20%,rgba(167,54,255,.18),transparent 70%)}
.gm-desk-page .console__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.gm-desk-page .console__title{font-size:clamp(3.8rem,8vw,8.4rem)}
.gm-desk-page .console__title .line{display:flex;gap:.22em;flex-wrap:wrap}
.gm-desk-page .console__hint{margin-top:1.6rem;font-size:.62rem;letter-spacing:.16em}
.gm-desk-page .console__hint-key{display:inline-block;padding:.25em .55em;border:1px solid var(--line);border-radius:6px;color:var(--ink-2);margin-right:.2em}
.gm-desk-page .console__stage{position:relative;display:grid;grid-template-columns:1fr;align-items:end;min-height:min(72vh,720px)}

/* the desk — темний острів, власні токени нижче (розділ «Світла тема») */
.gm-desk-page .desk{position:relative;z-index:1;width:min(100%,700px);justify-self:end;border-radius:26px;padding:clamp(18px,2.2vw,30px) clamp(18px,2.2vw,30px) clamp(14px,1.6vw,20px);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,#171717,#0d0d0d);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6) inset,0 1px 0 rgba(255,255,255,.08) inset;
  transform:perspective(1400px) rotateX(4deg);transform-origin:50% 100%;
  opacity:0;transition:opacity .9s var(--ease) .2s}
.gm-desk-page.is-loaded .desk{opacity:1}
.gm-desk-page .desk__screws{position:absolute;inset:10px;pointer-events:none}
.gm-desk-page .desk__screws i{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a3a3a,#111);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.gm-desk-page .desk__screws i:nth-child(1){left:0;top:0}.gm-desk-page .desk__screws i:nth-child(2){right:0;top:0}.gm-desk-page .desk__screws i:nth-child(3){left:0;bottom:0}.gm-desk-page .desk__screws i:nth-child(4){right:0;bottom:0}
.gm-desk-page .desk__strips{display:grid;grid-template-columns:repeat(9,1fr) 1.15fr;gap:clamp(6px,1vw,12px)}
.gm-desk-page .strip{--lv:0;--pk:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px 8px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);transition:border-color .3s,background .3s}
.gm-desk-page .strip.is-on{border-color:rgba(233,30,150,.45);background:rgba(233,30,150,.05)}
.gm-desk-page .strip.is-hot{border-color:var(--mag);box-shadow:0 0 30px -8px rgba(233,30,150,.7)}
.gm-desk-page .strip__led{width:6px;height:6px;border-radius:50%;background:#2a2a2a;box-shadow:0 0 0 1px rgba(0,0,0,.7);transition:background .2s,box-shadow .2s}
.gm-desk-page .strip.is-on .strip__led{background:var(--mag);box-shadow:0 0 8px var(--mag)}
.gm-desk-page .strip__meter{width:9px;height:clamp(110px,16vh,170px);border-radius:3px;background:#0a0a0a;border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative}
.gm-desk-page .strip__meter i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--pk) * 1%);
  background:linear-gradient(180deg,var(--violet) 0%,var(--mag) 35%,var(--mag-deep) 100%);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 5px,transparent 5px 7px);mask-image:repeating-linear-gradient(180deg,#000 0 5px,transparent 5px 7px);
  transition:height .09s linear}
.gm-desk-page .strip__fader{position:relative;width:26px;height:clamp(150px,22vh,230px);margin-bottom:22px;cursor:grab;touch-action:none;outline:0}
.gm-desk-page .strip__fader:active{cursor:grabbing}
.gm-desk-page .strip__fader:focus-visible .strip__knob{box-shadow:0 0 0 2px var(--mag),0 6px 16px rgba(0,0,0,.8)}
.gm-desk-page .strip__track{position:absolute;left:50%;top:6px;bottom:6px;width:4px;transform:translateX(-50%);border-radius:2px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.gm-desk-page .strip__track::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--lv) * 1%);background:var(--mag);border-radius:2px;box-shadow:0 0 10px rgba(233,30,150,.6);opacity:.9}
.gm-desk-page .strip__knob{position:absolute;left:50%;width:26px;height:38px;border-radius:5px;transform:translate(-50%,50%);bottom:calc(6px + (100% - 12px) * var(--lv) / 100);
  background:linear-gradient(180deg,#2b2b2b,#141414);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 16px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.12) inset;transition:box-shadow .2s}
.gm-desk-page .strip__knob::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:#fff;opacity:.85;transform:translateY(-50%)}
.gm-desk-page .strip.is-on .strip__knob::after{background:var(--mag);box-shadow:0 0 6px var(--mag)}
.gm-desk-page .strip__label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:#fff;opacity:.75;white-space:nowrap;transition:color .2s}
.gm-desk-page .strip.is-on .strip__label{color:#fff}
.gm-desk-page .strip--master{background:rgba(233,30,150,.04);border-color:rgba(233,30,150,.25);justify-content:flex-start}
.gm-desk-page .strip__meter--master{width:14px}
.gm-desk-page .master__readout{display:flex;flex-direction:column;align-items:center;gap:.1em;height:clamp(150px,22vh,230px);justify-content:center}
.gm-desk-page .master__readout b{font-family:var(--display);font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--mag);font-variant-numeric:tabular-nums}
.gm-desk-page .master__readout .mono{font-size:.55rem}
.gm-desk-page .strip--master.is-over .master__readout b{color:#fff;text-shadow:0 0 18px rgba(233,30,150,.9)}
.gm-desk-page .desk__screen{margin-top:clamp(12px,1.6vw,18px);padding:12px 16px;border-radius:10px;background:#050505;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px #000 inset,0 0 40px -20px rgba(233,30,150,.6) inset;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:.25em;position:relative;overflow:hidden}
.gm-desk-page .desk__screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.25) 2px 3px);pointer-events:none}
.gm-desk-page .desk__screen-line{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:.03em;color:var(--mag);line-height:1.05;text-shadow:0 0 12px rgba(233,30,150,.5);transition:opacity .35s,transform .35s}
.gm-desk-page .desk__screen-line.is-swap{opacity:0;transform:translateY(6px)}
.gm-desk-page .desk__screen.is-warn .desk__screen-line{color:var(--hi);text-shadow:0 0 12px rgba(223,255,58,.5)}
.gm-desk-page .desk__screen.is-full .desk__screen-line{color:#fff;text-shadow:0 0 14px rgba(233,30,150,.8)}
.gm-desk-page .desk__screen-sub{font-size:.6rem;color:var(--ink-3)}
.gm-desk-page .desk__presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.gm-desk-page .desk__presets-label{font-size:.58rem;margin-right:4px}
.gm-desk-page .preset{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.55em .9em;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--ink-2);background:rgba(255,255,255,.03);transition:border-color .25s,color .25s,background .25s,transform .4s var(--ease)}
.gm-desk-page .preset:hover{border-color:var(--mag);color:#fff;transform:translateY(-2px)}
.gm-desk-page .preset.is-active,.gm-desk-page [data-preset].is-set{background:var(--mag);border-color:var(--mag);color:#fff}
.gm-desk-page .preset--all{border-color:rgba(233,30,150,.5);color:#fff}
.gm-desk-page .preset--reset{margin-left:auto;border:0;text-decoration:underline;text-underline-offset:.3em;color:var(--ink-3)}
.gm-desk-page .preset--reset:hover{transform:none;color:#fff;border:0}
@media(max-width:1100px){.gm-desk-page .console__inner{grid-template-columns:1fr;gap:28px}.gm-desk-page .console__stage{min-height:0;padding:40px 0 0}.gm-desk-page .desk{justify-self:start}}
@media(max-width:700px){
  .gm-desk-page .console{padding-top:100px}
  .gm-desk-page .desk{transform:none;padding:14px 12px 12px;border-radius:18px}
  .gm-desk-page .desk__strips{gap:4px}
  .gm-desk-page .strip{padding:8px 2px 6px;gap:6px}
  .gm-desk-page .strip__fader{width:22px;margin-bottom:18px}.gm-desk-page .strip__knob{width:22px;height:32px}
  .gm-desk-page .strip__meter{width:6px}.gm-desk-page .strip__meter--master{width:9px}
  .gm-desk-page .strip__label{font-size:.5rem;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.08em}
  .gm-desk-page .master__readout b{font-size:1.6rem}
  .gm-desk-page .preset--reset{margin-left:0}
  .gm-desk-page .console__hint{display:none}
}

/* ─── Channels (the nine) ─── */
.gm-desk-page .channels{background:var(--bg);border-top:1px solid var(--line)}
.gm-desk-page .chlist{list-style:none;border-top:1px solid var(--line);margin-bottom:clamp(72px,10vw,140px)}
.gm-desk-page .ch{border-bottom:1px solid var(--line)}
.gm-desk-page .ch__row{width:100%;display:grid;grid-template-columns:64px 1fr 1fr 48px;align-items:center;gap:clamp(16px,2.5vw,40px);padding:clamp(20px,2.6vw,34px) 0;text-align:left;transition:padding .5s var(--ease)}
.gm-desk-page .ch__row:hover{padding-left:12px}
.gm-desk-page .ch__num{color:var(--mag);font-size:.8rem}
.gm-desk-page .ch__title{font-family:var(--display);font-size:clamp(2rem,4.4vw,4.2rem);line-height:.9;color:var(--ink);transition:color .3s,transform .5s var(--ease)}
.gm-desk-page .ch__row:hover .ch__title{color:var(--ink);transform:translateX(6px)}
.gm-desk-page .ch__fix{color:var(--ink-2);font-size:clamp(.95rem,1.15vw,1.08rem);max-width:34ch}
.gm-desk-page .ch__plus{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgb(var(--gm-fg-rgb) / .2);justify-self:end;transition:transform .5s var(--ease),border-color .3s,background .3s}
.gm-desk-page .ch__plus::before,.gm-desk-page .ch__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.gm-desk-page .ch__plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.gm-desk-page .ch__row:hover .ch__plus{border-color:var(--mag);background:rgba(233,30,150,.15)}
.gm-desk-page .ch.is-open .ch__plus{transform:rotate(45deg);background:var(--mag);border-color:var(--mag)}
.gm-desk-page .ch.is-open .ch__num{color:var(--hi)}
.gm-desk-page .ch.is-pushed .ch__num::after{content:" ↑ on";color:var(--hi)}
.gm-desk-page .ch.is-on .ch__num::after{content:attr(data-on);color:var(--hi)}
.gm-desk-page .ch__on{display:none;color:var(--hi)}
.gm-desk-page .ch.is-on .ch__on{display:inline}
.gm-desk-page .ch__panel{overflow:hidden}
.gm-desk-page .sheet{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);margin:0 0 clamp(24px,3vw,40px) 64px;padding:clamp(24px,3vw,44px);border-radius:22px;background:var(--paper);color:var(--on-paper);
  background-image:linear-gradient(rgba(20,17,14,.05) 1px,transparent 1px);background-size:100% 1.6rem;background-position:0 .8rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.gm-desk-page .sheet::before{content:"";position:absolute;left:38px;top:-6px;width:90px;height:22px;background:rgba(223,255,58,.55);transform:rotate(-3deg);mix-blend-mode:multiply}
.gm-desk-page .sheet__k{color:var(--on-paper-2);margin:1.2em 0 .35em}
.gm-desk-page .sheet__k:first-child{margin-top:0}
.gm-desk-page .sheet__k--no{color:var(--mag-deep)}
.gm-desk-page .sheet__v{font-size:1rem;line-height:1.55;max-width:46ch}
.gm-desk-page .sheet__v--no{color:var(--on-paper);font-weight:500}
.gm-desk-page .sheet__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.gm-desk-page .sheet__tags li{font-family:var(--ui);font-weight:500;font-size:.8rem;letter-spacing:.02em;padding:.45em .85em;border-radius:999px;border:1px solid rgba(20,17,14,.22);background:rgba(255,255,255,.5)}
.gm-desk-page .sheet__proof{display:flex;flex-direction:column;gap:.15em;transition:transform .4s var(--ease)}
.gm-desk-page .sheet__proof:hover{transform:translateX(4px)}
.gm-desk-page .sheet__proof b{font-family:var(--display);font-size:clamp(2.6rem,4vw,3.6rem);line-height:.95;color:var(--mag-deep);font-variant-numeric:tabular-nums}
.gm-desk-page .sheet__proof--none b{color:var(--on-paper-2)}
.gm-desk-page .sheet__proof span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-2)}
.gm-desk-page .sheet__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6em}
.gm-desk-page .btn--ghost-paper{border-color:rgba(20,17,14,.3);color:var(--on-paper)}
.gm-desk-page .btn--ghost-paper:hover{color:var(--on-paper);border-color:var(--mag-deep);background:rgba(168,21,106,.08)}
.gm-desk-page .btn--push.is-on{background:var(--on-paper);box-shadow:none}
.gm-desk-page .btn--push.is-on::after{display:none}
.gm-desk-page .sheet__hand{position:absolute;right:clamp(20px,3vw,44px);bottom:12px;color:var(--decor-paper);font-size:1.1rem;transform:rotate(-2.5deg)}
@media(max-width:900px){
  .gm-desk-page .ch__row{grid-template-columns:40px 1fr 40px;grid-template-areas:"n t p" "n f p";row-gap:6px}
  .gm-desk-page .ch__num{grid-area:n}.gm-desk-page .ch__title{grid-area:t}.gm-desk-page .ch__fix{grid-area:f;max-width:none}.gm-desk-page .ch__plus{grid-area:p;width:32px;height:32px}
  .gm-desk-page .sheet{grid-template-columns:1fr;margin-left:0;gap:20px;padding-bottom:64px}
  .gm-desk-page .sheet__hand{right:20px;bottom:16px}
}

/* ─── No ─── */
.gm-desk-page .no{position:relative;overflow:hidden;padding:clamp(80px,11vw,160px) 0}
.gm-desk-page .no::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 18% 60%,rgba(233,30,150,.16),transparent 70%);pointer-events:none}
.gm-desk-page .no__grid{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:center}
.gm-desk-page .no__fig{position:relative;padding-top:12%}
.gm-desk-page .no__xx{position:absolute;left:-2%;top:-2%;width:104%;max-width:none;z-index:0;opacity:.95;pointer-events:none}
.gm-desk-page .no__her{position:relative;z-index:1}
.gm-desk-page .no__fig .no__her{-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent);filter:drop-shadow(0 30px 60px rgba(233,30,150,.22))}
.gm-desk-page .no__fig-note{position:absolute;right:-4%;bottom:10%;font-size:1.15rem;transform:rotate(-4deg);text-align:right}
.gm-desk-page .no .lead{margin-top:1.4rem}
.gm-desk-page .nolist{list-style:none;margin-top:2.4rem;display:flex;flex-direction:column}
.gm-desk-page .noitem{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:clamp(16px,2vw,24px) 0;border-top:1px solid var(--line);transition:padding .5s var(--ease)}
.gm-desk-page .noitem:last-child{border-bottom:1px solid var(--line)}
.gm-desk-page .noitem:hover{padding-left:8px}
.gm-desk-page .noitem__x{font-family:var(--display);font-size:2rem;line-height:1;color:var(--mag);transition:transform .5s var(--ease)}
.gm-desk-page .noitem:hover .noitem__x{transform:rotate(90deg) scale(1.15)}
.gm-desk-page .noitem b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:.95;margin-bottom:.35em;color:var(--ink)}
.gm-desk-page .noitem p{color:var(--ink-2);font-size:.95rem;max-width:60ch}
.gm-desk-page .noitem__alt{display:block;margin-top:.5em;color:var(--ink)}
.gm-desk-page .noitem__alt em{font-style:normal;color:var(--hi)}
@media(max-width:900px){.gm-desk-page .no__grid{grid-template-columns:1fr}.gm-desk-page .no__fig{max-width:420px;margin:0 auto -30px}.gm-desk-page .no__fig-note{right:0}}

/* ─── Mixes ─── */
.gm-desk-page .mixes{background:var(--bg-2);border-top:1px solid var(--line)}
.gm-desk-page .mixes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:clamp(72px,10vw,140px)}
.gm-desk-page .mix{position:relative;display:flex;flex-direction:column;gap:.8em;text-align:left;min-height:240px;padding:clamp(20px,2.4vw,30px);border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:transform .6s var(--ease),border-color .3s}
.gm-desk-page .mix::after{content:"";position:absolute;left:-20%;bottom:-60%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(233,30,150,.45),transparent);opacity:0;transition:opacity .5s;z-index:-1}
.gm-desk-page .mix:hover{transform:translateY(-6px);border-color:rgba(233,30,150,.6)}.gm-desk-page .mix:hover::after{opacity:1}
.gm-desk-page .mix.is-set{border-color:var(--mag)}
.gm-desk-page .mix__f{display:flex;gap:6px;flex-wrap:wrap}
.gm-desk-page .mix__f i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.12em;padding:.4em .7em;border-radius:6px;border:1px solid rgb(var(--gm-fg-rgb) / .18);color:var(--ink-2);background:rgba(0,0,0,.3)}
.gm-desk-page .mix.is-set .mix__f i{border-color:var(--mag);color:var(--ink)}
.gm-desk-page .mix__t{font-family:var(--display);font-size:clamp(1.6rem,2.2vw,2.1rem);line-height:.95;color:var(--ink)}
.gm-desk-page .mix__d{color:var(--ink-2);font-size:.92rem}
.gm-desk-page .mix__go{margin-top:auto;color:var(--mag);font-size:.62rem;letter-spacing:.16em;transition:transform .4s var(--ease)}
.gm-desk-page .mix:hover .mix__go{transform:translateX(4px)}
@media(max-width:1000px){.gm-desk-page .mixes__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gm-desk-page .mixes__grid{grid-template-columns:1fr}.gm-desk-page .mix{min-height:0}}

/* ─── Proof (extends .cases/.case вище) ─── */
.gm-desk-page .case__tag{font-family:var(--mono);font-style:normal;font-size:.58rem;letter-spacing:.14em;color:var(--mag);border:1px solid rgba(233,30,150,.4);border-radius:6px;padding:.3em .6em;margin-left:auto}
.gm-desk-page .case.is-key{border-color:var(--mag);box-shadow:0 0 40px -14px rgba(233,30,150,.6)}

/* ─── FAQ ─── */
.gm-desk-page .faq{padding:clamp(72px,10vw,140px) 0;border-top:1px solid var(--line)}
.gm-desk-page .faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.gm-desk-page .faq__side{position:sticky;top:110px}
.gm-desk-page .faq__fig{position:relative;margin-top:2rem;max-width:380px}
.gm-desk-page .faq__fig img{border-radius:24px;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.gm-desk-page .faq__fig figcaption{position:absolute;left:0;bottom:-6px;font-size:1.15rem;transform:rotate(-3deg)}
.gm-desk-page .faq__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.gm-desk-page .q{border-bottom:1px solid var(--line)}
.gm-desk-page .q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.2vw,26px) 0;cursor:pointer;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1;color:var(--ink);transition:color .3s,padding .4s var(--ease)}
.gm-desk-page .q summary::-webkit-details-marker{display:none}
.gm-desk-page .q summary:hover{color:var(--mag);padding-left:8px}
.gm-desk-page .q summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgb(var(--gm-fg-rgb) / .2);position:relative;transition:transform .5s var(--ease),background .3s,border-color .3s}
.gm-desk-page .q summary i::before,.gm-desk-page .q summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.gm-desk-page .q summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.gm-desk-page .q[open] summary i{transform:rotate(45deg);background:var(--mag);border-color:var(--mag)}
.gm-desk-page .q[open] summary{color:var(--ink)}
.gm-desk-page .q p,.gm-desk-page .q__a{color:var(--ink-2);max-width:60ch;padding:0 0 clamp(18px,2.2vw,26px);font-size:1rem;line-height:1.6}
@media(max-width:900px){.gm-desk-page .faq__grid{grid-template-columns:1fr}.gm-desk-page .faq__side{position:static}.gm-desk-page .faq__fig{max-width:300px}}

/* ─── Contact: mix chips (пунктирна рамка маджента 50%, чіпи mono маджента-заливка) ─── */
.gm-desk-page .ask__mix{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 14px;border-radius:14px;border:1px dashed rgba(233,30,150,.5);background:rgba(233,30,150,.05)}
.gm-desk-page .ask__mix-list{display:flex;flex-wrap:wrap;gap:6px}
.gm-desk-page .ask__mix-list i,.gm-desk-page .ask__mix-list .chip{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;padding:.4em .7em;border-radius:6px;background:var(--mag);color:#fff;display:inline-block}

/* ─── Sticky mix bar — темний острів (bottom нижче кукі-банера z-index:90 —
   cookie-banner.html.j2 інлайн z-index:90 — mixbar на 1 менше). Видимість —
   #mixbar.is-visible (gm-desk.js): без класу translateY(120%)+opacity:0. */
body.is-dragging{user-select:none}
.gm-desk-page #mixbar{position:fixed;left:0;right:0;bottom:0;z-index:89;padding:0 clamp(20px,4vw,64px) 16px;pointer-events:none;transform:translateY(120%);opacity:0;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.gm-desk-page #mixbar.is-visible{transform:none;opacity:1}
.gm-desk-page .mixbar__inner{pointer-events:auto;margin:0 auto;width:min(1360px,100%);display:flex;align-items:center;gap:18px;padding:12px 14px 12px 18px;border-radius:18px;background:rgba(12,12,12,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(233,30,150,.4);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.gm-desk-page .mixbar__meter{display:flex;align-items:flex-end;gap:2px;height:20px}
.gm-desk-page .mixbar__meter i{width:4px;background:var(--mag);border-radius:1px;animation:gm-svc-vu .9s ease-in-out infinite}
.gm-desk-page .mixbar__meter i:nth-child(1){height:60%}.gm-desk-page .mixbar__meter i:nth-child(2){height:100%;animation-delay:-.3s}.gm-desk-page .mixbar__meter i:nth-child(3){height:40%;animation-delay:-.6s}
@keyframes gm-svc-vu{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.gm-desk-page .mixbar__text{display:flex;align-items:center;gap:.8em;font-family:var(--display);font-size:1.2rem;letter-spacing:.03em;white-space:nowrap}
.gm-desk-page .mixbar__text b{font-weight:400;color:var(--ink)}
.gm-desk-page .mixbar__note{font-size:1rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-desk-page .mixbar__clear{color:var(--ink-3);text-decoration:underline;text-underline-offset:.3em}
.gm-desk-page .mixbar__clear:hover{color:var(--ink)}
@media(max-width:800px){.gm-desk-page .mixbar__note{display:none}.gm-desk-page .mixbar__inner{gap:10px;padding:10px}.gm-desk-page .mixbar__text{font-size:1rem}.gm-desk-page .mixbar .btn{padding:0 1.1em;height:44px;font-size:.85rem}}
@media(max-width:520px){.gm-desk-page .mixbar__text .mono{display:none}}

@media(prefers-reduced-motion:reduce){
  .gm-desk-page .mixbar__meter i{animation:none}
  .gm-desk-page .desk{transform:none;opacity:1;transition:none}
  .gm-desk-page .hero__title .word{transform:none;transition:none}
  .gm-desk-page .scribble{stroke-dashoffset:0;transition:none}
  .gm-desk-page .word--accent.is-swap,.gm-desk-page .desk__screen-line.is-swap{transition:none}
}

.gm-desk-page .mix--full{grid-column:span 2;border-color:rgba(233,30,150,.4)}
@media(max-width:1000px){.gm-desk-page .mix--full{grid-column:span 2}}@media(max-width:600px){.gm-desk-page .mix--full{grid-column:span 1}}

/* ============================================================
   Світла тема — html[data-gm-theme="light"]
   ============================================================
   Папір #F5F3EF, поверхня #fff, текст #14110E, маджента #A8156A, violet
   #7B1FD1. .mono на папері підняв альфу ink-3 з .46 до --gm-muted-a (.62,
   виміряно 4.45:1 — під .58 ставить лінтер; тут беремо той самий токен,
   яким уже виправлено це на головній). .sheet лишається папером в обох
   темах — лише рамка. */
html[data-gm-theme="light"] .gm-desk-page{
  --bg:#F5F3EF;
  --bg-2:#EFEBE2;
  --surface:#fff;
  --line:rgba(20,17,14,.09);
  --ink:#14110E;
  --ink-2:rgba(20,17,14,.74);
  --ink-3:rgb(var(--gm-fg-rgb) / var(--gm-muted-a));
  --mag:#A8156A;
  --violet:#7B1FD1;
}
html[data-gm-theme="light"] .gm-desk-page .sheet{border:1px solid rgba(20,17,14,.12)}

/* Темні острови — лишаються темними попри тему: свій opaque фон і власні
   токени всередині, незалежні від .gm-desk-page/світлого перевизначення вище. */
.gm-desk-page .desk,
.gm-desk-page .case,
.gm-desk-page .mixbar,
.gm-desk-page .mix--full{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}
.gm-desk-page .mix--full{background:linear-gradient(135deg,rgba(233,30,150,.16),rgba(167,54,255,.10)),#14111A}

/* Services hero lead: хайлайтер під словом (концепт: .hero__lead em; шаблон рендерить <mark class="hi">) */
.gm-desk-page .hero__lead mark.hi,.gm-desk-page .hero__lead em{font-style:normal;color:rgb(var(--gm-fg-rgb));background:linear-gradient(transparent 55%,rgba(223,255,58,.28) 55%)}
html[data-gm-theme="light"] .gm-desk-page .hero__lead mark.hi{background:linear-gradient(transparent 55%,rgba(200,220,0,.45) 55%)}

/* Services (.gm-desk-page): reset концепту (style.css:1–16 там був глобальний) — локально,
   бо бойові стилі дають кнопкам чорний колір, а посиланням синій підкреслений. */
.gm-desk-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;letter-spacing:inherit}
.gm-desk-page a{color:inherit;text-decoration:none}
.gm-desk-page .gm-fit__fine a,.gm-desk-page .gm-fit__check a{text-decoration:underline}
.gm-desk-page h1,.gm-desk-page h2,.gm-desk-page h3,.gm-desk-page p,.gm-desk-page figure{margin:0}
.gm-desk-page ul,.gm-desk-page ol{list-style:none;margin:0;padding:0}
.gm-desk-page img{max-width:100%;height:auto;display:block}
.gm-desk-page details summary{list-style:none;cursor:pointer}
.gm-desk-page details summary::-webkit-details-marker{display:none}
.gm-desk-page .ch__num{white-space:nowrap}

/* ============================================================
   Service page — one fader, full scale (next)
   ============================================================
   Ported 10.09.2026 з /opt/products/grandma-next/site/pages.css рядки 1–138
   (Service hero, Intro, Problem, Signal chain, Spec sheet on page, Why checks,
   Board row, Featured case card, FAQ on inner pages, Other faders) +
   /opt/products/grandma-next/site/style.css (.tile базовий — .tile--check
   успадковує його, .tile сам ще не переносився в цей файл). Рядок 362+
   pages.css (0.6.2 фікси .cs-foot/.bl-*) не стосується цих класів — не
   перенесено. Контракт: scratchpad/service-page-contract.md, обгортка
   `<div class="gm-desk-page gm-sv">` — усі селектори скоповані `.gm-sv ` за
   винятком body.is-dragging (глобальний, вже є вище у файлі). Токени
   --ink/--mag/--line/--display/... успадковані з `.gm-desk-page` (розділ
   «Services — the desk» вище) — тут не перевизначені, крім двох явних
   винятків нижче (dark-island fix і hue-мапа). */

/* ─── Service hero: one fader, full scale ─── */
.gm-sv .sv-hero{position:relative;min-height:92svh;padding:clamp(110px,14vh,160px) 0 clamp(48px,6vw,80px);display:flex;align-items:center;overflow:hidden}
.gm-sv .sv-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(34% 50% at 16% 55%,hsla(var(--hue),82%,52%,.26),transparent 70%),radial-gradient(28% 34% at 88% 18%,rgba(167,54,255,.16),transparent 70%)}
.gm-sv .sv-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:clamp(180px,20vw,260px) 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.gm-sv .sv-hero__strip{display:flex;flex-direction:column;align-items:center;gap:14px}
.gm-sv .strip--xl{--lv:0;--pk:0;width:100%;padding:22px 12px 16px;gap:14px;border-radius:22px;background:linear-gradient(180deg,#171717,#0d0d0d);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08) inset}
.gm-sv .strip--xl .strip__led{width:10px;height:10px}
.gm-sv .strip--xl.is-on .strip__led{background:hsl(var(--hue),90%,58%);box-shadow:0 0 12px hsl(var(--hue),90%,58%)}
.gm-sv .strip--xl .strip__meter{width:18px;height:clamp(180px,30vh,300px);border-radius:5px}
.gm-sv .strip--xl .strip__meter i{background:linear-gradient(180deg,var(--violet) 0%,hsl(var(--hue),88%,56%) 35%,hsl(var(--hue),80%,36%) 100%);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 10px);mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 10px)}
.gm-sv .strip--xl .strip__fader{width:44px;height:clamp(220px,34vh,340px);margin-bottom:36px}
.gm-sv .strip--xl .strip__track{width:6px}
.gm-sv .strip--xl .strip__track::after{background:hsl(var(--hue),88%,56%);box-shadow:0 0 14px hsla(var(--hue),88%,56%,.7)}
.gm-sv .strip--xl .strip__knob{width:44px;height:64px;border-radius:8px}
.gm-sv .strip--xl .strip__knob::after{left:7px;right:7px;height:3px}
.gm-sv .strip--xl.is-on .strip__knob::after{background:hsl(var(--hue),88%,60%);box-shadow:0 0 8px hsl(var(--hue),88%,60%)}
.gm-sv .strip--xl .strip__label{font-size:.78rem;letter-spacing:.18em;color:#fff}
.gm-sv .sv-hero__index{font-size:.62rem;letter-spacing:.2em}
.gm-sv .sv-hero__back{font-size:.62rem;letter-spacing:.14em;color:var(--ink-3);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.gm-sv .sv-hero__back:hover{color:#fff;border-color:var(--mag)}
.gm-sv .sv-hero__title{font-size:clamp(3.2rem,6.6vw,6.6rem)}
.gm-sv .sv-hero__title .line{display:inline-flex;margin-right:.22em}
.gm-sv .sv-hero__title .word{display:inline-block;transform:translateY(0);opacity:1;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.gm-sv .sv-hero__title .word.gm-sv-word-in{transform:translateY(110%);opacity:0}
.gm-sv.is-loaded .sv-hero__title .line:nth-child(1) .word{transition-delay:.05s}
.gm-sv.is-loaded .sv-hero__title .line:nth-child(2) .word{transition-delay:.14s}
.gm-sv.is-loaded .sv-hero__title .line:nth-child(3) .word{transition-delay:.23s}
.gm-sv.is-loaded .sv-hero__title .line:nth-child(4) .word{transition-delay:.32s}
.gm-sv .sv-hero__note{margin-top:1.6rem}
.gm-sv .sv-hero__trust{margin-top:1.2rem;font-size:.62rem;letter-spacing:.14em;color:var(--ink-3)}
.gm-sv .sv-hero__trust b{font-family:var(--display);font-size:1.6rem;letter-spacing:.02em;color:var(--mag);margin-right:.3em;vertical-align:middle}
.gm-sv .sv-hero__strip{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gm-sv:not(.is-loaded) .sv-hero__strip{opacity:0;transform:translateY(18px)}
@media(max-width:900px){.gm-sv .sv-hero__inner{grid-template-columns:1fr;gap:32px}.gm-sv .sv-hero__strip{flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:20px}.gm-sv .strip--xl{width:120px}.gm-sv .strip--xl .strip__meter{height:150px}.gm-sv .strip--xl .strip__fader{height:180px}.gm-sv .sv-hero{min-height:0;padding-top:100px}}

/* ─── Intro ─── */
.gm-sv .sv-intro{padding:clamp(40px,6vw,80px) 0;border-block:1px solid var(--line);background:var(--bg-2)}
.gm-sv .sv-intro__text{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1.1;max-width:1100px}
.gm-sv .sv-intro__text em{font-style:normal;color:#fff;background:linear-gradient(transparent 58%,rgba(223,255,58,.32) 58%)}

/* ─── Problem: symptoms ─── */
.gm-sv .sv-problem__hint{margin-bottom:12px}
.gm-sv .sv-symptoms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gm-sv .sym--card{align-items:flex-start;padding:22px;border-radius:18px;min-height:150px;background:var(--surface)}
.gm-sv .sym--card b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;margin-bottom:.45em;letter-spacing:.01em}
.gm-sv .sym--card span{color:var(--ink-2);font-size:.92rem}
.gm-sv .sym--card.is-on span{color:#fff}
.gm-sv .sv-problem__close{margin:28px 0 clamp(72px,10vw,140px);font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.1;color:var(--ink-2);max-width:40ch}
@media(max-width:900px){.gm-sv .sv-symptoms{grid-template-columns:1fr}.gm-sv .sym--card{min-height:0}}

/* ─── Signal chain ─── */
.gm-sv .sv-chain{background:var(--bg-2);border-top:1px solid var(--line)}
.gm-sv .chain{position:relative;padding:0 0 clamp(72px,10vw,140px) clamp(40px,5vw,72px)}
.gm-sv .chain__rail{position:absolute;left:clamp(12px,1.6vw,22px);top:0;bottom:clamp(72px,10vw,140px);width:4px;height:auto;overflow:visible}
.gm-sv .chain__rail line{stroke-width:4;stroke-linecap:round}
.gm-sv .chain__rail-bg{stroke:rgba(255,255,255,.1)}
.gm-sv .chain__rail-fg{stroke:var(--mag);filter:drop-shadow(0 0 8px rgba(233,30,150,.7))}
.gm-sv .chain__list{list-style:none;display:flex;flex-direction:column;gap:16px}
.gm-sv .chain__in,.gm-sv .chain__out{font-size:.62rem;letter-spacing:.16em;color:var(--ink-3);padding:6px 0}
.gm-sv .chain__out{color:var(--mag)}
.gm-sv .module{position:relative;display:grid;grid-template-columns:64px 1fr;gap:6px clamp(16px,2.5vw,32px);padding:clamp(20px,2.6vw,32px);border-radius:20px;background:var(--surface);border:1px solid var(--line);transition:border-color .4s,transform .6s var(--ease)}
.gm-sv .module.is-lit{border-color:rgba(233,30,150,.55)}
.gm-sv .module:hover{transform:translateX(6px)}
.gm-sv .module__port{position:absolute;left:calc(-1 * clamp(40px,5vw,72px) + clamp(12px,1.6vw,22px) - 6px);top:50%;width:16px;height:16px;border-radius:50%;background:#0a0a0a;border:3px solid rgba(255,255,255,.2);transform:translateY(-50%);transition:border-color .3s,box-shadow .3s}
.gm-sv .module.is-lit .module__port{border-color:var(--mag);box-shadow:0 0 12px rgba(233,30,150,.8)}
.gm-sv .module__num{grid-row:span 2;font-family:var(--display);font-size:2.4rem;letter-spacing:.04em;color:var(--mag);line-height:1}
.gm-sv .module__title{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:.95}
.gm-sv .module__text{color:var(--ink-2);font-size:.98rem;max-width:64ch}
@media(max-width:700px){.gm-sv .module{grid-template-columns:1fr}.gm-sv .module__num{grid-row:auto;font-size:1.6rem}}

/* ─── Spec sheet on page ─── */
.gm-sv .sv-spec{padding-bottom:clamp(72px,10vw,140px)}
.gm-sv .sheet--page{margin-left:0;margin-bottom:0}
.gm-sv .sv-mixes{display:flex;flex-direction:column;gap:8px}
.gm-sv .sv-mix{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(20,17,14,.18);background:rgba(255,255,255,.55);transition:transform .4s var(--ease),border-color .3s}
.gm-sv .sv-mix:hover{transform:translateX(4px);border-color:var(--mag-deep)}
.gm-sv .sv-mix__f{display:flex;gap:4px}
.gm-sv .sv-mix__f i{font-family:var(--mono);font-style:normal;font-size:.56rem;letter-spacing:.1em;padding:.35em .55em;border-radius:5px;border:1px solid rgba(20,17,14,.25);color:var(--on-paper-2)}
.gm-sv .sv-mix__f i.is-me{background:var(--mag-deep);border-color:var(--mag-deep);color:#fff}
.gm-sv .sv-mix__t{font-family:var(--display);font-size:1.15rem;letter-spacing:.02em;color:var(--on-paper)}

/* ─── Why: checks (.tile базовий переноситься тут разом з .tile--check —
   /opt/products/grandma-next/site/style.css:291-297, до цього файлу ще не
   потрапляв; варіанти --wide/--dark/--partners/--accent на service page не
   використовуються, не перенесено) ─── */
.gm-sv .sv-why{background:var(--bg-2);border-top:1px solid var(--line)}
.gm-sv .sv-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:clamp(72px,10vw,140px)}
.gm-sv .tile{position:relative;padding:clamp(20px,2.4vw,32px);min-height:230px;border-radius:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.9em;overflow:hidden;transition:transform .6s var(--ease),border-color .3s;isolation:isolate}
.gm-sv .tile::after{content:"";position:absolute;right:-30%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(167,54,255,.5),transparent);opacity:0;transition:opacity .5s;z-index:-1}
.gm-sv .tile:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.25)}
.gm-sv .tile:hover::after{opacity:1}
.gm-sv .tile__k{font-family:var(--display);font-size:clamp(2rem,3vw,2.8rem);line-height:.9}
.gm-sv .tile p{color:var(--ink-2);font-size:.95rem}
.gm-sv .tile--check{min-height:0;gap:.5em}
.gm-sv .tile__tick{font-family:var(--display);font-size:1.6rem;color:var(--mag);line-height:1}
.gm-sv .tile__k--sm{font-size:1.6rem}
@media(max-width:900px){.gm-sv .sv-checks{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gm-sv .sv-checks{grid-template-columns:1fr}}

/* ─── Board row (табло — темний острів, свої токени нижче) ─── */
.gm-sv .board-row{display:grid;grid-template-columns:1.3fr .6fr 1.4fr .8fr .6fr;align-items:center;gap:clamp(12px,2vw,28px);padding:clamp(16px,2vw,24px) clamp(16px,2.4vw,32px);border-radius:16px;background:#0b0b0b;border:1px solid rgba(255,255,255,.1);font-family:var(--display);letter-spacing:.03em;transition:border-color .3s,transform .5s var(--ease)}
.gm-sv .board-row--single{margin-top:14px}
.gm-sv .board-row:hover{border-color:var(--mag);transform:translateY(-3px)}
.gm-sv .board-row__client{font-size:clamp(1.3rem,2vw,1.8rem);display:flex;flex-direction:column;gap:.15em}
.gm-sv .board-row__client small{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.gm-sv .board-row__key{font-size:.62rem;color:var(--mag)}
.gm-sv .board-row__num{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.gm-sv .board-row__num b{font-weight:400;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.gm-sv .board-row__num small{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.gm-sv .board-row__period{font-size:.62rem;color:var(--ink-2)}
.gm-sv .board-row__status{font-size:.6rem;letter-spacing:.16em;justify-self:end;padding:.4em .7em;border-radius:6px;border:1px solid var(--line);color:var(--ink-2)}
.gm-sv .board-row__status.is-live{color:var(--hi);border-color:rgba(223,255,58,.4)}
.gm-sv .board-row__status.is-pilot{color:var(--violet);border-color:rgba(167,54,255,.4)}
.gm-sv .board-row__status.is-rnd{color:var(--ink-3);border-color:var(--line)}
.gm-sv .flip{display:inline-flex;gap:.04em}
.gm-sv .flip i{display:inline-block;font-style:normal;white-space:pre;transform-origin:50% 50%;animation:gm-sv-flipin .5s var(--ease) both}
.gm-sv .flip--flap{gap:.06em}
.gm-sv .flip--flap i{position:relative;text-align:center;animation:none;border-radius:.08em;background:rgba(255,255,255,.035);padding:0 .04em;line-height:1.05}
.gm-sv .flip--flap i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.gm-sv .flip--flap i.is-spinning{color:rgba(255,255,255,.55);animation:gm-sv-flapspin .076s linear infinite}
@keyframes gm-sv-flapspin{0%{transform:rotateX(0)}50%{transform:rotateX(-60deg)}100%{transform:rotateX(0)}}
.gm-sv .board-row__num .flip--flap i{background:rgba(255,255,255,.05)}
@keyframes gm-sv-flipin{0%{transform:rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}
@media(max-width:800px){.gm-sv .board-row{grid-template-columns:1fr 1fr;grid-template-areas:"c s" "n n" "k p"}.gm-sv .board-row__client{grid-area:c}.gm-sv .board-row__status{grid-area:s}.gm-sv .board-row__num{grid-area:n}.gm-sv .board-row__key{grid-area:k}.gm-sv .board-row__period{grid-area:p;justify-self:end}}

/* ─── Featured case card (медіа на темному — темний острів, токени нижче) ─── */
.gm-sv .sv-case{padding-bottom:clamp(72px,10vw,140px)}
.gm-sv .sv-case__card{display:grid;grid-template-columns:1.1fr .9fr;gap:0;margin-top:14px;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.gm-sv .sv-case__media{aspect-ratio:21/9;min-height:100%}
.gm-sv .sv-case__media img{width:100%;height:100%;object-fit:cover}
.gm-sv .sv-case__body{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:1.2em;justify-content:center}
.gm-sv .sv-case__tag{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1}
.gm-sv .sv-case__metrics{display:flex;gap:clamp(20px,4vw,48px);flex-wrap:wrap}
.gm-sv .sv-case__body .btn{align-self:flex-start}
@media(max-width:900px){.gm-sv .sv-case__card{grid-template-columns:1fr}}

/* ─── FAQ on inner pages (.faq__grid/.faq__side/.faq__list вже є в блоці
   «Services — the desk» вище — не дублюється, лише сторінковий приросток) ─── */
.gm-sv .faq--page .faq__side .hand--lg{margin-top:1.6rem;font-size:1.3rem}

/* ─── Other faders (.mini — темний острів, токени нижче) ─── */
.gm-sv .sv-others{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.gm-sv .sv-others__label{margin-bottom:16px}
.gm-sv .sv-others__row{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.gm-sv .mini{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:center;transition:transform .5s var(--ease),border-color .3s}
.gm-sv .mini:hover{transform:translateY(-6px);border-color:hsl(var(--hue),85%,55%)}
.gm-sv .mini__meter{width:8px;height:56px;border-radius:3px;background:#0a0a0a;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.gm-sv .mini__meter i{position:absolute;left:0;right:0;bottom:0;height:30%;background:hsl(var(--hue),85%,55%);transition:height .5s var(--ease)}
.gm-sv .mini:hover .mini__meter i{height:85%}
.gm-sv .mini__label{font-size:.56rem;letter-spacing:.14em;color:var(--ink-2)}
.gm-sv .mini__name{font-family:var(--ui);font-weight:600;font-size:.72rem;color:var(--ink-3)}
@media(max-width:900px){.gm-sv .sv-others__row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.gm-sv .sv-others__row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.gm-sv .strip--xl .strip__label{writing-mode:horizontal-tb;transform:none;font-size:.7rem}.gm-sv .strip--xl{padding-top:16px}}

/* ─── Hue-мапа: .mini[data-key] і .sv-hero[data-key] як fallback, якщо
   інлайновий style="--hue" з page.deskHue відсутній ─── */
.gm-sv .mini[data-key="automation"],.gm-sv .sv-hero[data-key="automation"]{--hue:285}
.gm-sv .mini[data-key="seo"],.gm-sv .sv-hero[data-key="seo"]{--hue:322}
.gm-sv .mini[data-key="google-ads"],.gm-sv .sv-hero[data-key="google-ads"]{--hue:330}
.gm-sv .mini[data-key="ai-search"],.gm-sv .sv-hero[data-key="ai-search"]{--hue:275}
.gm-sv .mini[data-key="content"],.gm-sv .sv-hero[data-key="content"]{--hue:340}
.gm-sv .mini[data-key="analytics"],.gm-sv .sv-hero[data-key="analytics"]{--hue:300}
.gm-sv .mini[data-key="meta-ads"],.gm-sv .sv-hero[data-key="meta-ads"]{--hue:325}
.gm-sv .mini[data-key="linkedin"],.gm-sv .sv-hero[data-key="linkedin"]{--hue:265}
.gm-sv .mini[data-key="websites"],.gm-sv .sv-hero[data-key="websites"]{--hue:315}

/* ─── Темні острови service page: board-row/sv-case__card/mini лишаються
   темними попри тему — той самий патерн, що .desk/.case/.mixbar вище у
   файлі, тут не змінений, лише повторений для нових класів. Решта
   (.sym--card/.module/.tile) уже коректно біліє на папері через var(--surface)
   і var(--line), перевизначені на .gm-desk-page у світлій темі вище — окремого
   правила не треба. ─── */
.gm-sv .board-row,
.gm-sv .sv-case__card,
.gm-sv .mini{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}

@media(prefers-reduced-motion:reduce){
  .gm-sv .sv-hero__title .word{transition:none;transform:none;opacity:1}
  .gm-sv .sv-hero__strip{transition:none;opacity:1;transform:none}
  .gm-sv .flip i{animation:none}
  .gm-sv .flip--flap i.is-spinning{animation:none;color:inherit}
  .gm-sv .module,.gm-sv .board-row,.gm-sv .mini,.gm-sv .tile,.gm-sv .sv-mix{transition:none}
}

/* Правки Макса 10.09 (послуги): без світіння кнопок у спокійному стані, прозорі
   фони секцій, щоб бризки на тлі сторінки лишались видимими між блоками. */
.gm-desk-page .btn--primary,.gm-fit__submit,.gm-diag__btn--primary{box-shadow:none}
.gm-desk-page .btn--primary:hover,.gm-fit__submit:hover,.gm-diag__btn--primary:hover{box-shadow:0 12px 40px -12px rgba(233,30,150,.55)}
.gm-desk-page .channels,.gm-desk-page .mixes,.gm-sv .sv-intro,.gm-sv .sv-chain,.gm-sv .sv-why,.gm-sv .sv-others{background:transparent}
html[data-gm-theme="light"] .gm-desk-page .channels,html[data-gm-theme="light"] .gm-desk-page .mixes,html[data-gm-theme="light"] .gm-sv .sv-intro,html[data-gm-theme="light"] .gm-sv .sv-chain,html[data-gm-theme="light"] .gm-sv .sv-why,html[data-gm-theme="light"] .gm-sv .sv-others{background:transparent}


/* ============================================================
   Cases — the board (next)
   ============================================================
   Ported 10.09.2026 з /opt/products/grandma-next/site/pages.css рядки 139–191
   (board-hero, board, filters, rows, panel/card, empty, ctx demo, facts, hand)
   + зі style.css класи `.tile__k`/`.tile__k--accent` (базовий, потрібен
   `.tile--stat`-у для рендеру числа — в site-additions.css їх ще не було) і
   з pages.css рядки 295–299 `.tile--stat`/`.wy-stats` (теж відсутні досі).
   Контракт: scratchpad/board-contract.md (етап E). Усе на сторінці лежить у
   `<div class="gm-desk-page gm-sv gm-board-page">` — .gm-desk-page/.gm-sv уже
   дають токени, reset, .btn/.preset/.eyebrow/.h2/.lead/.sec-head/.mono/.hand/
   .wrap/.tile/.tile--check/.case__num/.board-row(+≤800 card variant)/.flip/
   .flip--flap/.hero__title (слова-каскад), тому тут — лише нові класи з
   префіксом `.gm-board-page `, щоб не витекти на /services/ чи /why-us/.
   Не перенесено: прелоадер/Lenis/магніти/data-hover (рішення контракту).

   JS-контракт (gm-board.js, не мій код, лише класи-стани, які CSS має вміти
   показати):
   - `.board__item.is-hidden` — фільтр ховає рядок (display:none, нижче).
   - `.board__item.is-open .board-row` — активний рядок (стиль уже успадкований
     від .gm-sv .board-row:hover; тут лише плоский нижній край під панель).
   - `.board__panel` — БЕЗ transition/height у CSS: висоту/opacity анімує
     WAAPI інлайн (element.animate) в JS, CSS має лише overflow:hidden, щоб
     проміжні кадри не текли за межі.
   - `.ctx__facts[hidden]` — факти сховані до кліку (без blur-варіанту, він
     прибраний у 0.7.3+ апстріму: hidden/не-hidden, не opacity-blur).
   - `.ctx__facts.is-in` на `dl` — коли факти показані, діти (div) з'являються
     каскадом (opacity+translateY), затримка на дитину = nth-child × 70ms.
   - `#context.is-ctx` на section — активний стан демо; `.ctx__num b` стає
     білим (замість --mag) — саме такий селектор (ID+клас), як у джерелі.
   - `.preset.is-active` на фільтр-чипі, `board__count b` (flip) для лічильника
     — уже покриті існуючим `.gm-desk-page .preset`/`.flip`.
   ============================================================ */

/* ─── Board hero ─── */
.gm-board-page .board-hero{position:relative;padding:clamp(110px,14vh,160px) 0 clamp(48px,6vw,80px);overflow:hidden}
.gm-board-page .board-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(30% 40% at 82% 30%,rgba(233,30,150,.2),transparent 70%),radial-gradient(24% 30% at 8% 80%,rgba(167,54,255,.14),transparent 70%)}
.gm-board-page .board-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.gm-board-page .board-hero__title{font-size:clamp(3.6rem,8vw,8.4rem)}
.gm-board-page .board-hero__title .line{display:inline-flex;margin-right:.22em}
.gm-board-page .board-hero__note{margin-top:1.4rem}
.gm-board-page .board-hero__fig{position:relative;justify-self:end;width:min(100%,380px);margin-bottom:-8%}
.gm-board-page .board-hero__fig img{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
.gm-board-page .board-hero__fig figcaption{position:absolute;left:-30%;top:16%;font-size:1.15rem;transform:rotate(-5deg);text-align:right}

/* ─── Board: filters, column head, rows, panel/card, empty ─── */
.gm-board-page .board{position:relative;z-index:1}
.gm-board-page .board__filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px}
.gm-board-page .board__filters-label{font-size:.58rem;margin-right:6px}
.gm-board-page .board__count{margin-left:auto;font-size:.62rem;display:flex;align-items:baseline;gap:.4em}
.gm-board-page .board__count b{font-family:var(--display);font-size:1.6rem;color:var(--mag);font-weight:400}
.gm-board-page .board__head{display:grid;grid-template-columns:1.3fr .6fr 1.4fr .8fr .6fr;gap:clamp(12px,2vw,28px);padding:0 clamp(16px,2.4vw,32px) 10px;font-size:.58rem;letter-spacing:.16em;color:var(--ink-3)}
.gm-board-page .board__head span:last-child{text-align:right}
.gm-board-page .board__rows{list-style:none;display:flex;flex-direction:column;gap:8px}
.gm-board-page .board__item.is-hidden{display:none}
.gm-board-page .board-row--btn{width:100%;text-align:left;color:inherit}
.gm-board-page .board__item.is-open .board-row{border-color:var(--mag);border-bottom-left-radius:0;border-bottom-right-radius:0;transform:none}
.gm-board-page .board__panel{overflow:hidden}
.gm-board-page .board__card{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--surface);border:1px solid rgba(233,30,150,.4);border-top:0;border-radius:0 0 16px 16px;overflow:hidden}
.gm-board-page .board__media{min-height:100%}
.gm-board-page .board__media img{width:100%;height:100%;object-fit:cover}
.gm-board-page .board__body{padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;gap:1.1em}
.gm-board-page .board__tag{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1}
.gm-board-page .board__kpis{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.gm-board-page .board__kpis .case__num b{font-size:clamp(2rem,3vw,2.8rem)}
.gm-board-page .board__proves{display:flex;flex-direction:column;gap:.3em;padding:12px 14px;border-radius:12px;border:1px dashed rgba(223,255,58,.45);color:var(--ink);font-size:.92rem}
.gm-board-page .board__proves .mono{color:var(--hi);font-size:.58rem}
.gm-board-page .board__cta{display:flex;flex-wrap:wrap;gap:10px}
.gm-board-page .board__empty{padding:40px 0;text-align:center;color:var(--ink-3)}
@media(max-width:1000px){
  .gm-board-page .board-hero__inner{grid-template-columns:1fr}
  .gm-board-page .board-hero__fig{justify-self:start;width:min(70%,320px);margin:0}
  .gm-board-page .board-hero__fig figcaption{left:auto;right:-10%;text-align:left}
  .gm-board-page .board__head{display:none}
  .gm-board-page .board__card{grid-template-columns:1fr}
  .gm-board-page .board__media{aspect-ratio:21/9}
}
@media(max-width:600px){.gm-board-page .board__count{margin-left:0;width:100%}}

/* ─── Numbers need context ─── */
.gm-board-page .ctx{background:var(--bg-2);border-top:1px solid var(--line);padding-bottom:clamp(72px,10vw,140px)}
.gm-board-page .ctx__demo{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:clamp(20px,4vw,56px);padding:clamp(24px,3vw,44px);border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.gm-board-page .ctx__num{display:flex;flex-direction:column;gap:.3em}
.gm-board-page .ctx__num b{font-family:var(--display);font-size:clamp(4rem,9vw,8rem);line-height:.9;color:var(--mag);font-weight:400}
.gm-board-page .ctx__num .mono{font-size:.62rem}
.gm-board-page .ctx__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.gm-board-page .ctx__facts div{display:flex;flex-direction:column;gap:.2em;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gm-board-page .ctx__facts.is-in div{opacity:1;transform:none}
.gm-board-page .ctx__facts.is-in div:nth-child(1){transition-delay:0ms}
.gm-board-page .ctx__facts.is-in div:nth-child(2){transition-delay:70ms}
.gm-board-page .ctx__facts.is-in div:nth-child(3){transition-delay:140ms}
.gm-board-page .ctx__facts.is-in div:nth-child(4){transition-delay:210ms}
.gm-board-page .ctx__facts dt{font-size:.58rem;color:var(--ink-3)}
.gm-board-page .ctx__facts dd{font-size:.95rem;color:var(--ink)}
.gm-board-page .ctx__facts div:last-child{grid-column:span 2}
.gm-board-page .ctx__facts div:last-child dt{color:var(--hi)}
.gm-board-page .ctx__hand{position:absolute;right:clamp(20px,3vw,44px);bottom:-12px;font-size:1.15rem;transform:rotate(-3deg)}
.gm-board-page #context.is-ctx .ctx__num b{color:#fff}
@media(max-width:900px){
  .gm-board-page .ctx__demo{grid-template-columns:1fr}
  .gm-board-page .ctx__facts{grid-template-columns:1fr}
  .gm-board-page .ctx__facts div:last-child{grid-column:span 1}
}

/* ─── Numbers need context: 4 stat tiles (.tile__k база потрібна для
   .tile__k--accent — жодного з трьох класів (.tile--stat/.wy-stats/
   .tile__k--accent) ще не було в цьому файлі; .tile сам уже є вище) ─── */
.gm-board-page .tile__k{font-family:var(--display);font-size:clamp(2rem,3vw,2.8rem);line-height:.9}
.gm-board-page .tile__k--accent{color:var(--mag);font-size:clamp(2.6rem,4.4vw,4rem)}
.gm-board-page .tile__k .hand{font-size:.5em;vertical-align:middle;margin-left:.2em}
.gm-board-page .wy-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.gm-board-page .tile--stat{min-height:0;gap:.4em}
.gm-board-page .tile--stat .flip--flap i{background:rgba(255,255,255,.05);font-size:.94em}
.gm-board-page .tile--stat .mono{font-size:.56rem;color:var(--ink-3)}
@media(max-width:900px){.gm-board-page .wy-stats{grid-template-columns:1fr 1fr}}

/* ─── Темні острови (світла тема): board-row уже темний острів у .gm-sv
   вище (той самий елемент несе .gm-sv), тут лише нові класи цієї сторінки. ─── */
.gm-board-page .board__card,
.gm-board-page .ctx__demo,
.gm-board-page .tile--stat{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}

/* ─── Світла тема: пресети фільтра/шапка колонок/empty на папері ─── */
html[data-gm-theme="light"] .gm-board-page .board__filters .preset{background:#fff;border-color:rgba(20,17,14,.16);color:var(--on-paper-2)}
html[data-gm-theme="light"] .gm-board-page .board__filters .preset:hover{border-color:var(--mag-deep);color:var(--on-paper)}
html[data-gm-theme="light"] .gm-board-page .board__filters .preset.is-active{background:var(--mag-deep);border-color:var(--mag-deep);color:#fff}
html[data-gm-theme="light"] .gm-board-page .board__filters .preset--all{border-color:var(--mag-deep);color:var(--on-paper)}
html[data-gm-theme="light"] .gm-board-page .board__filters .preset--reset{color:var(--on-paper-2)}
html[data-gm-theme="light"] .gm-board-page .board__filters .preset--reset:hover{color:var(--on-paper)}
html[data-gm-theme="light"] .gm-board-page .board__head{color:var(--on-paper-2)}
html[data-gm-theme="light"] .gm-board-page .board__empty{color:var(--on-paper-2)}

@media(prefers-reduced-motion:reduce){
  .gm-board-page .ctx__facts div{transition:none}
}

/* Messengers partial (послуги, внутрішні послуги, табло): ті самі мобільні правила,
   що й у Final CTA на головній — одна колонка, кнопки на всю ширину. */
@media (max-width: 900px) {
  [data-screen-label="Messengers"] { padding: 80px 0 !important; }
  [data-screen-label="Messengers"] > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 36px !important; align-items: start !important; }
  [data-screen-label="Messengers"] > div[style*="grid-template-columns"] > div { justify-self: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  [data-screen-label="Messengers"] h2 { font-size: clamp(44px, 12vw, 72px) !important; }
  [data-screen-label="Messengers"] p { max-width: 100% !important; font-size: 17px !important; }
}
/* Табло, мобільний: підпис почерком не накладається на фігуру — під нею. */
@media (max-width: 1000px) {
  .gm-board-page .board-hero__fig figcaption { position: static !important; transform: rotate(-2deg); margin-top: 8px; text-align: left !important; }
}

/* ============================================================
   Case page — the number that moved (next)
   ============================================================
   Ported 10.09.2026 з /opt/products/grandma-next/site/pages.css рядки 192–255
   (усі cs-* класи + ≤900 адаптив) і рядок 362+ (0.6.2 фікси cs-foot/
   cs-block--dark). Контракт: scratchpad/case-contract.md. Обгортка сторінки —
   `.gm-desk-page.gm-sv.gm-case-page` (усі три класи на одному елементі), тому
   .module/.chain__list/.board-row--single/.q/.faq__list/.sheet__k і токени
   .gm-desk-page (світла тема, --paper/--on-paper-*) успадковуються без
   повторного визначення тут — нижче лише класи, унікальні для case-сторінки,
   всі під префіксом .gm-case-page. `.h2--sm` у бойовому проді не було в жодному
   вже перенесеному блоці (перевірено grep) — додано тут.
   Нові (не з джерела, за рішенням контракту): `.cs-visual` (докази-скріншоти
   після графіка) і `.cs-quote` (відгук клієнта після results). */

.gm-case-page .cs-hero{position:relative;padding:clamp(110px,14vh,160px) 0 clamp(32px,4vw,56px);overflow:hidden}
.gm-case-page .cs-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(30% 40% at 80% 40%,rgba(233,30,150,.18),transparent 70%)}
.gm-case-page .cs-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.gm-case-page .cs-hero__title{font-size:clamp(3rem,6.4vw,6.4rem)}
.gm-case-page .cs-hero__title .line{display:inline-flex;margin-right:.22em}
.gm-case-page .cs-hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.gm-case-page .cs-hero__facts li{display:flex;flex-direction:column;gap:.25em;font-size:.6rem;letter-spacing:.14em}
.gm-case-page .cs-hero__facts li span{color:var(--ink-3)}
.gm-case-page .cs-hero__facts li b{font-family:var(--ui);font-weight:600;font-size:.82rem;letter-spacing:.02em;text-transform:none;color:#fff}
.gm-case-page .cs-hero__facts a:hover{color:var(--mag)}
.gm-case-page .cs-hero__note{margin-top:1.4rem}
.gm-case-page .cs-hero__media{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#0c0c0c}
.gm-case-page .cs-hero__media img{width:100%;height:100%;object-fit:cover}

.gm-case-page .cs-story{display:grid;grid-template-columns:clamp(240px,26vw,340px) 1fr;gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:clamp(72px,10vw,140px)}
.gm-case-page .cs-kpi{position:sticky;top:110px;padding:clamp(20px,2.4vw,30px);border-radius:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.5em;transition:border-color .5s}
.gm-case-page .cs-kpi.is-after{border-color:var(--mag);box-shadow:0 0 60px -20px rgba(233,30,150,.6)}
.gm-case-page .cs-kpi__label{font-size:.58rem}
.gm-case-page .cs-kpi__num b{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,5.6vw,5.4rem);line-height:.9;color:var(--mag);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.gm-case-page .cs-kpi__what{font-family:var(--ui);font-weight:600;font-size:.85rem;color:var(--ink)}
.gm-case-page .cs-kpi__stage{font-size:.6rem;color:var(--ink-3);min-height:1.4em}
.gm-case-page .cs-kpi__bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:.4em}
.gm-case-page .cs-kpi__bar i{display:block;height:100%;width:0;background:var(--mag);box-shadow:0 0 10px rgba(233,30,150,.7)}
.gm-case-page .cs-kpi__period{font-size:.58rem;color:var(--ink-2)}
.gm-case-page .cs-flow{display:flex;flex-direction:column;gap:clamp(56px,8vw,120px)}
.gm-case-page .cs-block .eyebrow{margin-bottom:.9rem}
.gm-case-page .h2--sm{font-size:clamp(2.4rem,5vw,4.4rem)}
.gm-case-page .cs-body{margin-top:1.2rem;color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.12rem);max-width:64ch;line-height:1.65}
.gm-case-page .cs-body--lg{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;color:var(--ink);max-width:36ch}
.gm-case-page .cs-chain{margin-top:1.8rem;gap:12px}
.gm-case-page .cs-chain .module{grid-template-columns:52px 1fr}
.gm-case-page .cs-kpis{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:1.6rem}
.gm-case-page .cs-kpis .case__num{flex-direction:column;align-items:flex-start;gap:.3em}
.gm-case-page .cs-chart{margin-top:2rem;padding:clamp(16px,2vw,28px);border-radius:18px;background:var(--surface);border:1px solid var(--line);position:relative}
.gm-case-page .cs-chart figcaption{font-size:.58rem;margin-bottom:12px}
.gm-case-page .cs-chart svg{width:100%;height:clamp(160px,22vw,260px);overflow:visible}
.gm-case-page .cs-chart__line{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2.2s var(--ease)}
.gm-case-page .cs-chart.is-in .cs-chart__line{stroke-dashoffset:0}
.gm-case-page .cs-chart__labels{display:flex;justify-content:space-between;margin-top:8px;font-size:.55rem;color:var(--ink-3)}
.gm-case-page .cs-chart__y{position:absolute;left:clamp(16px,2vw,28px);top:44px;bottom:44px;align-items:flex-start;display:flex;flex-direction:column;justify-content:space-between;font-size:.55rem;color:var(--ink-3);pointer-events:none}
.gm-case-page .cs-visual{margin-top:1.6rem}
.gm-case-page .cs-visual img{border-radius:14px;border:1px solid var(--line);width:100%;display:block}
.gm-case-page .cs-visual figcaption{margin-top:.6em;font-size:.58rem;color:var(--ink-3)}
.gm-case-page .cs-quote{margin-top:1.6rem;padding:clamp(20px,2.6vw,32px);border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.gm-case-page .cs-quote p{font-family:var(--body);font-size:1.05rem;line-height:1.6;color:var(--ink)}
.gm-case-page .cs-quote cite{display:block;margin-top:1em;font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gm-case-page .cs-hand{margin-top:1.4rem}
.gm-case-page .cs-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1.6rem}
.gm-case-page .cs-breakdown__item{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.3em}
.gm-case-page .cs-breakdown__item b{font-family:var(--display);font-weight:400;font-size:1.8rem;color:var(--mag);line-height:1}
.gm-case-page .cs-breakdown__item span{font-size:.8rem;color:var(--ink-2)}
.gm-case-page .cs-block--paper{padding:clamp(24px,3vw,44px);border-radius:22px;background:var(--paper);color:var(--on-paper);background-image:linear-gradient(rgba(20,17,14,.05) 1px,transparent 1px);background-size:100% 1.6rem}
.gm-case-page .cs-block--paper .h2--sm .accent{color:var(--mag-deep)}
.gm-case-page .cs-block--paper .cs-body{color:var(--on-paper-2)}
.gm-case-page .cs-kpis--paper .case__num b{color:var(--mag-deep)}
.gm-case-page .cs-kpis--paper .case__num span{color:var(--on-paper-2)}
.gm-case-page .cs-method{margin-top:1.2rem;font-size:.6rem;color:inherit;opacity:.7}
.gm-case-page .cs-block--dark{padding:clamp(24px,3vw,44px);border-radius:22px;background:#0a0a0a;border:1px solid rgba(223,255,58,.35)}
.gm-case-page .cs-block--dark .accent{color:var(--hi)}
/* 0.6.2 — footnote: how it was counted, dl 2 колонки */
.gm-case-page .cs-foot{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}
.gm-case-page .cs-foot div{display:flex;flex-direction:column;gap:.3em}
.gm-case-page .cs-foot dt{font-size:.58rem;color:var(--hi)}
.gm-case-page .cs-foot dd{font-size:.95rem;color:var(--ink)}
.gm-case-page .cs-foot a{border-bottom:1px solid var(--mag)}
.gm-case-page .cs-foot div:last-child{grid-column:span 2}
.gm-case-page .cs-bullets{margin-top:1.4rem}
/* .diag__checks (бойовий шаблон рендерить class="diag__checks cs-bullets" разом) —
   без префікса цей клас у нас не переносився; стрілка скопійована з
   .gm-diag__checks li::before (форма діагностики), той самий патерн. */
.gm-case-page .cs-bullets li{position:relative;padding-left:1.5em;color:var(--ink);font-size:.95rem}
.gm-case-page .cs-bullets li + li{margin-top:.5em}
.gm-case-page .cs-bullets li::before{content:"→";position:absolute;left:0;color:var(--mag)}
.gm-case-page .cs-phases{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:1.6rem;border-left:2px solid var(--line);padding-left:28px}
.gm-case-page .cs-phase{position:relative;padding:0 0 28px}
.gm-case-page .cs-phase__dot{position:absolute;left:-36px;top:.35em;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--mag)}
.gm-case-page .cs-phase b{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1;margin-bottom:.4em}
.gm-case-page .cs-phase p{color:var(--ink-2);font-size:.95rem;max-width:60ch}
.gm-case-page .cs-next{padding:clamp(40px,6vw,80px) 0;background:var(--bg-2);border-top:1px solid var(--line)}
.gm-case-page .cs-next__label{margin-bottom:12px}

@media(max-width:900px){
  .gm-case-page .cs-hero__inner{grid-template-columns:1fr}
  .gm-case-page .cs-hero__media{aspect-ratio:21/9}
  .gm-case-page .cs-story{grid-template-columns:1fr}
  .gm-case-page .cs-kpi{position:sticky;top:64px;z-index:5;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 16px;border-radius:14px;background:rgba(12,12,12,.92);backdrop-filter:blur(12px)}
  .gm-case-page .cs-kpi__label,.gm-case-page .cs-kpi__period{display:none}
  .gm-case-page .cs-kpi__num b{font-size:2.2rem}
  .gm-case-page .cs-kpi__bar{width:100%}
  .gm-case-page .cs-breakdown{grid-template-columns:1fr}
}
@media(max-width:700px){
  .gm-case-page .cs-foot{grid-template-columns:1fr}
  .gm-case-page .cs-foot div:last-child{grid-column:span 1}
}

/* Темні острови — лишаються темними попри тему: той самий патерн, що
   .gm-sv .board-row/.gm-desk-page .desk/.case вище у файлі (власні токени,
   застосовані безумовно — у темній темі значення ті самі, у світлій
   перекривають .gm-desk-page). */
.gm-case-page .cs-kpi,
.gm-case-page .cs-chart,
.gm-case-page .cs-hero__media,
.gm-case-page .cs-block--dark,
.gm-case-page .cs-quote{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}
/* .cs-block--paper лишається папером в обох темах; у світлій — додати рамку.
   .module/.cs-breakdown__item/.cs-visual — вже на var(--surface)/var(--line),
   які .gm-desk-page у світлій темі перевизначає на #fff/rgba(20,17,14,.09) —
   білі з рамкою автоматично, окремого правила не треба. */
html[data-gm-theme="light"] .gm-case-page .cs-block--paper{border:1px solid rgba(20,17,14,.09)}

@media(prefers-reduced-motion:reduce){
  .gm-case-page .cs-chart__line{transition:none}
}
/* Кейс, мобільний: модулі ланцюга в одну колонку (десктопне 52px 1fr перебивало правило ≤700px). */
@media (max-width: 700px) { .gm-case-page .cs-chain .module { grid-template-columns: 1fr; } }

/* ============================================================
   Why-us + Contact (next)
   ============================================================
   Ported 10.09.2026 з /opt/products/grandma-next/site/pages.css рядки 256–361
   (+ 0.6.2 фікс .tile p.tile__k--big нижче в тому ж файлі). DOM 1:1 з
   /opt/products/grandma-next/templates/why.html.j2 і contact.html.j2 —
   обгортки `.gm-desk-page .gm-sv .gm-board-page .gm-why-page` і
   `.gm-desk-page .gm-sv .gm-contact-page`, тож токени/reset/.btn/.eyebrow/.h2/
   .lead/.sec-head/.mono/.hand/.wrap/.tile/.tile--check/.tile--stat/.wy-stats/
   .board-row(база)/.flip/.q/.faq--page/.faq__grid/.faq__side/.faq__list уже є
   вище у файлі — тут лише нові класи чи нові модифікатори існуючих.
   Курсор набору тексту в транскрипті: реальний DOM/JS (why.js) використовує
   клас `.msg__type` (не `.msg__text`, як у чернетці контракту) — правило
   нижче написане під фактичний клас 1:1 з шаблоном.
   Контракт: scratchpad/why-contact-contract.md (етапи G/H). */

/* ─── /why-us/ — hero ─── */
.gm-why-page .wy-hero{position:relative;padding:clamp(110px,14vh,160px) 0 clamp(40px,5vw,72px);overflow:hidden}
.gm-why-page .wy-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(34% 44% at 82% 50%,rgba(233,30,150,.2),transparent 70%)}
.gm-why-page .wy-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
.gm-why-page .wy-hero__title{font-size:clamp(3.2rem,7vw,7rem)}
.gm-why-page .wy-hero__title .line{display:inline-flex;margin-right:.22em}
.gm-why-page .wy-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.gm-why-page .wy-points b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;margin-bottom:.3em}
.gm-why-page .wy-points span{font-size:.88rem;color:var(--ink-2)}
.gm-why-page .wy-hero__fig{position:relative;justify-self:end;width:min(100%,420px)}
.gm-why-page .wy-hero__fig img{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
.gm-why-page .wy-hero__fig figcaption{position:absolute;left:-10%;bottom:8%;font-size:1.15rem;transform:rotate(-4deg)}
@media(max-width:900px){
  .gm-why-page .wy-hero__inner{grid-template-columns:1fr}
  .gm-why-page .wy-hero__fig{justify-self:center;width:min(70%,320px)}
  .gm-why-page .wy-points{grid-template-columns:1fr}
}

/* ─── /why-us/ — transcript ─── */
.gm-why-page .tr{background:var(--bg-2);border-top:1px solid var(--line)}
.gm-why-page .tr__thread{display:flex;flex-direction:column;gap:14px;max-width:920px;padding-bottom:clamp(72px,10vw,140px)}
.gm-why-page .tr__day{align-self:center;font-size:.58rem;letter-spacing:.2em;color:var(--ink-3);padding:.5em 1em;border:1px solid var(--line);border-radius:999px;margin-top:18px}
.gm-why-page .msg{max-width:78%;padding:16px 20px;border-radius:18px;display:flex;flex-direction:column;gap:.4em}
.gm-why-page .msg p{font-size:1rem;line-height:1.55}
.gm-why-page .msg__who{font-size:.56rem;letter-spacing:.16em;display:flex;align-items:center;gap:.5em}
.gm-why-page .msg--client{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.gm-why-page .msg--client .msg__who{color:var(--ink-3)}
.gm-why-page .msg--gm{align-self:flex-end;background:linear-gradient(135deg,rgba(233,30,150,.22),rgba(167,54,255,.14));border:1px solid rgba(233,30,150,.4);border-bottom-right-radius:4px}
.gm-why-page .msg--gm .msg__who{color:var(--mag)}
.gm-why-page .msg--gm p{color:#fff}
.gm-why-page .msg__type.is-typing::after,.gm-why-page .msg__text.is-typing::after{content:"▍";color:var(--mag);animation:gm-blink .8s steps(2) infinite}
@keyframes gm-blink{50%{opacity:0}}
.gm-why-page .tr__end{align-self:center;max-width:640px;text-align:center;margin-top:24px}
@media(max-width:700px){.gm-why-page .msg{max-width:92%}}
/* темний острів попри тему — той самий патерн, що .gm-sv .board-row/.gm-desk-page .desk вище у файлі */
.gm-why-page .msg--gm{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}

/* ─── /why-us/ — industries ─── */
.gm-why-page .wy-ind{padding-bottom:clamp(72px,10vw,140px)}
.gm-why-page .wy-ind__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gm-why-page .wy-ind__cell{display:flex;flex-direction:column;gap:10px}
.gm-why-page .wy-ind__name{font-family:var(--display);font-size:1.5rem;letter-spacing:.03em;color:var(--ink-2)}
.gm-why-page .board-row--mini{grid-template-columns:1.2fr 1.4fr .8fr}
.gm-why-page .wy-ind__empty{display:flex;flex-direction:column;gap:.4em;padding:clamp(16px,2vw,24px) clamp(16px,2.4vw,32px);border-radius:16px;border:1px dashed rgba(233,30,150,.45);transition:background .3s}
.gm-why-page .wy-ind__empty:hover{background:rgba(233,30,150,.06)}
.gm-why-page .wy-ind__empty b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--mag)}
@media(max-width:900px){
  .gm-why-page .wy-ind__grid{grid-template-columns:1fr}
  .gm-why-page .board-row--mini{grid-template-columns:1fr 1fr;grid-template-areas:"c c" "n n" "p p"}
}
/* .wy-stats/.tile--stat уже є на .gm-board-page (обгортка why.html.j2 успадковує) — не дублюється */

/* ─── /why-us/ — FAQ "0 calls" тайл (спільний з /contact/) ─── */
.gm-why-page .wy-nocalls,.gm-contact-page .wy-nocalls{margin-top:2rem;min-height:0}

/* ─── /contact/ — hero ─── */
.gm-contact-page .ct-hero{position:relative;padding:clamp(110px,14vh,150px) 0 clamp(24px,3vw,40px);overflow:hidden}
.gm-contact-page .ct-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(30% 40% at 85% 30%,rgba(233,30,150,.18),transparent 70%)}
.gm-contact-page .ct-hero__title{font-size:clamp(2.8rem,6vw,6rem)}
.gm-contact-page .ct-hero__title .line{display:inline-flex;margin-right:.22em}

/* ─── /contact/ — form grid + sticky "what happens next" ─── */
.gm-contact-page .ct-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start;padding:clamp(24px,3vw,48px) 0 clamp(72px,10vw,140px)}
.gm-contact-page .ct-form .ask{margin-top:0}
.gm-contact-page .ct-next{position:sticky;top:110px;padding:clamp(20px,2.6vw,36px);border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.gm-contact-page .ct-next__label{font-size:.58rem;letter-spacing:.16em;display:flex;flex-direction:column;gap:.4em;margin-bottom:1.4rem}
.gm-contact-page .ct-next__label .hand{font-size:1.1rem;letter-spacing:.01em;text-transform:none}
.gm-contact-page .ct-steps{list-style:none;display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:26px}
.gm-contact-page .ct-step{position:relative;padding:0 0 26px;opacity:.38;transition:opacity .5s}
.gm-contact-page .ct-step.is-on{opacity:1}
.gm-contact-page .ct-step__dot{position:absolute;left:-35px;top:.3em;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid rgba(255,255,255,.25);transition:border-color .4s,box-shadow .4s}
.gm-contact-page .ct-step.is-on .ct-step__dot{border-color:var(--mag);box-shadow:0 0 12px rgba(233,30,150,.7)}
.gm-contact-page .ct-step__when{display:block;font-size:.56rem;letter-spacing:.14em;color:var(--mag);margin-bottom:.4em}
.gm-contact-page .ct-step b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;margin-bottom:.35em}
.gm-contact-page .ct-step p{font-size:.88rem;color:var(--ink-2)}
.gm-contact-page .ct-next__hint{font-size:.56rem;color:var(--ink-3);margin-top:.4rem}
.gm-contact-page .ct-trust{list-style:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.gm-contact-page .ct-trust b{display:block;font-family:var(--ui);font-weight:600;font-size:.72rem;color:#fff}
.gm-contact-page .ct-trust span{font-size:.7rem;color:var(--ink-3)}
@media(max-width:900px){
  .gm-contact-page .ct-grid{grid-template-columns:1fr}
  .gm-contact-page .ct-next{position:static}
  .gm-contact-page .ct-trust{grid-template-columns:1fr}
}
/* темний острів попри тему — той самий патерн, що .gm-sv .board-row/.gm-desk-page .desk вище у файлі */
.gm-contact-page .ct-next{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}

/* ─── /contact/ — messaging channels ─── */
.gm-contact-page .ct-ch{background:var(--bg-2);border-top:1px solid var(--line);padding-bottom:clamp(72px,10vw,140px)}
.gm-contact-page .ct-ch__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.gm-contact-page .chanbtn{display:flex;flex-direction:column;gap:.5em;padding:clamp(20px,2.4vw,30px);border-radius:20px;border:1.5px solid rgba(255,255,255,.16);background:var(--surface);transition:transform .5s var(--ease),border-color .3s}
.gm-contact-page .chanbtn:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.4)}
.gm-contact-page .chanbtn--tg{background:linear-gradient(120deg,var(--mag-light),var(--mag-deep));border-color:transparent;color:#fff}
.gm-contact-page .chanbtn--tg:hover{border-color:transparent}
.gm-contact-page .chanbtn__ic{font-family:var(--ui);font-weight:800;font-size:1.6rem;line-height:1}
.gm-contact-page .chanbtn b{font-family:var(--display);font-weight:400;font-size:1.8rem;line-height:1}
.gm-contact-page .chanbtn span:last-child{font-size:.88rem;color:inherit;opacity:.8}
.gm-contact-page .ct-reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.gm-contact-page .ct-ch__grid,.gm-contact-page .ct-reasons{grid-template-columns:1fr}}

/* ─── /contact/ — not ready? soft CTA ─── */
.gm-contact-page .ct-soft{padding:clamp(72px,10vw,140px) 0;border-top:1px solid var(--line)}
.gm-contact-page .ct-soft .lead{margin-top:1.2rem}
.gm-contact-page .ct-soft .hero__cta{margin-top:1.8rem}

/* ─── "0 calls" тайл, спільний для .wy-nocalls (why) і .tile--dark (contact reasons) —
   темний острів попри тему, той самий патерн ─── */
.gm-why-page .tile--dark,.gm-contact-page .tile--dark{
  --ink:#F5F5F5;--ink-2:rgba(245,245,245,.72);--ink-3:rgba(245,245,245,.46);
  --mag:#E91E96;--violet:#A736FF;--surface:#111111;--line:rgba(255,255,255,.09);--hi:#DFFF3A;
}
.gm-why-page .tile p.tile__k--big,.gm-contact-page .tile p.tile__k--big{font-family:var(--display);font-size:clamp(3.2rem,5vw,4.6rem);line-height:.9;color:var(--mag)}
.gm-why-page .tile p.tile__k--big .hand,.gm-contact-page .tile p.tile__k--big .hand{font-size:.42em}

@media(prefers-reduced-motion:reduce){
  .gm-why-page .msg__type.is-typing::after,.gm-why-page .msg__text.is-typing::after{content:none;animation:none}
  .gm-contact-page .ct-step{transition:none}
  .gm-contact-page .ct-step__dot{transition:none}
  .gm-why-page .wy-ind__empty{transition:none}
  .gm-contact-page .chanbtn{transition:none}
}
/* Contact: sticky-панель — темний острів, тому колір тексту всередині явно з локальних токенів. */
.gm-contact-page .ct-next{color:var(--ink)}
.gm-contact-page .ct-step b{color:var(--ink)}
.gm-contact-page .ct-step p{color:var(--ink-2)}
.gm-contact-page .ct-ch{background:transparent}
.gm-why-page .tr,.gm-why-page .wy-ind{background:transparent}
/* Why-us, стенограма: бульбашка GrandMa — темний острів з непрозорою основою під градієнтом,
   інакше у світлій темі білий текст лягає на блідо-рожеве. */
.gm-why-page .msg--gm{background-color:#160b12;background-image:linear-gradient(135deg,rgba(233,30,150,.22),rgba(167,54,255,.14))}
html[data-gm-theme="light"] .gm-why-page .msg--gm p{color:#F5F5F5}

/* ============================================================
   Blog hero — the last thing she underlined (next) · v2 після зауваження Макса 11.09:
   цитата компактніша (max 3 рядки), хайлайтер — тонка смуга під нижньою третиною
   літер, а не заливка рядка; кадр без альфи — під м'якою маскою, без прямокутника.
   ============================================================ */
.gm-blog-page .bl-hero{position:relative;padding:clamp(88px,11vh,128px) 0 clamp(32px,4vw,56px);overflow:hidden}
.gm-blog-page .bl-hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(34% 46% at 80% 55%,rgba(233,30,150,.18),transparent 70%)}
.gm-blog-page .bl-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
.gm-blog-page .bl-quote{margin:0;margin-top:1.2rem}
.gm-blog-page .bl-quote__text{margin:0;font-family:var(--display);font-size:clamp(1.9rem,3.6vw,3.6rem);line-height:1.06;letter-spacing:.005em;color:var(--ink);max-width:24ch}
.gm-blog-page .bl-quote__mark{background-image:linear-gradient(rgba(223,255,58,.32),rgba(223,255,58,.32));background-repeat:no-repeat;background-size:0% 30%;background-position:0 88%;transition:background-size 1.4s var(--ease);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .06em}
.gm-blog-page .bl-quote__mark.is-marked{background-size:100% 30%}
.gm-blog-page .bl-quote__from{margin-top:1.2rem;font-size:.62rem;letter-spacing:.14em;color:var(--ink-3);max-width:60ch}
.gm-blog-page .bl-quote__from a{color:var(--ink);border-bottom:1px solid var(--mag)}
.gm-blog-page .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.gm-blog-page .hero__proof{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin:2rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--line)}
.gm-blog-page .hero__proof li{display:flex;align-items:baseline;gap:.5em}
.gm-blog-page .hero__proof b{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;color:var(--mag)}
.gm-blog-page .hero__proof span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.gm-blog-page .bl-hero__fig{position:relative;justify-self:end;width:min(100%,400px)}
.gm-blog-page .bl-hero__fig img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 55%,transparent 100%)}
html[data-gm-theme="light"] .gm-blog-page .bl-quote__mark{background-image:linear-gradient(rgba(200,220,0,.45),rgba(200,220,0,.45))}
html[data-gm-theme="light"] .gm-blog-page .bl-hero__fig img{-webkit-mask-image:none;mask-image:none;border-radius:24px;box-shadow:0 30px 60px -30px rgba(20,17,14,.35)}
@media(max-width:900px){.gm-blog-page .bl-hero__inner{grid-template-columns:1fr}.gm-blog-page .bl-hero__fig{justify-self:center;width:min(64%,300px);order:-1}.gm-blog-page .bl-quote__text{max-width:none}}
@media(prefers-reduced-motion:reduce){.gm-blog-page .bl-quote__mark{transition:none;background-size:100% 30%}}


/* ============================================================
   About (next)
   ============================================================
   Контракт: scratchpad/about-contract.md. Обгортка .gm-desk-page.gm-sv.gm-about-page.
   Спільне (.wrap/.eyebrow/.hero__title/.sec-head(--row)/.mono/.hand(--lg)/.btn/
   .chain/.module/.tile/.case-grid/.case/.case__media/.case__body) вже є вище —
   тут лише нові класи з префіксом .gm-about-page.
   ------------------------------------------------------------ */
.gm-about-page .ab-hero{position:relative;padding:clamp(96px,12vh,140px) 0 clamp(40px,5vw,72px);overflow:hidden}
.gm-about-page .ab-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 50% at 82% 50%,rgba(233,30,150,.2),transparent 70%)}
.gm-about-page .ab-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
.gm-about-page .ab-hero__title{font-size:clamp(3.2rem,7vw,7rem)}
.gm-about-page .ab-hero__title .line{margin-right:.22em}
.gm-about-page .ab-hero__note{margin-top:1.4rem}
.gm-about-page .ab-hero__fig{justify-self:end;width:min(100%,520px)}
.gm-about-page .ab-hero__fig img{width:100%;height:auto}

.gm-about-page .ab-story{padding-bottom:clamp(72px,10vw,140px)}
.gm-about-page .ab-story__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(24px,3vw,40px)}
.gm-about-page .ab-story__p{font-family:'Montserrat',var(--ui);font-size:1.05rem;line-height:1.65;color:var(--ink-2);max-width:62ch;margin:0 0 1em}
.gm-about-page .ab-story__p:last-child{margin-bottom:0}
.gm-about-page .ab-story__fig{border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.gm-about-page .ab-story__fig img{width:100%;height:100%;object-fit:cover}

.gm-about-page .ab-chain{padding-bottom:clamp(72px,10vw,140px)}
.gm-about-page .module__fig{margin-top:14px}
.gm-about-page .module__fig img{border-radius:14px;aspect-ratio:16/9;object-fit:cover;width:100%;max-width:520px}

.gm-about-page .ab-team__p{font-family:'Montserrat',var(--ui);font-size:1.05rem;line-height:1.65;color:var(--ink-2);max-width:62ch;margin:0 0 clamp(24px,3vw,40px)}
.gm-about-page .ab-team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gm-about-page .ab-member{display:flex;flex-direction:column;gap:.6em}
.gm-about-page .ab-member__photo{width:72px;height:72px;border-radius:50%;object-fit:cover}
.gm-about-page .ab-team__note{margin-top:clamp(24px,3vw,40px)}

.gm-about-page .ab-bts{padding-bottom:clamp(72px,10vw,140px)}
.gm-about-page .ab-shot .case__media{aspect-ratio:3/2}
.gm-about-page .ab-shot .case__media img{object-fit:cover}

@media(max-width:900px){
  .gm-about-page .ab-hero__inner{grid-template-columns:1fr}
  .gm-about-page .ab-hero__fig{justify-self:center;width:min(64%,340px);order:-1}
  .gm-about-page .ab-story__grid{grid-template-columns:1fr}
  .gm-about-page .ab-team__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .gm-about-page .ab-team__grid{grid-template-columns:1fr}
}

/* Правки Макса 11.09 */
/* Внутрішня послуга: картка кейса — колонки не розпирає фото (min-width:0), посилання в longform підсвічені. */
.gm-sv .sv-case__card{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.gm-sv .sv-case__media,.gm-sv .sv-case__body{min-width:0}
.gm-sv .gm-seo-longform a{color:var(--mag);text-decoration:underline;text-underline-offset:.15em}
.gm-sv .gm-seo-longform a:hover{color:var(--mag-light)}
/* Про нас: рядки заголовка в один потік, фото розділів у текстовій колонці. */
.gm-about-page .hero__title .line{display:inline-flex;margin-right:.22em}
.gm-about-page .module__fig{grid-column:2}

/* Макс 11.09: цифри на всьому сайті тонші — Outfit 500 замість Bebas для чисел
   (лічильники, табло, KPI, тайли); жовтий --hi у світлій темі — темно-лаймовий, щоб читався на папері. */
.gm-desk-page .case__num b,.gm-desk-page .sheet__proof b,.gm-desk-page .master__readout b,.gm-desk-page .board__count b,
.gm-desk-page .ctx__num b,.gm-desk-page .tile__k--accent,.gm-desk-page .cs-kpi__num b,.gm-desk-page .cs-breakdown__item b,
.gm-desk-page .hero__proof b,.gm-desk-page .wy-nocalls b,.gm-desk-page .tile__k--big b,.gm-desk-page .board-row__num b,
.gm-desk-page .sv-case__metrics b,.gm-desk-page .flip i,.gm-desk-page .sv-hero__trust b{font-family:Outfit,var(--display);font-weight:500;letter-spacing:-.02em}
[data-count],[data-count-visual]{font-family:Outfit,'Bebas Neue',sans-serif!important;font-weight:500!important;letter-spacing:-.02em!important}
html[data-gm-theme="light"] .gm-desk-page{--hi:#5F7300}
html[data-gm-theme="light"] .gm-desk-page .noitem__alt em,html[data-gm-theme="light"] .gm-desk-page .sheet__k--hi{color:#5F7300}

/* Макс 11.09: блок месенджерів на всіх сторінках — темний острів і в світлій темі
   (як Final CTA на головній); решта секцій прозорі, щоб бризки було видно. */
html[data-gm-theme="light"] [data-screen-label="Messengers"]{background-color:#0a0207!important}
html[data-gm-theme="light"] [data-screen-label="Messengers"]{--gm-fg-rgb:245 245 245;--gm-accent:#E91E96;--gm-violet:#A736FF}
.gm-board-page .ctx,.gm-case-page .cs-next,.gm-why-page .ctx{background:transparent}
/* Блог: активна тема в бічній колонці (пігулки зверху прибрано 11.09) */
.gm-topic.is-active, .gm-topic[aria-pressed="true"] { color: #A8156A !important; font-weight: 600; }
html[data-gm-theme="dark"] .gm-topic.is-active, html[data-gm-theme="dark"] .gm-topic[aria-pressed="true"] { color: #E91E96 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PROMO «Сайт за 9 900» — /sait-za-9900/ (templates/pages/promo-sait.html.j2)
   2026-09-11 v2. Токени .gm-desk-page (--ink/--surface/--line), світла тема —
   через html[data-gm-theme="light"] сама. Перший екран: заголовок + одна дія
   зліва; справа справжній макет у вікні браузера, який гортається сам (CSS-анімація,
   вимкнена при prefers-reduced-motion), і бабуля з ноутбуком поруч. */
.gm-promo__hero{position:relative;padding:clamp(110px,14vh,160px) 0 clamp(48px,6vw,88px);overflow:hidden}
.gm-promo__hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);gap:clamp(28px,4vw,64px);align-items:center}
.gm-sv .gm-promo__title{margin-top:18px;font-size:clamp(3.2rem,6.4vw,6rem)}
/* Й/Ї: бревіс і крапки стоять над cap-height; .line ріже їх overflow-ом при line-height .86 —
   даємо повітря зверху і забираємо його margin-ом. Появу слів (is-loaded) ставимо в розмітці:
   gm-service.js на цьому маршруті немає, без класу слова лишались зсунутими на 110%. */
.gm-sv .gm-promo__title .line{display:flex;flex-wrap:wrap;gap:0 .22em;padding-top:.12em;margin-top:-.12em}
.gm-promo__lead{max-width:560px}
.gm-promo__hero .hero__cta{margin-top:30px}
.gm-promo__capacity{display:inline-flex;align-items:center;gap:10px;margin:26px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.gm-promo__capacity i{width:8px;height:8px;border-radius:50%;background:var(--mag);box-shadow:0 0 12px var(--mag)}

/* stage: вікно браузера з макетом + бабуля */
.gm-promo__stage{position:relative;padding:0 0 40px 0}
.gm-promo__device{position:relative;margin:0 0 0 auto;width:min(100%,520px);border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgb(233 30 150 / .12);contain:paint;isolation:isolate}
.gm-promo__device-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid var(--line)}
.gm-promo__device-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.gm-promo__device-bar i:first-child{background:var(--mag)}
.gm-promo__device-bar em{margin-left:12px;font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.gm-promo__device-screen{position:relative;aspect-ratio:4/4.6;overflow:hidden;background:#fff}
.gm-promo__device-screen img{display:block;width:100%;height:auto;animation:gm-promo-scroll 34s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes gm-promo-scroll{0%{transform:translateY(0)}8%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 560px))}}
@media(prefers-reduced-motion:reduce){.gm-promo__device-screen img{animation:none}}
.gm-promo__grandma{position:absolute;left:-6%;bottom:-6px;width:min(52%,300px);height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));pointer-events:none}
.gm-desk-page .gm-promo__note{position:absolute;right:0;bottom:-12px;margin:0;display:block;font-size:clamp(1.3rem,2.2vw,1.9rem);transform:rotate(-3deg)}

/* apply: форма + кроки */
.gm-promo__apply,.gm-promo__examples,.gm-promo__inside,.gm-promo__pricing{position:relative;padding:clamp(56px,7vw,96px) 0}
.gm-promo__apply-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.75fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:36px}
.gm-promo__form{max-width:none}
.gm-promo__form input[type="hidden"]{display:none}
.gm-promo__form-contact-label{margin:6px 0 10px;font-family:var(--body,'Montserrat',sans-serif);font-size:13px;font-weight:600;color:var(--ink-2)}
.gm-promo__form-contact-label i{color:var(--mag);font-style:normal}
.gm-promo__form-contacts{grid-template-columns:repeat(3,minmax(0,1fr))}
.gm-promo__next-label{margin:0 0 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.gm-promo__steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.gm-promo__step{position:relative;padding:clamp(20px,2.4vw,30px);border-radius:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.gm-promo__step-num{font-size:13px;letter-spacing:.2em;color:var(--mag)}
.gm-promo__step h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:.95;color:var(--ink)}
.gm-promo__step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.gm-promo__step-when{margin-top:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* examples: 16 вікон, кожне гортається всередині (overflow-y:auto — це і є фіча) */
.gm-promo__shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:36px}
.gm-promo__shot{margin:0}
.gm-promo__shot-frame{position:relative;aspect-ratio:3/4;border-radius:16px;background:var(--surface);border:1px solid var(--line);contain:paint;isolation:isolate;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s}
.gm-promo__shot-frame:hover,.gm-promo__shot-frame:focus-within,.gm-promo__shot-frame:focus{border-color:rgb(233 30 150 / .6);box-shadow:0 24px 60px -30px rgba(233,30,150,.5);outline:none}
.gm-promo__shot-bar{position:absolute;inset:0 0 auto 0;height:26px;display:flex;align-items:center;gap:5px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--line);z-index:2}
.gm-promo__shot-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.gm-promo__shot-bar i:first-child{background:var(--mag)}
.gm-promo__shot-scroll{position:absolute;inset:26px 0 0 0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(233 30 150 / .7) transparent;background:#fff}
.gm-promo__shot-scroll::-webkit-scrollbar{width:6px}
.gm-promo__shot-scroll::-webkit-scrollbar-thumb{background:rgb(233 30 150 / .7);border-radius:6px}
.gm-promo__shot-scroll img{display:block;width:100%;height:auto}
.gm-promo__shot-hint{position:absolute;right:10px;bottom:10px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(9,9,9,.78);color:#F5F5F5;font-size:10px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transition:opacity .3s}
.gm-promo__shot-frame:hover .gm-promo__shot-hint,.gm-promo__shot-frame:focus-within .gm-promo__shot-hint{opacity:0}
.gm-promo__shot figcaption{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.gm-promo__shots-note{margin:28px 0 0;max-width:560px}

/* inside */
.gm-promo__inside-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:36px}
.gm-promo__inside-grid .tile{min-height:0}

/* pricing */
.gm-promo__price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:36px}
.gm-promo__price{padding:clamp(26px,3vw,40px);border-radius:24px;background:var(--surface);border:1px solid var(--line);position:relative;isolation:isolate}
.gm-promo__price--accent{border-color:rgb(233 30 150 / .55)}
.gm-promo__price--accent::before{content:"";position:absolute;inset:-40% auto auto -20%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(233 30 150 / .22),transparent 70%);z-index:-1;pointer-events:none}
.gm-promo__price-amount{margin:0 0 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.gm-promo__price-amount b{font-family:var(--display);font-weight:400;font-size:clamp(3rem,6vw,5rem);line-height:.9;color:var(--ink)}
.gm-promo__price--accent .gm-promo__price-amount b{color:var(--mag)}
.gm-promo__price-amount .mono{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.gm-promo__price-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gm-promo__price-list li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.gm-promo__price-list li span{color:var(--mag);flex:none}
.gm-promo__price-note{margin:28px 0 0;max-width:720px;font-size:14px;line-height:1.6;color:var(--ink-3)}

/* closing */
.gm-promo__closing{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(72px,9vw,130px)}
.gm-promo__closing-inner{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.gm-promo__closing .lead{margin:0}

@media(max-width:1100px){
  .gm-promo__shots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gm-promo__inside-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .gm-promo__hero{padding-top:100px}
  .gm-promo__hero-grid{grid-template-columns:minmax(0,1fr)}
  .gm-promo__device{width:100%}
  .gm-promo__device-screen img{max-width:100%}
  .gm-promo__stage{order:-1;padding:0 0 30px 0;max-width:520px;margin:0 auto}
  .gm-promo__grandma{left:-4%;width:36%;bottom:44px}
  .gm-desk-page .gm-promo__note{position:static;display:block;text-align:right;margin:12px 0 0;min-height:32px;transform:none;font-size:1.25rem}
  .gm-promo__stage{padding-bottom:0}
  .gm-promo__form-contacts,.gm-promo__apply-grid,.gm-promo__price-grid{grid-template-columns:1fr}
  .gm-promo__shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .gm-promo__shots,.gm-promo__inside-grid{grid-template-columns:1fr}
  .gm-promo__device-screen{aspect-ratio:4/4.2}
}

/* промо-блок у статтях (partials/promo-sait-blog.html.j2): розкладка тут, кольори інлайн (папір) */
.gm-promo-blog__wrap{max-width:1120px;margin:0 auto;padding:0 48px 72px}
.gm-promo-blog__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.55fr);gap:32px;align-items:center;padding:36px 40px;border-radius:24px;position:relative;contain:paint;transition:transform .5s var(--ease,ease),box-shadow .5s}
.gm-promo-blog__card:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(168,21,106,.14)}
@media(max-width:700px){
  .gm-promo-blog__wrap{padding:0 20px 56px}
  .gm-promo-blog__card{grid-template-columns:1fr;gap:20px;padding:26px 22px}
  .gm-promo-blog__card img{max-width:260px;margin:0 auto}
}

/* Макс 11.09: довгі рукописні нотатки погано читаються — .hand--lg стає звичайним текстом
   (короткі підписи .hand лишаються маркером); зноска діагностики звичайним шрифтом;
   hero послуг без зайвого верхнього відступу. */
.gm-desk-page .hand--lg{font-family:Montserrat,sans-serif;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;color:var(--ink-2);letter-spacing:0;max-width:56ch}
.gm-diag__hand{font-family:Montserrat,sans-serif!important;font-size:.85rem!important;line-height:1.5;color:rgb(var(--gm-fg-rgb) / .62)!important;white-space:pre-line}
.gm-desk-page .console{padding-top:clamp(64px,8vh,96px)}
.gm-desk-page .hero__title .line{margin-right:.22em}
/* Hero послуг: «ДЕВ'ЯТЬ ФЕЙДЕРІВ.» в один рядок на десктопі */
.gm-desk-page .console__title{font-size:clamp(3rem,6vw,6.6rem)}

/* Макс 11.09 (раунд 3): зноска діагностики з маджентовою зірочкою в один рядок; пресет «Повний сервіс»
   без статичної обводки; нотатки .hand--lg крупніші; кнопка «Надіслати» на послугах повертає заливку,
   яку з'їдав reset button у .gm-desk-page. */
.gm-diag__hand{white-space:normal!important}
.gm-diag__star{color:var(--gm-accent);font-weight:700;margin-right:.15em}
.gm-desk-page .preset--all{border-color:var(--line)}
.gm-desk-page .preset--all.is-active,.gm-desk-page .preset--all.is-set{border-color:var(--mag)}
.gm-desk-page .hand--lg{font-size:clamp(1.15rem,1.5vw,1.4rem)}
.gm-desk-page .gm-fit__submit{background:linear-gradient(135deg,#FF4FA3,#A8156A);color:#fff;border:0;height:56px;padding:0 34px;border-radius:6px;font-family:Outfit,sans-serif;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.7em;cursor:pointer}
.gm-desk-page .gm-fit__submit:hover{box-shadow:0 12px 40px -12px rgba(233,30,150,.55)}
.gm-desk-page .faq__fig .hand{font-size:clamp(1.15rem,1.5vw,1.4rem);margin-top:.8rem}