/* ============================================================
   JS-SYSTEM s.r.o. — custom styles, components & animations
   (Layered on top of Tailwind Play CDN utilities)
   ============================================================ */

:root {
  /* Brand red — sampled directly from the JS-SYSTEM logo (#B02B2C) */
  --brand: #b02b2c;          /* logo red (primary) */
  --brand-rgb: 176, 43, 44;
  --brand-bright: #e0483e;   /* brighter accent for text/icons on dark */
  --brand-dark: #8c2122;

  --ink-900: #0a0a0a;
  --ink-800: #121212;
  --ink-700: #1a1a1a;

  --font-display: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); }
/* Archivo slightly expanded = sturdy, technical "engineering" headline feel */
.font-display { font-family: var(--font-display); font-stretch: 108%; letter-spacing: -0.015em; }
.service-title, .why-title, .process-title, .faq-item summary, .footer-h,
.service-num, .why-num, .big-num, .process-num { font-stretch: 108%; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 8px; border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ---------- Hero red wash (very subtle — just a hint of brand warmth) ---------- */
main > section:first-child {
  background:
    radial-gradient(95% 75% at 50% -12%, rgba(var(--brand-rgb),0.04), transparent 58%);
}

/* ---------- Hero background video ---------- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9;
  transform: scale(1.12);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hero entrance: video eases from zoomed-in to normal on load ("vyrolovanie") */
.is-loaded .hero-video { transform: scale(1); }
/* Overlay keeps text readable and preserves the dark + red brand look.
   Extra darkening on the left = "smudge" behind the headline. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.97) 0%, rgba(10,10,10,0.91) 28%, rgba(10,10,10,0.58) 46%, rgba(10,10,10,0.14) 66%, transparent 100%),
    linear-gradient(180deg, transparent 52%, rgba(10,10,10,0.50) 84%, var(--ink-900) 100%),
    radial-gradient(90% 70% at 50% -10%, rgba(var(--brand-rgb),0.03), transparent 62%);
}
/* Hero copy — extra legibility over the video */
main > section:first-child .max-w-4xl h1,
main > section:first-child .max-w-4xl p { text-shadow: 0 2px 28px rgba(0,0,0,0.72), 0 1px 2px rgba(0,0,0,0.5); }

/* ---------- Hero technical grid background ---------- */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- Header scroll state ---------- */
#header.is-scrolled {
  background-color: rgba(10,10,10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------- Nav links ---------- */
.nav-link { position: relative; transition: color .2s ease; }
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--brand); transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

.mobile-link {
  padding: .75rem .25rem; color: #e4e4e7; border-radius: .5rem;
  transition: background .2s ease, color .2s ease;
}
.mobile-link:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* ---------- Buttons ---------- */
/* Size (padding / font-size) has low specificity, so Tailwind utilities on a
   button (px-9, py-5, text-lg …) win. "a" / "button" prefix beats Tailwind's
   preflight reset for <button> (same specificity, but this file loads later). */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; border-radius: .8rem;
  cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none; line-height: 1;
}
a:where(.btn-primary, .btn-ghost),
button:where(.btn-primary, .btn-ghost) { font-size: 1rem; padding: .9rem 1.6rem; }
.btn-primary {
  background: var(--brand); color: #fff; border: 1px solid transparent;
  box-shadow: 0 8px 24px -8px rgba(var(--brand-rgb), 0.6);
}
.btn-primary:hover { background: #c6362f; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(var(--brand-rgb), 0.7); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.18);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); transform: translateY(-2px); }

/* ---------- Editorial section numbers (GLASSHAVEN / MNTN inspiration) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-bright);
}

/* Big faded outline number */
.big-num {
  font-family: var(--font-display); font-weight: 800; line-height: 0.8;
  font-size: clamp(4rem, 12vw, 9rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.16);
  letter-spacing: -0.04em;
}

/* ---------- Service cards ---------- */
.service-card {
  position: relative; padding: 1.75rem; border-radius: 1rem;
  background: var(--ink-800); border: 1px solid rgba(255,255,255,0.07);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
  overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(400px circle at 50% -20%, rgba(var(--brand-rgb),0.14), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(var(--brand-rgb),0.5); }
.service-card:hover::before { opacity: 1; }
.service-card--featured {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: rgba(255,255,255,0.18);
}
.service-card--featured::before {
  background: radial-gradient(500px circle at 80% -10%, rgba(255,255,255,0.18), transparent 70%);
}
.service-card--featured .service-title,
.service-card--featured a { color: #fff; }
.service-card--featured .service-desc { color: rgba(255,255,255,0.9); }
.service-card--featured .service-desc strong { color: #fff; }
.service-card--featured .service-icon { background: rgba(255,255,255,0.18); color: #fff; }
.service-card--featured span.text-brand-bright,
.service-card--featured .service-num { color: rgba(255,255,255,0.95) !important; }
.service-num {
  font-family: var(--font-display); font-weight: 800; font-size: 3rem;
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.18);
  letter-spacing: -0.03em;
}
.service-card--featured .service-num { color: transparent !important; -webkit-text-stroke: 1.5px rgba(255,255,255,0.6); }
.service-card--featured { padding: 2rem; }
@media (min-width: 640px) { .service-card--featured { padding: 2.5rem; } }

/* Featured card — checklist points */
.feat-point {
  display: flex; align-items: center; gap: .65rem;
  color: #fff; font-weight: 500; font-size: .97rem; line-height: 1.3;
  padding: .7rem .9rem; border-radius: .7rem;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
}
.feat-point::before {
  content: '✓'; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; border-radius: 999px;
  background: #fff; color: var(--brand); font-size: .72rem; font-weight: 800;
}

/* ---------- Cursor-following ambient glow ----------
   One fixed layer for the whole page (no hard edges at section borders),
   moved with transform (GPU, no repaint) and eased in JS. "screen" blend
   only lightens dark areas, so text and photos stay untouched. */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb), 0.09) 0%, rgba(var(--brand-rgb), 0.035) 35%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity .6s ease;
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }

/* ---------- Premium section divider (hairline with a red centre) ---------- */
.section-top-divider {
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 5;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.10) 28%,
    rgba(var(--brand-rgb), 0.65) 50%,
    rgba(255,255,255,0.10) 72%, transparent);
}
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; width: 2.75rem; border-radius: .65rem;
  background: rgba(255,255,255,0.05); color: var(--brand-bright);
}
.service-icon svg { height: 1.4rem; width: 1.4rem; }
.service-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: 1.1rem; color: #fff; }
.service-desc { margin-top: .55rem; color: #a1a1aa; line-height: 1.6; }

/* ---------- Boiler spotlight panel ---------- */
.panel-boiler {
  position: relative;
  background:
    linear-gradient(160deg, rgba(176,43,44,0.12), transparent 55%),
    url('../assets/kotolna.webp') center/cover no-repeat,
    #0f0f12;
}

/* ---------- Services — compact numbered list ---------- */
.svc-list { display: grid; gap: .6rem; }
.svc-row {
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 1.25rem; border-radius: .9rem;
  background: var(--ink-800); border: 1px solid rgba(255,255,255,0.07);
  color: inherit; text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.svc-row:hover { border-color: rgba(var(--brand-rgb),0.45); background: #171717; }
a.svc-row:hover { transform: translateX(4px); }
.svc-num {
  flex: none; width: 3.2rem;
  font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,0.28); letter-spacing: -0.03em;
  transition: -webkit-text-stroke-color .25s ease;
}
.svc-row:hover .svc-num { -webkit-text-stroke-color: var(--brand-bright); }
.svc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.svc-title { font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.1rem; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.svc-desc { color: #a1a1aa; font-size: .93rem; line-height: 1.45; }
.svc-badge {
  font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; background: rgba(0,0,0,0.28); color: #fff;
}
.svc-arrow { flex: none; width: 1.15rem; height: 1.15rem; color: #a1a1aa; transition: color .25s ease, transform .25s ease; }
a.svc-row:hover .svc-arrow { color: #fff; transform: translateX(2px); }
/* 01 — flagship service, brand red */
.svc-row--featured {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 32px -16px rgba(var(--brand-rgb),0.7);
}
.svc-row--featured:hover { background: linear-gradient(135deg, #bd3233 0%, var(--brand-dark) 100%); border-color: rgba(255,255,255,0.3); }
.svc-row--featured .svc-num,
.svc-row--featured:hover .svc-num { -webkit-text-stroke-color: rgba(255,255,255,0.75); }
.svc-row--featured .svc-desc { color: rgba(255,255,255,0.88); }
.svc-row--featured .svc-arrow { color: #fff; }
@media (max-width: 480px) {
  .svc-row { gap: .8rem; padding: .9rem 1rem; }
  .svc-num { width: 2.5rem; font-size: 1.6rem; }
}

/* ---------- Interactive 3D water heater (js/boiler3d.js) ---------- */
/* No box behind the model — it stands freely on the section background */
.boiler-stage {
  position: relative; aspect-ratio: 1 / 1; max-height: 680px; width: 100%;
  isolation: isolate;
}
@media (min-width: 1024px) { .boiler-stage { aspect-ratio: 1 / 1; } }
.boiler-fallback { border-radius: 1.25rem; }
.boiler-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: pan-y; outline: none;
  opacity: 0; transition: opacity .8s ease;
}
.boiler-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-bright); }
.boiler-stage.is-dragging canvas { cursor: grabbing; }
.boiler-stage.is-ready canvas { opacity: 1; }

/* loading spinner until Three.js is ready */
.boiler-loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .4s ease; }
.boiler-loading span {
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.12); border-top-color: var(--brand-bright);
  animation: boiler-spin .9s linear infinite;
}
@keyframes boiler-spin { to { transform: rotate(360deg); } }
.boiler-stage.is-ready .boiler-loading,
.boiler-stage.is-fallback .boiler-loading { opacity: 0; }

/* fallback photo when WebGL is unavailable */
.boiler-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.boiler-stage.is-fallback .boiler-fallback { display: block; }
.boiler-stage.is-fallback .hotspot,
.boiler-stage.is-fallback .boiler-hint { display: none; }

/* drag hint */
.boiler-hint {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #d4d4d8;
  background: rgba(10,10,10,0.7); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; opacity: 0; transition: opacity .5s ease;
}
.boiler-hint svg { width: 1rem; height: 1rem; }
.boiler-stage.is-ready .boiler-hint { opacity: 1; }
.boiler-stage.has-interacted .boiler-hint { opacity: 0; }

/* hotspots — positioned every frame via transform from JS */
.hotspot {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  margin: -.8rem 0 0 -.8rem; padding: 0; background: none; border: 0;
  cursor: default; pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity .35s ease;
}
.boiler-stage.is-ready .hotspot { opacity: 1; }
.boiler-stage.is-ready .hotspot.is-hidden { opacity: 0; }
.hotspot-dot {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; color: #fff; background: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb),0.25), 0 6px 16px -4px rgba(0,0,0,0.6);
}
.hotspot-label {
  padding: .35rem .7rem; border-radius: .5rem; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: #fff;
  background: rgba(10,10,10,0.78); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 480px) { .hotspot-label { display: none; } }

/* ---------- Feature list ---------- */
.feature-li { display: flex; align-items: flex-start; gap: .75rem; color: #d4d4d8; font-size: 1.05rem; }
.feature-check {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 1.6rem; width: 1.6rem; border-radius: 999px;
  background: rgba(var(--brand-rgb),0.2); color: var(--brand-bright); font-weight: 700; font-size: .8rem;
}

/* ---------- Why cards ---------- */
.why-card {
  padding: 1.6rem; border-radius: 1rem; background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.07); transition: border-color .3s ease, transform .3s ease;
}
.why-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-3px); }
.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; width: 3rem; border-radius: .75rem;
  background: rgba(var(--brand-rgb),0.14); color: var(--brand-bright); margin-bottom: 1rem;
}
.why-icon svg { height: 1.5rem; width: 1.5rem; }
.why-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.why-desc { margin-top: .4rem; color: #a1a1aa; line-height: 1.6; }

/* ---------- Why us — premium numbered items (no icons) ---------- */
.why-item {
  background: var(--ink-900);
  padding: 2rem 1.9rem;
  transition: background .3s ease;
}
.why-item:hover { background: var(--ink-800); }
.why-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem;
  line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.4px rgba(var(--brand-rgb), 0.85);
}
.why-item .why-title { margin-top: 1.1rem; }

/* ---------- Certificates band (Why us) ---------- */
.cert-band {
  display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;
  padding: 1.75rem; border-radius: 1rem;
  background: linear-gradient(135deg, rgba(var(--brand-rgb),0.16), rgba(var(--brand-rgb),0.04) 60%), var(--ink-800);
  border: 1px solid rgba(var(--brand-rgb),0.35);
}
@media (min-width: 768px) { .cert-band { flex-direction: row; align-items: center; gap: 1.75rem; padding: 2rem 2.25rem; } }
.cert-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: .9rem;
  background: var(--brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb),0.8);
}
.cert-icon svg { width: 1.9rem; height: 1.9rem; }

/* ---------- 3D scroll-reveal card (container-scroll animation, native) ---------- */
.scroll-3d { perspective: 1300px; padding-left: 1rem; padding-right: 1rem; }
.scroll-3d-card {
  max-width: 64rem; margin: 0 auto; padding: 8px;
  transform: rotateX(var(--rx, 0deg)) scale(var(--sc, 1));
  transform-origin: center 15%;
  will-change: transform;
  border: 4px solid #2c2c2c; border-radius: 30px;
  background: #161616;
  box-shadow: 0 45px 90px -35px rgba(0,0,0,0.85), 0 12px 30px -12px rgba(0,0,0,0.6);
}
.scroll-3d-card img {
  width: 100%; display: block; border-radius: 20px;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* Right-to-left rotate on scroll (in-place photos) — settles flat in view */
.tilt-y {
  transform: perspective(1000px) rotateY(var(--ry, 0deg));
  transform-origin: center center;
  will-change: transform;
}

/* ---------- FAQ (native accordion) ---------- */
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff;
  transition: color .2s ease;
}
.faq-item summary:hover { color: var(--brand-bright); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none; font-weight: 400; font-size: 1.7rem; line-height: 1;
  color: var(--brand-bright); transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { margin: 0; padding: 0 0 1.5rem; color: #a1a1aa; line-height: 1.7; max-width: 46rem; }

/* ---------- Process ---------- */
.process-step { position: relative; }
.process-num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; width: 3rem; border-radius: 999px; margin-bottom: 1rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  color: #fff; background: var(--brand); box-shadow: 0 8px 20px -8px rgba(var(--brand-rgb),0.7);
}
.process-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.process-desc { margin-top: .4rem; color: #a1a1aa; line-height: 1.6; }

/* ---------- Testimonials ---------- */
.quote-card {
  padding: 1.75rem; border-radius: 1rem; background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.07); margin: 0;
}
.stars { color: var(--brand-bright); letter-spacing: 2px; font-size: 1rem; }
.quote-text { margin-top: 1rem; color: #e4e4e7; font-size: 1.05rem; line-height: 1.7; }
.quote-author { margin-top: 1.25rem; color: #a1a1aa; font-size: .9rem; }

/* ---------- Contact ---------- */
.contact-row { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.contact-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; width: 3rem; border-radius: .75rem;
  background: rgba(255,255,255,0.05); color: var(--brand-bright); transition: background .2s ease;
}
.contact-ico svg { height: 1.4rem; width: 1.4rem; }
.contact-row.group:hover .contact-ico { background: rgba(var(--brand-rgb),0.2); }
.contact-label { display: block; font-size: .8rem; color: #a1a1aa; }
.contact-value { display: block; color: #fff; font-weight: 500; }
a.contact-row:hover .contact-value { color: var(--brand-bright); }

/* ---------- Form ---------- */
.form-label { display: block; font-size: .875rem; font-weight: 500; color: #d4d4d8; margin-bottom: .4rem; }
.form-input {
  width: 100%; border-radius: .7rem; padding: .75rem 1rem;
  background: var(--ink-800); border: 1px solid rgba(255,255,255,0.12); color: #fff;
  font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input::placeholder { color: #8b8b94; }
.form-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.28);
}
.form-input[aria-invalid="true"] { border-color: #ef4444; }
.form-error {
  display: none; margin-top: .4rem; font-size: .8rem; color: #f87171;
}
.form-error.is-visible { display: block; }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a1a1aa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

/* ---------- Footer ---------- */
.footer-h { font-family: var(--font-display); font-weight: 600; color: #fff; margin-bottom: 1rem; }

/* ---------- "Call us" toast (phone links clicked on a computer) ---------- */
.call-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 80;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  padding: .85rem 1.25rem; border-radius: .8rem; max-width: calc(100vw - 2rem);
  background: #fff; color: var(--ink-900); font-weight: 700; font-size: .95rem; text-align: center;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.6);
  transition: opacity .25s ease, transform .25s ease;
}
.call-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1023px) { .call-toast { bottom: 5.75rem; } } /* above the floating call button */

/* ---------- Accessibility ---------- */
/* Visible focus ring for keyboard users (mouse clicks don't show it) */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
input[type="checkbox"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 6px;
}
main:focus { outline: none; }
/* "Skip to content" — hidden until focused with Tab */
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1.1rem; border-radius: .6rem;
  background: #fff; color: var(--ink-900); font-weight: 700; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Placeholder marker (content to be supplied) ---------- */
.placeholder-text { color: #6b7280; font-style: italic; }

/* The [hidden] attribute must always win over display utilities (.grid, .btn-ghost …) */
[hidden] { display: none !important; }

/* ---------- Form honeypot (visually hidden, but not display:none — bots skip those) ---------- */
.hp-field {
  position: absolute !important; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
#contact-form { position: relative; }
button[disabled] { opacity: .7; cursor: wait; }

/* ---------- Map (loaded after consent) ---------- */
.map-slot { height: 340px; background: var(--ink-800); }
.map-placeholder {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  background:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 40px 40px;
}
.map-frame { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Footer legal links ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-legal a, .footer-legal button {
  color: #a1a1aa; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.18); text-underline-offset: 3px;
  transition: color .2s ease;
}
.footer-legal a:hover, .footer-legal button:hover { color: #fff; }

/* ---------- Cookie / consent banner ---------- */
.consent {
  position: fixed; z-index: 70; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; justify-content: center; pointer-events: none;
}
.consent-box {
  pointer-events: auto; width: 100%; max-width: 40rem;
  padding: 1.4rem 1.5rem; border-radius: 1rem;
  background: rgba(18,18,18,0.97); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: consent-in .4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.consent-title { font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.1rem; color: #fff; }
.consent-text { margin-top: .5rem; color: #a1a1aa; font-size: .9rem; line-height: 1.6; }
.consent-text strong { color: #e4e4e7; }
.consent-text a { color: #e4e4e7; text-decoration: underline; text-underline-offset: 3px; }
.consent-text a:hover { color: var(--brand-bright); }
.consent-settings { margin-top: 1rem; display: grid; gap: .6rem; }
.consent-opt {
  display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border-radius: .7rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  font-size: .87rem; color: #a1a1aa; line-height: 1.5; cursor: pointer;
}
.consent-opt strong { color: #fff; }
.consent-opt input { margin-top: .2rem; height: 1rem; width: 1rem; accent-color: var(--brand); flex: none; }
.consent-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.consent-actions .btn-primary, .consent-actions .btn-ghost { font-size: .9rem; padding: .7rem 1.1rem; }
.consent-link {
  background: none; border: 0; padding: .7rem .4rem; font: inherit; font-size: .9rem; font-weight: 600;
  color: #a1a1aa; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.consent-link:hover { color: #fff; }

/* ---------- Legal pages (privacy, cookies, legal info) ---------- */
.legal { max-width: 48rem; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
@media (min-width: 640px) { .legal { padding: 4.5rem 2rem 6rem; } }
.legal h1 { font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: #fff; letter-spacing: -0.015em; }
.legal .legal-meta { margin-top: .75rem; color: #a1a1aa; font-size: .9rem; }
.legal h2 { font-family: var(--font-display); font-stretch: 108%; font-weight: 700; font-size: 1.3rem; color: #fff; margin-top: 2.75rem; margin-bottom: .75rem; }
.legal h3 { font-weight: 700; color: #e4e4e7; margin-top: 1.5rem; margin-bottom: .4rem; }
.legal p, .legal li { color: #c4c4cc; line-height: 1.75; }
.legal p + p { margin-top: .9rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin-top: .5rem; display: grid; gap: .35rem; }
.legal a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: #fff; }
.legal strong { color: #fff; }
.legal-card {
  margin-top: 1rem; padding: 1.25rem 1.4rem; border-radius: .9rem;
  background: var(--ink-800); border: 1px solid rgba(255,255,255,0.08);
}
.legal-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .75rem .8rem; border-bottom: 1px solid rgba(255,255,255,0.08); color: #c4c4cc; }
.legal-table th { color: #fff; font-weight: 600; background: rgba(255,255,255,0.03); }
.legal-table-wrap { overflow-x: auto; }
.legal-back { display: inline-flex; align-items: center; gap: .5rem; color: #a1a1aa; font-size: .9rem; font-weight: 600; }
.legal-back:hover { color: #fff; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Premium scroll reveal — rise + gentle scale + blur-in.
   Hidden ONLY when JS is available (.js); without JS, content stays visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity .85s cubic-bezier(0.16, 1, 0.3, 1),
    transform .85s cubic-bezier(0.16, 1, 0.3, 1),
    filter .85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Failsafe: if main.js never runs, show everything */
html.no-reveal [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---------- Scroll progress bar (top, brand red) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand), var(--brand-bright));
  box-shadow: 0 0 12px rgba(var(--brand-rgb), 0.6);
  transition: width .1s linear;
}

/* ---------- "Naša práca" gallery ---------- */
.gallery-item {
  position: relative; overflow: hidden; border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--ink-800);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.25rem 1.1rem;
  font-weight: 600; color: #fff; font-size: .95rem;
  background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
}
.gallery-item figcaption span {
  display: block; font-weight: 500; font-size: .8rem; color: #d4d4d8; margin-top: .15rem;
}

/* Soft pulse (emergency dot) */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(0.8); }
}
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* ============================================================
   PHONES (< 768 px) — denser, clearer layout.
   Desktop and tablet are untouched: everything below lives in
   this media query (or uses Tailwind's max-md: variant in HTML).
   ============================================================ */
@media (max-width: 767px) {
  /* Tighter vertical rhythm between sections */
  main section .py-20, body > section .py-20 { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  main section .py-16, body > section .py-16 { padding-top: 3rem; padding-bottom: 3rem; }
  main section .py-14 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  main section .mb-14 { margin-bottom: 2rem; }
  main section .mb-12 { margin-bottom: 1.75rem; }
  #kontakt .pb-20 { padding-bottom: 3rem; }

  /* Hero video on phones: instead of a heavily zoomed, darkened slice behind
     the text, show the whole 16:9 frame sharp on top, fading into the page;
     the headline sits below on a clean dark background. */
  .hero-video {
    position: relative; inset: auto; display: block;
    width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 40%;
    opacity: 1;
  }
  .hero-video-overlay {
    top: 0; bottom: auto; height: auto; aspect-ratio: 2 / 1;
    background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, transparent 25%, transparent 40%, rgba(10,10,10,0.7) 68%, rgba(10,10,10,0.92) 85%, var(--ink-900) 100%);
  }
  main > section:first-child .hero-grid { display: none; }
  main > section:first-child .max-w-4xl h1,
  main > section:first-child .max-w-4xl p { text-shadow: none; }
  main > section:first-child > .relative.z-10 { margin-top: -3.25rem; }
  main > section:first-child .max-w-4xl h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
  main > section:first-child .max-w-4xl p.mt-7 { margin-top: 1.1rem; font-size: 1.02rem; }
  main > section:first-child .max-w-4xl p.mb-6 { margin-bottom: .9rem; }

  /* Hero: less empty space, compact stat tiles */
  main > section:first-child .pt-20 { padding-top: 0; }
  main > section:first-child .pb-24 { padding-bottom: 2.5rem; }
  main > section:first-child .mt-16 { margin-top: 2.25rem; }
  main > section:first-child .mt-9 { margin-top: 1.75rem; }
  main > section:first-child .grid > div { padding: 1rem 1.1rem; }
  main > section:first-child .grid > div .text-3xl { font-size: 1.6rem; }
  main > section:first-child .grid > div p { font-size: .78rem; }

  /* Photos: wider, lower crop */
  .aspect-\[4\/3\] { aspect-ratio: 16 / 10; }

  /* 3D: drag hint at the top, so it doesn't cover the pipes */
  .boiler-hint { bottom: auto; top: .4rem; }

  /* Why us: 2 compact columns */
  .why-grid .why-item { padding: 1.15rem 1rem 1.25rem; }
  .why-grid .why-num { font-size: 1.6rem; }
  .why-grid .why-title { font-size: .98rem; margin-top: .6rem; line-height: 1.3; }
  .why-grid .why-desc { font-size: .84rem; line-height: 1.45; margin-top: .3rem; }
  .cert-band { padding: 1.35rem; gap: 1rem; }
  .cert-icon { width: 3rem; height: 3rem; }

  /* FAQ: tighter rows */
  .faq-item summary { padding: 1.05rem 0; font-size: 1.02rem; gap: 1rem; }
  .faq-item .faq-a { padding-bottom: 1.15rem; font-size: .95rem; }

  /* Process: number left, text right — one compact row per step */
  .process-grid { gap: 1.1rem; }
  .process-step { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .9rem; align-items: start; }
  .process-num { grid-row: span 2; width: 2.5rem; height: 2.5rem; font-size: 1rem; margin-bottom: 0; }
  .process-title { font-size: 1.05rem; line-height: 1.35; }
  .process-desc { margin-top: .15rem; font-size: .92rem; }

  /* Contact */
  #kontakt .space-y-5 > * + * { margin-top: .9rem; }
  .contact-ico { width: 2.6rem; height: 2.6rem; }
  .map-slot { height: 260px; }

  /* Footer: room for the floating call button */
  footer { padding-bottom: 4.5rem; }
}

/* ============================================================
   REDUCED MOTION — disable all non-essential motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-video { transform: none !important; }
  .scroll-3d-card { transform: none !important; }
  .tilt-y { transform: none !important; }
}