/* ================================================================
   BASE
================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --cy:      #0891B2;
  --cy-lt:   #22D3EE;
  --cy-pale: #ECFEFF;
  --cy-soft: #CFFAFE;
  --gn:      #22C55E;
  --gn-dk:   #16A34A;
  --bg:      #F0FDFF;
  --white:   #ffffff;
  --ink:     #164E63;
  --ink-lt:  #155E75;
  --muted:   #4B7A8A;
  --border:  #BAE6FD;
  --border2: #E0F2FE;
  --r-sm: .5rem;
  --r:    1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-f:  9999px;
  --t: 220ms cubic-bezier(.4,0,.2,1);
  --sh-cy: 0 8px 32px rgba(8,145,178,.22);
  --sh-gn: 0 8px 32px rgba(34,197,94,.28);
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;
  font-family:'Nunito Sans',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Rubik',sans-serif;line-height:1.1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.s{padding:5.5rem 0}
.s--w{background:var(--white)}
.s--alt{background:var(--cy-pale)}

/* ================================================================
   SECTION HEADERS
================================================================ */
.h-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cy);background:rgba(8,145,178,.08);
  padding:.3rem .95rem;border-radius:var(--r-f);
  border:1px solid rgba(8,145,178,.18);margin-bottom:.85rem;
}
.h2{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:800;color:var(--ink);margin-bottom:.6rem;
}
.h-desc{
  font-size:1.0625rem;color:var(--muted);
  max-width:560px;line-height:1.7;
}
.h-center{text-align:center;margin-bottom:3.5rem}
.h-center .h-desc{margin:0 auto}

/* ================================================================
   BUTTONS
================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Rubik',sans-serif;font-size:.9375rem;font-weight:600;
  padding:.75rem 1.75rem;border-radius:var(--r-f);
  border:2px solid transparent;cursor:pointer;
  transition:all var(--t);white-space:nowrap;line-height:1;
}
.btn svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn--cy{background:var(--cy);color:#fff;border-color:var(--cy)}
.btn--cy:hover{background:#0770A0;border-color:#0770A0;transform:translateY(-2px);box-shadow:var(--sh-cy)}
.btn--gn{background:var(--gn);color:#fff;border-color:var(--gn)}
.btn--gn:hover{background:var(--gn-dk);border-color:var(--gn-dk);transform:translateY(-2px);box-shadow:var(--sh-gn)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.btn--out{background:transparent;color:var(--cy);border-color:var(--cy)}
.btn--out:hover{background:var(--cy);color:#fff;transform:translateY(-2px)}
.btn--lg{font-size:1.0625rem;padding:.9rem 2.25rem}
.btn--sm{font-size:.8125rem;padding:.45rem 1rem}

/* ================================================================
   NAVBAR
================================================================ */
.nav{
  position:fixed;top:.875rem;left:.875rem;right:.875rem;z-index:500;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(8,145,178,.15);
  border-radius:var(--r-lg);
  box-shadow:0 4px 28px rgba(8,145,178,.1);
  padding:.7rem 1.5rem;
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__logo{
  font-family:'Rubik',sans-serif;font-size:1.25rem;font-weight:900;
  letter-spacing:-.01em;display:flex;align-items:center;
}
.nav__logo .lp{color:var(--cy)}
.nav__logo .lo{color:var(--gn)}
.nav__links{display:flex;align-items:center;gap:.125rem}
.nav__lnk{
  font-size:.8125rem;font-weight:600;color:var(--muted);
  padding:.35rem .7rem;border-radius:var(--r-f);white-space:nowrap;
  transition:color var(--t),background var(--t);
}
.nav__lnk:hover{color:var(--cy);background:rgba(8,145,178,.07)}
@media(max-width:760px){.nav__links{display:none}}
.nav__r{display:flex;align-items:center;gap:.75rem}
@media(max-width:520px){
  .nav{padding:.6rem 1rem}
  .nav__in{gap:.5rem}
  .nav__r{gap:.4rem}
  .nav__logo{font-size:1.05rem}
  .nav .btn{padding:.55rem .9rem;font-size:.8rem}
}
@media(max-width:380px){
  .nav{padding:.55rem .75rem}
  .nav__in{gap:.35rem}
  .nav__r{gap:.3rem}
  .nav__logo{font-size:.9rem}
  .nav .btn{padding:.5rem .7rem;font-size:.75rem}
  .lang-btn{padding:.25rem .5rem;font-size:.65rem}
}
.ig-lnk{
  display:flex;align-items:center;gap:.35rem;
  font-size:.8125rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:color var(--t);
}
.ig-lnk:hover{color:var(--cy)}
.ig-lnk svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.lang-wrap{
  display:flex;background:var(--cy-pale);
  border:1px solid var(--border);border-radius:var(--r-f);
  padding:.15rem;gap:.1rem;
}
.lang-btn{
  font-family:'Rubik',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;padding:.3rem .65rem;
  border:none;border-radius:var(--r-f);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:all var(--t);
}
.lang-btn.active{background:var(--cy);color:#fff}

/* ================================================================
   HERO
================================================================ */
.hero{
  background:linear-gradient(145deg,#020E1C 0%,#061F30 40%,#093349 100%);
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:8rem 0 6rem;
}
.hero-bb{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bb{
  position:absolute;border-radius:50%;
  border:1px solid rgba(34,211,238,.18);
  background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.1),transparent 65%);
  animation:bbUp linear infinite;
}
@keyframes bbUp{
  0%  {transform:translateY(110vh) scale(0);opacity:0}
  5%  {opacity:1}
  90% {opacity:.4}
  100%{transform:translateY(-10%) scale(1);opacity:0}
}
.hero-wave{position:absolute;bottom:-1px;left:0;right:0;line-height:0;overflow:hidden}
.wave-svg{width:200%;display:block;will-change:transform}
.wave-svg--front{will-change:transform}
.hero__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:center;
}
@media(max-width:860px){
  .hero__in{grid-template-columns:1fr;gap:3rem;text-align:center}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:600;color:var(--cy-lt);
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.22);
  padding:.35rem .95rem;border-radius:var(--r-f);margin-bottom:1.25rem;
}
.hero-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.hero-h1{
  font-size:clamp(2.75rem,6vw,5rem);font-weight:900;
  color:#fff;margin-bottom:1.25rem;letter-spacing:-.025em;
  line-height:.95;
}
.hero-h1 em{font-style:normal;color:var(--cy-lt)}
.hero-h1 strong{font-weight:900;color:#4ADE80}
.hero-sub{
  font-size:1.125rem;color:rgba(255,255,255,.68);
  line-height:1.7;margin-bottom:2rem;max-width:480px;
}
@media(max-width:860px){.hero-sub{margin:0 auto 2rem}}
.hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap}
@media(max-width:860px){.hero-ctas{justify-content:center}}
.hero-checks{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2.25rem}
@media(max-width:860px){.hero-checks{justify-content:center}}
.hck{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8125rem;color:rgba(255,255,255,.55);font-weight:500;
}
.hck svg{width:14px;height:14px;stroke:#4ADE80;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.hero-vis{display:flex;justify-content:center;align-items:center;position:relative}
.orb{
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(34,211,238,.20),rgba(6,182,212,.08) 55%,transparent 75%);
  border:1.5px solid rgba(34,211,238,.28);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  animation:orbP 4s ease-in-out infinite;
  box-shadow:0 0 100px rgba(34,211,238,.20),inset 0 0 60px rgba(34,211,238,.08);
}
/* тень воды под баночкой */
.orb::after{
  content:'';position:absolute;
  bottom:12%;left:50%;transform:translateX(-50%);
  width:52%;height:18px;
  background:radial-gradient(ellipse,rgba(34,211,238,.40) 0%,transparent 70%);
  filter:blur(10px);border-radius:50%;
  animation:shadowP 4s ease-in-out infinite;
}
@keyframes orbP{
  0%,100%{box-shadow:0 0 100px rgba(34,211,238,.20),inset 0 0 60px rgba(34,211,238,.08)}
  50%    {box-shadow:0 0 170px rgba(34,211,238,.34),inset 0 0 90px rgba(34,211,238,.15)}
}
@keyframes shadowP{
  0%,100%{opacity:.55;transform:translateX(-50%) scaleX(1)}
  50%    {opacity:.85;transform:translateX(-50%) scaleX(1.12)}
}
/* пузырьки — обрезаются по кругу orb */
.orb-bb{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
/* баночка плавает */
@keyframes floatUp{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-14px)}
}
.orb-img{
  width:300px;height:320px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  animation:floatUp 4s ease-in-out infinite;
}
.orb-img img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(34,211,238,.45)) drop-shadow(0 10px 28px rgba(0,0,0,.55));
}
.orb-ph{text-align:center;color:rgba(255,255,255,.25)}
.orb-ph svg{width:56px;height:56px;stroke:rgba(34,211,238,.4);fill:none;stroke-width:1;margin:0 auto 6px}
.orb-ph span{font-family:'Rubik',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.12em;color:rgba(34,211,238,.4)}
.chip{
  position:absolute;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:.9rem;padding:.65rem 1rem;color:#fff;
  animation:chipF 5s ease-in-out infinite;
}
.chip-v{font-family:'Rubik',sans-serif;font-size:1.1rem;font-weight:800;display:block;line-height:1}
.chip-l{font-size:.68rem;color:rgba(255,255,255,.6);display:block;margin-top:.2rem;white-space:nowrap}
.chip--1{top:4%;right:-4%;animation-delay:0s}
.chip--2{bottom:12%;left:-12%;animation-delay:2.2s}
.chip--3{top:52%;right:-14%;animation-delay:1.1s}
@keyframes chipF{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}
@media(max-width:860px){
  .orb{width:260px;height:260px}
  .orb-img{width:215px;height:230px}
  .chip--3{display:none}
  .chip--1{top:0;right:4%}
  .chip--2{bottom:4%;left:4%}
}

/* ================================================================
   TRUST STRIP
================================================================ */
.trust-s{background:var(--white);padding:2.75rem 0;border-bottom:1px solid var(--border2)}
.trust-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:768px){.trust-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust-g{grid-template-columns:1fr}}
.t-item{
  display:flex;align-items:center;gap:.85rem;min-width:0;
  padding:1rem;border-radius:var(--r);
  transition:background var(--t);cursor:default;
}
.t-item:hover{background:var(--cy-pale)}
.t-ico{
  width:2.75rem;height:2.75rem;border-radius:.85rem;flex-shrink:0;
  background:rgba(8,145,178,.1);
  display:flex;align-items:center;justify-content:center;
}
.t-ico svg{width:1.25rem;height:1.25rem;stroke:var(--cy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-name{font-family:'Rubik',sans-serif;font-size:.875rem;font-weight:700;color:var(--ink);overflow-wrap:break-word}
.t-sub{font-size:.78rem;color:var(--muted);line-height:1.4;margin-top:.15rem;overflow-wrap:break-word}
.t-item > div{min-width:0}

/* ================================================================
   BENEFITS
================================================================ */
.ben-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(min-width:560px) and (max-width:900px){.ben-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:559px){.ben-g{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.ben-c{
  background:var(--white);
  border:1.5px solid var(--border2);
  border-radius:var(--r-xl);
  padding:2.25rem 1.875rem;
  position:relative;overflow:hidden;
  cursor:default;transition:all var(--t);
}
.ben-c::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cy),var(--cy-lt));
  opacity:0;transition:opacity var(--t);
}
.ben-c:hover{border-color:rgba(8,145,178,.3);box-shadow:0 4px 32px rgba(8,145,178,.1);transform:translateY(-5px)}
.ben-c:hover::after{opacity:1}
.ben-num{
  position:absolute;top:1.5rem;right:1.75rem;
  font-family:'Rubik',sans-serif;font-size:5rem;font-weight:900;
  color:rgba(8,145,178,.05);line-height:1;pointer-events:none;
}
.ben-ico{
  width:3.25rem;height:3.25rem;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
}
.ben-ico svg{width:1.45rem;height:1.45rem;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.bi--b{background:rgba(8,145,178,.1)} .bi--b svg{stroke:var(--cy)}
.bi--g{background:rgba(34,197,94,.1)}  .bi--g svg{stroke:var(--gn-dk)}
.bi--c{background:rgba(34,211,238,.1)} .bi--c svg{stroke:#0E9FAB}
.ben-t{font-size:1.0625rem;font-weight:700;margin-bottom:.5rem;color:var(--ink)}
.ben-d{font-size:.9rem;color:var(--muted);line-height:1.65}

/* ================================================================
   HOW IT WORKS
================================================================ */
.steps-w{position:relative}
.steps-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
@media(max-width:680px){.steps-g{grid-template-columns:1fr;gap:1.5rem}}
.steps-line{
  position:absolute;top:2.5rem;
  left:calc(16.666% + 1rem);right:calc(16.666% + 1rem);
  height:2px;
  background:linear-gradient(90deg,var(--cy),var(--cy-lt),var(--cy));
  opacity:.2;pointer-events:none;
}
@media(max-width:680px){.steps-line{display:none}}
.step{text-align:center;position:relative}
.step-n{
  width:4.25rem;height:4.25rem;border-radius:50%;
  background:linear-gradient(135deg,var(--cy),var(--cy-lt));
  color:#fff;font-family:'Rubik',sans-serif;
  font-size:1.375rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;position:relative;z-index:1;
  box-shadow:0 6px 24px rgba(8,145,178,.3);
}
.step-t{font-size:1rem;font-weight:700;margin-bottom:.45rem;color:var(--ink)}
.step-d{font-size:.875rem;color:var(--muted);line-height:1.65;max-width:220px;margin:0 auto}

/* ================================================================
   USE CASES
================================================================ */
.use-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:768px){.use-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.use-g{grid-template-columns:1fr;gap:.875rem}}
.use-c{
  background:var(--white);
  border:1.5px solid var(--border2);
  border-radius:var(--r-lg);
  padding:1.875rem 1.5rem;
  text-align:center;cursor:default;transition:all var(--t);
}
.use-c:hover{border-color:var(--cy);box-shadow:var(--sh-cy);transform:translateY(-4px)}
.use-ico{
  width:3.5rem;height:3.5rem;border-radius:1rem;
  background:linear-gradient(135deg,rgba(8,145,178,.1),rgba(34,211,238,.06));
  border:1px solid rgba(8,145,178,.1);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;transition:all var(--t);
}
.use-c:hover .use-ico{background:linear-gradient(135deg,rgba(8,145,178,.18),rgba(34,211,238,.12));border-color:rgba(8,145,178,.2)}
.use-ico svg{width:1.5rem;height:1.5rem;stroke:var(--cy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.use-t{font-size:.9375rem;font-weight:700;margin-bottom:.35rem;color:var(--ink)}
.use-d{font-size:.8125rem;color:var(--muted);line-height:1.55}

/* ================================================================
   BEFORE / AFTER
================================================================ */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.ba-pair{display:flex;flex-direction:column;gap:.5rem}
.ba-img-wrap{position:relative;width:100%;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:#f1f5f9}
.ba-img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .4s}
.ba-img-wrap:hover .ba-img{transform:scale(1.03)}
.ba-label{
  position:absolute;top:.75rem;left:.75rem;
  font-family:'Rubik',sans-serif;font-size:.7rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--r-f);
  backdrop-filter:blur(4px);
}
.ba-label--before{background:rgba(0,0,0,.55);color:#fff}
.ba-label--after{background:var(--gn);color:#fff}
.ba-arrow{display:flex;align-items:center;justify-content:center;height:1.75rem}
.ba-arrow svg{width:18px;height:18px;stroke:var(--cy);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.ba-caption{font-size:.9rem;font-weight:700;color:var(--ink);text-align:center;padding:.25rem 0}
.ba-more{text-align:center;margin-top:2.5rem}

/* ================================================================
   VIDEO
================================================================ */
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:640px;margin:0 auto}
@media(max-width:580px){.vid-grid{grid-template-columns:1fr;max-width:320px}}
.vid-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:9/16;box-shadow:var(--sh);display:block;text-decoration:none}
.vid-thumb{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;
  position:relative;overflow:hidden;
  transition:transform .4s;
}
.vid-thumb--1{background:linear-gradient(160deg,#020E1C 0%,#0e4f6b 50%,#0891b2 100%)}
.vid-thumb--2{background:linear-gradient(160deg,#042a12 0%,#065f30 50%,#16a34a 100%)}
.vid-thumb__num{
  font-family:'Rubik',sans-serif;font-size:5rem;font-weight:900;
  color:rgba(255,255,255,.12);letter-spacing:-.02em;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  line-height:1;pointer-events:none;user-select:none;
}
.vid-thumb__logo{
  font-family:'Rubik',sans-serif;font-size:1.1rem;font-weight:900;
  position:relative;z-index:1;letter-spacing:.04em;
}
.vp{color:#22d3ee}.vo{color:#4ade80}
.vid-thumb__sub{
  font-size:.75rem;font-weight:600;color:rgba(255,255,255,.55);
  position:relative;z-index:1;letter-spacing:.04em;text-transform:uppercase;
}
.vid-thumb__bubbles{position:absolute;inset:0;pointer-events:none}
.vid-thumb__bubbles span{
  position:absolute;border-radius:50%;opacity:.06;
  background:#fff;animation:vb-float 8s ease-in-out infinite;
}
.vid-thumb--1 .vid-thumb__bubbles span:nth-child(1){width:80px;height:80px;left:10%;top:15%;animation-delay:0s}
.vid-thumb--1 .vid-thumb__bubbles span:nth-child(2){width:50px;height:50px;right:12%;top:30%;animation-delay:-2s}
.vid-thumb--1 .vid-thumb__bubbles span:nth-child(3){width:100px;height:100px;left:5%;bottom:20%;animation-delay:-4s}
.vid-thumb--1 .vid-thumb__bubbles span:nth-child(4){width:35px;height:35px;right:20%;bottom:35%;animation-delay:-1s}
.vid-thumb--1 .vid-thumb__bubbles span:nth-child(5){width:60px;height:60px;left:40%;top:10%;animation-delay:-3s}
.vid-thumb--2 .vid-thumb__bubbles span:nth-child(1){width:70px;height:70px;right:8%;top:12%;animation-delay:-1s}
.vid-thumb--2 .vid-thumb__bubbles span:nth-child(2){width:45px;height:45px;left:15%;top:25%;animation-delay:-3s}
.vid-thumb--2 .vid-thumb__bubbles span:nth-child(3){width:90px;height:90px;right:10%;bottom:25%;animation-delay:-5s}
.vid-thumb--2 .vid-thumb__bubbles span:nth-child(4){width:30px;height:30px;left:25%;bottom:30%;animation-delay:-2s}
.vid-thumb--2 .vid-thumb__bubbles span:nth-child(5){width:55px;height:55px;right:35%;top:8%;animation-delay:-4s}
@keyframes vb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.vid-wrap:hover .vid-thumb{transform:scale(1.03)}
.vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--t)}
.vid-play svg{width:60px;height:60px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
.vid-wrap:hover .vid-play svg circle{fill:rgba(0,0,0,.7)}
.vid-more-link{color:var(--cy);font-weight:600;text-decoration:none;transition:color var(--t)}
.vid-more-link:hover{color:var(--ink)}
.vid-wrap{background:none;border:none;padding:0;cursor:pointer;text-align:left}

/* VIDEO MODAL */
.vmodal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center}
.vmodal[hidden]{display:none}
.vmodal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(6px);cursor:pointer}
.vmodal__box{
  position:relative;z-index:1;
  width:min(400px, 92vw);
  animation:vmodal-in .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vmodal-in{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.vmodal__close{
  position:absolute;top:-3rem;right:0;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--t);
}
.vmodal__close:hover{background:rgba(255,255,255,.3)}
.vmodal__close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.vmodal__frame{aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;background:#000;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.vmodal__frame iframe{width:100%;height:100%;display:block}

/* ================================================================
   COMPARE
================================================================ */
.cmp-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:820px;margin:0 auto}
@media(max-width:580px){.cmp-wrap{grid-template-columns:1fr}}
.cmp-c{border-radius:var(--r-xl);padding:2.25rem 2rem;border:2px solid transparent}
.cmp-c--pu{
  background:linear-gradient(145deg,rgba(8,145,178,.05),rgba(34,211,238,.03));
  border-color:var(--cy);box-shadow:0 4px 32px rgba(8,145,178,.1);
}
.cmp-c--cl{background:#FAFBFC;border-color:#E2E8F0}
.cmp-hd{
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  margin-bottom:1.5rem;padding-bottom:1.25rem;
  border-bottom:1px solid var(--border2);
}
.cmp-c--cl .cmp-hd{border-bottom-color:#E2E8F0}
.cmp-badge{
  font-family:'Rubik',sans-serif;font-size:.65rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .75rem;border-radius:var(--r-f);
}
.cb--pu{background:var(--cy);color:#fff}
.cb--cl{background:#F1F5F9;color:#64748B}
.cmp-name{font-size:1rem;font-weight:700}
.cmp-c--pu .cmp-name{color:var(--ink)}
.cmp-c--cl .cmp-name{color:#64748B}
.cmp-list{display:flex;flex-direction:column;gap:.65rem}
.cmp-row{display:flex;align-items:flex-start;gap:.6rem;font-size:.875rem}
.cmp-row svg{width:1rem;height:1rem;flex-shrink:0;margin-top:.1rem;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.cmp-row--y svg{stroke:var(--gn)}
.cmp-row--y{color:var(--ink)}
.cmp-row--n{color:#94A3B8}
.cmp-row--n svg{stroke:#CBD5E1}

/* ================================================================
   SIZES
================================================================ */
.sz-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem}
@media(max-width:1100px){.sz-g{grid-template-columns:repeat(4,1fr)}}
@media(min-width:480px) and (max-width:700px){.sz-g{grid-template-columns:repeat(3,1fr)}}
@media(max-width:479px){.sz-g{grid-template-columns:repeat(2,1fr)}}
.sz-c{
  background:var(--white);border:2px solid var(--border2);
  border-radius:var(--r-lg);
  padding:1.5rem .875rem 1.25rem;
  text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:.45rem;
  position:relative;cursor:default;transition:all var(--t);
}
.sz-c:hover{border-color:var(--cy);box-shadow:var(--sh-cy);transform:translateY(-4px)}
.sz-c--hot{border-color:var(--gn)}
.sz-c--hot::before{
  content:attr(data-hot);
  position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);
  background:var(--gn);color:#fff;
  font-family:'Rubik',sans-serif;font-size:.6rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .65rem;border-radius:var(--r-f);white-space:nowrap;
}
.sz-thumb{
  width:72px;height:82px;border-radius:.75rem;overflow:hidden;
  background:var(--cy-pale);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.sz-thumb img{width:100%;height:100%;object-fit:contain}
.sz-ph{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.sz-ph svg{width:24px;height:24px;stroke:rgba(8,145,178,.4);fill:none;stroke-width:1.5}
.sz-w{font-family:'Rubik',sans-serif;font-size:1.25rem;font-weight:800;color:var(--ink)}
.sz-hint{font-size:.7rem;color:var(--muted);line-height:1.4;min-height:2rem}
.sz-c .btn{width:100%;font-size:.75rem;padding:.45rem .4rem;margin-top:.2rem}

/* ================================================================
   REVIEWS
================================================================ */
/* Reviews carousel */
.rv-carousel-wrap{position:relative;padding:0 2rem}
.rv-track-outer{overflow:hidden}
.rv-track{display:flex;gap:1.5rem;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.rv-track .rv-c{flex-shrink:0;cursor:pointer;text-decoration:none;color:inherit}
.rv-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--white);border:1.5px solid var(--border);
  box-shadow:0 2px 16px rgba(8,145,178,.12);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--t);z-index:2;
}
.rv-arrow svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rv-arrow:hover:not(:disabled){background:var(--cy);border-color:var(--cy);box-shadow:var(--sh-cy)}
.rv-arrow:hover:not(:disabled) svg{stroke:#fff}
.rv-arrow:disabled{opacity:.3;cursor:default}
.rv-arrow--prev{left:-.5rem}
.rv-arrow--next{right:-.5rem}
.rv-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1.75rem}
.rv-dot{
  width:.5rem;height:.5rem;border-radius:var(--r-f);border:none;
  background:var(--border);cursor:pointer;padding:0;transition:all var(--t);
}
.rv-dot--on{background:var(--cy);width:1.5rem}
@media(max-width:580px){.rv-carousel-wrap{padding:0 2rem}}
/* Uzum brand widget */
.rv-uzum{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  background:var(--cy-pale);border:1.5px solid var(--border);
  border-radius:var(--r-xl);padding:1.125rem 1.625rem;margin-bottom:2.5rem;
}
.rv-uzum__l{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.rv-uzum__logo{display:flex;align-items:center;gap:.55rem}
.rv-uzum__logo-mark{
  width:2rem;height:2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;
}
.rv-uzum__logo-mark svg{width:100%;height:100%;display:block}
.rv-uzum__logo span{font-family:'Rubik',sans-serif;font-weight:700;font-size:.9375rem;color:var(--ink)}
.rv-uzum__score{display:flex;align-items:center;gap:.45rem}
.rv-uzum__num{font-family:'Rubik',sans-serif;font-weight:900;font-size:1.25rem;color:var(--ink)}
.rv-stars--sm svg{width:13px;height:13px}
.rv-uzum__cnt{font-size:.8rem;color:var(--muted)}
.rv-uzum__link{
  font-size:.875rem;font-weight:600;color:var(--cy);
  display:flex;align-items:center;gap:.25rem;
  transition:color var(--t);white-space:nowrap;
}
.rv-uzum__link:hover{color:var(--ink)}

.rv-c{
  background:var(--white);border:1.5px solid var(--border2);
  border-radius:var(--r-xl);padding:1.625rem;
  display:flex;flex-direction:column;gap:.875rem;
  transition:all var(--t);cursor:default;
}
.rv-c:hover{border-color:rgba(8,145,178,.28);box-shadow:var(--sh-cy);transform:translateY(-3px)}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.rv-stars{display:flex;gap:.2rem}
.rv-stars svg{width:16px;height:16px;fill:#FBBF24;stroke:none}
.rv-vol{
  font-size:.7rem;font-weight:600;color:var(--muted);
  background:var(--cy-pale);border:1px solid var(--border);
  padding:.15rem .5rem;border-radius:var(--r-f);white-space:nowrap;
}
.rv-q{font-size:.9375rem;color:var(--muted);line-height:1.7;flex:1}
.rv-q strong{color:var(--ink);font-weight:600}
.rv-au{
  display:flex;align-items:center;gap:.75rem;
  padding-top:.875rem;border-top:1px solid var(--border2);
}
.rv-av{
  width:2.25rem;height:2.25rem;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--cy),var(--cy-lt));
  color:#fff;font-family:'Rubik',sans-serif;font-size:.8125rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.rv-av--pu{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.rv-av--gn{background:linear-gradient(135deg,var(--gn),#86EFAC)}
.rv-av--or{background:linear-gradient(135deg,#EA580C,#FDBA74)}
.rv-av--pk{background:linear-gradient(135deg,#DB2777,#F9A8D4)}
.rv-nm{font-size:.875rem;font-weight:700;color:var(--ink)}
.rv-dt{font-size:.75rem;color:var(--muted)}

/* ================================================================
   FAQ
================================================================ */
.faq-l{display:flex;flex-direction:column;gap:.75rem;max-width:740px;margin:0 auto}
.faq-i{
  background:var(--white);border:1.5px solid var(--border2);
  border-radius:var(--r);overflow:hidden;transition:border-color var(--t);
}
.faq-i.open{border-color:rgba(8,145,178,.4);box-shadow:0 2px 16px rgba(8,145,178,.08)}
.faq-btn{
  width:100%;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1.1rem 1.4rem;
  background:none;border:none;cursor:pointer;
  font-family:'Rubik',sans-serif;font-size:.9375rem;font-weight:600;
  color:var(--ink);text-align:left;transition:color var(--t);
}
.faq-btn:hover{color:var(--cy)}
.faq-ch{
  width:1.65rem;height:1.65rem;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cy-pale);border:1.5px solid var(--border);
  transition:all var(--t);
}
.faq-ch svg{width:.75rem;height:.75rem;stroke:var(--muted);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t)}
.faq-i.open .faq-ch{background:var(--cy);border-color:var(--cy);transform:rotate(180deg)}
.faq-i.open .faq-ch svg{stroke:#fff}
.faq-body{display:none;padding:0 1.4rem 1.1rem;font-size:.9rem;color:var(--muted);line-height:1.7}
.faq-i.open .faq-body{display:block}

/* ================================================================
   BUY CTA
================================================================ */
.buy-s{
  background:linear-gradient(145deg,#020E1C 0%,#061F30 40%,#093349 100%);
  padding:6.5rem 0;text-align:center;
  position:relative;overflow:hidden;
}
.buy-bb{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.5}
.buy-in{position:relative;z-index:1}
.buy-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;color:var(--cy-lt);
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.18);
  padding:.3rem .9rem;border-radius:var(--r-f);margin-bottom:1.5rem;
}
.buy-h2{font-size:clamp(1.875rem,4.5vw,3rem);font-weight:900;color:#fff;margin-bottom:.75rem}
.buy-sub{font-size:1.0625rem;color:rgba(255,255,255,.62);margin-bottom:2.75rem}
.buy-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.buy-note{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.8rem;color:rgba(255,255,255,.35);margin-top:1.75rem;
}
.buy-note svg{width:14px;height:14px;stroke:rgba(255,255,255,.35);fill:none;stroke-width:1.8;stroke-linecap:round}

/* ================================================================
   FOOTER
================================================================ */
.footer{background:#010A12;padding:3rem 0}
.footer__in{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
.flogo{font-family:'Rubik',sans-serif;font-size:1.375rem;font-weight:900}
.flogo .fp{color:var(--cy)} .flogo .fo{color:var(--gn)}
.flinks{display:flex;gap:1.75rem;flex-wrap:wrap;justify-content:center}
.flinks a{font-size:.875rem;color:rgba(255,255,255,.4);transition:color var(--t)}
.flinks a:hover{color:#fff}
.fcopy{font-size:.78rem;color:rgba(255,255,255,.2)}

/* ================================================================
   SCROLL REVEAL
================================================================ */
.r{opacity:0;transform:translateY(14px);transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1)}
.r.v{opacity:1;transform:none}
.r--d1{transition-delay:.07s}
.r--d2{transition-delay:.13s}
.r--d3{transition-delay:.19s}
.r--d4{transition-delay:.25s}
.r--d5{transition-delay:.31s}
.r--d6{transition-delay:.37s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .r{opacity:1;transform:none}
}

/* ================================================================
   RESPONSIVE — NAVBAR
================================================================ */
@media(max-width:968px) and (min-width:761px){
  .nav__links{gap:0}
  .nav__lnk{font-size:.75rem;padding:.35rem .5rem}
  .ig-lnk{display:none}
  .nav__r{gap:.5rem}
  .nav .btn{padding:.55rem .9rem;font-size:.8rem}
}
@media(max-width:560px){
  .ig-lnk .ig-txt{display:none}
}
@media(max-width:400px){
  .ig-lnk{display:none}
  .nav{padding:.7rem 1rem}
}

/* ================================================================
   B2B / WHOLESALE SECTION
================================================================ */
.b2b-s{
  background:linear-gradient(145deg,#0C4A6E 0%,#164E63 55%,#0E7490 100%);
  padding:5.5rem 0;overflow:hidden;position:relative;
}
.b2b-s::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 80% 15%,rgba(34,211,238,.1) 0%,transparent 65%);
  pointer-events:none;
}
.b2b-s .h-tag{
  color:var(--cy-lt);
  background:rgba(34,211,238,.12);
  border-color:rgba(34,211,238,.25);
}
.b2b-s .h2{color:#fff}
.b2b-desc--inv{
  color:rgba(255,255,255,.72);
  max-width:580px;font-size:1.0625rem;line-height:1.7;
  margin:0 auto;
}
.b2b-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-bottom:2.25rem;
}
@media(max-width:900px){.b2b-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.b2b-cards{grid-template-columns:1fr}}
.b2b-c{
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);
  padding:1.625rem 1.5rem;
  backdrop-filter:blur(10px);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.b2b-c:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(34,211,238,.35);
  transform:translateY(-3px);
}
.b2b-ico{
  width:2.75rem;height:2.75rem;border-radius:var(--r);
  background:rgba(34,211,238,.14);border:1.5px solid rgba(34,211,238,.22);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.875rem;
}
.b2b-ico svg{
  width:1.25rem;height:1.25rem;
  stroke:#22D3EE;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.b2b-c-h{
  font-family:'Rubik',sans-serif;font-weight:700;font-size:.9875rem;
  color:#fff;margin-bottom:.4rem;
}
.b2b-c-p{font-size:.8375rem;color:rgba(255,255,255,.6);line-height:1.6}
.b2b-perks{
  display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;
  padding:1.375rem 2rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);
  margin-bottom:3rem;
}
.b2b-perk{
  display:flex;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.88);font-size:.9375rem;font-weight:600;
}
.b2b-perk svg{
  width:1.125rem;height:1.125rem;flex-shrink:0;
  stroke:var(--cy-lt);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.b2b-cta{text-align:center}
.b2b-cta-note{
  margin-top:.875rem;
  color:rgba(255,255,255,.45);font-size:.875rem;
}
/* ── FLOATING UZUM BUTTON ── */
.fab-uzum{
  position:fixed;right:1.25rem;bottom:2rem;z-index:450;
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;
}
@media(max-width:760px){
  .fab-uzum{bottom:1.5rem;right:1rem}
  .fab-uzum__mark{width:3rem;height:3rem}
  .fab-uzum__tip{display:none}
}
.fab-uzum__mark{
  width:3.25rem;height:3.25rem;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(112,0,255,.35);
  transition:transform var(--t),box-shadow var(--t);
  overflow:hidden;
}
.fab-uzum__mark svg{width:100%;height:100%;display:block}
.fab-uzum__tip{
  background:var(--ink);color:#fff;
  font-size:.8125rem;font-weight:600;
  padding:.35rem .75rem;border-radius:var(--r-f);
  white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateX(6px);
  transition:opacity var(--t),transform var(--t);
  order:-1;
}
.fab-uzum:hover .fab-uzum__mark{transform:scale(1.1);box-shadow:0 6px 28px rgba(255,79,50,.55)}
.fab-uzum:hover .fab-uzum__tip{opacity:1;transform:translateX(0)}

.btn--tg{background:#229ED9;color:#fff;border-color:#229ED9}
.btn--tg:hover{background:#1A8CC2;border-color:#1A8CC2;transform:translateY(-2px);box-shadow:0 8px 28px rgba(34,158,217,.45)}