/* The tariff category landing page. Kept separate from the shared theme bundle. */
body.sinet-horizon .site-main .sinet-tariffs-hub {
  --hub-ink: #233d4b;
  --hub-blue: #009bd4;
  --hub-green: #8db457;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__intro {
  position: relative;
  overflow: hidden;
  padding: clamp(27px, 4vw, 46px);
  border: 1px solid #d5e9f0;
  border-radius: 24px;
  background: linear-gradient(115deg, #eef9fd 0%, #f8fcfd 63%, #f1f7eb 100%);
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__intro::after {
  content: "";
  position: absolute;
  width: clamp(190px, 29vw, 340px);
  aspect-ratio: 1;
  right: -12%;
  top: -75%;
  border: 1px solid #c2e7f1;
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgb(0 155 212 / 4%), 0 0 0 58px rgb(141 180 87 / 5%);
  pointer-events: none;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__intro > * {
  position: relative;
  z-index: 1;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__intro h1 {
  max-width: 660px;
  margin-top: 16px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__intro p {
  max-width: 560px;
  margin: 0;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin: clamp(18px, 2.4vw, 28px) 0 0;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li {
  min-width: 0;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(198px, 19vw, 235px);
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
  padding: clamp(22px, 2.7vw, 30px);
  border: 1px solid var(--hub-border, #d7e8ee);
  border-radius: 22px;
  background: var(--hub-bg, #f3f9fb);
  box-shadow: 0 10px 28px rgb(29 70 88 / 5%);
  color: var(--hub-ink);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(1) a {
  --hub-bg: linear-gradient(145deg, #e9f8fd, #d8f0f8);
  --hub-border: #b8e2f0;
  --hub-accent: #008fc7;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(2) a {
  --hub-bg: linear-gradient(145deg, #f2f8e9, #e2f0d1);
  --hub-border: #cfe3b4;
  --hub-accent: #648d32;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(3) a {
  --hub-bg: linear-gradient(145deg, #edf5fa, #dceaf2);
  --hub-border: #c6dce8;
  --hub-accent: #2876a0;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(4) a {
  --hub-bg: linear-gradient(145deg, #f8fafb, #ecf3f3);
  --hub-border: #d8e6e6;
  --hub-accent: #619b80;
}

/* Number and orbit make each destination recognizable without adding decorative HTML. */
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a::before {
  content: "01 /";
  position: absolute;
  top: clamp(22px, 2.7vw, 30px);
  left: clamp(22px, 2.7vw, 30px);
  color: var(--hub-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(2) a::before { content: "02 /"; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(3) a::before { content: "03 /"; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(4) a::before { content: "04 /"; }

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -78px;
  right: -54px;
  width: 225px;
  height: 225px;
  border: 1px solid color-mix(in srgb, var(--hub-accent) 25%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 72%, var(--hub-accent) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 32%, var(--hub-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 53% 89%, #fff 0 4px, transparent 5px);
  box-shadow: inset 0 0 0 38px rgb(255 255 255 / 12%), 0 0 0 27px rgb(255 255 255 / 12%);
  opacity: .62;
  pointer-events: none;
  animation: sinet-hub-orbit 18s linear infinite;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--hub-ink);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.16;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links b::after {
  content: "↗";
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--hub-accent) 28%, transparent);
  border-radius: 50%;
  background: rgb(255 255 255 / 65%);
  color: var(--hub-accent);
  font-size: 19px;
  font-weight: 500;
  transition: transform .3s ease, background .3s ease;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links span {
  max-width: 25ch;
  color: #526d79;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a:hover,
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a:focus-visible {
  transform: translateY(-6px);
  border-color: var(--hub-accent);
  box-shadow: 0 20px 36px rgb(29 70 88 / 13%);
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a:hover b::after,
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a:focus-visible b::after {
  transform: translate(2px, -2px);
  background: #fff;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a:focus-visible {
  outline: 3px solid var(--hub-accent);
  outline-offset: 3px;
}

body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__cta {
  margin-top: clamp(20px, 2.6vw, 30px);
  border-radius: 22px;
}

@keyframes sinet-hub-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sinet-hub-orbit {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li {
    animation: sinet-hub-enter .6s cubic-bezier(.2,.7,.2,1) both;
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(2) { animation-delay: .08s; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(3) { animation-delay: .16s; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links li:nth-child(4) { animation-delay: .24s; }
}

@media (max-width: 640px) {
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links {
    grid-template-columns: minmax(0, 1fr);
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a {
    min-height: 182px;
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__intro::after {
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a,
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links b::after {
    transition: none;
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__links a::after {
    animation: none;
  }
}

/* 2026-11-14 (agent 4): comparison table of all tariffs + «квартира / приватний будинок / бізнес» cards. */
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare__wrap {
  margin: 14px 0 10px;
  overflow-x: auto;
  border: 1px solid #d5e9f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(29, 70, 88, .06);
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare__wrap:focus-visible {
  outline: 3px solid rgb(0 155 212 / 35%);
  outline-offset: 2px;
}
body.sinet-horizon .site-main .sinet-tariffs-hub table.sinet-compare {
  display: table;
  width: 100%;
  min-width: 640px;
  max-width: none;
  margin: 0;
  overflow: visible;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--hub-ink);
  font-size: 15px;
  line-height: 1.4;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare th,
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e3edf1;
  background: #fff;
  text-align: left;
  vertical-align: middle;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare thead th {
  background: var(--hub-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .02em;
  white-space: nowrap;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody th {
  font-weight: 750;
  white-space: nowrap;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody th a {
  color: var(--hub-ink);
  text-decoration: none;
  border-bottom: 1px solid #b6dbe8;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody th a:hover { color: var(--hub-blue); }
/* speed, price, connection: numbers aligned on the right, short values never wrap */
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td:nth-child(3),
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td:nth-child(5),
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare thead th:nth-child(n+3) {
  text-align: right;
  white-space: nowrap;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td:nth-child(4) {
  min-width: 150px;
  text-align: right;
  font-weight: 700;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody tr:not(.sinet-compare__group):nth-child(even) > * { background: #f5fafc; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody tr:not(.sinet-compare__group):hover > * { background: #eaf6fb; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare .sinet-compare__group th {
  padding: 9px 16px 7px;
  background: #eef7ea;
  color: #4f7426;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare .sinet-compare__group a { color: inherit; text-decoration: none; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare .sinet-compare__group a::after { content: " →"; color: var(--hub-blue); }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody tr:last-child > * { border-bottom: 0; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__note { font-size: 13.5px; line-height: 1.5; color: var(--sinet-muted); }

/* the three «what is the difference» cards: one wide row each, readable text */
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why .sinet-about__card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 6px 24px;
  align-items: start;
  padding: 20px 24px;
  border-left: 4px solid var(--hub-blue);
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why .sinet-about__card:nth-child(2) { border-left-color: var(--hub-green); }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why .sinet-about__card:nth-child(3) { border-left-color: var(--hub-ink); }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why .sinet-about__card h3 { margin: 0; font-size: 18px; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why .sinet-about__card p { font-size: 15.5px; line-height: 1.6; color: #415a67; }

/* narrow content column (phones, tablets, desktop with sidebar under ~1000 px): every tariff becomes a small card,
   the page never scrolls sideways. Queried on the hub section, because the column width, not the window, decides. */
body.sinet-horizon .site-main .sinet-tariffs-hub { container: sinethub / inline-size; }
@container sinethub (max-width: 820px) {
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare__wrap { overflow: visible; border: 0; box-shadow: none; background: none; }
  body.sinet-horizon .site-main .sinet-tariffs-hub table.sinet-compare,
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody,
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tr { display: block; min-width: 0; width: 100%; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare thead { display: none; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody tr:not(.sinet-compare__group) {
    display: block;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid #d5e9f0;
    border-radius: 12px;
    background: #fff;
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody tr > * { background: transparent !important; border: 0; padding: 2px 0; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare tbody th[scope="row"] { display: block; font-size: 17px; padding-bottom: 6px; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td {
    position: relative;
    display: block;
    min-width: 0;
    padding: 3px 0 3px 128px !important;
    text-align: left !important;
    white-space: normal !important;
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td::before {
    position: absolute;
    left: 0;
    top: 4px;
    content: attr(data-label);
    color: var(--sinet-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
  }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare .sinet-compare__group { margin: 16px 0 8px; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare .sinet-compare__group th { display: block; padding: 0; background: none !important; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why .sinet-about__card { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
}
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td:nth-child(2) { white-space: nowrap; }
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td small {
  display: block;
  color: #4f7426;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
@container sinethub (max-width: 820px) {
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td small { display: inline; white-space: normal; }
  body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-compare td small::before { content: " · "; }
}

/* Q-04: the paragraph after the three cards (static IP, offer, coverage) needs breathing room */
body.sinet-horizon .site-main .sinet-tariffs-hub .sinet-about__why + p {
  margin: 20px 0 0;
  line-height: 1.6;
}

/* a1-tariffs 2026-11-15: speed bars, perks, «без світла» banner on /taryfy and /ru/tarify (mock12). Bars come from site-about.css, banner from site-home.css. */
.sinet-tariffs-hub .sinet-hub-block { margin: 28px 0 36px; }
.sinet-tariffs-hub .sinet-hub-perks { margin-bottom: 30px; }
.sinet-tariffs-hub .sinet-hub-speed .sinet-about__btn { margin-top: 14px; }
.sinet-tariffs-hub .sinet-about__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.sinet-tariffs-hub .sinet-about__tags a { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #e8f4fb; color: #0a6fa8; text-decoration: none; border: 1px solid #cfe6f4; }
.sinet-tariffs-hub .sinet-about__tags a:hover { background: #d8ecf8; }
.sinet-tariffs-hub .sinet-perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sinet-tariffs-hub .sinet-perks li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid #dbe9f2; border-radius: 14px; background: #f6fbfe; margin: 0; }
.sinet-tariffs-hub .sinet-perks__ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; background: #e3f2fb; color: #0a8fd6; display: flex; align-items: center; justify-content: center; }
.sinet-tariffs-hub .sinet-perks svg { width: 22px; height: 22px; }
.sinet-tariffs-hub .sinet-perks b { font-size: 15px; line-height: 1.3; }
.sinet-tariffs-hub .sinet-perks li > span:last-child { font-size: 13px; color: #56656f; line-height: 1.35; }
@media (max-width: 900px) { .sinet-tariffs-hub .sinet-perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sinet-tariffs-hub .sinet-perks { grid-template-columns: 1fr; } }
.sinet-tariffs-hub .sinet-hub-hours .sinet-gallery__track { overflow: visible; }

/* Banner intro animation (js/hours-banner.js adds .anim-ready, then .anim-go when the banner scrolls into view).
   Without JS or with prefers-reduced-motion nothing below applies and the banner stays in its final static state.
   Only transform / opacity / stroke-dashoffset are animated. */
.sinet-banner--hours.anim-ready .sinet-banner__text>*{opacity:0;transition:none}
.sinet-banner--hours.anim-ready .sinet-banner__gauge .fill{animation:none;stroke-dashoffset:100}
.sinet-banner--hours.anim-ready .sinet-banner__gauge::after{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(9,27,38,.7) 0,rgba(9,27,38,.7) 52%,rgba(9,27,38,0) 72%);opacity:1;pointer-events:none}
.sinet-banner--hours.anim-ready .sinet-banner__gauge::before{content:"";position:absolute;inset:-12%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(127,216,166,.3) 0,rgba(127,216,166,0) 68%);opacity:0;pointer-events:none}
.sinet-banner--hours.anim-ready .sinet-banner__gauge .bolt{animation:none;opacity:.3}
.sinet-banner--hours.anim-ready .sinet-banner__gauge strong,.sinet-banner--hours.anim-ready .sinet-banner__gauge span{opacity:.55}

.sinet-banner--hours.anim-go .sinet-banner__text>*{opacity:1;animation:hrs-rise .6s cubic-bezier(.2,.8,.2,1) backwards}
.sinet-banner--hours.anim-go .sinet-banner__text>:nth-child(2){animation-delay:.08s}
.sinet-banner--hours.anim-go .sinet-banner__text>:nth-child(3){animation-delay:.16s}
.sinet-banner--hours.anim-go .sinet-banner__text>:nth-child(4){animation-delay:.24s}
.sinet-banner--hours.anim-go .sinet-banner__text>:nth-child(5){animation-delay:.32s}
.sinet-banner--hours.anim-go .sinet-banner__gauge .fill{animation:hrs-fill 1.6s cubic-bezier(.33,1,.68,1) .6s both}
.sinet-banner--hours.anim-go .sinet-banner__gauge::after{animation:hrs-dim 1.4s ease-out forwards}
.sinet-banner--hours.anim-go .sinet-banner__gauge::before{animation:hrs-halo 1.2s ease-out 1.5s backwards}
.sinet-banner--hours.anim-go .sinet-banner__gauge strong,.sinet-banner--hours.anim-go .sinet-banner__gauge span{opacity:1;animation:hrs-lit 1.4s ease-out backwards}
.sinet-banner--hours.anim-go .sinet-banner__gauge .bolt{opacity:1;animation:hrs-bolt 1.2s ease-out .3s backwards,hrs-idle 3.6s ease-in-out 2.4s infinite}

@keyframes hrs-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes hrs-fill{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes hrs-dim{0%,14%{opacity:1}20%{opacity:.35}27%{opacity:.95}36%{opacity:.3}44%{opacity:.75}62%{opacity:.12}100%{opacity:0}}
@keyframes hrs-lit{0%,40%{opacity:.55}100%{opacity:1}}
@keyframes hrs-bolt{0%,45%{opacity:.3;transform:scale(.9)}60%{opacity:1;transform:scale(1.28)}100%{opacity:1;transform:scale(1)}}
@keyframes hrs-halo{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes hrs-idle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.88}}

@media (prefers-reduced-motion:reduce){
.sinet-banner--hours .sinet-banner__text>*,.sinet-banner--hours .sinet-banner__gauge strong,.sinet-banner--hours .sinet-banner__gauge span,.sinet-banner--hours .sinet-banner__gauge .bolt{opacity:1!important;transform:none!important;animation:none!important}
.sinet-banner--hours .sinet-banner__gauge .fill{animation:none!important;stroke-dashoffset:0!important}
.sinet-banner--hours .sinet-banner__gauge::before,.sinet-banner--hours .sinet-banner__gauge::after{content:none!important}}