/* Общие защитные правила для всех рабочих страниц сайта. */
html {
  width: 100%;
  overflow-x: hidden;
}

/* Mobile polish v7: targeted fixes from real-phone review. */
@media (max-width: 750px) {
  /* Gateway cards: keep a clean text arrow away from the metric chips. */
  .gateway::after {
    content: "\2197" !important;
    top: 18px !important;
    right: 18px !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    font: 400 18px/1 Arial, Helvetica, sans-serif !important;
    font-variant-emoji: text !important;
    border-width: 1px !important;
  }

  .gateway h3,
  .gateway p {
    max-width: 100% !important;
  }

  .gateway h3 {
    padding-right: 30px !important;
  }

  .gateway-tags {
    max-width: 100% !important;
    padding-right: 0 !important;
    gap: 6px !important;
  }

  .gateway-tags span {
    padding: 6px 8px !important;
    font-size: 8px !important;
  }

  /* Detail-page gradient calls to action must sit exactly in the viewport. */
  .detail-page .cta,
  body:not(.detail-page) .cta {
    width: calc(100% - 32px) !important;
    max-width: 720px !important;
    margin: 24px auto 38px !important;
    box-sizing: border-box !important;
    transform: none !important;
    translate: 0 0 !important;
  }

  .detail-page .cta h2,
  body:not(.detail-page) .cta h2 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* About: the useful specialization panel is first; the repeated mini-list is removed. */
  .about-details {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .about-details .competence-list {
    display: none !important;
  }

  .about-details .niche-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px !important;
  }

  .niche-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  /* FAQ: a compact vertical list, no sideways cards and no excessive height. */
  .faq {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .faq-intro {
    position: static !important;
  }

  .faq-list {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .faq-list details {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
  }

  .faq-list summary {
    min-height: 54px !important;
    padding: 14px 36px 14px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .faq-list summary::after {
    top: 50% !important;
    right: 2px !important;
    transform: translateY(-50%) !important;
    font: 400 22px/1 Arial, Helvetica, sans-serif !important;
  }

  .faq-list details[open] summary::after {
    transform: translateY(-50%) rotate(45deg) !important;
  }

  .faq-list details p {
    padding: 0 0 14px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* One compact footer system on every page. */
  .site-footer,
  .footer {
    margin-top: 0 !important;
    padding: 26px 0 20px !important;
  }

  .site-footer .wrap,
  .footer .wrap {
    width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  .footer-grid,
  .footergrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-logo {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  .footer-name {
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .footer-links,
  .contacts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .footer-link,
  .contacts a {
    display: grid !important;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .footer-link b,
  .footer-link span,
  .contacts a {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .footer-link span {
    text-align: right !important;
    overflow-wrap: anywhere !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-variant-emoji: text !important;
  }

  .footer-bottom,
  .bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }

  /* Force all small navigation arrows to render as typography, not emoji stickers. */
  .gateway::after,
  .footer-link,
  .report-link,
  .btn,
  .back,
  .nav-link {
    font-variant-emoji: text !important;
  }
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

.sticker,
.submit-pointer,
.footer-link span,
.gateway::after,
.pulse-line::after,
.contact::after {
  font-variant-emoji: text;
  font-family: Manrope, Arial, sans-serif;
}

main,
section,
article,
aside,
.wrap,
.hero > *,
.section-head > *,
.case-head > *,
.case-body > *,
.casebox > *,
.footer-grid > *,
.footergrid > * {
  min-width: 0;
}

h1,
h2,
h3,
.metric b,
.signal b {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Главная: убираем слипание соседних букв и обрезку длинного формата. */
body:not(.detail-page) .hero h1 {
  letter-spacing: 0 !important;
}

.format-card h3 {
  max-width: 100% !important;
  font-size: clamp(20px, 2.15vw, 23px) !important;
  overflow-wrap: anywhere;
}

.format-card::after {
  right: 10px !important;
}

/* Кейсы: цифры больше не расширяют сетку за границы экрана. */
.case .metrics,
.casebox .metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case .metric,
.casebox .metric {
  min-width: 0;
  overflow: hidden;
}

.case .metric b {
  font-size: clamp(21px, 2.65vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* Нишевые страницы: крупные сигналы и длинные заголовки остаются внутри карточек. */
.signal b {
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.055em;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.casebox h3 {
  font-size: clamp(22px, 3.5vw, 46px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.detail-page h1,
.detail-page h2,
.detail-page h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.detail-page .metric b {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  font-size: clamp(21px, 2.35vw, 31px);
  letter-spacing: -0.045em;
}

.detail-page .cta {
  margin-left: auto;
  margin-right: auto;
}

.steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.step {
  min-width: 0;
}

/* Единый подвал на главной, услугах, кейсах и нишевых страницах. */
.site-footer,
.footer {
  margin-top: 0;
  padding: 44px 0 34px;
  border-top: 1px solid #31c7b542;
  position: relative;
  background:
    radial-gradient(circle at 86% 42%, #e7837814, transparent 30%),
    radial-gradient(circle at 16% 58%, #31c7b514, transparent 34%);
}

.site-footer::before,
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 28%;
  height: 2px;
  background: linear-gradient(90deg, var(--coral, #e78378), var(--acid, #31c7b5));
  box-shadow: 0 0 18px #31c7b555;
}

.footer-grid,
.footergrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
  gap: 70px;
  align-items: start;
}

.footer-logo {
  font: 800 clamp(23px, 3vw, 36px) / 1.1 Unbounded, sans-serif;
  letter-spacing: -0.025em;
}

.footer-logo span {
  color: var(--acid, #31c7b5);
}

.footer-name {
  margin-top: 16px;
  color: #8ea09c;
  font-size: 14px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.footer-link {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #203d39;
  border-radius: 13px;
  background: #ffffff05;
  transition: transform 0.45s, border-color 0.45s, box-shadow 0.45s;
}

.footer-link:hover {
  transform: translateY(-4px);
  border-color: var(--acid, #31c7b5);
  box-shadow: 0 14px 35px -22px #31c7b59c;
}

.footer-link:nth-child(even):hover {
  border-color: var(--coral, #e78378);
  box-shadow: 0 14px 35px -22px #e783789c;
}

.footer-link b {
  flex: 0 0 auto;
  font-size: 13px;
}

.footer-link span {
  min-width: 0;
  color: #83928f;
  font-size: 13px;
  text-align: right;
  overflow-wrap: anywhere;
}

.footer-bottom,
.bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid #1e302d;
  color: #697976;
  font-size: 12px;
}

@media (max-width: 900px) {
  .case .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
  body:not(.detail-page) .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 30px;
  }

  body:not(.detail-page) .portrait img {
    width: 100%;
    max-width: 100%;
  }

  body:not(.detail-page) .portrait .badge {
    left: 4px;
  }

  body:not(.detail-page) .portrait .s1 {
    right: 4px;
  }
}

@media (max-width: 750px) {
  .footer-grid,
  .footergrid,
  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-grid,
  .footergrid {
    gap: 32px;
  }

  .footer-bottom,
  .bottom {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .wrap {
    width: min(100% - 28px, 1180px);
  }

  .hero h1 {
    font-size: clamp(34px, 11vw, 52px) !important;
    line-height: 1.04 !important;
  }

  body:not(.detail-page) .hero {
    overflow: clip;
  }

  body:not(.detail-page) .portrait img {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* На телефоне появление остаётся снизу вверх, без бокового выезда за экран. */
  .motion-item.motion-left,
  .motion-item.motion-right {
    translate: 0 38px !important;
  }

  .motion-item.motion-visible {
    translate: 0 0 !important;
  }

  .section h2,
  .cta h2 {
    font-size: clamp(27px, 8.4vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .detail-page .section h2,
  .detail-page .cta h2 {
    font-size: clamp(23px, 7.15vw, 32px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
  }

  .case .metrics,
  .casebox .metrics,
  .steps {
    grid-template-columns: 1fr;
  }

  .case .metric b {
    font-size: clamp(24px, 9vw, 38px);
  }

  .signal {
    width: 100%;
    max-width: 100%;
  }

  .signal b {
    font-size: clamp(26px, 8.3vw, 38px);
  }

  .casebox {
    padding: 24px;
  }

  .casebox h3 {
    font-size: clamp(22px, 7.5vw, 32px);
  }

  .footer-link {
    align-items: flex-start;
  }
}

/*
 * Compact mobile composition.
 * These overrides intentionally live below all page styles and only affect
 * narrow screens. The desktop composition stays untouched.
 */
@media (max-width: 750px) {
  html {
    font-size: 15px;
  }

  body {
    overflow-x: hidden;
  }

  .wrap {
    width: calc(100% - 28px) !important;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  button,
  span,
  b,
  strong {
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .metric b,
  .signal b,
  .proof-stat b,
  .trust-strip b,
  .about-numbers b,
  .period,
  .growth strong,
  [class*="stat"] > b:first-child,
  [class*="number"] > b:first-child {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  section,
  .section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .section-head,
  .faq-intro,
  .workflow-head {
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .section h2,
  .section-head h2,
  .cta h2 {
    margin-top: 7px !important;
    margin-bottom: 8px !important;
  }

  .lead,
  .intro,
  .section-head p,
  .faq-intro p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .nav {
    min-height: 66px !important;
    gap: 10px !important;
  }

  .brand-block,
  .brand {
    min-width: 0;
  }

  .brand,
  .brand-block .brand {
    font-size: 12px !important;
  }

  .brand small,
  .identity {
    max-width: 180px;
    margin-top: 4px !important;
    font-size: 6px !important;
    line-height: 1.25 !important;
  }

  .nav-links,
  .navlinks,
  .nav-actions {
    gap: 5px !important;
  }

  .nav-links a:not(.pill),
  .navlinks a:not(.back),
  .nav-link {
    display: none !important;
  }

  .pill,
  .back {
    padding: 9px 12px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* Homepage hero: compact copy first, portrait immediately after it. */
  body:not(.detail-page) .hero {
    min-height: 0 !important;
    padding: 30px 0 0 !important;
    gap: 18px !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  body:not(.detail-page) .hero h1 {
    max-width: 620px;
    margin: 12px 0 14px !important;
    font-size: clamp(34px, 10.6vw, 47px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
  }

  body:not(.detail-page) .hero .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.11em !important;
  }

  body:not(.detail-page) .hero .lead {
    max-width: 560px;
    margin-bottom: 0 !important;
  }

  body:not(.detail-page) .hero .actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  body:not(.detail-page) .hero .actions a,
  body:not(.detail-page) .hero .actions button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 10px !important;
    font-size: 12px !important;
    text-align: center;
    white-space: nowrap;
  }

  body:not(.detail-page) .portrait {
    min-height: 330px !important;
    height: 330px !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  body:not(.detail-page) .portrait img {
    height: 330px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    display: block;
    margin: auto !important;
  }

  body:not(.detail-page) .portrait .circle,
  body:not(.detail-page) .portrait::before {
    width: 285px !important;
    height: 285px !important;
  }

  body:not(.detail-page) .portrait .sticker,
  body:not(.detail-page) .portrait .badge {
    padding: 8px 10px !important;
    font-size: 9px !important;
    white-space: nowrap;
  }

  body:not(.detail-page) .portrait .s1 {
    top: 18px !important;
    right: 3px !important;
    bottom: auto !important;
    left: auto !important;
  }

  body:not(.detail-page) .portrait .s2 {
    top: auto !important;
    right: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body:not(.detail-page) .portrait .badge {
    top: 95px !important;
    right: auto !important;
    bottom: auto !important;
    left: 3px !important;
    transform: rotate(-5deg) !important;
  }

  .ticker {
    min-height: 48px !important;
    margin-top: 0 !important;
    border-bottom-width: 2px !important;
  }

  .ticker span,
  .ticker-track {
    font-size: 12px !important;
  }

  /* Short proof blocks stay visible without becoming a very long column. */
  .trust-strip,
  .about-numbers,
  .proof-side,
  .proof-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .trust-strip > *,
  .about-numbers > *,
  .proof-stat {
    min-height: 0 !important;
    padding: 15px !important;
  }

  .trust-strip b,
  .about-numbers b,
  .proof-stat b {
    font-size: clamp(21px, 7vw, 30px) !important;
  }

  .trust-strip span,
  .about-numbers span,
  .proof-stat span {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .dashboard,
  .about-v2,
  .proof-wall,
  .fit-grid,
  .faq,
  .contact {
    gap: 12px !important;
  }

  .panel,
  .feature,
  .gateway,
  .fit-card,
  .proof-main,
  .proof-stat,
  .about-profile,
  .about-main,
  .niche-card,
  .faq-list details,
  .contact,
  .brief {
    border-radius: 18px !important;
    padding: 18px !important;
    min-height: 0 !important;
  }

  .chart {
    min-height: 175px !important;
    height: 175px !important;
  }

  .chart .bars,
  .growth {
    min-height: 125px !important;
    height: 125px !important;
  }

  .features {
    gap: 8px !important;
  }

  .feature {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 12px !important;
  }

  .feature .num,
  .feature > b:first-child,
  .process-step .num {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: grid;
    place-items: center;
  }

  .feature h3,
  .process-step h3 {
    margin: 0 0 5px !important;
    font-size: 16px !important;
  }

  .feature p,
  .process-step p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Card collections become compact swipable rows instead of tall stacks. */
  .formats-grid,
  .gateways,
  .fit-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw, 330px) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding: 4px 14px 12px 0 !important;
    scrollbar-width: none;
  }

  .formats-grid::-webkit-scrollbar,
  .gateways::-webkit-scrollbar,
  .fit-grid::-webkit-scrollbar {
    display: none;
  }

  .format-card,
  .gateway,
  .fit-card {
    scroll-snap-align: start;
    min-height: 220px !important;
    height: auto !important;
    padding: 20px !important;
  }

  .gateway h3 {
    max-width: 100% !important;
    font-size: clamp(20px, 6vw, 23px) !important;
    line-height: 1.08 !important;
  }

  .format-card h3 {
    font-size: 19px !important;
    line-height: 1.14 !important;
    overflow-wrap: normal !important;
  }

  .format-card p,
  .gateway p,
  .fit-card p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .process,
  .steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .process-step,
  .step {
    min-height: 155px !important;
    padding: 15px !important;
    border-radius: 15px !important;
  }

  .report-link {
    margin-top: 10px !important;
    padding: 16px !important;
    min-height: 0 !important;
  }

  .proof-main,
  .about-profile,
  .about-main,
  .niche-card {
    min-height: 0 !important;
  }

  .proof-domains,
  .competence-list {
    gap: 8px !important;
  }

  .proof-domains > *,
  .competence-list > * {
    padding: 12px !important;
    min-height: 0 !important;
  }

  .about-signal,
  .about-bridge,
  .bridge-arrow {
    margin-top: 10px !important;
    min-height: 0 !important;
  }

  .faq-list {
    gap: 7px !important;
  }

  .faq-list summary {
    min-height: 0 !important;
    padding: 15px 0 !important;
    font-size: 14px !important;
  }

  .faq-list details p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .contact {
    margin-top: 0 !important;
  }

  .contact-copy h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .guarantees {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .guarantee {
    min-height: 0 !important;
    padding: 10px !important;
    font-size: 10px !important;
  }

  .field input,
  .field textarea {
    padding: 13px 14px !important;
    font-size: 14px !important;
  }

  .field textarea {
    min-height: 115px !important;
  }

  .submit-pointer {
    display: none !important;
  }

  .site-footer,
  .footer {
    padding: 30px 0 22px !important;
  }

  .footer-grid,
  .footergrid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .footer-logo {
    font-size: 22px !important;
  }

  .footer-name {
    margin-top: 8px !important;
    font-size: 11px !important;
  }

  .footer-links,
  .contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .footer-link,
  .contacts a {
    min-height: 0 !important;
    padding: 11px !important;
    gap: 5px !important;
    flex-direction: column;
  }

  .footer-link b,
  .footer-link span,
  .contacts a {
    font-size: 10px !important;
    text-align: left !important;
  }

  .footer-bottom,
  .bottom {
    margin-top: 18px !important;
    padding-top: 14px !important;
    gap: 4px !important;
    font-size: 9px !important;
  }

  /* Services: service cards remain readable while using less vertical space. */
  .service-list {
    gap: 10px !important;
    padding: 12px 0 44px !important;
  }

  .service {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .service .num {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .service h2 {
    margin: 2px 0 10px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .service ul {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .service li {
    padding-left: 16px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .deliverables-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(80vw, 315px) !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 9px !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .deliverable {
    scroll-snap-align: start;
    min-height: 130px !important;
    padding: 17px !important;
  }

  /* Cases: metrics stay 2x2 and details are compact. */
  .case-list {
    gap: 14px !important;
    padding: 8px 0 44px !important;
  }

  .case {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .case-head {
    gap: 10px !important;
  }

  .case h2 {
    margin-top: 8px !important;
    font-size: clamp(23px, 7vw, 30px) !important;
    line-height: 1.1 !important;
  }

  .case .metrics,
  .casebox .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 18px 0 !important;
  }

  .case .metric,
  .casebox .metric,
  .metric {
    min-height: 90px !important;
    padding: 13px !important;
  }

  .case .metric b,
  .casebox .metric b,
  .detail-page .metric b {
    font-size: clamp(20px, 6.4vw, 28px) !important;
    letter-spacing: -0.035em !important;
  }

  .case .metric span,
  .casebox .metric span,
  .metric span {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .case-body {
    gap: 16px !important;
    padding-top: 18px !important;
  }

  .details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .detail p,
  .summary p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Niche/detail pages: turn long card stacks into deliberate swipe rows. */
  .detail-page .hero {
    min-height: 0 !important;
    padding: 38px 0 !important;
    gap: 18px !important;
  }

  .detail-page .hero h1 {
    margin: 12px 0 !important;
    font-size: clamp(32px, 9.2vw, 44px) !important;
    line-height: 1.02 !important;
  }

  .detail-page .hero::after {
    top: 20px !important;
    right: -10px !important;
    font-size: 72px !important;
  }

  .detail-page .signal {
    max-width: none !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .detail-page .grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(80vw, 310px) !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 9px !important;
    padding: 3px 12px 12px 0 !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .detail-page .grid::-webkit-scrollbar {
    display: none;
  }

  .detail-page .card {
    scroll-snap-align: start;
    min-height: 185px !important;
    padding: 18px !important;
  }

  .detail-page .card h3 {
    margin: 20px 0 9px !important;
    font-size: 17px !important;
  }

  .detail-page .card p,
  .detail-page .card li {
    font-size: 12px !important;
  }

  .detail-page .casebox {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 18px !important;
    padding: 19px !important;
  }

  .detail-page .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .detail-page .step {
    min-height: 125px !important;
  }

  .cta {
    margin: 24px 0 38px !important;
    padding: 22px !important;
    border-radius: 19px !important;
    gap: 14px !important;
  }

  .cta a,
  .cta .btn {
    padding: 12px 15px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .reveal,
  .motion-item,
  .motion-item.motion-left,
  .motion-item.motion-right {
    translate: 0 18px !important;
  }

  .reveal.on,
  .motion-item.motion-visible {
    translate: 0 0 !important;
  }
}

@media (max-width: 390px) {
  body:not(.detail-page) .hero h1 {
    font-size: 33px !important;
  }

  .process,
  .steps {
    grid-template-columns: 1fr 1fr !important;
  }

  .service {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 15px !important;
  }

  .service .num {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .footer-link b,
  .footer-link span {
    font-size: 9px !important;
  }
}

/* Final compact pass for phones. Desktop/tablet geometry stays untouched. */
@media (max-width: 750px) {
  /* Keep long case values on one line without clipping their card. */
  .case .metric b {
    font-size: clamp(15px, 4vw, 17px) !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }
  .casebox .metric b,
  .detail-page .metric b {
    font-size: clamp(18px, 5vw, 21px) !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }

  /* Approach: one useful chart and a compact swipe row instead of a tall stack. */
  #approach .approach-grid {
    gap: 12px !important;
  }
  #approach .panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
  }
  #approach .panel > p {
    margin-bottom: 14px !important;
    font-size: 12px !important;
  }
  #approach .chart {
    height: 170px !important;
    gap: 7px !important;
  }
  #approach .real-case-note {
    margin-top: 12px !important;
    padding: 10px 11px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    font-size: 9px !important;
  }
  #approach .features,
  #approach .feature-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(245px, 78vw) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 2px 2px 10px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #approach .features::-webkit-scrollbar,
  #approach .feature-list::-webkit-scrollbar { display: none; }
  #approach .feature {
    min-height: 116px !important;
    padding: 17px !important;
    scroll-snap-align: start;
  }

  /* About: preserve all information, but place the two detailed panels in a swipe row. */
  .about-v2 {
    gap: 12px !important;
    padding-bottom: 36px !important;
  }
  .about-profile {
    min-height: 282px !important;
    padding: 21px !important;
  }
  .about-profile h2 {
    margin-bottom: 13px !important;
    font-size: clamp(34px, 10vw, 44px) !important;
  }
  .about-profile p {
    max-width: 78% !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
  .about-profile .about-facts {
    margin: 16px 0 0 !important;
    padding-right: 0 !important;
    gap: 7px !important;
  }
  .about-profile .about-facts span {
    padding: 7px 9px !important;
    font-size: 8px !important;
  }
  .experience-sticker {
    right: 15px !important;
    bottom: 16px !important;
    width: 76px !important;
    height: 76px !important;
  }
  .experience-sticker b { font-size: 29px !important; }
  .experience-sticker span { font-size: 7px !important; }
  .about-main {
    padding-top: 8px !important;
  }
  .about-copy {
    font-size: clamp(24px, 7.5vw, 31px) !important;
    line-height: 1.08 !important;
  }
  .about-signal {
    height: 74px !important;
    margin: 12px 0 8px !important;
  }
  .about-numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .about-numbers article {
    min-height: 80px !important;
    padding: 12px 9px !important;
  }
  .about-numbers article b { font-size: 28px !important; }
  .about-numbers article span {
    font-size: 8px !important;
    line-height: 1.25 !important;
  }
  .about-details {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(288px, 88vw) !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 2px 2px 10px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .about-details::-webkit-scrollbar { display: none; }
  .about-details > * { scroll-snap-align: start; }
  .competence-list,
  .niche-card {
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
  }
  .competence-list {
    grid-template-rows: repeat(3, auto) !important;
    align-content: start !important;
  }
  .competence-list article {
    min-height: 0 !important;
    height: 70px !important;
    padding: 12px !important;
    align-items: center !important;
  }
  .competence-list article p {
    display: none !important;
  }
  .niche-card { padding: 18px !important; }
  .niche-head h3 { font-size: 22px !important; }
  .niche-row { padding: 10px 0 !important; }
  .about-bridge { display: none !important; }

  /* FAQ stays readable, but occupies two compact swipeable rows. */
  .faq {
    gap: 18px !important;
  }
  .faq-intro h2 {
    font-size: clamp(34px, 11vw, 44px) !important;
  }
  .faq-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-columns: minmax(265px, 82vw) !important;
    grid-template-columns: none !important;
    gap: 9px !important;
    overflow-x: auto !important;
    padding: 2px 2px 10px !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .faq-list::-webkit-scrollbar { display: none; }
  .faq-list details {
    min-height: 82px !important;
    padding: 16px !important;
    scroll-snap-align: start;
  }
  .faq-list summary {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Brief: remove prototype copy, tighten controls and keep the useful trust points. */
  #contact .contact {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 22px !important;
    gap: 19px !important;
  }
  #contact .contact-copy,
  #contact .brief,
  #contact .field {
    min-width: 0 !important;
    width: 100% !important;
  }
  #contact .contact-copy h2 {
    margin: 10px 0 12px !important;
    font-size: clamp(27px, 7.5vw, 30px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
  }
  #contact .contact-copy p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  #contact .guarantees {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 1px 0 7px !important;
    scrollbar-width: none;
  }
  #contact .guarantees::-webkit-scrollbar { display: none; }
  #contact .guarantee {
    flex: 0 0 auto !important;
    padding: 9px 11px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  #contact .brief { gap: 9px !important; }
  #contact .field { gap: 5px !important; }
  #contact label { font-size: 9px !important; }
  #contact input,
  #contact select,
  #contact textarea {
    min-height: 46px !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }
  #contact textarea { min-height: 92px !important; }
  #contact .btn { min-height: 51px !important; }
  #contact .form-note { display: none !important; }
  #contact .consent {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  .footer-link span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Niche pages: long Russian words and result values always stay inside cards. */
  .detail-page .section h2 {
    font-size: clamp(27px, 8.4vw, 34px) !important;
    letter-spacing: -.045em !important;
  }
  .detail-page .casebox h3 {
    max-width: 100% !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    letter-spacing: -.04em !important;
  }
  .detail-page .casebox,
  .detail-page .casebox > * {
    min-width: 0 !important;
  }
  .detail-page .step b {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .detail-page .signal b {
    font-size: clamp(25px, 7.6vw, 31px) !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }
  .detail-page .signal {
    overflow: hidden !important;
    contain: paint;
  }
}

/* v7 final overrides: intentionally last so older mobile experiments cannot win. */
@media (max-width: 750px) {
  .gateway::after {
    content: "\2197" !important;
    top: 18px !important;
    right: 18px !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    font: 400 18px/1 Arial, Helvetica, sans-serif !important;
    font-variant-emoji: text !important;
  }
  .gateway h3 { max-width: 100% !important; padding-right: 30px !important; }
  .gateway p { max-width: 100% !important; }
  .gateway-tags { max-width: 100% !important; padding-right: 0 !important; gap: 6px !important; }
  .gateway-tags span { padding: 6px 8px !important; font-size: 8px !important; }

  .detail-page .cta,
  body:not(.detail-page) .cta {
    width: calc(100% - 32px) !important;
    max-width: 720px !important;
    margin: 24px auto 38px !important;
    box-sizing: border-box !important;
    transform: none !important;
    translate: 0 0 !important;
  }
  .detail-page .cta h2,
  body:not(.detail-page) .cta h2 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .about-details {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .about-details .competence-list { display: none !important; }
  .about-details .niche-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px !important;
  }
  .niche-row { grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; }

  .faq { grid-template-columns: 1fr !important; gap: 14px !important; }
  .faq-intro { position: static !important; }
  .faq-list {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .faq-list details {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
  }
  .faq-list summary {
    min-height: 54px !important;
    padding: 14px 36px 14px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .faq-list summary::after {
    top: 50% !important;
    right: 2px !important;
    transform: translateY(-50%) !important;
    font: 400 22px/1 Arial, Helvetica, sans-serif !important;
  }
  .faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg) !important; }
  .faq-list details p {
    padding: 0 0 14px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .site-footer,
  .footer { margin-top: 0 !important; padding: 26px 0 20px !important; }
  .site-footer .wrap,
  .footer .wrap { width: calc(100% - 32px) !important; margin-inline: auto !important; }
  .footer-grid,
  .footergrid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .footer-logo { font-size: 20px !important; line-height: 1.1 !important; }
  .footer-name { margin-top: 7px !important; font-size: 10px !important; line-height: 1.45 !important; }
  .footer-links,
  .contacts { grid-template-columns: 1fr !important; gap: 6px !important; width: 100% !important; }
  .footer-link,
  .contacts a {
    display: grid !important;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  .footer-link b,
  .footer-link span,
  .contacts a { font-size: 10px !important; line-height: 1.3 !important; }
  .footer-link span {
    text-align: right !important;
    overflow-wrap: anywhere !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-variant-emoji: text !important;
  }
  .footer-bottom,
  .bottom {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }
  .gateway::after,
  .footer-link,
  .report-link,
  .btn,
  .back,
  .nav-link { font-variant-emoji: text !important; }
}