/* ============================================================
   PražskýNET — futuristický redesign
   Barvy drží modrou identitu značky + oranžový akcent z loga.
   ============================================================ */

:root {
  --bg: #050d1f;
  --bg-raised: #0a1832;
  --bg-card: rgba(16, 34, 66, 0.55);
  --border: rgba(94, 158, 255, 0.18);
  --border-strong: rgba(94, 158, 255, 0.4);
  /* Krycí varianta --border pro sekce s fotkou na pozadí. Fotka se totiž
     kreslí i pod rámeček, kdežto ztmavovací překryv (::before, inset: 0)
     sahá jen po padding box — průsvitný rámeček by tam prosvítal fotkou.
     Hodnota je přesně --border smíchaná s --bg, aby šev vypadal stejně
     jako všude jinde na webu. */
  --border-opaque: #152747;
  --blue: #2e8fff;
  --blue-deep: #1b5fd9;
  --cyan: #45d6ff;
  --orange: #f58220;
  --text: #e8f0ff;
  --text-dim: #93a7c9;
  --radius: 18px;
  --font-display: "Unbounded", sans-serif;
  --font-body: "Manrope", sans-serif;
  --shadow-glow: 0 0 40px rgba(46, 143, 255, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
ul { list-style: none; }

.container {
  width: min(1160px, 92%);
  margin-inline: auto;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; }

h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.3rem); }

.grad-text {
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.9rem;
}
/* ikona před popiskem — kreslená čárou, barví se přes currentColor
   (dřív tu byl emoji blesku, ten se na každém systému vykresloval jinak) */
.eyebrow-ico {
  vertical-align: -0.16em;
  margin-right: 0.45em;
}

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  font-family: var(--font-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 30px rgba(46, 143, 255, 0.45);
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(46, 143, 255, 0.65); }

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: rgba(46, 143, 255, 0.07);
}
.btn-ghost:hover { background: rgba(46, 143, 255, 0.16); }

.btn-outline {
  border-color: var(--border-strong);
  color: var(--cyan);
  background: transparent;
}
.btn-outline:hover { background: rgba(69, 214, 255, 0.1); }

/* ============================================================
   HLAVIČKA (header.html)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 13, 31, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.775rem; /* o 2 px víc nahoře i dole — vyšší lišta menu */
}

/* logo-pranet-nazev.png je oříznuté natěsno (356×78) — na rozdíl od starého
   logo.png, které mělo kolem nápisu široké průhledné okraje. Výška se tedy
   nedá přenést 1:1; 31 px kreslí nápis „PražskýNET" stejně velký jako
   dřívějších 46 px u loga i s podtitulkem.

   `top: 2px` je optické dorovnání, ne oprava layoutu. Obrázek sám
   `align-items: center` na .header-inner centruje přesně, jenže spodních
   23 % souboru zabírá jediná tenká dotažnice „ý" — těžiště kresby proto
   vychází ~2 px nad středem lišty a logo vypadá posazené vysoko.
   `position: relative` nemění výšku hlavičky, jen posune vykreslení. */
.brand-logo {
  height: 31px;
  width: auto;
  position: relative;
  top: 2px;
}

/* rolovátko s jazyky (zatím nefunkční, jen vzhled) */
.lang-select { position: relative; display: flex; align-items: center; }
.lang-select::after {
  content: "▾";
  position: absolute;
  right: 0.75rem;
  color: var(--cyan);
  pointer-events: none;
  font-size: 0.8rem;
}
.lang-select select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(46, 143, 255, 0.07);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1.9rem 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.lang-select select:hover { color: var(--text); background: rgba(46, 143, 255, 0.16); }
.lang-select select option { background: var(--bg-raised); color: var(--text); }

.main-nav { display: flex; align-items: center; gap: 1.2rem; }
.main-nav ul { display: flex; gap: 0.15rem; }

.main-nav ul a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.96rem; /* o ~1 px víc než výchozích 0.9rem */
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.main-nav ul a:hover { color: var(--text); background: rgba(46, 143, 255, 0.1); }
.main-nav ul a.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(46,143,255,0.35), rgba(27,95,217,0.35));
  border: 1px solid var(--border-strong);
}

.nav-phone { padding: 0.55rem 1.1rem; font-size: 0.88rem; }

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  min-height: min(90vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }

/* fotka noční Prahy s wi-fi sítí (images/hero-bg.jpg) — panorama drží
   při spodní hraně, obloha nahoře splývá s barvou pozadí webu */
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,13,31,0.92) 0%, rgba(5,13,31,0.62) 42%, rgba(5,13,31,0.08) 75%, rgba(5,13,31,0.25) 100%),
    linear-gradient(180deg, rgba(5,13,31,0.6) 0%, rgba(5,13,31,0.2) 26%, rgba(5,13,31,0) 66%, rgba(5,13,31,0.5) 100%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
}
.orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(46,143,255,0.55), transparent 70%);
  top: -180px; left: -140px;
  animation: drift 14s ease-in-out infinite alternate;
}
.orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(69,214,255,0.35), transparent 70%);
  bottom: -160px; right: -100px;
  animation: drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.12); }
}

.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94,158,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,158,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 75%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 34rem;
  margin-top: 1.2rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

.hero-stats {
  display: flex;
  gap: 2.4rem;
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
  max-width: 40rem;
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--cyan);
}
.hero-stats span { font-size: 0.85rem; color: var(--text-dim); }

/* pravý sloupec hero — původní banner z webu v nakloněné kartě */
.hero-visual { position: relative; }

.hero-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  transform: rotate(2deg);
  transition: transform 0.4s ease;
  box-shadow: var(--shadow-glow), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.hero-card:hover { transform: rotate(0deg) scale(1.02); }

.hero-card-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(69,214,255,0.15) 0%, transparent 45%);
  pointer-events: none;
}

.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(10, 24, 50, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: var(--shadow-glow);
  animation: float 5s ease-in-out infinite;
}
.chip-ico { flex: none; color: var(--cyan); }
.chip-1 { top: -18px; left: -10px; }
.chip-2 { bottom: -14px; right: 8px; animation-delay: 2.5s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- hero podstránky (internet.html a další) ----------
   Stejná fotka i vrstvy jako na hlavní stránce, jen nižší pás
   a text na střed — podstránka nemá pravý sloupec s bannerem. */
.page-hero {
  min-height: 0;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.6rem, 5vw, 4rem);
  text-align: center;
}
/* překryv musí být symetrický, text leží uprostřed fotky */
.page-hero .hero-photo::after {
  background: linear-gradient(180deg, rgba(5,13,31,0.82) 0%, rgba(5,13,31,0.45) 45%, rgba(5,13,31,0.88) 100%);
}
.page-hero-inner { position: relative; }
.page-hero .hero-cta { justify-content: center; margin-top: 1.4rem; }

/* Podnadvis leží přímo na fotce, ne na tmavém pozadí sekce — proto bílý
   a tučný, ne v tlumené --text-dim jako na hlavní stránce. Stín pod textem
   ho udrží čitelný i nad světlejšími místy panoramatu. */
.page-hero .hero-sub {
  margin-inline: auto;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(5, 13, 31, 0.9);
}

/* „bez závazku" — vlastní řádek mezi podnadpisem a tlačítkem, jako
   v původním webu. Jako pilulka s rámečkem to na fotce viselo ve vzduchu,
   proto jen bílý text se zaškrtnutím. */
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 2px 14px rgba(5, 13, 31, 0.9);
}
.hero-note-ico { flex: none; color: var(--cyan); }

/* Hero podstránky Internet zdarma — místo panoramatu mapa pokrytí
   z původního webu (zelené body = hotspoty projektu Helium). Snímek je
   sám o sobě tmavě modrý, proto je překryv slabší než u fotky Prahy;
   při silnějším by z mapy zbyla jednolitá plocha. */
.hero-mapa .hero-photo {
  background-image: url("../images/zdarma-hero.jpg");
  background-position: center;
}
.hero-mapa .hero-photo::after {
  background: linear-gradient(180deg, rgba(5,13,31,0.72) 0%, rgba(5,13,31,0.4) 45%, rgba(5,13,31,0.9) 100%);
}

/* Hero podstránky Televize — banner z původního webu (1920×500). Levé dvě
   třetiny jsou tmavě modrá s logy lig, fanoušci sedí vpravo. Nadpis leží
   nad tou tmavou částí, proto stačí slabší překryv než u panoramatu Prahy;
   vpravo je hustší, aby text neztratil hranu nad světlým obývákem. */
.hero-televize .hero-photo {
  background-image: url("../images/tv-hero.jpg");
  background-position: center;
}
.hero-televize .hero-photo::after {
  background:
    linear-gradient(90deg, rgba(5,13,31,0.5) 0%, rgba(5,13,31,0.45) 50%, rgba(5,13,31,0.72) 100%),
    linear-gradient(180deg, rgba(5,13,31,0.62) 0%, rgba(5,13,31,0.3) 45%, rgba(5,13,31,0.9) 100%);
}

/* ============================================================
   SEKCE
   ============================================================ */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }

/* sekce s fotkou na pozadí — na rozdíl od .band nese celý obsah,
   proto je překryv hustší, aby zůstala čitelná i tabulka */
.section-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-block: 1px solid var(--border-opaque);
  overflow: hidden;
}
.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,13,31,0.94) 0%, rgba(5,13,31,0.86) 45%, rgba(5,13,31,0.95) 100%);
  pointer-events: none;
}
.section-photo > .container { position: relative; }

.section-optika { background-image: url("../images/optika-bg.jpg"); }
.section-ceny { background-image: url("../images/ceny-bg.jpg"); }
.section-helium { background-image: url("../images/helium-bg.jpg"); }

/* nadpis sekce s tlačítkem po pravé straně */
.offer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}

.section-alt {
  background:
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(46,143,255,0.08), transparent),
    var(--bg-raised);
  border-block: 1px solid var(--border);
}

.section-head { max-width: 44rem; margin-bottom: 2.8rem; }

/* karty */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}

.card, .benefit {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  backdrop-filter: blur(6px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover, .benefit:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow);
}

.card h3, .benefit h3 { font-size: 1.05rem; margin: 1.1rem 0 0.6rem; }
.card p, .benefit p { color: var(--text-dim); font-size: 0.95rem; }

.card-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 800;
  font-size: 0.9rem;
}
.card-link:hover { text-decoration: underline; }

/* ikony původního webu jsou tmavé linky → světlý podklad s glow */
.icon-chip {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(160deg, #eaf3ff 0%, #cfe4ff 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(69, 214, 255, 0.35);
}
.icon-chip img { width: 44px; height: 44px; object-fit: contain; }

/* menší varianta chipu pro řádek .feature-strip */
.icon-chip-sm { width: 48px; height: 48px; border-radius: 13px; }
.icon-chip-sm img { width: 30px; height: 30px; }

/* ---------- řádek funkcí pod kartami (televize.html) ----------
   V původním webu je to samostatný pás tří ikon s krátkým popiskem,
   který zopakuje část toho, co je v kartách nad ním. Přeneseno 1:1. */
.feature-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.6rem;
  margin-top: 2.6rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--border);
}
.feature-strip li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 800;
  font-size: 0.98rem;
}

/* ============================================================
   FOTOGRAFICKÉ PÁSY (.band)
   Obrázky z původního webu mají motiv na jedné straně a druhá
   půlka přechází do tmavě modré → obsah patří na tu tmavou stranu.
   ============================================================ */
.band {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.band > .container { position: relative; }

/* Internet na doma — rodina vlevo, tmavá půlka vpravo */
.band-family {
  background-image: url("../images/internet-rodina.jpg");
  background-position: left center;
}
.band-family::before {
  background: linear-gradient(90deg, rgba(5,13,31,0.25) 0%, rgba(5,13,31,0.5) 35%, rgba(5,13,31,0.88) 60%, var(--bg) 100%);
}

/* Unikátní TV — fanoušci vpravo, tmavá půlka vlevo */
.band-tv {
  background-image: url("../images/tv-unikatni.jpg");
  background-position: right center;
}
.band-tv::before {
  background: linear-gradient(270deg, rgba(5,13,31,0.2) 0%, rgba(5,13,31,0.5) 30%, rgba(5,13,31,0.9) 58%, var(--bg) 100%);
}

.band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
/* pravý sloupec pásu s fotkou rodiny: popis nad cenovou kartou */
.band-side { display: grid; gap: 1.8rem; }

.band-copy h2 { margin-bottom: 1rem; }
.band-copy > p { color: var(--text-dim); }

.tick-list { margin: 1.4rem 0 1.8rem; }
.tick-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.7rem;
  color: var(--text-dim);
}
.tick-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 800;
}

/* Zavolejte nám — noční Hrad, úzký pás */
.band-call {
  background-image: url("../images/zavolejte-bg.png");
  background-position: center center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-block: 1px solid var(--border-opaque);
}
.band-call::before {
  background: linear-gradient(90deg, rgba(5,13,31,0.9) 0%, rgba(5,13,31,0.6) 50%, rgba(5,13,31,0.85) 100%);
}
.band-call-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.band-call-inner p { color: var(--cyan); font-weight: 800; margin-top: 0.4rem; }
.btn-phone { font-size: 1.15rem; padding: 1rem 2.2rem; }

/* Balíček na míru — telefon a TV, úzký pás */
.band-custom {
  background-image: url("../images/balicek-bg.png");
  background-position: center center;
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
  border-block: 1px solid var(--border-opaque);
}
.band-custom::before {
  background: linear-gradient(90deg, rgba(5,13,31,0.85) 0%, rgba(5,13,31,0.55) 30%, rgba(5,13,31,0.55) 70%, rgba(5,13,31,0.85) 100%);
}
.band-custom-inner { text-align: center; }
.band-custom-inner h2 { margin-bottom: 1.6rem; }
/* delší věta — verzálky a velký prostrk by se špatně četly */
.band-custom-inner .eyebrow {
  text-transform: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ============================================================
   CENÍK
   ============================================================ */
.pricing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }

.price-card.featured {
  border: 1px solid var(--blue);
  background: linear-gradient(180deg, rgba(46,143,255,0.16) 0%, rgba(16,34,66,0.75) 100%);
  box-shadow: var(--shadow-glow);
}

.badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--orange), #ff9d4d);
  color: #1a0d00;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card h3 { font-size: 1rem; }
.price-desc { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.7rem; }

.price { margin: 1rem 0 1.2rem; }
.price strong {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
}
.price span { color: var(--text-dim); font-weight: 700; font-size: 0.9rem; }

.price-card ul { flex: 1; margin-bottom: 1.6rem; }
.price-card li {
  padding: 0.45rem 0 0.45rem 1.6rem;
  position: relative;
  color: var(--text-dim);
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--border);
}
.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 800;
}
.price-card .btn { justify-content: center; }

.custom-note { margin-top: 2rem; text-align: center; }
.custom-note a { font-weight: 800; }

/* jediný tarif v ceníku (Internet zdarma) — v mřížce by karta zůstala
   nalepená vlevo, tady drží uprostřed a nerozteče se do celé šířky */
.pricing-single { display: grid; justify-content: center; }
.pricing-single .price-card { width: min(100%, 24rem); }

/* rychlost pod názvem tarifu (Varianty internetu na internet.html) */
.price-speed {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--cyan);
  margin-top: 0.6rem;
}

/* Zlomek 50/5 sám o sobě nikomu nic neřekne — pod ním je proto řádek,
   který obě čísla pojmenuje slovy (stahování / nahrávání). */
.speed-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-dim);
  margin-top: 0.4rem;
}

/* ============================================================
   TABULKA TARIFŮ (rychlost stahování / nahrávání / cena)
   ============================================================ */
.tariff-title { font-size: 1.05rem; margin-bottom: 1.2rem; color: var(--text-dim); }

.tariff-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  overflow-x: auto;
}

.tariff {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
}

.tariff th {
  text-align: left;
  padding: 1rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.tariff td {
  padding: 1.1rem 1.6rem;
  border-bottom: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 0.95rem;
  vertical-align: middle;
}
.tariff tbody tr:last-child td { border-bottom: 0; }
.tariff tbody tr { transition: background 0.2s ease; }
.tariff tbody tr:hover { background: rgba(46, 143, 255, 0.07); }

.tariff td strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.tariff-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-right: 0.35rem;
}
.tariff-old {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  text-decoration: line-through;
  opacity: 0.7;
}

/* Počet programů (televize.html) — v původním webu je ta buňka pruhovaný
   ukazatel, kde délka odpovídá poměru k nejvyšší variantě. Podíl se předává
   v --fill přímo u prvku (63/134, 101/134, 134/134). Je to jen grafika,
   údaj vedle ní zůstává textem. */
.tariff-count { display: block; margin-bottom: 0.55rem; }
.tariff-bar {
  display: block;
  height: 7px;
  max-width: 15rem;
  border-radius: 99px;
  background: rgba(94, 158, 255, 0.16);
  overflow: hidden;
}
.tariff-bar::before {
  content: "";
  display: block;
  width: var(--fill, 100%);
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

/* ============================================================
   MODEMY A ZAŘÍZENÍ
   ============================================================ */
.modem-card, .device-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.4rem;
  align-items: center;
  margin-top: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.modem-card:hover, .device-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow);
}

.modem-photo {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.modem-photo img { width: 100%; height: 100%; object-fit: cover; }

.modem-copy h3, .device-copy h3 { font-size: 1.15rem; margin-bottom: 0.9rem; }
.modem-lead { color: var(--text); font-weight: 700; margin-bottom: 0.6rem; }
.modem-copy p, .device-copy p { color: var(--text-dim); }
.modem-copy .btn { margin-top: 1.4rem; }

/* Smart Box je tmavý snímek s průhledným pozadím — na tmavém webu
   by zanikl, proto je pod ním rozmazaná modrá záře. */
.device-photo {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.device-photo::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69,214,255,0.35), transparent 70%);
  filter: blur(30px);
}
.device-photo img { position: relative; max-height: 340px; width: auto; }

/* Set-top-box pod tabulkou variant televize. Původní web u něj nemá
   fotku, jen dva nadpisy a pod nimi tlačítko — proto řádek s ikonou
   místo karty s obrázkem jako u modemů. */
.stb-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 1.8rem;
  margin-top: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.stb-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.stb-copy { flex: 1 1 16rem; }
.stb-copy h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.stb-copy p { color: var(--text-dim); }

/* ============================================================
   SEZNAM PROGRAMŮ (televize.html)
   Přepínač M / L / XL bez JavaScriptu — stav drží skryté radiobuttony,
   které v HTML stojí před panely, takže se na ně dá dosáhnout ~.
   Samotné soupisky jsou obrázky z původního webu: loga na bílém,
   proto leží na světlém podkladu .program-sheet.
   ============================================================ */
.programs-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.programs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
.programs-tabs label {
  padding: 0.6rem 1.4rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.programs-tabs label:hover { color: var(--text); border-color: var(--border-strong); }

.programs-panel { display: none; }

#prog-m:checked  ~ .programs-tabs label[for="prog-m"],
#prog-l:checked  ~ .programs-tabs label[for="prog-l"],
#prog-xl:checked ~ .programs-tabs label[for="prog-xl"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--blue-deep), var(--blue));
  box-shadow: 0 8px 26px rgba(46, 143, 255, 0.4);
}
#prog-m:checked  ~ .programs-panels #panel-m,
#prog-l:checked  ~ .programs-panels #panel-l,
#prog-xl:checked ~ .programs-panels #panel-xl { display: block; }

/* ovládání z klávesnice — obtah patří na štítek, radiobutton není vidět */
.programs-radio:focus-visible ~ .programs-tabs label[for="prog-m"],
.programs-radio:focus-visible ~ .programs-tabs label[for="prog-l"],
.programs-radio:focus-visible ~ .programs-tabs label[for="prog-xl"] { outline: 0; }
#prog-m:focus-visible  ~ .programs-tabs label[for="prog-m"],
#prog-l:focus-visible  ~ .programs-tabs label[for="prog-l"],
#prog-xl:focus-visible ~ .programs-tabs label[for="prog-xl"] {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.programs-count {
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 1.2rem;
}
.program-sheet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.8rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-glow);
}
.program-sheet img { width: 100%; height: auto; }

/* ============================================================
   POPIS PROJEKTU (internet-zdarma.html)
   Souvislý text bez nadpisu, jak je na původním webu. Leží na světlé
   fotce, proto plná --text místo tlumené --text-dim.
   ============================================================ */
.project-text { max-width: 62rem; margin-inline: auto; }
.project-text p {
  color: var(--text);
  margin-bottom: 1.3rem;
  text-shadow: 0 2px 14px rgba(5, 13, 31, 0.9);
}
.project-cta { text-align: center; margin-top: 2rem; }
.project-cta p {
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.1rem;
}

/* ============================================================
   RYCHLOST INTERNETU
   ============================================================ */
.speed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

.speed-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.speed-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-glow); }

.speed-card h3 { font-size: 1.05rem; margin-bottom: 1.4rem; }

.speed-rows { display: flex; gap: 2.5rem; margin-bottom: 1.4rem; }
.speed-rows div { display: flex; flex-direction: column; }
.speed-rows span { font-size: 0.85rem; color: var(--text-dim); }
.speed-rows strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--cyan);
}

.speed-label { font-size: 0.85rem; color: var(--text-dim); }
.speed-price { font-size: 1rem; color: var(--text-dim); }
.speed-price strong {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: #fff;
  margin-right: 0.4rem;
}
.speed-old {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: line-through;
  opacity: 0.7;
  margin-top: 0.3rem;
}

/* ============================================================
   FAQ (nativní <details>)
   ============================================================ */
.faq { display: grid; gap: 0.8rem; }

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 1.4rem;
  transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: var(--border-strong); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.2rem 1.15rem 0;
  font-family: var(--font-display);
  font-size: 1rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Otázka uvnitř <summary> smí být nadpis (tipy-a-triky.html má v <h3>
   všech 19 rad, protože právě ty otázky lidé píšou do vyhledávače).
   Vzhled musí zůstat stejný jako u FAQ bez nadpisu, proto se h3 vrací
   velikost i řez ze <summary> a zůstává v řádku, aby ho „+" vpravo
   nezatlačilo pod sebe. */
.faq-item summary h3 {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--cyan);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-item ul { padding: 0 0 1.4rem; }
.faq-item li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  color: var(--text-dim);
  font-size: 0.93rem;
}
.faq-item li::before {
  content: "";
  position: absolute;
  left: 0; top: 1rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* ============================================================
   KONTAKTNÍ FORMULÁŘ
   ============================================================ */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-copy > p { color: var(--text-dim); margin-top: 0.8rem; }

/* kontaktní údaje pod textem, vedle formuláře (stejná data jako v patičce) */
.contact-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2rem;
  margin-top: 2.4rem;
}
.contact-details h3 {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--cyan);
  margin-bottom: 0.8rem;
}
.contact-details li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  color: var(--text-dim);
}
.contact-details a { color: var(--text); transition: color 0.2s; }
.contact-details a:hover { color: var(--cyan); }

.contact-ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cyan);
}

.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: grid;
  gap: 1rem;
  backdrop-filter: blur(6px);
}
.contact-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
}
.contact-form input {
  background: rgba(5, 13, 31, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 143, 255, 0.18);
}
.contact-form .btn { justify-content: center; margin-top: 0.4rem; }

/* Turnstile vkládá js/main.js jako přímé dítě formuláře, takže je z něj
   buňka gridu přes celou šířku — widget má napevno 300 px a bez tohohle
   pravidla by se držel u levého kraje. Platí pro všech osm formulářů,
   tedy i pro objednávku a skladačku na volani.html, kde je pod ním
   vycentrované tlačítko i legenda.
   Centruje se obsah buňky, ne buňka sama: kdyby se použilo justify-self,
   smrskla by se před načtením widgetu na nulovou šířku a layout by po
   jeho doskočení poskočil. */
.contact-form > .cf-turnstile {
  display: flex;
  justify-content: center;
}

.form-note { font-size: 0.88rem; color: var(--cyan); min-height: 1.2rem; }

/* Značka povinného pole. Sám znak je v HTML aria-hidden — povinnost si
   čtečka vezme z atributu required, jinak by ji ohlásila dvakrát. */
.req { color: var(--orange); font-weight: 800; }
.req-legend {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: -0.6rem;
}

/* ---------- stránka Kontakt ----------
   Levý sloupec je tu delší než na ostatních stránkách: originál vede
   návštěvníka nejdřív k telefonu a teprve pak k formuláři vpravo. */
.contact-phone { margin-top: 0.9rem; }

/* „nebo" odděluje telefon od formuláře — text mezi dvěma linkami.
   Pozor na specificitu: .contact-copy > p (výš) je taky 0,1,1, proto se
   obě třídy píší s elementem — jinak by přebilo tlumenou barvu i odsazení. */
p.contact-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
p.contact-or::before,
p.contact-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

p.contact-claim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
}

/* ============================================================
   VLASTNÍ BALÍČEK (volani.html)
   ------------------------------------------------------------
   Skladačka tarifu: dvě skupiny přepínačů vedle sebe, pod nimi
   řádek s údaji o zákazníkovi. Formulář má i třídu .contact-form,
   takže pole i tlačítko vypadají stejně jako jinde na webu.
   ============================================================ */
.package-head { margin-inline: auto; text-align: center; }
.package-claim { font-weight: 800; margin-top: 0.8rem; }
.package-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.92rem;
}
.package-lock { flex: none; width: 17px; height: 17px; color: var(--cyan); }

.package-form { max-width: 58rem; margin-inline: auto; gap: 1.6rem; }

/* objednavka.html má čtyři skupiny voleb a osm polí — potřebuje víc místa */
.order-form { max-width: 66rem; }

.option-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2rem;
}
/* Objednávka: Internet / Televize / Volání vedle sebe. (Originál má ještě
   čtvrtou skupinu „Chytré auto", ta je na pokyn klienta pryč.)
   Pod 900 px je obecné pravidlo v media query níž složí do jednoho sloupce. */
.option-groups-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem 1.5rem;
}
.option-group { border: 0; padding: 0; }
.option-group legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cyan);
  margin-bottom: 0.7rem;
}

/* pozor na specificitu: .contact-form label dává labelům display: grid,
   a řádek s přepínačem musí být flex — proto se selektory píší
   přes .package-form, ne jen přes .option */
.package-form .option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(5, 13, 31, 0.6);
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.package-form .option + .option { margin-top: 0.5rem; }
.package-form .option:hover { border-color: var(--blue); color: var(--text); }
.package-form .option input {
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--blue);
  cursor: pointer;
}
.package-form .option:has(input:checked) {
  border-color: var(--blue);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--blue) inset;
}
.package-form .option:focus-within { border-color: var(--blue); }

.package-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
/* pole přes celou šířku řádku (Adresa umístění, Trvalé bydliště) */
.package-fields .field-full { grid-column: 1 / -1; }
.package-form > .btn { justify-self: center; padding-inline: 3rem; }

/* ============================================================
   REFERENCE
   ============================================================ */
/* Karta reference stojí uprostřed (margin-inline: auto), takže nadpis nad ní
   se centruje taky — nalevo u kraje nad vycentrovanou kartou visel ve vzduchu.
   Platí pro všechny stránky, sekce má všude id="reference". */
#reference .section-head { margin-inline: auto; text-align: center; }

.testimonial {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem 2.5rem 2.5rem;
  position: relative;
}
.testimonial::before {
  content: "„";
  position: absolute;
  top: -34px; left: 24px;
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--blue);
  opacity: 0.5;
}

.testimonial-photo {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.4rem;
  border: 3px solid var(--blue);
  box-shadow: var(--shadow-glow);
}

.testimonial blockquote { font-size: 1.12rem; font-style: italic; }
.testimonial blockquote::before { content: "„"; }
.testimonial blockquote::after { content: "“"; }

.testimonial figcaption {
  margin-top: 1.3rem;
  font-weight: 800;
  color: var(--cyan);
}
.testimonial figcaption span {
  display: block;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* ============================================================
   PATIČKA (footer.html)
   ============================================================ */
.site-footer {
  position: relative;
  background: #03091a;
  border-top: 1px solid var(--border);
  padding: 3.5rem 0 1.5rem;
  overflow: hidden;
}

.footer-glow {
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 240px;
  background: radial-gradient(ellipse, rgba(46,143,255,0.18), transparent 70%);
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  position: relative;
}

.footer-logo { height: 40px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--text-dim); font-size: 0.92rem; max-width: 24rem; }

.footer-social { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--cyan);
  transition: background 0.2s, transform 0.2s;
}
.footer-social a:hover { background: rgba(46,143,255,0.15); transform: translateY(-2px); }

.footer-col h3 {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 1rem;
}
.footer-col li { padding: 0.3rem 0; color: var(--text-dim); font-size: 0.93rem; }
.footer-col a { color: var(--text-dim); transition: color 0.2s; }
.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
}
.to-top { font-weight: 800; }

/* ============================================================
   SLOVNÍK POJMŮ (slovnik-pojmu.html)
   Rejstřík i skoky na písmena jsou obyčejné kotvy, žádný JavaScript.
   ============================================================ */
.abc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2.8rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.abc-nav a {
  min-width: 2.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.abc-nav a:hover,
.abc-nav a:focus-visible {
  color: #fff;
  background: rgba(46, 143, 255, 0.18);
  border-color: var(--border-strong);
}

.glossary-group + .glossary-group { margin-top: 2.6rem; }

/* Hlavička sekce se musí odrolovat pod lepivou hlavičku webu — její výšku
   měří js/main.js do --header-h, 71px je záloha, kdyby JS neběžel. */
.glossary-group { scroll-margin-top: calc(var(--header-h, 71px) + 1.2rem); }

.glossary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-strong);
}
.glossary-letter {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--cyan);
}
.to-index {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}
.to-index:hover { color: var(--cyan); }

/* Dvousloupcová sazba slovníku: vlevo pojem, vpravo výklad. Linka nad
   oběma buňkami drží řádek pohromadě. Pod 720 px se skládá pod sebe. */
.glossary-list {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  column-gap: 2rem;
}
.glossary-list dt {
  grid-column: 1;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
}
.glossary-list dd {
  grid-column: 2;
  padding: 1.1rem 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.glossary-list dt:not(:first-of-type),
.glossary-list dt:not(:first-of-type) + dd {
  border-top: 1px solid var(--border);
}
.glossary-list dd strong { color: var(--text); font-weight: 800; }

/* ============================================================
   TIPY A TRIKY (tipy-a-triky.html)
   Rady samotné jsou .faq-item, tedy tytéž <details> jako FAQ na hlavní
   stránce. Přibývá k nim jen dělení do tematických skupin, číslované
   postupy a odstavec uvnitř rozbalené rady.
   Rozcestník nahoře je .abc-nav ze slovníku, beze změny.
   ============================================================ */
.tips-group + .tips-group { margin-top: 2.6rem; }

/* Stejně jako u skupin slovníku: kotva se musí odrolovat pod lepivou
   hlavičku, jejíž výšku měří js/main.js do --header-h. */
.tips-group { scroll-margin-top: calc(var(--header-h, 71px) + 1.2rem); }

.tips-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-strong);
}
.tips-title {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--cyan);
}

/* Úvodní věta uvnitř rozbalené rady. Musí přebít .faq-item ul, které
   sedí hned pod ní, proto vlastní odsazení místo výchozího odstavce. */
.faq-item > p {
  padding: 0 0 0.2rem;
  color: var(--text-dim);
  font-size: 0.93rem;
}
.faq-item > p:last-child { padding-bottom: 1.4rem; }
.faq-item > p strong { color: var(--text); font-weight: 800; }

/* Číslovaný postup. Čísla si kreslíme sami (list-style: none), aby seděla
   v kolečku a nezávisela na výchozím vykreslení prohlížeče. */
.tip-steps {
  list-style: none;
  counter-reset: tip-step;
  padding: 0.4rem 0 1.4rem;
}
.tip-steps li {
  counter-increment: tip-step;
  position: relative;
  padding: 0.45rem 0 0.45rem 2.2rem;
  color: var(--text-dim);
  font-size: 0.93rem;
}
.tip-steps li::before {
  content: counter(tip-step);
  position: absolute;
  left: 0; top: 0.35rem;
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(46, 143, 255, 0.14);
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
}
/* Po číslovaném postupu následuje občas ještě odrážkový dovětek. Ten si
   spodní mezeru drží sám, postup ji tedy nesmí přidávat podruhé. */
.tip-steps:has(+ ul) { padding-bottom: 0.4rem; }

/* ============================================================
   SCROLL REVEAL (třídu .visible přidává js/main.js)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb, .floating-chip { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   LOKALITY (internet-v-praze.html a praha-1 … praha-10.html)
   Stránky obvodů se nepíšou ručně — skládá je build.py ze šablony
   partials/lokalita.html. Nová komponenta pro ně tedy patří sem, ne
   do stránky; ta se při dalším buildu přepíše.
   ============================================================ */

/* rozcestník obvodů; počet sloupců se dopočítá, aby řádek vyšel i když
   obvodů v datech přibude nebo ubude */
.lokality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}

.lokalita-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lokalita-card:hover,
.lokalita-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow);
}
.lokalita-cislo {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--cyan);
}
.lokalita-card h3 {
  margin: 0.7rem 0 0.45rem;
  font-size: 1.02rem;
  color: var(--text);
}
.lokalita-casti { color: var(--text-dim); font-size: 0.88rem; }
/* .card-link je uvnitř odkazu, takže barvu nedědí z <a> — musí si ji říct */
.lokalita-card .card-link { margin-top: 0.9rem; font-size: 0.85rem; color: var(--cyan); }

/* seznam čtvrtí. Až dostanou vlastní stránky, stane se z položky odkaz
   (viz data/lokality.json) — proto má <a> vlastní odsazení přes celou
   pilulku, aby se dalo kliknout kamkoli, ne jen na text. */
.casti-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.2rem;
}
.casti-list li {
  padding: 0.5rem 0.95rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color 0.2s;
}
.casti-list li:hover { border-color: var(--border-strong); }
.casti-list a {
  display: block;
  margin: -0.5rem -0.95rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
}

/* odstavce pod seznamem čtvrtí a poznámka pod ceníkem */
.lokalita-text { max-width: 62rem; }
.lokalita-text p { margin-bottom: 1rem; color: var(--text-dim); }
.lokalita-text p:last-child { margin-bottom: 0; }
.lokalita-note { margin-top: 1.8rem; color: var(--text-dim); font-size: 0.95rem; }

/* Rozcestník na konci stránky obvodu je .abc-nav ze slovníku pojmů,
   beze změny — obvod, na kterém návštěvník je, se jen vytáhne barvou. */
.abc-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(46, 143, 255, 0.22);
  border-color: var(--border-strong);
}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width: 1100px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .band-inner, .contact-wrap, .hero-inner { grid-template-columns: 1fr; }
  .band-spacer { display: none; }
  .hero-visual { max-width: 480px; }
  /* na úzkých displejích fotka ustoupí, obsah dostane plnou šířku */
  .band-family::before,
  .band-tv::before {
    background: linear-gradient(180deg, rgba(5,13,31,0.75) 0%, rgba(5,13,31,0.92) 100%);
  }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    /* --header-h měří js/main.js; 71px je záloha, kdyby JS neběžel */
    top: var(--header-h, 71px);
    left: 0; right: 0;
    /* plně krycí — i 3 % průhlednosti nechá prosvítat bílý nadpis hero sekce */
    background: #050d1f;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.55);
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1.2rem 4%;
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; gap: 0.2rem; }
  .main-nav ul a { padding: 0.85rem 1rem; }
  .nav-phone { justify-content: center; }

  .cards-3, .speed-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 1.4rem; flex-wrap: wrap; }

  .modem-card, .device-card { grid-template-columns: 1fr; gap: 1.6rem; }
  .modem-photo { max-height: 260px; }

  .option-groups, .package-fields { grid-template-columns: 1fr; }
}

/* Soupiska programů je jeden velký obrázek s ~130 logy. Zmenšit ho na šířku
   telefonu znamená, že z log zbudou nečitelné skvrny — proto se pod 760 px
   drží minimální šířka a panel se posouvá do strany. */
@media (max-width: 760px) {
  .program-sheet { overflow-x: auto; }
  .program-sheet img { min-width: 620px; }
}

/* Slovník: pod 720 px se dvousloupcová sazba složí pod sebe, jinak by
   na pojem zbyl sloupec na dvě slova. Oddělovací linku pak nese jen
   pojem, aby se řádek nerozpadl na dvě linky nad sebou. */
@media (max-width: 720px) {
  .glossary-list { grid-template-columns: 1fr; }
  .glossary-list dt, .glossary-list dd { grid-column: 1; }
  .glossary-list dt { padding: 1.1rem 0 0.3rem; }
  .glossary-list dd { padding: 0 0 1.1rem; }
  .glossary-list dt:not(:first-of-type) + dd { border-top: 0; }
}

@media (max-width: 620px) {
  .cards-4, .pricing { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-details { grid-template-columns: 1fr; }
  .brand-logo { height: 26px; }
  .speed-rows { gap: 1.5rem; }
  .band-call-inner { flex-direction: column; align-items: flex-start; }

  /* tabulka tarifů se na mobilu rozpadne na karty — hlavička zmizí
     a popisek sloupce nese ::before z data-label u buňky */
  .tariff-wrap { overflow-x: visible; background: none; border: 0; }
  .tariff { min-width: 0; display: block; }
  .tariff thead { display: none; }
  .tariff tbody, .tariff tr, .tariff td { display: block; }
  .tariff tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.4rem 1.2rem;
    margin-bottom: 0.9rem;
  }
  .tariff tbody tr:last-child { margin-bottom: 0; }
  .tariff td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.8rem 0;
  }
  .tariff td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
  }
  .tariff-old { flex-basis: 100%; text-align: right; }

  /* ukazatel počtu programů dostane na kartě vlastní řádek přes celou šířku */
  .tariff-count { margin-bottom: 0; }
  .tariff-bar { flex-basis: 100%; max-width: none; }

  .feature-strip { gap: 1.1rem; }
  .feature-strip li { flex-basis: 100%; }

  /* štítky u banneru zůstávají i na mobilu — jen se zmenší a zatáhnou
     dovnitř, aby nepřečnívaly přes okraj obrazovky */
  .floating-chip {
    font-size: 0.74rem;
    padding: 0.42rem 0.85rem;
    gap: 0.35rem;
  }
  .chip-1 { top: -14px; left: 0; }
  .chip-2 { bottom: -12px; right: 0; }
}