/* Final pass for the hero-to-content fade and floating footer CTA. */

html,
body,
.site-shell {
  background: #0a0f14 !important;
}

body::before,
body::after {
  display: none !important;
  content: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-header,
.site-header * {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.hero {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: -132px !important;
}

.hero::after {
  bottom: -2px !important;
  height: 390px !important;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(8, 13, 17, 0.14) 20%,
      rgba(12, 17, 22, 0.48) 46%,
      rgba(16, 23, 29, 0.88) 76%,
      #10171d 100%) !important;
}

.hero-world-video {
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero-world-video::after {
  bottom: -2px !important;
  height: 360px !important;
  background:
    linear-gradient(180deg,
      rgba(16, 23, 29, 0) 0%,
      rgba(16, 23, 29, 0.14) 22%,
      rgba(16, 23, 29, 0.46) 48%,
      rgba(16, 23, 29, 0.86) 78%,
      #10171d 100%) !important;
}

.problem {
  position: relative !important;
  z-index: 1 !important;
  padding-top: 242px !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 143, 66, 0.14), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(98, 168, 255, 0.12), transparent 34%),
    radial-gradient(circle at 50% 68%, rgba(211, 83, 230, 0.08), transparent 36%),
    linear-gradient(180deg, #10171d 0%, #0e0f12 22%, #0c1116 52%, #151b2b 100%) !important;
}

.problem::before {
  z-index: 0 !important;
  opacity: 0.66 !important;
  pointer-events: none !important;
}

.problem::after {
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(16, 23, 29, 0.24) 0%, rgba(10, 17, 22, 0.16) 36%, rgba(17, 24, 32, 0.54) 100%),
    radial-gradient(circle at 50% 50%, rgba(10, 15, 20, 0.26), transparent 58%) !important;
}

.problem-heading,
.problem-grid,
.problem-close {
  position: relative !important;
  z-index: 3 !important;
}

.problem-grid article {
  position: relative !important;
  z-index: 4 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.024) 38%, rgba(255, 255, 255, 0.012) 100%),
    radial-gradient(circle at 22% 0%, rgba(255, 143, 66, 0.028), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(98, 168, 255, 0.03), transparent 36%),
    rgba(8, 12, 17, 0.94) !important;
  backdrop-filter: blur(12px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.03) !important;
}

.problem-grid article::before,
.problem-grid article::after {
  z-index: 0 !important;
}

.problem-grid article > * {
  position: relative !important;
  z-index: 2 !important;
}

.tahiru-workflow {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 147, 64, 0.11), transparent 27%),
    radial-gradient(circle at 82% 14%, rgba(104, 164, 255, 0.12), transparent 31%),
    linear-gradient(180deg, #0b1117 0%, #10171d 48%, #0a0f14 100%) !important;
}

.workflow-art,
.workflow-art-one,
.workflow-art-two,
.workflow-art-three,
.workflow-art-four {
  padding: 10px !important;
  background-clip: border-box !important;
}

.workflow-art img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.site-footer {
  --footer-radius: 340px;
  margin-top: -1px !important;
  padding-top: 128px !important;
  border-top-left-radius: 50% var(--footer-radius) !important;
  border-top-right-radius: 50% var(--footer-radius) !important;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 143, 66, 0.075), transparent 30%),
    radial-gradient(circle at 84% 24%, rgba(98, 168, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #0a0f14 0%, #0d1118 42%, #06080c 100%) !important;
}

.site-footer::before,
.footer-line {
  display: none !important;
}

.site-footer::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), transparent 28%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.024), transparent 46%) !important;
}

.footer-cta {
  width: min(880px, 100%) !important;
  margin-bottom: 54px !important;
  padding: 0 clamp(18px, 4vw, 48px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.footer-logo {
  width: min(168px, 46vw) !important;
  margin-bottom: 24px !important;
}

.footer-cta h2 {
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.35) !important;
}

.footer-cta p:not(.eyebrow) {
  color: rgba(226, 232, 240, 0.76) !important;
}

.button,
.footer-register,
.language-button,
.workflow-tab,
.nav-link-muted,
.header-actions a,
.footer-bottom a {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    filter 180ms ease !important;
}

.button-primary,
.footer-register {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.button-primary::before,
.footer-register::before {
  position: absolute !important;
  top: -45% !important;
  bottom: -45% !important;
  left: -62% !important;
  z-index: -1 !important;
  width: 44% !important;
  content: "" !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.44) 48%, transparent 100%) !important;
  opacity: 0 !important;
  transform: translateX(-80%) skewX(-18deg) !important;
  transition: opacity 180ms ease, transform 620ms ease !important;
}

.button-primary:hover::before,
.footer-register:hover::before {
  opacity: 0.66 !important;
  transform: translateX(390%) skewX(-18deg) !important;
}

.footer-register {
  display: inline-flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 19px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #10131d !important;
  font: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: var(--gradient) !important;
  box-shadow: 0 16px 36px rgba(255,200,106,0.13), 0 10px 26px rgba(216,106,230,0.09) !important;
}

.button:hover,
.footer-register:hover,
.language-button:hover,
.workflow-tab:hover,
.nav-link-muted:hover,
.header-actions a:hover,
.footer-bottom a:hover {
  transform: translateY(-2px) !important;
}

.button-primary:hover,
.footer-register:hover,
.header-actions .button-primary:hover {
  color: #100d14 !important;
  background: var(--gradient) !important;
  box-shadow:
    0 18px 50px rgba(255, 143, 66, 0.22),
    0 0 48px rgba(98, 168, 255, 0.16) !important;
  filter: saturate(1.08) brightness(1.04) !important;
}

.button-secondary:hover,
.language-button:hover,
.nav-link-muted:hover,
.header-actions a:not(.button-primary):hover,
.footer-bottom a:hover {
  color: #fff !important;
  border-color: rgba(255, 143, 66, 0.34) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 34px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(255, 143, 66, 0.08) !important;
}

.workflow-tab:hover {
  color: #f8fafc !important;
  text-shadow: 0 0 18px rgba(255, 160, 84, 0.28), 0 0 16px rgba(98, 168, 255, 0.12) !important;
}

.button:focus-visible,
.footer-register:focus-visible,
.language-button:focus-visible,
.workflow-tab:focus-visible,
.nav-link-muted:focus-visible,
.footer-bottom a:focus-visible {
  outline: 2px solid rgba(255, 200, 106, 0.72) !important;
  outline-offset: 4px !important;
}

.scroll-soft {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.scroll-soft-item {
  opacity: var(--scroll-opacity, 1) !important;
  filter: blur(var(--scroll-blur, 0px)) saturate(var(--scroll-saturation, 1)) !important;
  transform: translateY(var(--scroll-y, 0px)) !important;
  transform-origin: center center !important;
  transition: opacity 180ms ease-out, filter 180ms ease-out, transform 180ms ease-out !important;
  will-change: opacity, filter, transform !important;
}

.hero-world-video.scroll-soft-item,
.site-header .scroll-soft-item,
.site-header.scroll-soft-item {
  opacity: 1 !important;
  filter: none !important;
  transform: translateX(-50%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-soft,
  .scroll-soft-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 1040px) {
  .hero {
    margin-bottom: -104px !important;
  }

  .problem {
    padding-top: 204px !important;
  }

  .site-footer {
    --footer-radius: 260px;
  }
}

@media (max-width: 640px) {
  .hero {
    margin-bottom: -82px !important;
  }

  .hero::after,
  .hero-world-video::after {
    height: 280px !important;
  }

  .problem {
    padding-top: 158px !important;
  }

  .workflow-art,
  .workflow-art-one,
  .workflow-art-two,
  .workflow-art-three,
  .workflow-art-four {
    padding: 7px !important;
  }

  .workflow-art img {
    border-radius: 16px !important;
  }

  .site-footer {
    --footer-radius: 180px;
    padding-top: 96px !important;
  }
}