/* Shared inner-page module palette, matched to the homepage feature cards. */
:where(
  .value-card,
  .vision-panel,
  .time-body,
  .award-card,
  .reg-feature,
  .license-card,
  .mechanism-card,
  .legal-doc-card,
  .news-card,
  .news-status,
  .article-source,
  .feature,
  .cta-box
) {
  border-color: #2b86e6 !important;
  background: linear-gradient(180deg, #0a2244, #021832) !important;
}

/* Keep all inner-page statistic strips on the same translucent navy palette
   as the About page. The homepage does not load this stylesheet. */
:where(.statbar, .safety-statbar) {
  border-color: rgba(120, 180, 240, .22) !important;
  background: linear-gradient(180deg, rgba(13, 42, 72, .55), rgba(6, 22, 40, .42)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

:where(
  .value-card,
  .vision-panel,
  .time-body,
  .award-card,
  .reg-feature,
  .license-card,
  .mechanism-card,
  .legal-doc-card,
  .news-card,
  .news-status,
  .article-source,
  .feature,
  .cta-box
):hover {
  border-color: #2b86e6 !important;
}

:where(
  .value-card .ico,
  .feature-icon,
  .mechanism-icon,
  .legal-doc-icon,
  .feature .icon
) {
  color: #e8c47a !important;
  border-color: rgba(232, 196, 122, .55) !important;
  background: linear-gradient(155deg, rgba(244, 221, 164, .2), rgba(202, 161, 78, .07)) !important;
  box-shadow: 0 0 0 1px rgba(232, 196, 122, .1), 0 10px 26px rgba(176, 134, 52, .2), inset 0 1px 0 rgba(255, 247, 224, .18) !important;
}

main:has(> .cta:last-child) {
  position: relative;
  isolation: isolate;
  background: none;
}

main:has(> .cta:last-child)::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 48.8194vw;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 13, 32, .18), rgba(3, 18, 42, .34)) center / 100% 100% no-repeat,
    url("inner-page-footer-bg.png") center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .18) 10%, #000 28%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .18) 10%, #000 28%);
}

.cta {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(360px, 29.583vw, 460px) !important;
  margin: 0;
  padding: 48px 0 !important;
  background: none !important;
}

.cta > .wrap {
  width: min(100% - 48px, 1100px) !important;
}

/* Let the illuminated horizon meet the footer without a dark spacer. */
main:has(> .cta:last-child) + footer {
  margin-top: 0 !important;
}

@media (max-width: 560px) {
  main:has(> .cta:last-child)::before {
    height: 430px;
    background-size: 100% 100%, auto 430px;
  }

  .cta {
    min-height: 430px !important;
    padding: 64px 0 !important;
  }

  .cta > .wrap {
    width: calc(100% - 32px) !important;
  }
}

/* Shared inner-page motion system. GSAP owns transforms and entrance timing;
   this stylesheet supplies the light, depth and accessible static fallback. */
.gsap-motion .motion-reveal {
  will-change: opacity, transform;
}

.gsap-motion .motion-reveal.is-visible {
  will-change: auto;
}

.motion-card {
  --motion-x: 50%;
  --motion-y: 12%;
  position: relative;
  transform-style: preserve-3d;
  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    filter .28s ease !important;
  will-change: transform;
}

.motion-card:hover,
.motion-card:focus-within {
  border-color: rgba(72, 180, 255, .78) !important;
  box-shadow:
    0 22px 58px rgba(0, 18, 48, .46),
    0 0 0 1px rgba(72, 180, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  filter: brightness(1.06);
}

.motion-card.motion-glow-only,
.motion-card.motion-glow-only:hover,
.motion-card.motion-glow-only:focus-within {
  transform: none !important;
  filter: none !important;
  border-color: var(--motion-rest-border) !important;
  box-shadow: var(--motion-rest-shadow) !important;
  will-change: auto;
}

.inner-motion-ready main :where(.btn, button, .news-page-button):hover {
  transform: none !important;
}

.inner-motion-ready main .motion-media:hover,
.inner-motion-ready main .motion-media:hover :where(img, video, .screen, .phones),
.inner-motion-ready main .motion-card:hover :where(img, video, .screen, .phones),
.inner-motion-ready main .device:hover::before {
  transform: none !important;
  filter: none !important;
}

.motion-card :where(.ico, .icon, .feature-icon, .mechanism-icon, .legal-doc-icon, .protection-icon, .insurance-icon) {
  transform-origin: 50% 50%;
  will-change: transform;
}

:where(
  .award-card,
  .reg-feature,
  .license-card,
  .mechanism-card,
  .legal-doc-card,
  .news-card,
  .news-status,
  .article-source,
  .feature,
  .cta-box,
  .protection-card,
  .insurance-panel,
  .analysis-card,
  .analysis-disclaimer,
  .institute-copy-panel,
  .institute-highlight,
  .learning-card,
  .partnership-panel,
  .contact-card,
  .benefit,
  .history-copy,
  .lambo-copy,
  .aff-copy
).motion-card {
  background:
    radial-gradient(circle at var(--motion-x) var(--motion-y), rgba(72, 180, 255, .17), transparent 38%),
    linear-gradient(180deg, #0a2244, #021832) !important;
}

.motion-media {
  overflow: hidden;
  will-change: transform, opacity;
}

.motion-media :where(img, video, .screen, .phones) {
  transition: filter .4s ease;
  will-change: transform;
}

.motion-media:hover :where(img, video, .screen, .phones),
.motion-media:focus-within :where(img, video, .screen, .phones) {
  filter: saturate(1.08) brightness(1.04);
}

.motion-button {
  transition:
    box-shadow .2s ease,
    border-color .2s ease !important;
  will-change: transform;
}

.motion-button:active { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .inner-motion-ready .motion-reveal,
  .motion-card,
  .motion-media :where(img, video, .screen, .phones),
  .motion-button {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .motion-card:hover {
    filter: none;
  }

  .motion-media:hover :where(img, video, .screen, .phones) {
    filter: none;
  }
}

/* A non-GSAP fallback keeps the original CSS hover lift usable if the CDN is unavailable. */
.motion-fallback .motion-card:hover,
.motion-fallback .motion-card:focus-within {
  transform: translateY(-5px);
}