:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-alt: #eef3fa;
  --text: #162032;
  --muted: #5b677d;
  --primary: #0f4eb8;
  --primary-dark: #0b3d90;
  --accent: #0f766e;
  --border: #d9e1ef;
  --shadow: 0 14px 36px rgba(18, 38, 74, 0.09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 160px; }
body {
  margin: 0;
  font-family: Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1280px, 94vw); margin: 0 auto; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(243, 246, 251, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.logo {
  display: inline-flex;
  align-items: center;
}
.logo img {
  display: block;
  height: 42px;
  width: auto;
}
.menu { display: flex; gap: 8px; font-size: 0.8rem; color: #3e4d68; flex-wrap: nowrap; }
.menu a { white-space: nowrap; }
.menu a:hover { color: var(--primary); }
.cta-wrap { display: flex; align-items: center; gap: 8px; }
.phone { font-size: 0.8rem; color: #2c3b54; font-weight: 500; white-space: nowrap; }
.btn {
  display: inline-block;
  border-radius: 12px;
  padding: 12px 18px;
  border: 1px solid transparent;
  font-weight: 600;
  transition: 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 25px rgba(15, 78, 184, 0.22); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-small { padding: 8px 10px; font-size: 0.78rem; white-space: nowrap; }


.services-dropdown {
  position: relative;
}
.services-dropdown summary {
  list-style: none;
  cursor: pointer;
}
.services-dropdown summary::-webkit-details-marker {
  display: none;
}
.services-dropdown > ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
}
.services-dropdown li a,
.services-dropdown li span {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #3e4d68;
}
.services-dropdown li a:hover {
  background: var(--surface-alt);
  color: var(--primary);
}
.services-dropdown .has-submenu > span {
  font-weight: 700;
  color: var(--text);
}
.services-dropdown .has-submenu ul {
  margin: 4px 0 0;
  padding-left: 10px;
  list-style: none;
  border-left: 1px solid var(--border);
}

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(125deg, #0a1832 8%, #0f2952 48%, #14315f 100%);
}
.hero-media {
  position: absolute;
  inset: 0;
  background: #0b1d3d url('/media/hero-poster.webp') center / cover no-repeat;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 15, 34, 0.5), rgba(6, 15, 34, 0.74)), radial-gradient(circle at 20% 20%, rgba(58, 100, 177, 0.56), transparent 48%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 116px 0 122px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: #bfd3f7; font-weight: 700; }
h1 { margin: 10px 0 14px; line-height: 1.08; font-size: clamp(2rem, 5vw, 3.85rem); }
.lead { font-size: 1.1rem; color: #d2dff6; max-width: 840px; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trustline { margin-top: 16px; color: #c7d7f5; font-size: 0.93rem; }

.trust-strip {
  border-top: 1px solid #264572;
  border-bottom: 1px solid #264572;
  background: #0e2347;
  color: #d7e4fb;
}
.trust-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 0; }
.trust-item { font-size: 0.88rem; display: flex; gap: 8px; align-items: center; }
.trust-item span { color: #7cc7ff; font-size: 1.05rem; }

.section { padding: 74px 0; }
.section-alt { background: var(--surface); }
.section-title { margin: 0 0 10px; font-size: clamp(1.65rem, 2.4vw, 2.4rem); line-height: 1.25; }
.sub { color: var(--muted); max-width: 780px; margin-top: 0; }
.cards-3 { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }
.card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-body { padding: 20px; }
.card h3 { margin: 4px 0 8px; font-size: 1.22rem; }
.card p { color: var(--muted); margin-top: 0; }
.card strong { color: var(--text); }
.media-placeholder {
  min-height: 174px;
  background: linear-gradient(140deg, #dce7f8, #cfdcf2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.media-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.step-number { color: var(--primary); font-weight: 800; }
.step p { margin: 0; color: var(--muted); font-size: 0.94rem; }

.case-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 22px; }
.technology-layout > .card { align-self: start; }
.case-stack { display: grid; gap: 20px; }
.CaseStudyImagePrimary,.CaseStudyAnnotatedImage,.TechnologyMediaBlock,.AboutMediaBlock { min-height: 230px; }
.CaseStudyReportSnippet { min-height: 140px; }

.TechnologyMediaBlock img {
  object-position: center;
  transform: none;
}

.section-list-tight { margin-top: 12px; margin-bottom: 10px; }

.checklist-list {
  list-style: none;
  padding-left: 0;
  margin-top: 18px;
}
.checklist-list li {
  position: relative;
  padding-left: 26px;
}
.checklist-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.sample-report-panel .card-body {
  display: grid;
  gap: 12px;
}
.sample-report-frame {
  min-height: 130px;
  border-radius: 12px;
  border: 2px dashed #b8c7de;
  background: linear-gradient(140deg, #f3f7fe, #e8effa);
  display: grid;
  place-items: center;
  padding: 16px;
}
.sample-report-inline-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  text-align: center;
}
.sample-report-inline-link:hover {
  color: var(--primary-dark);
}

.CaseStudyReportSnippet .sample-report-link {
  position: relative;
  display: block;
  height: 100%;
}
.CaseStudyReportSnippet .sample-report-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 20, 40, 0.42);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}
.CaseStudyReportSnippet .sample-report-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(14, 29, 56, 0.88);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.CaseStudyReportSnippet .sample-report-link:hover::before,
.CaseStudyReportSnippet .sample-report-link:focus-visible::before {
  opacity: 1;
}
.CaseStudyReportSnippet .sample-report-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.tech-list, .benefits-list, .service-list { margin: 0; padding-left: 19px; color: var(--muted); }
.tech-list li, .benefits-list li, .service-list li { margin-bottom: 7px; }

.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.package { padding: 22px; }
.package .badge { font-size: 0.78rem; text-transform: uppercase; color: var(--primary); font-weight: 700; }

.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.industry { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; font-weight: 600; color: #34425c; }

.cta-panel {
  background: linear-gradient(125deg, #11284e, #17386a);
  color: #eff5ff;
  border-radius: 18px;
  padding: 46px;
  box-shadow: var(--shadow);
}
.cta-panel p { color: #d4e2fb; max-width: 760px; }

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

footer {
  margin-top: 10px;
  background: #0e1d38;
  color: #d5deef;
  border-top: 1px solid #243a63;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "VISTAFLY";
  position: absolute;
  right: -24px;
  bottom: -22px;
  font-size: clamp(2.8rem, 8vw, 7rem);
  color: rgba(183, 203, 237, 0.08);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.footer-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; padding: 46px 0; }
.footer-brand {
  display: grid;
  gap: 12px;
  align-content: start;
}
.footer-logo img {
  height: 48px;
}
footer h4 { margin-top: 0; margin-bottom: 9px; color: #fff; }
footer a { color: #dbe6fb; display: block; margin-bottom: 6px; }
footer p { margin-top: 0; color: #bfcee8; }
.footer-brand p.powered-by { white-space: nowrap; }
.footer-brand p.powered-by a { display: inline; margin-bottom: 0; }

.hero-secondary {
  position: relative;
  min-height: 44vh;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(130deg, #0d1e3c, #153560);
}
.hero-secondary .hero-content { padding: 90px 0; }

.faq-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.faq-item h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.faq-item p {
  margin: 0;
  color: var(--muted);
}

.contact-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.contact-form-card,.contact-info-card { padding: 20px; }
.contact-form { display: grid; gap: 11px; }
.contact-form label { display: grid; gap: 5px; font-size: 0.9rem; color: #3f4f69; }
.contact-form input,.contact-form textarea,.contact-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
}
.contact-side { display: grid; gap: 20px; }
.service-description {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
  padding: 12px 14px;
  color: #364661;
}
.service-description p {
  margin: 6px 0 0;
}

.service-description-heading {
  display: block;
  margin-bottom: 6px;
}


.legal-card { padding: 28px; }
.legal-card .section-title { margin-top: 28px; }
.legal-card .section-title:first-of-type { margin-top: 0; }
@media (max-width: 1400px) {
  /* Polish nav labels (esp. "Przykładowe Inspekcje" and "Program monitorowania
     dachu") run long enough that the full menu + phone number + both header
     buttons don't reliably fit on one line below ~1400px, even at reduced
     font size. Rather than risk the two-line wrap this is fixing, the menu
     drops out earlier here than on the English site (which hides it at
     1024px). Below this width there's currently no fallback nav (no
     hamburger menu) — just logo, phone, and the two buttons remain. */
  .menu { display: none; }
}
@media (max-width: 1024px) {
  .trust-items,.process-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-3,.package-grid,.industries-grid { grid-template-columns: 1fr 1fr; }
  .case-layout,.about-snippet,.footer-grid,.contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .phone { display: none; }
  /* On phones the long commercial button ("Program monitorowania dachu")
     needs to wrap again — forcing nowrap here would push it wider than the
     screen instead of onto a second line, which is worse. */
  .btn-small { white-space: normal; }
  .services-dropdown > ul {
    right: auto;
    left: 0;
  }
  .hero-content { padding-top: 88px; padding-bottom: 92px; }
  .trust-items,.cards-3,.package-grid,.industries-grid,.process-grid { grid-template-columns: 1fr; }
  .cta-panel { padding: 28px; }
}

.case-carousel {
  position: relative;
}
.case-carousel img {
  transition: opacity 0.2s ease;
}
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 29, 56, 0.75);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carousel-control.prev {
  left: 10px;
}
.carousel-control.next {
  right: 10px;
}
.carousel-control:hover {
  background: rgba(14, 29, 56, 0.95);
}

/* === AUDIENCE TOGGLE === */
.audience-toggle-bar {
  background: #0e2347;
  border-bottom: 1px solid #1e3a6a;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  position: sticky;
  top: 78px;
  z-index: 39;
}
.toggle-pill {
  display: inline-flex;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 4px;
}
.toggle-pill button {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  padding: 9px 28px;
  border-radius: 999px;
  font: 600 0.9rem/1 Inter, sans-serif;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.toggle-pill button.active {
  background: var(--primary);
  color: #fff;
}
.toggle-pill button:hover:not(.active) {
  color: #fff;
}

/* === SITE VIEWS === */
.site-view { display: none; }
.site-view.active { display: block; }

/* === RESIDENTIAL HERO === */
.hero-residential .hero-media {
  background-color: #0b1d3d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-residential .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6,15,34,0.55), rgba(6,15,34,0.76));
}

/* === PHOTO PLACEHOLDER SLOTS === */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fa4c4;
  font-size: 0.85rem;
  font-style: italic;
  min-height: 220px;
}

/* === CHECK LIST (residential elaborated items) === */
.check-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 14px;
}
.check-list li {
  display: grid;
  gap: 3px;
  padding-left: 20px;
  position: relative;
}
.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.88rem;
}
.check-list li strong {
  color: var(--text);
  font-size: 0.96rem;
}
.check-list li span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* === RESIDENTIAL PRICE === */
.res-price {
  font-size: 2rem;
  font-weight: 800;
  color: #bfd3f7;
  margin: 0 0 14px;
}

/* === RESIDENTIAL CONTACT DETAILS === */
.res-contact-details {
  margin-top: 22px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.res-contact-details p { margin: 0; }
.res-contact-details a { color: #bfd3f7; }