@font-face {
  font-family: "Inter";
  src: url("./assets/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blue: #233a5c;
  --strip: #869bbb;
  --mist: #eff1f6;
  --scale: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f5f5f5; color: #000; font-family: "Inter", Arial, sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.site-shell { position: relative; width: min(1200px, 100vw); height: calc(4369px * var(--scale)); margin: 0 auto; overflow: hidden; background: white; }
.canvas { position: absolute; left: 0; top: 0; width: 1200px; height: 4369px; overflow: hidden; transform: scale(var(--scale)); transform-origin: left top; background: #fff; }
.crop { position: absolute; overflow: hidden; }
.crop > img { position: absolute; display: block; max-width: none; }
.pill { position: absolute; display: flex; align-items: center; justify-content: space-between; height: 49px; padding: 0 18px 0 24px; border-radius: 56px; background: var(--blue); color: white; font-size: 20px; line-height: 1; letter-spacing: -.8px; }
.pill-icon { width: 28.021px; height: 28.021px; display: grid; place-items: center; flex: 0 0 28.021px; transform: rotate(45deg) scaleY(-1); }
.pill-icon img { display: block; width: 19.814px; height: 19.814px; }
.pill:hover .pill-icon, .pill:focus-visible .pill-icon { animation: pill-arrow-hop .58s cubic-bezier(.2,.85,.35,1); }
@keyframes pill-arrow-hop {
  0%, 100% { transform: translate(0, 0) rotate(45deg) scaleY(-1); }
  45% { transform: translate(5px, -5px) rotate(45deg) scaleY(-1); }
}

/* Hero */
.hero { position: absolute; inset: 0 0 auto; height: 712px; }
.hero-photo { left: .5px; top: 0; width: 1200px; height: 712px; }
.hero-photo > img { left: -225.96px; top: -144.18px; width: 1727.04px; height: 947.39px; }
.header { position: absolute; left: 1px; top: 0; width: 1200px; height: 69px; background: white; z-index: 3; }
.header-logo { position: absolute; left: 21.5px; top: 20px; width: 67px; height: 30px; }
.header-logo img { width: 66px; height: 27.147px; display: block; }
.header-tagline { position: absolute; left: 99.5px; top: 18.5px; width: 85px; margin: 0; color: var(--blue); font-size: 9.131px; line-height: 1.06; letter-spacing: -.365px; }
.nav { position: absolute; inset: 0; font-size: 12px; line-height: 15px; letter-spacing: -.48px; }
.nav a { position: absolute; top: 22px; height: 25px; display: flex; align-items: center; white-space: nowrap; }
.nav a:nth-child(1) { left: 230.5px; }
.nav a:nth-child(2) { left: 308.5px; }
.nav a:nth-child(3) { left: 443.5px; }
.nav a:nth-child(4) { left: 600.5px; }
.nav a:nth-child(5) { left: 680.5px; width: 125px; justify-content: center; color: white; background: var(--blue); border-radius: 13px; }
.nav a:nth-child(6) { left: 821.5px; }
.nav a:nth-child(7) { left: 921.5px; }
.nav a:hover { opacity: .72; }
.socials { position: absolute; left: 1043.5px; top: 18px; display: flex; gap: 14.5px; height: 35px; }
.socials a, .socials img { display: block; width: 35px; height: 35px; }
.socials a:nth-child(2), .socials a:nth-child(2) img { width: 34px; }
.hero-brand { position: absolute; left: 23.5px; top: 119px; width: 273px; height: 152.8px; }
.hero-card { left: 35.5px; top: 344px; width: 149px; height: 160px; border: 1px solid var(--blue); }
.hero-card img { left: -1.55px; top: -35.62px; width: 154px; height: 207.28px; }
.hero-corner { position: absolute; width: 80px; height: 80px; }
.hero-corner-a { left: 22.5px; top: 332px; transform: scaleY(-1); }
.hero-corner-b { left: 117.5px; top: 437px; transform: rotate(180deg) scaleY(-1); }
.hero-title { position: absolute; left: 218.5px; top: 338px; width: 420px; margin: 0; color: var(--blue); font-size: 20px; font-weight: 400; line-height: 1.259; letter-spacing: -.8px; text-transform: uppercase; }
.hero-title em { font-weight: 600; }
.hero-copy { position: absolute; left: 218.5px; top: 454px; width: 370px; margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: -.56px; }
.hero-action { left: 23.5px; top: 577px; width: 273px; }
.hero-guarantee { position: absolute; left: 316.5px; top: 579px; width: 242px; margin: 0; color: var(--blue); font-size: 20px; line-height: 1.2; letter-spacing: -.8px; }
.hero-guarantee strong { font-weight: 600; }
.condition-strip { position: absolute; left: .5px; top: 686px; width: 1200px; height: 26px; overflow: hidden; background: var(--strip); color: white; font-size: 14px; line-height: 1.2; letter-spacing: -.56px; }
.ticker-track { display: flex; width: max-content; height: 26px; will-change: transform; animation: condition-ticker 20s linear infinite; }
.ticker-group { flex: 0 0 1200px; width: 1200px; height: 26px; display: grid; grid-template-columns: 194px 207px 239px 305px 255px; align-items: center; }
.ticker-group span { text-align: center; white-space: nowrap; }
.condition-strip:hover .ticker-track { animation-play-state: paused; }
@keyframes condition-ticker { to { transform: translateX(-1200px); } }

/* Hits */
.hits { position: absolute; left: 0; top: 712px; width: 1200px; height: 720px; }
.hits h2 { position: absolute; left: 23.5px; top: 104px; margin: 0; color: var(--blue); font-size: 60px; line-height: 1.259; font-weight: 400; letter-spacing: -2.4px; text-transform: uppercase; }
.hits-lead { position: absolute; left: 219.5px; top: 125px; margin: 0; font-size: 20px; line-height: 1.06; letter-spacing: -.8px; }
.hits-all { left: 906.5px; top: 115px; width: 273px; }
.product { position: absolute; top: 224px; width: 372px; height: 467px; }
.product-1 { left: 23.5px; }
.product-2 { left: 415.5px; }
.product-3 { left: 807.5px; }
.product-photo { left: 0; top: 0; width: 372px; height: 372px; }
.product-1 .product-photo > img { left: 0; top: -69.12px; width: 371.14px; height: 495.8px; }
.product-2 .product-photo > img { left: -81.06px; top: -80.54px; width: 534.49px; height: 505.51px; }
.product-3 .product-photo > img { left: -66.77px; top: -86.82px; width: 504.66px; height: 511.39px; }
.product-corner { position: absolute; left: 0; top: 0; width: 125.419px; height: 125.417px; z-index: 2; transform: scaleY(-1); }
.favorite { position: absolute; right: 0; top: 0; width: 43px; height: 43px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 3; }
.favorite img { display: block; width: 43px; height: 43px; }
.product h3 { position: absolute; left: 0; top: 395px; margin: 0; font-size: 14px; line-height: 1.06; font-weight: 400; letter-spacing: -.56px; }
.product::after { content: ""; position: absolute; left: 0; top: 417px; z-index: 0; width: 372px; height: 50px; border: .75px dashed var(--blue); opacity: 0; transition: opacity .24s ease; pointer-events: none; }
.product-meta { position: absolute; left: 0; top: 417px; z-index: 1; width: 372px; height: 50px; background: var(--mist); transition: transform .38s cubic-bezier(.22,.8,.25,1), background-color .3s ease, color .3s ease; }
.product-meta::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 14px; border-bottom: 1px solid #000; }
.product-meta strong, .product-meta span { position: absolute; top: 16.25px; color: #7e7e7e; font-size: 14px; line-height: 1; letter-spacing: -.56px; text-transform: uppercase; }
.product-meta strong { left: 15px; font-weight: 600; }
.product-meta span { left: 60px; font-weight: 600; }
.product-meta img { position: absolute; right: 15px; top: 13px; width: 14.638px; height: 14.638px; }
.product-2 .product-meta { background: var(--strip); }
.product-2 .product-meta strong, .product-2 .product-meta span { color: white; }
.product-2 .product-meta::after { border-color: white; }
.product-2 .product-meta img { filter: brightness(0) invert(1); }
.product:hover::after, .product:focus-within::after { opacity: 1; }
.product:hover .product-meta, .product:focus-within .product-meta { background: var(--blue); transform: translate(7px, -7px); }
.product:hover .product-meta strong, .product:hover .product-meta span,
.product:focus-within .product-meta strong, .product:focus-within .product-meta span { color: white; }
.product:hover .product-meta::after, .product:focus-within .product-meta::after { border-color: white; }
.product:hover .product-meta img, .product:focus-within .product-meta img { filter: brightness(0) invert(1); }

/* Solutions */
.solutions { position: absolute; left: 0; top: 1432px; width: 1200px; height: 1150px; }
.solutions h2 { position: absolute; left: 23.5px; top: 79px; width: 750px; margin: 0; font-size: 60px; font-weight: 400; line-height: 1.14; letter-spacing: -2.4px; text-transform: uppercase; }
.solutions h2 em { color: var(--blue); font-weight: 600; }
.solutions-lead { position: absolute; left: 23.5px; top: 222px; width: 457px; margin: 0; font-size: 20px; line-height: 1.17; letter-spacing: -.8px; }
.solutions-top { left: 905.5px; top: 154px; width: 273px; }
.solution-card { position: absolute; top: 379px; width: 274px; height: 636px; }
.solution-1 { left: 23.5px; }
.solution-2 { left: 316.5px; }
.solution-3 { left: 610.5px; }
.solution-4 { left: 905.5px; width: 273px; }
.solution-photo { left: 0; top: 0; width: 100%; height: 343px; }
.solution-1 .solution-photo > img { left: -19.47px; top: -25.93px; width: 308.94px; height: 413.52px; }
.solution-2 .solution-photo > img { left: -12.36px; top: -.48px; width: 296px; height: 396.47px; }
.solution-3 .solution-photo > img { left: -51.35px; top: 0; width: 373.26px; height: 499.99px; }
.solution-4 .solution-photo > img { left: -92.16px; top: -57.62px; width: 387.84px; height: 519.47px; }
.solution-patch, .solution-line { position: absolute; z-index: 2; object-fit: fill; }
.solution-patch { width: 76px; height: 93px; }
.accent-1 { left: 198px; top: -55px; width: 77px; background: url("./assets/solution-person.png") -95px -349px / 482.7px 724.05px no-repeat; clip-path: polygon(50% 0, 75% 12.5%, 100% 25%, 100% 75%, 75% 87.5%, 50% 100%, 25% 87.5%, 0 75%, 0 25%, 25% 12.5%); }
.accent-2 { left: 198px; top: -55px; }
.accent-3 { left: 198px; top: -55px; }
.accent-4 { left: 197px; top: -55px; }
.line-1 { left: 135.9px; top: 28.27px; width: 113.201px; height: 49.958px; }
.line-2 { left: 220.75px; top: 38.85px; width: 15.355px; height: 148.391px; transform: rotate(17.3deg); transform-origin: 0 0; }
.line-3 { left: 236px; top: 46px; width: .5px; height: 101.613px; transform: rotate(8.49deg); transform-origin: 50% 0; }
.line-4 { left: 134.5px; top: 32.5px; width: 79.5px; height: 158.5px; }
.focus-box { position: absolute; z-index: 3; width: 38px; height: 38px; border: .5px solid white; pointer-events: none; }
.focus-1 { left: 117px; top: 59px; }
.focus-2 { left: 172px; top: 166px; }
.focus-3 { left: 202px; top: 126px; }
.focus-4 { left: 116px; top: 168px; }
.solution-card h3 { position: absolute; top: 362px; width: 100%; margin: 0; text-align: center; font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: -.8px; text-transform: uppercase; }
.solution-options { position: absolute; left: -1px; top: 429px; width: 274px; display: grid; gap: 5px; }
.solution-options button { position: relative; width: 274px; height: 48px; padding: 0 42px 0 20px; border: 0; background: var(--mist); text-align: left; font-size: 14px; line-height: 1.2; letter-spacing: -.7px; cursor: pointer; }
.solution-options button > img { position: absolute; right: 17px; top: 12px; width: 19px; height: 24px; }
.solution-options button.selected { color: white; background: var(--strip); }
.solutions-main { left: 316.5px; top: 1075px; width: 568px; }

/* Ratings */
.ratings { position: absolute; left: 0; top: 2582px; width: 1200px; height: 295px; }
.rating { position: absolute; height: 178px; color: var(--blue); }
.rating-ozon { left: 17.5px; top: 69.72px; width: 500px; }
.rating-wb { left: 801.5px; top: 68px; width: 377px; }
.rating > strong { position: absolute; left: 0; top: 0; font-size: 112px; line-height: 1.14; letter-spacing: -4.48px; font-weight: 600; }
.rating > img { position: absolute; left: 201px; top: 22.28px; width: 176px; height: 82px; object-fit: contain; }
.rating-wb > img { left: 201px; top: 24px; width: 176px; height: 87px; }
.rating p { position: absolute; left: 3px; margin: 0; font-size: 50px; line-height: 1.06; letter-spacing: -2px; }
.rating-ozon p { top: 120.59px; }
.rating-wb p { top: 116px; }
.rating p span { margin-left: 25px; }

/* About */
.about { position: absolute; left: .5px; top: 2877px; width: 1200px; height: 587px; }
.about-left, .about-right { position: absolute; top: 0; width: 600px; height: 587px; overflow: hidden; }
.about-left { left: 0; }
.about-right { left: 600px; }
.doctor-photo { inset: 0; opacity: .6; }
.doctor-photo img { left: -417.6px; top: -49.13px; width: 1163.16px; height: 654.62px; }
.doctor-logo { position: absolute; left: 23px; top: 60px; width: 175px; height: 99px; object-fit: contain; object-position: left top; }
.about-copy { position: absolute; left: 22px; top: 215px; width: 483px; font-size: 20px; line-height: 1.17; letter-spacing: -.8px; }
.about-copy p { margin: 0 0 23px; }
.about-copy em { font-weight: 500; }
.about-copy span { text-transform: uppercase; }
.about-action { left: 22px; top: 478px; width: 273px; }
.brand-photo { inset: 0; }
.brand-photo img { left: -110.1px; top: -202.98px; width: 780.24px; height: 1045.04px; }

/* Audience */
.audience { position: absolute; left: 0; top: 3464px; width: 1200px; height: 259px; }
.audience-number { position: absolute; left: 311.5px; top: 38px; margin: 0; color: var(--blue); font-size: 112px; line-height: 1.14; letter-spacing: -4.48px; font-weight: 600; }
.audience-label { position: absolute; left: 708.5px; top: 45px; width: 256px; margin: 0; color: var(--blue); font-size: 50px; line-height: 1.06; letter-spacing: -2px; }

/* Results */
.results { position: absolute; left: 0; top: 3464px; width: 1200px; height: 905px; }
.results h2 { position: absolute; left: 22.5px; top: 259px; width: 617px; margin: 0; font-size: 60px; line-height: 1.14; letter-spacing: -2.4px; font-weight: 400; text-transform: uppercase; }
.results h2 em { color: var(--blue); font-weight: 600; }
.results-lead { position: absolute; left: 805.5px; top: 259px; width: 337px; margin: 0; font-size: 20px; line-height: 1.17; letter-spacing: -.8px; }
.results-lead strong { color: var(--blue); font-weight: 600; }
.results-sub { position: absolute; left: 805.5px; top: 356px; margin: 0; font-size: 20px; line-height: 1.17; letter-spacing: -.8px; }
.result-image { top: 443px; height: 379px; }
.result-before { left: 57.5px; width: 337px; }
.result-after { left: 414.5px; width: 340px; }
.result-before img { left: -13.72px; top: -23.73px; width: 363.12px; height: 478.61px; }
.result-after img { left: -118.52px; top: -29.33px; width: 535.91px; height: 680px; }
.gallery-arrow { position: absolute; top: 600px; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; background: transparent; z-index: 4; cursor: pointer; }
.gallery-arrow img { display: block; width: 66px; height: 66px; }
.gallery-prev { left: 22.5px; }
.gallery-next { left: 721.5px; }
.gallery-next img { transform: scaleX(-1); }
.review-card { position: absolute; left: 806.5px; top: 388px; width: 372px; height: 286px; }
.review-shape { position: absolute; inset: 0; width: 372px; height: 286px; }
.quote { position: absolute; left: 306px; top: 22px; width: 47.738px; height: 32.436px; }
.review-card h3 { position: absolute; left: 24px; top: 79px; width: 324px; margin: 0; text-align: center; font-size: 14px; line-height: 1.12; letter-spacing: -.56px; font-weight: 600; }
.review-card p { position: absolute; left: 24px; top: 104px; width: 327px; margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: -.56px; }
.more-reviews { position: absolute; left: 905.5px; top: 729px; width: 175px; height: 27px; display: flex; align-items: flex-start; justify-content: space-between; font-size: 20px; line-height: 1.259; letter-spacing: -.8px; border-bottom: 1px solid #000; }
.more-reviews img { width: 14.638px; height: 14.638px; margin-top: 5px; transform: scaleY(-1); }
.more-reviews:hover img, .more-reviews:focus-visible img { animation: more-arrow-hop .5s ease-out; }
@keyframes more-arrow-hop {
  0%, 100% { transform: translateY(0) scaleY(-1); }
  50% { transform: translateY(-6px) scaleY(-1); }
}
.results-action { left: 855.5px; top: 773px; width: 273px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .product-meta { transition: none; }
  .pill:hover .pill-icon, .pill:focus-visible .pill-icon,
  .more-reviews:hover img, .more-reviews:focus-visible img { animation: none; }
}