.cfx-page {
  --cfx-green: #8ee75c;
  --cfx-mint: #d8ffbc;
  --cfx-deep: #041109;
  --cfx-panel: rgba(6, 20, 11, .68);
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #f0f4ec;
}

.cfx-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 20%, rgba(72, 194, 87, .12), transparent 32%), linear-gradient(180deg, rgba(0, 18, 8, .16), #030605 76%);
}

.cfx-hero {
  display: grid;
  grid-template-columns: minmax(20rem, .86fr) minmax(30rem, 1.14fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6.5rem);
  width: min(100% - clamp(2rem, 8vw, 10rem), 1440px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(6.8rem, 10vh, 8.5rem) 0 clamp(2rem, 6vh, 5rem);
}

.cfx-kicker { margin: 0 0 .8rem; color: var(--cfx-green); font: 700 clamp(.6rem, .78vw, .78rem)/1.3 var(--font-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.cfx-hero h1 { width: min(100%, 31rem); margin: 0; }
.cfx-hero h1 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .9rem 1.7rem rgba(61, 193, 80, .14)); }
.cfx-claim { margin: 1.3rem 0 0; color: var(--cfx-mint); font: 650 clamp(1.25rem, 2.2vw, 1.8rem)/1.15 var(--font-display, sans-serif); letter-spacing: -.025em; }
.cfx-lede { max-width: 38rem; margin: 1rem 0 1.45rem; color: #bdc8bd; font: 400 clamp(.95rem, 1.28vw, 1.15rem)/1.58 var(--font-ui, sans-serif); }
.cfx-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.cfx-primary, .cfx-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.1rem; border-radius: .6rem; font: 750 .69rem/1 var(--font-ui, sans-serif); letter-spacing: .12em; text-align: center; text-transform: uppercase; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cfx-primary { gap: .7rem; color: #061006; border: 1px solid #c6ff96; background: linear-gradient(110deg, #bdff88, #4cbe54); box-shadow: 0 .6rem 1.8rem rgba(55, 197, 79, .2); }
.cfx-secondary { color: #e2eade; border: 1px solid rgba(218,255,196,.34); background: rgba(6,20,11,.44); }
.cfx-primary:hover, .cfx-primary:focus-visible, .cfx-secondary:hover, .cfx-secondary:focus-visible { transform: translateY(-2px); box-shadow: 0 .85rem 2rem rgba(29, 155, 65, .26); }
.cfx-hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 2rem 0 0; border-top: 1px solid rgba(210,255,197,.18); }
.cfx-hero__facts div { min-width: 0; padding: 1rem .8rem 0 0; border-right: 1px solid rgba(210,255,197,.13); }
.cfx-hero__facts div + div { padding-left: .8rem; }
.cfx-hero__facts div:last-child { border-right: 0; }
.cfx-hero__facts dt { color: #7e9681; font: 700 .52rem/1.2 var(--font-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.cfx-hero__facts dd { margin: .35rem 0 0; color: #edf6e9; font: 650 .7rem/1.3 var(--font-ui, sans-serif); }

.cfx-hero__product { position: relative; display: grid; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 1px solid rgba(140, 231, 92, .42); border-radius: 1.6rem; background: #06130b; box-shadow: 0 2rem 5rem rgba(0,0,0,.5), 0 0 0 1px rgba(219,255,198,.045) inset; }
.cfx-hero__product::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(3,8,4,.86) 100%); }
.cfx-hero__product img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.3s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.cfx-hero__product:hover img { transform: scale(1.035); filter: saturate(1.1) contrast(1.04); }
.cfx-hero__product figcaption { position: absolute; z-index: 2; right: 1.1rem; bottom: 1rem; left: 1.1rem; display: grid; gap: .25rem; text-shadow: 0 1px 1rem #000; }
.cfx-hero__product figcaption span { color: var(--cfx-green); font: 700 .58rem/1 var(--font-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.cfx-hero__product figcaption strong { max-width: 27ch; font: 550 clamp(1rem, 1.7vw, 1.45rem)/1.1 var(--font-display, sans-serif); letter-spacing: -.02em; }

.cfx-chapter { position: relative; width: min(100% - clamp(2rem, 8vw, 10rem), 1320px); margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid rgba(211,255,196,.13); }
.cfx-heading { max-width: 58rem; }
.cfx-heading h2, .cfx-close h2 { margin: 0; font: 520 clamp(2.25rem, 4.7vw, 5rem)/1.02 var(--font-display, sans-serif); letter-spacing: -.045em; text-wrap: balance; }
.cfx-heading > p:last-child { max-width: 44rem; margin: 1.25rem 0 0; color: #acb8ad; font: 400 1rem/1.65 var(--font-ui, sans-serif); }

.cfx-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(3rem, 7vw, 6rem); border: 1px solid rgba(211,255,196,.14); border-radius: 1.2rem; overflow: hidden; background: rgba(211,255,196,.12); }
.cfx-path article { min-height: 15rem; padding: 1.5rem; background: linear-gradient(145deg, rgba(18,42,23,.78), rgba(5,13,8,.82)); cursor: pointer; transition: background .32s ease, transform .32s ease; }
.cfx-path article:hover, .cfx-path article:focus-visible, .cfx-path article[data-active="true"] { background: linear-gradient(145deg, rgba(71,143,68,.33), rgba(9,27,13,.88)); transform: translateY(-3px); }
.cfx-path span { color: var(--cfx-green); font: 700 .62rem/1 var(--font-ui, sans-serif); letter-spacing: .14em; }
.cfx-path h3 { max-width: 11ch; margin: 4rem 0 .7rem; font: 550 clamp(1.15rem, 1.8vw, 1.55rem)/1.12 var(--font-display, sans-serif); letter-spacing: -.02em; }
.cfx-path p { margin: 0; color: #aab7ac; font: 400 .82rem/1.55 var(--font-ui, sans-serif); }
.cfx-path__readout { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start; width: min(100%, 44rem); margin: 1rem auto 0; padding: 1rem 1.15rem; border: 1px solid rgba(180,255,150,.24); border-radius: 1rem; background: rgba(13,38,18,.56); }
.cfx-path__readout span { grid-row: span 2; color: var(--cfx-green); font: 700 .6rem/1.2 var(--font-ui, sans-serif); letter-spacing: .13em; }
.cfx-path__readout strong { font: 550 1rem/1.15 var(--font-display, sans-serif); }
.cfx-path__readout p { margin: .3rem 0 0; color: #b6c3b6; font: 400 .78rem/1.45 var(--font-ui, sans-serif); }

.cfx-chapter--boundary { display: grid; grid-template-columns: minmax(13rem, .56fr) minmax(20rem, 1fr); align-items: center; gap: clamp(3rem, 10vw, 10rem); }
.cfx-boundary__visual { position: relative; display: grid; place-items: center; min-height: 20rem; border-radius: 50%; background: radial-gradient(circle, rgba(72,186,74,.15), transparent 66%); }
.cfx-boundary__visual img { position: relative; z-index: 2; width: min(68%, 14rem); filter: drop-shadow(0 0 2.2rem rgba(111,240,88,.3)); }
.cfx-boundary__visual i { position: absolute; border: 1px solid rgba(141,232,92,.26); border-radius: 50%; animation: cfx-breathe 5.5s ease-in-out infinite; }
.cfx-boundary__visual i:nth-of-type(1) { width: 42%; aspect-ratio: 1; }.cfx-boundary__visual i:nth-of-type(2) { width: 67%; aspect-ratio: 1; animation-delay: -.9s; }.cfx-boundary__visual i:nth-of-type(3) { width: 91%; aspect-ratio: 1; animation-delay: -1.8s; }
.cfx-text-link { display: inline-flex; gap: .7rem; margin-top: 1.6rem; padding-bottom: .45rem; color: var(--cfx-mint); border-bottom: 1px solid rgba(177,255,138,.6); font: 750 .67rem/1 var(--font-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

.cfx-role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: clamp(3rem, 7vw, 5rem); }
.cfx-role-grid article { min-height: 14rem; padding: 1.45rem; border: 1px solid rgba(211,255,196,.14); border-radius: 1rem; background: linear-gradient(140deg, rgba(255,255,255,.055), rgba(7,18,10,.58)); transition: transform .3s ease, border-color .3s ease; }
.cfx-role-grid article:hover { transform: translateY(-4px); border-color: rgba(146,234,98,.56); }
.cfx-role-grid span { color: var(--cfx-green); font: 700 .58rem/1 var(--font-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }.cfx-role-grid h3 { margin: 3.6rem 0 .65rem; font: 550 1.35rem/1.1 var(--font-display, sans-serif); letter-spacing: -.02em; }.cfx-role-grid p { margin: 0; color: #aeb9ae; font: 400 .82rem/1.55 var(--font-ui, sans-serif); }

.cfx-close { width: min(100% - 2rem, 1000px); margin: 0 auto clamp(4rem, 8vw, 8rem); padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 7vw, 6rem); text-align: center; border: 1px solid rgba(141,232,92,.3); border-radius: 1.5rem; background: radial-gradient(circle at 50% 0, rgba(75,190,80,.16), transparent 46%), rgba(5,18,9,.74); box-shadow: inset 0 0 6rem rgba(0,0,0,.4); }.cfx-close h2 { max-width: 15ch; margin-inline: auto; }.cfx-close > p:not(.cfx-kicker) { max-width: 43rem; margin: 1.25rem auto 1.6rem; color: #b1bdb1; font: 400 .95rem/1.65 var(--font-ui, sans-serif); }.cfx-close .cfx-actions { justify-content: center; }

@keyframes cfx-breathe { 50% { opacity: .35; transform: scale(.94); } }
@media (max-width: 900px) { .cfx-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 6.2rem; }.cfx-hero__copy { max-width: 42rem; }.cfx-hero__product { width: min(100%, 44rem); justify-self: center; }.cfx-path, .cfx-role-grid { grid-template-columns: repeat(2, 1fr); }.cfx-chapter--boundary { grid-template-columns: 1fr; }.cfx-boundary__visual { max-width: 24rem; width: 100%; min-height: 16rem; }.cfx-path article { min-height: 12rem; }.cfx-path h3 { margin-top: 2.8rem; } }
@media (max-width: 520px) { .cfx-hero { width: min(100% - 2rem, 28rem); min-height: auto; padding: 6.2rem 0 4rem; }.cfx-hero h1 { width: min(100%, 20rem); }.cfx-claim { margin-top: 1rem; font-size: 1.25rem; }.cfx-lede { font-size: .88rem; }.cfx-primary, .cfx-secondary { width: 100%; min-height: 3rem; font-size: .61rem; }.cfx-hero__facts { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }.cfx-hero__facts div:nth-child(2) { border-right: 0; }.cfx-hero__facts div:nth-child(n+3) { border-top: 1px solid rgba(210,255,197,.13); }.cfx-hero__product { aspect-ratio: 16 / 9; border-radius: 1.15rem; }.cfx-chapter { width: min(100% - 2rem, 30rem); padding: 4.7rem 0; }.cfx-heading h2, .cfx-close h2 { font-size: 2.05rem; }.cfx-heading > p:last-child { font-size: .9rem; }.cfx-path, .cfx-role-grid { grid-template-columns: 1fr; }.cfx-path article { min-height: 10.5rem; }.cfx-path h3, .cfx-role-grid h3 { margin-top: 2.4rem; }.cfx-path__readout { padding: .85rem; }.cfx-chapter--boundary { gap: 1.4rem; }.cfx-boundary__visual { min-height: 13rem; }.cfx-close { border-radius: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .cfx-page *, .cfx-page *::before, .cfx-page *::after { animation: none !important; transition-duration: .01ms !important; } }