:root {
  color-scheme: dark light;
  --bg-deep: #020203;
  --bg-base: #050506;
  --bg-elevated: #0a0a0c;
  --fg-primary: #edeef7;
  --fg-muted: #8a8f98;
  --accent-indigo: #5e6ad2;
  --accent-indigo-soft: rgba(94, 106, 210, 0.26);
  --motion-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg-primary);
  background: radial-gradient(ellipse at top, #0a0a0f 0%, #050506 52%, #020203 100%);
}

body.theme-light {
  color-scheme: light;
  background: radial-gradient(ellipse at top, #fbfdff 0%, #f4f7fc 52%, #edf2f9 100%);
}

.site-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(65% 58% at 14% 6%, rgba(94, 106, 210, 0.24), rgba(94, 106, 210, 0) 68%),
    radial-gradient(60% 52% at 88% 12%, rgba(42, 209, 191, 0.14), rgba(42, 209, 191, 0) 72%),
    radial-gradient(85% 62% at 50% 104%, rgba(94, 106, 210, 0.12), rgba(94, 106, 210, 0) 72%);
}

.site-bg::before,
.site-bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.site-bg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' viewBox='0 0 144 144'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='144' height='144' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: 0.014;
  mix-blend-mode: soft-light;
}

.site-bg::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.23;
}

@keyframes ambient-float-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -22px, 0) rotate(1deg);
  }
}

@keyframes ambient-float-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 18px, 0) rotate(-1deg);
  }
}

@keyframes ambient-pulse {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.92;
    transform: translate3d(0, -12px, 0) scale(1.03);
  }
}

.bg-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(120px);
  transform: translateZ(0);
  will-change: transform, opacity;
}

.bg-orb-1 {
  width: 56rem;
  height: 76rem;
  top: -20rem;
  left: -18rem;
  background: radial-gradient(circle at 35% 30%, rgba(94, 106, 210, 0.36) 0%, rgba(94, 106, 210, 0.1) 45%, rgba(94, 106, 210, 0) 76%);
  animation: ambient-float-a 11s ease-in-out infinite;
}

.bg-orb-2 {
  width: 44rem;
  height: 58rem;
  right: -14rem;
  top: 2rem;
  background: radial-gradient(circle at 40% 40%, rgba(72, 162, 255, 0.22) 0%, rgba(72, 162, 255, 0.08) 43%, rgba(72, 162, 255, 0) 74%);
  animation: ambient-float-b 9s ease-in-out infinite;
}

.bg-orb-3 {
  width: 48rem;
  height: 36rem;
  left: 34%;
  bottom: -18rem;
  background: radial-gradient(circle at 50% 40%, rgba(94, 106, 210, 0.16) 0%, rgba(94, 106, 210, 0.04) 42%, rgba(94, 106, 210, 0) 76%);
  animation: ambient-pulse 10s ease-in-out infinite;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  border-radius: 0.75rem;
  background: #ebf2ff;
  color: #071225;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.focus-ring:focus-visible {
  outline: 2px solid #5e6ad2;
  outline-offset: 2px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 5.2rem;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  background: rgba(10, 13, 24, 0.74);
  height: 2.15rem;
  padding: 0 0.5rem 0 0.35rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 24px -18px rgba(0, 0, 0, 0.62);
  cursor: pointer;
  transition:
    background-color 240ms var(--motion-expo),
    border-color 240ms var(--motion-expo),
    box-shadow 240ms var(--motion-expo),
    transform 220ms var(--motion-expo);
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.66);
  transform: translateY(-1px);
}

.theme-toggle-label {
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #dbeafe;
  user-select: none;
}

.theme-toggle-track {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(94, 106, 210, 0.26);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.theme-toggle-thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #eaf2ff;
  box-shadow: 0 3px 8px rgba(2, 7, 16, 0.42);
  transition:
    transform 240ms var(--motion-expo),
    background-color 240ms var(--motion-expo),
    box-shadow 240ms var(--motion-expo);
}

.theme-toggle[data-theme='light'] .theme-toggle-thumb {
  transform: translateX(1rem);
  background: #0e1b33;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  border-radius: 0.7rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c0d2f0;
  text-decoration: none;
  transition:
    background-color 220ms var(--motion-expo),
    color 220ms var(--motion-expo),
    border-color 220ms var(--motion-expo);
}

.nav-link:hover,
.nav-link.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #f2f7ff;
}

.company-menu {
  position: relative;
}

.company-menu-toggle {
  cursor: pointer;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.company-menu-icon {
  width: 0.95rem;
  height: 0.95rem;
  transition: transform 220ms var(--motion-expo);
}

.company-menu-toggle[aria-expanded='true'] .company-menu-icon {
  transform: rotate(180deg);
}

.company-dropdown {
  position: absolute;
  top: calc(100% + 0.55rem);
  inset-inline-start: 0;
  min-width: 10.75rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(10, 20, 39, 0.92);
  box-shadow: 0 18px 34px -24px rgba(3, 8, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.35rem;
  z-index: 60;
}

.company-dropdown-link {
  display: block;
  border-radius: 0.65rem;
  padding: 0.56rem 0.72rem;
  color: #d2e1f9;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background-color 220ms var(--motion-expo),
    color 220ms var(--motion-expo);
}

.company-dropdown-link:hover,
.company-dropdown-link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #f0f6ff;
}

.mobile-link {
  display: block;
  border-radius: 0.75rem;
  padding: 0.7rem 0.85rem;
  color: #c7d8f5;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition:
    background-color 220ms var(--motion-expo),
    color 220ms var(--motion-expo);
}

.mobile-link:hover,
.mobile-link:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.mobile-company-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mobile-company-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 220ms var(--motion-expo);
}

.mobile-company-toggle[aria-expanded='true'] .mobile-company-icon {
  transform: rotate(180deg);
}

.mobile-company-menu {
  margin-top: 0.35rem;
  margin-inline-start: 0.6rem;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
  padding-inline-start: 0.62rem;
  display: grid;
  gap: 0.25rem;
}

.mobile-sub-link {
  display: block;
  border-radius: 0.7rem;
  padding: 0.56rem 0.72rem;
  color: #bfd2f0;
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 600;
  transition:
    background-color 220ms var(--motion-expo),
    color 220ms var(--motion-expo);
}

.mobile-sub-link:hover,
.mobile-sub-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #edf4ff;
}

body.theme-light .text-ink {
  color: #0e1b33 !important;
}

body.theme-light .text-slate {
  color: #415174 !important;
}

body.theme-light .bg-orb-1 {
  background: radial-gradient(circle at 35% 30%, rgba(105, 138, 246, 0.3) 0%, rgba(105, 138, 246, 0.08) 44%, rgba(105, 138, 246, 0) 74%);
}

body.theme-light .bg-orb-2 {
  background: radial-gradient(circle at 40% 40%, rgba(77, 166, 255, 0.22) 0%, rgba(77, 166, 255, 0.06) 43%, rgba(77, 166, 255, 0) 74%);
}

body.theme-light .bg-orb-3 {
  background: radial-gradient(circle at 50% 40%, rgba(113, 142, 240, 0.22) 0%, rgba(113, 142, 240, 0.05) 42%, rgba(113, 142, 240, 0) 76%);
}

body.theme-light .site-bg {
  background:
    radial-gradient(65% 58% at 14% 6%, rgba(113, 142, 240, 0.18), rgba(113, 142, 240, 0) 68%),
    radial-gradient(60% 52% at 88% 12%, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0) 72%),
    radial-gradient(85% 62% at 50% 104%, rgba(94, 106, 210, 0.08), rgba(94, 106, 210, 0) 72%);
}

body.theme-light .site-bg::before {
  opacity: 0.02;
}

body.theme-light .site-bg::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  opacity: 0.32;
}

body.theme-light header nav,
body.theme-light #mobile-menu {
  border-color: rgba(15, 23, 42, 0.13) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.36) !important;
}

body.theme-light .theme-toggle {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 10px 20px -16px rgba(15, 23, 42, 0.34);
}

body.theme-light .theme-toggle-track {
  background: rgba(15, 23, 42, 0.18);
}

body.theme-light .theme-toggle-label {
  color: #29426b;
}

body.theme-light .nav-link {
  color: #2f436d;
}

body.theme-light .nav-link:hover,
body.theme-light .nav-link.is-active {
  background: rgba(255, 255, 255, 0.5);
  color: #0e1b33;
}

body.theme-light .company-dropdown {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 34px -25px rgba(15, 23, 42, 0.34);
}

body.theme-light .company-dropdown-link {
  color: #2f456f;
}

body.theme-light .company-dropdown-link:hover,
body.theme-light .company-dropdown-link:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: #0e1b33;
}

body.theme-light .mobile-link {
  color: #1f3256;
}

body.theme-light .mobile-link:hover,
body.theme-light .mobile-link:focus-visible {
  background: rgba(255, 255, 255, 0.5);
}

body.theme-light .mobile-company-menu {
  border-inline-start-color: rgba(15, 23, 42, 0.16);
}

body.theme-light .mobile-sub-link {
  color: #2f456f;
}

body.theme-light .mobile-sub-link:hover,
body.theme-light .mobile-sub-link:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: #0e1b33;
}

body.theme-light .glass-card,
body.theme-light .chapter-copy,
body.theme-light .dashboard-frame,
body.theme-light .kpi-card,
body.theme-light .chart-card,
body.theme-light .logo-pill,
body.theme-light .testimonial,
body.theme-light .faq-item,
body.theme-light .form-control {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 16px 28px -24px rgba(15, 23, 42, 0.24);
}

body.theme-light .chapter-title,
body.theme-light .kpi-value,
body.theme-light .faq-item summary,
body.theme-light .footer-title {
  color: #0e1b33;
}

body.theme-light .chapter-text,
body.theme-light .kpi-label,
body.theme-light .kpi-note,
body.theme-light .chart-title,
body.theme-light .bars span,
body.theme-light .testimonial,
body.theme-light .testimonial footer,
body.theme-light .form-label,
body.theme-light .form-control::placeholder,
body.theme-light .faq-item p,
body.theme-light .footer-links a {
  color: #475b7f;
}

body.theme-light .chapter-tag {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.66);
  color: #415174;
}

body.theme-light .cta-band {
  border-color: rgba(15, 23, 42, 0.14);
  background:
    radial-gradient(95% 120% at 0% 0%, rgba(56, 189, 248, 0.24), rgba(56, 189, 248, 0)),
    radial-gradient(95% 120% at 100% 100%, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0)),
    rgba(255, 255, 255, 0.7);
}

body.theme-light .analytics-hero-media img {
  box-shadow: 0 18px 34px -24px rgba(15, 23, 42, 0.3);
}

body.theme-light .hero-title {
  background-image: linear-gradient(180deg, #13284b 0%, #1f3d6a 44%, rgba(31, 61, 106, 0.72) 100%);
}

body.theme-light .hero-phone img {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 20px 40px -24px rgba(15, 23, 42, 0.34),
    0 0 72px rgba(94, 106, 210, 0.12);
}

body.theme-light .footer-links a:hover {
  color: #0e1b33;
}

body.theme-light .spotlight-surface::after {
  background: radial-gradient(
    320px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(94, 106, 210, 0.16),
    rgba(94, 106, 210, 0) 64%
  );
}

.glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 30px -18px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 1.25rem;
  transition:
    border-color 260ms var(--motion-expo),
    box-shadow 260ms var(--motion-expo),
    transform 260ms var(--motion-expo),
    background-color 260ms var(--motion-expo);
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.31);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.11),
    0 18px 44px -24px rgba(0, 0, 0, 0.6),
    0 0 72px rgba(94, 106, 210, 0.14);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.75rem;
  color: #35ddc9;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(17, 28, 50, 0.54);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-blur {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(74px);
  opacity: 0.95;
  animation: ambient-float-a 10s ease-in-out infinite;
}

.hero-blur-a {
  width: 20rem;
  height: 20rem;
  left: -2rem;
  top: -2.5rem;
  background: radial-gradient(circle, rgba(94, 106, 210, 0.42) 0%, rgba(94, 106, 210, 0) 74%);
}

.hero-blur-b {
  width: 18rem;
  height: 18rem;
  right: -2rem;
  bottom: -2rem;
  background: radial-gradient(circle, rgba(42, 209, 191, 0.34) 0%, rgba(42, 209, 191, 0) 74%);
  animation: ambient-float-b 9s ease-in-out infinite;
}

.hero-title {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(237, 238, 247, 0.92) 42%,
    rgba(237, 238, 247, 0.68) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-parallax-content,
.hero-parallax-visual {
  transform-origin: center top;
  will-change: transform, opacity, filter;
}

.iphone-frame {
  position: relative;
  margin-inline: auto;
  border-radius: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.iphone-frame::before {
  content: none;
}

.iphone-frame img {
  width: 100%;
  display: block;
  border-radius: 1rem;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
}

.hero-phone {
  width: min(100%, 19.8rem);
}

.hero-phone img {
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 22px 54px -26px rgba(0, 0, 0, 0.74),
    0 0 84px rgba(94, 106, 210, 0.16);
}

/* Home hero KPI cards: keep metric values aligned on the same baseline */
#home dl > div {
  display: flex;
  flex-direction: column;
}

#home dl dd {
  margin-top: auto;
  line-height: 1;
}

.spotlight-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: inherit;
}

.spotlight-surface > * {
  position: relative;
  z-index: 1;
}

.spotlight-surface::after {
  content: '';
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    320px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(94, 106, 210, 0.2),
    rgba(94, 106, 210, 0) 64%
  );
  opacity: var(--spot-opacity, 0);
  transition: opacity 240ms var(--motion-expo);
}

.spotlight-surface:is(:hover, :focus-within)::after {
  opacity: var(--spot-opacity, 0.36);
}

.medium-phone {
  width: min(100%, 17.4rem);
}

.small-phone {
  width: min(100%, 12.2rem);
}

.chapter-wrap {
  margin-inline: auto;
  width: min(94%, 78rem);
  padding-bottom: 4.25rem;
}

.story-chapter {
  padding-block: 2.8rem;
}

.chapter-inner {
  display: grid;
  gap: 1.4rem;
}

.chapter-visual {
  display: flex;
  justify-content: center;
}

.feature-media {
  width: min(100%, 17rem);
  margin: 0;
}

.feature-media img {
  width: 100%;
  display: block;
  border-radius: 0.9rem;
  object-fit: contain;
}

.chapter-visual-double {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
}

.chapter-copy {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(155deg, rgba(20, 33, 57, 0.66), rgba(11, 21, 40, 0.5));
  border-radius: 1.2rem;
  box-shadow: 0 14px 30px -22px rgba(2, 7, 17, 0.56);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  padding: 1.35rem;
  transition:
    border-color 260ms var(--motion-expo),
    box-shadow 260ms var(--motion-expo),
    transform 260ms var(--motion-expo);
}

.chapter-copy:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 44px -24px rgba(2, 7, 17, 0.62),
    0 0 62px rgba(94, 106, 210, 0.12);
}

.chapter-tag {
  margin: 0;
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.27);
  background: rgba(15, 27, 49, 0.58);
  color: #a0b8da;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
}

.chapter-title {
  margin: 0.85rem 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
  line-height: 1.22;
  color: #ebf3ff;
}

.chapter-text {
  margin: 0.8rem 0 0;
  color: #a9bddb;
  line-height: 1.65;
}

.coming-soon {
  margin: 1rem 0 0;
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, 0.38);
  background: rgba(251, 146, 60, 0.22);
  color: #ffd6b3;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.34rem 0.7rem;
}

.dashboard-frame {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(155deg, rgba(20, 33, 57, 0.66), rgba(12, 22, 42, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 38px -28px rgba(2, 7, 16, 0.64);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.6rem;
}

.dashboard-frame img {
  display: block;
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
}

.analytics-scroll-stage {
  position: relative;
}

.analytics-intro {
  position: sticky;
  top: 6.25rem;
  margin-bottom: 0.35rem;
  text-align: center;
  z-index: 1;
  will-change: opacity, transform;
}

.analytics-intro-sub {
  max-width: 44rem;
  margin-inline: auto;
}

.analytics-intro h2,
.analytics-intro-sub {
  will-change: opacity, transform, filter;
}

.analytics-hero-media {
  width: min(100%, 54rem);
  margin: 0.95rem auto 0;
  max-height: 2000px;
  overflow: hidden;
  transform-origin: center top;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
  will-change: opacity, transform, max-height, margin-top, visibility, filter;
}

.analytics-hero-media img {
  width: 100%;
  display: block;
  border-radius: 1rem;
  object-fit: contain;
  box-shadow: 0 18px 34px -24px rgba(2, 7, 16, 0.68);
}

.analytics-content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.975);
  will-change: opacity, transform, filter;
}

.list-item {
  position: relative;
  padding-left: 1.2rem;
}

.list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.54rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #0f9d8d, #0d7f73);
  box-shadow: 0 0 0 3px rgba(15, 157, 141, 0.18);
}

.kpi-card {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(14, 25, 45, 0.62);
  padding: 0.8rem;
}

.kpi-label {
  margin: 0;
  color: #9ab3d5;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
}

.kpi-value {
  margin: 0.3rem 0 0;
  color: #edf4ff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
}

.kpi-note {
  margin: 0.25rem 0 0;
  color: #aac0dc;
  font-size: 0.8rem;
}

.chart-card {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.23);
  background: rgba(14, 24, 44, 0.62);
  padding: 0.8rem;
}

.chart-title {
  margin: 0;
  color: #aec3df;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.funnel {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.36rem;
}

.funnel span {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  border-radius: 999px;
  width: var(--w);
  background: linear-gradient(90deg, rgba(15, 157, 141, 0.85), rgba(15, 157, 141, 0.44));
  color: #fff;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0 0.7rem;
  white-space: nowrap;
}

.bars {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.5rem;
}

.bars div {
  display: grid;
  gap: 0.32rem;
}

.bars span {
  color: #9bb2d0;
  font-size: 0.75rem;
  font-weight: 600;
}

.bars b {
  position: relative;
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.bars b::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--bar);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(54, 171, 252, 0.85), rgba(15, 157, 141, 0.78));
}

.logo-pill {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(14, 24, 45, 0.62);
  color: #d7e6ff;
  text-align: center;
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9rem 0.65rem;
  transition:
    border-color 240ms var(--motion-expo),
    box-shadow 240ms var(--motion-expo),
    transform 240ms var(--motion-expo);
}

.logo-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.54);
}

.testimonial {
  margin: 0;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(14, 25, 46, 0.64);
  padding: 1rem;
  color: #d5e4fc;
  transition:
    border-color 240ms var(--motion-expo),
    box-shadow 240ms var(--motion-expo),
    transform 240ms var(--motion-expo);
}

.testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.56);
}

.testimonial p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.96rem;
}

.testimonial footer {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: #a7bdd9;
  font-weight: 600;
}

.form-label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #cadcf6;
}

.form-control {
  width: 100%;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 24, 44, 0.64);
  color: #edf4ff;
  font-size: 0.94rem;
  padding: 0.72rem 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.form-control::placeholder {
  color: #8fa6c6;
}

.form-notice {
  margin-top: 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #d3e5ff;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.52rem 0.65rem;
}

.form-notice.is-success {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.2);
  color: #e6fff7;
}

.form-notice.is-error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.16);
  color: #ffe6e6;
}

.form-submit-busy {
  opacity: 0.8;
  cursor: not-allowed;
}

.faq-item {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(14, 24, 45, 0.62);
  padding: 0.75rem 0.9rem;
  transition:
    border-color 240ms var(--motion-expo),
    background-color 240ms var(--motion-expo),
    box-shadow 240ms var(--motion-expo);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 14px 28px -24px rgba(0, 0, 0, 0.45);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.3rem;
  color: #e4efff;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
}

.faq-item[open] summary::after {
  content: '-';
}

.faq-item p {
  margin: 0.65rem 0 0;
  color: #a9c0dd;
  font-size: 0.9rem;
  line-height: 1.55;
}

.cta-band {
  border-radius: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(95% 120% at 0% 0%, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0)),
    radial-gradient(95% 120% at 100% 100%, rgba(42, 209, 191, 0.18), rgba(42, 209, 191, 0)),
    rgba(13, 24, 45, 0.62);
  box-shadow: 0 18px 34px -24px rgba(2, 7, 16, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.footer-title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.96rem;
  color: #e6f0ff;
}

.footer-links {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.34rem;
}

.footer-links a {
  text-decoration: none;
  color: #afc2dd;
  font-size: 0.87rem;
}

.footer-links a:hover {
  color: #f2f7ff;
}

.reveal-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  filter: saturate(0.88);
  will-change: opacity, transform, filter;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: saturate(1);
  transition:
    opacity 620ms var(--motion-expo),
    transform 620ms var(--motion-expo),
    filter 620ms var(--motion-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (max-width: 767px) {
  .bg-orb-1 {
    width: 40rem;
    height: 52rem;
    left: -16rem;
    top: -16rem;
  }

  .bg-orb-2 {
    width: 30rem;
    height: 42rem;
    right: -12rem;
  }

  .bg-orb-3 {
    width: 34rem;
    height: 28rem;
    left: 12%;
    bottom: -14rem;
  }

  .site-bg::after {
    background-size: 52px 52px;
  }
}

@media (min-width: 640px) {
  .story-chapter {
    padding-block: 3.35rem;
  }

  .chapter-copy {
    padding: 1.6rem;
  }
}

@media (min-width: 1024px) {
  .chapter-inner {
    gap: 3rem;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .story-chapter-reverse .chapter-visual {
    order: 2;
  }

  .story-chapter-reverse .chapter-copy {
    order: 1;
  }

  .chapter-visual {
    position: sticky;
    top: 7.1rem;
  }

  .chapter-copy {
    padding: 1.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Restored classic visual style (rollback) ---- */
body {
  background:
    radial-gradient(95% 60% at 15% 5%, #102a56 0%, rgba(16, 42, 86, 0.22) 44%, transparent 76%),
    radial-gradient(90% 60% at 85% 15%, #113640 0%, rgba(17, 54, 64, 0.2) 42%, transparent 76%),
    linear-gradient(180deg, #050b17 0%, #071126 48%, #0a1630 100%);
}

body.theme-light {
  background:
    radial-gradient(95% 60% at 15% 5%, #e3f1ff 0%, rgba(227, 241, 255, 0.36) 44%, transparent 76%),
    radial-gradient(90% 60% at 85% 15%, #e0f8f2 0%, rgba(224, 248, 242, 0.34) 42%, transparent 76%),
    linear-gradient(180deg, #f8fbff 0%, #f3f7fd 48%, #eef4fb 100%);
}

.site-bg {
  background: none;
}

.site-bg::before,
.site-bg::after,
body.theme-light .site-bg::before,
body.theme-light .site-bg::after {
  content: none;
}

.bg-orb {
  filter: blur(6px);
  animation: none;
}

.bg-orb-1 {
  width: 23rem;
  height: 23rem;
  top: -5rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(66, 173, 234, 0.34) 0%, rgba(66, 173, 234, 0) 72%);
}

.bg-orb-2 {
  width: 20rem;
  height: 20rem;
  right: -4rem;
  top: 14rem;
  background: radial-gradient(circle, rgba(30, 190, 174, 0.22) 0%, rgba(30, 190, 174, 0) 70%);
}

.bg-orb-3 {
  width: 24rem;
  height: 24rem;
  left: 46%;
  bottom: -10rem;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0) 74%);
}

.focus-ring:focus-visible {
  outline: 2px solid #2ad1bf;
}

.theme-toggle {
  min-width: 6.2rem;
  border: 1px solid rgba(255, 255, 255, 0.46);
  background: rgba(14, 27, 49, 0.68);
  height: 2.45rem;
  gap: 0.45rem;
  padding: 0 0.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px -14px rgba(0, 0, 0, 0.45);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.theme-toggle:hover {
  transform: none;
}

.theme-toggle-track {
  position: relative;
  display: inline-flex;
  width: 2.85rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.18);
  box-shadow: none;
}

.theme-toggle-thumb {
  position: absolute;
  top: 0.175rem;
  left: 0.175rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  transition: transform 220ms ease, background-color 220ms ease;
}

.theme-toggle[data-theme='light'] .theme-toggle-thumb {
  transform: translateX(1.3rem);
}

.theme-toggle-label {
  display: none;
}

.theme-toggle-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: #b4c8e7;
  opacity: 0.76;
  transition: color 180ms ease, opacity 180ms ease;
}

.theme-toggle-icon svg {
  width: 100%;
  height: 100%;
}

.theme-toggle[data-theme='dark'] .theme-toggle-icon-moon {
  color: #eaf2ff;
  opacity: 1;
}

.theme-toggle[data-theme='dark'] .theme-toggle-icon-sun {
  opacity: 0.62;
}

.theme-toggle[data-theme='light'] .theme-toggle-icon-sun {
  color: #f59e0b;
  opacity: 1;
}

.theme-toggle[data-theme='light'] .theme-toggle-icon-moon {
  color: #5f7398;
  opacity: 0.82;
}

.nav-link {
  transition: background-color 200ms ease, color 200ms ease;
}

.mobile-link {
  transition: background-color 200ms ease;
}

body.theme-light .bg-orb-1 {
  background: radial-gradient(circle, rgba(137, 214, 248, 0.4) 0%, rgba(137, 214, 248, 0) 72%);
}

body.theme-light .bg-orb-2 {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.26) 0%, rgba(16, 185, 129, 0) 70%);
}

body.theme-light .bg-orb-3 {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(249, 115, 22, 0) 74%);
}

body.theme-light .theme-toggle {
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 18px -14px rgba(15, 23, 42, 0.34);
}

body.theme-light .theme-toggle-track {
  background: rgba(15, 23, 42, 0.14);
}

body.theme-light .theme-toggle-thumb {
  background: #0f1f3c;
}

body.theme-light .theme-toggle-icon {
  color: #5f7398;
}

.glass-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(155deg, rgba(21, 35, 61, 0.66), rgba(13, 22, 41, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 30px -22px rgba(4, 8, 18, 0.54);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 1.25rem;
  transition: none;
}

.glass-card:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 30px -22px rgba(4, 8, 18, 0.54);
}

.hero-blur {
  filter: blur(2px);
  opacity: 1;
  animation: none;
}

.hero-blur-a {
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(85, 178, 228, 0.42) 0%, rgba(85, 178, 228, 0) 70%);
}

.hero-blur-b {
  width: 15rem;
  height: 15rem;
  background: radial-gradient(circle, rgba(42, 209, 191, 0.32) 0%, rgba(42, 209, 191, 0) 72%);
}

.hero-title,
body.theme-light .hero-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
}

.hero-parallax-content,
.hero-parallax-visual {
  will-change: auto;
}

.hero-phone img,
body.theme-light .hero-phone img {
  box-shadow: none;
}

.spotlight-surface,
.spotlight-surface > * {
  position: static;
  isolation: auto;
  z-index: auto;
  overflow: visible;
  border-radius: 0;
}

.spotlight-surface::after,
body.theme-light .spotlight-surface::after {
  content: none !important;
}

.chapter-copy {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(155deg, rgba(20, 33, 57, 0.66), rgba(11, 21, 40, 0.5));
  border-radius: 1.2rem;
  box-shadow: 0 14px 30px -22px rgba(2, 7, 17, 0.56);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  transition: none;
}

.chapter-copy:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 30px -22px rgba(2, 7, 17, 0.56);
}

.logo-pill,
.testimonial,
.faq-item {
  transition: none;
}

.logo-pill:hover,
.testimonial:hover,
.faq-item:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  filter: none;
  will-change: auto;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 460ms ease-out, transform 460ms ease-out;
  transition-delay: 0ms;
}

/* Plain analytics section */
.analytics-intro {
  position: static;
  top: auto;
  margin-bottom: 0.75rem;
  text-align: center;
  z-index: auto;
  will-change: auto;
}

.analytics-intro h2,
.analytics-intro-sub {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

.analytics-hero-media {
  margin: 1rem auto 0;
  max-height: none;
  opacity: 1;
  transform: none;
  filter: none;
  visibility: visible;
  will-change: auto;
}

.analytics-content {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Light theme consistency fixes */
body.theme-light .form-control,
body.theme-light select.form-control,
body.theme-light textarea.form-control {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: #0e1b33;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 0 rgba(15, 23, 42, 0.03);
}

body.theme-light .form-control::placeholder {
  color: #667da6;
  opacity: 1;
}

body.theme-light .form-notice {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.88);
  color: #32496f;
}

body.theme-light .form-notice.is-success {
  border-color: rgba(15, 118, 110, 0.32);
  background: rgba(15, 118, 110, 0.15);
  color: #0f534f;
}

body.theme-light .form-notice.is-error {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.13);
  color: #8b1f1f;
}

body.theme-light select.form-control option {
  color: #0e1b33;
  background: #ffffff;
}

body.theme-light .form-control:focus-visible {
  outline-color: #2f72ff;
}

body.theme-light .logo-pill {
  color: #1f3458;
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 20px -18px rgba(15, 23, 42, 0.26);
}

body.theme-light .logo-pill:hover {
  border-color: rgba(15, 23, 42, 0.28);
}

body.theme-light .kpi-label,
body.theme-light .kpi-note,
body.theme-light .chart-title,
body.theme-light .bars span {
  color: #44597f;
}

body.theme-light .funnel span {
  color: #f8fbff;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.78), rgba(13, 148, 136, 0.7));
}

body.theme-light .bars b {
  background: rgba(15, 23, 42, 0.14);
}

body.theme-light .bars b::after {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.84), rgba(13, 148, 136, 0.78));
}

@media (max-width: 767px) {
  .bg-orb-1 {
    width: 23rem;
    height: 23rem;
    left: -6rem;
    top: -5rem;
  }

  .bg-orb-2 {
    width: 20rem;
    height: 20rem;
    right: -4rem;
    top: 14rem;
  }

  .bg-orb-3 {
    width: 24rem;
    height: 24rem;
    left: 46%;
    bottom: -10rem;
  }
}

/* ---- Use Cases ---- */
.usecase-card {
  display: flex;
  flex-direction: column;
}

.usecase-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f6fbff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 20px -16px rgba(0, 0, 0, 0.52);
}

.usecase-photo {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 20px -16px rgba(0, 0, 0, 0.52);
}

.usecase-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-riley {
  background: linear-gradient(135deg, #2dd4bf, #0284c7);
}

.avatar-casey {
  background: linear-gradient(135deg, #c084fc, #7c3aed);
}

.avatar-blake {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.usecase-link {
  margin-top: auto;
}

.usecase-reco-wrap {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 0.85rem;
}

.usecase-reco-title {
  margin: 0;
  color: #d6e6ff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.usecase-reco-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.usecase-reco-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.44rem 0.54rem;
}

.usecase-reco-name {
  color: #eaf2ff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.usecase-reco-score {
  border-radius: 999px;
  border: 1px solid rgba(42, 209, 191, 0.34);
  background: rgba(15, 157, 141, 0.2);
  color: #d8fff8;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.48rem;
  white-space: nowrap;
}

.usecase-reco-loading,
.usecase-reco-error {
  border-radius: 0.7rem;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: #9eb6d6;
  font-size: 0.78rem;
  padding: 0.48rem 0.55rem;
}

body.theme-light .usecase-avatar {
  color: #ffffff;
  border-color: rgba(15, 23, 42, 0.2);
}

body.theme-light .usecase-photo {
  border-color: rgba(15, 23, 42, 0.2);
}

body.theme-light .usecase-link {
  box-shadow: 0 10px 22px -16px rgba(234, 88, 12, 0.45);
}

body.theme-light .usecase-reco-wrap {
  border-top-color: rgba(15, 23, 42, 0.14);
}

body.theme-light .usecase-reco-title {
  color: #3d557b;
}

body.theme-light .usecase-reco-item {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.84);
}

body.theme-light .usecase-reco-name {
  color: #152c4c;
}

body.theme-light .usecase-reco-score {
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.16);
  color: #0f534f;
}

body.theme-light .usecase-reco-loading,
body.theme-light .usecase-reco-error {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.82);
  color: #4a6288;
}

/* ---- Use Case Detail Pages ---- */
.usecase-page .theme-toggle {
  margin-right: 0;
}

.usecase-hero {
  margin-inline: auto;
  width: min(92%, 76rem);
}

.usecase-hero-card {
  padding: 1.5rem;
}

.usecase-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #a7bdd9;
  text-decoration: none;
}

.usecase-back-link:hover {
  color: #f2f7ff;
}

.usecase-header-grid {
  margin-top: 1rem;
  display: grid;
  gap: 1.2rem;
}

.usecase-title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.usecase-avatar-lg {
  width: 3.8rem;
  height: 3.8rem;
  font-size: 1.55rem;
}

.usecase-tagline {
  margin-top: 0.35rem;
  font-size: 0.98rem;
  color: #a8bfdb;
}

.usecase-chip-list {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.usecase-chip {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(13, 24, 45, 0.58);
  color: #d7e7ff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.62rem;
}

.usecase-signal-list {
  margin: 0.15rem 0 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.4rem;
  color: #a9bddb;
  font-size: 0.9rem;
  line-height: 1.52;
}

.usecase-panel {
  margin-inline: auto;
  width: min(92%, 76rem);
}

.usecase-metric-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usecase-metric-card {
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(13, 24, 45, 0.54);
  padding: 0.8rem;
}

.usecase-metric-label {
  margin: 0;
  color: #9fb7d7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.usecase-metric-value {
  margin: 0.3rem 0 0;
  color: #ebf3ff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.42rem;
  font-weight: 700;
}

.usecase-top-cuisines {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.usecase-cuisine-pill {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #dce9ff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.32rem 0.65rem;
}

.usecase-controls {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
}

.usecase-control {
  display: grid;
  gap: 0.35rem;
}

.usecase-control-label {
  color: #c8daf5;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.usecase-control-input {
  width: 100%;
  min-height: 2.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(13, 24, 45, 0.6);
  color: #edf4ff;
  font-size: 0.9rem;
  padding: 0.58rem 0.7rem;
}

.usecase-control-input::placeholder {
  color: #91a8c8;
}

.usecase-control-input:focus-visible {
  outline: 2px solid #2ad1bf;
  outline-offset: 2px;
}

.usecase-control-inline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(13, 24, 45, 0.44);
  color: #d9e8ff;
  padding: 0.6rem 0.7rem;
  font-size: 0.88rem;
}

.usecase-control-inline input {
  accent-color: #2ad1bf;
}

.usecase-results-header {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.usecase-results-count {
  color: #a8bfdc;
  font-size: 0.86rem;
}

.usecase-results-grid {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.9rem;
}

.usecase-rec-card {
  padding: 1rem;
}

.usecase-rec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.usecase-rec-title {
  margin: 0;
  color: #eef5ff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
}

.usecase-rec-sub {
  margin: 0.28rem 0 0;
  color: #9eb6d6;
  font-size: 0.82rem;
}

.usecase-score-pill {
  border-radius: 999px;
  border: 1px solid rgba(42, 209, 191, 0.35);
  background: rgba(15, 157, 141, 0.22);
  color: #ddfff8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.58rem;
  white-space: nowrap;
}

.usecase-meta-row {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.usecase-tag {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #d7e5fb;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.56rem;
}

.usecase-tag-offer {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.22);
  color: #ffd7bb;
}

.usecase-progress {
  margin-top: 0.8rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.usecase-progress > span {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #10b981);
}

.usecase-reasons {
  margin-top: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.usecase-reason {
  border-radius: 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #c9daf5;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
}

.usecase-empty {
  margin-top: 1rem;
  border-radius: 0.95rem;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: rgba(13, 24, 45, 0.34);
  color: #a8bdd9;
  text-align: center;
  font-size: 0.9rem;
  padding: 1rem;
}

.usecase-load-more {
  margin-top: 0.95rem;
}

body.theme-light .usecase-back-link {
  color: #4a6288;
}

body.theme-light .usecase-back-link:hover {
  color: #182d4f;
}

body.theme-light .usecase-tagline,
body.theme-light .usecase-results-count {
  color: #4e6489;
}

body.theme-light .usecase-chip,
body.theme-light .usecase-cuisine-pill,
body.theme-light .usecase-tag,
body.theme-light .usecase-reason,
body.theme-light .usecase-control-inline {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.84);
  color: #30466d;
}

body.theme-light .usecase-control-label {
  color: #36507a;
}

body.theme-light .usecase-control-input {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: #0f203d;
}

body.theme-light .usecase-control-input::placeholder {
  color: #667da6;
}

body.theme-light .usecase-signal-list,
body.theme-light .usecase-rec-sub {
  color: #4c6286;
}

body.theme-light .usecase-title,
body.theme-light .usecase-rec-title,
body.theme-light .usecase-metric-value {
  color: #142a4a;
}

body.theme-light .usecase-metric-card {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.84);
}

body.theme-light .usecase-metric-label {
  color: #466086;
}

body.theme-light .usecase-score-pill {
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.18);
  color: #0f534f;
}

body.theme-light .usecase-tag-offer {
  border-color: rgba(234, 88, 12, 0.32);
  background: rgba(249, 115, 22, 0.2);
  color: #9a3f12;
}

body.theme-light .usecase-empty {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.84);
  color: #445b7f;
}

@media (min-width: 768px) {
  .usecase-header-grid {
    grid-template-columns: 1.12fr 0.88fr;
    align-items: start;
  }

  .usecase-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .usecase-controls {
    grid-template-columns: 1.4fr 0.9fr 0.9fr auto;
    align-items: end;
  }

  .usecase-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .usecase-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Use Case Business Layout ---- */
.case-hero-card {
  padding: 1.5rem;
}

.case-hero-grid {
  display: grid;
  gap: 1rem;
}

.case-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.case-summary {
  margin: 0;
  color: #a9bddb;
  font-size: 0.98rem;
  line-height: 1.6;
}

.case-framing-card {
  height: 100%;
}

.case-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

.case-list-item {
  color: #a9bddb;
  font-size: 0.9rem;
  line-height: 1.5;
}

.case-metric-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-metric-card {
  border-radius: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(13, 24, 45, 0.56);
  padding: 0.8rem;
}

.case-metric-label {
  margin: 0;
  color: #9fb7d7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.case-metric-value {
  margin: 0.28rem 0 0;
  color: #ebf3ff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.case-cuisine-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.case-cuisine-pill {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #dce9ff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
}

.case-rec-grid {
  display: grid;
  gap: 0.9rem;
}

.case-rec-card {
  padding: 1rem;
}

.case-rec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.case-rec-title {
  margin: 0;
  color: #eef5ff;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.case-rec-sub {
  margin: 0.25rem 0 0;
  color: #9eb6d6;
  font-size: 0.82rem;
}

.case-score-pill {
  border-radius: 999px;
  border: 1px solid rgba(42, 209, 191, 0.35);
  background: rgba(15, 157, 141, 0.22);
  color: #ddfff8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
}

.case-rec-tags {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.case-tag {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #d7e5fb;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.24rem 0.54rem;
}

.case-tag-offer {
  border-color: rgba(249, 115, 22, 0.38);
  background: rgba(249, 115, 22, 0.2);
  color: #ffd7bb;
}

.case-rec-rationale {
  margin: 0.75rem 0 0;
  color: #a9bddb;
  font-size: 0.84rem;
  line-height: 1.5;
}

.case-playbook {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.6rem;
}

.case-playbook-step {
  color: #e3efff;
  line-height: 1.55;
}

body.theme-light .case-summary,
body.theme-light .case-list-item,
body.theme-light .case-rec-sub,
body.theme-light .case-rec-rationale,
body.theme-light .case-playbook-step {
  color: #4a6388;
}

body.theme-light .case-metric-card {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.84);
}

body.theme-light .case-metric-label {
  color: #466086;
}

body.theme-light .case-metric-value,
body.theme-light .case-rec-title {
  color: #142a4a;
}

body.theme-light .case-cuisine-pill,
body.theme-light .case-tag {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.84);
  color: #30466d;
}

body.theme-light .case-score-pill {
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.18);
  color: #0f534f;
}

body.theme-light .case-tag-offer {
  border-color: rgba(234, 88, 12, 0.32);
  background: rgba(249, 115, 22, 0.2);
  color: #9a3f12;
}

@media (min-width: 768px) {
  .case-hero-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 1.2rem;
  }

  .case-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-rec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .case-rec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Language toggle + RTL support */
.language-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(12, 20, 38, 0.78);
  color: #eaf2ff;
  font-family: 'Poppins', 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px -16px rgba(3, 8, 18, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 220ms var(--motion-expo),
    border-color 220ms var(--motion-expo),
    background-color 220ms var(--motion-expo),
    box-shadow 220ms var(--motion-expo);
}

.language-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 34px -22px rgba(3, 8, 18, 0.84);
}

body.theme-light .language-toggle {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.82);
  color: #1b335c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 26px -18px rgba(15, 23, 42, 0.34);
}

body.lang-ar {
  font-family: 'Noto Sans Arabic', 'Open Sans', sans-serif;
}

body.lang-ar .font-heading {
  font-family: 'Noto Sans Arabic', 'Poppins', sans-serif;
}

body.lang-ar #hero-badge,
body.lang-ar #home dl dt,
body.lang-ar .kpi-label,
body.lang-ar .chart-title {
  letter-spacing: 0;
  text-transform: none;
}

html[dir='rtl'] .list-item {
  padding-left: 0;
  padding-right: 1.2rem;
}

html[dir='rtl'] .list-item::before {
  left: auto;
  right: 0;
}

html[dir='rtl'] .faq-item summary {
  padding-right: 0;
  padding-left: 1.3rem;
}

html[dir='rtl'] .faq-item summary::after {
  right: auto;
  left: 0;
}

html[dir='rtl'] .bars b::after {
  left: auto;
  right: 0;
}

@media (max-width: 640px) {
  .language-toggle {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 0.95rem;
  }
}

/* Careers page */
.careers-hero-section {
  position: relative;
  display: flex;
  align-items: center;
}

.careers-hero-grid {
  width: min(92%, 76rem);
}

.careers-hero-visual {
  position: relative;
  width: 100%;
}

.careers-hero-frame {
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 36px -26px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 0.95rem;
  margin: 0;
}

.careers-hero-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.9rem;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 28px -22px rgba(2, 7, 16, 0.75);
}

.open-positions-panel {
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: none;
  transition: none;
}

.open-positions-panel.is-open {
  max-height: none;
  opacity: 1;
  transform: none;
}

#open-positions {
  scroll-margin-top: 8rem;
}

.open-positions-panel .glass-card:hover {
  transform: none;
}

.visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-input-shell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 24, 44, 0.64);
  padding: 0.55rem 0.62rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.file-input-trigger {
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.12);
  color: #edf4ff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.56rem 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 220ms var(--motion-expo),
    border-color 220ms var(--motion-expo);
}

.file-input-trigger:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
}

.file-input-name {
  min-width: 0;
  color: #a9bddb;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.theme-light .careers-hero-frame {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 16px 30px -24px rgba(15, 23, 42, 0.28);
}

body.theme-light .careers-hero-frame img {
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.32);
}

body.theme-light .file-input-shell {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

body.theme-light .file-input-trigger {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(15, 23, 42, 0.05);
  color: #152c4e;
}

body.theme-light .file-input-trigger:hover {
  border-color: rgba(15, 23, 42, 0.24);
  background: rgba(15, 23, 42, 0.09);
}

body.theme-light .file-input-name {
  color: #486285;
}

/* Keep careers sections visible even after viewport resize changes */
.careers-page .reveal-item,
.careers-page .reveal-item.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

@media (min-width: 1024px) {
  .careers-hero-grid {
    min-height: calc(100dvh - 9.5rem);
  }

  .careers-hero-visual {
    height: calc(100dvh - 11rem);
  }

  .careers-hero-frame {
    height: 100%;
    min-height: 0;
  }

  .careers-hero-frame img {
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .careers-hero-section {
    min-height: 0;
  }

  .file-input-shell {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .file-input-name {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .open-positions-panel {
    transition: none;
  }
}