/* ActiveZone — local preview styles
 * Design authority: teya-memory/design/AURADESIGN.md
 */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  font-size: var(--root-font, 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: var(--leading-tight);
}

/* pack h3-size-vs-body-20260824 + heading-scale-phi-h2-48-20260823
 * H1 / .hero__title metrics FREEZE. H2/H3 Light 300. Desktop H2=48, H3=36 (H2 > H3; body 16).
 * Generic AURA modular clamp (H2 24–36) DENY. calc(H2/1.25) DENY.
 * Phone ≤480 / 481–1100: H2 30 / H3 24. 1025–1100 stay with 1024
 * (scrollbar and 1026/1027 must not jump to desktop 36). H3 > body 16, H2 > H3. */
:root {
  --heading-h2-size: 48px;
  --heading-h3-size: 36px;
}

@media (min-width: 769px) and (max-width: 1100px) {
  :root {
    --heading-h2-size: 30px;
    --heading-h3-size: 24px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* H1 artboard 32 KEEP. H2 30 / H3 24 — not 26/16. */
  :root {
    --heading-h2-size: 30px;
    --heading-h3-size: 24px;
  }
}

@media (max-width: 480px) {
  /* H1 clamp FREEZE. */
  :root {
    --heading-h2-size: 30px;
    --heading-h3-size: 24px;
  }
}

/* HITL 2026-08-11: H1 Light 58/60 exact (desktop/base SoT) */
h1,
.h1 {
  font-weight: 300;
  font-size: 58px;
  line-height: 60px;
  letter-spacing: var(--tracking-display);
}

/* HITL 2026-08-16 + pack 20260823: H2 Light 300, size tracks --heading-h2-size. lh≈1.1 (~52–54 @48). */
h2,
.h2 {
  font-weight: 300;
  font-size: var(--heading-h2-size);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "CRSV" 0, "SHRP" 0;
}

h3,
.h3 {
  font-weight: 300;
  font-size: var(--heading-h3-size);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  max-width: var(--measure);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cta);
  color: var(--color-on-cta);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-4);
}

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

.section {
  padding-block: clamp(48px, 8vw, 120px);
}

.section--surface {
  background: var(--color-surface);
}

.section__head {
  margin-bottom: var(--space-7);
  max-width: 40rem;
}

.section__head p {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.lead {
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.measure {
  max-width: var(--measure);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-cta);
  color: var(--color-on-cta);
}

.btn--primary:hover {
  background: #1a1a1a;
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  background: var(--color-accent-deep);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--outline:hover {
  background: var(--color-surface);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  min-height: auto;
  padding: 0;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.btn--compact {
  min-height: 44px;
  padding: 10px 18px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.micro {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 28rem;
}

.accent-plate {
  display: inline;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.08em 0.22em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Header — F20: orange over hero, white after scroll past */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--color-accent);
  border-bottom: 1px solid transparent;
  transition: background 0.22s var(--ease-out, ease), border-color 0.22s ease;
}

/* F40: глухой оранж на hero; glass только .is-past-hero (header-glass-past-hero-20260813) */
.site-header.is-past-hero {
  background: rgb(255 255 255 / 0.74);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgb(10 10 10 / 0.08);
  transition: background 0.22s var(--ease-out, ease), border-color 0.22s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-past-hero {
    background: #ffffff;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-past-hero {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.site-header:not(.is-past-hero) .burger {
  background: rgb(255 255 255 / 0.92);
  border-color: rgb(10 10 10 / 0.14);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--space-4);
}

/* Brand+pages vs contacts+CTA (header-brand-nav-20260817). Logical props. */
.header-start {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  flex: 0 0 auto;
}

.header-end {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  margin-inline-start: auto;
  flex-shrink: 0;
  min-width: 0;
}

/* CSS-only room for future messenger/tel icons — no empty <a> */
.header-contacts {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  flex-shrink: 0;
}

.wordmark--logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.wordmark--logo img {
  height: 36px;
  width: auto;
  max-width: 200px;
}

.site-header .wordmark--logo img {
  height: 40px;
  max-width: 220px;
}

.site-footer .wordmark--footer img,
.site-footer .wordmark--logo img {
  height: 36px;
  width: auto;
  max-width: 200px;
}

.wordmark__img--on-light {
  display: none;
}

/* белая шапка после скролла past hero */
.site-header.is-past-hero .wordmark__img--on-accent {
  display: none;
}
.site-header.is-past-hero .wordmark__img--on-light {
  display: block;
}

/* legal pages: шапка всегда белая (.page-legal .site-header) */
.page-legal .site-header .wordmark__img--on-accent {
  display: none;
}
.page-legal .site-header .wordmark__img--on-light {
  display: block;
}

/* mobile sheet всегда светлый фон */
.mobile-nav .wordmark__img--on-accent {
  display: none;
}
.mobile-nav .wordmark__img--on-light {
  display: block;
}

.wordmark--hero {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: var(--space-4);
}

.nav {
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-5);
  min-width: 0;
  flex: 0 0 auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

/* Orange header: hover → white (not muddy accent-deep gray) */
.site-header:not(.is-past-hero) .nav a:hover,
.site-header:not(.is-past-hero) .header-mail:hover {
  color: #ffffff;
}

/* White header after scroll past hero */
.site-header.is-past-hero .nav a:hover,
.site-header.is-past-hero .header-mail:hover {
  color: var(--color-accent);
}

/* Legal pages: always-white bar — same hover as past-hero (not white-on-white) */
.page-legal .site-header .nav a:hover,
.page-legal .site-header .header-mail:hover {
  color: var(--color-accent);
}

/* Compact mailto in header-contacts (header-brand-nav-20260817). Logical props. */
.header-mail,
.header-contacts a[href^="mailto"] {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mobile-nav__list a.header-mail,
.mobile-nav__list a[href^="mailto"] {
  min-height: 44px;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.header-cta {
  display: none;
  flex-shrink: 0;
}

/* HITL 20260819: match .hero__actions .btn @>=769/>=1025 (20px). KEEP .btn--primary ink. */
a.btn.header-cta {
  border-radius: 20px;
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  padding: 0;
}

.burger__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}

.burger__bars span {
  display: block;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
}

.burger__close {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-ink);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.mobile-nav.is-open {
  pointer-events: auto;
  visibility: visible;
}

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.mobile-nav.is-open .mobile-nav__scrim {
  opacity: 1;
}

.mobile-nav__sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 360px);
  height: 100%;
  background: var(--color-bg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  overflow-y: auto;
}

.mobile-nav.is-open .mobile-nav__sheet {
  transform: translateX(0);
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
}

.mobile-nav__cta {
  margin-top: auto;
}

/* Hero scroll-stack (sticky pin + overlapping #tasks) */
.hero-stack {
  position: relative;
  isolation: isolate;
  touch-action: pan-y;
}

.hero-pin {
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  /* F49/F50/F57: 100svh + overflow clip ONLY on pin edges (no mid clip-band) */
  min-height: 100vh;
  min-height: 100svh;
  min-height: var(--hero-pin-min-h, 100dvh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-accent);
  overflow: clip;
}

.hero {
  position: relative;
  width: 100%;
  padding-block: clamp(32px, 4vw, 64px);
  flex: 1;
  display: flex;
  align-items: center;
  background: transparent;
  color: #ffffff;
  /* positioning context for full-bleed .hero-world */
  isolation: isolate;
  min-height: inherit;
}

/* F49: hero copy — desktop/tablet-h INSIDE .hero-artboard (scale with k).
 * Bottom-anchored (≤768): JS reparents to .hero-world > .hero__content (unscaled). */
.hero {
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-artboard .hero__content,
.hero-world > .hero__content {
  position: absolute;
  z-index: 80;
  will-change: auto;
  color: #ffffff;
  pointer-events: auto;
  max-width: 38rem;
  margin-top: 0;
  padding-top: 0;
  /* default pin (overridden per band) */
  left: 16px;
  top: 16px;
  width: min(481px, calc(100% - 32px));
}

.hero__content .wordmark--hero {
  margin-bottom: var(--space-3);
  color: #ffffff;
}

.hero__title {
  margin-bottom: var(--space-4);
  color: #ffffff;
  /* HITL 2026-08-11: Geologica Light 58/60 */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 58px;
  line-height: 60px;
  /* explicit <br> lines — balance soft-wraps long lines */
  text-wrap: unset;
}

.hero__lead,
.hero__bullets {
  margin-bottom: var(--space-5);
  color: rgb(255 255 255 / 0.92);
}

ul.hero__lead,
ul.hero__bullets {
  list-style: disc;
  list-style-position: outside;
  padding-inline-start: 1.15em;
  margin-block-start: 0;
}

ul.hero__lead li,
ul.hero__bullets li {
  margin-block: 0.15em;
  padding-inline-start: 0.15em;
}

ul.hero__lead li::marker,
ul.hero__bullets li::marker {
  color: #ffffff;
}

.hero__actions {
  pointer-events: auto;
}

/* Desktop scene from 1280. Below that, hero-v5.css owns the first screen. */
@media (min-width: 1280px) {
  .hero-artboard .hero__content {
    left: 445px; /* HITL 2026-08-11 hero-shift-right: was 379 → +66 air/fill right void */
    top: 47px; /* Figma 165:8 y=47 */
    /* HITL 2026-08-13: 3 nowrap lines as phone («Разработка сайта и» ≈547px @58) */
    width: 560px;
    max-width: 560px;
    overflow: visible;
    z-index: 80;
    pointer-events: auto;
  }

  .hero__content .wordmark--hero {
    /* Figma 131:593 starts at H1 y≈53 — no wordmark in frame */
    display: none;
  }

  .hero__title {
    margin-bottom: var(--space-3);
    /* HITL 2026-08-11 supersedes Figma 48px cast: Geologica Light 58/60 */
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 58px;
    line-height: 60px;
    letter-spacing: var(--tracking-display);
    max-width: 560px;
    /* explicit <br> 3 lines — same copy as phone, no intra-line wrap */
    text-wrap: unset;
    white-space: nowrap;
  }

  .hero__lead,
  .hero__bullets {
    /* Figma #131:643 Commissioner 14px; bullets → micro → CTA */
    margin-bottom: var(--space-3);
    font-size: 14px;
    line-height: 1.35;
    max-width: 340px;
    width: 340px;
  }

  /* Column stack: H1 → bullets → micro → CTA (never side-by-side).
   * !important: later @media(min-width:768) used to force display:block on content. */
  .hero-artboard .hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }

  .hero__content .hero__title,
  .hero__content .hero__lead,
  .hero__content .hero__bullets,
  .hero__content .micro,
  .hero__content .hero__actions {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .hero__content .micro {
    display: block !important;
    width: 100%;
    max-width: 340px;
    margin-block: 0 var(--space-3);
    margin-inline: 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgb(255 255 255 / 0.85);
  }

  /* AB-P3f4: desktop CTA — own row under micro */
  /* HITL 20260813: +10px down («Бесплатный аудит» / «Заполнить бриф») */
  .hero__actions {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100%;
    margin-block-start: 10px;
    margin-block-end: 0;
    margin-inline: 0;
    gap: var(--space-2);
    position: relative;
    z-index: 81;
    pointer-events: auto;
  }

  .hero__actions .btn {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
    min-height: 44px;
    padding-block: 0.42rem;
    padding-inline: 20px;
    font-size: 14px;
    border-radius: 20px;
  }
}

/* Tablet coffee+seo band: ≥769 (fg18). 768 → phone STACK (fg20).
 * Content inside 1024×568.89 artboard — design-px, no *k double-scale. */
@media (min-width: 769px) and (max-width: 1024px) and (min-width: 99999px) {
  /* Export 1009 → 1024: content 358.32 / 3.04 / 251.07 */
  .hero-artboard .hero__content {
    left: 358.32px;
    top: 3.04px;
    /* HITL 2026-08-13: fit phone 3-line H1 + long bullets at 28px, keep tablet-H pins */
    width: 272px;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding-inline-start: 0;
    z-index: 80;
    pointer-events: auto;
  }

  /*
   * AB-P2 R3 densify (Tablet H): hide wordmark — frees ~40px so title/lead/CTA
   * fit above writer (design y≈373.48) without mid-px / squeeze 24%.
   */
  .hero__content .wordmark--hero {
    display: none;
  }

  .hero__title {
    margin-bottom: 0.35rem;
    /* WARN: hero FREEZE overflow clamp — not HITL 58/60 on tablet H */
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.22;
    white-space: nowrap;
  }

  .hero__lead,
  .hero__bullets {
    margin-bottom: 0.35rem;
    font-size: 13px;
    line-height: 1.22;
  }

  .hero__lead li,
  .hero__bullets li {
    white-space: nowrap;
  }

  /* AB-P2 CTA stack @Tablet H: single outline; column + nowrap */
  /* HITL polish-4: visual H1→bullet > box 5.6px — pad so bullet→btn ~11px (not margin: collapses) */
  .hero__actions {
    margin-block-start: 0;
    margin-bottom: 0;
    padding-block-start: 0.35rem;
    gap: 0.3rem;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    pointer-events: auto;
  }

  .hero__actions .btn {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    padding-block: 0.32rem;
    padding-inline: 0.55rem;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 20px;
  }

  .hero__content .micro {
    display: none;
  }
}

/*
 * fg20 STACK ≤768: copy OUTSIDE bottom-anchored artboard (JS reparent →
 * .hero-world > .hero__content). Pins relative to .hero-world / pin — fold-safe.
 */
@media (max-width: 768px) and (min-width: 99999px) {
  .hero-world > .hero__content {
    left: 0;
    right: 0;
    top: var(--header-h, 72px);
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 8px 14px 8px;
    box-sizing: border-box;
    z-index: var(--hero-content-z, 80);
    pointer-events: auto;
  }

  .hero__content .wordmark--hero {
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
  }

  .hero__title {
    margin-bottom: var(--space-2);
    /* WARN: ≤768 hero FREEZE overflow clamp — HITL 58/60 desktop SoT only */
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.2rem, 1.05rem + 1.2vw, 1.55rem);
    line-height: 1.22;
  }

  .hero__lead,
  .hero__bullets {
    margin-bottom: var(--space-3);
    font-size: clamp(0.78rem, 0.72rem + 0.4vw, 0.9rem);
    line-height: 1.3;
  }

  .hero__actions {
    margin-bottom: 0;
    gap: var(--space-2);
    flex-wrap: nowrap;
    position: relative;
    z-index: 70;
    pointer-events: auto;
  }

  .hero__actions .btn {
    min-height: 44px; /* F61.1 soft: touch target ≥44 */
    padding: 10px 12px;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .hero__content .micro {
    display: none;
  }
}

/* F66: short-vh — NEVER max-height:38% + overflow:hidden (clip through CTA) */
.hero-pin.is-hero-short .hero-artboard .hero__content {
  /* no forced top — inherit band pins */
  max-height: none;
  overflow: visible;
}

.hero-pin.is-hero-short .hero__content {
  overflow: visible;
}

/* F66 short-vh densify: only <1025 — desktop Figma SSOT stays 48/14 design-px
 * (text now scales with artboard k; shrinking fonts on short desktop fights SSOT). */
@media (max-width: 1024px) and (min-width: 99999px) {
  .hero-pin.is-hero-short .hero__content .wordmark--hero {
    margin-bottom: var(--space-1);
  }

  .hero-pin.is-hero-short .hero__title {
    font-size: 26px;
    margin-bottom: var(--space-2);
    line-height: 1.2;
  }

  .hero-pin.is-hero-short .hero__lead,
  .hero-pin.is-hero-short .hero__bullets {
    font-size: 13px;
    margin-bottom: var(--space-2);
    line-height: 1.3;
  }

  .hero-pin.is-hero-short .hero__actions {
    margin-bottom: 0;
    gap: var(--space-2);
  }

  .hero-pin.is-hero-short .hero__content .micro {
    display: none;
  }
}

/* Accent plate on orange: invert to white plate + dark text for contrast */
.hero .accent-plate {
  background: #ffffff;
  color: var(--color-ink);
}

.hero__actions {
  margin-bottom: var(--space-4);
}

  .hero__actions {
    margin-bottom: 0;
    position: relative;
    z-index: 70;
  }

  .hero__actions .btn {
    position: relative;
    z-index: 71;
  }

/* HITL 20260813: win over later unscoped .hero__actions { margin-bottom: 0 } */
@media (min-width: 1280px) {
  .hero-artboard .hero__content .hero__actions {
    margin-block-start: 10px;
  }
}

.hero__content .micro {
  color: rgb(255 255 255 / 0.85);
}

/* Primary CTA on orange: white button + dark text */
.hero .btn--primary {
  background: #ffffff;
  color: var(--color-ink);
  border-color: #ffffff;
}

.hero .btn--primary:hover {
  background: rgb(255 255 255 / 0.92);
  color: var(--color-ink);
}

.hero .btn--primary:focus-visible {
  outline-color: #ffffff;
}

  /* HITL 20260813: «Бесплатный аудит» ink + white — desktop/tablet/phone */
  .hero .btn--outline {
    background: var(--color-ink);
    background-color: var(--color-ink);
    color: #ffffff;
    border-color: var(--color-ink);
  }

.hero .btn--outline:hover,
.hero .btn--outline:focus-visible,
.hero .btn--outline:active {
  background: #ffffff;
  background-color: #ffffff;
  color: var(--color-ink);
  border-color: #ffffff;
}

.hero .btn--outline:focus-visible {
  outline-color: #ffffff;
}

/* Brief CTA: white fill, ink text; hover = ink + white */
.hero .btn--hero-brief {
  background: #ffffff;
  color: var(--color-ink);
  border-color: #ffffff;
}

.hero .btn--hero-brief:hover,
.hero .btn--hero-brief:focus-visible,
.hero .btn--hero-brief:active {
  background: var(--color-ink);
  color: #ffffff;
  border-color: var(--color-ink);
}

.hero .btn--hero-brief:focus-visible {
  outline-color: #ffffff;
}

/* ===== LAW-FG2 hero scene: FG + writer LEFT-BOTTOM (rev.3-interim-fg2) =====
 * SSOT: HERO_LAYOUT_LAW.md + HERO_SCENE_COMPOSITION.md / SLOTS.json (version LAW-FG2)
 * One containing block: .hero-pin. Stage = empty wrapper, NO --hero-scene-scale.
 * SHOW: cartoon-a-fg-phone + bubble-site + cartoon-a-mid-writer + bubble-blog.
 * HIDE: couple/coffee/sky/scooter + bubble-seo (display:none).
 * FG anchors unchanged (fg1.2). Writer: LEFT-BOTTOM mirror FG.
 * Techniques: fg-only-baseline-then-add · add-writer-left-bottom-from-arrow
 */
.hero__visual,
.hero-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  z-index: 1;
  overflow: visible;
  border-radius: 0;
  isolation: isolate;
  background: transparent;
  pointer-events: none;
}

/* Wrapper only — does not affect geometry */
.hero-world__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transform-origin: bottom left;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  will-change: auto;
}

.hero-world__set {
  position: absolute;
  inset: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.hero-layer {
  position: absolute;
  inset: auto;
  display: block;
  max-width: none;
  height: auto;
  width: var(--layer-width, 28%);
  object-fit: contain;
  object-position: bottom center;
  transform-origin: var(--layer-origin, bottom left);
  --layer-scale: 1;
  --layer-width: 28%;
  --layer-origin: bottom left;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(var(--layer-scale));
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* --- FG3 FULL CAST — SHOW all · SSOT Figma 131:593 1521×666 (desktop) --- */
.is-cast-hide {
  display: none !important;
}

[data-slot="cartoon-a-mid-couple"],
[data-slot="cartoon-a-mid-coffee"],
[data-slot="cartoon-a-sky-cloud"],
[data-slot="cartoon-a-sky-plane"],
[data-slot="cartoon-a-far-scooter"],
[data-slot="cartoon-a-fg-phone"],
[data-slot="cartoon-a-mid-writer"],
[data-slot="bubble-site"],
[data-slot="bubble-blog"],
[data-slot="bubble-seo"],
[data-slot="dots-site"],
[data-slot="dots-blog"],
[data-slot="dots-seo"],
.hero-bubble--site,
.hero-bubble--blog,
.hero-bubble--seo,
.hero-dots--site,
.hero-dots--blog,
.hero-dots--seo {
  display: block;
}

.hero-world {
  --figma-w: 1521;
  --figma-h: 666;
  --hero-design-w: 1521;
  --hero-design-h: 666;
}

/* Desktop ≥1280: Figma SoT 165:8 artboard 1521×666 — DIRECT design px.
 * FORBIDDEN as SSOT: etalon 1:2 / 1:3 (2196) remap + phone clamp to 1042.
 * Cast left/top/width UNCHANGED (phone top 299 stays — no hover/float).
 * Phone LAYOUT bottom 685 (+19) but OPAQUE bbox ≈668 (+2); bleed matches opaque.
 * Stacking: .hero-pin z=3 above #tasks z=2 at seam; JS adds .is-cover-active
 * → pin z=1 once tasks overlaps (>40px) so sticky cover still wins on scroll.
 */
@media (min-width: 1280px) {
  .hero-pin {
    /* 20260811 binary search bleed-y 0..8 @1440 PIL:
     * 0 → flesh_on_gray=0, pure_orange_gap=0 (cast on last pin row).
     * 1+ → pure_orange_gap grows (float). 20 was catastrophic.
     * hidden + clip-path inset(0) + contain:paint — kill transform subpixel leak.
     * Phone top 299 UNCHANGED. */
    --hero-bleed-y: 0;
    --hero-bleed-x: 0;
    height: calc((666 + var(--hero-bleed-y)) * 1px * var(--hero-scale, 0.85)) !important;
    min-height: calc((666 + var(--hero-bleed-y)) * 1px * var(--hero-scale, 0.85)) !important;
    top: 0;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    clip-path: inset(0);
    /* Above #tasks cover at rest so residual transform bleed isn't occluded at seam */
    z-index: 3;
  }

  .hero-pin.is-cover-active {
    z-index: 1;
  }

  /* Keep orange under X/Y bleed if cast paints past pin edge (no grey hole). */
  .hero-stack {
    background: var(--color-accent);
  }

  /* Explicit: cover stays 2 — below pin(3) at seam, above pin(1) when .is-cover-active */
  #tasks.section--cover {
    z-index: 2;
  }

  /* Fixed 1521×666 CB for pin-% — overflow visible so cast paint past box (no clamp). */
  .hero-artboard {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 1521px;
    height: 666px;
    margin-left: -760.5px;
    transform: scale(var(--hero-scale, 0.85));
    transform-origin: top center;
    will-change: transform;
    pointer-events: none;
    overflow: visible;
  }

  .hero-pin .hero,
  .hero-pin .hero-world,
  .hero-pin .hero-world__stage {
    overflow: visible;
  }

  .hero-pin .hero-world__set {
    position: absolute;
    inset: 0;
    transform: none;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hero-pin .hero-world__set .hero-layer {
    animation: none !important;
    transform: none !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center center;
    transform-origin: top left;
  }


  /* hero-figma-1521 SSOT — Figma 165:8 Container 1521×666 (NOT etalon 1:2/1:3) */
  /* cloud */
  .hero-pin [data-slot="cartoon-a-sky-cloud"] {
    left: calc(183.5 / 1521 * 100%) !important;
    top: calc(-1 / 666 * 100%) !important;
    z-index: 10;
    width: calc(168 / 1521 * 100%) !important;
    height: auto !important;
    --layer-width: calc(168 / 1521 * 100%);
  }

  /* plane */
  .hero-pin [data-slot="cartoon-a-sky-plane"] {
    left: calc(1263 / 1521 * 100%) !important;
    top: calc(0 / 666 * 100%) !important;
    z-index: 12;
    width: calc(116 / 1521 * 100%) !important;
    height: auto !important;
    --layer-width: calc(116 / 1521 * 100%);
  }

  /* scooter — LEFT bottom */
  .hero-pin [data-slot="cartoon-a-far-scooter"] {
    left: calc(42 / 1521 * 100%) !important;
    top: calc(470 / 666 * 100%) !important;
    z-index: 14;
    width: calc(192 / 1521 * 100%) !important;
    height: auto !important;
    --layer-width: calc(192 / 1521 * 100%);
  }

  /* coffee — Figma 165:8 restore top 293 (undo HITL Δtop −90) */
  .hero-pin [data-slot="cartoon-a-mid-coffee"] {
    left: calc(167 / 1521 * 100%) !important;
    top: calc(293 / 666 * 100%) !important;
    z-index: 20;
    width: calc(180 / 1521 * 100%) !important;
    height: auto !important;
    --layer-width: calc(180 / 1521 * 100%);
    pointer-events: none;
  }

  /* couple — HITL 2026-08-11 cloud-equal: 1043 → 1016 (rightFinger≈leftCloud; desktop only) */
  .hero-pin [data-slot="cartoon-a-mid-couple"] {
    left: calc(1016 / 1521 * 100%) !important;
    top: calc(54 / 666 * 100%) !important;
    z-index: 36 !important;
    width: calc(250 / 1521 * 100%) !important;
    height: calc(238 / 666 * 100%) !important;
    --layer-width: calc(250 / 1521 * 100%);
  }

  /* writer — Figma sync 1:1966 2026-08-10: 1255/437/230/236; PNG faces RIGHT → scaleX(-1) */
  .hero-pin .hero-world__set [data-slot="cartoon-a-mid-writer"],
  .hero-pin [data-slot="cartoon-a-mid-writer"] {
    left: calc(1255 / 1521 * 100%) !important;
    top: calc(437 / 666 * 100%) !important;
    bottom: auto !important;
    z-index: 28;
    width: calc(230 / 1521 * 100%) !important;
    height: calc(236 / 666 * 100%) !important;
    --layer-width: calc(230 / 1521 * 100%);
    transform: scaleX(-1) !important;
    transform-origin: center center !important;
  }

  /* fg-phone — Figma sync 1:1966: 735/299/386/386; layout +19 empty pad; opaque ~+2 in pin bleed */
  .hero-pin .hero-world__set [data-slot="cartoon-a-fg-phone"],
  .hero-pin [data-slot="cartoon-a-fg-phone"] {
    left: calc(735 / 1521 * 100%) !important;
    top: calc(299 / 666 * 100%) !important;
    bottom: auto !important;
    z-index: 40;
    width: calc(386 / 1521 * 100%) !important;
    height: calc(386 / 666 * 100%) !important;
    --layer-width: calc(386 / 1521 * 100%);
  }

  /* bubble-seo — Figma sync 1:1966 2026-08-10: 739/309/w118 */
  .hero-pin .hero-bubble--seo,
  .hero-pin [data-slot="bubble-seo"] {
    z-index: 46;
    left: calc(739 / 1521 * 100%) !important;
    top: calc(309 / 666 * 100%) !important;
    width: calc(118 / 1521 * 100%) !important;
    min-width: 0;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
    overflow: visible !important;
  }

  .hero-pin .hero-bubble--seo::before,
  .hero-pin .hero-bubble--seo::after {
    content: none !important;
    display: none !important;
  }

  /* bubble-blog — HITL 2026-08-11 nudge2: w120→128, left −8 (full Δ leftward) */
  .hero-pin .hero-bubble--blog,
  .hero-pin [data-slot="bubble-blog"] {
    z-index: 48;
    left: calc(1199 / 1521 * 100%) !important;
    top: calc(406 / 666 * 100%) !important;
    width: calc(128 / 1521 * 100%) !important;
    min-width: 0;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* bubble-site — Figma sync 1:1966 2026-08-10: 240/231/w115 */
  .hero-pin .hero-bubble--site,
  .hero-pin [data-slot="bubble-site"] {
    z-index: 50;
    left: calc(240 / 1521 * 100%) !important;
    top: calc(231 / 666 * 100%) !important;
    width: calc(115 / 1521 * 100%) !important;
    min-width: 0;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .hero-pin .hero-bubble--thought .hero-bubble__cloud {
    display: block !important;
  }

  /* thought text: centered in cloud (HITL CENTER align) */
  .hero-pin .hero-bubble--thought .hero-bubble__text {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    text-align: center !important;
    left: 15% !important;
    right: 15% !important;
    top: 16% !important;
    bottom: 26% !important;
  }

  /* blog 4-line scallop — HITL 2026-08-11 nudge2: bottom 24→22, left inset 15→17 */
  .hero-pin .hero-bubble--blog .hero-bubble__text {
    bottom: 22% !important;
    left: 17% !important;
  }

  .hero-pin .hero-dots--seo,
  .hero-pin [data-slot="dots-seo"],
  .hero-pin .hero-dots--blog,
  .hero-pin [data-slot="dots-blog"],
  .hero-pin .hero-dots--site,
  .hero-pin [data-slot="dots-site"] {
    display: block !important;
    z-index: 47 !important;
  }

  /* dots-seo — Figma sync 1:1966 2026-08-10: 829/839/851 · 387/407/426 · 10/7.5/5 */
  .hero-pin .hero-dots--seo .hero-dots__dot--lg {
    left: calc(829 / 1521 * 100%) !important;
    top: calc(387 / 666 * 100%) !important;
    width: calc(10 / 1521 * 100%) !important;
  }
  .hero-pin .hero-dots--seo .hero-dots__dot--md {
    left: calc(839 / 1521 * 100%) !important;
    top: calc(407 / 666 * 100%) !important;
    width: calc(7.5 / 1521 * 100%) !important;
  }
  .hero-pin .hero-dots--seo .hero-dots__dot--sm {
    left: calc(851 / 1521 * 100%) !important;
    top: calc(426 / 666 * 100%) !important;
    width: calc(5 / 1521 * 100%) !important;
  }

  /* dots-blog — Figma sync 1:1966 2026-08-10: 1302/1318/1337 · 468/487/499 · 11/8/6 */
  .hero-pin .hero-dots--blog .hero-dots__dot--lg {
    left: calc(1302 / 1521 * 100%) !important;
    top: calc(468 / 666 * 100%) !important;
    width: calc(11 / 1521 * 100%) !important;
  }
  .hero-pin .hero-dots--blog .hero-dots__dot--md {
    left: calc(1318 / 1521 * 100%) !important;
    top: calc(487 / 666 * 100%) !important;
    width: calc(8 / 1521 * 100%) !important;
  }
  .hero-pin .hero-dots--blog .hero-dots__dot--sm {
    left: calc(1337 / 1521 * 100%) !important;
    top: calc(499 / 666 * 100%) !important;
    width: calc(6 / 1521 * 100%) !important;
  }

  /* dots-site — Figma sync 1:1966 2026-08-10: 273/268/261 · 303/314/320 · 10/7/5 */
  .hero-pin .hero-dots--site {
    z-index: 51 !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--lg {
    left: calc(273 / 1521 * 100%) !important;
    top: calc(303 / 666 * 100%) !important;
    width: calc(10 / 1521 * 100%) !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--md {
    left: calc(268 / 1521 * 100%) !important;
    top: calc(314 / 666 * 100%) !important;
    width: calc(7 / 1521 * 100%) !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--sm {
    left: calc(261 / 1521 * 100%) !important;
    top: calc(320 / 666 * 100%) !important;
    width: calc(5 / 1521 * 100%) !important;
  }
}

/*
 * fg35 NUCLEAR: deleted fg27–fg34 mid hacks
 * (soft floors, 1025–1280 bubble/dots ΔX −120/−330, couple right nudges,
 * content 24%/17rem/0.198 finger squeeze). Desktop ≥1025 = Figma 1521 table.
 */

/* fallback defaults for <1025 — tablet/phone cast SKIP this pass (desktop SoT 165:8 only).
 * Values below are legacy band fallbacks; NOT etalon 1:2/1:3 SSOT for desktop pins. */
[data-slot="cartoon-a-sky-cloud"] {
  left: calc(130 / 1521 * 100%);
  top: calc(20 / 666 * 100%);
  z-index: 10;
  width: calc(180 / 1521 * 100%);
  height: auto;
  --layer-width: calc(180 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

[data-slot="cartoon-a-sky-plane"] {
  left: calc(1250 / 1521 * 100%);
  top: calc(65 / 666 * 100%);
  z-index: 12;
  width: calc(180 / 1521 * 100%);
  height: auto;
  --layer-width: calc(180 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

[data-slot="cartoon-a-far-scooter"] {
  left: calc(110 / 1521 * 100%);
  top: calc(520 / 666 * 100%);
  z-index: 14;
  width: calc(120 / 1521 * 100%);
  height: auto;
  --layer-width: calc(120 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

[data-slot="cartoon-a-mid-coffee"] {
  left: calc(167 / 1521 * 100%);
  top: calc(225 / 666 * 100%);
  z-index: 20;
  width: calc(228 / 1521 * 100%);
  height: auto;
  --layer-width: calc(228 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

[data-slot="cartoon-a-mid-couple"] {
  left: calc(1016 / 1521 * 100%); /* HITL 2026-08-11 cloud-equal: was 1043 */
  top: calc(14 / 666 * 100%);
  z-index: 36;
  width: calc(389 / 1521 * 100%);
  height: calc(348 / 666 * 100%);
  --layer-width: calc(389 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

[data-slot="cartoon-a-mid-writer"] {
  left: calc(1071 / 1521 * 100%);
  top: calc(437 / 666 * 100%);
  right: auto;
  bottom: auto;
  z-index: 28;
  width: calc(292 / 1521 * 100%);
  height: calc(236 / 666 * 100%);
  max-width: none;
  max-height: none;
  --layer-width: calc(292 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

[data-slot="cartoon-a-fg-phone"] {
  left: calc(855 / 1521 * 100%);
  top: calc(299 / 666 * 100%);
  right: auto;
  bottom: auto;
  z-index: 40;
  width: calc(386 / 1521 * 100%);
  height: calc(386 / 666 * 100%);
  max-width: none;
  max-height: none;
  --layer-width: calc(386 / 1521 * 100%);
  transform: none;
  transform-origin: top left;
  object-fit: contain;
}

.hero-bubble--seo {
  z-index: 46;
  left: calc(530 / 1521 * 100%);
  top: calc(268 / 666 * 100%);
  right: auto;
  bottom: auto;
  width: calc(210 / 1521 * 100%);
  min-width: 0;
  height: auto;
  max-width: none;
  transform: none;
  transform-origin: top left;
}

.hero-bubble--blog {
  z-index: 48;
  left: calc(1015 / 1521 * 100%);
  top: calc(330 / 666 * 100%);
  right: auto;
  bottom: auto;
  width: calc(210 / 1521 * 100%);
  min-width: 0;
  height: auto;
  max-width: none;
  transform: none;
  transform-origin: top left;
}

.hero-bubble--site {
  z-index: 50;
  left: calc(205 / 1521 * 100%);
  top: calc(150 / 666 * 100%);
  right: auto;
  bottom: auto;
  width: calc(195 / 1521 * 100%);
  min-width: 0;
  height: auto;
  max-width: none;
  transform: none;
  transform-origin: top left;
}

/* ===== fg35: shared ≤1024 pin chrome (no floor-band / stack hide) ===== */
:root {
  --hero-cast-tablet-max: 1024px;
  --hero-cast-phone-max: 768px;
  --hero-content-z: 80;
}

@media (max-width: 1024px) and (min-width: 99999px) {
  :root {
    --hero-pin-min-h: 0px;
    --hero-pin-tasks-overlap: 12px;
  }

  .hero-pin {
    position: relative;
    top: auto;
    justify-content: flex-start;
    overflow: visible;
    box-shadow: none;
  }

  .hero-stack {
    background: var(--color-accent);
  }

  .hero-pin::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(var(--hero-pin-tasks-overlap) + 4px);
    background: var(--color-accent);
    z-index: 0;
    pointer-events: none;
  }

  .hero {
    flex: 1 1 auto;
    min-height: 100%;
    align-items: stretch;
    padding-bottom: 0;
  }

  #tasks.section--cover {
    margin-top: calc(-1 * var(--hero-pin-tasks-overlap) - 4px);
    padding-top: 0;
    position: relative;
    z-index: 2;
    background-color: var(--tasks-cover-bg, var(--color-surface));
  }

  .hero__content {
    z-index: var(--hero-content-z);
  }

  .hero-pin .hero-world__set {
    position: absolute;
    inset: 0;
    transform: none;
    width: 100%;
    height: 100%;
  }

  .hero-pin .hero-world__set .hero-layer {
    animation: none !important;
    transform: none !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center center;
    transform-origin: top left;
  }

  /* Writer facing = Figma native (RIGHT/up) — no mirror toward H1 (≤1024) */
  .hero-pin .hero-world__set [data-slot="cartoon-a-mid-writer"] {
    transform: none !important;
    transform-origin: top left !important;
  }
}

/*
 * B. Tablet H 769–1024 — AB-P2 artboard 1024×568.89 (NOT 2196)
 * HERO_SCENE_COMPOSITION.md §3 — fixed box + scale(k); copy INSIDE artboard (same k).
 */
@media (min-width: 769px) and (max-width: 1024px) and (min-width: 99999px) {
  .hero-world {
    --figma-w: 1024;
    --figma-h: 568.89;
    --hero-design-w: 1024;
    --hero-design-h: 568.89;
  }

  .hero-artboard {
    position: absolute;
    /* override base .hero-world__stage inset:0 — do NOT set inset:auto after left */
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 1024px;
    height: 568.89px;
    margin-left: -512px;
    transform: scale(var(--hero-scale, 1));
    transform-origin: top center;
    will-change: transform;
    pointer-events: none;
  }

  .hero-pin {
    /* AB-P2: pin = designH * k (replaces fluid 100vw×AR) */
    /* Export 1009: phone bottom ~600 > 568.89 — clip like desktop lock; do NOT raise phone top */
    height: calc(568.89px * var(--hero-scale, 1)) !important;
    min-height: calc(568.89px * var(--hero-scale, 1)) !important;
    max-height: none;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    clip-path: inset(0);
  }

  /* Export 1009 (286:690) scaled → 1024×568.89 — HITL 20260811 */
  .hero-pin [data-slot="cartoon-a-sky-cloud"] {
    display: block !important;
    left: calc(163.43 / 1024 * 100%) !important;
    top: calc(-14.21 / 568.89 * 100%) !important;
    width: calc(113.03 / 1024 * 100%) !important;
    height: calc(113.03 / 568.89 * 100%) !important;
    --layer-width: calc(113.03 / 1024 * 100%);
    z-index: 10;
  }

  .hero-pin [data-slot="cartoon-a-sky-plane"] {
    display: block !important;
    left: calc(850.56 / 1024 * 100%) !important;
    top: calc(-0.14 / 568.89 * 100%) !important;
    width: calc(78.02 / 1024 * 100%) !important;
    height: calc(87 / 568.89 * 100%) !important;
    --layer-width: calc(78.02 / 1024 * 100%);
    z-index: 12;
  }

  .hero-pin [data-slot="cartoon-a-far-scooter"] {
    display: block !important;
    left: calc(47.71 / 1024 * 100%) !important;
    top: calc(336.92 / 568.89 * 100%) !important;
    width: calc(129.04 / 1024 * 100%) !important;
    height: calc(129.04 / 568.89 * 100%) !important;
    --layer-width: calc(129.04 / 1024 * 100%);
    z-index: 14;
  }

  .hero-pin [data-slot="cartoon-a-mid-coffee"] {
    display: block !important;
    left: calc(141.09 / 1024 * 100%) !important;
    top: calc(132.94 / 568.89 * 100%) !important;
    width: calc(154.29 / 1024 * 100%) !important;
    height: calc(148.16 / 568.89 * 100%) !important;
    --layer-width: calc(154.29 / 1024 * 100%);
    z-index: 20;
    pointer-events: none;
  }

  .hero-pin [data-slot="cartoon-a-mid-couple"] {
    display: block !important;
    left: calc(633.4 / 1024 * 100%) !important;
    top: calc(23.34 / 568.89 * 100%) !important;
    width: calc(239.56 / 1024 * 100%) !important;
    height: calc(221.23 / 568.89 * 100%) !important;
    --layer-width: calc(239.56 / 1024 * 100%);
    z-index: 22;
  }

  .hero-pin .hero-world__set [data-slot="cartoon-a-mid-writer"],
  .hero-pin [data-slot="cartoon-a-mid-writer"] {
    display: block !important;
    left: calc(749.54 / 1024 * 100%) !important;
    top: calc(356.76 / 568.89 * 100%) !important;
    width: calc(197.04 / 1024 * 100%) !important;
    height: calc(202 / 568.89 * 100%) !important;
    --layer-width: calc(197.04 / 1024 * 100%);
    z-index: 28;
    /* HITL tablet-H 20260811: mirror toward H1/center; beat ≤1024 .hero-layer transform:none */
    transform: scaleX(-1) !important;
    transform-origin: center center !important;
  }

  .hero-pin [data-slot="cartoon-a-fg-phone"] {
    display: block !important;
    left: calc(350.5 / 1024 * 100%) !important;
    top: calc(269.94 / 568.89 * 100%) !important;
    width: calc(260.06 / 1024 * 100%) !important;
    height: calc(330 / 568.89 * 100%) !important;
    --layer-width: calc(260.06 / 1024 * 100%);
    z-index: 40;
  }

  .hero-pin .hero-bubble--seo,
  .hero-pin [data-slot="bubble-seo"] {
    display: block !important;
    left: calc(302.49 / 1024 * 100%) !important;
    top: calc(278.64 / 568.89 * 100%) !important;
    width: calc(141.03 / 1024 * 100%) !important;
    min-width: 0;
    height: auto !important;
    z-index: 46;
    pointer-events: none;
  }

  .hero-pin .hero-bubble--blog,
  .hero-pin [data-slot="bubble-blog"] {
    display: block !important;
    left: calc(717.65 / 1024 * 100%) !important;
    top: calc(305.46 / 568.89 * 100%) !important;
    width: calc(141.09 / 1024 * 100%) !important;
    min-width: 0;
    height: auto !important;
    z-index: 48;
  }

  .hero-pin .hero-world__set .hero-bubble--site.hero-layer,
  .hero-pin .hero-world__set .hero-bubble--site,
  .hero-pin .hero-world__set [data-slot="bubble-site"],
  .hero-pin .hero-bubble--site,
  .hero-pin [data-slot="bubble-site"] {
    display: block !important;
    /* HITL polish-4: smaller coffee cloud — width↓ + stronger squash; stay over coffee */
    left: calc(198 / 1024 * 100%) !important;
    top: calc(82.2 / 568.89 * 100%) !important;
    width: calc(105 / 1024 * 100%) !important;
    min-width: 0;
    height: auto !important;
    z-index: 50;
    /* origin bottom → top drops clear of sky-cloud; specificity beats ≤1024 transform:none */
    transform: scaleY(0.72) !important;
    transform-origin: center bottom !important;
  }

  .hero-pin .hero-bubble--site .hero-bubble__cloud {
    transform: none;
  }

  .hero-pin [data-slot="dots-seo"],
  .hero-pin .hero-dots--seo,
  .hero-pin [data-slot="dots-blog"],
  .hero-pin .hero-dots--blog,
  .hero-pin [data-slot="dots-site"],
  .hero-pin .hero-dots--site {
    display: block !important;
  }

  /* Export 1009 dots — seo trail */
  .hero-pin .hero-dots--seo .hero-dots__dot--lg {
    left: calc(402.3 / 1024 * 100%) !important;
    top: calc(358 / 568.89 * 100%) !important;
    width: calc(8.08 / 1024 * 100%) !important;
  }
  .hero-pin .hero-dots--seo .hero-dots__dot--md {
    left: calc(413.3 / 1024 * 100%) !important;
    top: calc(372 / 568.89 * 100%) !important;
    width: calc(5.72 / 1024 * 100%) !important;
  }
  .hero-pin .hero-dots--seo .hero-dots__dot--sm {
    left: calc(426.3 / 1024 * 100%) !important;
    top: calc(385 / 568.89 * 100%) !important;
    width: calc(3.7 / 1024 * 100%) !important;
  }

  .hero-pin .hero-dots--blog {
    z-index: 62 !important;
  }
  /* HITL dots-raise2: lift blog trail to visual cloud (SVG path bottom+6).
     #bubble-blog box includes empty viewBox tail — DO NOT use el.bottom for gap.
     before 409/425.5/441.5 → after 390.5/407/423 (Δ −18.5 design, intervals kept) */
  .hero-pin .hero-dots--blog .hero-dots__dot--lg {
    left: calc(778.23 / 1024 * 100%) !important;
    top: calc(390.5 / 568.89 * 100%) !important;
    width: calc(8.76 / 1024 * 100%) !important;
  }
  .hero-pin .hero-dots--blog .hero-dots__dot--md {
    left: calc(791.34 / 1024 * 100%) !important;
    top: calc(407 / 568.89 * 100%) !important;
    width: calc(6.4 / 1024 * 100%) !important;
  }
  .hero-pin .hero-dots--blog .hero-dots__dot--sm {
    left: calc(803.97 / 1024 * 100%) !important;
    top: calc(423 / 568.89 * 100%) !important;
    width: calc(4.17 / 1024 * 100%) !important;
  }

  /* HITL dots-raise2: site trail → path bottom+6 (scaleY already in getBoundingClientRect).
     before 160.5/168.5/176.5 → after 151/159/167 (Δ −9.5 design, intervals kept) */
  .hero-pin .hero-dots--site .hero-dots__dot--lg {
    left: calc(248 / 1024 * 100%) !important;
    top: calc(151 / 568.89 * 100%) !important;
    width: calc(9.4 / 1024 * 100%) !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--md {
    left: calc(236 / 1024 * 100%) !important;
    top: calc(159 / 568.89 * 100%) !important;
    width: calc(6.7 / 1024 * 100%) !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--sm {
    left: calc(226 / 1024 * 100%) !important;
    top: calc(167 / 568.89 * 100%) !important;
    width: calc(4.7 / 1024 * 100%) !important;
  }

  .hero-artboard .hero__content {
    /* HITL 2026-08-13: 272 so phone H1/bullets fit; pins unchanged */
    left: 358.32px;
    top: 3.04px;
    right: auto;
    width: 272px;
    max-height: none;
    padding-inline: 0;
    overflow: visible;
    z-index: 80;
    pointer-events: auto;
  }

  .hero__content {
    max-width: 100%;
    z-index: 80;
  }

  /*
   * AB-P2 + fit-20260809: width+font+inset together.
   * Site widened; blog/seo deeper scallop insets; cqw tracks boxW.
   */
  .hero-pin .hero-bubble--thought:not(.hero-bubble--site) .hero-bubble__text {
    left: 16%;
    right: 16%;
    top: 14%;
    bottom: 30%;
    font-size: clamp(0.38rem, 7.2cqw, 0.5rem);
    line-height: 1.05;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    word-wrap: normal;
    hyphens: none !important;
    -webkit-hyphens: none;
  }

  .hero-pin .hero-bubble--blog .hero-bubble__text {
    left: 16%;
    right: 16%;
    top: 15%;
    bottom: 27%;
    font-size: clamp(0.28rem, 4.8cqw, 0.4rem);
    line-height: 1.18;
    display: grid;
    place-items: center;
    align-content: center;
    overflow: visible;
  }

  /* Specificity must beat `.hero-pin .hero-bubble--thought:not(.hero-bubble--site) .hero-bubble__text` (0,4,1) */
  .hero-pin .hero-bubble--thought.hero-bubble--seo .hero-bubble__text,
  .hero-pin .hero-bubble--seo .hero-bubble__text {
    /* HITL polish-4: optical center in phone cloud — symmetric insets + grid center */
    left: 16%;
    right: 16%;
    top: 20%;
    bottom: 22%;
    font-size: clamp(0.28rem, 4.8cqw, 0.4rem);
    line-height: 1.16;
    display: grid;
    place-items: center;
    align-content: center;
    justify-items: center;
    text-align: center;
    overflow: visible;
    hyphens: none !important;
    -webkit-hyphens: none;
  }

  .hero-pin .hero-bubble--site .hero-bubble__text {
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 22%;
    font-size: clamp(0.36rem, 5.2cqw, 0.5rem);
    line-height: 1.1;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    word-wrap: normal;
    hyphens: none !important;
    -webkit-hyphens: none;
    /* undo parent scaleY(0.72) so copy stays readable */
    transform: scaleY(1.39);
    transform-origin: center center;
  }
}

/*
 * C. Tablet V at 768 — Figma SoT 768×659.2 (HITL cast T1500 20260812).
 * Pins SoT: figma-hero-768-pins-sot-20260812T1500.json (orange seam Y=659.2).
 * Copy INSIDE artboard (same k); writer flush+scaleX(-1); phone flush; SHOW Allo + blog.
 * Scale: min(1, vw/768) top-center (JS tablet-v); pin H = 659.2 * k.
 * 481–767: NOT this artboard — last @media not (min-width: 768px) is document-flow copy.
 * ≥768 look stays: this query is 768 only; 768–1024 sibling still wins overlapping copy.
 */
/* Mode A HITL cast T1500 20260812 — artboard 768×659.2 (768px only) */
@media (min-width: 768px) and (max-width: 768px) and (min-width: 99999px) {
  .hero-world {
    --figma-w: 768;
    --figma-h: 659.2;
    --hero-design-w: 768;
    --hero-design-h: 659.2;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    flex: none;
  }

  .hero-artboard {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 768px;
    height: 659.2px;
    margin-left: -384px;
    transform: scale(var(--hero-scale, 1));
    transform-origin: top center;
    will-change: transform;
    pointer-events: none;
    overflow: visible;
  }

  .hero-pin {
    position: sticky;
    top: var(--header-h, 72px);
    height: calc(659.2px * var(--hero-scale, 1)) !important;
    min-height: calc(659.2px * var(--hero-scale, 1)) !important;
    max-height: none;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin-block-start: 0;
    justify-content: flex-start;
    background: var(--color-accent);
    /* Above #tasks (z=2) so phone/writer feet can paint on orange→gray seam */
    z-index: 3;
  }

  /* Same cover handoff as ≥1025: JS .is-cover-active after >40px overlap */
  .hero-pin.is-cover-active {
    z-index: 1;
  }

  #tasks.section--cover {
    z-index: 2;
  }

  /* Kill orange ::after stripe through overflowing feet — pin z=3 paints cast on gray */
  .hero-pin::after {
    display: none !important;
  }

  .hero {
    display: flex;
    align-items: stretch;
    padding-block: 0;
    min-height: 100%;
  }

  /* Figma copy SoT 1:49 — 204/99 / 298×301 (file 2AeoU6… 20260812T1430) */
  .hero-artboard .hero__content {
    left: 204px;
    top: 99px;
    right: auto;
    bottom: auto;
    width: 298px;
    max-width: 298px;
    height: 301px;
    padding: 8px 16px 10px;
    box-sizing: border-box;
    max-height: none;
    min-width: 0;
    overflow: visible;
    z-index: 80;
    isolation: isolate;
    pointer-events: auto;
    background: none;
    position: absolute;
  }

  .hero-artboard .hero__content .hero__title,
  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets {
    max-width: 100%;
    min-width: 0;
  }

  /* CTA wrapper — two phone labels, 768 Figma width/radius */
  .hero-artboard .hero__content .hero__actions {
    position: absolute;
    left: 16px;
    top: 198px;
    width: 272px;
    max-width: 272px;
    height: auto;
    min-width: 0;
    margin: 0;
    padding-block-start: 4.48px;
    padding-inline: 0;
    padding-block-end: 0;
    box-sizing: border-box;
    z-index: 90;
    isolation: isolate;
  }

  .hero__content .micro {
    display: none !important;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 272px;
    gap: 8px;
    margin-block-start: 0;
  }

  /* CTA size — Figma 1:86 272×44 r12. Paint = phone pair (ink / white). */
  .hero__actions .btn {
    flex: 0 0 auto;
    width: 272px;
    max-width: 272px;
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    padding-block: 6px;
    padding-inline: 12px;
    font-size: 14.464px;
    line-height: 21.696px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    border-radius: 20px;
  }

  .hero__actions .btn--outline,
  .hero .btn--outline {
    background: var(--color-ink) !important;
    background-color: var(--color-ink) !important;
    border: 1.6px solid var(--color-ink);
    border-color: var(--color-ink);
    color: #ffffff;
  }

  .hero__actions .btn--outline:hover,
  .hero .btn--outline:hover,
  .hero__actions .btn--outline:focus-visible,
  .hero .btn--outline:focus-visible,
  .hero__actions .btn--outline:active,
  .hero .btn--outline:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--color-ink);
    border-color: #ffffff;
  }

  .hero__actions .btn--hero-brief {
    display: flex !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1.6px solid #ffffff;
    border-color: #ffffff;
    color: var(--color-ink);
  }

  .hero__actions .btn--hero-brief:hover,
  .hero .btn--hero-brief:hover,
  .hero__actions .btn--hero-brief:focus-visible,
  .hero .btn--hero-brief:focus-visible,
  .hero__actions .btn--hero-brief:active,
  .hero .btn--hero-brief:active {
    background: var(--color-ink) !important;
    background-color: var(--color-ink) !important;
    border-color: var(--color-ink);
    color: #ffffff;
  }

  .hero__content .wordmark--hero {
    display: none;
  }

  /* Title 1:51 ABSOLUTE — top_in_copy 8 / box 352×108 (wider than copy, Figma SoT) */
  .hero-artboard .hero__content .hero__title {
    position: absolute;
    left: 16px;
    top: 8px;
    width: 352px;
    max-width: none;
    height: 108px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.7135px;
    color: #ffffff;
    overflow: visible;
    white-space: nowrap;
  }

  /* Bullets 1:53 ABSOLUTE — top_in_copy 116 / 272×73 — clears CTA @209.28 */
  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets {
    position: absolute;
    left: 16px;
    top: 116px;
    width: 272px;
    max-width: 272px;
    height: 73px;
    margin: 0;
    padding: 0;
    font-size: 12.8px;
    line-height: 15.616px;
    color: rgba(255, 255, 255, 0.92);
  }

  .hero-artboard .hero__content ul.hero__lead li,
  .hero-artboard .hero__content ul.hero__bullets li {
    margin-block: 0.12em;
    color: rgba(255, 255, 255, 0.92);
  }

  .hero-artboard .hero__content ul.hero__lead li::marker,
  .hero-artboard .hero__content ul.hero__bullets li::marker {
    color: #ffffff;
  }

  /* Cast pins — SoT 20260812T1430 (replace GbOu97/T1616); sky-cloud SHOW */
  .hero-pin [data-slot="cartoon-a-sky-cloud"] {
    display: block !important;
    left: calc(93 / 768 * 100%) !important;
    top: calc(80 / 659.2 * 100%) !important;
    width: calc(64.8 / 768 * 100%) !important;
    height: calc(64.8 / 659.2 * 100%) !important;
    --layer-width: calc(64.8 / 768 * 100%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 10;
  }

  .hero-pin [data-slot="cartoon-a-sky-plane"] {
    display: block !important;
    left: calc(705 / 768 * 100%) !important;
    top: calc(80 / 659.2 * 100%) !important;
    width: calc(47.52 / 768 * 100%) !important;
    height: calc(49.68 / 659.2 * 100%) !important;
    --layer-width: calc(47.52 / 768 * 100%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 12;
  }

  .hero-pin [data-slot="cartoon-a-far-scooter"] {
    display: block !important;
    left: calc(24 / 768 * 100%) !important;
    top: calc(537 / 659.2 * 100%) !important;
    width: calc(79.2 / 768 * 100%) !important;
    height: calc(79.2 / 659.2 * 100%) !important;
    --layer-width: calc(79.2 / 768 * 100%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 14;
  }

  .hero-pin [data-slot="cartoon-a-mid-coffee"] {
    display: block !important;
    left: calc(76 / 768 * 100%) !important;
    top: calc(374.784 / 659.2 * 100%) !important;
    width: calc(93.6 / 768 * 100%) !important;
    height: calc(90 / 659.2 * 100%) !important;
    --layer-width: calc(93.6 / 768 * 100%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 20;
  }

  .hero-pin [data-slot="cartoon-a-mid-couple"] {
    display: block !important;
    left: calc(507 / 768 * 100%) !important;
    top: calc(107 / 659.2 * 100%) !important;
    width: calc(164.16 / 768 * 100%) !important;
    height: calc(159.84 / 659.2 * 100%) !important;
    --layer-width: calc(164.16 / 768 * 100%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 22;
  }

  /* writer — HITL flush-seam-3: left 500 (к облаку); top 506.2; 149×153; scaleX(-1) translateY(3.7px) */
  .hero-pin .hero-world__set [data-slot="cartoon-a-mid-writer"],
  .hero-pin [data-slot="cartoon-a-mid-writer"] {
    display: block !important;
    left: calc(500 / 768 * 100%) !important;
    top: calc(506.2 / 659.2 * 100%) !important;
    bottom: auto !important;
    width: calc(149 / 768 * 100%) !important;
    height: calc(153 / 659.2 * 100%) !important;
    --layer-width: calc(149 / 768 * 100%);
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 28;
    /* beat ≤1024 .hero-layer / writer transform:none !important */
    transform: scaleX(-1) translateY(2.5px) !important;
    transform-origin: center center !important;
  }

  /* phone — HITL flush-seam-2: 250/419.2 / 212×240 UNCHANGED; translateY(11.44px) live PIL last_sig 657 gap 2.2 */
  .hero-pin .hero-world__set [data-slot="cartoon-a-fg-phone"],
  .hero-pin [data-slot="cartoon-a-fg-phone"] {
    display: block !important;
    left: calc(250 / 768 * 100%) !important;
    top: calc(419.2 / 659.2 * 100%) !important;
    bottom: auto !important;
    width: calc(212 / 768 * 100%) !important;
    height: calc(240 / 659.2 * 100%) !important;
    --layer-width: calc(212 / 768 * 100%);
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 40;
    transform: translateY(10px) !important;
  }

  .hero-pin .hero-bubble--site,
  .hero-pin [data-slot="bubble-site"] {
    display: block !important;
    left: calc(108 / 768 * 100%) !important;
    top: calc(322 / 659.2 * 100%) !important;
    width: calc(82 / 768 * 100%) !important;
    min-width: 0;
    height: calc(54.432 / 659.2 * 100%) !important;
    z-index: 50;
    pointer-events: none;
  }

  /* Allo — SHOW; 235/410 / 112×72 */
  .hero-pin .hero-bubble--seo,
  .hero-pin [data-slot="bubble-seo"] {
    display: block !important;
    left: calc(235 / 768 * 100%) !important;
    top: calc(410 / 659.2 * 100%) !important;
    width: calc(112 / 768 * 100%) !important;
    min-width: 0;
    height: calc(72 / 659.2 * 100%) !important;
    z-index: 52;
    pointer-events: none;
  }

  /* blog — raised 12px so dots trail fits under cloud (not inside) */
  .hero-pin .hero-bubble--blog,
  .hero-pin [data-slot="bubble-blog"] {
    display: block !important;
    left: calc(468 / 768 * 100%) !important;
    top: calc(442 / 659.2 * 100%) !important;
    width: calc(130 / 768 * 100%) !important;
    min-width: 0;
    height: calc(94 / 659.2 * 100%) !important;
    z-index: 52;
    pointer-events: none;
  }

  /* HITL: blog cloud −2px X (text stays) so «Позвоню» не на правом краю */
  .hero-pin .hero-bubble--blog .hero-bubble__cloud {
    transform: translateX(-2px);
  }

  /* HITL: Allo cloud −3px Y (text stays) */
  .hero-pin .hero-bubble--seo .hero-bubble__cloud {
    transform: translateY(-3px);
  }

  .hero-pin [data-slot="dots-site"],
  .hero-pin .hero-dots--site,
  .hero-pin [data-slot="dots-seo"],
  .hero-pin .hero-dots--seo,
  .hero-pin [data-slot="dots-blog"],
  .hero-pin .hero-dots--blog {
    display: block !important;
  }

  /* dots-site — 141 / 135.04 / 127.835 · 373 / 382.704 / 387.02 · 6.48/4.32/2.88 */
  .hero-pin .hero-dots--site .hero-dots__dot--lg {
    left: calc(141 / 768 * 100%) !important;
    top: calc(373 / 659.2 * 100%) !important;
    width: calc(6.48 / 768 * 100%) !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--md {
    left: calc(135.04 / 768 * 100%) !important;
    top: calc(382.704 / 659.2 * 100%) !important;
    width: calc(4.32 / 768 * 100%) !important;
  }
  .hero-pin .hero-dots--site .hero-dots__dot--sm {
    left: calc(127.83547973632812 / 768 * 100%) !important;
    top: calc(387.01953125 / 659.2 * 100%) !important;
    width: calc(2.88 / 768 * 100%) !important;
  }

  /* dots-seo — HITL T1500 clear of bubble-seo bottom 482 */
  .hero-pin .hero-dots--seo .hero-dots__dot--lg {
    left: calc(296 / 768 * 100%) !important;
    top: calc(486 / 659.2 * 100%) !important;
    width: calc(6 / 768 * 100%) !important;
  }
  .hero-pin .hero-dots--seo .hero-dots__dot--md {
    left: calc(305 / 768 * 100%) !important;
    top: calc(502 / 659.2 * 100%) !important;
    width: calc(4 / 768 * 100%) !important;
  }
  .hero-pin .hero-dots--seo .hero-dots__dot--sm {
    left: calc(313 / 768 * 100%) !important;
    top: calc(516 / 659.2 * 100%) !important;
    width: calc(3 / 768 * 100%) !important;
  }

  /* dots-blog — HITL +20x toward writer, −20y up */
  .hero-pin .hero-dots--blog .hero-dots__dot--lg {
    left: calc(540 / 768 * 100%) !important;
    top: calc(520 / 659.2 * 100%) !important;
    width: calc(8 / 768 * 100%) !important;
  }
  .hero-pin .hero-dots--blog .hero-dots__dot--md {
    left: calc(550 / 768 * 100%) !important;
    top: calc(536 / 659.2 * 100%) !important;
    width: calc(5.5 / 768 * 100%) !important;
  }
  .hero-pin .hero-dots--blog .hero-dots__dot--sm {
    left: calc(558 / 768 * 100%) !important;
    top: calc(550 / 659.2 * 100%) !important;
    width: calc(4 / 768 * 100%) !important;
  }

  .hero-pin .hero-bubble--site .hero-bubble__text,
  .hero-pin .hero-bubble--seo .hero-bubble__text,
  .hero-pin .hero-bubble--blog .hero-bubble__text {
    left: 12%;
    right: 12%;
    top: 14%;
    bottom: 28%;
    font-size: clamp(0.52rem, 5.8cqw, 0.68rem);
    line-height: 1.12;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    word-wrap: normal;
    hyphens: none !important;
    -webkit-hyphens: none;
  }

  .hero-pin .hero-bubble--blog .hero-bubble__text {
    left: 9%;
    right: 9%;
    top: 10%;
    bottom: 26%;
    font-size: clamp(0.54rem, 6.2cqw, 0.72rem);
    line-height: 1.2;
  }
}

/*
 * D. Phone ≤480 — HITL 20260812: phone + Allo cloud only; copy block centered.
 * Artboard still bottom-anchored 375×812. Desktop / 481–768 — not touched.
 */
@media (max-width: 480px) {
  .burger {
    border-radius: 20px;
  }
}

@media (max-width: 480px) and (min-width: 99999px) {
  .hero-world {
    --figma-w: 375;
    --figma-h: 812;
    --hero-design-w: 375;
    --hero-design-h: 812;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: visible;
    flex: none;
  }

  .hero-artboard {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 375px;
    height: 812px;
    margin-left: -187.5px;
    transform: scale(var(--hero-scale, 1));
    transform-origin: bottom center; /* AB-P3f3 KEY */
    will-change: transform;
    pointer-events: none;
  }

  /* First fold; character sits on the orange floor */
  .hero-pin {
    height: 100svh !important;
    min-height: 640px;
    max-height: none;
    overflow: visible;
    margin-block-start: calc(-1 * var(--header-h));
  }

  .hero {
    display: flex;
    align-items: stretch;
    padding-block: 0;
    min-height: 100%;
  }

  /* Copy reparented outside artboard — block left-aligned, 44px from screen edge */
  /* HITL 20260813: copy+CTA net +20px vs lock (was +50, then −30). ≤480 only. */
  .hero-world > .hero__content {
    left: 0;
    top: calc(var(--header-h, 72px) + 20px);
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: clamp(1.15rem, 3.5vh, 1.85rem) 8px 0 44px;
    box-sizing: border-box;
    max-height: none;
    z-index: var(--hero-content-z, 80);
    pointer-events: auto;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0;
  }

  .hero-world > .hero__content .hero__title {
    max-width: none;
    width: auto;
    text-align: left;
    white-space: nowrap;
  }

  .hero-world > .hero__content .hero__lead,
  .hero-world > .hero__content .hero__bullets {
    max-width: none;
    width: auto;
    text-align: left;
  }

  .hero-world > .hero__content .hero__actions {
    align-self: stretch;
    width: auto;
    max-width: none;
    margin-left: -44px;
    margin-right: -8px;
    justify-content: center;
  }

  .hero__content .wordmark--hero {
    display: none;
  }

  .hero__content .micro {
    display: none !important;
  }

  .hero__title {
    margin-block: 0 0.9rem;
    /* WARN: mobile portrait overflow clamp — keep Geologica 300 */
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.32rem, 1.05rem + 2.4vw, 1.62rem);
    line-height: 1.3;
  }

  .hero__lead,
  .hero__bullets {
    margin-block: 0 1.2rem;
    font-size: clamp(0.88rem, 0.8rem + 0.55vw, 0.98rem);
    line-height: 1.48;
  }

  .hero-world > .hero__content ul.hero__lead,
  .hero-world > .hero__content ul.hero__bullets {
    padding-inline-start: 1.25em;
  }

  .hero-world > .hero__content ul.hero__lead li,
  .hero-world > .hero__content ul.hero__bullets li {
    margin-block: 0.42em;
    padding-inline-start: 0.2em;
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    gap: 0.5rem;
    margin-block-start: 0.15rem;
  }

  .hero__actions .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 8px;
    padding-inline: 20px;
    white-space: nowrap;
    border-radius: 40px;
  }

  /* HITL 20260813: «Бесплатный аудит» solid ink, hover same. 481–768 UNTOUCHED. */
  .hero__actions .btn--outline,
  .hero .btn--outline {
    background: var(--color-ink);
    background-color: var(--color-ink);
    color: #ffffff;
    border-color: var(--color-ink);
  }

  .hero__actions .btn--outline:hover,
  .hero .btn--outline:hover,
  .hero__actions .btn--outline:focus-visible,
  .hero .btn--outline:focus-visible,
  .hero__actions .btn--outline:active,
  .hero .btn--outline:active {
    background: #ffffff;
    background-color: #ffffff;
    color: var(--color-ink);
    border-color: #ffffff;
  }

  /* HITL 20260813: «Заполнить бриф» hover = ink + white text. Idle stays white. */
  .hero__actions .btn--hero-brief:hover,
  .hero .btn--hero-brief:hover,
  .hero__actions .btn--hero-brief:focus-visible,
  .hero .btn--hero-brief:focus-visible,
  .hero__actions .btn--hero-brief:active,
  .hero .btn--hero-brief:active {
    background: var(--color-ink);
    background-color: var(--color-ink);
    color: #ffffff;
    border-color: var(--color-ink);
  }

  /*
   * HITL 20260812: man-with-phone + Allo cloud + couple→H1 (+ dots trail).
   * Hide plane and the rest of the cast. Desktop / 481–768 UNTOUCHED.
   */
  .hero-pin [data-slot="cartoon-a-sky-cloud"],
  .hero-pin [data-slot="cartoon-a-sky-plane"],
  .hero-pin [data-slot="cartoon-a-far-scooter"],
  .hero-pin [data-slot="cartoon-a-mid-coffee"],
  .hero-pin [data-slot="cartoon-a-mid-writer"],
  .hero-pin .hero-bubble--blog,
  .hero-pin .hero-bubble--site,
  .hero-pin [data-slot="bubble-blog"],
  .hero-pin [data-slot="bubble-site"],
  .hero-pin .hero-dots--blog,
  .hero-pin .hero-dots--site,
  .hero-pin [data-slot="dots-blog"],
  .hero-pin [data-slot="dots-site"] {
    display: none !important;
  }

  .hero-pin,
  .hero-pin .hero-world {
    overflow: visible !important;
  }

  /* Couple on the right, finger 10 o'clock → H1 (same read as desktop/768). */
  .hero-pin .hero-world__set [data-slot="cartoon-a-mid-couple"],
  .hero-pin [data-slot="cartoon-a-mid-couple"] {
    display: block !important;
    left: calc(262 / 375 * 100%) !important;
    top: calc(118 / 812 * 100%) !important;
    bottom: auto !important;
    width: calc(148 / 375 * 100%) !important;
    height: calc(160 / 812 * 100%) !important;
    --layer-width: calc(148 / 375 * 100%);
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 36;
    transform: none !important;
  }

  .hero-pin .hero-world__set [data-slot="cartoon-a-fg-phone"],
  .hero-pin [data-slot="cartoon-a-fg-phone"] {
    display: block !important;
    left: calc(120 / 375 * 100%) !important;
    top: auto !important;
    bottom: 0 !important;
    width: calc(172 / 375 * 100%) !important;
    height: calc(210 / 812 * 100%) !important;
    --layer-width: calc(172 / 375 * 100%);
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 40;
    /* Full PNG on the orange floor — do NOT hang past the pin (that crops the vest). */
    transform: none !important;
  }

  .hero-pin .hero-bubble--seo,
  .hero-pin [data-slot="bubble-seo"] {
    display: block !important;
    left: calc(12 / 375 * 100%) !important;
    top: calc(564 / 812 * 100%) !important;
    width: calc(180 / 375 * 100%) !important;
    min-width: 0;
    height: calc(82 / 812 * 100%) !important;
    z-index: 52;
    pointer-events: none;
  }

  /* HITL: squash cloud 20px from the top (scaleY, origin bottom). Not a crop. */
  .hero-pin .hero-bubble--seo .hero-bubble__cloud {
    transform-origin: center bottom;
    transform: scaleY(calc((126 - 20) / 126));
  }

  .hero-pin .hero-bubble--thought.hero-bubble--seo .hero-bubble__text,
  .hero-pin .hero-bubble--seo .hero-bubble__text {
    left: 15%;
    right: 10%;
    top: calc(32% + 20px);
    bottom: calc(10% - 20px);
    font-size: clamp(0.56rem, 8.2cqw, 0.72rem);
    line-height: 1.18;
  }

  .hero-pin [data-slot="dots-seo"],
  .hero-pin .hero-dots--seo {
    display: block !important;
  }

  .hero-pin .hero-dots--seo .hero-dots__dot--lg {
    display: none !important;
  }

  .hero-pin .hero-dots--seo .hero-dots__dot--md {
    left: calc(155 / 375 * 100%) !important;
    top: calc(663 / 812 * 100%) !important;
    width: calc(5 / 375 * 100%) !important;
  }

  .hero-pin .hero-dots--seo .hero-dots__dot--sm {
    left: calc(168 / 375 * 100%) !important;
    top: calc(676 / 812 * 100%) !important;
    width: calc(3.5 / 375 * 100%) !important;
  }
}

/*
 * Phone plane: full exit past BOTH edges, flip only while off-screen.
 * 0–50%  left → right (scale -1)
 * 50–100% right → left (scale 1)
 * X = left + span * t
 */
@keyframes hero-mobile-plane-fly {
  /* —— left → right (fully off right at 50%) —— */
  0% {
    translate: var(--plane-x-left) 0;
    rotate: 0deg;
    scale: -1 1;
  }
  6% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.12) -7px;
    rotate: 3.5deg;
    scale: -1 1;
  }
  12% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.25) 5px;
    rotate: -4deg;
    scale: -1 1;
  }
  19% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.38) -6px;
    rotate: 5deg;
    scale: -1 1;
  }
  25% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.5) 4px;
    rotate: -2.5deg;
    scale: -1 1;
  }
  31% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.62) -8px;
    rotate: 4deg;
    scale: -1 1;
  }
  38% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.75) 3px;
    rotate: -3.5deg;
    scale: -1 1;
  }
  44% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.88) -5px;
    rotate: 2deg;
    scale: -1 1;
  }
  50% {
    translate: var(--plane-x-right) 0;
    rotate: 0deg;
    scale: -1 1;
  }

  /* flip off-screen at right, then right → left */
  50.01% {
    translate: var(--plane-x-right) 0;
    rotate: 0deg;
    scale: 1 1;
  }
  56% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.88) -7px;
    rotate: 3.5deg;
    scale: 1 1;
  }
  62% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.75) 5px;
    rotate: -4deg;
    scale: 1 1;
  }
  69% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.62) -6px;
    rotate: 5deg;
    scale: 1 1;
  }
  75% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.5) 4px;
    rotate: -2.5deg;
    scale: 1 1;
  }
  81% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.38) -8px;
    rotate: 4deg;
    scale: 1 1;
  }
  88% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.25) 3px;
    rotate: -3.5deg;
    scale: 1 1;
  }
  94% {
    translate: calc(var(--plane-x-left) + var(--plane-x-span) * 0.12) -5px;
    rotate: 2deg;
    scale: 1 1;
  }
  100% {
    translate: var(--plane-x-left) 0;
    rotate: 0deg;
    scale: 1 1;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
  .hero-pin .hero-world__set [data-slot="cartoon-a-sky-plane"],
  .hero-pin [data-slot="cartoon-a-sky-plane"] {
    animation: hero-mobile-plane-fly 28s linear infinite !important;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .hero-pin .hero-world__set [data-slot="cartoon-a-sky-plane"],
  .hero-pin [data-slot="cartoon-a-sky-plane"] {
    animation: none !important;
    translate: 0 0;
    rotate: 0deg;
    scale: 1 1;
    left: auto !important;
    right: 4% !important;
    transform: none !important;
  }
}

/* Short desktop pin: densify COPY only (CSS above). Cast stays table A. */

/* Bubbles — shared shell */
.hero-bubble {
  z-index: 45;
  color: var(--color-ink);
  border: none;
  font-family: var(--font-body);
  line-height: 1.25;
  --layer-scale: 1;
  --layer-origin: center bottom;
  transform-origin: center bottom;
}

.hero-bubble__text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  font-size: clamp(0.7rem, 1.1vw, 0.875rem);
  font-weight: 600;
  color: var(--color-ink);
  text-align: center;
  line-height: 1.25;
}

/* Recipe A (FG2.1): SVG cloud + HTML text + dots — site / blog
 * IMPORTANT: no %-padding on abs bubble (%-pad resolves vs pin width).
 * Height = SVG only; dots hang below via top:100%.
 */
.hero-bubble--thought {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  container-type: inline-size;
  container-name: thought-bubble;
  --dot-lg: 10cqw;
  --dot-md: 7cqw;
  --dot-sm: 4.5cqw;
  /* FG2.4: trail ~½ — gap head→cloud tighter */
  --dot-gap: 1.6cqw;
}

.hero-bubble--thought::before,
.hero-bubble--thought::after {
  content: none;
  display: none;
}

.hero-bubble__cloud {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgb(10 10 10 / 0.07));
}

.hero-bubble--thought .hero-bubble__text {
  position: absolute;
  /* thought text inset — balanced cloud center (HITL 20260810d) */
  left: 15%;
  right: 15%;
  top: 16%;
  bottom: 26%;
  display: grid;
  place-items: center;
  align-content: center;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  font-size: clamp(0.58rem, 5.8cqw, 0.88rem);
  line-height: 1.12;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  word-wrap: normal;
  white-space: normal;
  hyphens: none !important;
  -webkit-hyphens: none;
}

.hero-bubble--site .hero-bubble__text {
  left: 14%;
  right: 14%;
  top: 16%;
  bottom: 26%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  /* desktop SSOT ~seo px (5cqw@185); tablet/phone media override */
  font-size: clamp(0.42rem, 5cqw, 0.64rem);
  line-height: 1.14;
}

/* Blog: 4 lines — centered; HITL 2026-08-11 scallop: bottom 30→27 */
.hero-bubble--blog .hero-bubble__text {
  left: 17%;
  right: 17%;
  top: 14%;
  bottom: 27%;
  display: grid;
  place-items: center;
  align-content: center;
  font-size: clamp(0.42rem, 4.5cqw, 0.62rem);
  line-height: 1.18;
  overflow: visible;
  hyphens: none !important;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  word-wrap: normal;
}

/* SEO phone: 3 lines — air like blog */
.hero-bubble--seo .hero-bubble__text {
  left: 15%;
  right: 15%;
  top: 14%;
  bottom: 28%;
  display: grid;
  place-items: center;
  align-content: center;
  font-size: clamp(0.42rem, 4.6cqw, 0.64rem);
  line-height: 1.16;
  overflow: visible;
  hyphens: none !important;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  word-wrap: normal;
}

/* FG3: bubble-seo = thought SVG (как site/blog) — старый multi-circle снят */
.hero-bubble--seo.hero-bubble--thought {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.hero-bubble--seo.hero-bubble--thought::before,
.hero-bubble--seo.hero-bubble--thought::after {
  content: none;
  display: none;
}

/*
 * hero-figma-1521: dots pin-% SSOT on 1521×666 (offsets from prior 2196
 * uniform remap ÷ 2196/1521). B/C/D media override with bubble offsets.
 * Tails: site→coffee, seo→phone, blog→writer.
 */
.hero-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  z-index: 54;
  overflow: visible;
}

.hero-dots--seo {
  z-index: 60;
}

.hero-dots--seo .hero-dots__dot {
  box-shadow: 0 0 0 1.75px rgb(10 10 10 / 0.18), 0 1px 3px rgb(10 10 10 / 0.12);
}

.hero-dots--blog {
  z-index: 62;
}

.hero-dots--blog .hero-dots__dot {
  box-shadow: 0 0 0 1.75px rgb(10 10 10 / 0.18), 0 1px 3px rgb(10 10 10 / 0.12);
}

.hero-dots--site {
  z-index: 56;
}

.hero-dots__dot {
  position: absolute;
  display: block;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgb(10 10 10 / 0.12);
  font-style: normal;
  aspect-ratio: 1;
  height: auto;
  transform: none;
}

/* seo dots — etalon phone@1031 / seo@1045 */
.hero-dots--seo .hero-dots__dot--lg {
  left: calc(1120 / 1521 * 100%);
  top: calc(350 / 666 * 100%);
  width: calc(12 / 1521 * 100%);
}

.hero-dots--seo .hero-dots__dot--md {
  left: calc(1145 / 1521 * 100%);
  top: calc(375 / 666 * 100%);
  width: calc(8.5 / 1521 * 100%);
}

.hero-dots--seo .hero-dots__dot--sm {
  left: calc(1170 / 1521 * 100%);
  top: calc(400 / 666 * 100%);
  width: calc(5.5 / 1521 * 100%);
}

/* bubble-blog → LEFT writer head/shoulder */
.hero-dots--blog .hero-dots__dot--lg {
  left: calc(340 / 1521 * 100%);
  top: calc(420 / 666 * 100%);
  width: calc(13 / 1521 * 100%);
  z-index: 63;
}

.hero-dots--blog .hero-dots__dot--md {
  left: calc(300 / 1521 * 100%);
  top: calc(445 / 666 * 100%);
  width: calc(9.5 / 1521 * 100%);
  z-index: 63;
}

.hero-dots--blog .hero-dots__dot--sm {
  left: calc(260 / 1521 * 100%);
  top: calc(470 / 666 * 100%);
  width: calc(6.2 / 1521 * 100%);
  z-index: 63;
}

/* bubble-site → coffee laptop screen */
.hero-dots--site .hero-dots__dot--lg {
  left: calc(175 / 1521 * 100%);
  top: calc(230 / 666 * 100%);
  width: calc(14 / 1521 * 100%);
}

.hero-dots--site .hero-dots__dot--md {
  left: calc(185 / 1521 * 100%);
  top: calc(255 / 666 * 100%);
  width: calc(10 / 1521 * 100%);
}

.hero-dots--site .hero-dots__dot--sm {
  left: calc(195 / 1521 * 100%);
  top: calc(280 / 666 * 100%);
  width: calc(7 / 1521 * 100%);
}

/* Tablet/mobile: visibility synced with matching bubble (CSS + JS is-cast-hide) */
/* Idle float OFF */
.hero-pin:not(.is-parallaxing) .hero-world__set .hero-layer--fg,
.hero-pin:not(.is-parallaxing) .hero-world__set [data-slot="cartoon-a-mid-writer"] {
  animation: none;
}

@keyframes hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(var(--layer-scale, 1));
  }
  50% {
    transform: translate3d(0, -6px, 0) scale(var(--layer-scale, 1));
  }
}

@keyframes hero-float-sky {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(var(--layer-scale, 1));
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(var(--layer-scale, 1));
  }
}

/* Tasks cover layer — opaque surface over pinned hero */
.section--cover {
  position: relative;
  z-index: 2;
  background-color: var(--color-surface);
  background-image: none;
  /* F75c: no upward box-shadow — was painting seam across mid-CTA at cover approach */
  box-shadow: none;
}

#tasks.section--cover {
  /* HITL 2026-08-17: cover fill = next block surface, not section black */
  --tasks-cover-bg: var(--color-surface);
  background-color: var(--tasks-cover-bg);
  box-shadow: none;
  padding-block: 0;
  padding-inline: 0;
}

/* Tasks */
.tasks-grid {
  display: grid;
  gap: var(--space-5); /* inter ≥ 2× intra (h3 mb space-3 = 12px) */
}

.task-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  min-height: 44px;
  min-width: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
  cursor: pointer;
  text-align: start;
  width: 100%;
  font: inherit;
  color: inherit;
}

.task-card:hover {
  border-color: var(--color-ink);
}

.task-card h3 {
  margin-bottom: var(--space-3);
  font-size: var(--heading-h3-size);
}

.task-card p {
  color: var(--color-muted);
  font-size: var(--text-base);
}

.task-card__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.task-card:hover .task-card__link,
.task-card:focus-visible .task-card__link {
  color: var(--color-accent);
}

.task-card--complex {
  border-color: var(--color-ink);
}

.task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}

.task-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.task-chip:hover {
  border-color: var(--color-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .task-chip:active {
    transform: scale(0.96);
  }
}

.tasks-geo {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ===== Figma 395:3 «С какой задачей к нам приходят» — cover 2×2 =====
 * Width SoT = header glass (.container), NOT 1920×optical 0.48 + pad 120. */
.az-tasks {
  color: #ffffff;
  /* intra 20 between visual hugs (blob+CTA). Desktop inter overridden ≥1025
     so paint-blob gap matches title→row1 air (see media). */
  --az-tasks-intra-gap: 20px;
  --az-tasks-inter-gap: 56px;
  --az-tasks-title-gap: 40px;
  /* Unused stage under blob (445 − 31 − 282). Inter-row collapses this between
     pairs; last row collapses the same unused vs canvas pad. */
  --az-task-unused-after-paint: calc(445px - 31px - 282px);
  /* Layout-width ≠ paint-width: hug blob-start (-11) → CTA-end (209+195=404) = 415.
     Stage stays 540 for 100cqi / blob 363. CTA overhang past blob = 52px → blob-to-blob
     cannot be 16–24 without CTA hitting the next blob (32px AABB overlap). */
  --az-task-hug-w: 415px;
  --az-task-hug-shift: 11px;
}

.az-tasks__pair {
  min-width: 0;
}

.az-task-hug {
  min-width: 0;
  width: 100%;
  max-width: 540px;
}

.az-tasks__frame {
  position: relative;
  width: 100%;
  overflow: visible;
}

.az-tasks__canvas {
  box-sizing: border-box;
  padding-block: 88px 88px;
}

.az-tasks__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: var(--heading-h2-size);
  letter-spacing: -0.02em;
  /* Surface cover: ink like #work-formats h2. Parent .az-tasks { color:#fff } must not win. */
  color: var(--color-ink);
  text-align: start;
  font-variation-settings: "CRSV" 0, "SHRP" 0;
}

.az-tasks__grid {
  position: relative;
  width: 100%;
  min-width: 0;
}

.az-task-card {
  /* Figma 477:107 article 540×445; blob SoT = top row 363×282. Not 628×517 billboard. */
  --az-task-stage-w: 540px;
  --az-task-stage-h: 445px;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 540 / 445;
  container: az-task-card / inline-size;
  overflow: visible;
}

.az-task-card__stage {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 540px;
  height: 445px;
  overflow: visible;
  transform: scale(calc(100cqi / 540px));
  transform-origin: top left;
  /* cqi here (same node as scale). On __name inside this transform, cqi is
   * IACVT → font-size unset → ~16px like lead. Computed px inherits via em. */
  --az-task-name-raw: calc(var(--heading-h3-size) * (var(--az-task-stage-w) / 100cqi));
  font-size: var(--az-task-name-raw);
}

.az-task-card__shape {
  position: absolute;
  inset-inline-start: -11px;
  top: 31px;
  width: 363px;
  height: 282px;
  max-width: none;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.az-task-card--site .az-task-card__shape,
.az-task-card--seo .az-task-card__shape,
.az-task-card--ads .az-task-card__shape,
.az-task-card--content .az-task-card__shape,
.az-task-card--blog .az-task-card__shape,
.az-task-card--ops .az-task-card__shape {
  height: 282px;
  z-index: 0;
}

.az-task-card__name {
  position: absolute;
  z-index: 2;
  margin: 0;
  inset-inline-start: 28px;
  top: 61px;
  font-family: var(--font-display);
  font-weight: 300;
  /* Used size from __stage (CQ + inverse). 1em, not a second cqi calc. */
  font-size: 1em;
  line-height: 1em;
  white-space: nowrap;
  font-variation-settings: "CRSV" 0, "SHRP" 0;
}

.az-task-card--site .az-task-card__name {
  color: #fff;
}

.az-task-card--blog .az-task-card__name {
  color: #fff;
  white-space: nowrap;
}

.az-task-card--ops .az-task-card__name {
  color: #121214;
  white-space: nowrap;
}

.az-task-card--seo .az-task-card__name {
  color: #121214;
  white-space: nowrap;
}

.az-task-card--ads .az-task-card__name {
  color: #ffffff;
  white-space: nowrap;
}

.az-task-card--content .az-task-card__name {
  color: #121214;
  white-space: nowrap;
}

.az-task-card__lead {
  position: absolute;
  z-index: 2;
  margin: 0;
  inset-inline-start: 28px;
  top: 129px;
  width: 311px;
  font-family: var(--font-body);
  font-weight: 500;
  /* Visual ≈15/17: ratio of stage used-size (no cqi on transformed descendant). */
  font-size: calc(15px / var(--heading-h3-size) * 1em);
  line-height: calc(17px / var(--heading-h3-size) * 1em);
  font-variation-settings: "FLAR" 0, "VOLM" 0;
}

.az-task-card--site .az-task-card__lead {
  color: #ffffff;
}

.az-task-card--seo .az-task-card__lead {
  color: #0d0d0d;
}

.az-task-card--ads .az-task-card__lead {
  color: #ffffff;
}

.az-task-card--content .az-task-card__lead {
  color: #121214;
}

.az-task-card--blog .az-task-card__lead {
  color: #ffffff;
}

.az-task-card--ops .az-task-card__lead {
  color: #0d0d0d;
}

.az-task-card__cta {
  position: absolute;
  z-index: 6;
  inset-inline-start: 209px;
  top: 256px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 195px;
  height: 49px;
  min-width: 44px;
  min-height: 44px;
  overflow: visible;
  padding-block: 0;
  padding-inline: 20px 14px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  font-variation-settings: "FLAR" 0, "VOLM" 0;
}

.az-task-card__cta-text {
  display: block;
}

.az-task-card__cta-icon {
  width: 31px;
  height: 31px;
  max-width: none;
  flex-shrink: 0;
  overflow: visible;
}

.az-task-card--site .az-task-card__cta {
  background: #a4cc52;
  color: #141414;
}

.az-task-card--seo .az-task-card__cta {
  background: #ff6200;
  color: #ffffff;
}

.az-task-card--ads .az-task-card__cta {
  /* grey blob #5E5E6E → inverted pill: white fill, slate type/icon */
  background: #ffffff;
  color: #5e5e6e;
}

.az-task-card--content .az-task-card__cta {
  /* white blob → inverted pill: slate fill, white type/icon */
  background: #5e5e6e;
  color: #ffffff;
}

.az-task-card--blog .az-task-card__cta {
  background: #a4cc52;
  color: #141414;
}

.az-task-card--ops .az-task-card__cta {
  background: #ff6200;
  color: #ffffff;
}

/* Bang fill is hardcoded #141414 in SVG. Dial = clock face; hide on lime/white pills. */
.az-task-card__cta-dial {
  fill: none;
}

.az-task-card--seo .az-task-card__cta-dial,
.az-task-card--ops .az-task-card__cta-dial,
.az-task-card--content .az-task-card__cta-dial {
  fill: #ffffff;
}

.az-cta-bang-stem,
.az-cta-bang-dot {
  fill: #141414;
}

.az-cta-bang-stem {
  /* Pivot = dot center in viewBox (18, 22.5), not stem bbox / SVG 50%. */
  transform-origin: 18px 22.5px;
  transform-box: view-box;
}

.az-task-card__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .az-task-card__cta {
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .az-task-card__cta:hover {
    transform: scale(1.04);
  }

  .az-task-card__cta:active {
    transform: scale(0.96);
  }

  .az-cta-bang-stem {
    animation: az-cta-bang-orbit 2s linear infinite;
  }
}

@keyframes az-cta-bang-orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .az-task-card__cta,
  .az-task-card__cta-icon,
  .az-cta-bang-stem {
    transition: none;
    animation: none;
  }

  .az-task-card__cta:hover,
  .az-task-card__cta:active,
  .az-task-card__cta:hover .az-task-card__cta-icon {
    transform: none;
  }
}

/* Desktop ≥1025: pair-rows hug blob+CTA (not stage 540). nowrap — wrap = 3-col on 3K/4K.
   Top flush-start; bottom flush-end. DENY space-between. Paint stage 540 KEEP.
   Inter cannot be negative row-gap (CSS clamps gap≥0) — pull pair--end via
   margin-block-start so blob1→blob2 air ≈ title→first paint (40+31). */
@media (min-width: 1025px) {
  .az-tasks {
    /* calc(40 - 132) = -92 — empty stage under blob collapsed via margin, not gap */
    --az-tasks-inter-gap: calc(
      var(--az-tasks-title-gap, 40px) - (445px - 31px - 282px)
    );
  }

  .az-tasks__frame {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .az-tasks__canvas {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 0;
    margin-inline: auto;
    margin-left: auto;
    transform: none;
    overflow: visible;
  }

  .az-tasks__title {
    width: 100%;
    height: auto;
    margin-block-end: var(--az-tasks-title-gap, 40px);
    font-size: var(--heading-h2-size);
    /* pack 20260823: lh≈1.1 so 48px does not inflate hug; do not cut H2 below 48 */
    line-height: 1.1;
  }

  .az-tasks__grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* gap≥0 only; negative pull lives on pair--end */
    row-gap: 0;
    width: 100%;
    height: auto;
  }

  .az-tasks__pair {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: var(--az-tasks-intra-gap);
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .az-tasks__pair--start {
    justify-content: flex-start;
  }

  .az-tasks__pair--end {
    justify-content: flex-end;
  }

  /* Pair 2 and pair 3: same title-match inter (71=71). Unused collapse on last pair only. */
  .az-tasks__pair + .az-tasks__pair {
    margin-block-start: var(--az-tasks-inter-gap);
  }

  .az-tasks__pair:last-child {
    margin-block-end: calc(-1 * var(--az-task-unused-after-paint));
    overflow: visible;
  }

  .az-task-hug {
    box-sizing: border-box;
    flex: 0 0 var(--az-task-hug-w);
    width: var(--az-task-hug-w);
    max-width: none;
    overflow: visible;
  }

  .az-task-hug .az-task-card {
    margin-inline-start: var(--az-task-hug-shift);
  }

  .az-task-card--site,
  .az-task-card--seo,
  .az-task-card--ads,
  .az-task-card--content,
  .az-task-card--blog,
  .az-task-card--ops {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 540px;
    max-width: none;
    height: auto;
    aspect-ratio: 540 / 445;
    container: az-task-card / inline-size;
    overflow: visible;
  }
}

/* <1025: 1 колонка. Hug/card cap ~380 (HITL smaller than 415) + center — не full-bleed.
   Stage denom 400: scale(100cqi/400) fills the capped card. CTA/icon RAW 195×49 / 31
   — one artboard, one scale. DENY inverse on CTA (CTA-31 @≤480). Name visual = H3
   token of BP: raw = h3 × stack / 100cqi (cqi resolves on the card). Blob inset 0.
   Aspect 400/313. DENY unused collapse. */
@media (max-width: 1024px) {
  .az-tasks {
    --az-task-stack-d: 400px;
    --az-task-hug-max: 380px;
  }

  .az-tasks__canvas {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-block: 64px 64px;
    transform: none;
  }

  .az-tasks__title {
    width: 100%;
    max-width: none;
    margin-block-end: 32px;
    font-size: var(--heading-h2-size);
    line-height: var(--leading-tight);
  }

  .az-tasks__grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* ≥32 between whole hugs (paint bbox). DENY unused collapse — CTA must stay above next blob. */
    gap: 32px;
    width: 100%;
    height: auto;
  }

  .az-tasks__pair {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: inherit;
    width: 100%;
    max-width: none;
    overflow: visible;
  }

  /* 1-col: height = paint bbox (blob 31+282=313), not unused 445-stage.
     DENY negative unused collapse here — neighbour is below, not beside;
     −137px @415 pulled next blob into the CTA L-cutout (HITL 869).
     Grid/pair gap 32 between whole hugs. CTA 256+49=305 fits in 313.
     Tablet 481–1024: hug cap ~380, center — do not stretch blob. */
  .az-task-hug {
    width: 100%;
    max-width: var(--az-task-hug-max);
    margin-inline: auto;
    margin-block-end: 0;
    overflow: visible;
  }

  .az-task-card {
    position: relative;
    width: 100%;
    max-width: var(--az-task-hug-max);
    margin-inline: auto;
    container: az-task-card / inline-size;
    overflow: visible;
    height: auto;
    aspect-ratio: 400 / 313;
  }

  .az-task-card__stage {
    width: var(--az-task-stack-d);
    height: 313px;
    transform: scale(calc(100cqi / var(--az-task-stack-d)));
    transform-origin: top left;
    --az-task-name-raw: calc(var(--heading-h3-size) * (var(--az-task-stack-d) / 100cqi));
    font-size: var(--az-task-name-raw);
  }

  .az-task-card__shape {
    inset-inline-start: 0;
  }

  /* RAW stage px. Visual = N × (cqi/stack) via scale(100cqi/stack). DENY inverse on CTA.
     Name visual after transform = --heading-h3-size of this BP. */
  .az-task-card .az-task-card__name {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1em;
    line-height: 1em;
    white-space: nowrap;
    inset-inline-start: 39px;
  }

  .az-task-card .az-task-card__lead {
    font-size: 15px;
    line-height: 17px;
    inset-inline-start: 39px;
  }

  /* Seat pill in L-notch: X KEEP 221. Inner-corner lid (not mid-pill):
     top 255 OVERSHOOT — mid-Y left counts SVG concavity (~7px). Julia looks
     at L inner corner (CTA top-left): +1px over visible left ~2px → top 250.
     DENY 255 / 248 / X / shadow. */
  .az-task-card .az-task-card__cta {
    inset-inline-start: 221px;
    top: 250px;
    width: 195px;
    height: 49px;
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    box-shadow: none;
  }

  .az-task-card--site .az-task-card__cta,
  .az-task-card--blog .az-task-card__cta,
  .az-task-card--seo .az-task-card__cta,
  .az-task-card--ops .az-task-card__cta,
  .az-task-card--ads .az-task-card__cta,
  .az-task-card--content .az-task-card__cta {
    box-shadow: none;
  }

  .az-task-card .az-task-card__cta-icon {
    width: 31px;
    height: 31px;
  }
}

@media (max-width: 480px) {
  .az-tasks__canvas {
    padding-block: 48px 48px;
  }

  .az-tasks__title {
    font-size: var(--heading-h2-size);
    max-width: none;
  }

  /* Keep stack gap 32 from ≤1024 so blob-to-blob == titleToFirstBlob ±4 (20px would FAIL). */
  /* CTA 31 override REMOVED — uniform lock: raw 49×195 on stage, scale with blob. */
}


/* Legacy #services numbered-tabs leftovers. v3 lives in az-services-v3.css. */
#services:not(.az-services-v3) .folder-tab__num {
  display: none;
}

#services:not(.az-services-v3) .folder-tab {
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 767px) {
  #services:not(.az-services-v3) .folder-tab {
    padding-inline: 16px; /* peek next tab ~16–32px; do not ellipsis */
  }
}

#services:not(.az-services-v3) .folder-panel,
#services:not(.az-services-v3) .folder-panel__grid,
#services:not(.az-services-v3) .folder-panel__body {
  min-width: 0;
}

/* Folder tabs — Figma stack (cases Tab List SoT)
   Root cause: overflow-x creates a stacking context, so per-tab z-index cannot beat .folder-panel.
   Plan B: tablist z above panel; tops aligned; active h59 extends 9px onto panel; inactive h50 meet panel top. */
.folder-tabs {
  position: relative;
  margin-top: var(--space-2);
  max-width: 100%;
}

.folder-tabs__list {
  display: flex;
  align-items: flex-start; /* tops aligned — active grows DOWN onto panel */
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden; /* extension lives in padding-bottom, not outside clip */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-2);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-top: 0;
  padding-bottom: 9px; /* runway for active h59 vs inactive h50 */
  /* Inset by panel radius: tabs sit on the FLAT top edge; corners stay rounded (no sharp "whiskers") */
  padding-inline-start: var(--radius-lg); /* 16px */
  padding-inline-end: var(--radius-lg);
  /* -9px padding runway + -9px active protrusion → panel top == inactive bottom */
  margin-bottom: -18px;
  position: relative;
  z-index: 3; /* whole strip above panel (overflow SC trap) */
  min-height: 50px;
  scrollbar-width: thin;
}

.folder-tabs__list::-webkit-scrollbar {
  height: 4px;
}

.folder-tab {
  box-sizing: border-box;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 50px; /* Figma inactive */
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--tab-inactive-border);
  border-bottom: none;
  border-radius: var(--radius-tab); /* 16px 16px 0 0 */
  background: var(--tab-inactive-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out),
    min-height var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.folder-tab:hover:not([aria-selected="true"]) {
  background: var(--color-surface);
}

.folder-tab[aria-selected="true"] {
  height: 59px; /* Figma active — +9px down over panel */
  min-height: 59px;
  z-index: 2;
  background: var(--tab-active-bg);
  border-color: transparent;
  color: #fff; /* Figma active text WHITE */
}

.folder-tab__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(10 10 10 / 0.08);
  font-size: var(--text-xs);
  font-weight: 700;
}

.folder-tab[aria-selected="true"] .folder-tab__num {
  background: rgb(255 255 255 / 0.22);
  color: #fff;
}

.folder-panel {
  position: relative;
  z-index: 1; /* below tablist; active protrusion paints over grey */
  background: var(--panel-bg);
  border-radius: var(--radius-lg); /* always rounded — tabs inset, never fight corners */
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  min-height: 280px;
}

.folder-panel[hidden] {
  display: none;
}

/* Figma edit mode: все вкладки услуг видны в ряд — редактируемые панели */
html[data-figma-edit="1"] .folder-panel[hidden] {
  display: block !important;
  visibility: visible !important;
}

html[data-figma-edit="1"] .folder-tabs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

html[data-figma-edit="1"] .folder-tabs__list {
  flex-wrap: wrap;
}

html[data-figma-edit="1"] #panel-dev,
html[data-figma-edit="1"] #panel-search,
html[data-figma-edit="1"] #panel-ads,
html[data-figma-edit="1"] #panel-content,
html[data-figma-edit="1"] #panel-ops {
  position: relative;
  display: block !important;
  margin-top: 0;
  border: 2px dashed #ff6200;
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--color-surface-2);
}

html[data-figma-edit="1"] #panel-dev::before,
html[data-figma-edit="1"] #panel-search::before,
html[data-figma-edit="1"] #panel-ads::before,
html[data-figma-edit="1"] #panel-content::before,
html[data-figma-edit="1"] #panel-ops::before {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-accent-deep);
  margin-bottom: 12px;
}

html[data-figma-edit="1"] #panel-dev::before { content: "Вкладка · Разработка"; }
html[data-figma-edit="1"] #panel-search::before { content: "Вкладка · SEO"; }
html[data-figma-edit="1"] #panel-ads::before { content: "Вкладка · Реклама"; }
html[data-figma-edit="1"] #panel-content::before { content: "Вкладка · Контент"; }
html[data-figma-edit="1"] #panel-ops::before { content: "Вкладка · Поддержка"; }

html[data-figma-edit="1"] .folder-tabs {
  gap: 32px;
}

/*
 * Figma handoff: 4 вкладки в ряд СПРАВА.
 * Контейнер секции — та же колонка, что у остальных блоков.
 * Ширится только ряд панелей (overflow visible), без сдвига влево.
 */
html[data-figma-edit="1"][data-figma-panels="row"] #services {
  overflow: visible;
}

html[data-figma-edit="1"][data-figma-panels="row"] #services .container {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-pad);
  overflow: visible;
}

html[data-figma-edit="1"][data-figma-panels="row"] #services .folder-tabs {
  display: grid;
  grid-template-columns: repeat(5, min(100vw, calc(var(--container-max) - 2 * var(--page-pad))));
  grid-template-rows: auto auto;
  column-gap: 32px;
  row-gap: 20px;
  width: max-content;
  max-width: none;
  justify-content: start;
  align-items: start;
}

html[data-figma-edit="1"][data-figma-panels="row"] #services .folder-tabs__list {
  grid-column: 1 / 2;
  grid-row: 1;
  width: 100%;
  max-width: calc(var(--container-max) - 2 * var(--page-pad));
  justify-content: flex-start;
  flex-wrap: wrap;
}

html[data-figma-edit="1"][data-figma-panels="row"] #services .folder-panel {
  grid-row: 2;
  display: block !important;
  width: min(100vw, calc(var(--container-max) - 2 * var(--page-pad)));
  min-width: 280px;
  max-width: calc(var(--container-max) - 2 * var(--page-pad));
  box-sizing: border-box;
}

.folder-panel.is-entering {
  animation: tab-panel-swap var(--duration-tab) var(--ease-out);
}

@keyframes tab-panel-swap {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.folder-panel__grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.folder-panel__body h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--heading-h3-size);
  font-weight: 300;
}

.folder-panel__body h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

.folder-panel__group {
  margin-bottom: var(--space-5);
  min-width: 0;
}

.folder-panel__group .fab-list {
  margin-bottom: 0;
}

.folder-panel__body .lead {
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
}

.fab-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.fab-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.5;
}

.fab-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.folder-panel__for {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.folder-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.folder-panel__actions .micro {
  flex: 1 1 100%;
  margin: 0;
}

.folder-panel__preview {
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-panel__preview-link {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}

.folder-panel__preview-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.folder-panel__preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

/* Cases shots: more left air — keep left of screenshot, slightly roomier frame */
.cases .folder-panel__preview {
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
}

.cases .folder-panel__preview img {
  object-position: left top;
}

.folder-panel__preview--soon {
  background: var(--color-surface);
}

.folder-panel__preview--soon svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.roadmap-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.roadmap-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  flex-shrink: 0;
}

.folder-panel__closing {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

/* Process / roadmap pins */
.process-path {
  display: grid;
  gap: var(--space-6);
  position: relative;
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  opacity: 1;
  transform: none;
}

/* Safe stagger: opacity always 1 — never hide steps on first paint */
@keyframes process-step-in {
  from {
    opacity: 1;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js-ready .process-step {
    animation: process-step-in 0.45s var(--ease-out) both;
  }

  .js-ready .process-step:nth-child(1) {
    animation-delay: 0ms;
  }

  .js-ready .process-step:nth-child(2) {
    animation-delay: 70ms;
  }

  .js-ready .process-step:nth-child(3) {
    animation-delay: 140ms;
  }

  .js-ready .process-step:nth-child(4) {
    animation-delay: 210ms;
  }
}

.process-pin {
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;
  background: var(--pin-fill);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.process-step:not(:last-child) .process-pin::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--space-6) + 12px);
  background: var(--color-border);
}

.process-step__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.process-step__text {
  color: var(--color-muted);
  font-size: var(--text-base);
}

.process-cta {
  margin-top: var(--space-7);
}

/* Trust — department-cards Structure B (HITL 2026-08-11) */
#trust {
  /* surfaces — both cards ink on grey shell */
  --trust-card-radius: var(--radius-lg);
  --trust-shell-bg: var(--color-surface-2);
  --trust-shell-pad: var(--space-5);
  --trust-shell-radius: calc(var(--trust-card-radius) + var(--trust-shell-pad));
  --trust-card-dark-bg: var(--color-ink);
  --trust-card-pad: var(--space-6);
  --trust-card-pad-mobile: var(--space-5);
  --trust-card-gap: var(--space-5);
  --trust-card-shadow-dark: none;

  /* ink on dark */
  --trust-on-ink: #ffffff;
  --trust-on-ink-muted: #a8b0b8;

  /* avatar + orange plaque */
  --trust-avatar-size: 68px;
  --trust-avatar-size-mobile: 64px;
  --trust-avatar-radius: 999px;
  --trust-avatar-ring: var(--color-accent);
  --trust-avatar-ring-width: 2px;
  --trust-avatar-ring-halo: color-mix(in srgb, var(--color-accent) 28%, transparent);

  /* watermark AZ — below photo zone */
  --trust-wm-size: clamp(4.5rem, 22vw, 7.5rem);
  --trust-wm-weight: 700;
  --trust-wm-opacity: 0.1;
  --trust-wm-color: #ffffff;

  /* orange concentric true circles */
  --trust-ring-color: var(--color-accent);
  --trust-ring-opacity: 0.42;

  /* type */
  --trust-role-size: var(--text-sm);
  --trust-role-weight: 500;
  --trust-name-weight: 300;
  --trust-bio-measure: 65ch;

  /* stack / points */
  --trust-points-to-cards-gap: var(--space-8);
  --trust-points-item-gap: var(--space-5);
}

.trust-points {
  display: flex;
  flex-direction: column;
  gap: var(--trust-points-item-gap);
  margin: 0 0 var(--trust-points-to-cards-gap);
  padding: 0;
  list-style: none;
}

.trust-points li {
  padding-inline-start: var(--space-5);
  position: relative;
  color: var(--color-muted);
}

.trust-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink);
}

/* Grey shell behind BOTH person cards (white page → surface-2 → ink cards) */
.trust-dept-stack.trust-dept-shell {
  display: flex;
  flex-direction: column;
  gap: var(--trust-card-gap);
  margin-block-end: var(--space-6);
  padding: var(--trust-shell-pad);
  border-radius: var(--trust-shell-radius);
  background: var(--trust-shell-bg);
}

.trust-dept-card {
  position: relative;
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--trust-card-pad);
  border-radius: var(--trust-card-radius);
  overflow: hidden;
  isolation: isolate;
}

.trust-dept-card__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.trust-dept-card__watermark {
  position: absolute;
  inset-block-start: auto;
  inset-block-end: 4%;
  inset-inline-end: 5%;
  transform: none;
  font-family: var(--font-display);
  font-size: var(--trust-wm-size);
  font-weight: var(--trust-wm-weight);
  line-height: 0.85;
  letter-spacing: -0.04em;
  user-select: none;
  color: var(--trust-wm-color);
  opacity: var(--trust-wm-opacity);
  z-index: 0;
}

.trust-dept-card__rings {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: min(58%, 24rem);
  height: min(100%, 22rem);
  color: var(--trust-ring-color);
  opacity: var(--trust-ring-opacity);
  z-index: 0;
}

.trust-dept-card__identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.trust-dept-card__identity--tr {
  justify-self: end;
  flex-direction: row-reverse;
  text-align: end;
}

.trust-dept-card__identity--tl {
  justify-self: start;
  flex-direction: row;
  text-align: start;
}

.trust-dept-card__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.trust-dept-card__avatar {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--trust-avatar-size);
  height: var(--trust-avatar-size);
  border-radius: var(--trust-avatar-radius);
  object-fit: cover;
  border: var(--trust-avatar-ring-width) solid var(--trust-avatar-ring);
  box-shadow:
    0 0 0 3px var(--trust-avatar-ring-halo),
    0 0 0 1px rgb(255 255 255 / 0.08);
}

.trust-dept-card__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--trust-role-size);
  font-weight: var(--trust-role-weight);
  line-height: 1.35;
  color: var(--trust-on-ink-muted);
}

.trust-dept-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--heading-h3-size);
  font-weight: 300;
  line-height: 1.2;
  color: var(--trust-on-ink);
}

.trust-dept-card__bio {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: var(--trust-bio-measure);
  color: var(--trust-on-ink);
}

.trust-dept-card__bio p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--trust-on-ink);
}

.trust-dept-card__bio strong {
  display: block;
  margin-block-end: 0.35em;
  font-weight: 700;
  color: var(--trust-on-ink);
}

/* Both person cards — ink (black) */
.trust-dept-card--ink,
.trust-dept-card--andrey,
.trust-dept-card--yulia {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "bio identity"
    "bio .";
  align-items: start;
  background: var(--trust-card-dark-bg);
  border: 0;
  box-shadow: var(--trust-card-shadow-dark);
  color: var(--trust-on-ink);
}

.trust-dept-card--ink .trust-dept-card__identity,
.trust-dept-card--andrey .trust-dept-card__identity,
.trust-dept-card--yulia .trust-dept-card__identity {
  grid-area: identity;
}

.trust-dept-card--ink .trust-dept-card__bio,
.trust-dept-card--andrey .trust-dept-card__bio,
.trust-dept-card--yulia .trust-dept-card__bio {
  grid-area: bio;
  padding-inline-end: var(--space-4);
}

.trust-dept-card--yulia .trust-dept-card__avatar {
  object-position: 55% 36%;
}

/* Andrey only — quarter-disk photo on 5th ring (HITL 2026-08-13). Do not touch Yulia. */
.trust-dept-card--andrey {
  --andrey-s: 1.2px;
  --andrey-quarter: calc(158 * var(--andrey-s));
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, var(--andrey-quarter));
}

.trust-dept-card--andrey .trust-dept-card__watermark {
  inset-block: 0;
  inset-inline-start: 18%;
  inset-inline-end: 8%;
  width: auto;
  height: auto;
  max-width: none;
  overflow: hidden;
  display: block;
  font-size: unset;
  line-height: unset;
  letter-spacing: normal;
  transform: none;
  z-index: 0;
}

.trust-dept-card--andrey .trust-dept-card__watermark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.trust-dept-card--andrey .trust-dept-card__watermark text {
  font-family: var(--font-display);
  font-weight: var(--trust-wm-weight);
  letter-spacing: -0.05em;
}

.trust-dept-card--andrey .trust-dept-card__watermark text {
  font-family: var(--font-display);
  font-weight: var(--trust-wm-weight);
  letter-spacing: -0.04em;
}

.trust-dept-card--andrey .trust-dept-card__rings {
  inset: auto;
  inset-block-start: calc(-52 * var(--andrey-s));
  inset-inline-end: calc(-52 * var(--andrey-s));
  width: calc(320 * var(--andrey-s));
  height: calc(280 * var(--andrey-s));
  max-width: none;
  max-height: none;
  opacity: 1;
  z-index: 1;
}

.trust-dept-card--andrey .trust-dept-card__rings-stroke {
  display: none;
}

.trust-dept-card--andrey .trust-dept-card__identity {
  z-index: 2;
}

.trust-dept-card--andrey .trust-dept-card__identity--tr {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-block-start: calc(var(--andrey-quarter) - var(--trust-card-pad) + var(--space-3));
}

.trust-dept-card--andrey .trust-dept-card__bio {
  padding-inline-end: var(--space-4);
}

@media (max-width: 768px) {
  #trust {
    --trust-card-pad: var(--trust-card-pad-mobile);
    --trust-avatar-size: var(--trust-avatar-size-mobile);
    --trust-card-gap: var(--space-4);
    --trust-shell-pad: var(--space-4);
    --trust-points-to-cards-gap: var(--space-6);
    --trust-wm-size: clamp(3.25rem, 28vw, 5rem);
  }

  .trust-dept-card--ink,
  .trust-dept-card--andrey,
  .trust-dept-card--yulia {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "bio";
  }

  .trust-dept-card--ink .trust-dept-card__bio,
  .trust-dept-card--andrey .trust-dept-card__bio,
  .trust-dept-card--yulia .trust-dept-card__bio {
    padding-inline-end: 0;
  }

  .trust-dept-card__identity--tr {
    justify-self: end;
  }

  .trust-dept-card__rings {
    width: min(72%, 18rem);
    height: min(70%, 16rem);
  }

  .trust-dept-card__watermark {
    inset-block-end: 3%;
    inset-inline-end: 4%;
  }

  .trust-dept-card--andrey {
    --andrey-s: 0.9px;
    grid-template-columns: 1fr;
  }

  .trust-dept-card--andrey .trust-dept-card__watermark {
    inset-block: 0;
    inset-inline-start: 6%;
    inset-inline-end: 6%;
  }

  .trust-dept-card--andrey .trust-dept-card__bio {
    padding-inline-end: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .trust-dept-card--andrey {
    --andrey-s: 1.05px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-dept-card {
    transition: none;
  }
}

/* Cases — folder-tabs (same pattern as #services) */
.cases {
  margin-block-end: var(--space-6);
}

.cases__head {
  margin-block-end: var(--space-5);
}

.cases__head h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--heading-h3-size);
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-ink);
}

.cases__lead {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 42rem;
}

.cases .folder-tabs {
  margin-top: 0;
}

/* Blog */
.blog-empty {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.blog-empty__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.blog-empty p {
  color: var(--color-muted);
  margin-top: var(--space-3);
}

#blog h3,
.blog-empty h3,
.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--heading-h3-size);
  font-weight: 300;
}

.blog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* CTA form */
#cta {
  background: var(--color-ink, #0a0a0a);
}

#cta .section__head {
  max-width: none;
}

#cta .section__head h2 {
  color: #fff;
  font-family: var(--font-display, "Geologica", sans-serif);
  font-weight: 300;
  font-size: clamp(44px, 3.9vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

@media (max-width: 1024px) {
  #cta .section__head h2 {
    font-size: clamp(38px, 5.4vw, 52px);
    line-height: 1.12;
  }
}

@media (max-width: 600px) {
  #cta .section__head h2 {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.14;
  }
}

#cta .cta-contacts,
#cta .cta-contacts__note,
#cta .contacts-block__link {
  color: #fff;
}

#cta .section__head p {
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.72);
}

#cta .contacts-block__link:hover,
#cta .contacts-block__link:focus-visible {
  color: var(--color-accent, #ff6200);
}

#cta .cta-grid > .form,
#cta .cta-brief {
  color: var(--color-ink, #0a0a0a);
}

.cta-grid {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

.cta-grid > .form,
.cta-brief {
  min-width: 0;
}

.cta-brief {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.cta-brief__title {
  margin: 0;
}

.cta-brief__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cta-brief__copy p {
  max-width: none;
  font-size: var(--text-base);
  line-height: 1.45;
}

.cta-brief .btn {
  margin-top: 0;
}

.cta-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 3px solid #ececee;
}

.cta-step__count,
.cta-step__kicker,
.cta-step__hint {
  margin: 0;
  color: #71717a;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.cta-step__fill {
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  width: 0;
  background: var(--color-accent, #ff6200);
  transition: width 0.45s ease;
}

.cta-step__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s ease-in-out;
}

.cta-step__reveal.is-open {
  grid-template-rows: 1fr;
}

.cta-step__reveal-inner {
  min-height: 0;
  overflow: hidden;
}

.cta-step__reveal .cta-step__extra {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.cta-step__reveal.is-open .cta-step__extra {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.cta-step__kicker {
  margin-top: 14px;
}

.cta-step__q {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.3;
}

.cta-step__hint {
  margin-top: 4px;
}

.cta-step__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.cta-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 16px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: scale(1);
  transform-origin: center;
  transition-property: border-color, box-shadow, transform;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

.cta-choice:hover,
.cta-choice:focus-visible {
  transform: scale(1.01);
  border-color: var(--color-accent, #ff6200);
}

.cta-choice:active {
  transform: scale(0.99);
}

.cta-choice__mark {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid #d4d4d8;
  background: #fff;
  display: grid;
  place-items: center;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.cta-choice.is-on {
  border-color: var(--color-accent, #ff6200);
  background: #fff;
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06);
}

.cta-choice.is-on .cta-choice__mark {
  border-color: var(--color-accent, #ff6200);
  background: var(--color-accent, #ff6200);
}

.cta-choice.is-on .cta-choice__mark::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0, -1px);
}

.cta-step__extra,
.cta-step__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.cta-step__extra input,
.cta-step__field input,
.cta-step__field textarea {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 400;
  width: 100%;
}

.cta-step__field textarea {
  min-height: 88px;
  resize: vertical;
}

.cta-step__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}

.cta-step__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ececee;
}

.cta-step__prev {
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  color: #3f3f46;
  font: inherit;
  cursor: pointer;
}

.cta-step__prev:disabled,
.cta-step__next:disabled {
  opacity: 0.4;
  cursor: default;
}

.cta-step__next {
  min-height: 40px;
  padding-inline: 16px;
}

.cta-step__done p {
  margin: 8px 0 0;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .cta-choice,
  .cta-choice__mark,
  .cta-step__fill,
  .cta-step__reveal,
  .cta-step__reveal .cta-step__extra {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

.cta-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.45;
}

.cta-contacts__note {
  color: var(--color-ink);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.form__field input,
.form__field textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  width: 100%;
}

.form__field textarea {
  min-height: 96px;
  resize: vertical;
}

.form__field input:focus-visible,
.form__field textarea:focus-visible {
  border-color: var(--color-focus);
}

#lead-form .form__field input,
#lead-form .form__field textarea {
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 16px;
  background: #fff;
  transform: scale(1);
  transform-origin: center;
  transition-property: border-color, box-shadow, transform;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

#lead-form .form__field input:hover,
#lead-form .form__field textarea:hover,
#lead-form .form__field input:focus,
#lead-form .form__field textarea:focus {
  transform: scale(1.01);
  border-color: var(--color-accent, #ff6200);
}

#lead-form .form__field input:focus,
#lead-form .form__field textarea:focus {
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06);
  outline: none;
}

#lead-form .form__field input:active,
#lead-form .form__field textarea:active {
  transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  #lead-form .form__field input,
  #lead-form .form__field textarea {
    transition-duration: 0.01ms;
  }
}

.form__consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-muted);
  cursor: pointer;
  min-height: 44px;
  padding-block: var(--space-2);
}

.form__consent input {
  margin-top: 2px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.form__consent a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.form__consent a:hover,
.form__consent a:focus-visible {
  color: var(--color-accent);
}

.form__error {
  color: var(--color-error);
  font-size: var(--text-sm);
  display: none;
}

.form__error.is-visible {
  display: block;
}

.form__status {
  font-size: var(--text-sm);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  display: none;
}

.form__status.is-visible {
  display: block;
}

.form__status--success {
  background: rgb(22 163 74 / 0.1);
  color: var(--color-success);
}

.form__status--error {
  background: rgb(220 38 38 / 0.08);
  color: var(--color-error);
}

.form__status--stub {
  background: var(--color-surface);
  color: var(--color-muted);
}

.contacts-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contacts-block dt {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contacts-block dd {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}

.contacts-block__link {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.contacts-block__link:hover,
.contacts-block__link:focus-visible {
  color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.contacts-block__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.contact-messenger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  color: var(--color-accent);
  cursor: default;
  user-select: none;
}

.contact-messenger__icon {
  display: block;
  flex-shrink: 0;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), opacity 180ms cubic-bezier(0.2, 0, 0, 1);
}

.contact-messenger__hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.contact-messenger--footer {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .contact-messenger__icon {
    transition: none;
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7);
  background: var(--color-bg);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.site-footer__brand {
  flex-shrink: 0;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-footer__list a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-footer__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__contact {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__contact:hover,
.site-footer__contact:focus-visible {
  color: var(--color-accent);
}

.site-footer__contact:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Legal document pages */
.page-legal .site-header {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--color-border);
}

.legal-doc {
  padding-block: clamp(40px, 6vw, 88px);
}

.legal-doc__inner {
  max-width: min(44rem, var(--container-max));
}

.legal-doc__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.legal-doc h1 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 300;
  /* Long legal titles: clamp below HITL 58 only to avoid overflow */
  font-size: clamp(1.75rem, 1.3rem + 2vw, 58px);
  line-height: 60px;
}

.legal-doc__meta {
  margin: 0 0 var(--space-7);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: none;
}

.legal-doc__meta a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.legal-doc__meta a:hover,
.legal-doc__meta a:focus-visible {
  color: var(--color-accent);
}

.legal-doc__section {
  margin-bottom: var(--space-6);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.legal-doc__section h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.legal-doc__section p,
.legal-doc__section li {
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  max-width: var(--measure);
}

.legal-doc__section p + p {
  margin-top: var(--space-3);
}

.legal-doc__section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}

.legal-doc__section li {
  position: relative;
  padding-inline-start: var(--space-5);
}

.legal-doc__section li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.legal-doc__section a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.legal-doc__section a:hover,
.legal-doc__section a:focus-visible {
  color: var(--color-accent);
}

.legal-doc__back {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-8);
  max-width: none;
}

/* Cookie banner — brand tokens only (no green) */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  padding: var(--space-4);
  pointer-events: none;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner__inner {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(0);
  transition: transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.cookie-banner__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  max-width: none;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Exception: cookie «Подробнее» stays accent at rest (not ink) */
.cookie-banner__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.cookie-banner__more:hover,
.cookie-banner__more:focus-visible {
  color: var(--color-accent-deep);
}

.cookie-banner__more:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner__inner {
    transition: none;
  }
}

/* Шаг 4: компактный cookie-баннер на телефонах (до 767 px) */
@media (max-width: 767px) {
  .cookie-banner {
    padding: 0;
  }

  .cookie-banner__inner {
    gap: var(--space-2);
    max-width: none;
    padding: 10px var(--space-4);
    border-width: 1px 0 0;
    border-radius: 0;
  }

  .cookie-banner__text {
    font-size: 13px;
    line-height: 1.4;
  }

  .cookie-banner__actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .cookie-banner__more {
    min-height: 36px;
  }

  .cookie-banner__actions .btn--compact {
    min-height: 36px;
    padding-block: 6px;
  }
}

/* Полная шапка с 820: ниже кружок кнопки вылезает, там остаётся бургер. */
@media (min-width: 820px) {
  .header-start {
    gap: var(--space-5);
  }

  .nav {
    display: flex;
    justify-content: flex-start;
    flex: 0 0 auto;
  }

  .header-contacts {
    display: flex;
  }

  .header-cta {
    display: inline-flex;
    border-radius: 20px;
  }

  .burger {
    display: none;
  }
}

/* Главная: «Обсудить проект?» шире прежней подписи. До 980 px кружок
   вылезает за край, поэтому здесь остаётся бургер, как ниже 820. */
@media (min-width: 820px) and (max-width: 979px) {
  .page-home .nav,
  .page-home .header-contacts,
  .page-home .header-cta {
    display: none;
  }

  .page-home .burger {
    display: inline-flex;
  }
}

@media (min-width: 768px) and (max-width: 1054px) {
  .site-header__inner {
    gap: var(--space-3);
  }

  .header-start {
    gap: var(--space-4);
  }

  .header-end {
    gap: var(--space-3);
  }

  /* Compact wordmark so 4 pages + mailto + CTA fit; keep readable; --header-h KEEP */
  .site-header .wordmark--logo img {
    max-width: 186px;
    height: 34px;
  }

  .nav {
    gap: var(--space-2);
  }

  .nav a {
    font-size: 0.8125rem;
    flex-shrink: 0;
  }

  .header-mail,
  .header-contacts a[href^="mailto"] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
  }
}

@media (min-width: 1055px) {
  /*
   * header-nav-mirror-h1-20260817 + zoom-kcap 20260817
   * + header-spacing-min-gap-20260827
   * First .nav a left == #hero-title left (±2px) WHEN calc > floor.
   * Mirror: (navFirst.left − logo.right) == (cta.left − mail.right)
   * H1 = artboard x=445, origin top center. JS desktop:
   *   k = clamp(min(kWidth, kHeight), 0.45, 1.35)  HERO_SCALE_K_MAX
   * CSS must cap the same way — NOT var(--hero-scale) (brief/privacy/terms
   * never run hero JS). Chrome zoom 50–80% on 1920×1080 → inner 3840…2400:
   * uncapped min(cqw/1521, (vh−header)/698) > 1.35 → Δ H1 59…370px and
   * gap collapsed to 0 @75–80%. Subtract 315.5*k with k capped.
   * k = max(0.45, min(1.35, min(100cqw/1521, (100vh - var(--header-h))/698)))
   * 698 = JS designH 666+32. cqw tracks clientWidth (not 100vw/scrollbar).
   * Length form: max(315.5*0.45px, min(315.5*1.35px, 315.5*kWidth, 315.5*kHeight))
   * — unitless 0.45/1.35 cannot mix with cqw in min().
   * Floor: logo↔Услуги ≥32px, mail↔CTA ≥24px. max(0px) ate the gutter when
   * 315.5*k ≥ 50cqw − center − pad − logoW (1920×1080 and zoom-out).
   * Gap is not a flex item — clusters flex-shrink:0 so the floor cannot collapse.
   * Hero / .hero__content / artboard / left:445px FREEZE.
   * Logical gap. Clusters KEEP. No display:contents.
   */
  .site-header {
    container-type: inline-size;
    container-name: az-site-header;
  }

  .site-header__inner {
    gap: 0;
    flex-wrap: nowrap;
  }

  .header-start,
  .header-end {
    flex-wrap: nowrap;
    gap: max(
      var(--header-cluster-min-gap, 32px),
      calc(
        50cqw
        - max(
          calc(315.5px * 0.45),
          min(
            calc(315.5px * 1.35),
            calc(315.5 * 100cqw / 1521),
            calc(315.5 * (100vh - var(--header-h)) / 698)
          )
        )
        - max(0px, (100cqw - var(--container-max)) / 2)
        - var(--page-pad)
        - 178.6667px
      )
    );
  }

  .header-start {
    --header-cluster-min-gap: 32px;
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
  }

  /* Зазор логотип↔меню ужимается, если длинная кнопка иначе уезжает за край.
     Когда места хватает, ширина та же, что была. */
  .header-start > .wordmark {
    order: 1;
  }

  .header-start::before {
    content: "";
    order: 2;
    flex: 0 1 auto;
    width: max(
      var(--header-cluster-min-gap, 32px),
      calc(
        50cqw
        - max(
          calc(315.5px * 0.45),
          min(
            calc(315.5px * 1.35),
            calc(315.5 * 100cqw / 1521),
            calc(315.5 * (100vh - var(--header-h)) / 698)
          )
        )
        - max(0px, (100cqw - var(--container-max)) / 2)
        - var(--page-pad)
        - 178.6667px
      )
    );
    min-width: 16px;
    height: 1px;
  }

  .header-start > .nav {
    order: 3;
  }

  .header-end {
    --header-cluster-min-gap: 24px;
    flex-shrink: 0;
  }

  .nav,
  .header-contacts,
  .header-cta,
  .wordmark {
    flex-shrink: 0;
  }

  .nav {
    margin-inline-start: 0;
  }
}

/* Compact desktop before hamburger: 1025–1180 keep one row, tighter intra-nav. */
@media (min-width: 1055px) and (max-width: 1180px) {
  .nav {
    gap: var(--space-3);
  }

  .header-mail,
  .header-contacts a[href^="mailto"] {
    letter-spacing: -0.04em;
  }
}

@media (min-width: 768px) {
  /* Tablet only — do NOT clobber desktop ≥1025 flex column (micro above CTA) */
  .hero-world > .hero__content {
    display: block;
  }

  .tasks-grid {
    /* 3 format columns; F3 slightly wider (not equal 3×1fr / not repeat(3,)) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr);
  }

  #services .folder-tab {
    padding-inline: 12px; /* fit 5 labels; do not glue tablist gap */
  }

  .folder-panel {
    padding: var(--space-6) var(--space-7);
  }

  .folder-panel__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-7);
  }

  /* 2×2 вместо сжатых 4 колонок на 768 */
  .process-path {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-4);
  }

  .process-step:not(:last-child) .process-pin::after {
    display: none;
  }

  .folder-tabs__list {
    padding-inline-end: 0;
  }

  .cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.6fr) minmax(10rem, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-banner__actions {
    flex-shrink: 0;
  }
}

/* Desktop эталон (≥1025; 1024 остаётся tablet) */
@media (min-width: 1025px) {
  .tasks-grid {
    /* 3 format columns; F3 slightly wider (not equal 3×1fr / not repeat(3,)) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr);
  }

  #services .folder-tab {
    padding-inline: 20px;
  }

  .folder-tab {
    padding-inline: 24px; /* keep fixed height 50/59; only widen horizontal padding */
  }

  .process-path {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .process-step {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .process-step:not(:last-child) .process-pin::after {
    display: block;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: calc(100% + var(--space-4));
    height: 2px;
  }

  .process-pin {
    margin-bottom: var(--space-3);
  }

  .form,
  .cta-brief {
    padding: var(--space-6);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-pin:not(.is-parallaxing) .hero-world__set .hero-layer--mid,
  .hero-pin:not(.is-parallaxing) .hero-world__set .hero-layer--sky,
  .hero-layer {
    animation: none !important;
  }

  .hero-layer,
  .hero__content {
    transform: none !important;
  }

  /* F9 degrade: Set A only, static — no float, no crossfade */
  .hero-world__set {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-layer[data-slot^="cartoon-"] {
    transform: scale(var(--layer-scale, 1)) !important;
  }

  .process-step {
    opacity: 1;
    transform: none;
  }

  .folder-panel.is-entering {
    animation: none;
  }

  .mobile-nav__scrim,
  .mobile-nav__sheet {
    transition: none;
  }
}

/* ==========================================================================
   Hero copy wrap — /teya-text-fix task-5cae899b0503
   Copy 1:1, contrast on #FF6200, 5-width overlap. No second override layer.
   ========================================================================== */

.hero__title-line {
  display: inline;
}

#hero .hero__title,
#hero .hero__title-line {
  color: #ffffff;
}

#hero .hero__subtitle,
#hero .hero__lead,
#hero .hero__bullets,
#hero .hero__lead li,
#hero .hero__bullets li,
#hero .micro {
  color: #0b0c10;
}

#hero .hero__content {
  min-width: 0;
  z-index: 8;
}

.hero__subtitle {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  max-width: 36em;
}

#hero .hero__lead,
#hero .hero__bullets {
  min-width: 0;
}

#hero .hero__actions .btn,
#hero .hero__actions a.btn {
  min-height: 44px;
  height: auto;
  box-sizing: border-box;
  min-width: 0;
}

#hero .btn--hero-brief:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

#hero .btn--outline:focus-visible {
  outline: 2px solid #0b0c10;
  outline-offset: 3px;
}

@media (max-width: 1024px) and (min-width: 99999px) {
  #hero .hero-layer[data-slot="cartoon-a-mid-couple"],
  #hero .hero-layer[data-slot="cartoon-a-mid-writer"],
  #hero .hero-layer[data-slot="cartoon-a-mid-coffee"],
  #hero .hero-layer[data-slot="cartoon-a-sky-cloud"],
  #hero .hero-bubble,
  #hero .hero-dots {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 1280px) {
  /* Phone: right of CTAs, on orange floor. Shift/scale only — never hide. */
  #hero .hero-layer[data-slot="cartoon-a-fg-phone"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    left: calc(960 / 1521 * 100%) !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    width: calc(288 / 1521 * 100%) !important;
    height: calc(340 / 666 * 100%) !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 40;
  }

  .hero-artboard .hero__content {
    width: 650px;
    max-width: 650px;
    z-index: 80;
  }

  .hero-artboard .hero__content .hero__actions {
    position: relative;
    z-index: 81;
  }

  .hero-artboard .hero__content .hero__title {
    white-space: normal;
    max-width: 650px;
  }

  .hero-artboard .hero__content .hero__title-line {
    display: block;
    white-space: nowrap;
  }

  .hero-artboard .hero__content .hero__subtitle {
    flex: 0 0 auto;
    width: auto;
    max-width: 420px;
    margin-block: 0 var(--space-3);
    font-size: 14px;
    line-height: 1.4;
  }

  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets {
    max-width: 420px;
    width: auto;
    white-space: normal;
  }

  .hero-artboard .hero__content ul.hero__lead li,
  .hero-artboard .hero__content ul.hero__bullets li {
    white-space: normal;
  }

  .hero-artboard .hero__content .micro {
    display: block !important;
    max-width: 420px;
    margin-block: 22px 0;
  }

  .hero-artboard .hero__content .hero__actions .btn {
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding-block: 12px;
    box-sizing: border-box;
  }

  #hero #bubble-seo,
  #hero .hero-dots--seo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (min-width: 99999px) {
  /* Scooter sat on stacked CTAs (helmet peek on black button). */
  #hero .hero-layer[data-slot="cartoon-a-far-scooter"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #hero .hero-layer[data-slot="cartoon-a-fg-phone"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    left: auto !important;
    right: 2% !important;
    top: auto !important;
    bottom: 0 !important;
    width: 22% !important;
    height: auto !important;
    max-height: 46% !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 40;
  }

  .hero-artboard .hero__content {
    height: auto;
    max-height: none;
    width: min(420px, 58%);
    max-width: 420px;
    left: 16px;
    top: 56px;
    z-index: 20;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .hero-artboard .hero__content .hero__title,
  .hero-artboard .hero__content .hero__subtitle,
  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets,
  .hero-artboard .hero__content .hero__actions,
  .hero-artboard .hero__content .micro {
    position: static;
    inset-inline-start: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .hero-artboard .hero__content .hero__title {
    white-space: normal;
    font-size: 28px;
    line-height: 1.18;
  }

  .hero-artboard .hero__content .hero__title-line {
    display: inline;
    white-space: normal;
  }

  .hero-artboard .hero__content .hero__subtitle {
    font-size: 14px;
    line-height: 1.4;
    max-width: 100%;
    margin: 0;
  }

  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets {
    padding-inline-start: 1.1em;
    font-size: 14px;
    line-height: 1.35;
  }

  .hero-artboard .hero__content ul.hero__lead li,
  .hero-artboard .hero__content ul.hero__bullets li {
    margin-block: 0.2em;
  }

  .hero-artboard .hero__content .hero__actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0.5rem;
  }

  .hero-artboard .hero__content .hero__actions .btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    height: auto;
    min-height: 44px;
    min-width: 0;
    font-size: 14px;
  }

  .hero-artboard .hero__content .micro {
    display: block !important;
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
  }
}

@media not (min-width: 768px) and (min-width: 99999px) {
  .hero__title {
    white-space: normal;
  }

  .hero-world > .hero__content {
    z-index: 20;
  }

  .hero-world > .hero__content .hero__subtitle,
  .hero__content .hero__subtitle {
    font-size: clamp(0.875rem, 0.82rem + 0.4vw, 1rem);
    line-height: 1.4;
    max-width: 100%;
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 480px) and (min-width: 99999px) {
  .hero-world > .hero__content .hero__title {
    white-space: normal;
    font-size: clamp(1.25rem, 1.05rem + 2.2vw, 1.5rem);
    font-weight: 700;
  }

  .hero-world > .hero__content .hero__subtitle {
    max-width: none;
    width: auto;
    margin-block: 0 0.7rem;
  }

  .hero-world > .hero__content .micro,
  .hero__content .micro {
    display: block !important;
    margin-block: 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    max-width: none;
  }

  .hero-world > .hero__content .hero__actions .btn {
    white-space: normal;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 390px) and (min-width: 99999px) {
  .hero-world > .hero__content .hero__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding-inline: 14px;
    box-sizing: border-box;
    gap: 0.5rem;
  }

  .hero-world > .hero__content .hero__actions .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 360px) and (min-width: 99999px) {
  .hero-world > .hero__content {
    padding-top: 0.85rem;
  }

  .hero-world > .hero__content .hero__title {
    font-size: clamp(1.25rem, 1.1rem + 2vw, 1.5rem);
    font-weight: 700;
    margin-block: 0 0.55rem;
  }

  .hero-world > .hero__content .hero__subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-block: 0 0.5rem;
  }

  .hero-world > .hero__content ul.hero__lead li,
  .hero-world > .hero__content ul.hero__bullets li {
    margin-block: 0.28em;
  }

  .hero-world > .hero__content .hero__actions,
  .hero-world > .hero__content .micro {
    position: relative;
    z-index: 90;
  }
}

/* <768 last in wrap (incl. 767px + (767,768) gap): beat 100svh / absolute artboard. Phone in flow after .micro. */
@media not (min-width: 768px) and (min-width: 99999px) {
  .hero-pin,
  #hero,
  #hero.hero,
  .hero-world,
  .hero-world__stage,
  .hero-artboard,
  .hero-world__set,
  .hero__content,
  .hero-world > .hero__content,
  .hero-artboard .hero__content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .hero-pin {
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    margin-block-start: calc(-1 * var(--header-h, 72px)) !important;
  }

  #hero.hero,
  #hero {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  .hero-world {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  .hero-artboard,
  .hero-world__stage {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    order: 2;
    pointer-events: none;
  }

  .hero-world__set {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    order: 2;
  }

  .hero-world > .hero__content,
  .hero-artboard .hero__content,
  #hero .hero__content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 22px !important;
    padding-block-start: calc(var(--header-h, 72px) + 12px) !important;
    padding-block-end: 0 !important;
    box-sizing: border-box;
    z-index: 80;
    order: 1;
    pointer-events: auto;
  }

  .hero-world > .hero__content .hero__actions {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .hero-world > .hero__content,
  .hero-artboard .hero__content,
  #hero .hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
  }

  #hero .hero__title,
  #hero .hero__subtitle,
  #hero .hero__lead,
  #hero .hero__bullets,
  #hero .hero__actions,
  #hero .micro,
  .hero-world > .hero__content .hero__title,
  .hero-world > .hero__content .hero__subtitle,
  .hero-world > .hero__content .hero__lead,
  .hero-world > .hero__content .hero__bullets,
  .hero-world > .hero__content .hero__actions,
  .hero-world > .hero__content .micro,
  .hero-artboard .hero__content .hero__title,
  .hero-artboard .hero__content .hero__subtitle,
  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets,
  .hero-artboard .hero__content .hero__actions,
  .hero-artboard .hero__content .micro {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0;
  }

  #hero .hero__title,
  .hero-world > .hero__content .hero__title,
  .hero-artboard .hero__content .hero__title {
    color: #ffffff !important;
    white-space: normal !important;
    overflow: visible !important;
    margin-block: 0 0.55rem;
  }

  #hero .hero__title-line,
  .hero-artboard .hero__content .hero__title-line {
    display: inline;
    white-space: normal;
  }

  #hero .hero__subtitle,
  #hero .hero__lead,
  #hero .hero__bullets,
  #hero .hero__lead li,
  #hero .hero__bullets li,
  .hero-world > .hero__content .hero__subtitle,
  .hero-world > .hero__content .hero__lead,
  .hero-world > .hero__content .hero__bullets,
  .hero-artboard .hero__content .hero__subtitle,
  .hero-artboard .hero__content .hero__lead,
  .hero-artboard .hero__content .hero__bullets,
  .hero-artboard .hero__content ul.hero__lead li,
  .hero-artboard .hero__content ul.hero__bullets li {
    color: #0b0c10 !important;
    white-space: normal !important;
  }

  #hero .hero__content .micro,
  .hero-world > .hero__content .micro,
  .hero-artboard .hero__content .micro {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-block: 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  #hero .hero__actions,
  .hero-world > .hero__content .hero__actions,
  .hero-artboard .hero__content .hero__actions {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-block-start: 0.35rem;
    padding: 0 !important;
  }

  #hero .hero__actions .btn,
  .hero-world > .hero__content .hero__actions .btn,
  .hero-artboard .hero__content .hero__actions .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

  @media (min-width: 481px) {
    #hero .hero__actions,
    .hero-world > .hero__content .hero__actions,
    .hero-artboard .hero__content .hero__actions {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
    }

    #hero .hero__actions .btn,
    .hero-world > .hero__content .hero__actions .btn,
    .hero-artboard .hero__content .hero__actions .btn {
      flex: 1 1 calc(50% - 0.25rem);
      width: auto;
    }
  }

  #hero .hero-layer:not([data-slot="cartoon-a-fg-phone"]),
  #hero .hero-bubble,
  #hero .hero-dots {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #hero .hero-layer[data-slot="cartoon-a-fg-phone"] {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: clamp(140px, 22vw, 170px) !important;
    height: auto !important;
    max-height: none !important;
    margin-block-start: 16px !important;
    margin-block-end: 20px !important;
    margin-inline: auto !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    z-index: 4;
    transform: none !important;
  }
}