/* Motion is implemented by the site; Figma remains the source for static geometry. */
:root { --color-background-warm: #ffefa4; --color-background-dark: #303030; --radius-card: 32px; }
.responsive-asset { display: contents; }
.tablet-bottom-nav { display: none; }
.tablet-bottom-nav__icon {
  display: block;
  flex: none;
  transition: filter var(--motion-duration) var(--motion-easing);
}
.tablet-bottom-nav__link.is-active .tablet-bottom-nav__icon {
  filter: brightness(0) saturate(100%) invert(26%) sepia(79%) saturate(6847%) hue-rotate(267deg) brightness(101%) contrast(102%);
}
#top, #stickers, #cases, #prices, #about { scroll-margin-top: 82px; }
.contact-popup { max-width: calc(100% - 32px); height: fit-content; max-height: calc(100dvh - 32px); overflow-y: auto; }
.contact-popup__close { position: absolute; top: 4px; right: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; }
.contact-popup__close:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; border-radius: 50%; }
.contact-popup__buttons, .contact-popup .social-button { max-width: 100%; }
.social-button:focus-visible::before { opacity: 1; }
.social-button:focus-visible .social-button__icon-default { opacity: 0; }
.social-button:focus-visible .social-button__icon-hover { opacity: 1; }
.social-button--vk:focus-visible, .social-button--max:focus-visible { color: #07f; }
.social-button--telegram:focus-visible { color: #00b0f2; }

/* Compact desktop: fluid columns, no scaling of the page. */
@media (768px <= width < 1440px) {
  .header { padding-inline: 32px; }
  .header__left, .header__right { gap: 24px; }
  .menu { gap: 24px; }
  .header__phone { font-size: 20px; }
  .button--header { padding-inline: 24px; }
  .hero__left-cards { left: 32px; }
  .hero-card--sales { left: auto; right: 32px; }
  .hero-card__arrow { width: 130px; }
  .product-benefits { height: auto; padding: 60px 32px 80px; }
  .product-benefits__cards { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefit-card { padding-inline: 16px; }
  .benefit-card p { font-size: 18px; }
  .product-benefits__accent { position: relative; top: auto; left: auto; transform: rotate(-1deg); margin-top: -48px; }
  .gallery__image { width: min(864px, calc(100vw - 200px)); }
  .gallery__control--previous { left: max(20px, calc(50% - 514px)); }
  .gallery__control--next { right: max(20px, calc(50% - 514px)); }
  .business-value { min-height: 0; padding: 80px 32px; gap: 48px; }
  .business-value__heading { width: 40%; }
  .business-value__heading h2 { width: 100%; font-size: clamp(64px, 5.56vw, 80px); }
  .business-value__arrow { left: auto; right: -24px; top: 200px; width: 150px; }
  .business-value__arrow img { width: 150px; }
  .business-value__cards { width: 54%; }
  .value-card, .value-card__title, .value-card__description { width: 100%; }
  .value-card__description p { width: 100%; }
  .value-card__description p br { display: none; }
  .cases-intro__image--left { left: 24px; width: 180px; }
  .cases-intro__image--right { right: 24px; width: 180px; }
  .case-section { height: auto; padding: 60px 32px 80px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; gap: 80px 60px; }
  .case-number, .case-beauty .case-number, .case-epilation .case-number { position: static; justify-self: start; }
  .case-section__arrow, .case-section__arrow--beauty, .case-section__arrow--epilation { left: 150px; top: 125px; }
  .case-quote-card, .case-quote-card__body--beauty, .case-quote-card__body--epilation { position: relative; top: auto; left: auto; grid-column: 1; grid-row: 2; width: 100%; max-width: 368px; justify-self: center; align-self: start; }
  .case-quote-card__body { width: 100%; height: auto; min-height: 355px; padding: 80px 24px; }
  .case-quote-card__body p { width: 100%; }
  .case-quote-card__body br { display: none; }
  .case-quote-card__body cite { white-space: normal; }
  .case-details, .case-details--beauty, .case-details--epilation { position: static; grid-column: 2; grid-row: 1 / 3; width: 100%; }
  .case-details__heading, .case-details--beauty .case-details__heading, .case-details--epilation .case-details__heading { width: 100%; }
  .case-details__heading h2 { font-size: clamp(56px, 6.1vw, 88px); white-space: normal; }
  .case-details__heading > p, .case-results, .case-details--beauty .case-results, .case-details--epilation .case-results { width: 100%; }
  .case-details p br { display: none; }
  .case-result { gap: 24px; }
  .case-result__divider, .case-beauty .case-result__divider, .case-epilation .case-result__divider { width: 100%; }
  .pricing { height: auto; padding-inline: 32px; }
  .pricing__card { width: 100%; height: auto; gap: 60px; }
  .pricing__main { width: 100%; justify-content: space-between; gap: 40px; }
  .pricing__rows { width: 50%; }
  .pricing__benefits { width: 100%; height: auto; padding: 0; gap: 32px; }
  .pricing-benefit { flex: 1; padding-inline: 24px; }
  .pricing-benefit p { white-space: normal; }
  .free-sample { height: auto; padding: 80px 32px; gap: 48px; }
  .free-sample__description, .free-sample__heading { width: 46%; height: auto; }
  .free-sample__heading { width: 100%; }
  .free-sample__heading h2 { width: 100%; font-size: clamp(56px, 5.56vw, 80px); }
  .free-sample__heading > p, .free-sample__list li { white-space: normal; }
  .free-sample__list li { height: auto; min-height: 32px; }
  .free-sample__arrow { left: auto; right: -20px; width: 130px; }
  .social-card { width: 50%; height: auto; padding: 32px 24px; }
  .social-card__buttons, .social-button { width: 100%; }
  .social-button { padding-inline: 40px; font-size: 18px; }
  .social-button__icon { left: 20px; }
  .about { height: auto; padding-inline: 32px; }
  .about__company, .about__cards { width: 100%; height: auto; }
  .about__cards { gap: 28px; align-items: stretch; }
  .about-card-wrap, .about-card-wrap--right, .about-card--center { width: calc((100% - 56px) / 3); height: auto; }
  .about-card { width: 100%; min-width: 0; height: auto; padding-inline: 20px; }
  .about-card--center { width: calc((100% - 56px) / 3); }
  .about-card h3, .about-card p { white-space: normal; }
  .about-card p br { display: none; }
  .process-strategy { height: auto; padding: 60px 32px 80px; }
  .process-strategy > .process-number, .process-strategy__content { width: 100%; height: auto; }
  .process-strategy__content { gap: 48px; }
  .process-strategy__heading { width: 44%; }
  .process-strategy__heading h2, .process-design__heading h2, .process-production__heading h2 { font-size: clamp(48px, 5.56vw, 80px); white-space: normal; }
  .process-strategy__heading > p { width: 90%; }
  .process-strategy__arrow { left: auto; right: -16px; top: auto; bottom: -100px; }
  .process-strategy__right { width: 52%; height: auto; gap: 24px; }
  .process-strategy__description { width: 100%; height: auto; gap: 16px; }
  .process-strategy__info { width: 100%; height: auto; }
  .process-strategy__image { width: 120px; height: auto; }
  .process-strategy__tickets { width: 100%; }
  .process-strategy__tickets li, .process-strategy__info > p { white-space: normal; }
  .process-strategy__tickets li { gap: 12px; }
  .process-strategy__teasers, .process-strategy__teaser { width: 100%; height: auto; }
  .process-strategy__teaser { padding: 32px 24px; }
  .process-strategy__teaser p, .process-strategy__result { white-space: normal; }
  .process-strategy__teaser br { display: none; }
  .process-strategy__result { font-size: 26px; }
  .process-design { height: auto; padding: 60px 32px; gap: 32px; }
  .process-design__heading { width: 44%; height: auto; }
  .process-design__heading > p:last-of-type { width: 100%; }
  .process-design__arrow { left: auto; right: 0; top: auto; bottom: -120px; width: 150px; }
  .process-design__images { width: 53%; height: auto; aspect-ratio: 673 / 558; }
  .process-design__behind { top: .9%; left: 11.9%; width: 62.1%; height: 69.9%; }
  .process-design__front { top: 38.9%; left: 26.9%; width: 62.9%; height: 61.1%; }
  .process-design__money { top: 50.5%; left: 0; width: 23.8%; height: 32.8%; }
  .process-design__flower { top: 14.5%; left: 72.2%; width: 27.8%; height: 34.9%; }
  .process-design__heart { top: 0; left: 65.2%; width: 17.4%; height: 20.6%; }
  .process-production { height: auto; padding: 60px 32px 80px; gap: 48px; }
  .process-production__heading { width: 48%; height: auto; }
  .process-production__heading > p:last-of-type { width: 90%; }
  .process-production__arrow { left: auto; right: 0; top: auto; bottom: -90px; width: 130px; }
  .process-production__right { width: 48%; height: auto; }
  .process-production__illustration { width: 100%; height: auto; aspect-ratio: 511 / 468; }
  .process-production__circle { width: 71.6%; height: auto; }
  .process-production__image { top: 11.75%; left: 17.22%; width: 82.78%; height: auto; }
  .process-production__result { white-space: normal; font-size: 18px; }
  .process-production__result br { display: none; }
  .final-cta { height: auto; padding: 80px 32px 60px; gap: 32px; }
  .final-cta__heading { flex: 1; min-width: 0; height: auto; }
  .final-cta__heading h2 { width: 100%; font-size: 28px; }
  .button--final { max-width: 100%; font-size: 20px; padding-inline: 24px; }
  .final-cta__images--right { display: none; }
  .footer { height: auto; padding-inline: 32px; }
  .footer__description, .footer__copyright { width: 100%; height: auto; }
  .footer__description { gap: 24px; flex-wrap: wrap; }
  .footer__contacts a { font-size: 16px; }
  .footer__column { font-size: 14px; }
}

/* Tablet: keep useful two-column groups and stack dense sections. */
@media (768px <= width <= 1100px) {
  .header__phone { display: none; }
  .hero__heading h1 { font-size: 112px; }
  .hero__phone { width: 330px; height: auto; }
  .hero-card { font-size: 16px; }
  .hero__left-cards { width: 205px; }
  .hero-card--discount { width: 205px; }
  .hero-card__arrow { display: none; }
  .product-benefits__title { max-width: 100%; }
  .product-benefits__cards { max-width: 680px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-benefits__accent { margin-top: -16px; }
  .cases-intro__image { display: none; }
  .case-section { gap: 60px 32px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .case-details__heading h2 { font-size: 56px; }
  .case-details__heading h3 { font-size: 18px; }
  .case-result { gap: 16px; }
  .case-quote-card__body { padding-inline: 20px; }
  .case-quote-card__body p { font-size: 14px; }
  .pricing__sample { width: 310px; height: 340px; }
  .pricing__sample-image { width: 260px; height: auto; left: 32px; }
  .pricing__sample-note { width: 100%; height: auto; padding: 24px 16px; font-size: 16px; }
  .pricing__benefits { gap: 20px; }
  .pricing-benefit { padding-inline: 16px; }
  .free-sample { flex-direction: column; gap: 48px; }
  .free-sample__description { width: min(100%, 650px); }
  .free-sample__heading h2 { font-size: 72px; }
  .free-sample__arrow { right: 30px; }
  .social-card { width: min(100%, 594px); }
  .about__cards { flex-wrap: wrap; gap: 120px 40px; justify-content: center; }
  .about-card-wrap, .about-card-wrap--right, .about-card--center { width: 310px; }
  .process-strategy__content { flex-direction: column; gap: 60px; }
  .process-strategy__heading, .process-strategy__right { width: 100%; }
  .process-strategy__heading h2 { font-size: 64px; }
  .process-strategy__heading > p { max-width: 440px; }
  .process-strategy__arrow { bottom: 0; right: 80px; }
  .process-strategy__image { width: 185px; }
  .process-strategy__info { width: 65%; }
  .process-strategy__description { justify-content: space-between; }
  .process-design { padding-bottom: 100px; }
  .process-design__heading h2, .process-production__heading h2 { font-size: 48px; }
  .process-production { padding-bottom: 120px; }
  .final-cta__heading h2 { font-size: 24px; }
  .final-cta__images--left { width: 200px; }
  .final-cta__cat { width: 160px; height: auto; left: 40px; }
  .final-cta__smile { width: 130px; height: auto; }
  .button--final { font-size: 16px; }
  .footer__description { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Stacked layout foundation: phone plus the 640-like composition up to 1100 px. */
@media (max-width: 1100px) {
  #top, #stickers, #cases, #prices, #about { scroll-margin-top: 50px; }
  .header { height: 50px; padding: 12px 24px; gap: 16px; }
  .header__left, .header__right { gap: 0; }
  .logo { width: 78px; height: 26px; }
  .menu, .header__phone, .button__icons { display: none; }
  .button--header { position: relative; height: 26px; padding: 4px 24px; font-size: 12px; line-height: 1.5; letter-spacing: .12px; }
  .button--header::after { content: ''; position: absolute; inset: -9px 0; }
  .hero { height: auto; padding: 60px 10px; display: flex; flex-direction: column; align-items: center; }
  .hero__heading { position: relative; top: auto; left: auto; width: 100%; transform: none; }
  .hero__heading h1 { font-size: 64px; line-height: .8; }
  .hero__heading p { width: 221px; margin: 12px auto 0; font-size: 20px; line-height: 1.3; white-space: normal; }
  .hero__price { white-space: nowrap; }
  .hero__price img { width: 92px; height: 4px; top: 25px; left: -2px; }
  .hero__phone { position: relative; top: auto; left: auto; width: 295px; max-width: 100%; height: auto; aspect-ratio: 295 / 620; transform: none; margin-top: -31px; }
  .button--hero { position: relative; top: auto; left: auto; width: min(100%, 341px); height: auto; min-height: 51px; padding: 12px 16px; transform: none; margin-top: -100px; order: 1; font-size: 18px; line-height: 1.5; letter-spacing: .54px; white-space: normal; }
  .hero__left-cards { position: static; width: min(100%, 316px); align-items: flex-start; gap: 32px; margin-top: 48px; order: 2; }
  .hero-card { flex-direction: row; gap: 16px; width: 100%; text-align: left; font-size: 18px; font-weight: 700; white-space: normal; }
  .hero-card strong { font-weight: 700; }
  .hero-card__icon { flex: none; width: 60px; height: 60px; }
  .hero-card p { min-width: 0; }
  .hero-card--sales { position: static; width: min(100%, 316px); margin-top: 32px; order: 3; }
  .hero-card--sales p br:last-child { display: none; }
  .hero-card__arrow { display: none; }
  .section-caption { font-size: 18px; line-height: 1.5; text-align: center; }
  .product-benefits { height: auto; padding: 40px 24px 32px; gap: 40px; }
  .product-benefits__title { width: min(100%, 294px); font-size: 20px; line-height: 1.2; margin-top: -28px; }
  .product-benefits__title br { display: initial; }
  .product-benefits__cards { width: min(100%, 292px); grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .benefit-card { height: auto; min-height: 160px; padding: 16px 24px 32px; gap: 4px; }
  .benefit-card p { font-size: 20px; white-space: normal; }
  .product-benefits__accent { position: relative; left: auto; top: auto; width: min(100%, 310px); min-height: 0; padding: 16px 32px; margin: -8px 0 0; transform: rotate(-1deg); font-size: 16px; }
  .product-benefits__accent br { display: none; }
  .product-benefits__accent { text-wrap: balance; }
  .gallery { height: auto; padding: 32px 0 40px; gap: 24px; }
  .gallery__slider { height: 454px; }
  .gallery__viewport { inset: 54px 0 0; }
  .gallery__image { width: min(430px, calc(100vw - 112px)); height: 400px; border-radius: 40px; }
  .gallery__control { width: 44px; height: 44px; top: -7px; transform: none; }
  .gallery__control:hover { transform: none; }
  .gallery__control-icon { width: 30px; height: 30px; inset: 7px; }
  .gallery__control--previous { left: auto; right: 63px; }
  .gallery__control--next { right: 17px; }
  .business-value { min-height: 0; padding: 40px 24px; flex-direction: column; align-items: center; gap: 48px; }
  .business-value__heading { width: min(100%, 430px); }
  .business-value__heading h2 { width: 100%; font-size: 56px; }
  .business-value__arrow { width: 82px; height: 149px; top: 108px; left: auto; right: 18px; }
  .business-value__arrow img { width: 141px; height: 47px; transform: rotate(105deg); }
  .business-value__cards { width: min(100%, 430px); gap: 24px; }
  .value-card, .value-card__title, .value-card__description { width: 100%; }
  .value-card__title { height: 213px; padding: 32px 24px 0; }
  .value-card__title h3 { max-width: 266px; font-size: 18px; font-weight: 700; }
  .value-card__title br, .value-card__description br { display: none; }
  .value-card:nth-child(2) .value-card__title h3 { max-width: 211px; }
  .value-card:nth-child(3) .value-card__title br { display: initial; }
  .value-card__description { min-height: 0; padding: 60px 23px 24px; }
  .value-card__description p { width: 100%; font-size: 16px; line-height: 1.2; }
  .value-card:nth-child(2) .value-card__description p { max-width: 238px; }
  .value-card:nth-child(3) .value-card__description p { max-width: 259px; }
  .value-card__sticker--loyalty { top: 101px; width: 113px; height: 109px; }
  .value-card__sticker--apsel { top: 78px; width: 134px; height: 135px; }
  .value-card__sticker--uniqueness { top: 89px; width: 104px; height: 120px; }
  .cases-intro { height: auto; padding: 32px 20px 40px; gap: 24px; }
  .cases-intro__heading { width: 100%; height: auto; gap: 16px; }
  .cases-intro__heading h2 { width: 100%; font-size: 48px; }
  .cases-intro__feature { width: min(100%, 320px); height: auto; }
  .cases-intro__feature > div { width: 100%; padding: 16px 24px; }
  .cases-intro__feature p { font-size: 16px; white-space: normal; }
  .cases-intro__feature br { display: none; }
  .cases-intro__image--left { position: static; width: 173px; height: 209px; }
  .cases-intro__image--right { display: none; }
  .case-section { height: auto; padding: 40px 23px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
  .case-number, .case-beauty .case-number, .case-epilation .case-number { position: static; order: 0; }
  .case-section__arrow { display: none; }
  .case-details, .case-details--beauty, .case-details--epilation { position: static; width: min(100%, 430px); gap: 40px; order: 1; }
  .case-details__heading, .case-details--beauty .case-details__heading, .case-details--epilation .case-details__heading { width: 100%; gap: 12px; }
  .case-details__heading h2 { margin-bottom: 4px; font-size: 64px; white-space: normal; }
  .case-details__heading h3 { max-width: 279px; margin: 0; font-size: 18px; font-weight: 700; }
  .case-details__heading h3 span { font-weight: 700; }
  .case-details__heading > p { width: 100%; font-size: 12px; }
  .case-details p br, .case-details h3 br { display: none; }
  .case-results, .case-details--beauty .case-results, .case-details--epilation .case-results { width: 100%; }
  .case-results > h3 { font-size: 40px; }
  .case-results > h3 br { display: initial; }
  .case-result { align-items: flex-start; gap: 24px; min-height: 0; }
  .case-result__number { width: 36px; line-height: 1.2; }
  .case-result p { flex: 1; min-width: 0; font-size: 16px; }
  .case-result__divider, .case-beauty .case-result__divider, .case-epilation .case-result__divider { width: 100%; }
  .case-quote-card, .case-quote-card__body--beauty, .case-quote-card__body--epilation { position: relative; top: auto; left: auto; width: min(100%, 310px); order: 2; margin: 0; }
  .case-quote-card__body { width: 100%; height: auto; padding: 100px 32px; }
  .case-quote-card__body p { width: 100%; font-size: 12px; }
  .case-quote-card__body p br { display: none; }
  .case-quote-card__body cite { width: 100%; font-size: 16px; white-space: normal; }
  .case-quote-card__body--epilation { transform: rotate(-1deg); }
  .button--case { height: auto; min-height: 44px; padding: 12px 60px; font-size: 12px; }
  .pricing { height: auto; padding: 40px 24px 48px; gap: 60px; }
  .pricing__heading { width: 100%; height: auto; gap: 16px; }
  .pricing__title { width: 100%; height: auto; gap: 16px; }
  .pricing__title h2 { font-size: 64px; }
  .pricing__feature { width: min(100%, 310px); height: auto; padding: 16px 40px; }
  .pricing__feature p { font-size: 16px; white-space: normal; }
  .pricing__card { width: min(100%, 430px); height: auto; gap: 60px; }
  .pricing__main { width: 100%; height: auto; flex-direction: column; gap: 60px; }
  .pricing__rows { width: 100%; }
  .pricing__row { height: auto; min-height: 24px; gap: 12px; }
  .pricing__row strong { font-size: 18px; font-weight: 700; }
  .pricing__sample { width: min(100%, 310px); height: auto; padding-top: 215px; }
  .pricing__sample-image { left: 10.5%; width: 84%; height: auto; }
  .pricing__sample-note { position: relative; width: 100%; height: auto; padding: 32px 20px; font-size: 16px; white-space: normal; }
  .pricing__sample-note br { display: none; }
  .pricing__benefits { width: 100%; height: auto; padding: 0; flex-direction: column; gap: 40px; }
  .pricing-benefit { width: min(100%, 320px); height: auto; min-height: 94px; padding: 40px 24px 16px; }
  .pricing-benefit p { white-space: normal; }
  .free-sample { height: auto; padding: 24px 20px 60px; flex-direction: column; gap: 48px; }
  .free-sample__description { width: min(100%, 316px); height: auto; gap: 40px; }
  .free-sample__heading { width: 100%; height: auto; gap: 16px; }
  .free-sample__heading h2 { width: 100%; font-size: 64px; }
  .free-sample__heading > p { font-size: 16px; font-weight: 700; text-transform: uppercase; white-space: normal; }
  .free-sample__arrow { left: auto; right: -45px; top: 96px; width: 197px; height: 80px; transform: rotate(72deg); }
  .free-sample__list { gap: 16px; }
  .free-sample__list li { height: auto; min-height: 32px; font-size: 16px; white-space: normal; }
  .social-card { width: min(100%, 320px); height: auto; padding: 24px 20px; gap: 16px; }
  .social-card h3 { font-size: 20px; }
  .social-card__buttons { width: 100%; gap: 8px; }
  .social-button { width: 100%; height: auto; min-height: 44px; padding: 12px 10px; font-size: 16px; line-height: 1.2; }
  .social-button__icon { display: none; }
  .about { height: auto; padding: 40px 24px 48px; gap: 40px; }
  .about__company { width: 100%; height: auto; gap: 140px; }
  .about__heading { height: auto; gap: 16px; white-space: normal; }
  .about__heading h2 { font-size: 64px; }
  .about__cards { width: 100%; height: auto; flex-direction: column; gap: 120px; }
  .about-card-wrap, .about-card-wrap--right { width: min(100%, 320px); height: auto; }
  .about-card, .about-card--center { width: min(100%, 320px); min-width: 0; height: auto; padding: 100px 24px 32px; }
  .about-card-wrap--left .about-card, .about-card-wrap--right .about-card { transform: none; }
  .about-card h3 { font-size: 18px; font-weight: 700; white-space: normal; }
  .about-card p { font-size: 16px; white-space: normal; }
  .about-card p br { display: none; }
  .about-card-wrap--right p br { display: initial; }
  .about__closing { height: auto; font-size: 20px; white-space: normal; }
  .services-intro { height: auto; padding: 40px 20px 48px; gap: 24px; }
  .services-intro h2 { height: auto; font-size: 64px; white-space: normal; }
  .services-intro__feature { width: min(100%, 320px); height: auto; padding: 16px; }
  .services-intro__feature p { font-size: 20px; white-space: normal; }
  .services-intro__feature br { display: none; }
  .process-number { height: auto; font-size: 48px; font-style: normal; line-height: 1.1; }
  .process-strategy { height: auto; padding: 32px 24px 40px; gap: 8px; }
  .process-strategy > .process-number { width: min(100%, 430px); }
  .process-strategy__content { position: relative; width: min(100%, 430px); height: auto; flex-direction: column; gap: 100px; }
  .process-strategy__heading { width: 100%; gap: 16px; }
  .process-strategy__heading h2 { font-size: 40px; white-space: normal; }
  .process-strategy__heading > p { width: 100%; font-size: 16px; }
  .process-strategy__arrow { top: auto; bottom: -82px; left: 36px; width: 141px; height: 47px; transform: rotate(151.94deg) scaleY(-1); }
  .process-strategy__right { position: static; width: 100%; height: auto; gap: 24px; }
  .process-strategy__description { width: 100%; height: auto; }
  .process-strategy__info { width: 100%; height: auto; gap: 32px; }
  .process-strategy__tickets { width: 100%; }
  .process-strategy__tickets h3, .process-strategy__info > p { font-size: 18px; font-weight: 700; white-space: normal; }
  .process-strategy__info > p br { display: none; }
  .process-strategy__tickets li { gap: 16px; white-space: normal; }
  .process-strategy__tickets li span { min-width: 0; }
  .process-strategy__image { position: absolute; top: 235px; right: 14px; width: 104px; height: 78px; }
  .process-strategy__teasers { width: 100%; }
  .process-strategy__teaser { width: 100%; height: auto; padding: 32px 24px; transform: none; }
  .process-strategy__teaser p { max-width: 250px; font-size: 20px; white-space: normal; }
  .process-strategy__teaser br { display: none; }
  .process-strategy__result { font-size: 20px; white-space: normal; }
  .process-design { height: auto; padding: 32px 24px 8px; flex-direction: column; align-items: center; gap: 60px; }
  .process-design__heading { width: min(100%, 430px); height: auto; gap: 8px; }
  .process-design__heading h2 { font-size: 40px; white-space: normal; }
  .process-design__heading > p:last-of-type { width: 100%; margin-top: 16px; font-size: 16px; }
  .process-design__arrow { top: auto; bottom: -42px; left: auto; right: -28px; width: 130px; height: 52px; transform: rotate(83deg); }
  .process-design__images { width: min(100%, 313px); height: auto; aspect-ratio: 313 / 516; }
  .process-design__behind { top: 3.4%; left: 12.46%; width: 87.54%; height: auto; }
  .process-design__front { top: 37.1%; left: 5.11%; width: 87.54%; height: auto; }
  .process-design__money { top: 2.7%; left: 5.6%; width: 27.48%; height: auto; transform: rotate(27.41deg); }
  .process-design__flower { top: 71.9%; left: 32.6%; width: 37.38%; height: auto; transform: rotate(-132.84deg); }
  .process-design__heart { top: 2.04%; left: 65.8%; width: 19.17%; height: auto; }
  .process-production { height: auto; padding: 32px 24px 48px; flex-direction: column; align-items: center; gap: 100px; }
  .process-production__heading { width: min(100%, 430px); height: auto; gap: 8px; }
  .process-production__heading h2 { font-size: 40px; white-space: normal; }
  .process-production__heading > p:last-of-type { width: 100%; margin-top: 16px; font-size: 16px; }
  .process-production__arrow { top: auto; left: auto; bottom: -65px; right: 0; width: 141px; height: 47px; transform: rotate(148.05deg) scaleY(-1); }
  .process-production__right { width: min(100%, 300px); height: auto; gap: 24px; }
  .process-production__illustration { width: 100%; height: auto; aspect-ratio: 300 / 307.26; }
  .process-production__circle { width: 70%; height: auto; }
  .process-production__image { top: 20.26%; left: 8.33%; width: 83.33%; height: auto; }
  .process-production__result { font-size: 18px; white-space: normal; }
  .process-production__result br { display: none; }
  .final-cta { height: auto; padding: 24px 23px 60px; flex-direction: column; gap: 8px; }
  .final-cta__images--left { width: 229px; height: 238px; }
  .final-cta__cat { left: 60px; width: 169px; height: 190px; }
  .final-cta__smile { top: 62px; left: 33px; width: 138px; height: 150px; transform: rotate(-50.25deg); }
  .final-cta__images--right { display: none; }
  .final-cta__heading { width: min(100%, 314px); height: auto; gap: 32px; }
  .final-cta__heading h2 { width: 100%; font-size: 20px; }
  .button--final { width: 100%; height: auto; padding: 16px 24px; font-size: 18px; letter-spacing: .54px; white-space: normal; }
  .footer { height: auto; padding: 32px 24px; align-items: flex-start; gap: 24px; }
  .footer__description { width: 100%; height: auto; flex-direction: column; gap: 16px; }
  .footer__contacts { height: auto; gap: 8px; }
  .footer__contacts a { height: auto; min-height: 22px; font-size: 16px; }
  .footer__contacts img { width: 22px; height: 22px; }
  .footer__column { width: 100%; font-size: 12px; }
  .footer__copyright { width: min(100%, 248px); font-size: 12px; white-space: normal; }
  .contact-popup { width: 260px; padding: 32px 16px; border-radius: 32px; }
  .contact-popup[open] { gap: 16px; }
  .contact-popup__title { width: 162px; font-size: 18px; font-weight: 700; white-space: normal; }
  .contact-popup__buttons { width: 228px; gap: 8px; }
}

@media (max-width: 359px) {
  .header { padding-inline: 16px; gap: 8px; }
  .button--header { padding-inline: 16px; }
  .hero__heading h1 { font-size: clamp(54px, 17.78vw, 64px); }
  .hero-card { font-size: 16px; gap: 12px; }
  .hero-card__icon { width: 52px; height: 52px; }
  .button--hero { font-size: 16px; }
  .case-result { gap: 16px; }
  .case-details__heading h2 { font-size: 56px; }
  .pricing__row { font-size: 18px; }
  .free-sample__heading h2, .about__heading h2 { font-size: 56px; }
  .free-sample__arrow { width: 145px; right: -28px; }
  .process-strategy__image { top: 260px; }
  .business-value__arrow { right: 0; }
}

/* Large mobile / tablet, anchored to Figma 145:312 (640 px). */
@media (min-width: 500px) and (max-width: 1100px) {
  body { padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px)); }
  #top, #stickers, #cases, #prices, #about { scroll-margin-top: 74px; }
  .header { height: 74px; padding: 12px 24px; }
  .logo { width: 150px; height: 50px; }
  .button--header { width: 277px; height: 42px; padding: 9px 32px; font-size: 16px; }
  .button--header .button__icons { display: block; width: 24px; height: 24px; }

  .hero { padding: 60px 26px; }
  .hero__heading { width: 100%; }
  .hero__heading h1 { font-size: 96px; }
  .hero__heading p { width: auto; margin-top: 12px; font-size: 20px; white-space: nowrap; }
  .hero__phone { width: 355px; aspect-ratio: 355 / 748; margin-top: -48px; }
  .button--hero { width: 529px; min-height: 68px; margin-top: -173px; font-size: 24px; }
  .button--hero .button__icons { display: block; }
  .hero__left-cards { width: 395px; margin-top: 80px; gap: 24px; }
  .hero-card, .hero-card--discount, .hero-card--sales { width: 395px; font-size: 18px; }
  .hero-card--sales { margin-top: 24px; }

  .product-benefits { min-height: 622px; padding: 40px 20px 32px; gap: 40px; }
  .product-benefits__title { width: min(100%, 588px); margin-top: -28px; font-size: 20px; }
  .product-benefits__title br { display: none; }
  .product-benefits__cards { width: min(100%, 600px); grid-template-columns: repeat(2, minmax(0, 292px)); justify-content: center; gap: 16px; }
  .benefit-card { min-height: 160px; }
  .product-benefits__accent { width: min(100%, 573px); margin-top: -45px; padding-inline: clamp(32px, 12.5vw, 80px); }

  .gallery { min-height: 743px; padding: 32px 0 40px; gap: 12px; }
  .gallery__slider { height: 632px; }
  .gallery__viewport { inset: 42px 0 0; }
  .gallery__image { width: calc(100vw - 96px); max-width: 592px; height: 590px; }
  .gallery__control { top: -7px; }
  .gallery__control--previous { right: 63px; }
  .gallery__control--next { right: 17px; }

  .business-value { min-height: 1300px; padding: 40px 24px 60px; gap: 48px; }
  .business-value__heading { width: min(100%, 592px); }
  .business-value__heading h2 { width: min(100%, 547px); margin-inline: auto; font-size: 56px; text-align: center; }
  .business-value__heading h2 br { display: none; }
  .business-value__cards { width: min(100%, 592px); }
  .value-card, .value-card__title, .value-card__description { width: 100%; }
  .value-card__title h3 { font-size: 20px; }
  .value-card__description { min-height: 180px; padding: 60px 32px 32px; }
  .value-card__description p { font-size: 16px; }

  .cases-intro { min-height: 574px; padding: 32px 24px; }
  .cases-intro__heading { width: min(100%, 488px); }
  .cases-intro__heading h2 { width: 100%; font-size: 80px; }
  .cases-intro__feature { width: min(100%, 501px); }
  .cases-intro__image--left { width: 180px; height: 193px; }

  .case-section { padding: 40px 24px; }
  .case-details, .case-details--beauty, .case-details--epilation { width: min(100%, 592px); }
  .case-details__heading h2 { font-size: 96px; }
  .case-details__heading h3 { max-width: 496px; font-size: 20px; }
  .case-details__heading > p { width: min(100%, 496px); font-size: 16px; }
  .case-results, .case-details--beauty .case-results, .case-details--epilation .case-results { width: 100%; }
  .case-results > h3 { font-size: 48px; }
  .case-quote-card, .case-quote-card__body--beauty, .case-quote-card__body--epilation { width: 368px; }
  .case-quote-card__body p { font-size: 16px; }

  .pricing { padding-inline: 24px; }
  .pricing__card { width: min(100%, 592px); }
  .pricing__feature { width: min(100%, 535px); }
  .pricing__benefits { display: flex; flex-direction: column; gap: 40px; }
  .pricing-benefit { width: min(100%, 430px); }
  .social-card { width: min(100%, 594px); padding: 40px 32px; gap: 32px; }
  .social-card__buttons { gap: 12px; }
  .social-button { min-height: 48px; padding-inline: 80px; font-size: 20px; }
  .social-button__icon { display: block; }

  .about { padding-inline: 24px; }
  .about__heading h2, .services-intro h2 { font-size: 80px; }
  .about__cards { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 120px; }
  .about-card-wrap, .about-card-wrap--right, .about-card--center { width: 430px; }
  .about-card, .about-card--center { width: 430px; }

  .process-strategy__content { width: min(100%, 592px); }
  .process-strategy__heading h2, .process-design__heading h2, .process-production__heading h2 { font-size: 64px; }
  .process-design__heading, .process-production__heading { width: min(100%, 592px); }
  .process-design__images { width: 430px; }
  .process-production__right { width: 430px; }

  .final-cta__heading { width: 430px; }
  .final-cta__heading h2 { font-size: 24px; }
  .footer { padding-inline: 24px; }
  .footer__description { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }

  .tablet-bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(22px, 9.375vw, 60px);
    min-height: calc(69px + env(safe-area-inset-bottom, 0px));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-background-warm);
  }
  .tablet-bottom-nav__link {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    opacity: .7;
    transition: color var(--motion-duration) var(--motion-easing), opacity var(--motion-duration) var(--motion-easing);
  }
  .tablet-bottom-nav__link:hover,
  .tablet-bottom-nav__link:focus-visible { opacity: 1; }
  .tablet-bottom-nav__link.is-active { color: var(--color-accent-primary); opacity: 1; }
  .tablet-bottom-nav__link:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; border-radius: 4px; }
  .tablet-bottom-nav__icon {
    width: 23px;
    height: 23px;
  }
  .tablet-bottom-nav__icon--prices,
  .tablet-bottom-nav__icon--about { width: 27px; }
}

/* Compact bottom navigation from Figma 140:719. */
@media (max-width: 499px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .tablet-bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(18px, 8.89vw, 32px);
    min-height: calc(54px + env(safe-area-inset-bottom, 0px));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--color-background-warm);
  }
  .tablet-bottom-nav__link {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-text-primary);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    opacity: .7;
    transition: color var(--motion-duration) var(--motion-easing), opacity var(--motion-duration) var(--motion-easing);
  }
  .tablet-bottom-nav__link:hover,
  .tablet-bottom-nav__link:focus-visible { opacity: 1; }
  .tablet-bottom-nav__link.is-active { color: var(--color-accent-primary); opacity: 1; }
  .tablet-bottom-nav__link:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; border-radius: 4px; }
  .tablet-bottom-nav__icon { width: 15px; height: 15px; }
  .tablet-bottom-nav__icon--prices,
  .tablet-bottom-nav__icon--about { width: 17px; }

  .final-cta .button--final {
    width: min(330px, calc(100vw - 20px));
    min-height: 59px;
    padding: 16px 24px;
    font-size: clamp(16px, 5vw, 18px);
    line-height: 1.5;
    white-space: nowrap;
  }
}

/* Exact 640 px composition, kept centered through the shared 640–1100 mode. */
@media (min-width: 640px) and (max-width: 1100px) {
  .hero { height: 1214.662px; }

  .business-value { height: 1300px; min-height: 1300px; }
  .business-value__heading { height: 135px; }
  .business-value__arrow {
    top: 36.4166px;
    right: auto;
    left: 563.733px;
    width: 71.573px;
    height: 147.151px;
  }
  .business-value__arrow img { width: 100%; height: 100%; transform: none; }
  .business-value__cards { height: 1017px; }
  .value-card { height: 323px; flex: none; }
  .value-card__title { height: 213px; }
  .value-card__title h3 { max-width: 359px; }
  .value-card:nth-child(1) .value-card__title h3 { max-width: 311px; }
  .value-card:nth-child(3) .value-card__title h3 { max-width: 353px; }
  .value-card__description { height: 180px; min-height: 180px; }
  .value-card__description p,
  .value-card:nth-child(2) .value-card__description p,
  .value-card:nth-child(3) .value-card__description p { width: 100%; max-width: none; }

  .case-papershoot { height: 1149.022px; }
  .case-beauty { height: 1289.3px; }
  .case-epilation { height: 1251.306px; }
  .case-papershoot .case-details { height: 541.118px; }
  .case-beauty .case-details,
  .case-epilation .case-details { height: 684.042px; }
  .case-quote-card { height: 395.904px; }
  .case-quote-card__body--beauty { height: 393.259px; }
  .case-quote-card__body--epilation { height: 355.265px; }
  .case-beauty .case-details,
  .case-epilation .case-details,
  .case-beauty .case-quote-card__body,
  .case-epilation .case-quote-card__body { flex: none; }
  .case-beauty .case-quote-card__body,
  .case-epilation .case-quote-card__body { margin-top: 3.195px; }

  .pricing { height: 1360.103px; padding: 40px 24px 48px; gap: 60px; }
  .pricing__heading { width: 535.175px; height: 241.563px; }
  .pricing__title { width: 311px; height: 145px; }
  .pricing__title h2 { font-size: 64px; }
  .pricing__feature { width: 492.477px; min-height: 80.563px; }
  .pricing__card { width: 490px; height: 970.54px; gap: 80px; }
  .pricing__main { width: 490px; height: 528.54px; gap: 8px; }
  .pricing__rows { width: 490px; }
  .pricing__sample { width: 324px; height: 347.427px; padding-top: 0; }
  .pricing__sample-image { left: 45px; width: 259.902px; height: 253.69px; }
  .pricing__sample-note { position: absolute; bottom: 0; width: 324px; height: 125px; }
  .pricing__benefits { width: 490px; height: 362px; }
  .pricing-benefit { height: 94px; min-height: 94px; }

  .free-sample { height: 898px; padding: 24px 0 60px; gap: 48px; }
  .free-sample__description { width: 640px; height: 440px; padding-inline: 24px; }
  .free-sample__heading { width: 592px; height: 256px; }
  .free-sample__heading h2 { width: 592px; font-size: 80px; }
  .free-sample__heading > p { width: 356px; font-size: 20px; }
  .free-sample__list { width: 419px; gap: 24px; }
  .social-card { width: 569px; height: 326px; }
  .social-card__buttons { width: 505px; gap: 16px; }
  .social-button { width: 505px; }

  .about { height: 1390px; padding: 40px 70px 48px; }
  .about__company { width: 500px; height: 1186px; gap: 140px; }
  .about__heading { width: 356px; height: 107px; }
  .about__heading h2 { font-size: 80px; }
  .about__cards { width: 500px; height: 939px; }
  .about-card-wrap, .about-card-wrap--right, .about-card--center,
  .about-card, .about-card--center { width: 500px; }
  .about-card-wrap:nth-child(1), .about-card-wrap:nth-child(1) .about-card,
  .about-card-wrap:nth-child(3), .about-card-wrap:nth-child(3) .about-card { height: 225px; }
  .about-card-wrap:nth-child(2), .about-card-wrap:nth-child(2) .about-card { height: 249px; }
  .about__closing { width: 462px; height: 76px; }

  .services-intro { height: 303.587px; padding: 40px 0; gap: 24px; }
  .services-intro h2 { width: 288px; height: 102px; font-size: 64px; }
  .services-intro__feature {
    width: 549.7px;
    height: 80px;
    min-height: 80px;
    margin-top: 14.4px;
    padding: 16px 32px;
  }

  .process-strategy { height: 962px; padding: 32px 24px 40px; gap: 8px; }
  .process-number { font-size: 80px; line-height: 1.2; }
  .process-strategy > .process-number { width: 592px; height: 96px; }
  .process-strategy__content { width: 592px; height: 786px; gap: 40px; }
  .process-strategy__heading { width: 592px; height: 308px; }
  .process-strategy__heading h2 { width: 445px; font-size: 64px; }
  .process-strategy__heading > p { width: 400px; font-size: 18px; }
  .process-strategy__arrow {
    top: 193.89px;
    right: auto;
    bottom: auto;
    left: 387.3px;
    width: 141px;
    height: 47px;
    transform: rotate(57.41deg);
  }
  .process-strategy__right { width: 592px; height: 438px; justify-content: flex-start; gap: 32px; }
  .process-strategy__description { width: 592px; height: 222px; }
  .process-strategy__info { width: 592px; height: 222px; }
  .process-strategy__tickets { width: 592px; }
  .process-strategy__tickets br { display: none; }
  .process-strategy__teasers { width: 592px; height: 184px; }
  .process-strategy__teaser { width: 592px; height: 136px; }
  .process-strategy__result br { display: none; }
  .process-strategy__image { top: 370.33px; right: 20px; width: 149px; height: 111px; }

  .process-design { height: 982px; padding: 32px 24px 40px; gap: 60px; }
  .process-design__heading { width: 592px; height: 356px; }
  .process-design__heading h2 { width: 579px; font-size: 80px; }
  .process-design__heading > p:last-of-type { width: 400px; font-size: 18px; }
  .process-design__images { width: 592px; height: 494px; aspect-ratio: auto; }
  .process-design__behind { top: 5px; left: 69.781px; width: 368.832px; height: 344.2px; }
  .process-design__front { top: 192.864px; left: 158.618px; width: 373.02px; height: 301.136px; }
  .process-design__money { top: 249.915px; left: 0; width: 141.207px; height: 161.479px; }
  .process-design__flower { top: 71.986px; left: 426.841px; width: 165.159px; height: 171.938px; }
  .process-design__heart { top: 0; left: 385.998px; width: 103.338px; height: 101.397px; }

  .process-production { height: 1284.335px; padding: 32px 24px 48px; gap: 40px; }
  .process-production__heading { width: 592px; height: 528px; }
  .process-production__heading h2 { width: 592px; font-size: 80px; }
  .process-production__heading > p:last-of-type { width: 408px; font-size: 18px; }
  .process-production__arrow {
    top: 370.37px;
    right: auto;
    bottom: auto;
    left: 359.69px;
    width: 162px;
    height: 54.274px;
    transform: rotate(58.26deg);
  }
  .process-production__right { width: 592px; height: 636.335px; gap: 32px; }
  .process-production__illustration { width: 592px; height: 532.335px; aspect-ratio: auto; }
  .process-production__circle { width: 366px; height: 366px; }
  .process-production__image { top: 119.335px; left: 169px; width: 423px; height: 413px; }
  .process-production__result { width: 495px; font-size: 20px; }

  .final-cta { height: 660.819px; padding: 24px 0 60px; gap: 8px; }
  .final-cta__heading { width: 640px; height: 331.26px; }
  .final-cta__heading h2 { width: 640px; height: 114px; font-size: 32px; }
  .button--final { width: 529px; min-height: 68px; font-size: 24px; }

  .footer { height: 227px; padding: 32px 24px; gap: 24px; }
  .footer__description { width: 592px; height: 125px; grid-template-columns: 280px 1fr; grid-template-rows: 52px 57px; column-gap: 24px; row-gap: 16px; }
  .footer__contacts { height: 52px; }
  .footer__copyright { width: 340px; font-size: 12px; }
}