/* Colgate Optic White Purple Serum — colgate-optic-white.tabletki.ua
   Розмітка масштабується від ширини макета: 1 одиниця макета = var(--u).
   Мобільний макет — 390, десктопний — 1280 (більше 1280 не росте, фон секцій тягнеться на всю ширину). */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/montserrat-cyrillic-700-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --c-red:#b5181d;
  --c-red-blob:#d7291e;
  --c-red-text:#d13f34;
  --c-purple:#3a098f;
  --c-lilac:#c9bff7;
  --c-white:#fff;
  --f-main:"Montserrat",Arial,sans-serif;
  --f-accent:"Montserrat",Arial,sans-serif; /* замість Foco Trial */
  --page:1280px;
  --bp:900px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--c-lilac);color:var(--c-white);font-family:var(--f-main);font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,picture{display:block;max-width:none}
picture img{width:100%;height:100%}
h1,h2,h3,p,ul{margin:0;padding:0;font:inherit}
ul{list-style:none}
b{font-weight:inherit}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- масштаб ---------- */
.page{container-type:inline-size;overflow:hidden}
.sec{--u:calc(100cqw / 390);position:relative;overflow:hidden;width:100%}
.art{position:absolute;top:0;bottom:0;left:50%;width:calc(390 * var(--u));margin-left:calc(-195 * var(--u))}
.art > *, .sec > *{position:absolute}
br.d{display:none}

/* ---------- кнопки ---------- */
.btn{display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--c-white);color:var(--c-purple);border:var(--bw) solid var(--c-white);font-weight:700;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease;-webkit-tap-highlight-color:transparent}
.btn::before{content:"";position:absolute;inset:-11px -6px}
.btn{--bw:calc(1.5 * var(--u))}
.btn:focus-visible{outline:2px solid var(--c-white);outline-offset:3px}
.btn1:hover,.btn1:focus-visible{background:transparent;color:var(--c-white);border-color:var(--c-white)}
.btn2:hover,.btn2:focus-visible{background:var(--c-red-blob);color:var(--c-white);border-color:var(--c-red-blob)}
.btn3:hover,.btn3:focus-visible,.btn4:hover,.btn4:focus-visible{background:var(--c-purple);color:var(--c-white);border-color:var(--c-purple)}
.btn3:focus-visible,.btn4:focus-visible{outline-color:var(--c-purple)}

/* =========================================================
   МОБІЛЬНА РОЗКЛАДКА (390)
   ========================================================= */

/* ---- 1. hero (м 1) ---- */
.s-hero{height:calc(682 * var(--u));background:var(--c-red)}
.h-badge{left:calc(15 * var(--u));top:calc(-55 * var(--u));width:calc(142 * var(--u));height:calc(122.798 * var(--u))}
.h-pill{left:calc(243 * var(--u));top:calc(15 * var(--u));width:calc(205 * var(--u));height:calc(39.733 * var(--u));border-radius:999px;background:var(--c-purple);font-weight:700;font-style:italic;font-size:calc(20.445 * var(--u));line-height:calc(22.197 * var(--u));text-transform:uppercase;white-space:nowrap;z-index:1}
.h-pill span{position:absolute;left:calc(17.28 * var(--u));top:50%;transform:translateY(-50%)}
.h-pill::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:100vw;background:inherit;z-index:-1}
.h-visual{position:absolute;inset:0}
.h-visual > *{position:absolute}
.h-conc{left:calc(43.185 * var(--u));top:calc(78.125 * var(--u));width:calc(289.51 * var(--u));height:calc(231.858 * var(--u))}
.h-shadow{left:calc(98.545 * var(--u));top:calc(267.831 * var(--u));width:calc(248.501 * var(--u));height:calc(84.17 * var(--u));mix-blend-mode:multiply}
.h-serum{left:calc(122.881 * var(--u));top:calc(68 * var(--u));width:calc(137.993 * var(--u));height:calc(264.533 * var(--u))}
.h-tp1,.h-tp2{display:none}
.h-tp1m{left:calc(258.004 * var(--u));top:calc(93.531 * var(--u));width:calc(61 * var(--u));height:calc(70 * var(--u))}
.h-tp2m{left:calc(51.298 * var(--u));top:calc(159.006 * var(--u));width:calc(48 * var(--u));height:calc(51 * var(--u))}
.h-col{left:calc(23.298 * var(--u));top:calc(372.504 * var(--u));width:calc(344.404 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(20 * var(--u));text-align:center}
.h-logo{width:calc(298.199 * var(--u));height:calc(125.881 * var(--u));flex:none}
.h-logo picture{width:100%;height:100%}
.h-lead{width:calc(364.206 * var(--u));flex:none;font-size:calc(18 * var(--u));line-height:calc(22 * var(--u))}
.h-note{width:calc(344.404 * var(--u));font-size:calc(8 * var(--u));line-height:calc(10 * var(--u))}
.btn1{position:relative;width:calc(152 * var(--u));height:calc(29.567 * var(--u));font-size:calc(13.222 * var(--u));line-height:calc(14.355 * var(--u));flex:none}

/* ---- 2. особливості (м 2) ---- */
.s-feat{height:calc(586 * var(--u));background:var(--c-purple)}
.f-bg{left:calc(-271 * var(--u));top:0;width:calc(1128.737 * var(--u));height:calc(633.367 * var(--u))}
.f-bg img{object-fit:cover}
.f-shade{left:0;top:calc(151.8 * var(--u));width:calc(265 * var(--u));height:calc(364 * var(--u))}
.f-blob{left:0;top:calc(22 * var(--u));width:calc(274 * var(--u));height:calc(140.198 * var(--u))}
.f-blob svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.f-blob-d{display:none}
.f-blob-t{position:absolute;left:calc(29.119 * var(--u));top:calc(41.116 * var(--u));white-space:nowrap;line-height:calc(28.196 * var(--u))}
.f-blob-t span{display:block}
.f-blob-t .l1{font-size:calc(25.97 * var(--u))}
.f-blob-t .l2{font-size:calc(22.26 * var(--u));position:relative;top:calc(1.1 * var(--u))}
.f-col{left:calc(30 * var(--u));top:calc(183.135 * var(--u));display:flex;flex-direction:column;align-items:flex-start;gap:calc(20 * var(--u))}
.f-title{width:calc(193 * var(--u));height:calc(91 * var(--u));text-align:center;font-weight:700;white-space:nowrap;line-height:calc(31.482 * var(--u))}
.f-title span{display:block}
.f-title .l1{font-size:calc(18.163 * var(--u));margin-bottom:calc(-3 * var(--u))}
.f-title .l2{font-size:calc(27.849 * var(--u))}
.f-title .l3{font-family:var(--f-accent);font-size:calc(29.06 * var(--u))}
.f-list{display:flex;flex-direction:column;gap:calc(12.108 * var(--u))}
.f-list li{display:flex;align-items:center;gap:calc(6.054 * var(--u));font-size:calc(16.543 * var(--u));white-space:nowrap;line-height:calc(20 * var(--u))}
.f-list img{width:calc(21.19 * var(--u));height:calc(21.795 * var(--u));flex:none}
.f-list b{font-weight:600}
.f-btn{left:calc(30 * var(--u));top:calc(488 * var(--u));width:calc(152 * var(--u));height:calc(29.567 * var(--u));font-size:calc(13.222 * var(--u));line-height:calc(14.355 * var(--u))}
.f-note{left:calc(30 * var(--u));top:calc(546 * var(--u));font-size:calc(8 * var(--u));white-space:nowrap;line-height:calc(10 * var(--u))}

/* ---- 3. корекція кольору (м 3) ---- */
.s-color{height:calc(436 * var(--u));background:linear-gradient(270deg,#bf0207 0%,#cf0b0e 4.854%,#de1415 7.909%,#f21f1e 16.176%,#f5211f 50.168%,#f4201e 61.284%,#f01e1c 67.934%,#ef1a16 76.919%,#ee1b18 87.882%,#ea1915 93.633%,#d7120e 100%)}
.c-art{left:0;top:0;width:100%;height:calc(194 * var(--u))}
.c-art picture{width:100%;height:100%}
.c-art img{object-fit:cover}
.c-col{left:calc(30.5 * var(--u));top:calc(200 * var(--u));width:calc(330 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(20 * var(--u));text-align:center;white-space:nowrap}
.c-title{font-weight:700;font-size:calc(28 * var(--u));line-height:calc(34 * var(--u))}
.c-text{font-size:calc(18 * var(--u));line-height:calc(22 * var(--u))}
.c-note{font-size:calc(8 * var(--u));line-height:calc(10 * var(--u))}

/* ---- 4. мінерали (м 4) ---- */
.s-min{height:calc(436 * var(--u));background:linear-gradient(270deg,#d8ceff 0%,#d9d0ff 3.103%,#dad1fe 11.028%,#dbcfff 26.955%,#c0b5fb 56.129%,#a195f2 100%)}
.m-art{left:0;top:calc(195.01 * var(--u));width:100%;height:calc(241.237 * var(--u))}
.m-art > *{position:absolute}
.m-product{left:0;top:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(to left,#000 0%,#000 32.547%,transparent 76.987%);mask-image:linear-gradient(to left,#000 0%,#000 32.547%,transparent 76.987%)}
.m-product img{object-fit:cover}
.m-zoom{left:calc(120.505 * var(--u));top:calc(33.99 * var(--u));width:calc(130.454 * var(--u));height:calc(130.454 * var(--u))}
.m-line{left:calc(238 * var(--u));top:calc(136.99 * var(--u));width:calc(47.061 * var(--u));height:calc(31.474 * var(--u));overflow:visible;stroke-width:calc(.804 * var(--u))}
.m-col{left:calc(28 * var(--u));top:calc(30 * var(--u));width:calc(335 * var(--u));display:flex;flex-direction:column;gap:calc(20 * var(--u));color:var(--c-purple);font-size:calc(18 * var(--u));white-space:nowrap;line-height:calc(22 * var(--u))}
.m-strong{font-weight:700}
.m-note{left:calc(26 * var(--u));top:calc(376 * var(--u));width:calc(170 * var(--u));font-size:calc(8 * var(--u));line-height:calc(10 * var(--u))}

/* ---- 5. 3 прості кроки (м 5) ---- */
.s-steps{height:calc(637 * var(--u));background:var(--c-lilac);color:var(--c-purple)}
.st-art{left:0;top:0;width:100%;height:100%;pointer-events:none}
.st-art > *{position:absolute}
.st-hand{left:calc(51.9 * var(--u));top:calc(175.56 * var(--u));width:calc(277.442 * var(--u));height:calc(277.442 * var(--u));transform:rotate(17.71deg)}
.st-gv-d,.st-ge1-d,.st-ge2-d{display:none}
.st-gv-m{left:calc(158.902 * var(--u));top:calc(188.398 * var(--u));width:calc(55 * var(--u));height:calc(180 * var(--u))}
.st-ge1-m{left:calc(173.896 * var(--u));top:calc(221.214 * var(--u));width:calc(45 * var(--u));height:calc(123 * var(--u))}
.st-ge2-m{left:calc(138.621 * var(--u));top:calc(185.659 * var(--u));width:calc(60 * var(--u));height:calc(133 * var(--u))}
.st-title{left:0;top:0;width:100%;height:0;font-family:var(--f-accent);font-weight:700;color:var(--c-red-text);white-space:nowrap}
.st-title > span{position:absolute;display:block}
.st-3{left:calc(30 * var(--u));top:calc(18.97 * var(--u));font-size:calc(79.501 * var(--u));line-height:1}
.st-words{left:calc(78.961 * var(--u));top:calc(27.18 * var(--u));font-size:calc(33.748 * var(--u));line-height:calc(28.6 * var(--u))}
.st-step{display:flex;flex-direction:column;gap:calc(9 * var(--u))}
.st-row{position:relative;display:flex;align-items:center;gap:calc(10.46 * var(--u))}
.st-num{position:relative;flex:none;width:calc(45.48 * var(--u));height:calc(45.48 * var(--u));border-radius:50%;background:var(--c-purple);color:var(--c-white);font-family:var(--f-accent);font-weight:700;font-size:calc(36.6 * var(--u));line-height:1}
.st-num{display:flex;align-items:center;justify-content:center}
.st-num > span{position:relative;top:calc(-.3 * var(--u))}
/* оптичне центрування цифр (не по габариту) */
.st1 .st-num > span{translate:calc(.85 * var(--u)) calc(.42 * var(--u))}
.st2 .st-num > span{translate:calc(.5 * var(--u)) calc(.66 * var(--u))}
.st3 .st-num > span{translate:calc(.47 * var(--u)) calc(.29 * var(--u))}
.st-name{font-size:calc(18.192 * var(--u));line-height:calc(18.192 * var(--u));white-space:nowrap}
.st-name b{font-weight:800}
.st1{left:calc(189 * var(--u));top:calc(101 * var(--u));width:calc(171 * var(--u));align-items:flex-end}
.st1 .st-row{width:100%}
.st2{left:calc(30 * var(--u));top:calc(406 * var(--u));width:calc(158.94 * var(--u));align-items:flex-start}
.st2 .st-row{flex-direction:column;align-items:flex-start;gap:calc(10.46 * var(--u))}
.st3{left:calc(30 * var(--u));top:calc(561.26 * var(--u))}
.st3 .st-name{font-weight:800;text-transform:uppercase}
.st-step .btn{position:relative;width:calc(115 * var(--u));height:calc(22.37 * var(--u));font-size:calc(10.004 * var(--u));line-height:calc(10.861 * var(--u));--bw:calc(1 * var(--u))}
.st-halo{left:calc(202 * var(--u));top:calc(398 * var(--u));width:calc(157.826 * var(--u));height:calc(148 * var(--u))}
.st-halo picture{position:absolute;left:0;top:0;width:100%;height:calc(148.102 * var(--u))}
.st-halo p{position:absolute;left:calc(69.24 * var(--u));top:calc(47.9 * var(--u));transform:translateX(-50%);color:var(--c-white);text-align:center;white-space:nowrap;font-size:calc(19.035 * var(--u));font-weight:600}
.st-halo p span{display:block;line-height:calc(19.035 * var(--u))}
.st-halo .l1{font-weight:400}
.st-halo .l2{line-height:calc(19.035 * var(--u));padding-top:calc(3.073 * var(--u))}

/* =========================================================
   ДЕСКТОПНА РОЗКЛАДКА (1280)
   ========================================================= */
@media (min-width: 900px){
  .sec{--u:calc(min(100cqw, 1280px) / 1280)}
  .art{width:calc(1280 * var(--u));margin-left:calc(-640 * var(--u))}
  br.d{display:inline}
  br.m{display:none}
  .btn{--bw:calc(2 * var(--u))}

  /* ---- 1. hero (д 5) ---- */
  .s-hero{height:calc(671 * var(--u))}
  .h-badge{left:calc(50 * var(--u));top:calc(-78 * var(--u));width:calc(208 * var(--u));height:calc(179.874 * var(--u))}
  .h-pill{left:calc(1078 * var(--u));top:calc(30 * var(--u));width:calc(281 * var(--u));height:calc(54.463 * var(--u));font-size:calc(28.025 * var(--u));line-height:calc(30.427 * var(--u))}
  .h-pill span{left:calc(23.68 * var(--u))}
  .h-conc{left:calc(560.206 * var(--u));top:calc(52.852 * var(--u));width:calc(653.434 * var(--u));height:calc(523.312 * var(--u))}
  .h-shadow{left:calc(685.157 * var(--u));top:calc(481.026 * var(--u));width:calc(560.876 * var(--u));height:calc(189.974 * var(--u))}
  .h-serum{left:calc(740.082 * var(--u));top:calc(30 * var(--u));width:calc(311.454 * var(--u));height:calc(597.06 * var(--u))}
  .h-tp1,.h-tp2{display:block}
  .h-tp1m,.h-tp2m{display:none}
  .h-tp1{left:calc(1045.061 * var(--u));top:calc(86.998 * var(--u));width:calc(138 * var(--u));height:calc(157 * var(--u))}
  .h-tp2{left:calc(578.483 * var(--u));top:calc(234.534 * var(--u));width:calc(107 * var(--u));height:calc(116 * var(--u))}
  .h-col{left:calc(66 * var(--u));top:calc(120.503 * var(--u));width:calc(487 * var(--u));gap:calc(40 * var(--u))}
  .h-logo{width:calc(421.664 * var(--u));height:calc(178 * var(--u))}
  .h-lead{width:calc(515 * var(--u));font-size:calc(30 * var(--u));line-height:calc(37 * var(--u))}
  .h-note{width:calc(487 * var(--u));font-size:calc(14 * var(--u));line-height:calc(17 * var(--u))}
  .btn1{width:calc(293 * var(--u));height:calc(56.995 * var(--u));font-size:calc(25.487 * var(--u));line-height:calc(27.672 * var(--u))}

  /* ---- 2. особливості (д 4) ---- */
  .s-feat{height:calc(563 * var(--u))}
  .f-bg{left:0;width:100%;height:calc(100cqw / 1.78212);top:calc(calc(265.68 * var(--u)) - 100cqw / 1.78212 / 2)}
  .f-shade{display:none}
  .f-blob{left:0;top:calc(71 * var(--u));width:calc(493 * var(--u));height:calc(253.625 * var(--u))}
  .f-blob-d{display:block}
  .f-blob-m{display:none}
  .f-blob-t{left:calc(50 * var(--u));top:calc(74.382 * var(--u));line-height:calc(51.008 * var(--u))}
  .f-blob-t .l1{font-size:calc(46.981 * var(--u))}
  .f-blob-t .l2{font-size:calc(40.269 * var(--u));top:calc(2 * var(--u))}
  .f-col{left:calc(838 * var(--u));top:calc(50 * var(--u));width:calc(379 * var(--u));gap:calc(50 * var(--u))}
  .f-title{width:calc(318 * var(--u));height:calc(151 * var(--u));line-height:calc(52 * var(--u))}
  .f-title .l1{font-size:calc(30 * var(--u));margin-bottom:calc(-5 * var(--u))}
  .f-title .l2{font-size:calc(46 * var(--u))}
  .f-title .l3{font-size:calc(48 * var(--u))}
  .f-list{gap:calc(20 * var(--u))}
  .f-list li{gap:calc(10 * var(--u));font-size:calc(30 * var(--u));line-height:calc(37 * var(--u))}
  .f-list img{width:calc(35 * var(--u));height:calc(36 * var(--u))}
  .f-btn{left:calc(50 * var(--u));top:calc(389 * var(--u));width:calc(293 * var(--u));height:calc(56.995 * var(--u));font-size:calc(25.487 * var(--u));line-height:calc(27.672 * var(--u))}
  .f-note{left:calc(50 * var(--u));top:calc(496 * var(--u));font-size:calc(14 * var(--u));text-shadow:0 1px 2px rgba(0,0,0,.4);line-height:calc(17 * var(--u))}

  /* ---- 3. корекція кольору (д 3) ---- */
  .s-color{height:calc(448 * var(--u));background:linear-gradient(180deg,#f62422 0%,#e80e0a 40.719%,#d70603 59.646%,#b00101 78.061%,#da130f 100%)}
  .c-art{left:auto;right:0;top:0;width:calc(828 * var(--u));height:calc(448 * var(--u));-webkit-mask-image:linear-gradient(to left,#000 0%,#000 69.326%,transparent 100%);mask-image:linear-gradient(to left,#000 0%,#000 69.326%,transparent 100%)}
  .c-art picture{position:absolute;left:0;top:calc(-152 * var(--u));width:calc(970 * var(--u));height:calc(600 * var(--u))}
  .c-col{left:calc(50 * var(--u));top:calc(42 * var(--u));width:calc(577 * var(--u));gap:calc(50 * var(--u));white-space:normal}
  .c-title{width:calc(463 * var(--u));font-size:calc(40 * var(--u));line-height:calc(49 * var(--u))}
  .c-text{width:calc(515 * var(--u));font-size:calc(30 * var(--u));line-height:calc(37 * var(--u))}
  .c-note{width:calc(579 * var(--u));font-size:calc(14 * var(--u));line-height:calc(17 * var(--u))}

  /* ---- 4. мінерали (д 2) ---- */
  .s-min{height:calc(600 * var(--u));background:linear-gradient(180deg,#c9bff7 0%,#a195f2 100%)}
  .m-art{left:auto;right:0;top:0;width:calc(970 * var(--u));height:calc(600 * var(--u))}
  .m-product{-webkit-mask-image:linear-gradient(to left,#000 0%,#000 32.547%,transparent 76.987%);mask-image:linear-gradient(to left,#000 0%,#000 32.547%,transparent 76.987%)}
  .m-zoom{left:calc(441 * var(--u));top:calc(138 * var(--u));width:calc(271 * var(--u));height:calc(271 * var(--u))}
  .m-line{left:calc(667 * var(--u));top:calc(373 * var(--u));width:calc(42 * var(--u));height:calc(46 * var(--u));stroke-width:calc(2 * var(--u))}
  .m-col{left:calc(50 * var(--u));top:calc(50 * var(--u));width:calc(645 * var(--u));gap:calc(50 * var(--u));font-size:calc(40 * var(--u));line-height:calc(49 * var(--u))}
  .m-note{left:calc(50 * var(--u));top:calc(493 * var(--u));width:calc(790 * var(--u));font-size:calc(14 * var(--u));line-height:calc(17 * var(--u))}

  /* ---- 5. 3 прості кроки (д 1) ---- */
  .s-steps{height:calc(600 * var(--u))}
  .st-hand{left:calc(514.82 * var(--u));top:calc(52 * var(--u));width:calc(497 * var(--u));height:calc(497 * var(--u))}
  .st-gv-d,.st-ge1-d,.st-ge2-d{display:block}
  .st-gv-m,.st-ge1-m,.st-ge2-m{display:none}
  .st-gv-d{left:calc(706.5 * var(--u));top:calc(75 * var(--u));width:calc(99 * var(--u));height:calc(322 * var(--u))}
  .st-ge1-d{left:calc(733.36 * var(--u));top:calc(133.787 * var(--u));width:calc(80 * var(--u));height:calc(220 * var(--u))}
  .st-ge2-d{left:calc(670.169 * var(--u));top:calc(70.093 * var(--u));width:calc(107 * var(--u));height:calc(237 * var(--u))}
  .st-3{left:calc(50 * var(--u));top:calc(29.06 * var(--u));font-size:calc(157.333 * var(--u))}
  .st-words{left:calc(148 * var(--u));top:calc(45.41 * var(--u));font-size:calc(66.787 * var(--u));line-height:calc(56.599 * var(--u))}
  .st-step{gap:calc(20 * var(--u))}
  .st-row{gap:calc(23 * var(--u))}
  .st-num{width:calc(100 * var(--u));height:calc(100 * var(--u));font-size:calc(80.475 * var(--u))}
  .st-num > span{top:calc(-.6 * var(--u))}
  .st1 .st-num > span{translate:calc(1.27 * var(--u)) calc(-.75 * var(--u))}
  .st2 .st-num > span{translate:calc(.33 * var(--u)) calc(-.26 * var(--u))}
  .st3 .st-num > span{translate:calc(.45 * var(--u)) calc(-1.12 * var(--u))}
  .st-name{font-size:calc(40 * var(--u));line-height:calc(40 * var(--u))}
  .st1{left:calc(854 * var(--u));top:calc(50 * var(--u));width:calc(376 * var(--u))}
  .st2{left:calc(220 * var(--u));top:calc(233 * var(--u));width:calc(348 * var(--u))}
  .st2 .st-row{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:calc(23 * var(--u));width:100%}
  .st3{left:calc(50 * var(--u));top:calc(450 * var(--u))}
  .st-step .btn{width:calc(225 * var(--u));height:calc(43.767 * var(--u));font-size:calc(19.572 * var(--u));line-height:calc(21.25 * var(--u));--bw:calc(2 * var(--u))}
  .st-halo{left:calc(963 * var(--u));top:calc(304 * var(--u));width:calc(257 * var(--u));height:calc(241 * var(--u))}
  .st-halo picture{height:calc(241.166 * var(--u))}
  .st-halo p{left:calc(112.5 * var(--u));top:calc(78 * var(--u));font-size:calc(30.996 * var(--u))}
  .st-halo p span{line-height:calc(30.996 * var(--u))}
  .st-halo .l2{line-height:calc(30.996 * var(--u));padding-top:calc(5.004 * var(--u))}
}

/* ---------- поява при скролі (одноразова) ---------- */
.js .rv{opacity:0;transition:opacity .8s cubic-bezier(.2,.65,.3,1),translate .8s cubic-bezier(.2,.65,.3,1),scale .8s cubic-bezier(.2,.65,.3,1);transition-delay:var(--d,0s)}
.js .rv[data-rv="up"]{translate:0 40px}
.js .rv[data-rv="down"]{translate:0 -40px}
.js .rv[data-rv="left"]{translate:-60px 0}
.js .rv[data-rv="right"]{translate:60px 0}
.js .rv[data-rv="zoom"]{scale:.85}
.js .rv.is-in{opacity:1;translate:0 0;scale:1}
@media (prefers-reduced-motion: reduce){
  .js .rv,.js .rv[data-rv]{opacity:1;translate:none;scale:none;transition:none}
}