/* SoftPlus — «Прилад». Спільний стиль головної та посадкових. */
:root{
  --bg:#052424; --bg2:#0a2e2e; --tx:#e5e5e5; --tx2:#c2c2c2; --tx3:#a2a2a2;
  --dim:#7f7f7f; --edge:#454742; --lime:#abff02; --lineColor:#454742;
  --sans:"Geist","Inter","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  --pad:clamp(20px,3.4vw,48px);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease2:cubic-bezier(.39,.575,.565,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-weight:450;
  font-size:16px;line-height:1.5;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(78% 58% at 12% -8%, rgba(171,255,2,.05), rgba(171,255,2,0) 62%),
    radial-gradient(72% 62% at 96% 4%, rgba(24,84,80,.55), rgba(24,84,80,0) 64%),
    radial-gradient(110% 90% at 62% 118%, rgba(0,0,0,.62), rgba(0,0,0,0) 72%),
    linear-gradient(176deg,#062827 0%,#052424 46%,#041d1e 100%)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 68px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 68px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 82%);
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 30%,transparent 82%)}

.mono{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--dim)}
.frame,.cols{position:fixed;inset:0;pointer-events:none;z-index:6}
.cols i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.05);transform-origin:top center}
.cols i:nth-child(1){left:20%}.cols i:nth-child(2){left:40%}
.cols i:nth-child(3){left:60%}.cols i:nth-child(4){left:80%}
.frame{z-index:40}
.frame b{position:absolute;background:var(--lineColor);display:block}
.f-t{left:0;top:0;height:1px;width:50%;transform-origin:left center}
.f-r{right:0;top:0;width:1px;height:50%;transform-origin:center top}
.f-b{right:0;bottom:0;height:1px;width:50%;transform-origin:right center}
.f-l{left:0;bottom:0;width:1px;height:50%;transform-origin:center bottom}
.frame s{position:absolute;width:9px;height:9px;border:0 solid var(--edge);display:block}
.c-tl{left:9px;top:9px;border-left-width:1px;border-top-width:1px}
.c-tr{right:9px;top:9px;border-right-width:1px;border-top-width:1px}
.c-br{right:9px;bottom:9px;border-right-width:1px;border-bottom-width:1px}
.c-bl{left:9px;bottom:9px;border-left-width:1px;border-bottom-width:1px}
.rail{position:fixed;left:calc(var(--pad) - 26px);top:50%;z-index:8;font-family:var(--mono);
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#3f5b55;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;pointer-events:none}
.shell{position:relative;z-index:10;max-width:1560px;margin:0 auto;padding:0 var(--pad)}
.rule{height:1px;background:var(--edge);transform-origin:left center;opacity:.9}

/* --- шапка --- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0 16px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;text-decoration:none}
.brand .wm{font-size:15px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tx)}
.brand .dm{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
.readout{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* 🔴 flex без переносу: «РЕНДЕР 024 ГОТОВО» не влазив у свої 80 px і виїжджав
   на 190, тягнучи за собою всю сторінку на 11 px убік. */
.rd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
  font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.rd em{font-style:normal;color:var(--tx3)}
#cnt,#godynnyk{color:var(--lime);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* --- верхня стрічка: різні кольори + постійне SVG-спотворення --- */
.fx-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.readout .rd{filter:url(#spHvylya)}
.readout .rd-r{color:#b48cff}
.readout .rd-st em{color:#7af8ff}
.readout .rd-city em{color:var(--lime)}
.readout .dot{background:#7af8ff}
.readout .rd::after{content:"";position:absolute;inset:-2px -4px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(122,248,255,.13),transparent);
  transform:translateX(-120%);animation:promin 7s linear infinite}
.readout .rd{position:relative}
.readout .rd-st::after{animation-delay:1.4s}
.readout .rd-city::after{animation-delay:2.8s}
@keyframes promin{0%{transform:translateX(-120%)}18%{transform:translateX(120%)}100%{transform:translateX(120%)}}

/* --- номери в меню: відкриваються й закриваються --- */
.nav .idx{display:inline-flex;align-items:baseline;gap:1px}
.nav .idx i{font-style:normal;display:inline-block;color:var(--dim);
  animation:duzhka 6.4s var(--ease) infinite both;animation-delay:var(--dd,0s)}
.nav .idx i.r{animation-name:duzhkaR}
.nav .idx b{display:inline-block;font-weight:400;transform-origin:center center;
  animation:cyfra 6.4s var(--ease) infinite both;animation-delay:var(--dd,0s)}
@keyframes cyfra{0%,60%{transform:scaleX(1);opacity:1}
  70%{transform:scaleX(.04);opacity:.2}78%{transform:scaleX(.04);opacity:.2}
  88%,100%{transform:scaleX(1);opacity:1}}
@keyframes duzhka{0%,60%{transform:translateX(0)}70%,78%{transform:translateX(3px)}
  88%,100%{transform:translateX(0)}}
@keyframes duzhkaR{0%,60%{transform:translateX(0)}70%,78%{transform:translateX(-3px)}
  88%,100%{transform:translateX(0)}}
.nav a:hover .idx i{color:var(--lime)}
.dot{width:6px;height:6px;background:var(--lime);display:inline-block;flex:0 0 auto}
body.js:not(.done) .dot{opacity:0}
body.js:not(.done) .rd-st em{opacity:.35}
.nav{display:flex;align-items:center;gap:clamp(14px,2.1vw,34px);flex-wrap:wrap;padding:14px 0 15px}
.nav a{position:relative;display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  color:var(--tx2);font-size:14px;font-weight:450;padding-bottom:3px}
.nav .idx{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);transform:translateY(-1px)}
.nav a u{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease);text-decoration:none}
.nav a:hover{color:#fff}.nav a:hover u{transform:scaleX(1)}.nav a:hover .idx{color:var(--lime)}
.nav a:focus-visible{outline:1px solid var(--lime);outline-offset:4px}
.nav a[aria-current]{color:#fff}.nav a[aria-current] u{transform:scaleX(1)}

/* підменю послуг */
.nav .has{position:relative}
.nav .has > a .ca{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:2px;
  transition:color .3s linear,transform .4s var(--ease);display:inline-block}
.nav .has:hover > a .ca,.nav .has:focus-within > a .ca{color:var(--lime);transform:rotate(90deg)}
.drop{position:absolute;left:-14px;top:calc(100% + 14px);z-index:60;min-width:min(94vw,760px);
  background:var(--bg2);border:1px solid var(--edge);padding:1px;display:grid;
  grid-template-columns:1fr 1fr;gap:1px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s linear,transform .34s var(--ease),visibility 0s linear .34s;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.nav .has:hover .drop,.nav .has:focus-within .drop{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s linear,transform .34s var(--ease),visibility 0s}
.drop a{display:block;background:var(--bg);padding:13px 16px;text-decoration:none;
  border:0;transition:background .25s linear}
.drop a:hover{background:#0e3634}
.drop b{display:block;font-weight:450;font-size:.94rem;color:var(--tx);margin-bottom:3px}
.drop em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#5f7a6d}
.drop a:hover b{color:var(--lime)}

/* перемикач мов */
.langsw{position:relative;display:inline-flex}
.langsw > button{display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:1px solid var(--edge);border-radius:1px;color:var(--tx3);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;padding:7px 11px;cursor:pointer;
  transition:color .3s linear,border-color .3s linear}
.langsw > button:hover{color:#fff;border-color:var(--lime)}
.langsw > button:focus-visible{outline:1px solid var(--lime);outline-offset:3px}
.langsw ul{position:absolute;right:0;top:calc(100% + 8px);z-index:70;margin:0;padding:1px;
  list-style:none;background:var(--bg2);border:1px solid var(--edge);display:grid;
  grid-template-columns:repeat(2,minmax(96px,1fr));gap:1px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .28s linear,transform .34s var(--ease),visibility 0s linear .34s;
  box-shadow:0 20px 44px rgba(0,0,0,.5)}
.langsw:hover ul,.langsw:focus-within ul{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s linear,transform .3s var(--ease),visibility 0s}
.langsw li a{display:block;background:var(--bg);padding:9px 13px;color:var(--tx2);
  text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;transition:background .25s linear,color .25s linear}
.langsw li a:hover{background:#0e3634;color:var(--lime)}
.langsw li a[aria-current]{color:var(--lime)}
@media (max-width:719px){
  .drop{position:static;min-width:0;opacity:1;visibility:visible;transform:none;
    display:none;box-shadow:none;margin-top:10px;grid-template-columns:1fr}
  .nav .has:hover .drop,.nav .has:focus-within .drop{display:grid}
  .nav .has{grid-column:1 / -1}
}

/* --- заголовки й секції --- */
.sect{display:flex;align-items:center;gap:12px;margin-bottom:clamp(26px,3vw,40px)}
/* 🔴 white-space:nowrap на довгій команді («curl -O data/price-index.csv»)
   виносив рядок за екран: 309 px тексту в 390 px ширини разом із номером
   секції давали 392 і виліт на 2 px. На телефоні дозволяємо обрізати. */
.sect span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.sect span:last-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sect i{display:block;height:1px;flex:1;background:var(--edge);transform-origin:left center}
h1{margin:0;font-weight:450;font-size:clamp(2.3rem,6.6vw,5.6rem);line-height:.98;
  letter-spacing:-.032em;color:var(--tx);max-width:17ch;text-wrap:balance}
h1 .lo{color:var(--tx3)}
h2{margin:0 0 18px;font-weight:450;font-size:clamp(1.6rem,3.1vw,2.5rem);line-height:1.08;
  letter-spacing:-.022em;max-width:22ch;text-wrap:balance}
h3{margin:0 0 8px;font-weight:500;font-size:1.02rem;letter-spacing:-.004em}
.sub{margin:clamp(22px,2.6vw,34px) 0 0;max-width:56ch;font-size:clamp(.98rem,1.12vw,1.1rem);
  line-height:1.66;color:var(--tx2)}
.lead{max-width:60ch;color:var(--tx2);line-height:1.66;margin:0 0 clamp(26px,3vw,38px)}
section{padding:clamp(32px,3.4vw,56px) 0}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.2vw,52px);
  padding:clamp(30px,3.6vw,54px) 0 clamp(26px,3vw,44px)}

/* --- кнопки --- */
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.4vw,46px)}
.btn{position:relative;display:inline-flex;align-items:center;gap:16px;padding:18px 26px;
  color:var(--tx);text-decoration:none;font-size:15px;--lineColor:#454742;background:transparent}
.btn i{position:absolute;inset:0;border:1px solid var(--lineColor);border-radius:1px;
  transition:transform .46s var(--ease),border-color .3s linear}
.btn u{position:absolute;inset:5px;border:1px solid rgba(229,229,229,.07);border-radius:1px;
  transition:transform .46s var(--ease),border-color .3s linear;text-decoration:none}
.btn .ar{font-family:var(--mono);font-size:13px;color:var(--dim);transition:transform .46s var(--ease),color .3s linear}
.btn:hover{--lineColor:var(--lime);color:#fff}
.btn:hover i{transform:rotate(1.5deg)}
.btn:hover u{transform:rotate(-1.5deg);border-color:rgba(171,255,2,.22)}
.btn:hover .ar{transform:translateX(7px);color:var(--lime)}
.btn:focus-visible{outline:1px solid var(--lime);outline-offset:5px}
.btn--b{color:var(--tx2)}.btn--b u{display:none}

/* --- графік --- */
.schema{display:flex;justify-content:flex-start;align-items:flex-start}
.schema svg{width:100%;max-width:360px;height:auto;display:block}
.schema .sv-l{stroke:#31544e;stroke-width:1;fill:none}
.schema .sv-g{stroke:#c2c2c2;stroke-width:1;fill:none;stroke-linejoin:round}
.schema .sv-ai{stroke:#abff02;stroke-width:1.4;fill:none;stroke-linejoin:round}
.schema .sv-dash{stroke:#587f76;stroke-width:1;fill:none;stroke-dasharray:2 3}
.schema .nd-g{fill:#052424;stroke:#c2c2c2;stroke-width:1}
.schema .nd-a{fill:#abff02;stroke:none}
.schema .lbl{font-family:var(--mono);font-size:8px;letter-spacing:.12em;fill:#5f7a6d;text-transform:uppercase}
.schema .lbl-a{fill:#abff02}
.schema text{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:#5f7a6d;text-transform:uppercase}
.schema .dw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}

/* --- рядки-послуги --- */
.row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(14px,2vw,28px);padding:19px 0 18px;text-decoration:none;
  color:inherit;transition:transform .42s var(--ease)}
.row .ln{position:absolute;left:0;right:0;top:0;height:1px;background:var(--edge);transform-origin:left center}
.row .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);transition:color .3s linear}
.row .t{font-size:clamp(1rem,1.5vw,1.22rem);color:var(--tx)}
.row .g{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5f7a6d}
.row:hover{transform:translateX(8px)}
.row:hover .n{color:var(--lime)}
.row:focus-visible{outline:1px solid var(--lime);outline-offset:4px}

/* --- НОВІ БЛОКИ --- */
/* процес */
.krok{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:1px;background:var(--edge)}
.krok > div{background:var(--bg);padding:24px 22px 26px;position:relative}
.krok .kn{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--lime);display:block;margin-bottom:14px}
.krok p{margin:0;color:var(--tx3);font-size:.92rem;line-height:1.6}

/* прайс */
.prays{width:100%;border-collapse:collapse}
.prays th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-align:left;font-weight:400;padding:0 14px 12px 0;border-bottom:1px solid var(--edge)}
.prays td{padding:15px 14px 15px 0;border-bottom:1px solid rgba(69,71,66,.55);vertical-align:baseline}
.prays tr:hover td{background:rgba(171,255,2,.028)}
.prays tr.sec td{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);padding:26px 0 9px;border-bottom:1px solid var(--edge)}
.prays tr.sec:first-child td{padding-top:6px}
.prays tr.sec:hover td{background:none}
.prays .u{color:var(--tx);font-size:1rem}
.prays .o{color:var(--tx3);font-size:.86rem}
.prays .c{font-family:var(--mono);color:var(--lime);white-space:nowrap;text-align:right;font-size:.95rem}
.prays .c s{color:var(--dim);text-decoration:line-through;margin-right:10px;font-size:.82rem}

/* керування — три картки */
.kart{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:1px;background:var(--edge)}
.kart article{background:var(--bg);padding:26px 24px 28px;position:relative;overflow:hidden}
.kart article::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--lime);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
.kart article:hover::after{transform:scaleX(1)}
.kart .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#5f7a6d;display:block;margin-bottom:13px}
.kart p{margin:0 0 14px;color:var(--tx3);font-size:.92rem;line-height:1.62}
.kart .cn{font-family:var(--mono);color:var(--lime);font-size:.92rem}

/* цифри */
.cyfry{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:1px;background:var(--edge)}
.cyfry div{background:var(--bg);padding:26px 22px}
.cyfry b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.9rem);
  color:var(--lime);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cyfry span{display:block;margin-top:10px;font-size:.85rem;color:var(--tx3);line-height:1.5}

/* FAQ */
.faq details{border-bottom:1px solid rgba(69,71,66,.55)}
.faq summary{cursor:pointer;padding:19px 34px 19px 0;position:relative;list-style:none;
  font-size:1.02rem;color:var(--tx);transition:color .3s linear}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:17px;font-family:var(--mono);
  color:var(--dim);font-size:1.1rem;transition:transform .38s var(--ease),color .3s linear}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--lime)}
.faq summary:hover{color:#fff}
.faq summary:focus-visible{outline:1px solid var(--lime);outline-offset:3px}
.faq p{margin:0 0 20px;color:var(--tx3);max-width:70ch;line-height:1.68}

/* --- калькулятор-прилад --- */
.calc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.75fr);gap:1px;
  background:var(--edge);border:1px solid var(--edge)}
.calc > div{background:var(--bg);padding:clamp(20px,2.4vw,30px)}
.calc b.hd{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin:0 0 14px}
.calc .opt{display:flex;flex-wrap:wrap;gap:8px}
.calc .opt label{position:relative;cursor:pointer}
.calc .opt input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;cursor:pointer;margin:0}
.calc .opt span{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--edge);
  padding:11px 15px;font-size:.9rem;color:var(--tx2);transition:border-color .3s linear,color .3s linear,background .3s linear}
.calc .opt span::before{content:"";width:7px;height:7px;background:transparent;
  border:1px solid var(--dim);flex:0 0 auto;transition:background .25s linear,border-color .25s linear}
.calc .opt input:checked + span{border-color:var(--lime);color:#fff}
.calc .opt input:checked + span::before{background:var(--lime);border-color:var(--lime)}
.calc .opt input:focus-visible + span{outline:1px solid var(--lime);outline-offset:3px}
.calc .opt span:hover{background:rgba(171,255,2,.05)}
.calc .dod{margin-top:24px}
.calc .cn2{font-family:var(--mono);font-size:11px;color:#5f7a6d;margin-left:2px}
.calc .out b.hd{margin-bottom:18px}
.calc .sum{font-family:var(--mono);font-weight:600;font-size:clamp(1.9rem,4vw,2.9rem);
  color:var(--lime);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  display:block;margin-bottom:6px}
.calc .sum small{font-size:.42em;font-weight:400;color:var(--dim);letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-bottom:8px}
.calc .strok{margin-top:22px;padding-top:18px;border-top:1px solid var(--edge)}
.calc .strok em{font-style:normal;font-family:var(--mono);color:var(--tx);font-size:1.05rem}
.calc .note{margin-top:18px;font-size:.8rem;color:var(--dim);line-height:1.55}

/* --- місце в ринку --- */
.ryn{display:grid;gap:1px}
.ryn > div{background:var(--bg);box-shadow:0 0 0 1px var(--edge);padding:18px clamp(16px,2vw,24px) 22px;
  display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,2.2fr) auto;
  gap:clamp(12px,2vw,26px);align-items:center}
.ryn .nm{font-size:.98rem;color:var(--tx)}
.ryn .bar{position:relative;height:26px}
.ryn .bar i{position:absolute;left:0;right:0;top:11px;height:4px;background:#26443f;display:block;
  transform-origin:left center}
.ryn .bar u{position:absolute;top:11px;height:4px;background:#587f76;display:block;
  text-decoration:none;transform-origin:left center}
.ryn .bar s{position:absolute;top:4px;width:3px;height:18px;background:var(--lime);display:block;
  text-decoration:none;transform:scaleY(0);transform-origin:center bottom}
.ryn.in .bar u{animation:lx .8s var(--ease2) .15s both}
.ryn.in .bar s{animation:ly .5s var(--ease) .85s both}
.ryn .vl{font-family:var(--mono);font-size:.9rem;color:var(--lime);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ryn .vl em{font-style:normal;color:var(--dim);display:block;font-size:.78rem;margin-top:3px}
.ryn-leg{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 0;font-family:var(--mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ryn-leg span{display:inline-flex;align-items:center;gap:8px}
.ryn-leg i{width:16px;height:4px;background:#587f76;display:block}
.ryn-leg i.a{width:3px;height:14px;background:var(--lime)}

/* --- ніші --- */
.nish{display:flex;flex-wrap:wrap;gap:1px}
.nish span{box-shadow:0 0 0 1px var(--edge);background:var(--bg);padding:15px 20px;font-size:.93rem;color:var(--tx2);
  flex:1 1 auto;transition:background .3s linear,color .3s linear;white-space:nowrap}
.nish span:hover{background:#0e3634;color:var(--lime)}

/* --- смуга прокрутки у рамці приладу --- */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--lime);z-index:41;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;opacity:.85}
/* --- рейка: активний розділ --- */
.rail b{display:block;font-weight:400;color:var(--lime);margin-bottom:14px;
  transition:color .3s linear}

/* заклик */
.cta{border:1px solid var(--edge);padding:clamp(30px,4vw,56px);position:relative}
.cta::before,.cta::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--lime)}
.cta::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.cta::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* --- АНІМОВАНИЙ ПІДВАЛ --- */
.pidval{position:relative;z-index:10;margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--edge);overflow:hidden}
.pv-in{max-width:1560px;margin:0 auto;padding:0 var(--pad)}
.pv-tick{border-bottom:1px solid var(--edge);overflow:hidden;padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pv-tick div{display:flex;gap:0;width:max-content;animation:bih 34s linear infinite}
.pv-tick span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#5f7a6d;padding:0 26px;white-space:nowrap;position:relative}
.pv-tick span::after{content:"";position:absolute;right:0;top:50%;width:4px;height:4px;
  background:var(--edge);transform:translateY(-50%) rotate(45deg)}
.pidval:hover .pv-tick div{animation-play-state:paused}
@keyframes bih{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.pv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1px;background:var(--edge)}
.pv-cols nav{background:var(--bg);padding:30px 22px 32px}
.pv-cols b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:16px}
.pv-cols a{display:block;color:var(--tx2);text-decoration:none;font-size:.92rem;padding:6px 0;
  position:relative;transition:color .3s linear,transform .4s var(--ease)}
.pv-cols a:hover{color:var(--lime);transform:translateX(5px)}
.pv-cols a:focus-visible{outline:1px solid var(--lime);outline-offset:3px}

/* хештеги, як в Інстаграмі */
.pv-tags{display:flex;flex-wrap:wrap;gap:10px 18px;padding:22px 0 24px;border-top:1px solid var(--edge)}
.pv-tags a{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--tx3);
  text-decoration:none;transition:color .3s linear,transform .4s var(--ease)}
.pv-tags a i{color:#4d6d63;font-style:normal;margin-right:1px;transition:color .3s linear}
.pv-tags a:hover{color:#fff;transform:translateY(-1px)}
.pv-tags a:hover i{color:var(--lime)}
.pv-tags a:focus-visible{outline:1px solid var(--lime);outline-offset:3px}
.pv-bot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 0 26px;border-top:1px solid var(--edge)}
.pv-bot .fl{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.pulse{width:7px;height:7px;background:var(--lime);display:inline-block;animation:puls 2.4s var(--ease2) infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.28;transform:scale(.7)}}

.replay{position:relative;display:inline-flex;align-items:center;gap:11px;padding:11px 16px;
  background:transparent;color:var(--tx3);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--edge);border-radius:1px;
  cursor:pointer;transition:color .3s linear,border-color .3s linear,transform .46s var(--ease)}
.replay span{width:7px;height:7px;background:var(--dim);display:block;transition:background .3s linear,transform .5s var(--ease)}
.replay:hover{color:#fff;border-color:var(--lime);transform:rotate(1.5deg)}
.replay:hover span{background:var(--lime);transform:rotate(45deg)}
.replay:focus-visible{outline:1px solid var(--lime);outline-offset:4px}

/* --- анімації --- */
@keyframes lx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ly{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes draw{from{stroke-dashoffset:var(--len,400)}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes flick{0%{opacity:0}18%{opacity:1}34%{opacity:.15}52%{opacity:1}70%{opacity:.3}100%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

body.run .f-t{animation:lx .6s var(--ease2) .06s both}
body.run .f-r{animation:ly .6s var(--ease2) .12s both}
body.run .f-b{animation:lx .6s var(--ease2) .18s both}
body.run .f-l{animation:ly .6s var(--ease2) .24s both}
body.run .frame s{animation:pop .38s var(--ease) both}
body.run .frame s.c-tl{animation-delay:.5s}body.run .frame s.c-tr{animation-delay:.56s}
body.run .frame s.c-br{animation-delay:.62s}body.run .frame s.c-bl{animation-delay:.68s}
body.run .cols i{animation:ly .78s var(--ease2) both}
body.run .cols i:nth-child(1){animation-delay:.14s}body.run .cols i:nth-child(2){animation-delay:.2s}
body.run .cols i:nth-child(3){animation-delay:.26s}body.run .cols i:nth-child(4){animation-delay:.32s}
body.run .topbar ~ .rule,body.run .hero .sect i{animation:lx .56s var(--ease2) var(--d,.2s) both}
body.run .nav .idx{animation:wipe .2s linear var(--d,.5s) both}
body.run .rail{animation:fade .7s linear 1.5s both}
body.run .hero .schema .dw{animation:draw .9s var(--ease2) var(--d,.6s) both}
body.run .hero .schema .fd{animation:fade .45s linear var(--d,.6s) both}
body.run .hero .schema .pp{animation:pop .34s var(--ease) var(--d,1.6s) both}
/* крива зростання малюється повільно — щоб було видно, як росте бізнес */
body.run .hero .schema .dwl{animation:draw 2.2s linear var(--d,1.06s) both}
.schema .nd-fin{filter:drop-shadow(0 0 6px rgba(171,255,2,.7))}
.schema .pkr{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.schema .pkr2{stroke-width:1.5;opacity:.6}
.schema .ru-pero{fill:var(--lime)}
.schema .ru-tilo{fill:#e5e5e5}
.schema .ru-kovp{fill:var(--lime)}
.schema .ruchka{opacity:0}
body.run .hero .schema .pkr1{animation:draw .9s var(--ease2) 3.72s both}
body.run .hero .schema .pkr2{animation:draw .72s var(--ease2) 4.94s both}
body.run .hero .schema .ruchka{animation:ruchka 2.7s linear 3.62s both}
@keyframes ruchka{
  0%{transform:translate(var(--x0),72px);opacity:0}
  6%{opacity:1}
  36%{transform:translate(var(--x1),72px);opacity:1}
  44%{transform:translate(var(--x1),78px);opacity:1}
  50%{transform:translate(calc(var(--x0) + 7px),78px);opacity:.4}
  56%{opacity:1}
  86%{transform:translate(calc(var(--x1) - 5px),78px);opacity:1}
  100%{transform:translate(calc(var(--x1) + 16px),62px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .schema .ruchka{display:none}
  .schema .pkr{stroke-dashoffset:0}}
body.run.done .dot{animation:flick .62s steps(1,end) 0s 1 both}

/* поява при прокрутці */
.rv{opacity:0}
.rv.in{animation:rise .62s var(--ease) both}
.rv.in.d1{animation-delay:.08s}.rv.in.d2{animation-delay:.16s}
.rv.in.d3{animation-delay:.24s}.rv.in.d4{animation-delay:.32s}
.rvl{transform:scaleX(0);transform-origin:left center}
.rvl.in{animation:lx .6s var(--ease2) both}

@media (min-width:1080px){
  .hero{grid-template-columns:minmax(0,1.62fr) minmax(300px,.82fr);align-items:start}
  .schema{justify-content:flex-end;padding-top:8px}
}
@media (max-width:1279px){.rail{display:none}}
@media (max-width:719px){
  .nav{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px}
  .nav a{font-size:13.5px}
  .row{grid-template-columns:38px minmax(0,1fr);row-gap:6px}
  .row .g{grid-column:2}
  .topbar{gap:12px}.readout{gap:16px}
  .btn{padding:16px 20px;font-size:14px;gap:12px}.acts{gap:11px}
  .prays td:first-child{padding-right:8px}
  .calc{grid-template-columns:1fr}
  .ryn > div{grid-template-columns:1fr;gap:10px}
  .ryn .vl{text-align:left}
  .nish span{white-space:normal;flex:1 1 100%}
}
@media (max-width:400px){.rd-city{display:none}.brand .dm{font-size:10px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.run *,body.run *::before,body.run *::after{animation:none!important;transition:none!important}
  .rv{opacity:1}.rvl{transform:none}
  .pv-tick div{animation:none!important}
  .readout .rd{filter:none}
  .readout .rd::after{display:none}
  .nav .idx b,.nav .idx i{animation:none!important;transform:none!important;opacity:1!important}
  .prog{display:none}
}


/* ── логотип: іконка «Плюс-морф», варіант 06 (02.09.2026) ── */
.brand .ic{width:28px;height:28px;flex:0 0 auto;display:block;overflow:visible}
.brand .ic *{transform-box:fill-box;transform-origin:center}
.brand .ic .fr{stroke:#fff;fill:none;stroke-width:1.4}
.brand .ic .pl{stroke:var(--lime);stroke-width:2.2;stroke-linecap:square;
  animation:logoMorph 4s var(--ease) infinite}
@keyframes logoMorph{0%,45%{transform:rotate(0)}60%,90%{transform:rotate(45deg)}100%{transform:rotate(0)}}
.brand:hover .ic .fr{stroke:var(--lime)}
.brand{align-items:center;gap:12px}

/* ── телефон у кінці меню (десктоп) ── */
.nv-sep{width:1px;height:24px;background:var(--edge);margin:0 4px 0 auto}
.nv-tel{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;white-space:nowrap;margin-left:14px}
.nv-tel svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--lime);stroke-width:1.6}
.nv-tel:hover{color:var(--lime)}
.nv-kab{display:inline-flex;align-items:center;gap:8px;color:var(--tx2);text-decoration:none;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.04em;white-space:nowrap;
  margin-left:18px;position:relative;padding-left:18px}
.nv-kab::before{content:"";position:absolute;left:0;top:50%;width:1px;height:16px;margin-top:-8px;background:var(--edge)}
.nv-kab svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--lime);stroke-width:1.6}
.nv-kab:hover{color:var(--lime)}

/* ── панель зв’язку в підвалі ── */
.dock{border-top:1px solid var(--edge);padding:18px 0 4px;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap}
.dock>b{flex:0 0 auto}
.dk-in{display:flex;gap:8px;flex-wrap:wrap}
.dk{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--edge);
  color:var(--tx2);text-decoration:none;font-size:13.5px;line-height:1;position:relative;
  overflow:hidden;z-index:0;transition:color .25s var(--ease),border-color .25s var(--ease)}
.dk::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--lime);
  z-index:-1;transition:height .28s var(--ease)}
.dk svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--dim);stroke-width:1.6;
  transition:stroke .25s var(--ease)}
.dk:hover{color:#052424;border-color:var(--lime)}
.dk:hover svg{stroke:#052424}
.dk:hover::before{height:100%}
.dk-tel{color:#fff}

@media(max-width:900px){
  .nv-sep{display:none}
  .nv-tel{margin-left:0;width:100%;padding-top:6px}
  .nv-kab{margin-left:0;padding-left:0;width:100%;padding-top:4px}
  .nv-kab::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .brand .ic .pl{animation:none}
  .dk::before{transition:none}
}

/* ── підпис праворуч у рядку: друкується по літері, сірий → лайм ── */
.row .g{display:inline-flex;align-items:center;gap:6px;color:#5f7a6d;
  transition:color .7s var(--ease)}
.row .g i{font-style:normal;color:var(--dim);opacity:.7;transition:color .7s var(--ease)}
.row .g b{font-weight:400;white-space:nowrap;min-height:1em}
.row.drukuye .g b::after{content:"";display:inline-block;width:6px;height:9px;
  background:var(--lime);margin-left:3px;vertical-align:-1px;
  animation:kursorBlym .8s steps(1) infinite}
@keyframes kursorBlym{0%,55%{opacity:1}56%,100%{opacity:0}}
.row.napysano .g{color:var(--lime)}
.row.napysano .g i{color:var(--lime);opacity:.5}

/* ── смуга прокрутки браузера: кислотна ── */
html{scrollbar-color:#abff02 rgba(255,255,255,.05);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#abff02 0%,#8ad600 60%,#6ea800 100%);
  border:2px solid #052424;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#abff02}
::-webkit-scrollbar-corner{background:transparent}

/* ── живий калькулятор у героєві сторінки цін ────────────────── */
.kal{width:100%;max-width:340px;height:auto;overflow:visible}
.kal-nazva{font-family:var(--mono);font-size:11px;letter-spacing:.34em;fill:var(--lime);
  text-transform:uppercase}
.kal-dug{fill:var(--dim);letter-spacing:0}
.kal-korpus{fill:rgba(255,255,255,.02);stroke:var(--edge);stroke-width:1}
.kal-tablo{fill:rgba(0,0,0,.42);stroke:var(--edge);stroke-width:1}
.kal-typ{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:var(--dim);
  text-transform:uppercase;opacity:0;animation:kalTypF 13.6s linear infinite;
  animation-delay:calc(var(--f)*3.4s)}
.kal-eur{font-family:var(--mono);font-size:26px;font-weight:600;fill:var(--lime);opacity:0;
  animation:kalCyfF 13.6s linear infinite;
  animation-delay:calc(var(--f)*3.4s + var(--i)*.34s)}
.kal-dg{opacity:0;animation:kalCyfF 13.6s linear infinite;
  animation-delay:calc(var(--f)*3.4s + var(--i)*.34s)}
.sg-off{fill:rgba(171,255,2,.07)}
.sg-on{fill:var(--lime);filter:drop-shadow(0 0 3px rgba(171,255,2,.75))}
@keyframes kalTypF{0%{opacity:0}1.5%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}
@keyframes kalCyfF{0%{opacity:0}1.6%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}
.kal-kursor{fill:var(--lime);animation:kalBlym .78s steps(1) infinite}
@keyframes kalBlym{0%,55%{opacity:1}56%,100%{opacity:0}}
.kal-btn{fill:rgba(255,255,255,.035);stroke:var(--edge);stroke-width:1}
.kal-zn{font-family:var(--mono);font-size:13px;fill:var(--tx3);letter-spacing:.1em}
.kal-hl{fill:rgba(171,255,2,.34);stroke:var(--lime);stroke-width:1;opacity:0;
  animation:kalHl 13.6s linear infinite;
  animation-delay:calc(var(--f)*3.4s + var(--i)*.34s)}
.kal-hl--eq{fill:rgba(171,255,2,.5)}
@keyframes kalHl{0%{opacity:0}1%{opacity:1}3.4%{opacity:0}100%{opacity:0}}
.kal-nyz{font-family:var(--mono);font-size:9px;letter-spacing:.16em;fill:var(--dim);
  text-transform:uppercase}
.kal-krap{animation:kalKrap 1.4s steps(4) infinite}
@keyframes kalKrap{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
@media (prefers-reduced-motion:reduce){
  .kal-typ,.kal-dg,.kal-eur{opacity:1;animation:none}
  .kal-typ:not([style*="--f:0"]),.kal-dg:not([style*="--f:0"]),
  .kal-eur:not([style*="--f:0"]){display:none}
  .kal-hl,.kal-kursor,.kal-krap{animation:none;opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .kal-f{opacity:1;animation:none}.kal-f2,.kal-f3,.kal-f4{display:none}
  .kal-kl,.kal-kl .kal-btn,.kal-kl .kal-zn,.kal-kursor,.kal-krap{animation:none}
}

/* ── обсяг сторінок у калькуляторі: десятками, мінімум 20 ────── */
.stor .stepper{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.stepper button{width:36px;height:36px;border:1px solid var(--edge);background:transparent;
  color:var(--tx2);font-size:17px;line-height:1;cursor:pointer;font-family:var(--mono);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s}
.stepper button:hover{border-color:var(--lime);color:var(--lime)}
.stepper button.tyk{background:var(--lime);color:#052424;border-color:var(--lime);transform:translateY(2px)}
.stepper b{font-family:var(--mono);font-size:21px;font-weight:600;color:#fff;
  min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.stor-nap{font-family:var(--mono);font-size:12.5px;color:var(--lime);font-style:normal;
  letter-spacing:.06em;margin-left:4px}
.stor-note{display:block;margin-top:9px;font-size:12px;color:var(--dim);line-height:1.4}

/* ── підвал: маркери-квадратики й кружечки, що блимають по черзі ── */
.pv-cols nav a{display:flex;align-items:center;gap:10px}
.mk{width:7px;height:7px;flex:0 0 auto;display:inline-block;
  animation:mkBlym 3.6s var(--ease) infinite;animation-delay:var(--d)}
.mk.kolo{border-radius:50%}
.mk1{background:#abff02}
.mk2{background:#5cff8a}
.mk3{background:#d8ff00}
.mk4{background:#2bffc4}
.mk5{background:#8bff3a}
@keyframes mkBlym{0%,88%{opacity:.28;transform:scale(1)}
  93%{opacity:1;transform:scale(1.45)}100%{opacity:.28;transform:scale(1)}}
.pv-cols nav a:hover .mk{opacity:1;transform:scale(1.5)}

/* контакти в підвалі — іконки в рамці, підпис поруч */
.dk svg{width:16px;height:16px}
.dock>b{color:var(--lime);letter-spacing:.22em}

/* ── іконки ШІ навколо графіка: повільно розходяться в різні боки ── */
.znaky .zn{fill:none;stroke:var(--lime);stroke-width:1.2;opacity:.34;
  animation:znPlyv 14s ease-in-out infinite}
.znaky .zn2{animation-name:znPlyv2;animation-duration:17s;opacity:.26}
.znaky .zn3{animation-name:znPlyv3;animation-duration:12s;opacity:.3}
.znaky .zn4{animation-name:znPlyv4;animation-duration:19s;opacity:.24}
.znaky .zn5{animation-name:znPlyv5;animation-duration:15s;opacity:.28}
.znaky .zn6{animation-name:znPlyv6;animation-duration:21s;opacity:.22}
@keyframes znPlyv{0%,100%{transform:translate(24px,62px)}50%{transform:translate(6px,44px) rotate(14deg)}}
@keyframes znPlyv2{0%,100%{transform:translate(320px,104px)}50%{transform:translate(336px,86px) rotate(-16deg)}}
@keyframes znPlyv3{0%,100%{transform:translate(20px,188px)}50%{transform:translate(4px,214px) rotate(22deg)}}
@keyframes znPlyv4{0%,100%{transform:translate(322px,224px)}50%{transform:translate(338px,250px) rotate(-12deg)}}
@keyframes znPlyv5{0%,100%{transform:translate(18px,302px)}50%{transform:translate(2px,278px) rotate(10deg)}}
@keyframes znPlyv6{0%,100%{transform:translate(318px,322px)}50%{transform:translate(334px,300px) rotate(-18deg)}}
.vash{fill:var(--lime);font-weight:600;letter-spacing:.14em}
.mtk{fill:var(--dim);letter-spacing:.2em;animation:mtkBlym 4.2s var(--ease) infinite}
.mitky .mtk:nth-child(2){animation-delay:1.4s}
.mitky .mtk:nth-child(3){animation-delay:2.8s}
.mtk-a{fill:var(--lime)}
@keyframes mtkBlym{0%,80%{opacity:.5}88%{opacity:1}100%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.znaky .zn,.mtk{animation:none}}

/* ── «Наші проєкти»: картки з фото, перенесені з бойового сайту ── */
.rob-sitka{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1px;margin-top:22px}
.rob{background:#052424;box-shadow:0 0 0 1px var(--edge);padding:0 0 20px;
  display:flex;flex-direction:column}
.rob-foto{display:block;overflow:hidden;border-bottom:1px solid var(--edge)}
.rob-foto img{width:100%;height:auto;display:block;filter:grayscale(.55) contrast(1.05);
  transition:filter .5s var(--ease),transform .6s var(--ease)}
.rob:hover .rob-foto img{filter:none;transform:scale(1.03)}
.rob-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 18px 4px}
.rob-hd h3{margin:0;font-size:17px;font-weight:500;color:#fff}
.rob-hd b{color:var(--lime);font-size:11px}
.rob-dom{display:block;padding:0 18px;color:var(--tx3);font-size:11px;text-decoration:none;
  letter-spacing:.1em}
.rob-dom:hover{color:var(--lime)}
.rob p{margin:10px 0 12px;padding:0 18px;color:var(--tx2);font-size:13.5px;line-height:1.55;flex:1}
.rob-tegy{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.rob-tegy span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--edge);padding:4px 8px}
.rob:hover .rob-tegy span{border-color:#5f7a6d;color:var(--tx3)}

/* графік публікації посадочних і заблокований степер (лендінг — одна сторінка) */
.stor-grafik{display:block;margin-top:10px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;color:var(--tx3)}
.stor-grafik b{color:var(--dim);margin-right:6px}
.stor-grafik em{font-style:normal;color:var(--lime)}
.stepper.zablokovano button{opacity:.3;cursor:not-allowed}
.stepper.zablokovano b{color:var(--tx3)}

/* прев'ю шаблонів у галереї */
.shk{display:flex;flex-direction:column}
.shk-foto{display:block;overflow:hidden;border:1px solid var(--edge);margin-bottom:12px;
  background:rgba(255,255,255,.02)}
.shk-foto img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;
  object-position:top center;filter:grayscale(.5) contrast(1.04);
  transition:filter .5s var(--ease),transform .6s var(--ease)}
.shk:hover .shk-foto img{filter:none;transform:scale(1.04)}

/* ── мальована карта України на контактах ───────────────────── */
.ua-karta{margin-top:22px;border:1px solid var(--edge);padding:clamp(14px,2vw,26px);
  background:rgba(0,0,0,.16)}
.ua-karta svg{width:100%;height:auto;display:block;max-height:420px}
.ua-sitka line{stroke:rgba(255,255,255,.05);stroke-width:1}
.ua-zalyv{fill:url(#uaFill);opacity:0;animation:uaNalyv 1.6s 2.1s var(--ease) forwards}
@keyframes uaNalyv{to{opacity:1}}
.ua-kontur{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:uaMalyuy 2.4s var(--ease) forwards, uaSyayvo 3.4s 2.6s ease-in-out infinite}
@keyframes uaMalyuy{to{stroke-dashoffset:0}}
@keyframes uaSyayvo{0%,100%{filter:drop-shadow(0 0 0 rgba(171,255,2,0))}
  50%{filter:drop-shadow(0 0 7px rgba(171,255,2,.55))}}
.ua-mayak{opacity:0;animation:uaPokaz .5s 3.1s forwards}
@keyframes uaPokaz{to{opacity:1}}
.ua-zirka{fill:var(--lime)}
.ua-hvylya{fill:none;stroke:var(--lime);stroke-width:1.2;opacity:0;
  animation:uaHvylya 2.8s 3.2s ease-out infinite}
.ua-hvylya.h2{animation-delay:4.6s}
@keyframes uaHvylya{0%{r:6;opacity:.9}100%{r:34;opacity:0}}
.ua-pidpys{opacity:0;animation:uaPokaz .5s 3.5s forwards}
.ua-pidpys line{stroke:var(--edge);stroke-width:1}
.ua-pidpys text{fill:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.ua-pidpys .ua-koord{fill:var(--dim);font-size:9px;letter-spacing:.1em}
.ua-legenda{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--edge)}
.ua-tochka{width:7px;height:7px;background:var(--lime);display:inline-block;margin-right:8px}
@media(prefers-reduced-motion:reduce){
  .ua-kontur{stroke-dashoffset:0;animation:none}
  .ua-zalyv,.ua-mayak,.ua-pidpys{opacity:1;animation:none}
  .ua-hvylya{display:none}
}

/* сусіди на карті: схід — 404, захід — мир і любов */
.ua-susid{opacity:0;animation:uaPokaz .6s 3.8s forwards}
.ua-404{fill:#ff7b5c;font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:.12em}
.ua-susid-p{fill:var(--dim);font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase}
.ua-lyubov{fill:var(--lime);font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.85}

/* ── висувна панель підтримки ───────────────────────────────── */
.ch-vidkryty{position:fixed;right:0;bottom:24%;z-index:60;display:inline-flex;align-items:center;
  gap:9px;padding:13px 16px;border:1px solid var(--lime);border-right:0;background:#052424;
  color:var(--lime);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:.3s var(--ease)}
.ch-vidkryty svg{width:15px;height:15px;fill:none;stroke:var(--lime);stroke-width:1.6}
.ch-vidkryty:hover{background:var(--lime);color:#052424}
.ch-vidkryty:hover svg{stroke:#052424}

.ch-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:70;
  background:#04201f;border-left:1px solid var(--edge);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .42s var(--ease);visibility:hidden}
body.ch-open .ch-panel{transform:none;visibility:visible}
body.ch-open .ch-vidkryty{opacity:0;pointer-events:none}
/* на широкому екрані сайт від’їжджає, а не ховається під панеллю */
@media(min-width:1100px){
  body{transition:padding-right .42s var(--ease)}
  body.ch-open{padding-right:420px}
}
.ch-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid var(--edge)}
.ch-hd b{display:block;color:#fff;font-size:15px;font-weight:500}
.ch-hd span{display:block;color:var(--dim);font-size:11.5px;margin-top:4px;line-height:1.4}
.ch-hd-kn{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ch-mova{display:flex;align-items:center;gap:6px}
.ch-mova span{font-size:9px}
.ch-mova select{background:transparent;border:1px solid var(--edge);color:var(--tx2);
  font-family:var(--mono);font-size:11px;padding:5px 6px;cursor:pointer}
.ch-zakryty{background:transparent;border:0;color:var(--dim);font-size:24px;line-height:1;
  cursor:pointer;padding:0 4px}
.ch-zakryty:hover{color:var(--lime)}

.ch-strichka{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.ch-msg{display:flex;gap:10px;align-items:flex-start;max-width:92%}
.ch-msg p{margin:0;padding:11px 13px;border:1px solid var(--edge);font-size:13.5px;
  line-height:1.55;color:var(--tx2);white-space:pre-wrap;word-break:break-word}
.ch-msg i{width:7px;height:7px;flex:0 0 auto;margin-top:14px;background:var(--lime)}
.ch-bot p{background:rgba(255,255,255,.03)}
.ch-ya{align-self:flex-end;flex-direction:row-reverse}
.ch-ya i{background:var(--dim)}
.ch-ya p{background:rgba(171,255,2,.08);border-color:#6d7a52;color:#fff}
.ch-oper p{border-color:var(--lime);color:var(--lime)}
.ch-druk p{color:var(--dim);font-style:italic}

.ch-shvydki{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.ch-shv{border:1px solid var(--edge);background:transparent;color:var(--tx2);font-size:12px;
  padding:8px 12px;cursor:pointer;transition:.25s var(--ease)}
.ch-shv:hover{border-color:var(--lime);color:#fff;background:rgba(171,255,2,.08)}
.ch-forma{display:flex;gap:8px;padding:14px 18px 18px;border-top:1px solid var(--edge)}
.ch-forma input{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--edge);color:#fff;
  font-family:var(--sans);font-size:13.5px;padding:12px;outline:none}
.ch-forma input:focus{border-color:var(--lime)}
.ch-nadislaty{border:1px solid var(--lime);background:var(--lime);color:#052424;
  font-size:13px;font-weight:500;padding:12px 16px;cursor:pointer}
.ch-nadislaty:hover{filter:brightness(1.1)}
.ch-nadislaty[disabled]{opacity:.5;cursor:default}
@media(prefers-reduced-motion:reduce){.ch-panel,body{transition:none}}

/* власний перемикач мови в чаті — з анімацією й стрілкою */
.ch-mova{position:relative}
.ch-mova-kn{display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:1px solid var(--edge);color:var(--tx2);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;padding:6px 9px;cursor:pointer;transition:.25s var(--ease)}
.ch-mova-kn:hover{border-color:var(--lime);color:#fff}
.ch-mova-kn svg{width:10px;height:7px;fill:none;stroke:var(--lime);stroke-width:1.6;
  transition:transform .28s var(--ease)}
.ch-mova.vidkryto .ch-mova-kn{border-color:var(--lime);color:#fff}
.ch-mova.vidkryto .ch-mova-kn svg{transform:rotate(180deg)}
.ch-mova-sp{position:absolute;top:calc(100% + 6px);right:0;z-index:5;margin:0;padding:5px;
  list-style:none;background:#04201f;border:1px solid var(--lime);min-width:78px;
  max-height:min(280px,60vh);overflow-y:auto;
  opacity:0;transform:translateY(-8px) scaleY(.94);transform-origin:top center;
  pointer-events:none;transition:opacity .22s var(--ease),transform .28s var(--ease)}
.ch-mova.vidkryto .ch-mova-sp{opacity:1;transform:none;pointer-events:auto}
.ch-mova-sp li{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tx3);
  padding:7px 10px;cursor:pointer;transition:.18s var(--ease)}
.ch-mova-sp li:hover,.ch-mova-sp li:focus{background:rgba(171,255,2,.14);color:#fff;outline:none}
.ch-mova-sp li.obrano{color:var(--lime)}
.ch-mova-sp li.obrano::after{content:" ·";color:var(--lime)}
.ch-znyzhka{border-color:var(--lime)!important;color:var(--lime)!important}
.ch-znyzhka:hover{background:rgba(171,255,2,.16)!important;color:#fff!important}
.ch-reg{display:inline-block;margin-top:10px;padding:9px 14px;border:1px solid var(--lime);
  background:var(--lime);color:#052424;text-decoration:none;font-size:12.5px;font-weight:500}
.ch-reg:hover{filter:brightness(1.1)}

/* ── бічні кнопки: оператор на зв’язку + акція ──────────────── */
.ch-knopky{position:fixed;right:0;bottom:26px;z-index:60;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px}
body.ch-open .ch-knopky,body.menyu .ch-knopky{opacity:0;pointer-events:none;transition:opacity .3s}

.ch-vidkryty{position:static;display:inline-flex;align-items:center;gap:9px;padding:12px 16px;
  border:1px solid #2bffc4;border-right:0;background:#04201f;color:#2bffc4;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:.3s var(--ease);position:relative}
.ch-vidkryty svg{width:16px;height:16px;fill:none;stroke:#2bffc4;stroke-width:1.5}
.ch-vidkryty:hover{background:#2bffc4;color:#04201f}
.ch-vidkryty:hover svg{stroke:#04201f}
.ch-pulse{width:7px;height:7px;border-radius:50%;background:#2bffc4;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(43,255,196,.7);animation:chPulse 2.1s ease-out infinite}
@keyframes chPulse{0%{box-shadow:0 0 0 0 rgba(43,255,196,.65)}
  70%{box-shadow:0 0 0 11px rgba(43,255,196,0)}100%{box-shadow:0 0 0 0 rgba(43,255,196,0)}}
.ch-stan{font-style:normal;font-size:9px;letter-spacing:.12em;color:var(--dim);
  position:absolute;right:14px;bottom:-13px;white-space:nowrap}

.ch-akciya{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;
  border:1px solid #d8ff00;border-right:0;background:#04201f;color:#d8ff00;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:.3s var(--ease);animation:akcBlym 3.4s var(--ease) infinite}
.ch-akciya b{font-size:14px;letter-spacing:.02em}
.ch-akciya:hover{background:#d8ff00;color:#04201f;animation:none}
@keyframes akcBlym{0%,84%{box-shadow:none;background:#04201f}
  90%{box-shadow:0 0 18px -2px rgba(216,255,0,.55);background:#0a2a12}
  100%{box-shadow:none;background:#04201f}}
@media(max-width:700px){
  .ch-knopky{bottom:14px;right:10px;flex-direction:row-reverse;align-items:center}
  .ch-vidkryty,.ch-akciya{border-right:1px solid currentColor}
  .ch-stan{display:none}
}
@media(prefers-reduced-motion:reduce){.ch-akciya,.ch-pulse{animation:none}}

/* правки панелі: повідомлення на всю ширину, вирівнювання за автором */
.ch-msg{max-width:100%;align-self:flex-start}
.ch-msg p{flex:1 1 auto;min-width:0}
.ch-ya{align-self:flex-end;max-width:88%}
.ch-bot{align-self:flex-start}
.ch-oper p{background:rgba(171,255,2,.06)}
.ch-msg .ch-reg{display:inline-block}

/* кнопка акції: іконка знижки, без дублювання відсотків */
.ch-akciya svg{width:15px;height:15px;fill:none;stroke:#d8ff00;stroke-width:1.5}
.ch-akciya:hover svg{stroke:#04201f}

/* ── сусіди на карті регіону ─────────────────────────────────── */
.k-more{fill:rgba(20,74,92,.34);stroke:rgba(120,190,210,.22);stroke-width:1}
.k-nejtr{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.16);stroke-width:1;
  stroke-linejoin:round}
.k-ev{fill:url(#evFill);stroke:#ffd400;stroke-width:1.3;stroke-linejoin:round;opacity:0;
  animation:uaPokaz 1.2s 1.1s forwards}
.k-rf{fill:url(#rfFill);stroke:#b3272a;stroke-width:1.3;stroke-linejoin:round;opacity:0;
  animation:rfPokaz 1.4s 1.4s forwards}
@keyframes rfPokaz{to{opacity:1}}
.k-son{opacity:0;animation:uaPokaz 1s 2s forwards}
.son-syaj{fill:url(#sonce)}
.son-yadro{fill:#ffd400;filter:drop-shadow(0 0 10px rgba(255,212,0,.7))}
.son-p{stroke:#ffd400;stroke-width:2.4;stroke-linecap:round;opacity:.7}
.k-son{transform-box:view-box}
.k-son .son-p{animation:soncePul 3.4s ease-in-out infinite}
@keyframes soncePul{0%,100%{opacity:.35}50%{opacity:.95}}
.k-serce{fill:#abff02;opacity:.9}
.krov-k{stroke:#b3272a;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;
  stroke-dashoffset:1;animation:draw 1.4s ease-in var(--d,3.4s) both}
.krov-o{fill:#b3272a;opacity:0;animation:krovKap 2.6s ease-in var(--d,4.1s) infinite}
@keyframes krovKap{0%{opacity:0;transform:translateY(0)}
  14%{opacity:.9}70%{opacity:.9;transform:translateY(18px)}
  100%{opacity:0;transform:translateY(30px)}}
.ua-404{font-size:34px;filter:drop-shadow(0 0 10px rgba(179,39,42,.55))}
.ua-shid{animation-delay:3.6s}
.ua-lyubov{font-size:13px;opacity:1}
@media(prefers-reduced-motion:reduce){
  .krov-o,.k-son .son-p{animation:none}
  .krov-k{stroke-dashoffset:0;animation:none}}

/* ── єдина шапка розділу ─────────────────────────────────────── */
.hero--dok .krykhty{margin:0 0 clamp(18px,2vw,26px)}
.hero--dok h1{margin:0 0 clamp(16px,1.8vw,24px)}
.hero--dok .pmeta{margin:0 0 14px}
.hero--dok .lead{margin:0 0 clamp(18px,2vw,26px)}
.hero--dok .lead + .lead{margin-top:-8px}
.hero--dok .chips{margin:0}
.hero--dok .chips + .acts{margin-top:clamp(26px,3vw,38px)}

/* ── бібліотека малюнків розділів ────────────────────────────── */
.schema .an{overflow:visible}
.an-bl{fill:rgba(255,255,255,.045);stroke:#31544e;stroke-width:1}
.an-foto{fill:rgba(171,255,2,.10);stroke:rgba(171,255,2,.30);stroke-width:1}
.an-str{fill:#31544e}
.an-zag{fill:#e5e5e5}
.an-tk{fill:none;stroke:#31544e;stroke-width:1}
.an-tk-a{fill:var(--lime);stroke:none}
.an-knop{fill:rgba(171,255,2,.12);stroke:var(--lime);stroke-width:1}
.an-vuz{fill:rgba(255,255,255,.04);stroke:#31544e;stroke-width:1}
.an-gotovo{stroke:var(--lime);fill:rgba(171,255,2,.10)}
.an-staryj{stroke:#4a4a4a;fill:rgba(255,255,255,.02)}
.an-shyna{stroke:#31544e;stroke-width:1}
.an-vitka{fill:none;stroke:#31544e;stroke-width:1}
.an-strilka{fill:none;stroke:var(--lime);stroke-width:1.4}
.an-kolo{fill:none;stroke:#31544e;stroke-width:1}
.an-ik{fill:none;stroke:var(--lime);stroke-width:1.5;stroke-linejoin:round}
.an-lyud{fill:rgba(171,255,2,.16);stroke:var(--lime);stroke-width:1}
.an-robot{fill:none;stroke:var(--lime);stroke-width:1.4}
.an-mitka{fill:var(--lime)}
.an-mitka-t{fill:#052424;font-weight:600}
.an-avat{fill:none;stroke:var(--lime);stroke-width:1.2}

/* курсор, який під'їжджає і клацає */
.an-kur{fill:#e5e5e5;opacity:0}
body.run .hero .schema .an-kur{animation:kurRuh 1.5s var(--ease) var(--d,2s) both}
@keyframes kurRuh{0%{opacity:0;transform:translate(var(--kx,0),var(--ky,0)) translate(30px,26px)}
  18%{opacity:1}
  60%{opacity:1;transform:translate(var(--kx,0),var(--ky,0))}
  70%{transform:translate(var(--kx,0),var(--ky,0)) scale(.86)}
  80%,100%{opacity:1;transform:translate(var(--kx,0),var(--ky,0))}}

/* магазин */
.an-tovar{fill:rgba(171,255,2,.22);stroke:var(--lime);stroke-width:1}
.an-letyt{opacity:0}
body.run .hero .schema .an-letyt{animation:tovarLet 1.3s var(--ease) var(--d,2.2s) both}
@keyframes tovarLet{0%{opacity:0;transform:translate(52px,60px)}
  16%{opacity:1}90%{opacity:1;transform:translate(246px,272px) scale(.6)}
  100%{opacity:0;transform:translate(252px,282px) scale(.4)}}
.an-kosh{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linejoin:round}
.an-lich{fill:var(--lime)}
.an-lich-t{fill:#052424;font-weight:600}

/* SEO */
.an-lupa{fill:none;stroke:var(--lime);stroke-width:1.6}
.an-lupa-r{stroke:var(--lime);stroke-width:1.8;stroke-linecap:round}
.an-nash{fill:rgba(171,255,2,.14);stroke:var(--lime);stroke-width:1.4}
.an-nash-t{fill:var(--lime);font-weight:600}
.an-pidjom{opacity:0}
body.run .hero .schema .an-pidjom{animation:seoVhor 3.4s var(--ease2) 1.7s both}
@keyframes seoVhor{0%{opacity:0;transform:translateY(316px)}
  12%{opacity:1;transform:translateY(316px)}
  34%{transform:translateY(220px)}
  56%{transform:translateY(156px)}
  78%{transform:translateY(92px)}
  100%{opacity:1;transform:translateY(90px)}}

/* GEO */
.an-pin-t{fill:rgba(171,255,2,.20);stroke:var(--lime);stroke-width:1.5}
.an-pin-o{fill:var(--lime)}
.an-pin{opacity:0}
body.run .hero .schema .an-pin{animation:pinPad .7s var(--ease) var(--d,1.4s) both}
@keyframes pinPad{0%{opacity:0;transform:translate(160px,150px) translateY(-56px)}
  60%{opacity:1}100%{opacity:1;transform:translate(160px,150px)}}
.an-hvyl{fill:none;stroke:var(--lime);stroke-width:1.2;opacity:0;
  animation:anHvylya 2.8s 2.2s ease-out infinite}
.an-hvyl.h2{animation-delay:3.6s}
@keyframes anHvylya{0%{r:10;opacity:.85}100%{r:62;opacity:0}}
.an-misto{fill:var(--lime);opacity:.85}
.an-misto-k{fill:none;stroke:rgba(171,255,2,.35);stroke-width:1}

/* реклама і фрод */
.an-shchyt{fill:rgba(171,255,2,.08);stroke:var(--lime);stroke-width:1.5;stroke-linejoin:round}
.an-halka{fill:none;stroke:var(--lime);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round}
.an-frod{stroke:#ff5c5c;stroke-width:2.2;stroke-linecap:round;fill:none;opacity:0}
body.run .hero .schema .an-frod{animation:frodBlym 2.4s linear var(--d,2s) infinite}
@keyframes frodBlym{0%{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.4)}
  14%{opacity:.95;transform:scale(1)}46%{opacity:.95}60%{opacity:0}100%{opacity:0}}

/* бот */
.an-bulb{fill:rgba(255,255,255,.05);stroke:#31544e;stroke-width:1}
.an-bulb-bot{stroke:var(--lime);fill:rgba(171,255,2,.10)}
.an-krap{fill:var(--lime);animation:krapDum 1.2s ease-in-out infinite}
.an-krap.k2{animation-delay:.16s}.an-krap.k3{animation-delay:.32s}
@keyframes krapDum{0%,100%{opacity:.25}50%{opacity:1}}
.an-blysk{fill:var(--lime);opacity:.9}

/* застосунок */
.an-fon{fill:rgba(255,255,255,.03);stroke:#31544e;stroke-width:1.4}
.an-dyn{fill:#31544e}
.an-ekran{opacity:0}
body.run .hero .schema .an-ekran{animation:ekranZmina 6s linear 1.2s infinite}
.an-ekran2{animation-delay:3.2s!important}
.an-ekran3{animation-delay:5.2s!important}
@keyframes ekranZmina{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
.an-push{fill:rgba(171,255,2,.10);stroke:var(--lime);stroke-width:1}
.an-palec{fill:rgba(229,229,229,.35);opacity:0}
body.run .hero .schema .an-palec{animation:palecTyk 2.2s ease-in-out var(--d,2.9s) infinite}
@keyframes palecTyk{0%{opacity:0;transform:translate(196px,236px) scale(.4)}
  20%{opacity:.8;transform:translate(196px,236px) scale(1)}
  40%{opacity:0;transform:translate(196px,236px) scale(1.5)}100%{opacity:0}}

/* інтеграції */
.an-paket{fill:var(--lime)}
body.run .hero .schema .an-paket{animation:paketRuh 1.8s linear var(--d,1.5s) infinite}
@keyframes paketRuh{0%{opacity:0;transform:translateX(126px)}
  10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(206px)}}
body.run .hero .schema .an-paket.an-nazad{animation-name:paketNazad}
@keyframes paketNazad{0%{opacity:0;transform:translateX(206px)}
  10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(126px)}}

/* нейромережа */
.an-nerv{stroke:rgba(49,84,78,.7);stroke-width:.8}
.an-vuzol{fill:#052424;stroke:#31544e;stroke-width:1.4;
  animation:vuzolSpal 3.6s ease-in-out infinite}
.an-vuzol-a{fill:var(--lime);stroke:none}
@keyframes vuzolSpal{0%,100%{stroke:#31544e}42%{stroke:var(--lime)}58%{stroke:var(--lime)}}

/* оптимізація */
.an-klubok{fill:none;stroke:#7d5b3a;stroke-width:1.4;opacity:.75}
.an-pryama{stroke:var(--lime);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1}

/* підтримка */
.an-puls{fill:none;stroke:var(--lime);stroke-width:1.8;stroke-dasharray:1;
  stroke-linejoin:round}
.an-serce-o{fill:var(--lime)}
.an-serce{opacity:0}
body.run .hero .schema .an-serce{animation:sercePul 1.6s ease-in-out var(--d,1.8s) infinite}
@keyframes sercePul{0%{opacity:0;transform:scale(1)}20%{opacity:1;transform:scale(1.7)}
  50%{opacity:.5;transform:scale(1)}100%{opacity:0}}

/* перенесення */
.an-korob{fill:rgba(171,255,2,.25);stroke:var(--lime);stroke-width:1}
body.run .hero .schema .an-korob{animation:korobRuh 1.7s linear var(--d,1.5s) infinite}
@keyframes korobRuh{0%{opacity:0;transform:translateX(114px)}
  12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(210px)}}

/* сервери */
.an-dioda{fill:var(--lime);animation:diodaBlym 2.2s steps(1,end) infinite}
.an-dioda.d2{animation-delay:.5s}.an-dioda.d3{animation-delay:1.1s}
@keyframes diodaBlym{0%,40%{opacity:1}41%,100%{opacity:.18}}
.an-zamok{fill:rgba(171,255,2,.14);stroke:var(--lime);stroke-width:1.4}
.an-duga{fill:none;stroke:var(--lime);stroke-width:1.8}

/* шаблони */
.an-maket{opacity:0}
body.run .hero .schema .an-maket{animation:maketZmina 7.5s linear 1s infinite}
.an-maket2{animation-delay:3.5s!important}
.an-maket3{animation-delay:6s!important}
@keyframes maketZmina{0%{opacity:0}3%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
.an-tochka{fill:#31544e;animation:tochkaZmina 7.5s linear 1s infinite}
.an-tochka.t2{animation-delay:3.5s}.an-tochka.t3{animation-delay:6s}
@keyframes tochkaZmina{0%,3%{fill:#31544e}4%,30%{fill:#abff02}34%,100%{fill:#31544e}}

/* блог */
.an-ryad{opacity:0;transform-origin:left center}
body.run .hero .schema .an-ryad{animation:ryadDruk .5s steps(12,end) var(--d,1s) both}
@keyframes ryadDruk{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

/* таймер відповіді */
.an-duga-t{fill:none;stroke:var(--lime);stroke-width:2.4;
  stroke-dasharray:189;stroke-dashoffset:189;transform:rotate(-90deg);transform-origin:center}
body.run .hero .schema .an-tajmer .an-duga-t{animation:dugaHid 2.4s var(--ease2) 3s both}
@keyframes dugaHid{to{stroke-dashoffset:56}}
.an-tajmer{opacity:0}
body.run .hero .schema .an-tajmer{animation:fade .5s linear var(--d,2.8s) both}

/* агенти */
.an-prohres{fill:var(--lime);transform-origin:left center}
body.run .hero .schema .an-prohres{animation:prohresIde 1.6s var(--ease2) var(--d,1.9s) both}
@keyframes prohresIde{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* еквалайзер */
.an-ekv{fill:var(--lime);opacity:.8;transform-origin:center 270px;
  animation:ekvRuh 1.1s ease-in-out infinite alternate}
.an-ekv.e2{animation-delay:.12s}.an-ekv.e3{animation-delay:.24s}
.an-ekv.e4{animation-delay:.36s}.an-ekv.e5{animation-delay:.48s}.an-ekv.e6{animation-delay:.6s}
@keyframes ekvRuh{from{transform:scaleY(.12)}to{transform:scaleY(1)}}

@media(prefers-reduced-motion:reduce){
  .an-hvyl,.an-krap,.an-dioda,.an-ekv,.an-vuzol,.an-frod,.an-paket,.an-korob,
  .an-palec,.an-serce,.an-ekran,.an-maket,.an-tochka{animation:none}
  .an-ekran1,.an-maket1{opacity:1}
  .an-pidjom,.an-pin,.an-letyt,.an-kur,.an-tajmer,.an-ryad{opacity:1;animation:none}
}

/* ── чат: мікрофон, файл, озвучення ──────────────────────────── */
.ch-ik{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--edge);background:transparent;cursor:pointer;
  color:var(--dim);transition:.25s var(--ease);position:relative}
.ch-ik svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round}
.ch-ik:hover{border-color:var(--lime);color:var(--lime)}
.ch-ik:focus-visible{outline:1px solid var(--lime);outline-offset:2px}
.ch-mik.slukhaye{border-color:var(--lime);color:var(--lime);background:rgba(171,255,2,.10)}
.ch-mik.slukhaye svg{animation:mikPul 1.1s ease-in-out infinite}
@keyframes mikPul{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* хвилі: видно, що людина зараз говорить */
.ch-hvyli{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  display:none;align-items:flex-end;gap:2px;height:12px}
.ch-mik.slukhaye .ch-hvyli{display:flex}
.ch-hvyli i{width:2px;height:100%;background:var(--lime);transform-origin:bottom center;
  animation:hvylyaRuh .8s ease-in-out infinite alternate}
.ch-hvyli i:nth-child(2){animation-delay:.1s}
.ch-hvyli i:nth-child(3){animation-delay:.2s}
.ch-hvyli i:nth-child(4){animation-delay:.3s}
.ch-hvyli i:nth-child(5){animation-delay:.4s}
@keyframes hvylyaRuh{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

/* поки диктують — рядок повідомлення підсвічений */
body.ch-holos .ch-forma{border-color:var(--lime);box-shadow:0 0 0 1px rgba(171,255,2,.25)}

.ch-holos{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--edge);background:transparent;color:var(--dim);cursor:pointer;
  transition:.25s var(--ease)}
.ch-holos svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round}
.ch-holos .ch-zv1,.ch-holos .ch-zv2{opacity:.35}
.ch-holos.uvimk{border-color:var(--lime);color:var(--lime);background:rgba(171,255,2,.10)}
.ch-holos.uvimk .ch-zv1{opacity:1;animation:zvukHvyl 1.4s ease-in-out infinite}
.ch-holos.uvimk .ch-zv2{opacity:1;animation:zvukHvyl 1.4s ease-in-out .2s infinite}
@keyframes zvukHvyl{0%,100%{opacity:.3}50%{opacity:1}}
.ch-holos:hover{border-color:var(--lime);color:var(--lime)}

.ch-fajl-ryad{margin:0 16px 8px;padding:8px 12px;border:1px dashed var(--lime);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--lime);
  background:rgba(171,255,2,.06)}

@media(prefers-reduced-motion:reduce){
  .ch-hvyli i,.ch-mik.slukhaye svg,.ch-holos.uvimk .ch-zv1,.ch-holos.uvimk .ch-zv2{
    animation:none}
}

/* ── ціни зі знижкою ─────────────────────────────────────────── */
.prays .c{white-space:nowrap;line-height:1.5}
.pr-baza{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1px;
  opacity:.65;font-size:.92em;margin-right:9px}
.pr-nova{color:var(--lime);font-weight:600}
.pr-zn{display:inline-flex;align-items:baseline;gap:6px;margin-left:10px;padding:2px 8px;
  border:1px solid rgba(171,255,2,.42);background:rgba(171,255,2,.10);color:var(--lime);
  font-family:var(--mono);font-size:10.5px;font-style:normal;letter-spacing:.08em;
  vertical-align:middle}
.pr-zn em{font-style:normal;color:var(--dim);letter-spacing:.06em;font-size:9.5px}
.pr-nota{margin:14px 0 0;color:var(--dim);font-size:11px;letter-spacing:.06em}
@media(max-width:719px){
  .prays .c{white-space:normal}
  .pr-zn{margin:4px 0 0;display:inline-flex}
  .pr-zn em{display:none}
}

/* джерело відгуків: вимога ЄС і найсильніший сигнал довіри для ШІ */
.vd-dzherelo{margin:18px 0 0;max-width:78ch;color:var(--dim);font-size:11px;
  line-height:1.7;letter-spacing:.04em}

/* ── шапка на телефоні ──────────────────────────────────────────────
   Стоїть у кінці файлу свідомо: попередній варіант жив у середині, і
   пізніший загальний рядок `.nav{display:flex}` мовчки його скасував —
   меню розсипалося на всіх сторінках, а помітно це лише на телефоні. */
@media (max-width:719px){
  .nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
    align-items:start;padding:12px 0 14px}
  .nav a{font-size:13.5px;align-items:center}
  .nav .has{grid-column:1 / -1}
  .nav .nv-sep{display:none}
  /* Телефон — окремим рядком на всю ширину: це головна дія на телефоні,
     і тиснути по ньому має бути легко великим пальцем. */
  .nav .nv-tel{grid-column:1 / -1;margin:2px 0 0;padding:11px 0 3px;
    width:100%;font-size:15px;border-top:1px solid var(--edge)}
  .nav .nv-kab{grid-column:1 / -1;margin:0;padding:4px 0 0;width:100%;font-size:13.5px}
  .nav .nv-kab::before{display:none}
}
/* Один стовпець на вузькому екрані пробували — вісім пунктів займали цілий
   перший екран, і людина бачила меню замість пропозиції. Лишаємо два. */
@media (max-width:400px){
  .nav{gap:11px 12px}
  .nav a{font-size:13px}
}

/* Поле для тексту дрібніше за 16px змушує телефон наближати сторінку при
   натисканні, і вона з'їжджає вбік. Радіо й галочки цього не роблять. */
@media (max-width:719px){
  input:not([type=radio]):not([type=checkbox]):not([type=file]),
  select,textarea{font-size:16px}
}

/* ── мобільне меню ─────────────────────────────────────────────────────────
   Панель тримається верхнього й бокового краю, а розкривається колом із самої
   кнопки — тому «фон іде від неї». backdrop-filter НЕ беремо: він задушив би
   LCP, а поріг швидкості тут 90. */
.burger{display:none;position:relative;width:44px;height:44px;flex:0 0 auto;
  margin:-6px -8px -6px 0;border:1px solid var(--edge);background:transparent;
  padding:0;cursor:pointer;z-index:210;border-radius:0;
  transition:border-color .25s var(--ease)}
.burger i{position:absolute;left:12px;width:20px;height:1.6px;background:var(--lime);
  transition:transform .42s var(--ease),opacity .22s linear,width .42s var(--ease)}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px;width:13px}
.burger i:nth-child(3){top:27px}
.burger:hover,.burger:focus-visible{border-color:var(--lime)}
.burger:focus-visible{outline:1px solid var(--lime);outline-offset:3px}
body.menyu .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menyu .burger i:nth-child(2){opacity:0;width:0}
body.menyu .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menyu-tlo{position:fixed;inset:0;z-index:190;background:rgba(2,14,13,.72);
  opacity:0;transition:opacity .34s linear}
body.menyu .menyu-tlo{opacity:1}

@media (max-width:719px){
  .burger{display:block}
  .nav{position:fixed;inset:0;z-index:200;display:block;
    padding:84px 24px 34px;overflow-y:auto;overscroll-behavior:contain;
    background:
      radial-gradient(128% 78% at 100% 0,rgba(171,255,2,.17),rgba(171,255,2,0) 56%),
      linear-gradient(180deg,#063230 0%,#04221f 58%,#031614 100%);
    clip-path:circle(0% at calc(100% - 30px) 38px);
    transition:clip-path .58s cubic-bezier(.22,1,.36,1);
    visibility:hidden}
  body.menyu .nav{clip-path:circle(146% at calc(100% - 30px) 38px);visibility:visible}
  body.menyu{overflow:hidden}

  /* Смуга світла вздовж верхнього краю — те, від чого «йде фон». */
  .nav::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--lime) 68%,var(--lime))}

  .nav>a,.nav>.has{display:block;width:auto;margin:0;padding:15px 2px;
    border-bottom:1px solid rgba(171,255,2,.13);font-size:17px;
    opacity:0;transform:translateY(14px);
    transition:opacity .4s linear,transform .5s var(--ease)}
  body.menyu .nav>a,body.menyu .nav>.has{opacity:1;transform:none}
  body.menyu .nav>*:nth-child(1){transition-delay:.16s}
  body.menyu .nav>*:nth-child(2){transition-delay:.21s}
  body.menyu .nav>*:nth-child(3){transition-delay:.26s}
  body.menyu .nav>*:nth-child(4){transition-delay:.31s}
  body.menyu .nav>*:nth-child(5){transition-delay:.36s}
  body.menyu .nav>*:nth-child(6){transition-delay:.41s}
  body.menyu .nav>*:nth-child(7){transition-delay:.46s}
  body.menyu .nav>*:nth-child(8){transition-delay:.51s}
  body.menyu .nav>*:nth-child(9){transition-delay:.56s}
  body.menyu .nav>*:nth-child(10){transition-delay:.61s}

  .nav .has>a{display:flex;align-items:center;gap:0;padding:0;font-size:17px;
    color:var(--tx)}
  .nav>a,.nav .has>a{color:var(--tx)}
  .nav .idx{margin-right:10px;flex:0 0 auto}
  /* Специфічність тут не менша за десктопне `.nav .has > a .ca`, інакше
     стрілка лишалась би сірою десяткою біля тексту. */
  .nav .has > a .ca{margin-left:auto;padding:11px 4px 11px 22px;font-size:24px;
    line-height:1;display:inline-flex;align-items:center;min-height:44px;
    color:var(--lime);opacity:.72;
    transform:rotate(90deg);transform-origin:56% 50%;
    transition:transform .38s var(--ease),opacity .2s linear}
  .nav .has.rozkryto > a .ca{opacity:1;transform:rotate(-90deg)}
  .nav .has:hover > a .ca,.nav .has:focus-within > a .ca{transform:rotate(90deg)}
  .nav .has.rozkryto:hover > a .ca{transform:rotate(-90deg)}

  /* Логотип і перемикач мов лишаються над панеллю: інакше, поки меню
     відкрите, мову змінити нічим. Службові лічильники ховаємо. */
  body.menyu .topbar{position:relative;z-index:205}
  .readout .rd{transition:opacity .22s linear}
  body.menyu .readout .rd{opacity:0;pointer-events:none}
  .nav .has .drop{position:static;display:block;opacity:1;visibility:visible;
    transform:none;border:0;background:transparent;box-shadow:none;
    padding:0;min-width:0;width:auto;
    max-height:0;overflow:hidden;
    transition:max-height .48s var(--ease),padding .3s linear}
  .nav .has.rozkryto .drop{max-height:1100px;padding:10px 0 2px}
  .nav .has .drop a{display:block;padding:9px 0 9px 16px;border-left:1px solid var(--edge);
    font-size:14.5px}
  .nav .has .drop a em{display:block;font-size:11.5px;color:var(--dim);font-style:normal}

  .nav .nv-sep{display:none}
  .nav .nv-tel{display:flex;width:auto;margin:18px 0 0;padding:14px 2px;
    font-size:17px;border-top:0;border-bottom:1px solid rgba(171,255,2,.13)}
  .nav .nv-kab{display:flex;width:auto;margin:0;padding:14px 2px;font-size:16px;
    padding-left:0}
  .nav .nv-kab::before{display:none}
}

@media (max-width:719px) and (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav>a,.nav>.has{transition:none;opacity:1;transform:none}
  .burger i{transition:none}
  .menyu-tlo{transition:none}
}