/* =========================================================================
   Concept B — signature layer: рейка волокна, лічильники, сцена «1 Гбіт/с»,
   одометри ТБ, факти для бізнесу, свайп-карусель тарифів.
   ========================================================================= */

/* ---------- Speed roll: масковий «переліт» між реальними значеннями ---------- */
.roll{display:inline-grid;overflow:clip;vertical-align:bottom;justify-items:end;padding-bottom:.04em;margin-bottom:-.04em}
.roll__i{grid-area:1/1;display:block;white-space:nowrap}
.readout__lbl [data-readout-name]{color:var(--t2)}
[data-readout-unit],.gig__unit{display:inline-block}

/* ---------- Tariffs: картки гаснуть, не доходячи до рейки (повітря ≥ 20px) ---------- */
.tariffs__viewport{
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--lane,28px) + 10px),#000 calc(var(--ml) - 6px),#000 calc(100% - var(--ml)*.6),transparent 100%);
          mask-image:linear-gradient(90deg,transparent calc(var(--lane,28px) + 10px),#000 calc(var(--ml) - 6px),#000 calc(100% - var(--ml)*.6),transparent 100%)}

/* ---------- Tariffs: свайп-режим (тач / вузький екран / reduced motion) ---------- */
.tariffs.is-swipe{height:auto;min-height:0;overflow:visible;padding-top:var(--sec-y);padding-bottom:clamp(24px,4vw,40px)}
.tariffs.is-swipe .tariffs__viewport{margin-top:clamp(40px,6vw,72px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--ml);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tariffs.is-swipe .tariffs__viewport::-webkit-scrollbar{display:none}
.tariffs.is-swipe .tariffs__track{transform:none!important;will-change:auto}
.tariffs.is-swipe .tcard,.tariffs.is-swipe .tgroup,.tariffs.is-swipe .tend{scroll-snap-align:start}
.tariffs.is-swipe .tariffs__note{margin-bottom:0}
.tariffs__hint{display:none}
.tariffs.is-swipe .tariffs__hint{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t3);margin-top:14px}
.tariffs__hint i{position:relative;width:34px;height:1px;background:var(--line-3);overflow:hidden}
.tariffs__hint i::after{content:"";position:absolute;inset:0 auto 0 0;width:12px;background:var(--v-300);animation:hint 2.4s var(--e-inout) infinite}
@keyframes hint{0%{transform:translateX(-14px)}60%,100%{transform:translateX(36px)}}

/* ---------- GIGABIT: сигнатурна пін-сцена ---------- */
.gig{height:var(--vh,100svh);min-height:600px;padding-top:calc(var(--hdr) + clamp(20px,4vh,48px));padding-bottom:clamp(32px,6vh,64px);background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
.gig__in{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "read cap" "ladder ladder";column-gap:var(--gap)}
.gig__top{grid-area:top}
.gig__read{grid-area:read;align-self:end;position:relative;display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,22px);margin:0}
.gig__num{position:relative;font-size:clamp(150px,min(31vw,50vh),540px);line-height:.74;letter-spacing:-.02em;font-weight:400;color:var(--t4);
  transition:color .8s var(--e-out),filter 1.2s var(--e-out)}
.gig.is-live .gig__num{color:var(--t1)}
.gig__unit{position:relative;font-size:clamp(22px,2.7vw,42px);font-weight:540;letter-spacing:-.03em;color:var(--t3);padding-bottom:.1em;transition:color .8s var(--e-out)}
.gig.is-live .gig__unit{color:var(--t2)}
/* світіння — filter на самому числі: не обрізається маскою .roll (на відміну від text-shadow) */
.gig.is-ignited .gig__num{color:var(--v-50);filter:drop-shadow(0 0 14px rgba(200,136,255,.7)) drop-shadow(0 0 48px rgba(177,77,255,.4))}
.gig.is-ignited .gig__unit{color:var(--v-200)}
.gig.is-ignited .gig__cap{grid-area:cap;align-self:end;justify-self:end;text-align:right;margin:0 0 .35em;font-size:clamp(22px,2.3vw,36px);line-height:1.08;letter-spacing:-.03em;font-weight:540;color:var(--t1)}
.gig__cap .ln{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.gig__cap .ln>span{display:inline-block}
.gig__ladder{grid-area:ladder;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap);margin-top:clamp(56px,9vh,96px)}
.gig__ladder li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;row-gap:6px;color:var(--t4);transition:color .6s var(--e-out)}
.gig__ladder b{font-size:clamp(26px,2.4vw,36px);line-height:.9;font-weight:400}
.gig__ladder span{font-size:14px;font-weight:500}
.gig__ladder small i{font-style:normal}
.gig__ladder small{grid-column:1/-1;font-size:13px;color:var(--t4);transition:color .6s var(--e-out)}
.gig__ladder li.is-lit{color:var(--t1)}
.gig__ladder li.is-lit small{color:var(--t3)}
.gig__ladder em{grid-column:1/-1;font-style:normal;font-size:14px;letter-spacing:.02em;color:var(--t4);transition:color .6s var(--e-out)}
.gig__ladder li.is-lit em{color:var(--t2)}
.gig__ladder li:last-child.is-lit{color:var(--v-100)}
@media (max-width:760px){
  .gig{min-height:560px}
  .gig__in{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"top" "read" "cap" "ladder"}
  .gig__read{align-self:center}
  .gig__num{font-size:clamp(120px,50vw,230px)}
  .gig__cap{justify-self:start;text-align:left;margin:22px 0 0;font-size:22px}
  .gig__ladder{column-gap:10px;margin-top:40px}
  .gig__ladder li{grid-template-columns:1fr}
  .gig__ladder b{font-size:24px}
  .gig__ladder span,.gig__ladder small{font-size:12px}
  .gig__ladder small i,.gig__ladder em{display:none}
}
.rm .gig{height:auto;min-height:0;padding-top:var(--sec-y)}

/* ---------- TV: одометри кількості каналів ---------- */
.tvbig{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,24px);margin:6px 0 clamp(26px,3vw,40px)}
.odo{display:inline-flex;font-size:clamp(88px,9.4vw,148px);line-height:.8;color:var(--t4);transition:color 1s var(--e-out);letter-spacing:-.01em}
.odo.is-on,.rm .odo,html:not(.js) .odo{color:var(--t1)}
.odo__d{display:inline-block;overflow:clip;height:.8em;line-height:.8}
.odo__s{display:block}
.odo__s i{display:block;font-style:normal;height:.8em;width:max-content;margin-inline:auto}
.tvbig__cap{font-size:15px;line-height:1.45;color:var(--t2);padding-bottom:.2em}
.tvbig__cap .tnum{color:var(--t1)}
@media (max-width:760px){.odo{font-size:88px}.tvbig__cap{font-size:14px}}

/* ---------- BUSINESS: реальні факти замість вигаданих планів ---------- */
.bizfacts{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);border-top:1px solid var(--line);margin-bottom:clamp(64px,8vw,120px)}
.bizfact{grid-column:span 4;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:clamp(28px,3vw,44px) 24px clamp(28px,3vw,40px) 0}
.bizfact__v{font-size:clamp(52px,5.4vw,84px);line-height:.85;color:var(--t1);display:flex;align-items:baseline;gap:10px}
.bizfact__v small{font-family:var(--f-text);font-size:clamp(18px,1.5vw,22px);font-weight:500;color:var(--t2);letter-spacing:-.01em}
.bizfact__v--t{font-family:var(--f-text);font-size:clamp(28px,2.6vw,40px);line-height:1.02;letter-spacing:-.035em;font-weight:560;min-height:1.7em;align-items:flex-end}
.bizfact__k{font-size:15px;color:var(--t2);max-width:22em}
.bizfact .btn{margin-top:8px}
.bizfacts .bizextras{grid-column:1/-1;border-top:1px solid var(--line)}
@media (max-width:960px){
  .bizfacts{grid-template-columns:1fr}
  .bizfact{grid-column:1;padding-right:0;border-bottom:1px solid var(--line)}
  .bizfact__v--t{min-height:0}
  .bizfacts .bizextras{border-top:0}
}

/* ---------- дрібниці ---------- */
.hero__tg{color:var(--t2)}
.hero__facts a:hover .hero__tg{color:var(--v-200)}

@media (max-width:760px){
  .tariffs.is-swipe .tgroup{width:min(52vw,210px);padding-right:0}
  .tariffs.is-swipe .tgroup__name{font-size:24px}
  .tariffs.is-swipe .tgroup__txt{font-size:14px}
}
.channel__v--t{font-family:var(--f-text);font-weight:520;letter-spacing:-.03em}
@media (max-width:760px),(pointer:coarse){.tv{padding-top:var(--sec-y)}}
.tcard__price span{white-space:nowrap}
.plist__d .tnum{color:var(--t2)}
/* мобільне меню: волокно меню стоїть на тій самій рейці x=18, текст — на полі контенту 44px */
@media (max-width:760px){
  .menu{padding-left:14.5px}
  .menu__fibre{left:17.25px}
  .menu__foot{margin-left:29.5px}
}