/* BIEPE - home page */

.hero__visual { position: relative; inline-size: min(100%, 48.5rem); aspect-ratio: 812 / 984; margin-block-start: calc(min(100%, 48.5rem) * -152 / 812); margin-inline: auto; @media (width >= 1024px) { margin-inline-end: -3rem; } }
.hero__man { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.hero__badge { display:block;position:absolute;inset-block-start:58.2%;inset-inline-start:6%;inline-size:clamp(88px,23vw,116px);z-index:2; }
.hero__badge-img { display: block; inline-size: 100%; block-size: auto; }
.features-showcase-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.is-hidden { display: none !important; }
.showcase__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; @media (width >= 1024px) { grid-template-columns: minmax(36rem, 5fr) minmax(0, 7fr); gap: 3.5rem; } }
.h2 { margin: 1rem 0 0; font-family: var(--font-heading); font-size: 2.25rem; line-height: 1.25; font-weight: var(--weight-semibold); letter-spacing: 0; color: inherit; @media (width >= 640px) { font-size: 3rem; line-height: 1; } }
.showcase__head-text { margin: 1.25rem 0 0; max-inline-size: 32rem; font-size: 1.25rem; line-height: 1.75rem; color: var(--color-text-muted); }
.showcase__list { margin-block-start: 2.5rem; display: grid; &:has(.showcase-item:hover) .showcase-item[data-active="true"]:not(:hover) { --item-bg: transparent; border-block-end-color: var(--color-border); } }
.showcase-item { --item-bg: transparent; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.25rem 1rem; border-block-end: var(--border-width) solid var(--color-border); border-radius: 0; background: var(--item-bg); transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
  &:last-child { border-block-end-color: transparent; }
  &:hover, &[data-active="true"] { --item-bg: var(--color-primary-soft); border-color: transparent; } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.showcase-item__icon { inline-size: 3rem; block-size: 3rem; flex: none; }
.showcase-item__title { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: 0; color: var(--color-text); }
.showcase-item__text { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.5rem; color: var(--color-text-muted); }
.showcase-item__chev { --ico-size: 1.5rem; color: var(--color-primary); transform: rotate(-90deg); }
.showcase__cta { margin-block-start: 2.5rem; }
.showcase__media { & img { inline-size: 100%; block-size: auto; display: block; } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.features-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-features { padding:64px 0; background:white; @media(width >= 1024px){padding:112px 0 127px;} }
.fh-features-head { display:flex; flex-direction:column; gap:24px; padding-bottom:32px; border-bottom:1px solid #d6dde1; @media(width >= 1024px){height:237px; box-sizing:border-box; flex-direction:row; align-items:flex-start; justify-content:space-between; & .fh-head{width:672px;} & .fh-title{max-width:560px;} & .fh-button{margin-top:71px; padding:14px 24px;} } --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:16px; width:fit-content; padding:10px 16px; border:0 solid transparent; border-radius:4px; background:#11afdf; color:white; font-size:14px; line-height:20px; font-weight:500; & .fh-icon {width:16px;height:16px;} &:hover {filter:brightness(.95);} }
.fh-icon { display:block; flex-shrink:0; width:20px; height:20px; & svg { display:block; } }
.fh-feature-grid { display:grid; gap:32px; margin-top:56px; align-items:center; @media(width >= 1024px){grid-template-columns:2fr 3fr 2fr; gap:0;} }
.fh-feature-col { display:grid; gap:48px; }
.fh-feature { position:relative; --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-feature--left { @media(width >= 1024px){padding-right:32px;text-align:right; & .fh-feature-top{justify-content:flex-end;}} }
.fh-feature-top { display:flex; align-items:center; gap:12px; height:20px; }
.fh-number { font-family:Menlo,monospace; font-size:12px; line-height:16px; color:#606c76; }
.fh-feature-title { margin:12px 0 0; font-size:18px; line-height:28px; font-weight:600; }
.fh-feature-text { margin:8px 0 0; font-size:14px; line-height:24px; color:#606c76; }
.fh-feature-photo { position:relative; aspect-ratio:572 / 428; overflow:hidden; border-radius:12px; @media(width < 1024px){grid-row:1;} --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-feature-image { display:block;position:absolute;width:100%;height:100%;left:0;top:0;object-fit:fill; }
.fh-feature--right { @media(width >= 1024px){padding-left:32px;} }
.fh-panels { margin-top:56px; display:grid; border:1px solid #d6dde1; @media(width >= 768px){grid-template-columns:1fr 1fr;} @media(width >= 1024px){height:252px;box-sizing:border-box;grid-template-columns:calc(50% + .5px) calc(50% - .5px);} --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-panel { padding:40px; box-sizing:border-box; @media(width >= 1024px){height:251px;} & > .fh-copy{max-width:576px; margin-top:12px;} }
.fh-panel-title { font-size:24px; line-height:32px; font-weight:600; margin:16px 0 0; }
.fh-panel--dark { display:flex; flex-direction:column; justify-content:space-between; background:#19222a; color:white; & > .fh-kicker{color:rgb(255 255 255 / .6);} }
.fh-panel-big { font-size:30px; line-height:36px; font-weight:600; margin:40px 0 0; }
.fh-text-link { display:inline-flex; align-items:center; gap:8px; margin-top:27px; font-size:14px; line-height:20px; font-weight:600; & .fh-icon{width:16px;height:16px;} }
.audience-section { --sec-bg: var(--color-surface); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.audience__title { margin: 1rem 0 0; font-size: 2.25rem; line-height: 2.5rem; font-weight: var(--weight-semibold); letter-spacing: 0; color: inherit; }
.audience__sub { margin: 1.25rem 0 0; max-inline-size: 44rem; font-size: 1.25rem; line-height: 1.75rem; color: var(--sec-muted); }
.audience__grid { margin-block-start: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; @media (width >= 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 1024px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  & > :nth-child(4n+2) { animation-range: entry 6% entry 46%; } & > :nth-child(4n+3) { animation-range: entry 12% entry 52%; } & > :nth-child(4n+4) { animation-range: entry 18% entry 58%; } }
.audience-card { display: flex; flex-direction: column; padding: 1.75rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-s); background: var(--white); @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.audience-card__icon { inline-size: 3.5rem; block-size: 3.5rem; flex: none; }
.audience-card__title { margin: 1.5rem 0 0; font-size: 1.375rem; line-height: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: 0; color: var(--color-text); }
.audience-card__text { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.5rem; color: var(--color-text-muted); }
.philosophy-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 6rem; --sec-py-lg: 8rem; --split-gap: 3.5rem; --split-cols: 0.85fr 1.15fr;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-philosophy { padding:64px 0; background:white; @media(width >= 1024px){padding:128px 0;} }
.fh-philosophy-image { display:block; width:100%; height:auto; border-radius:12px; @media(width >= 1024px){height:538.34px;object-fit:cover;} --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-lead { margin:0; font-size:20px; line-height:32px; font-weight:500; }
.solutions-section { --sec-bg: var(--color-surface); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 6rem; --sec-py-lg: 8rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-solutions { padding:64px 0; background:#f1f6f8; overflow:hidden; @media(width >= 1024px){padding:128px 0;} }
.fh-solutions-bg { position:absolute;width:100vw;height:calc(100% + 256px);max-width:none;left:calc((100% - 100vw) / 2);top:-128px;opacity:1;object-fit:cover;pointer-events:none;@media(width < 1024px){height:calc(100% + 128px);top:-64px;} }
.fh-button--outline { background:white; border:1px solid #cad3d8; color:#19222a; padding:9px 16px; }
.fh-solutions-photo { position:relative; overflow:hidden; aspect-ratio:583 / 428; @media(width >= 1024px){height:428px;} --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-solutions-image { position:absolute;display:block;width:100%;height:100%;left:0;top:0;object-fit:fill; }
.evidence-footnote { font-size:10px;line-height:1.5;color:var(--color-text-muted);margin:0; }
.evidence-quote { font-size:clamp(18px,2vw,23px);line-height:1.6;margin:0;color:var(--color-text); }
.faq-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 6rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-faq { padding:64px 0; background:white; @media(width >= 1024px){padding:135px 0 126px;} & .fh-title{font-size:28px;line-height:1.15; @media(width >= 640px){font-size:36px;line-height:40px;}} }
.fh-faq-list { border-top:1px solid #d6dde1; }
.fh-faq-item { padding:8px 0;border-bottom:1px solid #d6dde1; transition:padding-bottom 320ms var(--ease); &::details-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 320ms var(--ease),opacity 240ms var(--ease),content-visibility 320ms allow-discrete;} &[open]{padding-bottom:32px;} &[open]::details-content{grid-template-rows:1fr;opacity:1;} @media (prefers-reduced-motion: reduce){transition:none; &::details-content{transition:none;}} --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.fh-faq-question { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;list-style:none;cursor:pointer;font-size:18px;line-height:28px;font-weight:600; &::-webkit-details-marker{display:none;} & .fh-icon{width:20px;height:20px;} }
.fh-faq-answer { min-height:0;overflow:hidden; }
.follow-section { --sec-bg: var(--color-primary); --sec-fg: var(--white); --sec-muted: rgb(255 255 255 / 0.75); --kicker: rgb(255 255 255 / 0.65); --sec-py: 1.75rem; --sec-py-lg: 1.75rem; border-block-start: var(--border-width) solid rgb(255 255 255 / 0.2);
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-follow { padding:28px 0;border-top:1px solid rgb(255 255 255 / .2);background:#11afdf;color:white; }
.fh-social { display:flex;align-items:center;gap:20px; }
.fh-follow-label { color:rgb(255 255 255 / .6);font-size:14px;line-height:20px; }
.fh-social-link { display:inline-flex;align-items:center; & .fh-icon{width:16px;height:16px;} }
.trust-section { --sec-bg: var(--color-surface); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 2.25rem; --sec-py-lg: 2.25rem; border-block: var(--border-width) solid var(--color-border);
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-philosophy-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; @media(width >= 1024px){grid-template-columns:.85fr 1.15fr;gap:56px;} }
.fh-solutions-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr);gap:48px;align-items:center; @media(width >= 1024px){grid-template-columns:minmax(0,1fr) 583px;} & .fh-title{max-width:576px;} & .fh-copy{max-width:576px;} & .fh-lead{line-height:28px;} }
.benefits-section { --sec-bg: var(--color-dark); --sec-fg: var(--white); --sec-muted: rgb(255 255 255 / 0.6); --kicker: var(--color-primary); --sec-py: 6rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.expert-endorsements-section { background:var(--color-surface); }
.gallery-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 6rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.fh-faq-grid { display:grid;gap:48px;@media(width >= 1024px){grid-template-columns:.7fr 1.3fr;} }
.fh-follow-row { display:flex;flex-direction:column;gap:20px;@media(width >= 768px){flex-direction:row;align-items:center;justify-content:space-between;} --anim-scroll-distance:16px; @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: cover 6% cover 28%; } @media (prefers-reduced-motion: reduce) { animation: none; } }

/* Mobile hero: the visual moves to the bottom-right corner next to the buttons instead of taking a full row */
.hero-section:has(.hero__visual) { @media (width < 640px) { min-block-size: 0; } }
.hero__inner:has(> .reveal > .hero__visual) { @media (width < 640px) { min-block-size: 0; padding-block-end: 4.5rem; } }
.hero__inner > .reveal:has(> .hero__visual) { @media (width < 640px) { position: absolute; inset: auto 0 0 auto; inline-size: min(48%, 120% - 18rem, 13.2rem); z-index: 0; pointer-events: none; } }
.hero__inner:has(> .reveal > .hero__visual) > .hero__copy { @media (width < 640px) { position: relative; z-index: 1; } }
.hero__inner:has(> .reveal > .hero__visual) .hero__actions { @media (width < 640px) { flex-direction: column; align-items: flex-start; } }
.hero__badge { @media (width < 640px) { inline-size: 56px; } }

/* Industries list ("Who it's for"): a real list, two columns from tablet up */
.industry-list { margin: 0; padding: 0; list-style: none; max-inline-size: 56rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: var(--weight-medium); @media (width >= 768px) { column-count: 2; column-gap: 3rem; } }
.industry-list li { position: relative; padding-inline-start: 1.5rem; padding-block: 0.375rem; break-inside: avoid; }
.industry-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.05rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--color-primary); }