/* ═══════════════════════════════════════════════════════════
   NOVERA — лендинг. Оформление собрано по макетам «э1…э8»:
   синий градиент, светло-голубой лабораторный фон, тяжёлые
   заголовки, белые карточки со скруглением.
   Все цвета — токенами в :root, правки только здесь.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:        #0B1220;
  --ink-80:     #223049;
  --ink-60:     #46556B;
  --muted:      #7F8CA3;
  --line:       #E2EAF4;
  --line-soft:  #EFF4FA;
  --bg:         #FFFFFF;
  --bg-soft:    #F1F7FE;
  --bg-dark:    #071326;

  --blue:       #0A66F5;
  --blue-2:     #008EFE;
  --blue-deep:  #005CFD;
  --blue-wash:  #E8F2FE;
  --grad:       linear-gradient(135deg, #005CFD 0%, #008EFE 100%);

  --warn:       #E2574C;
  --warn-wash:  #FDF1F0;
  --ok:         #2F9E6B;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --band: clamp(260px, 36vh, 380px);
  --gut:  clamp(18px, 4vw, 56px);
  --max:  1280px;

  --disp: 'Montserrat', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease:  cubic-bezier(.22,.78,.26,1);

  --sh-sm: 0 1px 2px rgba(11,18,32,.04), 0 4px 14px rgba(11,18,32,.05);
  --sh:    0 2px 6px rgba(11,18,32,.04), 0 16px 40px rgba(16,56,120,.10);
  --sh-lg: 0 4px 12px rgba(11,18,32,.05), 0 30px 70px rgba(16,56,120,.16);
  --sh-blue: 0 10px 30px rgba(10,102,245,.32);
}

*,*::before,*::after{ box-sizing:border-box; }

/* clip, а не hidden: hidden создаёт скролл-контейнер и ломает position:sticky */
html{ scroll-behavior:smooth; scroll-padding-top:88px; overflow-x:clip; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}

/* height:auto обязателен: атрибут height у <img> иначе растягивает картинку */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--disp); font-weight:800; line-height:1.04; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
dd{ margin:0; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:900px; }

/* ── типографика ───────────────────────────────────────────── */
.h1{ font-size:clamp(30px, 4.3vw, 52px); text-transform:uppercase; font-weight:900; letter-spacing:-.025em; }
.h1 span{ display:block; }
.h2{ font-size:clamp(27px, 3.9vw, 50px); text-transform:uppercase; font-weight:900; }
.h2--inv{ color:#fff; }
.accent{ color:var(--blue); }

.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-60); margin-bottom:18px; display:flex; align-items:center; gap:14px;
}
.eyebrow::after{ content:''; flex:1; max-width:90px; height:1px; background:var(--line); }
.eyebrow--inv{ color:rgba(255,255,255,.6); }
.eyebrow--inv::after{ background:rgba(255,255,255,.2); }

.lead{ font-size:clamp(16px,1.8vw,19px); color:var(--ink-60); margin-top:18px; max-width:56ch; }
.lead--inv{ color:rgba(255,255,255,.66); }
.lead--center{ margin-inline:auto; text-align:center; }
.src{ margin-top:28px; font-size:13px; line-height:1.55; color:var(--muted); }
.src--inv{ color:rgba(255,255,255,.44); }

/* ── иконки ────────────────────────────────────────────────── */
.ico{
  width:26px; height:26px; flex-shrink:0;
  fill:none; stroke:var(--blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.ico--sm{ width:19px; height:19px; }

/* ── кнопки ────────────────────────────────────────────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 34px; border-radius:100px; border:1px solid transparent;
  background:var(--grad); color:#fff; box-shadow:var(--sh-blue);
  font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), filter .3s var(--ease);
}
.btn i{ font-style:normal; transition:transform .45s var(--ease); }
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(10,102,245,.42); }
.btn:hover i{ transform:translateX(4px); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(-1px); transition-duration:.12s; }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn--ghost:hover{ border-color:var(--blue); box-shadow:var(--sh); }
.btn--sm{ padding:12px 24px; font-size:15px; }
.btn--wide{ width:100%; padding:19px 34px; }

/* ── фон-меш ───────────────────────────────────────────────── */
.mesh{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(0,142,254,.16), transparent 70%),
    radial-gradient(45% 45% at 12% 8%,  rgba(0,92,253,.10),  transparent 70%),
    radial-gradient(60% 60% at 50% 100%, rgba(0,142,254,.10), transparent 70%),
    linear-gradient(180deg, #F4F9FF 0%, #FFFFFF 62%);
}
.mesh--order{ background:
    radial-gradient(55% 55% at 85% 20%, rgba(0,142,254,.18), transparent 70%),
    radial-gradient(50% 50% at 10% 85%, rgba(0,92,253,.10), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%); }

/* ── шапка ─────────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 2px 26px rgba(16,56,120,.07); }
.hdr__in{ display:flex; align-items:center; gap:26px; height:74px; }

.logo{ text-decoration:none; display:flex; flex-direction:column; line-height:1; flex-shrink:0; }
.logo__name{ font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:.2em; }
.logo__sub{ font-size:10px; letter-spacing:.2em; color:var(--muted); margin-top:5px; text-transform:uppercase; }
.logo__name--inv{ color:#fff; }
.logo__sub--inv{ color:rgba(255,255,255,.5); }

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ position:relative; text-decoration:none; font-size:15px; font-weight:600; color:var(--ink-60); transition:color .3s var(--ease); }
.nav a::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--grad); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

.burger{ display:none; width:42px; height:42px; border:0; background:none; cursor:pointer; padding:11px; }
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease); }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ── главный экран ─────────────────────────────────────────── */
.hero{ position:relative; padding:calc(74px + clamp(30px,5vw,64px)) 0 clamp(36px,5vw,64px); overflow:hidden; }
.hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(20px,4vw,56px); align-items:center; }
.hero__sub{ margin-top:22px; font-size:clamp(18px,2.1vw,23px); font-weight:800; }
.hero__lead{ margin-top:10px; font-size:clamp(16px,1.8vw,18px); color:var(--ink-60); max-width:46ch; }

.pills{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pills li{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); font-size:14px; font-weight:700; line-height:1.25;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pills li:hover{ transform:translateY(-3px); box-shadow:var(--sh); }

.hero__buy{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.5vw,34px); margin-top:34px; }
.price{ font-family:var(--disp); font-weight:900; font-size:clamp(36px,4.6vw,56px); letter-spacing:-.03em; line-height:1; }
.price span{ font-size:.72em; }
.hero__cta{ display:flex; flex-direction:column; gap:10px; }

/* фото снято на своём фоне: растушёвываем края, иначе на странице
   видно прямоугольник чужой подложки */
.hero__shot img{
  width:100%;
  -webkit-mask-image:radial-gradient(112% 104% at 50% 50%, #000 42%, transparent 86%);
          mask-image:radial-gradient(112% 104% at 50% 50%, #000 42%, transparent 86%);
}

.facts{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,3vw,40px);
  margin-top:clamp(26px,4vw,48px); padding-top:clamp(22px,3vw,34px); border-top:1px solid var(--line);
}
.facts li{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 16px; align-items:center; }
.facts__ico{
  grid-row:span 2; display:grid; place-items:center; width:54px; height:54px;
  border-radius:50%; background:var(--blue-wash);
}
.facts b{ font-family:var(--disp); font-size:clamp(19px,2.2vw,26px); font-weight:800; align-self:end; }
.facts span:not(.facts__ico){ font-size:14px; color:var(--ink-60); align-self:start; }

/* ── секции ────────────────────────────────────────────────── */
.sect{ position:relative; padding:clamp(56px,8vw,118px) 0; }
.sect--soft{ background:var(--bg-soft); }
.sect--dark{ background:var(--bg-dark); color:#fff; }
.sect--order{ overflow:hidden; }
.sect--order .wrap{ position:relative; z-index:1; }
.sect__head{ margin-bottom:clamp(30px,4vw,52px); }
.sect__head--center{ text-align:center; }
.sect__head--center .eyebrow{ justify-content:center; }
.sect__head--center .eyebrow::before{ content:''; flex:1; max-width:90px; height:1px; background:var(--line); }

/* ── двухколоночные блоки ──────────────────────────────────── */
.split{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(24px,4vw,64px); align-items:center; }
.split--chart{ grid-template-columns:.78fr 1.22fr; align-items:start; }
.split--lab{ grid-template-columns:1.12fr .88fr; align-items:start; }
.split__text .btn{ margin-top:30px; }

/* ── таблица сравнения ─────────────────────────────────────── */
.tbl-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; }
.tbl{ width:100%; border-collapse:collapse; }
.tbl th,.tbl td{ padding:16px 18px; text-align:center; font-size:15px; }
.tbl th:first-child,.tbl td:first-child{ text-align:left; font-weight:600; color:var(--ink-60); }
.tbl thead th{ font-family:var(--disp); font-weight:800; font-size:15px; padding-top:22px; }
.tbl thead th i{ display:block; font-style:normal; font-family:var(--font); font-weight:500; font-size:12px; color:var(--muted); margin-top:4px; }
.tbl tbody tr{ border-top:1px solid var(--line-soft); }
.tbl .is-own{ background:var(--blue-wash); color:var(--blue-deep); font-weight:800; }
.tbl thead .is-own{ color:var(--blue); border-radius:var(--r) var(--r) 0 0; }
.tbl__src{ padding:16px 18px; font-size:12px; line-height:1.55; color:var(--muted); background:var(--line-soft); }

.pen-shelf{ margin:clamp(26px,4vw,48px) auto; max-width:900px; }
.pen-shelf img{ width:100%; mix-blend-mode:multiply; }

/* ── плитки ────────────────────────────────────────────────── */
.tiles{ display:grid; gap:16px; margin-top:clamp(24px,3vw,40px); }
.tiles--3{ grid-template-columns:repeat(3,1fr); }
.tiles--4{ grid-template-columns:repeat(4,1fr); }
.tiles--5{ grid-template-columns:repeat(5,1fr); }
.tiles--6{ grid-template-columns:repeat(6,1fr); }
.tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:26px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.tile:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:rgba(10,102,245,.3); }
.tile__ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--blue-wash); margin-bottom:4px; }
.tile b{ font-size:16px; font-weight:800; line-height:1.25; }
.tile span:not(.tile__ico){ font-size:13px; color:var(--ink-60); line-height:1.45; }
.tile--sm{ padding:20px 14px; }
.tile--sm b{ font-size:14px; }
.tiles--inv .tile{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.tiles--inv .tile:hover{ background:rgba(255,255,255,.08); border-color:rgba(0,142,254,.5); transform:translateY(-5px); }
.tiles--inv .tile__ico{ background:rgba(0,142,254,.16); }
.tiles--inv .tile b{ color:#fff; }
.tiles--inv .tile span:not(.tile__ico){ color:rgba(255,255,255,.6); }

/* ── столбики и график ─────────────────────────────────────── */
.bars{ margin-top:34px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:24px; }
.bars__h{ font-size:15px; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:22px; }
.bars__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; height:230px; }
.bar{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px; height:100%; }
.bar b{ font-family:var(--disp); font-size:clamp(22px,2.6vw,32px); font-weight:900; color:rgba(255,255,255,.75); }
.bar i{
  display:block; width:100%; max-width:120px; border-radius:10px 10px 0 0;
  background:rgba(255,255,255,.18); height:0;
  transition:height 1.1s var(--ease);
}
.bars.is-in .bar i{ height:calc(var(--h) * .66); }
.bar span{ font-size:13px; color:rgba(255,255,255,.6); }
.bar--own b{ color:#fff; }
.bar--own i{ background:var(--grad); box-shadow:0 0 36px rgba(0,142,254,.5); }

.chart{ margin:0; color:var(--ink); background:#fff; border-radius:var(--r-lg); padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-lg); }
.chart figcaption{ margin-bottom:10px; }
.chart figcaption b{ display:block; font-family:var(--disp); font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.chart figcaption span{ font-size:13px; color:var(--muted); }
.chart svg{ width:100%; height:auto; }
.chart__grid line{ stroke:var(--line); stroke-width:1; }
.chart__ylab text,.chart__xlab text{ font:500 13px var(--font); fill:var(--muted); text-anchor:middle; }
.chart__ylab text{ text-anchor:end; }
.chart__axis{ font-size:12px !important; }
.chart__line{ fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.chart__line--pl{ stroke:#9FB0C6; stroke-width:3; }
.chart__fill{ opacity:0; transition:opacity .8s .5s var(--ease); }
.chart.is-in .chart__fill{ opacity:1; }
.chart__line{ stroke-dasharray:900; stroke-dashoffset:900; }
.chart.is-in .chart__line{ animation:draw 1.5s var(--ease) forwards; }
.chart.is-in .chart__line--pl{ animation-delay:.2s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.chart__dot{ fill:var(--blue); opacity:0; transition:opacity .4s 1.3s var(--ease); }
.chart__dot--pl{ fill:#9FB0C6; }
.chart.is-in .chart__dot{ opacity:1; }
.chart__legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; font-size:13px; color:var(--ink-60); }
.chart__legend li{ display:flex; align-items:center; gap:8px; }
.chart__legend i{ width:14px; height:4px; border-radius:2px; background:#9FB0C6; }
.chart__legend .is-own i{ background:var(--grad); }

/* ── сравнение ручек ───────────────────────────────────────── */
.versus{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2vw,26px); align-items:stretch; }
.versus::before{ display:none; }
.vs{ border-radius:var(--r-xl); padding:clamp(22px,2.6vw,34px); border:1px solid; }
.vs--bad{ background:linear-gradient(180deg,#FFF6F5,#FFFCFC); border-color:#F6D9D5; }
.vs--good{ background:linear-gradient(180deg,#EEF6FF,#F8FBFF); border-color:#CFE4FD; grid-column:3; }
.vs__top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:20px; }
.vs__top h3{ font-size:clamp(17px,1.9vw,21px); text-transform:uppercase; }
.vs--good .vs__top h3 b{ color:var(--blue); }
.vs__tag{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:7px 13px; border-radius:100px; }
.vs--bad .vs__tag{ background:var(--warn); color:#fff; }
.vs--good .vs__tag{ background:var(--grad); color:#fff; }
.vs__pic{ margin:0; }
.vs__pic img{
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.vs__pins{ display:flex; justify-content:space-around; gap:10px; margin-top:10px; }
.vs__pins span{ font-size:12px; font-weight:700; color:var(--blue-deep); background:#fff; border:1px solid #CFE4FD; border-radius:100px; padding:6px 12px; }
.vs__note{ margin-top:14px; text-align:center; font-size:14px; color:var(--ink-60); }
.vs__list{ display:grid; gap:10px; margin-top:20px; }
.vs__list li{ position:relative; padding:14px 16px 14px 46px; background:#fff; border-radius:var(--r-sm); font-size:14px; }
.vs__list li::before{
  content:''; position:absolute; left:16px; top:50%; translate:0 -50%;
  width:18px; height:18px; border-radius:50%; background:var(--warn-wash); box-shadow:inset 0 0 0 2px var(--warn);
}
.vs__list--ok li::before{ background:var(--blue-wash); box-shadow:inset 0 0 0 2px var(--blue); }

/* ══════════ ЗАКРЕПЛЁННАЯ ПОЛОСА С РАЗБОРКОЙ РУЧКИ ══════════ */
.exp{ position:relative; margin-top:clamp(40px,6vw,80px); }
.exp__pin{
  position:sticky; top:74px; z-index:20; height:var(--band);
  display:flex; align-items:center; background:#fff;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 20px 28px -26px rgba(11,18,32,.35);
  overflow:hidden;                 /* детали улетают за край и обрезаются здесь */
}
.exp__bar{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:clamp(12px,2.2vh,26px); }
.exp__bar > .pin{ position:absolute; }

.exp__scene{ position:relative; }
.rig{ position:relative; width:100%; aspect-ratio:1569/251; margin:0 auto; }
.part{
  position:absolute; left:50%; top:50%; width:100%;
  mix-blend-mode:multiply;
  transform:
    translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px)))
    scale(var(--s,1)) rotate(var(--r,0deg));
  opacity:var(--o,0); will-change:transform,opacity;
}
/* доли длины собранной ручки: внутри корпуса кассета, внутри кассеты картридж */
.part--full  { width:100%; }
.part--holder{ width:62%;  }
.part--cart  { width:46%;  }

.pin{
  z-index:3; display:flex; align-items:center; gap:10px;
  opacity:var(--o,0); transform:translateY(var(--ty,10px));
  transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none;
}
.pin__dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(10,102,245,.16); flex-shrink:0; }
.pin__txt{ display:flex; flex-direction:column; font-size:13px; color:var(--ink-60); line-height:1.35; }
.pin__txt b{ font-size:15px; color:var(--ink); }
.pin__txt i{ font-style:normal; }
.pin--powder{ left:13%; top:0; }
.pin--liquid{ right:10%; bottom:66px; flex-direction:row-reverse; }
.pin--liquid .pin__txt{ align-items:flex-end; }

.exp__cap{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.caps{ position:relative; flex:1; height:34px; }
.cap{
  position:absolute; left:0; top:0; right:0; height:100%;
  display:flex; align-items:center; gap:12px;
  font-family:var(--disp); font-size:clamp(17px,1.9vw,24px); font-weight:800; text-transform:uppercase;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.cap.is-on{ opacity:1; transform:none; }
.cap b{ font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--blue); }

.exp__rail{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line-soft); }
.exp__rail i{ display:block; width:0; height:100%; background:var(--grad); transition:width .1s linear; }

/* min-height задаёт длину анимации: разборка идёт полтора экрана
   независимо от того, сколько текста в шагах */
.exp__flow{ min-height:150vh; display:flex; align-items:center; padding:clamp(40px,6vw,80px) 0; }
.exp__flow > .wrap{ width:100%; }
.exp__flow .steps{ display:grid; gap:20px; max-width:860px; margin-inline:auto; }
.step{
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.step:hover{ transform:translateX(5px); box-shadow:var(--sh); }
.step__n{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--grad); color:#fff; font-family:var(--disp); font-weight:800; font-size:16px;
}
.step h3{ font-size:18px; margin-bottom:6px; }
.step p{ font-size:15px; color:var(--ink-60); }

/* ── комплектация ──────────────────────────────────────────── */
.kit{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(18px,2.5vw,32px); align-items:start; }
.kit__hero{ margin:0; position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(16px,2vw,26px); box-shadow:var(--sh); }
.kit__hero img{ width:100%; border-radius:var(--r); }
.kit__hero figcaption{
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:center;
  margin-top:16px; padding:16px 18px; background:var(--blue-wash); border-radius:var(--r);
}
.kit__ico{ grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; }
.kit__hero figcaption b{ font-size:15px; align-self:end; }
.kit__hero figcaption span:not(.kit__ico){ font-size:13px; color:var(--ink-60); align-self:start; }

.kit__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.kit__card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.kit__card:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:rgba(10,102,245,.3); }
.kit__card figure{ margin:0 0 8px; display:grid; place-items:center; height:140px; }
.kit__card img{
  max-height:140px; width:auto;
  -webkit-mask-image:radial-gradient(118% 112% at 50% 50%, #000 52%, transparent 92%);
          mask-image:radial-gradient(118% 112% at 50% 50%, #000 52%, transparent 92%);
}
.kit__card b{ font-size:15px; }
.kit__card span{ font-size:13px; color:var(--ink-60); }
.kit__card:first-child{ grid-column:span 2; }
.kit__card:first-child figure{ height:170px; }
.kit__card:first-child img{ max-height:170px; }

/* ── лаборатория ───────────────────────────────────────────── */
.lab__res{ margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,2.2vw,26px); box-shadow:var(--sh-sm); }
.lab__h{ font-family:var(--disp); font-weight:800; font-size:16px; text-transform:uppercase; margin-bottom:14px; }
.lab__res dl > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 12px; border-radius:var(--r-sm); font-size:14px; }
.lab__res dl > div:nth-child(odd){ background:var(--line-soft); }
.lab__res dt{ color:var(--ink-60); }
.lab__res dd{ font-weight:700; text-align:right; }
.lab__res .is-hl{ background:#EAF8F0 !important; }
.lab__res .is-hl dd{ color:var(--ok); }
.lab__res .is-hl dd b{ font-size:17px; }
.lab__verify{
  display:flex; flex-direction:column; gap:4px; margin-top:16px; padding:14px 16px;
  background:var(--blue-wash); border-radius:var(--r-sm); text-decoration:none;
  font-size:14px; font-weight:700; color:var(--blue-deep);
  transition:background .3s var(--ease);
}
.lab__verify:hover{ background:#DCEBFD; }
.lab__verify i{ font-style:normal; }
.lab__verify span{ font-weight:500; font-size:12px; color:var(--ink-60); }
.lab__verify b{ font-weight:700; letter-spacing:.06em; }

.lab__doc{ margin:0; }
.lab__doc img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-lg); }
.lab__doc figcaption{ margin-top:12px; text-align:center; font-size:13px; color:var(--muted); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq{ display:grid; gap:10px; }
.faq__i{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.faq__i:hover{ border-color:rgba(10,102,245,.3); }
.faq__i summary{ cursor:pointer; list-style:none; padding:22px 58px 22px 26px; position:relative; font-weight:700; font-size:17px; }
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::after{
  content:''; position:absolute; right:26px; top:27px; width:11px; height:11px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .4s var(--ease), border-color .3s var(--ease);
}
.faq__i[open] summary::after{ transform:rotate(-135deg); border-color:var(--blue); }
.faq__i[open]{ border-color:rgba(10,102,245,.35); box-shadow:var(--sh-sm); }
.faq__i p{ padding:0 26px 26px; color:var(--ink-60); font-size:16px; }

/* ── партнёрам ─────────────────────────────────────────────── */
.partner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,56px); align-items:center; background:var(--bg-soft); border-radius:var(--r-xl); padding:clamp(24px,3.5vw,52px); }
.partner__pic{ margin:0; }
.partner__pic img{ width:100%; border-radius:var(--r-lg); }
.partner__pic{ overflow:hidden; border-radius:var(--r-lg); }

/* ── форма партнёрки ───────────────────────────────────────── */
.pform{ margin-top:30px; }
.pform > summary{ list-style:none; display:inline-flex; cursor:pointer; }
.pform > summary::-webkit-details-marker{ display:none; }
.pform[open] > summary i{ transform:rotate(90deg); }
.pform__body{
  margin-top:22px; padding:clamp(20px,2.4vw,28px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  animation:pdrop .45s var(--ease);
}
@keyframes pdrop{ from{ opacity:0; transform:translateY(-10px); } }
.pform__terms{ display:grid; gap:10px; margin-bottom:22px; }
.pform__terms li{ position:relative; padding-left:28px; font-size:15px; color:var(--ink-60); }
.pform__terms li::before{
  content:''; position:absolute; left:0; top:7px; width:16px; height:16px; border-radius:50%;
  background:var(--blue-wash); box-shadow:inset 0 0 0 2px var(--blue);
}
.form--partner{ margin-top:0; max-width:none; }

/* ловушка для спам-ботов: не видна человеку, но доступна автозаполнению робота */
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

/* ── заявка ────────────────────────────────────────────────── */
.order{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; }
.order__price{ display:flex; align-items:center; gap:18px; margin-top:26px; }
.order__price b{ font-family:var(--disp); font-weight:900; font-size:clamp(32px,4.2vw,50px); letter-spacing:-.03em; line-height:1; }
.order__price b span{ font-size:.72em; }
.order__price i{ font-style:normal; font-size:14px; color:var(--ink-60); padding-left:18px; border-left:1px solid var(--line); }
.order__pic{ display:grid; place-items:center; }
.order__pic img{ width:106%; max-width:none; transform:rotate(-6deg); mix-blend-mode:multiply; }

.form{ margin-top:28px; display:grid; gap:14px; max-width:560px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fld{ display:grid; gap:7px; }
.fld > span{ font-size:14px; font-weight:600; }
.fld i{ font-style:normal; font-weight:400; color:var(--muted); }
.fld input,.fld textarea{
  font:inherit; font-size:16px; padding:15px 17px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); resize:vertical;
}
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,102,245,.12); }
.fld.is-bad input,.fld.is-bad textarea{ border-color:var(--warn); }
.chk{ display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--ink-60); margin-top:2px; }
.chk input{ width:19px; height:19px; margin:1px 0 0; flex-shrink:0; accent-color:var(--blue); }
.chk.is-bad span{ color:var(--warn); }
.chk a{ color:var(--blue-deep); }
.form__msg{ font-size:15px; min-height:22px; }
.form__msg.is-ok{ color:var(--ok); }
.form__msg.is-err{ color:var(--warn); }
.form__alt{ font-size:14px; color:var(--muted); }
.form__alt a{ color:var(--blue-deep); font-weight:700; }

/* ── подвал ────────────────────────────────────────────────── */
.ftr{ background:var(--bg-dark); color:#fff; padding:clamp(44px,6vw,76px) 0 32px; }
.ftr__in{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start; }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:12px 24px; max-width:620px; }
.ftr__nav a,.ftr__contacts a{ color:rgba(255,255,255,.6); text-decoration:none; font-size:15px; transition:color .3s var(--ease); }
.ftr__nav a:hover,.ftr__contacts a:hover{ color:#fff; }
.ftr__brand{ display:flex; flex-direction:column; }
.ftr__legal{ margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; line-height:1.6; color:rgba(255,255,255,.44); }
.ftr__legal b{ color:rgba(255,255,255,.72); }
.ftr__req{ margin-top:14px; font-size:11px; letter-spacing:.06em; }

/* ── плавающая кнопка ──────────────────────────────────────── */
.fab{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%); z-index:46; display:none;
  padding:15px 34px; border-radius:100px; background:var(--grad); color:#fff;
  font-weight:700; font-size:16px; text-decoration:none; box-shadow:var(--sh-blue);
  transition:transform .5s var(--ease);
}
.fab.is-on{ transform:translate(-50%,0); }

/* ── появление при скролле ─────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ══════════════ АДАПТИВ ══════════════ */
@media (max-width: 1180px){
  .tiles--5,.tiles--6{ grid-template-columns:repeat(3,1fr); }
  .split,.split--chart,.split--lab{ grid-template-columns:1fr; }
  .split__text{ max-width:760px; }
  .chart{ order:2; }
}

@media (max-width: 1000px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__shot{ max-width:560px; margin:clamp(20px,4vw,32px) auto 0; }
  .versus{ grid-template-columns:1fr; }
  .vs--good{ grid-column:1; }
  .kit,.partner,.order{ grid-template-columns:1fr; }
  .tiles--4{ grid-template-columns:repeat(2,1fr); }
  .facts{ grid-template-columns:1fr; gap:18px; }
  .form{ max-width:none; }
}

@media (max-width: 900px){
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px var(--gut) 20px; display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line-soft); font-size:17px; }
  .nav a::after{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .hdr .btn--sm{ display:none; }
  .fab{ display:block; }

  :root{ --band: clamp(200px, 28vh, 260px); }
  .exp__pin{ top:74px; }
  .cap{ font-size:18px; }
  .pin--powder{ left:var(--gut); right:auto; top:0; bottom:auto; }
  .pin--liquid{ right:var(--gut); left:auto; top:0; bottom:auto; }
  .pin__txt i{ display:none; }
  .pin__txt b{ font-size:13px; }

  /* таблица влезает целиком: фиксированные доли колонок и мелкий кегль.
     Ни бокового скролла, ни разбивки на карточки — все четыре колонки сразу. */
  .tbl-wrap{ overflow:visible; }
  .tbl{ table-layout:fixed; width:100%; }
  .tbl th,.tbl td{ padding:9px 3px; font-size:10.5px; line-height:1.32; overflow-wrap:break-word; }
  .tbl th:first-child,.tbl td:first-child{ width:28%; padding-left:9px; font-size:10px; }
  .tbl th:not(:first-child),.tbl td:not(:first-child){ width:24%; }
  /* заголовки — текстовым шрифтом: Montserrat 800 шире и рвёт «Семаглутид» пополам */
  .tbl thead th{ font-family:var(--font); font-weight:700; font-size:10.5px; letter-spacing:-.01em; padding-top:14px; }
  .tbl thead th i{ font-size:9px; margin-top:2px; font-weight:400; }
  .tbl td:last-child{ padding-right:10px; }
  /* своя колонка жирная и оттого шире — на телефоне чуть легче, чтобы слова не рвались */
  .tbl .is-own{ font-weight:700; }
  .tbl__src{ padding:12px 10px; font-size:10px; }
}

@media (max-width: 620px){
  body{ font-size:16px; }
  .tiles--3,.tiles--4,.tiles--5,.tiles--6,.kit__grid,.form__row{ grid-template-columns:1fr; }
  .kit__card:first-child{ grid-column:span 1; }
  .hero__cta,.hero__buy{ width:100%; }
  .hero__cta .btn{ width:100%; }
  .pills li{ width:100%; }
  .bars__row{ height:190px; }
  .order__price{ flex-direction:column; align-items:flex-start; gap:8px; }
  .order__price i{ padding-left:0; border-left:0; }
  .ftr__in{ flex-direction:column; }
}

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