:root{
  --ink:#0d1520; --body:#3f4c5c; --muted:#7b8798;
  --line:#e2e7ee; --bg:#ffffff; --soft:#f6f8fb;
  --navy:#0b1f3a; --accent:#0a6ed1; --cyan:#5ac8fa;
  --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.narrow{max-width:720px}
h1,h2,h3{color:var(--ink); line-height:1.2; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:700}
h2{font-size:clamp(1.4rem,3vw,1.9rem); font-weight:650}
h3{font-size:1.02rem; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 1.1em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ── research-use banner ── */
.ruo-bar{
  background:var(--navy); color:#c7d6ea; text-align:center;
  font-size:11px; letter-spacing:.09em; font-weight:600;
  padding:9px 16px;
}

/* ── nav ── */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--max); margin:0 auto; padding:18px 24px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:1.12rem; letter-spacing:-.02em}
.brand svg{width:30px; height:30px; border-radius:8px; display:block}
.brand em{font-style:normal; color:var(--accent)}
.nav nav{display:flex; align-items:center; gap:26px; font-size:.92rem}
.nav nav a{color:var(--body)}
.nav .cta{
  background:var(--navy); color:#fff; padding:9px 18px; border-radius:7px;
  font-weight:600; font-size:.88rem;
}
.nav .cta:hover{background:#123057; text-decoration:none}

/* ── hero ── */
.hero{
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
  border-bottom:1px solid var(--line);
  padding:76px 0 68px;
}
.eyebrow{
  color:var(--accent); font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; margin-bottom:16px;
}
.lede{font-size:1.1rem; max-width:600px; margin-bottom:28px}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.btn{
  display:inline-block; background:var(--navy); color:#fff;
  padding:13px 26px; border-radius:8px; font-weight:600; font-size:.94rem;
}
.btn:hover{background:#123057; text-decoration:none}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft)}
.micro{font-size:.8rem; color:var(--muted); margin:0}

/* ── strip ── */
.strip{background:var(--soft); border-bottom:1px solid var(--line); padding:44px 0}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px}
.grid-3 p{font-size:.93rem; margin:0}

/* ── sections ── */
.section{padding:64px 0}
.section.alt{background:var(--soft); border-block:1px solid var(--line)}
.link{font-weight:600; font-size:.94rem}

/* ── catalogue ── */
.products{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:20px; margin-top:32px}
.card{
  border:1px solid var(--line); border-radius:12px; padding:22px;
  background:#fff; display:flex; flex-direction:column;
}
.card h3{margin-bottom:4px}
.card .size{color:var(--muted); font-size:.84rem; margin-bottom:16px}
.spec{list-style:none; padding:0; margin:0 0 18px; font-size:.86rem}
.spec li{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line)}
.spec li:last-child{border-bottom:0}
.spec span{color:var(--muted)}
.spec b{color:var(--ink); font-weight:600}
.coa{
  margin-top:auto; display:inline-block; font-size:.85rem; font-weight:600;
  padding:9px 0; border-top:1px solid var(--line);
}
.pending{color:var(--muted); font-weight:500}

/* ── tables ── */
table{width:100%; border-collapse:collapse; font-size:.9rem; margin:20px 0}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line)}
th{background:var(--soft); color:var(--muted); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; font-weight:650}
td strong{color:var(--ink)}

/* ── notice box ── */
.notice{
  border:1px solid var(--line); border-left:3px solid var(--navy);
  background:var(--soft); border-radius:0 10px 10px 0; padding:20px 22px; margin:28px 0;
}
.notice p:last-child{margin-bottom:0}
.notice strong{color:var(--ink)}

/* ── footer ── */
footer{border-top:1px solid var(--line); padding:44px 0 32px; margin-top:8px}
.foot{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:28px}
.foot strong{color:var(--ink); display:block; margin-bottom:6px}
.foot > div:last-child{display:flex; flex-direction:column; gap:9px; font-size:.9rem}
.foot a{color:var(--body)}
.legal{border-top:1px solid var(--line); padding-top:22px}
.legal p{font-size:.8rem; color:var(--muted); margin-bottom:.8em}
.legal strong{color:var(--ink)}

@media (max-width:640px){
  .nav{flex-wrap:wrap; gap:14px}
  .nav nav{gap:18px; font-size:.88rem}
  .hero{padding:52px 0 46px}
}

/* ══════════ ФОРМУЛЯРИ ══════════ */
.form{margin-top:26px; max-width:560px}
.form label{display:block; margin-bottom:18px; font-size:.88rem; font-weight:600; color:var(--ink)}
.form .opt{font-weight:400; color:var(--muted)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  display:block; width:100%; margin-top:7px; padding:12px 14px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font:inherit; font-size:.94rem; font-weight:400; color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.form input:focus,.form textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,110,209,.12);
}
.form textarea{resize:vertical; min-height:96px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.form .check{
  display:flex; gap:11px; align-items:flex-start;
  font-weight:400; font-size:.85rem; color:var(--body); line-height:1.5;
}
.form .check input{margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--navy)}
.form button{border:0; cursor:pointer; font:inherit; font-weight:600; margin-bottom:10px}
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

/* ══════════ SCROLL АНИМАЦИИ ══════════ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ══════════ HERO ДВИЖЕНИЕ ══════════ */
.hero{position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2}
.hero::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:150%;
  background:
    radial-gradient(46% 40% at 22% 18%, rgba(10,110,209,.11), transparent 62%),
    radial-gradient(40% 36% at 82% 32%, rgba(90,200,250,.16), transparent 64%);
  animation:drift 22s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* пулсираща точка на живата лента */
.ruo-bar{position:relative}
.ruo-bar::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); margin-left:10px; vertical-align:middle;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35} 50%{opacity:1}}

/* ══════════ ИНТЕРАКТИВНИ КАРТИ ══════════ */
.card{transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px -14px rgba(11,31,58,.22);
  border-color:#c9d5e6;
}
.grid-3 > div{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.grid-3 > div:hover{transform:translateY(-3px)}

/* бутони */
.btn{transition:transform .18s cubic-bezier(.2,.7,.3,1), background .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(11,31,58,.45)}
.btn:active{transform:translateY(0)}

/* линия под линковете в навигацията */
.nav nav a:not(.cta){position:relative}
.nav nav a:not(.cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav nav a:not(.cta):hover{text-decoration:none}
.nav nav a:not(.cta):hover::after{transform:scaleX(1)}

/* прилепваща навигация */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(12px)}

/* ══════════ HERO ИЗОБРАЖЕНИЕ ══════════ */
.hero{padding-bottom:0}
.hero-img{
  position:relative; z-index:2; max-width:var(--max);
  margin:44px auto -1px; padding:0 24px;
}
.hero-img img{
  display:block; width:100%; height:auto; border-radius:14px 14px 0 0;
  border:1px solid var(--line); border-bottom:0;
  box-shadow:0 30px 60px -30px rgba(11,31,58,.34);
}

/* ══════════ ИЗОБРАЖЕНИЕ В КАРТА ══════════ */
.card{padding:0; overflow:hidden}
.card > :not(.card-img){margin-left:22px; margin-right:22px}
.card h3{margin-top:20px}
.card-img{margin:0; background:var(--soft); border-bottom:1px solid var(--line); overflow:hidden}
.card-img img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-img img{transform:scale(1.045)}
.card .coa{margin-bottom:18px}

/* ══════════ ЕТИКЕТ ВЪРХУ ФЛАКОНА ══════════ */
.card-img{position:relative}
.vial-tag{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(11,31,58,.10); border-radius:8px;
  padding:8px 13px; line-height:1.25;
  box-shadow:0 4px 14px -6px rgba(11,31,58,.28);
}
.vial-tag b{display:block; color:var(--ink); font-size:.88rem; font-weight:700; letter-spacing:-.01em}
.vial-tag span{display:block; color:var(--muted); font-size:.74rem; letter-spacing:.04em}

/* ═══════════ КОЛИЧКА ═══════════ */
.cart-btn{
  background:var(--navy); color:#fff; border:0; cursor:pointer;
  padding:9px 16px; border-radius:7px; font:inherit; font-weight:600; font-size:.88rem;
  display:inline-flex; align-items:center; gap:8px; transition:background .18s;
}
.cart-btn:hover{background:#123057}
.cart-btn [data-cart-count]{
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:rgba(255,255,255,.18); font-size:.74rem; line-height:19px; text-align:center;
  transition:background .25s, transform .25s;
}
.cart-btn [data-cart-count].has{background:var(--cyan); color:var(--navy); font-weight:700}

#tl-drawer{position:fixed; inset:0; z-index:90; pointer-events:none}
#tl-drawer .tl-scrim{
  position:absolute; inset:0; background:rgba(9,20,36,.42);
  opacity:0; transition:opacity .3s; backdrop-filter:blur(2px);
}
#tl-drawer .tl-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,100%);
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .38s cubic-bezier(.22,.75,.28,1);
  box-shadow:-18px 0 48px -24px rgba(11,31,58,.45);
}
#tl-drawer.on{pointer-events:auto}
#tl-drawer.on .tl-scrim{opacity:1}
#tl-drawer.on .tl-panel{transform:none}

.tl-panel header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.tl-panel header strong{color:var(--ink); font-size:1.02rem}
.tl-x{background:none; border:0; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--muted); padding:0 4px}
.tl-x:hover{color:var(--ink)}

.tl-lines{flex:1 1 auto; overflow-y:auto; padding:8px 22px}
.tl-empty{color:var(--muted); font-size:.92rem; padding:28px 0; text-align:center}
.tl-line{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.tl-line img{border-radius:7px; object-fit:cover; flex:0 0 auto; background:var(--soft)}
.tl-line-b{flex:1 1 auto; min-width:0}
.tl-line-b b{display:block; color:var(--ink); font-size:.92rem}
.tl-line-b > span{display:block; color:var(--muted); font-size:.79rem; margin-bottom:8px}
.tl-line em{font-style:normal; font-weight:650; color:var(--ink); font-size:.92rem; white-space:nowrap}
.tl-qty{display:flex; align-items:center; gap:2px}
.tl-qty button{
  width:26px; height:26px; border:1px solid var(--line); background:#fff; border-radius:6px;
  cursor:pointer; font:inherit; font-size:.95rem; color:var(--ink); line-height:1;
}
.tl-qty button:hover{border-color:var(--navy)}
.tl-qty span{min-width:26px; text-align:center; font-size:.87rem; font-weight:600; color:var(--ink)}
.tl-qty .tl-del{width:auto; padding:0 9px; margin-left:8px; border:0; font-size:.76rem; color:var(--muted)}
.tl-qty .tl-del:hover{color:#b3261e; border:0}

.tl-sum{flex:0 0 auto; padding:18px 22px 22px; border-top:1px solid var(--line); background:var(--soft)}
.tl-row{display:flex; justify-content:space-between; font-size:.9rem; padding:5px 0; color:var(--body)}
.tl-row b{color:var(--ink); font-weight:600}
.tl-total{border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-size:1.02rem}
.tl-total b{font-weight:700}
.tl-sum .btn{margin-top:14px}
.tl-nudge{font-size:.76rem; color:var(--muted); margin:10px 0 0; line-height:1.5}

.buy{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line)}
.price{font-size:1.18rem; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.add{
  background:var(--navy); color:#fff; border:0; cursor:pointer; font:inherit;
  font-weight:600; font-size:.86rem; padding:10px 18px; border-radius:7px;
  transition:background .18s, transform .12s;
}
.add:hover{background:#123057}
.add:active{transform:scale(.96)}
.add.added{background:#1a7f4b}

/* ═══════════ СЪЕДИНЕНИЯ ═══════════ */
.compound{
  border:1px solid var(--line); border-radius:12px; padding:26px 28px; margin:22px 0;
  background:#fff; transition:border-color .25s, box-shadow .25s, transform .25s;
}
.compound:hover{border-color:#cfd8e4; box-shadow:0 14px 34px -26px rgba(11,31,58,.5); transform:translateY(-2px)}
.compound header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px}
.compound h3{font-size:1.24rem; margin:0}
.compound .cls{color:var(--muted); font-size:.83rem; margin-bottom:14px; font-style:italic}
.compound p{font-size:.94rem}

.ev{
  display:inline-block; padding:5px 11px; border-radius:20px; white-space:nowrap;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.ev-4{background:#e3f4ea; color:#14663c}
.ev-3{background:#e5f0fb; color:#0a4f96}
.ev-2{background:#fdf1dd; color:#8a5a08}
.ev-1{background:#fbe6e4; color:#98241b}

.facts{list-style:none; padding:0; margin:18px 0 0; font-size:.85rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 26px}
.facts li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.facts span{color:var(--muted); flex:0 0 auto}
.facts b{color:var(--ink); font-weight:600; text-align:right}

/* ═══════════ ПРОВЕРКА НА ПАРТИДА ═══════════ */
.verify{background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; margin-top:22px}
.verify label{display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:9px}
.verify-row{display:flex; gap:10px; flex-wrap:wrap}
.verify-row input{
  flex:1 1 220px; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:.94rem; color:var(--ink); letter-spacing:.04em;
}
.verify-row input:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,110,209,.12)}
.verify-row .btn{padding:12px 24px; border:0; cursor:pointer; font:inherit; font-weight:600}
.verify-result{font-size:.9rem}
.verify-result:not(:empty){margin-top:18px; padding:18px 20px; border-radius:10px; animation:pop .35s cubic-bezier(.2,.8,.3,1)}
.verify-result table{margin:12px 0}
.verify-result .btn{margin-top:6px; display:inline-block}
.vr-head{font-weight:700; color:var(--ink); margin-bottom:8px; font-size:.98rem}
.verify-result.pass{background:#e9f6ee; border:1px solid #b9e0c8}
.verify-result.warn{background:var(--soft); border:1px solid var(--line)}
.verify-result.fail{background:#fdecea; border:1px solid #f2c2bd}
.verify-result code{background:rgba(11,31,58,.07); padding:2px 6px; border-radius:4px; font-size:.86em}
@keyframes pop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ═══════════ ДВИЖЕЩА СЕ ЛЕНТА ═══════════ */
.marquee{background:var(--navy); overflow:hidden; padding:15px 0; position:relative}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none}
.marquee::before{left:0;  background:linear-gradient(90deg,var(--navy),transparent)}
.marquee::after {right:0; background:linear-gradient(270deg,var(--navy),transparent)}
.marquee ul{display:flex; gap:52px; list-style:none; margin:0; padding:0; width:max-content; animation:slide 34s linear infinite}
.marquee li{
  color:#b9cce4; font-size:.79rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:12px;
}
.marquee li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan); flex:0 0 auto}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee:hover ul{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee ul{animation:none}}

/* ═══════════ СРАВНЕНИЕ ═══════════ */
.vs{width:100%; border-collapse:separate; border-spacing:0; margin:26px 0; font-size:.9rem}
.vs th,.vs td{padding:15px 16px; border-bottom:1px solid var(--line); text-align:left}
.vs thead th{background:transparent; border-bottom:2px solid var(--line); font-size:.76rem}
.vs thead th:nth-child(2){color:var(--navy)}
.vs tbody td:first-child{color:var(--body); font-weight:500}
.vs tbody td:nth-child(2){background:rgba(10,110,209,.045); font-weight:650; color:var(--ink)}
.vs tbody tr:last-child td{border-bottom:0}
.yes::before{content:"\2713  "; color:#1a7f4b; font-weight:800}
.no::before{content:"\2715  "; color:#b3261e; font-weight:800}
.no{color:var(--muted)}

/* ═══════════ ЧИСЛА ═══════════ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; margin:34px 0 6px}
.stat b{display:block; font-size:clamp(1.9rem,4.4vw,2.7rem); color:var(--ink); font-weight:700; letter-spacing:-.035em; line-height:1}
.stat span{display:block; color:var(--muted); font-size:.83rem; margin-top:8px; line-height:1.45}

/* ═══════════ ГЕРОЙ ═══════════ */
.hero{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:20px; padding:70px 0 64px}
.hero .wrap{max-width:calc(var(--max)/2 + 24px); margin:0 0 0 auto; padding-right:36px}
.hero-img{margin:0; position:relative; z-index:1}
.hero-img img{
  width:100%; height:clamp(320px,44vw,470px); object-fit:cover;
  border-radius:14px 0 0 14px; display:block;
  box-shadow:0 30px 70px -42px rgba(11,31,58,.6);
  animation:rise 1.1s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(26px) scale(.985)} to{opacity:1; transform:none}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr; padding:52px 0 0}
  .hero .wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
  .hero-img{margin-top:38px}
  .hero-img img{border-radius:0; height:clamp(240px,58vw,330px)}
}
@media(prefers-reduced-motion:reduce){.hero-img img{animation:none}}

/* ═══════════ КАРТИ ═══════════ */
.card{transition:border-color .25s, box-shadow .3s, transform .3s}
.card:hover{border-color:#cfd8e4; box-shadow:0 20px 44px -30px rgba(11,31,58,.55); transform:translateY(-3px)}
.card-img{margin:-22px -22px 18px; overflow:hidden; border-radius:12px 12px 0 0; background:var(--soft)}
.card-img img{width:100%; height:210px; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-img img{transform:scale(1.06)}

/* ═══════════════════════════════════════════════════════
   3D СКРОЛ
   Крием само когато JS е жив (.js-anim на <html>).
   Без JS страницата е напълно видима — това е нарочно.
   ═══════════════════════════════════════════════════════ */
.js-anim .reveal{
  opacity:0;
  transform:translateY(30px) rotateX(7deg) scale(.985);
  transform-origin:50% 100%;
  transition:opacity .78s cubic-bezier(.16,.72,.24,1),
             transform .78s cubic-bezier(.16,.72,.24,1);
  will-change:opacity, transform;
}
.js-anim .reveal.in{opacity:1; transform:none}
.js-anim .reveal.d1{transition-delay:.07s}
.js-anim .reveal.d2{transition-delay:.14s}
.js-anim .reveal.d3{transition-delay:.21s}

/* сцена с перспектива — дава на картите истинска дълбочина */
.products, .section .wrap, .strip .grid-3, .stats{perspective:1200px; perspective-origin:50% 42%}

/* картите се завъртат при влизане и после следят мишката */
.js-anim .products .card,
.js-anim .compound{
  transform-style:preserve-3d;
  transition:opacity .78s cubic-bezier(.16,.72,.24,1),
             transform .5s cubic-bezier(.2,.7,.3,1),
             border-color .25s, box-shadow .35s;
}
.card:hover{box-shadow:0 30px 60px -32px rgba(11,31,58,.55)}
.compound:hover{box-shadow:0 26px 52px -32px rgba(11,31,58,.5)}

/* снимката в картата получава лек 3D отстъп */
.card-img{transform:translateZ(0)}
.card:hover .card-img img{transform:scale(1.07)}

/* героят — паралакс се задава от JS, тук само основата */
.hero-img img{will-change:transform; backface-visibility:hidden}

/* ── лента за напредък на скрола ── */
.scroll-bar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--cyan));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}

/* ── слоеве с дълбочина (data-depth) ── */
[data-depth]{will-change:transform}

/* ── плаващи мехури зад героя ── */
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:340px; height:340px; right:-70px; bottom:-120px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%, rgba(90,200,250,.20), transparent 66%);
  filter:blur(14px);
  animation:float 17s ease-in-out infinite alternate;
}
@keyframes float{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(-26px,-32px,0) scale(1.13)}
}

/* ── числата: моноширина, за да не подскачат при навиване ── */
.stat b{font-variant-numeric:tabular-nums}

/* ── плавен скрол за котвите ── */
html{scroll-behavior:smooth}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim .reveal{opacity:1; transform:none; transition:none}
  .hero::after, .marquee ul{animation:none}
  .scroll-bar{display:none}
}

/* ═══════════════════════════════════════════════════════
   ПРЕМИУМ ПАЛИТРА
   Кремаво вместо бяло, мастилено вместо сиво, месинг вместо синьо.
   Конкуренцията е бяло-синя като аптека. Това е разликата.
   ═══════════════════════════════════════════════════════ */
:root{
  --ink:#17130e;
  --body:#4a4137;
  --muted:#8c8175;
  --line:#e6e0d6;
  --bg:#fdfcfa;
  --soft:#f6f2ec;
  --navy:#1c1712;
  --accent:#9a6b2f;
  --cyan:#c9a227;
  --brass:#9a6b2f;
}

body{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  letter-spacing:.004em;
}
h1,h2,h3,.brand,.eyebrow,.stat b,.price,.btn,.add,.cart-btn,.nav nav,.marquee li,
th,.ev,.vial-tag,.spec,.facts,.micro,.legal{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}
h1,h2{letter-spacing:-.028em}

.ruo-bar{background:var(--navy); color:#d9cdb8; letter-spacing:.13em}
.hero{background:linear-gradient(178deg,#f7f2e9 0%,var(--bg) 62%)}
.brand em{color:var(--brass)}
.eyebrow{color:var(--brass); letter-spacing:.14em}

.btn,.nav .cta,.cart-btn,.add{background:var(--navy)}
.btn:hover,.nav .cta:hover,.cart-btn:hover,.add:hover{background:#332a20}
.btn.ghost{background:transparent; border:1px solid #d8cfc0; color:var(--ink)}
.btn.ghost:hover{background:var(--soft); border-color:#c3b7a4}
.cart-btn [data-cart-count].has{background:var(--cyan); color:var(--navy)}

/* тънка месингова нишка над секциите — дребно, но се усеща */
.section.alt{position:relative}
.section.alt::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(154,107,47,.34),transparent);
}

.card,.compound{background:#fff; border-color:var(--line)}
.card:hover,.compound:hover{border-color:#d6c9b2}
.notice{border-left-color:var(--brass); background:var(--soft)}
.vial-tag{background:rgba(253,252,250,.94); border-color:rgba(23,19,14,.10)}
.vial-tag b{letter-spacing:.01em}
.scroll-bar{background:linear-gradient(90deg,var(--brass),var(--cyan))}
.marquee li::before{background:var(--cyan)}
.marquee li{color:#cbbda4}

.ev-4{background:#eaf0e6; color:#3f5730}
.ev-3{background:#f0ece2; color:#6b5a3c}
.ev-2{background:#f7eddc; color:#8a5f21}
.ev-1{background:#f6e3de; color:#8f3b2c}

.vs tbody td:nth-child(2){background:rgba(154,107,47,.055)}
.yes::before{color:var(--brass)}
.hero::after{background:radial-gradient(circle at 34% 32%, rgba(201,162,39,.17), transparent 66%)}
.hero::before{
  background:
    radial-gradient(46% 40% at 22% 18%, rgba(154,107,47,.10), transparent 62%),
    radial-gradient(40% 36% at 82% 32%, rgba(201,162,39,.13), transparent 64%);
}
.form input:focus,.form textarea:focus,.verify-row input:focus{
  border-color:var(--brass); box-shadow:0 0 0 3px rgba(154,107,47,.13);
}
.form .check input{accent-color:var(--navy)}

/* ═══════════════════════════════════════════════════════
   ЗЛАТО · СИВО · ЧЕРНО
   Три цвята и нищо повече. Останалото е разстояние и типография.
   ═══════════════════════════════════════════════════════ */
:root{
  --ink:#111111;
  --body:#4d4d4d;
  --muted:#8a8a8a;
  --line:#e4e2dd;
  --bg:#ffffff;
  --soft:#f6f5f2;
  --navy:#111111;
  --accent:#9c7f36;
  --cyan:#c0a052;
  --brass:#c0a052;
  --gold:#c0a052;
}

body{letter-spacing:.002em}
h1,h2{letter-spacing:-.03em; font-weight:600}
.brand{gap:11px; letter-spacing:-.03em}
.brand svg{width:32px; height:32px; border-radius:0; color:var(--ink)}
.brand em{color:var(--gold); font-weight:600}

.ruo-bar{background:var(--ink); color:#9a9384; letter-spacing:.15em; font-size:10px}
.eyebrow{color:var(--gold); letter-spacing:.16em; font-size:.72rem}
.hero{background:linear-gradient(180deg,#faf9f6 0%,var(--bg) 58%)}

/* тънка златна нишка под менюто — единственият декоративен елемент */
.nav{border-bottom:0; position:relative}
.nav::after{
  content:""; position:absolute; left:24px; right:24px; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(192,160,82,.42) 18%,rgba(192,160,82,.42) 82%,transparent);
}

.btn,.cart-btn,.add,.nav .cta{background:var(--ink); border-radius:2px}
.btn:hover,.cart-btn:hover,.add:hover,.nav .cta:hover{background:#2e2e2e}
.btn.ghost{background:transparent; border:1px solid #ddd9d0; color:var(--ink)}
.btn.ghost:hover{background:var(--soft); border-color:var(--gold)}
.cart-btn [data-cart-count].has{background:var(--gold); color:#fff}

.card,.compound{border-radius:2px; border-color:var(--line)}
.card:hover,.compound:hover{border-color:var(--gold)}
.card-img{border-radius:0}
.card-img img{filter:saturate(.86) contrast(1.04)}
.card:hover .card-img img{filter:saturate(1) contrast(1.06)}
.vial-tag{border-radius:1px; background:rgba(255,255,255,.95); border-color:rgba(17,17,17,.09)}
.vial-tag b{color:var(--ink)}

.price{font-weight:600; letter-spacing:-.02em}
.section.alt::before{background:linear-gradient(90deg,transparent,rgba(192,160,82,.4),transparent)}
.notice{border-left:2px solid var(--gold); border-radius:0; background:var(--soft)}
.scroll-bar{background:var(--gold); height:2px}
.marquee{background:var(--ink)}
.marquee li{color:#8e8779}
.marquee li::before{background:var(--gold)}

.ev{border-radius:1px; font-weight:600; letter-spacing:.07em}
.ev-4{background:#f1efe8; color:#5c5330}
.ev-3{background:#f4f3ef; color:#6a6656}
.ev-2{background:#f7f2e4; color:#836c30}
.ev-1{background:#f4ece9; color:#8a5546}

.stat b{font-weight:600; color:var(--ink)}
.vs tbody td:nth-child(2){background:rgba(192,160,82,.06)}
.yes::before{color:var(--gold)}
.no::before{color:#b9b3a6}
.hero::after{background:radial-gradient(circle at 34% 32%, rgba(192,160,82,.14), transparent 66%)}
.hero::before{background:radial-gradient(46% 40% at 24% 20%, rgba(192,160,82,.09), transparent 64%)}
.form input:focus,.form textarea:focus,.verify-row input:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,160,82,.14);
}
.form input,.form textarea,.verify-row input{border-radius:2px}
a{color:var(--accent)}

/* ═══════════ ПО-ПРЕМИУМ ═══════════ */
/* Флаконът вече носи марката — CSS етикетът пада. */
.vial-tag{display:none}

/* повече въздух, по-едра снимка, по-малко рамка */
.products{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:34px; margin-top:44px}
.card{padding:0 0 26px; border:0; background:transparent}
.card:hover{box-shadow:none; border:0}
.card-img{
  margin:0 0 22px; background:var(--soft); border:1px solid var(--line);
  border-radius:0; position:relative; overflow:hidden;
}
.card-img img{height:340px; object-fit:contain; padding:22px; mix-blend-mode:multiply}
.card:hover .card-img{border-color:var(--gold)}
.card:hover .card-img img{transform:scale(1.04)}
.card h3{padding:0 2px; font-size:1.1rem}
.card .size{padding:0 2px}
.card .spec,.card .coa,.card .buy{padding-left:2px; padding-right:2px}
.card .spec{border-top:1px solid var(--line); padding-top:14px}
.buy{border-top:0; padding-top:18px}

/* по-редакционна типография */
h1{font-weight:600; line-height:1.08}
.lede{font-size:1.16rem; line-height:1.62; color:var(--body)}
.section{padding:82px 0}
.wrap.narrow{max-width:700px}
.eyebrow{margin-bottom:20px}

/* героят — по-голям, по-тих */
.hero-img img{height:clamp(360px,48vw,540px); object-fit:contain;
  background:var(--soft); padding:34px; border-radius:0; mix-blend-mode:multiply}

@media(max-width:640px){
  .products{grid-template-columns:1fr; gap:40px}
  .card-img img{height:290px}
  .section{padding:58px 0}
}

/* ═══════════ СЛОГАН ═══════════ */
h1 .hl{color:var(--gold); display:inline-block}
h1 .hl::after{
  content:""; display:block; height:2px; margin-top:6px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  animation:rule 1s cubic-bezier(.2,.75,.3,1) .5s forwards;
}
@keyframes rule{to{transform:scaleX(1)}}

/* ═══════════ ДОВЕРИТЕЛНА ЛЕНТА ═══════════ */
.trust{border-block:1px solid var(--line); padding:38px 0; background:var(--bg)}
.trust-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px}
.trust-grid > div{position:relative; padding-left:16px}
.trust-grid > div::before{
  content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; background:var(--gold); opacity:.55;
}
.trust-grid b{display:block; color:var(--ink); font-size:1.02rem; font-weight:600; letter-spacing:-.02em; margin-bottom:5px}
.trust-grid span{display:block; color:var(--muted); font-size:.85rem; line-height:1.5}

/* ═══════════ ЗАТВАРЯЩ ПРИЗИВ ═══════════ */
.closer{background:var(--ink); color:#c9c3b6; padding:88px 0; position:relative; overflow:hidden}
.closer::before{
  content:""; position:absolute; inset:auto -10% -55% auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(192,160,82,.16), transparent 68%);
  animation:float 19s ease-in-out infinite alternate;
}
.closer .wrap{position:relative; z-index:1}
.closer h2{color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:16px}
.closer p{font-size:1.04rem; line-height:1.66; max-width:600px}
.closer .actions{margin-top:30px; margin-bottom:0}
.btn.light{background:var(--gold); color:#141210}
.btn.light:hover{background:#d0b165}
.btn.line{background:transparent; border:1px solid rgba(255,255,255,.26); color:#fff}
.btn.line:hover{border-color:var(--gold); background:rgba(192,160,82,.10)}

/* по-солидна лента с изследователската бележка */
.strip{background:var(--soft); padding:56px 0}
.strip h3{font-size:.98rem; margin-bottom:9px}

/* ═══════════ МОБИЛНО ═══════════ */
@media(max-width:760px){
  .nav{flex-wrap:nowrap; gap:10px; padding:14px 18px}
  .brand span{font-size:1rem}
  .brand svg{width:27px; height:27px}
  .nav nav{gap:0; margin-left:auto}
  /* на телефон менюто пада долу като лента — палецът стига до всичко */
  .nav nav a{display:none}
  .cart-btn{padding:9px 15px; font-size:.84rem}

  .mob-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:flex; background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .mob-bar a{
    flex:1; text-align:center; color:var(--muted); font-size:.66rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; padding:7px 2px; text-decoration:none;
  }
  .mob-bar a.on{color:var(--ink)}
  .mob-bar a::before{
    content:""; display:block; height:2px; width:20px; margin:0 auto 7px;
    background:transparent; border-radius:2px; transition:background .2s;
  }
  .mob-bar a.on::before{background:var(--gold)}
  body{padding-bottom:62px}
  #tl-drawer .tl-panel{width:100%}

  h1{font-size:clamp(1.75rem,8.5vw,2.3rem)}
  .lede{font-size:1.02rem}
  .section{padding:48px 0}
  .wrap{padding:0 20px}
  .hero{padding:38px 0 0}
  .hero-img img{height:clamp(230px,62vw,320px); padding:20px}
  .trust{padding:28px 0}
  .trust-grid{grid-template-columns:1fr 1fr; gap:18px}
  .trust-grid b{font-size:.92rem}
  .trust-grid span{font-size:.78rem}
  .stats{grid-template-columns:1fr 1fr; gap:26px}
  .closer{padding:60px 0}
  .actions{flex-direction:column}
  .actions .btn{width:100%; text-align:center}
  .facts{grid-template-columns:1fr}
  .compound{padding:22px 20px}
  .compound header{flex-direction:column; align-items:flex-start; gap:10px}

  /* широките таблици се плъзгат, а не разчупват страницата */
  .vs, table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
  .vs td:first-child, table td:first-child{white-space:normal; min-width:180px}

  /* по-едри цели за пръст */
  .add{padding:13px 22px; font-size:.9rem}
  .tl-qty button{width:34px; height:34px}
  .form input, .form textarea{font-size:16px; padding:14px}   /* 16px спира зуума на iOS */
}

@media(max-width:400px){
  .trust-grid, .stats{grid-template-columns:1fr}
}