/* =========================================================
   БЕЛЫЙ ЦВЕТОК — сайт-витрина
   Токены и структура ниже; смотрите README.md для инструкций
   по замене фото, цен и (опционально) шрифтов.
   ========================================================= */

/* -------- optional self-hosted fonts --------
   Скачайте статические .woff2 (Fraunces: 300/500/600,
   Inter: 400/500/600) и положите в assets/fonts/,
   затем раскомментируйте блок ниже.

@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/Fraunces-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/Fraunces-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
------------------------------------------------ */

:root{
  /* цвет — палитра выведена из логотипа */
  --c-forest:      #1E4530;
  --c-forest-dark: #12271B;
  --c-sage:        #6F8C74;
  --c-sage-light:  #C9D4C4;
  --c-ivory:       #F7F3E7;
  --c-ivory-deep:  #EEE6D3;
  --c-line:        rgba(30,69,48,.14);
  --c-line-strong: rgba(30,69,48,.28);

  /* типографика — системные шрифты по умолчанию (см. пояснение выше) */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.25,.7,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-ivory);
  color:var(--c-forest);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--c-forest); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-sage);
  margin:0 0 14px;
}

/* -------- grain texture (idle, always on) -------- */
.grain{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain-shift 1.1s steps(4) infinite;
}
@keyframes grain-shift{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-1%,1%); }
  50%{ transform:translate(1%,-1%); }
  75%{ transform:translate(-1%,-1.5%); }
}

/* -------- custom cursor (desktop with fine pointer only) -------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:200;
  border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0;
}
.cursor-dot{
  width:6px; height:6px; background:var(--c-forest);
  transition:opacity .3s ease;
}
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--c-line-strong);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s ease, opacity .3s ease;
}
.cursor-ring.is-active{ width:56px; height:56px; border-color:var(--c-forest); }
body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor:none; }

/* -------- magnetic hover (nav links, scroll cue, filter pills) -------- */
.magnetic{ transition:transform .35s var(--ease); will-change:transform; }

/* -------- scroll reveal -------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1.3s var(--ease), transform 1.3s var(--ease);
  transition-delay:calc(var(--d, 0) * 130ms);
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}
/* -------- split-line text reveal (headings "прорастают" построчно) -------- */
.split-line{ display:block; overflow:hidden; }
.split-line > span{
  display:inline-block;
  transform:translateY(115%);
  filter:blur(10px);
  transition:transform 1.5s var(--ease), filter 1.5s var(--ease);
  transition-delay:calc(var(--i, 0) * 160ms);
}
.split-reveal.is-visible .split-line > span{ transform:translateY(0); filter:blur(0); }

/* -------- curtain reveal for photos -------- */
.catalog__card .ph,
.about__media .ph{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.6s var(--ease) .2s;
}
.catalog__card.is-visible .ph,
.about__media.is-visible .ph{
  clip-path:inset(0 0 0% 0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .catalog__card[data-reveal], .hero__logo-wrap[data-reveal]{ transform:none; filter:none; }
  .split-line > span{ transform:none; filter:none; transition:none; }
  .catalog__card .ph, .about__media .ph{ clip-path:none; transition:none; }
  .particle, .hero__logo, .growth__icon svg, .grain,
  .mandala-spin, .ph::before, .ph img, .float-card,
  .hero__title::before{ animation:none !important; }
  .hero__sweep{ display:none; }
  .marquee__track{ animation:none; }
  .catalog__mandala[data-reveal]{ transition:none; }
  .cursor-dot, .cursor-ring{ display:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px var(--pad);
  display:flex; justify-content:center;
  opacity:0; transform:translateY(-12px);
  pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s ease, box-shadow .3s ease;
}
.nav.is-shown{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav.is-solid{
  background:rgba(247,243,231,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--c-line);
}
.nav__inner{
  width:100%; max-width:var(--container);
  display:flex; align-items:center; justify-content:space-between;
}
.nav__logo{ height:38px; width:auto; }
.nav__links{ display:flex; gap:32px; }
.nav__links a{
  font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--c-forest); opacity:.75; position:relative;
  transition:opacity .25s ease;
}
.nav__links a:hover{ opacity:1; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--c-forest); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); }
@media (max-width:640px){ .nav__links{ display:none; } }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:120px var(--pad) 80px;
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(30,69,48,.07), transparent 70%),
    radial-gradient(45% 35% at 85% 80%, rgba(111,140,116,.10), transparent 70%);
}
/* световой блик, пробегающий по хиро один раз при загрузке —
   тот самый «крутой приход» бренда в кадр */
.hero__sweep{
  position:absolute; top:-25%; left:-35%; z-index:1;
  width:55%; height:150%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:rotate(10deg) translateX(-140%);
  opacity:0; pointer-events:none;
  animation:hero-sweep 1.8s ease-out .3s 1 both;
}
@keyframes hero-sweep{
  0%{   transform:rotate(10deg) translateX(-140%); opacity:0; }
  18%{  opacity:.45; }
  60%{  opacity:.22; }
  100%{ transform:rotate(10deg) translateX(260%); opacity:0; }
}
.hero__inner{
  position:relative; z-index:2;
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero__logo-wrap{ position:relative; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.hero__logo{
  width:min(340px, 64vw); height:auto;
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.018); }
}
/* более выразительное «проявление» бренда: логотип материализуется
   из лёгкого расфокуса и уменьшенного масштаба — медленно и торжественно */
.hero__logo-wrap[data-reveal]{
  transform:translateY(18px) scale(.86);
  filter:blur(18px);
  transition:opacity 2.2s var(--ease), transform 2.2s var(--ease), filter 2.2s var(--ease);
}
.hero__logo-wrap[data-reveal].is-visible{
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* мягкое пульсирующее свечение позади заголовка — тихий акцент,
   а не неоновый, но та же идея «текст как источник света» */
.hero__title{ position:relative; }
.hero__title::before{
  content:'';
  position:absolute; z-index:-1;
  left:50%; top:50%;
  width:130%; height:220%;
  transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(30,69,48,.10), transparent 70%);
  animation:title-glow 5s ease-in-out infinite;
}
@keyframes title-glow{
  0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
}

/* плавающие карточки товаров — реальные фото (или их аккуратные
   заглушки) вместо абстрактных фигур; список генерируется в main.js
   из того же CATALOG, что и каталог, так что фото подставятся сами */
.hero__float-cards{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.float-card{
  position:absolute;
  width:var(--w, 92px);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transform:rotate(var(--r, 0deg));
  animation:card-float 7s ease-in-out infinite;
  animation-delay:var(--delay, 0s);
  filter:drop-shadow(0 12px 20px rgba(30,69,48,.16));
}
.float-card .ph{ width:100%; border-radius:10px; box-shadow:0 0 0 1px var(--c-line); }
.float-card .ph::after{ display:none; }
.float-card__label{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-forest); opacity:.68;
  background:rgba(247,243,231,.75);
  padding:2px 9px; border-radius:100px;
  white-space:nowrap;
}
@keyframes card-float{
  0%,100%{ transform:rotate(var(--r, 0deg)) translateY(0); }
  50%{ transform:rotate(calc(var(--r, 0deg) + 2deg)) translateY(-10px); }
}
@media (max-width:900px){ .hero__float-cards{ display:none; } }

/* та же дрейфующая жизнь фона, вынесенная и в другие секции —
   движение не заканчивается вместе с хиро-экраном */
.ambient-particles{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  color:var(--c-sage);
}

/* фоновое свечение секции — проявляется вместе с ней при скролле,
   у каждой «страницы» появляется свой тихий фон, а не статика */
.section-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 45% at 50% 25%, rgba(30,69,48,.06), transparent 70%);
}
.section-glow[data-reveal],
.section-glow[data-reveal].is-visible{
  transform:none; /* полотну фона ни к чему ехать вверх вместе со скроллом */
}
.particle{
  position:absolute; bottom:-24px; width:14px; height:14px; opacity:0;
  animation:drift linear infinite;
}
@keyframes drift{
  0%{   transform:translateY(0) translateX(0) rotate(0deg);      opacity:0; }
  12%{  opacity:.4; }
  50%{  transform:translateY(-46vh) translateX(18px) rotate(35deg);  opacity:.28; }
  88%{  opacity:0; }
  100%{ transform:translateY(-86vh) translateX(-14px) rotate(-20deg); opacity:0; }
}
.ambient-particles .ap1{ left:8%;  width:10px; animation-duration:20s; animation-delay:1s; }
.ambient-particles .ap2{ left:50%; width:13px; animation-duration:26s; animation-delay:6s; }
.ambient-particles .ap3{ left:88%; width:9px;  animation-duration:18s; animation-delay:3s; }
.hero__title{
  font-size:clamp(30px, 4.6vw, 50px);
  line-height:1.14;
  letter-spacing:-.01em;
  margin-top:8px;
}
.hero__sub{
  max-width:520px; margin-top:22px;
  font-size:16.5px; color:var(--c-forest); opacity:.78;
}
.hero__scroll{
  margin-top:56px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-sage);
}
.hero__scroll svg{ animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
@media (prefers-reduced-motion: reduce){ .hero__scroll svg{ animation:none; } }

/* growth stages */
.growth{
  margin-top:44px;
  display:flex; align-items:center; justify-content:center;
  gap:0; width:100%; max-width:560px;
}
.growth__stage{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--c-forest);
}
.growth__icon{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-ivory-deep);
  border:1px solid var(--c-line-strong);
}
.growth__icon svg{
  width:20px; height:20px;
  transform-origin:50% 85%;
  animation:sway 4.5s ease-in-out infinite;
}
.growth__stage:nth-child(1) .growth__icon svg{ animation:seed-spin 5s linear infinite; }
@keyframes seed-spin{ to{ transform:rotate(360deg); } }
.growth__stage:nth-child(3) .growth__icon svg{ animation-delay:1.1s; }
.growth__stage:nth-child(5) .growth__icon svg{ animation-delay:.6s; }
.growth__stage:nth-child(7) .growth__icon svg{ animation-delay:1.6s; }
@keyframes sway{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}
.growth__label{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-sage);
  white-space:nowrap;
}
.growth__line{
  flex:1; height:1px; background:var(--c-line-strong); margin:0 6px 26px;
  min-width:16px;
}
@media (max-width:560px){
  .growth__label{ font-size:9.5px; }
  .growth__icon{ width:36px; height:36px; }
  .growth__line{ margin-bottom:22px; }
}

/* ============ vine divider ============ */
.vine-divider{
  color:var(--c-sage);
  padding:0 var(--pad);
  max-width:var(--container); margin:0 auto;
}
.vine-divider__svg{ width:100%; height:40px; display:block; }
/* stroke-dasharray/-dashoffset выставляются в JS покадрово, синхронно со
   скроллом — лоза в буквальном смысле «прорастает» по мере прокрутки,
   а не просто появляется по достижении области видимости */
.vine-path{ transition:stroke-dashoffset .05s linear; }
.vine-marker{
  fill:currentColor;
  opacity:0;
  transition:opacity .3s ease;
  filter:drop-shadow(0 0 3px var(--c-sage));
}
@media (prefers-reduced-motion: reduce){
  .vine-path{ transition:none; stroke-dashoffset:0 !important; }
  .vine-marker{ display:none; }
}

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden;
  padding:26px 0;
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}
.marquee__track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
.marquee__track span{
  font-family:var(--font-display);
  font-size:clamp(22px, 4.2vw, 42px);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--c-forest);
  white-space:nowrap;
  padding:0 28px;
}
.marquee__track span:nth-child(even){
  color:transparent;
  -webkit-text-stroke:1px var(--c-sage);
  opacity:.75;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============ ABOUT ============ */
.about{
  position:relative;
  max-width:var(--container); margin:0 auto;
  padding:100px var(--pad);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center;
}
.about__copy h2{ font-size:clamp(24px, 3vw, 34px); line-height:1.28; margin-bottom:22px; }
.about__copy p{ color:var(--c-forest); opacity:.8; margin-bottom:16px; font-size:15.5px; }
.about__copy p:last-child{ margin-bottom:0; }
@media (max-width:860px){
  .about{ grid-template-columns:1fr; gap:36px; padding:72px var(--pad); }
}

/* photo placeholder block */
.ph{
  position:relative;
  width:100%;
  border-radius:2px;
  background:
    linear-gradient(160deg, var(--c-ivory-deep), var(--c-sage-light) 130%);
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.ph--tall{ aspect-ratio:4/5; }
.ph--square{ aspect-ratio:1/1; }
.ph::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(30,69,48,.08), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(30,69,48,.06), transparent 50%);
  animation:kenburns 20s ease-in-out infinite;
  transform-origin:62% 38%;
}
.ph::after{
  content:attr(data-ph-label);
  position:relative; z-index:1;
  margin:16px; padding:6px 10px;
  font-size:10.5px; letter-spacing:.06em;
  color:var(--c-forest); opacity:.55;
  border:1px dashed var(--c-line-strong);
  border-radius:2px;
  background:rgba(247,243,231,.55);
}
.ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:kenburns 24s ease-in-out infinite reverse;
  transform-origin:38% 62%;
}
@keyframes kenburns{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.09); }
}

/* ============ CATALOG ============ */
.catalog{ max-width:var(--container); margin:0 auto; padding:60px var(--pad) 40px; }
.catalog__head{ position:relative; overflow:hidden; text-align:center; margin-bottom:40px; }
.catalog__head h2{ font-size:clamp(26px, 3.4vw, 38px); }
.catalog__head .eyebrow,
.catalog__head h2{ position:relative; z-index:1; }

/* мандала из листьев — проявляется при скролле, дальше тихо вращается
   за заголовком каталога */
.catalog__mandala{
  position:absolute; inset:0; margin:auto; z-index:0;
  width:clamp(280px, 38vw, 420px); height:clamp(280px, 38vw, 420px);
  color:var(--c-sage-light);
  pointer-events:none;
}
.catalog__mandala[data-reveal]{
  opacity:0;
  transform:scale(.8);
  transition:opacity 1.8s var(--ease), transform 1.8s var(--ease);
}
.catalog__mandala[data-reveal].is-visible{
  opacity:.5;
  transform:scale(1);
}
.mandala-spin{ transform-origin:200px 200px; animation:mandala-spin 70s linear infinite; }
@keyframes mandala-spin{ to{ transform:rotate(360deg); } }

.catalog__filters{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:52px;
}
.catalog__filters button{
  font-family:var(--font-body);
  border:1px solid var(--c-line-strong);
  background:transparent;
  color:var(--c-forest);
  padding:8px 18px;
  border-radius:100px;
  font-size:13px; letter-spacing:.03em;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.catalog__filters button:hover{ border-color:var(--c-forest); }
.catalog__filters button.is-active{
  background:var(--c-forest); color:var(--c-ivory); border-color:var(--c-forest);
}

.catalog__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:44px 32px;
}
@media (max-width:900px){ .catalog__grid{ grid-template-columns:repeat(2, 1fr); gap:36px 24px; } }
@media (max-width:560px){ .catalog__grid{ grid-template-columns:1fr; } }

.catalog__card{ display:flex; flex-direction:column; perspective:1000px; cursor:pointer; }
.catalog__card[data-reveal]{
  transform:translateY(26px) scale(.94) rotate(-2deg);
}
.catalog__card[data-reveal].is-visible{
  transform:translateY(0) scale(1) rotate(0deg);
}
.catalog__card .tilt{
  margin-bottom:18px;
  transition:transform .35s ease-out;
  transform-style:preserve-3d;
}
.catalog__card-tag{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-sage); margin-bottom:6px;
}
.catalog__card h3{ font-size:19px; margin-bottom:4px; }
.catalog__card-note{ font-size:13.5px; color:var(--c-forest); opacity:.65; margin-bottom:16px; }

.catalog__prices{
  display:flex; border-top:1px solid var(--c-line); padding-top:12px; gap:20px;
}
.price-block{ flex:1; }
.price-block__label{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-sage); display:block; margin-bottom:4px;
}
.price-block__value{
  font-family:var(--font-display);
  font-size:18px; color:var(--c-forest);
}
.price-block__unit{ font-size:11.5px; color:var(--c-forest); opacity:.55; margin-left:4px; }

/* hidden items (category filter) */
.catalog__card[hidden]{ display:none; }

/* ============ TERMS ============ */
.terms{ position:relative; max-width:var(--container); margin:0 auto; padding:70px var(--pad); text-align:center; }
.terms h2{ font-size:clamp(26px, 3.4vw, 38px); margin-bottom:48px; }
.terms__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  max-width:760px; margin:0 auto;
}
.terms__card{
  background:var(--c-ivory-deep);
  border:1px solid var(--c-line);
  border-radius:4px;
  padding:36px 30px;
  text-align:left;
}
.terms__icon{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--c-line-strong); margin-bottom:18px;
}
.terms__icon svg{ width:22px; height:22px; }
.terms__card h3{ font-size:19px; margin-bottom:10px; }
.terms__card p{ font-size:14.5px; opacity:.75; line-height:1.65; }
@media (max-width:640px){ .terms__grid{ grid-template-columns:1fr; } }

/* ============ WHY ============ */
.why{ position:relative; max-width:var(--container); margin:0 auto; padding:20px var(--pad) 100px; text-align:center; }
.why__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:36px;
  margin-top:8px;
}
.why__item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.why__icon{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-ivory-deep); margin-bottom:16px;
}
.why__icon svg{ width:24px; height:24px; }
.why__item h3{ font-size:15.5px; margin-bottom:8px; }
.why__item p{ font-size:13.5px; opacity:.68; line-height:1.6; }
@media (max-width:860px){ .why__grid{ grid-template-columns:repeat(2, 1fr); } }

/* ============ FOOTER ============ */
.footer{
  background:var(--c-forest-dark);
  color:var(--c-ivory);
  padding:64px var(--pad) 40px;
  text-align:center;
}
.footer__logo{
  width:64px; height:auto; margin:0 auto 16px;
  filter:brightness(0) invert(1);
  opacity:.92;
}
.footer__tag{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-sage-light); margin-bottom:10px;
}
.footer__legal{
  margin:28px auto 20px;
  padding-top:20px;
  max-width:520px;
  border-top:1px solid rgba(247,243,231,.14);
}
.footer__requisites{
  font-size:11.5px; letter-spacing:.02em;
  color:var(--c-ivory); opacity:.55;
  margin-bottom:10px;
}
.footer__legal-links{
  display:flex; justify-content:center; gap:8px;
  font-size:11.5px;
}
.footer__legal-links a{
  color:var(--c-sage-light); opacity:.85;
  text-decoration:underline; text-underline-offset:2px;
  transition:opacity .2s ease;
}
.footer__legal-links a:hover{ opacity:1; }
.footer__legal-links span{ color:var(--c-sage-light); opacity:.4; }
.footer__copy{ font-size:12px; opacity:.5; }

/* ============ ОКНО ТОВАРА — эффект жидкого стекла ============ */
.product-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  visibility:hidden;
  opacity:0;
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.product-modal.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity .5s var(--ease), visibility 0s linear;
}
.product-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(18,39,27,.38);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}
.product-modal__close{
  position:absolute; top:24px; right:24px; z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,243,231,.55);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 24px rgba(18,39,27,.18);
  color:var(--c-forest);
  cursor:pointer;
  transform:scale(.85) rotate(-20deg);
  opacity:0;
  transition:transform .5s var(--ease) .3s, opacity .5s var(--ease) .3s, background .2s ease;
}
.product-modal.is-open .product-modal__close{ transform:scale(1) rotate(0deg); opacity:1; }
.product-modal__close:hover{ background:rgba(255,255,255,.8); }

.product-modal__panels{
  position:relative; z-index:1;
  width:100%; max-width:840px; max-height:86vh; overflow-y:auto;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  grid-template-rows:auto auto auto;
  gap:18px;
  padding:6px;
  scrollbar-width:thin;
}
.panel--photo{ grid-column:1; grid-row:1 / span 3; }
.panel--taste{ grid-column:2; grid-row:1; }
.panel--pairs{ grid-column:2; grid-row:2; }
.panel--cuisine{ grid-column:2; grid-row:3; }
@media (max-width:720px){
  .product-modal__panels{ grid-template-columns:1fr; grid-template-rows:none; max-height:82vh; }
  .panel--photo, .panel--taste, .panel--pairs, .panel--cuisine{ grid-column:1; grid-row:auto; }
}

/* «жидкое стекло»: полупрозрачная подложка + сильный блюр + блик по
   верхней кромке, как у смотровых панелей — светлое стекло поверх
   размытого тёмного бэкдропа */
.glass-panel{
  position:relative;
  background:rgba(247,243,231,.5);
  backdrop-filter:blur(24px) saturate(190%);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  box-shadow:
    0 20px 48px rgba(18,39,27,.20),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 40px rgba(255,255,255,.08);
  padding:24px;
  overflow:hidden;
  opacity:0;
  transform:translateY(28px) scale(.95);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.glass-panel::before{
  /* тонкий блик, имитирующий преломление света на стекле */
  content:'';
  position:absolute; top:0; left:0; right:0; height:60%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events:none;
}
.product-modal.is-open .glass-panel{ opacity:1; transform:translateY(0) scale(1); }
.product-modal.is-open .panel--photo{  transition-delay:.08s; }
.product-modal.is-open .panel--taste{  transition-delay:.18s; }
.product-modal.is-open .panel--pairs{  transition-delay:.26s; }
.product-modal.is-open .panel--cuisine{transition-delay:.34s; }

.panel--photo .ph{ margin-bottom:16px; border-radius:14px; }
.panel--photo h3{ font-size:23px; margin:8px 0 16px; position:relative; z-index:1; }
.panel--photo .catalog__card-tag{ position:relative; z-index:1; }
.panel--photo .catalog__prices{ position:relative; z-index:1; border-top-color:rgba(30,69,48,.16); }

.glass-panel__label{
  position:relative; z-index:1; display:block;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-sage); margin-bottom:10px;
}
.glass-panel p{
  position:relative; z-index:1;
  font-size:15px; line-height:1.6; color:var(--c-forest); opacity:.85;
}
.glass-panel__calories{
  position:relative; z-index:1;
  display:inline-block; margin-top:14px; padding:5px 13px;
  border-radius:100px;
  background:rgba(30,69,48,.09);
  border:1px solid rgba(30,69,48,.12);
  font-size:12.5px; font-weight:600; color:var(--c-forest);
}

@media (prefers-reduced-motion: reduce){
  .product-modal, .product-modal__close, .glass-panel{ transition:none; }
}


/* =========================================================
   VISUAL UPGRADE 2026 — atmospheric background, scroll video,
   softer motion and a unified liquid-glass product presentation.
   ========================================================= */

body{
  position:relative;
  background:
    radial-gradient(90% 80% at 8% 12%, rgba(170,190,166,.20), transparent 62%),
    radial-gradient(75% 70% at 92% 38%, rgba(216,225,202,.30), transparent 66%),
    linear-gradient(180deg, #F8F5EC 0%, #F4F0E4 52%, #F8F4EA 100%);
  overflow-x:hidden;
}

.site-atmosphere{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  opacity:.8;
}
.site-atmosphere__orb{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(4px);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), rgba(111,140,116,.10) 46%, transparent 72%);
  will-change:transform;
}
.site-atmosphere__orb--one{ width:42vw; height:42vw; left:-16vw; top:8%; animation:ambient-orbit-one 24s ease-in-out infinite; }
.site-atmosphere__orb--two{ width:36vw; height:36vw; right:-12vw; top:42%; animation:ambient-orbit-two 29s ease-in-out infinite; }
.site-atmosphere__orb--three{ width:28vw; height:28vw; left:36%; top:72%; opacity:.55; animation:ambient-orbit-three 32s ease-in-out infinite; }
@keyframes ambient-orbit-one{ 50%{ transform:translate3d(8vw,5vh,0) scale(1.12); } }
@keyframes ambient-orbit-two{ 50%{ transform:translate3d(-7vw,-4vh,0) scale(.92); } }
@keyframes ambient-orbit-three{ 50%{ transform:translate3d(5vw,-6vh,0) scale(1.08); } }

/* The video sits beneath the hero copy and visually opens as the page moves. */
.hero{
  isolation:isolate;
  background:transparent;
  --hero-progress:0;
}
.hero-video-shell{
  position:absolute;
  inset:clamp(18px, 3vw, 42px);
  z-index:0;
  overflow:hidden;
  border-radius:clamp(26px, 4vw, 54px);
  background:
    radial-gradient(70% 85% at 20% 20%, rgba(255,255,255,.72), transparent 60%),
    linear-gradient(135deg, rgba(215,226,207,.90), rgba(236,231,211,.86));
  box-shadow:
    0 28px 80px rgba(18,39,27,.10),
    inset 0 0 0 1px rgba(255,255,255,.68);
  transform:translateY(var(--hero-shell-y, 0px)) scale(var(--hero-shell-scale, .94));
  opacity:var(--hero-shell-opacity, .78);
  transition:opacity .8s var(--ease);
  will-change:transform,border-radius;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  filter:saturate(.88) contrast(.96) brightness(1.04);
  transition:opacity 1.1s var(--ease);
  will-change:transform,opacity;
}
.hero-video-shell.has-video .hero-video{ opacity:.82; }
.hero-video__veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(247,243,231,.42) 0%, rgba(247,243,231,.60) 56%, rgba(247,243,231,.78) 100%),
    radial-gradient(52% 55% at 50% 48%, rgba(247,243,231,.60), rgba(247,243,231,.10) 72%);
  pointer-events:none;
}
.hero-video__shine{
  position:absolute;
  z-index:2;
  inset:-35% -15%;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 49%, transparent 60%);
  transform:translateX(var(--hero-shine-x, -28%)) rotate(5deg);
  mix-blend-mode:screen;
}
.hero-video__fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(98,132,103,.22), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.55), transparent 20%),
    radial-gradient(circle at 68% 76%, rgba(111,140,116,.18), transparent 30%);
  transition:opacity .8s ease;
}
.hero-video-shell.has-video .hero-video__fallback{ opacity:.16; }
.hero__glow{ z-index:1; }
.hero__sweep{ z-index:3; }
.hero__float-cards{ z-index:3; opacity:var(--hero-floats-opacity, .62); }
.hero__inner{
  z-index:4;
  transform:translateY(var(--hero-copy-y, 0px));
  opacity:var(--hero-copy-opacity, 1);
  will-change:transform,opacity;
}
.hero__inner::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:-42px -72px;
  border-radius:42px;
  background:radial-gradient(ellipse at center, rgba(247,243,231,.54), rgba(247,243,231,.10) 62%, transparent 78%);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  pointer-events:none;
}

/* More tactile catalog cards without turning the site into a UI dashboard. */
.catalog__card{
  padding:14px;
  margin:-14px;
  border-radius:24px;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.catalog__card .ph{ box-shadow:0 12px 34px rgba(18,39,27,.08); }
.catalog__card .ph img{ transition:transform .8s var(--ease), filter .8s var(--ease); }
@media (hover:hover) and (pointer:fine){
  .catalog__card:hover{
    background:rgba(255,255,255,.30);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.48), 0 18px 50px rgba(18,39,27,.07);
  }
  .catalog__card:hover .ph img{ transform:scale(1.055); filter:saturate(1.04); }
}

.about,.catalog,.terms,.why{
  position:relative;
  isolation:isolate;
}
.about::before,.catalog::before,.terms::before,.why::before{
  content:'';
  position:absolute;
  z-index:-2;
  inset:5% max(14px, 2vw);
  border-radius:44px;
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(233,238,224,.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  pointer-events:none;
}

/* Unified product presentation: one premium glass sheet rather than four floating boxes. */
.product-modal{
  padding:clamp(14px, 3vw, 36px);
  perspective:1400px;
}
.product-modal__backdrop{
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(111,140,116,.20), transparent 70%),
    rgba(13,31,21,.52);
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
  opacity:0;
  transition:opacity .55s var(--ease);
}
.product-modal.is-open .product-modal__backdrop{ opacity:1; }
.product-modal__stage{
  position:relative;
  z-index:1;
  width:min(1040px, 100%);
  max-height:min(820px, 88vh);
  transform:translateY(34px) scale(.92) rotateX(4deg);
  filter:blur(10px);
  opacity:0;
  transition:transform .72s cubic-bezier(.18,.8,.25,1), filter .72s var(--ease), opacity .55s var(--ease);
}
.product-modal.is-open .product-modal__stage{
  transform:translateY(0) scale(1) rotateX(0);
  filter:blur(0);
  opacity:1;
}
.product-modal__panels{
  width:100%;
  max-width:none;
  max-height:min(820px, 88vh);
  overflow:auto;
  display:block;
  padding:0;
  scrollbar-width:thin;
  border-radius:32px;
}
.product-modal__close{
  top:18px;
  right:18px;
  z-index:5;
  width:48px;
  height:48px;
  background:rgba(250,249,243,.62);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 12px 30px rgba(18,39,27,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

.product-sheet{
  --mx:50%;
  --my:30%;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  min-height:560px;
  overflow:hidden;
  border-radius:32px;
  background:linear-gradient(145deg, rgba(248,246,238,.72), rgba(234,239,228,.54));
  border:1px solid rgba(255,255,255,.76);
  box-shadow:
    0 36px 100px rgba(8,24,15,.24),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(34px) saturate(165%);
  -webkit-backdrop-filter:blur(34px) saturate(165%);
  opacity:0;
  transform:scale(.985);
  transition:opacity .45s var(--ease) .10s, transform .72s var(--ease) .10s;
}
.product-modal.is-open .product-sheet{ opacity:1; transform:scale(1); }
.product-sheet::before{
  content:'';
  position:absolute;
  inset:-40%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle 220px at var(--mx) var(--my), rgba(255,255,255,.62), transparent 68%);
  mix-blend-mode:screen;
  opacity:.85;
}
.product-sheet::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(157,183,153,.18), transparent 70%),
    linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%);
}
.product-sheet__media,.product-sheet__content{ position:relative; z-index:1; min-width:0; }
.product-sheet__media{
  padding:clamp(22px, 4vw, 42px);
  display:flex;
  align-items:stretch;
  background:linear-gradient(160deg, rgba(255,255,255,.30), rgba(203,219,198,.12));
  border-right:1px solid rgba(255,255,255,.50);
}
.product-sheet__media .ph{
  width:100%;
  min-height:420px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 55px rgba(18,39,27,.12), inset 0 0 0 1px rgba(255,255,255,.54);
}
.product-sheet__media .ph img{ width:100%; height:100%; object-fit:cover; }
.product-sheet__content{
  padding:clamp(30px, 5vw, 56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.product-sheet__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-sage);
}
.product-sheet__eyebrow::before{ content:''; width:28px; height:1px; background:currentColor; opacity:.55; }
.product-sheet h2{
  font-size:clamp(34px, 5vw, 58px);
  line-height:.98;
  letter-spacing:-.03em;
  margin-bottom:16px;
}
.product-sheet__tagline{
  max-width:520px;
  font-family:var(--font-display);
  font-size:clamp(18px, 2vw, 23px);
  line-height:1.35;
  color:var(--c-forest);
  opacity:.72;
  margin-bottom:28px;
}
.product-sheet .catalog__prices{
  gap:12px;
  border:0;
  padding:0;
  margin-bottom:30px;
}
.product-sheet .price-block{
  padding:14px 16px;
  border:1px solid rgba(30,69,48,.10);
  border-radius:16px;
  background:rgba(255,255,255,.26);
}
.product-sheet .price-block__value{ font-size:22px; }
.product-sheet__facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.product-fact{
  min-height:116px;
  padding:16px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.48);
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.product-fact__label{
  display:block;
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--c-sage);
  margin-bottom:7px;
}
.product-fact p{ font-size:14px; line-height:1.45; opacity:.80; }
.product-fact--calories{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.product-fact__calories{
  font-family:var(--font-display);
  font-size:27px;
  letter-spacing:-.02em;
}
.product-sheet__note{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--c-forest);
  opacity:.58;
}
.product-sheet__note::before{ content:''; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--c-sage); box-shadow:0 0 0 5px rgba(111,140,116,.10); }

@media (max-width:760px){
  .hero-video-shell{ inset:10px; border-radius:28px; }
  .hero__inner::before{ inset:-30px -18px; }
  .product-modal__stage{ max-height:90vh; }
  .product-modal__panels{ max-height:90vh; border-radius:24px; }
  .product-sheet{ grid-template-columns:1fr; border-radius:24px; }
  .product-sheet__media{ border-right:0; border-bottom:1px solid rgba(255,255,255,.50); padding:18px; }
  .product-sheet__media .ph{ min-height:280px; max-height:42vh; }
  .product-sheet__content{ padding:28px 22px 30px; }
  .product-sheet__facts{ grid-template-columns:1fr; }
  .product-fact{ min-height:auto; }
  .product-modal__close{ top:10px; right:10px; }
}

@media (prefers-reduced-motion: reduce){
  .site-atmosphere__orb{ animation:none !important; }
  .hero-video-shell,.hero-video,.hero__inner,.hero__float-cards{ transform:none !important; opacity:1 !important; }
  .product-modal__stage,.product-sheet,.product-modal__backdrop{ transition:none !important; }
}

/* =========================================================
   V3 — full-bleed hero + clear modal + floating liquid glass
   ========================================================= */

/* Курсор всегда остаётся поверх модального слоя и читается на светлом/тёмном фоне. */
.cursor-dot,.cursor-ring{ z-index:2200; }
.cursor-dot{
  width:7px;
  height:7px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(24,61,42,.96), 0 2px 8px rgba(15,35,23,.28);
}
.cursor-ring{
  width:36px;
  height:36px;
  border:1.5px solid rgba(25,65,43,.88);
  box-shadow:0 0 0 1px rgba(255,255,255,.90), 0 5px 18px rgba(16,43,28,.14);
  background:rgba(255,255,255,.05);
}
.cursor-ring.is-active{
  width:52px;
  height:52px;
  border-color:rgba(25,65,43,.96);
  background:rgba(255,255,255,.13);
}

/* Видео — без рамки, от края до края. */
.hero{
  min-height:100svh;
  padding:120px var(--pad) 92px;
}
.hero-video-shell{
  inset:0;
  border-radius:0 !important;
  box-shadow:none;
  transform:none !important;
  opacity:1 !important;
  background:#e8eadf;
  transition:none;
}
.hero-video{
  opacity:0;
  filter:saturate(.96) contrast(1.01) brightness(1.015);
  transition:opacity .9s ease;
  backface-visibility:hidden;
  transform-origin:center center;
}
.hero-video-shell.has-video .hero-video{ opacity:1; }
.hero-video__fallback{ opacity:.48; }
.hero-video-shell.has-video .hero-video__fallback{ opacity:0; }

/* Верх ролика остаётся чистым, к низу изображение мягко уходит в blur и фон страницы. */
.hero-video__veil{
  top:auto;
  bottom:0;
  height:42%;
  z-index:2;
  background:linear-gradient(180deg,
    rgba(248,245,236,0) 0%,
    rgba(248,245,236,.08) 18%,
    rgba(248,245,236,.42) 58%,
    rgba(248,245,236,.90) 100%);
  backdrop-filter:blur(18px) saturate(105%);
  -webkit-backdrop-filter:blur(18px) saturate(105%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 22%, #000 58%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 22%, #000 58%, #000 100%);
}
.hero__inner::before{
  inset:-48px -82px;
  background:radial-gradient(ellipse at center, rgba(248,245,236,.56), rgba(248,245,236,.10) 62%, transparent 80%);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

/* Все фото-блоки сайта приводим к квадрату. */
.ph--tall,.ph--square{
  aspect-ratio:1 / 1 !important;
}
.about__media .ph{
  width:100%;
  max-width:560px;
  min-height:0;
}
.catalog__card .ph,
.float-card .ph,
.product-sheet__media .ph{
  aspect-ratio:1 / 1 !important;
}
.catalog__card .ph img,
.float-card .ph img,
.product-sheet__media .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Модалка без зелёного затемнения: страница остаётся светлой и читаемой. */
.product-modal{
  padding:clamp(14px, 2.3vw, 28px);
  perspective:1400px;
}
.product-modal__backdrop{
  background:rgba(248,246,239,.34) !important;
  backdrop-filter:blur(8px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(108%) !important;
}
.product-modal__stage{
  width:min(1220px, 100%);
  max-height:min(900px, 94vh);
  transform:translateY(24px) scale(.965);
  filter:blur(8px);
}
.product-modal.is-open .product-modal__stage{
  transform:translateY(0) scale(1);
}
.product-modal__panels{
  overflow:visible;
  max-height:none;
  border-radius:0;
}
.product-modal__close{
  top:12px;
  right:12px;
  z-index:30;
  width:50px;
  height:50px;
  color:var(--c-forest);
  background:rgba(255,255,255,.64);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 12px 36px rgba(21,48,32,.10), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.product-modal__close:focus{ outline:none; }
.product-modal__close:focus-visible{
  outline:2px solid rgba(25,65,43,.82);
  outline-offset:4px;
}

/* Центральный продукт + отдельные "осколки" liquid glass вокруг него. */
.product-sheet{
  --mx:50%;
  --my:42%;
  position:relative;
  display:block;
  width:100%;
  min-height:min(780px, 88vh);
  overflow:visible;
  border-radius:36px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 28px 90px rgba(24,48,33,.10), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  opacity:0;
  transform:scale(.985);
  transition:opacity .42s var(--ease) .08s, transform .68s var(--ease) .08s;
}
.product-sheet::before{
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle 260px at var(--mx) var(--my), rgba(255,255,255,.60), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.25), transparent 38%);
  mix-blend-mode:screen;
  opacity:.82;
}
.product-sheet::after{
  background:
    radial-gradient(45% 60% at 18% 15%, rgba(255,255,255,.32), transparent 72%),
    radial-gradient(38% 48% at 84% 82%, rgba(205,220,198,.13), transparent 74%);
}
.product-sheet__heading{
  position:absolute;
  z-index:8;
  top:42px;
  left:50%;
  width:min(520px, 48%);
  transform:translateX(-50%);
  text-align:center;
}
.product-sheet__eyebrow{
  justify-content:center;
  margin-bottom:10px;
}
.product-sheet__eyebrow::before{ width:24px; }
.product-sheet h2{
  font-size:clamp(42px, 5.2vw, 68px);
  line-height:.96;
  margin:0 0 12px;
}
.product-sheet__tagline{
  margin:0 auto;
  max-width:460px;
  font-size:clamp(17px, 1.7vw, 22px);
}
.product-sheet__media-wrap{
  position:absolute;
  z-index:6;
  left:50%;
  top:54%;
  width:min(37vw, 440px);
  transform:translate(-50%, -50%);
}
.product-sheet__media{
  padding:0;
  display:block;
  background:transparent;
  border:0;
}
.product-sheet__media .ph{
  width:100%;
  min-height:0;
  border-radius:30px;
  background:rgba(250,248,239,.62);
  box-shadow:
    0 30px 75px rgba(22,51,34,.16),
    0 0 0 1px rgba(255,255,255,.74),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.product-sheet__media .ph::after{ opacity:.68; }

.product-float{
  position:absolute;
  z-index:9;
  min-width:190px;
  max-width:265px;
  padding:17px 18px 16px;
  border-radius:20px;
  color:var(--c-forest);
  background:linear-gradient(145deg, rgba(255,255,255,.58), rgba(250,249,244,.30));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 18px 46px rgba(23,49,33,.09), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  opacity:0;
  transform:translateY(14px) scale(.96) rotate(var(--float-r, 0deg));
  transition:opacity .5s var(--ease), transform .78s cubic-bezier(.18,.8,.25,1);
}
.product-modal.is-open .product-float{
  opacity:1;
  transform:translateY(0) scale(1) rotate(var(--float-r, 0deg));
}
.product-float::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:19px;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.42), transparent 38%);
  opacity:.76;
}
.product-float > *{ position:relative; z-index:1; }
.product-float__label{
  display:block;
  margin-bottom:7px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-sage);
}
.product-float p{
  font-size:14px;
  line-height:1.42;
  margin:0;
}
.product-float__price{
  display:flex;
  align-items:baseline;
  gap:7px;
  font-family:var(--font-display);
  font-size:26px;
  line-height:1;
}
.product-float__unit{
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:.02em;
  opacity:.64;
}
.product-float__nutrition{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.product-float__nutrition strong{
  font-family:var(--font-display);
  font-weight:400;
  font-size:28px;
  line-height:1;
}
.product-float__nutrition span{ font-size:12px; opacity:.68; }

/* Намеренно не симметричная композиция. */
.product-float--retail{
  top:14%; left:3.5%; --float-r:-1.6deg;
  transition-delay:.13s;
}
.product-float--wholesale{
  top:18%; right:4.5%; --float-r:1.2deg;
  transition-delay:.18s;
}
.product-float--pairs{
  top:43%; left:1.8%; --float-r:.8deg;
  transition-delay:.23s;
}
.product-float--cuisine{
  top:47%; right:1.6%; --float-r:-1.4deg;
  transition-delay:.28s;
}
.product-float--calories{
  left:7.5%; bottom:8%; --float-r:-.7deg;
  transition-delay:.33s;
}
.product-float--delivery{
  right:5.5%; bottom:7%; --float-r:1.35deg;
  max-width:285px;
  transition-delay:.38s;
}
.product-sheet__note{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:28px;
  width:min(430px, 42%);
  transform:translateX(-50%);
  justify-content:center;
  margin:0;
  text-align:center;
}

@media (hover:hover) and (pointer:fine){
  .product-float{
    transition-property:opacity,transform,box-shadow;
  }
  .product-float:hover{
    box-shadow:0 24px 60px rgba(23,49,33,.13), inset 0 1px 0 rgba(255,255,255,.98);
    transform:translateY(-4px) scale(1.012) rotate(var(--float-r, 0deg));
  }
}

@media (max-width:900px){
  .product-modal{
    align-items:flex-start;
    overflow:auto;
    padding:12px;
  }
  .product-modal__stage{
    width:100%;
    max-height:none;
    margin:auto 0;
  }
  .product-modal__panels{ overflow:visible; }
  .product-sheet{
    min-height:0;
    padding:84px 16px 28px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    border-radius:28px;
  }
  .product-sheet__heading,
  .product-sheet__media-wrap,
  .product-float,
  .product-sheet__note{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:auto;
    max-width:none;
    transform:none;
  }
  .product-sheet__heading{
    order:1;
    text-align:left;
    width:auto;
    padding:0 8px 6px;
  }
  .product-sheet__eyebrow{ justify-content:flex-start; }
  .product-sheet__media-wrap{ order:2; width:min(78vw, 430px); margin:0 auto 8px; }
  .product-float{
    opacity:1;
    transform:none;
    min-width:0;
    border-radius:18px;
  }
  .product-float--retail{ order:3; }
  .product-float--wholesale{ order:4; }
  .product-float--pairs{ order:5; }
  .product-float--cuisine{ order:6; }
  .product-float--calories{ order:7; }
  .product-float--delivery{ order:8; }
  .product-sheet__note{ order:9; width:auto; padding:8px 8px 0; justify-content:flex-start; text-align:left; }
  .product-modal__close{ top:10px; right:10px; }
}

@media (max-width:640px){
  .hero{ padding-left:18px; padding-right:18px; }
  .hero-video__veil{ height:46%; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .hero__inner::before{ inset:-30px -16px; }
  .product-sheet h2{ font-size:clamp(38px, 13vw, 54px); }
}

@media (prefers-reduced-motion: reduce){
  .product-float{ opacity:1 !important; transform:none !important; }
}

/* Финальная микрокоррекция композиции: заголовок не пересекается с квадратным товаром даже на низких ноутбуках. */
@media (min-width:901px){
  .product-sheet__media-wrap{
    top:58%;
    width:min(35vw, 410px);
  }
}


/* =========================================================
   V4 — 3-video cinematic hero + high-contrast brand + living product modal
   ========================================================= */

/* HERO: ролики больше не зависят от скролла. Три слоя лежат друг над другом
   и меняются через opacity + blur + лёгкий cinematic push. */
.hero-video-shell{
  background:#1d2a21;
}
.hero-video-shell.has-video .hero-video{ opacity:0; }
.hero-video{
  opacity:0;
  z-index:0;
  transform:scale(1.035);
  filter:saturate(.96) contrast(1.035) brightness(.96) blur(0px);
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    filter 1.05s cubic-bezier(.22,.61,.36,1),
    transform 6.5s cubic-bezier(.2,.55,.3,1);
  will-change:opacity,filter,transform;
}
.hero-video.is-preparing{
  opacity:0;
  transform:scale(1.065);
  filter:saturate(.92) contrast(1.02) brightness(.93) blur(9px);
}
.hero-video.is-active{
  opacity:1 !important;
  transform:scale(1.012);
  filter:saturate(.98) contrast(1.04) brightness(.96) blur(0px);
  z-index:1;
}
.hero-video.is-leaving{
  opacity:0 !important;
  transform:scale(1.065);
  filter:saturate(.92) contrast(1.02) brightness(.94) blur(10px);
  z-index:2;
}
.hero-video__fallback{ z-index:0; }
.hero-video-shell.has-video .hero-video__fallback{ opacity:.04; }

/* Небольшой световой "дыхательный" переход скрывает монтажный стык между
   разными сценами, но не превращает смену ролика во вспышку. */
.hero-video__transition{
  position:absolute;
  inset:-10%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(42% 56% at 50% 48%, rgba(247,243,231,.30), transparent 72%),
    linear-gradient(105deg, transparent 34%, rgba(255,255,255,.11) 50%, transparent 66%);
  transform:scale(.96);
  mix-blend-mode:screen;
}
.hero-video__transition.is-switching{
  animation:hero-scene-bloom 1.05s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes hero-scene-bloom{
  0%{ opacity:0; transform:scale(.96); filter:blur(18px); }
  42%{ opacity:.82; transform:scale(1); filter:blur(7px); }
  100%{ opacity:0; transform:scale(1.035); filter:blur(20px); }
}

/* Нижнее растворение сохраняем, но делаем аккуратнее: оно начинается ниже,
   поэтому верх ролика выглядит резким, а блоки внизу остаются читаемыми. */
.hero-video__veil{
  z-index:4;
  height:38%;
  background:linear-gradient(180deg,
    rgba(247,243,231,0) 0%,
    rgba(247,243,231,.035) 18%,
    rgba(247,243,231,.25) 52%,
    rgba(247,243,231,.82) 100%);
  backdrop-filter:blur(13px) saturate(106%);
  -webkit-backdrop-filter:blur(13px) saturate(106%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 24%, #000 62%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 24%, #000 62%, #000 100%);
}
.hero-video__shine{ z-index:5; opacity:.52; }

/* Центральная зона под брендом сама размывает динамичный ролик. У неё нет
   видимой рамки: это не карточка, а мягкая область спокойного контраста. */
.hero__inner{
  transform:none !important;
  opacity:1 !important;
  isolation:isolate;
}
.hero__inner::before{
  inset:-76px -112px -58px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,
    rgba(244,242,231,.76) 0%,
    rgba(244,242,231,.60) 31%,
    rgba(244,242,231,.25) 59%,
    rgba(244,242,231,0) 78%);
  backdrop-filter:blur(17px) saturate(84%);
  -webkit-backdrop-filter:blur(17px) saturate(84%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0 54%, rgba(0,0,0,.72) 66%, transparent 82%);
  mask-image:radial-gradient(ellipse at center, #000 0 54%, rgba(0,0,0,.72) 66%, transparent 82%);
  opacity:.95;
}
.hero__logo-wrap{
  z-index:2;
  margin-bottom:2px;
}
.hero__logo-wrap::before{
  content:'';
  position:absolute;
  inset:11% 8% 8%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(250,247,237,.82), rgba(250,247,237,.22) 62%, transparent 78%);
  filter:blur(12px);
  opacity:.74;
}
.hero__logo{
  width:min(330px, 62vw);
  opacity:1;
  image-rendering:auto;
  filter:saturate(1.18) contrast(1.34) brightness(.86) drop-shadow(0 2px 12px rgba(250,247,237,.42));
  transform:translateZ(0);
  backface-visibility:hidden;
}
.hero__title{
  color:#173c2a;
  text-shadow:0 1px 0 rgba(255,255,255,.52), 0 5px 26px rgba(247,243,231,.36);
}
.hero__sub{
  color:#244b37;
  opacity:.96;
  text-shadow:0 1px 10px rgba(247,243,231,.42);
}
.growth__label{
  text-shadow:0 1px 8px rgba(247,243,231,.5);
}

/* Видео становится главным визуалом — дополнительные плавающие мини-карточки
   на первом экране больше не спорят с ним и с логотипом. */
.hero__float-cards{ display:none !important; }

/* PRODUCT MODAL: наружный .product-float отвечает только за позицию/reveal,
   а внутренний surface действительно парит. Так анимация не конфликтует с
   открытием модалки и не ломает хаотичную раскладку. */
.product-sheet{
  --product-x:0px;
  --product-y:0px;
}
.product-float{
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.product-float::before{ content:none !important; }
.product-float__surface{
  position:relative;
  width:100%;
  height:100%;
  padding:18px 20px;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.76), rgba(244,245,237,.46));
  border:1px solid rgba(255,255,255,.94);
  box-shadow:
    0 16px 42px rgba(23,49,33,.09),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(126,151,128,.08);
  backdrop-filter:blur(22px) saturate(142%);
  -webkit-backdrop-filter:blur(22px) saturate(142%);
  transform:translate3d(0,0,0) rotate(0deg);
  will-change:transform;
}
.product-float__surface::before{
  content:'';
  position:absolute;
  inset:-45% -30%;
  pointer-events:none;
  background:linear-gradient(112deg, transparent 35%, rgba(255,255,255,.60) 49%, transparent 63%);
  transform:translateX(-72%) rotate(8deg);
  opacity:.52;
  animation:glass-sheen 7.5s ease-in-out infinite;
}
.product-float__surface > *{ position:relative; z-index:1; }
@keyframes glass-sheen{
  0%,58%,100%{ transform:translateX(-72%) rotate(8deg); opacity:.18; }
  72%{ transform:translateX(70%) rotate(8deg); opacity:.62; }
  84%{ transform:translateX(70%) rotate(8deg); opacity:.16; }
}

.product-modal.is-open .product-float--retail .product-float__surface{ animation:float-glass-a 7.2s ease-in-out 1.0s infinite alternate; }
.product-modal.is-open .product-float--wholesale .product-float__surface{ animation:float-glass-b 8.4s ease-in-out 1.35s infinite alternate; }
.product-modal.is-open .product-float--pairs .product-float__surface{ animation:float-glass-c 7.7s ease-in-out .85s infinite alternate; }
.product-modal.is-open .product-float--cuisine .product-float__surface{ animation:float-glass-d 9.1s ease-in-out 1.55s infinite alternate; }
.product-modal.is-open .product-float--calories .product-float__surface{ animation:float-glass-b 8.0s ease-in-out 1.8s infinite alternate-reverse; }
.product-modal.is-open .product-float--delivery .product-float__surface{ animation:float-glass-c 8.8s ease-in-out 1.15s infinite alternate-reverse; }

@keyframes float-glass-a{
  0%{ transform:translate3d(-2px,2px,0) rotate(-.7deg); }
  50%{ transform:translate3d(5px,-7px,0) rotate(.45deg); }
  100%{ transform:translate3d(-3px,-2px,0) rotate(-.35deg); }
}
@keyframes float-glass-b{
  0%{ transform:translate3d(3px,-2px,0) rotate(.55deg); }
  45%{ transform:translate3d(-5px,6px,0) rotate(-.45deg); }
  100%{ transform:translate3d(4px,-5px,0) rotate(.25deg); }
}
@keyframes float-glass-c{
  0%{ transform:translate3d(-3px,-3px,0) rotate(-.35deg); }
  55%{ transform:translate3d(6px,4px,0) rotate(.7deg); }
  100%{ transform:translate3d(1px,-7px,0) rotate(.05deg); }
}
@keyframes float-glass-d{
  0%{ transform:translate3d(2px,4px,0) rotate(.25deg); }
  42%{ transform:translate3d(-6px,-5px,0) rotate(-.6deg); }
  100%{ transform:translate3d(5px,1px,0) rotate(.5deg); }
}

/* Центральный квадрат не стоит мёртво: очень медленно "дышит" вверх-вниз,
   а pointer-параллакс из JS добавляется поверх базовой позиции. */
.product-sheet__media-wrap{
  transform:translate(calc(-50% + var(--product-x)), calc(-50% + var(--product-y))) !important;
  transition:transform .08s linear;
}
.product-sheet__media{
  animation:product-media-breathe 6.4s ease-in-out infinite;
  will-change:transform;
}
.product-sheet__media .ph{
  box-shadow:
    0 28px 72px rgba(24,49,33,.13),
    0 0 0 1px rgba(255,255,255,.76),
    inset 0 1px 0 rgba(255,255,255,.82);
}
@keyframes product-media-breathe{
  0%,100%{ transform:translateY(0) rotate(-.18deg) scale(1); }
  50%{ transform:translateY(-9px) rotate(.22deg) scale(1.008); }
}
.product-sheet__note{
  animation:note-breathe 5.8s ease-in-out infinite;
}
@keyframes note-breathe{
  0%,100%{ opacity:.62; transform:translateX(-50%) translateY(0); }
  50%{ opacity:.90; transform:translateX(-50%) translateY(-3px); }
}

@media (hover:hover) and (pointer:fine){
  .product-float:hover .product-float__surface{
    animation-play-state:paused;
    box-shadow:
      0 28px 70px rgba(23,49,33,.15),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(126,151,128,.08);
  }
}

@media (max-width:900px){
  .product-sheet__media-wrap{
    transform:none !important;
  }
  .product-sheet__media{ animation-duration:7.2s; }
  .product-float__surface{ padding:16px 17px; border-radius:18px; }
}

@media (prefers-reduced-motion:reduce){
  .hero-video,
  .hero-video__transition,
  .product-sheet__media,
  .product-float__surface,
  .product-float__surface::before,
  .product-sheet__note{ animation:none !important; transition:none !important; }
  .hero-video.is-active{ transform:scale(1.02); filter:none; }
}

/* V4 responsive safety: in document-flow mobile modal elements must not inherit
   desktop translate animations. */
@media (max-width:900px){
  .product-sheet__note{ animation:none !important; transform:none !important; }
  .product-sheet__media-wrap{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
  .product-sheet{ --product-x:0px; --product-y:0px; }
}

/* =========================================================
   V5 — cinematic glass header + contrast field for hero brand
   ========================================================= */

/* Шапка теперь присутствует уже на первом экране: это не белая плашка,
   а тонкое тёмное стекло поверх видео. После hero она становится светлой. */
.nav{
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  padding:14px var(--pad);
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav__inner{
  max-width:1220px;
  min-height:62px;
  padding:9px 12px 9px 11px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.17);
  background:linear-gradient(135deg, rgba(9,22,15,.34), rgba(9,22,15,.19));
  box-shadow:0 14px 44px rgba(4,13,8,.12), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(122%);
  -webkit-backdrop-filter:blur(18px) saturate(122%);
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
}
.nav__brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
}
.nav__logo{
  width:38px;
  height:38px;
  object-fit:contain;
  flex:0 0 auto;
  filter:brightness(0) invert(96%) sepia(11%) saturate(315%) hue-rotate(341deg) brightness(104%) contrast(92%) drop-shadow(0 2px 12px rgba(0,0,0,.16));
  transition:filter .45s var(--ease);
}
.nav__brand-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  line-height:1.05;
  color:#f4efe2;
  transition:color .45s var(--ease);
}
.nav__brand-copy strong{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:500;
  letter-spacing:.025em;
  white-space:nowrap;
}
.nav__brand-copy small{
  margin-top:4px;
  font-size:8.5px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  opacity:.66;
  white-space:nowrap;
}
.nav__actions{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}
.nav__links{ gap:28px; }
.nav__links a{
  color:#f4efe2;
  opacity:.78;
  text-shadow:0 1px 12px rgba(0,0,0,.18);
  transition:opacity .25s ease, color .45s var(--ease);
}
.nav__links a::after{ background:currentColor; }
.nav__scene-indicator{
  display:flex;
  align-items:center;
  gap:5px;
  height:28px;
  padding:0 7px;
  border-left:1px solid rgba(255,255,255,.16);
}
.nav__scene-indicator span{
  display:block;
  width:13px;
  height:2px;
  border-radius:2px;
  background:rgba(244,239,226,.34);
  transform-origin:left center;
  transition:width .45s var(--ease), background .45s var(--ease), opacity .45s var(--ease);
}
.nav__scene-indicator span.is-active{
  width:28px;
  background:#f4efe2;
}

/* Светлая версия стекла после первого экрана. */
.nav:not(.is-hero) .nav__inner,
.nav.is-solid:not(.is-hero) .nav__inner{
  border-color:rgba(30,69,48,.13);
  background:linear-gradient(135deg, rgba(247,243,231,.88), rgba(247,243,231,.70));
  box-shadow:0 12px 36px rgba(30,69,48,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav:not(.is-hero) .nav__logo{
  filter:saturate(1.05) contrast(1.08);
}
.nav:not(.is-hero) .nav__brand-copy,
.nav:not(.is-hero) .nav__links a{
  color:var(--c-forest);
  text-shadow:none;
}
.nav:not(.is-hero) .nav__scene-indicator{
  opacity:0;
  width:0;
  padding:0;
  gap:0;
  overflow:hidden;
  border-left-color:transparent;
}

/* Вместо белого овала — бесформенная вертикальная "дымка": фон под брендом
   локально становится спокойнее и темнее, но край зоны нигде не читается. */
.hero__inner::before{
  inset:-110px -190px -96px !important;
  border-radius:0 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(7,20,13,.05) 10%,
      rgba(7,20,13,.24) 28%,
      rgba(7,20,13,.43) 48%,
      rgba(7,20,13,.30) 70%,
      rgba(7,20,13,.06) 90%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(7,20,13,.08) 13%,
      rgba(7,20,13,.28) 34%,
      rgba(7,20,13,.34) 60%,
      rgba(7,20,13,.12) 83%,
      transparent 100%) !important;
  backdrop-filter:blur(9px) brightness(.80) saturate(84%) !important;
  -webkit-backdrop-filter:blur(9px) brightness(.80) saturate(84%) !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
  mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
  opacity:1 !important;
}
.hero__logo-wrap::before{
  content:none !important;
}
.hero__logo{
  width:min(345px, 64vw);
  opacity:1;
  filter:brightness(0) invert(96%) sepia(11%) saturate(315%) hue-rotate(341deg) brightness(104%) contrast(92%) drop-shadow(0 3px 17px rgba(0,0,0,.30));
}
.hero__title{
  color:#f4efe2 !important;
  text-shadow:0 2px 28px rgba(0,0,0,.34), 0 1px 1px rgba(0,0,0,.16) !important;
}
.hero__title::before{
  background:radial-gradient(50% 50% at 50% 50%, rgba(244,239,226,.08), transparent 70%) !important;
}
.hero__sub{
  color:rgba(247,243,231,.91) !important;
  opacity:1 !important;
  text-shadow:0 2px 18px rgba(0,0,0,.28) !important;
}
.growth__stage{ color:#f4efe2; }
.growth__icon{
  color:var(--c-forest);
  background:rgba(247,243,231,.84);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.growth__line{
  background:linear-gradient(90deg, rgba(244,239,226,.16), rgba(244,239,226,.52), rgba(244,239,226,.16)) !important;
}
.growth__label{
  color:rgba(247,243,231,.76);
  text-shadow:0 2px 13px rgba(0,0,0,.25);
}
.hero__scroll{
  color:rgba(247,243,231,.76);
  text-shadow:0 2px 13px rgba(0,0,0,.24);
}

/* Лёгкая кинематографичная виньетка объединяет разные ролики и делает
   края кадра менее пустыми, не затемняя центр в сплошную плашку. */
.hero-video-shell::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,14,9,.34) 0%, rgba(5,14,9,.07) 18%, transparent 38%),
    linear-gradient(90deg, rgba(4,13,8,.19) 0%, transparent 17%, transparent 83%, rgba(4,13,8,.17) 100%);
}
.hero-video__transition{ z-index:3; }
.hero-video__veil{ z-index:4; }
.hero-video__shine{ z-index:5; }
.hero__inner{ z-index:6; }

@media (max-width:760px){
  .nav{ padding:10px 12px; }
  .nav__inner{ min-height:56px; border-radius:15px; padding:8px 9px; }
  .nav__brand-copy small{ display:none; }
  .nav__brand-copy strong{ font-size:14px; }
  .nav__actions{ gap:8px; }
  .nav__scene-indicator{ border-left:0; padding:0 2px; }
  .nav__scene-indicator span{ width:8px; }
  .nav__scene-indicator span.is-active{ width:20px; }
  .hero__inner::before{
    inset:-82px -58px -82px !important;
    background:
      linear-gradient(90deg, transparent 0%, rgba(7,20,13,.27) 20%, rgba(7,20,13,.43) 50%, rgba(7,20,13,.27) 80%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgba(7,20,13,.12) 15%, rgba(7,20,13,.30) 48%, rgba(7,20,13,.10) 84%, transparent 100%) !important;
    backdrop-filter:blur(7px) brightness(.82) saturate(88%) !important;
    -webkit-backdrop-filter:blur(7px) brightness(.82) saturate(88%) !important;
  }
  .hero__logo{ width:min(300px, 72vw); }
}

/* =========================================================
   V6 — ivory glass header + clean hero-to-content dissolve
   ========================================================= */

/* Шапка: светлое молочное стекло на всех трёх роликах.
   Она больше не меняет характер в зависимости от кадра и остаётся читаемой. */
.nav .nav__inner,
.nav.is-hero .nav__inner,
.nav.is-solid .nav__inner,
.nav:not(.is-hero) .nav__inner{
  border-color:rgba(30,69,48,.11) !important;
  background:linear-gradient(135deg, rgba(252,250,244,.88), rgba(247,243,231,.74)) !important;
  box-shadow:
    0 12px 38px rgba(18,39,27,.075),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(20px) saturate(118%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(118%) !important;
}
.nav .nav__logo,
.nav.is-hero .nav__logo,
.nav:not(.is-hero) .nav__logo{
  filter:saturate(1.08) contrast(1.12) brightness(.91) !important;
}
.nav .nav__brand-copy,
.nav .nav__links a,
.nav.is-hero .nav__brand-copy,
.nav.is-hero .nav__links a,
.nav:not(.is-hero) .nav__brand-copy,
.nav:not(.is-hero) .nav__links a{
  color:var(--c-forest) !important;
  text-shadow:none !important;
}
.nav .nav__links a{ opacity:.72; }
.nav .nav__links a:hover{ opacity:1; }
.nav .nav__scene-indicator{
  border-left-color:rgba(30,69,48,.12) !important;
}
.nav .nav__scene-indicator span{
  background:rgba(30,69,48,.22) !important;
}
.nav .nav__scene-indicator span.is-active{
  background:var(--c-forest) !important;
}

/* Убираем прежнее белое засветление/blur снизу hero полностью. */
.hero-video__veil{
  display:none !important;
}

/* Само видео постепенно становится прозрачным у нижнего края.
   Это даёт настоящий dissolve в цвет страницы без белой вспышки поверх кадра. */
.hero-video-shell{
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 86%,
    rgba(0,0,0,.96) 90%,
    rgba(0,0,0,.72) 94%,
    rgba(0,0,0,.30) 97.5%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 86%,
    rgba(0,0,0,.96) 90%,
    rgba(0,0,0,.72) 94%,
    rgba(0,0,0,.30) 97.5%,
    transparent 100%
  );
}

/* Убираем любые дополнительные световые подложки в самом низу ролика. */
.hero-video__shine{
  opacity:.28 !important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 50%,transparent 82%) !important;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 50%,transparent 82%) !important;
}
.hero{
  background:var(--c-ivory);
  margin-bottom:-1px;
}

/* Первый блок после видео продолжает тот же фон, поэтому граница не читается. */
.marquee{
  position:relative;
  z-index:7;
  margin-top:-1px;
  padding:30px 0 32px;
  background:var(--c-ivory);
  border-top:0 !important;
  border-bottom:1px solid rgba(30,69,48,.10);
}

/* Типографическая иерархия marquee:
   главный тезис — крупная антиква; доставка — тихая подпись, а не контурный заголовок. */
.marquee__track{
  align-items:center;
}
.marquee__track span{
  padding:0 34px;
}
.marquee__track span:nth-child(odd){
  font-family:var(--font-display);
  font-size:clamp(26px, 4.25vw, 46px);
  font-weight:500;
  letter-spacing:.005em;
  color:var(--c-forest);
}
.marquee__track span:nth-child(even){
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-family:var(--font-body);
  font-size:clamp(10px, 1.05vw, 12.5px);
  font-style:normal;
  font-weight:600;
  line-height:1;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(30,69,48,.53);
  -webkit-text-stroke:0 !important;
  opacity:1;
  padding-left:58px;
  padding-right:58px;
}
.marquee__track span:nth-child(even)::before,
.marquee__track span:nth-child(even)::after{
  content:'';
  display:block;
  width:28px;
  height:1px;
  flex:0 0 28px;
  background:rgba(30,69,48,.20);
}

/* Чуть более чистый стык с декоративной лозой ниже marquee. */
.vine-divider{
  background:var(--c-ivory);
}

@media (max-width:760px){
  .nav .nav__inner,
  .nav.is-hero .nav__inner{
    background:rgba(250,248,241,.88) !important;
    backdrop-filter:blur(16px) saturate(114%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(114%) !important;
  }
  .hero-video-shell{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,rgba(0,0,0,.72) 95%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 88%,rgba(0,0,0,.72) 95%,transparent 100%);
  }
  .marquee{ padding:24px 0 26px; }
  .marquee__track span{ padding-left:24px; padding-right:24px; }
  .marquee__track span:nth-child(even){
    font-size:9px;
    letter-spacing:.17em;
    padding-left:32px;
    padding-right:32px;
    gap:9px;
  }
  .marquee__track span:nth-child(even)::before,
  .marquee__track span:nth-child(even)::after{
    width:18px;
    flex-basis:18px;
  }
}

/* =========================================================
   V7 — transparent blur header + seamless hero edge + softer marquee
   ========================================================= */

/* 1) Шапка: никакой молочной/зелёной плашки. Только прозрачное стекло. */
.nav,
.nav.is-solid{
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.nav .nav__inner,
.nav.is-hero .nav__inner,
.nav.is-solid .nav__inner,
.nav:not(.is-hero) .nav__inner{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.17) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(11px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(11px) saturate(108%) !important;
}
/* На видео меню светлое; после hero — фирменное зелёное, но стекло остаётся прозрачным. */
.nav.is-hero .nav__brand-copy,
.nav.is-hero .nav__links a{
  color:rgba(250,247,238,.92) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.22) !important;
}
.nav.is-hero .nav__logo{
  filter:brightness(0) invert(1) opacity(.92) !important;
}
.nav.is-hero .nav__scene-indicator{
  border-left-color:rgba(255,255,255,.20) !important;
}
.nav.is-hero .nav__scene-indicator span{
  background:rgba(255,255,255,.28) !important;
}
.nav.is-hero .nav__scene-indicator span.is-active{
  background:rgba(255,255,255,.88) !important;
}
.nav:not(.is-hero) .nav__brand-copy,
.nav:not(.is-hero) .nav__links a{
  color:var(--c-forest) !important;
  text-shadow:none !important;
}
.nav:not(.is-hero) .nav__logo{
  filter:saturate(1.08) contrast(1.12) brightness(.91) !important;
}

/* 2) Больше не маскируем видео в белый прямоугольник. */
.hero-video-shell{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.hero{
  background:transparent !important;
  margin-bottom:0 !important;
}
/* Очень короткий внутренний dissolve — только на самом краю кадра, без отдельной полосы. */
.hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:86px;
  z-index:7;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(247,243,231,0) 0%,
    rgba(247,243,231,.10) 34%,
    rgba(247,243,231,.42) 70%,
    rgba(247,243,231,.82) 92%,
    var(--c-ivory) 100%
  );
}
/* Следующий блок слегка заходит на видео. Поэтому между ними нет пустого ivory-куска. */
.marquee{
  z-index:8 !important;
  margin-top:-1px !important;
  padding:27px 0 30px !important;
  background:var(--c-ivory) !important;
  border-top:0 !important;
}

/* 3) У декоративной линии/scroll-growth нет собственной подложки. */
.vine-divider,
.vine-divider__svg,
.hero__scroll{
  background:transparent !important;
  box-shadow:none !important;
}
.vine-divider{
  position:relative;
  z-index:2;
}
.vine-divider__svg{
  overflow:visible;
}
.hero__scroll{
  border:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* 4) Бегущая строка: те же фразы, но мягче и спокойнее по пластике. */
.marquee__track span:nth-child(odd){
  font-family:ui-rounded, 'SF Pro Rounded', 'Avenir Next', 'Trebuchet MS', var(--font-body) !important;
  font-size:clamp(25px, 3.7vw, 43px) !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
  line-height:1.05 !important;
  color:var(--c-forest) !important;
  -webkit-font-smoothing:antialiased;
}
.marquee__track span:nth-child(even){
  font-family:ui-rounded, 'SF Pro Rounded', 'Avenir Next', 'Trebuchet MS', var(--font-body) !important;
  font-weight:500 !important;
  letter-spacing:.15em !important;
  color:rgba(30,69,48,.50) !important;
}

@media (max-width:760px){
  .nav .nav__inner,
  .nav.is-hero .nav__inner,
  .nav.is-solid .nav__inner{
    background:rgba(255,255,255,.035) !important;
    backdrop-filter:blur(9px) saturate(106%) !important;
    -webkit-backdrop-filter:blur(9px) saturate(106%) !important;
  }
  .hero::after{ height:64px; }
  .marquee{ padding:23px 0 25px !important; }
  .marquee__track span:nth-child(odd){
    font-size:clamp(23px, 8vw, 34px) !important;
    letter-spacing:-.02em !important;
  }
}


/* =========================================================
   V8 — clean hero seam + clean catalog + prices under product
   ========================================================= */

/* HERO → CONTENT: remove the visible ivory strip completely.
   The next section overlaps the final part of the video and performs the fade
   itself, so there is no independent bright rectangle between sections. */
.hero::after{
  content:none !important;
  display:none !important;
}
.hero{
  overflow:hidden;
  margin-bottom:0 !important;
}
.marquee{
  position:relative;
  z-index:8 !important;
  margin-top:-72px !important;
  padding:94px 0 30px !important;
  background:linear-gradient(
    to bottom,
    rgba(247,243,231,0) 0%,
    rgba(247,243,231,.10) 18%,
    rgba(247,243,231,.42) 42%,
    rgba(247,243,231,.82) 67%,
    var(--c-ivory) 82%,
    var(--c-ivory) 100%
  ) !important;
  border-top:0 !important;
}

/* CATALOG: no decorative petals/mandala around the heading. */
.catalog__mandala,
.mandala-spin{
  display:none !important;
  animation:none !important;
}
.catalog__head{
  overflow:visible;
}

/* PRODUCT: retail and wholesale are a deliberate pair directly beneath
   the central square; the remaining facts keep their asymmetric layout. */
.product-sheet__media-wrap{
  top:51.5% !important;
  width:min(34vw, 400px) !important;
}
.product-sheet__prices-row{
  position:absolute;
  z-index:11;
  left:50%;
  top:calc(51.5% + min(17vw, 200px) + 18px);
  width:min(470px, 44%);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.product-price-card{
  position:relative;
  min-width:0;
  padding:14px 17px 13px;
  border-radius:18px;
  overflow:hidden;
  color:var(--c-forest);
  background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(244,245,237,.50));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 14px 34px rgba(23,49,33,.085),
    inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(20px) saturate(138%);
  -webkit-backdrop-filter:blur(20px) saturate(138%);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.product-price-card::before{
  content:'';
  position:absolute;
  inset:-60% -40%;
  pointer-events:none;
  background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.58) 50%, transparent 62%);
  transform:translateX(-78%) rotate(7deg);
  opacity:.38;
  animation:price-glass-sheen 8.5s ease-in-out infinite;
}
.product-price-card > *{ position:relative; z-index:1; }
.product-price-card--wholesale::before{ animation-delay:1.7s; }
@keyframes price-glass-sheen{
  0%,62%,100%{ transform:translateX(-78%) rotate(7deg); opacity:.16; }
  76%{ transform:translateX(76%) rotate(7deg); opacity:.52; }
  88%{ transform:translateX(76%) rotate(7deg); opacity:.12; }
}
.product-price-card .product-float__label{ margin-bottom:5px; }
.product-price-card .product-float__price{ font-size:23px; }

/* Free the upper corners where the old prices used to float. */
.product-float--pairs{ top:31% !important; left:2.3% !important; }
.product-float--cuisine{ top:35% !important; right:2.1% !important; }
.product-float--calories{ left:6.5% !important; bottom:8% !important; }
.product-float--delivery{ right:5% !important; bottom:7% !important; }
.product-sheet__note{ bottom:18px !important; }

@media (hover:hover) and (pointer:fine){
  .product-price-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 48px rgba(23,49,33,.12), inset 0 1px 0 rgba(255,255,255,1);
  }
}

@media (max-width:900px){
  .marquee{
    margin-top:-48px !important;
    padding-top:68px !important;
  }
  .product-sheet__media-wrap{
    top:auto !important;
    width:min(78vw, 430px) !important;
  }
  .product-sheet__prices-row{
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    width:min(78vw, 430px);
    transform:none;
    order:3;
    margin:0 auto 4px;
    gap:10px;
  }
  .product-float--pairs{ order:4; }
  .product-float--cuisine{ order:5; }
  .product-float--calories{ order:6; }
  .product-float--delivery{ order:7; }
  .product-sheet__note{ order:8; }
}

@media (max-width:520px){
  .product-sheet__prices-row{ grid-template-columns:1fr 1fr; width:100%; }
  .product-price-card{ padding:13px 12px 12px; }
  .product-price-card .product-float__price{ font-size:20px; gap:4px; }
  .product-price-card .product-float__unit{ font-size:9px; }
}

@media (prefers-reduced-motion:reduce){
  .product-price-card::before{ animation:none !important; }
}

/* =========================================================
   V9 — true clean hero seam + raised bottom product facts
   ========================================================= */

/* The visible light strip came from V8's marquee overlap/gradient.
   Keep the ticker entirely AFTER the hero: no negative overlap and no
   translucent gradient painted on top of the final video frames. */
.hero::after{
  content:none !important;
  display:none !important;
}
.hero{
  margin-bottom:0 !important;
  background:transparent !important;
}
.marquee{
  position:relative;
  z-index:8 !important;
  margin-top:0 !important;
  padding:28px 0 30px !important;
  background:var(--c-ivory) !important;
  background-image:none !important;
  border-top:0 !important;
  box-shadow:none !important;
}

/* Lift the two lower floating fact cards without touching the price pair. */
.product-float--calories{
  left:6.5% !important;
  bottom:15.5% !important;
}
.product-float--delivery{
  right:5% !important;
  bottom:15% !important;
}

@media (max-width:900px){
  /* Mobile uses normal document flow for product facts, so only remove
     the desktop hero overlap here. */
  .marquee{
    margin-top:0 !important;
    padding:24px 0 26px !important;
  }
}

/* =========================================================
   V10 — remove hero blur seam + softer hero-to-marquee dissolve
   ========================================================= */

/* The horizontal line visible inside the video was the compositing edge of
   the blurred contrast field behind the hero copy. Feather that field on ALL
   sides instead of only left/right, so the backdrop-filter has no hard lower
   boundary to render. */
.hero__inner::before{
  inset:-132px -220px -128px !important;
  border-radius:50% !important;
  background:radial-gradient(
    ellipse at 50% 46%,
    rgba(7,20,13,.44) 0%,
    rgba(7,20,13,.36) 34%,
    rgba(7,20,13,.22) 58%,
    rgba(7,20,13,.09) 76%,
    rgba(7,20,13,0) 100%
  ) !important;
  backdrop-filter:blur(9px) brightness(.82) saturate(86%) !important;
  -webkit-backdrop-filter:blur(9px) brightness(.82) saturate(86%) !important;
  -webkit-mask-image:radial-gradient(
    ellipse at 50% 46%,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.92) 56%,
    rgba(0,0,0,.62) 72%,
    rgba(0,0,0,.24) 86%,
    transparent 100%
  ) !important;
  mask-image:radial-gradient(
    ellipse at 50% 46%,
    #000 0%,
    #000 42%,
    rgba(0,0,0,.92) 56%,
    rgba(0,0,0,.62) 72%,
    rgba(0,0,0,.24) 86%,
    transparent 100%
  ) !important;
  opacity:1 !important;
}

/* Keep the hero itself edge-free. */
.hero,
.hero-video-shell{
  border-bottom:0 !important;
  box-shadow:none !important;
}
.hero::after,
.hero-video-shell::before{
  content:none !important;
  display:none !important;
}

/* The ticker begins in normal flow, while ONLY its transparent pseudo-layer
   reaches upward over the final video frames. This creates a long dissolve
   rather than a separate ivory strip. */
.marquee{
  margin-top:0 !important;
  padding:28px 0 30px !important;
  background:var(--c-ivory) !important;
  overflow:visible !important;
  isolation:isolate;
}
.marquee::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-118px;
  height:120px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(247,243,231,0) 0%,
    rgba(247,243,231,.025) 20%,
    rgba(247,243,231,.08) 39%,
    rgba(247,243,231,.20) 57%,
    rgba(247,243,231,.42) 73%,
    rgba(247,243,231,.72) 88%,
    var(--c-ivory) 100%
  );
}

@media (max-width:760px){
  .hero__inner::before{
    inset:-92px -80px -94px !important;
    backdrop-filter:blur(7px) brightness(.82) saturate(86%) !important;
    -webkit-backdrop-filter:blur(7px) brightness(.82) saturate(86%) !important;
  }
  .marquee::before{
    top:-82px;
    height:84px;
  }
}

/* =========================================================
   V11 — remove the hero contrast halo only
   ========================================================= */
/* User requested no visible ring/halo behind the central logo. Keep every
   other V10 transition, typography and video treatment unchanged. */
.hero__inner::before{
  content:none !important;
  display:none !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.about__photo {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.about__photo::before,
.about__photo::after {
  display: none !important;
  content: none !important;
}

.about__photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: transparent;
}
.about__photo {
  overflow: hidden;
  border-radius: 28px;
}

.about__photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
}
/* =========================================
   FIX: HERO НА ВСЮ ШИРИНУ ЭКРАНА
========================================= */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  position: relative;
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.hero-video-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
}

.hero-video--single {
  width: 100%;
  height: 100%;
}
/* =========================================
   КАТАЛОГ — ЧИСТЫЕ PNG БЕЗ ФОНА И ПОДПИСЕЙ
========================================= */

/* Убираем зеленоватую подложку у изображения товара */
.catalog__card .ph,
.catalog__card .product-image,
.catalog__card .catalog__image {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

/* Убираем декоративный фон заглушки */
.catalog__card .ph::before {
  display: none !important;
  content: none !important;
}

/* Убираем название товара в пунктирной рамке */
.catalog__card .ph::after {
  display: none !important;
  content: none !important;
}

/* На случай, если подпись создаётся отдельным элементом */
.catalog__card .ph__label,
.catalog__card .placeholder-label,
.catalog__card [data-ph-label] > .label {
  display: none !important;
}

/* PNG остаётся на прозрачном фоне */
.catalog__card .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
}

/* Сам блок изображения тоже прозрачный */
.catalog__card [data-ph-label] {
  background: transparent !important;
}


/* =========================================================
   B2B — форма для ресторанов, шефов и управляющих
   ========================================================= */
.b2b{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:86px var(--pad) 92px;
}
.b2b__shell{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  gap:clamp(38px,6vw,86px);
  padding:clamp(34px,5vw,70px);
  border-radius:36px;
  border:1px solid rgba(247,243,231,.16);
  color:var(--c-ivory);
  background:
    linear-gradient(135deg, rgba(17,39,27,.97), rgba(30,69,48,.94));
  box-shadow:0 34px 80px rgba(18,39,27,.16);
  isolation:isolate;
}
.b2b__shell::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.06), transparent 30%, transparent 72%, rgba(255,255,255,.035));
  z-index:-1;
}
.b2b__glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(8px);
  opacity:.36;
  z-index:-1;
}
.b2b__glow--one{
  width:420px; height:420px;
  right:-120px; top:-170px;
  background:radial-gradient(circle, rgba(201,212,196,.28), transparent 68%);
}
.b2b__glow--two{
  width:360px; height:360px;
  left:-170px; bottom:-190px;
  background:radial-gradient(circle, rgba(247,243,231,.10), transparent 70%);
}
.b2b__intro{ align-self:center; position:relative; z-index:1; }
.b2b__eyebrow{ color:rgba(247,243,231,.62); }
.b2b__intro h2{
  color:var(--c-ivory);
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.04;
  letter-spacing:-.025em;
  max-width:620px;
  margin-bottom:24px;
}
.b2b__lead{
  color:rgba(247,243,231,.76);
  max-width:570px;
  font-size:15.5px;
  line-height:1.75;
}
.b2b__contacts{ margin-top:38px; display:grid; gap:14px; }
.b2b__phone{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  padding:21px 0 18px;
  border-top:1px solid rgba(247,243,231,.18);
  border-bottom:1px solid rgba(247,243,231,.18);
}
.b2b__phone span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(247,243,231,.52);
}
.b2b__phone strong{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--c-ivory);
  font-size:clamp(22px,2.4vw,30px);
  line-height:1;
}
.b2b__contact-links{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.b2b__contact-link{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid rgba(247,243,231,.14);
  background:rgba(247,243,231,.055);
  border-radius:16px;
  transition:background .3s ease,border-color .3s ease,transform .35s var(--ease);
}
.b2b__contact-link:hover{
  background:rgba(247,243,231,.10);
  border-color:rgba(247,243,231,.25);
}
.b2b__contact-icon{
  flex:0 0 34px;
  width:34px; height:34px;
  border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(247,243,231,.22);
  color:var(--c-ivory);
  font-size:13px;
}
.b2b__contact-link > span:last-child{ min-width:0; display:grid; gap:1px; }
.b2b__contact-link small{
  color:rgba(247,243,231,.48);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.b2b__contact-link strong{
  color:var(--c-ivory);
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.b2b__form-wrap{
  position:relative;
  z-index:1;
  padding:clamp(24px,3.4vw,40px);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(247,243,231,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 22px 50px rgba(0,0,0,.10);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
}
.b2b__form-head{ margin-bottom:27px; }
.b2b__form-head > span{
  display:block;
  color:var(--c-ivory);
  font-family:var(--font-display);
  font-size:25px;
  margin-bottom:5px;
}
.b2b__form-head p{ color:rgba(247,243,231,.58); font-size:12.5px; }
.b2b-form{ display:grid; gap:17px; }
.b2b-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.b2b-field{ display:grid; gap:7px; }
.b2b-field > span{
  color:rgba(247,243,231,.62);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.b2b-field input,
.b2b-field textarea{
  width:100%;
  min-width:0;
  appearance:none;
  border:1px solid rgba(247,243,231,.17);
  border-radius:15px;
  background:rgba(247,243,231,.075);
  color:var(--c-ivory);
  font:inherit;
  font-size:14px;
  outline:none;
  padding:14px 15px;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.b2b-field textarea{ resize:vertical; min-height:126px; line-height:1.55; }
.b2b-field input::placeholder,
.b2b-field textarea::placeholder{ color:rgba(247,243,231,.35); }
.b2b-field input:focus,
.b2b-field textarea:focus{
  border-color:rgba(247,243,231,.48);
  background:rgba(247,243,231,.11);
  box-shadow:0 0 0 3px rgba(247,243,231,.055);
}
.b2b-field input:user-invalid,
.b2b-field textarea:user-invalid{ border-color:rgba(240,177,163,.62); }
.b2b-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(247,243,231,.56);
  font-size:11.5px;
  line-height:1.5;
}
.b2b-consent input{
  flex:0 0 17px;
  width:17px; height:17px;
  margin:2px 0 0;
  accent-color:var(--c-ivory);
}
.b2b-consent a{ color:var(--c-ivory); border-bottom:1px solid rgba(247,243,231,.32); }
.b2b-form__actions{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:2px;
}
.b2b-form__submit{
  flex:0 0 auto;
  min-height:50px;
  border:0;
  border-radius:999px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--c-ivory);
  color:var(--c-forest-dark);
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease;
}
.b2b-form__submit:hover{ background:#fffdf5; box-shadow:0 14px 32px rgba(0,0,0,.18); }
.b2b-form__note{ color:rgba(247,243,231,.42); font-size:10.5px; line-height:1.45; max-width:240px; }
.b2b-form__status{ min-height:18px; color:rgba(247,243,231,.72); font-size:11.5px; }
.footer__contacts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px 10px;
  margin:2px 0 22px;
  color:var(--c-sage);
  font-size:12px;
}
.footer__contacts a{ opacity:.78; transition:opacity .25s ease; }
.footer__contacts a:hover{ opacity:1; }
.footer__contacts span{ opacity:.35; }

@media (max-width:980px){
  .b2b__shell{ grid-template-columns:1fr; gap:42px; }
  .b2b__intro{ max-width:680px; }
  .b2b__form-wrap{ max-width:680px; width:100%; }
}
@media (max-width:640px){
  .b2b{ padding:58px 16px 68px; }
  .b2b__shell{ padding:30px 20px 22px; border-radius:28px; gap:34px; }
  .b2b__intro h2{ font-size:clamp(34px,11vw,47px); }
  .b2b__lead{ font-size:14px; }
  .b2b__phone{ align-items:flex-start; flex-direction:column; gap:8px; }
  .b2b__phone strong{ font-size:25px; }
  .b2b__contact-links{ grid-template-columns:1fr; }
  .b2b__form-wrap{ padding:22px 16px 18px; border-radius:22px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .b2b-form__grid{ grid-template-columns:1fr; }
  .b2b-field input,.b2b-field textarea{ font-size:16px; } /* iOS: no zoom on focus */
  .b2b-form__actions{ align-items:stretch; flex-direction:column; }
  .b2b-form__submit{ width:100%; }
  .b2b-form__note{ max-width:none; text-align:center; }
  .footer__contacts{ flex-direction:column; gap:4px; }
  .footer__contacts span{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .b2b-form__submit,.b2b__contact-link{ transition:none; }
}


/* =========================================================
   B2B V2 — телефон одной строкой + серверная отправка
   ========================================================= */
.b2b__phone{
  align-items:flex-start;
  flex-direction:column;
  justify-content:flex-start;
  gap:7px;
}
.b2b__phone strong{
  display:block;
  width:100%;
  white-space:nowrap;
  overflow:visible;
  font-size:clamp(22px,2.15vw,29px);
  line-height:1.08;
  letter-spacing:-.01em;
}
.b2b-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.b2b-form__submit:disabled{
  cursor:wait;
  opacity:.68;
  transform:none !important;
}
.b2b-form__status[data-state="success"]{ color:rgba(217,240,213,.96); }
.b2b-form__status[data-state="error"]{ color:rgba(255,205,194,.96); }
@media (max-width:640px){
  .b2b__phone strong{
    font-size:clamp(22px,7vw,27px);
    white-space:nowrap;
  }
}