/*
  Ideal Epila — mobile stability patch
  Loaded after every existing stylesheet. Desktop layout is untouched.
*/

@media (max-width: 760px) {
  .noise { display: none !important; }

  .site-header,
  .site-header.scrolled {
    height: 70px !important;
    background: rgba(8, 9, 8, .97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  }

  .mobile-menu,
  .lang-pill,
  .mobile-language-toggle,
  .mobile-language-menu,
  .cookie-banner,
  .cookie-modal-backdrop,
  .visual-caption,
  .single-stage .zone-item,
  .map-route-button {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .mobile-menu,
  .mobile-language-menu { background: #090a09 !important; }

  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .follicle-glow,
  .scan,
  .scroll-cue span::after,
  .claim-streak,
  .zone-lines g.active circle,
  .lens i:nth-child(3),
  .lens span,
  .crosshair,
  .cycle-ring i,
  .hero-ring,
  .hero-spark {
    animation: none !important;
  }

  .single-stage .zones-model-display { filter: none !important; }
  .single-stage .zone-lines circle { filter: none !important; }

  .compare-table-premium {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  .compare-row,
  .compare-row.compare-header {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .compare-row > div {
    min-width: 0 !important;
    padding: 14px 12px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .compare-row.compare-header > div:first-child { display: none !important; }

  .compare-row.compare-header > div:nth-child(2),
  .compare-row.compare-header > div:nth-child(3) {
    display: flex !important;
    grid-column: auto !important;
    min-height: 58px !important;
    padding: 13px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.08 !important;
  }

  .compare-row:not(.compare-header) > div:first-child {
    grid-column: 1 / -1 !important;
    min-height: 58px !important;
    padding: 15px 14px !important;
    border-right: 0 !important;
    font-size: clamp(17px, 5vw, 21px) !important;
    line-height: 1.18 !important;
  }

  .compare-row .result {
    min-height: 92px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .compare-row .result::before {
    width: 7px !important;
    height: 7px !important;
    flex-basis: 7px !important;
    margin-top: .48em !important;
  }

  .compare-row .result span:last-child {
    min-width: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
  }

  /* Signature motion restored with GPU-friendly transform/opacity animations. */
  .visual-frame img {
    animation: heroBreath 12s ease-in-out infinite alternate !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  .process-art .process-image img {
    animation: processImageBreath 11s ease-in-out infinite !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  .pulse-line .pulse-outline-run {
    animation: follicleContourFlow 7.5s linear infinite !important;
  }

  .probe .probe-pulse {
    animation: pulse 2.8s ease-out infinite !important;
  }

  .follicle-entry-marker span {
    animation: entryTargetPulse 2.8s ease-out infinite !important;
    will-change: transform, opacity;
  }

  .follicle-target {
    animation: heroTargetBreathe 4.2s ease-in-out infinite !important;
    will-change: transform, opacity;
  }

}


@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .visual-frame img,
  .process-art .process-image img,
  .pulse-line .pulse-outline-run,
  .probe .probe-pulse,
  .follicle-entry-marker span,
  .follicle-target {
    animation: none !important;
  }
}

/* ===== Final visual polish 2026-08-08: restore lightweight signature motion ===== */
@media (max-width: 760px) {
  /* Hero image breathing — transform only (GPU-friendly). */
  .visual-frame img {
    animation: heroBreath 9s ease-in-out infinite alternate !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Second follicle image breathing — original motion restored. */
  .process-art .process-image img {
    animation: processImageBreath 8.5s ease-in-out infinite !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* First-screen follicle contour and target/radar motion. */
  .pulse-line .pulse-outline-run {
    animation: follicleContourFlow 5.8s linear infinite !important;
  }
  .follicle-target {
    animation: heroTargetBreathe 3.4s ease-in-out infinite !important;
    will-change: transform, opacity;
  }
  .hero-ring-a {
    animation: heroOrbitFloat 8s ease-in-out infinite alternate !important;
    will-change: transform, opacity;
  }
  .hero-ring-b {
    animation: heroOrbitFloat 10s 1.2s ease-in-out infinite alternate-reverse !important;
    will-change: transform, opacity;
  }
  .hero-spark {
    animation: heroSparkPulse 3.8s ease-in-out infinite !important;
    will-change: transform, opacity;
  }

  /* Target on the second follicle visual. */
  .follicle-entry-marker span {
    animation: entryTargetPulse 2.2s ease-out infinite !important;
    will-change: transform, opacity;
  }

  /* Precision/radar section and hair-growth cycle. */
  .lens span {
    animation: lensSweep 5s ease-in-out infinite !important;
    will-change: transform;
  }
  .crosshair {
    animation: spin 30s linear infinite !important;
    will-change: transform;
  }
  .cycle-ring i {
    animation: spin 7s linear infinite !important;
    will-change: transform;
  }

  /* Keep large blurred rotating decoration disabled on mobile: it is the costly one. */
  .claim-streak { animation: none !important; }
}

/* Comparison table header — same premium gold gradient as primary CTA buttons. */
.compare-row.compare-header > div,
.compare-row.compare-header > div:first-child,
.compare-row.compare-header > div:nth-child(2),
.compare-row.compare-header > div:nth-child(3),
.compare-row.compare-header > div:last-child {
  background: linear-gradient(110deg,#b88539,#e7c47c 48%,#c18c3f) !important;
  color: #111 !important;
  border-right-color: rgba(17,17,17,.18) !important;
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .visual-frame img,
  .process-art .process-image img,
  .pulse-line .pulse-outline-run,
  .follicle-target,
  .hero-ring,
  .hero-spark,
  .follicle-entry-marker span,
  .lens span,
  .crosshair,
  .cycle-ring i {
    animation: none !important;
  }
}

/* ===== Mobile multilingual fit + centered process card 2026-08-08 ===== */
@media (max-width: 760px) {
  /* Prevent long translated headings from defining a viewport-wider grid column. */
  .precision,
  .precision-copy,
  .precision-copy h2,
  .precision-copy > p,
  .precision-points,
  .precision-points > div,
  .precision-points span {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .precision {
    width: 100% !important;
    overflow: hidden !important;
  }

  .precision-copy {
    width: 100% !important;
  }

  .precision-copy h2 {
    width: 100% !important;
    font-size: clamp(38px, 10vw, 46px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Longer words in Cyrillic/German need their own mobile scale. */
  html[lang="ru"] .precision-copy h2 {
    font-size: clamp(32px, 8.7vw, 38px) !important;
    letter-spacing: -.045em !important;
  }
  html[lang="uk"] .precision-copy h2,
  html[lang="de"] .precision-copy h2 {
    font-size: clamp(35px, 9.2vw, 41px) !important;
    letter-spacing: -.04em !important;
  }
  html[lang="fr"] .precision-copy h2 {
    font-size: clamp(36px, 9.5vw, 43px) !important;
  }

  .precision-copy > p:nth-of-type(2) {
    width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* The card previously had width:100% plus side margin, which pushed its
     right edge outside the mobile viewport. Keep equal visual gutters. */
  .manifesto .process-art {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 16px !important;
    justify-self: center !important;
    box-sizing: border-box !important;
  }

  .manifesto .process-image {
    left: 5% !important;
    right: 5% !important;
  }

  .manifesto .process-image img {
    object-position: 50% 50% !important;
  }

  /* General intrinsic-width safety for translated mobile copy. */
  .hero-content,
  .manifesto-copy,
  .zones-head,
  .precision-copy,
  .price-intro,
  .growth,
  .faq-title,
  .specialist-copy,
  .contact {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Proactive fit for the other long translated display headings. */
@media (max-width: 760px) {
  .zones-head h2,
  .compare-main-title {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[lang="ru"] .zones-head h2,
  html[lang="ru"] .compare-main-title,
  html[lang="uk"] .zones-head h2,
  html[lang="uk"] .compare-main-title {
    font-size: clamp(34px, 9.1vw, 42px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  html[lang="de"] .zones-head h2,
  html[lang="de"] .compare-main-title {
    font-size: clamp(36px, 9.5vw, 43px) !important;
    line-height: .98 !important;
  }
}

/* ===== FINAL multilingual mobile typography audit 2026-08-08 =====
   One responsive system for ES / EN / UK / RU / DE / FR.
   Prevent translated copy from creating viewport-wide intrinsic columns.
*/
@media (max-width: 760px) {
  html {
    --mobile-display-size: clamp(40px, 11vw, 47px);
    --mobile-contact-size: clamp(46px, 13vw, 58px);
    --mobile-claim-size: clamp(48px, 13vw, 52px);
  }
  html[lang="ru"] {
    --mobile-display-size: clamp(31px, 8.4vw, 37px);
    --mobile-contact-size: clamp(43px, 11.7vw, 50px);
    --mobile-claim-size: clamp(42px, 11.8vw, 45px);
  }
  html[lang="uk"] {
    --mobile-display-size: clamp(32px, 8.7vw, 38px);
    --mobile-contact-size: clamp(43px, 11.8vw, 51px);
    --mobile-claim-size: clamp(45px, 12.5vw, 48px);
  }
  html[lang="de"] {
    --mobile-display-size: clamp(36px, 9.8vw, 42px);
    --mobile-contact-size: clamp(46px, 12.5vw, 54px);
    --mobile-claim-size: clamp(43px, 12vw, 46px);
  }
  html[lang="fr"] {
    --mobile-display-size: clamp(39px, 10.7vw, 46px);
    --mobile-contact-size: clamp(44px, 12.2vw, 54px);
    --mobile-claim-size: clamp(48px, 13vw, 52px);
  }
  html[lang="en"] {
    --mobile-display-size: clamp(40px, 11vw, 47px);
    --mobile-contact-size: clamp(45px, 12.5vw, 56px);
    --mobile-claim-size: clamp(48px, 13vw, 52px);
  }

  /* Every major text/grid container is allowed to shrink below min-content. */
  .hero,
  .hero-content,
  .manifesto,
  .manifesto-copy,
  .process-section,
  .process-head,
  .steps-grid,
  .zones,
  .zones-head,
  .zones-stage,
  .precision,
  .precision-copy,
  .precision-points,
  .pricing,
  .price-intro,
  .compare,
  .compare-head,
  .growth,
  .growth-copy,
  .specialist,
  .specialist-copy,
  .aftercare,
  .aftercare-head,
  .faq,
  .faq-title,
  .contact,
  .contact-layout,
  .contact-grid {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* One safe scale for all translated display headings. */
  .manifesto-copy h2,
  .process-head h2,
  .zones-head h2,
  .precision-copy h2,
  .price-intro h2,
  .compare-main-title,
  .growth-copy h2,
  .specialist-copy h2,
  .aftercare-head h2,
  .faq-title h2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: var(--mobile-display-size) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  /* Large claim cards also need language-aware fitting. */
  .claim h3 {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: var(--mobile-claim-size) !important;
    line-height: .94 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Contact title was the remaining Ukrainian/Russian overflow source. */
  .contact h2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: var(--mobile-contact-size) !important;
    line-height: .9 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Ordinary translated copy and labels must never define an oversized column. */
  .hero-copy,
  .manifesto-copy p,
  .process-head p,
  .steps-grid article,
  .steps-grid h3,
  .steps-grid p,
  .zone-item,
  .zone-item strong,
  .zone-item small,
  .precision-copy p,
  .precision-points > div,
  .precision-points span,
  .price-intro p,
  .compare-lead,
  .compare-row > div,
  .growth-copy p,
  .specialist-copy p,
  .aftercare-head p,
  .aftercare-grid > div,
  .faq-list,
  .faq-list summary,
  .faq-list details p,
  .contact-lead,
  .contact-grid > *,
  .contact-grid small,
  .contact-grid strong {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Long CTA translations remain centred instead of forcing horizontal width. */
  .button,
  .button.large,
  .contact > .button {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  /* Follicle card: equal gutters and true image centre on every language page. */
  .manifesto .process-art {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 16px !important;
    justify-self: center !important;
  }
  .manifesto .process-image {
    left: 5% !important;
    right: 5% !important;
  }
  .manifesto .process-image img {
    object-position: 50% 50% !important;
  }
}