/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --bg: #151311;
  --hcard: #131312;
  --card: #2f2a27;          /* CTA marquee */
  --card-text: #181614;     /* hero text card */
  --card-stat: #2a2724;
  --glass: rgba(38, 33, 36, .55);

  --text: #f3efe9;
  --text-soft: #c9c4bd;
  --muted: #8d8882;
  --marquee-text: #6c6560;

  --yellow: #f4e89a;
  --yellow-hover: #f9f0b4;   /* hover state of yellow surfaces only */
  --ink: #1b1a14;

  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .5);

  /* Radius scale: 12 small · 20 cards · 28 sections/panels · 999 pills.
     Nested element = parent radius minus the padding between them. */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  /* The only shadow: for things floating above the page (panels, popovers) */
  --shadow-float: 0 24px 64px rgba(0, 0, 0, .5);
  --gap: 10px;
  --pad: clamp(10px, 1.4vw, 22px);
  --left: 41%;
  /* Content never gets wider than this, so on wide monitors the eye doesn't
     have to travel edge to edge. --side = gap from the screen edge to the
     content (for fixed panels). */
  --page-max: 1480px;
  --side: calc(max(0px, (100% - var(--page-max)) / 2) + var(--pad));
  /* --hp: 0 → 1 as the page scrolls (set by main.js on <html>) */
  --hp: 0;
  --header-h: calc(58px - 10px * var(--hp));

  --font: "Onest", system-ui, sans-serif;   /* everything you read */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;   /* headings and numbers */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* no browser tap flash (Android draws a blue box over whatever is tapped);
   our own controls show the press themselves */
html { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, p { margin: 0; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--pad);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: var(--pad);
  z-index: 20;
  display: grid;
  grid-template-columns: var(--left) 1fr;
  gap: var(--gap);
  width: 100%;
  /* narrows from full width to 1000px, step by step with the scroll */
  max-width: calc(100% - var(--hp) * (100% - min(1000px, 100%)));
  margin-inline: auto;
  height: var(--header-h);
}
/* Fade behind the header so content scrolling underneath doesn't show
   through the gaps between the header cards. */
.site-header::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: -1;
  height: calc(var(--pad) + var(--header-h) + 22px);
  background: linear-gradient(to bottom, rgba(21, 19, 17, .97) 62%, rgba(21, 19, 17, 0));
  opacity: var(--hp);
  pointer-events: none;
}
.site-header .hcard { transition: border-color .3s, background-color .3s; }

.site-header__group { display: flex; gap: var(--gap); min-width: 0; }

.hcard {
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--hcard);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: border-color .3s, background-color .3s;
}

/* Menu button */
.menu-btn {
  gap: 12px;
  padding: 0 22px;
  font-weight: 500;
  flex: none;
}
.menu-btn:hover,
.menu-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .3); }

.menu-btn__dots {
  position: relative;
  width: 12px;
  height: 12px;
  transition: transform .5s var(--ease);
}
.menu-btn__dots i {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.menu-btn__dots i:nth-child(1) { left: 0;   top: 1px; }
.menu-btn__dots i:nth-child(2) { right: 0;  top: 0; }
.menu-btn__dots i:nth-child(3) { left: 1px; bottom: 0; }
.menu-btn__dots i:nth-child(4) { right: 1px; bottom: 1px; }
.menu-btn:hover .menu-btn__dots { transform: rotate(90deg); }
.menu-btn[aria-expanded="true"] .menu-btn__dots { transform: rotate(45deg) scale(1.1); }

/* Search */
.search {
  flex: 1;
  min-width: 0;
  gap: 12px;
  padding: 0 22px;
}
.search:focus-within { border-color: rgba(255, 255, 255, .3); }
.search__icon {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: 0;
  font-size: 13px;
  letter-spacing: .03em;
  cursor: text;
}
.search input::placeholder { color: var(--muted); text-transform: uppercase; opacity: 1; }
.search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

/* Nav */
.nav {
  flex: 1;
  justify-content: space-around;
  padding: 0 12px;
}
.nav a {
  position: relative;
  padding: 8px 10px;
  color: var(--text);
  transition: color .3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 1px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--yellow); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Home icon + the sliding square. A yellow rounded square, like the language
   buttons, sits on the current item and slides to the next one; main.js
   draws the slide (--nl/--nr = its edges). The labels under it turn dark
   exactly where it covers them: an ink copy of the labels (.nav__ink) is
   clipped to the same edges. */
@property --nl { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --nr { syntax: "<length>"; inherits: true; initial-value: 0px; }
.nav {
  --ph: min(40px, calc(var(--header-h) - 10px));   /* the square's height */
  position: relative;
  isolation: isolate;
}
/* items as tall as the square: the whole square is the item under the cursor */
.nav a { z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--ph); }
.nav__home {
  display: grid;
  place-items: center;
  width: var(--ph);
  height: var(--ph);
  padding: 0 !important;
  border-radius: 10px;
}
.nav__home::after { display: none; }
/* a flat, soft house: rounded roof and corners, the door cut out as an arch */
.nav__house {
  width: 20px; height: 20px;
  fill: currentColor;
  transition: transform .5s var(--spring);
}
.nav__home:hover .nav__house { transform: translateY(-2px); }
.nav a.is-current { color: var(--text); }
.nav a.is-current::after { transform: scaleX(0) !important; }
.nav__pill,
.nav__ink { position: absolute; pointer-events: none; opacity: 0; transition: opacity .3s; }
.nav.has-pill :is(.nav__pill, .nav__ink) { opacity: 1; }
.nav__pill {
  z-index: 2;
  top: 50%;
  left: var(--nl);
  width: calc(var(--nr) - var(--nl));
  height: var(--ph);
  margin-top: calc(var(--ph) / -2);
  border-radius: 10px;
  background: var(--yellow);
}
.nav__ink {
  z-index: 3;
  inset: 0;
  color: var(--ink);
  clip-path: inset(calc(50% - var(--ph) / 2) calc(100% - var(--nr)) calc(50% - var(--ph) / 2) var(--nl) round 10px);
}
.nav__ink > span { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.nav__ink { -webkit-user-select: none; user-select: none; }
.nav__ink > span[data-label]::before { content: attr(data-label); }
/* Windows high contrast: the square keeps its shape in system colours */
@media (forced-colors: active) {
  .nav__pill { forced-color-adjust: none; background: Highlight; }
  .nav__ink { forced-color-adjust: none; color: HighlightText; }
}
.nav:has(a.is-current:focus-visible) .nav__pill { outline: 2px solid var(--yellow); outline-offset: 3px; }
.nav a.is-current:focus-visible { outline: none; }
.nav:has(.nav__home:hover) .nav__ink .nav__house { transform: translateY(-2px); }
/* the press: a ring opens where the click landed */
.nav__ripple {
  position: absolute;
  z-index: 4;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  pointer-events: none;
  animation: nav-ripple .6s var(--ease) forwards;
}
@keyframes nav-ripple {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(4.6); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__ripple { display: none; }
}
/* the same wave wherever a click does something (main.js, one fixed layer) */
.tap-rings { position: fixed; inset: 0; z-index: 99; overflow: hidden; pointer-events: none; }
.tap-ring {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 1.5px solid var(--yellow);
  border-radius: 50%;
  animation: nav-ripple .6s var(--ease) forwards;
}
.tap-ring--ink { border-color: var(--ink); }   /* on a yellow or light surface */
@media (prefers-reduced-motion: reduce) {
  .tap-rings { display: none; }
}

/* in-page links land under the header, not behind it */
main > section[id] { scroll-margin-top: calc(var(--pad) + var(--header-h) + 14px); }
main > section[tabindex="-1"]:focus { outline: none; }

/* Without JS there is no square: the current page keeps a plain yellow mark */
html:not(.js) .nav a[aria-current="page"] { border-radius: 10px; background: var(--yellow); color: var(--ink); }
html:not(.js) .nav a[aria-current="page"]::after { display: none; }

/* Language */
.lang {
  flex: none;
  gap: 2px;
  padding: 0 6px;
}
.lang button {
  height: 40px;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--muted);
  letter-spacing: .05em;
  transition: color .3s, background-color .3s;
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { color: var(--ink); background: var(--yellow); }

/* ==========================================================================
   Hero
   ========================================================================== */
main { flex: 1; display: flex; flex-direction: column; gap: var(--gap); }

.hero {
  position: relative;
  flex: none;
  min-width: 0;   /* the marquee track is max-content wide; don't let it widen the page */
  display: grid;
  grid-template-columns: var(--left) 1fr;
  gap: var(--gap);
  /* first screen = viewport minus the (expanded) header */
  height: calc(100vh - var(--pad) * 2 - 58px - var(--gap));
  height: calc(100svh - var(--pad) * 2 - 58px - var(--gap));
  min-height: 520px;
}

/* Video */
.hero__media {
  position: absolute;
  inset: 0 0 0 calc(var(--left) + var(--gap));
  z-index: 0;
  overflow: hidden;
}
.hero__media-inner {
  position: absolute;
  inset: -2%;
  will-change: transform;
}
.hero__field {
  display: block;
  width: 100%;
  height: 100%;
}
/* the phase of the dot field, bottom left of the picture (field.js) */
.hero__phases {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2.6vw, 40px);
  bottom: clamp(16px, 3vh, 34px);
  width: min(26em, 70%);
  pointer-events: none;
}
.hero__phase {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.hero__phase.is-on { opacity: 1; transform: none; transition-delay: .15s; }
.hero__phase b {
  font: 400 clamp(17px, 1.4vw, 22px)/1.1 var(--font-display);
  color: var(--text);
}
.hero__phase span {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-soft);
  text-wrap: balance;
}
/* Soft edges: page-coloured gradients painted over the video. (A mask-image on
   the video plus the scroll clip-path made Chrome drop the video layer.) */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0, rgba(21, 19, 17, 0) 14%),
    linear-gradient(to bottom, var(--bg) 0, rgba(21, 19, 17, 0) 10%, rgba(21, 19, 17, 0) 88%, var(--bg) 100%);
}

/* Left column */
.hero__col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

/* CTA marquee */
.cta-marquee {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 clamp(120px, 21vh, 210px);
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  color: var(--marquee-text);
  font-size: clamp(38px, 4.2vw, 68px);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.cta-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}
.cta-marquee__group { display: flex; align-items: center; flex: none; }
.cta-marquee__item { display: inline-flex; align-items: center; gap: .32em; padding-right: .32em; }

.cta-marquee__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.12em;
  height: .6em;
  border: 1.5px dashed currentColor;
  border-radius: 999px;
  opacity: .9;
  transition: border-color .6s var(--ease);
}
.cta-marquee__arrow svg {
  width: .42em; height: .42em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-marquee:hover,
.cta-marquee:focus-visible { background: var(--yellow); color: #948c5d; }
.cta-marquee:hover .cta-marquee__arrow,
.cta-marquee:focus-visible .cta-marquee__arrow { color: var(--ink); border-color: var(--ink); }

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Text card */
.hero__card {
  container-type: inline-size;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.7vw, 44px);
  background: var(--card-text);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  min-height: 0;
}

.hero__title {
  /* The slogan is set in four fixed lines. Its size follows the card's own
     width (cqi), so the longest line ("your sales team") never wraps, and the
     screen height, so the card stays above the fold. */
  font-size: clamp(30px, min(10.4cqi, 6.4vh), 72px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--text);
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}
.hero__title .line > span { display: block; }

.hero__lead {
  max-width: 32em;
  margin-top: clamp(18px, 2.2vw, 30px);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
/* Marker highlight, as in the concept video: the yellow runs along the
   marked words line after line at one speed, its tip rounded; where two lines
   meet they join into one ribbon with soft inner curves. main.js draws the
   shape in .hl behind the text (pieces + concave corner pieces, no filter).
   The words turn dark exactly where the yellow has passed: the gradient below
   runs over all lines as one strip (box-decoration-break: slice). */
.hero__lead { position: relative; isolation: isolate; }
.hero__lead mark {
  padding: 0;
  background: linear-gradient(90deg, var(--ink) 50%, var(--muted) 50%) 0 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* each line is revealed left → right by a clip with a rounded leading edge;
   at rest the clip's rounded corners sit outside the piece */
.hl i {
  position: absolute;
  background: var(--yellow);
  clip-path: inset(0 -10px 0 0 round 0 7px 7px 0);
  transition: clip-path var(--t, .4s) linear var(--d, 0s);
}
/* the soft inner curves where two lines join (see main.js) */
.hl b { position: absolute; transition: opacity .25s var(--ease) var(--d, 0s); }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px));
  gap: var(--gap);
  margin-top: auto;
  padding-top: 28px;
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 132px;
  padding: 16px 18px;
  background: var(--card-stat);
  border-radius: var(--radius);
}
.stat__num {
  font-size: clamp(28px, 2.3vw, 36px);
  font-weight: 300;
  line-height: 1;
  color: var(--yellow);
}
.stat__label {
  align-self: flex-end;
  text-align: right;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-soft);
}

/* Trust card */
.trust {
  position: absolute;
  top: clamp(14px, 2.2vw, 34px);
  right: clamp(14px, 2.6vw, 44px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  width: 262px;
  padding: 18px 18px 20px;
  background: var(--glass);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
}
.trust__people { display: flex; align-items: center; }
.avatar {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-right: -9px;
  border: 2px solid #f1ede7;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* client marks, already composed on their round background (assets/clients/avatar-*) */
.avatar { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar--plus {
  margin: 0 0 0 16px;
  border: 1.5px dashed var(--yellow);
  background: none;
  color: var(--yellow);
  font-size: 20px;
  font-weight: 300;
  text-shadow: none;
}
.trust__text {
  text-align: right;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-soft);
}

/* ==========================================================================
   Menu overlay
   Opens in steps like the hero intro: the page dims, the list card slides in
   from the left, the glass card from the right, then the links rise one by one.
   visibility (not display/hidden) keeps it laid out, so the first open is as
   smooth as every other one.
   ========================================================================== */
.menu-panel {
  position: fixed;
  z-index: 15;
  inset: calc(var(--pad) + var(--header-h) + var(--gap)) var(--side) var(--pad);
  display: grid;
  grid-template-columns: var(--left) 1fr;
  gap: var(--gap);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .6s;   /* stay visible while closing */
}
.menu-open .menu-panel {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.menu-panel__card,
.menu-panel__side {
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .5s var(--ease-in);
}
.menu-panel__card {
  padding: clamp(16px, 2vw, 32px);
  overflow: auto;
  background: var(--card-text);
  transform: translateX(-56px);
}
/* Glass, so the dimmed video shows through instead of an empty dark block */
.menu-panel__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(20px, 2.4vw, 40px);
  background: rgba(24, 22, 20, .5);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
          backdrop-filter: blur(24px) saturate(1.15);
  transform: translateX(56px);
}
.menu-open .menu-panel__card,
.menu-open .menu-panel__side {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-soft), transform 1.1s var(--ease-soft);
}
.menu-open .menu-panel__side { transition-delay: .1s; }

/* Links */
.menu-panel__list li { position: relative; overflow: hidden; }
.menu-panel__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-bottom: 1px dashed var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-in);
}
.menu-panel__list a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: clamp(8px, 1.2vh, 14px) 0;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  transform: translateY(105%);
  transition: color .3s, padding-left .45s var(--ease), transform .35s var(--ease-in);
}
.menu-open .menu-panel__list a {
  transform: none;
  transition: color .3s, padding-left .45s var(--ease), transform 1s var(--ease-soft);
  transition-delay: 0s, 0s, calc(.22s + var(--i, 0) * .07s);
}
.menu-open .menu-panel__list li::after {
  transform: none;
  transition: transform 1.1s var(--ease-soft) calc(.3s + var(--i, 0) * .07s);
}
.menu-panel__list a:hover { color: var(--yellow); padding-left: 12px; }
.menu-panel__num { font-size: 13px; color: var(--muted); letter-spacing: .05em; }

.menu-panel__note,
.menu-panel .menu-panel__cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s var(--ease-in), rotate .8s var(--spring);
}
.menu-open .menu-panel__note,
.menu-open .menu-panel .menu-panel__cta {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-soft) .5s, transform 1s var(--ease-soft) .5s, rotate .8s var(--spring);
}
.menu-open .menu-panel .menu-panel__cta { transition-delay: .58s, .58s, 0s; }
.menu-panel .menu-panel__cta.is-tilting { transition: rotate .16s ease-out; }

.menu-panel__note { max-width: 22em; font-size: 20px; font-weight: 300; color: var(--text-soft); }
/* the menu CTA is a .btn-cta: only its entrance lives here */

/* Page behind the menu dims and softens. Only filter, and only on layers the
   scroll effect doesn't touch, so the two never fight over opacity. */
.hero__media-inner,
.hero__col { transition: filter .8s var(--ease-soft); }
.menu-open .hero__media-inner { filter: blur(6px) brightness(.5); }
.menu-open .hero__col { filter: brightness(.3); }

/* ==========================================================================
   Services page
   ========================================================================== */
.menu-panel__list a[aria-current="page"] { color: var(--yellow); }

.svc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius-xl);
}
.svc__head { padding: clamp(24px, 2.6vw, 40px) clamp(22px, 2.4vw, 40px) clamp(36px, 4.2vw, 64px); }
.svc__title {
  max-width: 24em;
  font-size: clamp(30px, 3.4vw, 54px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.005em;
}
.svc__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.svc__title .w > span { display: inline-block; }

.svc__body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: .85fr 1fr;
  gap: 12px;
  padding: clamp(14px, 2vw, 32px);
  background: var(--card-text);
  border-radius: var(--radius-xl);
}

/* Cards */
.svc-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 32px);
  background: #221e1b;
  border-radius: var(--radius-lg);
}
.svc-card--tall { grid-row: span 2; }
.svc-card > :nth-last-child(2) { margin-bottom: 20px; }

.svc-card__num { font-size: 20px; font-weight: 500; line-height: 1; }
.svc-card__title {
  position: relative;
  margin: 14px 0 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}
.svc-card__text {
  position: relative;
  max-width: 30em;
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.svc-card__text p + p { margin-top: 16px; }

.svc-card__btn {
  align-self: flex-end;
  display: grid;
  place-items: center;
  flex: none;
  width: 68px;
  height: 40px;
  margin-top: auto;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
}
/* Whole card is the click target */
.svc-card__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card__btn svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease);
}
.svc-card:hover .svc-card__btn { width: 86px; }
.svc-card:hover .svc-card__btn svg { transform: translateX(5px); }
.svc-card:hover { background-color: #2a2622; }

.svc-card--accent { background: var(--yellow); color: var(--ink); }
.svc-card--accent:hover { background-color: var(--yellow-hover); }
.svc-card--accent .svc-card__text { color: #6f6843; }
.svc-card--accent .svc-card__btn { background: #151311; color: #fff; }

.svc-card__waves {
  position: absolute;
  top: -6%;
  right: -4%;
  width: 78%;
  height: 62%;
  fill: none;
  stroke: rgba(140, 118, 30, .2);
  stroke-width: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent);
          mask-image: linear-gradient(to left, #000 35%, transparent);
}
.svc-card__waves path { vector-effect: non-scaling-stroke; }

/* Falling tags */
.svc-tags {
  grid-column: 3;
  grid-row: 1 / span 2;
  position: relative;
  min-height: 280px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.svc-tags__layer {
  position: absolute;
  inset: 0;
  -webkit-user-select: none;
          user-select: none;
}
.tag {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  height: clamp(38px, 3.3vw, 52px);
  padding: 0 clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: var(--card-text);
  color: #e9e4dd;
  font-size: clamp(13px, 1vw, 15.5px);
  white-space: nowrap;
  transform: translateY(-300px);
  will-change: transform;
}
.svc-tags__layer:not(.is-live):not(.is-static) .tag { visibility: hidden; }
.tag--dot { padding: 0; border: 0; background: var(--yellow); }
.tag--dot-l { width: clamp(60px, 6vw, 96px); height: clamp(60px, 6vw, 96px); }
.tag--dot-m { width: clamp(46px, 4.4vw, 70px); height: clamp(46px, 4.4vw, 70px); }
.tag--dot-s { width: clamp(20px, 1.9vw, 30px); height: clamp(20px, 1.9vw, 30px); }

/* No physics library (CDN blocked): a plain wrapped list */
.svc-tags__layer.is-static {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 8px;
  padding: 16px;
}
.is-static .tag { position: static; transform: none; }

/* --- Services intro: cards rise from the bottom, heading word by word --- */
/* Off-screen start positions must not make the page scroll */
.page { overflow: hidden; overflow: clip; }

.svc,
.svc__body,
.svc__title,
.svc-card > *,
.svc__title .w > span,
.svc-tags {
  transition-property: transform, opacity;
  transition-duration: .9s;
  transition-timing-function: var(--ease);
}
.svc-card {
  transition-property: transform, opacity, background-color;
  transition-duration: .9s, .9s, .4s;
  transition-timing-function: var(--ease);
}
.svc-card > .svc-card__btn {
  transition-property: transform, opacity, width, background-color;
  transition-duration: .9s, .9s, .45s, .3s;
}

.js .intro-pending .svc,
.js .intro-pending .svc__body,
.js .intro-pending .svc-card { transform: translateY(105vh); }
.js .intro-pending .svc-card > * { opacity: 0; transform: translateY(18px); }
.js .intro-pending .svc__title .w > span { transform: translateY(110%); }
.js .intro-pending .svc-tags { opacity: 0; transform: scale(.97); }

.intro-pending .svc,
.intro-pending .svc__body,
.intro-pending .svc__title,
.intro-pending .svc-card,
.intro-pending .svc-card > *,
.intro-pending .svc-card > .svc-card__btn,
.intro-pending .svc__title .w > span,
.intro-pending .svc-tags { transition: none; }

.svc-card--tall { --cd: .95s; }
.svc-card:nth-child(2) { --cd: 1.05s; }
.svc-card--accent { --cd: 1.35s; }

.intro-play .svc { transition-duration: 1s; }
.intro-play .svc__body { transition-duration: 1s; transition-delay: .22s; }
.intro-play .svc-card--tall { transition-delay: .5s; }
.intro-play .svc-card:nth-child(2) { transition-delay: .62s; }
.intro-play .svc-card--accent { transition-delay: .9s; }
.intro-play .svc-card > :nth-child(1) { transition-delay: var(--cd); }
.intro-play .svc-card > :nth-child(2) { transition-delay: calc(var(--cd) + .07s); }
.intro-play .svc-card > :nth-child(3) { transition-delay: calc(var(--cd) + .14s); }
.intro-play .svc-card > :nth-child(4) { transition-delay: calc(var(--cd) + .21s); }
.intro-play .svc-card > :nth-child(5) { transition-delay: calc(var(--cd) + .28s); }
.intro-play .svc__title .w > span { transition-delay: calc(.55s + var(--w, 0) * .04s); }
.intro-play .svc-tags { transition-duration: .8s; transition-delay: 1.15s; }

/* Exit: inner block drops away first, then the outer card */
.is-leaving .svc__body {
  transform: translateY(105vh);
  transition-duration: .75s;
  transition-timing-function: var(--ease-in);
}
.is-leaving .svc {
  transform: translateY(105vh);
  transition-duration: .8s;
  transition-delay: .15s;
  transition-timing-function: var(--ease-in);
}
.is-leaving .svc__title { opacity: 0; transition-duration: .4s; }

/* Short laptop screens */
@media (min-width: 1101px) and (max-height: 820px) {
  .svc__head { padding-top: 22px; padding-bottom: 30px; }
  .svc__title { font-size: clamp(28px, min(3.4vw, 5.6vh), 54px); }
  .svc__body { padding: 16px; gap: 10px; }
  .svc-card { padding: 22px; }
  .svc-card__title { font-size: clamp(20px, min(2vw, 3.6vh), 30px); margin-top: 10px; }
  .svc-card__text { margin-top: 12px; font-size: 13.5px; }
  .svc-card__text p + p { margin-top: 10px; }
  .svc-card__btn { width: 60px; height: 36px; }
  .svc-card:hover .svc-card__btn { width: 76px; }
}

@media (max-width: 1100px) {
  .svc__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }
  .svc-card--tall { grid-row: 1 / span 2; }
  .svc-tags { grid-column: 1 / -1; grid-row: 3; height: 340px; }
}

@media (max-width: 700px) {
  .svc__title { font-size: clamp(26px, 7.4vw, 36px); line-height: 1.2; }
  .svc__body { grid-template-columns: 1fr; }
  .svc-card--tall { grid-row: auto; }
  .svc-card:nth-child(2) { min-height: 190px; }
  .svc-tags { grid-column: auto; grid-row: auto; height: 360px; }
}

/* ==========================================================================
   Assistant (bot): header button, panel, character
   ========================================================================== */
:root {
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --bot-ink: #1d1c1a;
}
/* Registered so the topic colour can fade instead of switching */
@property --wash { syntax: '<color>'; inherits: true; initial-value: rgba(206, 146, 58, .5); }
@property --wash-soft { syntax: '<color>'; inherits: true; initial-value: rgba(244, 232, 154, .1); }

/* Header button with the small face */
.bot-btn {
  flex: none;
  justify-content: center;
  width: 64px;
  padding: 0;
}
.bot-btn:hover,
.bot-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .3); }
.mini-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 27px;
  height: 21px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #e9e6e1);
  box-shadow: 0 0 14px rgba(255, 255, 255, .35);
  transition: opacity .3s, transform .45s var(--spring);
}
.mini-face i {
  width: 3.4px;
  height: 5px;
  border-radius: 50%;
  background: var(--bot-ink);
  transform: translate(var(--lx, 0), var(--ly, 0));
  transition: transform .12s;
}
.mini-face.is-blink i { transform: translate(var(--lx, 0), var(--ly, 0)) scaleY(.15); }
.bot-btn:hover .mini-face { transform: translateY(-1px) rotate(-7deg); }
.bot-open .bot-btn .mini-face { opacity: 0; transform: scale(.6); }

/* Getting to know К’юбик (bot.js): a «1» like a message waiting, and once
   per visitor a hello that grows out of the button */
.bot-btn { position: relative; }
.bot-btn__badge {
  position: absolute;
  top: calc(50% - 19px);
  left: calc(50% + 7px);
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--hcard);   /* cut out of the button */
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 500 10px/1 var(--font);
  letter-spacing: 0;
  pointer-events: none;
  transform: scale(0);
  transition: transform .45s var(--spring);
}
.bot-btn.has-unread .bot-btn__badge { transform: scale(1); }
.bot-open .bot-btn__badge { transform: scale(0); }
.mini-face.is-hi { animation: qubi-hi 1.2s var(--ease); }
@keyframes qubi-hi {   /* a hop and a wave */
  0% { transform: none; }
  16% { transform: translateY(-5px) rotate(-12deg); }
  34% { transform: translateY(-2px) rotate(10deg); }
  52% { transform: translateY(-3px) rotate(-8deg); }
  70% { transform: rotate(5deg); }
  100% { transform: none; }
}
.bot-hi {
  position: fixed;
  z-index: 30;
  top: 0; left: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 6px 6px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(.5);
  transform-origin: var(--tail, 50%) 0;   /* grows out of the button */
  transition: opacity .18s, transform .3s var(--ease);
}
.bot-hi.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity .15s, transform .6s var(--spring);
}
.bot-hi::before {   /* the tail, pointing at К’юбик */
  content: "";
  position: absolute;
  top: -5px;
  left: calc(var(--tail, 50%) - 6px);
  width: 12px; height: 12px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
}
.bot-hi__open {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 4px 9px 0;
  color: inherit;
  font: 400 13.5px/1.35 var(--font);
  text-align: left;
}
.bot-hi__open b { font-size: 14.5px; font-weight: 500; }
.bot-hi__open span { color: rgba(27, 26, 20, .66); text-wrap: balance; }
.bot-hi__x {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: rgba(27, 26, 20, .5);
  font-size: 20px;
  line-height: 1;
  transition: background-color .2s, color .2s;
}
.bot-hi__x::after { content: ""; position: absolute; inset: -6px; }   /* 44 px to tap */
.bot-hi__x:hover { background: rgba(27, 26, 20, .06); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .bot-hi, .bot-hi.is-on { transform: none; transition: opacity .2s; }
}

/* Panel */
.bot {
  position: fixed;
  z-index: 25;
  top: calc(var(--pad) + var(--header-h) + var(--gap));
  right: var(--side);
  width: min(640px, calc(100vw - var(--pad) * 2));
  padding: 8px;
  background: #0c0b0b;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px) scale(.3, .18);
  transition: transform .35s var(--ease-in), opacity .3s, visibility 0s linear .35s;
}
/* phones with the keyboard up: in the visible part, the chat shorter (bot.js) */
.bot.is-kb { top: var(--kb-top); }
.bot.is-kb .bot__stage[data-view="chat"] { height: var(--kb-chat); }
.bot.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .62s var(--spring), opacity .2s, visibility 0s;
}
.bot > * { opacity: 0; transition: opacity .2s; }
.bot.is-open > * { opacity: 1; transition: opacity .35s .15s; }

/* Bar */
.bot__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 2px 6px;
}
.bot__group { display: flex; gap: 2px; }
.bot__tab,
.bot__tool {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  transition: background-color .3s, color .3s, width .4s var(--spring);
}
.bot__tab:hover,
.bot__tool:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.bot__tab.is-active { width: 42px; color: #fff; background: rgba(255, 255, 255, .14); }
.bot__bar svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bot__bar svg.ico-fill { fill: currentColor; stroke: none; }
.bot__bar .ico-fill-path { fill: currentColor; stroke: none; }
.bot__tool[data-act="settings"] svg { transition: transform .6s var(--spring); }
.bot__tool[aria-expanded="true"] svg { transform: rotate(90deg); }
.bot__tool[aria-pressed="false"] .ico-sound,
.bot__tool[aria-pressed="true"] .ico-mute { display: none; }

.bot__menu {
  position: absolute;
  z-index: 5;
  top: 34px;
  right: 2px;
  min-width: 210px;
  padding: 6px;
  background: #1b1a19;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.bot__pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bot__pref:hover { background: rgba(255, 255, 255, .06); }
.bot__pref input { position: absolute; opacity: 0; pointer-events: none; }
.bot__pref i {
  position: relative;
  width: 32px; height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  transition: background-color .25s;
}
.bot__pref i::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s var(--spring);
}
.bot__pref input:checked + i { background: var(--yellow); }
.bot__pref input:checked + i::after { transform: translateX(14px); background: var(--bot-ink); }
.bot__pref input:focus-visible + i { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Stage: one area, height follows the view */
.bot__stage {
  position: relative;
  /* the view's set height, or more when its text needs it (--fit-h, bot.js) */
  height: max(var(--view-h, 150px), var(--fit-h, 0px));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #131211;
  transition: height .55s var(--spring), --wash .7s var(--ease), --wash-soft .7s var(--ease);
}
.bot__stage[data-view="home"] { --view-h: 172px; }
.bot__stage[data-view="confirm"] { --view-h: 176px; }
.bot__stage[data-view="chat"] { height: min(400px, 62vh); }
.bot__stage[data-view="done"] { --view-h: 166px; }
.bot__stage[data-view="dizzy"] { --view-h: 128px; }

/* Colour washes per state (amber = asking, green = done, pink = dizzy) */
.bot__tint {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s;
}
/* Chat: the site's warm brown, with a faint yellow glow behind the character */
.bot__tint--chat {
  background:
    radial-gradient(55% 75% at 0% 100%, var(--wash-soft), transparent 70%),
    linear-gradient(170deg, rgba(47, 42, 39, 0) 15%, rgba(61, 54, 47, .8) 100%);
}
/* "Is this what you need?": washed in the colour of the picked service */
.bot__tint--alert { background: radial-gradient(120% 160% at 0% 45%, var(--wash), transparent 75%); }
.bot__tint--done { background: radial-gradient(120% 160% at 0% 45%, rgba(46, 160, 104, .48), rgba(46, 160, 104, .12) 45%, transparent 75%); }
.bot__tint--dizzy { background: linear-gradient(90deg, rgba(120, 50, 100, .08) 0%, rgba(150, 66, 118, .55) 100%); }
.bot__stage[data-view="chat"] .bot__tint--chat,
.bot__stage[data-view="confirm"] .bot__tint--alert,
.bot__stage[data-view="done"] .bot__tint--done,
.bot__stage[data-view="dizzy"] .bot__tint--dizzy { opacity: 1; }

/* Twinkling dots on the intro screen */
.bot__sparks { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.bot__stage[data-view="intro"] .bot__sparks { opacity: 1; }
.bot__sparks i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: bot-twinkle 3s ease-in-out infinite;
}
@keyframes bot-twinkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50% { opacity: .7; transform: scale(1); }
}

/* Views cross-fade */
.bot__view {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s, transform .45s var(--ease), visibility 0s linear .3s;
}
.bot__view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s .12s, transform .55s var(--ease) .12s, visibility 0s;
}

/* Shared text bits */
.bot__who { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.2; }
.bot__who b { font-weight: 500; }
.bot__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.bot__dot--green { background: #4ade80; }
.bot__role { color: var(--muted); font-size: 12px; }
.bot__count { margin-left: auto; font-size: 11px; color: var(--muted); }
.bot__title { margin-top: 6px; font-size: 15px; font-weight: 500; }
.bot__text { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .62); }

/* Home: thinking card + services */
.bot__view[data-name="home"] {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 8px;
}
.bot__card {
  position: relative;
  min-width: 0;
  border-radius: var(--radius);
  background: #1c1b1a;
}
.bot__card--me {
  display: flex;
  align-items: center;
  padding: 14px 16px 14px 116px;
}
.bot__status { min-width: 0; width: 100%; }
.bot__line {
  margin-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--muted);
}
.bot__line--done::before { content: "✓ "; }
.bot__line--now { font-size: 13.5px; color: #f1ede7; }
.bot__caret { color: var(--muted); }
.bot__typed::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: bot-caret 1s steps(1) infinite;
}
@keyframes bot-caret { 50% { opacity: 0; } }

.bot__card--list { padding: 10px; }
.bot__hint {
  margin: 0 4px 7px;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.bot__svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bot__svc {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  font-size: 12.5px;
  color: #ebe7e1;
  white-space: nowrap;
  transition: background-color .25s, border-color .25s, transform .35s var(--spring);
}
.bot__svc:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.mini {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  width: 23px;
  height: 17px;
  border-radius: 5px;
  background: var(--c);
  transition: transform .35s var(--spring);
}
.mini i {
  width: 2.6px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  transform: translate(var(--lx, 0), var(--ly, 0));
}
.bot__svc:hover .mini { transform: rotate(-8deg) scale(1.08); }

/* Confirm / done / dizzy: text beside the character */
.bot__view--wide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 18px 14px 128px;
}
.bot__question { margin-top: 7px; font-size: 14.5px; }
.bot__field {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12.5px;
  color: #f4f0ea;
}
.bot__actions { display: flex; gap: 8px; margin-top: 10px; }
.bot__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: 13px;
  transition: background-color .25s, transform .35s var(--spring);
}
.bot__btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.bot__btn kbd {
  margin-right: -6px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  font: 10px/1.4 var(--font);
}
.bot__btn--primary { background: #f5f3ef; color: var(--bot-ink); }
.bot__btn--primary:hover { background: #fff; }
.bot__btn--primary kbd { border-color: rgba(0, 0, 0, .25); }
.bot__view[data-name="dizzy"] .bot__title { font-weight: 600; }

/* Chat */
.bot__view--chat {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 12px 84px;
}
.bot__log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.bot__msg {
  max-width: 88%;
  font-size: 14px;
  line-height: 1.45;
  color: #efebe5;
  overflow-wrap: anywhere;
}
.bot__msg--me {
  align-self: flex-end;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .11);
  font-size: 13px;
}
.bot__msg--typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.bot__msg--typing i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  animation: bot-dot 1s ease-in-out infinite;
}
.bot__msg--typing i:nth-child(2) { animation-delay: .15s; }
.bot__msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bot-dot {
  0%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
.bot__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; }
.bot__chip {
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: 12.5px;
  color: #ebe7e1;
  animation: bot-chip-in .4s var(--spring) both;
  transition: background-color .25s, border-color .25s;
}
.bot__chip:nth-child(2) { animation-delay: .05s; }
.bot__chip:nth-child(3) { animation-delay: .1s; }
.bot__chip:nth-child(4) { animation-delay: .15s; }
.bot__chip:nth-child(5) { animation-delay: .2s; }
.bot__chip:nth-child(6) { animation-delay: .25s; }
.bot__chip:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
@keyframes bot-chip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.bot__form {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  transition: background-color .25s;
}
.bot__form:focus-within { background: rgba(255, 255, 255, .1); }
.bot__form input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 48px 0 14px;
  border: 0;
  outline: 0;
  background: none;
  font-size: 14px;
  color: #fff;
  cursor: text;
}
.bot__form input::placeholder { color: rgba(255, 255, 255, .4); }
/* iPhone zooms the whole page into any field with text under 16px and stays
   zoomed: on touch screens every field we type into is 16px */
@media (max-width: 900px), (pointer: coarse) {
  .search input, .bot__form input { font-size: 16px; }
}
.bot__send {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #f5f3ef;
  color: var(--bot-ink);
  transition: transform .35s var(--spring);
}
.bot__send:hover { transform: translateY(-2px); }
.bot__send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   The character. Sizes are in em so one font-size scales everything.
   -------------------------------------------------------------------------- */
.buddy--main,
.buddy-ghost {
  position: absolute;
  z-index: 3;
  left: calc(50% - 3.6em);
  top: calc(50% - 2.9em);
  width: 7.2em;
  height: 5.8em;
  font-size: 11px;
  transition: left .62s var(--spring), top .62s var(--spring), font-size .62s var(--spring);
}
/* Spot per view */
.bot__stage:is([data-view="home"], [data-view="confirm"], [data-view="done"], [data-view="dizzy"]) :is(.buddy--main, .buddy-ghost) {
  left: 30px;
  top: calc(50% - 2.9em);
  font-size: 10.5px;
}
.bot__stage[data-view="home"] :is(.buddy--main, .buddy-ghost) { left: 30px; }
.bot__stage[data-view="chat"] :is(.buddy--main, .buddy-ghost) {
  left: 20px;
  top: calc(100% - 20px - 5.8em);
  font-size: 7px;
}

.buddy--main { cursor: pointer; -webkit-user-select: none; user-select: none; }
.buddy--main.is-away { visibility: hidden; }

/* Trail: three faint copies follow the character with a small delay each */
.buddy-ghost {
  z-index: 2;
  border-radius: 1.9em;
  background: var(--bc, #fff);
  opacity: 0;
  pointer-events: none;
  transition-property: left, top, font-size, opacity;
  transition-duration: .62s, .62s, .62s, .45s;
  transition-timing-function: var(--spring), var(--spring), var(--spring), ease;
  transition-delay: var(--gd), var(--gd), var(--gd), 0s;
}
.bot__stage.is-moving .buddy-ghost { opacity: var(--go); transition-duration: .62s, .62s, .62s, 0s; }

.buddy__float {
  position: absolute;
  inset: 0;
  animation: buddy-float 3.4s ease-in-out infinite;
}
@keyframes buddy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.35em); }
}
.buddy__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.9em;
  /* --bc / --glow-* = topic colour (white by default), set by bot.js */
  background-color: var(--bc, #f4f2ee);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05) 100%);
  box-shadow:
    0 0 2.6em var(--glow-a, rgba(255, 255, 255, .34)),
    0 0 7em var(--glow-b, rgba(255, 255, 255, .12)),
    inset 0 -.35em .7em rgba(0, 0, 0, .06);
  transform-origin: 50% 100%;
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.buddy__eyes { display: flex; align-items: center; gap: 1.35em; transform: translateY(-.1em); }
.buddy__eye {
  position: relative;
  display: grid;
  place-items: center;
  width: .72em;
  height: 1.02em;
  border: 0 solid var(--bot-ink);
  border-radius: 50%;
  background: var(--bot-ink);
  transform: translate(var(--lx, 0), var(--ly, 0));
  transition: transform .14s, width .25s, height .25s, border-radius .25s, background-color .2s, border-width .2s;
}
.buddy.is-blink:is([data-mood="idle"], [data-mood="think"], [data-mood="typing"], [data-mood="alert"], [data-mood="sad"]) .buddy__eye {
  transform: translate(var(--lx, 0), var(--ly, 0)) scaleY(.12);
}
.buddy__eye svg {
  display: none;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--bot-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* ^ ^ happy / done */
.buddy:is([data-mood="happy"], [data-mood="done"]) .buddy__eye {
  width: 1.3em;
  height: .66em;
  border-width: .27em .27em 0;
  border-radius: 1em 1em 0 0;
  background: transparent;
}
/* ‿ ‿ calm (chat) */
.buddy[data-mood="calm"] .buddy__eye {
  width: 1.3em;
  height: .62em;
  border-width: 0 .27em .27em;
  border-radius: 0 0 1em 1em;
  background: transparent;
}
/* looking up while thinking/typing, down when sad */
.buddy[data-mood="think"] .buddy__eyes { transform: translate(.15em, -.3em); }
.buddy[data-mood="typing"] .buddy__eyes { transform: translate(.3em, -.25em); }
.buddy[data-mood="sad"] .buddy__eyes { transform: translate(-.25em, .35em); }
.buddy[data-mood="alert"] .buddy__eye { width: .8em; height: 1.12em; }
/* dizzy: spinning spirals and blush */
.buddy[data-mood="dizzy"] .buddy__eye {
  width: 1.55em;
  height: 1.55em;
  background: transparent;
}
.buddy[data-mood="dizzy"] .buddy__eye svg { display: block; animation: buddy-spin 1.1s linear infinite; }
.buddy[data-mood="dizzy"] .buddy__eye + .buddy__eye svg { animation-direction: reverse; }
.buddy[data-mood="dizzy"] .buddy__float { animation: buddy-wobble 1s ease-in-out infinite; }
@keyframes buddy-spin { to { transform: rotate(360deg); } }
@keyframes buddy-wobble {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-.2em); }
}

.buddy__blush {
  position: absolute;
  left: 1.1em;
  right: 1.1em;
  top: 60%;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .3s;
}
.buddy__blush::before,
.buddy__blush::after {
  content: "";
  width: 1.1em;
  height: .5em;
  border-radius: 50%;
  background: rgba(244, 128, 160, .55);
}
.buddy[data-mood="dizzy"] .buddy__blush { opacity: 1; }
.buddy[data-mood="happy"] .buddy__blush { opacity: .55; }

/* Status badge in the corner: … thinking, typing pulse, ! asking, ✓ done */
.buddy__badge {
  position: absolute;
  z-index: 2;
  top: -.55em;
  left: -.55em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .14em;
  width: 2em;
  height: 2em;
  border: .26em solid #0c0b0b;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font: 600 1.05em/1 var(--font);
  transform: scale(0);
  transition: transform .4s var(--spring), background-color .3s;
}
.buddy__badge i { width: .26em; height: .26em; border-radius: 50%; background: #fff; display: none; }
.buddy[data-mood="think"] .buddy__badge { transform: scale(1); }
.buddy[data-mood="think"] .buddy__badge i { display: block; animation: bot-dot 1s ease-in-out infinite; }
.buddy[data-mood="think"] .buddy__badge i:nth-child(2) { animation-delay: .15s; }
.buddy[data-mood="think"] .buddy__badge i:nth-child(3) { animation-delay: .3s; }
.buddy[data-mood="typing"] .buddy__badge { transform: scale(1); background: var(--yellow); animation: buddy-pulse 1s ease-in-out infinite; }
.buddy[data-mood="alert"] .buddy__badge { transform: scale(1); background: #f5a524; color: var(--bot-ink); }
.buddy[data-mood="alert"] .buddy__badge::before { content: "!"; }
.buddy[data-mood="done"] .buddy__badge { transform: scale(1); background: #22c55e; }
.buddy[data-mood="done"] .buddy__badge::before { content: "✓"; font-size: .9em; }
@keyframes buddy-pulse { 50% { box-shadow: 0 0 0 .35em rgba(244, 232, 154, .25); } }

/* Hands: pop out and wave */
.buddy__hand {
  position: absolute;
  z-index: -1;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--bc, #f3f1ed);
  box-shadow: 0 0 .9em var(--glow-a, rgba(255, 255, 255, .4));
  transform: scale(0);
  transition: background-color .6s var(--ease);
}
.buddy__hand--l { left: -1.5em; top: 62%; }
.buddy__hand--r { right: -1.75em; top: 22%; width: 1.6em; height: .95em; transform-origin: 0 50%; }
.buddy.is-wave .buddy__hand--l { animation: buddy-hand 1.4s var(--ease); }
.buddy.is-wave .buddy__hand--r { animation: buddy-wave 1.4s ease-in-out; }
@keyframes buddy-hand {
  0% { transform: scale(0); }
  15%, 82% { transform: scale(1); }
  100% { transform: scale(0); }
}
@keyframes buddy-wave {
  0% { transform: scale(0) rotate(0); }
  14% { transform: scale(1) rotate(-25deg); }
  30% { transform: scale(1) rotate(22deg); }
  46% { transform: scale(1) rotate(-25deg); }
  62% { transform: scale(1) rotate(22deg); }
  82% { transform: scale(1) rotate(0); }
  100% { transform: scale(0) rotate(0); }
}

/* Squash on landing and on click */
.buddy.is-squash .buddy__body { animation: buddy-squash .55s var(--ease); }
@keyframes buddy-squash {
  0% { transform: scale(1); }
  28% { transform: scale(1.18, .8); }
  58% { transform: scale(.94, 1.07); }
  100% { transform: scale(1); }
}

/* The copy that flies between the header button and the panel */
.buddy-flyer {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28%;
  background-color: #f4f2ee;   /* animated by bot.js from the topic colour to white */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05));
  box-shadow: 0 0 24px rgba(255, 255, 255, .4);
  pointer-events: none;
}
.buddy-flyer__eyes { display: flex; gap: 18%; width: 46%; justify-content: center; }
.buddy-flyer__eyes i {
  width: 22%;
  aspect-ratio: 2 / 1;
  border: 2.5px solid var(--bot-ink);
  border-bottom: 0;
  border-radius: 1em 1em 0 0;
}

/* Phones */
@media (max-width: 600px) {
  .bot { padding: 6px; }
  .bot__stage[data-view="home"] { --view-h: 312px; }
  .bot__stage[data-view="confirm"] { --view-h: 230px; }
  /* --vvh = visible height above the on-screen keyboard (set by bot.js) */
  .bot__stage[data-view="chat"] { height: min(460px, 68vh, calc(var(--vvh, 100vh) - 140px)); }
  .bot__stage[data-view="done"] { --view-h: 200px; }
  .bot__stage[data-view="dizzy"] { --view-h: 150px; }
  .bot__view[data-name="home"] { grid-template-columns: 1fr; grid-template-rows: 112px 1fr; }
  .bot__card--me { padding-left: 106px; }
  .bot__stage[data-view="home"] :is(.buddy--main, .buddy-ghost) { left: 26px; top: calc(10px + 56px - 2.9em); }
  .bot__view--wide { padding: 92px 16px 16px; justify-content: flex-start; }
  .bot__stage:is([data-view="confirm"], [data-view="done"], [data-view="dizzy"]) :is(.buddy--main, .buddy-ghost) { left: 18px; top: 18px; font-size: 9px; }
  .bot__view--chat { padding-left: 64px; }
  .bot__stage[data-view="chat"] :is(.buddy--main, .buddy-ghost) { left: 12px; font-size: 6.4px; }
  .bot-btn { width: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .buddy__float,
  .bot__sparks i,
  .bot__typed::after { animation: none; }
}

/* ==========================================================================
   Partners block (home)
   Desktop: the first screen stays put and sinks back while this block slides
   over it (--cover 0→1, set by main.js). Phones: normal scroll — the first
   screen is taller than the phone, so pinning it would hide its lower half.
   ========================================================================== */
.partners {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(28px, 3.4vw, 56px) 0 clamp(28px, 3.4vw, 52px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.partners__inner { padding-inline: clamp(22px, 3vw, 48px); }

.partners__title {
  margin: 0;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.005em;
}
.partners__rule {
  height: 0;
  margin-top: clamp(18px, 2vw, 28px);
  border-top: 1px dashed var(--line);
  transform-origin: 0 50%;
}

/* One reading column: label → title → rule → text, so the eye just moves down */
.partners__body { margin-top: clamp(22px, 2.6vw, 36px); }
.partners__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.partners__text {
  max-width: 30em;
  margin: 0;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--text);
}
/* Words light up as the paragraph scrolls into view */
.partners__text .w { display: inline; }
.partners__text .w > span { opacity: .3; transition: opacity .45s var(--ease); }
.partners__text .w.is-lit > span { opacity: 1; }

.partners__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.partners__link::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  transition: transform .4s var(--spring);
}
.partners__link span {
  background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
.partners__link:hover span { color: var(--yellow); background-size: 100% 1px; }
.partners__link:hover::before { transform: scale(1.5); }

/* Logo strip */
.partners__marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.partners__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.partners__track--reverse { animation-direction: reverse; animation-duration: 58s; }
.partners__marquee:hover .partners__track { animation-play-state: paused; }
.partners__group { display: flex; gap: 12px; padding-right: 12px; }
.partner {
  --u: clamp(.78px, .07vw, 1.05px);   /* logo sizes are given in px at 1440 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: clamp(160px, 14vw, 230px);
  height: clamp(80px, 7.4vw, 116px);
  padding-inline: 22px;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
  color: #e8e2da;
  transition: border-color .35s, background-color .35s, color .35s;
}
/* At rest every client is one light tone, so fifteen brand palettes don't
   fight the page. On hover the tile turns light and the logo shows in its
   own colours. */
.partner__logo {
  display: block;
  width: auto;
  height: calc(var(--h, 30) * var(--u));
  filter: brightness(0) invert(.92);
  opacity: .6;
  transition: opacity .35s, filter .35s, transform .45s var(--spring);
}
.partner__avatar {
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: .6;
  transition: opacity .35s, filter .35s;
}
/* no logo file: the name itself, in the display font */
.partner__word {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 19px);
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: .6;
  transition: opacity .35s;
}
/* a name next to a sign or a photo */
.partner__name {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  white-space: nowrap;
  opacity: .6;
  transition: opacity .35s;
}
/* Mebelka: the rest state is its ring + lettering, hover swaps in the colour badge */
.partner__swap { display: grid; }
.partner__swap > * { grid-area: 1 / 1; }
.partner__logo--color { opacity: 0; filter: none; }

.partner:hover { border-color: transparent; background: #f3efe9; color: var(--ink); }
.partner:hover :is(.partner__logo, .partner__avatar, .partner__word, .partner__name) { filter: none; opacity: 1; }
.partner:hover .partner__logo { transform: scale(1.04); }
/* logos that are light by design (white, beige) go dark on the light tile */
.partner--dark-hover:hover .partner__logo { filter: brightness(0); opacity: .85; }
.partner--swap:hover .partner__logo:not(.partner__logo--color) { opacity: 0; }

/* Entrance (once, when the block comes into view) */
.partners__rule,
.partners__label,
.partners__link,
.partner {
  transition-property: transform, opacity, border-color, background-color;
  transition-duration: 1s, .8s, .35s, .35s;
  transition-timing-function: var(--ease);
}
.js .partners:not(.is-in) .partners__rule { transform: scaleX(0); }
.js .partners:not(.is-in) .partners__label,
.js .partners:not(.is-in) .partners__link { opacity: 0; transform: translateY(16px); }
.js .partners:not(.is-in) .partner { opacity: 0; transform: translateX(140px); }
.partners.is-in .partners__rule { transition-duration: 1.3s; transition-delay: .15s; }
.partners.is-in .partners__label { transition-delay: .3s; }
.partners.is-in .partners__link { transition-delay: .55s; }
.partners.is-in .partner { transition-delay: calc(.25s + var(--i, 0) * .06s), calc(.25s + var(--i, 0) * .06s), 0s, 0s; }

/* --------------------------------------------------------------------------
   Motion language for information blocks (see DESIGN.md, "Анімації"):
   1. titles: words rise from a mask, one after another;
   2. a dashed rule draws left → right under the head;
   3. content rises in a wave;
   4. scroll stays natural (1:1) — nothing ever covers what is being read;
      on desktop a block that has been read shrinks a little and darkens only
      while it leaves under the header (--exit 0→1, main.js).
   -------------------------------------------------------------------------- */
.reveal-title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.reveal-title .w > span {
  display: inline-block;
  transition: transform 1s var(--ease);
  transition-delay: calc(.1s + var(--w, 0) * .06s);
}
.js :is(.partners, .offer, .edge, .cases):not(.is-in) .reveal-title .w > span { transform: translateY(110%); transition: none; }

.partners.is-covered .partners__track { animation-play-state: paused; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  :is(.partners, .offer, .edge, .cases, .team, .promo, .brief) {
    transform-origin: 50% 100%;
    transform: scale(calc(1 - var(--exit, 0) * .04));
  }
  :is(.partners, .offer, .edge, .cases, .team, .promo, .brief)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: var(--bg);
    opacity: calc(var(--exit, 0) * .6);
    pointer-events: none;
  }
}

/* Desktop: the first screen stays pinned while the page scrolls. Its video
   shrinks into a window that flies up into the header's nav pill (WayGO-style),
   the left column fades away, and the partners block rises underneath.
   main.js drives it from the scroll position (--fade, inline clip-path). */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero {
    position: sticky;
    top: calc(var(--pad) + 58px + var(--gap));
  }
  .hero__col {
    opacity: calc(1 - var(--fade, 0));
    transform: translateY(calc(var(--fade, 0) * -36px)) scale(calc(1 - var(--fade, 0) * .04));
    transform-origin: 0 0;
  }
}

@media (max-width: 900px) {
  .partners { border-radius: var(--radius-lg); }
  .partners__text { font-size: 19px; }
  .partners__marquee { margin-top: 8px; }
  .partner { width: 136px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track { animation-duration: 160s; }
  .partners__text .w > span { opacity: 1; }
}

/* ==========================================================================
   Primary button (pill) — shared, with the "Don't be shy" hover:
   at rest a small dot sits at the right end. On hover the pill tilts towards
   the cursor and springs back (main.js sets --tilt), a lighter colour floods
   out of the dot over the whole pill, the label rolls up (the same words, so
   the action never changes under the cursor) and the dot grows into a circle
   with an arrow. К’юбик pops out under the button with a word of support
   (main.js, .cta-say). Touch screens have no hover: the arrow shows always.
   ========================================================================== */
.btn-cta {
  --flood: #fbf8f1;            /* the colour that floods out of the dot */
  --dot: var(--ink);
  --arrow: var(--yellow);
  --label-on: var(--ink);      /* label colour over the flood */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 7px 0 26px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  rotate: var(--tilt, 0deg);
  transition: rotate .8s var(--spring), scale .18s var(--ease);
}
.btn-cta.is-tilting { transition: rotate .16s ease-out, scale .18s var(--ease); }
.btn-cta:active { scale: .97; }   /* the press, felt on touch screens too */
/* the pill's own colour is a layer 1px inside the edge: the flood covers it
   completely, so no dark (or yellow) ring shows around the flooded pill */
.btn-cta::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 1px;
  border-radius: inherit;
  background: var(--pill, var(--yellow));
}
.btn-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%; right: 24px;     /* the centre of the dot */
  width: 10px; height: 10px;
  margin: -5px -5px 0 0;
  border-radius: 50%;
  background: var(--flood);
  transform: scale(0);
  transition: transform .75s var(--ease);
}
.btn-cta > span {
  display: inline-block;
  text-shadow: 0 3em 0 var(--label-on);   /* the copy that rolls in from below */
  transition: transform .5s var(--ease);
}
.btn-cta svg {
  flex: none;
  box-sizing: border-box;
  width: 34px; height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: var(--dot);
  color: var(--arrow);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scale(.25);
  transition: transform .5s var(--spring);
}
.btn-cta svg path { opacity: 0; transform: translateX(-7px); transition: opacity .2s, transform .45s var(--spring); }
@media (hover: hover) {
  .btn-cta:hover::before { transform: scale(64); }
  .btn-cta:hover > span { transform: translateY(-3em); }
  .btn-cta:hover svg { transform: none; transition-delay: .06s; }
  .btn-cta:hover svg path { opacity: 1; transform: none; transition-delay: .16s; }
}
.btn-cta:focus-visible::before { transform: scale(64); }
.btn-cta:focus-visible > span { transform: translateY(-3em); }
.btn-cta:focus-visible svg { transform: none; }
.btn-cta:focus-visible svg path { opacity: 1; transform: none; }
@media (hover: none) {
  .btn-cta svg { transform: none; }
  .btn-cta svg path { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-cta *, .btn-cta::before { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* К’юбик's word of support under a hovered CTA (one element for the page).
   main.js puts it in place first (left/top, never animated), then it grows
   out of the button's arrow circle (--dx/--dy lead back to it) and shrinks
   back into it when the cursor leaves. */
.cta-say {
  position: absolute;
  z-index: 90;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font: 500 14px/1 var(--font);
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.15) rotate(-14deg);
  transform-origin: 20px 50%;   /* К’юбик's face */
  transition: opacity .16s .1s, transform .32s var(--ease);
}
.cta-say.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .12s, transform .6s var(--spring);
}
.cta-say__ava {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bot-ink, #1d1c1a);
}
.cta-say .mini-face { width: 20px; height: 15px; gap: 4px; border-radius: 5px; box-shadow: none; }
.cta-say .mini-face i { width: 2.6px; height: 3.8px; }
@media (prefers-reduced-motion: reduce) {
  .cta-say, .cta-say.is-on { transform: none; transition: opacity .2s; }
}

/* ==========================================================================
   Services overview (home)
   Hover/focus: the card turns yellow, lifts and tilts ~3° towards the cursor,
   overlapping its neighbours. No shadow (design code), mouse devices only.
   ========================================================================== */
.offer {
  position: relative;
  z-index: 3;   /* slides over the pinned partners sheet */
  padding: clamp(28px, 3.4vw, 56px) 0 clamp(20px, 2.4vw, 36px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
}
.offer__rule {
  height: 0;
  margin: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 48px) 0;
  border-top: 1px dashed var(--line);
  transform-origin: 0 50%;
  transition: transform 1.3s var(--ease) .2s;
}
.js .offer:not(.is-in) .offer__rule { transform: scaleX(0); transition: none; }
.offer__head { max-width: 46em; padding-inline: clamp(22px, 3vw, 48px); }
.offer__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.offer__title {
  max-width: 13em;
  margin: 0;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.08;
}
.offer__text {
  max-width: 30em;
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-soft);
}
.offer__head .btn-cta { margin-top: 26px; }

.offer__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(26px, 3vw, 40px);
  padding-inline: clamp(14px, 1.6vw, 28px);
}
.offer__list > li { position: relative; }

.offer-card {
  container-type: inline-size;   /* the title size follows the card width */
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: clamp(300px, 26vw, 380px);
  padding: clamp(20px, 1.7vw, 28px);
  border-radius: var(--radius-lg);
  background: #221e1b;
  color: var(--text);
  isolation: isolate;
  transform-origin: 50% 70%;
  transition:
    transform .6s var(--spring),
    color .35s var(--ease);
}
.offer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--yellow);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
  transition: clip-path .6s var(--ease);
}
.offer-card:focus-visible::before { clip-path: circle(150% at 50% 50%); }
.offer-card__top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
/* Every card starts with the same dark tile: the platforms we run (Google Ads,
   Meta, Search Console) show their own logo in its brand colours; our own
   services show a line icon. The tile stays dark when the card turns yellow,
   so both stay readable. */
.offer-card__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--bg);
}
.offer-card__logo { display: block; width: 24px; height: 24px; object-fit: contain; }
.offer-card__logo--wide { width: 28px; }
.offer-card__icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offer-card__icon > * { stroke-dasharray: 100; }
.offer.is-in .offer-card__icon > * { animation: icon-draw 1.2s var(--ease) backwards; animation-delay: calc(.7s + var(--i, 0) * .07s); }
/* logos can't be drawn line by line: they pop into the tile instead */
.offer.is-in .offer-card__logo { animation: logo-pop .8s var(--spring) backwards; animation-delay: calc(.75s + var(--i, 0) * .07s); }
@keyframes logo-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes icon-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.offer-card__num { font-size: 13px; letter-spacing: .05em; color: var(--muted); transition: opacity .3s; }
.offer-card__go {
  position: absolute;
  top: -4px; right: -4px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  opacity: 0;
  transform: scale(.6) rotate(-45deg);
  transition: opacity .3s, transform .45s var(--spring);
}
.offer-card__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer-card__title {
  margin: clamp(32px, 3.4vw, 56px) 0 0;
  /* Unbounded is wide: the longest word ("продажами") must fit the card */
  font-size: min(clamp(18px, 1.6vw, 24px), 13.4cqi);
  line-height: 1.15;
}
.offer-card__text {
  margin: auto 0 0;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-soft);
  transition: color .35s var(--ease);
}

/* Active card: yellow (one per screen), arrow replaces the number */
.offer-card:focus-visible {
  z-index: 3;
  color: var(--ink);
}
.offer-card:focus-visible .offer-card__text { color: #6f6843; }
.offer-card:focus-visible .offer-card__num { opacity: 0; }
.offer-card:focus-visible .offer-card__go { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .offer-card:hover {
    z-index: 3;
    color: var(--ink);
  }
  .offer-card:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
  .offer-card:hover .offer-card__text { color: #6f6843; }
  .offer-card:hover .offer-card__num { opacity: 0; }
  .offer-card:hover .offer-card__go { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* --tilt: ±3deg, towards the side the cursor came in on (main.js).
     3° keeps the text readable on these tall narrow cards. */
  .offer-card:hover { transform: translateY(-10px) rotate(var(--tilt, 3deg)) scale(1.03); }
  .offer-card:focus-visible { transform: translateY(-8px) rotate(2deg) scale(1.02); }
}

/* Entrance: animation with fill "backwards", so once it ends the hover
   transform takes over without inheriting any stagger delay */
.js .offer:not(.is-in) .offer__head > :not(.reveal-title),
.js .offer:not(.is-in) .offer-card { opacity: 0; }
.offer.is-in .offer__head > :not(.reveal-title) { animation: offer-rise .9s var(--ease) backwards; }
.offer.is-in .offer__head > :nth-child(2) { animation-delay: .08s; }
.offer.is-in .offer__head > :nth-child(3) { animation-delay: .4s; }
.offer.is-in .offer__head > :nth-child(4) { animation-delay: .5s; }
.offer.is-in .offer-card { animation: card-rise 1.1s var(--ease) backwards; animation-delay: calc(.35s + var(--i, 0) * .08s); }
@keyframes offer-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(90px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* The pinned first screen is fully gone by now: stop it catching the pointer */
.hero.is-gone { visibility: hidden; }

@media (max-width: 1279px) {
  .offer__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer-card { min-height: 260px; }
}

/* Phones: no hover, so the cards are a swipe row (next card peeks in) */
@media (max-width: 700px) {
  .offer__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 14px 8px;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
  }
  .offer__list::-webkit-scrollbar { display: none; }
  .offer__list > li { flex: 0 0 78%; scroll-snap-align: start; }
  .offer-card { min-height: 0; }
  .offer-card__title { margin-top: 28px; }
  .offer { border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .offer.is-in .offer__head > *,
  .offer.is-in .offer-card,
  .offer.is-in .offer-card__icon > *,
  .offer.is-in .offer-card__logo { animation: none; }
}

/* ==========================================================================
   What makes us different (home) — the brand doc's four differences.
   The key one sits in the yellow card (the one yellow card on this screen):
   "we see every lead until the sale", proved by a field of 160 dots, one per
   NEC enquiry, marked the way their sales team marked them. The other three
   are compact rows, each with an example instead of an adjective.
   ========================================================================== */
.edge {
  position: relative;
  z-index: 3;
  padding: clamp(28px, 3.4vw, 56px) 0 clamp(20px, 2.4vw, 36px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
}
.edge__head { max-width: 46em; padding-inline: clamp(22px, 3vw, 48px); }
.edge__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.edge__title {
  max-width: 14em;
  margin: 0;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.08;
}
.edge__text {
  max-width: 30em;
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-soft);
}
.edge__head .btn-cta { margin-top: 26px; }
.edge__rule {
  height: 0;
  margin: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 48px) 0;
  border-top: 1px dashed var(--line);
  transform-origin: 0 50%;
  transition: transform 1.3s var(--ease) .2s;
}

/* Yellow card on the left, three rows stacked on the right */
.edge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 12px;
  margin-top: clamp(26px, 3vw, 40px);
  padding-inline: clamp(14px, 1.6vw, 28px);
}
.edge-card {
  border-radius: var(--radius-lg);
  background: #221e1b;
  color: var(--text);
}
.edge-card__title { margin: 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.25; }
.edge-card__text { max-width: 36em; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.edge-card__src { margin: 14px 0 0; font-size: 12px; letter-spacing: .02em; color: var(--muted); }

/* Rows: icon + title + example */
.edge-card--row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 1.6vw, 24px);
  padding: clamp(20px, 1.8vw, 28px);
}
.edge-card__icon {
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.edge-card__icon > * { stroke-dasharray: 100; }

/* The key card: number top left, dot field top right, text along the bottom */
.edge-card--main {
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(22px, 2vw, 32px);
  background: var(--yellow);
  color: var(--ink);
}
.edge-card__lead { display: contents; }
.edge-card__num {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: clamp(64px, 6.4vw, 104px);
  line-height: 1;
  letter-spacing: -.02em;
}
.edge-card__num sup {
  margin-top: .3em;
  font-family: var(--font);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}
.edge-card__of { grid-area: 2 / 1; margin: 10px 0 0; font-size: 15px; color: #5d5634; }
.edge-card--main .edge-card__body { grid-area: 4 / 1 / 5 / 3; padding-top: 24px; }
.edge-card--main .edge-card__text { color: #5d5634; }
.edge-card--main .edge-card__src { color: #7a7350; }

/* Dot field: 160 enquiries → 122 qualified → 11 sales (built by main.js).
   The legend sits under the number and reads like the funnel. */
.funnel { display: contents; }
.funnel__dots {
  grid-area: 1 / 2 / 4 / 3;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(16, 12px);
  gap: 7px;
}
.funnel__dots i {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 26, 20, .32);
  transition: opacity .35s, transform .5s var(--spring), background-color .5s var(--ease), border-color .5s var(--ease);
}
.funnel__dots i.is-good { background: rgba(27, 26, 20, .32); border-color: transparent; }
.funnel__dots i.is-sale { background: var(--ink); border-color: transparent; }
.funnel__legend {
  grid-area: 3 / 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 20px;
}
.funnel__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px 0 9px;
  border: 1px solid rgba(27, 26, 20, .18);
  border-radius: 999px;
  font-size: 13px;
  color: #5d5634;
  cursor: default;
  transition: background-color .3s, border-color .3s, color .3s;
}
.funnel__key b { font-weight: 500; color: var(--ink); }
.funnel__key i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(27, 26, 20, .32); }
.funnel__key--good i { background: rgba(27, 26, 20, .32); border-color: transparent; }
.funnel__key--sale i { background: var(--ink); border-color: transparent; }
.funnel__key:hover,
.funnel__key:focus-visible { background: rgba(27, 26, 20, .08); border-color: rgba(27, 26, 20, .4); outline: none; }
/* Point at a status: only those enquiries stay lit */
.funnel:has(.funnel__key--good:is(:hover, :focus-visible)) .funnel__dots i:not(.is-good),
.funnel:has(.funnel__key--sale:is(:hover, :focus-visible)) .funnel__dots i:not(.is-sale) { opacity: .15; }
.funnel:has(.funnel__key--sale:is(:hover, :focus-visible)) .funnel__dots i.is-sale { transform: scale(1.25); }

/* Odometer digits (main.js wraps each digit) */
.odo { display: inline-flex; }
.odo__cell { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.odo__sizer { visibility: hidden; }
.odo__strip {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
  transform: translateY(calc((10 + var(--d, 0)) * -1em));
  transition: transform 1.8s var(--ease);
  transition-delay: calc(.7s + var(--i, 0) * .12s + var(--k, 0) * .09s);
}

/* Entrance */
.js .edge:not(.is-in) .edge__head > :not(.reveal-title),
.js .edge:not(.is-in) .edge-card { opacity: 0; }
.js .edge:not(.is-in) .edge__rule { transform: scaleX(0); transition: none; }
.js .edge:not(.is-in) .odo__strip { transform: translateY(0); transition: none; }
.js .edge:not(.is-in) .funnel__dots i { opacity: 0; transform: scale(.3); }
.js .edge:not(.is-in) .funnel__dots i.is-good,
.js .edge:not(.is-in) .funnel__dots i.is-sale { background: transparent; border-color: rgba(27, 26, 20, .32); }
.edge.is-in .edge__head > :not(.reveal-title) { animation: offer-rise .9s var(--ease) backwards; }
.edge.is-in .edge__head > :nth-child(3) { animation-delay: .4s; }
.edge.is-in .edge-card { animation: card-rise 1.1s var(--ease) backwards; animation-delay: calc(.35s + var(--i, 0) * .1s); }
.edge.is-in .edge-card__icon > * { animation: icon-draw 1.2s var(--ease) backwards; animation-delay: calc(.8s + var(--i, 0) * .1s); }
/* dots: appear → qualified get marked → the 11 sales land last */
.edge.is-in .funnel__dots i { transition-delay: calc(.8s + var(--n, 0) * 4ms); }
.edge.is-in .funnel__dots i.is-good { transition-delay: calc(.8s + var(--n, 0) * 4ms), calc(.8s + var(--n, 0) * 4ms), calc(1.8s + var(--r, 0) * 6ms), calc(1.8s + var(--r, 0) * 6ms); }
.edge.is-in .funnel__dots i.is-sale { transition-delay: calc(.8s + var(--n, 0) * 4ms), calc(.8s + var(--n, 0) * 4ms), calc(2.8s + var(--r, 0) * 90ms), calc(2.8s + var(--r, 0) * 90ms); }
/* once the field has settled, hover answers at once */
.edge.is-in.is-settled .funnel__dots i { transition-delay: 0s; }

@media (max-width: 1099px) {
  .edge__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .edge-card--main { grid-row: auto; }
}
@media (max-width: 700px) {
  .edge { border-radius: var(--radius-lg); }
  .edge__grid { gap: 10px; padding-inline: 14px; }
  /* number → dot field → legend → text */
  .edge-card--main { grid-template-columns: 1fr; grid-template-rows: none; padding: 22px 20px; }
  .edge-card--main :is(.edge-card__num, .edge-card__of, .funnel__dots, .funnel__legend, .edge-card__body) { grid-area: auto; }
  .edge-card__of { order: 1; }
  .funnel__dots { order: 2; margin-top: 22px; grid-template-columns: repeat(16, 1fr); gap: 5px; }
  .funnel__dots i { width: auto; height: auto; aspect-ratio: 1; }
  .funnel__legend { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; gap: 6px; }
  .funnel__key {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 6px;
    min-height: 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 12px;
  }
  .funnel__key b { font-size: 16px; }
  .funnel__key span { grid-column: 1 / -1; }
  .edge-card--main .edge-card__body { order: 4; padding-top: 22px; }
  .edge-card--row { grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 18px 18px 20px; }
  .edge-card__icon { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .edge.is-in .edge__head > *,
  .edge.is-in .edge-card,
  .edge.is-in .edge-card__icon > * { animation: none; }
}

/* ==========================================================================
   Cases (home): a row of client cards that scrolls sideways, with a filter.
   Each card shows the client's real website (a full-page screenshot that
   scrolls inside its frame on hover), the key number and where it comes from,
   and a link to the site. The row ends with the one yellow card: the CTA.
   ========================================================================== */
.cases {
  --case-w: clamp(280px, 27vw, 400px);
  --shot-h: min(calc(var(--case-w) * .52), 21vh);   /* the block still fits one screen */
  position: relative;
  z-index: 3;
  padding: clamp(28px, 3.4vw, 56px) 0 clamp(20px, 2.4vw, 36px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;   /* the row runs out to the sheet's edge */
}
.cases__head { max-width: 46em; padding-inline: clamp(22px, 3vw, 48px); }
.cases__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cases__title { max-width: 14em; margin: 0; font-size: clamp(32px, 3.5vw, 56px); line-height: 1.08; }
.cases__text {
  max-width: 30em;
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Filter + arrows */
.cases__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 2.6vw, 36px);
  padding-inline: clamp(22px, 3vw, 48px);
}
.cases__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cases__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: none;
  font-size: 14px;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s;
}
.cases__chip i { font-style: normal; font-size: 12px; color: var(--muted); transition: color .25s; }
.cases__chip:hover { border-color: rgba(255, 255, 255, .34); color: var(--text); }
.cases__chip[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.cases__chip[aria-pressed="true"] i { color: #6f6843; }
.cases__nav { display: flex; gap: 8px; }
.cases__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: none;
  color: var(--text);
  transition: background-color .25s, border-color .25s, color .25s, opacity .25s;
}
.cases__arrow svg,
.case__go svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cases__arrow:hover:not(:disabled) { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.cases__arrow:disabled { opacity: .3; cursor: default; }

/* The row: native sideways scroll with snapping; a mouse can drag it (main.js) */
.cases__viewport {
  margin-top: clamp(18px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(14px, 1.6vw, 28px);
  scrollbar-width: none;
}
.cases__viewport::-webkit-scrollbar { display: none; }
.cases__viewport.is-dragging { scroll-snap-type: none; user-select: none; }
.cases__track {
  display: flex;
  gap: 12px;
  width: max-content;
  margin: 0;
  padding: 0 clamp(14px, 1.6vw, 28px);
  list-style: none;
}
.case { flex: none; width: var(--case-w); scroll-snap-align: start; }
.case[hidden] { display: none; }

.case__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: #221e1b;
}

/* Screenshot in a light browser frame */
.case__media { position: relative; overflow: hidden; border-radius: 14px; background: #f3efe9; }
.case__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  background: #e9e4dc;
  font-size: 11px;
  color: #6f6a62;
}
.case__bar i { width: 7px; height: 7px; border-radius: 50%; background: #cdc6bb; }
.case__bar span { margin-left: 8px; }
.case__shot { height: var(--shot-h); overflow: hidden; }
.case__shot img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;          /* a short screenshot still fills the frame */
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 1.2s var(--ease);
}
/* hover: the client's site scrolls by inside the frame, like a quick visit */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case:hover .case__shot img {
    transform: translateY(calc(var(--shot-h) - 100%));
    transition: transform 6s cubic-bezier(.45, 0, .25, 1);
  }
}

/* No site to show (or the site can't be captured): the client's mark on a cover */
.case__media--cover { display: grid; place-items: center; height: calc(var(--shot-h) + 26px); }
.case__cover-logo { width: auto; height: calc(var(--shot-h) * .55); transition: transform .6s var(--spring); }
.case__cover-photo {
  width: auto;
  height: calc(var(--shot-h) * .62);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  transition: transform .6s var(--spring);
}
.case:hover :is(.case__cover-logo, .case__cover-photo) { transform: scale(1.06); }

.case__body { display: flex; flex-direction: column; flex: 1; padding: 14px 8px 8px; }
.case__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* channels sit on the picture's corner, on a dark glass chip */
.case__tags {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}
.case__tags span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(21, 19, 17, .78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 12px;
  color: #f3efe9;
}
.case__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: -2px -2px 0 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: var(--text);
  transition: background-color .25s, border-color .25s, color .25s, transform .45s var(--spring);
}
.case__go:hover,
.case__go:focus-visible { border-color: var(--yellow); background: var(--yellow); color: var(--ink); transform: rotate(45deg); }
.case__title { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.25; }
.case__title small {
  display: block;
  margin-top: 4px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
.case__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; }
.case__num b {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 300;
  line-height: 1;
  color: var(--yellow);
  white-space: nowrap;
}
.case__num span { font-size: 14px; color: var(--text-soft); }
/* numbers still being checked (⟦…⟧ in the brand doc): a quiet status, not a figure */
.case__num--pending b {
  padding: 5px 12px;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}
.case__text { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.case__src { margin: auto 0 0; padding-top: 12px; font-size: 12px; line-height: 1.4; color: var(--muted); }

/* Last card: the call to action (the one yellow card in the row) */
.case--next .case__card {
  justify-content: flex-end;
  padding: clamp(22px, 2vw, 32px);
  background: var(--yellow);
  color: var(--ink);
}
.case__next-title { margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; }
.case__next-text { max-width: 22em; margin: 12px 0 22px; font-size: 15px; line-height: 1.5; color: #5d5634; }
/* dark pill on yellow cards: yellow label and dot, the same light flood */
.btn-cta--dark { --pill: var(--ink); --dot: var(--ink); align-self: flex-start; color: var(--yellow); }
.btn-cta--dark svg { background: var(--yellow); }
@media (hover: hover) { .btn-cta--dark:hover svg { background: var(--ink); } }
.btn-cta--dark:focus-visible svg { background: var(--ink); }
@media (hover: none) { .btn-cta--dark svg { background: var(--yellow); color: var(--ink); } }

/* Entrance; a filter change replays a short rise on the cards that stay */
.js .cases:not(.is-in) .cases__head > :not(.reveal-title),
.js .cases:not(.is-in) .cases__bar,
.js .cases:not(.is-in) .case { opacity: 0; }
.cases.is-in .cases__head > :not(.reveal-title) { animation: offer-rise .9s var(--ease) backwards; }
.cases.is-in .cases__head > :nth-child(3) { animation-delay: .4s; }
.cases.is-in .cases__bar { animation: offer-rise .9s var(--ease) .45s backwards; }
.cases.is-in .case { animation: card-rise 1.1s var(--ease) backwards; animation-delay: calc(.5s + var(--i, 0) * .08s); }
.cases.is-in .case.is-shown { animation: case-in .6s var(--ease) backwards; animation-delay: calc(var(--n, 0) * .05s); }
@keyframes case-in { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 700px) {
  .cases { --case-w: 82vw; border-radius: var(--radius-lg); }
  .cases__bar { padding-inline: 0; }
  /* chips become one swipeable line; arrows give way to the swipe */
  .cases__filters { flex-wrap: nowrap; overflow-x: auto; padding-inline: 22px; scrollbar-width: none; }
  .cases__filters::-webkit-scrollbar { display: none; }
  .cases__nav { display: none; }
  .cases__track { gap: 10px; padding-inline: 14px; }
  .cases__viewport { scroll-padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cases.is-in :is(.cases__head > *, .cases__bar, .case, .case.is-shown) { animation: none; }
}

/* ==========================================================================
   Team (home, #about): from an "About us" reference, kept on our dark sheet.
   A giant "Latum" rises letter by letter; the founder's photo tucks under
   its lower edge; a line diagram shows who is in the team. Photo frames are
   marked placeholders until real photos arrive (no stock people).
   ========================================================================== */
.team {
  position: relative;
  z-index: 3;
  padding: clamp(24px, min(3.4vw, 5vh), 56px) 0 clamp(24px, min(3vw, 4vh), 48px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .46fr);
  grid-template-areas:
    "label label     small"
    "word  word      small"
    "about photo     small"
    "org   principle .";
  column-gap: clamp(24px, 3vw, 56px);
  padding-inline: clamp(22px, 3vw, 48px);
}

/* The giant word: each letter rises from its own mask */
.team__word {
  grid-area: word;
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(96px, min(14vw, 23vh), 230px);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.03em;
  white-space: nowrap;   /* one word: the letters must never wrap apart */
  color: var(--text);
  pointer-events: none;
}
.team__word > span { display: inline-block; overflow: hidden; padding-bottom: .06em; vertical-align: top; }
.team__word > span > span { display: inline-block; transition: transform 1.1s var(--ease); transition-delay: calc(.15s + var(--l, 0) * .07s); }

/* Photos: rounded, opening upwards from the bottom edge as the block arrives */
:is(.team__photo, .team__small) {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #241f1b;
  clip-path: inset(0 round var(--radius-lg));
  transition: clip-path 1.2s var(--ease) .35s;
}
:is(.team__photo, .team__small) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The team photo. As in the reference, it tucks under the word on purpose:
   its top (the studio wall, extended above the heads in the file) dissolves
   into the sheet, so the letters sit on the wall, never on a face. */
.team__photo {
  grid-area: photo;
  z-index: 1;
  margin-top: calc(clamp(96px, min(14vw, 23vh), 230px) * -.32);   /* tucks under the word */
  aspect-ratio: 16 / 11;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%);
}
.team__photo img { object-position: 50% 0; }
.team__small {   /* the founder */
  grid-area: small;
  align-self: start;
  aspect-ratio: 4 / 5;
  margin-top: calc(clamp(96px, min(14vw, 23vh), 230px) * .12);
  transition-delay: .5s;
}

.team__about { grid-area: about; padding-top: clamp(14px, 2.4vh, 32px); }
.team__caption { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.team__label {   /* the same section label as every other block */
  grid-area: label;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.team__text { max-width: 34em; margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* Who is in the team: founder on top, a dashed branch to the roles */
.team__org { grid-area: org; align-self: end; padding-top: 24px; }
.team__root {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
}
.team__ava {   /* the founder's face */
  flex: none;
  overflow: hidden;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #241f1b;
}
.team__ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team__branch {
  display: block;
  width: calc(100% - 40px);
  height: 18px;
  margin-left: 20px;
  border-left: 1px dashed rgba(255, 255, 255, .3);
  border-bottom: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 0 0 0 10px;
  transform-origin: 0 0;
  transition: transform 1s var(--ease) .8s;
}
.team__nodes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0 0 0 20px; list-style: none; }
.team__nodes li {
  padding: 7px 12px;
  border-radius: 999px;
  background: #241f1b;
  font-size: 13px;
  color: var(--text-soft);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(1.1s + var(--i, 0) * .08s);
}
.team__nodes b { font-family: var(--font-display); font-weight: 400; color: var(--yellow); }
.team__note { margin: 12px 0 0 20px; font-size: 12px; color: var(--muted); }

.team__principle { grid-area: principle; align-self: start; padding-top: clamp(16px, 2.6vh, 28px); }
.team__principle-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; color: var(--text); }
.team__rules { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.team__rules li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--text-soft); }
.team__rules li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}
.team__stroke { width: 36px; height: 0; border-top: 1.5px solid var(--yellow); transform-origin: 0 50%; transition: transform .8s var(--ease) .9s; }

/* Entrance */
.js .team:not(.is-in) .team__word > span > span { transform: translateY(105%); transition: none; }
.js .team:not(.is-in) :is(.team__photo, .team__small) { clip-path: inset(100% 0 0 0 round var(--radius-lg)); transition: none; }
.js .team:not(.is-in) :is(.team__about, .team__root, .team__note, .team__principle) { opacity: 0; transform: translateY(20px); }
.js .team:not(.is-in) .team__branch { transform: scaleY(0); transition: none; }
.js .team:not(.is-in) .team__nodes li { opacity: 0; transform: translateY(10px); }
.js .team:not(.is-in) .team__stroke { transform: scaleX(0); transition: none; }
:is(.team__about, .team__root, .team__note, .team__principle) { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.team.is-in .team__about { transition-delay: .5s; }
.team.is-in .team__root { transition-delay: .7s; }
.team.is-in .team__principle { transition-delay: .75s; }
.team.is-in .team__note { transition-delay: 1.4s; }

@media (max-width: 1099px) {
  .team__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "word" "about" "photo" "org" "principle";
    row-gap: 22px;
  }
  .team__word { font-size: clamp(56px, 17vw, 160px); }   /* 'Latum' is ~5em wide in Unbounded */
  .team__photo { margin-top: 0; -webkit-mask-image: none; mask-image: none; }
  .team__photo img { object-position: 50% 80%; }   /* no word above it here: skip most of the extra wall */
  .team__small { display: none; }
  .team__about { padding-top: 0; }
}
@media (max-width: 700px) {
  .team { border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .team * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Promo (home, #gift): "a website as a gift", the offer from the team.
   The reel plays in our own player in the middle. Posts on both sides retell
   it briefly, light up while the voice-over says them and jump the video to
   their moment; the CTA card under the right posts lights up at the end.
   ========================================================================== */
.promo {
  --pad-y: clamp(22px, min(3vw, 4.4vh), 48px);
  /* the video is as tall as the screen allows: the block fits one screen */
  --vp-h: clamp(440px, calc(100svh - 80px - 2 * var(--pad-y)), 720px);
  position: relative;
  z-index: 3;
  padding: var(--pad-y) clamp(22px, 3vw, 48px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.promo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
}
.promo__side { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; }
.promo__posts { display: grid; gap: 12px; }
/* desktop: each side reads top to bottom, its three parts spread evenly
   (left: title, 0:00, 0:08; right: 0:19, 0:26, the quiz) */
@media (min-width: 1100px) { .promo__side .promo__posts { display: contents; } }

.promo__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.promo__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, min(3.7vw, 6.6vh), 62px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.01em;
}
/* each line rises from its own mask, then the marker runs over the gift */
.promo__line { display: block; overflow: hidden; padding: .04em .12em .1em 0; margin-bottom: -.06em; }
.promo__line > span { display: inline-block; transition: transform 1s var(--ease); }
.promo__line:nth-child(2) > span { transition-delay: .1s; }
.promo__title mark {
  margin-left: -.1em;
  padding: 0 .12em .04em .1em;
  border-radius: .16em;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / 100% 100%;
  color: var(--ink);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size .7s var(--ease) .75s, color .2s .95s;
}

/* Posts: short notes from the team, each tied to a moment of the video */
.post {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  background: #1f1c19;
  transition: border-color .4s, background-color .4s, opacity .8s var(--ease), transform .8s var(--ease);
}
.post:hover { border-color: rgba(255, 255, 255, .2); }
.post__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.post__ava {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--yellow);
  font: 400 12px/1 var(--font-display);
  color: var(--ink);
}
.post__who { min-width: 0; }
.post__who b { font-weight: 500; color: var(--text); }
/* the time chip is the card's button: its ::before stretches over the card */
.post__time {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: none;
  font: 12px/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  transition: border-color .25s, color .25s;
}
.post__time::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post__time svg { width: 10px; height: 10px; fill: currentColor; }
.post:hover .post__time { border-color: var(--yellow); color: var(--yellow); }
.post__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-soft); transition: color .4s; }
/* how far the voice-over is through this post */
.post__bar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--yellow);
  transform: scaleX(var(--cp, 0));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .3s;
}
.post.is-now { border-color: rgba(244, 232, 154, .45); background: #25211c; }
.post.is-now .post__text { color: var(--text); }
.post.is-now .post__time { border-color: var(--yellow); color: var(--yellow); }
.post.is-now .post__bar { opacity: 1; }

/* CTA: yellow card; lights up when the video asks for the quiz */
.promo__cta {
  padding: 18px 18px 16px;
  border-radius: var(--radius-lg);
  background: var(--yellow);
  color: var(--ink);
  transition: box-shadow .5s var(--ease), opacity .8s var(--ease), transform .8s var(--ease);
}
.promo__cta-text { margin: 0 0 14px; font-size: 16px; line-height: 1.4; }
.promo__cta-note { margin: 12px 0 0; font-size: 12px; color: rgba(27, 26, 20, .62); }
.promo__cta.is-now { box-shadow: 0 0 0 4px rgba(244, 232, 154, .28); }

/* --------------------------------------------------------------------------
   Video player (our own controls; the native ones stay without JS)
   -------------------------------------------------------------------------- */
.promo__video { height: var(--vp-h); aspect-ratio: 9 / 16; }
.vp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-xl);
  background: #0e0d0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
  clip-path: inset(0 round var(--radius-xl));
  transition: clip-path 1.2s var(--ease) .2s;
}
.vp__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .vp__ui { display: none; }
.vp__ui { display: contents; }

/* the whole picture is the play / pause button */
.vp__hit { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; }
.vp__big {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  animation: vp-pulse 2.4s var(--ease) infinite;
  transition: opacity .3s, transform .45s var(--spring);
}
.vp__big svg { width: 30px; height: 30px; }
.vp__big .vp__i-play { margin-left: 4px; fill: currentColor; }
.vp__big .vp__i-replay { display: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vp[data-state="ended"] .vp__big .vp__i-play { display: none; }
.vp[data-state="ended"] .vp__big .vp__i-replay { display: block; }
.vp:is([data-state="playing"], [data-state="loading"]) .vp__big { opacity: 0; transform: scale(.6); animation: none; }
@keyframes vp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 232, 154, .5); }
  70%, 100% { box-shadow: 0 0 0 22px rgba(244, 232, 154, 0); }
}

/* "Turn sound on": the main affordance while the muted preview plays */
.vp__sound {
  position: absolute;
  z-index: 3;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  font: 500 13px/1 var(--font);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: opacity .3s, transform .45s var(--spring);
}
.vp__sound svg, .vp__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vp__sound svg path:first-child, .vp__mute svg path:first-child { fill: currentColor; }
.vp:not(.is-muted) .vp__sound,
.vp:not([data-state="playing"]) .vp__sound { opacity: 0; transform: translateY(-8px) scale(.9); pointer-events: none; }

/* control bar */
.vp__bar {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 36px 10px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
  color: #fff;
  transition: opacity .35s, transform .35s var(--ease);
}
.vp[data-state="idle"] .vp__bar,
.vp.is-still[data-state="playing"] .vp__bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vp__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  transition: background-color .2s;
}
.vp__btn:hover { background: rgba(255, 255, 255, .16); }
.vp__play .vp__i-play { fill: currentColor; stroke: none; }
.vp__play .vp__i-pause { display: none; stroke-width: 2.6; }
.vp[data-state="playing"] .vp__play .vp__i-play { display: none; }
.vp[data-state="playing"] .vp__play .vp__i-pause { display: block; }
.vp__mute .vp__x { display: none; }
.vp.is-muted .vp__mute .vp__x { display: block; }
.vp.is-muted .vp__mute .vp__wave { display: none; }

.vp__track { position: relative; flex: 1; min-width: 40px; height: 32px; margin: 0 6px; cursor: pointer; touch-action: none; }
.vp__track::before,
.vp__fill { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.vp__track::before { right: 0; background: rgba(255, 255, 255, .28); }
.vp__fill { width: calc(var(--p, 0) * 100%); background: var(--yellow); }
.vp__tick { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 3px; height: 9px; margin: -4.5px 0 0 -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.vp__knob {
  position: absolute;
  top: 50%; left: calc(var(--p, 0) * 100%);
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--yellow);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.vp__track:hover .vp__knob, .vp__track:focus-visible .vp__knob, .vp.is-scrub .vp__knob { transform: scale(1); }
.vp__track:focus-visible { outline-offset: 0; border-radius: 6px; }
.vp__time { flex: none; margin-right: 2px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .88); }

.vp:fullscreen { border-radius: 0; clip-path: none; }
.vp:fullscreen .vp__video { object-fit: contain; }

/* Entrance */
.js .promo:not(.is-in) .promo__line > span { transform: translateY(110%); transition: none; }
.js .promo:not(.is-in) .promo__title mark { background-size: 0% 100%; color: var(--text); transition: none; }
.js .promo:not(.is-in) .promo__label { opacity: 0; transform: translateY(16px); }
.promo__label { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .promo:not(.is-in) .vp { clip-path: inset(100% 0 0 0 round var(--radius-xl)); transition: none; }
.js .promo:not(.is-in) :is(.post, .promo__cta) { opacity: 0; transform: translateY(22px); transition: none; }
.promo.is-in .post { transition: opacity .8s var(--ease) calc(.45s + var(--i, 0) * .1s), transform .8s var(--ease) calc(.45s + var(--i, 0) * .1s), border-color .4s, background-color .4s; }
.promo.is-in .promo__cta { transition: box-shadow .5s var(--ease), opacity .8s var(--ease) .85s, transform .8s var(--ease) .85s; }

/* Tablets: the video on the left, the posts and the CTA beside it */
@media (max-width: 1099px) {
  .promo { --vp-h: clamp(420px, 74svh, 640px); }
  .promo__grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "head head" "video left" "video right" "video cta";
    grid-template-rows: auto auto auto 1fr;
    gap: 16px clamp(18px, 3vw, 32px);
  }
  .promo__side { display: contents; }
  .promo__head { grid-area: head; margin-bottom: 8px; }
  .promo__video { grid-area: video; }
  .promo__side--left .promo__posts { grid-area: left; }
  .promo__side--right .promo__posts { grid-area: right; }
  .promo__cta { grid-area: cta; align-self: start; }
}
/* Phones: one column, the video first after the title */
@media (max-width: 699px) {
  .promo { border-radius: var(--radius-lg); }
  .promo__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "video" "left" "right" "cta"; grid-template-rows: none; gap: 14px; }
  .promo__video { justify-self: center; width: min(100%, calc(78svh * 9 / 16)); height: auto; margin-bottom: 8px; }
  .vp__big { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo *, .promo { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Brief (home, #brief): the lead form, where every CTA leads.
   Left: the promise (title with a marker, a line pointing at the form,
   three honest facts). Right: the form card. К’юбик sits on its top edge
   and lives through the form with the visitor: looks at the field being
   filled, cheers a choice, says the name back, frowns at a mistake, jumps
   into the middle and waves when the request is sent. A light glow on the
   card's edge follows the cursor; a yellow line on top fills step by step.
   ========================================================================== */
.brief {
  --brief-card: #1c1916;
  position: relative;
  z-index: 3;
  scroll-margin-top: 76px;
  padding: clamp(40px, min(4vw, 6vh), 64px) clamp(22px, 3vw, 48px) clamp(28px, min(3vw, 4.4vh), 48px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
}
.brief__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

/* Left: the promise */
.brief__label {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.brief__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, min(4.4vw, 7.6vh), 74px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.brief__l { display: block; overflow: hidden; padding: .04em .12em .1em 0; margin-bottom: -.06em; }
.brief__l > span { display: inline-block; transition: transform 1s var(--ease); }
.brief__l + .brief__l > span { transition-delay: .1s; }
.brief__title mark {
  margin-left: -.06em;
  padding: 0 .12em .04em .08em;
  border-radius: .16em;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / 100% 100%;
  color: var(--ink);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size .7s var(--ease) .75s, color .2s .95s;
}
/* a thin line runs from under the title towards the form */
.brief__line {
  display: block;
  width: min(100%, 320px);
  height: clamp(44px, 7vh, 80px);
  margin: clamp(10px, 2vh, 22px) 0 clamp(8px, 1.6vh, 18px);
  overflow: visible;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.brief__line path { vector-effect: non-scaling-stroke; stroke-dasharray: 100; transition: stroke-dashoffset 1.3s var(--ease) .5s; }
.brief__lead { max-width: 30em; margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--text-soft); }
.brief__promises { display: grid; gap: 12px; margin: clamp(18px, 3vh, 30px) 0 0; padding: 0; list-style: none; }
.brief__promises li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(.6s + var(--i, 0) * .1s);
}
.brief__promises svg {
  flex: none;
  box-sizing: border-box;
  width: 40px; height: 40px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brief__promises svg > * { stroke-dasharray: 100; }
.brief__promises b { display: block; font-weight: 400; }
.brief__promises small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Right: the form card
   -------------------------------------------------------------------------- */
.brief__card {
  --mx: 78%; --my: 0%;
  position: relative;
  isolation: isolate;
  padding: clamp(30px, 4.4vh, 44px) clamp(22px, 2.6vw, 40px) clamp(24px, 3.4vh, 34px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgba(244, 232, 154, .07), rgba(244, 232, 154, 0) 60%),
    var(--brief-card);
  transition: height .6s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
/* the edge lights up where the cursor is */
.brief__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(244, 232, 154, .85), rgba(244, 232, 154, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* progress: a yellow line along the top edge, a third per step */
.brief__progress {
  position: absolute;
  top: -1px; left: 28px; right: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--yellow);
  transform: scaleX(var(--prog, 0));
  transform-origin: 0 50%;
  transition: transform .7s var(--spring);
}

/* К’юбик on the top edge + what he says */
.brief__kubik {
  position: absolute;
  z-index: 4;
  top: -3.1em;
  right: 2.4em;
  font-size: 9px;
  width: 7.2em;
  height: 5.8em;
  transition: top .75s var(--spring), right .75s var(--spring), font-size .75s var(--spring);
}
.brief__buddy { position: absolute; inset: 0; cursor: default; }
.brief .buddy__badge { border-color: var(--brief-card); }
.brief__say {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px 999px 4px 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font: 500 14px/1.2 var(--font);
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translate(10px, -50%) scale(.6);
  transform-origin: 100% 50%;
  transition: opacity .2s, transform .3s var(--ease);
  pointer-events: none;
}
.brief__say.is-on { opacity: 1; transform: translate(0, -50%); transition: opacity .15s, transform .5s var(--spring); }
.brief__say.is-swap { transform: translate(0, -50%) scale(.92); transition-duration: .08s; }

/* gift ribbon (when the visitor came from the promo) */
.brief__gift {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 8px 8px 12px;
  border-radius: 14px;
  background: rgba(244, 232, 154, .1);
  font-size: 13px;
  color: var(--yellow);
}
.brief__gift[hidden] { display: none; }
.brief__gift svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.brief__gift span { flex: 1; }
.brief__gift-x { flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; color: inherit; }
.brief__gift-x:hover { background: rgba(244, 232, 154, .16); }

/* steps */
.brief__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.brief__step + .brief__step { margin-top: clamp(18px, 3vh, 28px); }
.brief__step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 15px;
  color: var(--text);
}
.brief__step-title small { font-size: 13px; color: var(--muted); }
.brief__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  font: 400 11px/1 var(--font-display);
  color: var(--text-soft);
  transition: background-color .3s, border-color .3s, color .3s;
}
.brief__step.is-done .brief__num { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }

/* service chips: real checkboxes under a pill; the yellow floods out of the click */
.brief__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px 0 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-soft);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: border-color .3s, color .3s, opacity .7s var(--ease), transform .7s var(--ease), scale .18s var(--ease);
}
.chip:hover { border-color: rgba(255, 255, 255, .32); color: var(--text); }
.chip:active { scale: .96; }
.chip input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:has(input:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 3px; }
.chip__fill {
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--yellow);
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path .55s var(--ease);
}
.chip__mark {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background-color .3s, transform .5s var(--spring);
}
.chip__mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chip__plus { transition: opacity .2s, transform .4s var(--spring); transform-origin: 12px 12px; }
.chip__check { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .4s var(--ease); }
.chip.is-on { border-color: var(--yellow); color: var(--ink); }
.chip.is-on .chip__fill { clip-path: circle(160% at var(--cx, 50%) var(--cy, 50%)); }
.chip.is-on .chip__mark { background: var(--ink); color: var(--yellow); transform: rotate(-8deg); }
.chip.is-on .chip__plus { opacity: 0; transform: rotate(90deg) scale(.4); }
.chip.is-on .chip__check { stroke-dashoffset: 0; transition-delay: .12s; }

/* fields: an underline that draws in yellow, a label that floats up */
.brief__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.field--email { grid-column: 1 / -1; }
.field { position: relative; padding-top: 16px; }
.field input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 28px 0 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  background: none;
  font-size: 17px;
  color: var(--text);
  outline: none;
}
.field input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 100px var(--brief-card); -webkit-text-fill-color: var(--text); caret-color: var(--text); }
.field label {
  position: absolute;
  left: 0; top: 27px;
  font-size: 16px;
  color: var(--muted);
  transform-origin: 0 0;
  transition: transform .35s var(--ease), color .3s;
  pointer-events: none;
}
.field label small { font-size: .8em; color: var(--muted); opacity: .8; }
.field:focus-within label,
.field.is-filled label { transform: translateY(-24px) scale(.78); color: var(--text-soft); }
.field__line {   /* on the input's bottom edge (16px label room + 44px input) */
  position: absolute;
  left: 0; right: 0; top: 58px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease), background-color .3s;
}
.field:has(.field__err:not(:empty)) .field__line,
.field:focus-within .field__line { transform: scaleX(1); }
.field__ok {
  position: absolute;
  right: 2px; top: calc(16px + 12px);
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.field__ok path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .45s var(--ease); }
.field.is-ok .field__ok path { stroke-dashoffset: 0; }
.field__err { min-height: 0; margin: 6px 0 0; font-size: 12px; line-height: 1.3; color: #f5b04a; }
.field__err:empty { display: none; }
.field:has(.field__err:not(:empty)) .field__line { background: #f5a524; }
.brief__err-svc { margin-top: 10px; }
.field.is-shake { animation: brief-shake .42s var(--ease); }
@keyframes brief-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.brief__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.brief__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(20px, 3.4vh, 30px); }
.brief__note { margin: 0; max-width: 18em; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* the button wakes up when everything needed is in */
.brief__form.is-ready .btn-cta { animation: brief-ready 1.8s var(--ease) infinite; }
@keyframes brief-ready {
  0% { box-shadow: 0 0 0 0 rgba(244, 232, 154, .45); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(244, 232, 154, 0); }
}
.brief__form.is-sending .btn-cta { pointer-events: none; opacity: .75; animation: none; }

/* Sent */
.brief__form { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.brief__card.is-leaving .brief__form { opacity: 0; transform: translateY(-12px); }
.brief__done { padding-top: 92px; text-align: center; }
.brief__done-title { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 36px); font-weight: 300; line-height: 1.15; outline: none; }
.brief__done-text { max-width: 26em; margin: 14px auto 0; font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.brief__done-link { display: inline-block; margin-top: 22px; font-size: 15px; color: var(--yellow); border-bottom: 1px solid rgba(244, 232, 154, .4); }
.brief__done-link:hover { border-bottom-color: var(--yellow); }
.brief__done > * { animation: offer-rise .8s var(--ease) backwards; }
.brief__done > :nth-child(2) { animation-delay: .1s; }
.brief__done > :nth-child(3) { animation-delay: .2s; }
.brief__card.is-done .brief__kubik { top: 34px; right: calc(50% - 3.6em); font-size: 12px; }
.brief__err-send { flex-basis: 100%; margin: 0; }
.brief__card.is-done .brief__say { opacity: 0; }

/* confetti from К’юбик */
.brief__confetti { position: absolute; z-index: 3; top: 60px; left: 50%; width: 0; height: 0; pointer-events: none; }
.brief__confetti i {
  position: absolute;
  width: 4px; height: 12px;
  border-radius: 2px;
  background: var(--c, var(--yellow));
  animation: brief-pop 1.2s var(--ease) forwards;
}
@keyframes brief-pop {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
}

/* Entrance */
.js .brief:not(.is-in) .brief__l > span { transform: translateY(110%); transition: none; }
.js .brief:not(.is-in) .brief__title mark { background-size: 0% 100%; color: var(--text); transition: none; }
.js .brief:not(.is-in) .brief__line path { stroke-dashoffset: 100; transition: none; }
.js .brief:not(.is-in) :is(.brief__label, .brief__lead, .brief__promises li) { opacity: 0; transform: translateY(20px); }
.brief__label, .brief__lead { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.brief.is-in .brief__lead { transition-delay: .45s; }
.brief.is-in .brief__promises svg > * { animation: icon-draw 1.2s var(--ease) backwards; animation-delay: calc(.8s + var(--i, 0) * .1s); }
.js .brief:not(.is-in) .brief__card { opacity: 0; transform: translateY(40px) scale(.97); }
.brief.is-in .brief__card { transition-delay: 0s, .2s, .2s; }
.brief__buddy { transition: transform .7s var(--spring), opacity .3s; }
.js .brief:not(.is-in) .brief__buddy { opacity: 0; transform: translateY(60%) scale(.2); transition: none; }
.brief.is-in .brief__buddy { transition-delay: .9s; }
.js .brief:not(.is-in) .chip { opacity: 0; transform: translateY(10px); }
.brief.is-in .chip { transition-delay: 0s, 0s, calc(.55s + var(--i, 0) * .05s), calc(.55s + var(--i, 0) * .05s); }

/* Tablets and phones: the promise above, the form below */
@media (max-width: 1099px) {
  .brief__grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .brief__line { display: none; }
  .brief__card { max-width: 680px; }
}
@media (max-width: 699px) {
  .brief { padding-top: 34px; border-radius: var(--radius-lg); }
  .brief__grid { row-gap: 52px; }
  .brief__fields { grid-template-columns: minmax(0, 1fr); }
  .brief__card { padding-inline: 18px; border-radius: var(--radius-lg); }
  .brief__kubik { right: 1.6em; }
  .brief__say { font-size: 13px; padding: 8px 12px; }
  .brief__send .btn-cta { width: 100%; justify-content: space-between; }
  .brief__note { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brief *, .brief *::before, .brief *::after { transition-duration: .01s !important; animation: none !important; }
}

/* ==========================================================================
   Cases, variant B (A/B test page cases-b.html)
   One case at a time: the client's site plays on a laptop, К’юбик tells the
   story in a chat beside it, the other cases float past behind (from a
   "phone in the middle of a video row" reference, turned into a laptop).
   ========================================================================== */
.cb {
  /* laptop width: as big as the screen height allows, so the block fits one screen */
  --lap-w: min(780px, 62vw, calc((100svh - 350px) * 1.24));   /* taller now: it has a keyboard deck */
  position: relative;
  z-index: 3;
  padding: clamp(24px, min(3.4vw, 5vh), 56px) 0 clamp(20px, min(2.4vw, 3vh), 36px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.cb__head { padding-inline: clamp(22px, 3vw, 48px); }

.cb__stage { position: relative; margin-top: clamp(18px, 3vh, 36px); }
.cb__duo { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }

/* The other cases, drifting behind the laptop */
.cb__strip {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.cb__track {
  display: flex;
  gap: 16px;
  margin-top: calc(var(--lap-w) * -.04);   /* level with the screen, not the whole laptop */
  transition: transform .9s var(--ease);
  pointer-events: auto;
}
.cb__thumb {
  flex: none;
  width: calc(var(--lap-w) * .26);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #221e1b;
  opacity: .45;
  transition: opacity .4s, transform .5s var(--spring);
}
.cb__thumb img { display: block; width: 100%; height: auto; }
.cb__thumb:hover { opacity: .85; transform: translateY(-4px); }
.cb__thumb.is-active { opacity: 0; }

/* Laptop, drawn in CSS in the same world as the hero's 3D: dark anodised
   aluminium with a copper sheen, a lit rim, glass glare on the screen and a
   keyboard deck seen slightly from above. The warm glow behind it and the
   contact shadow under it are part of the illustration, not UI shadows. */
.laptop {
  --alu-hi: #d9b48f;    /* copper highlight */
  --alu-1: #9b7a5e;
  --alu-2: #5e4a3b;
  --alu-3: #33281f;
  --alu-4: #17120e;
  position: relative;
  width: var(--lap-w);
  margin: 0;
}
/* warm light behind the laptop, like the copper glow in the first screen */
.laptop::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%; right: 8%; top: 6%; height: 70%;
  background: radial-gradient(closest-side, rgba(214, 150, 84, .28), rgba(214, 150, 84, 0));
  filter: blur(24px);
}
/* soft contact shadow on the "table" */
.laptop::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4%; right: -4%; bottom: calc(var(--lap-w) * -.035);
  height: calc(var(--lap-w) * .06);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}

/* Lid: black glass bezel inside a thin aluminium rim lit from the top left */
.laptop__lid {
  position: relative;
  padding: 2.3% 2.3% 2.9%;
  border: 2px solid transparent;
  border-radius: 20px 20px 6px 6px;
  background:
    linear-gradient(#050505, #0a0a0a) padding-box,
    linear-gradient(155deg, var(--alu-hi), var(--alu-2) 28%, var(--alu-3) 60%, var(--alu-1) 88%, var(--alu-2)) border-box;
}
.laptop__cam {
  position: absolute;
  top: 1%;
  left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4150, #0c0d10 60%);
  transform: translateX(-50%);
}
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: #f3efe9;
}
/* glass: a soft diagonal glare over whatever the screen shows */
.laptop__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .05));
  pointer-events: none;
}

/* Hinge, keyboard deck in perspective, front lip */
.laptop__hinge {
  height: calc(var(--lap-w) * .012);
  margin: 0 5%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#0a0807, #2e241d);
}
.laptop__deck {
  position: relative;
  height: calc(var(--lap-w) * .075);
  margin: 0 -4%;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .35)),
    linear-gradient(var(--alu-3), var(--alu-2) 65%, var(--alu-1));
}
/* keys: a grid, foreshortened by the same tilt as the deck */
.laptop__keys {
  position: absolute;
  left: 15%; right: 15%; top: 10%;
  height: 62%;
  border-radius: 3px;
  transform: perspective(calc(var(--lap-w) * .5)) rotateX(38deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(10, 8, 6, .82) 0 calc(100% / 15 - 2px), rgba(0, 0, 0, 0) 0 calc(100% / 15)),
    rgba(0, 0, 0, .25);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(100% / 5 - 1.5px), transparent 0 calc(100% / 5));
          mask-image: repeating-linear-gradient(180deg, #000 0 calc(100% / 5 - 1.5px), transparent 0 calc(100% / 5));
}
.laptop__pad {
  position: absolute;
  left: 39%; right: 39%; bottom: 6%;
  height: 20%;
  border-radius: 3px;
  background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .12));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  transform: perspective(calc(var(--lap-w) * .5)) rotateX(38deg);
  transform-origin: 50% 100%;
}
.laptop__base {
  position: relative;
  width: 108%;
  height: calc(var(--lap-w) * .024);
  margin-left: -4%;
  border-radius: 0 0 14px 14px / 0 0 100% 100%;
  background: linear-gradient(var(--alu-hi), var(--alu-1) 18%, var(--alu-2) 55%, var(--alu-4));
}
.laptop__base::before {   /* the thumb notch */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 14%; height: 40%;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(var(--alu-3), var(--alu-2));
  transform: translateX(-50%);
}

/* The site inside the screen */
.cb__site { display: flex; flex-direction: column; height: 100%; transition: opacity .28s var(--ease), transform .5s var(--ease); }
.cb__site.is-out { opacity: 0; transform: scale(.97); }
.cb__site .case__bar { flex: none; height: 22px; font-size: 10px; }
.cb__shot { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cb__shot img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .cb__shot.is-browsing img { animation: cb-browse 16s cubic-bezier(.45, 0, .25, 1) 1.2s infinite alternate both; }
}
@keyframes cb-browse { to { transform: translateY(var(--travel, 0px)); } }

/* К’юбик's chat, floating over the laptop's right edge */
.cb__chat {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex: none;
  width: clamp(280px, 24vw, 340px);
  height: calc(var(--lap-w) * .54);
  margin-left: calc(var(--lap-w) * -.12);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  background: rgba(24, 22, 20, .94);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float);
}
.cb__who { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.cb__who b { font-weight: 500; color: var(--text); }
.cb__who .mini-face { flex: none; }
.cb__log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.cb__log::-webkit-scrollbar { display: none; }
.cb__msg {
  align-self: flex-start;
  max-width: 94%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  background: #2b2723;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-soft);
  animation: cb-msg .4s var(--ease) both;
}
.cb__msg b { font-weight: 500; color: var(--text); }
.cb__msg--num { background: var(--yellow); color: #5d5634; }
.cb__msg--num b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
}
.cb__msg--pending { border: 1px dashed rgba(255, 255, 255, .22); background: none; }
.cb__msg--src { border: 1px dashed rgba(255, 255, 255, .14); background: none; font-size: 12px; color: var(--muted); }
.cb__msg--typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.cb__msg--typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: cb-dot 1s infinite ease-in-out;
}
.cb__msg--typing i:nth-child(2) { animation-delay: .15s; }
.cb__msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-msg { from { opacity: 0; transform: translateY(8px); } }
@keyframes cb-dot { 50% { opacity: .3; transform: translateY(-3px); } }
.cb__replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cb__replies:empty { display: none; }
.cb__reply {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: none;
  font-size: 13px;
  color: var(--text);
  animation: cb-msg .4s var(--ease) both;
  transition: background-color .25s, border-color .25s, color .25s;
}
.cb__reply:hover { border-color: rgba(255, 255, 255, .4); }
.cb__reply--cta { border-color: var(--yellow); color: var(--yellow); }
.cb__reply--cta:hover { background: var(--yellow); color: var(--ink); }

/* Controls under the stage: back · 03 / 12 · next */
.cb__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(16px, 2.6vh, 28px); }
.cb__count { margin: 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cb__count b { font-weight: 500; color: var(--text); }
.cb__next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: none;
  font-size: 15px;
  color: var(--text);
  transition: background-color .25s, border-color .25s, color .25s;
}
.cb__next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--spring); }
.cb__next:hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.cb__next:hover svg { transform: translateX(4px); }

/* Phones: laptop across the width, the chat under it, no strip */
@media (max-width: 900px) {
  .cb { --lap-w: min(100% - 28px, 640px); border-radius: var(--radius-lg); }
  .cb__strip { display: none; }
  .cb__duo { flex-direction: column; padding-inline: 14px; }
  .cb__chat { width: 100%; height: auto; min-height: 300px; margin: calc(var(--lap-w) * .05) 0 0; box-shadow: none; }
}

/* ==========================================================================
   Custom cursor (fine pointers only, enabled by JS)
   ========================================================================== */
.cursor { display: none; }

html.has-cursor,
html.has-cursor a,
html.has-cursor button { cursor: none; }
/* only fields you type into get the text cursor; a checkbox stretched over a
   pill (the brief's service chips) is a control like a button */
html.has-cursor :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { cursor: text; }
html.has-cursor :is(input[type="checkbox"], input[type="radio"], label) { cursor: none; }
/* ...and so is everything else a click acts on: our dot turns into the ring
   there (main.js), so the system pointer must not show beside it */
html.has-cursor :is(summary, [role="button"], [role="slider"], .nf__qubi, .bot__svc) { cursor: none; }

html.has-cursor .cursor {
  display: block;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  pointer-events: none;
}
.cursor__dot {
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 0 solid #fff;
  border-radius: 50%;
  background: #fff;
  transition:
    width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease),
    background-color .3s, border-color .3s, border-width .3s, opacity .3s;
}
.cursor.is-hidden .cursor__dot { opacity: 0; }
.cursor.is-link .cursor__dot {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  background: rgba(255, 255, 255, .16);
}
.cursor.is-ring .cursor__dot {
  width: 108px; height: 108px;
  margin: -54px 0 0 -54px;
  background: transparent;
  border: 4px solid #fff;
}
.cursor.is-text .cursor__dot { opacity: 0; }
.cursor.is-drag .cursor__dot {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  background: transparent;
  border: 2px solid var(--yellow);
}
.cursor.is-drag.is-down .cursor__dot {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  background: rgba(244, 232, 154, .25);
}

/* Over light surfaces (yellow cards, buttons, highlights) the cursor turns dark */
.cursor.is-on-light .cursor__dot { background-color: var(--ink); }
.cursor.is-on-light.is-link .cursor__dot { background-color: rgba(27, 26, 20, .22); }
.cursor.is-on-light.is-ring .cursor__dot { background-color: transparent; border-color: var(--ink); }
.cursor.is-on-light.is-drag .cursor__dot { border-color: var(--ink); }
.cursor.is-on-light.is-drag.is-down .cursor__dot { background-color: rgba(27, 26, 20, .2); }

/* ==========================================================================
   Intro & exit motion
   Final state is the default, so the page is complete without JS.
   ========================================================================== */
.site-header,
.cta-marquee,
.hero__card,
.hero__title .line > span,
.hero__lead,
.stat,
.trust,
.avatar,
.hero__field {
  transition-property: transform, opacity, filter, background-color, color, background-size;
  transition-duration: .9s, .9s, 1.2s, .6s, .6s, .8s;
  transition-timing-function: var(--ease);
}
.hero__lead mark { transition: background-position var(--hl-t, .9s) linear; }

/* Start state */
.js .intro-pending .site-header { opacity: 0; transform: translateY(-8px); }
.js .intro-pending .hero__field { opacity: 0; filter: blur(26px) brightness(.4); transform: scale(1.08); }
.js .intro-pending .hero__phases { opacity: 0; }
.js .intro-pending .cta-marquee,
.js .intro-pending .hero__card { transform: translateX(calc(-100% - var(--pad) - 20px)); }
.js .intro-pending .hero__title .line > span { transform: translateY(105%); }
.js .intro-pending .hero__lead { opacity: 0; transform: translateY(14px); }
.js .intro-pending .hero__lead mark { background-position: 100% 0; }
.js .intro-pending .hl i { clip-path: inset(0 100% 0 0 round 0 7px 7px 0); }
.js .intro-pending .hl b { opacity: 0; }
.js .intro-pending .stat { opacity: 0; transform: translateY(60px); }
.js .intro-pending .trust { opacity: 0; transform: translateY(-14px); filter: blur(10px); }
.js .intro-pending .avatar { opacity: 0; transform: scale(.4); }

.intro-pending .site-header,
.intro-pending .cta-marquee,
.intro-pending .hero__card,
.intro-pending .hero__title .line > span,
.intro-pending .hero__lead,
.intro-pending .hero__lead mark,
.intro-pending .hl i,
.intro-pending .hl b,
.intro-pending .stat,
.intro-pending .trust,
.intro-pending .avatar,
.intro-pending .hero__field { transition: none; }

/* Timeline */
.intro-play .site-header { transition-delay: 0s; }
.intro-play .hero__field { transition-duration: 1.6s; transition-delay: .1s; }
.hero__phases { transition: opacity .6s var(--ease) 1s; }
.intro-play .cta-marquee { transition-duration: 1s; transition-delay: .25s; }
.intro-play .hero__card { transition-duration: 1s; transition-delay: .38s; }
.intro-play .hero__title .line:nth-child(1) > span { transition-delay: .7s; }
.intro-play .hero__title .line:nth-child(2) > span { transition-delay: .8s; }
.intro-play .hero__title .line:nth-child(3) > span { transition-delay: .9s; }
.intro-play .hero__title .line:nth-child(4) > span { transition-delay: 1s; }
.intro-play .hero__lead { transition-delay: 1.05s; }
.intro-play .hero__lead mark { transition-delay: 1.55s; }
.intro-play :is(.hl i, .hl b) { transition-delay: calc(1.55s + var(--d, 0s)); }
.intro-play .stat:nth-child(1) { transition-delay: 1.05s; }
.intro-play .stat:nth-child(2) { transition-delay: 1.18s; }
.intro-play .trust { transition-delay: 1.2s; }
.intro-play .avatar:nth-child(1) { transition-delay: 1.4s; }
.intro-play .avatar:nth-child(2) { transition-delay: 1.46s; }
.intro-play .avatar:nth-child(3) { transition-delay: 1.52s; }
.intro-play .avatar:nth-child(4) { transition-delay: 1.58s; }
.intro-play .avatar:nth-child(5) { transition-delay: 1.66s; }

/* Exit (CTA click): column slides out left, trust card right, video blurs away */
.is-leaving .cta-marquee,
.is-leaving .hero__card {
  transform: translateX(calc(-100% - var(--pad) - 20px));
  transition-duration: .8s;
  transition-timing-function: var(--ease-in);
}
.is-leaving .hero__card { transition-delay: .08s; }
.is-leaving .trust {
  transform: translateX(calc(100% + 60px));
  transition-duration: .8s;
  transition-timing-function: var(--ease-in);
}
.is-leaving .hero__field {
  opacity: 0;
  filter: blur(26px) brightness(.4);
  transition-duration: 1s;
  transition-delay: .2s;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Short laptop screens: keep the whole first screen above the fold */
@media (min-width: 901px) and (max-height: 880px) {
  .cta-marquee { flex-basis: clamp(96px, 16vh, 150px); font-size: clamp(36px, min(4.2vw, 7.4vh), 68px); }
  .hero__lead { margin-top: 16px; }
  .stats { padding-top: 18px; }
  .stat { min-height: clamp(92px, 14vh, 132px); padding: 14px 16px; }
  .hero__lead { font-size: 14px; }
  .hero__title { font-size: clamp(30px, min(10.4cqi, 6vh), 72px); }
  .trust { gap: 22px; }
}

@media (max-width: 1200px) {
  :root { --left: 45%; }
  .nav a { padding: 8px 6px; }
  .trust { width: 236px; }
}

@media (max-width: 900px) {
  :root { --left: 1fr; }

  :root { --header-h: calc(52px - 6px * var(--hp)); }
  .site-header { display: flex; max-width: 100%; }
  .site-header__group { flex: 1; }
  .site-header__group--right { flex: none; }
  .nav { display: none; }
  .menu-btn, .search { padding: 0 16px; }

  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .hero__col { display: contents; }

  /* Message first, then the call to action, then the video: on a phone the
     visitor sees who we are and what we offer before anything else. */
  .cta-marquee { order: 2; flex: 0 0 96px; font-size: 40px; }

  .hero__media {
    order: 3;
    position: relative;
    inset: auto;
    height: clamp(260px, 62vw, 460px);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .hero__media-inner { inset: 0; }
  .hero__media::after { display: none; }
  /* the trust card sits bottom left here: the phase goes to the top */
  .hero__phases { left: 16px; top: 14px; bottom: auto; width: calc(100% - 32px); }
  .hero__phase { top: 0; bottom: auto; }
  .hero__phase span { font-size: 12.5px; }

  .hero__card { order: 1; flex: none; }
  .hero__title { font-size: clamp(30px, 10.4cqi, 64px); }
  .stats { padding-top: 32px; }

  /* Compact pill on the dark floor of the video, clear of the megaphone */
  .trust {
    top: auto; right: auto;
    bottom: 12px; left: 12px;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 7px 14px 7px 7px;
    border-radius: 999px;
  }
  .avatar { width: 28px; height: 28px; font-size: 11px; margin-right: -7px; }
  .avatar--plus { display: none; }
  .trust__text { margin-left: 7px; text-align: left; font-size: 12px; line-height: 1.3; }

  .menu-panel {
    inset: calc(var(--pad) + var(--header-h) + var(--gap)) var(--pad) var(--pad);
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .menu-panel__side { justify-content: flex-start; transform: translateY(40px); }

  /* The hero column is display: contents here, so it can't be dimmed as one
     block; a scrim under the cards covers the page instead. */
  .menu-panel::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(21, 19, 17, .82);
    opacity: 0;
    transition: opacity .4s var(--ease-in);
  }
  .menu-open .menu-panel::before { opacity: 1; transition: opacity .8s var(--ease-soft); }
  .menu-panel__note { font-size: 17px; }
}

@media (max-width: 480px) {
  /* Icon-only menu button frees room for search and the assistant */
  .menu-btn { gap: 10px; width: 52px; justify-content: center; padding: 0; }
  .menu-btn > [data-i18n] {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .search { padding: 0 14px; }
  .search__icon { width: 16px; height: 16px; }
  .lang { padding: 0 4px; }
  .lang button { min-width: 36px; padding: 0 6px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 116px; padding: 14px; }
  .stat__label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-marquee__track { animation-duration: 90s; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ==========================================================================
   Display font: Unbounded for headings and numbers, Onest for everything you
   read. Kept last so it wins over the per-block rules above.
   ========================================================================== */
:is(.hero__title, .cta-marquee, .partners__title, .offer__title, .edge__title, .cases__title, .case__next-title, .svc__title, .stat__num, .edge-card__num, .menu-panel__list a) {
  font-family: var(--font-display);
  font-weight: 300;
}
:is(.offer-card__title, .edge-card__title, .case__title, .svc-card__title) {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Section head on wide screens: title on the left, its text and button right
   beside it (not at the far edge), so a block fits one screen. Narrower
   screens keep the single reading column. */
@media (min-width: 1100px) {
  :is(.offer__head, .edge__head, .cases__head) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "label label" "title aside";
    align-items: end;
    column-gap: clamp(40px, 5vw, 96px);
    max-width: none;
  }
  :is(.offer__label, .edge__label, .cases__label) { grid-area: label; }
  :is(.offer__title, .edge__title, .cases__title) { grid-area: title; }
  :is(.offer__aside, .edge__aside, .cases__aside) { grid-area: aside; padding-bottom: .2em; }
  :is(.offer__text, .edge__text, .cases__text) { max-width: 34em; margin-top: 0; }
  :is(.offer__aside, .edge__aside) .btn-cta { margin-top: 20px; }
}

/* Desktop: a block should fit one screen, so its vertical sizes follow the
   screen height too (min of vw and vh); tall screens hit the same maximums. */
@media (min-width: 1100px) {
  :is(.partners, .offer, .edge, .cases) { padding-top: clamp(24px, min(3.4vw, 5vh), 56px); }
  :is(.offer, .edge, .cases) { padding-bottom: clamp(16px, min(2.4vw, 3vh), 36px); }
  .partners { padding-bottom: clamp(20px, min(3.4vw, 4.5vh), 52px); }
  :is(.partners__title, .offer__title, .edge__title, .cases__title) { font-size: clamp(28px, min(3.5vw, 6.2vh), 56px); }
  :is(.offer__rule, .edge__rule) { margin-top: clamp(16px, min(3vw, 3.4vh), 40px); }
  :is(.offer__list, .edge__grid) { margin-top: clamp(16px, min(3vw, 3.4vh), 40px); }
  .cases__bar { margin-top: clamp(16px, min(2.6vw, 3vh), 36px); }
  .cases__viewport { margin-top: clamp(14px, min(2vw, 2.4vh), 28px); }
  .edge-card__num { font-size: clamp(56px, min(6.4vw, 11vh), 104px); }
  .edge-card--main { padding: clamp(20px, min(2vw, 3vh), 32px); }
  .edge-card--row { padding-block: clamp(16px, min(1.8vw, 2.6vh), 28px); }
}
@media (min-width: 1280px) {
  .offer-card { min-height: clamp(240px, min(26vw, 40vh), 380px); }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .funnel__dots { grid-template-columns: repeat(16, 10px); gap: 6px; }
  .funnel__dots i { width: 10px; height: 10px; }
  .funnel__legend { gap: 4px; margin-top: 14px; }
  .funnel__key { min-height: 28px; }
  .edge-card--main .edge-card__body { padding-top: 16px; }
  .edge-card__num { font-size: clamp(56px, 10vh, 104px); }
  .edge-card__of { margin-top: 6px; }
  :is(.offer__label, .edge__label, .cases__label) { margin-bottom: 10px; }
  .case__text { font-size: 13.5px; line-height: 1.45; }
  .cases { --shot-h: min(calc(var(--case-w) * .52), 18vh); }
  .edge__grid { gap: 10px; }
  .edge-card__text { font-size: 13.5px; line-height: 1.45; }
  .edge-card__src { margin-top: 10px; }
  .edge-card--row { padding-block: 12px; }
  :is(.offer__text, .edge__text) { font-size: 15px; }
  :is(.offer__aside, .edge__aside) .btn-cta { margin-top: 14px; }
}

/* 901–1080px: the house made the nav one item longer; tighten it so the
   header (with UA/EN) still fits (after the 1200px rule it overrides) */
@media (min-width: 901px) and (max-width: 1080px) {
  .nav { padding: 0 4px; }
  .nav a { padding: 8px 4px; }
  .nav a::after { left: 4px; right: 4px; }
}
@media (min-width: 901px) and (max-width: 1040px) { :root { --left: 43%; } }

/* ==========================================================================
   Pages that aren't built yet (a[data-soon], main.js): the link goes
   nowhere, shakes "no", and К’юбик in a hard hat pops out of it to say the
   page is on the way. One bubble for the page, fixed to the screen: main.js
   places it under the link without animation, then it grows out of the
   link (--dx/--dy lead back to it) and shrinks back into it.
   ========================================================================== */
.soon-say {
  position: fixed;
  z-index: 95;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font: 400 13.5px/1.3 var(--font);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.15) rotate(-10deg);
  transform-origin: 24px 50%;   /* К’юбик's face */
  transition: opacity .16s .1s, transform .32s var(--ease);
}
.soon-say.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .12s, transform .6s var(--spring);
}
.soon-say__ava {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bot-ink);
}
.soon-say .mini-face { width: 20px; height: 15px; gap: 4px; border-radius: 5px; box-shadow: none; }
.soon-say .mini-face i { width: 2.6px; height: 3.8px; }
.soon-say.has-hat .mini-face { margin-top: 5px; }
.soon-say.has-hat .mini-face i { transform: translateY(.5px) scaleY(.8); }   /* squinting under the brim */
/* the hard hat: a yellow dome with a brim, dropped on as the bubble opens */
.soon-say__hat {
  position: absolute;
  z-index: 1;
  top: 4px; left: 50%;
  width: 18px; height: 9px;
  margin-left: -9px;
  border-radius: 9px 9px 2px 2px;
  background: var(--yellow);
  opacity: 0;
}
.soon-say__hat::before {   /* brim */
  content: "";
  position: absolute;
  left: -3px; right: -3px; bottom: -1.5px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--yellow);
}
.soon-say__hat::after {    /* ridge */
  content: "";
  position: absolute;
  top: 1.5px; left: 50%;
  width: 2px; height: 5px;
  margin-left: -1px;
  border-radius: 1px;
  background: rgba(27, 26, 20, .22);
}
.soon-say.has-hat.is-on .soon-say__hat { animation: soon-hat .7s var(--spring) .2s both; }
@keyframes soon-hat {
  from { opacity: 0; transform: translateY(-14px) rotate(-24deg); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.soon-say__text { display: grid; gap: 1px; min-width: 0; }
.soon-say__text b { font-weight: 500; font-size: 14px; }
.soon-say__text span { color: rgba(27, 26, 20, .66); }
.soon-say:not(.has-hat) .soon-say__text span { color: var(--ink); font-size: 14px; font-weight: 500; }

/* the link says "no" */
.is-nope { animation: soon-nope .45s var(--ease); }
@keyframes soon-nope {
  0%, 100% { translate: 0 0; }
  18% { translate: -4px 0; }
  38% { translate: 4px 0; }
  58% { translate: -3px 0; }
  78% { translate: 2px 0; }
}
/* under construction: the hover underline is dashed */
.nav a[data-soon]::after { background: repeating-linear-gradient(90deg, var(--yellow) 0 4px, transparent 4px 7px); }
@media (prefers-reduced-motion: reduce) {
  .soon-say, .soon-say.is-on { transform: none; transition: opacity .2s; }
  .soon-say.has-hat.is-on .soon-say__hat { animation: none; opacity: 1; }
}

/* ==========================================================================
   404 (404.html, notfound.js; after the "Nought" reference, 2 Oct 2026):
   «404» stands on the ground, К’юбик sits on the 0 and holds on while gusts
   of wind blow through, bending the digits and the title's letters.
   The 4s are the warm surface with the brand dash, the 0 is the yellow key
   number. A gust also comes from a quick swipe of the cursor or finger,
   or a tap on К’юбик.
   ========================================================================== */
.nf {
  --h: clamp(96px, min(24vw, 26vh), 260px);   /* the digits' height; the block fits 1280×720 */
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vh, 56px) clamp(16px, 2.4vw, 40px) clamp(28px, 5vh, 64px);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  background: var(--card-text);
  text-align: center;
  touch-action: pan-y pinch-zoom;   /* a sideways swipe stays ours: it sends a gust */
}

/* the scene */
.nf__scene {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: calc(var(--h) * .42);   /* room for К’юбик on the 0 */
  margin-bottom: calc(var(--h) * .2);
}
.nf__row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--h) * .045);
}
.nf__d {
  position: relative;
  display: block;
  height: var(--h);
  transform-origin: 50% 100%;
}
.nf__d svg { display: block; height: 100%; overflow: visible; }
.nf__d--4 svg { width: calc(var(--h) * 250 / 300); }
.nf__d--0 svg { width: calc(var(--h) * 200 / 300); }
.nf__four {
  fill: var(--card);
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.nf__zero { fill: var(--yellow); }

/* the ground: a line and a few strokes of "speed" */
.nf__ground {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--h) * 3.3);
  max-width: 96vw;
  height: 1px;
  transform: translateX(-50%);
}
.nf__ground i {
  position: absolute;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .26);
}
.nf__ground i:nth-child(1) { left: 0; right: 0; top: 0; }
.nf__ground i:nth-child(2) { left: 2%; width: 14%; top: calc(var(--h) * .055); }
.nf__ground i:nth-child(3) { left: 21%; width: 6%; top: calc(var(--h) * .1); }
.nf__ground i:nth-child(4) { right: 3%; width: 20%; top: calc(var(--h) * .055); }
.nf__ground i:nth-child(5) { right: 26%; width: 9%; top: calc(var(--h) * .1); }

/* К’юбик on the 0 (the same character as in the chat, .buddy) */
.nf__qubi {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: calc(100% - .7em);
  width: 7.2em; height: 5.8em;
  margin-left: -3.6em;
  font-size: calc(var(--h) * .056);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.nf__qubi .buddy { position: absolute; z-index: 1; inset: 0; transform-origin: 50% 100%; }
.nf__qubi .buddy__float { animation: none; }
.nf__qubi .buddy__body { animation: nf-breathe 3.4s ease-in-out infinite; }
@keyframes nf-breathe { 50% { transform: scale(1.015, .97); } }
/* worried brows, raised by a gust */
.nf__brows {
  position: absolute;
  inset: 1.55em 0 auto;
  height: .3em;
  pointer-events: none;
  transition: transform .35s var(--spring);
}
.nf__brows i {
  position: absolute;
  top: 0;
  width: 1.1em;
  height: .24em;
  border-radius: .12em;
  background: var(--bot-ink);
}
.nf__brows i:first-child { left: 2.015em; transform: translate(var(--lx, 0), 0) rotate(-14deg); }
.nf__brows i + i { left: 4.085em; transform: translate(var(--lx, 0), 0) rotate(14deg); }
/* legs dangling over the front of the 0 */
.nf__legs {
  position: absolute;
  z-index: 0;
  left: 2em; right: 2em;
  top: calc(100% - 1em);
  display: flex;
  justify-content: space-between;
}
.nf__legs i {
  position: relative;
  width: .5em;
  height: 2.3em;
  border-radius: .25em;
  background: var(--bot-ink);
  transform-origin: 50% 0;
  animation: nf-swing 1.9s ease-in-out infinite;
}
.nf__legs i + i { animation-delay: -.95s; }
.nf__legs i::after {   /* foot */
  content: "";
  position: absolute;
  left: -.18em; bottom: -.1em;
  width: .9em; height: .48em;
  border-radius: .3em;
  background: var(--bot-ink);
}
@keyframes nf-swing {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(-9deg); }
}
/* a gust: eyes shut, hands grip the 0, brows up, legs flap */
.nf__qubi .buddy__hand { transition: transform .35s var(--spring), background-color .6s var(--ease); }
.nf__qubi .buddy__hand--l { left: -.5em; top: auto; bottom: .2em; }
.nf__qubi .buddy__hand--r { right: -.5em; top: auto; bottom: .2em; width: 1.15em; height: 1.15em; }
.nf__qubi.is-gust .buddy__hand { transform: scale(1); }
.nf__qubi.is-gust .buddy .buddy__eye { transform: translate(var(--lx, 0), var(--ly, 0)) scaleY(.18); }
.nf__qubi.is-gust .nf__brows { transform: translateY(-.25em); }
.nf__qubi.is-gust .nf__legs i { animation-duration: .5s; }

/* the wind: strokes behind and in front of the digits, and bits of paper */
.nf__wind {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.nf__wind--front { z-index: 3; }
.nf__wind path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nf__gust { stroke: rgba(243, 239, 233, .85); }
.nf__gust--soft { stroke: rgba(141, 136, 130, .6); }
.nf__bit {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  width: 10px; height: 7px;
  border-radius: 2px;
  background: var(--text);
  pointer-events: none;
}
.nf__bit--dim { background: var(--muted); }

/* the words */
.nf__code {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.nf__code::before,
.nf__code::after { content: ""; width: 28px; height: 1px; background: var(--line); }
.nf__title {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  font: 300 clamp(28px, min(3.5vw, 6.2vh), 56px)/1.12 var(--font-display);
  text-wrap: balance;
}
.nf__w { display: inline-block; white-space: nowrap; }
.nf__ch { display: inline-block; }
.nf__text {
  position: relative;
  z-index: 1;
  max-width: 30em;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  text-wrap: balance;
}
.nf__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 6px;
  margin-top: clamp(20px, 3.4vh, 32px);
}
.nf__back {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 500;
  transition: color .3s, background-color .3s;
}
.nf__back:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

/* coming in: the digits rise one by one, К’юбик drops onto the 0 */
.nf__d svg, .nf__ground, .nf__code, .nf__title, .nf__text, .nf__actions {
  transition: transform .9s var(--ease), opacity .7s var(--ease);
}
.nf__d svg { transition-timing-function: var(--spring), var(--ease); }
.nf__qubi { transition: transform .75s var(--spring), opacity .3s; }
.js .intro-pending .nf__d svg { opacity: 0; transform: translateY(40%) scale(.85); }
.js .intro-pending .nf__qubi { opacity: 0; transform: translateY(-140%) rotate(-14deg); }
.js .intro-pending .nf__ground { opacity: 0; transform: translateX(-50%) scaleX(.3); }
.js .intro-pending :is(.nf__code, .nf__title, .nf__text, .nf__actions) { opacity: 0; transform: translateY(24px); }
.intro-pending :is(.nf__d svg, .nf__qubi, .nf__ground, .nf__code, .nf__title, .nf__text, .nf__actions) { transition: none; }
.intro-play .nf__ground { transition-delay: .05s; }
.intro-play .nf__d--l svg { transition-delay: .12s; }
.intro-play .nf__d--o svg { transition-delay: .22s; }
.intro-play .nf__d--r svg { transition-delay: .32s; }
.intro-play .nf__qubi { transition-delay: .7s; }
.intro-play .nf__code { transition-delay: .4s; }
.intro-play .nf__title { transition-delay: .48s; }
.intro-play .nf__text { transition-delay: .56s; }
.intro-play .nf__actions { transition-delay: .64s; }
.nf { transition: opacity .5s var(--ease-in), transform .5s var(--ease-in); }
.is-leaving .nf { opacity: 0; transform: translateY(-16px); }

@media (max-width: 600px) {
  .nf { --h: clamp(84px, 32vw, 150px); border-radius: var(--radius-lg); }
  .nf__qubi { font-size: calc(var(--h) * .064); }   /* a bit bigger, or he's a dot on a phone */
  .nf__code { font-size: 12px; letter-spacing: .24em; }
  .nf__code::before, .nf__code::after { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf__qubi .buddy__body, .nf__legs i { animation: none; }
}

/* Two 404s (404.html picks one in <head>): a = К’юбик in the wind,
   b = the confused Travolta. Without JS: a. */
html[data-nf="b"] .nf--a,
html:not([data-nf="b"]) .nf--b { display: none; }

/* b: «404» on the ground, the confused Travolta (Pulp Fiction meme; the
   user took on the rights question, 2 Oct 2026) stands a little behind the
   right 4 and strolls from spot to spot; the GIF itself turns him around.
   The frame cuts him at the thighs: the bottom fades into the ground. */
.nf--b { --h: clamp(64px, min(20vw, 21vh), 210px); }
.nf__scene--b { padding-top: 0; align-items: flex-end; }
.nf__scene--b .nf__row { z-index: 1; }
.nf__scene--b .nf__ground { width: calc(var(--h) * 4.4); }
.nf__tv {
  position: relative;
  z-index: 0;
  flex: none;
  height: calc(var(--h) * 1.55);
  aspect-ratio: 488 / 458;
  margin-left: calc(var(--h) * -.32);   /* half a step behind the right 4 */
}
.nf__tv-walk {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 16%);
          mask-image: linear-gradient(0deg, transparent 0, #000 16%);
  animation: nf-stroll 13s ease-in-out infinite;
}
.nf__tv img { display: block; width: 100%; height: 100%; }
/* a few steps right, a pause, past the start to the left, back */
@keyframes nf-stroll {
  0%, 16% { transform: translateX(0); }
  30%, 50% { transform: translateX(calc(var(--h) * .3)); }
  66%, 84% { transform: translateX(calc(var(--h) * -.14)); }
  100% { transform: translateX(0); }
}
.nf--b .nf__meme {
  max-width: 24em;
  font-size: clamp(20px, min(2.3vw, 4.2vh), 34px);
  line-height: 1.25;
}
.nf__tv { transition: transform .9s var(--ease), opacity .7s var(--ease); }
.js .intro-pending .nf__tv { opacity: 0; transform: translateX(calc(var(--h) * .5)); }
.intro-pending .nf__tv { transition: none; }
.intro-play .nf__tv { transition-delay: .45s; }
@media (max-width: 600px) {
  /* deeper behind the 4, so the scene can be bigger on a phone */
  .nf--b { --h: clamp(58px, 23vw, 110px); }
  .nf__tv { margin-left: calc(var(--h) * -.55); }
}
@media (prefers-reduced-motion: reduce) {
  .nf__tv-walk { animation: none; }
}

/* ==========================================================================
   Google Ads service page (google-ads.html, gads.js; test page, 3 Oct 2026).
   Order of blocks, from the competitor analysis: offer -> who it is for ->
   the problem -> how we count (report sheets) -> cases -> packages ->
   calculator -> process -> team -> questions. One action on the page: the
   free video review. Each block is one dashed sheet, as on the home page.
   ========================================================================== */
.page-gads { --ga-loss: #e3907f; --ga-s2: #221e1b; }   /* a minus in a report; surface 2 */

.ga-sec {
  position: relative;
  min-width: 0;
  padding: clamp(26px, 3.2vw, 52px) clamp(18px, 3vw, 48px);
  background: var(--card-text);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
}
.ga-label { margin: 0 0 12px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ga-title { max-width: 17em; margin: 0; font: 300 clamp(28px, min(3.1vw, 5.6vh), 50px)/1.08 var(--font-display); text-wrap: balance; }
.ga-lead { max-width: 34em; margin: 14px 0 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 300; line-height: 1.5; color: var(--text-soft); }
.ga-src { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ga-link { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ga-head { margin-bottom: clamp(20px, 2.6vw, 34px); }
@media (min-width: 1100px) {
  /* title left, its text right beside it, bottoms aligned */
  .ga-head--row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 4vw, 64px); }
  .ga-head--row .ga-lead { margin: 0; justify-self: end; }
}

/* coming in: the title rises by words, the rest follows in a wave */
.js .ga-sec:not(.is-in) .reveal-title .w > span { transform: translateY(110%); transition: none; }
.js .ga-sec:not(.is-in) :is(.ga-label, .ga-lead, .ga-why__fact, .ga-report, .ga-terms, .ga-price__foot, .ga-calc__body, .ga-proc__panel, .ga-team__photo, .ga-team__facts, .ga-faq__left .btn-cta) { opacity: 0; }
.ga-sec.is-in :is(.ga-label, .ga-lead, .ga-why__fact, .ga-report, .ga-terms, .ga-price__foot, .ga-calc__body, .ga-proc__panel, .ga-team__photo, .ga-team__facts, .ga-faq__left .btn-cta) { animation: offer-rise .9s var(--ease) backwards; animation-delay: .15s; }
:is(.ga-niche, .ga-why__list li, .ga-steps li, .ga-plan, .ga-step, .ga-q) {
  transition: opacity .7s var(--ease), transform .9s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
  transition-delay: calc(.2s + var(--i, 0) * .07s), calc(.2s + var(--i, 0) * .07s), 0s, 0s;
}
.js .ga-sec:not(.is-in) :is(.ga-niche, .ga-why__list li, .ga-steps li, .ga-plan, .ga-step, .ga-q) { opacity: 0; transform: translateY(24px); transition: none; }
.js .ga-sec:not(.is-in) .ga-case { opacity: 0; }
.ga-sec.is-in .ga-case { animation: offer-rise .9s var(--ease) backwards; animation-delay: calc(.2s + var(--i, 0) * .07s); }

/* --------------------------------------------------------------------------
   1. Hero (after the WayGO reference): a tall rounded card with a living
   backdrop, the promise in the middle and a pill form under it
   -------------------------------------------------------------------------- */
.ga-hero {
  position: relative;
  overflow: hidden;
  flex: none;
  min-width: 0;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--pad) * 2 - 58px - var(--gap));
  min-height: calc(100svh - var(--pad) * 2 - 58px - var(--gap));
  padding: clamp(28px, 5vh, 64px) clamp(16px, 3vw, 48px) clamp(96px, 15vh, 140px);
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  background: radial-gradient(80% 60% at 50% 0%, var(--card) 0, rgba(47, 42, 39, 0) 72%), var(--card-text);
  text-align: center;
}
.ga-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ga-hero__in { position: relative; z-index: 1; display: grid; justify-items: center; width: min(980px, 100%); }
/* the platform's mark in its own colours on the dark tile (as every platform
   logo on the site); it pops in with a spring */
.ga-hero__logo { display: grid; place-items: center; width: clamp(46px, 4.2vw, 58px); aspect-ratio: 1; margin-bottom: clamp(12px, 2.2vh, 20px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ga-hero__logo img { width: 56%; height: 56%; }
.ga-hero__title {
  max-width: 13.5em;
  margin: 0;
  font: 300 clamp(31px, min(4.9vw, 8.2vh), 76px)/1.06 var(--font-display);
  text-wrap: balance;
}
.ga-hero__title em { font-style: normal; color: var(--yellow); }
.ga-hero__sub { max-width: 34em; margin: clamp(12px, 2vh, 18px) 0 0; font-size: clamp(16px, 1.35vw, 20px); font-weight: 300; line-height: 1.5; color: var(--text-soft); text-wrap: balance; }

/* the form: two fields and the one action, in a light pill over the field */
.ga-pill {
  position: relative;
  display: flex;
  align-items: center;
  width: min(780px, 100%);
  margin-top: clamp(20px, 3.4vh, 34px);
  padding: 6px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  text-align: left;
}
.ga-pill:focus-within { outline: 2px solid var(--yellow); outline-offset: 3px; }
.ga-pill__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-right: 1px solid rgba(27, 26, 20, .14); cursor: text; }
.ga-pill__field svg { flex: none; width: 20px; height: 20px; fill: none; stroke: rgba(27, 26, 20, .55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.ga-pill__field:focus-within svg { stroke: var(--ink); }
.ga-pill__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 400 16px/1 var(--font); color: var(--ink); }
.ga-pill__field input::placeholder { color: rgba(27, 26, 20, .52); }
.ga-pill__field.is-bad svg { stroke: #b3402e; }
.ga-pill__field.is-bad input::placeholder { color: #b3402e; }
.ga-pill__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ga-pill__btn { flex: none; margin-left: 6px; }
.ga-pill__btn.is-hit { animation: ga-hit .7s var(--ease); }   /* a dot arrived: a click became an enquiry */
@keyframes ga-hit { from { box-shadow: 0 0 0 0 rgba(244, 232, 154, .7); } to { box-shadow: 0 0 0 16px rgba(244, 232, 154, 0); } }
.ga-pill.is-busy .ga-pill__btn, .ga-pill.is-done .ga-pill__btn { pointer-events: none; opacity: .55; }
.ga-hero__msg { min-height: 20px; margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-soft); }
.ga-hero__msg[data-kind="err"] { color: var(--ga-loss); }
.ga-hero__msg[data-kind="ok"] { color: var(--yellow); }
.ga-hero__note { max-width: 40em; margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: balance; }

/* the one number, with its source */
.ga-hero__proof {
  position: absolute;
  z-index: 1;
  left: 50%; bottom: clamp(16px, 3.2vh, 32px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 18px 10px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: rgba(21, 19, 17, .78);
  text-align: left;
  white-space: nowrap;
}
.ga-hero__proof b { display: block; font: 400 clamp(14px, 1.2vw, 17px)/1.2 var(--font-display); }
.ga-hero__proof small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ga-hero__dots { flex: none; display: grid; grid-template-columns: repeat(10, 5px); gap: 3px; }
.ga-hero__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ga-hero__dots .is-good { background: rgba(243, 239, 233, .7); }
.ga-hero__dots .is-sale { background: var(--yellow); }

.ga-hero__in > *, .ga-hero__proof { transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .intro-pending .ga-hero__in > * { opacity: 0; transform: translateY(18px); }
.js .intro-pending .ga-hero__in > .ga-hero__logo { transform: scale(.3) rotate(-18deg); }
.ga-hero__in > .ga-hero__logo { transition: opacity .4s, transform .8s var(--spring); }
.intro-play .ga-hero__logo { transition-delay: .2s; }
.js .intro-pending .ga-hero__proof { opacity: 0; transform: translate(-50%, 18px); }
.js .intro-pending .ga-hero__field { opacity: 0; }
.ga-hero__field { transition: opacity 1.4s var(--ease); }
.intro-pending :is(.ga-hero__in > *, .ga-hero__proof, .ga-hero__field) { transition: none; }
.intro-play .ga-hero__title { transition-delay: .35s; }
.intro-play .ga-hero__sub { transition-delay: .45s; }
.intro-play .ga-pill { transition-delay: .58s; }
.intro-play :is(.ga-hero__msg, .ga-hero__note) { transition-delay: .68s; }
.intro-play .ga-hero__proof { transition-delay: .85s; }
.page-gads main > * { transition: opacity .5s var(--ease-in), transform .5s var(--ease-in); }
.page-gads.is-leaving main > * { opacity: 0; transform: translateY(-14px); }

/* --------------------------------------------------------------------------
   2. Who it is for
   -------------------------------------------------------------------------- */
.ga-fit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ga-niche { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 8px; min-height: clamp(190px, 16vw, 240px); padding: clamp(18px, 1.8vw, 26px); border-radius: var(--radius-lg); background: var(--ga-s2); }
.ga-niche__ico { width: 30px; height: 30px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ga-niche__ico path { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) calc(.5s + var(--i, 0) * .1s); }
.js .ga-sec:not(.is-in) .ga-niche__ico path { stroke-dashoffset: 100; transition: none; }
.ga-niche h3 { margin: 6px 0 0; font: 400 clamp(17px, 1.5vw, 21px)/1.2 var(--font-display); }
.ga-niche p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); }
.ga-niche .ga-niche__who { font-size: 12.5px; color: var(--muted); }
.ga-niche--no { grid-template-rows: auto 1fr; background: none; border: 1px dashed var(--line-strong); }
.ga-niche--no h3 { margin: 0; font-size: clamp(16px, 1.3vw, 19px); }
.ga-niche--no ul { display: grid; align-content: start; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.ga-niche--no li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; color: var(--text-soft); }
.ga-niche--no li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border: 1px solid var(--muted); border-radius: 50%; }

/* --------------------------------------------------------------------------
   3. The problem
   -------------------------------------------------------------------------- */
.ga-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.ga-why__fact { margin-top: clamp(22px, 3.4vw, 44px); }
.ga-why__num { display: flex; align-items: baseline; gap: .28em; margin: 0; font: 300 clamp(46px, min(6.4vw, 11vh), 104px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ga-why__num span { color: var(--muted); }
.ga-why__num i { font-style: normal; font-size: .55em; color: var(--muted); }
.ga-why__num b { font-weight: 300; color: var(--yellow); }
.ga-why__cap { max-width: 26em; margin: 10px 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--text-soft); }
.ga-why__list { margin: 0; padding: 0; list-style: none; }
.ga-why__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); padding: clamp(16px, 1.8vw, 24px) 0; border-top: 1px dashed var(--line); }
.ga-why__list li:last-child { border-bottom: 1px dashed var(--line); }
.ga-why__n { font: 400 13px/1.7 var(--font-display); color: var(--muted); }
.ga-why__list h3 { margin: 0; font: 400 clamp(16px, 1.4vw, 20px)/1.25 var(--font-display); }
.ga-why__list p { max-width: 38em; margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   4. How we count: four steps and two report sheets
   -------------------------------------------------------------------------- */
.ga-count__body { display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.ga-steps { position: relative; display: grid; gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: 4px 0 0 26px; list-style: none; }
.ga-steps::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; border-left: 1px dashed var(--line-strong); opacity: .5; }
.ga-steps li { position: relative; display: grid; gap: 4px; }
.ga-steps li::before { content: ""; position: absolute; left: -26px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--card-text); border: 2px solid var(--yellow); }
.ga-steps li:last-child::before { background: var(--yellow); }
.ga-steps b { font: 400 clamp(15px, 1.25vw, 18px)/1.25 var(--font-display); }
.ga-steps li > span { font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }
.ga-steps__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ga-steps__chips i { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-style: normal; font-size: 11.5px; color: var(--text-soft); }
.ga-steps__chips .is-sale { border-color: var(--yellow); color: var(--yellow); }

.ga-report { min-width: 0; display: grid; gap: 12px; padding: clamp(12px, 1.4vw, 20px); border-radius: var(--radius-lg); background: var(--ga-s2); }
.ga-report__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ga-tab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--text); transition: background-color .3s, color .3s, border-color .3s; }
.ga-tab:hover { border-color: var(--line-strong); }
.ga-tab[aria-selected="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.ga-report__badge { margin-left: auto; padding: 5px 11px; border: 1px dashed var(--line); border-radius: 999px; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.ga-sheet { min-width: 0; display: grid; gap: 10px; }
.ga-sheet[hidden] { display: none; }
.ga-sheet__top h3 { margin: 0; font: 400 clamp(15px, 1.3vw, 18px)/1.3 var(--font-display); }
.ga-sheet__top p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.ga-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ga-kpi { min-width: 0; display: grid; gap: 3px; padding: 11px 14px; border-radius: var(--radius); background: var(--card-stat); }
.ga-kpi span { font-size: 12px; color: var(--muted); }
.ga-kpi strong { font: 300 clamp(18px, 1.8vw, 26px)/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-kpi small { font-size: 12px; color: var(--text-soft); }
.ga-kpi--main { background: var(--yellow); color: var(--ink); }
.ga-kpi--main span, .ga-kpi--main small { color: rgba(27, 26, 20, .72); }
.ga-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.ga-table table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ga-table th, .ga-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ga-table thead th { font-size: 11.5px; font-weight: 500; color: var(--muted); background: rgba(255, 255, 255, .02); }
.ga-table th:first-child { text-align: left; }
.ga-table tbody th { font-weight: 500; }
.ga-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ga-table tfoot :is(th, td) { border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 0; font-weight: 500; }
.ga-table .is-loss :is(th, td) { background: rgba(227, 144, 127, .14); }
.ga-roi { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ga-roi b { min-width: 46px; font-weight: 500; }
.ga-bar { width: 70px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ga-bar i { display: block; height: 100%; border-radius: 3px; background: var(--yellow); }
.is-loss .ga-bar i { background: var(--ga-loss); }
.is-loss .ga-roi b { color: var(--ga-loss); }
.ga-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 500; }
.ga-chip--ok { background: rgba(244, 232, 154, .14); color: var(--yellow); }
.ga-chip--warn { background: rgba(227, 144, 127, .14); color: var(--ga-loss); }
.ga-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 11px 14px; border-radius: var(--radius); background: var(--card-stat); }
.ga-note__ava { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 400 12px/1 var(--font-display); }
.ga-note p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.ga-note b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 500; }
.ga-note b span { margin-left: 6px; font-weight: 400; color: var(--muted); }
.ga-sheet__read { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* --------------------------------------------------------------------------
   5. Cases
   -------------------------------------------------------------------------- */
.ga-cases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ga-case { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: clamp(18px, 1.7vw, 26px); border-radius: var(--radius-lg); background: var(--ga-s2); }
.ga-case p { margin: 0; }
.ga-case__who { font-size: 13.5px; color: var(--muted); }
.ga-case__who b { font-weight: 500; color: var(--text); }
.ga-case__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: clamp(6px, 1vw, 14px) !important; }
.ga-case__num b { font: 300 clamp(34px, min(3.3vw, 6vh), 56px)/1 var(--font-display); color: var(--yellow); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ga-case__num span { font-size: 14px; color: var(--text-soft); }
.ga-case__base { font-size: 14.5px; line-height: 1.45; }
.ga-case__did { font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.ga-case .ga-src { margin-top: auto; padding-top: 10px; }
/* A card under the cursor (as the service cards on the home page): the
   yellow spreads as a circle from where the cursor came in (--x/--y,
   gads.js), the card lifts, grows a little and tilts 3deg towards it.
   At rest all four are alike; touch screens have no hover. */
.ga-case { position: relative; z-index: 0; isolation: isolate; transform-origin: 50% 70%; transition: transform .6s var(--spring), color .35s var(--ease); }
.ga-case::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--yellow); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .6s var(--ease); }
.ga-case :is(.ga-case__who, .ga-case__who b, .ga-case__num b, .ga-case__num span, .ga-case__did, .ga-src) { transition: color .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ga-case:hover { z-index: 3; color: var(--ink); }
  .ga-case:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
  .ga-case:hover :is(.ga-case__who b, .ga-case__num b) { color: var(--ink); }
  .ga-case:hover :is(.ga-case__who, .ga-case__num span, .ga-case__did, .ga-src) { color: rgba(27, 26, 20, .76); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ga-case:hover { transform: translateY(-10px) rotate(var(--tilt, 3deg)) scale(1.03); }
}

/* --------------------------------------------------------------------------
   6. Packages
   -------------------------------------------------------------------------- */
.ga-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ga-plan { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 1.8vw, 28px); border-radius: var(--radius-lg); background: var(--ga-s2); }
.ga-plan p { margin: 0; }
.ga-plan__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 16px/1.2 var(--font-display); }
.ga-plan__name span { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--yellow); font: 500 11.5px/1.2 var(--font); }
.ga-plan__price { display: flex; align-items: baseline; gap: 10px; margin-top: clamp(10px, 1.4vw, 18px) !important; }
.ga-plan__price b { font: 300 clamp(38px, min(3.8vw, 7vh), 64px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ga-plan__price span { font-size: 14px; color: var(--muted); }
.ga-plan__budget { margin: 12px 0 !important; padding: 9px 0; border-block: 1px dashed var(--line); font-size: 13px; color: var(--text-soft); }
.ga-plan__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ga-plan__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; }
.ga-plan__list li::before { content: ""; position: absolute; left: 3px; top: .28em; width: 6px; height: 10px; border: solid var(--yellow); border-width: 0 1.8px 1.8px 0; transform: rotate(42deg); }
.ga-plan--main { background: var(--yellow); color: var(--ink); }
.ga-plan--main .ga-plan__price span, .ga-plan--main .ga-plan__budget { color: rgba(27, 26, 20, .72); }
.ga-plan--main .ga-plan__budget { border-color: rgba(27, 26, 20, .3); }
.ga-plan--main .ga-plan__list li::before { border-color: var(--ink); }
.ga-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ga-terms li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px dashed var(--line); border-radius: 999px; font-size: 13px; color: var(--text-soft); }
.ga-terms li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.ga-price__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 14px; }
.ga-price__foot p { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.ga-gift { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 14px; background: rgba(244, 232, 154, .1); color: var(--yellow); font-size: 13.5px; transition: background-color .3s; }
.ga-gift:hover { background: rgba(244, 232, 154, .18); }
.ga-gift svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ga-gift i { font-style: normal; transition: transform .35s var(--spring); }
.ga-gift:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Calculator
   -------------------------------------------------------------------------- */
.ga-calc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 12px; align-items: stretch; }
.ga-calc__form, .ga-calc__out { min-width: 0; padding: clamp(16px, 1.8vw, 26px); border-radius: var(--radius-lg); background: var(--ga-s2); }
.ga-calc__form { position: relative; display: grid; align-content: center; gap: 2px; }
.ga-cur { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 4px; }
.ga-cur button { width: 36px; height: 32px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; color: var(--text-soft); transition: background-color .25s, color .25s, border-color .25s; }
.ga-cur button[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.ga-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; line-height: 1.3; color: var(--text-soft); cursor: text; }
.ga-in--key > span:first-child { position: relative; padding-left: 14px; color: var(--text); }
.ga-in--key > span:first-child::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.ga-in__box { flex: none; display: flex; align-items: center; width: clamp(128px, 12vw, 164px); height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); transition: border-color .25s; }
.ga-in__box:focus-within { border-color: var(--yellow); }
.ga-in__box input { width: 100%; min-width: 0; border: 0; background: none; outline: none; font: 400 16px/1 var(--font); font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.ga-in__box input::placeholder { color: var(--muted); }
.ga-in__box i { flex: none; min-width: 14px; margin-left: 6px; font-style: normal; color: var(--muted); }
.ga-calc__out { display: grid; align-content: space-between; gap: 12px; }
.ga-flow { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ga-flow li { display: flex; align-items: center; height: 34px; }
.ga-flow span { flex: none; width: 92px; font-size: 13px; color: var(--text-soft); }
.ga-flow i { order: 2; height: 26px; width: calc((100% - 200px) * var(--w, 0)); min-width: 6px; border-radius: 8px; background: rgba(243, 239, 233, .14); transition: width .6s var(--ease); }
.ga-flow b { order: 3; margin-left: 10px; font: 400 15px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-flow .is-key i { background: rgba(244, 232, 154, .34); }
.ga-flow .is-sale i { background: var(--yellow); }
.ga-flow .is-sale b { color: var(--yellow); }
.ga-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ga-money div { min-width: 0; padding: 11px 14px; border-radius: var(--radius); background: var(--card-stat); }
.ga-money dt { font-size: 12px; color: var(--muted); }
.ga-money dd { margin: 4px 0 0; font: 300 clamp(17px, 1.6vw, 23px)/1.15 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-money__main { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--yellow) !important; color: var(--ink); transition: background-color .4s var(--ease), color .4s var(--ease); }
.ga-money__main dt { font-size: 13px; color: rgba(27, 26, 20, .75); transition: color .4s; }
.ga-money__main dd { margin: 0; font-size: clamp(20px, 2vw, 28px); }
.ga-money__main.is-minus { background: rgba(227, 144, 127, .16) !important; color: var(--ga-loss); }
.ga-money__main.is-minus dt { color: var(--ga-loss); }
.ga-verdict { display: flex; align-items: center; gap: 14px; }
.ga-verdict__qubi { position: relative; flex: none; width: 7.2em; height: 5.8em; font-size: 7px; }
.ga-verdict__qubi .buddy { position: absolute; inset: 0; }
.ga-verdict .buddy__badge { border-color: var(--ga-s2); }
.ga-verdict__text { margin: 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.4; }
.ga-calc__note { margin: 0; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Process: five shapes in a row (after "The Advantage" reference). Each
   has one square corner (our smallest radius), the last is a full circle.
   -------------------------------------------------------------------------- */
.ga-proc__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ga-step {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  aspect-ratio: 1;
  max-height: clamp(150px, 26vh, 250px);
  width: 100%;
  padding: 0 14%;
  border-radius: 50% 50% var(--radius) var(--radius);
  background: var(--ga-s2);
  color: var(--text-soft);
  text-align: left;
}
.ga-step:nth-child(2) { border-radius: var(--radius) 50% 50% var(--radius); }
.ga-step:nth-child(3) { border-radius: 50% 50% var(--radius) 50%; }
.ga-step:nth-child(4) { border-radius: 50% var(--radius) 50% 50%; }
.ga-step:nth-child(5) { border-radius: 50%; }
.ga-step span { font: 300 clamp(22px, 2.4vw, 38px)/1 var(--font-display); }
.ga-step b { font: 400 clamp(12px, 1.05vw, 15px)/1.25 var(--font-display); text-wrap: balance; }
.ga-step:hover { background: var(--card-stat); color: var(--text); }
.ga-step.is-past { background: var(--card-stat); }
.ga-step.is-on { background: var(--yellow); color: var(--ink); }
.ga-proc__panel { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px 24px; min-height: 92px; margin-top: clamp(16px, 2vw, 26px); padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px dashed var(--line); }
.ga-proc__panel p { margin: 0; transition: opacity .2s, transform .35s var(--ease); }
.ga-proc__panel.is-swap p { opacity: 0; transform: translateY(6px); }
.ga-proc__when { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--yellow); }
.ga-proc__text { max-width: 44em; font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; line-height: 1.5; }

/* --------------------------------------------------------------------------
   9. Team   10. Questions
   -------------------------------------------------------------------------- */
.ga-team { display: grid; grid-template-columns: clamp(180px, 20vw, 290px) minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: center; }
.ga-team__photo { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: #241f1b; }
.ga-team__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ga-team__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: clamp(18px, 2.2vw, 30px) 0 0; padding: 0; list-style: none; }
.ga-team__facts li { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--radius); background: var(--ga-s2); }
.ga-team__facts b { font: 300 clamp(24px, 2.4vw, 36px)/1 var(--font-display); color: var(--yellow); white-space: nowrap; }
.ga-team__facts span { font-size: 13.5px; line-height: 1.4; color: var(--text-soft); }

.ga-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.ga-faq__left .btn-cta { margin-top: 24px; }
.ga-q { border-top: 1px dashed var(--line); }
.ga-q:last-child { border-bottom: 1px dashed var(--line); }
.ga-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; line-height: 1.3; list-style: none; cursor: pointer; transition: color .25s; }
.ga-q summary::-webkit-details-marker { display: none; }
.ga-q summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font-size: 18px; font-weight: 300; line-height: 1; color: var(--text-soft); transition: transform .4s var(--spring), background-color .3s, color .3s, border-color .3s; }
.ga-q summary:hover { color: var(--yellow); }
.ga-q[open] summary::after { transform: rotate(45deg); background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.ga-q p { max-width: 46em; margin: 0; padding: 0 46px 18px 0; font-size: 15px; line-height: 1.55; color: var(--text-soft); animation: offer-rise .5s var(--ease); }

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .ga-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-fit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ga-niche--no { grid-column: 1 / -1; min-height: 0; }
  .ga-niche--no ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
}
@media (max-width: 900px) {
  .ga-why, .ga-count__body, .ga-calc__body, .ga-faq { grid-template-columns: minmax(0, 1fr); }
  .ga-plans, .ga-fit__grid { grid-template-columns: minmax(0, 1fr); }
  .ga-niche { min-height: 0; }
  .ga-niche--no ul { grid-template-columns: minmax(0, 1fr); }
  .ga-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
  .ga-steps::before { display: none; }
  .ga-steps li { padding-left: 22px; }
  .ga-steps li::before { left: 0; }
  .ga-team { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
  .ga-team__facts { grid-column: 1 / -1; }
  .ga-team__body { display: contents; }
  .ga-team__body > :not(.ga-team__facts) { grid-column: 2; }
  .ga-team__photo { grid-row: 1 / span 3; }
}
@media (max-width: 700px) {
  .ga-hero { min-height: 0; padding: 30px 14px 20px; border-radius: var(--radius-lg); }
  .ga-pill { flex-direction: column; align-items: stretch; padding: 8px; border-radius: var(--radius-lg); }
  .ga-pill__field { flex: none; height: 52px; padding: 0 12px; border-right: 0; border-bottom: 1px solid rgba(27, 26, 20, .14); }
  .ga-pill__btn { margin: 8px 0 0; justify-content: space-between; }
  .ga-hero__proof { position: relative; left: auto; bottom: auto; transform: none; margin-top: 22px; white-space: normal; }
  .js .intro-pending .ga-hero__proof { transform: translateY(18px); }
  .ga-sec { padding: 24px 14px; border-radius: var(--radius-lg); }
  .ga-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-report__badge { margin-left: 0; }
  .ga-cases__grid { grid-template-columns: minmax(0, 1fr); }
  .ga-steps { grid-template-columns: minmax(0, 1fr); }
  .ga-flow span { width: 76px; }
  .ga-flow i { width: calc((100% - 168px) * var(--w, 0)); }
  .ga-money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ga-money div:nth-child(3) { grid-column: 1 / -1; }
  .ga-money__main { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ga-in__box { width: 128px; height: 44px; }
  .ga-cur button { width: 44px; height: 40px; }
  /* the steps become a list; the text sits right under it */
  .ga-proc__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ga-step, .ga-step:nth-child(n) { display: flex; align-items: center; gap: 14px; aspect-ratio: auto; max-height: none; min-height: 52px; padding: 10px 18px; border-radius: 16px; }
  .ga-step span { font-size: 20px; }
  .ga-step b { font-size: 14px; }
  .ga-proc__panel { grid-template-columns: minmax(0, 1fr); min-height: 150px; }
  .ga-team { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; }
  .ga-team__facts { grid-template-columns: minmax(0, 1fr); }
  .ga-team__facts li { grid-template-columns: 84px minmax(0, 1fr); align-items: center; }
  .ga-q p { padding-right: 0; }
  .ga-tab { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ga-pill__btn.is-hit { animation: none; }
  .ga-flow i, .ga-proc__panel p { transition: none; }
}

/* Google Ads page on low computer screens (1280×720 and the like): the
   blocks tighten so each still fits under the header */
@media (min-width: 901px) and (max-height: 820px) {
  .ga-sec { padding-block: clamp(20px, 3.6vh, 34px); }
  .ga-head { margin-bottom: clamp(12px, 2.4vh, 22px); }
  .ga-sheet { gap: 8px; }
  .ga-sheet__read { display: none; }
  .ga-kpi { padding: 8px 12px; }
  .ga-kpi strong { font-size: clamp(17px, 1.6vw, 22px); }
  .ga-table th, .ga-table td { padding-block: 6px; }
  .ga-note { padding: 8px 12px; }
  .ga-plan { padding: 16px 20px; }
  .ga-plan__price b { font-size: clamp(34px, 6vh, 46px); }
  .ga-plan__budget { margin: 8px 0 !important; padding: 6px 0; }
  .ga-plan__list { gap: 5px; }
  .ga-plan__list li { font-size: 13.5px; }
  .ga-terms { margin-top: 10px; }
  .ga-terms li { padding: 6px 12px; }
  .ga-price__foot { margin-top: 8px; }
  .ga-gift { min-height: 38px; }
  .ga-calc__form, .ga-calc__out { padding: 14px 20px; }
  .ga-in { padding: 2px 0; }
  .ga-in__box { height: 34px; }
  .ga-cur { margin-bottom: 0; }
  .ga-cur button { height: 28px; }
  .ga-flow { gap: 3px; }
  .ga-flow li { height: 30px; }
  .ga-flow i { height: 22px; }
  .ga-money div { padding: 8px 12px; }
  .ga-calc__out { gap: 9px; }
}
@media (max-width: 700px) {
  .ga-pill__btn { align-self: stretch; }
  /* team: the title takes the full width; the photo sits beside the text */
  .ga-team { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; }
  .ga-team__body > .ga-label { grid-column: 1 / -1; grid-row: 1; }
  .ga-team__body > .ga-title { grid-column: 1 / -1; grid-row: 2; margin-bottom: 16px; }
  .ga-team__photo { grid-column: 1; grid-row: 3; align-self: start; }
  .ga-team__body > .ga-lead { grid-column: 2; grid-row: 3; margin-top: 0; }
  .ga-team__facts { grid-row: 4; margin-top: 18px; }
}
@media (max-width: 700px) {
  /* the fact's number takes the room it needs («up to 5», «Mon–Fri») */
  .ga-team__facts li { grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 14px; }
  .ga-team__facts b { font-size: 24px; }
}

/* Google Ads cases: the client's logo in its own colours on a light tile
   (as the clients' tiles show it on hover); a client shown anonymously gets
   the dark tile with a yellow line icon instead */
.ga-case__top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ga-case__logo { flex: none; display: grid; place-items: center; height: 44px; padding: 0 12px; border-radius: var(--radius); background: #f3efe9; }
.ga-case__logo img { display: block; width: auto; height: calc(var(--h, 22) * 1px); }
.ga-case__logo--icon { width: 44px; padding: 0; background: var(--bg); }
.ga-case__logo--icon svg { width: 24px; height: 24px; fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ga-case__top .ga-case__who { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.ga-case__top .ga-case__who span { font-size: 12.5px; }

/* Google Ads page: what the price does not include; the report table can be
   scrolled from the keyboard on a narrow screen */
.ga-price__not { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.ga-table:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Google Ads page: fixes from the UI/UX audit (3 Oct 2026) */
/* tablets: the hero's column must not grow with the form's contents */
.ga-hero { grid-template-columns: minmax(0, 1fr); }
.ga-hero__in { min-width: 0; }
/* nothing under 12 px */
.ga-steps__chips i, .ga-plan__name span { font-size: 12px; }
.ga-table thead th { font-size: 12px; }
.brief__num span { font-size: 12px; }
/* small labels on the lighter tiles: 4.5:1 against the tile */
.ga-kpi:not(.ga-kpi--main) span, .ga-money div:not(.ga-money__main) dt, .ga-note b span { color: var(--text-soft); }
/* a link inside a sentence is easier to hit */
.ga-link { display: inline-block; padding: 8px 0; margin: -8px 0; }
/* touch screens of any width: 44 px to tap */
@media (pointer: coarse) {
  .ga-tab { min-height: 44px; }
  .ga-cur button { width: 44px; height: 40px; }
}
@media (max-width: 420px) {
  .page-gads .brief__title { font-size: 9.6vw; }   /* «відеорозбору» is one long word */
}
@media (max-width: 380px) {
  /* К’юбик's line wraps instead of leaving the screen */
  .brief__say { max-width: 164px; white-space: normal; border-radius: 16px 16px 4px 16px; text-align: left; line-height: 1.25; }
  .ga-money div { padding: 10px 11px; }
  .ga-money dd { font-size: 15px; }
  .ga-money__main dd { font-size: 18px; }
}

/* Google Ads page: the hero column and its inner column never grow with the form; an inline link is easier to hit; an absurd number is cut, not spilled */
.ga-hero__in { grid-template-columns: minmax(0, 1fr); }
.ga-link { padding: 10px 0; margin: -10px 0; }
.ga-money dd { overflow: hidden; text-overflow: ellipsis; }

/* Google Ads page: between a phone and a small laptop the hero form stacks too (its hints were cut in a row); on phones the lead keeps a clear gap under the marked word */
@media (min-width: 701px) and (max-width: 860px) {
  .ga-pill { flex-direction: column; align-items: stretch; width: min(520px, 100%); padding: 8px; border-radius: var(--radius-lg); }
  .ga-pill__field { flex: none; height: 52px; padding: 0 12px; border-right: 0; border-bottom: 1px solid rgba(27, 26, 20, .14); }
  .ga-pill__btn { align-self: stretch; margin: 8px 0 0; justify-content: space-between; }
}
@media (max-width: 700px) {
  .page-gads .brief__lead { margin-top: 16px; }
}