/* =================================================================
   Hubálek — Dark premium telecom site
   ================================================================= */

/* Register a custom angle property so it can be animated by @keyframes.
   Powers the rotating-light border on hover. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --bg:        #07070a;
  --bg-2:      #0c0c10;
  --card:      #131319;
  --card-2:    #181820;
  --card-hi:   #1f1f29;
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.13);

  --orange:    #F39B2C;
  --orange-2:  #ff8c1a;
  --orange-d:  #d97f17;

  --text:      #ffffff;
  --text-mute: #8a8f99;
  --text-soft: #c5c9d2;
  --text-dim:  #6a6e78;

  --container: 1240px;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --display: 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(1200px 600px at 80% -200px, rgba(243,155,44,0.08), transparent 60%),
    radial-gradient(1000px 800px at 20% 600px, rgba(243,155,44,0.04), transparent 60%);
  background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }

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

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--text);
  min-height: calc(1.12em * 2);
  text-wrap: balance;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1px;
  transition: transform .25s var(--ease-out), background .25s ease, box-shadow .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-lg { padding: 16px 26px; font-size: 15px; }

.btn-primary {
  background: var(--orange);
  color: #1a1308;
  box-shadow: 0 8px 22px rgba(243,155,44,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  background: var(--orange-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(243,155,44,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary .arr { width: 16px; height: 16px; color: #1a1308; }

.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--border-hi); }

.arr-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  color: var(--orange);
  transition: background .25s ease, transform .25s var(--ease-out);
}
.arr-circle svg { width: 13px; height: 13px; }
.arr-circle.small {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  background: var(--orange);
  color: #1a1308;
  border-color: transparent;
}
.arr-circle.small svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-ghost:hover .arr-circle { background: var(--orange); color: #1a1308; border-color: transparent; transform: translateX(2px); }

/* =========== HEADER =========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 18px 0;
  background: linear-gradient(180deg, rgba(7,7,10,0.85), rgba(7,7,10,0.55));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(20,20,26,0.8);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
}

.logo { font-weight: 800; font-size: 20px; letter-spacing: -0.4px; }
.logo-text { color: var(--text); }

.primary-nav { flex: 1; display: flex; justify-content: center; }
.primary-nav ul { display: flex; gap: 28px; }
.primary-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 6px 0;
  transition: color .2s ease;
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a.active { color: var(--text); }
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 18px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .35s var(--ease-out), opacity .25s ease;
}
.primary-nav a:hover::after,
.primary-nav a.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
/* When hovering anywhere in the nav, hide the persistent active underline
   so only the hovered item shows its underline */
.primary-nav ul:hover a.active:not(:hover)::after {
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
}

.header-right { display: flex; align-items: center; gap: 14px; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
  padding: 6px 4px;
}
.header-phone:hover { color: var(--text); }
.phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(243,155,44,0.12);
  color: var(--orange);
}
.phone-icon svg { width: 13px; height: 13px; }

.header-cta {
  padding: 10px 18px;
  font-size: 13px;
  /* Keep the CTA the same width across languages
     (longest copy is EN: "Get in touch") */
  min-width: 130px;
  justify-content: center;
}

.lang-switch {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 999px;
  color: var(--text-mute);
  transition: background .2s ease, color .2s ease;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: rgba(255,255,255,0.1); color: var(--text); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========== HERO =========== */
.hero { padding: 30px 0 42px; }

.hero-card {
  position: relative;
  background:
    /* Warm orange glow in the top-right */
    radial-gradient(80% 100% at 100% 0%, rgba(243,155,44,0.18) 0%, rgba(243,155,44,0) 55%),
    /* Black-to-transparent fade from the left over the photo */
    linear-gradient(90deg,
      var(--card) 0%,
      var(--card) 28%,
      rgba(19,19,25,0.92) 42%,
      rgba(19,19,25,0.55) 60%,
      rgba(19,19,25,0.15) 80%,
      rgba(19,19,25,0) 100%),
    /* The photo */
    url('../images/vysilac-bts-praha.png') center right / cover no-repeat,
    var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 56px 56px 40px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  overflow: hidden;
}

.hero-content { padding-top: 8px; }
.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 24px;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.hero-title .amp { color: var(--orange); }

.hero-subtitle {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}
/* Lock hero CTA widths so they don't grow/shrink between languages
   (longest copy is German: "Kontakt aufnehmen" / "Mehr zu den Leistungen") */
.hero-actions .btn-lg { justify-content: center; }
.hero-actions .btn-lg:nth-of-type(1) { min-width: 240px; }
.hero-actions .btn-lg:nth-of-type(2) { min-width: 300px; }

.hero-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(243,155,44,0.10);
  color: var(--orange);
  flex-shrink: 0;
}
.feat-icon svg { width: 20px; height: 20px; }
.feat-icon.big { width: 56px; height: 56px; }
.feat-icon.big svg { width: 26px; height: 26px; }
.feat h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.feat p, .feat-row p { font-size: 13px; color: var(--text-mute); line-height: 1.5; }

/* Hero photo */
.hero-photo {
  position: relative;
  border-radius: var(--radius-lg);
  min-height: 480px;
}
.hero-photo-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

/* Photo placeholders — gradient art that simulates the photos */
.ph-tower { display: none; }

.hero-floating-card {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(15,15,20,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  max-width: 320px;
}
.hero-floating-card h4 { font-size: 14px; font-weight: 700; }
.hero-floating-card p { font-size: 12px; color: var(--text-mute); }

/* =========== SERVICES =========== */
.services { padding: 56px 0 80px; }

.section-head { margin-bottom: 40px; }
.section-head.split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head .section-title { max-width: 720px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.svc-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition:
    transform .4s var(--ease-out),
    border-color .25s ease,
    background .25s ease,
    box-shadow .35s ease;
}

/* Photo-backed service cards — keep the same layout, add a moody image behind the text */
.svc-card.has-bg .svc-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(1px) saturate(1) brightness(0.8);
  transform: scale(1.04);
  z-index: 0;
  pointer-events: none;
}
.svc-bg--datasite     { background-image: url('../images/datove-site-strukturovana-kabelaz.png'); }
.svc-bg--optika       { background-image: url('../images/opticke-rozvody-svarovani.png'); }
.svc-bg--bts          { background-image: url('../images/bts-mikrovlnny-spoj.png'); }
.svc-bg--zabezpeceni  { background-image: url('../images/zabezpecovaci-systemy-iptv.png'); }
.svc-card.has-bg .svc-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(19,19,25,0.30) 0%, rgba(19,19,25,0.72) 100%),
    radial-gradient(70% 60% at 50% 100%, rgba(243,155,44,0.10), transparent 70%);
  pointer-events: none;
}
.svc-card.has-bg:hover .svc-bg {
  filter: blur(1.5px) saturate(1) brightness(0.62);
  transform: scale(1.08);
  transition: filter .35s ease, transform .6s ease;
}
.svc-card.has-bg .svc-icon {
  background: rgba(243,155,44,0.18);
  backdrop-filter: blur(6px);
}
.svc-card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(243,155,44,0.25);
  background: var(--card-2);
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 32px rgba(243,155,44,0.12);
}
.svc-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -0.5px;
}
.svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(243,155,44,0.10);
  color: var(--orange);
  margin: 8px 0 4px;
}
.svc-icon svg { width: 28px; height: 28px; }
.svc-card h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-top: auto; }
.svc-card p { font-size: 13.5px; color: var(--text-mute); line-height: 1.6; min-height: calc(1.6em * 4); }
.svc-card.has-bg h3 { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.svc-card.has-bg p  { color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.svc-arrow { display: none !important; }
.svc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(243,155,44,0.08);
  color: var(--orange);
  align-self: flex-start;
  transition: background .25s ease, transform .25s var(--ease-out);
}
.svc-arrow svg { width: 16px; height: 16px; }
.svc-card:hover .svc-arrow { background: var(--orange); color: #1a1308; transform: translateX(3px); }

/* =========== ABOUT =========== */
.about { padding: 60px 0 80px; }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-photo-wrap { position: relative; }
.about-photo {
  width: 100%;
  height: 540px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.ph-fiber {
  background:
    url('../images/voja-hero-frame.jpeg') center 22% / cover no-repeat,
    linear-gradient(135deg, #0a1628 0%, #102236 40%, #1a1410 100%);
  position: relative;
}
.ph-fiber::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* subtle warm tint to keep the frame on-brand */
    radial-gradient(80% 100% at 20% 90%, rgba(243,155,44,0.18), transparent 60%),
    linear-gradient(180deg, rgba(10,12,18,0) 55%, rgba(10,12,18,0.35) 100%);
  pointer-events: none;
}
.about-badges {
  position: absolute;
  left: 22px;
  bottom: 22px;
  right: 22px;
  display: flex;
  gap: 12px;
}
.about-badge {
  flex: 1;
  background: rgba(15,15,20,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.about-badge strong {
  font-size: 36px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -1px;
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.about-badge .counter { display: inline-block; }
.about-badge .plus {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 3px;
  transform: translateY(-0.55em);
  display: inline-block;
  opacity: 0;
  transition: opacity .35s ease .2s;
}
.about-badge.is-counted .plus { opacity: 1; }
.about-badge > span { font-size: 12px; color: var(--text-mute); margin-top: 4px; }

.about-subtitle {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
  margin: 24px 0 28px;
  min-height: calc(1.65em * 3);
}

.about-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}
.about-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.about-list h4 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; min-height: calc(1.4em * 2); }
.about-list p { font-size: 13.5px; color: var(--text-mute); line-height: 1.6; min-height: calc(1.6em * 4); }

/* =========== WORK =========== */
.work { padding: 60px 0; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.work-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  transition: transform .4s var(--ease-out), box-shadow .35s ease;
}
.work-card:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,0.55),
    0 0 32px rgba(243,155,44,0.15);
}
/* Counter-scale the arrow so it stays the same visual size when the card scales */
.work-overlay .arr-circle {
  transition: transform .4s var(--ease-out);
  transform-origin: center;
}
.work-card:hover .arr-circle { transform: scale(calc(1 / 1.012)); }

.work-img {
  position: absolute !important; /* override .work-card > * { position: relative } */
  inset: 0;
  z-index: 0 !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .6s var(--ease-out), filter .35s ease;
}
.work-card:hover .work-img {
  transform: scale(1.05);
  filter: brightness(0.92);
}
/* Subtle dark/orange wash so the title and arrow stay readable */
.work-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at 50% 100%, rgba(243,155,44,0.18), transparent 60%),
    linear-gradient(180deg, rgba(8,8,12,0.10) 30%, rgba(8,8,12,0.55) 100%);
  pointer-events: none;
}
.ph-rack {
  background-image: url('../images/realizace/WhatsApp Image 2026-04-24 at 11.10.30.jpeg');
}
.ph-optic {
  background-image: url('../images/realizace/WhatsApp Image 2026-04-24 at 11.13.59.jpeg');
}
.ph-bts {
  background-image: url('../images/realizace/WhatsApp Image 2026-04-24 at 11.25.40.jpeg');
}

.work-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  background: linear-gradient(180deg, transparent, rgba(7,7,10,0.85) 65%);
}
.work-overlay h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  letter-spacing: 0.1px;
}

/* =========== CALLOUT =========== */
.callout { padding: 40px 0 80px; }

.callout-card {
  position: relative;
  background:
    radial-gradient(60% 100% at 90% 50%, rgba(243,155,44,0.12), transparent 55%),
    linear-gradient(180deg, var(--card) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 44px 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  overflow: hidden;
}
.callout-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(243,155,44,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 80%);
}
.callout-block { position: relative; z-index: 1; }
.callout-block .feat-icon { margin-bottom: 16px; }
.callout-block h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.callout-block p  { font-size: 13.5px; color: var(--text-mute); line-height: 1.6; }

/* =========== FOOTER =========== */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 48px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  padding-bottom: 36px;
  align-items: start;
}
/* Brand on the left (default), Služby visually centered, Kontakt on the right */
.footer-grid > .footer-brand { justify-self: start; }
.footer-grid > .footer-col:not(.footer-contact) {
  justify-self: center;
  text-align: center;
}
.footer-grid > .footer-col:not(.footer-contact) ul {
  align-items: center;
}
.footer-grid > .footer-col:not(.footer-contact) ul li {
  text-align: center;
}
.footer-grid > .footer-contact {
  justify-self: end;
  text-align: right;
  /* Make the column a flex stack so its children (h4, ul, business block)
     all share the same right edge. Without this, h4 follows text-align:right
     and lines up with the column's right edge, but the .contact-list <li>
     elements are flex rows that ignore text-align — they start at the left
     edge of the column and the heading ends up visually offset from them. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.footer-grid > .footer-contact .contact-list { align-items: flex-end; }
.footer-grid > .footer-contact .footer-business { text-align: right; }
.footer-brand .logo { display: inline-block; margin-bottom: 14px; }
.footer-brand p { font-size: 13.5px; color: var(--text-mute); line-height: 1.65; max-width: 360px; }
.footer-social { margin-top: 18px; display: flex; gap: 10px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-soft);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--orange); color: #1a1308; border-color: transparent; }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: 13.5px;
  color: var(--orange);
  transition: color .2s ease, transform .2s ease;
  display: inline-block;
}
.footer-col ul a:hover { color: var(--orange-2); transform: translateX(2px); }

.footer-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 180px;
}
.ph-tower-sm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(243,155,44,0.5), transparent 55%),
    linear-gradient(180deg, #1a1f3a 0%, #2a2235 50%, #4a2a1f 100%);
}
.footer-photo-cta {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: var(--orange);
  color: #1a1308;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-soft); }
.contact-list a:hover { color: var(--orange); }
.ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(243,155,44,0.10);
  color: var(--orange);
  flex-shrink: 0;
}
.ci svg { width: 14px; height: 14px; }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-dim);
  gap: 16px;
}
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom .credit { justify-self: center; }
.footer-bottom .legal  { justify-self: end; }
.footer-bottom .legal a { color: var(--text-dim); transition: color .2s ease; }
.footer-bottom .legal a:hover { color: var(--text-soft); }
.footer-bottom .sep { margin: 0 10px; color: var(--text-dim); }
.footer-bottom .credit {
  text-align: center;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--text-dim);
}
.footer-bottom .credit a {
  color: var(--text-soft);
  font-weight: 600;
  transition: color .2s ease;
}
.footer-bottom .credit a:hover { color: var(--orange); }

/* =========== Rotating-light border (hover) ===========
   Applied via shared selector list so the same effect works on
   service cards, work cards, and callout blocks. */
.svc-card::before,
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    rgba(255,255,255,0.85) 18deg,
    rgba(243,155,44,0.55) 36deg,
    transparent 64deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.svc-card:hover::before,
.work-card:hover::before {
  opacity: 1;
  animation: spin-light 3.2s linear infinite;
}
@keyframes spin-light {
  to { --angle: 360deg; }
}

/* Subtle inner highlight that pulses with the spotlight */
.svc-card::after,
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.06), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}
.svc-card:hover::after,
.work-card:hover::after { opacity: 1; }

/* Make sure card content stays above the pseudo layers */
.svc-card > *,
.work-card > * { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .svc-card:hover::before,
  .work-card:hover::before { animation: none; }
}

/* =========== Reveal animations =========== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-stagger="1"] { transition-delay: .05s; }
.reveal[data-stagger="2"] { transition-delay: .12s; }
.reveal[data-stagger="3"] { transition-delay: .19s; }
.reveal[data-stagger="4"] { transition-delay: .26s; }

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

/* =========== Responsive =========== */
@media (max-width: 1100px) {
  .hero-card {
    grid-template-columns: 1fr;
    padding: 40px;
    /* On tablet/mobile the hero collapses to one column and the content
       spans the full width, so the desktop horizontal gradient (opaque
       left → transparent right) leaves the right edge of the text sitting
       over the photo. Repaint with a vertical fade that covers the
       content area on top, then reveals the photo at the bottom. */
    background:
      radial-gradient(80% 80% at 100% 0%, rgba(243,155,44,0.18) 0%, rgba(243,155,44,0) 55%),
      linear-gradient(180deg,
        var(--card) 0%,
        var(--card) 55%,
        rgba(19,19,25,0.85) 70%,
        rgba(19,19,25,0.45) 85%,
        rgba(19,19,25,0) 100%),
      url('../images/vysilac-bts-praha.png') center bottom / cover no-repeat,
      var(--bg-2) !important;
  }
  .hero-photo { min-height: 380px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-photo { height: 420px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .callout-card { grid-template-columns: 1fr; gap: 28px; padding: 36px; }
  .footer-photo { min-height: 220px; }

  /* Footer on tablet: brand spans full row, then Služby left + Kontakt right */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
  .footer-grid > .footer-brand {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .footer-grid > .footer-col:not(.footer-contact) {
    justify-self: start;
    text-align: left;
  }
  .footer-grid > .footer-col:not(.footer-contact) ul { align-items: flex-start; }
  .footer-grid > .footer-col:not(.footer-contact) ul li { text-align: left; }
  .footer-grid > .footer-contact {
    justify-self: end;
    text-align: right;
  }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .header-row { padding: 6px 6px 6px 18px; gap: 10px; }
  .primary-nav { display: none; position: absolute; top: 78px; left: 16px; right: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
  .primary-nav.is-open { display: flex; }
  .primary-nav ul { flex-direction: column; gap: 12px; }
  .header-phone .phone-text { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .lang-switch button { padding: 5px 7px; font-size: 10px; }

  .hero { padding: 16px 0 40px; }
  .hero-card { padding: 28px; }
  .hero-features { grid-template-columns: 1fr; gap: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  /* The hero photo is already painted as the hero-card's background.
     The .hero-photo placeholder element just reserves dead vertical
     space below the content — hide it on mobile so the card ends
     right under the features. */
  .hero-photo { display: none; }
  .hero-pill { display: none; }

  .services, .about, .work, .callout { padding: 50px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }

  /* About bullets on mobile: drop the desktop min-heights that pad the
     three bullets to equal heights for the row layout — on a single column
     they create huge empty gaps. */
  .about-list { gap: 18px; }
  .about-list h4 { min-height: 0; }
  .about-list p  { min-height: 0; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* On mobile reset all alignments to left for a clean single column.
     We also un-flex the contact column (which is flex-column with
     align-items: flex-end on desktop) so its children left-align. */
  .footer-grid > .footer-brand,
  .footer-grid > .footer-col:not(.footer-contact),
  .footer-grid > .footer-contact {
    justify-self: start;
    text-align: left;
    grid-column: auto;
  }
  .footer-grid > .footer-contact {
    align-items: flex-start;
  }
  .footer-grid > .footer-contact .contact-list { align-items: flex-start; }
  .footer-grid > .footer-contact .footer-business { text-align: left; }
  .footer-grid > .footer-col:not(.footer-contact) ul { align-items: flex-start; }
  .footer-grid > .footer-col:not(.footer-contact) ul li { text-align: left; }

  .section-head.split { flex-direction: column; align-items: flex-start; }
  .footer-bottom { grid-template-columns: 1fr; gap: 8px; } .footer-bottom > * { justify-self: start !important; }
}

/* ============================================================
   GALLERY (realizace.html)
   ============================================================ */
.gallery-head {
  padding: 70px 0 28px;
}
.gallery-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.gallery-head .section-title { min-height: 0; margin-bottom: 12px; }
.gallery-sub {
  color: var(--text-mute);
  font-size: 16px;
  max-width: 720px;
  margin-bottom: 24px;
}
.gallery-back { font-size: 14px; }

.gallery {
  padding: 16px 0 80px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: zoom-in;
  transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(243,155,44,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(243,155,44,0.18) inset;
}
.gallery-card .gc-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out), filter .35s ease;
}
.gallery-card:hover .gc-media {
  transform: scale(1.05);
  filter: brightness(0.95);
}
.gallery-card .gc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,14,0) 60%, rgba(10,10,14,0.55) 100%);
  pointer-events: none;
}
.gallery-card .gc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,10,14,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
}
.gallery-card .gc-badge svg { width: 12px; height: 12px; }
.gallery-card .gc-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #1a1308;
  box-shadow: 0 8px 22px rgba(243,155,44,0.32);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s var(--ease-out);
}
.gallery-card .gc-zoom svg { width: 16px; height: 16px; }
.gallery-card:hover .gc-zoom { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 14px; }
  .gallery-head { padding: 50px 0 20px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 12, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lb-stage {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform .35s var(--ease-out);
}
.lightbox.is-open .lb-stage { transform: scale(1); }

.lb-image,
.lb-video {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  display: none;
  background: #000;
}
.lb-image.is-active,
.lb-video.is-active { display: block; }

.lb-close,
.lb-nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  z-index: 2;
}
.lb-close { top: 22px; right: 22px; transform: none; }
.lb-prev { left: 22px; transform: translateY(-50%); }
.lb-next { right: 22px; transform: translateY(-50%); }
.lb-close:hover,
.lb-nav:hover {
  background: var(--orange);
  color: #1a1308;
  border-color: transparent;
}
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-close svg,
.lb-nav svg { width: 20px; height: 20px; }

.lb-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 600px) {
  .lb-close { top: 14px; right: 14px; width: 42px; height: 42px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-prev, .lb-next { width: 42px; height: 42px; }
}

/* ============================================================
   WordPress defensive overrides
   Fixes common host/parent-theme conflicts that broke layout.
   ============================================================ */

/* Many WP themes wrap content in .entry-content / .site-main with
   max-width: 720-960px which crushes our hero. Force full width. */
body .entry-content,
body .site-content,
body .site-main,
body main,
body .wp-site-blocks,
body .is-layout-constrained,
body .wp-block-group {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Some themes inject `img, svg { width: 100% }` which makes inline
   icon SVGs explode. Force every SVG inside our shell back to its
   intrinsic 1em sizing unless we explicitly override. */
.site-header svg,
.site-footer svg,
.hero svg,
.services svg,
.about svg,
.work svg,
.callout svg,
.gallery svg,
.lightbox svg {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Re-assert exact icon dimensions for every place we use icons.
   These selectors carry the same specificity as the original rules
   but live below them, so they always win on cascade conflicts. */
.phone-icon svg          { width: 13px;  height: 13px; }
.feat-icon svg           { width: 18px;  height: 18px; }
.svc-icon svg            { width: 22px;  height: 22px; }
.svc-arrow svg           { width: 16px;  height: 16px; }
.arr svg, svg.arr        { width: 16px;  height: 16px; }
.arr-circle svg          { width: 14px;  height: 14px; }
.arr-circle.small svg    { width: 12px;  height: 12px; }
.hp-icon svg             { width: 16px;  height: 16px; }
.about-list .li-icon svg { width: 18px;  height: 18px; }
.footer-social svg       { width: 16px;  height: 16px; }
.contact-list .ci svg    { width: 14px;  height: 14px; }
.lb-close svg, .lb-nav svg { width: 20px; height: 20px; }
.gc-zoom svg, .gc-badge svg { width: 16px; height: 16px; }
.nav-toggle span         { width: 22px; }

/* Some themes add box-shadow / borders on every <a> in content. Reset. */
.site-header a,
.site-footer a,
.hero a,
.services a,
.about a,
.work a,
.callout a,
.gallery a {
  box-shadow: none;
  text-decoration: none;
}

/* Reset paragraph margins that some themes add */
.site-header p,
.site-footer p,
.hero p,
.services p,
.about p,
.work p,
.callout p,
.gallery p { margin: 0 0 0.5em; }

/* WP's default link underline on a:focus etc. — turn off in our shell */
.site-header a:focus,
.site-footer a:focus,
.hero a:focus,
.services a:focus,
.about a:focus,
.work a:focus,
.callout a:focus,
.gallery a:focus { text-decoration: none; }



/* ============================================================
   Hero pill (floating card in bottom-right of the hero card).
   The HTML uses class="hero-pill"; this matches the floating-card
   styling that the legacy ".hero-floating-card" rule was meant for.
   ============================================================ */
.hero-pill {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(15, 15, 20, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  max-width: 320px;
  z-index: 3;
  pointer-events: none;
}
.hero-pill .hp-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(243, 155, 44, 0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-pill .hp-icon svg { width: 18px; height: 18px; }
.hero-pill > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-pill strong { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.2; }
.hero-pill > div > span { color: var(--text-mute); font-size: 12px; line-height: 1.4; }

@media (max-width: 1024px) {
  .hero-pill { right: 16px; bottom: 16px; max-width: 280px; padding: 12px 14px; }
}
@media (max-width: 720px) {
  .hero-pill { display: none; }
}




/* ============================================================
   Mobile fix — on narrow screens, .about-list collapses to a
   single column. The min-height that aligns 3 columns on
   desktop turns into dead space on mobile.
   ============================================================ */
@media (max-width: 720px) {
  .about-list h4 { min-height: 0; margin-bottom: 6px; }
  .about-list p  { min-height: 0; }
  .about-list    { gap: 16px; }
}

/* ============================================================
   Footer business block — appears under contact-list when
   sections.footer_business is on. Address + IČO.
   ============================================================ */
.footer-business {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.footer-business h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-business .fb-line {
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.55;
  margin: 0 0 4px 0;
}
.footer-business .fb-line:last-child { margin-bottom: 0; }