/* STREET Energy: макет v2. Кольори й шрифти — як на живому сайті streetenergy.com.ua (не брендбук). */
:root{
  --green:#0F4336; --green-hi:#1B6B57;
  --accent:#F8B424; --accent-hi:#FFC647;
  --bg:#F7F8F5;                         /* основний світлий фон і шапка */
  --gray:#E8EAEF; --card:#FBFBFD; --line:#D7DCE4; --line-2:#C3CAD4;   /* розділи «каталог / бізнес / підвал» */
  --ink:#1B2430; --ink-2:#4C5563; --ink-green:#14231D;
  --soft:#F0F3F2;                       /* світлі кнопки */
  --dark:#0F1512; --dark-card:#182320; --dark-line:rgba(255,255,255,.10);
  --on-dark:#EAF1ED; --on-dark-2:#A9BDB4;
  --hdr-h:88px;                         /* шапка більша (Pastel 02.10: +40% лого) */
  --f-display:'Fixel Text','Arial Narrow',system-ui,sans-serif;
  --f-head:'Fixel Display','Arial Black',system-ui,sans-serif;
  --f-body:'Fixel Text',system-ui,sans-serif;
  --ease:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* нічого не може вилізти за правий край: на телефоні таке переповнення на мить розширює сторінку — шапка смикається (06.10) */
html,body{overflow-x:clip}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--bg);line-height:1.55;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1{font-family:var(--f-head);font-weight:800;line-height:1.1;margin:0}
h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.12;margin:0}
p{margin:0}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.center{text-align:center;margin-top:36px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* Кнопки: основні — зелені, як на живому сайті */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.75em 1.3em;border-radius:10px;border:2px solid transparent;
  font:600 1rem/1 var(--f-display);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .15s,background .2s,border-color .2s,color .2s}
.btn i{font-size:1.25em}
.btn--lg{padding:1em 1.6em;font-size:1.08rem}
.btn--green{background:var(--green);color:#fff}
@media (hover:hover) and (pointer:fine){.btn--green:hover{background:var(--green-hi);transform:translateY(-1px)}}
.btn--accent{background:var(--accent);color:var(--ink-green)}
@media (hover:hover) and (pointer:fine){.btn--accent:hover{background:var(--accent-hi);transform:translateY(-1px)}}
.btn--light{background:var(--soft);color:var(--ink-green);border-color:var(--line)}
.btn--light:hover{background:#fff}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn:focus-visible,.ring:focus-visible,.cta__btn:focus-visible,.pager button:focus-visible,.hdr a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Шапка: світла, як на живому сайті; лого зліва майже від краю */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr-h);z-index:50;display:flex;align-items:center;gap:28px;padding:0 28px;
  background:rgba(247,248,245,.62);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  color:var(--ink-green);box-shadow:0 2px 14px rgba(15,21,18,.08),0 1px 0 rgba(255,255,255,.5) inset}
.hdr__brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;margin-right:auto}
.hdr__brand img{width:auto;height:48px;max-width:none}
.hdr__tag{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.hdr__nav{display:flex;gap:28px}
.hdr__nav a{text-decoration:none;font:500 1.08rem/1 var(--f-display);padding:8px 0;border-bottom:2px solid transparent;transition:.2s}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{border-color:var(--green)}
.hdr__cta{padding:.7em 1.25em;font-size:1.06rem}
/* Telegram у шапці: прозоре скло, як сама шапка, біла окантовка й «тиснення» навколо (вдавлена канавка) */
.hdr .hdr__cta{background:rgba(255,255,255,.18);color:var(--ink-green);border:1.5px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 4px rgba(15,21,18,.07),0 0 0 5px rgba(255,255,255,.85),
             inset 0 1px 0 rgba(255,255,255,.95),inset 0 -3px 6px rgba(15,21,18,.07),0 6px 16px rgba(15,21,18,.08);
  transition:background .2s,transform .15s,box-shadow .2s}
.hdr .hdr__cta i{color:var(--green)}
@media (hover:hover) and (pointer:fine){.hdr .hdr__cta:hover{background:rgba(255,255,255,.55);transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(15,21,18,.09),0 0 0 5px #fff,inset 0 1px 0 #fff,inset 0 -3px 6px rgba(15,21,18,.06),0 8px 20px rgba(15,21,18,.12)}}
.hdr__burger{display:none;background:none;border:0;color:var(--ink-green);font-size:1.9rem;cursor:pointer}

/* Розділи: звичайна вільна прокрутка */
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr-h)}
.screen{position:relative;display:flex;flex-direction:column;justify-content:center;padding:104px 0}
.hero{padding:0;overflow:hidden;background:var(--dark);color:#fff;min-height:100vh;min-height:100svh}
.page-hero{min-height:78vh}

/* Герой — «комірка панелі» поверх сторінки: скошені кути, відступ від країв, тінь.
   Розділ нижче заходить під нього й виїжджає з-під низу під час прокрутки. */
:root{--cut:34px;--hero-gap:14px}
.hero-shell{position:relative;z-index:3;padding:calc(var(--hdr-h) + var(--hero-gap)) var(--hero-gap) 0;isolation:isolate}
/* тінь героя — окремий нерухомий шар тієї ж скошеної форми (раніше filter:drop-shadow на всьому блоці: браузер
   перемальовував тінь у кожному кадрі анімації слайдів — на телефоні ~17 кадрів/с замість ~55, 06.10) */
.hero-shell::before{content:"";position:absolute;z-index:-1;left:var(--hero-gap);right:var(--hero-gap);top:calc(var(--hdr-h) + var(--hero-gap));bottom:0;
  margin:0 calc(var(--cut) * .6);border-radius:calc(var(--cut) * .8);
  background:rgba(15,21,18,.34);transform:translate3d(0,20px,0);filter:blur(22px);will-change:transform;pointer-events:none}
.hero-shell .hero{min-height:calc(100vh - var(--hdr-h) - var(--hero-gap) * 2);min-height:calc(100svh - var(--hdr-h) - var(--hero-gap) * 2);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.hero-shell .slide{padding-top:0}
.hero-shell .hero{transform:translateZ(0)}
/* наступний розділ починається під героєм */
.hero-shell + .under{position:relative;z-index:1;margin-top:-90px;padding-top:calc(90px + 96px)}
.under>.wrap{will-change:transform}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* HERO */
.slide{position:absolute;inset:0;display:flex;align-items:center;padding:var(--hdr-h) max(72px,calc((100% - 1180px)/2)) 0;
  background-size:cover;background-position:center;transform:translateX(100%);transition:transform .95s var(--ease);will-change:transform;visibility:hidden}
.slide.is-active,.slide.is-out{visibility:visible}
.slide.is-active{transform:none}
.slide.is-out{transform:translateX(-100%)}
.slide.no-anim{transition:none}
.slide::before{content:"";position:absolute;inset:0;z-index:0}
/* Фон слайдів (Pastel 02.10): не чорний, а глибокий зелений з видимими «комірками» фотомодуля (скошені кути + шини).
   Товар — окремий вирізаний шар (img/slide-*-cut.webp) поверх фону, з тінню. */
:root{--cells:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2288%22 height=%2288%22 viewBox=%220 0 88 88%22%3E%3Cpath d=%22M16 3H72L85 16V72L72 85H16L3 72V16Z%22 fill=%22rgba(255,255,255,0.045)%22 stroke=%22rgba(255,255,255,0.20)%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M25 3V85M44 3V85M63 3V85%22 stroke=%22rgba(255,255,255,0.11)%22 stroke-width=%221%22/%3E%3C/svg%3E")}
/* Фон слайдів — фото комірок панелі від Віктора (07.10; до того — намальований img/cells-photo.webp); ліворуч під текстом — темніший синій перехід, щоб білий текст читався */
.slide--cells{background:#1A247A url(img/panel-photo.webp?v=1) center/cover no-repeat}   /* справжнє фото комірок панелі (Віктор 07.10) */
.slide--cells::before{background:linear-gradient(90deg,rgba(9,13,58,.86) 0%,rgba(9,13,58,.62) 38%,rgba(9,13,58,.18) 64%,transparent 82%)}
@media (max-width:999px){.slide--cells::before{background:linear-gradient(180deg,rgba(9,13,58,.78) 0%,rgba(9,13,58,.66) 60%,rgba(9,13,58,.5) 100%)}}
.slide__cut{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(4,24,14,.45)) drop-shadow(0 6px 10px rgba(4,24,14,.3))}
.slide[data-bg="s1"] .slide__cut{right:max(4%,calc((100% - 1500px)/2));bottom:7%;height:82%;width:auto}
.slide[data-bg="s2"] .slide__cut{right:max(5%,calc((100% - 1500px)/2));top:50%;transform:translateY(-50%);height:76%;width:auto;aspect-ratio:3/4;object-fit:cover;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.slide[data-bg="s4"] .slide__cut{right:0;top:0;height:112%;width:auto}
@media (max-width:999px){
  .slide__cut{opacity:.35}
  .slide[data-bg="s1"] .slide__cut{height:46%;right:-6%;bottom:6%}
  .slide[data-bg="s2"] .slide__cut,  .slide[data-bg="s4"] .slide__cut{height:70%;top:auto;bottom:0}
}
.slide[data-bg="s3"]{background:#0b0f0d url(img/slide-chain.jpg) center/cover no-repeat}
.slide__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.slide[data-bg="s3"]::before{z-index:1;background:linear-gradient(90deg,rgba(5,7,6,.72) 0%,rgba(5,7,6,.42) 50%,rgba(5,7,6,.15) 80%)}
.slide[data-bg="s3"] .slide__body{z-index:2;max-width:780px}
.slide[data-bg="s3"] h2{font-size:clamp(32px,3.7vw,54px)}
@media (max-width:999px){.slide[data-bg="s3"]::before{background:linear-gradient(180deg,rgba(5,7,6,.55) 0%,rgba(5,7,6,.62) 60%,rgba(5,7,6,.72) 100%)}}
.slide__body{position:relative;z-index:1;max-width:680px}
.slide__body>*{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease}
.slide.is-active .slide__body>*{opacity:1;transform:none;transition:opacity .6s ease,transform .7s ease}
.slide.is-active .slide__body>*:nth-child(1){transition-delay:.55s}
.slide.is-active .slide__body>*:nth-child(2){transition-delay:.68s}
.slide.is-active .slide__body>*:nth-child(3){transition-delay:.8s}
.slide.is-active .slide__body>*:nth-child(4){transition-delay:.92s}
.slide.is-active .slide__body>*:nth-child(5){transition-delay:1.02s}
.slide.is-active .slide__body>*:nth-child(6){transition-delay:1.1s}
.eyebrow{font:600 .8rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.eyebrow--green{color:var(--green-hi)}
/* 25.10.2026: мітки на Fixel Text ширші за Roboto Condensed — на телефоні тісніше, щоб плашка не переносилась */
@media (max-width:520px){.eyebrow{font-size:.72rem;letter-spacing:.1em}.eyebrow--pill{letter-spacing:.08em}}
.slide h1,.page-hero h1{font-size:clamp(2rem,4.5vw,3.9rem);text-transform:uppercase;letter-spacing:.005em}
.slide h2{font-size:clamp(1.9rem,3.8vw,3.3rem)}
.lead{margin-top:20px;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--on-dark);max-width:34em}
/* Рядок фактів під заголовком: без крапок; «партнери по всій Україні» — окремим рядком по центру під ними */
.meta{margin-top:20px;display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;font-weight:500;color:var(--on-dark-2)}
/* 10.10.2026: було по центру — на телефоні «TOPCon / Скло-скло» стояли посеред рядка, а довгий пункт під ними зліва */
.meta__row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 26px}
.meta__sub{color:var(--accent);font-weight:600;letter-spacing:.02em}
.actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
/* Слайд «Технологія»: три короткі факти з даташитів */
.tech{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;max-width:34em}
.tech li{display:grid;gap:3px;padding-left:22px;position:relative}
.tech li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--accent);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.tech b{font:700 1.15rem/1.2 var(--f-display);color:#fff;letter-spacing:.01em}
.tech span{color:var(--on-dark-2);font-size:.98rem}
.note{margin-top:18px;font-size:.9rem;color:var(--on-dark-2);max-width:32em}

/* Слайд 1: ширший блок під довший заголовок */
.slide[data-bg="s1"] .slide__body{max-width:780px}
.slide[data-bg="s1"] h1{font-size:clamp(32px,3.7vw,54px)}
.slide.is-active .slide__body>*:nth-child(7){transition-delay:1.18s}

/* «Вигідно вам» — плашка над обіцянкою бренду */
.eyebrow--pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 8px;background:var(--accent);color:var(--ink-green);letter-spacing:.14em;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* Слайд «товар у наявності»: три короткі факти з іконками */
.facts-row{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.facts-row li{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  color:#fff;font:600 1rem/1 var(--f-display);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.facts-row i{font-size:1.35rem;color:var(--accent)}

/* «Стати партнером»: кнопка-комірка з темного скла, по контуру безперервно біжить енергія (як «заряд»).
   Жовтий — лише іскра в потоці, без великих жовтих заливок. */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.cta-partner{--c:14px;--spin:0deg;position:relative;display:inline-flex;align-items:stretch;height:66px;text-decoration:none;color:#fff;
  background:conic-gradient(from var(--spin),rgba(255,255,255,.16) 0deg,rgba(255,255,255,.16) 190deg,rgba(248,180,36,.12) 230deg,rgba(248,180,36,.55) 290deg,rgba(255,255,255,.5) 325deg,rgba(94,230,180,.35) 345deg,rgba(255,255,255,.16) 360deg);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  animation:cta-spin 6s linear infinite;transition:transform .2s}
.cta-partner::before{content:"";position:absolute;inset:1.5px;background:linear-gradient(135deg,rgba(24,40,33,.95),rgba(8,12,10,.95));transition:background .3s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.cta-partner>*{position:relative;z-index:1}
.cta-partner__txt{display:flex;align-items:center;padding:0 26px 0 30px;font:800 1.02rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.05em;transition:color .3s}
.cta-partner__go{display:grid;place-items:center;width:62px;margin:6px 6px 6px 0;background:#fff;color:var(--green);font-size:1.45rem;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);transition:background .3s,color .3s}
.cta-partner__go i{transition:transform .3s}
.cta-partner:hover::before,.cta-partner:focus-visible::before{background:#fff}
.cta-partner:hover .cta-partner__txt,.cta-partner:focus-visible .cta-partner__txt{color:var(--green)}
.cta-partner:hover .cta-partner__go,.cta-partner:focus-visible .cta-partner__go{background:var(--green);color:#fff}
@media (hover:hover) and (pointer:fine){.cta-partner:hover .cta-partner__go i{transform:translateX(4px)}}
.cta-partner:active{transform:scale(.98)}
.cta-partner:focus-visible{outline:none}
@keyframes cta-spin{to{--spin:360deg}}

/* «Шукаєте станцію?» — вибір двома комірками-іконками */
.pick{margin-top:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick__q{font:500 .92rem/1.25 var(--f-body);color:var(--on-dark-2);margin-right:10px}
.pick__i{--c:10px;position:relative;width:92px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.28);transition:background .25s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.pick__i::before{content:"";position:absolute;inset:1px;background:rgba(10,15,13,.82);transition:background .25s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.pick__i>*{position:relative;z-index:1}
.pick__i i{font-size:1.6rem;transition:transform .25s}
.pick__i span{font:600 .82rem/1 var(--f-display);letter-spacing:.02em}
.pick__i:hover,.pick__i:focus-visible{background:#fff;outline:none}
@media (hover:hover) and (pointer:fine){.pick__i:hover i{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.cta-partner{animation:none}}

.pager{position:absolute;z-index:5;left:max(72px,calc((100% - 1180px)/2));bottom:34px;display:flex;gap:10px}
.pager button{position:relative;overflow:hidden;width:54px;height:5px;border:0;padding:0;border-radius:3px;background:rgba(255,255,255,.28);cursor:pointer}
.pager button i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.pager button[aria-selected="true"] i{transform:scaleX(var(--p,0))}

/* Статичний герой внутрішніх сторінок */
.page-hero{display:flex;align-items:center;background-size:cover;background-position:center}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,21,18,.95) 0%,rgba(15,21,18,.75) 55%,rgba(15,21,18,.35) 100%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .lead{max-width:36em}

/* Заголовки секцій */
.sec-head{max-width:760px;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--ink)}
.sec-head .eyebrow{margin-bottom:14px}
.sub{margin-top:12px;color:var(--ink-2);font-size:1.1rem}
.on-dark .sec-head h2{color:#fff}
.on-dark .sub{color:var(--on-dark-2)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font:600 1rem/1 var(--f-display);color:var(--green);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px}
.on-dark .more{color:var(--accent)}

/* Розділи за кольорами живого сайту */
.bg-light{background:var(--bg)}
.bg-gray{background:var(--gray);color:var(--ink)}
.bg-dark{background:var(--dark);color:var(--on-dark)}

/* Факти */
.facts h2{font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:18em;margin-bottom:44px}
.facts__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.facts__grid li{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.facts__grid i{font-size:2rem;color:var(--green-hi);margin-bottom:8px}
.facts__grid b{font:700 clamp(1.7rem,2.8vw,2.4rem)/1.05 var(--f-display);color:var(--ink)}
.facts__grid span{color:var(--ink-2);font-size:.98rem}

/* Картки товарів */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card__img{height:170px;background-size:cover;background-position:center}
.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.tag{font:600 .74rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--green-hi)}
.card h3{font-size:1.5rem}
.card h3 span{color:var(--ink-2);font-weight:500;font-size:1.05rem;margin-left:6px}
.card p{font-size:.97rem;color:var(--ink-2)}
.spec{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;font-size:.92rem;color:var(--ink-2)}
.spec li{padding-left:22px;position:relative}
.spec li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent)}
.card--soon{border-style:dashed;background:transparent;justify-content:center}

/* Переваги (співпраця та ін.) — на темному розділі */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.benefits article{background:var(--dark-card);border:1px solid var(--dark-line);border-radius:16px;padding:24px 20px}
.benefits i{font-size:2rem;color:var(--accent)}
.benefits h3{font-size:1.25rem;margin:12px 0 8px;color:#fff}
.benefits p{color:var(--on-dark-2);font-size:.96rem}
.benefits em{font:600 .66rem/1 var(--f-display);font-style:normal;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:var(--ink-green);padding:3px 7px;border-radius:5px;vertical-align:middle;margin-left:6px}
.benefits .is-soon{border-style:dashed;background:transparent}
.bg-gray .benefits article,.bg-light .benefits article{background:var(--card);border-color:var(--line)}
.bg-gray .benefits i,.bg-light .benefits i{color:var(--green-hi)}
.bg-gray .benefits h3,.bg-light .benefits h3{color:var(--ink)}
.bg-gray .benefits p,.bg-light .benefits p{color:var(--ink-2)}

/* Напрями */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.aud article{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:36px 34px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.aud article i{font-size:2.4rem;color:var(--green-hi)}
.aud h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.aud p{color:var(--ink-2)}
.aud .btn{margin-top:auto}

/* Ланцюг «від заводу» (сторінка «Про нас») */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps li{position:relative;padding:0 26px 0 0}
.steps li::after{content:"";position:absolute;top:31px;left:74px;right:14px;height:2px;background:linear-gradient(90deg,var(--accent),rgba(248,180,36,.12))}
.steps li:last-child::after{display:none}
.steps i{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--dark-card);border:2px solid var(--accent);font-size:1.7rem;color:var(--accent);position:relative;z-index:1}
.steps h3{margin:18px 0 8px;font-size:1.3rem;color:#fff}
.steps p{color:var(--on-dark-2);font-size:.98rem}
.closing{font:600 clamp(1.3rem,2.4vw,1.9rem)/1.2 var(--f-display);color:var(--accent)}

/* Технологія: два стовпці, текст + факти */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.split__media{border-radius:18px;min-height:340px;background:var(--gray) center/cover;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);text-align:center;padding:20px}
.split__media i{font-size:3rem;color:var(--green-hi);display:block;margin-bottom:10px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:10px;color:var(--ink-2)}
.ticks i{color:var(--green-hi);font-size:1.4rem}
.ticks b{color:var(--ink);display:block;font-family:var(--f-display);font-size:1.08rem}

/* Контакти */
.contact__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.contact h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.contact__lines{margin-top:26px;display:grid;gap:14px}
.contact__lines a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:1.2rem;font-weight:500}
.contact__lines i{color:var(--green);font-size:1.6rem}
.form{display:grid;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.form label{display:grid;gap:6px;font-size:.9rem;color:var(--ink-2)}
.form input{font:inherit;padding:.85em 1em;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.form input:focus{outline:2px solid var(--green);border-color:transparent}
.legal{margin-top:48px;text-align:center;font-size:.85rem;color:var(--ink-2)}

/* Шрифт заголовків — як на головному слайді живого сайту: Montserrat 800, великі літери,
   clamp(34px, 4.2vw, 60px), міжрядковий 1.04, літери стиснуті на 0.01em. У блоках нижче — той самий, але менший. */
.slide h1,.slide h2,.page-hero h1{font:800 clamp(34px,4.2vw,60px)/1.16 var(--f-head);letter-spacing:-.01em;text-transform:uppercase}
.sec-head h2,.coop__head h2,.facts h2,.contact h2,.aud h2,.split h2{font-family:var(--f-head);font-weight:800;font-size:clamp(28px,3.2vw,46px);line-height:1.16;letter-spacing:-.01em;text-transform:uppercase}
.coop__head h2{font-size:clamp(30px,3.6vw,52px)}

/* «Топ продажів»: найпомітніший заголовок блоків — більший, «продажів» на жовтій плашці-маркері */
.best .sec-head h2.top-title{font-size:clamp(32px,3.8vw,54px)}
/* Сторінка «Продукція»: той самий блок, заголовок — h1 */
.pr-top{padding-top:calc(var(--hdr-h) + 64px)}
.best .sec-head h1.top-title{font:800 clamp(34px,4.2vw,60px)/1.16 var(--f-head);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.top-title mark{background:none;color:inherit;position:relative;z-index:0;padding:0 .12em;white-space:nowrap}
.top-title mark::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.06em;height:.42em;background:var(--accent);
  clip-path:polygon(.18em 0,100% 0,calc(100% - .18em) 100%,0 100%)}

/* Бестселери: рендер + ТТХ */
.best{justify-content:flex-start}
.best__head{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.best__head>div{max-width:640px}
.best__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
@media (hover:hover) and (pointer:fine){.prod:hover{box-shadow:0 12px 32px rgba(15,67,54,.10);transform:translateY(-3px)}}
.prod__img{background:var(--gray);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (hover:hover) and (pointer:fine){.prod:hover .prod__img img{transform:scale(1.04)}}
.prod__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod h3{font-size:1.45rem}
.prod h3 span{font-weight:500;color:var(--ink-2);font-size:1rem;margin-left:4px}
.prod__pw{font:700 1.9rem/1 var(--f-display);color:var(--green);margin:4px 0 8px}
.ttx{margin:0 0 14px;display:grid;gap:0;font-size:.9rem}
.ttx div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.ttx dt{color:var(--ink-2)}
.ttx dd{margin:0;text-align:right;font-weight:500;color:var(--ink)}
.ttx .is-tbd dd{color:var(--ink-2);font-weight:400;font-style:italic}
.prod__cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:600 1rem/1 var(--f-display);color:var(--green);text-decoration:none;align-self:flex-start;border-bottom:2px solid transparent;padding-bottom:3px}
.prod__cta:hover{border-color:var(--green)}
.best__note{margin-top:22px;padding-bottom:30px;color:var(--ink-2);font-size:.95rem;text-align:center;border-bottom:1px solid var(--ink-2)}

/* Форма «комірки панелі»: скошені кути, як у героя */
:root{--cut-card:24px}

/* Продукція ромбом: 630B зверху, 460 зліва, 610 справа, АКБ знизу.
   Бічні картки займають обидва ряди й стоять по центру — виходить ромб. Тінь — фільтром на сітці, щоб ішла по скошеній формі. */
/* Квадратні комірки з тонкою рамкою, що йде й по скосах (референс: плитки брендів).
   Рамка = фон самої картки; світла «начинка» — псевдоелемент з відступом 1 px. Наведення: рамка жовта. */
.best>.wrap{width:min(1300px,100% - 48px)}
.best__grid--diamond{grid-template-columns:repeat(3,minmax(0,400px));grid-template-rows:auto auto auto;justify-content:center;gap:10px}
.best__grid--diamond .prod{--c:var(--cut-card);position:relative;aspect-ratio:1/1;border:0;border-radius:0;overflow:visible;
  background:var(--line-2);text-decoration:none;color:var(--ink);padding:0 0 18px;display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:0;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  transition:background .2s}
.best__grid--diamond .prod::before{content:"";position:absolute;inset:1px;z-index:0;background:var(--card);transition:inset .2s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.best__grid--diamond .prod>*{position:relative;z-index:1}
.best__grid--diamond .prod:focus-visible{background:var(--accent);transform:none;box-shadow:none;outline:none}@media (hover:hover) and (pointer:fine){.best__grid--diamond .prod:hover{background:var(--accent);transform:none;box-shadow:none;outline:none}}
.best__grid--diamond .prod:hover::before,.best__grid--diamond .prod:focus-visible::before{inset:2px}
/* Фото на всю верхню частину комірки: без деформації (cover), верхні кути зрізані тим самим скосом */
.best__grid--diamond .prod__img{flex:none;height:50%;margin:1px 1px 0;aspect-ratio:auto;background:var(--gray);border-radius:0;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%,0 var(--c))}
.best__grid--diamond .prod__img img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (hover:hover) and (pointer:fine){.best__grid--diamond .prod:hover .prod__img img{transform:scale(1.04)}}
.best__grid--diamond .prod__title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 26px 8px}
.best__grid--diamond .prod h3{font-size:1.4rem}
.best__grid--diamond .prod__pw{font-size:1.6rem;margin:0;white-space:nowrap}
.best__grid--diamond .ttx{margin:0 26px 10px;font-size:.88rem}
.best__grid--diamond .ttx div{padding:5px 0}
.best__grid--diamond .prod__cta{margin:auto 26px 0;align-self:flex-start;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;color:var(--ink)}
.best__grid--diamond .prod__cta i{color:var(--green)}
.best__grid--diamond .prod:hover .prod__cta{border-color:var(--accent)}
.best__grid--diamond .prod:hover .prod__cta i{color:var(--ink)}

/* Комірка з рамкою по всьому контуру (загальна): фон = рамка, начинка = псевдоелемент */
.ocell{--c:16px;--fill:var(--card);position:relative;background:var(--line-2);border:0;color:var(--ink);text-decoration:none;cursor:pointer;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));transition:background .2s}
.ocell::before{content:"";position:absolute;inset:1px;z-index:0;background:var(--fill);transition:inset .2s,background .2s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.ocell>*{position:relative;z-index:1}
.ocell:hover,.ocell:focus-visible,.ocell[aria-expanded="true"]{background:var(--accent);outline:none}
.ocell:hover::before,.ocell:focus-visible::before,.ocell[aria-expanded="true"]::before{inset:2px}

/* Кнопка «Написати нам у месенджер»: під нею випадає ромб із трьох комірок (дві поруч, третя нижче по центру).
   Під випадний блок резервуємо місце (--drop), тож текст нижче не зсувається. */
.msg{--cell:112px;--gap:10px;margin-top:44px;display:flex;flex-direction:column;align-items:center}
/* Випадний ромб у потоці: плавно розсуває місце й штовхає текст нижче */
.msg__drop{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.3,.8,.3,1)}
.msg.is-open .msg__drop{grid-template-rows:1fr}
.msg__drop>.msg__list{min-height:0;overflow:hidden}
.msg__btn{display:inline-flex;align-items:center;gap:12px;padding:20px 34px;font:700 1.15rem/1 var(--f-display);letter-spacing:.01em}
.msg__btn>i{font-size:1.5rem;color:var(--green)}
.msg__caret{transition:transform .35s ease}
.msg__btn[aria-expanded="true"] .msg__caret{transform:rotate(180deg)}
.msg__list{display:grid;grid-template-columns:repeat(2,var(--cell));gap:var(--gap);padding:0 4px;pointer-events:none;transition:padding .45s cubic-bezier(.3,.8,.3,1)}
.msg.is-open .msg__list{padding:16px 4px 6px}
.msg__item{--c:14px;width:var(--cell);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font:600 .98rem/1 var(--f-display);opacity:0;transform:translateY(-18px) scale(.94);
  transition:opacity .28s ease,transform .38s cubic-bezier(.2,.8,.25,1),background .2s}
.msg__item:nth-child(3){grid-column:1 / span 2;justify-self:center}
.msg.is-open .msg__list{pointer-events:auto}
.msg.is-open .msg__item{opacity:1;transform:none}
.msg.is-open .msg__item:nth-child(1){transition-delay:0s,0s,0s}
.msg.is-open .msg__item:nth-child(2){transition-delay:.07s,.07s,0s}
.msg.is-open .msg__item:nth-child(3){transition-delay:.14s,.14s,0s}
/* Telegram — головний месенджер: нижня комірка ромба, трохи більша; жовта рамка — лише при наведенні, як в інших */
.msg__item--main{--c:16px;width:calc(var(--cell) * 1.12)}
.msg__item--main .msg__label{font-weight:700}
.msg__ico{width:48px;height:48px;border-radius:50%;background:var(--brand-c);display:grid;place-items:center;transition:transform .2s}
.msg__ico img{width:24px;height:24px}
.msg__label{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.msg__item:hover .msg__ico{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.msg__item{transition:none}}
/* Центр ромба: комірка з нашим лого (зелена, рамка по скосах) */
.best__hub{--c:26px;justify-self:center;align-self:center;width:210px;aspect-ratio:1/1;margin:18px 0;position:relative;display:grid;place-items:center;
  background:var(--green-hi);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.best__hub::before{content:"";position:absolute;inset:1px;background:linear-gradient(150deg,var(--green) 0%,#0A2E25 100%);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.best__hub img{position:relative;width:62%;height:auto}
.prod--t{grid-column:2;grid-row:1}
.best__hub{grid-column:2;grid-row:2}
.prod--b{grid-column:2;grid-row:3}
.prod--l{grid-column:1;grid-row:1 / span 3;align-self:center}
.prod--r{grid-column:3;grid-row:1 / span 3;align-self:center}

/* Портали: високе фото з заокругленням, заголовок і підпис під ним (референс SunPower) */
.portals{padding-top:40px}
.portals>.wrap{width:min(1534px,100% - 48px)}   /* фото карток +30% відносно звичайної ширини 1180 */
.portals__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.portal__img--prod{background-position:72% center!important}
.portal{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.portal__img{--c:var(--cut);aspect-ratio:4/5;overflow:hidden;background:var(--gray) center/cover no-repeat;position:relative;transition:transform .5s ease,filter .3s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.portal{filter:drop-shadow(0 12px 24px rgba(15,21,18,.0));transition:filter .3s}
.portal:hover{filter:drop-shadow(0 16px 26px rgba(15,21,18,.16))}
.portal__img[data-ph]:not([style])::after{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ink-2);font:500 .95rem/1.3 var(--f-display);text-align:center;padding:20px;
  background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(27,36,48,.04) 14px 28px)}
@media (hover:hover) and (pointer:fine){.portal:hover .portal__img{transform:translateY(-4px)}}
.portal h3{margin-top:26px;font:500 clamp(1.4rem,2vw,1.75rem)/1.2 var(--f-display);display:flex;align-items:center;gap:10px}
.portal h3 i{font-size:.9em;color:var(--green);transition:transform .25s}
@media (hover:hover) and (pointer:fine){.portal:hover h3 i{transform:translateX(5px)}}
.portal p{margin-top:14px;color:var(--ink-2);font-size:1rem;max-width:30em}

/* Сітка на тлі — плитка SVG: комірка панелі зі скошеними кутами й двома шинами. */
/* Співпраця: окремий колір — глибокий синьо-зелений з нефритовим відливом. Новий для сайту, але гармонує: жовтий на ньому найсильніший (майже протилежні кольори),
   із зеленим і темним сусідить спокійно. Тло — ледь помітна сітка, як лінії між комірками панелі. */
.coop{--night:#0C2F36;--night-2:#0E4442;--cell:#123F40;--cell-line:rgba(170,230,210,.20);
  background:
    radial-gradient(ellipse at 88% 8%,rgba(248,180,36,.16),transparent 45%),
    radial-gradient(ellipse at 5% 100%,rgba(46,160,130,.30),transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2272%22 height=%2272%22 viewBox=%220 0 72 72%22%3E%3Cpath d=%22M14 3H58L69 14V58L58 69H14L3 58V14Z%22 fill=%22rgba(255,255,255,0.035)%22 stroke=%22rgba(170,230,210,0.22)%22 stroke-width=%221%22/%3E%3Cpath d=%22M27 3V69M45 3V69%22 stroke=%22rgba(170,230,210,0.10)%22 stroke-width=%221%22/%3E%3C/svg%3E") 0 0/72px 72px repeat,
    linear-gradient(160deg,var(--night) 0%,var(--night-2) 100%);
  color:#fff;padding:120px 0 128px}
.coop>.wrap{width:min(1480px,100% - 48px)}
.coop__head{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.coop__head h2{color:#fff}
.coop__head h2 span{color:var(--accent)}
.coop__head p{color:#CFE4DC;font-size:1.15rem;font-weight:500;max-width:30em}
.coop__lead{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:28px;color:#fff}
/* Комірки: квадрати зі скосами, рамка йде по всьому контуру (фон = рамка, начинка = псевдоелемент) */
.coop__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.coop__grid article{--c:30px;position:relative;aspect-ratio:1/1;background:var(--cell-line);padding:34px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));transition:background .2s}
.coop__grid article::before{content:"";position:absolute;inset:1px;z-index:0;background:var(--cell);transition:inset .2s,background .2s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.coop__grid article>*{position:relative;z-index:1}
.coop__grid article:hover{background:var(--accent)}
.coop__grid article:hover::before{inset:2px;background:#164A49}
.coop__grid i{font-size:3.4rem;color:var(--accent)}
.coop__grid p{font:600 1.22rem/1.35 var(--f-display);color:#fff;max-width:13em}
.coop__grid em{display:inline-block;font:700 .7rem/1 var(--f-display);font-style:normal;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:var(--ink-green);padding:4px 8px;border-radius:5px;vertical-align:middle;margin-left:6px}
.coop__grid .is-soon{background:rgba(248,180,36,.45)}
.coop__grid .is-soon::before{background:rgba(18,63,64,.96)}
.coop__actions{margin-top:48px;display:flex;flex-wrap:wrap;gap:14px}
.coop .btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.coop .btn--light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Футер: як на живому сайті — світло-сірий */
.ftr{background:var(--gray);color:var(--ink);padding:64px 0 24px;border-top:1px solid var(--line)}
.ftr__grid{display:grid;grid-template-columns:1.3fr .8fr 1fr 1.1fr;gap:40px}
.ftr__brand img{height:38px;width:auto}
.ftr__tag{margin-top:6px;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.ftr__about{margin-top:14px;color:var(--ink-2);font-size:.95rem;max-width:26em}
.ftr__social{display:flex;gap:10px;margin-top:18px}
.ftr__social a{width:40px;height:40px;border-radius:50%;background:var(--green);display:grid;place-items:center;transition:background .2s,transform .15s}
@media (hover:hover) and (pointer:fine){.ftr__social a:hover{background:var(--green-hi);transform:translateY(-2px)}}
.ftr__social img{width:20px;height:20px}
.ftr h3{font-size:1.05rem;margin-bottom:14px;color:var(--ink)}
.ftr__col{display:flex;flex-direction:column;gap:10px}
.ftr__col a,.ftr__col span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none;font-size:.95rem}
.ftr__col a:hover{color:var(--green)}
.ftr__col i{color:var(--green);font-size:1.15rem}
.ftr__form{display:grid;gap:10px;align-content:start}
.ftr__form label{display:grid;gap:4px;font-size:.85rem;color:var(--ink-2)}
.ftr__form input{font:inherit;padding:.7em .9em;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.ftr__form input:focus{outline:2px solid var(--green);border-color:transparent}
.ftr__form .btn{justify-content:center;margin-top:4px}
.ftr__bottom{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:.85rem;color:var(--ink-2);flex-wrap:wrap}
a[data-soon]{cursor:default}

/* Кут, по якому біжить «заряд» рамки (форма заявки й плитка соцмереж) */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}

/* Футер: соцмережі й месенджери — комірки; наведення: рамка «заряджається» — жовтий обходить комірку по колу. */
.ftr{position:relative;overflow:hidden}
.ftr__grid{grid-template-columns:1.25fr .7fr 1fr 1fr;align-items:start}
/* Дерево — у самому лівому нижньому куті сторінки; вміст футера праворуч від нього */
/* Соцмережі під лого: сітка 4×2 з прилеглих комірок */
.ftr>.wrap{width:min(1480px,100% - 48px)}
.soc-grid{display:grid;grid-template-columns:repeat(4,68px);grid-auto-rows:68px;gap:4px;margin-top:22px}
.soc{--c:14px;--sweep:0deg;position:relative;width:68px;height:68px;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;color:var(--ink-2);
  background:conic-gradient(from -90deg,var(--accent) var(--sweep),var(--line-2) var(--sweep));
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  transition:--sweep .7s cubic-bezier(.6,.05,.3,1),color .25s}
.soc::before{content:"";position:absolute;inset:1.5px;background:var(--card);transition:background .25s;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.soc>*{position:relative;z-index:1}
.soc:hover,.soc:focus-visible{--sweep:360deg;color:var(--ink);outline:none}
.soc:hover::before,.soc:focus-visible::before{background:#fff}
.soc__ico{width:22px;height:22px;background:var(--green);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:transform .25s}
.soc>i{font-size:22px;color:var(--green);transition:transform .25s}
@media (hover:hover) and (pointer:fine){.soc:hover .soc__ico,.soc:hover>i{transform:scale(1.1)}}
.soc__label{font:600 .6rem/1 var(--f-display);letter-spacing:.01em}

/* Форма заявки з кнопки в куті: комірка, що виростає з кнопки; рамка «заряджається» по контуру, поля проявляються по черзі */
.cta__list button{display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);font:500 1rem/1 var(--f-display);padding:15px 18px;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer;text-align:left}
.cta__list button:hover{border-color:var(--green)}
.cta__list button i{color:var(--green);font-size:1.4rem}
.lead-form{--c:24px;--sweep:0deg;position:absolute;right:0;bottom:calc(100% + 14px);width:340px;height:372px;
  background:conic-gradient(from -90deg,var(--accent) var(--sweep),var(--line-2) var(--sweep));
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  transform-origin:100% 100%;transform:translateY(16px) scale(.55);opacity:0;visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.1),opacity .3s ease,visibility 0s linear .45s,--sweep 0s linear .45s}
.lead-form::before{content:"";position:absolute;inset:2px;background:#fff;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.lead-form.is-open{--sweep:360deg;transform:none;opacity:1;visibility:visible;transition:transform .5s cubic-bezier(.2,.9,.25,1.1),opacity .3s ease,visibility 0s,--sweep 1s cubic-bezier(.6,.05,.3,1) .2s}
.lead__x{position:absolute;top:14px;right:18px;z-index:2;width:34px;height:34px;border:0;background:none;color:var(--ink-2);font-size:1.3rem;cursor:pointer;border-radius:50%}
.lead__x:hover{background:var(--soft);color:var(--ink)}
.lead__body{position:relative;height:100%;padding:30px 30px 28px;display:flex;flex-direction:column;gap:12px}
.lead__body>*{opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .35s ease}
.lead-form.is-open .lead__body>*{opacity:1;transform:none}
.lead-form.is-open .lead__body>*:nth-child(1){transition-delay:.18s}
.lead-form.is-open .lead__body>*:nth-child(2){transition-delay:.24s}
.lead-form.is-open .lead__body>*:nth-child(3){transition-delay:.3s}
.lead-form.is-open .lead__body>*:nth-child(4){transition-delay:.36s}
.lead-form.is-open .lead__body>*:nth-child(5){transition-delay:.42s}
.lead__kicker{font:600 .75rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--green-hi)}
.lead__title{font:800 1.45rem/1.1 var(--f-head);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
.lead__f{display:grid;gap:5px;font-size:.85rem;color:var(--ink-2)}
.lead__f input{font:inherit;font-size:1rem;padding:.8em .95em;border:1px solid var(--line-2);border-radius:0;background:var(--bg);color:var(--ink)}
.lead__f input:focus{outline:none;border-color:var(--green);background:#fff}
.lead__f input[aria-invalid="true"]{border-color:#C0392B;background:#FDECEA}
.lead__send{margin-top:auto;justify-content:center;padding:1em;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);border-radius:0}
.lead__done{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:30px}
.lead__done i{font-size:3.4rem;color:var(--green-hi)}
.lead__done p{font:700 1.15rem/1.3 var(--f-display);color:var(--ink)}
.lead__done small{color:var(--ink-2)}
.lead-form.is-done .lead__body{display:none}
.lead-form.is-done .lead__done{display:flex;animation:lead-done .45s ease both}
@keyframes lead-done{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lead-form,.lead__body>*,.soc{transition:none}}

/* Форма «Передзвонимо» у футері: комірка з рамкою, що «заряджається», і паперовий літачок.
   Навели або почали заповнювати → прилітає літачок. Надіслали → відлітає, форма згортається, з'являється подяка. */
.ff{--c:18px;position:relative;display:grid;padding:24px 24px 26px;min-height:300px}
.ff::before,.ff::after{content:"";position:absolute;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.ff::before{--sweep:0deg;inset:0;background:conic-gradient(from -90deg,var(--accent) var(--sweep),var(--line-2) var(--sweep));transition:--sweep .9s cubic-bezier(.6,.05,.3,1)}
.ff::after{inset:1.5px;background:#fff}
.ff.is-armed::before,.ff.is-sent::before{--sweep:360deg}
.ff__body,.ff__thanks{grid-area:1 / 1;position:relative;z-index:1}
.ff__body{display:flex;flex-direction:column;gap:10px;transform-origin:50% 0;transition:opacity .35s ease,transform .45s cubic-bezier(.6,.05,.3,1)}
.ff__body h3{font:800 1.15rem/1.1 var(--f-head);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:2px}
.ff__f{display:grid;gap:4px;font-size:.85rem;color:var(--ink-2)}
.ff__f input{font:inherit;font-size:1rem;padding:.72em .9em;border:1px solid var(--line-2);border-radius:0;background:var(--bg);color:var(--ink)}
.ff__f input:focus{outline:none;border-color:var(--green);background:#fff}
.ff__f input[aria-invalid="true"]{border-color:#C0392B;background:#FDECEA}
.ff__send{margin-top:6px;justify-content:center;border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
/* літачок: летить по траєкторії (offset-path задає скрипт під розмір форми), ніс — за напрямком польоту; колір один весь час */
.ff__plane{position:absolute;z-index:3;top:0;left:0;font-size:30px;line-height:1;color:var(--accent);pointer-events:none;opacity:0;
  offset-anchor:50% 50%;offset-rotate:auto 45deg;offset-distance:0%;will-change:offset-distance,opacity}
.ff__plane i{display:block;filter:drop-shadow(0 4px 5px rgba(15,21,18,.28))}
.ff.is-resting .ff__plane i{animation:plane-bob 2.6s ease-in-out infinite}
@keyframes plane-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* після надсилання: форма згортається, з'являється подяка */
.ff__thanks{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s ease .25s,transform .45s ease .25s,visibility 0s linear .7s}
.ff__thanks i{font-size:3rem;color:var(--green-hi)}
.ff__thanks p{font:800 1.05rem/1.2 var(--f-head);text-transform:uppercase;color:var(--ink)}
.ff__thanks small{color:var(--ink-2);font-size:.88rem}
.ff__again{margin-top:6px;border:1px solid var(--line-2);background:transparent;color:var(--green);font:600 .85rem/1 var(--f-display);padding:.6em 1em;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ff__again:hover{border-color:var(--accent);background:#FFF8E6}
.ff.is-sent .ff__body{opacity:0;transform:scaleY(.2) translateY(-10px);pointer-events:none}
.ff.is-sent .ff__thanks{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .35s,transform .45s ease .35s,visibility 0s}
@media (prefers-reduced-motion:reduce){.ff__plane i{animation:none!important}.ff__body,.ff__thanks{transition:none}}

/* Кнопка в куті «вдаряється» у футер: не заходить на нього, стискається до іконки, пружно відскакує */
.cta__btn span{display:inline-block;max-width:230px;overflow:hidden;white-space:nowrap;transition:max-width .35s ease,opacity .2s ease}
.cta__btn{transition:background .2s,transform .15s,padding .35s ease,gap .35s ease}
.corner.is-docked .cta__btn,.corner.is-compact .cta__btn{padding:0 15px;gap:0}
.corner.is-docked .cta__btn span,.corner.is-compact .cta__btn span{max-width:0;opacity:0}
.corner.is-hit .cta__btn{animation:cta-hit .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes cta-hit{0%{transform:none}25%{transform:translateY(5px) scale(1.12,.78)}55%{transform:translateY(-4px) scale(.92,1.08)}100%{transform:none}}

/* Кут екрана: кнопка зв'язку + таймер */
/* «Нагору» — кругла кнопка ліворуч від «Зв'язатися з менеджером» (додає v2.js). Схована — «влита» в кнопку зв'язку:
   зсунута на неї й зменшена; з'являючись, витікає ліворуч, як крапля (фон і обідок малює шар .goo під кнопками). */
.totop{position:relative;z-index:1;flex:none;width:52px;height:52px;margin-right:10px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--green);font-size:1.4rem;
  transform:translateX(64px) scale(.55);pointer-events:none;
  transition:transform .75s cubic-bezier(.45,0,.2,1.25),background .2s,color .2s}
.totop i{opacity:0;transition:opacity .2s,transform .2s}
.totop.is-on{transform:none;pointer-events:auto}
.totop.is-on i{opacity:1;transition:opacity .3s .35s,transform .2s}
.totop:hover,.totop:focus-visible{background:var(--green);color:#fff;outline:none}
@media (hover:hover) and (pointer:fine){.totop:hover i{transform:translateY(-2px)}}
/* шар «рідини»: біла форма з зеленим обідком під обома кнопками */
.goo{position:absolute;z-index:0;width:440px;top:-30px;right:-20px;bottom:-30px;pointer-events:none;overflow:hidden;   /* прив'язка до правого краю: коли кнопка стискається, шар не зсувається */
  
  filter:url(#seGoo) drop-shadow(0 8px 16px rgba(0,0,0,.16))}
.goo i{position:absolute;left:0;top:0;display:block;border-radius:999px;background:#fff;will-change:transform}
.corner.has-goo .cta{position:relative;z-index:1}
.corner.has-goo #ctaBtn{background:transparent!important;box-shadow:none!important}
.corner.has-goo:has(#ctaBtn:hover) .goo__cta{background:#F0F8F3}
@media (prefers-reduced-motion:reduce){.totop{transition:none}.totop i{transition:none}}
.corner{position:fixed;right:calc(var(--hero-gap) + var(--cut) + 8px);bottom:calc(var(--hero-gap) + var(--cut) + 8px);z-index:60;display:flex;align-items:flex-end}
/* «рейка» (додає v2.js): нульової висоти, липне до низу екрана, поки під нею є вміст сторінки; біля підвалу лишається над ним */
.corner-rail{position:sticky;bottom:0;z-index:60;height:1px;margin-top:-1px;pointer-events:none}
.corner-rail>.corner{position:absolute;pointer-events:auto}
.cta{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cta__btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:#fff;color:var(--green);
  font:700 1rem/1 var(--f-display);letter-spacing:.01em;padding:0 22px 0 18px;height:52px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 0 2px var(--green-hi);transition:background .2s,transform .15s}
@media (hover:hover) and (pointer:fine){.cta__btn:hover{background:#F0F6F3;transform:translateY(-1px)}}
.cta__btn i{font-size:1.4rem;color:var(--green)}
.cta__list{display:grid;gap:8px;min-width:250px}
.cta__list[hidden]{display:none}
.cta__list a{display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);text-decoration:none;font:500 1rem/1 var(--f-display);padding:15px 18px;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.cta__list a:hover{border-color:var(--green)}
.cta__list i{color:var(--green);font-size:1.4rem}
.ring{position:fixed;z-index:60;left:calc(var(--hero-gap) + var(--cut) + 8px);bottom:calc(var(--hero-gap) + var(--cut) + 8px);
  width:56px;height:56px;border:0;padding:0;border-radius:50%;overflow:hidden;background:rgba(15,21,18,.85);color:#fff;cursor:pointer;backdrop-filter:blur(4px);
  opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .3s ease,transform .4s cubic-bezier(.2,.9,.3,1.3)}
.ring.is-shown{opacity:1;transform:none;pointer-events:auto}
.ring svg{position:absolute;left:6px;top:6px;width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring__bg{stroke:rgba(255,255,255,.22)}
.ring__arc{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:0}
.ring__num{position:absolute;inset:0;display:grid;place-items:center;font:600 .78rem/1 var(--f-display)}
.ring__ico{position:absolute;inset:0;display:none;place-items:center;font-size:1.3rem;background:rgba(15,21,18,.92);border-radius:50%}
.ring[aria-pressed="true"] .ring__ico{display:grid}

/* Шапка з 6 пунктами меню: на вужчих ноутбуках стискаємо відступи, щоб усе вміщалось в один рядок */
@media (max-width:1360px){.hdr{gap:20px;padding:0 22px}.hdr__nav{gap:20px}.hdr__nav a{font-size:1rem}}
@media (max-width:1180px){.hdr__brand img{height:42px}.hdr__nav{gap:15px}.hdr__nav a{font-size:.95rem}.hdr__cta span{display:none}}

/* Планшет і телефон */
@media (max-width:999px){
  .facts__grid,.benefits,.best__grid{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .portals__grid{grid-template-columns:1fr 1fr;gap:28px}
  .coop__head{grid-template-columns:1fr;gap:16px}
  .best__grid--diamond{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .prod--t{grid-column:1;grid-row:1}
  .prod--r{grid-column:2;grid-row:1;align-self:stretch}
  .prod--l{grid-column:1;grid-row:2;align-self:stretch}
  .prod--b{grid-column:2;grid-row:2}
  .best__hub{display:none}
  .coop__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .coop{padding:88px 0 96px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:34px 0}
  .steps li::after{display:none}
  .aud,.contact__grid,.split{grid-template-columns:1fr}
  .hdr__burger{display:block}
  .hdr__nav{position:absolute;top:var(--hdr-h);left:0;right:0;background:var(--bg);flex-direction:column;gap:0;padding:8px 24px 18px;display:none;border-bottom:1px solid var(--line)}
  .hdr__nav.is-open{display:flex}
  .hdr__nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .hdr__cta span{display:none}
  .hdr{gap:14px;padding:0 16px}
  :root{--hdr-h:76px}
  .hdr__brand img{height:40px}
  .slide{padding:var(--hdr-h) 24px 90px;align-items:flex-start}
  .slide__body{padding-top:34px}
  .pager{left:24px;bottom:22px}
  .screen{padding:calc(var(--hdr-h) + 28px) 0 64px}
  .hero{padding:0}
  .page-hero{padding:calc(var(--hdr-h) + 40px) 0 64px}
  .ring{display:none}
}
@media (max-width:560px){
  :root{--cut:18px;--hero-gap:8px}
  .facts__grid,.benefits,.steps,.best__grid,.ftr__grid,.portals__grid,.coop__grid{grid-template-columns:1fr}
  .coop__grid article{min-height:0;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;text-align:left;padding:22px 24px;gap:18px}
  .coop__grid i{font-size:2.4rem}
  .best__grid--diamond{grid-template-columns:1fr}
  .best__grid--diamond .prod{aspect-ratio:auto;min-height:0}
  .best__grid--diamond .prod__img{height:170px}
  .prod--t,.prod--r,.prod--l,.prod--b{grid-column:1;grid-row:auto}
  .hdr__tag{display:none}
  .pick{flex-wrap:nowrap}.pick__q{margin-right:2px;font-size:.86rem}.pick__i{width:84px}   /* «Для бізнесу» більше не переноситься (06.10) */
  .btn--lg{width:100%;justify-content:center}
  .lead-form{width:calc(100vw - 32px);right:-8px}
}
@media (min-width:1000px) and (max-height:820px){
  .card__img{height:130px}
  .sec-head{margin-bottom:22px}
  .center{margin-top:22px}
  .facts h2{margin-bottom:30px}
  .aud article{padding:28px}
  .split__media{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .fp__track,.slide,.slide__body>*,.btn,.ring{transition:none !important}
}

/* Згадка технології N-TOPCon — посилання на блок «Технологія» на «Про нас» (about.html#layers):
   жирне контрастне слово з підкресленням. Колір — зелений на світлих сторінках, жовтий на темних (--tl) */
.tech-link{--tl:var(--green);color:var(--tl);font-weight:700;text-decoration:underline 2px;text-underline-offset:3px;text-decoration-color:currentColor;cursor:pointer;white-space:nowrap;transition:color .2s,text-decoration-color .2s}
.tech-link:hover,.tech-link:focus-visible{text-decoration-color:var(--accent);outline:none}
.slide .tech-link,.pg-dark .tech-link{--tl:var(--accent)}
.slide .tech-link:hover,.pg-dark .tech-link:hover{text-decoration-color:#fff}
.pg-home .tech-link{--tl:var(--pg)}
.portal__img--brand{background-position:72% center!important}
/* hover-gate: зсуви при наведенні — лише з мишею (06.10) */

/* ---------- Заявки (07.10.2026): помилка відправки, пастка для ботів, «надсилається» ---------- */
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
.form-err{margin:10px 0 0;font-size:14px;line-height:1.4;font-weight:500;color:#e5484d}
.form-err[hidden]{display:none}
form.is-busy button[type="submit"]{opacity:.7;cursor:progress}

/* ---------- Слайди на телефоні (Віктор 08.10, знімки з iPhone) ----------
   Було: фото товару лежало ПІД текстом із прозорістю 35% — виглядало, ніби фон-сітка «наліз» на фото, і краєм
   слайда його обрізало. Тепер: текст угорі, фото товару — під текстом, повністю видиме, поверх фону, не обрізане.
   Висоту героя скрипт (v2.js, fitHero) підганяє під найвищий слайд: текст + фото (--hero-need, --cut-h). */
@media (max-width:999px){
  .hero-shell .hero{min-height:max(calc(100svh - var(--hdr-h) - var(--hero-gap) * 2), var(--hero-need, 0px))}
  .hero-shell .slide{align-items:flex-start}
  .hero-shell .slide__body{z-index:2}
  .hero-shell .slide .slide__cut{opacity:1;z-index:1;top:var(--cut-top, auto);right:auto;left:50%;bottom:auto;
    transform:translateX(-50%);height:var(--cut-h, 240px);width:auto;max-width:calc(100% - 40px);object-fit:contain}
  /* фото даху (слайд 2) — не вирізаний товар, а знімок: рамкою на всю ширину, зі скошеними кутами */
  .hero-shell .slide[data-bg="s2"] .slide__cut{width:calc(100% - 44px);aspect-ratio:auto;object-fit:cover}
}
@media (max-width:999px){
  /* слайд 3: кут панелі на фото вирізаний так, що «виходить» з правого краю — притискаємо до правого краю слайда,
     верхній зріз фото м'яко розчиняємо (інакше по центру панель виглядала обрізаною) */
  .hero-shell .slide[data-bg="s4"] .slide__cut{left:auto;right:0;transform:none;max-width:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
}
/* 20.10.2026: заголовки ВЕЛИКИМИ літерами — відстань між рядками: перший екран 1.12, заголовки розділів 1.16. Менше —
   бреве «Й» і крапки «Ї» налазять на рядок вище (а над «Й» ще буває ніжка «Д», «Ц», «Щ») (перевірено на всіх сторінках: «НАДІЙНІСТЬ», «НАШОЇ», «ЯКІЙ», «МАЙБУТНЬОГО») */