/* CliXoft AI-демо: базовий шар (однаковий для всіх демо) */
/* тема компанії «Мережа Смак» */
:root{
  --ink:255,255,255;--bg2:#0B1220;--card:rgba(255,255,255,.045);--card2:rgba(255,255,255,.07);--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.18);
  --blue:#3B82F6;--blue2:#93B4FF;
  --t:#fff;--t2:rgba(255,255,255,.78);--t3:rgba(255,255,255,.6);--t4:rgba(255,255,255,.52);
  --ok:#3ec26b;--warn:#fab219;--serious:#ec835a;--crit:#e66767;
  --ok-t:#7fe0a0;--warn-t:#ffd27a;--serious-t:#f7ad8e;--crit-t:#ff9d9d;--tg-t:#8fd6ff;--vb-t:#b9adff;
  --chip:#1F2937;--tip:#1F2937;--field:rgba(0,0,0,.28);--scheme:dark;--hdr-bg:rgba(10,14,22,.92);--co-bg:#0B1220;
  --cx-bg:#F8FAFC;--cx-t:#111827;--sh:none;
  --acc:132,204,22;--bg:#111827;--gold:#84CC16;--g1:#A3E635;--g2:#84CC16;--tint:#1A2433;--btxt:#1A2E05;
  --r:24px;--r2:20px;--r3:14px;
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--t);font:500 16px/1.55 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,svg{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;border-radius:999px;padding:12px 22px;font-size:15px;transition:transform .15s,box-shadow .2s,background .2s,opacity .2s;white-space:nowrap}
.btn-gold{background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--btxt);box-shadow:0 8px 24px -6px rgba(var(--acc),.45)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(var(--acc),.34)}
.btn-ghost{border:1px solid var(--line2);color:var(--t);background:rgba(var(--ink),.03)}
.btn-ghost:hover{background:rgba(var(--ink),.07)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-sm .ic{width:16px;height:16px}

/* шапка CliXoft: тонка, нейтральна */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:12px;height:46px}
.cx{font-size:13px;font-weight:700;color:var(--t3);white-space:nowrap}
.cx b{color:var(--t);font-weight:800}
.cx:hover b{text-decoration:underline}
.btn-cx{margin-left:auto;padding:7px 15px;font-size:13px;background:var(--cx-bg);color:var(--cx-t)}
.btn-cx:hover{opacity:.88}
/* шапка компанії-клієнта */
.co{background:var(--co-bg);border-bottom:1px solid var(--line)}
.co-in{display:flex;align-items:center;gap:12px;height:66px}
.co-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--btxt);flex:none;box-shadow:0 6px 16px -6px rgba(var(--acc),.55)}
.co-logo svg{width:23px;height:23px}
.co-n b{display:block;font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.15;color:var(--t)}
.co-n small{display:block;font-size:12.5px;color:var(--t3);font-weight:600;line-height:1.3}
.co-nav{margin-left:auto;display:flex;gap:4px}
.co-nav span{font-size:13.5px;font-weight:700;color:var(--t3);padding:7px 12px;border-radius:10px;white-space:nowrap}
.co-nav span.on{background:rgba(var(--acc),.1);color:var(--gold)}
.card,.panel,.fcol{box-shadow:var(--sh)}
.ui-top{background:rgba(var(--acc),.05)}
@media (max-width:640px){
  .hdr-in{height:44px}
  .cx{font-size:12.5px}
  .btn-cx{padding:6px 12px;font-size:12.5px}
  .co-in{height:58px;gap:10px}
  .co-logo{width:34px;height:34px;border-radius:10px}
  .co-logo svg{width:20px;height:20px}
  .co-n b{font-size:16px}
  .co-n small{font-size:11.5px}
  .co-nav span:not(.on){display:none}
  .co-nav span.on{padding:6px 10px;font-size:12.5px}
}

/* плашка демо */
.note{border-bottom:1px solid var(--line);background:rgba(var(--acc),.06)}
.note .wrap{display:flex;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px;font-size:13.5px;color:var(--t2)}
.note .ic{width:17px;height:17px;color:var(--gold)}
.note b{color:var(--t);font-weight:700}

/* hero */
.hero{position:relative;padding:64px 0 34px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-200px -10% auto;height:520px;background:radial-gradient(40% 60% at 22% 40%,rgba(var(--acc),.13),transparent 70%),radial-gradient(30% 50% at 85% 20%,rgba(47,107,255,.10),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--gold)}
.kicker::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--gold)}
.hero h1{font-size:clamp(32px,4.6vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:16px 0 18px;max-width:920px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ba{font-size:18px;line-height:1.5;color:var(--t2);max-width:860px}
.ba .was{color:var(--t3)}
.ba .arr{color:var(--gold);font-weight:800;padding:0 6px}
.ba .now{color:var(--t)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* секції */
.sec{padding:56px 0}
.sec-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:26px}
.sec-h h2{font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.02em;font-weight:800}
.sec-h p{color:var(--t2);max-width:520px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}

/* робоча зона */
.demo{padding-top:22px}
.wz{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:20px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.panel-h .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:rgba(var(--acc),.14);color:var(--gold);flex:none}
.panel-h h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.panel-h .aside{margin-left:auto;font-size:12.5px;color:var(--t3);font-weight:700;text-align:right}
.lbl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin:0 0 9px}
.ex-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:18px}
.ex{text-align:left;padding:11px 13px;border-radius:16px;border:1px solid var(--line);background:rgba(var(--ink),.02);transition:border-color .2s,background .2s}
.ex:hover{border-color:var(--line2);background:rgba(var(--ink),.05)}
.ex b{display:block;font-size:14px;font-weight:800;line-height:1.3}
.ex span{display:block;font-size:12.5px;color:var(--t3);margin-top:3px;line-height:1.35}
.ex.on{border-color:rgba(var(--acc),.7);background:rgba(var(--acc),.08)}
.ex.on b{color:var(--gold)}
.hint{font-size:12.5px;color:var(--t3);margin-top:8px;display:flex;gap:6px;align-items:center}
.hint .ic{width:15px;height:15px;color:var(--gold)}
.run{width:100%;margin-top:18px;padding:16px 22px;font-size:16px}
.run[disabled]{opacity:.6;cursor:progress;transform:none}
.run .ic{width:19px;height:19px}
.field{width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:9px 11px;font-size:14px;outline:none;transition:border-color .2s}
.field:focus{border-color:rgba(var(--acc),.6)}
textarea.field{resize:vertical;min-height:90px;line-height:1.5}
.inp{background:transparent;border:1px solid transparent;border-radius:8px;padding:3px 6px;width:100%;outline:none;font-size:inherit;transition:border-color .2s,background .2s;border-color:rgba(var(--ink),.08)}
.inp:hover{border-color:var(--line2)}
.inp:focus{border-color:rgba(var(--acc),.6);background:var(--field)}
.hl{animation:hl 1.6s ease}
@keyframes hl{0%,100%{background-color:transparent}25%{background-color:rgba(var(--acc),.22)}}
mark{background:rgba(var(--acc),.24);color:var(--t);border-radius:4px;padding:0 2px}

/* стрічка кроків AI */
.ai-p{position:relative;overflow:hidden}
.ai-p::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 40% at 80% 0%,rgba(47,107,255,.10),transparent 70%)}
.ai-p>*{position:relative}
.steps{list-style:none;display:grid;gap:2px;margin-bottom:6px}
.steps:empty{display:none}
.step{display:flex;gap:12px;align-items:flex-start;padding:7px 10px;border-radius:14px;transition:background .3s,opacity .3s;opacity:.38}
.step .si{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(var(--ink),.06);color:var(--t2);position:relative}
.step .si .ic{width:17px;height:17px}
.step .st{font-size:14.5px;font-weight:700;line-height:1.35;padding-top:5px}
.step .sd{font-size:12.5px;color:var(--t3);font-weight:600;margin-top:1px}
.step .sd:empty{display:none}
.step.act{opacity:1;background:rgba(var(--acc),.07)}
.step.act .si{color:var(--gold);background:rgba(var(--acc),.14)}
.step.act .si::after{content:'';position:absolute;inset:-3px;border-radius:12px;border:2px solid transparent;border-top-color:var(--gold);animation:spin .8s linear infinite}
.step.done{opacity:1}
.step.done .si{color:var(--ok);background:rgba(62,194,107,.12)}
.step.done .sd{color:var(--t2)}
@keyframes spin{to{transform:rotate(360deg)}}
.dots::after{content:'';animation:dots 1s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.res-empty{border:1px dashed var(--line2);border-radius:var(--r2);padding:30px 20px;text-align:center;color:var(--t3);font-size:14px;display:grid;place-items:center;gap:10px}
.res-empty .ic{width:30px;height:30px;color:var(--gold);opacity:.8}
.result{display:grid;gap:14px;margin-top:12px}
.pop{animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.caret::after{content:'';display:inline-block;width:2px;height:1em;background:var(--gold);margin-left:2px;vertical-align:-2px;animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.res-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.res-h .ic{width:15px;height:15px;color:var(--gold)}
.res-h .r{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:700}
.ui{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.ui-top{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--t2);font-weight:700}
.ui-top .ic{width:16px;height:16px}
.ui-top .r{margin-left:auto;color:var(--t3);font-weight:600}
.ui-body{padding:14px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(var(--ink),.07);color:var(--t2);white-space:nowrap;line-height:1.4}
.tag .ic{width:13px;height:13px}
.tag.ok{background:rgba(62,194,107,.13);color:var(--ok-t)}
.tag.warn{background:rgba(250,178,25,.13);color:var(--warn-t)}
.tag.serious{background:rgba(236,131,90,.14);color:var(--serious-t)}
.tag.crit{background:rgba(230,103,103,.15);color:var(--crit-t)}
.tag.gold{background:rgba(var(--acc),.14);color:var(--gold)}
.tag.blue{background:rgba(47,107,255,.16);color:var(--blue2)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.effect{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--t2);padding:11px 13px;border-radius:14px;background:rgba(47,107,255,.07);border:1px solid rgba(47,107,255,.18)}
.effect .ic{width:17px;height:17px;color:var(--blue2);margin-top:1px}
.effect b{color:var(--t)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:80;background:var(--tip);border:1px solid var(--line2);color:var(--t);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:700;display:flex;gap:9px;align-items:center;transition:.3s;box-shadow:0 20px 40px rgba(0,0,0,.4);width:max-content;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .ic{color:var(--ok)}

/* таблиці */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);font-weight:800;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:rgba(var(--ink),.02)}
.tbl td{padding:7px 10px;border-bottom:1px solid rgba(var(--ink),.06);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.sel td{background:rgba(var(--acc),.08)}

/* інтеграція */
.flow{display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;align-items:stretch}
.fcol{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fcol h4{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);font-weight:800;margin-bottom:10px}
.fitem{display:flex;gap:12px;align-items:center;padding:9px 0}
.fitem+.fitem{border-top:1px solid rgba(var(--ink),.06)}
.fitem .fi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--ink),.06);flex:none}
.fitem .fi .ic{width:19px;height:19px}
.fitem b{display:block;font-size:14.5px;line-height:1.3}
.fitem span{display:block;font-size:12.5px;color:var(--t3);line-height:1.35}
.fcol.ai{background:linear-gradient(180deg,rgba(var(--acc),.10),rgba(var(--acc),.03));border-color:rgba(var(--acc),.35)}
.fcol.ai h4{color:var(--gold)}
.fcol.ai .fi{background:rgba(var(--acc),.14);color:var(--gold)}
.farr{display:grid;place-items:center;color:var(--gold)}
.farr .ic{width:26px;height:26px}
.flow-note{margin-top:16px;color:var(--t3);font-size:13.5px;display:flex;gap:8px;align-items:flex-start}
.flow-note .ic{width:16px;height:16px;color:var(--gold);margin-top:2px}

/* було/стало */
.chg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.chg-i{padding:20px;display:grid;gap:12px;align-content:start}
.chg-i h4{font-size:16px;font-weight:800;line-height:1.3}
.chg-i .b,.chg-i .s{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:14px;line-height:1.45}
.chg-i .b{color:var(--t3)}
.chg-i .s{color:var(--t)}
.chg-i .b i,.chg-i .s i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 0;text-align:center;border-radius:999px;height:fit-content;margin-top:1px}
.chg-i .b i{background:rgba(var(--ink),.07);color:var(--t3)}
.chg-i .s i{background:rgba(var(--acc),.15);color:var(--gold)}
.chg-foot{margin-top:14px;font-size:13px;color:var(--t3)}

/* як впроваджуємо */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.how-i{padding:22px;position:relative}
.how-i .n{font-size:13px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.how-i .n::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--acc),.4),transparent)}
.how-i h4{font-size:17px;font-weight:800;margin-bottom:8px;line-height:1.25}
.how-i p{font-size:14px;color:var(--t2)}

/* CTA */
.cta{position:relative;overflow:hidden;padding:46px;text-align:center;border-color:rgba(var(--acc),.3);background:radial-gradient(60% 90% at 50% 0%,rgba(var(--acc),.14),transparent 70%),var(--card)}
.cta h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin-bottom:12px}
.cta p{color:var(--t2);max-width:620px;margin:0 auto 24px}
.cta .btn{padding:16px 30px;font-size:16px}

/* підвал */
.ftr{border-top:1px solid var(--line);margin-top:30px}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:24px;padding-bottom:28px;font-size:13.5px;color:var(--t3)}
.ftr a{color:var(--t2);font-weight:700}
.ftr a b{color:var(--gold)}
.ftr a:hover{color:var(--t)}

@media (max-width:1020px){
  .wz{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .farr{height:46px}
  .farr .ic{transform:rotate(90deg)}
  .how{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .note .wrap{font-size:12.5px;align-items:flex-start}
  .note .ic{margin-top:2px}
  .hero{padding:38px 0 18px}
  .ba{font-size:15.5px}
  .sec{padding:40px 0}
  .panel{padding:16px;border-radius:22px}
  .panel-h{flex-wrap:wrap;row-gap:2px}
  .panel-h .aside{width:100%;margin-left:38px;text-align:left}
  .ex-list{grid-template-columns:1fr 1fr}
  .how{grid-template-columns:1fr}
  .cta{padding:32px 18px}
  .fcol{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}html{scroll-behavior:auto}}
@media (min-width:1021px) and (min-height:860px){.in-p{position:sticky;top:84px}}

/* ---- ai-zvit-kerivnyku ---- */
.srcs-in{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.si-c{border:1px solid var(--line);border-radius:16px;padding:11px;background:rgba(var(--ink),.02);transition:opacity .3s,border-color .3s}
.si-c.off{opacity:.45}
.si-h{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;cursor:pointer;position:relative;margin-bottom:8px}
.si-h b{font-size:13px;line-height:1.25}
.si-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--ink),.06);color:var(--t2)}
.si-ic .ic{width:16px;height:16px}
.sw{position:absolute;opacity:0;width:34px;height:20px;right:0;margin:0;cursor:pointer}
.swv{width:34px;height:20px;border-radius:999px;background:rgba(var(--ink),.14);position:relative;transition:background .2s;pointer-events:none}
.swv::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.sw:checked+.swv{background:var(--g2)}
.sw:checked+.swv::after{transform:translateX(14px)}
.sw:focus-visible+.swv{outline:2px solid var(--gold);outline-offset:2px}
.si-f{display:grid;gap:4px}
.kv{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:center;font-size:12px;color:var(--t3);line-height:1.3;border-radius:8px;transition:background .3s}
.kv .inp{font-size:13px;font-weight:700;text-align:right;padding:3px 6px;font-variant-numeric:tabular-nums}
.kv b{text-align:right;padding:3px 7px;font-size:13px;color:var(--t)}
.kv.bad{background:rgba(230,103,103,.12)}
.kv.bad span{color:var(--crit-t)}
.kv.bad .inp,.kv.bad b{color:var(--crit-t)}

.tgw .ui-top{gap:10px}
.tg-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--btxt)}
.tg-av .ic{width:16px;height:16px}
.tg-n b{display:block;color:var(--t);font-size:13.5px;line-height:1.2}
.tg-n small{font-size:11.5px;color:var(--t3);font-weight:600}
.tg-b{background:radial-gradient(70% 70% at 0% 100%,rgba(42,171,238,.07),transparent 70%)}
.tg-msg{background:rgba(var(--ink),.05);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:12px 14px 20px;position:relative;max-width:560px}
.tg-t{font-size:13.5px;line-height:1.6;color:var(--t)}
.tg-t b{font-weight:800}
.tg-t .mut{color:var(--t3)}
.tg-t .lnk{color:var(--blue2);font-weight:700}
.src-b{display:inline-block;font-size:10.5px;font-weight:800;padding:0 6px;border-radius:6px;background:rgba(var(--ink),.08);color:var(--t3);vertical-align:1px}
.tg-time{position:absolute;right:10px;bottom:4px;font-size:10.5px;color:var(--t3);display:inline-flex;align-items:center;gap:3px}
.tg-time .ic{width:12px;height:12px;color:var(--tg-t)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:10px 11px;display:grid;gap:3px;background:rgba(var(--ink),.02)}
.kpi .kl{font-size:11.5px;color:var(--t3);font-weight:700}
.kpi b{font-size:18px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi.off b{font-size:13px;color:var(--t3)}
.kpi small{font-size:11.5px;color:var(--t3);font-weight:700;display:inline-flex;align-items:center;gap:3px}
.kpi small .ic{width:13px;height:13px}
.dl.crit{color:var(--crit-t)}.dl.ok{color:var(--ok-t)}.dl.neu{color:var(--t2)}
.ch-l{margin:16px 0 8px}
.bars{position:relative;height:150px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;padding-bottom:20px}
.b-col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:default}
.bar-f{width:100%;max-width:38px;border-radius:4px 4px 0 0;background:var(--s1);opacity:.75;transform-origin:bottom;animation:growy .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes growy{from{transform:scaleY(0)}}
.b-col.cur .bar-f{background:var(--gold);opacity:1}
.b-col:hover .bar-f{opacity:1}
.b-v{font-size:11px;font-weight:800;color:var(--t);margin-bottom:3px}
.b-l{position:absolute;bottom:-19px;font-size:11px;color:var(--t3)}
.b-col.cur .b-l{color:var(--gold);font-weight:800}
.b-avg{position:absolute;left:0;right:0;border-top:1px dashed rgba(var(--ink),.3);z-index:1;pointer-events:none;margin-bottom:20px}
.b-avg span{position:absolute;right:0;top:-17px;font-size:10.5px;color:var(--t3);background:var(--bg2);padding:0 4px}
.b-tip{position:absolute;top:-6px;z-index:3;width:120px;text-align:center;background:var(--tip);border:1px solid var(--line2);border-radius:8px;padding:5px 6px;font-size:11.5px;pointer-events:none}
.anl{display:grid;gap:6px}
.an{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:start;font-size:13px;color:var(--t2);line-height:1.45}
.an .tag{justify-self:start;font-size:11px}

@media (max-width:640px){
  .srcs-in{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .an{grid-template-columns:1fr;gap:4px}
  .bars{gap:5px}
}

/* ---- тема: доповнення ---- */
.hero::before{background:radial-gradient(40% 60% at 22% 40%,rgba(var(--acc),.12),transparent 70%),radial-gradient(30% 50% at 85% 20%,rgba(59,130,246,.08),transparent 70%)}