/* =====================================================================
   INGREDIENTS — Головна · напрям B+ (неон)
   Анімації лише transform/opacity. prefers-reduced-motion — у main.css.
   ===================================================================== */

.sec{ padding-block:clamp(48px,7vw,84px); }
.sec--tight{ padding-top:0; }
/* Контрастна «піднята» смуга-секція — для ритму сторінки */
.sec--band{ position:relative; padding-top:clamp(48px,7vw,84px); background:#0B0B10; border-block:1px solid var(--line); }
.sec--band::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(75% 70% at 50% 0%, rgba(155,107,255,.07), transparent 68%); }
.sec--band > .container{ position:relative; z-index:1; }
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:30px; }
.shead h2{ font-size:clamp(28px,4vw,42px); text-transform:none; margin:0; }
.shead__sub{ color:var(--tx-dim); font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
.shead a{ color:var(--acc); font-size:14px; font-weight:600; white-space:nowrap; }

.kick{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-mut); }
@keyframes kpulse{ 0%{box-shadow:0 0 0 0 rgba(182,255,61,.55)} 70%{box-shadow:0 0 0 10px rgba(182,255,61,0)} 100%{box-shadow:0 0 0 0 rgba(182,255,61,0)} }

/* 1. HERO */
.hero{ position:relative; overflow:hidden; padding-top:clamp(64px,9vw,104px); }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; will-change:transform; }
.hero__glow.g1{ width:500px; height:500px; background:var(--neon-mag); top:-160px; right:-60px; opacity:.15; animation:drift1 20s ease-in-out infinite alternate; }
.hero__glow.g2{ width:460px; height:460px; background:var(--neon-cyan); bottom:-200px; left:-120px; opacity:.20; animation:drift2 24s ease-in-out infinite alternate; }
.hero__glow.g3{ width:340px; height:340px; background:var(--neon-violet); top:60px; left:60%; opacity:.09; animation:drift3 28s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(-50px,44px) scale(1.1) } }
@keyframes drift2{ to{ transform:translate(60px,-36px) scale(1.14) } }
@keyframes drift3{ to{ transform:translate(-36px,26px) scale(.9) } }
.hero__inner{ position:relative; z-index:1; }
.hero__title{ font-size:clamp(44px,8vw,90px); line-height:.95; margin:22px 0 20px; font-weight:800; letter-spacing:-.03em; }
.hero__title em{ font-style:normal; background:linear-gradient(90deg,var(--neon-lime),var(--neon-cyan) 55%,var(--neon-mag)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lede{ color:var(--tx-mut); max-width:56ch; font-size:clamp(16px,2vw,19px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* Анімоване кільце брендових food-іконок (хаотично, кожна зі своєю швидкістю + власне обертання) */
.hero__ring{ position:absolute; top:50%; right:calc(max(0px, (100vw - var(--maxw)) / 2) - 30px); transform:translateY(-50%); width:840px; height:840px; z-index:0; pointer-events:none; opacity:.85;
  /* Малий порожнистий центр + права частина повна, ліва плавно згасає (перетин масок) */
  -webkit-mask-image:radial-gradient(circle, transparent 10%, #000 20%, #000 66%, transparent 88%), linear-gradient(90deg, transparent 4%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.5) 52%, #000 74%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:radial-gradient(circle, transparent 10%, #000 20%, #000 66%, transparent 88%), linear-gradient(90deg, transparent 4%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.5) 52%, #000 74%); }
.hero__disc, .cta__disc{ position:absolute; inset:0; }
.hero__disc .orbit, .cta__disc .orbit{ position:absolute; top:50%; left:50%; width:0; height:0; will-change:transform; }
.hero__disc .rad, .cta__disc .rad{ position:absolute; }
.hero__disc .spin, .cta__disc .spin{ will-change:transform; }
.hero__disc svg, .cta__disc svg{ display:block; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@keyframes ingrOrbit{ to{ transform:rotate(360deg) } }
@keyframes ingrOrbitR{ to{ transform:rotate(-360deg) } }
@keyframes ingrSpin{ to{ transform:rotate(360deg) } }
@keyframes ingrSpinR{ to{ transform:rotate(-360deg) } }
.hero__ring:hover .orbit, .hero__ring:hover .spin{ animation-play-state:paused; }
@media (max-width:900px){ .hero__ring{ right:auto; left:50%; top:40%; transform:translate(-50%,-50%); width:560px; height:560px; opacity:.14; } }
@media (prefers-reduced-motion:reduce){ .hero__disc .orbit, .hero__disc .spin, .cta__disc .orbit, .cta__disc .spin{ animation:none !important; } }

.ecodes{ position:relative; z-index:2; margin-top:60px; border-block:1px solid var(--line); overflow:hidden; background:var(--bg); }
/* Суцільний фон стрічки перекриває іконки кільця (вони «ховаються» під неї);
   згасання країв — накладками, а не маскою (маска робила б фон прозорим). */
.ecodes::before, .ecodes::after{ content:""; position:absolute; top:0; bottom:0; width:8%; z-index:2; pointer-events:none; }
.ecodes::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.ecodes::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.ecodes__track{ position:relative; z-index:1; display:flex; width:max-content; animation:march 60s linear infinite; }
.ecodes:hover .ecodes__track{ animation-play-state:paused; }
.ecodes__track .ecodes__item{ display:inline-flex; align-items:center; padding:15px 26px; font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; color:var(--tx-dim, #6C707A); white-space:nowrap; border-right:1px solid var(--line); }
.ecodes__track b{ color:#AEB2BB; font-weight:600; }
/* Клікабельні елементи стрічки (E-код/CAS → сторінка товару) */
.ecodes__track a.ecodes__item{ text-decoration:none; transition:color .18s, background .18s; }
.ecodes__track a.ecodes__item:hover{ color:var(--acc); background:color-mix(in srgb, var(--acc) 8%, transparent); }
.ecodes__track a.ecodes__item:hover b{ color:var(--acc); }
@keyframes march{ to{ transform:translateX(-50%) } }

/* 2. КАТЕГОРІЇ — спектр */
.spectrum{ display:flex; gap:8px; height:440px; }
.panel{ position:relative; flex:1; border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  transition:flex .45s cubic-bezier(.2,.7,.2,1), border-color .3s; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; }
.panel.cat-food{ --c:var(--cat-food); } .panel.cat-pharma{ --c:var(--cat-pharma); } .panel.cat-agro{ --c:var(--cat-agro); }
.panel__aura{ position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(60px); top:-60px; right:-40px; opacity:.4; background:var(--c); transition:opacity .4s; }
.panel:hover{ flex:2.6; border-color:var(--c); }
.panel:hover .panel__aura{ opacity:.7; }
.panel__n{ position:absolute; top:22px; left:26px; font-family:var(--font-mono); font-size:13px; color:var(--c); }
.panel h3{ position:relative; font-size:23px; line-height:1.05; margin:0; color:#fff; }
.panel__body{ position:relative; max-height:0; opacity:0; overflow:hidden; transition:max-height .45s, opacity .35s, margin .4s; }
.panel:hover .panel__body{ max-height:280px; opacity:1; margin-top:16px; }
.panel__body ul{ list-style:none; margin:0 0 18px; padding:0; columns:2; }
.panel__body li{ color:var(--tx-mut); font-size:14px; padding:3px 0; }
.panel__go{ color:var(--c); font-weight:700; font-size:14px; }
.panel:hover, .panel:hover h3, .panel:hover li, .panel:hover .panel__go{ text-decoration:none; }

/* Спектр із фото (варіант A) */
.panel.has-photo{ background-size:cover; background-position:center; border:0; }
.panel.has-photo::before{ content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(130% 100% at 50% 25%, transparent 40%, rgba(6,6,7,.55) 100%),
    linear-gradient(180deg, rgba(6,6,7,.28), rgba(6,6,7,.5) 52%, rgba(6,6,7,.95)); }
.panel.has-photo::after{ content:""; position:absolute; inset:0; z-index:1; background:var(--c); opacity:.12; mix-blend-mode:overlay; }
/* сильніше затемнення при наведенні (розкрита панель) — для читабельності підкатегорій */
.panel.has-photo:hover::before{
  background:
    radial-gradient(150% 120% at 50% 35%, rgba(6,6,7,.42), rgba(6,6,7,.72) 100%),
    linear-gradient(180deg, rgba(6,6,7,.58), rgba(6,6,7,.74) 45%, rgba(6,6,7,.97)); }
.panel.has-photo .panel__aura{ display:none; }
.panel.has-photo:hover{ border-color:transparent; }
.panel__bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c); z-index:3; }
.panel:not(.has-photo) .panel__bar{ display:none; }
.panel__n{ z-index:3; }
.panel h3{ position:relative; z-index:2; }
.panel__body{ position:relative; z-index:2; }
.panel.has-photo h3{ text-shadow:0 2px 16px rgba(0,0,0,.6); }
.panel.has-photo .panel__body li{ color:rgba(255,255,255,.86); }

/* 3. БЕНТО */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.tile__lbl{ color:var(--tx-mut); font-size:13.5px; }
.tile__big{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1; }
.tile__big--sm{ font-size:26px; }
.tile--a{ grid-column:span 2; grid-row:span 2; background:linear-gradient(140deg,rgba(155,107,255,.18),rgba(53,224,245,.08)); }
.tile--a .tile__big{ font-size:clamp(40px,6vw,68px); background:linear-gradient(90deg,var(--neon-lime),var(--neon-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tile--hl{ background:var(--acc); color:var(--on-acc); }
.tile--hl .tile__lbl{ color:rgba(0,0,0,.7); }
.tile__breakdown{ list-style:none; margin:16px 0; padding:0; display:grid; gap:11px; position:relative; z-index:1; }
.tile__breakdown li{ display:flex; align-items:center; gap:11px; font-size:15px; }
.tile__dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.tile__breakdown li.cat-food .tile__dot{ background:var(--cat-food); box-shadow:0 0 10px color-mix(in srgb,var(--cat-food) 60%,transparent); }
.tile__breakdown li.cat-pharma .tile__dot{ background:var(--cat-pharma); box-shadow:0 0 10px color-mix(in srgb,var(--cat-pharma) 60%,transparent); }
.tile__breakdown li.cat-agro .tile__dot{ background:var(--cat-agro); box-shadow:0 0 10px color-mix(in srgb,var(--cat-agro) 60%,transparent); }
.tile__breakdown a{ color:var(--tx); text-decoration:none; flex:1; }
.tile__breakdown a:hover{ color:var(--acc); }
.tile__ct{ font-family:var(--font-mono); font-size:13px; color:var(--tx-mut); }
@media (max-width:520px){ .tile__breakdown{ display:none; } }

/* 4. КОНВЕЄР ТОВАРІВ */
.belt{ overflow:hidden; padding-block:14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.belt__track{ display:flex; gap:16px; width:max-content; animation:belt 66s linear infinite; }
.belt:hover .belt__track{ animation-play-state:paused; }
@keyframes belt{ to{ transform:translateX(-50%) } }
.pc{ width:270px; flex:0 0 auto; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .2s, border-color .2s; }
.pc:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc) 45%, var(--line)); }
.pc__tb{ display:block; position:relative; aspect-ratio:3/4; overflow:hidden; }
.pc__tb--img{ background:var(--bg); }
.pc__tb--img img{ width:100%; height:100%; object-fit:contain; padding:9%; }
.pc__tb--ph{ background:var(--bg); }
.pc__st{ position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.5); }
.pc__st.in{ color:var(--ok); } .pc__st.ord{ color:var(--warn); }
.pc__bd{ padding:14px 16px; }
.pc__cat{ font-size:12px; color:var(--tx-dim); }
.pc h3{ font-size:16px; margin:5px 0 6px; text-transform:none; }
.pc h3 a{ color:#fff; } .pc h3 a:hover{ color:var(--acc); text-decoration:none; }
.pc__cas{ font-family:var(--font-mono); font-size:12px; color:var(--tx-mut); }
.pc__act{ display:flex; gap:8px; padding:0 16px 16px; margin-top:auto; }
.pc__act button{ flex:1; border-radius:999px; padding:9px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--tx); }
.pc__act .p{ background:var(--acc); color:var(--on-acc); border-color:var(--acc); }

/* 5. ГАЛУЗІ — плитки з іконкою та світінням */
.ind-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.indtile{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:24px 18px 20px; min-height:128px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:16px;
  text-decoration:none; transition:transform .18s, border-color .2s; }
.indtile.c0{ --c:var(--neon-lime); } .indtile.c1{ --c:var(--neon-cyan); } .indtile.c2{ --c:var(--neon-mag); }
.indtile.c3{ --c:var(--neon-orange); } .indtile.c4{ --c:var(--neon-violet); }
.indtile__glow{ position:absolute; width:120px; height:120px; border-radius:50%; filter:blur(50px); background:var(--c); opacity:0; top:-30px; right:-30px; transition:opacity .25s; }
.indtile:hover{ transform:translateY(-3px); border-color:var(--c); text-decoration:none; }
.indtile:hover .indtile__glow{ opacity:.4; }
.indtile__icon{ position:relative; width:32px; height:32px; color:var(--c); display:block;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.indtile__nm{ position:relative; font-weight:600; font-size:15px; color:var(--tx-mut); }
.indtile:hover .indtile__nm{ color:#fff; }
@media (max-width:900px){ .ind-tiles{ grid-template-columns:1fr 1fr; } }

/* 2.5 ПЕРЕВАГИ — концепт «лабораторна специфікація» */
.shead--center{ flex-direction:column; align-items:center; text-align:center; }
.shead__eye{ color:var(--acc); font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; }

.adv-sec{ position:relative; padding-top:clamp(60px,7.5vw,100px); }
.adv-sec .container{ position:relative; z-index:1; }
/* тонка «блюпринт»-сітка (краї плавно згасають маскою — без жорсткого обрізу) */
.adv-sec::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:48px 48px; background-position:center;
  -webkit-mask-image:radial-gradient(120% 74% at 50% 30%, #000 24%, transparent 72%);
  mask-image:radial-gradient(120% 74% at 50% 30%, #000 24%, transparent 72%); }
/* м'яке сяйво за заголовком — цілком у межах секції, згасає радіально (без лінії обрізу) */
.adv-sec__bloom{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:820px; height:420px; z-index:0; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,138,61,.09), transparent 72%); }

.adv{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; }
.adv__card{ --c:var(--neon-lime);
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 60%), var(--surface);
  border:1px solid var(--line); border-radius:20px; padding:30px 26px 28px;
  transition-property:transform, border-color, box-shadow, opacity;
  transition-duration:.34s,.3s,.34s,.55s;
  transition-timing-function:cubic-bezier(.2,.7,.2,1),ease,ease,ease; }
.adv--lime{ --c:var(--neon-lime); } .adv--cyan{ --c:var(--neon-cyan); } .adv--mag{ --c:var(--neon-mag); }
.adv--orange{ --c:var(--neon-orange); } .adv--violet{ --c:var(--neon-violet); }

/* м'яке сяйво «згори» на hover */
.adv__card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(78% 56% at 50% -8%, color-mix(in srgb, var(--c) 13%, transparent), transparent 70%); }
.adv__card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--c) 42%, var(--line));
  box-shadow:0 18px 40px -34px color-mix(in srgb, var(--c) 26%, #000); }
.adv__card:hover::after{ opacity:1; }

/* великий контурний номер */
.adv__idx{ position:absolute; top:-12px; right:8px; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:106px; line-height:1; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.06);
  transition:-webkit-text-stroke-color .35s, transform .5s cubic-bezier(.2,.7,.2,1); }
.adv__card:hover .adv__idx{ -webkit-text-stroke-color:color-mix(in srgb, var(--c) 60%, transparent); transform:translateY(3px); }

/* акцентний хребет зліва — тонка лінія зі згасанням на кінцях, з'являється на hover */
.adv__spine{ position:absolute; left:0; top:16px; bottom:16px; width:2px; border-radius:2px; z-index:1;
  background:linear-gradient(transparent, var(--c) 22%, var(--c) 78%, transparent);
  opacity:0; transition:opacity .35s ease; }
.adv__card:hover .adv__spine{ opacity:.9; }

/* іконка — чистий неоновий значок на пласкому тлі (у стилі інших секцій) */
.adv__ic{ position:relative; z-index:1; display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center;
  border-radius:16px; color:var(--c); margin-bottom:20px;
  background:color-mix(in srgb, var(--c) 9%, transparent);
  transition:background .3s, transform .35s; }
.adv__card:hover .adv__ic{ transform:translateY(-2px); background:color-mix(in srgb, var(--c) 15%, transparent); }
.adv__icon{ width:36px; height:36px; stroke:currentColor; }

.adv__title{ position:relative; z-index:1; font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 12px; }
.adv__rule{ position:relative; z-index:1; display:block; height:2px; width:34px; border-radius:2px; margin-bottom:14px;
  background:var(--c); opacity:.85; transition:width .45s cubic-bezier(.2,.7,.2,1); }
.adv__card:hover .adv__rule{ width:64px; }
.adv__text{ position:relative; z-index:1; color:var(--tx-mut); font-size:14.5px; line-height:1.55; margin:0; }

/* стаґер-поява (лише прозорість, щоб hover-трансформи лишались миттєвими) */
.adv.reveal .adv__card{ opacity:0; }
.adv.reveal.in .adv__card{ opacity:1; transition-delay:0s,0s,0s,var(--d,0ms); }

@media (max-width:900px){ .adv{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .adv{ grid-template-columns:1fr; } .adv__idx{ font-size:88px; } }
@media (prefers-reduced-motion:reduce){
  .adv.reveal .adv__card{ opacity:1 !important; }
  .adv__card, .adv__card:hover{ transform:none !important; }
}

/* 6. ПРО КОМПАНІЮ */
.home-about{ padding-block:clamp(48px,7vw,84px); background:var(--bg-2); border-block:1px solid var(--line); }
.home-about__inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.home-about__text h2{ font-size:clamp(24px,3.4vw,32px); text-transform:none; margin:.5em 0 .5em; }
.home-about__text p{ color:var(--tx-mut); max-width:52ch; margin-bottom:22px; }
.home-about__slogan{ font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2.2vw,22px);
  background:linear-gradient(90deg,var(--neon-lime),var(--neon-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:22px !important; }
.home-about__vis{ position:relative; overflow:hidden; align-self:stretch; min-height:280px; border-radius:20px; border:1px solid var(--line); background:var(--surface); }
.about-art{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* 7. БЛОГ */
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bcard{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; padding-bottom:18px; }
.bcard__media{ display:block; aspect-ratio:16/9; background:var(--surface-3); }
.bcard__media img{ width:100%; height:100%; object-fit:cover; }
.bcard__date{ display:block; color:var(--tx-dim); font-size:12.5px; padding:16px 18px 0; font-family:var(--font-mono); }
.bcard__title{ font-size:17px; margin:6px 18px 8px; text-transform:none; }
.bcard__title a{ color:#fff; } .bcard__title a:hover{ color:var(--acc); text-decoration:none; }
.bcard__ex{ color:var(--tx-mut); font-size:14px; margin:0 18px; }

/* 8. CTA */
.cta{ padding-block:clamp(20px,4vw,40px) clamp(56px,8vw,90px); }
.cta__box{ position:relative; border-radius:24px; padding:56px 40px; text-align:center; overflow:hidden;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(120deg,rgba(182,255,61,.55),rgba(53,224,245,.4) 45%,rgba(255,61,174,.45)) border-box;
  border:1px solid transparent; }
.cta__content{ position:relative; z-index:1; }
.cta__box h2{ font-size:clamp(26px,4vw,42px); text-transform:none; margin:0 0 10px; }
.cta__box p{ color:var(--tx-mut); margin:0 auto 24px; max-width:48ch; }
.cta__box .patlayer{ opacity:.07; }
/* Анімаційні елементи CTA (як у hero): плавні сяйва + орбітальне кільце food-іконок, усе обрізане рамкою боксу. */
.cta__fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.cta__glow{ position:absolute; border-radius:50%; filter:blur(80px); will-change:transform; }
.cta__glow.cg1{ width:340px; height:340px; background:var(--acc); top:-150px; left:-70px; opacity:.13; animation:drift1 22s ease-in-out infinite alternate; }
.cta__glow.cg2{ width:300px; height:300px; background:var(--neon-mag); bottom:-170px; right:-50px; opacity:.11; animation:drift2 26s ease-in-out infinite alternate; }
.cta__ring{ position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(closest-side, transparent 16%, #000 54%);
  mask-image:radial-gradient(closest-side, transparent 16%, #000 54%); }
.cta__box:hover .cta__disc .orbit, .cta__box:hover .cta__disc .spin{ animation-play-state:paused; }

/* Адаптив */
@media (max-width:960px){
  .spectrum{ flex-direction:column; height:auto; }
  .panel{ flex:none; } .panel:hover{ flex:none; }
  .panel__body{ max-height:none; opacity:1; margin-top:14px; }
  .panel__body ul{ columns:2; }
  .bento{ grid-template-columns:1fr 1fr; grid-auto-rows:130px; } .tile--a{ grid-column:span 2; }
  .home-about__inner{ grid-template-columns:1fr; }
  .bgrid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .bento{ grid-template-columns:1fr 1fr; } .tile--a{ grid-column:span 2; grid-row:span 1; }
  .panel__body ul{ columns:1; }
}

/* --- Партнери (рухлива стрічка) --- */
.partners-sec .shead{ margin-bottom:22px; }
.partners{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.partners__track{ display:flex; align-items:center; gap:56px; width:max-content; animation:march 48s linear infinite; padding-block:8px; }
.partners:hover .partners__track{ animation-play-state:paused; }
.partners__item{ display:flex; align-items:center; height:54px; flex:0 0 auto; opacity:.5;
  filter:grayscale(1) brightness(1.5); transition:opacity .2s, filter .2s; text-decoration:none; }
.partners__item:hover{ opacity:1; filter:grayscale(0) brightness(1); }
.partners__item img{ max-height:54px; width:auto; object-fit:contain; }
.partners__name{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--tx-mut); letter-spacing:.02em; white-space:nowrap; }
.partners__item:hover .partners__name{ color:var(--acc); }
@media (prefers-reduced-motion:reduce){
  .partners__track{ animation:none; flex-wrap:wrap; justify-content:center; row-gap:20px; }
}


/* ============================================================
   Секція доставки — інтерактивна карта України (#ingredients-delivery).
   Джерело: ingredients-delivery-centered (Natural Earth, D3). CSS ізольований.
   ============================================================ */
#ingredients-delivery { width:100%; }
#ingredients-delivery .ing-section { --ing-bg:#060607; --ing-text:#F3F1F5; --ing-muted:#9A99A6; --ing-cyan:#FF8A3D; --ing-lime:#B6FF3D; --ing-line:#1E1E25; --ing-glow:.16; color-scheme:dark; box-sizing:border-box; overflow:hidden; position:relative; min-height:580px; background:var(--ing-bg); color:var(--ing-text); font-family:Inter,Arial,sans-serif; border-top:1px solid var(--ing-line); border-bottom:1px solid var(--ing-line); padding:40px 30px; }
#ingredients-delivery .ing-section * { box-sizing:border-box; }
#ingredients-delivery .ing-section::before { content:""; position:absolute; width:70%; height:90%; right:-12%; top:4%; background:radial-gradient(ellipse,rgba(255,138,61,var(--ing-glow)),transparent 68%); pointer-events:none; }
#ingredients-delivery .ing-copy { position:relative; z-index:1; }
#ingredients-delivery .ing-overline { display:flex; align-items:center; gap:8px; color:var(--ing-muted); font-size:12px; font-weight:500; line-height:1.4; margin-bottom:21px; }
#ingredients-delivery .ing-overline > span { width:18px; height:2px; background:var(--ing-cyan); }
#ingredients-delivery h2 { font-family:Montserrat,Arial,sans-serif; color:var(--ing-text); margin:0; font-size:clamp(29px,4.9vw,39px); line-height:1.13; letter-spacing:-1.3px; font-weight:800; text-wrap:balance; }
#ingredients-delivery .ing-copy p { color:var(--ing-muted); font-size:14px; line-height:1.7; margin:22px 0 0; max-width:238px; font-weight:400; }
#ingredients-delivery .ing-origin { display:flex; align-items:center; gap:9px; margin-top:34px; font-size:11px; line-height:1.5; font-weight:500; color:var(--ing-text); }
#ingredients-delivery .ing-origin-dot { background:var(--ing-lime); width:5px; height:5px; border-radius:50%; box-shadow:0 0 12px rgba(182,255,61,.45); flex:none; }
#ingredients-delivery .ing-map-column { position:relative; min-width:0; width:100%; }
#ingredients-delivery .ing-map { width:100%; position:relative; height:350px; isolation:isolate; }
#ingredients-delivery .ing-map svg { display:block; width:100%; height:100%; overflow:visible; }
#ingredients-delivery .ing-country { fill:#1a1109; stroke:#8a5324; stroke-width:1.15; stroke-linejoin:round; }
#ingredients-delivery .ing-geodots { fill:url(#ing-dots); opacity:.28; pointer-events:none; }
#ingredients-delivery .ing-connection { fill:none; stroke:var(--ing-cyan); stroke-width:2; opacity:.3; transition:opacity .22s,stroke-width .22s; pointer-events:none; }
#ingredients-delivery .ing-connection.is-active { opacity:1; stroke-width:2.8; filter:drop-shadow(0 0 4px rgba(255,138,61,.38)); }
#ingredients-delivery .ing-map.has-selection .ing-connection:not(.is-active) { opacity:.1; }
#ingredients-delivery .ing-flow { fill:var(--ing-cyan); opacity:0; pointer-events:none; }
#ingredients-delivery .ing-node { position:absolute; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; margin:0; border:0; background:transparent; transform:translate(-50%,-50%); color:var(--ing-muted); font-family:Inter,Arial,sans-serif; z-index:2; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#ingredients-delivery .ing-node .ing-dot { width:5px; height:5px; border:1px solid #bf9c82; border-radius:50%; background:#3a2512; transition:transform .2s,background .2s,box-shadow .2s; }
#ingredients-delivery .ing-node .ing-city-label { pointer-events:none; position:absolute; top:26px; left:50%; transform:translateX(-50%); font-size:13.2px; line-height:1.2; font-weight:500; color:var(--ing-muted); white-space:nowrap; text-shadow:0 1px 6px #060607,0 0 6px #060607; transition:color .2s; }
#ingredients-delivery .ing-node[data-label="top"] .ing-city-label { top:auto; bottom:27px; }
#ingredients-delivery .ing-node[data-label="right"] .ing-city-label { top:8px; left:29px; transform:none; }
#ingredients-delivery .ing-node[data-label="left"] .ing-city-label { top:8px; left:auto; right:29px; transform:none; }
#ingredients-delivery .ing-node.is-origin { z-index:4; }
#ingredients-delivery .ing-node.is-origin .ing-dot { width:8px; height:8px; background:var(--ing-lime); border:0; box-shadow:0 0 0 5px rgba(182,255,61,.09),0 0 20px rgba(182,255,61,.35); }
#ingredients-delivery .ing-node.is-origin .ing-city-label { color:var(--ing-lime); font-weight:600; font-size:15.6px; }
#ingredients-delivery .ing-node.is-active .ing-dot, #ingredients-delivery .ing-node:hover .ing-dot { background:var(--ing-cyan); border-color:var(--ing-cyan); transform:scale(1.35); box-shadow:0 0 0 4px rgba(255,138,61,.1),0 0 12px rgba(255,138,61,.6); }
#ingredients-delivery .ing-node.is-active .ing-city-label, #ingredients-delivery .ing-node:hover .ing-city-label { color:var(--ing-text); }
#ingredients-delivery .ing-map-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; min-height:36px; border-top:1px solid var(--ing-line); padding:15px 2px 0; margin:0 12px; }
#ingredients-delivery .ing-route-caption { font-size:12px; font-weight:500; color:var(--ing-text); line-height:1.5; }
#ingredients-delivery .ing-route-caption > span { color:var(--ing-cyan); padding:0 7px; }
#ingredients-delivery .ing-hint { font-size:11px; line-height:1.5; color:var(--ing-muted); }
#ingredients-delivery .ing-centered { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:34px 40px 26px; }
#ingredients-delivery .ing-centered::before { width:100%; right:0; }
#ingredients-delivery .ing-centered .ing-copy { text-align:center; width:100%; }
#ingredients-delivery .ing-centered .ing-overline { justify-content:center; margin-bottom:14px; }
#ingredients-delivery .ing-centered h2 { font-size:clamp(25px,4.5vw,34px); line-height:1.2; letter-spacing:-1px; }
#ingredients-delivery .ing-centered .ing-copy p { margin:13px auto 0; max-width:none; font-size:13px; }
#ingredients-delivery .ing-centered .ing-map-column { max-width:1080px; margin-top:22px; }
#ingredients-delivery .ing-centered .ing-map { height:624px; }
#ingredients-delivery .ing-centered .ing-map-footer { max-width:440px; margin:0 auto; }
#ingredients-delivery .ing-section.hide-labels .ing-node:not(.is-origin):not(.is-active) .ing-city-label { visibility:hidden; }
@media (max-width:580px) {
 #ingredients-delivery .ing-section { min-height:650px; padding:27px 20px; }
 #ingredients-delivery h2 { font-size:34px; line-height:1.12; letter-spacing:-1.2px; }
 #ingredients-delivery .ing-copy p { font-size:13px; max-width:300px; margin-top:16px; }
 #ingredients-delivery .ing-overline { margin-bottom:16px; }
 #ingredients-delivery .ing-origin { margin-top:18px; }
 #ingredients-delivery .ing-map { height:290px; }
 #ingredients-delivery .ing-centered { justify-content:center; }
 #ingredients-delivery .ing-centered h2 { font-size:30px; max-width:350px; margin:auto; }
 #ingredients-delivery .ing-centered .ing-map { height:444px; }
 #ingredients-delivery .ing-centered .ing-map-column { margin-top:24px; }
 #ingredients-delivery .ing-map-footer { margin:0; }
}
@media (pointer:coarse) {
 #ingredients-delivery .ing-node { width:44px; height:44px; }
 #ingredients-delivery .ing-node .ing-city-label { top:34px; }
 #ingredients-delivery .ing-node[data-label="top"] .ing-city-label { bottom:35px; top:auto; }
 #ingredients-delivery .ing-node[data-label="right"] .ing-city-label { top:16px; left:37px; }
 #ingredients-delivery .ing-node[data-label="left"] .ing-city-label { top:16px; right:37px; }
}
@media (prefers-reduced-motion:reduce) {
 #ingredients-delivery .ing-section * { transition:none!important; animation:none!important; }
}
#ingredients-delivery .ing-node:focus-visible { outline:2px solid var(--ing-cyan); outline-offset:2px; border-radius:50%; }


/* ============================================================
   Секція «Про компанію» — «Живий зв'язок» (#ingredients-about).
   Джерело: ingredients-about-live-connection. CSS ізольований.
   ============================================================ */
#ingredients-about { width:100%; }
#ingredients-about .ia-section { --ia-bg:#0c0c10; --ia-text:#f3f1f5; --ia-muted:#a2a1ae; --ia-cyan:#ff8a3d; --ia-lime:#b6ff3d; --ia-purple:#9b6bff; --ia-glow:.23; box-sizing:border-box; color-scheme:dark; font-family:Inter,Arial,sans-serif; position:relative; background:var(--ia-bg); color:var(--ia-text); padding:40px 32px 28px; min-height:600px; overflow:hidden; }
#ingredients-about .ia-section * { box-sizing:border-box; }
#ingredients-about .ia-section p { margin:0; }
#ingredients-about .ia-heading { display:grid; grid-template-columns:1.6fr 1fr; align-items:end; gap:32px; position:relative; z-index:2; }
#ingredients-about .ia-kicker { color:var(--ia-muted); font-size:12px; line-height:1.6; font-weight:500; margin:0 0 18px!important; }
#ingredients-about h2 { color:var(--ia-text); font-family:Montserrat,Arial,sans-serif; font-size:clamp(28px,4.6vw,36px); letter-spacing:-1.4px; line-height:1.14; font-weight:800; margin:0; text-wrap:balance; }
#ingredients-about .ia-intro p, #ingredients-about .ia-body { color:var(--ia-muted); font-size:13px; font-weight:400; line-height:1.8; }
#ingredients-about .ia-intro p { max-width:246px; }
#ingredients-about .ia-link { display:inline-flex; align-items:center; gap:9px; color:var(--ia-cyan); text-decoration:none; font-size:12px; font-weight:600; line-height:1.6; margin-top:18px; }
#ingredients-about .ia-link:hover { color:var(--ia-text); }
#ingredients-about .ia-link svg, #ingredients-about .ia-button svg { width:16px; height:16px; flex:none; }
#ingredients-about .ia-network { position:relative; width:100%; height:328px; isolation:isolate; margin-top:12px; }
#ingredients-about .ia-halo { position:absolute; z-index:-2; left:8%; top:0; width:84%; height:100%; background:radial-gradient(ellipse at 50% 53%,rgba(255,138,61,var(--ia-glow)),rgba(255,138,61,.03) 40%,transparent 70%); transition:background .3s; }
#ingredients-about .ia-grain { position:absolute; z-index:-1; left:20%; width:60%; top:4%; height:84%; opacity:.17; background-image:radial-gradient(#8da1a5 .6px,transparent .6px); background-size:9px 9px; mask-image:radial-gradient(ellipse,black,transparent 70%); pointer-events:none; }
#ingredients-about .ia-lines { position:absolute; width:100%; height:100%; inset:0; overflow:visible; z-index:-1; }
#ingredients-about .ia-track { fill:none; stroke:var(--ia-cyan); stroke-width:1; opacity:.15; transition:opacity .25s; }
#ingredients-about .ia-track.is-active { opacity:.52; }
#ingredients-about .ia-track[data-tier="edge"] { opacity:.07; }
#ingredients-about .ia-track[data-tier="edge"].is-active { opacity:.25; }
#ingredients-about .ia-pulse { fill:var(--ia-cyan); }
#ingredients-about .ia-node { --orb:72px; position:absolute; top:44%; left:50%; width:164px; margin:0; border:0; padding:0; background:transparent; color:var(--ia-text); transform:translate(-50%,-36px); display:flex; align-items:center; flex-direction:column; font:inherit; -webkit-tap-highlight-color:transparent; }
#ingredients-about .ia-source { left:13%; }
#ingredients-about .ia-business { left:87%; }
#ingredients-about .ia-orb { width:var(--orb); height:var(--orb); display:flex; align-items:center; justify-content:center; border-radius:50%; position:relative; flex:none; background:radial-gradient(circle at 32% 20%,#42474c 0%,#202329 20%,#14151b 43%,#080a0e 68%,#172b30 93%); border:1px solid rgba(160,176,179,.2); box-shadow:inset -5px -6px 13px #0009,inset 2px 2px 8px #dee7eb0c,0 15px 30px #0007; transition:transform .28s,box-shadow .28s,border-color .28s; }
#ingredients-about .ia-orb::after { content:""; position:absolute; top:8%; left:17%; width:40%; height:13%; border-radius:50%; transform:rotate(-30deg); filter:blur(4px); background:rgba(232,255,255,.13); }
#ingredients-about .ia-orb > svg { width:23px; height:23px; stroke-width:1.35; color:#a8bfc5; position:relative; z-index:1; }
#ingredients-about .ia-brand { --orb:132px; transform:translate(-50%,-66px); z-index:3; }
#ingredients-about .ia-brand .ia-orb { border:1px solid rgba(255,186,130,.46); background:radial-gradient(circle at 29% 16%,rgba(255,231,205,.38),transparent 22%),radial-gradient(circle at 64% 78%,rgba(168,90,28,.4),transparent 48%),radial-gradient(circle at 37% 32%,#5e3a20,#241509 44%,#0d0703 74%,#4a2a14 99%); box-shadow:inset 0 0 20px #c8783030,0 0 44px #ff8a3d14,inset -7px -10px 19px #000b,0 25px 40px #0007; }
#ingredients-about .ia-brand .ia-orb::before { content:""; position:absolute; inset:-9px; border:1px solid rgba(255,138,61,.09); border-radius:50%; }
#ingredients-about .ia-wordmark { font-family:Montserrat,Arial,sans-serif; font-size:12px; font-weight:800; letter-spacing:-.3px; position:relative; z-index:2; color:#fff; }
#ingredients-about .ia-wordmark span { color:var(--ia-cyan); }
#ingredients-about .ia-node-title { color:var(--ia-text); font-size:13px; line-height:1.5; font-weight:600; margin-top:20px; white-space:nowrap; }
#ingredients-about .ia-node-sub { color:var(--ia-muted); font-size:11px; line-height:1.5; font-weight:400; margin-top:5px; }
#ingredients-about .ia-brand .ia-node-title { margin-top:17px; }
#ingredients-about .ia-node[aria-pressed="true"] .ia-orb, #ingredients-about .ia-node:hover .ia-orb { border-color:#ffb27a; box-shadow:inset -4px -8px 15px #0008,inset 1px 2px 16px #ffc39a22,0 0 32px #ff8a3d26,0 20px 35px #0006; }
#ingredients-about .ia-node:hover .ia-orb { transform:translateY(-4px); }
#ingredients-about .ia-source[aria-pressed="true"] .ia-orb { border-color:var(--ia-lime); }
#ingredients-about .ia-source[aria-pressed="true"] .ia-orb svg { color:var(--ia-lime); }
#ingredients-about .ia-business[aria-pressed="true"] .ia-orb { border-color:var(--ia-purple); }
#ingredients-about .ia-business[aria-pressed="true"] .ia-orb svg { color:var(--ia-purple); }
#ingredients-about .ia-detail { display:flex; align-items:baseline; gap:10px; position:relative; border-top:1px solid #23262c; padding:20px 0 0; min-height:66px; }
#ingredients-about .ia-detail p { color:#bbbfc8; font-size:12px; font-weight:400; line-height:1.7; }
#ingredients-about .ia-detail-dot { width:5px; height:5px; border-radius:50%; background:var(--ia-cyan); flex:none; }
#ingredients-about .ia-body { margin-top:24px!important; max-width:290px; }
#ingredients-about .ia-button { display:inline-flex; align-items:center; gap:16px; background:var(--ia-cyan); color:#2a1403; border-radius:999px; text-decoration:none; padding:12px 19px; margin-top:26px; font-size:12px; font-weight:700; font-family:Montserrat,Arial,sans-serif; line-height:1.5; }
#ingredients-about .ia-button:hover { background:#ffa65f; }
#ingredients-about .ia-visual-column { min-width:0; }
@media(max-width:600px) {
 #ingredients-about .ia-section { min-height:718px; padding:28px 22px 22px; }
 #ingredients-about .ia-heading { grid-template-columns:1fr; gap:18px; }
 #ingredients-about h2 { font-size:34px; line-height:1.14; letter-spacing:-1.2px; }
 #ingredients-about .ia-kicker { margin-bottom:15px!important; }
 #ingredients-about .ia-intro { display:flex; flex-direction:column; align-items:flex-start; }
 #ingredients-about .ia-intro p { max-width:320px; }
 #ingredients-about .ia-link { margin-top:13px; }
 #ingredients-about .ia-network { height:320px; margin-top:12px; }
 #ingredients-about .ia-node { --orb:50px; width:95px; top:48%; transform:translate(-50%,-25px); }
 #ingredients-about .ia-brand { --orb:96px; transform:translate(-50%,-48px); }
 #ingredients-about .ia-node-title { font-size:11px; margin-top:20px; }
 #ingredients-about .ia-node-sub { display:none; }
 #ingredients-about .ia-wordmark { font-size:9px; }
 #ingredients-about .ia-source { left:13%; top:40%; }
 #ingredients-about .ia-business { left:87%; top:57%; }
 #ingredients-about .ia-brand .ia-node-title { margin-top:20px; }
 #ingredients-about .ia-orb > svg { width:19px; height:19px; }
 #ingredients-about .ia-detail { padding-top:15px; min-height:72px; }
 #ingredients-about .ia-body { max-width:360px; margin-top:18px!important; }
 #ingredients-about .ia-button { margin-top:20px; }
}
@media(max-width:370px) {
 #ingredients-about .ia-section { padding-left:18px; padding-right:18px; }
 #ingredients-about h2 { font-size:30px; }
 #ingredients-about .ia-node { width:82px; }
 #ingredients-about .ia-brand { --orb:86px; transform:translate(-50%,-43px); }
 #ingredients-about .ia-wordmark { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { #ingredients-about .ia-section * { transition:none!important; animation:none!important; } }
#ingredients-about .ia-node, #ingredients-about .ia-link { cursor:pointer; }
#ingredients-about .ia-node:focus-visible, #ingredients-about .ia-link:focus-visible { outline:2px solid var(--ia-cyan); outline-offset:6px; border-radius:8px; }

/* Інтеграція під контейнер сайту: центруємо, прозоре тло, бічні відступи через контейнер */
#ingredients-about .ia-section{ background:transparent; padding:0; min-height:0; }
@media(max-width:600px){ #ingredients-about .ia-section{ padding:0; } }

/* «Про компанію» — приведення до стилістики сайту: крупніші шрифти/графіка */
#ingredients-about .ia-kicker{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ia-cyan); margin-bottom:16px!important; }
#ingredients-about h2{ font-size:clamp(30px,4vw,44px); letter-spacing:-1px; }
#ingredients-about .ia-intro p{ font-size:14.5px; line-height:1.7; }
#ingredients-about .ia-link{ font-size:13.5px; }
#ingredients-about .ia-detail p{ font-size:14px; }
#ingredients-about .ia-detail-dot{ width:6px; height:6px; }
@media(min-width:601px){
 #ingredients-about h2{ font-size:clamp(34px,3.8vw,46px); line-height:1.12; }
 #ingredients-about .ia-intro p{ max-width:340px; }
 #ingredients-about .ia-link{ font-size:14px; margin-top:20px; }
 #ingredients-about .ia-link svg{ width:17px; height:17px; }
 #ingredients-about .ia-network{ height:400px; margin-top:18px; }
 #ingredients-about .ia-node{ --orb:88px; width:200px; transform:translate(-50%,-44px); }
 #ingredients-about .ia-brand{ --orb:156px; transform:translate(-50%,-78px); }
 #ingredients-about .ia-orb > svg{ width:27px; height:27px; }
 #ingredients-about .ia-wordmark{ font-size:14px; }
 #ingredients-about .ia-node-title{ font-size:15px; margin-top:24px; }
 #ingredients-about .ia-brand .ia-node-title{ margin-top:20px; }
 #ingredients-about .ia-node-sub{ font-size:12.5px; margin-top:6px; }
 #ingredients-about .ia-detail p{ font-size:15px; }
}


/* Клієнти «Нам довіряють» — одна лінія, зациклена; лого білі → колір на наведенні */
.clients-sec .shead{ margin-bottom:28px; }
.clients{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.clients__track{ display:flex; align-items:center; width:max-content; animation:clients-marquee 42s linear infinite; }
.clients:hover .clients__track{ animation-play-state:paused; }
.clients__item{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:68px; padding:0 22px;
  margin-right:clamp(40px,6vw,76px); border-radius:13px; background:transparent; transition:background .25s, box-shadow .25s; }
.clients__item img{ max-height:46px; max-width:160px; width:auto; height:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.62; transition:filter .3s, opacity .3s; }
.clients__item:hover{ background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.4); }
.clients__item:hover img{ filter:none; opacity:1; }
@keyframes clients-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .clients__track{ animation:none; } }
@media(max-width:600px){
  .clients__track{ animation-duration:30s; }
  .clients__item{ height:56px; padding:0 16px; margin-right:36px; }
  .clients__item img{ max-height:38px; max-width:124px; }
}