/* ── Тарифи: регулятор швидкості (порт із C у мові A) ──────────
   Панель = монітор зі знака (рамка відкрита у правому верхньому куті, там — рівень сигналу).
   Шкала регулятора = дуги логотипа; покажчик — курсор знака; моно — лише підписи панелі. */
.tariffs { padding-top: clamp(96px, 10vw, 150px); }
.seg { grid-auto-columns: auto; }
.seg__s { display: none; }

.tune { align-items: start; row-gap: 40px; }
.tpanel {
  --cut: 92px;
  grid-column: 1 / span 7; position: relative; isolation: isolate;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--ink-1), var(--ink-0) 80%);
}
.tpanel::before { /* рамка монітора з розривом */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  border: 1px solid var(--line-2);
  -webkit-mask: linear-gradient(#000 0 0) left top / calc(100% - var(--cut)) 100% no-repeat,
                linear-gradient(#000 0 0) right bottom / var(--cut) calc(100% - var(--cut)) no-repeat;
          mask: linear-gradient(#000 0 0) left top / calc(100% - var(--cut)) 100% no-repeat,
                linear-gradient(#000 0 0) right bottom / var(--cut) calc(100% - var(--cut)) no-repeat;
}
.tpanel__rings { top: -6px; right: -6px; }
.tpanel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px calc(var(--cut) + 8px) 18px 28px; border-bottom: 1px solid var(--line);
}
.tpanel__idx { color: var(--fg-4); }
.tpanel__idx span:first-child { color: var(--fg-2); }
.tpanel__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(28px, 3.4vw, 52px); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
}
.tpanel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  padding: 20px 28px 24px; border-top: 1px solid var(--line);
}

/* Регулятор */
.tuner { position: relative; width: clamp(260px, 23vw, 332px); aspect-ratio: 1; flex: none; user-select: none; -webkit-user-select: none; }
.tuner__scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tuner__scale .trk { fill: none; stroke: var(--line-2); stroke-width: 4; stroke-linecap: round; }
.tuner__scale .lit { fill: none; stroke: var(--v-500); stroke-width: 4; stroke-linecap: round; }
.tuner__scale .glow { filter: drop-shadow(0 0 6px rgb(177 77 255 / .75)); }
.tuner__scale .t-min { stroke: var(--line-3); stroke-width: 1; }
.tuner__scale .t-maj { stroke: var(--fg-3); stroke-width: 1.4; transition: stroke var(--d-3); }
.tuner__scale .t-lab { font-family: var(--f-data); font-size: 18px; fill: var(--fg-3); text-anchor: middle; dominant-baseline: middle; transition: fill var(--d-3); }
.tuner__scale .is-off .t-lab { fill: var(--fg-4); }
.tuner__scale .is-off .t-maj { stroke: var(--line-2); }
.tuner__scale .is-on .t-lab { fill: var(--fg); }
.tuner__scale .is-on .t-maj { stroke: var(--v-500); }
.tuner__scale .hit { fill: transparent; cursor: pointer; }
.tuner__scale .is-off .hit { pointer-events: none; cursor: default; }
.tuner__scale .maj:hover .t-lab { fill: var(--v-300); }

/* Ручка: «залізна» — графіт, дрібне рифлення по ободу, у центрі вузол мережі */
.tuner__knob {
  position: absolute; inset: 28.3%; border-radius: 50%; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 50% 30%, #1d1a22, #0c0b0f 62%, #08070a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 -2px 4px rgb(0 0 0 / .8),
              0 0 0 1px var(--line-2), 0 0 0 7px #050407, 0 0 0 8px var(--line), 0 22px 44px -14px #000;
  transition: box-shadow var(--d-3) var(--e-signal);
}
.tuner__knob:active { cursor: grabbing; }
.tuner__knob:focus-visible { outline-offset: 12px; border-radius: 50%; }
.tuner__rot { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--a, 0deg)); will-change: transform; }
.tuner__knurl {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .10) 0deg .6deg, rgb(0 0 0 / .3) .6deg 1.5deg, transparent 1.5deg 3deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
.tuner__cur { position: absolute; right: 13%; top: 50%; width: 30%; height: 30%; transform: translateY(-50%); overflow: visible; }
.tuner__cur path { fill: var(--v-500); filter: drop-shadow(0 0 6px rgb(177 77 255 / .8)); }
.tuner__hub { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--line-3); }
.tuner.is-drag .tuner__knob, .tuner__knob:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), inset 0 -2px 4px rgb(0 0 0 / .8),
              0 0 0 1px var(--line-3), 0 0 0 7px #050407, 0 0 0 8px var(--line), 0 22px 44px -14px #000, 0 0 40px -6px rgb(177 77 255 / .35); }

/* Показник */
.readout { min-width: 0; display: grid; gap: 22px; }
.readout .mono { display: block; margin-bottom: 8px; }
.readout__name b { font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); color: var(--v-400); letter-spacing: .02em; line-height: 1; }
.readout__speed { display: flex; align-items: baseline; gap: 12px; margin-top: -6px; }
.readout__speed .reel { font-size: clamp(76px, 7.4vw, 116px); line-height: 1; color: var(--fg); }
.readout__u { font-size: 16px; font-weight: 500; color: var(--fg-2); }
.readout__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.readout__pv { display: flex; align-items: baseline; gap: 8px; }
.readout__pv .data { font-size: clamp(32px, 2.8vw, 42px); line-height: 1; color: var(--fg); }
.readout__inc ul { display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.readout__inc li { position: relative; padding-left: 18px; }
.readout__inc li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--v-500); }

/* Одометр (з C): кожна колонка — стрічка 0–9, ширина — за реальною цифрою Zrnic */
.reel { display: inline-flex; letter-spacing: 0; }
.reel__c { display: block; height: 1em; overflow: hidden; overflow: clip; transition: width .6s var(--e-signal), opacity .4s; }
.reel__s { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .9, .1, 1); will-change: transform; }
.reel__s span { display: block; height: 1em; line-height: 1; }

/* Список тарифів режиму — рядки, як у A (без карток) */
.tlist-col { grid-column: 9 / span 4; }
.tlist { border-top: 1px solid var(--line-2); }
.trow__b {
  position: relative; width: 100%; text-align: left;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line-2);
}
.trow__b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--v-500); box-shadow: 0 0 10px var(--v-glow); transform: scaleX(0); transform-origin: left; transition: transform var(--d-4) var(--e-signal); }
.trow__b:hover::after, .trow__b[aria-pressed="true"]::after { transform: scaleX(1); }
.trow__ic { grid-row: 1 / span 2; width: 40px; height: 40px; }
.trow__ic path { fill: none; stroke-linecap: round; stroke-width: 4; }
.trow__ic .trk { stroke: var(--line-2); }
.trow__ic .lit { stroke: var(--fg-4); transition: stroke var(--d-3); }
.trow__ic .cur { stroke: none; fill: var(--fg-4); transition: fill var(--d-3); }
.trow__n { font-size: 24px; line-height: 1; color: var(--fg); letter-spacing: .02em; transition: color var(--d-3); }
.trow__s { grid-column: 2; font-size: 14px; color: var(--fg-3); }
.trow__p { grid-column: 3; grid-row: 1 / span 2; font-size: 13px; color: var(--fg-3); text-align: right; }
.trow__p .data { font-size: 26px; color: var(--fg-2); margin-right: 5px; transition: color var(--d-3); }
.trow__b:hover .trow__n { color: var(--v-300); }
.trow__b[aria-pressed="true"] .trow__n { color: var(--v-400); }
.trow__b[aria-pressed="true"] .trow__p .data { color: var(--fg); }
.trow__b[aria-pressed="true"] .trow__ic .lit { stroke: var(--v-500); }
.trow__b[aria-pressed="true"] .trow__ic .cur { fill: var(--v-500); }
.tlist__fine { margin-top: 22px; font-size: 14px; color: var(--fg-3); line-height: 1.5; }
.tlist__links { margin-top: 18px; font-size: 14px; }

@media (max-width: 1240px) {
  .tpanel { grid-column: 1 / -1; }
  .tlist-col { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .tlist { grid-column: 1 / span 7; grid-row: 1 / span 3; align-self: start; }
  .tlist__fine, .tlist__links { grid-column: 9 / span 4; }
  .tlist__fine { margin-top: 0; }
  .tlist__links { margin-top: 0; }
}
@media (max-width: 760px) {
  .seg { width: 100%; grid-auto-columns: 1fr; }
  .seg__btn { padding: 0 10px; font-size: 14px; }
  .seg__l { display: none; } .seg__s { display: inline; }
  .tpanel { --cut: 74px; }
  .tpanel__bar { padding: 18px calc(var(--cut) + 22px) 14px 20px; }
  .tpanel__rings { width: 84px; height: 84px; }
  .tpanel__body { grid-template-columns: 1fr; justify-items: center; padding: 30px 20px 24px; gap: 28px; }
  .tuner { width: min(74vw, 290px); }
  .readout { width: 100%; }
  .readout__speed .reel { font-size: 84px; }
  .tpanel__foot { padding: 18px 20px 22px; }
  .tpanel__foot .btn { width: 100%; }
  .tlist, .tlist__fine, .tlist__links { grid-column: 1 / -1; grid-row: auto; }
  .tlist__fine { margin-top: 20px; }
  .tlist__links { margin-top: 12px; }
}
.tpanel::after { /* світло за курсором */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 28%) var(--my, 46%), rgb(177 77 255 / .07), transparent 62%);
}

/* Як підключитися — три кроки на вертикальній мережевій лінії */
.steps { margin-top: 44px; }
.steps__t { font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.steps ol { position: relative; margin-top: 18px; display: grid; gap: 18px; padding-left: 26px; }
.steps ol::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--v-500), var(--line-2)); }
.steps li { position: relative; font-size: 14.5px; line-height: 1.45; color: var(--fg-3); }
.steps li::before { content: ""; position: absolute; left: -26px; top: 6px; width: 7px; height: 7px; background: var(--line-3); }
.steps li:first-child::before { background: var(--v-500); box-shadow: 0 0 10px var(--v-glow); }
.steps b { display: block; font-weight: 500; color: var(--fg); margin-bottom: 2px; }
.steps a { color: var(--fg-2); border-bottom: 1px solid var(--line-3); }
@media (max-width: 1240px) { .steps { grid-column: 9 / span 4; margin-top: 28px; } }
@media (max-width: 760px) { .steps { grid-column: 1 / -1; } }