/* Engine Profit — Section layouts */

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 76px;
}

.hero__media {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  will-change: transform;
}

/* 100dvh tracks the mobile browser's toolbar as it hides/shows mid-scroll,
   so the section's height (and this percentage-inset media child) keeps
   resizing while you scroll — reads as the background jittering/zooming.
   100svh locks to the smallest (toolbar-visible) height and never moves.
   Desktop has no such toolbar, so dvh there is harmless and unchanged.
   The parallax overscan is also dropped since JS parallax already skips
   mobile (parallax.js), so there's no transform left for it to cover. */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
  }

  .hero__media {
    inset: 0;
  }
}

.hero__media video,
.hero__media-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video plays on every screen size now, mobile included — only an actual
   reduced-motion preference falls back to the still image. */
.hero__media-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media video {
    display: none !important;
  }

  .hero__media-fallback {
    display: block !important;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 10, 8, 0.68) 0%,
    rgba(11, 10, 8, 0.8) 45%,
    rgba(11, 10, 8, 0.96) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  padding-top: var(--space-16);
  padding-bottom: var(--space-20);
}

.hero .chip {
  margin-bottom: var(--space-6);
}

.hero__title {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

.hero__title em {
  font-style: italic;
  color: var(--color-gold);
}

.hero__subtitle {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 46ch;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .hero__title {
    max-width: none;
  }
}

/* ============ Page header (inner pages) ============ */
.page-header {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 76px;
}

.page-header__media {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  will-change: transform;
}

/* Same fix as .hero: 100dvh resizes as the mobile toolbar hides/shows
   mid-scroll, reading as the background jittering/zooming. 100svh is
   stable throughout the scroll gesture. See .hero for the full note. */
@media (max-width: 768px) {
  .page-header {
    min-height: 100svh;
  }

  .page-header__media {
    inset: 0;
  }
}

.page-header__media img,
.page-header__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video plays on every screen size now, mobile included — only an actual
   reduced-motion preference falls back to the still image. */
.page-header__media img[data-video-fallback] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-header__media video {
    display: none !important;
  }

  .page-header__media img[data-video-fallback] {
    display: block !important;
  }
}

.page-header__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 10, 8, 0.68) 0%,
    rgba(11, 10, 8, 0.8) 45%,
    rgba(11, 10, 8, 0.96) 100%
  );
}

.page-header__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding-block: var(--space-16) var(--space-20);
}

.page-header__content h1 {
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

.page-header__content p {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

/* ============ Trust strip ============ */
.trust-strip {
  position: relative;
  background: var(--color-bg-elevated);
}

.trust-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.trust-strip__item .icon {
  color: var(--color-gold);
  font-size: 1.2em;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .trust-strip__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .trust-strip__row {
    grid-template-columns: 1fr;
  }
}

/* ============ Split (product intro) ============ */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: center;
}

/* Grid items default to min-width: auto, so a track can still be forced
   wider than its assigned space by a child's intrinsic content size (here,
   the backdrop's oversized inset: -8% bleed) even when that child clips
   its own overflow — a classic "grid blowout". min-width: 0 makes the
   track size authoritative instead. */
.split > * {
  min-width: 0;
}

.split--steps {
  align-items: start;
}

.split--reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

.split--reverse .split__visual {
  order: -1;
}

.split__visual {
  position: relative;
}

/* Must come after the base .split__visual rule above: both set `position`
   with identical specificity (one class each), so source order decides —
   this needs to win on desktop for the sticky-scroll effect to apply. */
.split__visual--sticky {
  position: sticky;
  top: 100px;
}

.split__visual-backdrop {
  position: absolute;
  inset: -8%;
  z-index: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0.5;
  filter: saturate(1.1);
}

.split__visual-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The frame itself owns the aspect ratio and sizes img/video children via
   absolute positioning (matching .page-header__media and
   .parallax-feature__media) rather than letting a <video> child's own
   width + aspect-ratio determine the box — the replaced-element sizing
   path is the more fragile of the two, and this keeps every media frame
   on the site sized the same, reliable way. */
.split__visual-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.split__visual-frame img,
.split__visual-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same video/poster-fallback pattern as .page-header__media: the video
   plays by default, and only an explicit reduced-motion preference swaps
   in the still poster image. */
.split__visual-frame img[data-video-fallback] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .split__visual-frame video {
    display: none !important;
  }

  .split__visual-frame img[data-video-fallback] {
    display: block !important;
  }
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.check-list .icon {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 0.2em;
}

@media (max-width: 900px) {
  .split,
  .split--reverse {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__visual {
    order: 0;
  }

  /* relative, not static: this still cancels the sticky-scroll behavior,
     but (unlike static) keeps the element as a positioning container for
     its absolutely-positioned backdrop child, whose inset: -8% would
     otherwise resolve against some ancestor further up the tree.
     top must be reset too — the base rule's top: 100px was written for
     position: sticky (an offset from the scroll container), but it
     applies just as much to position: relative (an offset from the
     element's own normal position). Without resetting it here, the card
     stays shifted 100px down from its normal flow position on mobile,
     overlapping whatever section follows it. */
  .split__visual--sticky {
    position: relative;
    top: 0;
  }

  /* The backdrop's decorative oversized bleed (inset: -8%) has room to
     spill out on wide desktop layouts, but at a single-column mobile
     width it pushes past the container and causes horizontal scroll. */
  .split__visual {
    overflow: hidden;
  }
}

/* ============ Benefits ============ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.benefit-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.benefit-item__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  font-size: 1.35rem;
}

.benefit-item h3 {
  font-size: var(--text-lg);
}

.benefit-item p {
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .benefit-item {
    align-items: center;
    text-align: center;
  }

  .benefit-item p {
    max-width: 32ch;
  }
}

/* ============ Editorial banner (full-bleed statement) ============ */
.editorial-banner {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: var(--space-16) var(--section-padding-x);
}

.editorial-banner__media {
  position: absolute;
  inset: 0;
}

.editorial-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 8, 0.78) 0%, rgba(11, 10, 8, 0.55) 45%, rgba(11, 10, 8, 0.82) 100%);
}

.editorial-banner__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.editorial-banner__content h2 {
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  line-height: 1.35;
  color: var(--color-text-primary);
}

.editorial-banner__content p {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* ============ Parallax feature (full-bleed video/image, scroll parallax) ============ */
.parallax-feature {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.parallax-feature__media {
  position: absolute;
  inset: -8% -4%;
  z-index: 0;
  will-change: transform;
}

.parallax-feature__media img,
.parallax-feature__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parallax-feature__media img[data-video-fallback] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-feature__media video {
    display: none !important;
  }

  .parallax-feature__media img[data-video-fallback] {
    display: block !important;
  }
}

.parallax-feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 10, 8, 0.94) 0%,
    rgba(11, 10, 8, 0.78) 36%,
    rgba(11, 10, 8, 0.32) 68%,
    rgba(11, 10, 8, 0.55) 100%
  );
}

.parallax-feature__content {
  position: relative;
  z-index: 1;
  max-width: 540px;
  padding-block: var(--space-20);
}

@media (max-width: 768px) {
  .parallax-feature {
    min-height: 60vh;
  }

  .parallax-feature__media {
    inset: 0;
  }

  .parallax-feature__scrim {
    background: linear-gradient(
      180deg,
      rgba(11, 10, 8, 0.5) 0%,
      rgba(11, 10, 8, 0.88) 68%,
      rgba(11, 10, 8, 0.96) 100%
    );
  }

  .parallax-feature__content {
    max-width: none;
    padding-block: var(--space-12);
  }
}

/* ============ How it works (process) ============ */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
  position: relative;
}

.process__line {
  position: absolute;
  top: 28px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-strong) 8%,
    var(--color-border-strong) 92%,
    transparent
  );
  z-index: 0;
}

.process__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.process__badge {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-border);
  color: var(--color-gold);
  font-size: 1.4rem;
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.process__step:hover .process__badge {
  border-color: var(--color-gold);
  transform: translateY(-3px);
}

.process__index {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold);
  color: var(--color-text-on-gold);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
}

.process__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
}

.process__desc {
  font-size: var(--text-sm);
  max-width: 30ch;
}

@media (max-width: 900px) {
  .process {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-10);
  }

  .process__line {
    display: none;
  }
}

@media (max-width: 560px) {
  .process {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .process__step {
    align-items: center;
    text-align: center;
  }

  .process__desc {
    max-width: 32ch;
  }
}

/* ============ Feature bento ============ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: var(--space-5);
}

.bento__cell {
  position: relative;
  grid-column: span 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.bento__cell:hover {
  border-color: var(--color-gold-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.bento__cell--wide {
  grid-column: span 2;
}

.bento__cell--media {
  color: var(--color-text-primary);
}

.bento__cell--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bento__cell--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.bento__cell--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 10, 8, 0.35) 0%, rgba(11, 10, 8, 0.92) 100%);
}

.bento__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold-border);
  color: var(--color-gold);
  font-size: 1.25rem;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.bento__cell:hover .bento__icon {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.bento__cell h3 {
  font-size: var(--text-lg);
}

.bento__cell p {
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__cell--wide {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento__cell--wide {
    grid-column: span 1;
  }
}

/* ============ Results gallery ============ */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.results-grid__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}

.results-grid__item:hover,
.results-grid__item:focus-visible {
  border-color: var(--color-gold-border);
}

.results-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.results-grid__item:hover img {
  transform: scale(1.04);
}

@media (max-width: 860px) {
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
}

.disclaimer-note {
  margin-top: var(--space-8);
  display: flex;
  gap: 0.75em;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 68ch;
}

.disclaimer-note .icon {
  color: var(--color-warning);
  flex-shrink: 0;
  margin-top: 0.15em;
}

/* ============ Risk tiles (lot-sizing) ============ */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.risk-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.risk-tile--balanced {
  border-color: var(--color-gold-border);
  background: var(--color-gold-soft);
}

.risk-tile__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
}

.risk-tile__gauge {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  overflow: hidden;
}

.risk-tile__gauge span {
  display: block;
  height: 100%;
  background: var(--color-gold);
  border-radius: inherit;
}

@media (max-width: 860px) {
  .risk-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Pricing ============ */
.pricing-card {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-12) var(--space-10);
  position: relative;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35em;
  margin-top: var(--space-4);
}

.pricing-card__currency {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-gold);
}

.pricing-card__amount {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 4.75rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  line-height: 1;
}

.pricing-card__period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pricing-card__list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.pricing-card__list li {
  display: flex;
  gap: 0.75em;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pricing-card__list .icon {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.pricing-card .btn {
  margin-top: var(--space-8);
}

.pricing-note {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pricing-note strong {
  color: var(--color-text-secondary);
  font-weight: 700;
}

/* ============ Register-first CTA ============ */
.register-cta {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-10) var(--space-8);
}

.register-cta .chip {
  margin-bottom: var(--space-5);
}

.register-cta p {
  margin: var(--space-4) auto var(--space-8);
  max-width: 52ch;
  font-size: var(--text-lg);
}

/* ============ Configurator ============ */
.configurator {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-10);
  align-items: start;
}

.configurator__summary {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.configurator__summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.configurator__summary-row:last-of-type {
  border-bottom: none;
}

.configurator__summary-label {
  color: var(--color-text-muted);
}

.configurator__summary-value {
  color: var(--color-text-primary);
  font-weight: 700;
  text-align: right;
}

.configurator__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-strong);
}

.configurator__total-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-gold);
}

.configurator__form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-10);
}

.configurator__form legend {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  padding: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.configurator__form .field {
  margin-bottom: var(--space-5);
}

/* ============ Configurator section (video background) ============ */
/* Video only plays on desktop; mobile and reduced-motion keep the plain
   elevated background this section always had, both to save mobile data
   and because the form's own inputs/cards are opaque and don't need it. */
.configurator-section {
  /* No overflow:hidden here — the sticky "Your selection" sidebar inside
     this section needs every ancestor's overflow to stay visible, or
     position:sticky silently stops working. The video/scrim are inset:0
     with no overscan, so nothing needs clipping anyway. */
  background: var(--color-bg-elevated);
}

.configurator-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
}

.configurator-section__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.configurator-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 9, 0.55) 0%,
    rgba(18, 16, 9, 0.76) 50%,
    rgba(18, 16, 9, 0.9) 100%
  );
}

@media (min-width: 768px) {
  .configurator-section__media,
  .configurator-section__scrim {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .configurator-section__media,
  .configurator-section__scrim {
    display: none !important;
  }
}

.configurator-section .section-border {
  z-index: 2;
}

.configurator-section > .container {
  position: relative;
  z-index: 1;
}

.configurator-section .section-head h2,
.configurator-section .section-head p {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.configurator-section .field label {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

@media (max-width: 960px) {
  .configurator {
    grid-template-columns: 1fr;
  }

  .configurator__summary {
    position: static;
    order: 2;
  }
}

/* ============ Testimonials ============ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-card__quote {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: auto;
}

.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: var(--text-base);
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ FAQ ============ */
.faq-list {
  max-width: var(--container-max-narrow);
}

/* ============ Final CTA (full-bleed banner) ============ */
.final-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-inline: var(--section-padding-x);
  text-align: center;
  padding: var(--space-24) var(--space-8);
}

.final-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.final-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(11, 10, 8, 0.88) 10%, rgba(11, 10, 8, 0.7) 100%);
}

.final-cta__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-inline: auto;
}

.final-cta h2 {
  color: var(--color-text-primary);
}

.final-cta p {
  margin-top: var(--space-4);
}

.final-cta .btn {
  margin-top: var(--space-8);
}

@media (max-width: 640px) {
  .final-cta {
    margin-inline: var(--space-4);
    padding: var(--space-16) var(--space-5);
  }
}

/* ============ Contact cards ============ */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

.contact-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-gold-soft);
  color: var(--color-gold);
  font-size: 1.4rem;
}

.contact-card__handle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-10);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-brand .navbar__brand {
  font-size: var(--text-xl);
}

.footer-brand p {
  font-size: var(--text-sm);
  max-width: 34ch;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-gold);
}

.footer-col a .icon {
  color: var(--color-gold);
}

.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-disclaimer {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 80ch;
  line-height: var(--leading-normal);
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }
}

/* ============ VPS guide: without/with comparison ============ */
.vps-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
}

/* A real grid column (not absolute positioning) so the badge sits in the
   gap between the two cards rather than floating at the container's 50%
   midpoint — the cards can differ in height (the flow-chain wraps to a
   second line on one side but not the other), so a midpoint-based overlay
   would drift onto whichever card's content starts higher. align-self
   keeps the circle itself centered without stretching into an oval, while
   the cards on either side still stretch to match each other's height
   (the grid's default align-items). */
.vps-compare__divider {
  align-self: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-border);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
}

@media (max-width: 860px) {
  .vps-compare {
    grid-template-columns: 1fr;
  }

  .vps-compare__divider {
    display: none;
  }
}

.vps-compare__card {
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.vps-compare__card:hover {
  transform: translateY(-4px);
}

.vps-compare__card--negative:hover {
  border-color: rgba(201, 99, 91, 0.4);
}

.vps-compare__card--positive {
  background: var(--color-gold-soft);
  border-color: var(--color-gold-border);
}

.vps-compare__card--positive:hover {
  border-color: var(--color-gold);
}

.vps-compare__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-6);
}

.vps-compare__card--negative .vps-compare__label {
  color: var(--color-error);
}

.vps-compare__card--positive .vps-compare__label {
  color: var(--color-gold);
}

.vps-compare__body {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.flow-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.flow-chain__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.flow-chain__item .icon {
  color: var(--color-gold);
}

.flow-chain__arrow {
  display: inline-flex;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.flow-chain__arrow .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 860px) {
  .vps-compare {
    grid-template-columns: 1fr;
  }
}

/* ============ VPS guide: numbered step list ============ */
.step-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 27px;
  width: 1px;
  background: var(--color-border-strong);
}

.step-list__item {
  position: relative;
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.step-list__index {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-gold-border);
  color: var(--color-gold);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transition: border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.step-list__item:hover .step-list__index {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.step-list__content {
  padding-top: var(--space-2);
}

.step-list__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.step-list__icon {
  flex-shrink: 0;
  width: 0.8em;
  height: 0.8em;
  color: var(--color-gold);
}

.step-list__desc {
  font-size: var(--text-sm);
  max-width: 60ch;
}

.step-list__note {
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .step-list__index {
    width: 44px;
    height: 44px;
    font-size: var(--text-base);
  }

  .step-list::before {
    left: 21px;
  }
}

/* ============ Callout (important notice) ============ */
.callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: rgba(204, 154, 78, 0.08);
  border: 1px solid rgba(204, 154, 78, 0.3);
}

.callout .icon {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--color-warning);
}

.callout__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.callout__body {
  font-size: var(--text-sm);
}