/* ===========================================================
   Telemint s.r.o. - vlastni design, bez sablony
   Barvy vychazeji z loga firmy (tmave modra + cervena), ztlumene
   do "technicti" grafitove palety. Bez fotografii - mista fotek
   nesou vlastni technicka SVG schemata.
   =========================================================== */

:root {
  --navy-950: #080b1c; /*CFG:color.navy950*/
  --navy-900: #202b6f; /*CFG:color.navy900*/
  --navy-800: #10163f; /*CFG:color.navy*/
  --navy-700: #182155;
  --navy-100: #e7e9f2;
  --red-600: #c81f26; /*CFG:color.red*/
  --red-700: #9c151b;
  --red-100: #fbe9ea;
  --accent-blue: #4da6ff; /*CFG:color.accentBlue*/
  --paper: #f3f2ec;
  --paper-dim: #eae8dd;
  --ink: #15161f;
  --gray-600: #5c5e6b;
  --gray-300: #d8d5c8;
  --line-dark: rgba(255, 255, 255, 0.16);
  --white: #ffffff;

  --font-head: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1180px;

  /* nasobic rychlosti animace (tecka pri prechodu mezi strankami) -
     1 = normalni rychlost, vice = rychlejsi, mene = pomalejsi */
  --anim-speed: 0.6; /*CFG:animSpeed*/

  /* minimalni doba, po kterou zustane vypinac po kliknuti vizualne
     "sepnuty" (v sekundach, 0 az 1) - i kdyz uzivatel tlacitko pusti drive */
  --press-min-duration: 0.55; /*CFG:pressMinDuration*/

  /* doba jednoho cyklu pulzovani znacky pokracovani dole na strance
     (v sekundach) - vetsi cislo = pomalejsi pulzovani */
  --scroll-pulse-duration: 1.8; /*CFG:scrollPulseDuration*/

  /* haptická odezva (vibrace) na dotykovych zarizenich - delka jednoho
     pulzu v milisekundach a pocet pulzu za sebou */
  --vibrate-duration: 15; /*CFG:vibrateDuration*/
  --vibrate-count: 2; /*CFG:vibrateCount*/

  /* na ktere prokliky se vibrace aplikuje (1 = zapnuto, 0 = vypnuto) */
  --vibrate-switch: 1; /*CFG:vibrateSwitch*/
  --vibrate-back: 1; /*CFG:vibrateBack*/
  --vibrate-scroll: 0; /*CFG:vibrateScroll*/
  --vibrate-nav: 0; /*CFG:vibrateNav*/
  --vibrate-phone: 0; /*CFG:vibratePhone*/
  --vibrate-logo: 0; /*CFG:vibrateLogo*/
  --vibrate-cards: 1; /*CFG:vibrateCards*/
  --vibrate-toc: 1; /*CFG:vibrateToc*/
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* aby "Domu" (index.html#top) neschovalo nadpis pod pripnutou hlavicku */
#top { scroll-margin-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-800);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p { margin: 0 0 1em; color: var(--gray-600); }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: 14px;
}

/* ---------- Technicke "plate" bloky ---------- */
.plate {
  border: 1px solid var(--gray-300);
  background: var(--paper);
}
.plate-dark {
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.035);
}

/* ---------- Kolebkove tlacitko (vypinac) ---------- */
.switch-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; }
.switch-frame { width: 66px; height: 66px; flex: none; padding: 5px; border-radius: 11px; display: flex; perspective: 440px; margin: 0 auto; }
.switch-gap { flex: 1; padding: 4px; border-radius: 7px; display: flex; flex-direction: column; background: var(--sec-bg, var(--navy-950)); }
.switch-edge {
  flex: none;
  box-sizing: border-box;
  height: 0;
  border-radius: 2px 2px 0 0;
  border-bottom: 0.5px solid transparent;
  opacity: 0;
  transition: height 0.03s linear, opacity 0.03s linear;
}
.switch-rocker {
  flex: 1;
  border-radius: 5px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 0.03s linear, box-shadow 0.03s linear, border-radius 0.03s linear;
  box-shadow: 0 9px 14px -2px rgba(0, 0, 0, 0.55), 0 2px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.switch-cta.is-pressed .switch-rocker,
.switch-cta:active .switch-rocker {
  border-radius: 0 0 5px 5px;
  transform: rotateX(-26deg) translateY(1px);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, border-radius 0.1s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.switch-cta.is-pressed .switch-edge,
.switch-cta:active .switch-edge {
  height: 9px;
  opacity: 1;
  transition: height 0.1s ease-out, opacity 0.1s ease-out;
}
.switch-primary .switch-frame { background: var(--red-600); }
.switch-primary .switch-rocker { background: var(--red-600); }
.switch-primary .switch-edge { background: var(--red-600); border-bottom-color: #6e1015; }
.switch-ghost .switch-frame { background: rgba(255, 255, 255, 0.24); }
.switch-ghost .switch-rocker { background: rgba(255, 255, 255, 0.14); }
.switch-ghost .switch-edge { background: rgba(255, 255, 255, 0.24); border-bottom-color: rgba(0, 0, 0, 0.55); }
.switch-navy .switch-frame { background: var(--navy-800); }
.switch-navy .switch-rocker { background: var(--navy-800); }
.switch-navy .switch-edge { background: var(--navy-800); border-bottom-color: #060815; }
.switch-outline .switch-frame { background: var(--gray-300); }
.switch-outline .switch-rocker { background: var(--paper-dim); }
.switch-outline .switch-edge { background: var(--gray-300); border-bottom-color: #9a9788; }
.switch-outline .switch-label { color: var(--navy-800) !important; }
/* pevna vyska popisku na 2 radky (bez ohledu na to, jestli se skutecne
   zalomi) - jinak by se ctverce vypinacu v radku nezarovnaly na stejnou
   vysku (align-items:center centruje kazde tlacitko podle jeho CELKOVE
   vysky, ktera se lisi podle poctu radku popisku) */
.switch-label { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; line-height: 1.3; min-height: 2.6em; }

/* linky (rely) vedouci ke krajum stranky - TRVALA soucast stranky (ne jen
   behem animace). Tecka pri kliknuti/prijezdu po nich jen putuje. */
/* Musi byt PRIME potomky plne sirokeho .hero-inner (ne vnoreny v .container
   s max-width) - jinak width:100% neodpovida skutecne sirce stranky. */
.hero-cta-row, .heading-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
/* Linky jsou VIDITELNE JEN DOCASNE - pokud je aktivuje "vypinac" (klik na
   switch-cta), viz JS v main.js (trida "is-active" pridana pri odjezdu i
   prijezdu tecky, pak zase odebrana). Pri beznem vstupu na stranku (z
   navigacniho menu, tlacitkem Zpet, primym odkazem apod.) zustavaji
   linky neviditelne. */
.hero-cta-row::before, .hero-cta-row::after,
.heading-rail::before, .heading-rail::after { content: ""; flex: 1; height: 1.5px; background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.4s ease; }
/* linky u vypinacu zarovnany na vodorovny stred samotneho ctverce
   vypinace (66px), ne na stred cele sloupce vc. popisku pod nim - radek
   ma align-items:center, ktery by linku vystredil podle nejvyssiho
   prvku (sloupce s popiskem), proto se zarovnani pro linky prebiji
   zvlast pres align-self a rucni odsazeni */
.hero-cta-row::before, .hero-cta-row::after { align-self: flex-start; margin-top: 32.25px; }
/* Zobrazuje se vzdy jen ta linka, ktera prislusi konkretnimu vypinaci
   (smeru doleva/doprava) - ne obe najednou */
.hero-cta-row.is-active-before::before, .heading-rail.is-active-before::before { opacity: 1; }
.hero-cta-row.is-active-after::after, .heading-rail.is-active-after::after { opacity: 1; }
.hero-cta-row.on-light::before, .hero-cta-row.on-light::after,
.heading-rail.on-light::before, .heading-rail.on-light::after { background: var(--gray-300); }
.hero-cta-row { gap: 40px; }
/* stejna sirka kazdeho sloupce tlacitka, aby byly ctverce od sebe vzdy
   stejne daleko bez ohledu na delku popisku pod nimi */
.hero-cta-row .switch-cta { width: 148px; }
.heading-rail { gap: 8px; }
.heading-rail h1 { margin: 0; min-width: 0; max-width: 720px; }

/* "rail-no-left"/"rail-no-right" - dana linka zustava natrvalo
   neviditelna (i kdyz je radek aktivni), ale porad zabira misto, aby byl
   nadpis vystredeny - jinak by ho vyvazovala jen ta druha linka */
.heading-rail.rail-no-left::before { background: transparent; }
.heading-rail.rail-no-right::after { background: transparent; }

/* vyrazny 3px oddelovac pres celou sirku containeru - graficky oddeluje
   nadpis od obsahu pod nim (napr. Kontakt) */
.section-divider-thick { width: 100%; max-width: var(--container); height: 3px; margin: 24px auto 0; background: rgba(255, 255, 255, 0.3); }

/* svisla linka - stejny motiv jako vodorovne rely, jen dolu/nahoru.
   Pouziva se u tlacitka "O nas" (misto do stran vede dolu) a na strance
   O nas naopak prijizdi shora dolu k nadpisu. */
.hero-vline { width: 1.5px; background: rgba(255, 255, 255, 0.3); margin: 0 auto; flex: none; }
.hero-vline-behind { position: absolute; left: 50%; top: 0; width: 1.5px; background: rgba(255, 255, 255, 0.3); transform: translateX(-50%); z-index: 0; opacity: 0; transition: opacity 0.4s ease; }
.hero-vline-behind.is-active { opacity: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* plna nepruhlednost mista poloprusvitneho pozadi s "backdrop-filter" -
     ten na potomkovi s "position:fixed" (mobilni vysouvaci menu, .main-nav)
     mimodek zmeni jeho ukotveni z viewportu na tento header, cimz se cele
     menu na mobilu/tabletu zobrazovalo spatne (mimo obrazovku) */
  background: var(--paper);
  border-bottom: 1px solid var(--gray-300);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 42px; width: auto; }

/* Navigace je VZDY sbalena do burger menu (nezavisle na sirce obrazovky) -
   rozbaluje se jako roleta pod hlavickou (roste vyska dolu), ne pres
   celou obrazovku. ".site-header" je "position:sticky", takze funguje
   jako ukotveni pro "position:absolute" zde. */
.main-nav {
  position: absolute;
  top: 100%;
  right: 24px;
  width: 260px;
  max-width: calc(100vw - 48px);
  background: var(--paper);
  border: 1px solid var(--gray-300);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 34px rgba(8, 11, 28, 0.14);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.main-nav.is-open { max-height: 480px; overflow-y: auto; }
.main-nav > ul { display: flex; flex-direction: column; align-items: stretch; gap: 4px; list-style: none; margin: 0; padding: 16px; }
.main-nav a.nav-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-800);
  padding: 8px 2px;
}
.main-nav a.nav-link:hover { color: var(--red-600); }

.has-dropdown { position: relative; }
.dropdown {
  position: static;
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 0 2px 14px;
  opacity: 1;
  visibility: visible;
  transform: none;
  list-style: none;
  margin: 0;
  display: none;
}
.has-dropdown.is-open .dropdown { display: block; }
.dropdown a { display: block; padding: 10px 12px; font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.dropdown a:hover { background: var(--red-100); color: var(--red-700); }

.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-phone { font-family: var(--font-mono); font-size: 0.82rem; color: var(--navy-800); font-weight: 600; }

.menu-toggle { display: block; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-800); margin: 5px 0; transition: 0.2s; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy-950); color: var(--white); overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.05), transparent 62%); }
.hero-inner { position: relative; z-index: 2; text-align: center; }

/* Tlacitko "Zpet" - presunuto z hlavicky do praveho horniho rohu hero
   sekce, stejny vzhled jako tlacitka obsahu na strance Slaboproud (.toc a
   na tmavem pozadi). */
.hero-back-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 3;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.hero-back-btn:hover { border-color: var(--red-600); color: var(--red-600); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45); }
.hero .eyebrow { color: var(--red-600); }
.hero h1 { color: var(--white); font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.hero-sub { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--red-600); }
.hero-lead { color: rgba(255,255,255,0.78); font-size: 1rem; }

.breadcrumb { display: flex; gap: 8px; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--white); }

/* ---------- Sekce obecne ---------- */
section { padding: 96px 0; }
.section-head { max-width: 680px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.bg-gray { background: var(--paper-dim); }
.bg-navy { background: var(--navy-900); color: var(--white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); }
.bg-navy p { color: rgba(255,255,255,0.72); }

/* ---------- O nas ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.about-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.about-point { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.about-point .num {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--gray-300);
  color: var(--red-600); font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.about-point p { margin: 0; color: var(--ink); font-size: 0.92rem; align-self: center; }

/* ---------- Sluzby karty ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.service-card {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 0 rgba(8, 11, 28, 0.14), 0 18px 34px -8px rgba(8, 11, 28, 0.32), 0 6px 12px rgba(8, 11, 28, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 3px 0 rgba(8, 11, 28, 0.14), 0 30px 44px -10px rgba(8, 11, 28, 0.4), 0 10px 18px rgba(8, 11, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.service-card .accent-bar { height: 4px; background: var(--red-600); }
.service-card.is-navy .accent-bar { background: var(--navy-800); }
.service-card .card-body { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.service-card .icon-wrap { width: 58px; height: 58px; flex: none; display: flex; align-items: center; justify-content: center; }
.service-card h3 { font-size: 1.3rem; }
.service-card ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; }
.service-card ul li { display: flex; gap: 10px; align-items: center; font-size: 0.86rem; color: var(--ink); }
.service-card ul li svg { flex: none; color: var(--red-600); }
.service-card.is-navy ul li svg { color: var(--navy-800); }
.card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }

/* ---------- Podkapitoly na strankach sluzeb ---------- */
.topic { padding: 32px 0; border-top: 1px solid var(--gray-300); scroll-margin-top: 100px; }
.topic:first-of-type { border-top: none; padding-top: 0; }
.topic[hidden] { display: none; }
.topic h3 { font-size: 1.2rem; margin: 0 0 16px; display: flex; align-items: center; gap: 12px; }
.topic h3::before { content: ""; width: 8px; height: 8px; background: var(--red-600); flex: none; }
.topic-body ul { padding-left: 20px; color: var(--gray-600); }
.topic-body ul li { margin-bottom: 8px; }

.checklist { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.checklist li svg { flex: none; margin-top: 4px; color: var(--red-600); }

/* textovy obsah presunuty do tmave hero sekce (podobne jako u O nas) -
   nahrazuje vychozi tmave barvy citelnymi svetlymi variantami */
.on-dark, .on-dark p { color: rgba(255, 255, 255, 0.78); }
.on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .checklist li { color: rgba(255, 255, 255, 0.9); }
.on-dark .toc a { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.on-dark .toc a:hover { border-color: var(--red-600); color: var(--red-600); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45); }
.on-dark .topic { border-top-color: rgba(255, 255, 255, 0.16); }
.on-dark .topic-body ul { color: rgba(255, 255, 255, 0.78); }

.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -6px 0 40px; }
.toc a { padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: 6px; background: var(--paper); box-shadow: 0 3px 8px rgba(8, 11, 28, 0.12); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-800); }
.toc a:hover { border-color: var(--red-600); color: var(--red-600); box-shadow: 0 4px 10px rgba(8, 11, 28, 0.18); }
.toc a[hidden] { display: none; }

/* ---------- schematicke ikony (nahrada za fotky) ---------- */
.schema-icon { display: block; }

/* ---------- Kontakt ---------- */
.contact-standalone { max-width: 900px; margin: 0 auto; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact-list li { padding: 18px 20px; }
.contact-list strong { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-600); margin-bottom: 8px; }
.contact-list span, .contact-list a { color: rgba(255,255,255,0.85); font-size: 0.94rem; }
.contact-list a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,0.55); padding: 40px 0 26px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; }

/* ---------- CTA pruh ---------- */
.cta-strip { padding: 56px 0; }
.cta-strip .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }

/* ---------- Znacka pokracovani (dvojita sipka dole na strance) ----------
   Zobrazi se jen kdyz je obsah stranky vyssi nez okno a uzivatel jeste
   nedojel na konec (viz JS). Jen na vetsich obrazovkach (viz media query
   nize). Je to skutecne tlacitko - proklik posune stranku dolu. */
.scroll-continue {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: none;
  padding: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: opacity 0.3s ease, color 0.2s ease;
}
.scroll-continue.is-visible {
  opacity: 1;
  pointer-events: auto;
  animation: scroll-continue-pulse calc(var(--scroll-pulse-duration) * 1s) ease-in-out infinite;
}
.scroll-continue.is-visible:hover, .scroll-continue.is-visible:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  animation-play-state: paused;
}
.scroll-continue svg { display: block; }
@keyframes scroll-continue-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-continue.is-visible { animation: none; opacity: 0.45; }
}

/* ---------- Responzivita ---------- */
@media (max-width: 960px) {
  .about-grid, .services-grid { grid-template-columns: 1fr; }
  .contact-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .about-points { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-phone { display: none; }
  .rail-svg { display: none; }
  .hero-cta-row::before, .hero-cta-row::after,
  .heading-rail::before, .heading-rail::after { display: none; }
  .scroll-continue { display: none; }
  section { padding: 64px 0; }
}