/* ТВК - фірмовий стиль 2027 (Ч298, 08.11.2026, з дозволу Директора).
   Підключається ОСТАННІМ, після style.css і tvk-soft.css. style.css (і налаштування Директора в його кінці) не змінюється.
   Кольори ті самі: білий і червоний, трохи графіту. Мʼяко, «димчасто», рівно. */

/* ---------- 10. єдина система розмірів ---------- */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-sm:12px;--r:20px;--r-lg:28px;
  --graphite:#18191d;--graphite-2:#222329;--graphite-line:#2e2f36;
  --ease:cubic-bezier(.2,.7,.2,1);
}
h1{font-size:clamp(34px,5.2vw,56px);letter-spacing:-.035em;line-height:1.06}
h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.025em;line-height:1.12}
h3{font-size:18px;line-height:1.25}
.lead{font-size:clamp(16px,1.6vw,18px);line-height:1.55}
section{padding-block:var(--s8)}
.card{border-radius:var(--r);padding:var(--s5)}
.grid2,.grid3{gap:var(--s4)}

/* ---------- 1. фірмова шапка сторінки ---------- */
.page-head{position:relative;padding-block:var(--s7) var(--s6);
  background:
    radial-gradient(720px 300px at 92% 0,color-mix(in srgb,var(--red) 9%,transparent),transparent 70%),
    radial-gradient(560px 260px at 0 100%,color-mix(in srgb,var(--red-l) 6%,transparent),transparent 70%),
    linear-gradient(180deg,var(--card),color-mix(in srgb,var(--tint) 55%,var(--bg)));}
.page-head .lead{margin-top:var(--s3)}
.page-head h1{margin-top:2px}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.hero-note{margin-top:var(--s3);font-size:14px;color:var(--mute)}
.hero-note b{color:var(--fg2)}
.page-head+section{padding-top:var(--s6)}

/* ---------- 2. фірмовий знак: «оптика» - тонка лінія з вогником, що біжить ---------- */
.page-head::after,.foot::before{content:"";position:absolute;left:0;right:0;height:2px;
  background:
    linear-gradient(90deg,transparent,var(--red),transparent) no-repeat,
    linear-gradient(90deg,transparent,var(--tint-b) 10%,var(--tint-b) 90%,transparent);
  background-size:160px 100%,100% 100%;background-position:-30% 0,0 0;
  animation:tvkFiber 9s var(--ease) infinite}
.page-head::after{bottom:0}
@keyframes tvkFiber{0%{background-position:-30% 0,0 0}55%,100%{background-position:130% 0,0 0}}
@media (prefers-reduced-motion:reduce){.page-head::after,.foot::before{animation:none;background-position:-30% 0,0 0}}

/* великі кнопки у шапці */
.btn-lg{padding:15px 24px;font-size:16px;border-radius:16px;min-height:52px}
.btn .bi{width:18px;height:18px;flex:none}
.btn-call{font-variant-numeric:tabular-nums;letter-spacing:-.005em}

/* ---------- картки: значок у гнізді, кнопки внизу на одній лінії ---------- */
.card-h{display:flex;gap:var(--s3);align-items:center;min-height:44px}
.card.fill{display:flex;flex-direction:column;gap:var(--s3)}
.card.fill>.btns{margin-top:auto;padding-top:var(--s1);display:grid;gap:var(--s3)}
.card .muted{line-height:1.5}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.sec-h h2{font-size:clamp(22px,2.6vw,28px)}
.sec-h .eyebrow{margin-bottom:6px}

/* ---------- 4. «Відкрито зараз» ---------- */
.open{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:13px;font-weight:700;line-height:1;
  padding:7px 12px 7px 10px;border-radius:999px;background:var(--tint);color:var(--red-d);border:1px solid var(--tint-b);white-space:nowrap}
.open .lv{width:8px;height:8px;opacity:1;transform:none;animation:none}
.open.shut{background:var(--track,#f1f1f5);color:var(--mute);border-color:transparent}
.open.shut .lv{border-color:#b9bac2}
.open.shut .lv::after{display:none}
.open:empty{display:none}
.rows div.today span{font-weight:700;color:var(--fg)}
.rows div.today span:first-child{display:inline-flex;align-items:center;gap:8px}
.rows div.today span:first-child::after{content:"сьогодні";font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--tint);border-radius:6px;padding:3px 6px}
.desk{display:flex;flex-direction:column;gap:var(--s3)}
.desk .card-h{justify-content:space-between}
.desk .card-h>div{display:flex;gap:var(--s3);align-items:center;min-width:0}

/* ---------- 7. графітовий підвал ---------- */
.foot{position:relative;background:var(--graphite);color:#c9cad1;border-top:0;margin-top:var(--s8)}
.foot::before{top:0;background:
    linear-gradient(90deg,transparent,var(--red-l),transparent) no-repeat,
    linear-gradient(90deg,transparent,var(--graphite-line) 10%,var(--graphite-line) 90%,transparent);
  background-size:160px 100%,100% 100%}
.foot-grid{padding-block:var(--s7) var(--s6)}
.foot-grid h4{color:#8d8f99}
.foot-grid a{color:#dcdde2}
.foot-grid a:hover{color:#fff}
.foot .brand span,.foot-grid .brand span{color:#c9cad1}
.foot .mark{background:transparent;color:#fff;border-color:var(--red-l)}
.foot .muted{color:#9a9ca6}
.foot-grid a.foot-tel,.foot-tel{display:block;margin-top:var(--s3);font-size:24px;font-weight:800;letter-spacing:-.01em;color:#fff!important;text-decoration:none;font-variant-numeric:tabular-nums;padding:0!important}
.foot-tel+small{display:block;font-size:13px;color:#9a9ca6;margin-top:2px}
.foot .wrap.copy{color:#8d8f99;background-image:linear-gradient(var(--graphite-line),var(--graphite-line))}

/* ---------- 8. нижня панель на телефоні ---------- */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px));
    background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(20,20,30,.05)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;
    text-decoration:none;color:var(--fg2);font-size:11.5px;font-weight:700;letter-spacing:-.005em;-webkit-tap-highlight-color:transparent}
  .tabbar a svg{width:22px;height:22px;color:var(--red)}
  .tabbar a:active{background:var(--tint)}
  .tabbar a[aria-current="page"]{color:var(--red)}
  body.has-tabbar .foot{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}

/* ---------- 9. мʼяке появлення блоків (лише коли ввімкнено анімації) ---------- */
.rv-on .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}

/* ---------- 13. темна тема (як у телефоні) ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --track:#24252c;--graphite:#0f1013;--graphite-line:#25262c}
  :root:not([data-theme="light"]) .btn-red,:root:not([data-theme="light"]) .btn-ghost,
  :root:not([data-theme="light"]) .tab[aria-selected="true"],:root:not([data-theme="light"]) .nav a[aria-current="page"]{
    background:linear-gradient(180deg,#26272e,#1f2026)!important;color:#ff8b92!important;border-color:rgba(248,94,102,.28)!important;
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)!important}
  :root:not([data-theme="light"]) .tabs{background:#1a1b20!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)!important}
  :root:not([data-theme="light"]) .mark{background:transparent;color:#ff8b92}
  :root:not([data-theme="light"]) .page-head{background:
    radial-gradient(720px 300px at 92% 0,rgba(226,51,64,.14),transparent 70%),linear-gradient(180deg,#1a1b20,var(--bg))}
  :root:not([data-theme="light"]) .ain,:root:not([data-theme="light"]) #chk.ain{background:var(--card)!important;border-color:var(--line)!important;color:var(--fg)!important}
  :root:not([data-theme="light"]) .open{color:#ff8b92}
}

/* «пошук» у терміналі - показуємо, що саме набрати */
.search-chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);font-weight:700;color:var(--fg)}
.search-chip svg{width:18px;height:18px;color:var(--mute)}
.btn-soc.btn-lg svg{width:20px;height:20px}
.card-tint.row>div{flex:1 1 440px;min-width:0}
.card-tint.row>.btn{flex:none}

/* телефон: кнопки шапки однакової ширини, рівно; соцмережі - три рівні колонки */
@media (max-width:560px){
  .hero-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hero-acts>.btn{grid-column:1/-1;width:100%}
  .hero-acts>.btn-soc{grid-column:auto;padding:13px 8px;font-size:14px;gap:6px}
}
@media (max-width:820px){.foot-grid>.stack{grid-column:1/-1}}
@media (min-width:561px){.hero-acts>.btn-soc{min-width:150px}}

/* ---------- 3. «Послуги і ціни» - прайс з вкладками ---------- */
[data-tabs]>.tabs{margin:0 0 var(--s5)}
.plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s6) var(--s7);padding:var(--s6)}
.pgrp{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.pgrp .card-h{margin-bottom:var(--s1)}
@media (max-width:560px){.plist{padding:var(--s5);gap:var(--s6)}}

/* ---------- 5. «Допомога» - плитки довідкового центру ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media (max-width:960px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);min-height:104px;border-radius:var(--r);text-decoration:none;color:var(--fg);
  background:var(--card);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--sh);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh),0 12px 30px rgba(226,51,64,.08)}
.tile-tx{display:grid;gap:3px;min-width:0}
.tile-tx b{font-size:16.5px;line-height:1.25}
.tile-tx small{font-size:13.5px;color:var(--mute);line-height:1.35}
.tile .go{margin-left:auto;flex:none;width:22px;height:22px;color:var(--mute);transition:transform .2s,color .2s}
.tile .go svg{width:22px;height:22px}
.tile:hover .go{transform:translateX(3px);color:var(--red)}
.faq details[id]{scroll-margin-top:96px}

/* ---------- 6. «Про компанію» - історія цифрами ---------- */
.stats-sec{padding-block:var(--s6) 0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:grid;gap:6px;align-content:start;padding:var(--s5);border-radius:var(--r);background:var(--card);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--sh)}
.stat b{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--fg2);line-height:1.35}

/* ---------- 11. тарифи в новому вигляді (лише оформлення, ціни і логіка ті самі) ---------- */
.plan{gap:var(--s3);padding:var(--s5) var(--s5) var(--s5)}
.plan .nm{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* «Популярний» - тиха таблетка на рамці картки, не закриває назву */
.plan .badge{top:-11px;right:18px;background:var(--card);padding:4px 10px;border:1px solid var(--rose-b);border-radius:999px;line-height:1}
.plan .spd{font-size:clamp(44px,4.4vw,54px);letter-spacing:-.04em}
.plan .spd small{font-size:15px;letter-spacing:0;margin-left:2px}
.plan .price{font-size:24px;padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.plan .price small{font-weight:600}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px}
.plan ul li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.plan ul li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background-color:var(--tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e23340' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--tint-b)}
.plan .vl li::before,.villages li::before{content:none}
.plan .btn{min-height:48px}

/* головний екран: та сама фірмова лінія-«оптика» знизу */
.hero{position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent) no-repeat,linear-gradient(90deg,transparent,var(--tint-b) 10%,var(--tint-b) 90%,transparent);
  background-size:160px 100%,100% 100%;background-position:-30% 0,0 0;animation:tvkFiber 9s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}

.stats-sec+section{padding-top:var(--s6)}
@media (max-width:640px){br.d{display:none}}
.page-head.nf{padding-block:var(--s9) var(--s8)}
.rows div.today span:first-child{white-space:nowrap}
.rows div[data-days="0,1,2,3,4,5,6"].today span:first-child::after{content:none}