:root {
  --ink: #1f2f3d;
  --ink-soft: #4f6474;
  --paper: #f7f6f2;
  --white: #ffffff;
  --line: #d9e0e2;
  --blue: #6f91a8;
  --blue-dark: #25465d;
  --mint: #9ba99b;
  --sand: #c6a77f;
  --violet: #9a8caf;
  --shadow: 0 14px 34px rgba(31,47,61,.08);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

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

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

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,246,242,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31,47,61,.08);
}

.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand-logo {
  width: 220px;
  height: 54px;
  object-fit: contain;
  object-position: left center;
}

.nav {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

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

.menu-button {
  display: none;
  background: none;
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--blue-dark);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: .2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  background: var(--blue-dark);
  color: white;
}

.button-light {
  background: white;
  color: var(--blue-dark);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

h3 {
  font-size: 15px;
  line-height: 1.3;
}

.lead {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 680px;
}

.section {
  padding: 84px 0;
}

.section-tight {
  padding: 56px 0;
}

.hero {
  min-height: 610px;
  display: grid;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  min-height: inherit;
  display: grid;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(247,246,242,.98) 0%,
    rgba(247,246,242,.92) 38%,
    rgba(247,246,242,.42) 65%,
    rgba(247,246,242,.04) 100%
  );
}

.hero-content { max-width: 650px; }

.hero-subtitle {
  margin: 0 0 22px;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--blue);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.section-heading {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 34px;
}

.grid-4, .grid-3, .grid-2, .tech-grid {
  display: grid;
  gap: 18px;
}

.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.tech-grid { grid-template-columns: repeat(3, 1fr); }

.goal-card, .service-card, .article-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.goal-card img,
.service-card img,
.article-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.goal-card-body,
.service-card-body,
.article-card-body {
  padding: 22px;
}

.goal-card p,
.service-card p,
.article-card p {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 0;
}

.goal-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
}

.system-section {
  background: var(--ink);
  color: white;
}

.system-section .eyebrow { color: #9dc0d5; }

.system-section .lead { color: #c8d2d8; }

.system-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 42px;
}

.system-step { text-align: center; }

.hex {
  width: 66px;
  height: 72px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border: 1px solid #8ba7b8;
  clip-path: polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  font-size: 13px;
  color: #dceaf1;
}

.system-step:nth-child(2) .hex { border-color: #aab8a1; color: #c5d1bd; }
.system-step:nth-child(3) .hex { border-color: #d0aa7c; color: #ebcda8; }
.system-step:nth-child(4) .hex { border-color: #b89098; color: #d8b9c0; }
.system-step:nth-child(5) .hex { border-color: #b5a6c6; color: #d7cce3; }

.system-step h3 {
  margin-bottom: 7px;
  font-size: 11px;
  letter-spacing: .04em;
}

.system-step p {
  font-size: 10px;
  color: #bac8cf;
  margin: 0;
}

.tech-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.tech-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tech-card-body { padding: 18px; }

.tech-card h3 { margin-bottom: 8px; }

.tech-card p {
  margin: 0;
  font-size: 11px;
  color: var(--ink-soft);
}

.page-hero {
  padding: 100px 0 78px;
  background: linear-gradient(135deg, #edf0ee, #f7f6f2);
}

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

.page-hero-image {
  border-radius: 24px;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}

.prose {
  max-width: 800px;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: 14px;
}

.prose ul { padding-left: 22px; }

.note {
  padding: 22px;
  background: #eef2f2;
  border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.cta-panel {
  padding: 48px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--ink), #304e63);
  color: white;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}

.cta-panel h2 { margin-bottom: 10px; }

.cta-panel p { margin: 0; color: #cbd8df; }

.faq {
  display: grid;
  gap: 12px;
}

details {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}

summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

details p {
  margin: 15px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.footer {
  padding: 54px 0;
  background: #152b3b;
  color: #d7e1e6;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}

.footer p, .footer a {
  font-size: 11px;
  color: #c2d0d7;
}

.footer-title {
  color: white;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.small {
  font-size: 11px;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .nav {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 74px;
    padding: 18px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .nav.open { display: flex; }
  .menu-button { display: inline-flex; }

  .section-heading,
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .system-steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .container { width: min(100% - 28px, 1180px); }
  .header-inner { min-height: 70px; }
  .brand-logo { width: 175px; height: 42px; }
  .section { padding: 60px 0; }
  .hero { min-height: 620px; }
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(247,246,242,.96),
      rgba(247,246,242,.82),
      rgba(247,246,242,.36)
    );
  }
  .grid-4, .grid-3, .grid-2, .tech-grid { grid-template-columns: 1fr; }
  .system-steps { grid-template-columns: 1fr; }
  .cta-panel { padding: 30px; flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* HOME V2 */
.hero-carousel{position:relative;height:407px;overflow:hidden;background:#e9eeef}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease;background-size:cover;background-position:center}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,246,242,.96),rgba(247,246,242,.78) 37%,rgba(247,246,242,.20) 70%,rgba(247,246,242,.04))}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-carousel .hero-content{position:relative;z-index:2;padding-top:10px}
.hero-carousel .hero-content h1{font-size:clamp(38px,5vw,62px);margin-bottom:8px}
.hero-carousel .hero-subtitle{font-size:clamp(20px,2.5vw,30px);margin-bottom:12px}
.hero-carousel .lead{font-size:13px;max-width:560px}
.carousel-controls{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px}
.carousel-dot{width:7px;height:7px;border:0;border-radius:50%;background:rgba(31,47,61,.32);cursor:pointer}.carousel-dot.is-active{width:24px;border-radius:8px;background:var(--blue-dark)}
.carousel-arrow{position:absolute;z-index:6;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid rgba(31,47,61,.22);border-radius:50%;background:rgba(255,255,255,.78);cursor:pointer}.carousel-arrow.prev{left:18px}.carousel-arrow.next{right:18px}
.tile-carousel{overflow:hidden}.tile-track{display:flex;gap:18px;transition:transform .45s ease}.tile-item{flex:0 0 calc((100% - 54px)/4)}.tile-item .goal-card{height:100%}.tile-carousel-control{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.tile-page{font-size:11px;color:var(--ink-soft)}.tile-arrows{display:flex;gap:8px}.tile-arrow{width:38px;height:38px;border:1px solid var(--line);background:white;border-radius:50%;cursor:pointer}.tile-arrow:disabled{opacity:.35;cursor:default}
.reviews-section{background:#eef1f1}.review-card{background:white;border:1px solid var(--line);border-radius:16px;padding:25px;min-height:210px}.review-source{display:inline-flex;margin-bottom:12px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-dark)}.review-stars{letter-spacing:.12em;margin-bottom:14px;font-size:13px}.review-card blockquote{margin:0 0 18px;font-size:15px;line-height:1.55}.review-author,.rating-meta{font-size:11px;color:var(--ink-soft)}.rating-number{font-size:32px;font-weight:600;line-height:1;margin-bottom:7px}.booksy-panel{margin-top:25px;background:white;border:1px solid var(--line);border-radius:18px;padding:28px}.booksy-placeholder{padding:25px;border:1px dashed #aab6bd;border-radius:12px;background:#f7f8f8;color:var(--ink-soft);font-size:12px}
@media(max-width:900px){.hero-carousel{height:440px}.tile-item{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:560px){.hero-carousel{height:570px}.hero-slide::after{background:linear-gradient(180deg,rgba(247,246,242,.95),rgba(247,246,242,.60),rgba(247,246,242,.20))}.tile-item{flex-basis:100%}}


/* SEO + accessibility enhancements */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 9999;
  padding: .75rem 1rem;
  background: #111;
  color: #fff;
  border-radius: .35rem;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.seo-intro { padding-top: 3rem; padding-bottom: 1rem; }
.footer a { text-decoration-thickness: .08em; text-underline-offset: .16em; }
@media (max-width: 700px) { .seo-intro { padding-top: 2rem; } }

.hero-video-slide{background:#182b38}
.hero-video{z-index:0}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,43,59,.72),rgba(21,43,59,.18));z-index:1}
.hero-video-slide .hero-content{color:#fff}
.hero-video-slide .hero-content .eyebrow,.hero-video-slide .hero-content .lead{color:#fff}

/* HOME V5 — goals immediately below the hero */
.home-goals {
  padding-top: 28px;
  padding-bottom: 54px;
}
.home-goals .tile-carousel {
  width: 100%;
}
.home-goals .goal-card img {
  height: 190px;
}
.home-goals .goal-card-body {
  min-height: 126px;
  padding: 18px;
}
.home-goals .goal-link {
  margin-top: 12px;
}
@media (max-width: 900px) {
  .home-goals { padding-top: 24px; }
  .home-goals .goal-card img { height: 180px; }
}
@media (max-width: 560px) {
  .home-goals { padding-top: 18px; }
  .home-goals .goal-card img { height: 210px; }
}

/* HOME V6 — aligned section width */
.seo-intro .prose {
  max-width: none;
}

.seo-intro .prose p {
  max-width: 980px;
}

/* BOOKSY — official widget */
.booksy-widget {
  min-height: 120px;
}
.brand-logo {
  width: 210px;
  height: 72px;
}
@media (max-width: 560px) {
  .brand-logo {
    width: 165px;
    height: 54px;
  }
}

/* V8 — 16 problemów / cele zdrowotne */
.home-problems{padding-top:34px;padding-bottom:54px}.problem-carousel{width:100%}.problem-viewport{overflow:hidden;width:100%}.problem-track{display:flex;width:100%;gap:0;transition:transform .45s ease;will-change:transform}.problem-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.problem-tile{min-height:112px;border-radius:18px;overflow:hidden}.problem-tile a{height:100%;min-height:112px;display:flex;align-items:center;gap:14px;padding:22px 24px;text-decoration:none;color:#fff;font-weight:700;letter-spacing:.02em}.problem-number{font-size:12px;opacity:.65;min-width:24px}.problem-tile span:nth-child(1){font-size:18px;line-height:1.15;text-transform:none}.problem-arrow{margin-left:auto;font-size:22px;opacity:.7}.problem-blue{background:#cbdbe6;color:#203444}.problem-navy{background:#24445d}.problem-green{background:#587968}.problem-sage{background:#819b8f}.problem-sand{background:#cdbfa5;color:#243746}.problem-steel{background:#789bb5}.problem-taupe{background:#a99782}.problem-rose{background:#c68176}.problem-brick{background:#b66e68}.problem-teal{background:#5c9b9c}.problem-mauve{background:#ad8ca8}.problem-gold{background:#d7b15e;color:#243746}.problem-indigo{background:#66719a}.problem-carousel .problem-tile{display:block}.tile-carousel-control{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.tile-page{font-size:11px;color:var(--ink-soft)}.tile-arrows{display:flex;gap:8px}.tile-arrow{width:38px;height:38px;border:1px solid var(--line);background:white;border-radius:50%;cursor:pointer}.tile-arrow:disabled{opacity:.35;cursor:default}
@media (max-width: 900px){.problem-page{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 600px){.problem-page{grid-template-columns:1fr}.problem-tile,.problem-tile a{min-height:92px}}


/* HOME V9 — photographic hero and unnumbered problem tiles */
.hero-video-slide .hero-video { object-fit: cover; }
.hero-video-slide .hero-video-overlay { background: linear-gradient(90deg, rgba(21,43,59,.72), rgba(21,43,59,.18)); }
.hero-vald-slide { background-size: 52% auto !important; background-repeat: no-repeat !important; background-position: 88% center !important; background-color: #edf0ef; }
.hero-vald-slide::after { background: linear-gradient(90deg, rgba(247,246,242,.98) 0%, rgba(247,246,242,.92) 40%, rgba(247,246,242,.28) 67%, rgba(247,246,242,.04) 100%); }
@media (max-width: 700px) {
  .hero-vald-slide { background-size: 72% auto !important; background-position: 50% 72% !important; }
  .hero-vald-slide::after { background: linear-gradient(180deg, rgba(247,246,242,.96), rgba(247,246,242,.72) 58%, rgba(247,246,242,.25)); }
}

/* MitoHACKER PROMAX visual */
.rlt-hero-visual { overflow: hidden; }
.rlt-hero-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.technology-product-image { width:100%; max-height:360px; object-fit:cover; border-radius:18px; margin:0 0 22px; display:block; }
.rlt-promax-specs { margin-top:24px; }


/* SYSTEM — four-pillar architecture */
.system-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.system-pillar {
  min-height: 250px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(31,47,61,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.system-pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.system-pillar .pillar-label {
  position: absolute;
  top: 24px;
  left: 26px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  opacity: .82;
}
.system-pillar strong {
  display: block;
  font-size: clamp(25px, 2.5vw, 36px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.system-pillar > span:not(.pillar-label):not(.pillar-arrow) {
  max-width: 250px;
  font-size: 12px;
  line-height: 1.5;
  opacity: .94;
}
.system-pillar .pillar-arrow {
  position: absolute;
  right: 24px;
  bottom: 22px;
  font-size: 22px;
  opacity: .75;
}
.pillar-longevity { background: #6f8799; }
.pillar-recovery { background: #52746a; }
.pillar-performance { background: #36556d; }
.pillar-nutrition { background: #a78f73; }

.system-intro {
  background: #fff;
}
.system-pillar-detail {
  background: var(--paper);
}
.system-pillar-detail-alt {
  background: #eef1ef;
}
.system-detail-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 80px;
  align-items: start;
}
.system-detail-grid > div:first-child {
  position: sticky;
  top: 112px;
}
.system-detail-grid .hero-subtitle {
  margin-top: 18px;
}
.system-detail-grid .prose {
  max-width: 760px;
}
.system-detail-grid ul {
  padding-left: 20px;
}
.system-statement {
  margin: 28px 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.system-connection {
  background: #fff;
}
.system-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 42px 0;
  flex-wrap: wrap;
}
.system-flow span {
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.system-flow i {
  font-style: normal;
  color: var(--blue);
  font-size: 20px;
}
.system-process {
  background: var(--paper);
}

@media (max-width: 1000px) {
  .system-pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .system-detail-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .system-detail-grid > div:first-child {
    position: static;
  }
}
@media (max-width: 600px) {
  .system-pillar-grid {
    grid-template-columns: 1fr;
  }
  .system-pillar {
    min-height: 210px;
  }
  .system-flow {
    justify-content: flex-start;
    gap: 10px;
  }
  .system-flow i {
    display: none;
  }
}


/* V18 — stable hero first paint, system pillar typography and mobile problem carousel */
.hero-video-slide { background: #182b38; }
.hero-video-slide .hero-video { background: #182b38; }

.system-pillar strong {
  font-size: clamp(24px, 2.15vw, 34px);
  letter-spacing: -.035em;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .system-pillar strong {
    font-size: clamp(22px, 2.05vw, 30px);
  }
}

@media (max-width: 900px) {
  .system-pillar strong {
    font-size: clamp(22px, 4vw, 30px);
  }
}

@media (max-width: 600px) {
  .problem-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .problem-tile,
  .problem-tile a {
    min-height: 76px;
  }
  .problem-tile a {
    gap: 8px;
    padding: 12px 13px;
  }
  .problem-tile span:nth-child(1) {
    font-size: 13px;
    line-height: 1.18;
  }
  .problem-arrow {
    font-size: 16px;
  }
  .tile-carousel-control {
    margin-top: 12px;
  }
}

/* V19 — unified typography across all hero slides */
.hero-carousel .hero-content h1,
.hero-carousel .hero-content h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

@media (max-width: 560px) {
  .hero-carousel .hero-content h1,
  .hero-carousel .hero-content h2 {
    font-size: clamp(26px, 7vw, 34px);
  }
}


/* =========================================================
   V20 — COOL SYSTEM / 4 FILARY
   ========================================================= */

.system-pillars,
.pillars-grid,
.system-grid {
    width: 100%;
}

.pillar-title {
    font-size: clamp(28px, 2.15vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
    overflow: visible;
}

/* Performance ma być dokładnie w tej samej osi pionowej
   i mieścić się w szerokości karty. */
.pillar-title {
    transform: none;
}

/* Wspólna pozycja głównego tytułu w każdym kafelku */
.system-card h3,
.pillar-card h3,
.pillars-grid .card h3,
.system-pillars .card h3 {
    min-height: 1.05em;
    display: flex;
    align-items: center;
}

/* Karty filarów — proporcje z najnowszego projektu */
.system-card,
.pillar-card,
.pillars-grid .card,
.system-pillars .card {
    min-height: 330px;
}

/* Tablet */
@media (max-width: 1100px) {
    .pillar-title {
        font-size: clamp(25px, 3.2vw, 34px) !important;
    }
}

/* Mobile: dwa kafelki obok siebie, kompaktowa typografia */
@media (max-width: 700px) {
    .pillar-title {
        font-size: clamp(20px, 5.8vw, 28px) !important;
        letter-spacing: -0.035em !important;
    }

    .system-card,
    .pillar-card,
    .pillars-grid .card,
    .system-pillars .card {
        min-height: 270px;
    }
}

/* V20 FIX — equal pillar title baseline and PERFORMANCE fit */
.system-pillar {
  min-height: 330px;
  box-sizing: border-box;
}

.system-pillar strong {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 94px;
  margin: 0;
  display: block;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.system-pillar > span:not(.pillar-label):not(.pillar-arrow) {
  position: absolute;
  left: 26px;
  right: 58px;
  bottom: 26px;
  max-width: none;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .system-pillar strong {
    font-size: 27px;
  }
}

@media (max-width: 1000px) {
  .system-pillar strong {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .system-pillar {
    min-height: 210px;
  }
  .system-pillar strong {
    left: 20px;
    right: 20px;
    bottom: 67px;
    font-size: 24px;
  }
  .system-pillar > span:not(.pillar-label):not(.pillar-arrow) {
    left: 20px;
    right: 44px;
    bottom: 18px;
    font-size: 11px;
    line-height: 1.35;
  }
}

/* V22 — granatowy header zgodny z dolnym panelem strony */
.site-header {
  background: #152b3b;
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: none;
}

.site-header .brand-logo {
  filter: brightness(0) invert(1);
}

.site-header .nav a {
  color: #f5f7f8;
}

.site-header .nav a:hover,
.site-header .nav a:focus-visible {
  color: #b9d1df;
}

.site-header .button {
  background: #c6a77f;
  border-color: #c6a77f;
  color: #fff;
}

.site-header .button:hover,
.site-header .button:focus-visible {
  background: #b89468;
  border-color: #b89468;
  color: #fff;
}

.site-header .menu-button {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: transparent;
}

@media (max-width: 900px) {
  .site-header .nav {
    background: #152b3b;
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
  }

  .site-header .nav a {
    color: #f5f7f8;
  }
}


/* =========================================================
   V23 — HEADER / HERO / TANITA
   ========================================================= */

/* V23 — video text contrast; preserve HOME V2 carousel positioning. */
.hero-carousel .hero-content,
.hero-carousel .hero-slide .hero-content {
    position: relative;
    z-index: 3;
}

.hero-carousel .hero-slide .hero-legacy-claim {
    position: relative;
    z-index: 4;
    display: inline-block;
    margin: 0 0 14px 0;
    color: rgba(255,255,255,0.94);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.hero-carousel .hero-video-overlay {
    pointer-events: none;
}

/* TANITA medical certification badge */
.tech-medical-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 20px 0 24px;
    padding: 16px 18px;
    border: 1px solid rgba(24, 43, 58, 0.18);
    border-radius: 14px;
    background: rgba(24, 43, 58, 0.06);
}

.tech-medical-badge strong {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #152B3B;
}

.tech-medical-badge span {
    font-size: 15px;
    line-height: 1.45;
    color: #53697A;
    max-width: 820px;
}

.tech-lead-note {
    max-width: 900px;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.65;
    color: #53697A;
}

@media (max-width: 700px) {
    .hero-slide .hero-legacy-claim,
    .hero .hero-legacy-claim {
        font-size: 10px;
        letter-spacing: 0.12em;
        margin-bottom: 10px;
    }

    .tech-medical-badge {
        padding: 14px;
    }

    .tech-medical-badge span {
        font-size: 14px;
    }
}


/* V35 — lighter homepage video overlay */
.hero-video-overlay {
    background: linear-gradient(
        90deg,
        rgba(10, 23, 34, 0.42) 0%,
        rgba(10, 23, 34, 0.28) 45%,
        rgba(10, 23, 34, 0.12) 78%,
        rgba(10, 23, 34, 0.05) 100%
    ) !important;
}

.hero-video-slide .hero-content {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}

.hero-video-slide .hero-legacy-claim {
    display: block;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
}

@media (max-width: 700px) {
    .hero-video-overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 23, 34, 0.44) 0%,
            rgba(10, 23, 34, 0.30) 52%,
            rgba(10, 23, 34, 0.10) 100%
        ) !important;
    }

    .hero-video-slide .hero-legacy-claim {
        font-size: 10px;
        letter-spacing: 0.11em;
        margin-bottom: 10px;
    }
}

/* V24 HOTFIX — restore hero carousel positioning after V23 contrast rules */
.hero-carousel {
  position: relative;
  overflow: hidden;
}
.hero-carousel .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-carousel .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hero-carousel .hero-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.hero-carousel .hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
}
.hero-carousel .container {
  position: relative;
  z-index: 2;
}
.hero-carousel .hero-content {
  position: relative;
  z-index: 3;
}


/* V25 — stable 7-second hero carousel layering */
.hero-carousel { position: relative !important; overflow: hidden; }
.hero-carousel .hero-slide { position: absolute !important; inset: 0 !important; width: 100%; height: 100%; opacity: 0; visibility: hidden; }
.hero-carousel .hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-carousel .hero-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; z-index: 0; }
.hero-carousel .hero-video-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none; }
.hero-carousel .hero-slide > .container { position: relative; z-index: 2; height: 100%; }

/* V26 — mobile hero video playback */
.hero-carousel .hero-video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-carousel .hero-video-slide {
  background: #182b38 !important;
}
@media (max-width: 700px) {
  .hero-carousel .hero-video {
    object-position: center center;
  }
}


/* Location links */
.location-link{color:inherit;text-decoration:none}
.location-link:hover{text-decoration:underline}


/* V28 — homepage slide text contrast, mobile anchor and footer socials */
.home-problems { scroll-margin-top: 110px; }
.hero-carousel .hero-slide:not(.hero-video-slide) .hero-content h2,
.hero-carousel .hero-slide:not(.hero-video-slide) .hero-content h1 { color:#152b3b; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.hero-carousel .hero-slide:not(.hero-video-slide) .hero-content .hero-subtitle { color:#355a72; text-shadow:0 1px 0 rgba(255,255,255,.28); }
.hero-carousel .hero-slide:not(.hero-video-slide) .hero-content .lead { color:#263f50; text-shadow:0 1px 0 rgba(255,255,255,.24); }
.hero-carousel .hero-slide:not(.hero-video-slide) .hero-content .eyebrow { color:#4f7085; }
.hero-carousel .hero-slide:not(.hero-video-slide)::after { background:linear-gradient(90deg,rgba(247,246,242,.985) 0%,rgba(247,246,242,.94) 40%,rgba(247,246,242,.38) 70%,rgba(247,246,242,.08) 100%); }
@media(max-width:700px){
 .hero-carousel .hero-slide:not(.hero-video-slide)::after { background:linear-gradient(180deg,rgba(247,246,242,.985) 0%,rgba(247,246,242,.92) 48%,rgba(247,246,242,.36) 100%); }
 .hero-carousel .hero-slide:not(.hero-video-slide) .hero-content h2,.hero-carousel .hero-slide:not(.hero-video-slide) .hero-content h1 { text-shadow:0 1px 0 rgba(255,255,255,.5); }
}
.footer-social{display:flex;gap:10px;margin-top:18px}.footer-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none!important}.footer-social a:hover{border-color:#fff;transform:translateY(-1px)}.footer-social svg{width:17px;height:17px;display:block;fill:currentColor}.footer-social svg rect,.footer-social svg circle{fill:none}
.knowledge-video-wrap{margin:0 0 36px;border-radius:22px;overflow:hidden;background:#152b3b;box-shadow:var(--shadow)}.knowledge-story-video{display:block;width:100%;height:auto;max-height:680px;object-fit:cover;background:#152b3b}.knowledge-fact-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.knowledge-tip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.knowledge-tip-grid .knowledge-mini{min-height:170px}
@media(max-width:900px){.knowledge-fact-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.knowledge-tip-grid{grid-template-columns:1fr}}
@media(max-width:560px){.knowledge-fact-grid-4{grid-template-columns:1fr 1fr}.knowledge-tip-grid .knowledge-mini{min-height:0}}
/* V28 — transparent CryoSpace/JBG-2 logo presentation */
.technology-brand-head img.cryospace-logo-transparent{background:transparent!important}


/* V29 — mobile-first partner carousel, consistent logos, social sizing and knowledge layout */
.partners-track{width:100%;}
.partner-card{min-width:0;background:transparent;border-color:transparent;}
.partner-card img{width:82%;height:96px;object-fit:contain;object-position:center;filter:none;}
.footer-social{align-items:center;}
.footer-social a{flex:0 0 34px;}
.footer-social svg{width:17px;height:17px;}
.knowledge-intro-grid{grid-template-columns:1fr;gap:28px;}
.knowledge-feature{width:100%;}
.knowledge-side{grid-template-columns:repeat(3,minmax(0,1fr));}
.knowledge-article-head{grid-template-columns:1fr;align-items:start;max-width:980px;}
.knowledge-article-head>div:first-child,.knowledge-article-head>p{max-width:900px;}
.knowledge-video-wrap{width:min(100%,980px);margin-left:auto;margin-right:auto;}
@media(max-width:900px){
  .knowledge-side{grid-template-columns:1fr 1fr;}
  .partner-card img{height:88px;width:84%;}
}
@media(max-width:560px){
  .footer-social{gap:8px;margin-top:14px;}
  .footer-social a{flex-basis:30px;width:30px;height:30px;}
  .footer-social svg{width:15px;height:15px;}
  .knowledge-intro-grid{gap:18px;}
  .knowledge-side{grid-template-columns:1fr;}
  .knowledge-feature{padding:28px;}
  .knowledge-article-head{gap:18px;margin-bottom:26px;}
  .knowledge-video-wrap{border-radius:16px;}
  .knowledge-story-video{width:100%;height:auto;}
  .partner-card{height:150px;}
  .partner-card img{height:92px;width:86%;}
}


/* V30 — knowledge hero / footer legal / newsletter / partner logo balance */
.knowledge-hero .container{margin-left:40px;margin-right:40px;width:auto;max-width:none;}
.knowledge-hero .hero-copy{max-width:1100px;}
@media(max-width:560px){.knowledge-hero .container{margin-left:20px;margin-right:20px;width:auto}.knowledge-hero .hero-copy{max-width:none}}

/* Partner visual balance: compensate for transparent whitespace in source logo files. */
.partner-card img{max-width:90%;}
.partner-card:nth-child(4) img{width:92%;height:120px;}
.partner-card:nth-child(5) img{width:92%;height:120px;}
.partner-card:nth-child(6) img{width:auto;height:142px;}
@media(max-width:900px){.partner-card:nth-child(4) img,.partner-card:nth-child(5) img{height:110px}.partner-card:nth-child(6) img{height:126px}}
@media(max-width:560px){.partner-card:nth-child(4) img,.partner-card:nth-child(5) img{height:108px}.partner-card:nth-child(6) img{height:130px}}

.footer-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:11px;color:rgba(255,255,255,.72);align-items:center;}
.footer-meta a{color:rgba(255,255,255,.82);text-decoration:none!important;}
.footer-meta a:hover{text-decoration:underline!important;color:#fff;}
.footer-meta .footer-copy{margin-left:auto;}
.newsletter-panel{background:#eef1f1;border-radius:22px;padding:36px;}
.newsletter-panel h2{margin:0 0 10px;}
.newsletter-panel>p{max-width:760px;color:var(--ink-soft);}
.newsletter-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;margin-top:24px;}
.newsletter-field label{display:block;font-size:11px;font-weight:700;margin-bottom:7px;}
.newsletter-field input{width:100%;height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;font:inherit;color:var(--ink);}
.newsletter-consents{grid-column:1/-1;display:grid;gap:9px;margin-top:2px;}
.newsletter-consent{display:flex;gap:9px;align-items:flex-start;font-size:11px;line-height:1.5;color:var(--ink-soft);}
.newsletter-consent input{margin-top:3px;accent-color:var(--blue-dark);}
.newsletter-consent a{text-decoration:underline;text-underline-offset:2px;}
.newsletter-hint{font-size:10px!important;line-height:1.55;color:#71808a!important;margin:12px 0 0!important;}
@media(max-width:700px){.newsletter-form{grid-template-columns:1fr}.newsletter-form .button{width:100%;}.newsletter-panel{padding:26px 22px}.footer-meta .footer-copy{margin-left:0;width:100%;}}

/* V31 — final alignment and mobile polish */
/* Knowledge hero uses the same container grid as the sections below. */
.knowledge-hero .container{
  width:min(1180px, calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
  max-width:none;
}
.knowledge-hero .hero-copy{max-width:1100px;}

/* Knowledge mini cards: create clearer separation between headline and supporting text. */
.knowledge-mini span{display:block;margin-top:14px;}

/* Partner logos: use the cropped transparent assets and give the three previously undersized marks more visual weight. */
.partner-card img{max-width:90%;object-fit:contain;object-position:center;}
.partner-card:nth-child(4) img{width:92%;height:135px;}
.partner-card:nth-child(5) img{width:92%;height:112px;}
.partner-card:nth-child(6) img{width:auto;height:150px;max-width:82%;}
@media(max-width:900px){
  .partner-card:nth-child(4) img{height:125px;}
  .partner-card:nth-child(5) img{height:105px;}
  .partner-card:nth-child(6) img{height:140px;}
}
@media(max-width:560px){
  .knowledge-hero .container{width:min(100% - 28px, 1180px);margin-left:auto;margin-right:auto;}
  .knowledge-mini span{margin-top:16px;}
  .partner-card:nth-child(4) img{height:125px;max-width:92%;}
  .partner-card:nth-child(5) img{height:105px;max-width:94%;}
  .partner-card:nth-child(6) img{height:140px;max-width:84%;}
}

/* Keep footer legal/meta items safely inside the visual margins. */
.footer-meta{padding-left:20px;padding-right:20px;}
@media(max-width:700px){.footer-meta{padding-left:8px;padding-right:8px;}}


/* V38 — COOLVity Education training hero slide */
.hero-training-slide{
  background:#eaf2f6 url('wide-training-hero.png') center center / cover no-repeat;
  isolation:isolate;
}
.hero-training-slide::after{
  display:none;
}
.hero-training-link{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
}
.hero-training-cta{
  position:absolute;
  left:clamp(28px,7vw,96px);
  bottom:24px;
  z-index:4;
  pointer-events:none;
  background:#cdb18b;
  color:#fff;
  border-radius:12px;
  padding:14px 24px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 8px 22px rgba(21,43,59,.12);
}
@media(max-width:900px){
  .hero-training-slide{background-image:url('mobile-training-hero.png');background-position:center center;background-size:cover;}
  .hero-training-cta{left:24px;bottom:22px;}
}
@media(max-width:560px){
  .hero-training-slide{background-size:cover;background-position:center center;}
  .hero-training-cta{left:18px;bottom:18px;padding:12px 18px;font-size:11px;}
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}


/* V39 — hero readability, full training slide, knowledge contrast, contact CTA */
.hero-video-slide .hero-content h1,
.hero-video-slide .hero-content h2,
.hero-video-slide .hero-content .hero-subtitle,
.hero-video-slide .hero-content .lead,
.hero-video-slide .hero-content .eyebrow {
  text-shadow: 0 3px 18px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.55);
}
.hero-video-slide .hero-content h1 { font-weight: 800; }

/* Show the complete education artwork without cropping. */
.hero-training-slide {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #eaf2f6 !important;
}
.hero-training-cta {
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%);
}
@media(max-width:900px){
  .hero-training-slide {
    background-size: contain !important;
    background-position: center center !important;
  }
  .hero-training-cta { bottom: 14px !important; }
}
@media(max-width:560px){
  .hero-training-slide { background-size: contain !important; }
  .hero-training-cta { bottom: 10px !important; font-size:10px; padding:10px 14px; }
}

/* The second Knowledge section uses white type on a dark surface for contrast. */
.knowledge-side .knowledge-mini {
  background: #152b3b;
  border-color: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 10px 28px rgba(21,43,59,.10);
}
.knowledge-side .knowledge-mini strong { color:#fff; }
.knowledge-side .knowledge-mini span { color:#e7eef2; }

/* Contact: guide the visitor directly to DLA CIEBIE. */
.contact-direction-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #152b3b;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(21,43,59,.22);
  padding-bottom: 7px;
  transition: gap .2s ease, border-color .2s ease;
}
.contact-direction-link::after { content: '→'; font-size: 20px; line-height: 1; }
.contact-direction-link:hover { gap: 16px; border-color: rgba(21,43,59,.55); }

/* V40 — anchor alignment for COOL SYSTEM program sections */
.system-pillar-detail{scroll-margin-top:140px;}
@media(max-width:700px){.system-pillar-detail{scroll-margin-top:110px;}}

/* V40 — approved COOL Education training artwork */
.hero-training-slide{background-image:url('wide-training-hero.png') !important;background-size:contain !important;background-position:center center !important;background-repeat:no-repeat !important;background-color:#eaf2f6 !important;}
.hero-training-cta{left:50% !important;transform:translateX(-50%) !important;bottom:18px !important;}
@media(max-width:560px){.hero-training-slide{background-image:url('wide-training-hero.png') !important;background-size:contain !important;background-position:center center !important;}.hero-training-cta{bottom:10px !important;}}

/* V41 — system detail sections: one centered system per viewport */
.system-pillar-detail {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.system-pillar-detail .container { width: 100%; }
.system-pillar-detail .system-detail-grid { width: 100%; }
@media (max-width: 900px) {
  .system-pillar-detail {
    min-height: calc(100svh - 72px);
    overflow: visible;
  }
}
@media (max-width: 560px) {
  .system-pillar-detail {
    min-height: calc(100svh - 70px);
    padding-top: 54px;
    padding-bottom: 54px;
  }
}

/* V41 — training hero uses the approved artwork at full slide height without a second CTA */
.hero-training-slide {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* V42 — visual alignment, education card contrast and system viewport centering */
.hero-training-slide {
  background-image: url('wide-training-hero-v42.png') !important;
  background-color: #eaf2f6 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.hero-training-slide .hero-training-cta {
  left: 28px !important;
  right: auto !important;
  bottom: 22px !important;
  transform: none !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  background: #c6a77f !important;
}
/* The artwork already contains the single CTA; no second HTML CTA should appear. */
.hero-training-slide .hero-training-cta { display: none !important; }

/* Education segment cards: restore dark text on white cards. */
.edu-dark .edu-card { color: var(--ink) !important; }
.edu-dark .edu-card h3,
.edu-dark .edu-card li,
.edu-dark .edu-card p,
.edu-dark .edu-card a { color: inherit; }
.edu-dark .edu-card p { color: var(--ink-soft); }
.edu-dark .edu-card a { color: var(--blue-dark); }

/* Knowledge side cards: high-contrast white typography. */
.knowledge-side .knowledge-mini strong { color: #fff !important; }
.knowledge-side .knowledge-mini span { color: #f4f8fa !important; }

/* System: keep every pillar detail on its own centered viewport without horizontal drift. */
.system-pillar-detail {
  min-height: calc(100vh - 82px);
  height: auto;
  display: flex;
  align-items: center;
  overflow: visible;
  scroll-margin-top: 82px;
}
.system-pillar-detail .container {
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;
  margin-inline: auto;
}
.system-pillar-detail .system-detail-grid {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  min-width: 0;
  align-items: center;
}
.system-detail-grid > div,
.system-detail-grid .prose,
.system-detail-grid h2,
.system-detail-grid p,
.system-detail-grid ul { min-width: 0; }
.system-detail-grid > div:first-child { position: static; }
@media (max-width: 900px) {
  .system-pillar-detail {
    min-height: calc(100svh - 72px);
    scroll-margin-top: 72px;
  }
  .system-pillar-detail .container { width: min(100% - 32px, 760px); }
  .system-pillar-detail .system-detail-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
}
@media (max-width: 560px) {
  .system-pillar-detail {
    min-height: calc(100svh - 70px);
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .system-pillar-detail .container { width: calc(100% - 28px); }
}
@media (max-width: 900px) {
  .hero-training-slide { background-image: url('wide-training-hero.png') !important; background-size: cover !important; background-position: center center !important; }
}
@media (max-width: 560px) {
  .hero-training-slide { background-image: url('wide-training-hero.png') !important; background-size: cover !important; background-position: center center !important; }
}


/* V43 — training hero: wide, centered artwork with the same visual rhythm as the video slide. */
.hero-training-slide {
  background-image: url('training-hero-v43.png') !important;
  background-color: #eaf2f6 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
}
.hero-training-slide .hero-training-link { z-index: 3; }
.hero-training-slide .hero-training-cta {
  display: inline-flex !important;
  position: absolute !important;
  left: clamp(28px, 4.5vw, 72px) !important;
  right: auto !important;
  bottom: 24px !important;
  transform: none !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 28px !important;
  border-radius: 12px;
  background: #23465f !important;
  color: #fff !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(21,43,59,.16);
}
.hero-training-slide .hero-training-cta:hover { background:#152b3b !important; }
@media(max-width:900px){
  .hero-training-slide { background-size: cover !important; background-position:center center !important; }
  .hero-training-slide .hero-training-cta { left:24px !important; bottom:20px !important; }
}
@media(max-width:560px){
  .hero-training-slide { background-image:url('mobile-training-hero.png') !important; background-size:cover !important; background-position:center center !important; }
  .hero-training-slide .hero-training-cta { left:18px !important; bottom:18px !important; min-height:46px; padding:11px 18px !important; font-size:11px !important; }
}

/* V44 — global visual/SEO/mobile polish */
html, body { max-width:100%; overflow-x:clip; }
body { text-rendering:optimizeLegibility; }
.hero-training-slide {
  background-image:url('training-hero-v44.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#eaf2f6 !important;
}
.hero-training-slide .hero-training-cta {
  display:inline-flex !important;
  left:clamp(28px,4.5vw,72px) !important;
  bottom:24px !important;
  transform:none !important;
  background:#25465d !important;
  color:#fff !important;
}
@media(max-width:900px){
  .hero-training-slide { background-image:url('training-hero-v44.webp') !important; background-size:cover !important; background-position:center center !important; }
  .hero-training-slide .hero-training-cta { left:24px !important; bottom:20px !important; }
}
@media(max-width:560px){
  .hero-training-slide { background-image:url('training-hero-v44.webp') !important; background-size:cover !important; background-position:center center !important; }
  .hero-training-slide .hero-training-cta { left:18px !important; bottom:18px !important; min-height:46px; padding:11px 18px !important; font-size:11px !important; }
}

/* One complete system per screen: center when short, grow naturally when content is long. */
.system-pillar-detail {
  min-height:max(680px, calc(100dvh - 82px));
  height:auto;
  padding:clamp(72px,8vh,110px) 0;
  display:flex;
  align-items:center;
  overflow:visible;
  scroll-margin-top:82px;
  position:relative;
}
.system-pillar-detail .container {
  width:min(1180px, calc(100% - 40px));
  margin-inline:auto;
}
.system-pillar-detail .system-detail-grid {
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;
}
.system-pillar-detail-alt { background:#eef1ef; }
@media(max-width:900px){
  .system-pillar-detail { min-height:max(720px, calc(100dvh - 72px)); padding:70px 0; }
  .system-pillar-detail .container { width:min(100% - 32px,760px); }
  .system-pillar-detail .system-detail-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
}
@media(max-width:560px){
  .system-pillar-detail { min-height:max(760px, calc(100dvh - 70px)); padding:64px 0; }
  .system-pillar-detail .container { width:calc(100% - 28px); }
}

/* System: concise, readable sales CTA under the orientation section. */
.system-intro-cta { margin-top:26px; }
.system-intro-cta .button { font-size:11px; }

/* Typography consistency: the design uses Montserrat 400–800. */
button, input, textarea, select { font-family:"Montserrat",Arial,sans-serif; }

/* V45 — final hero slider alignment and contrast */
.hero-video-overlay {
  background: linear-gradient(
    90deg,
    rgba(10,23,34,.30) 0%,
    rgba(10,23,34,.20) 45%,
    rgba(10,23,34,.08) 78%,
    rgba(10,23,34,.03) 100%
  ) !important;
}
.hero-video-slide .hero-content .hero-subtitle {
  color:#7fa7bf !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55) !important;
}
.hero-video-slide .hero-content .eyebrow,
.hero-video-slide .hero-content .lead { color:#fff !important; }

/* Training slide: exactly the same 1810×407 canvas/rhythm as the other desktop slides. */
.hero-training-slide {
  background-image:url('training-hero-v45.webp') !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#eaf2f6 !important;
}
.hero-training-slide .hero-training-cta {
  display:inline-flex !important;
  left:clamp(24px,5vw,80px) !important;
  right:auto !important;
  bottom:24px !important;
  transform:none !important;
  z-index:6 !important;
  background:#23465f !important;
  color:#fff !important;
}

/* Education: ensure the white type has a genuinely dark surface. */
.edu-dark {
  background:#152b3b !important;
  color:#fff !important;
}
.edu-dark .edu-intro { color:#dbe7ec !important; }

@media(max-width:900px){
  .hero-training-slide {
    background-image:url('training-hero-v45.webp') !important;
    background-size:100% auto !important;
    background-position:center center !important;
  }
  .hero-training-slide .hero-training-cta {
    left:24px !important;
    bottom:20px !important;
  }
}
@media(max-width:560px){
  /* Keep one consistent wide banner canvas; do not use the broken legacy mobile artwork. */
  .hero-training-slide {
    background-image:url('training-hero-v45.webp') !important;
    background-size:auto 100% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
  .hero-training-slide .hero-training-cta {
    left:18px !important;
    bottom:18px !important;
    min-height:46px;
    padding:11px 18px !important;
    font-size:11px !important;
  }
  .hero-video-overlay {
    background:linear-gradient(180deg,rgba(10,23,34,.30),rgba(10,23,34,.12)) !important;
  }
}

/* V46 — final consistency pass: training slide, knowledge stack, recovery accuracy */
/* Training uses the same content container and native .button styling as every other hero slide. */
.hero-training-slide {
  background-image:url('training-hero-v45.webp') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  background-color:#eaf2f6 !important;
}
.hero-training-slide::after { display:none !important; }
.hero-training-slide .container {
  position:relative;
  z-index:4;
  width:min(1180px, calc(100% - 40px));
  height:100%;
  margin-inline:auto;
  align-items:end !important;
}
.hero-training-actions {
  margin:0 0 24px 0 !important;
  justify-content:flex-start !important;
}
.hero-training-slide .hero-training-cta {
  position:static !important;
  display:inline-flex !important;
  transform:none !important;
  min-height:unset !important;
  padding:14px 20px !important;
  border-radius:8px !important;
  background:var(--blue-dark) !important;
  color:#fff !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.hero-training-slide .hero-training-cta:hover { background:#152b3b !important; }
/* The knowledge cards are a vertical reading sequence, not a 3-column strip. */
.knowledge-side {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
.knowledge-side .knowledge-mini {
  width:100%;
}
@media(max-width:900px){
  .knowledge-side { grid-template-columns:1fr !important; }
}
@media(max-width:560px){
  .knowledge-side { grid-template-columns:1fr !important; }
  .hero-training-slide {
    background-size:auto 100% !important;
    background-position:center center !important;
  }
  .hero-training-slide .container { width:calc(100% - 28px); }
  .hero-training-actions { margin-bottom:18px !important; }
  .hero-training-slide .hero-training-cta { padding:12px 18px !important; font-size:11px !important; }
}

/* V48 — mobile-first hero consistency and technology room visual */
/* All homepage hero slides share one fixed canvas and one CTA rhythm. */
.hero-carousel{
  height:407px !important;
  overflow:hidden !important;
}
.hero-carousel .hero-slide{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
}
.hero-carousel .hero-slide > .container{
  width:min(1180px, calc(100% - 40px)) !important;
  height:100% !important;
  margin-inline:auto !important;
}

/* Video: retain the image quality, lift the overlay and use the same blue as the photographic slides. */
.hero-video-slide .hero-video-overlay{
  background:linear-gradient(90deg,rgba(10,23,34,.20) 0%,rgba(10,23,34,.12) 48%,rgba(10,23,34,.04) 100%) !important;
}
.hero-video-slide .hero-content .hero-subtitle{
  color:#355a72 !important;
  text-shadow:0 1px 7px rgba(255,255,255,.45) !important;
}

/* Training: identical CTA dimensions and identical lower-left placement. */
.hero-training-slide{
  background-image:url('training-hero-v45.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#eaf2f6 !important;
}
.hero-training-slide .container{
  width:min(1180px, calc(100% - 40px)) !important;
  height:100% !important;
  margin-inline:auto !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
}
.hero-training-actions{
  margin:0 0 24px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.hero-training-slide .hero-training-cta{
  position:static !important;
  min-height:0 !important;
  padding:14px 20px !important;
  border:1px solid var(--blue-dark) !important;
  border-radius:8px !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  line-height:1.2 !important;
  background:var(--blue-dark) !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Technology hero: use the dedicated treatment-room visual, not the doctor/phone artwork. */
.page-hero-image[style*="technology-hero"]{
  background-image:url('assets/technology-hero-coolvity.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
}

@media(max-width:900px){
  .hero-carousel{height:440px !important;}
  .hero-carousel .hero-slide > .container{width:calc(100% - 32px) !important;}
  .hero-training-slide{background-size:cover !important;background-position:center center !important;}
  .hero-training-actions{margin-bottom:20px !important;}
}

@media(max-width:560px){
  /* Every slide remains the same mobile canvas. Artwork may crop, but no slide becomes wider/taller. */
  .hero-carousel{height:570px !important;}
  .hero-carousel .hero-slide > .container{width:calc(100% - 36px) !important;}
  .hero-training-slide{background-size:cover !important;background-position:center center !important;}
  .hero-training-slide .container{width:calc(100% - 36px) !important;}
  .hero-training-actions{margin:0 0 18px 0 !important;}
  .hero-training-slide .hero-training-cta{
    padding:14px 20px !important;
    font-size:11px !important;
    min-height:0 !important;
  }
  .hero-video-slide .hero-video-overlay{
    background:linear-gradient(180deg,rgba(10,23,34,.18) 0%,rgba(10,23,34,.08) 100%) !important;
  }
}

/* V49 — approved COOL EDUCATION hero + exact CTA rhythm across all slides */
.hero-carousel .hero-training-slide {
  background-image:url('training-hero-v49.webp') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  background-color:#eaf2f6 !important;
}
.hero-carousel .hero-training-slide .container {
  position:relative !important;
  height:100% !important;
  width:min(1180px, calc(100% - 40px)) !important;
  margin-inline:auto !important;
  display:flex !important;
  align-items:flex-end !important;
}
.hero-carousel .hero-training-actions {
  position:absolute !important;
  left:0 !important;
  bottom:24px !important;
  margin:0 !important;
  z-index:10 !important;
}
.hero-carousel .hero-training-slide .hero-training-cta {
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:140px !important;
  min-height:54px !important;
  padding:14px 20px !important;
  border:0 !important;
  border-radius:8px !important;
  background:var(--blue-dark) !important;
  color:#fff !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  transform:none !important;
}
@media(max-width:900px){
  .hero-carousel .hero-training-slide .container { width:calc(100% - 32px) !important; }
  .hero-carousel .hero-training-actions { bottom:20px !important; }
}
@media(max-width:560px){
  .hero-carousel .hero-training-slide {
    background-image:url('training-hero-v49-mobile.webp') !important;
    background-size:100% 100% !important;
    background-position:center center !important;
  }
  .hero-carousel .hero-training-slide .container { width:calc(100% - 36px) !important; }
  .hero-carousel .hero-training-actions { left:0 !important; bottom:18px !important; }
  .hero-carousel .hero-training-slide .hero-training-cta {
    min-width:140px !important;
    min-height:46px !important;
    padding:12px 18px !important;
    font-size:11px !important;
  }
}

/* V50 — unified homepage hero system
   One geometry for every slide: same canvas, same content gutter and same CTA anchor.
   The training slide is intentionally treated as a normal hero slide, not a separate layout. */
.hero-carousel .hero-slide > .container{
  position:relative !important;
  width:min(1180px, calc(100% - 40px)) !important;
  height:100% !important;
  margin-inline:auto !important;
}
.hero-carousel .hero-slide .hero-content{
  position:relative !important;
  z-index:2 !important;
  width:min(650px, 100%) !important;
  max-width:650px !important;
  padding-top:10px !important;
}
.hero-carousel .hero-slide .hero-actions{
  position:absolute !important;
  left:0 !important;
  bottom:24px !important;
  z-index:4 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
}
.hero-carousel .hero-slide .hero-actions .button,
.hero-training-slide .hero-training-cta{
  box-sizing:border-box !important;
  height:55px !important;
  min-height:55px !important;
  padding:14px 20px !important;
  border-radius:8px !important;
  border:1px solid var(--blue-dark) !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.hero-carousel .hero-slide .hero-actions .button-primary,
.hero-training-slide .hero-training-cta{
  background:var(--blue-dark) !important;
  color:#fff !important;
}
.hero-carousel .hero-slide .hero-actions .button-light{
  background:#fff !important;
  color:var(--blue-dark) !important;
}
.hero-training-slide{
  background-image:url('training-hero-v49.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.hero-training-slide::after{display:none !important;}
.hero-training-slide > .container{
  display:block !important;
}
.hero-training-actions{
  position:absolute !important;
  left:0 !important;
  bottom:24px !important;
  margin:0 !important;
}
.hero-training-slide .hero-training-cta{
  position:static !important;
  transform:none !important;
  box-shadow:none !important;
}
@media (max-width:900px){
  .hero-carousel{height:440px !important;}
  .hero-carousel .hero-slide > .container{width:calc(100% - 32px) !important;}
  .hero-carousel .hero-slide .hero-actions{left:0 !important;bottom:20px !important;}
  .hero-training-actions{left:0 !important;bottom:20px !important;}
}
@media (max-width:560px){
  .hero-carousel{height:570px !important;}
  .hero-carousel .hero-slide > .container{width:calc(100% - 36px) !important;}
  .hero-carousel .hero-slide .hero-actions{left:0 !important;bottom:18px !important;gap:10px !important;}
  .hero-training-actions{left:0 !important;bottom:18px !important;}
  .hero-carousel .hero-slide .hero-actions .button,
  .hero-training-slide .hero-training-cta{
    height:48px !important;
    min-height:48px !important;
    padding:12px 18px !important;
    font-size:11px !important;
  }
  .hero-training-slide{background-image:url('training-hero-v49-mobile.webp') !important;background-size:cover !important;background-position:center center !important;}
}


/* V51 — training hero rebuilt with the same HTML typography and CTA geometry as slides 1–3–5. */
.hero-carousel .hero-training-slide{
  background-image:url('training-hero-v51.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.hero-carousel .hero-training-slide::after{
  display:block !important;
  background:linear-gradient(90deg,rgba(247,246,242,.98) 0%,rgba(247,246,242,.94) 38%,rgba(247,246,242,.42) 66%,rgba(247,246,242,.06) 100%) !important;
}
.hero-carousel .hero-training-slide > .container{
  display:grid !important;
  align-items:center !important;
}
.hero-carousel .hero-training-slide .hero-content{
  width:min(650px,100%) !important;
  max-width:650px !important;
  padding-top:10px !important;
}
.hero-carousel .hero-training-slide .hero-actions{
  position:absolute !important;
  left:0 !important;
  bottom:24px !important;
  margin:0 !important;
}
.hero-carousel .hero-training-slide .hero-training-cta{
  position:static !important;
  height:55px !important;
  min-height:55px !important;
  padding:14px 20px !important;
  border-radius:8px !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  line-height:1.2 !important;
}
@media(max-width:560px){
  .hero-carousel .hero-training-slide{background-image:url('training-hero-v51-mobile.webp') !important;background-size:cover !important;background-position:center center !important;}
  .hero-carousel .hero-training-slide::after{background:linear-gradient(180deg,rgba(247,246,242,.97),rgba(247,246,242,.78) 54%,rgba(247,246,242,.24) 100%) !important;}
  .hero-carousel .hero-training-slide .hero-actions{left:0 !important;bottom:18px !important;}
}

/* V52 — homepage hero CTA alignment: move every CTA down ~20px while preserving identical geometry. */
.hero-carousel .hero-slide .hero-actions {
  transform: translateY(20px) !important;
}

/* Keep the adjustment stable on mobile as well. */
@media (max-width: 760px) {
  .hero-carousel .hero-slide .hero-actions {
    transform: translateY(20px) !important;
  }
}

/* V53 — final CTA vertical alignment across the homepage hero slider.
   All five slides use the same bottom anchor so the CTA sits lower without
   changing the hero canvas, typography or artwork. */
.hero-carousel .hero-slide .hero-actions {
  bottom: 4px !important;
}

.hero-carousel .hero-slide .hero-actions .button,
.hero-carousel .hero-training-slide .hero-training-cta {
  box-sizing: border-box !important;
  height: 55px !important;
  min-height: 55px !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .03em !important;
}

@media (max-width: 560px) {
  .hero-carousel .hero-slide .hero-actions {
    bottom: 4px !important;
  }
  .hero-carousel .hero-slide .hero-actions .button,
  .hero-carousel .hero-training-slide .hero-training-cta {
    height: 55px !important;
    min-height: 55px !important;
  }
}