/* Codivium Section 4 Coverflow — consolidated from v49-v62 patches
   Fixes: CSS-01 isolation removed, CSS-04 dead rules removed, CSS-06 104vw fixed
   Dead v49 canonical transforms removed (masked by v52+) */

/* ===== Section 4 interactive coverflow module v49 ===== */
body[data-page="landing"] .cfx-s4.cfx-s4--interactive{
  position: relative;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.045), transparent 30%),
    linear-gradient(180deg, rgba(4,5,9,0.98), rgba(2,3,6,1));
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-spacer{
  position: relative;
  min-height: 250vh;
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-sticky{
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-shell{
  width: min(1720px, 100%);
  margin: 0 auto;
  padding: 34px 0 72px;
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-stage-wrap{
  position: relative;
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 28px 0 56px;
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-stage{
  position: relative;
  width: 100%;
  height: min(84vh, 920px);
  min-height: 680px;
  perspective: 2400px;
  perspective-origin: 50% 46%;
  transform-style: flat; /* flat: cards sorted by z-index, not 3D depth — prevents card 0 obscuring card 1 during scroll transition */
  overflow: visible;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 56%, rgba(255,255,255,0.035), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card{
  position: absolute;
  inset: 0;
  width: min(76vw, 1080px);
  height: min(72vh, 800px);
  margin: auto;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  pointer-events: none;
  transition:
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 380ms ease,
    filter 380ms ease;
  z-index: 1;
  opacity: 0.22;
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card__inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(420px, 1.08fr);
  gap: 26px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.10), transparent 28%),
    linear-gradient(180deg, rgba(15,20,33,0.95), rgba(8,12,20,0.98));
  box-shadow:
    0 36px 96px rgba(0,0,0,0.44),
    0 14px 34px rgba(0,0,0,0.20);
  overflow: hidden;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-box-reflect: below 10px linear-gradient(
    to bottom,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.07) 18%,
    rgba(255,255,255,0.02) 34%,
    rgba(255,255,255,0.00) 64%
  );
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card__inner::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 28%);
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card::after{
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -44px;
  height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.05) 38%,
      rgba(255,255,255,0.00) 72%);
  transform: perspective(900px) rotateX(80deg) scaleX(0.96);
  filter: blur(14px);
  pointer-events: none;
  opacity: 0.06;
  transition: opacity 380ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Visible-by-default first paint */
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card:first-child{
  opacity: 1;
  z-index: 4;
  pointer-events: auto;
  transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-copy{
  padding: 10px 4px 10px 4px;
  color: rgba(245,245,252,0.96);
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-copy h2{
  font-size: clamp(34px, 4vw, 56px);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-copy p{
  font-size: clamp(16px, 1.32vw, 20px);
  line-height: 1.65;
  margin: 0 0 10px;
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-eyebrow{
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,213,138,0.98);
  background: rgba(246,213,138,0.08);
  border: 1px solid rgba(246,213,138,0.14);
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-gap{ margin-top: 12px; }
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-muted{ color: rgba(245,245,252,0.76); }
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-bullets{
  margin: 16px 0 0;
  padding-left: 1.15rem;
  color: rgba(245,245,252,0.90);
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-bullets li{
  margin: 0 0 10px;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.55;
}

body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-media{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-image{
  width: 100%;
  max-width: 760px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.42),
    0 12px 24px rgba(0,0,0,0.14);
}
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-image--final{ max-width: 640px; }
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-image picture,
body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-image img{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1100px){
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-shell{ padding-bottom: 60px; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-stage{ min-height: 620px; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card{ width: min(86vw, 1020px); }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-copy{ order: 2; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-media{ order: 1; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card.is-prev{
    transform: translateX(-23%) translateZ(-120px) rotateY(28deg) scale(0.82) !important;
  }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card.is-next{
    transform: translateX(23%) translateZ(-120px) rotateY(-28deg) scale(0.82) !important;
  }
}

@media (max-width: 760px){
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-spacer{ min-height: 210vh; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-shell{ padding-inline: 10px; padding-bottom: 40px; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-stage{
    min-height: 560px;
    height: min(76vh, 720px);
  }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card{
    width: min(92vw, 760px);
    height: min(72vh, 680px);
  }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card__inner{
    padding: 16px;
    border-radius: 24px;
  }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-copy h2{ font-size: clamp(28px, 8vw, 40px); }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-copy p{ font-size: 15px; }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-bullets li{ font-size: 14px; }

  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card.is-prev,
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card.is-next{
    opacity: 0.84 !important;
  }
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card.is-far-left,
  body[data-page="landing"] .cfx-s4.cfx-s4--interactive .cfx-s4-card.is-far-right{
    opacity: 0.04 !important;
  }
}


/* ===== Section 4 width/stage rescue v52 ===== */
body[data-page="landing"] #showcaseCoverflow,
body[data-page="landing"] .cfx-s4{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  align-self: auto !important;
}

body[data-page="landing"] .cfx-s4-spacer,
body[data-page="landing"] .cfx-s4-sticky,
body[data-page="landing"] .cfx-s4-shell,
body[data-page="landing"] .cfx-s4-stage-wrap{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
}

body[data-page="landing"] .cfx-s4-shell{
  max-width: 1720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-page="landing"] .cfx-s4-stage-wrap{
  width: min(1600px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-page="landing"] .cfx-s4-stage{
  display: block !important;
  width: min(1600px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  min-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body[data-page="landing"] .cfx-s4-card{
  inset: 0 !important;
  margin: auto !important;
  transform-origin: 50% 50% !important;
}

body[data-page="landing"] .cfx-s4-card.is-active{
  transform: translateX(0) translateZ(0) rotateY(0deg) scale(1) !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev{
  transform: translateX(-30%) translateZ(-150px) rotateY(34deg) scale(0.86) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next{
  transform: translateX(30%) translateZ(-150px) rotateY(-34deg) scale(0.86) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left{
  transform: translateX(-48%) translateZ(-280px) rotateY(42deg) scale(0.68) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right{
  transform: translateX(48%) translateZ(-280px) rotateY(-42deg) scale(0.68) !important;
}

@media (max-width: 760px){
  body[data-page="landing"] .cfx-s4-stage-wrap,
  body[data-page="landing"] .cfx-s4-stage{
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}


/* ===== Theme overrides: black ===== */

/* Section 4 theme and styling changes */
body[data-page="landing"] #showcaseCoverflow,
body[data-page="landing"] .cfx-s4.cfx-s4--interactive {
  background: linear-gradient(180deg, rgba(0,0,0,1), rgba(8,8,8,1)) !important;
}

body[data-page="landing"] .cfx-s4-card {
  width: min(96vw, 1512px) !important;
}

body[data-page="landing"] .cfx-s4-card__inner {
  grid-template-columns: minmax(320px, 0.74fr) minmax(620px, 1.26fr) !important;
  gap: 22px !important;
  border-radius: 0 !important;
}

body[data-page="landing"] .cfx-s4-image,
body[data-page="landing"] .cfx-s4-image--final,
body[data-page="landing"] .cfx-s4-card__inner,
body[data-page="landing"] .cfx-s4-image picture,
body[data-page="landing"] .cfx-s4-image img {
  border-radius: 0 !important;
}

body[data-page="landing"] .cfx-s4-image {
  max-width: 980px !important;
}

body[data-page="landing"] .cfx-s4-image--final {
  max-width: 860px !important;
}

body[data-page="landing"] .cfx-s4-copy p,
body[data-page="landing"] .cfx-s4-copy li,
body[data-page="landing"] .cfx-s4-muted,
body[data-page="landing"] .cfx-s4-gap {
  font-family: "Times New Roman", Times, serif !important;
  font-size: clamp(14px, 1.08vw, 17px) !important;
  line-height: 1.58 !important;
}

body[data-page="landing"] .cfx-s4-copy strong,
body[data-page="landing"] .cfx-s4-copy em {
  font-family: "Times New Roman", Times, serif !important;
}

body[data-page="landing"] .cfx-s4-eyebrow {
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.12em !important;
  border-radius: 0 !important;
}

@media (max-width: 1100px) {
  body[data-page="landing"] .cfx-s4-card {
    width: min(94vw, 1380px) !important;
  }
  body[data-page="landing"] .cfx-s4-card__inner {
    grid-template-columns: 1fr !important;
  }
  body[data-page="landing"] .cfx-s4-image {
    max-width: 100% !important;
  }
}


/* ===== Section 4 premium enhancements v54 ===== */

/* 1) Flat/active card fully opaque for readability */
body[data-page="landing"] .cfx-s4-card.is-active{
  opacity: 1 !important;
}
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(180deg, rgba(15,20,33,1), rgba(8,12,20,1)) !important;
}

/* 3) Raised border thicker */
body[data-page="landing"] .cfx-s4-card__inner{
  border-width: 2px !important;
}

/* Soft halo behind the active card */
body[data-page="landing"] .cfx-s4-card::before{
  content: "";
  position: absolute;
  inset: 10% 12%;
  border-radius: 999px;
  background: radial-gradient(circle at center,
    rgba(246,213,138,0.18) 0%,
    rgba(246,213,138,0.08) 28%,
    rgba(246,213,138,0.00) 68%);
  filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 540ms ease, transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(0.92);
}
body[data-page="landing"] .cfx-s4-card.is-active::before{
  opacity: 0.72;
  transform: scale(1);
}
body[data-page="landing"] .cfx-s4-card.is-prev::before,
body[data-page="landing"] .cfx-s4-card.is-next::before{
  opacity: 0.25;
}

/* subtle parallax between image and text layers */
body[data-page="landing"] .cfx-s4-copy,
body[data-page="landing"] .cfx-s4-media,
body[data-page="landing"] .cfx-s4-image{
  transition:
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 420ms ease,
    filter 420ms ease,
    box-shadow 520ms ease;
  will-change: transform, opacity, filter;
}
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-copy{
  transform: translate3d(0, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-media{
  transform: translate3d(0, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-copy{
  transform: translate3d(16px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-media{
  transform: translate3d(-14px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-copy{
  transform: translate3d(-16px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-media{
  transform: translate3d(14px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-copy{
  transform: translate3d(22px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-media{
  transform: translate3d(-20px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-copy{
  transform: translate3d(-22px, 0, 0);
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-media{
  transform: translate3d(20px, 0, 0);
}

/* depth-aware shadow shift during flips */
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner{
  box-shadow:
    0 42px 108px rgba(0,0,0,0.48),
    0 18px 42px rgba(0,0,0,0.22);
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-card__inner,
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-card__inner{
  box-shadow:
    0 28px 72px rgba(0,0,0,0.38),
    0 12px 24px rgba(0,0,0,0.16);
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-card__inner,
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-card__inner{
  box-shadow:
    0 18px 42px rgba(0,0,0,0.24),
    0 8px 16px rgba(0,0,0,0.10);
}

/* edge glint/specular highlight on activation */
body[data-page="landing"] .cfx-s4-card__inner::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24%;
  left: -30%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.12) 48%,
    rgba(255,255,255,0.00) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner::after{
  animation: cfxGlint 1400ms ease 1;
}
@keyframes cfxGlint{
  0%{ left:-32%; opacity:0; }
  18%{ opacity:0.42; }
  55%{ opacity:0.24; }
  100%{ left:108%; opacity:0; }
}

/* stretch/shimmer in reflection during movement */
body[data-page="landing"] .cfx-s4-card::after{
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 420ms ease;
}
body[data-page="landing"] .cfx-s4-card.is-active::after{
  transform: perspective(980px) rotateX(80deg) scaleX(1.02);
  filter: blur(16px);
}
body[data-page="landing"] .cfx-s4-card.is-prev::after,
body[data-page="landing"] .cfx-s4-card.is-next::after{
  transform: perspective(980px) rotateX(80deg) scaleX(0.88);
  filter: blur(14px);
}
body[data-page="landing"] .cfx-s4-card.is-far-left::after,
body[data-page="landing"] .cfx-s4-card.is-far-right::after{
  transform: perspective(980px) rotateX(80deg) scaleX(0.76);
  filter: blur(12px);
}

/* weightier inertial easing */
body[data-page="landing"] .cfx-s4-card{
  transition:
    transform 760ms cubic-bezier(0.16, 0.84, 0.24, 1),
    opacity 420ms ease,
    filter 420ms ease !important;
}
body[data-page="landing"] .cfx-s4-card__inner{
  transition:
    transform 760ms cubic-bezier(0.16, 0.84, 0.24, 1),
    opacity 420ms ease,
    filter 420ms ease,
    box-shadow 620ms ease,
    border-color 420ms ease,
    background-color 420ms ease !important;
}

/* step progress indicator tied to each flip */
body[data-page="landing"] .cfx-s4-stage::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(420px, 42%);
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  pointer-events: none;
}
body[data-page="landing"] .cfx-s4-stage::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  height: 4px;
  width: min(420px, 42%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246,213,138,0.96), rgba(255,192,90,0.86));
  transform-origin: left center;
  pointer-events: none;
  z-index: 3;
}

/* progress scale states */


/* ===== Section 4 spacing/glass/parallax tuning v55 ===== */

/* 1) More gap between active card and side cards */
body[data-page="landing"] .cfx-s4-card.is-prev{
  transform: translateX(-36%) translateZ(-150px) rotateY(34deg) scale(0.84) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next{
  transform: translateX(36%) translateZ(-150px) rotateY(-34deg) scale(0.84) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left{
  transform: translateX(-58%) translateZ(-300px) rotateY(42deg) scale(0.64) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right{
  transform: translateX(58%) translateZ(-300px) rotateY(-42deg) scale(0.64) !important;
}

@media (max-width: 1100px){
  body[data-page="landing"] .cfx-s4-card.is-prev{
    transform: translateX(-28%) translateZ(-130px) rotateY(28deg) scale(0.80) !important;
  }
  body[data-page="landing"] .cfx-s4-card.is-next{
    transform: translateX(28%) translateZ(-130px) rotateY(-28deg) scale(0.80) !important;
  }
}

@media (max-width: 760px){
  body[data-page="landing"] .cfx-s4-card.is-prev{
    transform: translateX(-22%) translateZ(-105px) rotateY(24deg) scale(0.78) !important;
  }
  body[data-page="landing"] .cfx-s4-card.is-next{
    transform: translateX(22%) translateZ(-105px) rotateY(-24deg) scale(0.78) !important;
  }
}

/* 2) Slightly stronger glass surface */
body[data-page="landing"] .cfx-s4-card__inner{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.045)),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.16), transparent 30%),
    linear-gradient(180deg, rgba(15,20,33,1), rgba(8,12,20,1)) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

body[data-page="landing"] .cfx-s4-card__inner::before{
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 28%) !important;
}

body[data-page="landing"] .cfx-s4-card.is-active::after{
  opacity: 0.28 !important;
  transform: perspective(980px) rotateX(80deg) scaleX(1.05) !important;
  filter: blur(17px) !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev::after,
body[data-page="landing"] .cfx-s4-card.is-next::after{
  opacity: 0.17 !important;
}

/* 3) Stronger parallax separation */
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-copy{
  transform: translate3d(28px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-media{
  transform: translate3d(-26px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-copy{
  transform: translate3d(-28px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-media{
  transform: translate3d(26px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-copy{
  transform: translate3d(38px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-media{
  transform: translate3d(-34px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-copy{
  transform: translate3d(-38px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-media{
  transform: translate3d(34px, 0, 0) !important;
}


/* ===== Section 4 active opacity fix v56 ===== */

/* Root cause:
   The active card wrapper was opacity:1, but the active card shell still used
   glass/translucent layers + blur, which made the center card read as partially
   transparent against overlapping side cards.
   Fix:
   - make the active shell background fully opaque
   - remove active-state backdrop blur
   - keep the side-card glass effect only on non-active cards
*/

body[data-page="landing"] .cfx-s4-card.is-active{
  opacity: 1 !important;
}

body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner{
  background:
    linear-gradient(180deg, rgb(34, 38, 50), rgb(18, 22, 32)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner::before{
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 28%) !important;
}

body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-copy,
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-copy p,
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-copy li{
  opacity: 1 !important;
}

body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-image,
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-media{
  opacity: 1 !important;
}


/* ===== Section 4 stacking fix v57 ===== */
/* Ensure active card is visually in front of side cards and shells do not bleed over it */
/* Note: transform-style is intentionally 'flat' on the stage so CSS z-index controls
   card stacking order during scroll transitions. The perspective on the stage still
   provides 3D depth for each card's rotateY/translateZ transforms. */
body[data-page="landing"] .cfx-s4-card{
  transform-style: flat;
}
body[data-page="landing"] .cfx-s4-card.is-active{
  z-index: 20 !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev,
body[data-page="landing"] .cfx-s4-card.is-next{
  z-index: 10 !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left,
body[data-page="landing"] .cfx-s4-card.is-far-right{
  z-index: 2 !important;
}
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner{
  position: relative !important;
  z-index: 30 !important;
  box-shadow:
    0 52px 124px rgba(0,0,0,0.52),
    0 22px 48px rgba(0,0,0,0.24) !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-card__inner,
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-card__inner{
  z-index: 10 !important;
}


/* ===== Section 4 dark-theme card palette v57 ===== */
body[data-page="landing"] .cfx-s4-card__inner{
  background:
    linear-gradient(180deg, rgb(248,245,239), rgb(240,236,229)) !important;
  border-color: rgba(60, 60, 90, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="landing"] .cfx-s4-card__inner::before{
  background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.06) 28%) !important;
}
body[data-page="landing"] .cfx-s4-card.is-active .cfx-s4-card__inner{
  background:
    linear-gradient(180deg, rgb(250,247,242), rgb(242,238,231)) !important;
}
body[data-page="landing"] .cfx-s4-copy,
body[data-page="landing"] .cfx-s4-copy h2,
body[data-page="landing"] .cfx-s4-copy p,
body[data-page="landing"] .cfx-s4-copy li,
body[data-page="landing"] .cfx-s4-muted{
  color: rgb(30, 30, 70) !important;
}
body[data-page="landing"] .cfx-s4-eyebrow{
  color: rgb(30, 30, 70) !important;
  background: rgba(30, 30, 70, 0.06) !important;
  border-color: rgba(30, 30, 70, 0.14) !important;
}
body[data-page="landing"] .cfx-s4-stage::after{
  background: rgba(30, 30, 70, 0.10) !important;
}


/* ===== Section 4 intro card v58 ===== */
body[data-page="landing"] .cfx-s4-card__inner--title{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body[data-page="landing"] .cfx-s4-titleOnly{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
body[data-page="landing"] .cfx-s4-titleOnly__text{
  width: 70%;
  max-width: 70%;
  font-family: "Cinzel", serif !important;
  font-size: clamp(46px, 4.8vw, 86px) !important;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
body[data-page="landing"] .cfx-s4-card__inner--title .cfx-s4-copy,
body[data-page="landing"] .cfx-s4-card__inner--title .cfx-s4-media{
  display: none !important;
}

/* 6-card progress scale states */
body[data-page="landing"] .cfx-s4-stage[data-step="0"]::before{
  transform: translateX(-50%) scaleX(0.1667) !important;
}
body[data-page="landing"] .cfx-s4-stage[data-step="1"]::before{
  transform: translateX(-50%) scaleX(0.3334) !important;
}
body[data-page="landing"] .cfx-s4-stage[data-step="2"]::before{
  transform: translateX(-50%) scaleX(0.5001) !important;
}
body[data-page="landing"] .cfx-s4-stage[data-step="3"]::before{
  transform: translateX(-50%) scaleX(0.6668) !important;
}
body[data-page="landing"] .cfx-s4-stage[data-step="4"]::before{
  transform: translateX(-50%) scaleX(0.8335) !important;
}
body[data-page="landing"] .cfx-s4-stage[data-step="5"]::before{
  transform: translateX(-50%) scaleX(1) !important;
}


/* ===== Section 4 intro card typography tuning v59 ===== */
body[data-page="landing"] .cfx-s4-titleOnly__text{
  color: rgb(40, 40, 80) !important;
  font-size: clamp(34px, 3.4vw, 58px) !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: 92% !important;
}


/* ===== Section 4 intro bold + parallax boost v60 ===== */
body[data-page="landing"] .cfx-s4-titleOnly__text{
  font-weight: 700 !important;
}

/* Increase parallax effect by ~40% from v55 values */
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-copy{
  transform: translate3d(39px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-media{
  transform: translate3d(-36px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-copy{
  transform: translate3d(-39px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-media{
  transform: translate3d(36px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-copy{
  transform: translate3d(53px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-media{
  transform: translate3d(-48px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-copy{
  transform: translate3d(-53px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-media{
  transform: translate3d(48px, 0, 0) !important;
}


/* ===== Section 4 second-card image enlargement v61 ===== */
/* Second card = first content card after intro card */
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-card__inner{
  grid-template-columns: minmax(280px, 0.58fr) minmax(760px, 1.42fr) !important;
  gap: 18px !important;
}
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image{
  max-width: 1180px !important;
}
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-media{
  align-items: stretch !important;
}
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image picture,
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image img{
  width: 100% !important;
  height: auto !important;
}
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy p,
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy li{
  font-size: clamp(13px, 0.98vw, 16px) !important;
  line-height: 1.48 !important;
}
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy h2{
  font-size: clamp(30px, 3.2vw, 48px) !important;
}
@media (max-width: 1100px){
  body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-card__inner{
    grid-template-columns: 1fr !important;
  }
  body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image{
    max-width: 100% !important;
  }
}


/* ===== Section 4 title weight + second card width/image rebalance v62 ===== */

/* 1) Make all Section 4 titles non-bold, including intro card */
body[data-page="landing"] .cfx-s4-copy h2,
body[data-page="landing"] .cfx-s4-titleOnly__text{
  font-weight: 400 !important;
}

/* 2) Rebalance second card geometry so the enlarged screenshot can occupy more of the card naturally */
body[data-page="landing"] .cfx-s4-card[data-index="1"]{
  width: min(100vw, 1660px) !important;
}

body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-card__inner{
  grid-template-columns: minmax(240px, 0.46fr) minmax(960px, 1.54fr) !important;
  gap: 14px !important;
  padding-right: 14px !important;
}

body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-media{
  align-items: center !important;
  justify-content: center !important;
}

body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image{
  width: 100% !important;
  max-width: 1320px !important;
}

body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image picture,
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Tighten copy slightly more so the visual balance favors the screenshot */
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy{
  padding-right: 0 !important;
}

body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy h2{
  font-size: clamp(28px, 2.8vw, 44px) !important;
}

body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy p,
body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-copy li{
  font-size: clamp(12.5px, 0.92vw, 15px) !important;
  line-height: 1.42 !important;
}

@media (max-width: 1400px){
  body[data-page="landing"] .cfx-s4-card[data-index="1"]{
    width: min(98vw, 1480px) !important;
  }
  body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-card__inner{
    grid-template-columns: minmax(230px, 0.52fr) minmax(760px, 1.48fr) !important;
  }
  body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image{
    max-width: 1120px !important;
  }
}

@media (max-width: 1100px){
  body[data-page="landing"] .cfx-s4-card[data-index="1"]{
    width: min(94vw, 1380px) !important;
  }
  body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-card__inner{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body[data-page="landing"] .cfx-s4-card[data-index="1"] .cfx-s4-image{
    max-width: 100% !important;
  }
}

/* ===== Accessibility: reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  body[data-page="landing"] .cfx-s4-card,
  body[data-page="landing"] .cfx-s4-card__inner,
  body[data-page="landing"] .cfx-s4-copy,
  body[data-page="landing"] .cfx-s4-media,
  body[data-page="landing"] .cfx-s4-image {
    transition: none !important;
    animation: none !important;
  }
  body[data-page="landing"] .cfx-s4-card__inner::after {
    animation: none !important;
  }
}


/* ===== Section 4 side-card miniaturisation + parallax boost v63 ===== */
/* Reduce prev/next/far card size by 40% for stronger focus on active card */

body[data-page="landing"] .cfx-s4-card.is-prev{
  transform: translateX(-38%) translateZ(-180px) rotateY(34deg) scale(0.50) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next{
  transform: translateX(38%) translateZ(-180px) rotateY(-34deg) scale(0.50) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left{
  transform: translateX(-60%) translateZ(-340px) rotateY(42deg) scale(0.30) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right{
  transform: translateX(60%) translateZ(-340px) rotateY(-42deg) scale(0.30) !important;
}

/* Increase parallax offsets ~35% from v60 values */
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-copy{
  transform: translate3d(52px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-prev .cfx-s4-media{
  transform: translate3d(-48px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-copy{
  transform: translate3d(-52px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-next .cfx-s4-media{
  transform: translate3d(48px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-copy{
  transform: translate3d(70px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-left .cfx-s4-media{
  transform: translate3d(-64px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-copy{
  transform: translate3d(-70px, 0, 0) !important;
}
body[data-page="landing"] .cfx-s4-card.is-far-right .cfx-s4-media{
  transform: translate3d(64px, 0, 0) !important;
}

/* Responsive: scale down less aggressively on smaller viewports */
@media (max-width: 1100px){
  body[data-page="landing"] .cfx-s4-card.is-prev{
    transform: translateX(-28%) translateZ(-140px) rotateY(28deg) scale(0.52) !important;
  }
  body[data-page="landing"] .cfx-s4-card.is-next{
    transform: translateX(28%) translateZ(-140px) rotateY(-28deg) scale(0.52) !important;
  }
  body[data-page="landing"] .cfx-s4-card.is-far-left{
    transform: translateX(-50%) translateZ(-260px) rotateY(36deg) scale(0.34) !important;
  }
  body[data-page="landing"] .cfx-s4-card.is-far-right{
    transform: translateX(50%) translateZ(-260px) rotateY(-36deg) scale(0.34) !important;
  }
}

@media (max-width: 760px){
  body[data-page="landing"] .cfx-s4-card.is-prev{
    transform: translateX(-22%) translateZ(-110px) rotateY(22deg) scale(0.56) !important;
  }
  body[data-page="landing"] .cfx-s4-card.is-next{
    transform: translateX(22%) translateZ(-110px) rotateY(-22deg) scale(0.56) !important;
  }
}