/* =============================================================================
   InstaLab — styles.css
   Aesthetic: "Apple.com-style light × Instagram gradient".
   Clean off-white / #f5f5f7 surfaces + ink text for readability · ONE canonical
   IG gradient (--ig-grad) used PURPOSEFULLY (logo, primary CTAs, proof band, key
   accents, active/hover states, story rings) — never smeared on every surface ·
   solid magenta brand accent (--accent #D62976) · soft rounded "story-card" feel ·
   the single intentional dark block is the #cases playlist · frosted sticky nav ·
   pill buttons · big semibold display type (system SF stack, Space Grotesk fallback) ·
   mono only inside the code window · smooth Apple-eased motion.
   Mobile-first, 360 → 1440. Honors prefers-reduced-motion.

   AA: white button/badge text only ever sits on the magenta→violet→blue slice
   (--ig-grad-ink) or on solid --accent — NEVER on the light yellow #FEDA75 end.

   NOTE: the custom-property NAMES below are deliberately kept (including the
   --lime* back-compat aliases, now mapped onto the magenta accent) so existing
   rules / cross-file refs keep working; only the VALUES changed.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0) Design tokens
---------------------------------------------------------------------------- */
:root {
  /* palette — light surfaces */
  --bg:        #ffffff;
  --bg-2:      #f5f5f7;
  --cream:     #FBF7F2;              /* warm hero canvas — soft cream, not pure white */
  --panel:     #ffffff;
  --panel-2:   #f5f5f7;
  --hair:      rgba(0, 0, 0, .10);
  --hair-2:    rgba(0, 0, 0, .16);
  --ink:       #1d1d1f;
  --ink-warm:  #2A1A1F;              /* warm near-black for the hero headline */
  --muted:     #6e6e73;
  --muted-2:   #86868b;

  /* ── Instagram gradient — the ONE canonical brand gradient ────────────────
     Used purposefully (logo, primary CTAs, key accents, proof band, active /
     hover states, story rings) — NOT smeared on every surface. White text only
     ever sits on the magenta→violet→blue part or on solid --accent, never on the
     yellow #FEDA75 end (which would fail WCAG AA). */
  --ig1: #FEDA75;
  --ig2: #FA7E1E;
  --ig3: #D62976;
  --ig4: #962FBF;
  --ig5: #4F5BD5;
  --ig-grad: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 22%, #D62976 52%, #962FBF 78%, #4F5BD5 100%);
  /* AA-safe slice of the same gradient: starts at magenta so white text on it
     always passes (used for button fills / the proof band). */
  --ig-grad-ink: linear-gradient(135deg, #D62976 0%, #962FBF 55%, #4F5BD5 100%);

  /* accent — Instagram magenta (solid brand accent) */
  --accent:     #D62976;
  --accent-2:   #B81F63;            /* hover (darker magenta — keeps white text AA) */
  --accent-ink: #ffffff;

  /* backward-compat aliases so existing rules keep working (map onto magenta).
     The old --lime* names are routed to the magenta accent; --lime-dim is a soft
     magenta wash used for icon chips / soft tints. */
  --lime:      #D62976;
  --lime-ink:  #ffffff;             /* white text on magenta */
  --lime-dim:  rgba(214, 41, 118, .10);
  --lime-glow: rgba(214, 41, 118, .18);

  /* type — system SF first, then a distinctive Google pairing as the web fallback:
     Space Grotesk for display, Hanken Grotesk for sub-titles + body.
     -apple-system + BlinkMacSystemFont MUST stay unquoted. Mono = code window. */
  --font-display:   -apple-system, BlinkMacSystemFont, "SF Pro Display", "Space Grotesk", "Segoe UI", system-ui, sans-serif; /* hero h1 + section titles */
  --font-display-2: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;    /* card / sub titles */
  --font-body:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono:      "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* spacing / layout
     ONE content container is used across the whole site (--wrap). The old
     --wrap-narrow is kept as an alias (= --wrap) so any cross-file reference
     still resolves, but prose width is now constrained by measure (ch), not by
     a second, narrower container — so every section header shares one left edge. */
  --wrap:        1160px;
  --wrap-narrow: var(--wrap);
  --gut:         clamp(1.25rem, 5vw, 2.75rem);
  --sec-y:       clamp(4.5rem, 9vw, 8.5rem);
  --radius:      22px;
  --radius-sm:   14px;

  /* unified card system — every card type shares padding, radius & elevation */
  --card-pad:    clamp(1.6rem, 2.6vw, 2.15rem);
  --card-radius: var(--radius);

  /* elevation scale — soft, consistent (Apple-like) */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -10px rgba(16, 24, 40, .10);
  --shadow-2: 0 2px 6px rgba(16, 24, 40, .05), 0 14px 36px -16px rgba(16, 24, 40, .16);
  --shadow-3: 0 4px 10px rgba(16, 24, 40, .06), 0 26px 60px -22px rgba(16, 24, 40, .22);
  --shadow-accent: 0 14px 40px -16px rgba(214, 41, 118, .34);

  /* hairline used inside cards (slightly lighter than the section hairline) */
  --hair-card: rgba(16, 24, 40, .08);

  /* vertical rhythm helper for stacked blocks */
  --flow: clamp(1rem, 2vw, 1.4rem);

  /* motion — Apple easing */
  --ease: cubic-bezier(.28, .11, .32, 1);
  --dur:  .5s;
  --dur-fast: .22s;                 /* for small hover/state transitions */
}

/* ----------------------------------------------------------------------------
   1) Reset & base
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;          /* offset for sticky nav on anchor jumps */
  /* Harden against any descendant (e.g. the stack marquee) extending the
     root scroll width. overflow-x:clip clips without creating a scroll
     container, so position:sticky on the nav keeps working. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
  min-height: 100vh;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
/* The HTML `hidden` attribute must always win — several components (.btn pills,
   .toast) set their own display, which previously overrode `[hidden]` and left
   "hidden" controls (e.g. the order console's Back/Submit on step 1) rendered
   and overflowing. This makes hidden truly mean hidden, app-wide. */
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(214, 41, 118, .18); color: var(--ink); }

/* Custom scrollbar (subtle, light) */
* { scrollbar-width: thin; scrollbar-color: #c7c7cc transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 10px; border: 2px solid var(--bg); }

/* ----------------------------------------------------------------------------
   2) Atmosphere — intentionally clean (Apple light surfaces).
   The old blueprint grid / film grain / cursor spotlight layers are removed in
   the markup; the helper rules are kept inert here so any stray ref is harmless.
---------------------------------------------------------------------------- */
.bg-grid,
.bg-grain,
.bg-spot { display: none !important; }

/* Everything sits on the clean canvas */
.nav, main, .footer, .mobile-menu, .toast, .skip-link { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
   3) Layout helpers
---------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
}
/* Kept as an alias of .wrap so every section shares ONE left edge. Inner blocks
   (FAQ list, order grid, prose) set their own readable measure instead. */
.wrap--narrow { max-width: calc(var(--wrap) + var(--gut) * 2); }
.section { padding-block: var(--sec-y); }

/* Optical container for narrower editorial blocks that still align to the
   same gutter on the left but cap their measure for readability. */
.measure { max-width: 64ch; }
/* Centered measure (e.g. a centered section lead). */
.measure--auto { margin-inline: auto; }

/* Visually-hidden but available to assistive tech (labels, status, the synced
   <select> behind the radio cards). Never collapses layout to 0 in a way that
   breaks focus order. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Alternating Apple surfaces: clean white ↔ light-gray #f5f5f7 in DOM order.
   The new "moment" bands (statement / dark accent) are full-bleed and set their
   own background, so the white↔gray alternation stays clean around them. */
.section--divided { position: relative; }
#services, .section--tech, #pay, .section--order { background: var(--bg-2); }
/* #cases is now the dark full-bleed PORTFOLIO PLAYLIST — it sets its own ink
   background (see §9d). It sits between #process (white) and the dark #statement
   band; the playlist's own surface keeps the white↔gray DOM alternation clean. */
#process, #testimonials, #pricing, #faq { background: var(--bg); }

/* ── Perf: skip rendering of heavy BELOW-the-fold sections until they're near
   the viewport. content-visibility:auto lets the browser defer layout/paint of
   off-screen sections → faster first paint on this long page. The hero and the
   immediate above-fold (#pick, #proof, #services) are intentionally EXCLUDED so
   nothing the visitor sees on load is deferred. contain-intrinsic-size reserves
   a sensible placeholder height so the scrollbar + anchor offsets stay stable
   before a section is rendered. The .reveal IntersectionObserver still fires:
   when a section scrolls close it becomes visible and its .reveal children
   animate in as normal (content-visibility composes fine with IO). */
#features,
#tariffs,
#process,
#cases,
#testimonials,
#faq,
#order {
  content-visibility: auto;
  contain-intrinsic-size: 0 700px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* full tap target when focused */
  padding: 10px 18px;
  border-radius: 12px;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ----------------------------------------------------------------------------
   4) Shared atoms — eyebrow, section heads, buttons, brand
---------------------------------------------------------------------------- */

/* Apple eyebrow label (replaces the old mono kickers).
   Section kickers get a small leading tick mark so they read as an editorial
   index rather than a generic AI "eyebrow". The hero/order eyebrows stay plain. */
.eyebrow,
.sec-head__kicker,
.order__direct-kicker {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: clamp(.92rem, 1.2vw, 1rem);
  letter-spacing: .005em;
  color: var(--accent);
}
.eyebrow, .order__direct-kicker { display: inline-block; }

.sec-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
}
.sec-head__kicker::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  opacity: .75;
}

/* Editorial, LEFT-aligned section header by default — every header shares the
   same left edge as its grid, which is what makes the page read as "even".
   Sections that genuinely want centering opt in with .sec-head--center. */
.sec-head {
  max-width: 100%;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem);
  text-align: left;
}
.sec-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -.024em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 18ch;
}
.sec-head__lead {
  margin-top: 1.05rem;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: -.012em;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Centered variant (stack, payment): centers head + caps measure */
.sec-head--center {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.sec-head--center .sec-head__kicker { justify-content: center; }
.sec-head--center .sec-head__title { margin-inline: auto; }
.sec-head--center .sec-head__lead  { margin-inline: auto; }

/* Header with an inline action on the right (used on Cases) — title left,
   "all work" link right, baseline-aligned. Collapses on mobile. */
.sec-head--row {
  display: grid;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.sec-head--row .sec-head__aside {
  display: flex;
  align-items: center;
}
@media (min-width: 760px) {
  .sec-head--row {
    grid-template-columns: 1fr auto;
  }
  .sec-head--row .sec-head__aside { justify-self: end; padding-bottom: .35rem; }
}

/* Buttons — Apple pills. Deliberate size scale: sm (nav) · base · lg.
   --btn-h drives the height so every pill on a row matches to the pixel. */
.btn {
  --bw: 1px;
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--btn-h);
  padding: 0 1.6rem;
  border-radius: 980px;
  font-family: var(--font-display-2);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border: var(--bw) solid transparent;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn--sm  { --btn-h: 36px; padding-inline: 1.1rem; font-size: .9rem; }
.btn--lg  { --btn-h: 54px; padding-inline: 2rem; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }

/* Primary = Instagram gradient fill, white text.
   AA NOTE: the fill uses --ig-grad-ink (magenta #D62976 → violet #962FBF → blue
   #4F5BD5). It deliberately OMITS the light yellow #FEDA75 stop, so white text
   passes WCAG AA across the ENTIRE pill — the lightest colour under any glyph is
   #4F5BD5 (contrast vs #fff ≈ 4.9:1) and most of it is darker. A solid --accent
   sits underneath as the fallback for engines without gradient support. */
.btn--lime {
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  color: var(--accent-ink);
  font-weight: 600;
  border-color: transparent;
}
.btn--lime:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
  filter: saturate(1.08) brightness(1.04);
}
.btn--lime:active { transform: translateY(0); box-shadow: none; filter: none; }
.btn--lime:focus-visible { outline-offset: 4px; }

/* Secondary = light-gray pill */
.btn--ghost {
  background: #e8e8ed;
  color: var(--ink);
  border-color: transparent;
}
.btn--ghost:hover {
  background: #dededf;
  transform: translateY(-1px);
}
.btn--ghost:active { transform: translateY(0); }

/* Magenta-accent text link with chevron ("Смотреть работы ›") — matches .btn height so
   it baseline-aligns next to a pill in the hero / section actions. */
.link-chev {
  display: inline-flex;
  align-items: center;
  gap: .15em;
  min-height: 48px;
  padding: 0 .35rem;
  font-family: var(--font-display-2);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.link-chev:hover { color: var(--accent-2); gap: .4em; }
.link-chev:focus-visible { outline-offset: 4px; }

/* Brand wordmark + navy caret block */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
/* New horizontal logo lockup (mark + wordmark) as a single <img>. Height is the
   visual anchor; width scales from the SVG's intrinsic 132×28 ratio. */
.brand__logo {
  height: 26px;
  width: auto;
  /* crisp at any DPR; the SVG already encodes its own colors */
  display: block;
}
.nav.is-scrolled .brand__logo { height: 24px; transition: height var(--dur-fast) var(--ease); }
/* Legacy atoms kept so any stray reference stays harmless (no longer in markup). */
.brand__mark {
  width: 12px; height: 15px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: 1.06rem;
  color: var(--ink);
}
/* On touch the wordmark is a real "home" tap target — give it a ≥44px hit
   height (purely the hit area; the mark/name keep their compact look, and the
   nav row centres it so nothing shifts). Applied on coarse pointers AND across
   the phone/tablet width range where the burger nav is shown, so the target is
   reliable regardless of how the device reports its pointer. */
@media (pointer: coarse), (max-width: 879px) {
  .brand { min-height: 44px; }
}

/* ----------------------------------------------------------------------------
   5) Navigation — frosted sticky bar
---------------------------------------------------------------------------- */
/* Sticky + ALWAYS visible (it never hides on scroll). On scroll it switches to
   a compact, stronger/frosted state via .is-scrolled (toggled in app.js).
   Transitions use the Apple easing; prefers-reduced-motion neutralises them. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              backdrop-filter var(--dur-fast) var(--ease),
              -webkit-backdrop-filter var(--dur-fast) var(--ease);
}
/* Compact, stronger frosted bar once the page is scrolled. */
.nav.is-scrolled {
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04), 0 8px 28px -18px rgba(16, 24, 40, .28);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
  transition: height var(--dur-fast) var(--ease);
}
/* Compact height on scroll — the signature "shrink" of an Apple nav. */
.nav.is-scrolled .nav__inner { height: 52px; }
.nav__links { display: none; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.nav__links a {
  font-family: var(--font-display-2);
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
  padding: .35rem 0;
  position: relative;
  opacity: .85;
  transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav__links a:hover { opacity: 1; }
.nav__links a.is-current { opacity: 1; color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: .55rem; }
.nav__cta { display: none; }
.nav__cta.btn { --btn-h: 36px; padding: 0 1.1rem; font-size: .9rem; }

/* ── Language switch — PREMIUM SEGMENTED PILL (UK / RU / EN) ─────────────────
   A rounded inset track holds three button segments. The active one is a filled
   IG-gradient pill with white text; the rest are muted and lift on hover. Each
   .lang__opt is a real <button> carrying data-lang + aria-pressed + .is-active
   (app.js owns that state); the gradient is driven purely by .is-active. */
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display-2);
  font-size: .8rem;
  font-weight: 600;
  padding: 3px;
  min-height: 36px;
  border: 1px solid var(--hair);
  border-radius: 980px;
  /* subtle recessed track so the active pill reads as raised */
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--bg) border-box;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06);
  color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lang:hover { border-color: var(--hair-2); }
.lang__opt {
  position: relative;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .62rem;
  min-width: 34px;
  min-height: 28px;
  border-radius: 980px;
  color: var(--muted-2);
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.lang__txt { position: relative; z-index: 1; line-height: 1; }
/* Expand the tap target to ≥44px on touch without changing the compact visual
   (the bar lives in a fixed-height nav). Pointer-events stay on the button. */
.lang__opt::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.lang__opt:hover { color: var(--ink); }
/* Active segment: filled IG gradient (white text, AA on the magenta→violet→blue
   body of the gradient) with a soft branded lift. */
.lang__opt.is-active {
  color: #fff;
  font-weight: 700;
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .10), var(--shadow-accent);
}
.lang__opt.is-active:hover { color: #fff; }
.lang__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lang__opt { transition: none; }
}

/* Hamburger — 44px hit area on mobile (touch); visually a compact pill */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 36px;
  border: 1px solid var(--hair);
  border-radius: 11px;
  padding: 0 10px;
  position: relative;
}
.burger::after {            /* expand tap target to ≥44px without changing the visual size */
  content: "";
  position: absolute;
  inset: -4px;
}
.burger span {
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile full-screen menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__inner {
  width: min(440px, 86vw);
  padding-top: 56px;
}
.mobile-menu__links { display: grid; gap: .2rem; margin-bottom: 2rem; }
.mobile-menu__links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 8vw, 2.3rem);
  letter-spacing: -.02em;
  padding: .6rem 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) var(--ease);
}
.mobile-menu__links a:hover { color: var(--accent); padding-left: .35rem; }

/* ----------------------------------------------------------------------------
   6) Hero — "Your business, already online." (warm, human, outcome-led).
   ───────────────────────────────────────────────────────────────────────────
   A calm split hero on a warm cream canvas. LEFT = benefit promise + CTAs +
   human-proof avatars. RIGHT = a floating, tilted BROWSER MOCKUP of a finished
   salon site (pure CSS, no code). ONE soft off-center aurora halo sits behind
   the mockup. Mobile stacks (mockup below copy); desktop is two-column. Every
   moving layer is GPU-cheap and degrades to a still premium state under
   prefers-reduced-motion (see §19).
---------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* warm light canvas — soft cream, never pure white, never dark */
  background: var(--cream);
  min-height: clamp(560px, 86vh, 760px);
  padding-top: clamp(2.6rem, 6vw, 4.6rem);
  padding-bottom: clamp(3.4rem, 7vw, 6rem);
  isolation: isolate;
  overflow: clip;            /* the blurred aurora + tilted card never cause x-scroll */
}

/* Atmosphere layer — holds the single soft aurora halo + a faint dot-grid texture
   for an editorial, hand-set feel (very low opacity, fades out toward the bottom so
   it never competes with the product scene). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
}
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(58, 34, 24, .14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%);
}

/* ── Aurora: ONE soft, off-center blurred radial blob in WARM AMBER → soft ink
   (deliberately NO rose / magenta / violet), tucked toward the bottom-right behind
   the scene so it reads as a calm HALO, not a banner. Stillness reads premium. ── */
.hero__aurora {
  position: absolute;
  inset: auto -12% -24% auto;        /* anchored bottom-right, off the corner */
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(250, 176, 92, .42),
              rgba(214, 120, 60, .20) 42%,
              transparent 70%);
  filter: blur(80px);
  opacity: .85;
  /* a very slow, barely-there breathe — calm, not kinetic (R-M disables it) */
  animation: hero-aurora 18s ease-in-out infinite alternate;
}
/* a second, cooler ink wash lower-left adds depth without going pink/violet */
.hero__aurora::after {
  content: "";
  position: absolute;
  inset: 18% auto auto -30%;
  width: 42vmax;
  height: 42vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 26, 31, .10), transparent 68%);
  filter: blur(70px);
}
@keyframes hero-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, -2%, 0) scale(1.06); }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* allow children to shrink below content size (no mobile overflow) */
  gap: clamp(2.4rem, 5vw, 3.6rem);
  align-items: center;
}
.hero__copy { min-width: 0; max-width: 40rem; position: relative; }
.hero__visual { min-width: 0; position: relative; }

/* thin availability strip */
.avail {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(1.3rem, 2.4vw, 1.7rem);
  padding: .4rem .85rem .4rem .7rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-display-2);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
}
.avail__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 0 0 rgba(40, 200, 64, .5);
  animation: avail-pulse 2.4s var(--ease) infinite;
}
@keyframes avail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(40, 200, 64, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(40, 200, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;                          /* bold, confident, warm */
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);  /* big, outcome-led headline */
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--ink-warm);                    /* warm near-black for a human feel */
  text-wrap: balance;
  /* The headline is constrained by the copy column (.hero__copy max-width) and
     wraps within it; combined with the accent line below the type can never spill
     past the column / be cropped by the hero's overflow:clip. */
}
/* Very narrow phones: trim the headline a touch so the accent (with its &nbsp;)
   always fits on its line within a 360px viewport. */
@media (max-width: 400px) {
  .hero__title { font-size: clamp(2rem, 9vw, 2.7rem); letter-spacing: -.024em; }
}
.hero__title-main {
  display: block;
  text-wrap: balance;
}
/* Key accent moment: the second headline line ("за кілька днів.") is painted with
   the IG gradient (clipped to the text) AND carries a thin gradient underline
   "swish". A solid --accent fallback keeps it readable on engines without
   background-clip:text. */
.hero__title-accent {
  position: relative;
  display: inline-block;                      /* so the swish hugs the text width */
  margin-top: .08em;
  color: var(--accent);
  background: var(--ig-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
/* the underline swish — a 4px IG-gradient bar tucked just under the accent word */
.hero__title-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.06em;
  height: 4px;
  border-radius: 999px;
  background: var(--ig-grad);
  -webkit-text-fill-color: initial;          /* not affected by the text-fill above */
  opacity: .9;
}

.hero__sub {
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.hero__cta {
  margin-top: clamp(1.8rem, 3vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
}

/* Tablet+: the product scene sits beside the copy. The visual column is centered
   (not pinned to the edge) so the orbiting chips have room on BOTH sides and never
   get clipped by the hero's overflow at 1280. */
@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.4rem);
    align-items: center;
  }
  .hero__visual { justify-self: center; }
}
@media (min-width: 1180px) {
  .hero { padding-top: clamp(3rem, 5vw, 5rem); }
}

/* ============================================================================
   Hero signature visual — THE PRODUCT SCENE (.scene)
   ───────────────────────────────────────────────────────────────────────────
   A composed, layered outcome scene (pure HTML/CSS/SVG, no images, no JS):
     · .device      — a browser frame showing the finished salon SITE. Its "photo"
                      band is a warm INK→AMBER editorial duotone + soft grain — NO
                      pink/magenta/violet gradient anywhere.
     · .scene__book — a docked live-booking mini calendar (proof запис works).
     · .scene__chips— labelled glass chips orbiting the device, naming the whole
                      system a client gets (booking · owner panel · master cabinet ·
                      Telegram bot · try-on). They wrap to a tidy row on phones.
     · .scene__tag  — one small "ваш домен" pill: the ONLY IG-gradient surface here.
   Tasteful float on desktop; reduced-motion settles everything still (see §19).
============================================================================ */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}
@media (min-width: 860px) { .hero__visual { max-width: 500px; margin-inline: 0; } }

.scene {
  position: relative;
  isolation: isolate;
  /* a stable aspect box so the absolutely-placed chips have room to orbit without
     ever forcing page x-scroll (the hero clips overflow). */
  padding: clamp(1.6rem, 5vw, 3rem) clamp(.5rem, 2vw, 1rem) clamp(2rem, 5vw, 2.6rem);
}

/* soft layered "platform" the device floats above — a blurred warm shadow disc */
.scene__deck {
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 6%;
  bottom: 6%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(60, 30, 40, .16), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

/* the browser frame — clean white card, soft warm shadow, thin IG-gradient hairline */
.device {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  background: #fff;
  /* a hairline that subtly carries the brand without being a big gradient fill */
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 34px 70px -26px rgba(42, 26, 31, .42),
    0 12px 26px -18px rgba(42, 26, 31, .30);
  overflow: hidden;
  text-align: left;
  transform: rotate(-2.4deg);
  animation: scene-float 13s ease-in-out infinite;
  transform-origin: 60% 40%;
}
@keyframes scene-float {
  0%, 100% { transform: rotate(-2.4deg) translateY(0); }
  50%      { transform: rotate(-2.4deg) translateY(-12px); }
}

/* browser top bar: three dots + a faux secure address pill */
.device__bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: #f7f5f3;
}
.device__dots { display: inline-flex; gap: .4rem; flex: none; }
.device__dots span { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.device__dots span:nth-child(2) { background: #febc2e; }
.device__dots span:nth-child(3) { background: #28c840; }
.device__url {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: -.01em;
  color: var(--muted-2);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 980px;
  padding: .26rem .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device__lock { width: 11px; height: 11px; flex: none; color: #28c840; }

.device__site { background: #fff; }

/* warm editorial "hero photo" — INK→AMBER duotone (NO pink/magenta), soft grain */
.device__hero {
  position: relative;
  aspect-ratio: 16 / 10;
  padding: clamp(1rem, 3.4vw, 1.45rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(130% 120% at 82% 8%, rgba(250, 196, 120, .55), transparent 52%),
    radial-gradient(120% 130% at 12% 16%, rgba(214, 126, 70, .40), transparent 55%),
    linear-gradient(165deg, #3A2218 0%, #5A3322 46%, #B5743A 100%);
}
/* fine printed grain — a tiny dot field at very low opacity for a tactile feel */
.device__hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(rgba(255, 255, 255, .5) .5px, transparent .5px),
    radial-gradient(rgba(0, 0, 0, .35) .5px, transparent .5px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
}
.device__badge {
  position: absolute;
  top: clamp(.85rem, 3vw, 1.2rem);
  left: clamp(1rem, 3.4vw, 1.45rem);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display-2);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 12, 8, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 980px;
  padding: .26rem .65rem;
}
.device__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5ee07a;
  box-shadow: 0 0 0 3px rgba(94, 224, 122, .28);
}
.device__eyebrow {
  font-family: var(--font-display-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}
.device__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  letter-spacing: -.025em;
  line-height: .98;
  text-shadow: 0 4px 22px rgba(20, 10, 6, .35);
}
.device__book {
  align-self: flex-start;
  margin-top: .25rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .84rem;
  color: #2A1A1F;
  background: #fff;
  border-radius: 980px;
  padding: .5rem .55rem .5rem 1rem;
  box-shadow: 0 10px 22px -10px rgba(20, 10, 6, .6);
}
.device__book svg { width: 15px; height: 15px; color: var(--accent); }

/* service rows + a rating line */
.device__body {
  padding: clamp(1rem, 3.4vw, 1.35rem);
  display: grid;
  gap: .8rem;
}
.device__row {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  min-width: 0;
}
.device__svc {
  flex: none;
  min-width: 0;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: clamp(.9rem, 2.5vw, 1rem);
  color: var(--ink-warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device__fill {
  flex: 1;
  min-width: .8rem;
  align-self: center;
  height: 0;
  border-bottom: 1.5px dotted rgba(0, 0, 0, .18);
}
.device__price {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.9rem, 2.5vw, 1rem);
  letter-spacing: -.01em;
  color: var(--ink-warm);
  font-variant-numeric: tabular-nums;
}
.device__rate {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .1rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.device__stars { color: #FA7E1E; font-size: .9rem; line-height: 1; letter-spacing: .04em; }
.device__rate-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .86rem;
  color: var(--ink-warm);
  font-variant-numeric: tabular-nums;
}
.device__rate-cap {
  font-family: var(--font-display-2);
  font-size: .78rem;
  color: var(--muted);
}

/* ── DOCKED MINI-CARD: live booking calendar (bottom-left of the device) ── */
.scene__book {
  position: absolute;
  z-index: 3;
  left: -2%;
  bottom: 3%;
  width: clamp(8.6rem, 27vw, 10.5rem);
  padding: .7rem .8rem .75rem;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  box-shadow: 0 20px 44px -18px rgba(42, 26, 31, .5);
  animation: scene-float 13s ease-in-out infinite;
  animation-delay: -4s;       /* offset so the card & device don't bob in lockstep */
}
.scene__book-top {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .55rem;
}
.scene__book-ic {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  color: var(--accent);
}
.scene__book-ic svg { width: 16px; height: 16px; }
.scene__book-day {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: -.005em;
  color: var(--ink-warm);
}
.scene__slots {
  display: flex;
  gap: .3rem;
  margin-bottom: .55rem;
}
.scene__slot {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  padding: .26rem 0;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 7px;
  background: #fff;
}
.scene__slot.is-taken {
  color: var(--muted-2);
  text-decoration: line-through;
  opacity: .6;
}
.scene__slot.is-pick {
  color: #fff;
  border-color: transparent;
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  font-weight: 500;
}
.scene__book-done {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: -.005em;
  color: #1d8a3a;
}
.scene__book-done svg {
  width: 13px; height: 13px;
  flex: none;
  color: #fff;
  background: #28c840;
  border-radius: 50%;
  padding: 2px;
}

/* ── FLOATING SYSTEM CHIPS: glass pills naming everything a client gets ── */
.scene__chips {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.scene__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .72rem .42rem .5rem;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 980px;
  box-shadow: 0 14px 30px -14px rgba(42, 26, 31, .42);
  white-space: nowrap;
  animation: scene-bob 7s ease-in-out infinite;
}
.scene__chip-ic {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  color: var(--accent);
  background: var(--lime-dim);
}
.scene__chip-ic svg { width: 16px; height: 16px; }
.scene__chip-txt {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: -.01em;
  color: var(--ink-warm);
}
@keyframes scene-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Desktop (≥860px = the two-column hero, where the visual has its own roomy
   column): the chips orbit the device at staggered positions. Below this the
   layout is single-column, so chips stack in a tidy row instead (no x-scroll). */
@media (min-width: 860px) {
  .scene__chip--booking { top: 3%;  right: -2%;  animation-delay: -.4s; }
  .scene__chip--owner   { top: 26%; right: -7%;  animation-delay: -1.8s; }
  .scene__chip--master  { top: 49%; right: -3%;  animation-delay: -3.1s; }
  .scene__chip--bot     { top: 13%; left: -8%;   animation-delay: -2.4s; }
  .scene__chip--tryon   { bottom: 16%; right: -5%; animation-delay: -1.1s; }
}

/* the only IG-gradient surface in the scene — a tiny "ваш домен" tag */
.scene__tag {
  position: absolute;
  z-index: 5;
  top: -3%;
  left: 4%;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .34rem .7rem .34rem .55rem;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: -.005em;
  color: #fff;
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  border-radius: 980px;
  box-shadow: var(--shadow-accent);
  animation: scene-bob 7s ease-in-out infinite;
  animation-delay: -2.9s;
}
.scene__tag svg { width: 14px; height: 14px; }

/* ── PHONE / TABLET (< 860px, single-column hero): drop the orbit. The chips
   become a neat centered, wrapping row UNDER the device so nothing overlaps the
   copy and there is never any horizontal scroll. ── */
@media (max-width: 859px) {
  .scene { padding: clamp(1rem, 4vw, 1.6rem) clamp(.4rem, 2vw, .8rem) .5rem; }
  .scene__chips {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: clamp(1.4rem, 6vw, 2rem);
    pointer-events: auto;
  }
  .scene__chip { position: static; animation: none; }
  /* keep the docked booking card inside the frame on small screens */
  .scene__book { left: 2%; bottom: 6%; width: clamp(8rem, 36vw, 9.8rem); }
  .scene__tag { left: 3%; top: -2%; }
}
/* very narrow phones: hide the docked card so it can't crowd the device */
@media (max-width: 380px) {
  .scene__book { display: none; }
}

/* ── Human proof: a small overlapping avatar row + a warm social-proof line ── */
.hero__proof {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(2rem, 3.5vw, 2.6rem);
}
.hero__avatars { display: inline-flex; flex: none; }
.hero__avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  margin-left: -10px;
  border: 2px solid var(--cream);
  font-family: var(--font-display-2);
  font-weight: 700;
  font-size: .82rem;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(60, 30, 40, .35);
}
.hero__avatar:first-child { margin-left: 0; }
/* Warm, earthy avatar tones (amber · terracotta · deep ink · brand-blue) — kept
   off the banned pink/violet palette so the proof row matches the hero scene. */
.hero__avatar--1 { background: linear-gradient(140deg, #FAB45C, #E07A2C); }
.hero__avatar--2 { background: linear-gradient(140deg, #C9633A, #8A3B22); }
.hero__avatar--3 { background: linear-gradient(140deg, #3A2A2E, #5A4046); }
.hero__avatar--4 { background: linear-gradient(140deg, #5B6BD0, #3A2A2E); }
.hero__proof-text {
  font-family: var(--font-display-2);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  max-width: 22ch;
}

/* ----------------------------------------------------------------------------
   6b) Pick-path — "Що вам потрібно?" : three big choice cards under the hero.
   Real <button>s (keyboard accessible). Clicking smooth-scrolls to the matching
   services/cases and flips a highlight state on them (see .is-picked below).
---------------------------------------------------------------------------- */
.section--pick { background: var(--bg); padding-block: clamp(2.6rem, 5vw, 4rem); }
.section--pick .sec-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }

.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;
}
@media (min-width: 720px) {
  .pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pick__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: clamp(1.2rem, 2.4vw, 1.5rem);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              background var(--dur-fast) ease;
}
@media (min-width: 720px) {
  /* On the 3-up row, stack icon over text so each card reads as a tall tile. */
  .pick__card { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}
.pick__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(214, 41, 118, .28);
}
.pick__card:active { transform: translateY(-1px); }
.pick__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pick__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--lime-dim);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.pick__ic svg { width: 25px; height: 25px; }
.pick__card:hover .pick__ic { background: var(--accent); color: var(--accent-ink); transform: scale(1.04) rotate(-3deg); }

.pick__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pick__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.15;
}
.pick__desc {
  font-family: var(--font-display-2);
  font-size: .92rem;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: -.005em;
}
/* Arrow affordance — corner on desktop tiles, trailing on mobile rows */
.pick__go {
  flex: none;
  margin-left: auto;
  font-family: var(--font-display-2);
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease);
}
@media (min-width: 720px) {
  .pick__go {
    position: absolute;
    top: clamp(1.2rem, 2.4vw, 1.5rem);
    right: clamp(1.2rem, 2.4vw, 1.5rem);
    margin: 0;
  }
}
.pick__card:hover .pick__go { transform: translateX(4px); }

/* ---- Highlight/filter state set when a pick-path card is chosen ----
   The chosen group's service cards & cases lift and ring navy; the rest dim
   back so the relevant items clearly stand out. Toggled by app.js (module 11)
   on .bento / .cases via a data-pick-active attribute + .is-picked on matches. */
.bento[data-pick-active] .card:not(.is-picked),
.cases[data-pick-active] .case:not(.is-picked),
.playlist__list[data-pick-active] .pl__item:not(.is-picked) {
  opacity: .42;
  filter: saturate(.7);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.card.is-picked,
.case.is-picked {
  border-color: rgba(214, 41, 118, .55);
  box-shadow: 0 0 0 3px rgba(214, 41, 118, .14), var(--shadow-2);
}
/* On the dark playlist the picked row rings in luminous blue (the navy ring would
   vanish on ink) and lifts its surface so it reads against the dimmed siblings. */
.pl__item.is-picked {
  border-color: rgba(125, 165, 255, .6);
  box-shadow: 0 0 0 2px rgba(125, 165, 255, .28), 0 24px 60px -28px rgba(0, 0, 0, .8);
}
.pl__item.is-picked .pl__row { background: rgba(125, 165, 255, .06); }
/* a subtle, one-shot pulse when items become highlighted (reduced-motion safe) */
.card.is-picked.pick-pulse,
.case.is-picked.pick-pulse,
.pl__item.is-picked.pick-pulse { animation: pick-pulse .6s var(--ease); }
@keyframes pick-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 41, 118, .35), var(--shadow-1); }
  60%  { box-shadow: 0 0 0 10px rgba(214, 41, 118, 0), var(--shadow-2); }
  100% { box-shadow: 0 0 0 3px rgba(214, 41, 118, .14), var(--shadow-2); }
}
/* the active pick-path card stays visibly selected */
.pick__card.is-active {
  border-color: var(--accent);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(214, 41, 118, .08), transparent 60%),
    var(--panel);
  box-shadow: 0 0 0 3px rgba(214, 41, 118, .12), var(--shadow-2);
}
.pick__card.is-active .pick__ic { background: var(--accent); color: var(--accent-ink); }

/* ----------------------------------------------------------------------------
   6c) Proof band — thin strip: count-up stats + client monogram avatars.
---------------------------------------------------------------------------- */
/* The proof band is one of the DELIBERATE Instagram moments: a full-bleed IG
   gradient strip. It uses --ig-grad-ink (magenta → violet → blue) so the white
   stats + labels pass WCAG AA across the whole band (no light yellow under text). */
.proofband {
  position: relative;
  z-index: 1;
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  border-block: 1px solid transparent;
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
}
.proofband__inner { display: block; }
/* The four stats sit on ONE even rhythm: a 2-up grid on phones, a 4-up EQUAL-track
   grid from 560px up (each stat owns the same width → no ragged gaps). The grid
   spans the full container so the stats align to the section gutter on both sides. */
.proofstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 4vw, 2.6rem);
  width: 100%;
}
@media (min-width: 560px) {
  .proofstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.proofstat {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  text-align: center;
}
@media (min-width: 560px) { .proofstat { text-align: left; } }
.proofstat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: #ffffff;                              /* white on the IG-gradient band (AA) */
  font-variant-numeric: tabular-nums;
}
.proofstat__label {
  font-family: var(--font-display-2);
  font-size: .86rem;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .9);              /* AA on the magenta→blue band */
}

/* ----------------------------------------------------------------------------
   7) Services — bento grid (soft rounded cards, soft shadows)
---------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;       /* every card in a row stretches to the row's height */
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;               /* fill the stretched grid track → equal heights per row */
  padding: var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
/* "story-card" feel: a subtle IG-gradient RING that fades in on hover/focus.
   Drawn as an inset border band (gradient + mask compositing) so it respects the
   rounded corners AND the card's overflow:hidden. Real content sits above it via
   the z-index rule below. Reduced-motion just snaps the opacity (transition is
   globally neutralised). */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;                       /* above the surface, below the lifted content */
  border-radius: inherit;
  padding: 1.5px;                   /* ring thickness */
  background: var(--ig-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.card:hover::before,
.card:focus-within::before { opacity: .9; }
.card__glow { display: none; }
.card > *:not(.card__glow) { position: relative; z-index: 3; }

/* Index (top-left) + icon (top-right) share ONE fixed-height row so the number,
   the icon and the title baseline align identically across every card. */
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 46px;           /* = icon height → price is optically centred on it */
  margin-bottom: 1.3rem;
}
.card__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: var(--lime-dim);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon { background: rgba(214, 41, 118, .14); }

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.9vw, 1.42rem);
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .5rem;
}
.card__desc { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1.3rem;
}
.card__tags li {
  font-family: var(--font-display-2);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  padding: .3rem .65rem;
  border-radius: 980px;
  background: var(--bg-2);
}

/* Featured AI card — distinct navy-tinted surface + filled icon so the section
   doesn't read as six identical cards, while every card stays the SAME size
   (equal heights, shared baselines) for a pixel-even grid. */
.card--feat {
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(214, 41, 118, .10), transparent 58%),
    var(--panel);
  border-color: rgba(214, 41, 118, .22);
}
.card--feat::after { content: none; }
.card--feat .card__icon { background: var(--accent); color: var(--accent-ink); }
.card--feat:hover .card__icon { background: var(--accent-2); }

/* ---- Build-tile additions: from-price chip + "add to build" toggle ----------
   Each service card is now a selectable BUILD TILE. The price chip sits in the
   top row (idx · price · icon); the .card__pick button below the tags toggles
   the block in/out of the sticky кошик. The whole card also gets a selected
   ring (.is-build) so the choice is unmistakable. */
.card__top { gap: .6rem; }
.card__price {
  margin-left: auto;                 /* push price + icon to the right of the idx */
  display: inline-flex;
  align-items: baseline;
  gap: .12rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.card__price-pre {
  font-family: var(--font-display-2);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: 0;
  color: var(--muted-2);
  margin-right: .1rem;
}
.card--feat .card__price { color: var(--accent); }

/* "Add to build" toggle — a real <button>, full keyboard support.
   Sits flush under the tags row; lights up navy when the block is in the build. */
.card__pick {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: .6rem .95rem .6rem .7rem;
  min-height: 44px;
  border: 1px solid var(--hair-2);
  border-radius: 980px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-display-2);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.card__pick:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.card__pick:active { transform: translateY(0); }
.card__pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the little check box on the left of the toggle */
.card__pick-box {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 7px;
  border: 1.5px solid var(--hair-2);
  background: var(--bg-2);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card__pick-box::after {       /* checkmark, hidden until pressed */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-ink);
  opacity: 0;
  transform: scale(.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 72% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 72% no-repeat;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* pressed / "in build" state */
.card__pick[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.card__pick[aria-pressed="true"]:hover { background: var(--accent-2); border-color: var(--accent-2); }
.card__pick[aria-pressed="true"] .card__pick-box {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}
.card__pick[aria-pressed="true"] .card__pick-box::after { opacity: 1; transform: scale(1); }

/* Selected card: navy ring so the chosen blocks read as a set (independent of
   the pick-path .is-picked highlight, which can coexist). */
.card.is-build {
  border-color: rgba(214, 41, 118, .55);
  box-shadow: 0 0 0 3px rgba(214, 41, 118, .12), var(--shadow-2);
}
.card.is-build.card--feat {
  box-shadow: 0 0 0 3px rgba(214, 41, 118, .16), var(--shadow-2);
}
/* one-shot pop when a block is added (reduced-motion neutralises it below) */
.card.build-pop { animation: build-pop .42s var(--ease); }
@keyframes build-pop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-3px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

/* On the narrowest phones keep the price legible but a touch smaller. */
@media (max-width: 380px) {
  .card__price { font-size: 1.02rem; }
}

/* ----------------------------------------------------------------------------
   8) Process — editorial numbered manifesto (asymmetric: header | steps).
   No cards — large numerals, a hairline rule per step. Distinct from every
   other section's treatment.
---------------------------------------------------------------------------- */
.process__wrap {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.process__wrap .sec-head { margin-bottom: 0; }
.steps {
  display: grid;
  grid-template-columns: 1fr;
  counter-reset: step;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  padding: clamp(1.3rem, 2.4vw, 1.7rem) 0;
  border-top: 1px solid var(--hair);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  min-width: 1.8em;       /* numerals share one column → text left-edges align */
}
.step__num::before { content: none; }
.step__body { padding-top: .1em; }
.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  letter-spacing: -.018em;
  margin-bottom: .35rem;
  color: var(--ink);
}
.step__desc { color: var(--muted); font-size: 1rem; line-height: 1.55; max-width: 52ch; }

/* Tablet+: header on the left, manifesto on the right (asymmetric editorial) */
@media (min-width: 860px) {
  .process__wrap {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .process__wrap .sec-head { position: sticky; top: 92px; }
}

/* ----------------------------------------------------------------------------
   8b) Industries — "Для яких сфер ми робимо"
   Niche cards: inline-SVG icon chip + name + examples. Reuses the .section /
   .sec-head tokens; the .ind* namespace keeps it clear of build-tile/pick hooks.
   Grid: 1 col (≤520) → 2 (≥521) → 4 (≥901).
---------------------------------------------------------------------------- */
.ind-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;
}
.ind {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.ind:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(214, 41, 118, .28);
}
/* same "story-card" IG ring on hover as the service cards */
.ind::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--ig-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.ind:hover::before { opacity: .9; }
.ind > * { position: relative; z-index: 2; }
.ind__ic {
  flex: none;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: var(--lime-dim);
  margin-bottom: 1.15rem;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.ind__ic svg { width: 25px; height: 25px; }
.ind:hover .ind__ic { background: var(--accent); color: var(--accent-ink); transform: scale(1.04) rotate(-3deg); }
.ind__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.9vw, 1.42rem);
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .85rem;
}
/* Niche list as scannable chips (replaces the old comma blob) — each sub-niche is
   its own pill, so the full taxonomy reads clearly and feels hand-set. */
.ind__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .9rem;    /* chips sit right under the title — even start across all cards */
  padding-top: .1rem;
  align-content: flex-start;
}
.ind__tags li {
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-warm);
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 980px;
  padding: .3rem .7rem;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.ind:hover .ind__tags li {
  background: var(--lime-dim);
  border-color: rgba(214, 41, 118, .22);
  color: var(--accent);
}

/* ----------------------------------------------------------------------------
   8c) Features — "Усе для онлайн-запису, у вашому власному сайті"
   16 capability cards (icon · name · one-line · "✓ входить" badge), then an
   accent line + CTA. The .feat* namespace keeps it clear of any JS hooks.
   Grid: 1 col → 2 (≥560) → 3 (≥860) → 4 (≥1100).
---------------------------------------------------------------------------- */
.feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;
}
.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.feat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(214, 41, 118, .28);
}
.feat__ic {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: var(--lime-dim);
  margin-bottom: .95rem;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.feat__ic svg { width: 22px; height: 22px; }
.feat:hover .feat__ic { background: rgba(214, 41, 118, .14); }
.feat__title {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: .35rem;
  line-height: 1.25;
}
.feat__desc {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}
.feat__badge {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-display-2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--accent);
}

/* Accent line + CTA under the grid (the "pay once, yours forever" close). */
.feat-cta {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border-radius: var(--radius);
  /* the DELIBERATE IG-gradient moment: white text on the AA-safe magenta→blue slice */
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  box-shadow: var(--shadow-accent);
}
.feat-cta__line {
  color: #fff;
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.4;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
/* the gradient already lives on the band → make the CTA a solid white pill */
.feat-cta .btn--lime {
  background-color: #fff;
  background-image: none;
  color: var(--accent);
  justify-self: start;
}
.feat-cta .btn--lime:hover { background-color: #fff; filter: brightness(.97); }
@media (min-width: 760px) {
  .feat-cta {
    grid-template-columns: 1fr auto;
    gap: 1.4rem 2.4rem;
  }
  .feat-cta .btn--lime { justify-self: end; }
}

/* Honesty note under the feature grid: clarifies that «✓ входить» means the
   demo panel demonstrates each capability, while real SMS/Viber + online
   payment are wired per-project at launch. Quiet, left-aligned, hairline rule. */
.feat-note {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding-left: .9rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display-2);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   8c-ter) UA-VALUES — "Український продукт"  (id="ukrainian")
   A single, self-contained trust/values card. A calm values point (your money &
   client base stay in Ukraine), no competitor named. Deliberately NOT the
   IG-gradient moment — it's a calm values panel, not a CTA. The flag glyph
   (blue/yellow) carries the "Ukrainian" signal. Stacks cleanly on mobile (no
   h-scroll at 360). Whole block is easy to remove with the matching
   <section id="ukrainian"> in index.html — nothing else depends on it.
---------------------------------------------------------------------------- */
.uatrust__card {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(79, 91, 213, .05), transparent 55%),
    var(--panel);
  box-shadow: var(--shadow-1);
}
/* small two-stripe Ukrainian-flag mark (blue over yellow) */
.uatrust__flag {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.uatrust__flag-top { background: #0057B7; }
.uatrust__flag-bot { background: #FFD700; }
.uatrust__kicker { display: block; margin-bottom: .55rem; }
.uatrust__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}
.uatrust__lead {
  margin-top: .8rem;
  font-family: var(--font-display-2);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  max-width: 66ch;
  text-wrap: pretty;
}
/* the values point — quieter, with a hairline accent rule on the left edge */
.uatrust__fact {
  margin-top: 1.1rem;
  padding-left: .9rem;
  border-left: 2px solid var(--accent);
  font-size: .96rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 72ch;
  text-wrap: pretty;
}
/* prominent-but-modest attribution chip so the claim reads as sourced */
.uatrust__src {
  margin-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display-2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--muted-2);
}
.uatrust__src::before {
  content: "i";
  flex: none;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: .72rem;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  background: var(--muted-2);
  border-radius: 50%;
}
/* ≥640px: flag sits beside the body in a 2-col layout */
@media (min-width: 640px) {
  .uatrust__card {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: clamp(1.2rem, 2.8vw, 2rem);
  }
}

/* ----------------------------------------------------------------------------
   8d) Tariffs — "Тарифи, просто й чесно"
   3 honest tiers; the MIDDLE one is featured with the IG-gradient ring +
   "популярний" badge. The .trf* namespace keeps it clear of the #pricing hooks.
   Grid: 1 col → 3 (≥760).
---------------------------------------------------------------------------- */
.trf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;
}
.trf {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--card-pad);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.trf:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1.5px rgba(214, 41, 118, .5), var(--shadow-2);
  border-color: rgba(214, 41, 118, .32);
}
.trf__head { margin-bottom: 1.1rem; }
.trf__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: -.015em;
  color: var(--ink);
}
.trf__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 2.6rem);
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.trf__from {
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.trf__cur {
  font-family: var(--font-display-2);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--muted);
}
.trf__term {
  margin-top: .5rem;
  font-family: var(--font-display-2);
  font-size: .88rem;
  color: var(--muted-2);
}
/* Per-tier VALUE line: frames each price against a year of platform rent
   (research). Reads as a quiet sub-line under the amount; the featured (sweet-
   spot 9900) variant gets a soft magenta wash + accent edge so the eye anchors
   on the tier we sell hardest. */
.trf__value {
  margin-top: .7rem;
  font-family: var(--font-display-2);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.trf__value--feat {
  padding: .55rem .75rem;
  border-radius: 12px;
  border-left: 2px solid var(--accent);
  background: var(--lime-dim);
  color: var(--ink);
  font-weight: 600;
}
.trf__list {
  display: grid;
  gap: .7rem;
  margin: 1.4rem 0 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
}
.trf__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .96rem;
  color: var(--muted);
  line-height: 1.45;
}
.trf__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--lime-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D62976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.trf .btn { margin-top: auto; }

/* Featured tier — IG-gradient ring + lift (no scale, so it stays on baseline). */
.trf--feat {
  border-color: transparent;
  box-shadow: var(--shadow-accent);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(214, 41, 118, .07), transparent 60%),
    var(--panel);
}
/* the IG-gradient accent ring (drawn as an inset gradient border that respects
   the rounded corners) — this is the highlighted middle card per the spec. */
.trf--feat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--ig-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.trf--feat:hover { box-shadow: var(--shadow-2), var(--shadow-accent); }
.trf--feat > * { position: relative; }
.trf__badge {
  position: absolute;
  top: -12px;
  left: clamp(1.8rem, 3vw, 2.3rem);
  z-index: 1;
  font-family: var(--font-display-2);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background-color: var(--accent);
  background-image: var(--ig-grad-ink);
  padding: .3rem .8rem;
  border-radius: 980px;
  box-shadow: var(--shadow-1);
}
.trf__note {
  margin-top: 1.8rem;
  font-family: var(--font-display-2);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
}
/* Currency bridge: грн here are indicative; the contract amount is fixed in USD.
   Sits just under the tariffs lead — a small muted chip-line so it reads as a
   clarifying footnote, not a disclaimer wall. */
.trf__fx {
  margin-top: .85rem;
  display: inline-flex;
  align-items: flex-start;
  gap: .4rem;
  font-family: var(--font-display-2);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--muted-2);
  text-wrap: pretty;
}
.trf__fx::before {
  content: "₴ → $";
  flex: none;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .01em;
  color: var(--accent);
  background: rgba(214, 41, 118, .08);
  padding: .14rem .42rem;
  border-radius: 980px;
  margin-top: .04rem;
}
.trf__tg {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trf__tg:hover { color: var(--accent-2); }

/* Responsive grids for the three new sections (no h-scroll at 360/768/1280/1440).
   Industries 4/2/1 · Features 4/3/2/1 · Tariffs 3/1. */
@media (min-width: 560px) {
  .ind-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .trf-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .ind-grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------
   9) Cases (soft cards, whole-card link)
---------------------------------------------------------------------------- */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--flow);
}
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;               /* fill the stretched grid track → equal heights per row */
  color: inherit;
  padding: var(--card-pad);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
/* story-card feel on the cases: a soft magenta ring + lift on hover/focus.
   (box-shadow ring, so it never paints over the card's text content.) */
a.case:hover,
a.case:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1.5px rgba(214, 41, 118, .55), var(--shadow-2);
  border-color: rgba(214, 41, 118, .35);
}
.case:focus-visible { outline-offset: 4px; }

/* "View case →" affordance — whole card is the link */
.case__cta {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display-2);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--accent);
  transition: gap var(--dur-fast) var(--ease);
}
.case:hover .case__cta,
.case:focus-visible .case__cta { text-decoration: underline; text-underline-offset: 3px; }
.case__tags + .case__cta { margin-top: .9rem; }

/* Flagship case — navy-tinted surface (matches the AI service feature) */
.case--feat {
  border-color: rgba(214, 41, 118, .22);
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(214, 41, 118, .09), transparent 58%),
    var(--panel);
}
.case__badge {
  align-self: flex-start;
  margin-bottom: 1rem;
  font-family: var(--font-display-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: .3rem .7rem;
  border-radius: 980px;
}
/* big editorial metric, sitting above a hairline — distinct from service cards */
.case__metric {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 5.5vw, 3.7rem);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.case__metric-label {
  font-family: var(--font-display-2);
  font-size: .9rem;
  color: var(--muted);
  letter-spacing: -.005em;
  margin-top: .45rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hair-card);
}
.case__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .55rem;
}
.case__desc { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1.3rem;
}
.case__tags li {
  font-family: var(--font-display-2);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  padding: .3rem .65rem;
  border-radius: 980px;
  background: var(--bg-2);
}
/* "приклад / example" chip — marks demonstrative (non-linked) cards */
.case__tag--ex {
  font-family: var(--font-display-2);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--lime-dim);
  padding: .3rem .6rem;
  border-radius: 980px;
}

/* ===== Flagship case (barbershop): full-width, two-part editorial layout =====
   Spans the whole row at every breakpoint; navy-tinted like the AI service. */
.case--flagship {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.4rem);
  border-color: rgba(214, 41, 118, .22);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(214, 41, 118, .10), transparent 55%),
    var(--panel);
}
/* flagship is a whole-card link → it lifts like the others (a.case:hover above) */
.case__flag-main { display: flex; flex-direction: column; min-width: 0; }
.case__flag-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.case__flag-badges .case__badge { align-self: auto; margin-bottom: 0; }
.case__title--lg {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  letter-spacing: -.02em;
  margin-bottom: .7rem;
}
.case--flagship .case__desc { max-width: 60ch; }
.case--flagship .case__tags { padding-top: 1.4rem; }
/* metrics rail — three big numbers; row on phones, column beside copy on desktop */
.case__flag-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2.5vw, 1.6rem);
  align-content: start;
}
.case__flag-metrics li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: 1.1rem;
  border-top: 2px solid rgba(214, 41, 118, .18);
}
.case__flag-metrics .case__metric-label {
  margin: 0; padding: 0; border: 0;            /* reset the shared label's hairline/spacing */
}
.case__metric--sm { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; }

@media (min-width: 760px) {
  .case--flagship {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
  }
  .case__flag-metrics {
    grid-template-columns: minmax(0, 1fr);     /* stacked rail on the right */
    gap: 1.4rem;
  }
}

/* ----------------------------------------------------------------------------
   9d) PORTFOLIO PLAYLIST — dark full-bleed "works you can run" (id="cases")
   ───────────────────────────────────────────────────────────────────────────
   A dramatic ink section. Each work is a ROW with a ▶ control; pressing it
   lazily mounts a LIVE <iframe> into the row's .pl__stage (app.js module 14
   keeps only ONE open). Reduced-motion mounts no iframe — the ▶ opens the demo
   in a new tab and the static poster stays. All numbers are tabular; layout is
   single-column on phones, two-column (meta | poster) on wide screens.
---------------------------------------------------------------------------- */
.playlist {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #eaf0ff;
  background: #0b1020;                          /* deep ink */
  padding-block: clamp(4rem, 8vw, 7.5rem);
}
.playlist__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 90% at 92% -8%, rgba(86, 130, 226, .30), transparent 60%),
    radial-gradient(55% 100% at -5% 108%, rgba(40, 70, 150, .40), transparent 55%),
    linear-gradient(180deg, #0c1224, #0a0f1e 60%, #0b1020);
}
.playlist__bg::after {                          /* faint hairline grid for texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: clamp(46px, 5vw, 74px) clamp(46px, 5vw, 74px);
  -webkit-mask-image: radial-gradient(130% 100% at 85% 0%, #000, transparent 70%);
  mask-image: radial-gradient(130% 100% at 85% 0%, #000, transparent 70%);
  opacity: .6;
}

/* Header — light text on ink; the kicker/lead/aside override their light defaults */
.playlist__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.playlist__kicker { color: #e9a6cf; }                          /* light IG-magenta tint */
.playlist__kicker::before { background: #e9a6cf !important; }   /* the editorial tick */
.playlist__title { color: #fff; }
.playlist__lead { color: #aebbd8; }
.playlist__all { flex: none; }                  /* the inverted "Усе портфоліо →" pill */

/* The list */
.playlist__list {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1rem);
  counter-reset: pl;
}

/* A row item: a glassy dark card. The inner .pl__row is the clickable header. */
.pl__item {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
  overflow: clip;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pl__item:hover {
  border-color: rgba(125, 165, 255, .38);
  background: rgba(255, 255, 255, .06);
}
/* The featured (first) row gets a warmer ring + tint so it reads as the flagship */
.pl__item--feat {
  border-color: rgba(125, 165, 255, .34);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(86, 130, 226, .16), transparent 58%),
    rgba(255, 255, 255, .04);
}
/* The row currently showing a live preview */
.pl__item.is-playing {
  border-color: rgba(125, 165, 255, .55);
  box-shadow: 0 0 0 1px rgba(125, 165, 255, .35), 0 30px 70px -30px rgba(0, 0, 0, .85);
}

/* The clickable header row: index · ▶ poster · meta */
.pl__row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "idx meta";
  align-items: center;
  gap: clamp(.9rem, 2.2vw, 1.6rem);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.7rem);
  transition: background var(--dur-fast) var(--ease);
}

.pl__idx {
  grid-area: idx;
  align-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  letter-spacing: .02em;
  color: rgba(174, 196, 240, .55);
  font-variant-numeric: tabular-nums;
  padding-top: .15rem;
}

/* ▶ PLAY control — doubles as the static POSTER (a tinted panel with a play
   glyph). Pressing it mounts the live iframe. Tall enough to be a real target. */
.pl__play {
  grid-area: play;                               /* placed via the meta column on phones */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .6rem .95rem .6rem .7rem;
  border-radius: 980px;
  border: 1px solid transparent;
  color: #ffffff;
  /* the ▶ "story launch" control carries the IG gradient (AA: white label sits on
     the magenta→violet→blue slice, never the yellow). */
  background: var(--ig-grad-ink);
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pl__play:hover {
  filter: saturate(1.1) brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(214, 41, 118, .85);
}
.pl__play:active { transform: translateY(0); }
.pl__play:focus-visible { outline: 2px solid #9db4e6; outline-offset: 3px; }
/* play triangle (CSS-drawn) → becomes a "pause" pair when its row is playing */
.pl__play-ic {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-grid;
  place-items: center;
}
.pl__play-ic::before {
  content: "";
  width: 0; height: 0;
  margin-left: 2px;                              /* optical centring of the triangle */
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #0b1020;
  transition: opacity var(--dur-fast) var(--ease);
}
.pl__item.is-playing .pl__play {
  background: var(--ig-grad-ink);
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 0 0 1px rgba(214, 41, 118, .5), 0 12px 28px -12px rgba(214, 41, 118, .8);
}
.pl__item.is-playing .pl__play-ic::before {
  /* swap the triangle for two pause bars using a box-shadow trick */
  width: 3px; height: 10px;
  margin-left: 0;
  border: 0;
  background: #0b1020;
  box-shadow: 5px 0 0 #0b1020, -5px 0 0 #0b1020;
}

.pl__meta { grid-area: meta; min-width: 0; }
.pl__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.12rem, 2.1vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
}
.pl__title .pl__open { color: inherit; transition: color var(--dur-fast) var(--ease); }
.pl__title .pl__open:hover { color: #cdddff; text-decoration: underline; text-underline-offset: 3px; }
.pl__title .pl__open:focus-visible { outline: 2px solid #9db4e6; outline-offset: 3px; border-radius: 4px; }
.pl__sub {
  margin-top: .5rem;
  color: #aebbd8;
  font-size: .98rem;
  line-height: 1.5;
  max-width: 64ch;
}
.pl__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.pl__tags li {
  font-family: var(--font-display-2);
  font-size: .76rem;
  font-weight: 500;
  color: #aebbd8;
  padding: .26rem .62rem;
  border-radius: 980px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}


/* The lazy preview stage. Collapsed by max-height:0 so opening animates; the
   iframe is injected by JS only on first open (no autoplay storm). */
.pl__stage {
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: #05080f;
}
.pl__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px),
    #05080f;
}
/* loading shimmer while the framed page boots */
.pl__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(125,165,255,.10) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: pl-shimmer 1.3s linear infinite;
  pointer-events: none;
}
.pl__frame.is-loaded::before { display: none; }
.pl__frame iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
@keyframes pl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* small caption row under the frame (open-in-new-tab) — built by JS */
.pl__stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem clamp(1rem, 2.4vw, 1.5rem);
  font-family: var(--font-display-2);
  font-size: .84rem;
  color: #aebbd8;
}
.pl__stage-open {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #cdddff;
  font-weight: 600;
  white-space: nowrap;
}
.pl__stage-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl__stage-open:focus-visible { outline: 2px solid #9db4e6; outline-offset: 3px; border-radius: 4px; }

/* Footer note + repeat link */
.playlist__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.6rem);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.playlist__note { color: #8ea0c4; font-size: .92rem; }

/* ≥ 720px : meta + poster two-column header row */
@media (min-width: 720px) {
  .pl__row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "idx play meta";
    gap: clamp(1.1rem, 2.4vw, 1.8rem);
    padding: clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.4rem, 2.6vw, 2rem);
  }
  .pl__play { grid-area: play; align-self: center; }
}

/* ≤ 719px : a two-row layout. Top row = ▶ play; second row = meta.
   The index spans both rows on the left so the row reads as one unit. */
@media (max-width: 719px) {
  .pl__row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "idx play"
      "idx meta";
    align-items: center;
    row-gap: .85rem;
  }
  .pl__play { grid-area: play; justify-self: start; align-self: center; }
  .pl__meta { grid-area: meta; }
}

/* ----------------------------------------------------------------------------
   9b) Testimonials + Trust band
---------------------------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;
}
/* Testimonials use a tinted/quieter surface than service cards so each section
   reads as its own treatment, not a repeated card. */
.tm {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;               /* equal-height testimonial cards per row */
  padding: var(--card-pad);
  border: 1px solid var(--hair-card);
  border-radius: var(--card-radius);
  background: var(--bg-2);
  box-shadow: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.tm:hover {
  transform: translateY(-3px);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.tm__quote-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: .55;
  color: rgba(214, 41, 118, .26);
  margin-bottom: .7rem;
}
.tm__quote {
  margin: 0 0 1.4rem;
  color: var(--ink);
  font-size: clamp(1.04rem, 1.4vw, 1.16rem);
  line-height: 1.55;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.tm__by {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
/* Monogram avatar as an Instagram "story ring": an IG-gradient ring, a thin white
   gap, then a soft-magenta disc holding the (magenta) initials. The gradient sits
   on the element's border-box and a 2px white ring + the disc are layered on top
   via a multi-stop background-clip so it reads exactly like an IG story avatar. */
.tm__avatar {
  position: relative;
  isolation: isolate;                /* contains the negative-z pseudos to the avatar */
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-family: var(--font-display-2);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent);
  background: var(--ig-grad);        /* the story ring */
}
/* white gap (ring → disc separation) */
.tm__avatar::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #fff;
  z-index: -2;
}
/* soft-magenta inner disc behind the (magenta) initials */
.tm__avatar::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--lime-dim);
  z-index: -1;
}
.tm__id { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tm__name {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.tm__role {
  font-family: var(--font-display-2);
  font-size: .86rem;
  letter-spacing: -.005em;
  color: var(--muted);
}

/* Trust band — compact reinforcement strip (one soft card, divided cells) */
.trust-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.trust-band__item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: clamp(1.3rem, 2.4vw, 1.6rem) clamp(1.4rem, 2.6vw, 1.8rem);
  border-top: 1px solid var(--hair);
}
.trust-band__item:first-child { border-top: 0; }
.trust-band__label {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* Small navy check badge turns the plain trust row into a polished guarantee
   strip (purely decorative; the label text stays the source of truth). */
.trust-band__label::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: var(--lime-dim);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D62976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
/* The note sits under the label, optically aligned with the label text (past
   the badge) so each cell reads as a tidy two-line unit. */
.trust-band__note { padding-left: calc(20px + .55rem); }
.trust-band__note {
  font-family: var(--font-display-2);
  font-size: .9rem;
  letter-spacing: -.005em;
  color: var(--muted);
}

/* ----------------------------------------------------------------------------
   9b-ticker) Kinetic divider — full-bleed IG-gradient capability ticker
   ───────────────────────────────────────────────────────────────────────────
   A slow-scrolling band of short capability words on the live IG gradient,
   sitting between the dark playlist and the statement band. Two identical units
   translate by -50% for a seamless loop; the gradient itself also slides so the
   colour is alive, not a flat fill. White words on the magenta→blue gradient are
   AA-legible. Edge fade-out via mask. Reduced-motion stops both animations (§19).
---------------------------------------------------------------------------- */
.ticker {
  position: relative;
  overflow: hidden;                  /* clip the long track — no page scroll */
  padding-block: clamp(.85rem, 1.8vw, 1.15rem);
  background: var(--ig-grad-ink);
  background-size: 200% 100%;
  animation: console-slide 14s linear infinite;   /* reuse the hue-slide keyframe */
  border-block: 1px solid rgba(255, 255, 255, .14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 34s linear infinite;
  will-change: transform;
}
.ticker__unit {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-right: 0;
}
.ticker__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  color: #fff;
  padding-inline: clamp(.7rem, 1.6vw, 1.3rem);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(20, 16, 30, .28);
}
.ticker__star {
  font-size: clamp(.7rem, 1.4vw, 1rem);
  color: rgba(255, 255, 255, .75);
  transform: translateY(-.06em);
}
@keyframes ticker-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ----------------------------------------------------------------------------
   9c) Statement band — dark full-bleed accent "hero moment"
---------------------------------------------------------------------------- */
.statement {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: #14101e;            /* deep plum-ink (warm, IG-leaning) */
  color: #fff;
}
.statement__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* IG-spectrum glow moment: violet/blue top-right, magenta bottom-left over a
     deep plum ink — an intentional Instagram "moment", distinct from the single
     dark #cases playlist block. */
  background:
    radial-gradient(70% 120% at 88% -10%, rgba(150, 47, 191, .42), transparent 60%),
    radial-gradient(55% 120% at 100% 0%, rgba(79, 91, 213, .34), transparent 58%),
    radial-gradient(60% 120% at 0% 120%, rgba(214, 41, 118, .55), transparent 55%),
    linear-gradient(180deg, #1a1228, #120c1d);
}
.statement__bg::after {     /* faint hairline grid for texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: clamp(48px, 5vw, 76px) clamp(48px, 5vw, 76px);
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 72%);
  opacity: .7;
}
.statement__lead {
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  color: #fff;
  text-wrap: balance;
}
@media (min-width: 760px) { .statement__lead { max-width: 30ch; } }
.statement__cta {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
}

/* Inverted atoms (on dark) — white pill, magenta-accent label so it reads as
   InstaLab even when inverted on the dark bands. */
.btn--invert {
  background: #fff;
  color: var(--accent);
  font-weight: 600;
}
.btn--invert:hover {
  background: #eef1f6;
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .6);
}
.btn--invert:active { transform: translateY(0); box-shadow: none; }
.btn--invert:focus-visible { outline-color: #fff; outline-offset: 4px; }
.link-chev--invert { color: #cdd9f2; }
.link-chev--invert:hover { color: #fff; }
.link-chev--invert:focus-visible { outline-color: #fff; }

/* ----------------------------------------------------------------------------
   10) Tech stack — marquees (light pills)
---------------------------------------------------------------------------- */
.section--tech { padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.marquee {
  position: relative;
  overflow: hidden;
  padding: .5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.marquee + .marquee { margin-top: .9rem; }
.marquee__track {
  display: flex;
  gap: .8rem;
  width: max-content;
  will-change: transform;
  animation: marquee-l 38s linear infinite;
}
.marquee--rev .marquee__track { animation-name: marquee-r; animation-duration: 44s; }
.marquee:hover .marquee__track { animation-play-state: paused; }

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

.chip {
  flex: none;
  font-family: var(--font-display-2);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  padding: .6rem 1.15rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: var(--panel);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.chip:hover { color: var(--accent); border-color: var(--hair-2); }

/* ----------------------------------------------------------------------------
   11a) Pay-pills — two EQUAL payment options ("Картка … або … Крипта")
   ───────────────────────────────────────────────────────────────────────────
   A tasteful inline strip in the pricing header. (Previously UNSTYLED — the inner
   SVG icons had no size constraint and ballooned to the full container width,
   shoving the "Скрипт / Парсер" tier far down the page. This styles the strip and
   pins the icons to a fixed size so the section reads cleanly.)
---------------------------------------------------------------------------- */
.pay-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .75rem;
  margin-top: clamp(1.4rem, 2.6vw, 1.9rem);
}
.pay-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .5rem .95rem .5rem .65rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.pay-pill__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--lime-dim);
}
.pay-pill__ic svg { width: 17px; height: 17px; display: block; }   /* hard size cap → no balloon */
.pay-pill__txt {
  font-family: var(--font-display-2);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
}
.pay-pill__or {
  font-family: var(--font-display-2);
  font-size: .86rem;
  font-weight: 500;
  color: var(--muted-2);
  padding-inline: .15rem;
}

/* ----------------------------------------------------------------------------
   11) Pricing (clean cards, middle one elevated)
---------------------------------------------------------------------------- */
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;       /* tiers share equal heights per row */
}
.price {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;               /* equal-height pricing tiers per row */
  padding: var(--card-pad);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.price:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1.5px rgba(214, 41, 118, .5), var(--shadow-2);
  border-color: rgba(214, 41, 118, .32);
}
.price__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.2rem;
}
.price__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  color: var(--ink);
}
.price__amount {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 3.2rem);
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price__from {
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* timeline as a tidy inline chip → crisp, consistent with the cart's pill meta */
.price__term {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display-2);
  font-size: .88rem;
  color: var(--muted);
  margin-top: 1rem;
  padding: .34rem .7rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: var(--bg-2);
}
.price__term b { color: var(--ink); font-weight: 600; }
.price__list {
  display: grid;
  gap: .7rem;
  margin: 1.5rem 0 1.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.price__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.45;
}
.price__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--lime-dim);
  /* navy check mark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D62976' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.price .btn { margin-top: auto; }

/* Featured tier — denoted by a navy ring + elevation (NO scale transform, so it
   stays on the same baseline as its neighbours = pixel-even row). */
.price--feat {
  border-color: rgba(214, 41, 118, .4);
  box-shadow: var(--shadow-accent);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(214, 41, 118, .06), transparent 60%),
    var(--panel);
}
.price--feat:hover { box-shadow: var(--shadow-2), var(--shadow-accent); }
.price__badge {
  position: absolute;
  top: -12px;
  left: clamp(1.8rem, 3vw, 2.3rem);
  font-family: var(--font-display-2);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: .3rem .75rem;
  border-radius: 980px;
}

.price__note {
  margin-top: 1.8rem;
  font-family: var(--font-display-2);
  font-size: .9rem;
  color: var(--muted-2);
  text-align: center;
}

/* ----------------------------------------------------------------------------
   12) Crypto payment (light cards, QR on white, copy pills)
---------------------------------------------------------------------------- */
.pay-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .7rem;
  margin-bottom: clamp(2.2rem, 3.5vw, 3rem);
}
.pay-point {
  font-family: var(--font-display-2);
  font-size: .92rem;
  color: var(--ink);
  padding: .55rem 1rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: var(--panel);
}
.pay-point::before { content: "✓ "; color: var(--accent); font-weight: 700; }

.wallets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--flow);
  align-items: stretch;
}
.wallet {
  display: flex;
  flex-direction: column;
  min-width: 0;                      /* allow long addresses to ellipsis, not blow out the grid track */
  height: 100%;                      /* equal-height wallet cards per row */
  padding: var(--card-pad);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease;
}
.wallet:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.wallet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.wallet__net {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.wallet__chain {
  font-family: var(--font-display-2);
  font-size: .76rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--lime-dim);
  border-radius: 980px;
  padding: .2rem .55rem;
}
.wallet__qr {
  align-self: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  line-height: 0;
  margin-bottom: 1.1rem;
}
.wallet__qr .qr { width: 132px; height: 132px; image-rendering: pixelated; }
.wallet__label {
  font-family: var(--font-display-2);
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: -.005em;
  margin-bottom: .45rem;
}
.wallet__addr {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-top: auto;
}
.wallet__code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: .6rem .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: var(--bg-2);
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.copy svg { width: 16px; height: 16px; }
.copy:hover { border-color: var(--hair-2); background: #ededf0; }
.copy.is-done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.copy.is-done svg { color: var(--accent-ink); }

/* ----------------------------------------------------------------------------
   13) FAQ — asymmetric layout (sticky header | accordion), rotating chevron
---------------------------------------------------------------------------- */
.faq__layout { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.faq__layout .sec-head { margin-bottom: 0; }
.faq__ask { margin-top: 1rem; padding-left: 0; }
@media (min-width: 860px) {
  .faq__layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .faq__layout .sec-head { position: sticky; top: 92px; }
}
.faq {
  border-top: 1px solid var(--hair);
}
.faq__item {
  border-bottom: 1px solid var(--hair);
}
.faq__h { margin: 0; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.35rem .25rem;
  min-height: 60px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.7vw, 1.26rem);
  letter-spacing: -.015em;
  color: var(--ink);
  transition: color var(--dur-fast) ease;
}
.faq__q:hover { color: var(--accent); }
/* chevron that rotates open/closed */
.faq__icon {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  transition: transform var(--dur-fast) var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform var(--dur-fast) var(--ease);
}
.faq__icon::before { left: 0;  transform: rotate(45deg); }
.faq__icon::after  { right: 0; transform: rotate(-45deg); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }

.faq__a {
  overflow: hidden;
  color: var(--muted);
}
.faq__a > p { padding: 0 .25rem 1.5rem; max-width: 70ch; font-size: 1.04rem; line-height: 1.55; }

/* ----------------------------------------------------------------------------
   14) Order / final CTA
---------------------------------------------------------------------------- */
.section--order {
  background: var(--bg-2);
}
.order {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* children may shrink below content size (no mobile overflow) */
  gap: clamp(1.4rem, 3vw, 2rem);
  align-items: start;
}
.order__form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* fields shrink to the card, never overflow */
  gap: 1.1rem;
  padding: var(--card-pad);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.order__direct { min-width: 0; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field label {
  font-family: var(--font-display-2);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: .85rem 1rem;
  min-height: 48px;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(214, 41, 118, .12);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: rgba(200, 60, 40, .5); }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; }
.select-wrap__chev {
  position: absolute;
  right: 1.1rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.order__err { color: #c0392b; font-size: .9rem; font-family: var(--font-display-2); }
.order__hint { font-family: var(--font-display-2); font-size: .86rem; color: var(--muted-2); text-align: center; }

.order__direct-card {
  position: sticky;
  top: 76px;
  padding: var(--card-pad);
  border: 1px solid var(--hair);
  border-radius: var(--card-radius);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(214, 41, 118, .06), transparent 55%),
    var(--panel);
  box-shadow: var(--shadow-1);
}
.order__direct-kicker {
  margin-bottom: 1rem;
}
.order__direct-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.order__direct-handle {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--muted);
}

/* ----------------------------------------------------------------------------
   14b) Order — "КОНСТРУКТОР ЗАЯВКИ" : a playful, game-like project builder.
   Layout: one elevated card split into a stepped build console (left) and a live
   "assembly" panel (right) whose blocks light up & lock as the visitor fills the
   form. A playful progress bar with a live % + changing caption drives the flow.
   One column on phones; two on ≥920px. All motion is reduced-motion safe.
---------------------------------------------------------------------------- */
.builder {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--hair);
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--panel);
  box-shadow: var(--shadow-2);
  overflow: clip;
}
.builder__main {
  min-width: 0;
  padding: clamp(1.5rem, 3.6vw, 2.6rem);
}
.builder__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.3rem);
  padding: clamp(1.5rem, 3.6vw, 2.6rem);
  border-top: 1px solid var(--hair);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(214, 41, 118, .07), transparent 58%),
    var(--bg-2);
}

/* ---- Playful progress bar ---- */
.bprog { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.bprog__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .55rem;
}
.bprog__label {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.01em;
  color: var(--ink);
  min-width: 0;
}
.bprog__pct {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bprog__track {
  position: relative;
  height: 12px;
  border-radius: 980px;
  background: var(--bg-2);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.bprog__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 980px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--dur) var(--ease);
}
/* subtle moving sheen on the fill (paused/removed under reduced-motion) */
.bprog__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  animation: bprog-sheen 2.4s linear infinite;
}
@keyframes bprog-sheen { from { background-position: 200% 0; } to { background-position: -60% 0; } }
/* milestone notches sitting above the fill */
.bprog__node {
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--hair-2);
  transform: translateY(-50%);
  z-index: 1;
}
.bprog__steps {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .55rem;
}
.bprog__step {
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: -.005em;
  transition: color var(--dur-fast) var(--ease);
}
.bprog__step.is-active { color: var(--accent); }
.bprog__step.is-done { color: var(--ink); }
.bprog__step.is-done::before { content: "✓ "; color: var(--accent); }

/* ---- Stepped form ---- */
.builder__form { min-width: 0; }
.ostep {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 1.05rem;
}
.ostep[hidden] { display: none; }
.ostep.is-active:not([hidden]) { animation: ostep-in var(--dur) var(--ease) both; }
@keyframes ostep-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.ostep__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  padding: 0;
  margin-bottom: .2rem;
}
.ostep__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(214, 41, 118, .1);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
}
.ostep__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  letter-spacing: -.02em;
  color: var(--ink);
}
.ostep__hint {
  flex-basis: 100%;
  font-family: var(--font-display-2);
  font-size: .9rem;
  color: var(--muted);
}

/* optional-field chip next to a label */
.field__opt {
  margin-left: .5rem;
  font-family: var(--font-display-2);
  font-size: .76rem;
  font-weight: 500;
  color: var(--muted-2);
  background: var(--bg-2);
  border: 1px solid var(--hair);
  padding: .05rem .5rem;
  border-radius: 980px;
  vertical-align: middle;
}

/* ---- Service tiles (step 2) — bigger, game-like selectable cards ---- */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  min-width: 0;
  min-height: 104px;
  padding: 1rem 1rem .95rem;
  border: 1.5px solid var(--hair);
  border-radius: 18px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
.tile input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.tile__ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--accent);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.tile__ic svg { width: 22px; height: 22px; }
.tile__t {
  font-family: var(--font-display-2);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.25;
  min-width: 0;
}
/* the "locked-in" check chip (top-right) */
.tile__check {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--hair-2);
  background: var(--panel);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tile__check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.tile--wide .tile__check { top: 50%; transform: translateY(-50%) scale(.6); }
.tile:hover { border-color: var(--hair-2); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.tile:hover .tile__ic { transform: scale(1.05) rotate(-3deg); }
/* checked / "snapped into place" state */
.tile:has(input:checked) {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(214, 41, 118, .1), var(--shadow-1);
  animation: tile-pop var(--dur-fast) var(--ease);
}
@keyframes tile-pop {
  0% { transform: scale(.98); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.tile:has(input:checked) .tile__ic {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.tile:has(input:checked) .tile__check {
  opacity: 1;
  transform: scale(1);
  border-color: var(--accent);
  background: var(--accent);
}
.tile--wide:has(input:checked) .tile__check { transform: translateY(-50%) scale(1); }
/* keyboard focus ring on the tile */
.tile:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Controls row ---- */
.builder__controls {
  display: flex;
  flex-wrap: wrap;            /* never force a single row wider than the card */
  gap: .8rem;
  margin-top: .4rem;
}
.builder__back { flex: 0 0 auto; }
.builder__next,
.builder__submit { flex: 1 1 auto; }
.builder__submit {
  white-space: normal;
  min-width: 0;
  line-height: 1.2;
  padding-block: .6rem;      /* comfortable height if the label ever wraps */
}
/* Narrow phones: stack the controls full-width so Back + Submit never overflow. */
@media (max-width: 460px) {
  .builder__controls { flex-direction: column; align-items: stretch; }
  .builder__back,
  .builder__next,
  .builder__submit { width: 100%; flex: 1 1 auto; }
}

/* ---- Success state (revealed after submit) ---- */
.builder__done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .9rem;
  padding: clamp(.5rem, 2vw, 1.5rem) 0 .4rem;
  animation: ostep-in var(--dur) var(--ease) both;
}
.builder__done-burst {
  display: inline-flex;
  color: var(--accent);
  width: 72px; height: 72px;
}
.builder__done-burst svg { width: 100%; height: 100%; }
.builder__done-ring {
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: done-ring .6s var(--ease) forwards;
}
.builder__done-tick {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: done-tick .35s var(--ease) .45s forwards;
}
@keyframes done-ring { to { stroke-dashoffset: 0; } }
@keyframes done-tick { to { stroke-dashoffset: 0; } }
.builder__done-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  color: var(--ink);
}
.builder__done-text {
  font-family: var(--font-display-2);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}
.builder__done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: .3rem;
}

/* ---- Live "assembly" panel (right pane) ---- */
.assembly {
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  background: #16181d;          /* dark surface for crisp contrast */
  box-shadow: var(--shadow-1);
}
.assembly__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .8rem 1rem;
  background: #20242b;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.assembly__chip {
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #e8ebf0;
}
.assembly__count {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #7f8794;
  font-variant-numeric: tabular-nums;
}
.assembly__count b { color: #7fd4a3; font-weight: 600; }
.assembly__stack {
  display: grid;
  gap: .55rem;
  padding: 1rem;
}
.asm {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .7rem .8rem;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .015);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.asm__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: #6c7480;
  font-size: .95rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.asm__body { display: grid; gap: .1rem; min-width: 0; }
.asm__key {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7f8794;
}
.asm__val {
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.4;
  color: #e8ebf0;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease);
}
.asm__val.is-empty { color: #565d68; }
.asm--task .asm__val { white-space: pre-wrap; }
/* the little "lock" dot on the right, lit when the block is filled */
.asm__lock {
  flex: 0 0 auto;
  margin-left: auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* filled / "locked-in" block */
.asm.is-filled {
  border-style: solid;
  border-color: rgba(127, 212, 163, .4);
  background: rgba(127, 212, 163, .06);
}
.asm.is-filled .asm__ico { background: rgba(127, 212, 163, .16); color: #7fd4a3; }
.asm.is-filled .asm__lock { background: #7fd4a3; box-shadow: 0 0 0 4px rgba(127, 212, 163, .15); }
/* brief pop when a block locks in (JS toggles .just-locked) */
.asm.just-locked { animation: asm-lock var(--dur-fast) var(--ease); }
@keyframes asm-lock {
  0% { transform: scale(1); }
  45% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.assembly__foot {
  margin: 0 1rem 1rem;
  font-family: var(--font-display-2);
  font-size: .84rem;
  line-height: 1.45;
  color: #7f8794;
}

/* Legacy aliases kept so any stray reference still resolves harmlessly. */
.brief__val { color: #e8ebf0; transition: color var(--dur-fast) var(--ease); }
.brief__val.is-empty { color: #565d68; }

/* Secondary Telegram fallback line */
.builder__alt {
  text-align: center;
  font-family: var(--font-display-2);
  font-size: .92rem;
  color: var(--muted);
}
.builder__alt-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.builder__alt-link:hover { color: var(--accent-2); }

/* ≥ 920px : two-up builder (console | assembly) */
@media (min-width: 920px) {
  .builder { grid-template-columns: 1.12fr .88fr; }
  .builder__aside {
    border-top: 0;
    border-left: 1px solid var(--hair);
  }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------------
   15) Footer (light #f5f5f7, small muted links)
---------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--hair);
  padding-top: clamp(3rem, 5vw, 4rem);
  padding-bottom: 2rem;
  background: var(--bg-2);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 2.4rem);
  padding-bottom: clamp(2.2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hair);
}
.footer__tag {
  margin-top: 1rem;
  color: var(--muted);
  font-size: .98rem;
  max-width: 30ch;
}
.footer__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: .7rem 2.5rem; align-content: start; }
.footer__nav a {
  font-family: var(--font-display-2);
  font-size: .92rem;
  color: var(--muted);
  transition: color var(--dur-fast) ease;
}
.footer__nav a:hover { color: var(--accent); }
.footer__cta { display: grid; gap: 1.1rem; align-content: start; }
.footer__coins { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer__coins li {
  font-family: var(--font-display-2);
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  padding: .3rem .7rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  padding-top: 1.6rem;
}
.footer__copy, .footer__cheeky {
  font-family: var(--font-display-2);
  font-size: .86rem;
  color: var(--muted-2);
}
/* Kept for the legal/ pages, which share this stylesheet and still use it. */
.footer__cheeky { color: var(--muted); }
/* Legal links (Terms · Privacy · Cookies) — pages live in legal/ */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
}
.footer__legal a {
  position: relative;
  font-family: var(--font-display-2);
  font-size: .86rem;
  color: var(--muted);
  transition: color var(--dur-fast) ease;
}
.footer__legal a:hover { color: var(--accent); }
/* hairline dot separators between legal links */
.footer__legal a + a::before {
  content: "·";
  position: absolute;
  left: -.6rem;
  color: var(--muted-2);
  opacity: .7;
}
.footer__top {
  font-family: var(--font-display-2);
  font-size: .88rem;
  color: var(--muted);
  transition: color var(--dur-fast) ease;
}
.footer__top:hover { color: var(--accent); }

/* ----------------------------------------------------------------------------
   15b) STICKY BUILD-BAR — «Конструктор-кошик»
   A fixed bottom bar mirroring the build chosen via the service BUILD TILES.
   Hidden until the visitor reaches #services (app.js adds .is-visible). On wide
   screens it's a full bar with an inline panel; on phones it collapses to a
   compact pill that expands (.is-expanded) into an accessible panel.
   z-index sits above page content + the sticky nav (50) but below the cookie
   banner (90) and toast (100). prefers-reduced-motion neutralises the slide.
---------------------------------------------------------------------------- */
.buildbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  /* hidden off-screen until revealed; translate keeps it out of the a11y/scroll
     flow visually while [hidden] (set by JS until services is reached) removes
     it entirely from the tree. */
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
  /* never let the bar itself create a horizontal scrollbar */
  max-width: 100vw;
  /* safe-area for notched phones */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--hair);
  box-shadow: 0 -2px 0 rgba(16, 24, 40, .03), 0 -16px 40px -22px rgba(16, 24, 40, .35);
}
.buildbar[hidden] { display: none; }
.buildbar.is-visible { transform: translateY(0); }

/* While the cookie banner is open (first visit), lift the build-bar above it so
   the two bottom-pinned elements never overlap. The banner stacks taller on
   phones than on desktop, so the lift is larger on small screens. JS adds
   body.cookie-open while the banner is visible and removes it on a choice. */
/* The lift uses --cookie-lift (set by the cookie module to the banner's exact
   footprint from the viewport bottom + a small gap), so a taller multi-block
   cart never overlaps the banner. The fixed values are a pre-measurement
   fallback for the first frame / no-JS. */
body.cookie-open .buildbar.is-visible { transform: translateY(calc(-1 * var(--cookie-lift, 228px))); }
@media (min-width: 620px) {
  body.cookie-open .buildbar.is-visible { transform: translateY(calc(-1 * var(--cookie-lift, 104px))); }
}

/* Reserve space at the bottom of the page so the fixed bar never permanently
   covers content (the footer / last section stays reachable). JS adds
   .has-buildbar to <body> once the bar is shown and sets --buildbar-h to the
   measured bar height; we pad by that plus a small gap. The fallback keeps a
   sensible reserve before the first measurement. */
body.has-buildbar { padding-bottom: calc(var(--buildbar-h, 84px) + 12px); }

.buildbar__wrap {
  /* a touch tighter vertical padding than .wrap default; horizontal from .wrap */
  padding-top: .7rem;
  padding-bottom: .7rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ---- selected-block chips (own row above the bar) ---- */
.buildbar__chips-row { min-width: 0; }
.buildbar__chips-row[hidden] { display: none; }
.buildbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}
.buildbar__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  padding: .3rem .35rem .3rem .7rem;
  border: 1px solid var(--hair);
  border-radius: 980px;
  background: var(--panel);
  font-family: var(--font-display-2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  animation: build-chip-in var(--dur-fast) var(--ease);
}
.buildbar__chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buildbar__chip-price { color: var(--muted); font-variant-numeric: tabular-nums; }
/* remove (×) button on each chip */
.buildbar__chip-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.buildbar__chip-x:hover { background: var(--accent); color: var(--accent-ink); }
.buildbar__chip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes build-chip-in {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---- the always-visible bar row ---- */
.buildbar__bar {
  display: flex;
  align-items: center;
  gap: .8rem 1rem;
  min-width: 0;
}

/* LEFT summary — also the collapse/expand toggle on phones */
.buildbar__summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  padding: .25rem;
  margin: -.25rem;          /* keep visual flush while giving a tap target */
  border-radius: 14px;
  color: var(--ink);
}
.buildbar__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.buildbar__ic {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--lime-dim);
  color: var(--accent);
}
.buildbar__ic svg { width: 22px; height: 22px; }
.buildbar__badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 4px;
  border-radius: 980px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--bg);
  font-family: var(--font-display-2);
  font-size: .68rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.buildbar__summary-text { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.buildbar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.1;
}
.buildbar__meta {
  font-family: var(--font-display-2);
  font-size: .82rem;
  letter-spacing: -.005em;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* chevron that flips when the panel is open (phones) */
.buildbar__chev {
  flex: none;
  width: 11px; height: 11px;
  margin-left: .1rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-135deg);      /* points up = "expand" */
  transition: transform var(--dur-fast) var(--ease);
}
.buildbar__summary[aria-expanded="true"] .buildbar__chev { transform: rotate(45deg); }

/* RIGHT end — live total + CTA */
.buildbar__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: .7rem 1rem;
}
.buildbar__total {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  min-width: 0;
}
.buildbar__total-pre {
  font-family: var(--font-display-2);
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.buildbar__total-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  letter-spacing: -.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.buildbar__cta { --btn-h: 46px; flex: none; }
.buildbar__cta[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- expandable panel (block list, facts, CTA note) ---- */
.buildbar__panel {
  min-width: 0;
  overflow: hidden;
}
.buildbar__panel-inner {
  display: grid;
  gap: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
}
.buildbar__list { display: grid; gap: .45rem; min-width: 0; }
.buildbar__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  min-width: 0;
  font-family: var(--font-display-2);
  font-size: .94rem;
  color: var(--ink);
}
.buildbar__line-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buildbar__line-price { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.buildbar__empty {
  font-family: var(--font-display-2);
  font-size: .92rem;
  color: var(--muted);
}
.buildbar__empty[hidden] { display: none; }

.buildbar__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
}
.buildbar__fact { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: 0; }
.buildbar__fact-k {
  font-family: var(--font-display-2);
  font-size: .88rem;
  color: var(--muted);
  margin: 0;
}
.buildbar__fact-v {
  font-family: var(--font-display-2);
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.buildbar__avail { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.buildbar__panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  justify-content: space-between;
}
.buildbar__clear {
  font-family: var(--font-display-2);
  font-size: .86rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 36px;
  padding: 0 .2rem;
  transition: color var(--dur-fast) ease;
}
.buildbar__clear:hover { color: var(--accent); }
.buildbar__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.buildbar__clear[hidden] { display: none; }
.buildbar__note {
  flex: 1 1 16ch;
  min-width: 0;
  font-family: var(--font-display-2);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted-2);
}

/* ====== PHONE (collapsed-by-default pill) : panel toggles via .is-expanded ===
   Below 760px the panel is hidden until the bar is expanded; the chevron + the
   whole summary act as the toggle. The chips row is hidden when collapsed so the
   pill stays compact and never blocks content. */
@media (max-width: 759px) {
  .buildbar__wrap { gap: 0; }
  /* keep the bar compact when collapsed */
  .buildbar:not(.is-expanded) .buildbar__chips-row { display: none; }
  .buildbar__panel {
    max-height: 0;
    opacity: 0;
    transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .buildbar.is-expanded .buildbar__panel {
    max-height: 70vh;
    overflow-y: auto;
    opacity: 1;
  }
  /* a slim gap so the panel doesn't butt against the bar when open */
  .buildbar.is-expanded .buildbar__wrap { gap: .2rem; }
  /* On phones the total can get tight next to the CTA — let the CTA shrink text,
     never wrap the row into overflow. */
  .buildbar__cta { --btn-h: 44px; padding-inline: 1.1rem; }
  .buildbar__total-pre { display: none; }     /* keep just the number on the pill */
}

/* Very narrow phones: ensure the bar row never overflows — allow the summary
   meta to truncate and keep the total + CTA on one compact line. */
@media (max-width: 380px) {
  .buildbar__bar { gap: .6rem; }
  .buildbar__end { gap: .5rem; }
  .buildbar__ic { width: 38px; height: 38px; }
  .buildbar__cta { padding-inline: .95rem; font-size: .96rem; }
}

/* ====== TABLET / DESKTOP (≥760px) : full inline bar, panel always open ======
   The expand/collapse toggle is irrelevant here, so the chevron is hidden and
   the summary is a plain (non-interactive-looking) label; the panel content
   lays out in a tidy row. */
@media (min-width: 760px) {
  .buildbar__chev { display: none; }
  /* summary is no longer the toggle on desktop — keep it readable, not button-y */
  .buildbar__summary { cursor: default; pointer-events: none; }
  .buildbar__panel {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
  .buildbar__panel-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.4rem 2.2rem;
  }
  /* block list takes the left column; facts sit on the right as an inline row */
  .buildbar__list { grid-column: 1; }
  .buildbar__facts {
    grid-column: 2;
    grid-auto-flow: column;
    grid-template-columns: none;
    align-items: center;
    gap: 1.6rem;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--hair);
    padding-left: 2.2rem;
  }
  .buildbar__fact { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .buildbar__fact-v { text-align: left; }
  .buildbar__panel-actions { grid-column: 1 / -1; }
}

/* On really wide bars, cap the note so the actions row stays balanced. */
@media (min-width: 1100px) {
  .buildbar__note { max-width: 52ch; flex: 0 1 52ch; }
}

/* ----------------------------------------------------------------------------
   16) Toast (navy pill)
---------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  max-width: calc(100vw - 2rem);
  padding: .85rem 1.3rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display-2);
  font-size: .92rem;
  font-weight: 500;
  border-radius: 980px;
  box-shadow: 0 16px 40px -12px rgba(214, 41, 118, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------------------------------------------
   16b) Cookie consent — trilingual banner (frosted card, bottom of viewport)
   Shows once on first visit; choice persisted in localStorage ("np_cookie").
   Always above content (z above nav); respects prefers-reduced-motion.
---------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2.5vw, 24px);
  z-index: 90;
  width: min(720px, calc(100vw - 2rem));
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cookie[hidden] { display: none; }
.cookie.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cookie__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.2rem, 2.4vw, 1.6rem);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}
.cookie__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .3rem;
}
.cookie__text {
  font-family: var(--font-display-2);
  font-size: .92rem;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--muted);
  max-width: 60ch;
}
.cookie__more {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cookie__more:hover { color: var(--accent-2); }
.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
/* The consent buttons are real, frequently-tapped targets — guarantee a ≥44px
   touch height (the base .btn--sm pill is 36px). Desktop keeps the compact pill. */
.cookie__btn { flex: 1 1 auto; --btn-h: 44px; }
@media (hover: hover) and (pointer: fine) and (min-width: 620px) {
  .cookie__btn { --btn-h: 36px; }
}
/* Tablet+: text and actions sit side by side, actions stay compact on the right */
@media (min-width: 620px) {
  .cookie__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
  }
  .cookie__actions { flex: none; flex-wrap: nowrap; }
  .cookie__btn { flex: none; }
}

/* ----------------------------------------------------------------------------
   17) Scroll-reveal — Apple-eased fade + translateY
---------------------------------------------------------------------------- */
/* Shared by the homepage (app.js) AND the work/ case pages (their own inline
   script) — both add .is-in via IntersectionObserver. Keep this unscoped so a
   change here never desyncs the two. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------------
   18) Responsive — progressive enhancement upward
---------------------------------------------------------------------------- */

/* ≤ 480px : phone refinements — full-width CTAs, comfortable tap targets */
@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__cta .link-chev { justify-content: center; }
  /* Hero proof row: let the social-proof line use the full width under the avatars
     so it never gets squeezed on a 360px screen. */
  .hero__proof-text { max-width: none; }
}

/* Touch tap targets ≥44px for compact footer links on coarse pointers.
   Covers the whole phone+tablet range where the burger nav is shown (the inline
   desktop nav, and mouse-precision footer, only appear at ≥880px). This closes
   the 761–879px gap where footer links used to sit at ~21–23px tall. */
@media (max-width: 879px) {
  .footer__nav a,
  .footer__legal a,
  .footer__top {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* keep the legal-link hairline dots vertically centred with the taller links */
  .footer__legal { gap: .2rem 1.1rem; }
}

/* ≥ 521px : two-up grids start (single column at ≤ 520px, per spec) */
@media (min-width: 521px) {
  .bento   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case--feat { grid-column: 1 / -1; }              /* flagship spans the 2-up row */
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__nav { grid-template-columns: repeat(3, max-content); }
}

/* ≥ 760px : richer layouts (grids). The desktop NAV itself is revealed later
   (≥ 880px) — at 760–879px the full brand + 6 links + lang toggle + CTA do not
   fit on one line and used to overflow ~44px, so the burger menu is kept until
   there is genuinely room for the inline nav. */
@media (min-width: 760px) {
  .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Trust band → horizontal 4-up with hairline separators */
  .trust-band { grid-template-columns: repeat(4, 1fr); }
  .trust-band__item { border-top: 0; border-left: 1px solid var(--hair); }
  .trust-band__item:first-child { border-left: 0; }

  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__nav { grid-template-columns: repeat(2, max-content); }
}

/* ≥ 880px : reveal the inline desktop nav (brand + links + lang + CTA). Below
   this width the burger menu is used so the header never overflows. */
@media (min-width: 880px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-menu { display: none !important; }
}

/* ≥ 901px : bento & cases go 3-up (1 col ≤520, 2 col ≤900, 3 col desktop).
   Every card on a row shares the same baseline & height (grid stretch). */
@media (min-width: 901px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case--feat { grid-column: auto; }               /* sits inline in the 3-up row */
  .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order { grid-template-columns: 1.25fr .9fr; }
}

/* ≥ 1100px */
@media (min-width: 1100px) {
  .wallets { grid-template-columns: repeat(4, 1fr); }
}


/* ----------------------------------------------------------------------------
   19) Reduced motion — disable typing/marquee/reveals
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* width:auto lets flex-wrap actually wrap (the base rule pins it to max-content,
     which would otherwise force a single clipped row). Chips wrap to a centred,
     full-width static grid — no animation, no gap, no clipped edge. */
  .marquee__track { animation: none !important; transform: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  /* Order builder: kill the decorative motion, keep all state changes legible.
     The progress fill still resizes (it just snaps), tiles/blocks still light up. */
  .bprog__fill::after { animation: none !important; }
  .builder__done-ring,
  .builder__done-tick { animation: none !important; stroke-dashoffset: 0 !important; }
  .tile:has(input:checked),
  .asm.just-locked,
  .ostep.is-active:not([hidden]) { animation: none !important; }
  /* Pick-path + proof band: no live-dot pulse, no highlight pulse — but the
     highlight STATE (ring + dim) still applies so the choice stays legible.
     Count-up numbers are written to their final value immediately by app.js. */
  .card.is-picked.pick-pulse,
  .case.is-picked.pick-pulse { animation: none !important; }
  /* Build-bar: no decorative pulse / pop / chip-in; the bar still appears and
     every state (selected ring, total, chips) stays fully legible. The slide-in
     transform is already neutralised by the global transition-duration override,
     so .is-visible simply snaps the bar into place. */
  .card.build-pop { animation: none !important; }
  .buildbar__chip { animation: none !important; }
  /* Portfolio playlist (module 14): no preview iframe is mounted under R-M (the
     ▶ opens the demo in a new tab), so just kill the loading shimmer + the
     highlight pulse. The .is-picked ring/dim STATE still applies. */
  .pl__frame::before { animation: none !important; display: none !important; }
  .pl__item.is-picked.pick-pulse { animation: none !important; }

  /* ── HERO product scene + kinetic divider — degrade to a clean STATIC premium
     state. The aurora halo settles still; the device keeps its tasteful tilt but
     stops bobbing; the docked card, chips and tag sit put. Fully legible. ── */
  .hero__aurora { animation: none !important; transform: translate3d(-2%, -1%, 0) scale(1.03); }
  .device { animation: none !important; transform: rotate(-2.4deg); }
  .scene__book,
  .scene__chip,
  .scene__tag { animation: none !important; }
  /* Kinetic divider → a still gradient band; the duplicate unit is harmless. */
  .ticker { animation: none !important; background-position: 0 0; }
  .ticker__track { animation: none !important; transform: none !important; }
}

/* ----------------------------------------------------------------------------
   20) Print — clean, ink-friendly
---------------------------------------------------------------------------- */
@media print {
  .nav, .mobile-menu, .toast, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.2rem; }
}