/* ============================================================
   BRIOVI — версия 3. «Глубина и коралл».
   Морской коллаген: холодная глубина воды как фон,
   тёплый коралл продукта как единственный акцент.
   Контент ведёт, текст поддерживает. Ноль зависимостей.
   ============================================================ */

@import url("fonts.css");

:root{
  /* глубина */
  --deep-950:#14567F;
  --deep-900:#1B689D;
  --deep-800:#12507A;
  --deep-600:#2E80B4;
  --deep-400:#67AAD6;

  /* поверхность */
  --foam:#F6FAFE;
  --mist:#DEEDF9;
  --sand:#F7EDE3;
  --white:#fff;

  /* коралл — цвет продукта и желе */
  --coral-600:#E04A22;
  --coral-500:#FF6A45;
  --coral-300:#FFA98D;
  --coral-100:#FFE7DE;

  /* розовый с упаковки */
  --pink-500:#E85C8A;
  --pink-400:#F27BA0;
  --grad-pack:linear-gradient(140deg,#FF8A6B 0%,#F0688F 55%,#D94C86 100%);

  --sky:linear-gradient(165deg,#5FB2E2 0%,#2E86BE 52%,#1B689D 100%);

  --ink:#0D2637;
  --ink-600:#3C5C74;
  --ink-400:#6C8CA4;
  --ink-200:#A6C0D4;

  --pad:clamp(20px,5vw,80px);
  --maxw:1320px;

  --f-display:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-accent:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-ui:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);

  /* коралловый узор с упаковки */
  --coral-pattern:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M30 200c0-30 6-46 6-70 0-18-10-26-10-42 0-14 8-22 8-34'/%3E%3Cpath d='M36 130c8-8 18-10 26-22M36 104c-8-6-16-8-24-20'/%3E%3Cpath d='M110 210c0-40 8-58 8-86 0-20-12-30-12-48'/%3E%3Cpath d='M118 124c10-10 22-12 32-26M106 96c-10-8-20-10-30-24'/%3E%3Cpath d='M186 200c0-28 6-44 6-66 0-16-8-24-8-38'/%3E%3Cpath d='M192 134c8-8 16-10 24-20'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.10'%3E%3Ccircle cx='62' cy='60' r='2.4'/%3E%3Ccircle cx='150' cy='48' r='2'/%3E%3Ccircle cx='96' cy='38' r='1.6'/%3E%3Ccircle cx='176' cy='92' r='1.8'/%3E%3Ccircle cx='20' cy='86' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--f-text);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
p{margin:0}
::selection{background:var(--coral-500);color:#fff}

h1,h2,h3{font-family:var(--f-display);font-weight:300;margin:0;line-height:1.06;letter-spacing:-.022em}
h1 em,h2 em,h3 em{font-family:var(--f-accent);font-style:italic;font-weight:500;
  font-size:1.12em;letter-spacing:0;color:var(--coral-500)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(72px,10vw,150px);position:relative}
.sec--tight{padding-block:clamp(54px,7vw,96px)}

.d1{font-size:clamp(44px,8vw,120px)}
.d2{font-size:clamp(30px,4.2vw,56px)}
.d3{font-size:clamp(23px,2.6vw,36px)}
.tag{
  font-family:var(--f-ui);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--coral-600);display:block;margin-bottom:18px;
}
.tag--light{color:var(--coral-300)}
.lead{font-size:clamp(15.5px,1.3vw,17.5px);color:var(--ink-600);max-width:58ch;line-height:1.75}
.lead--light{color:rgba(255,255,255,.7)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.muted{color:var(--ink-400);font-size:13px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 34px;border-radius:999px;font-family:var(--f-ui);font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--coral-500);color:#fff;
  transition:background .35s var(--ease),transform .35s var(--ease),color .35s;
}
.btn:hover{background:var(--coral-600);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--deep-800);border-color:#fff}

.btn--deep{background:var(--deep-900)}
.btn--deep:hover{background:var(--deep-800)}
.btn--sm{padding:11px 22px;font-size:11.5px}
.btn--wide{width:100%}

/* ---------- шапка ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:80;padding:18px 0;color:#fff;
  transition:background .5s var(--ease),padding .5s var(--ease),color .5s,box-shadow .5s}
.hdr.is-stuck{background:rgba(255,255,255,.97);color:var(--ink);padding:10px 0;box-shadow:0 1px 0 rgba(13,38,55,.08)}
.hdr .btn{background:var(--coral-500)}
.hdr .btn:hover{background:var(--coral-600)}
.hdr__in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:22px}
.logo{font-family:var(--f-accent);font-weight:500;font-size:26px;letter-spacing:.32em;padding-left:.32em;line-height:1}
.nav{display:flex;gap:clamp(14px,1.9vw,30px);font-family:var(--f-ui);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase}
.nav a{position:relative;padding-block:5px;white-space:nowrap;opacity:.8;transition:opacity .3s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--coral-500);
  transition:right .45s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after{right:0}
.hdr__r{display:flex;align-items:center;gap:12px}
.hdr.is-stuck .btn{background:var(--deep-900)}
.hdr.is-stuck .btn:hover{background:var(--coral-500)}
.burger{display:none;width:42px;height:42px;place-items:center;border:1px solid currentColor;border-radius:999px;opacity:.8}
.burger span{display:block;width:16px;height:1.4px;background:currentColor;transition:transform .4s var(--ease),opacity .25s}
.burger span+span{margin-top:5px}
.burger.is-open span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:79;background:var(--deep-900);display:grid;place-content:center;gap:4px;
  text-align:center;clip-path:circle(0% at calc(100% - 44px) 44px);transition:clip-path .75s var(--ease)}
.mnav::before{content:"";position:absolute;inset:0;background:var(--coral-pattern);opacity:.5}
.mnav.is-open{clip-path:circle(150% at calc(100% - 44px) 44px)}
.mnav a{position:relative;font-family:var(--f-display);font-size:clamp(28px,8vw,44px);color:#fff;font-weight:300;
  padding-block:8px;opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mnav__buy{color:var(--coral-300)!important;font-style:italic}
.mnav.is-open a{opacity:1;transform:none}
.mnav.is-open a:nth-child(1){transition-delay:.16s}.mnav.is-open a:nth-child(2){transition-delay:.21s}
.mnav.is-open a:nth-child(3){transition-delay:.26s}.mnav.is-open a:nth-child(4){transition-delay:.31s}
.mnav.is-open a:nth-child(5){transition-delay:.36s}.mnav.is-open a:nth-child(6){transition-delay:.41s}
.mnav.is-open a:nth-child(7){transition-delay:.46s}

.progress{position:fixed;top:0;left:0;height:2px;z-index:90;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:var(--coral-500)}

/* ============================ HERO ============================ */
.hero{position:relative;background:var(--sky);overflow:hidden;color:#fff;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:100svh}
.hero::before{content:"";position:absolute;inset:0;background:var(--coral-pattern);opacity:.55;
  pointer-events:none;z-index:1}
.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,12vh,132px) clamp(24px,3.4vw,56px) clamp(40px,5vh,64px) var(--pad);
  max-width:760px;justify-self:end;width:100%}

/* «морской коллаген» — главная подпись, её видно раньше заголовка */
.hero__kicker{
  display:block;font-family:var(--f-ui);font-weight:400;
  font-size:clamp(17px,1.7vw,25px);letter-spacing:.3em;text-transform:uppercase;
  color:#fff;margin-bottom:12px;
}
.hero__kicker::after{content:"";display:block;width:64px;height:2px;margin-top:14px;
  background:var(--coral-300)}
.hero__sup{display:block;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:26px}
.hero h1{font-size:clamp(38px,4.2vw,64px);max-width:12ch;color:#fff;font-weight:200;letter-spacing:-.03em;line-height:1.04}
.hero h1 em{color:var(--coral-100)}
.hero__sub{margin-top:22px;max-width:48ch;color:rgba(255,255,255,.9);
  font-size:clamp(15px,1.2vw,16.5px);line-height:1.7}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero__meta{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,32px);
  margin-top:clamp(20px,3vh,34px);padding-top:17px;border-top:1px solid rgba(255,255,255,.3)}
.hm{display:grid;gap:3px}
.hm b{font-family:var(--f-display);font-size:clamp(23px,2.4vw,31px);font-weight:300;letter-spacing:-.02em;line-height:1;color:#fff}
.hm b small{font-family:var(--f-ui);font-size:11px;letter-spacing:.1em;color:var(--coral-300);margin-left:4px}
.hm span{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7)}

.hero__media{position:relative;z-index:2;overflow:hidden}
.hero__capsule{position:absolute;inset:0}
.hero__capsule video{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__cap-glow{display:none}

/* ---------- бегущая строка ---------- */
.ticker{background:var(--grad-pack);color:#fff;overflow:hidden;padding-block:14px}
.ticker__row{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{font-family:var(--f-ui);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding-inline:26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.ticker__row span::after{content:"✦";opacity:.65;font-size:9px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ======================= ТРИПТИХ: ЧТО ЭТО ======================= */
.trio{background:var(--white)}
.trio__head{max-width:44ch;margin-bottom:clamp(34px,4vw,56px)}
.trio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.tf{position:relative;overflow:hidden;background:var(--mist)}
.tf img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease)}
.tf:hover img{transform:scale(1.04)}
.tf figcaption{position:absolute;inset:auto 0 0;padding:70px 20px 20px;color:#fff;
  background:linear-gradient(transparent,rgba(10,46,74,.55) 38%,rgba(10,46,74,.9) 100%)}
.tf b{display:block;font-family:var(--f-display);font-size:clamp(19px,1.9vw,25px);font-weight:400;letter-spacing:-.02em;margin-bottom:5px}
.tf span{font-size:13.5px;color:rgba(255,255,255,.88);line-height:1.5}

/* ======================= ВКУС: КРУПНОЕ МАКРО ======================= */
.taste{background:var(--sand);overflow:hidden}
.taste__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,80px);align-items:center}
.taste__img{position:relative}
.taste__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.taste__stamp{
  position:absolute;right:clamp(-10px,-1vw,0px);bottom:24px;background:var(--coral-500);color:#fff;
  padding:14px 20px;max-width:230px;
}
.taste__stamp b{display:block;font-family:var(--f-accent);font-style:italic;font-size:27px;font-weight:500;line-height:1}
.taste__stamp span{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.taste__txt h2{margin-bottom:22px}
.taste__list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.taste__list li{display:flex;gap:14px;font-size:15.5px;line-height:1.6;color:var(--ink-600)}
.taste__list li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;
  background:var(--coral-500)}
.taste__list b{color:var(--ink);font-weight:600}

/* ======================= ГЛУБИНА: МОРСКОЙ БЛОК ======================= */
.deep{background:var(--deep-900);color:#fff;position:relative;overflow:hidden}
.deep::before{content:"";position:absolute;inset:0;background:var(--coral-pattern);opacity:.85;pointer-events:none}
.deep>*{position:relative;z-index:1}
.deep h2 em{color:var(--coral-300)}
.deep__head{max-width:52ch}
.deep__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px);margin-top:clamp(40px,5vw,64px)}
.dcard{border-top:1px solid rgba(255,255,255,.22);padding-top:24px}
.dcard b{display:block;font-family:var(--f-display);font-size:clamp(38px,4.6vw,60px);font-weight:200;letter-spacing:-.03em;line-height:1;
  color:var(--coral-300);margin-bottom:14px}
.dcard b small{font-family:var(--f-ui);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-left:4px}
.dcard h3{font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:10px;color:#fff}
.dcard p{font-size:14.5px;color:rgba(255,255,255,.66);line-height:1.6}

.dtable{margin-top:clamp(44px,5vw,70px);border:1px solid rgba(255,255,255,.16)}
.dtable__r{display:grid;grid-template-columns:1.15fr 1fr 1fr;border-top:1px solid rgba(255,255,255,.12)}
.dtable__r:first-child{border-top:0;background:rgba(255,255,255,.05)}
.dtable__r>*{padding:16px clamp(16px,2.2vw,28px);font-size:14.5px}
.dtable__r:first-child>*{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.dtable__k{color:rgba(255,255,255,.6)}
.dtable__a{background:rgba(255,255,255,.14);color:#fff;font-weight:500;font-size:15px!important}
.dtable__b{color:rgba(255,255,255,.45)}

/* ======================= ПОЛОСА-РАЗДЕЛИТЕЛЬ ======================= */
.strip{position:relative;min-height:clamp(300px,46vh,520px);overflow:hidden;background:var(--deep-950)}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.strip__q{position:relative;z-index:2;min-height:inherit;display:grid;place-items:center;text-align:center;
  padding:clamp(56px,9vh,96px) var(--pad);
  background:linear-gradient(180deg,rgba(10,46,74,.30),rgba(10,46,74,.68) 45%,rgba(10,46,74,.82));}
.strip__q p{font-family:var(--f-accent);font-style:italic;font-size:clamp(21px,2.6vw,38px);font-weight:500;
  color:#fff;max-width:28ch;line-height:1.3;text-shadow:0 2px 24px rgba(10,46,74,.55)}
.strip__q cite{display:block;margin-top:18px;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-style:normal;color:var(--coral-300)}

/* ======================= ФОРМУЛА ======================= */
.form3{background:var(--foam)}
.form3__head{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,4vw,60px);align-items:end;
  margin-bottom:clamp(36px,4vw,56px)}
.f3grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.f3{background:#fff;padding:clamp(24px,2.6vw,34px);display:grid;gap:10px;align-content:start;
  border-bottom:2px solid transparent;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.f3:hover{border-color:var(--coral-500);transform:translateY(-4px)}
.f3__n{font-family:var(--f-display);font-size:clamp(28px,2.8vw,38px);font-weight:300;letter-spacing:-.02em;line-height:1;color:var(--deep-800)}
.f3__n small{font-family:var(--f-ui);font-size:12px;letter-spacing:.1em;color:var(--coral-600);margin-left:4px}
.f3 h3{font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.f3 p{font-size:14.5px;color:var(--ink-400);line-height:1.6}
.f3--key{grid-column:span 2;background:var(--grad-pack);color:#fff;position:relative;overflow:hidden}
.f3--key::before{content:"";position:absolute;inset:0;background:var(--coral-pattern);opacity:.8}
.f3--key>*{position:relative;z-index:1}
.f3--key .f3__n{color:#fff;font-size:clamp(52px,6vw,86px)}
.f3--key .f3__n small{color:rgba(255,255,255,.8)}
.f3--key p{color:rgba(255,255,255,.85);max-width:46ch}

.facts3{margin-top:clamp(36px,4vw,58px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(18px,3vw,44px);
  align-items:start}
.facts3__note{background:#fff;padding:clamp(24px,3vw,36px);border-left:2px solid var(--coral-500)}
.facts3__note h3{font-family:var(--f-display);font-size:clamp(22px,2.2vw,29px);font-weight:400;letter-spacing:-.02em;margin-bottom:14px}
.facts3__note p{font-size:15px;color:var(--ink-600)}
.facts3__note q{display:block;margin-top:20px;font-family:var(--f-accent);font-style:italic;font-size:19px;
  line-height:1.5;color:var(--ink);quotes:none}
.facts3__note cite{display:block;margin-top:10px;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-style:normal;color:var(--ink-400)}
.t3{background:#fff}
.t3__h{padding:18px clamp(18px,2.2vw,26px);background:var(--deep-900);color:#fff;display:flex;
  justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.t3__h b{font-family:var(--f-ui);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.t3__h span{font-size:11.5px;color:rgba(255,255,255,.55)}
.t3 table{width:100%;border-collapse:collapse}
.t3 td{padding:14px clamp(18px,2.2vw,26px);border-top:1px solid var(--mist);font-size:14.5px}
.t3 td:last-child{text-align:right;font-family:var(--f-display);font-weight:500;font-size:16px;white-space:nowrap;color:var(--deep-800)}
.t3 tr.key td{background:var(--coral-100)}
.t3 tr.key td:last-child{color:var(--coral-600)}

/* ======================= ВИДЕО-ИСТОРИЯ ======================= */
.story{background:var(--deep-950);color:#fff;position:relative;overflow:hidden}
.story::before{content:"";position:absolute;inset:0;background:var(--coral-pattern);opacity:.7}
.story>*{position:relative;z-index:1}
.story__in{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(26px,5vw,72px);align-items:center}
.story__player{position:relative;aspect-ratio:9/12;overflow:hidden;background:#000}
.story__player video{width:100%;height:100%;object-fit:cover}
.story__snd{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:2;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.9);color:var(--deep-900);font-family:var(--f-ui);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s}
.story__snd:hover{background:var(--coral-500);color:#fff}
.story__txt h2 em{color:var(--coral-300)}
.story__list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0}
.story__list li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.14);align-items:baseline}
.story__list b{font-family:var(--f-ui);font-size:11px;letter-spacing:.16em;color:var(--coral-300);font-weight:500}
.story__list span{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.55}

/* ======================= УТРО ======================= */
.morning{background:var(--white)}
.morning__in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.morning__player{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000}
.morning__player video{width:100%;height:100%;object-fit:cover}
.morning__snd{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:2;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--f-ui);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s}
.morning__snd:hover{background:var(--coral-500);color:#fff}
.morning__side{display:grid;gap:clamp(16px,2vw,24px)}
.morning__pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,16px)}
.morning__pics img{width:100%;aspect-ratio:1;object-fit:cover;cursor:zoom-in}

/* ======================= ТАЙМЛАЙН ======================= */
.plan{background:var(--mist)}
.plan__grid{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,32px)}
.plan__i{position:relative;padding-top:34px;border-top:1px solid var(--ink-200)}
.plan__i::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;
  background:var(--coral-500)}
.plan__w{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-600);
  display:block;margin-bottom:12px}
.plan__i h3{font-family:var(--f-display);font-size:clamp(19px,1.8vw,24px);font-weight:400;letter-spacing:-.02em;margin-bottom:10px}
.plan__i p{font-size:14.5px;color:var(--ink-400);line-height:1.6}

/* ======================= ОТЗЫВЫ ======================= */
.rev3{background:var(--white)}
.rev3__head{display:flex;justify-content:space-between;align-items:end;gap:22px;flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,50px)}
.rev3__score{display:flex;align-items:center;gap:16px}
.rev3__score b{font-family:var(--f-display);font-size:52px;font-weight:200;letter-spacing:-.03em;line-height:1;color:var(--deep-800)}
.rev3__score i{display:block;font-style:normal;color:var(--coral-500);font-size:13px;letter-spacing:2px}
.rev3__score span{font-size:12.5px;color:var(--ink-400)}
.rev3__grid{column-count:3;column-gap:clamp(14px,1.8vw,22px)}
.rc3{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:clamp(14px,1.8vw,22px);
  background:var(--foam);transition:background .35s,transform .45s var(--ease)}
.rc3:hover{background:var(--mist);transform:translateY(-3px)}
.rc3__ph{display:grid;gap:1px;background:#fff}
.rc3__ph--2{grid-template-columns:1fr 1fr}
.rc3__ph--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.rc3__ph--3 img:first-child{grid-row:1/3}
.rc3__ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;cursor:zoom-in}
.rc3__ph--1 img{aspect-ratio:4/3}
.rc3__b{padding:clamp(18px,2vw,24px)}
.rc3__t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.rc3__n{font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.rc3__s{color:var(--coral-500);font-size:11.5px;letter-spacing:1.5px}
.rc3__d{font-size:11.5px;color:var(--ink-200);margin-bottom:12px}
.rc3 p{font-size:14.5px;line-height:1.65;color:var(--ink-600)}
.rc3--all{display:block;background:var(--deep-900);color:#fff}
.rc3--all:hover{background:var(--deep-800)}
.rc3--all b{display:block;font-family:var(--f-display);font-size:44px;font-weight:200;letter-spacing:-.03em;line-height:1}
.rc3--all i{display:block;font-style:normal;font-size:13px;color:var(--coral-300);margin:6px 0 12px}
.rc3--all p{color:rgba(255,255,255,.66)}
.rc3--all span{display:inline-block;margin-top:14px;font-family:var(--f-ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--coral-300)}

/* видеоотзывы */
.vid3{background:var(--deep-950);color:#fff}
.vid3 .lead{color:rgba(255,255,255,.62)}
.vid3__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(32px,4vw,50px)}
.vc3{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000;cursor:pointer;
  transition:transform .5s var(--ease)}
.vc3:hover{transform:translateY(-5px)}
.vc3 video{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.vc3__pos{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc3.is-playing .vc3__pos{opacity:0;transition:opacity .4s}
.vc3__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.65);transition:opacity .3s}
.vc3__play::after{content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;
  border-left:12px solid #fff;border-block:7px solid transparent}
.vc3.is-playing .vc3__play{opacity:0}
.vc3__ov{position:absolute;inset:auto 0 0;z-index:3;padding:30px 12px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.vc3__n{font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc3__s{color:var(--coral-300);font-size:10px;letter-spacing:1px;flex:none}

/* ======================= ГАЛЕРЕЯ ======================= */
.gal3{background:var(--white);padding-bottom:clamp(56px,7vw,96px)}
.gal3__track{display:flex;gap:clamp(10px,1.4vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(26px,3vw,40px) var(--pad);margin-inline:calc(-1*var(--pad));scrollbar-width:none}
.gal3__track::-webkit-scrollbar{display:none}
.gal3__item{flex:none;width:clamp(210px,22vw,290px);aspect-ratio:3/4;overflow:hidden;scroll-snap-align:center}
.gal3__item img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 1.1s var(--ease)}
.gal3__item:hover img{transform:scale(1.05)}

/* ======================= ДОВЕРИЕ ======================= */
.trust3{background:var(--foam)}
.trust3__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(34px,4vw,52px)}
.tc3{border-top:2px solid var(--coral-500);padding-top:22px}
.tc3 h3{font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.tc3 p{font-size:14px;color:var(--ink-400);line-height:1.6}

/* ======================= FAQ ======================= */
.faq3{background:var(--white)}
.faq3__in{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(26px,4vw,80px);align-items:start}
.faq3__side{position:sticky;top:96px}
.fq3{border-top:1px solid var(--mist)}
.fq3:last-child{border-bottom:1px solid var(--mist)}
.fq3__q{width:100%;text-align:left;padding:22px 0;display:flex;align-items:center;gap:18px;
  font-family:var(--f-display);font-size:clamp(17px,1.6vw,21px);font-weight:400;line-height:1.3;letter-spacing:-.015em;transition:color .3s}
.fq3__q:hover{color:var(--coral-600)}
.fq3__ic{margin-left:auto;flex:none;width:22px;height:22px;position:relative}
.fq3__ic::before,.fq3__ic::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  transition:transform .4s var(--ease),background .3s}
.fq3__ic::before{width:14px;height:1px;translate:-50% -50%}
.fq3__ic::after{width:1px;height:14px;translate:-50% -50%}
.fq3.is-open .fq3__ic::after{transform:scaleY(0)}
.fq3.is-open .fq3__ic::before{background:var(--coral-500)}
.fq3.is-open .fq3__q{color:var(--coral-600)}
.fq3__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.fq3.is-open .fq3__a{grid-template-rows:1fr}
.fq3__a>div{overflow:hidden}
.fq3__a p{padding-bottom:24px;font-size:15px;color:var(--ink-600);max-width:68ch;line-height:1.75}

/* ======================= CTA ======================= */
.cta3{position:relative;overflow:hidden;background:var(--deep-900);color:#fff;text-align:center}
.cta3::before{content:"";position:absolute;inset:0;background:var(--coral-pattern);opacity:.9}
.cta3>*{position:relative;z-index:1}
.cta3 h2{max-width:16ch;margin-inline:auto}
.cta3 h2 em{color:var(--coral-300)}
.cta3 p{color:rgba(255,255,255,.68);margin:22px auto 0;max-width:46ch}
.price3{display:inline-flex;align-items:baseline;gap:18px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.price3 b{font-family:var(--f-display);font-size:clamp(40px,5vw,64px);font-weight:200;letter-spacing:-.03em;line-height:1}
.price3 s{color:rgba(255,255,255,.4);font-size:18px}
.price3 i{font-style:normal;font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral-300);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:999px}
.cta3__acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta3__note{margin-top:22px;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.05em}

/* ======================= ПОДВАЛ ======================= */
.ftr3{background:var(--deep-950);color:rgba(255,255,255,.6);padding-block:clamp(50px,6vw,78px) 30px;font-size:14.5px}
.ftr3__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(22px,4vw,52px)}
.ftr3 .logo{color:#fff;display:inline-block;margin-bottom:14px}
.ftr3__top p{max-width:38ch;line-height:1.6}
.ftr3 h4{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-300);
  margin-bottom:16px;font-weight:500}
.ftr3 ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr3 a:hover{color:var(--coral-300)}
.ftr3__legal{margin-top:clamp(32px,4vw,50px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:12px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.4)}
.disc3{border-left:2px solid var(--coral-500);padding:12px 16px;background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.68);font-size:12.5px}
.disc3 b{display:block;color:#fff;font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:5px}
.ftr3__bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ======================= ЛАЙТБОКС ======================= */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,46,74,.95);display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.lb.is-open{opacity:1;pointer-events:auto}
.lb img,.lb video{max-width:min(92vw,880px);max-height:88vh}
.lb__x{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;color:#fff;font-size:19px;
  border:1px solid rgba(255,255,255,.3)}
.lb__x:hover{background:rgba(255,255,255,.14)}

/* ======================= ПОЯВЛЕНИЕ ======================= */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].is-in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}[data-rv-d="4"]{transition-delay:.32s}
.split{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.is-in .split>span{transform:none}
.hero h1 .split:nth-child(3)>span{transition-delay:.09s}
.hero h1 .split:nth-child(5)>span{transition-delay:.18s}

/* липкая покупка на телефоне */
.mbuy{position:fixed;left:0;right:0;bottom:0;z-index:68;display:none;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 14px;background:var(--deep-900);color:#fff;transform:translateY(110%);
  transition:transform .45s var(--ease)}
.mbuy.is-on{transform:none}
.mbuy__p{display:grid;line-height:1.2}
.mbuy__p b{font-family:var(--f-display);font-size:21px;font-weight:400;letter-spacing:-.02em}
.mbuy__p span{font-size:11px;color:var(--coral-300)}

.swipe{display:none;font-size:12px;color:var(--ink-400);margin-top:14px;letter-spacing:.04em}
.vid3 .swipe,.story .swipe{color:rgba(255,255,255,.42)}

/* ========================= АДАПТИВ ========================= */
@media (max-width:1100px){
  /* видео уходит фоном на весь экран, текст ложится двумя зонами поверх:
     заголовок сверху, действия снизу, между ними видно ролик */
  .hero{grid-template-columns:1fr;grid-template-rows:1fr;min-height:100svh;position:relative}
  .hero__media{position:absolute;inset:0;z-index:0}
  .hero__capsule{position:absolute;inset:0}
  .hero__in{position:relative;z-index:2;grid-area:1/1;max-width:none;justify-self:stretch;
    padding:clamp(92px,13vh,120px) var(--pad) clamp(26px,4vh,44px);justify-content:stretch}
  .hero__in::before{content:"";position:absolute;inset:0 0 auto;height:46%;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,52,84,.86) 0%,rgba(8,52,84,.45) 55%,transparent 100%)}
  .hero__in::after{content:"";position:absolute;inset:auto 0 0;height:60%;pointer-events:none;
    background:linear-gradient(0deg,rgba(8,52,84,.92) 0%,rgba(8,52,84,.72) 42%,transparent 100%)}
  .hero__txt{position:relative;z-index:1;display:flex;flex-direction:column;
    justify-content:space-between;flex:1;gap:20px}
  .hero h1{max-width:14ch}
  .hero__sub{margin-top:0}
  .hero__meta{border-top-color:rgba(255,255,255,.34)}
  .trio__grid{grid-template-columns:1fr}
  .tf img{aspect-ratio:2/1}
  .tf figcaption{padding:60px 24px 22px}
  .taste__in,.form3__head,.facts3,.faq3__in,.story__in,.morning__in{grid-template-columns:1fr}
  .faq3__side{position:static;margin-bottom:22px}
  .story__player,.morning__player{max-width:320px;margin-inline:auto}
  .deep__grid{grid-template-columns:1fr}
  .dcard{padding-top:18px}
  .f3grid,.trust3__grid{grid-template-columns:repeat(2,1fr)}
  .f3--key{grid-column:span 2}
  .plan__grid{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .rev3__grid{column-count:2}
  .vid3__grid{grid-template-columns:repeat(3,1fr)}
  .morning__pics{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:820px){
  .nav,.hdr__r .btn{display:none}
  .burger{display:grid}
  .dtable__r{grid-template-columns:1fr}
  .dtable__r:first-child{display:none}
  .dtable__r>*{padding-block:9px}
  .dtable__k{padding-bottom:0;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
  .dtable__a::before{content:"Briovi: ";font-family:var(--f-ui);font-size:11px;color:var(--coral-300);margin-right:6px}
  .dtable__b::before{content:"Животный: ";font-size:11px;color:rgba(255,255,255,.35);margin-right:6px}
}
@media (max-width:680px){
  body{font-size:16px}
  .sec{padding-block:clamp(44px,8vw,64px)}
  .sec--tight{padding-block:clamp(36px,6vw,52px)}
  .hero__in{padding:clamp(80px,11vh,100px) var(--pad) clamp(20px,3vh,30px)}
  .hero h1{font-size:clamp(32px,8.6vw,44px);max-width:12ch}
  .hero__kicker{font-size:15px;margin-bottom:7px}
  .hero__kicker::after{width:44px;margin-top:9px}
  .hero__sup{margin-bottom:14px;font-size:10px}
  /* текст остаётся целиком в разметке, визуально показываем первые строки —
     так между зонами остаётся окно, в котором виден ролик */
  .hero__sub{margin-top:0;font-size:14px;line-height:1.55;max-width:34ch}
  .hero__tail{display:none}
  .hero__acts{margin-top:14px;gap:8px;flex-wrap:nowrap}

  .hero__acts .btn{flex:1;width:auto;padding:14px 8px;font-size:10.5px;letter-spacing:.08em;white-space:nowrap}
  .btn__long{display:none}
  .hero__meta{display:grid;grid-template-columns:1fr 1fr}
  .hero__meta{gap:10px 16px;margin-top:14px;padding-top:12px}
  .hm b{font-size:17px}
  .hm b small{font-size:9px}
  .hm span{font-size:9px;letter-spacing:.12em}
  .taste__list{gap:12px;margin-top:22px}
  .story__list li{padding:13px 0}
  .morning__side{gap:16px}
  .hm b{font-size:22px}
  /* длинные списки — лентами */
  .trio__grid,.f3grid,.rev3__grid,.vid3__grid,.plan__grid,.trust3__grid{
    display:flex;column-count:auto;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--pad);
    margin-inline:calc(-1*var(--pad));
  }
  .trio__grid::-webkit-scrollbar,.f3grid::-webkit-scrollbar,.rev3__grid::-webkit-scrollbar,
  .vid3__grid::-webkit-scrollbar,.plan__grid::-webkit-scrollbar,.trust3__grid::-webkit-scrollbar{display:none}
  .trio__grid>*,.f3grid>*,.rev3__grid>*,.vid3__grid>*,.plan__grid>*,.trust3__grid>*{
    flex:none;scroll-snap-align:start;margin-bottom:0}
  .trio__grid>.tf{width:76vw;max-width:310px}
  .f3grid>.f3{width:74vw;max-width:300px}
  .f3--key{width:82vw!important;max-width:330px!important;grid-column:auto}
  .rev3__grid>.rc3{width:82vw;max-width:340px}
  .vid3__grid>.vc3{width:46vw;max-width:190px}
  .plan__grid>.plan__i{width:70vw;max-width:290px}
  .trust3__grid>.tc3{width:64vw;max-width:260px}
  .swipe{display:block}
  .tf img{aspect-ratio:3/4}
  .tf figcaption{padding:44px 16px 16px}
  .tf b{font-size:21px}
  .taste__stamp{right:12px;bottom:12px;padding:11px 15px;max-width:190px}
  .taste__stamp b{font-size:21px}
  .morning__pics{grid-template-columns:1fr 1fr}
  .gal3__item{width:70vw}
  .rev3__score b{font-size:42px}
  .ftr3__top{grid-template-columns:1fr;gap:26px}
  .mbuy{display:flex}
  .cta3{padding-bottom:92px}
  .strip{height:clamp(230px,40vh,340px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .split>span{transform:none!important}
}