/* ===========================================================
   ViRTUE - vrhandhygiene.com
   Stylesheet for the static rebuild.
   =========================================================== */

/* ----- Design tokens ----- */
:root {
  --color-primary: #64B8FD;
  --color-primary-dark: #64B8FD;
  --color-secondary: #4EFFAC;
  --color-dark: #191919;
  --color-text: #2a2a2a;
  --color-muted: #6b7280;
  --color-light: #FAFAFA;
  --color-border: #e5e7eb;
  --color-white: #FFFFFF;

  /* Body uses Poppins (sans), headings use Lora (serif). Both via Google Fonts. */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;

  --container-max: 1320px;
  --container-narrow: 880px;
  --container-wide: 1480px;
  --section-py: clamp(4rem, 8vw, 7rem);
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--color-dark); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: #070707;
  margin: 0 0 0.5em;
  letter-spacing: -0.027em;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 1em; }
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

/* ----- Layout primitives ----- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-py) 0; }
.section-light { background: var(--color-light); }
.section-dark { background: var(--color-dark); color: #d6d6d6; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-white); }
.section-dark a { color: var(--color-primary); }

.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-features { grid-template-columns: minmax(0, 460px) 1fr; align-items: center; gap: 3rem; }
/* Keep the GIF at its native 16:9 aspect — no upscaling, no crop artefacts.
   Text column is capped so the image column can soak up the remaining width. */
.grid-features > .media-frame { align-self: center; }
.grid-features > .media-frame img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-features { grid-template-columns: 1fr; gap: 2rem; }
}

.text-center { text-align: center; }
.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-muted);
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  gap: 24px;
}
.site-header__logo img { height: 32px; width: auto; }
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { flex-shrink: 0; max-width: none; }
.site-header__nav { display: flex; align-items: center; gap: 36px; flex: 1; }
.site-header__nav .lang-switch { margin-left: auto; }
.site-header__nav a {
  color: var(--color-dark);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.site-header__nav a:hover { color: var(--color-dark); }
.site-header__nav a.is-active { color: var(--color-dark); }
.lang-switch { display: flex; gap: 14px; align-items: center; }
.lang-switch a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.lang-switch a.is-active {
  color: var(--color-dark);
  opacity: 1;
  pointer-events: none;
}
.lang-switch a:hover:not(.is-active) {
  opacity: 1;
  color: var(--color-dark);
}
@media (max-width: 860px) {
  .site-header__nav { gap: 18px; }
  .site-header__nav a { font-size: 0.9rem; }
}
@media (max-width: 640px) {
  .site-header__nav .lang-switch { display: none; }
  .site-header__nav .lang-dropdown { display: block; }
  /* Override per-page paddings/gaps so mobile header sits flush left */
  .site-header__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 16px !important;
  }
  .site-header__nav {
    gap: 16px !important;
  }
  .site-header__nav .nav-link {
    white-space: nowrap;
    font-size: 0.9rem;
  }
}

/* Mobile language dropdown (shown only on narrow viewports via media query above) */
.lang-dropdown { display: none; position: relative; margin-left: auto; }
.lang-dropdown summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-dark);
  padding: 6px 4px;
}
.lang-dropdown summary::-webkit-details-marker { display: none; }
.lang-dropdown summary::marker { display: none; content: ""; }
.lang-dropdown summary svg {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}
.lang-dropdown[open] summary svg { transform: rotate(180deg); }
.lang-dropdown ul {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 6px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  min-width: 90px;
  z-index: 100;
}
.lang-dropdown li a {
  display: block;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lang-dropdown li a:hover {
  color: var(--color-dark);
  background: #f6f4ef;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn-secondary:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-steam {
  background: linear-gradient(135deg, #1b2838, #2a475e);
  color: var(--color-white);
  /* No border — the base .btn 2px transparent border was letting the
     steam-block's cyan radial glow bleed through on the curved edges,
     creating "stripes" left and right. */
  border: 0;
  padding: 18px 34px;
  font-size: 1.05rem;
}
.btn-steam:hover {
  background: linear-gradient(135deg, #2a475e, #64B8FD);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-steam svg { width: 22px; height: 22px; }

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  overflow: hidden;
  /* Gradient placeholder while Vimeo loads — matches the section below
     (germs section) so the visual transition stays smooth. */
  background: linear-gradient(135deg, #d4f0e8 0%, #b8d8e8 50%, #4f7fa8 100%);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.hero__video iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  border: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Brand-colored tint, matches the original WP hero overlay */
  background: linear-gradient(118deg, #64B8FD 15%, #4EFFAC 100%);
  opacity: 0.64;
  z-index: 1;
}
/* Subtle dark wash beneath the brand tint so white text stays readable
   on the brighter video frames. */
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  width: 100%;
  padding: 9rem 24px 7rem;
  margin: 0 auto;
  text-align: left;
}
.hero__intro {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: rgba(255,255,255,0.95);
  max-width: 560px;
  margin: 0 0 1.125rem;
  line-height: 1.55;
  font-weight: 400;
}
.hero__title {
  color: var(--color-white);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  line-height: 1.05;
  margin: 0 0 3.625rem;
  max-width: 880px;
}
.hero__brand {
  position: relative;
  display: inline-block;
  font-style: normal;
}
.hero__brand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 5px;
  background: #4EFFAC;
  border-radius: 2px;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* ----- Sections ----- */
.section-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.section-intro p { font-size: 1.15rem; color: var(--color-muted); }

/* ----- Feature list ----- */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 14px;
}
.feature-list li {
  position: relative;
  padding-left: 32px;
  line-height: 1.5;
  color: var(--color-text);
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Cards / experts ----- */
.expert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 860px) {
  .expert-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}
.expert {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.expert__photo {
  width: 140px; height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.25rem;
}
.expert h4 { margin-bottom: 0.25rem; }
.expert__org {
  font-size: 0.9rem;
  color: var(--color-dark);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.expert__role {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* ----- Image / video frames ----- */
.media-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-light);
}
.media-frame img { width: 100%; height: auto; display: block; }
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-dark);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----- Image row (no scrollbar; fits all images side by side) ----- */
.image-row {
  display: grid;
  gap: 1rem;
  width: 100%;
}
.image-row-3 { grid-template-columns: repeat(3, 1fr); }
.image-row-2 { grid-template-columns: repeat(2, 1fr); }
.image-row__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-light);
  aspect-ratio: 16 / 9;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.image-row__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.image-row__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.image-row__item:hover img { transform: scale(1.04); }
@media (max-width: 860px) {
  .image-row-3, .image-row-2 { grid-template-columns: 1fr; }
}

/* ----- Cross-fade slideshow (same screenshot, different states) ----- */
.crossfade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-dark);
}
.crossfade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  display: block;
}
.crossfade img.is-active { opacity: 1; }
/* First image visible by default before JS runs */
.crossfade img:first-child { opacity: 1; }
.crossfade.is-init img:first-child { opacity: 0; }
.crossfade.is-init img.is-active { opacity: 1; }

/* ----- Section: germs background with particle canvas + intro grid ----- */
.section-germs {
  position: relative;
  background: linear-gradient(135deg, #e8fbf3 0%, #dcecf8 50%, #cee0f0 100%);
  overflow: hidden;
}
.germs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* allow mouse to interact with particles */
  z-index: 0;
}
.section-germs > .container,
.section-germs > .container-narrow {
  position: relative;
  z-index: 1;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 4rem;
}
.intro-text { max-width: 580px; }
.intro-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-media img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(40, 90, 130, 0.18));
  /* slight floating motion */
  animation: floatHeadset 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes floatHeadset {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
/* Drop the desktop drop-shadow on smaller viewports — on a scaled-down
   Quest 3 image the 60px blur reads as a bluish halo and makes the
   transparent PNG background look filled. Mobile already inherits this
   via the layout block below; this query also catches tablet where the
   image stays in the desktop grid but is still small enough for the
   halo to be visible. */
@media (max-width: 1100px) {
  .intro-media img { filter: none; }
}
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .intro-text { max-width: none; }
  .intro-media img {
    max-width: 320px;
  }
}

/* ----- FAQ accordion ----- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
}
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.faq summary {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-dark);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  content: '−';
  transform: rotate(0deg);
}
.faq__body { padding: 1rem 0 0; color: var(--color-text); line-height: 1.7; }
.faq__body ul { padding-left: 1.25rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ----- Studies ----- */
.studies-group { margin-bottom: 3rem; }
.studies-group h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.study {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
}
.study:last-child { border-bottom: 1px solid var(--color-border); }
.study__date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.study__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}
.study__title a { color: var(--color-dark); }
.study__title a:hover { color: var(--color-primary-dark); }
.study__authors {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.study__institution {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-style: italic;
  line-height: 1.5;
}

/* ----- Steam CTA block ----- */
.steam-block {
  background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%);
  color: var(--color-white);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.steam-block::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(103, 193, 245, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.steam-block h2 { color: var(--color-white); position: relative; }
.steam-block p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin-left: auto; margin-right: auto;
  position: relative;
}
.steam-block .btn { position: relative; margin-top: 1rem; }
.steam-widget {
  position: relative;
  margin: 2rem auto 1rem;
  max-width: 646px;
  width: 100%;
}
.steam-widget iframe {
  display: block;
  width: 100%;
  max-width: 646px;
  height: 190px;
  border: 0;
  margin: 0 auto;
}

/* ----- Footer ----- */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
  font-size: 0.95rem;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}
.site-footer__logo img { height: 32px; margin-bottom: 1rem; }
.site-footer__about { max-width: 360px; line-height: 1.6; }
.site-footer__contact a {
  display: block;
  color: var(--color-primary);
  font-weight: 500;
  margin-top: 0.5rem;
}
.site-footer__col h5 {
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: 0.5rem; }
.site-footer__col a {
  color: rgba(255,255,255,0.7);
}
.site-footer__col a:hover { color: var(--color-white); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 2rem 24px 0;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
}

/* ----- Legal pages ----- */
.legal-page { padding: 4rem 0; }
.legal-page h1 { margin-bottom: 2rem; }
.legal-page h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal-page h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal-page p, .legal-page li { line-height: 1.7; }
.legal-page ul, .legal-page ol { padding-left: 1.5rem; }
.legal-page strong { color: var(--color-dark); }
.legal-page__back { margin-top: 3rem; }
.legal-page__back a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.legal-page__back a:hover { text-decoration: underline; }

/* ----- Misc ----- */
.divider {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 4rem 0;
}
.center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }

/* ===========================================================
   Animations
   =========================================================== */

/* Hero copy: fade up on first paint */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero__intro    { animation: heroFadeUp 0.7s ease-out 0.10s both; }
.hero__title    { animation: heroFadeUp 0.8s ease-out 0.25s both; }
.hero__ctas     { animation: heroFadeUp 0.8s ease-out 0.45s both; }

/* Scroll-reveal pattern: elements with .reveal start hidden,
   IntersectionObserver adds .is-visible to play the entrance. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger children of .reveal-stagger when they themselves carry .reveal */
.reveal-stagger > .reveal:nth-child(1).is-visible { transition-delay: 0.00s; }
.reveal-stagger > .reveal:nth-child(2).is-visible { transition-delay: 0.10s; }
.reveal-stagger > .reveal:nth-child(3).is-visible { transition-delay: 0.20s; }
.reveal-stagger > .reveal:nth-child(4).is-visible { transition-delay: 0.30s; }
.reveal-stagger > .reveal:nth-child(5).is-visible { transition-delay: 0.40s; }
.reveal-stagger > .reveal:nth-child(6).is-visible { transition-delay: 0.50s; }

/* Card hover-lift (experts) */
.expert {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.expert:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* Studies: subtle hover affordance */
.study { transition: background 0.2s ease; }
.study:hover { background: rgba(100, 184, 253, 0.04); }
.study__title a { transition: color 0.2s ease; }

/* Feature-list checkmark pulse on hover */
.feature-list li::before {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-list li:hover::before {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(100, 184, 253, 0.18);
}

/* Steam block: subtle gradient shimmer */
@keyframes steamGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  50%      { transform: translate(-30px, 20px) scale(1.08); opacity: 0.75; }
}
.steam-block::before {
  animation: steamGlow 9s ease-in-out infinite;
}

/* Buttons: gentle "grow" on hover (matches Elementor's animation-grow) */
.btn { transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; }
.btn:hover { transform: translateY(-2px) scale(1.02); }

/* Back-to-top button */
.back-to-top {
  position: fixed;
  right: clamp(20px, 3vw, 32px);
  bottom: clamp(20px, 3vw, 32px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, box-shadow 0.25s ease;
  z-index: 200;
  padding: 0;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  transform: translateY(0) scale(1.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.1);
}
.back-to-top:focus-visible {
  outline: 2px solid #64B8FD;
  outline-offset: 4px;
}
.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* FAQ open animation */
.faq details > *:not(summary) {
  animation: faqOpen 0.35s ease-out;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ----- Mobile full-bleed elements -----
   On mobile, the Features WebM, the Vimeo trailer, the patient-visit
   slideshow, the Visualization crossfade image and every FAQ box
   break out of the container's side padding and stretch to the
   viewport edges. Using 100vw + (50% - 50vw) negative margins so the
   rule doesn't have to know the parent's padding; combined with
   !important to win against any inline cached cascade entries. */
@media (max-width: 860px) {
  body main #features .features-video,
  body main .trailer-section .trailer-video,
  body main .patient-slideshow,
  body main .visualization-media,
  body main #faq .faq details {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }
  /* Trailer iframe wrapper must also clear the .video-embed
     aspect-ratio hack (padding-bottom: 56.25%, height: 0) so the
     box correctly sizes itself to 16:9 of the new wider width and
     not 56.25% of the container's content width (which would leave
     the Vimeo player letterboxed black bars left and right). */
  body main .video-embed.trailer-video {
    padding-bottom: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}

/* ----- Mobile: hero text up, Steam CTA pushed to the bottom -----
   Stretch .hero__content to the full hero height and let the title
   auto-margin push the CTA row to the bottom edge. The intro + h1
   end up just below the top padding instead of being centred. */
@media (max-width: 860px) {
  .hero { align-items: stretch; }
  .hero__content {
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .hero__title { margin-bottom: auto; }
}

/* ----- Mobile: gradient flush with the Features section -----
   The intro section now ends 100px below the Quest 3 image (a band
   of gradient under the headset), and the Features section that
   follows starts with no top padding so the WebM "germ animation"
   sits immediately under the gradient with no white gap. */
@media (max-width: 860px) {
  .section-germs { padding-bottom: 100px; }
  body main #features { padding-top: 0; }
}

/* ----- Mobile: Trailer section pure white, no card, tighter padding -----
   The selectors carry an extra body/main prefix so they beat the
   inline-style `.trailer-section { background: #F2F2F2 }` rule on
   each homepage. Trailer container and video embed are explicitly
   white so the trailer reads as flat on the page. The section also
   gets 20% less top/bottom padding so the trailer hugs the FAQ
   block above and the Patient Visit block below more tightly.
   !important is used on the visible "card" properties because some
   browsers persistently cache the original .video-embed look. */
@media (max-width: 860px) {
  body main .trailer-section {
    background: #fff;
    padding-top: calc(var(--section-py) * 0.8);
    padding-bottom: calc(var(--section-py) * 0.8);
  }
  body main .video-embed.trailer-video {
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ----- Mobile: Hero title scaled up another 20% -----
   The hero h1 has its own clamp override on each homepage
   (.hero__title font-size: clamp(2.5rem, 8vw, 90px)). On mobile we
   bump it 20% higher so the headline matches the bolder feel of
   the rest of the page. Desktop is unchanged because the max-cap
   (108px) only kicks in on narrow viewports where the vw value
   would otherwise be too small. */
@media (max-width: 860px) {
  body main .hero__title {
    font-size: clamp(3rem, 9.6vw, 108px);
  }
}

/* ----- Carousel arrow buttons: match the back-to-top button -----
   At every viewport size the patient-visit slideshow arrows now use
   the same translucent white background (0.6 opacity) as the global
   back-to-top circle. On mobile both buttons are also forced to the
   same 52px square footprint so they read as a single button
   family. The :hover override (solid white) on the arrows stays. */
body main .patient-slideshow__arrow {
  background: rgba(255, 255, 255, 0.4);
}
@media (max-width: 860px) {
  body main .patient-slideshow__arrow {
    width: 52px;
    height: 52px;
  }
  body main .patient-slideshow__arrow--prev { left: 16px; }
  body main .patient-slideshow__arrow--next { right: 16px; }
}

/* ----- Section H2 typography (about-us etc.) -----
   Homepages set their own h2 size in the inline tweaks block
   (clamp(2.1rem, 7.2vw, 58px), Lora 400). About-us pages don't,
   so their section H2s like "Wie sich ViRTUE entwickelte" / "How
   ViRTUE evolved" / "Como o ViRTUE evoluiu" were stuck at the
   base h2 size (~44px, weight 600), reading smaller and bolder
   than the equivalent homepage headings.
   This rule lifts every section H2 inside <main> to match the
   homepage style, while explicitly excluding the legal page H2s
   (Impressum/Privacy/Terms sub-sections) so they stay small. */
body main section:not(.legal-page) h2 {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 7.2vw, 58px);
  line-height: 1.2;
  letter-spacing: -0.027em;
}

/* ----- Primary-blue accent underline -----
   Mirror of .experts-accent (mint green) but in the brand's
   primary blue. Used in the Simulation section H2 to highlight
   the "patient visit" term across all three languages. */
.primary-accent {
  display: inline;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 4px;
  text-underline-offset: 0.05em;
  text-decoration-skip-ink: none;
}

/* ----- Visualization text: kill the last paragraph's bottom margin -----
   Every <p> in .visualization-text carries margin-bottom: 1.25rem
   from the homepage inline tweak. On the last paragraph that margin
   extends the column's box ~20px past the visible end of the
   running text. When the grid aligns the image to the bottom of
   the text column (align-items: end at tablet widths), the image
   then sits 20px below where the text *looks* to end. Zeroing the
   last-child bottom margin keeps the box snug around the visible
   text so the image bottom and the text bottom line up exactly. */
body main .visualization-text > *:last-child {
  margin-bottom: 0;
}

/* ----- Tablet: visualization-grid image bottom-aligned to text -----
   On tablet widths (861-1100px) the visualization section's two
   columns get noticeably different heights — the running text in
   the right column wraps over a few more lines, and a vertically
   centred image leaves an awkward gap below it. Switching the grid
   alignment from center to end pins the bottom of the crossfade
   image to the bottom of the text column. Outside this range
   (mobile stacks the grid; desktop columns are roughly equal
   height) the default centered look is kept. */
@media (min-width: 861px) and (max-width: 1100px) {
  body main .visualization-grid {
    align-items: end;
  }
}

/* ----- Mobile: lift the hero Steam CTA 50px and tighten Steam section -----
   With the hero column already pushing the CTAs to the bottom via
   .hero__title margin: auto, an extra 50px bottom margin on the
   CTA row lifts the "Auf Steam kaufen" button 50px higher.
   Separately, the #steam section's outer vertical padding goes to 0
   so the gradient block sits flush against the FAQ above and the
   Studies below. */
@media (max-width: 860px) {
  body main .hero__ctas {
    margin-bottom: 50px;
  }
  body main #steam.section {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ----- Mobile: Steam CTA section full-width, widget scaled inside -----
   The Steam-block gradient now extends from one viewport edge to the
   other. Inside the block we keep the same horizontal padding as the
   surrounding text columns, and the Steam widget iframe is scaled
   with transform so the native 646x190 widget always fits the
   available width without an internal scrollbar or visible clipping. */
@media (max-width: 860px) {
  #steam .steam-block {
    margin-left: calc(-1 * clamp(24px, 8vw, 120px));
    margin-right: calc(-1 * clamp(24px, 8vw, 120px));
    padding-left: clamp(24px, 8vw, 120px);
    padding-right: clamp(24px, 8vw, 120px);
  }
  body main #steam .steam-widget {
    margin-left: auto;
    margin-right: auto;
    max-width: 646px;
    width: 100%;
    aspect-ratio: 646 / 190;
    overflow: hidden;
    position: relative;
  }
  body main #steam .steam-widget iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 646px;
    height: 190px;
    max-width: none;
    transform-origin: top left;
    transform: scale(min(1, calc((100vw - 2 * clamp(24px, 8vw, 120px)) / 646px)));
  }
}

/* About Us mobile: stacked layout — center the hand icon and the
   Ateo Website button so the centered text column looks balanced. */
@media (max-width: 900px) {
  body main .about-intro__icon {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
  body main .about-intro__text p:has(.btn-pill) {
    text-align: center;
  }
}

/* About Us mobile: timeline photos break out to viewport edges when
   the timeline collapses to a single column at <=600px. */
@media (max-width: 600px) {
  body main .timeline__media {
    margin-left: calc(-1 * clamp(24px, 8vw, 120px));
    margin-right: calc(-1 * clamp(24px, 8vw, 120px));
    width: auto;
    max-width: none;
    border-radius: 0;
  }
}