/* ─────────────────────────────────────────────
   Finevit — шрифти
   ───────────────────────────────────────────── */
@font-face{font-family:"Mazzard";src:url("../fonts/MazzardSoftH-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mazzard";src:url("../fonts/MazzardSoftH-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Mazzard";src:url("../fonts/MazzardSoftH-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Mazzard";src:url("../fonts/MazzardSoftH-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo";src:url("../fonts/logo-baloo.woff2") format("woff2");font-weight:800;font-display:swap}

/* ─────────────────────────────────────────────
   Концепція: одне велике зображення, тиха типографіка.
   Кольору мало — його дає сам кадр.
   ───────────────────────────────────────────── */
:root{
  --ink:      #0B1410;
  --cream:    #F4F1E8;
  --cream-2:  rgba(244,241,232,.80);
  --cream-3:  rgba(244,241,232,.46);
  --line:     rgba(244,241,232,.20);
  --line-2:   rgba(244,241,232,.11);
  --lime:     #FFD900;      /* жовтий — акцент на заголовку */
  --green:    #33A65A;      /* насичений зелений — характер */
  --green-deep:#1C7E45;     /* глибокий насичений — логотип, перемикач */
  --maxw:     1300px;
  --mono:     ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:"Mazzard","Helvetica Neue",Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ── Шапка ── */
.header{position:fixed;inset:0 0 auto 0;z-index:50;padding:18px clamp(14px,3vw,30px)}
.header__bar{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:9px 9px 9px 22px;border-radius:999px;
  background:rgba(248,244,235,.14);
  border:1px solid rgba(248,244,235,.24);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 16px 40px -30px rgba(0,0,0,.6);
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.header.is-scrolled .header__bar{background:rgba(248,244,235,.22);border-color:rgba(248,244,235,.32)}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo__word{
  font-family:"Baloo","Mazzard",sans-serif;font-weight:800;
  font-size:23px;line-height:1;letter-spacing:.005em;text-transform:uppercase;
  color:var(--cream);display:inline-block;transform:scaleX(1.06);transform-origin:left;
}
.logo__word i{font-style:normal;color:var(--green)}
.nav{display:flex;align-items:center;gap:4px;margin:0 auto}
.nav__link{
  position:relative;padding:9px 15px;font-size:15px;font-weight:600;color:var(--cream);
  white-space:nowrap;transition:color .3s var(--ease);
}
.nav__link:hover{color:var(--cream)}
.nav__link.is-active{color:var(--cream);font-weight:700}
.nav__link.is-active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1.5px;background:var(--green);
}
.cta{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;
  border-radius:999px;border:1px solid var(--line);color:var(--cream);
  font-size:14.5px;font-weight:400;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.cta:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.cta__arrow{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);transition:transform .5s var(--ease),border-color .4s;
}
.cta:hover .cta__arrow{transform:rotate(45deg);border-color:rgba(11,20,16,.25)}
.cta__arrow svg{width:14px;height:14px}
.burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  position:relative;width:46px;height:46px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid rgba(248,244,235,.24);border-radius:50%;
  background:rgba(248,244,235,.06);
  -webkit-tap-highlight-color:transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.burger:focus{outline:none}
.burger:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.burger span{
  height:2px;border-radius:2px;background:var(--cream);
  transition:width .35s var(--ease),transform .4s var(--ease),opacity .25s var(--ease),background .3s var(--ease);
}
.burger span:nth-child(1){width:18px}
.burger span:nth-child(2){width:11px}   /* коротша — фірмова деталь */
.burger span:nth-child(3){width:18px}
.burger:hover{background:rgba(51,166,90,.16);border-color:var(--green)}
.burger:hover span:nth-child(2){width:18px}
/* відкрито: коло наливається зеленим, смуги складаються в X */
.burger[aria-expanded="true"]{background:var(--green);border-color:var(--green)}
.burger[aria-expanded="true"] span{background:#08120D;width:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Перемикач мов ── */
.lang{
  position:relative;flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:3px;
  border-radius:999px;background:rgba(248,244,235,.10);
  border:1px solid rgba(248,244,235,.18);
}
/* рідинний шар — під кнопками, крізь goo-фільтр */
.lang__fluid{position:absolute;inset:0;pointer-events:none;filter:url(#lang-goo);z-index:0}
.lang__pill{
  position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;
  border-radius:999px;background:var(--green-deep);
  box-shadow:0 4px 14px -4px rgba(46,111,70,.7);
}
.lang__drop{
  position:absolute;top:50%;left:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--green-deep);opacity:0;transform:scale(0);
}
.lang__opt{
  position:relative;z-index:1;
  min-width:42px;padding:8px 13px;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;
  background:transparent;color:var(--cream-2);
  transition:color .35s var(--ease);
}
.lang__opt:hover{color:var(--cream)}
.lang__opt.is-on{color:var(--cream);font-weight:700}

/* ── Hero: кадр на весь екран ── */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;
  padding:clamp(112px,14vh,150px) clamp(20px,4vw,30px) clamp(10px,1.5vh,16px);
}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 74%;
  transform:scale(1.06);
  animation:breathe 42s var(--ease) infinite alternate;
}
@keyframes breathe{from{transform:scale(1.06)}to{transform:scale(1.14)}}
/* завіса: знизу глибока, зверху лише стільки, щоб читалася шапка */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,14,10,.44) 0%,rgba(6,14,10,.08) 20%,rgba(6,14,10,0) 34%),
    linear-gradient(0deg,rgba(6,14,10,.88) 4%,rgba(6,14,10,.68) 28%,rgba(6,14,10,.38) 54%,rgba(6,14,10,.08) 76%,transparent 90%),
    linear-gradient(90deg,rgba(6,14,10,.55) 0%,rgba(6,14,10,.24) 34%,transparent 60%);
}

.hero__body{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding-bottom:clamp(24px,4vh,42px);
}

.tag{
  margin:0 0 clamp(14px,2vh,22px);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream-2);
}

/* сцена: заголовок і продукт в одному полі, продукт «стоїть» у кадрі */
.hero__stage{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:clamp(16px,3vw,48px);
}
.hero__stage > .product{align-self:end}
.hero__title{
  margin:0;
  font-size:clamp(40px,6.4vw,94px);line-height:1.0;letter-spacing:-.035em;font-weight:600;
}
.hero__title-em{color:var(--lime)}

.product{
  position:relative;display:block;align-self:end;
  transform:translateY(clamp(56px,7vw,104px));
}
.product__glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(150%,460px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle,rgba(236,195,63,.30),rgba(236,195,63,.09) 44%,transparent 66%),
    radial-gradient(circle,rgba(51,166,90,.22),transparent 58%);
  filter:blur(6px);
}
/* два пакети: передній + задній, у стопці */
.product__stack{
  position:relative;display:block;
  width:clamp(244px,27.5vw,378px);aspect-ratio:1/1.06;margin:0 auto;
  animation:float 11s ease-in-out infinite;
}
.product__pack{
  position:absolute;width:78%;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.6));
}
.product__pack--back{
  top:0;right:0;transform:rotate(4deg);
  filter:brightness(.94) drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
.product__pack--front{
  bottom:0;left:0;transform:rotate(-2deg);
  z-index:2;
}
@keyframes float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.product figcaption{
  position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-3);
}
.product figcaption::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:0 0 auto}

/* нижній ряд: лід, під ним кнопки — усе зліва */
.hero__foot{margin-top:clamp(22px,3vh,32px)}
.hero__lead{
  margin:0;max-width:50ch;
  font-size:clamp(15.5px,1.1vw,18px);line-height:1.6;font-weight:400;color:var(--cream);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vh,32px)}
.link{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:14px 26px;border-radius:999px;font-size:15px;font-weight:500;
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.link svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.link:hover{transform:translateY(-2px)}
.link svg path{stroke:currentColor}
/* головна дія — насичений зелений */
.hero__actions .link:first-child{background:#1C8A4C;color:var(--cream);border:1px solid #1C8A4C}
.hero__actions .link:first-child:hover{background:#22A45A;border-color:#22A45A;color:#fff}
.hero__actions .link:first-child:hover svg{transform:translateX(4px)}
/* друга — контурна */
.link--quiet{border:1px solid var(--line);color:var(--cream)}
.link--quiet:hover{border-color:var(--cream);background:rgba(244,241,232,.06)}

/* ── Тонкий рядок параметрів по низу кадру ── */
.specs{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);
}
.specs > div{padding:18px 24px 0 0}
.specs dt{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-3)}
.specs dt::before{content:"";width:4px;height:4px;background:var(--green);flex:0 0 auto}
.specs dd{margin:8px 0 0;font-size:14.5px;line-height:1.4;color:var(--cream-2)}

/* ── Адаптив ── */
@media (max-width:1000px){
  .header__bar{padding:8px 8px 8px 18px}
  .burger{display:flex}
  .nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px;border-radius:20px;
    background:rgba(11,20,16,.92);border:1px solid var(--line-2);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__link{padding:14px 18px;font-size:16px;text-align:center}
  .nav__link.is-active::after{display:none}
  .lang{margin-left:auto}
  .lang__opt{min-width:38px;padding:8px 10px}
  .specs{grid-template-columns:repeat(2,1fr);gap:0 8px}
  .specs > div{padding-bottom:14px}
}
@media (max-width:820px){
  /* контент зверху вниз, по центру: заголовок → пакети → текст → кнопки */
  .hero{justify-content:flex-start;min-height:100svh;padding:100px 22px 30px}
  .hero__body{padding-bottom:0;text-align:center}

  .hero__stage{grid-template-columns:1fr;justify-items:center;gap:clamp(14px,3vh,22px)}
  .hero__title{order:1;font-size:clamp(32px,8.2vw,50px);line-height:1.05}

  .product{order:2;align-self:center;transform:none;margin:0 auto}
  .product__stack{width:min(64vw,286px)}
  .product__glow{width:min(150%,300px)}
  .product figcaption{position:static;transform:none;justify-content:center;margin-top:12px}

  .hero__foot{grid-template-columns:1fr;align-items:center;gap:16px;margin-top:clamp(12px,2.5vh,20px)}
  .hero__lead{max-width:none;margin-left:auto;margin-right:auto}
  .hero__actions{gap:10px;justify-content:center}
  .hero__actions .link{flex:1 1 auto;justify-content:center}
}
@media (max-width:520px){
  .hero{padding:96px 18px 34px}
  .hero__title{font-size:clamp(30px,8.6vw,40px)}
  .product__stack{width:min(82vw,270px)}
  .hero__actions .link{flex:1 1 100%}
}
/* Високі/великі екрани: контент по центру по вертикалі — щоб не тиснувся донизу
   з порожнім верхом (на 14" і нижче лишається знизу, як задумано) */
@media (min-width:1000px) and (min-height:1080px){
  .hero{justify-content:center}
  .hero__body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .hero__media img{transform:scale(1.06)}
}

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
.footer{
  position:relative;background:#08120D;
  border-top:1px solid var(--line-2);
  padding:clamp(56px,8vh,96px) clamp(20px,4vw,30px) clamp(22px,3vh,30px);
}
.footer__inner{max-width:var(--maxw);margin:0 auto}

/* CTA — на всю ширину */
.footer__cta{
  padding-bottom:clamp(40px,6vh,64px);
  border-bottom:1px solid var(--line-2);
}
.footer__eyebrow{
  margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green);
}
.footer__head{
  margin:0;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(28px,4vw,52px);line-height:1.06;color:var(--cream);
}
.footer__mail{
  display:inline-flex;align-items:center;gap:16px;margin-top:clamp(26px,4vh,38px);
  font-size:clamp(17px,1.6vw,22px);color:var(--cream);
  border-bottom:1px solid var(--line);padding-bottom:8px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.footer__mail:hover{color:var(--lime);border-color:var(--lime)}
.footer__mail-arrow{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .35s var(--ease);
}
.footer__mail-arrow svg{width:15px;height:15px}
.footer__mail:hover .footer__mail-arrow{transform:rotate(45deg);border-color:var(--lime)}

/* колонки: Компанія · Контакти · лого */
.footer__grid{
  display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-top:clamp(42px,6vh,60px);
}
.footer__label{
  margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-3);font-weight:400;
}
.footer__legal{margin:0;font-size:15px;line-height:1.7;color:var(--cream-2)}
.footer__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
/* номер + підпис в один ряд */
.footer__list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.footer__list a{
  font-size:15px;color:var(--cream);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer__list a:hover{color:var(--lime);border-color:var(--lime)}
.footer__muted{font-size:13px;color:var(--cream-3)}

.footer__col--avi{display:flex;align-items:flex-start;justify-content:flex-end}
.footer__avi{width:min(100%,222px);height:auto;opacity:.9}

/* технічна смуга внизу: копірайт ліворуч · політика праворуч */
.footer__bar{
  max-width:var(--maxw);margin:clamp(40px,6vh,58px) auto 0;
  padding-top:22px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;
}
.footer__copy{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--cream-3)}
.footer__policy{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);
  border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer__policy:hover{color:var(--lime);border-color:var(--lime)}

@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__col--avi{grid-column:1 / -1;justify-content:flex-start;margin-top:8px}
  .footer__avi{width:200px}
}
@media (max-width:520px){
  .footer__grid{grid-template-columns:1fr;gap:30px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ─────────────────────────────────────────────
   Спільні секції
   ───────────────────────────────────────────── */
.section{padding:clamp(72px,12vh,140px) clamp(20px,4vw,30px)}
.sec-eyebrow{
  margin:0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green);
}
.sec-title{
  margin:0;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(30px,4.6vw,58px);line-height:1.04;color:var(--cream);
}
.sec-intro{
  margin:22px 0 0;max-width:52ch;
  font-size:clamp(15.5px,1.1vw,18px);line-height:1.62;color:var(--cream-2);
}

/* ── Застосування ── */
/* живіший фон: глибокий зелений + амбієнтні свічення + тонка сітка */
.use{
  position:relative;overflow:hidden;
  background:
    radial-gradient(56% 48% at 8% -8%, rgba(51,166,90,.16), transparent 60%),
    radial-gradient(46% 44% at 98% 112%, rgba(255,217,0,.10), transparent 62%),
    radial-gradient(42% 52% at 82% 6%, rgba(40,150,95,.12), transparent 66%),
    linear-gradient(180deg,#0B1F14 0%,#0C1811 58%,#02150C 100%);
}
.use::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,241,232,.055) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(130% 90% at 50% -4%,#000 18%,transparent 74%);
          mask-image:radial-gradient(130% 90% at 50% -4%,#000 18%,transparent 74%);
}
.use__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.use__head{max-width:var(--maxw)}

.use__grid{
  list-style:none;margin:clamp(44px,6vh,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);
}
.dose{
  --mx:50%;--my:-20%;
  position:relative;padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,rgba(244,241,232,.05),rgba(244,241,232,.02));
  overflow:hidden;isolation:isolate;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .55s var(--ease),
             border-color .4s var(--ease),box-shadow .5s var(--ease);
}
.dose.is-in{opacity:1;transform:none}
/* курсор-підсвітка (spotlight), слідує за мишею */
.dose::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),
            rgba(255,217,0,.13),rgba(51,166,90,.08) 42%,transparent 72%);
  opacity:0;transition:opacity .45s var(--ease);
}
.dose:hover{
  transform:translateY(-6px);
  border-color:rgba(255,217,0,.38);
  box-shadow:0 34px 70px -44px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,217,0,.10);
}
.dose.is-in:hover{transform:translateY(-6px)}
.dose:hover::after{opacity:1}
.dose:hover .dose__num{color:#fff}
.dose:hover .dose__tag{border-color:rgba(255,217,0,.5);color:var(--lime)}
.dose:hover .dose__fill{filter:brightness(1.18) saturate(1.1)}
.dose:hover::before{height:3px;opacity:1}
/* тонкий верхній акцент (росте при появі) */
.dose::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--green),var(--lime));
  opacity:.9;transition:width 1s var(--ease) .15s,height .35s var(--ease),opacity .35s var(--ease);
}
.dose.is-in::before{width:var(--lvl)}

.dose__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dose__idx{font-family:var(--mono);font-size:12px;color:var(--cream-3)}
.dose__tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);padding:5px 10px;border:1px solid rgba(51,166,90,.35);border-radius:999px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}

.dose__vol{display:flex;align-items:baseline;gap:10px;margin:clamp(20px,2.4vw,30px) 0 0}
.dose__num{
  font-weight:600;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(56px,7vw,92px);color:var(--cream);
  transition:color .35s var(--ease);
}
.dose__unit{font-size:15px;color:var(--cream-3);letter-spacing:.01em}

.dose__gauge{
  margin:20px 0 0;height:4px;border-radius:999px;background:rgba(244,241,232,.10);overflow:hidden;
}
.dose__fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--lime));
  transition:width 1.1s var(--ease) .2s,filter .35s var(--ease);
}
.dose.is-in .dose__fill{width:var(--lvl)}

.dose__title{margin:22px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.dose__desc{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--cream-2)}

.use__foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:clamp(34px,4vh,48px) 0 0;padding-top:24px;border-top:1px solid var(--line-2);
}
.use__note{margin:0;display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--cream-2)}
.use__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--lime);box-shadow:0 0 0 4px rgba(255,217,0,.14)}
.use__link{
  display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--cream);
  border-bottom:1px solid var(--line);padding-bottom:6px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.use__link svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.use__link:hover{color:var(--lime);border-color:var(--lime)}
.use__link:hover svg{transform:rotate(45deg)}

@media (max-width:820px){
  .use__grid{grid-template-columns:1fr;gap:14px}
  .dose__num{font-size:clamp(52px,16vw,72px)}
}
@media (prefers-reduced-motion:reduce){
  .dose{opacity:1;transform:none;transition:border-color .3s,box-shadow .3s}
  .dose__fill{width:var(--lvl);transition:none}
  .dose::before{width:var(--lvl);transition:none}
}

/* ═════════════════════════════════════════════
   Сторінка «Застосування» (інструкція)
   ═════════════════════════════════════════════ */
.page{
  padding-top:clamp(120px,15vh,150px);
  background:
    radial-gradient(42% 26% at 0% 2%,rgba(255,217,0,.05),transparent 60%),
    radial-gradient(40% 26% at 100% 16%,rgba(74,200,120,.05),transparent 60%),
    #100F0A;
}
.doc-hero{
  position:relative;overflow:hidden;
  padding:clamp(40px,5vh,64px) clamp(20px,4vw,30px) clamp(40px,5vh,60px);
  background:
    radial-gradient(56% 74% at 8% -14%,rgba(255,217,0,.22),transparent 58%),
    radial-gradient(50% 58% at 96% -8%,rgba(74,200,120,.20),transparent 62%),
    radial-gradient(70% 60% at 68% 128%,rgba(120,205,90,.12),transparent 60%),
    linear-gradient(180deg,#17170F 0%,#100F0A 100%);
}
.doc-hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.doc-crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3)}
.doc-crumbs a{color:var(--cream-3);transition:color .3s var(--ease)}
.doc-crumbs a:hover{color:var(--green)}
.doc-hero h1{
  margin:18px 0 0;font-weight:600;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(40px,6.4vw,86px);color:var(--cream);
}
.doc-hero__lead{margin:22px 0 0;max-width:60ch;font-size:clamp(15.5px,1.15vw,18px);line-height:1.62;color:var(--cream-2)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(26px,3.4vh,38px) 0 0}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(244,241,232,.03);
  font-size:13.5px;color:var(--cream);
}
.chip b{color:var(--lime);font-weight:600}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}

/* ─────────────────────────────────────────────
   Сторінка «Ефективність» — крупні оранжеві цифри, бари, сітка.
   (світла тема body.light: --cream=чорний, --lime=оранжевий, --green=зелений)
   ───────────────────────────────────────────── */
.eff-note{
  margin:clamp(22px,3vh,32px) 0 0;max-width:74ch;
  font-size:13px;line-height:1.65;color:var(--cream-3);
}

/* три великі показники */
.eff-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);
  margin-top:clamp(30px,4vh,48px);
}
.eff-stat{
  border-top:2px solid var(--lime);padding-top:clamp(20px,2.4vh,28px);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .55s var(--ease);
}
.eff-stat.is-in{opacity:1;transform:none}
.eff-stat__num{
  margin:0;display:flex;align-items:baseline;
  font-weight:600;letter-spacing:-.03em;line-height:.86;color:var(--lime);
}
.eff-stat__pre{
  align-self:center;margin-right:.5em;font-family:var(--mono);font-weight:400;
  font-size:clamp(11px,1vw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);
}
.eff-stat__big{font-size:clamp(56px,7.5vw,108px)}
.eff-stat__unit{font-size:clamp(30px,4vw,56px);margin-left:.04em}
.eff-stat__label{
  margin:clamp(16px,2vh,22px) 0 0;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(18px,1.5vw,22px);color:var(--cream);
}
.eff-stat__desc{margin:11px 0 0;font-size:15px;line-height:1.6;color:var(--cream-2)}

/* бари за культурами */
.eff-bars{list-style:none;margin:clamp(30px,4vh,46px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(16px,2vh,22px)}
.eff-bar{
  display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.5vw,34px);
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease),transform .5s var(--ease);
}
.eff-bar.is-in{opacity:1;transform:none}
.eff-bar__name{font-size:clamp(15px,1.2vw,17px);font-weight:600;color:var(--cream);letter-spacing:-.01em}
.eff-bar__track{height:10px;border-radius:999px;background:rgba(11,20,16,.09);overflow:hidden}
.eff-bar__fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#E4A63C,var(--lime));
  transition:width 1.15s var(--ease) .15s;
}
.eff-bar.is-in .eff-bar__fill{width:var(--v)}
.eff-bar__val{
  font-size:clamp(19px,1.7vw,26px);font-weight:600;letter-spacing:-.01em;color:var(--lime);
  min-width:3.6ch;text-align:right;
}

/* сітка пунктів (Механізм / Безпека) */
.eff-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,3vh,32px) clamp(34px,4.5vw,60px);
  margin-top:clamp(30px,4vh,44px);
}
.eff-item{position:relative;padding-top:clamp(18px,2.2vh,26px);border-top:1px solid var(--line-2)}
.eff-item::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--green)}
.eff-item__title{margin:0;font-weight:600;letter-spacing:-.01em;font-size:clamp(17px,1.35vw,20px);color:var(--cream)}
.eff-item__desc{margin:11px 0 0;font-size:15px;line-height:1.65;color:var(--cream-2)}

/* інтерактив: лёгкі hover-стани */
.eff-stat{transition:opacity .6s var(--ease),transform .55s var(--ease)}
.eff-stat__label,.eff-bar__name,.eff-item__title{transition:color .3s var(--ease)}
.eff-stat:hover .eff-stat__label{color:var(--green)}
.eff-bar__fill{will-change:width,filter}
.eff-bar:hover .eff-bar__fill{filter:brightness(1.07) saturate(1.06)}
.eff-bar:hover .eff-bar__name{color:var(--green)}
.eff-item::before{transition:width .4s var(--ease)}
.eff-item:hover::before{width:56px}
.eff-item:hover .eff-item__title{color:var(--green)}

/* перекриваємо жадібне «.doc-block p» (вища специфічність) */
.eff-block .eff-stat__num{margin:0;color:var(--lime)}
.eff-block .eff-stat__desc{margin:11px 0 0}
.eff-block .eff-item__desc{margin:11px 0 0}
.eff-block .eff-note{margin:clamp(22px,3vh,32px) 0 0;color:var(--cream-3)}

@media (max-width:820px){
  .eff-stats{grid-template-columns:1fr;gap:clamp(24px,4vh,34px)}
  .eff-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .eff-bar{grid-template-columns:1fr auto;gap:8px 16px}
  .eff-bar__track{grid-column:1 / -1;order:3}
}
@media (prefers-reduced-motion:reduce){
  .eff-stat{opacity:1;transform:none}
  .eff-bar{opacity:1;transform:none}
  .eff-bar__fill{transition:none}
}

/* розкладка: липке зміст + контент */
.doc-layout{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,4vw,64px);
  padding:clamp(44px,6vh,80px) clamp(20px,4vw,30px) clamp(60px,9vh,110px);
}
/* одноколонковий варіант (без змісту) — на всю ширину контейнера;
   лише текстові абзаци тримаємо читабельної ширини (блоки/сітки — на всю ширину) */
.doc-layout--solo{grid-template-columns:minmax(0,1fr)}
.doc-layout--solo .doc-block > p{max-width:76ch}
.toc{position:sticky;top:calc(clamp(120px,15vh,150px) - 40px);align-self:start;max-height:80vh;overflow:auto}
.toc__title{margin:0 0 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-3)}
.toc a{
  display:flex;gap:10px;padding:7px 0;font-size:13.5px;color:var(--cream-3);
  border-left:1.5px solid transparent;padding-left:14px;margin-left:-1.5px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.toc a span{font-family:var(--mono);font-size:11px;opacity:.7}
.toc a:hover{color:var(--cream)}
.toc a.is-active{color:var(--cream);border-color:var(--green)}

.doc-main{min-width:0}
.doc-block{padding:clamp(30px,4vh,52px) 0;border-top:1px solid var(--line-2)}
.doc-block:first-child{border-top:0;padding-top:0}
.doc-block__num{font-family:var(--mono);font-size:12px;color:var(--green);letter-spacing:.06em}
.doc-block h2{margin:12px 0 0;font-weight:600;letter-spacing:-.02em;font-size:clamp(24px,3vw,36px);color:var(--cream)}
.doc-block p{margin:16px 0 0;font-size:clamp(15px,1.05vw,16.5px);line-height:1.72;color:var(--cream-2)}
.doc-block p + p{margin-top:12px}
.doc-block strong{color:var(--cream);font-weight:600}

/* списки та контакти (Політика конфіденційності) */
.doc-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.doc-list li{
  position:relative;padding-left:22px;
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.6;color:var(--cream-2);
}
.doc-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--green)}
.doc-contact{margin:18px 0 0;display:grid;gap:14px}
.doc-contact div{display:grid;gap:4px}
.doc-contact dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.doc-contact dd{margin:0;font-size:clamp(15px,1.05vw,16.5px);line-height:1.5;color:var(--cream)}
.doc-contact a{color:var(--cream);border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease)}
.doc-contact a:hover{color:var(--green);border-color:var(--green)}

/* факти-специфікація */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:26px;background:var(--line-2);border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.spec div{background:#14140D;padding:18px 20px}
.spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.spec dd{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--cream)}

/* дозування-таби */
.dt{margin-top:8px}
.dt__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.dt__tab{
  display:flex;align-items:baseline;gap:9px;padding:13px 24px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(244,241,232,.04);color:var(--cream-2);
  font-family:"Mazzard","Helvetica Neue",Arial,sans-serif;font-size:15px;font-weight:500;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.dt__tab b{font-family:"Mazzard","Helvetica Neue",Arial,sans-serif;font-size:23px;font-weight:600;color:var(--cream);letter-spacing:-.02em}
.dt__tab:hover{border-color:rgba(244,241,232,.22)}
.dt__tab.is-on{background:linear-gradient(180deg,rgba(51,166,90,.16),rgba(51,166,90,.05));border-color:rgba(51,166,90,.5);color:var(--cream)}
.dt__tab.is-on b{color:var(--lime)}
.dt__panel{display:none}
.dt__panel.is-on{display:block;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dt__lead{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--cream-2)}

.crops{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.crop{
  position:relative;padding:22px 24px;border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(180deg,rgba(244,241,232,.04),rgba(244,241,232,.015));
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.crop:hover{border-color:rgba(51,166,90,.4);transform:translateY(-3px)}
.crop__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.crop__name{font-size:17px;font-weight:600;color:var(--cream);letter-spacing:-.01em;max-width:22ch}
.crop__count{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--green);padding:5px 10px;border:1px solid rgba(51,166,90,.35);border-radius:999px;white-space:nowrap}
.crop dl{margin:16px 0 0;display:grid;gap:12px}
.crop dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);margin-bottom:4px}
.crop dd{margin:0;font-size:14px;line-height:1.55;color:var(--cream-2)}

/* виноска-наголос */
.callout{
  margin-top:26px;padding:22px 24px;border-radius:14px;
  border:1px solid rgba(255,217,0,.28);
  background:linear-gradient(180deg,rgba(255,217,0,.07),rgba(255,217,0,.02));
  display:flex;gap:16px;align-items:flex-start;
}
.callout__mk{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;background:rgba(255,217,0,.16);color:var(--lime)}
.callout p{margin:0;font-size:14.5px;line-height:1.6;color:var(--cream)}
.callout strong{color:var(--lime)}

/* аккордеон безпеки */
.acc{margin-top:8px;border-top:1px solid var(--line-2)}
.acc details{border-bottom:1px solid var(--line-2)}
.acc summary{
  list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:14px;
  font-size:16px;font-weight:500;color:var(--cream);transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary .n{font-family:var(--mono);font-size:12px;color:var(--green)}
.acc summary .pl{margin-left:auto;width:22px;height:22px;position:relative;flex:0 0 auto;transition:transform .35s var(--ease)}
.acc summary .pl::before,.acc summary .pl::after{content:"";position:absolute;background:var(--cream-2);border-radius:2px}
.acc summary .pl::before{left:0;right:0;top:50%;height:1.5px;transform:translateY(-50%)}
.acc summary .pl::after{top:0;bottom:0;left:50%;width:1.5px;transform:translateX(-50%);transition:opacity .3s var(--ease)}
.acc details[open] summary .pl::after{opacity:0}
.acc summary:hover{color:var(--lime)}
.acc__body{padding:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--cream-2);max-width:70ch}

/* виробник */
.maker{margin-top:26px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.maker>div{padding:26px 28px}
.maker>div+div{border-left:1px solid var(--line-2)}
.maker dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-3)}
.maker dd{margin:8px 0 18px;font-size:15px;line-height:1.55;color:var(--cream)}
.maker dd:last-child{margin-bottom:0}
.maker a{color:var(--cream);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.maker a:hover{color:var(--lime);border-color:var(--lime)}

@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .spec{grid-template-columns:1fr}
  .crops{grid-template-columns:1fr}
  .maker{grid-template-columns:1fr}
  .maker>div+div{border-left:0;border-top:1px solid var(--line-2)}
}

/* ═════════════════════════════════════════════
   ТЕМА ВНУТРІШНІХ СТОРІНОК (Застосування) — тепле світле тло.
   Продовження «Що таке» / контактів. ЗЕЛЕНИЙ — інтерфейс,
   ОРАНЖЕВИЙ — цифри / виділення / CTA. Тёмний .dochero — острів.
   Перевизначаємо кольорові токени → чорний текст на світлому.
   ═════════════════════════════════════════════ */
body.light{background:#E7ECDC;color:#0B1410}
/* Токени перевизначаємо ЛИШЕ на контенті сторінки (.page),
   щоб НЕ зачепити тёмні спільні компоненти — шапку й футер (вони поза .page). */
body.light .page{
  --cream:#0B1410;
  --cream-2:rgba(11,20,16,.66);
  --cream-3:rgba(11,20,16,.46);
  --line:rgba(11,20,16,.18);
  --line-2:rgba(11,20,16,.11);
  --green:#1C7E45;
  --lime:#DE8A1C;                 /* «жовтий» токен → оранжевий акцент на світлому */
  padding-top:0;
  background:
    radial-gradient(rgba(11,20,16,.05) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(180deg,#E7ECDC 0%,#E2E8D5 58%,#DDE4CF 100%);
}

/* Тёмний doc hero — острів: повертаємо світлі токени для його вмісту (chips, крихти, заголовок) */
body.light .dochero{
  --cream:#F4F1E8;
  --cream-2:rgba(244,241,232,.78);
  --cream-3:rgba(244,241,232,.5);
  --line:rgba(244,241,232,.16);
  --line-2:rgba(244,241,232,.11);
  --green:#8FE07A;
  --lime:#FFD900;
}

/* Панелі на світлому */
body.light .spec{background:rgba(11,20,16,.10)}
body.light .spec div{background:#EDF0E4}
body.light .crop,body.light .dt__tab{background:rgba(11,20,16,.028);border-color:rgba(11,20,16,.12)}
body.light .crop:hover{border-color:rgba(28,126,69,.45)}
body.light .dt__tab:hover{border-color:rgba(11,20,16,.22)}
body.light .dt__tab.is-on{background:linear-gradient(180deg,rgba(28,126,69,.14),rgba(28,126,69,.04));border-color:rgba(28,126,69,.5);color:var(--cream)}
body.light .dt__tab.is-on b{color:#DE8A1C}          /* цифра-акцент → оранжевий */

/* Callout — тепле оранжеве виділення */
body.light .callout{border-color:rgba(222,138,28,.30);background:linear-gradient(180deg,rgba(222,138,28,.08),rgba(222,138,28,.02))}
body.light .callout__mk{background:rgba(222,138,28,.16);color:#DE8A1C}

/* Зелені акценти інтерфейсу; оранжевий — лише цифри/виділення */
body.light .doc-block__num,
body.light .crop__count,
body.light .acc summary .n,
body.light .sec-eyebrow{color:var(--green)}
body.light .crop__count{border-color:rgba(28,126,69,.4)}
body.light .toc a.is-active{color:var(--green);border-color:var(--green)}
body.light .toc a:hover{color:var(--cream)}
body.light .acc summary:hover,
body.light .maker a:hover{color:var(--green);border-color:var(--green)}
body.light .nav__link.is-active::after{background:#8FE07A}

/* ─────────────────────────────────────────────
   Для чого підходить — карусель (темна, дорога, яскраві картки)
   Іконки-бейджі як на упаковці. Нескінченна + параллакс.
   ───────────────────────────────────────────── */
.forwhat{position:relative;overflow:hidden;background:linear-gradient(156deg,#051E11,#04100A)}
/* мʼяка зернистість — приємна, ненавʼязлива */
.forwhat::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:170px 170px;opacity:.05;mix-blend-mode:screen;
}
.forwhat__inner,.forwhat .caro{position:relative;z-index:1}
.forwhat__inner{max-width:var(--maxw);margin:0 auto}
.forwhat__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

.caro__nav{display:flex;gap:10px}
.cbtn{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--line);background:transparent;color:var(--cream);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.cbtn svg{width:16px;height:16px}
.cbtn:hover{border-color:var(--green);background:rgba(51,166,90,.14);transform:translateY(-2px)}

.caro{
  margin-top:clamp(30px,4vh,44px);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.caro.is-drag{cursor:grabbing}
.caro::-webkit-scrollbar{display:none}
.caro__track{
  display:flex;gap:20px;list-style:none;margin:0;
  padding:8px clamp(20px,4vw,30px) 20px;
}

.pcard{
  position:relative;flex:0 0 clamp(280px,29vw,350px);
  padding:34px 32px 32px;border-radius:18px;overflow:hidden;
  border:1px solid color-mix(in oklab,var(--c) 10%,var(--line-2));
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--c) 7%,transparent),color-mix(in oklab,var(--c) 2%,transparent)),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),
    #0C1610;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
/* тонка кольорова кромка зверху — стримано */
.pcard::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c) 28%,transparent) 55%,transparent 88%);
}
.pcard:hover{
  transform:translateY(-6px);
  border-color:color-mix(in oklab,var(--c) 82%,transparent);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.85),0 0 0 1px color-mix(in oklab,var(--c) 55%,transparent) inset;
}

.pcard__badge{
  position:relative;z-index:1;
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--c);will-change:transform;
  box-shadow:0 14px 30px -12px color-mix(in oklab,var(--c) 82%,transparent),
             0 0 0 6px color-mix(in oklab,var(--c) 14%,transparent),
             inset 0 2px 5px rgba(255,255,255,.3);
}
.pcard__badge svg{width:34px;height:34px}

.pcard__tag{
  position:relative;z-index:1;margin:26px 0 0;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in oklab,var(--c) 72%,var(--cream));font-weight:400;
}
.pcard__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:0 0 auto}
.pcard__title{position:relative;z-index:1;margin:14px 0 0;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.24;color:var(--cream)}
.pcard__desc{position:relative;z-index:1;margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--cream-2)}

@media (max-width:640px){
  .pcard{flex-basis:80vw;padding:26px}
  .cbtn{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .pcard{transition:none}
  .pcard__badge{transition:none}
}

/* ═════════════════════════════════════════════
   Внутрішні сторінки — тепле світле тло (продовження «Що таке Finevit»).
   ЗЕЛЕНИЙ — головний акцент інтерфейсу. ОРАНЖЕВИЙ — тільки CTA / цифри / виділення.
   ═════════════════════════════════════════════ */
.ct{
  --ink-1:#0B1410;
  --ink-2:rgba(11,20,16,.66);
  --ink-3:rgba(11,20,16,.44);
  --line:rgba(11,20,16,.13);
  --brand:#1C7E45;        /* зелений — інтерфейс */
  --brand-2:#33A65A;
  --warm:#DE8A1C;         /* оранжевий — лише CTA / цифри / виділення */
  position:relative;color:var(--ink-1);
  background:linear-gradient(180deg,#E7ECDC 0%,#E2E8D5 58%,#DDE4CF 100%);
}

/* ── Doc hero — глибокий тёмно-зелений преміум-баннер (уходит під шапку) ── */
.dochero{
  position:relative;overflow:hidden;color:var(--cream);
  padding:clamp(120px,15vh,158px) clamp(20px,4vw,30px) clamp(48px,6.5vh,74px);
  background:linear-gradient(162deg,#123826 0%,#0C2417 56%,#08180F 100%);
}
/* плавні хвилі — елегантний органічний мотив (у стилістиці агро/біо) */
.dochero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='560' viewBox='0 0 1440 560' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238FE07A' stroke-width='1.2'%3E%3Cpath d='M-40 110 C 320 30 620 190 940 110 S 1480 30 1520 110'/%3E%3Cpath d='M-40 180 C 320 100 620 260 940 180 S 1480 100 1520 180'/%3E%3Cpath d='M-40 250 C 320 170 620 330 940 250 S 1480 170 1520 250'/%3E%3Cpath d='M-40 320 C 320 240 620 400 940 320 S 1480 240 1520 320'/%3E%3Cpath d='M-40 390 C 320 310 620 470 940 390 S 1480 310 1520 390'/%3E%3Cpath d='M-40 460 C 320 380 620 540 940 460 S 1480 380 1520 460'/%3E%3Cpath d='M-40 530 C 320 450 620 610 940 530 S 1480 450 1520 530'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:center;opacity:.22;
  -webkit-mask-image:linear-gradient(108deg,transparent 4%,#000 46%,#000 100%);
          mask-image:linear-gradient(108deg,transparent 4%,#000 46%,#000 100%);
}
/* дуже м'яке верхнє світло для об'єму (delikatно, не «засвіт») */
.dochero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:58%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
}
.dochero__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.dochero__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dochero .doc-crumbs{color:rgba(244,241,232,.55)}
.dochero .doc-crumbs a{color:#8FE07A;transition:color .3s var(--ease)}
.dochero .doc-crumbs a:hover{color:#B7EDA0}
.dochero__meta{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,232,.5)}
.dochero__title{
  margin:clamp(20px,3.2vh,36px) 0 0;font-weight:600;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(44px,7vw,96px);color:var(--cream);
}
.dochero__title i{font-style:normal;color:#8FE07A}   /* зелений акцент (за бажанням) */
.dochero__lead{
  margin:clamp(20px,2.6vh,30px) 0 0;max-width:60ch;
  font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:rgba(244,241,232,.78);
}

/* ── Напрямки: пронумеровані рядки ── */
.ct-list{position:relative;z-index:1;padding:clamp(20px,3vh,36px) clamp(20px,4vw,30px) clamp(72px,11vh,120px)}
.ct-list__inner{max-width:var(--maxw);margin:0 auto}

.ct-row{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,38%);
  gap:clamp(32px,5vw,84px);align-items:center;
  padding:clamp(44px,6.4vh,78px) 0;
  border-top:1px solid var(--line);
  transition:background .35s var(--ease);
}
.ct-row:last-child{border-bottom:1px solid var(--line)}
.ct-row:hover{background:rgba(28,126,69,.045)}     /* легкий зелений натяк */
/* зелена засічка на лінійці — росте при наведенні */
.ct-row::before{
  content:"";position:absolute;left:0;top:-1px;height:2px;width:48px;
  background:var(--brand);transition:width .5s var(--ease);
}
.ct-row:hover::before{width:104px}

.ct-row__lead{max-width:60ch}
/* великий контурний ЗЕЛЕНИЙ індекс — заливається при наведенні на рядок */
.ct-row__num{
  display:block;font-weight:600;line-height:.9;letter-spacing:-.02em;
  font-size:clamp(40px,4.6vw,66px);
  color:transparent;-webkit-text-stroke:1.4px var(--brand);
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.ct-row:hover .ct-row__num{color:var(--brand-2);-webkit-text-stroke-color:transparent}
.ct-row__title{
  margin:clamp(14px,1.8vh,20px) 0 0;font-weight:600;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(27px,3vw,42px);color:var(--ink-1);
}
.ct-row__desc{
  margin:clamp(16px,2.2vh,22px) 0 0;max-width:52ch;
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.72;color:var(--ink-2);
}

.ct-row__act{min-width:0}
.ct-row__act .ct-action{margin-top:0}
.ct-row__act .ct-contacts{margin-top:0;flex-direction:column;gap:clamp(20px,2.6vh,26px)}

/* дія-CTA: зелена мітка + email-лінк; hover → ОРАНЖЕВИЙ (це CTA) */
.ct-action{margin-top:clamp(26px,3.6vh,38px)}
.ct-action__eyebrow{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
}
.ct-action__eyebrow::before{content:"";width:20px;height:1px;background:var(--brand);opacity:.8}
.ct-action__mail{
  display:flex;align-items:center;gap:clamp(16px,2vw,24px);
  font-size:clamp(19px,1.7vw,26px);font-weight:500;letter-spacing:-.01em;color:var(--ink-1);
  border-bottom:1px solid var(--line);padding-bottom:12px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.ct-action__arw{
  margin-left:auto;width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-1);
  transition:transform .45s var(--ease),border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.ct-action__arw svg{width:15px;height:15px}
.ct-action__mail:hover{color:var(--warm);border-color:var(--warm)}
.ct-action__mail:hover .ct-action__arw{transform:translate(3px,-3px);border-color:var(--warm);background:var(--warm);color:#fff}
.ct-action__mail + .ct-action__mail{margin-top:16px}

/* примітка (Business Development) — зелені лінки */
.ct-note{margin:clamp(20px,2.6vh,26px) 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:14px}
.ct-note span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ct-note a{color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.ct-note a:hover{color:var(--brand);border-color:var(--brand)}

/* прямі контакти (03) — зелений hover */
.ct-contacts{margin-top:clamp(28px,3.6vh,38px);display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,56px)}
.ct-contact{display:flex;flex-direction:column;gap:8px}
.ct-contact__k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ct-contact__v{
  font-size:clamp(17px,1.4vw,21px);font-weight:600;color:var(--ink-1);letter-spacing:-.01em;
  border-bottom:1px solid var(--line);padding-bottom:9px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.ct-contact:hover .ct-contact__v{color:var(--brand);border-color:var(--brand)}

@media (max-width:820px){
  .ct-row{grid-template-columns:1fr;gap:clamp(24px,3.4vh,32px);padding:clamp(36px,5vh,52px) 0;align-items:start}
  .ct-row__lead,.ct-row__desc{max-width:none}
}
@media (max-width:520px){
  .dochero__title{font-size:clamp(38px,11vw,52px)}
}

/* ═════════════════════════════════════════════
   «Що таке Finevit» — світлий розділ.
   Повітря після hero: тепле паперове тло, темний текст,
   тонкі лінійки. Без коробок і без засвітів.
   ═════════════════════════════════════════════ */
.about{
  --ink-1:#0B1410;
  --ink-2:rgba(11,20,16,.66);
  --rule:rgba(11,20,16,.13);
  --warm:#DE8A1C;                 /* тепла домінанта розділу */
  --warm-soft:rgba(222,138,28,.30);
  position:relative;overflow:hidden;color:var(--ink-1);
  /* світлий, але зі спокійним зелено-піщаним підтоном палітри — не білий */
  background:linear-gradient(180deg,#E7ECDC 0%,#E2E8D5 58%,#DDE4CF 100%);
}
/* м'який перехід від темного hero — щоб не було «чужого» шва зверху */
.about::after{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(11,20,16,.10),transparent);
}
/* та сама крапкова сітка, що й на інших секціях — головний зв'язувальний мотив */
.about::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(11,20,16,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.about__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}

.about__head{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(24px,5vw,84px);align-items:start;
}
.about .sec-eyebrow{color:var(--warm)}
.about__title{
  margin:0;font-weight:600;letter-spacing:-.032em;line-height:.98;
  font-size:clamp(34px,4.8vw,66px);color:var(--ink-1);
}
.about__lead{
  margin:0;font-weight:400;
  font-size:clamp(17px,1.5vw,23px);line-height:1.58;color:var(--ink-2);
}
.about__lead em{
  font-style:normal;font-weight:600;color:var(--ink-1);
  /* фірмовий жовтий повертається — маркер під ключовою думкою */
  background:linear-gradient(180deg,transparent 62%,rgba(255,217,0,.55) 0);
  padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ── Структурована сітка з розділювачами, тепла (оранжева) домінанта ── */
.about__rows{
  margin-top:clamp(44px,6vh,80px);
  border-top:2px solid var(--warm);          /* оранжева лінія-брекет зверху */
}
.about-row{
  display:grid;grid-template-columns:var(--band,120px) minmax(0,.85fr) minmax(0,1.5fr);
  border-bottom:1px solid var(--rule);        /* горизонтальні розділювачі */
  transition:background .35s var(--ease);
}
/* лесенка: оранжева смуга з номером росте від ряду до ряду */
.about-row:nth-child(1){--band:clamp(88px,9vw,128px)}
.about-row:nth-child(2){--band:clamp(150px,18vw,262px)}
.about-row:nth-child(3){--band:clamp(210px,27vw,392px)}
.about-row:hover{background:rgba(222,138,28,.05)}
/* ячейки — звичайні блоки (БЕЗ flex, щоб інлайн-текст із <strong> тік нормально);
   тягнуться на всю висоту ряду (align stretch за замовчуванням), контент — по верхній лінії */
.about-row > *{
  margin:0;padding:clamp(26px,3.6vh,40px) clamp(22px,2.5vw,40px);
}
.about-row > * + *{border-left:1px solid var(--rule)}   /* вертикальні розділювачі */
/* крупний оранжевий номер у власній теплій колонці-смузі */
.about-row__num{
  text-align:center;background:rgba(222,138,28,.07);
  font-weight:600;line-height:1;letter-spacing:-.02em;
  font-size:clamp(30px,3vw,46px);color:var(--warm);
}
.about-row__term{
  font-weight:600;letter-spacing:-.015em;line-height:1.24;
  font-size:clamp(19px,1.5vw,24px);color:var(--ink-1);
}
.about-row__desc{
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.72;color:var(--ink-2);
}
.about-row__desc strong{color:var(--ink-1);font-weight:600}

@media (max-width:860px){
  .about-row{grid-template-columns:auto 1fr}
  .about-row > *{padding:clamp(18px,2.6vh,26px) 0}
  .about-row > * + *{border-left:0}
  .about-row__num{grid-column:1;grid-row:1;background:transparent;text-align:left;padding-right:20px}
  .about-row__term{grid-column:2;grid-row:1;align-self:center}
  .about-row__desc{grid-column:1 / -1;grid-row:2;padding-top:0;padding-bottom:clamp(22px,3.4vh,32px)}
}

.about__grid{
  list-style:none;margin:clamp(50px,7.5vh,92px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(32px,5.5vw,92px);row-gap:clamp(36px,5vh,58px);
}
.feat{
  padding-top:clamp(22px,2.6vh,30px);border-top:1px solid var(--rule);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .55s var(--ease);
}
.feat.is-in{opacity:1;transform:none}
.feat__ic{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-deep);color:#F4F1E8;
  box-shadow:0 12px 24px -14px rgba(28,126,69,.9);
}
.feat__ic svg{width:22px;height:22px}
.feat__title{
  margin:20px 0 0;font-weight:600;letter-spacing:-.015em;line-height:1.24;
  font-size:clamp(19px,1.5vw,23px);color:var(--ink-1);
}
.feat__desc{margin:12px 0 0;font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:46ch}

@media (max-width:900px){
  .about__head{grid-template-columns:1fr;gap:clamp(18px,3vh,26px)}
  .about__grid{grid-template-columns:1fr;row-gap:clamp(28px,4vh,38px)}
  .feat__desc{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .feat{opacity:1;transform:none}
}

/* ── Шапка над світлим розділом: темний контент ── */
/* світле молочне скло — читається навіть на межі з темним кадром */
.header.is-on-light .header__bar{
  background:rgba(246,242,232,.78);
  border-color:rgba(11,20,16,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 44px -32px rgba(11,20,16,.5);
}
.header.is-on-light.is-scrolled .header__bar{background:rgba(246,242,232,.88);border-color:rgba(11,20,16,.14)}
.header.is-on-light .logo__word{color:var(--ink)}
.header.is-on-light .logo__word i{color:var(--green-deep)}
.header.is-on-light .nav__link{color:var(--ink)}
.header.is-on-light .nav__link.is-active::after{background:var(--green-deep)}
.header.is-on-light .lang{background:rgba(11,20,16,.05);border-color:rgba(11,20,16,.16)}
.header.is-on-light .lang__opt{color:rgba(11,20,16,.62)}
.header.is-on-light .lang__opt:hover{color:var(--ink)}
.header.is-on-light .lang__opt.is-on{color:var(--cream)}
.header.is-on-light .burger{background:rgba(11,20,16,.04);border-color:rgba(11,20,16,.18)}
.header.is-on-light .burger span{background:var(--ink)}
.header.is-on-light .burger:hover{background:rgba(28,126,69,.14);border-color:var(--green-deep)}
.header.is-on-light .burger[aria-expanded="true"]{background:var(--green-deep);border-color:var(--green-deep)}
.header.is-on-light .burger[aria-expanded="true"] span{background:#F4F1E8}
/* мобільне меню має власне темне тло — лишаємо світлий текст */
@media (max-width:1000px){
  .header.is-on-light .nav__link{color:var(--cream)}
}

/* ═════════════════════════════════════════════
   404 — у палітрі «Що таке Finevit» (світлий, оранжевий + чорний)
   ═════════════════════════════════════════════ */
.nf{
  --ink-1:#0B1410; --ink-2:rgba(11,20,16,.66); --warm:#DE8A1C; --rule:rgba(11,20,16,.13);
  position:relative;overflow:hidden;color:var(--ink-1);
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(120px,15vh,150px) clamp(20px,4vw,30px) clamp(56px,8vh,96px);
  background:linear-gradient(180deg,#E7ECDC 0%,#E2E8D5 58%,#DDE4CF 100%);
}
/* та сама крапкова текстура */
.nf::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(11,20,16,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.nf__inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto}
.nf__code{
  display:block;font-weight:600;line-height:.84;letter-spacing:-.045em;
  font-size:clamp(120px,27vw,360px);color:var(--warm);
}
.nf__title{
  margin:clamp(10px,2vh,20px) 0 0;font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(30px,4.4vw,60px);color:var(--ink-1);
}
.nf__text{
  margin:clamp(16px,2.2vh,24px) 0 0;max-width:48ch;
  font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--ink-2);
}
.nf__link{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,3.6vh,42px);
  padding:15px 27px;border-radius:999px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  background:var(--warm);color:#1a1200;border:1px solid var(--warm);
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.nf__link svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.nf__link:hover{transform:translateY(-2px);filter:brightness(1.06)}
.nf__link:hover svg{transform:translate(3px,-3px)}