:root {
  --bg: #08090d;
  --bg-alt: #0c0e13;
  --bg-elevated: #12141b;
  --text: #f4f3f1;
  --text-muted: #9a9aa4;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --accent-soft: rgba(245, 158, 11, 0.14);
  --violet: #6366f1;
  --border: rgba(255, 255, 255, 0.09);
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.075);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --radius: 20px;
  --radius-sm: 12px;
  --font-heading: 'Poppins', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  height: 100%;
  /* ZÁMERNE nie scroll-behavior: smooth.
     To by platilo na KAŽDÝ posun, vrátane toho, ktorý prehliadač spraví
     sám, keď dostane fokus prvok čiastočne skrytý pod lepkavou hlavičkou
     alebo pri okraji okna (typicky po kliknutí na checkbox). Animovaný
     posun sa vtedy prejaví ako "šklbnutie" stránky. Plynulé rolovanie
     preto riešime v JS len pri kliknutí na kotvu (viď script.js). */
  scroll-behavior: auto;
  /* Rezerva na lepkavú hlavičku, aby prvok, na ktorý sa skáče alebo
     ktorý dostane fokus, neskončil schovaný pod ňou. */
  scroll-padding-top: 96px;
  scroll-padding-bottom: 32px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  /* Úplne plochá farba. Všetky farebné žiary sú v jedinej fixed vrstve
     (.ambient nižšie). Vďaka tomu neexistuje na stránke žiadny podklad,
     ktorý by sa mohol niekde "začať" alebo "skončiť" — a teda ani žiadny
     prechod medzi sekciami, ktorý by bolo možné uvidieť. */
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

main { flex: 1 0 auto; position: relative; z-index: 1; }
.site-footer { flex-shrink: 0; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

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

h2 { font-size: 2rem; margin-bottom: 12px; letter-spacing: -0.01em; }

.section-lead {
  color: var(--text-muted);
  max-width: 620px;
  margin-bottom: 40px;
  font-size: 1.05rem;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #1a1305; }

/* ---------- Ambientná farebná vrstva ----------
   JEDNA fixed vrstva cez celý viewport, ktorá nesie všetky farebné žiary.
   Keďže je fixed, vyzerá pri každej pozícii scrollu úplne rovnako — nemá
   teda ako vzniknúť hrana medzi sekciami. Žiadny blur filter ani
   mix-blend-mode: oboje spôsobuje pravouhlé artefakty a brzdí scroll. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 10% 5%, rgba(245, 158, 11, 0.22), transparent 62%),
    radial-gradient(ellipse 55% 50% at 90% 15%, rgba(99, 102, 241, 0.18), transparent 62%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(245, 158, 11, 0.10), transparent 62%);
}

/* ---------- Fixed globe layer ---------- */
.globe-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.85;
}

.globe-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* Everything that should sit above the fixed globe */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------- Glass utility ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: var(--glass-shadow);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 9, 13, 0.55);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background: rgba(8, 9, 13, 0.78);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  /* Ponechané pre prípadný textový fallback */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text);
}

.logo span { color: var(--accent); }

.logo img {
  display: block;
  height: 34px;
  width: auto;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

a.logo:hover img { opacity: 0.85; transform: translateY(-1px); }

.site-footer .logo img { height: 30px; }

@media (max-width: 640px) {
  .logo img { height: 28px; }
}

.nav {
  display: flex;
  gap: 32px;
}

.nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nav a:hover { color: var(--text); }

/* Hamburger na mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s var(--ease-out);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.btn-small { padding: 10px 20px; font-size: 0.88rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #14100a;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4);
}

.btn-outline {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-outline:hover {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--accent);
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
}

/* Hero */
.hero {
  position: relative;
  padding: 150px 0 120px;
  text-align: center;
  min-height: 92vh;
  display: flex;
  align-items: center;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Pozn.: hero zámerne NEMÁ ::after stmavovacie prekrytie.
   Keďže glóbus je fixed cez celý viewport, akékoľvek prekrytie
   ohraničené výškou hero sekcie vytvorí na jej spodnej hrane ostrý
   vodorovný rez (nad hranou stlmený glóbus, pod hranou plný jas).
   Glóbus je preto stlmený rovnomerne cez opacity na .globe-wrap. */

/* .hero-blob vrstvy boli odstránené.
   Používali filter: blur(90px) + mix-blend-mode: screen. Blend mód sa
   vyhodnocuje voči podkladu v rámci najbližšieho stacking kontextu, čo
   na jeho hraniciach vytváralo presne tú viditeľnú vodorovnú hranu.
   Veľký blur navyše zdržiaval scroll. Farebnosť teraz zabezpečuje
   fixed .ambient vrstva, ktorá je z princípu bezšvová aj lacná. */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  margin-bottom: 28px;
  letter-spacing: 0.01em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px var(--accent);
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 20%, rgba(255, 255, 255, 0.75));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 1.2rem;
  max-width: 560px;
  margin: 0 auto 40px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sections */
.section { padding: 100px 0; position: relative; }

/* .section-alt zámerne nemá vlastné pozadie ani orámovanie.
   Akýkoľvek odlišný podklad sekcie (aj veľmi jemný) vytvorí na jej
   začiatku a konci viditeľné rozhranie. Sekcie sa preto vizuálne
   neoddeľujú podkladom, ale výhradne priestorom (padding) a obsahom —
   scroll potom pôsobí ako jedna súvislá plocha. */
.section-alt { background: none; }

/* Cards (čo robíme) */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.card {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
  overflow: hidden;
  transform: perspective(800px) rotateX(var(--ry, 0)) rotateY(var(--rx, 0));
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 40%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.card:hover {
  transform: perspective(800px) rotateX(var(--ry, 0)) rotateY(var(--rx, 0)) translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--glass-bg-strong);
}

.card:hover::before { opacity: 1; }

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .cards { grid-template-columns: 1fr; }
}

.card-icon {
  font-family: var(--font-heading);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 16px;
  opacity: 0.85;
}

.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Roadmap „Náš prístup" ----------
   Desktop: 4 kroky vedľa seba, spojnica vodorovne.
   Mobil: tá istá štruktúra preklopená na zvislú časovú os.
   Animácia sa spúšťa triedou .visible, ktorú na .roadmap pridá
   rovnaký scroll-reveal ako inde na stránke (vrátane 1s poistky). */
.roadmap {
  --rm-gap: 24px;
  --rm-marker: 60px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rm-gap);
  margin: 0;
  padding: 0;
}

.rm-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.roadmap.visible .rm-step { opacity: 1; transform: none; }

.roadmap.visible .rm-step:nth-child(1) { transition-delay: 0.05s; }
.roadmap.visible .rm-step:nth-child(2) { transition-delay: 0.20s; }
.roadmap.visible .rm-step:nth-child(3) { transition-delay: 0.35s; }
.roadmap.visible .rm-step:nth-child(4) { transition-delay: 0.50s; }

/* Spojnica ku ĎALŠIEMU kroku. Šírka = stĺpec + medzera, teda presne
   vzdialenosť medzi stredmi dvoch susedných značiek. */
.rm-step::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(var(--rm-marker) / 2);
  left: 50%;
  width: calc(100% + var(--rm-gap));
  height: 2px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.6), rgba(245, 158, 11, 0.12));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}

.rm-step:last-child::after { display: none; }

.roadmap.visible .rm-step::after { transform: scaleX(1); }
.roadmap.visible .rm-step:nth-child(1)::after { transition-delay: 0.30s; }
.roadmap.visible .rm-step:nth-child(2)::after { transition-delay: 0.45s; }
.roadmap.visible .rm-step:nth-child(3)::after { transition-delay: 0.60s; }

.rm-marker {
  position: relative;
  z-index: 2;
  width: var(--rm-marker);
  height: var(--rm-marker);
  flex: 0 0 var(--rm-marker);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.22), rgba(255, 255, 255, 0.04)), var(--bg);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.05), 0 8px 22px rgba(0, 0, 0, 0.4);
}

.rm-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

.rm-card {
  width: 100%;
  /* Karta vyplní zvyšok výšky kroku. Keďže .rm-step je grid položka,
     všetky kroky majú výšku najvyššieho z nich — karty tak končia
     presne v jednej rovine bez ohľadu na dĺžku textu.
     Na mobile (smer riadok) to isté zabezpečí vyplnenie šírky. */
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 26px 22px;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.rm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--glass-bg-strong);
}

.rm-icon {
  display: flex;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
}

.rm-icon svg { width: 26px; height: 26px; }

.rm-card h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Na širokej obrazovke sa nadpisy lámu na rôzny počet riadkov, čím by
   popisy pod nimi začínali v rôznej výške. Vyhradíme nadpisu miesto na
   dva riadky, takže popisy všetkých kariet začínajú presne v jednej
   rovine. Na mobile sú nadpisy jednoriadkové, tam by rezerva vytvorila
   len zbytočnú medzeru. */
@media (min-width: 901px) {
  .rm-card h3 { min-height: 2.6em; }
}

.rm-card p { color: var(--text-muted); font-size: 0.92rem; }

/* --- Mobil / tablet: zvislá časová os --- */
@media (max-width: 900px) {
  .roadmap {
    grid-template-columns: 1fr;
    --rm-gap: 26px;
    --rm-marker: 52px;
  }

  .rm-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
  }

  .rm-marker { margin-bottom: 0; }

  .rm-icon { justify-content: flex-start; }

  /* Spojnica sa preklopí na zvislú: vedie od spodku značky
     až po značku nasledujúceho kroku. */
  .rm-step::after {
    top: var(--rm-marker);
    bottom: calc(var(--rm-gap) * -1);
    left: calc(var(--rm-marker) / 2 - 1px);
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.6), rgba(245, 158, 11, 0.12));
    transform: scaleY(0);
    transform-origin: center top;
  }

  .roadmap.visible .rm-step::after { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rm-step,
  .roadmap.visible .rm-step { opacity: 1; transform: none; transition: none; }
  .rm-step::after,
  .roadmap.visible .rm-step::after { transform: none; transition: none; }
}

.project-tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.project-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}

.project-link::after {
  content: ' →';
  transition: margin 0.2s ease;
  display: inline-block;
}

/* ---------- Ochutnávka projektov ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

@media (max-width: 860px) {
  .projects { grid-template-columns: 1fr; }
}

.project {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transform: perspective(1000px) rotateX(var(--ry, 0)) rotateY(var(--rx, 0));
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.project:hover {
  transform: perspective(1000px) rotateX(var(--ry, 0)) rotateY(var(--rx, 0)) translateY(-6px);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.project-art {
  height: 190px;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
}

.project-art svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-out);
}

.project:hover .project-art svg { transform: scale(1.04); }

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}

.project-body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.project-body > p { color: var(--text-muted); font-size: 0.94rem; margin-bottom: 18px; }

.project-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* vyplní zvyšok karty, aby tlačidlá oboch projektov sedeli v jednej rovine */
  flex: 1;
}

.project-points li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.project-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

.project-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.project-cta .btn { gap: 8px; }
.project-cta .btn svg { width: 15px; height: 15px; }

.project-domain {
  font-size: 0.84rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.projects .project.reveal:nth-child(1) { transition-delay: 0s; }
.projects .project.reveal:nth-child(2) { transition-delay: 0.1s; }

/* ---------- Záruky ---------- */
.guarantees {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 780px) {
  .guarantees { grid-template-columns: 1fr; }
}

.guarantee {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transform: perspective(900px) rotateX(var(--ry, 0)) rotateY(var(--rx, 0));
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.guarantee:hover {
  transform: perspective(900px) rotateX(var(--ry, 0)) rotateY(var(--rx, 0)) translateY(-4px);
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--glass-bg-strong);
}

.guarantee-check {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.guarantee-check svg { width: 17px; height: 17px; }

.guarantee h3 { font-size: 1.03rem; margin-bottom: 6px; }
.guarantee p { color: var(--text-muted); font-size: 0.93rem; }

.guarantees .guarantee.reveal:nth-child(1) { transition-delay: 0s; }
.guarantees .guarantee.reveal:nth-child(2) { transition-delay: 0.08s; }
.guarantees .guarantee.reveal:nth-child(3) { transition-delay: 0.16s; }
.guarantees .guarantee.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- FAQ ----------
   Postavené na <details>, takže rozbaľovanie funguje aj bez JavaScriptu. */
.faq {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
  overflow: hidden;
}

.faq-item:hover { border-color: rgba(245, 158, 11, 0.3); }
.faq-item[open] { border-color: rgba(245, 158, 11, 0.35); background: var(--glass-bg-strong); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--text);
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* Vlastná ikona plus/mínus namiesto systémovej šípky */
.faq-item summary::after {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  transition: transform 0.3s var(--ease-out);
}

.faq-item[open] summary::after { transform: rotate(135deg); }

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.faq-answer {
  padding: 0 24px 22px;
  color: var(--text-muted);
  font-size: 0.96rem;
}

.faq-answer p + p { margin-top: 12px; }

/* Blok FAQ má cez JS vyhradenú výšku, aby rozbaľovanie neposúvalo
   sekciu Kontakt. Tá rezerva už sama tvorí priestor pod otázkami,
   preto sekcii uberáme spodné odsadenie — inak by medzera bola dvojitá. */
#faq { padding-bottom: 48px; }

@media (max-width: 560px) {
  .faq-item summary { padding: 17px 18px; font-size: 0.97rem; }
  .faq-answer { padding: 0 18px 18px; }
}

/* Contact */
/* Dva stĺpce: vľavo text a kontaktné údaje, vpravo formulár.
   Vďaka tomu nezostáva vpravo prázdna plocha a nadpis začína
   v rovnakej osi ako nadpisy ostatných sekcií. */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 600px;
  }
}

.contact-intro .section-lead { margin-bottom: 32px; }

.contact-facts {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-facts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid rgba(245, 158, 11, 0.45);
  font-size: 0.96rem;
  color: var(--text);
}

.contact-fact-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-facts a {
  color: var(--accent);
  font-weight: 500;
}

.contact-facts a:hover { text-decoration: underline; }

.contact-socials {
  display: flex;
  gap: 18px;
  font-size: 0.92rem;
}

.contact-socials a {
  color: var(--text-muted);
  transition: color 0.2s;
}

.contact-socials a:hover { color: var(--accent); }

.contact-form {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 36px;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: var(--glass-shadow);
}

@media (max-width: 560px) {
  .contact-form { padding: 24px; }
}

.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }

.form-row label { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }

.form-row input,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.form-row input::placeholder,
.form-row textarea::placeholder { color: rgba(244, 243, 241, 0.35); }

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.06);
}

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-row-checkbox { margin-bottom: 22px; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox-label a { color: var(--accent); text-decoration: underline; }

.form-status {
  margin-top: 14px;
  font-size: 0.92rem;
  min-height: 1.2em;
}
.form-status.success { color: #34d399; }
.form-status.error { color: #f87171; }

/* Footer */
.site-footer {
  /* Bez plnej 1px čiary a bez vlastného podkladu — namiesto toho
     veľmi jemné, postupné stmavenie, ktoré nikde nevytvára hranu. */
  padding: 60px 0 40px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.socials { display: flex; gap: 20px; }
.socials a { font-weight: 500; font-size: 0.92rem; color: var(--text-muted); }
.socials a:hover { color: var(--accent); }

.copyright { width: 100%; text-align: center; color: var(--text-muted); font-size: 0.82rem; margin-top: 8px; }

@media (min-width: 640px) {
  .copyright { width: auto; margin-top: 0; }
}

/* Responsive nav */
@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .nav {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(8, 9, 13, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: 4px 24px 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  .nav.open { display: flex; }

  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav a:last-child { border-bottom: none; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.cards .card.reveal:nth-child(1) { transition-delay: 0s; }
.cards .card.reveal:nth-child(2) { transition-delay: 0.08s; }
.cards .card.reveal:nth-child(3) { transition-delay: 0.16s; }
.cards .card.reveal:nth-child(4) { transition-delay: 0.24s; }

.blog-grid .blog-card.reveal:nth-child(1) { transition-delay: 0s; }
.blog-grid .blog-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.blog-grid .blog-card.reveal:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}