/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden;
  padding-top: var(--nav-h); padding-bottom: 56px;
  background: url('/assets/images/hero.webp') center/cover no-repeat;
  background-position-y: 67px;
}
.hero__row {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: clamp(36px, 4.5vw, 64px);
  padding-top: 72px; padding-bottom: 40px;
}
.hero__inner { flex: 0 0 min(520px, 48%); }
.hero__title {
  max-width: 560px;
  margin-bottom: 22px;
  line-height: 1.12;
  letter-spacing: 0;
}
.hero__sub {
  max-width: 500px;
  margin-bottom: 22px;
  color: var(--text-mid);
  font-size: 1.05rem;
  line-height: 1.72;
}
.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.hero__points li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  color: var(--blue);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 8px 26px rgba(20,36,52,.05);
  backdrop-filter: blur(8px);
}
.hero__points li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(174,247,183,.32);
}
.hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__device {
  flex: 1 1 0; min-width: 0; overflow: visible;
  display: flex; justify-content: flex-end; align-items: center;
}
.hero__device > .device-laptop {
  flex: 0 0 auto;
  zoom: .78;
}

/* ---- Trusted Marquee ---- */
/* "Trusted by:" pinned to bottom of hero section */
.trusted__label {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  max-width: var(--max); margin: 0 auto; padding: 0 32px 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-light);
}
.trusted__label-short {
  display: none;
}
.trusted {
  background: var(--bg-dark); padding: 40px 0; overflow: hidden;
}
.marquee-wrap {
  position: relative;
}
.marquee-wrap::before, .marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-dark), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg-dark), transparent); }

/* Track is built by JS and animated with compositor-friendly CSS transforms. */
.marquee-track {
  --marquee-distance: 0px;
  --marquee-duration: 24s;
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  will-change: transform;
  animation: marqueeSlide var(--marquee-duration) linear infinite;
  transform: translate3d(0, 0, 0);
}
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marqueeSlide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); }
}
.marquee-logo {
  width: clamp(112px, 11vw, 148px);
  height: 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.marquee-track img { /* Adjusted for smaller, consistent size */
  height: 70px; max-width: 120px; opacity: .55; filter: brightness(0) invert(1);
  transition: opacity .25s, transform .25s;
  object-fit: contain; flex-shrink: 0;
}
.marquee-track img:hover { opacity: 1; transform: scale(1.08); }

/* Override for logos with solid backgrounds that don't work with the invert filter */
.marquee-track img[src*="alho.webp"],
.marquee-track img[src*="gup.webp"],
.marquee-track img[src*="h4a.webp"],
.marquee-track img[src*="iwb.webp"],
.marquee-track img[src*="kki.webp"] {
  filter: none; /* Disable the brightness/invert filter */
  background: white; /* Give them a solid white background to be visible */
  padding: 6px;
  border-radius: 4px;
}

/* New SVG logos: disable invert filter so text/logo colors display correctly */
.marquee-track img[src*="astuc.webp"],
.marquee-track img[src*="deutschland-immobilien.webp"],
.marquee-track img[src*="koester.webp"],
.marquee-track img[src*="nunivo.webp"],
.marquee-track img[src*="eins-plan-geiger-gruppe.webp"] {
  filter: none;
  background: white;
  padding: 6px;
  border-radius: 4px;
}

/* ---- Section Headers ---- */
.sec-head { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.sec-head p { margin-top: 14px; font-size: .97rem; color: var(--text-light); line-height: 1.7; }

/* ---- How It Works: full-viewport pinned step slider ----
   See js/how-it-works-scroll.js for the interaction. This is built progressive-enhancement
   first: everything below the "base" comment renders as a normal, fully visible, in-document-
   flow column of 3 cards with no JS at all — that's what narrow viewports and
   prefers-reduced-motion get, permanently, and it's also what's on screen for the instant
   before JS has run anywhere else. JS then adds `.is-pinned` on `.hiw-pin` only on wide
   viewports with no reduced-motion preference (and removes it again live if the viewport
   crosses that breakpoint), which is what the "pinned" rules further down switch on. Nothing
   here ever locks page scroll or intercepts wheel/touch input — the pinned rules just read
   scroll position every frame and paint --hiw-y/--hiw-top/--hiw-z to match; the browser keeps
   scrolling the page itself throughout, in both directions, which is what makes this work in
   reverse for free. */

/* ---- Base (no-JS / narrow / reduced-motion): plain stacked column ---- */
.hiw-pin {
  position: relative;
  /* Fixed height budget for .hiw-card__copy — see the rule below for why, and
     js/how-it-works-scroll.js (reads this same var) for how it's used. */
  --hiw-copy-h: 132px;
}

.hiw-stage {
  padding: 72px 0 56px;
}

.hiw-stage .sec-head { margin-bottom: 32px; }

.hiw-cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* Matches .ba-slider below (Before/After section) so the two sections read as the same
     width as you scroll from one into the other. */
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}

.hiw-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Whole card is a link to the how-it-works page (same destination as the CTA button below
     this section) — border starts transparent and picks up the same faint mint outline used
     for .use-case-card/.tutorial-card hover elsewhere on the site, rather than a permanent
     visible border the way those have; this card already reads as a distinct tile via its
     shadow. No transform here on purpose — .hiw-pin.is-pinned .hiw-card already owns `transform`
     for positioning (js/how-it-works-scroll.js), and a hover-only transform on this rule would
     just get overridden by that one whenever the card is pinned. */
  border: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.hiw-card:hover {
  border-color: var(--green-mid);
  box-shadow: var(--shadow-xl);
}

.hiw-card__media {
  /* The video is the largest content element in the card by design, and always exactly 16:9
     — no border/frame, no stretching or cropping to fill leftover space. In pinned mode the
     card is sized to fit around this ratio (see js/how-it-works-scroll.js), rather than the
     other way around. */
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-dark);
  aspect-ratio: 16 / 9;
}

.hiw-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hiw-card__copy {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 26px 32px 30px;
  /* Fixed height (via --hiw-copy-h above), not sized to each step's own caption length. In
     pinned mode every card's total height is computed from this same constant plus the shared
     16:9 media height (js/how-it-works-scroll.js) — if each card sized itself to its own text
     instead, the 3 steps would come out slightly different heights and the video would visibly
     jump position as the cards slide over one another. */
  min-height: var(--hiw-copy-h);
}

.hiw-card__num {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.hiw-card__title {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}

.hiw-card__desc {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

/* ---- Pinned (JS-enhanced): full-viewport stage, cards overlay from below ----
   `.hiw-pin` is sized to `--hiw-steps` viewport-heights (JS sets --hiw-steps to the actual
   card count) — card 1 is already "arrived" the instant the stage sticks, so only cards
   2..N need travel budget, one viewport-height each. `.hiw-stage` sticks for that whole
   scroll range; once it runs out, sticky releases on its own and the page scrolls on into the
   slim CTA strip after this section — no manual release step needed.

   The card itself is NOT stretched to fill the stage — js/how-it-works-scroll.js sizes it to
   the largest width (up to 880px) whose 16:9 media plus the fixed copy height still fits a
   capped fraction of the available space, shrinking it further only if the viewport is short
   on vertical room. It's docked at the top of `.hiw-cards`, directly under the header, not
   centered — whatever space the height cap leaves over sits below it, in the section's own
   background, room for the still-queued cards to be visibly stacked underneath rather than a
   stretched, letterboxed video or a pile of cards overlapping each other (see the JS). */
.hiw-pin.is-pinned {
  /* Scroll distance budgeted per step - the knob for how fast the whole slider plays out.
     Raise it to slow everything down, lower it to speed it up. The stage is always 100vh, so
     the scroll actually available to the animation is (steps x this) - 100vh, shared across
     (steps - 1) transitions; at 150vh over 3 steps that works out as 175vh of scrolling per
     card, against 100vh when this was a flat 100vh and the outgoing caption was swallowed
     almost as soon as the next card moved. js/how-it-works-scroll.js derives progress from the
     measured height, so it follows whatever is set here - nothing there needs to know it. */
  height: calc(var(--hiw-steps, 3) * var(--hiw-step-scroll, 150vh));
}

.hiw-pin.is-pinned .hiw-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: calc(var(--nav-h) + 32px) 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hiw-pin.is-pinned .hiw-cards {
  position: relative;
  flex: 1 1 auto;
  /* Base .hiw-cards is a flex item here (`.hiw-stage` is flex-direction: column) with the
     inherited `margin: 0 auto` from the base rules above — on a flex item, auto cross-axis
     margins take priority over stretch, so without an explicit width it collapses to a
     content-fit box instead of filling the row (its only child is position: absolute, so it
     has next to no intrinsic content size). Setting width explicitly sidesteps that; the
     inherited max-width + auto margins still center it within that width. */
  width: 100%;
  min-height: 0;
}

.hiw-pin.is-pinned .hiw-card {
  position: absolute;
  left: 50%;
  top: 0;
  /* JS computes and sets both of these — width to whatever fits (see the block comment
     above), --hiw-y to the card's actual pixel travel distance (not a % of its own height:
     since the card no longer fills the available space, a %-based offset couldn't reliably
     clear it off the bottom edge — see the file-level comment in the JS for the full case). */
  width: var(--hiw-card-w, min(880px, 100%));
  transform: translateX(-50%) translateY(var(--hiw-y, 100%));
  z-index: var(--hiw-z, 1);
  will-change: transform;
}

/* ---- How It Works: slim CTA strip ----
   Deliberately its own section, right after #how-it-works rather than inside it, so the
   button never appears within the full-viewport slider above — it only scrolls into view once
   that section (pinned or not) is fully done. */
.hiw-cta {
  background: var(--bg-off);
  padding: 20px 0 40px;
  /* Close the empty reserve the pinned stage keeps below the docked card. --hiw-slack is set
     by js/how-it-works-scroll.js from its own measurements, and only while the slider is
     pinned; unpinned it is unset and this resolves to 0, leaving the plain stacked layout
     untouched. Without it the button drifts further from the last card the taller the screen
     gets - roughly 290px at 900px tall, 400px at 1080px. */
  margin-top: calc(-1 * var(--hiw-slack, 0px));
}

/* ---- Before / After Slider ---- */
.ba-section { background: var(--bg-off); padding: 96px 0; }
.ba-section .sec-head { text-align: center; }
.ba-section .sec-head p { color: var(--text-light); }
.ba-section .sec-head h2 { color: var(--text); }
.ba-slider {
  position: relative; width: 100%; max-width: 880px; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-xl); user-select: none;
  cursor: col-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
}
.ba-slider__after { display: block; width: 100%; height: auto; }
.ba-slider__before-wrap {
  position: absolute; top: 0; left: 0; height: 100%;
  overflow: hidden;
  width: 50%; /* controlled by JS */
  background: var(--blue)
}
.ba-slider__before {
  /* Use explicit width and max-width:none to prevent image from shrinking inside its resizing container */
  width: 880px;
  max-width: none;
  height: 100%;
  object-fit: cover; object-position: left top;
}
.ba-slider__after,
.ba-slider__before {
  -webkit-user-drag: none;
  user-select: none;
}
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 10; cursor: col-resize;
  touch-action: none;
}
.ba-handle__line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff; transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,0,0,.5);
}
.ba-handle__circle {
  width: 44px; height: 44px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 16px rgba(0,0,0,.35); position: relative; z-index: 1;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.ba-slider:hover .ba-handle__circle { transform: scale(1.1); box-shadow: 0 4px 24px rgba(0,0,0,.45); }
.ba-handle__circle svg { color: var(--text); }
.ba-label {
  position: absolute; bottom: clamp(10px, 2vw, 16px); padding: clamp(3px, 1.5vw, 5px) clamp(8px, 3vw, 14px);
  background: rgba(0,0,0,.55); color: #fff; border-radius: 20px;
  font-size: clamp(0.6rem, 2vw, 0.75rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(6px); pointer-events: none;
}
.ba-label--before { left: clamp(10px, 2vw, 16px); }
.ba-label--after  { right: clamp(10px, 2vw, 16px); }

/* ---- Testimonial (full-bleed laptop bg, text overlay, avatar bottom-right) ---- */
.testimon-section {
  position: relative; overflow: visible; min-height: 520px;
  display: flex; align-items: center;
}
.testimon-section__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.testimon-section__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.35) 100%);
}
.testimon-section__inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 96px 32px 128px;
  max-width: 580px; margin-left: max(32px, calc((100% - var(--max)) / 2 + 32px));
}
.testimon-section__inner .label { margin-bottom: 16px; }
.testimon-section__inner h2 { margin-bottom: 28px; }
.testimon-section__quote {
  font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 500; font-style: italic;
  line-height: 1.78; color: var(--text-mid);
}
.testimon-section__quote::before { content: '\201C'; }
.testimon-section__quote::after  { content: '\201D'; }
.testimon-section__person {
  position: absolute; bottom: -84px; right: 160px; z-index: 3;
  text-align: center;
}
.testimon-section__avatar {
  width: 250px; height: 250px; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: 0 6px 28px rgba(0,0,0,.18); display: block; margin: 0 auto;
}
.testimon-section__name {
  font-weight: 700; font-size: .92rem; color: var(--text); margin-top: 10px;
}
.testimon-section__role {
  font-size: .8rem; color: var(--text-light); margin-top: 2px;
}

.testimon-section__preview {
  position: relative; z-index: 3; margin: 0 auto 0; width: min(100%, 1280px); padding: clamp(120px, 10vw, 160px) 32px 56px;
}
.testimon-section__preview-head {
  max-width: 760px; margin: 0 auto 36px; text-align: center;
}
.testimon-section__preview-head .label {
  margin-bottom: 12px;
}
.testimon-section__preview-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.12; margin: 0 0 12px;
  color: var(--text);
}
.testimon-section__preview-head p {
  font-size: 1rem; line-height: 1.7; color: var(--text-mid); margin: 0;
}
.testimon-section__preview-track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.testimon-section__preview-nav { margin-top: 28px; }
.testimon-section__preview-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.96); border: 1px solid rgba(20,36,52,.08);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card); min-width: 0;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.testimon-section__preview-card:hover,
.testimon-section__preview-card:focus-visible {
  transform: translateY(-4px); box-shadow: 0 22px 46px rgba(20,36,52,.18);
}
.testimon-section__preview-card img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
.testimon-section__preview-card__body {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px; align-items: flex-start; text-align: left;
}
.testimon-section__preview-card__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue);
}
.testimon-section__preview-card__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.testimon-section__preview-card__stage {
  margin-left: auto; background: #aef7b7; color: #000; padding: 6px 10px;
  border-radius: var(--radius); font-weight: 700; font-size: .72rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.testimon-section__preview-card__title {
  font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.4; font-weight: 700; color: var(--text);
}
.testimon-section__preview-card__partner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 8px;
}
.testimon-section__preview-card__partner-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 110px; max-width: 144px; height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(20,36,52,.08);
  border-radius: var(--radius);
  background: #fff;
}
.testimon-section__preview-card__partner-item img {
  display: block;
  max-height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---- Gallery ---- */
#gallery {
  padding-top: 148px;
}

.gallery__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.gallery__item {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; cursor: zoom-in; position: relative;
}
.gallery__item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(59,124,90,.0); transition: background .25s;
}
.gallery__item:hover::after { background: rgba(59,124,90,.12); }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__zoom-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
  width: 96px; height: 96px; background: rgba(255,255,255,.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease); z-index: 1;
}
.gallery__item:hover .gallery__zoom-icon { transform: translate(-50%,-50%) scale(1); }
.gallery__nav {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px;
}
.gallery__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, transform .2s;
}
.gallery__btn:hover { border-color: var(--blue); background: var(--green-light); transform: scale(1.08); }
.gallery__dots { display: flex; gap: 8px; }
.gallery__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, transform .2s; }
.gallery__dot.active { background: var(--blue); transform: scale(1.3); }
.gallery__caption { text-align: center; font-size: .82rem; color: var(--text-light); margin-top: 16px; }

/* ---- Lightbox ---- */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.92); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 14px;
  padding: 32px 24px 54px;
}
.lightbox.open { display: flex; }
.lightbox__img {
  max-width: min(90vw, 1200px); max-height: min(78vh, calc(100vh - 150px));
  border-radius: var(--radius); box-shadow: var(--shadow-xl);
  object-fit: contain;
  animation: lbIn .25s var(--ease);
}
.lightbox__caption {
  max-width: min(90vw, 980px);
  color: #fff;
  font-size: clamp(.86rem, 1.5vw, .98rem);
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}
.lightbox__caption[hidden] { display: none; }
@keyframes lbIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background .2s;
}
.lightbox__close:hover { background: rgba(255,255,255,.2); }
.lightbox__prev, .lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background .2s, transform .2s;
}
.lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.2); transform: translateY(-50%) scale(1.08); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: .8rem; color: rgba(255,255,255,.6); font-family: var(--font); font-weight: 600;
}

/* ---- Home Refinements ---- */
.hero {
  background-position: center;
  background-position-y: 67px;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.66) 48%, rgba(255,255,255,.18) 100%);
}

.hero__sub {
  white-space: normal;
}

.trusted {
  background: var(--blue);
}

.ba-slider,
.video-card,
.features-cta__visual img {
  border-radius: var(--radius);
}

.ba-slider {
  box-shadow: var(--shadow-card-hover);
}

.testimon-section__overlay {
  background: linear-gradient(105deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 54%, rgba(255,255,255,.38) 100%);
}