/* ============================================================
   ROOT VARIABLES & RESET
   ============================================================ */
:root {
  --dark-title: #181819;
  --white: #ffffff;
  --black: #000;
  --bg-gray: #f5f5f7;
  --navy-blue: #000033;
  --light-grey: #999;
  --purple-5: #7638fa;
  --purple-6: #5627ba;
  --purple-7: #472296;
  --purple-btn: #8c6cff;
  --purple-0: #ebedff;
  --new-dark-purple: #0f042d;
  --dark-navy: #0a0a2e;
  --gray-copy: #65707b;
  --body-gray: #515152;
  --gray-lines: #e0e2e5;
  --gray-bg: #f7f8fa;
  --font: 'DM Sans', Arial, sans-serif;
}

/* Skip-to-content accessibility link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #fff;
  color: #0f042d;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--dark-title);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 12px rgba(0,0,0,0.04);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-home .navbar {
  background: rgba(10, 5, 32, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 16px rgba(0,0,0,0.18);
}

.page-home.hero-passed .navbar {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 12px rgba(0,0,0,0.04);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 28px;
  width: auto;
  display: block;
  filter: invert(1);
}

.page-home .nav-logo-img {
  filter: none;
}

.page-home.hero-passed .nav-logo-img {
  filter: invert(1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-item {
  position: relative;
}

.nav-item > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

.nav-item > a:hover,
.nav-item:hover > a {
  background: var(--gray-bg);
  color: var(--purple-5);
}

.page-home .nav-item > a {
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.15s, color 0.15s;
}

.page-home .nav-item > a:hover,
.page-home .nav-item:hover > a {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.page-home.hero-passed .nav-item > a {
  color: #333;
}

.page-home.hero-passed .nav-item > a:hover,
.page-home.hero-passed .nav-item:hover > a {
  background: var(--gray-bg);
  color: var(--purple-5);
}

.chevron {
  font-size: 16px;
  transition: transform 0.2s;
  color: #888;
}

.page-home .chevron {
  color: rgba(255, 255, 255, 0.5);
}

.page-home.hero-passed .chevron {
  color: #888;
}

.nav-item:hover .chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--gray-lines);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  padding: 28px 20px 20px;
  display: none;
  min-width: 200px;
  gap: 24px;
  z-index: 300;
}

.has-dropdown:hover .dropdown {
  display: flex;
}

/* Bridge the gap so hovering into the dropdown doesn't lose hover state */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.dropdown-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 4px;
  margin-top: 4px;
}

.dropdown-col a {
  font-size: 15px;
  color: #444;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.dropdown-col a:hover {
  background: var(--purple-0);
  color: var(--purple-5);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-login {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.15s;
  white-space: nowrap;
}
.btn-login:hover { color: var(--purple-5); }

.page-home .btn-login { color: rgba(255, 255, 255, 0.85); }
.page-home .btn-login:hover { color: #fff; }
.page-home.hero-passed .btn-login { color: #333; }
.page-home.hero-passed .btn-login:hover { color: var(--purple-5); }

.btn-demo {
  background: var(--purple-btn);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-demo:hover {
  background: var(--purple-6);
  transform: translateY(-1px);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger → X when open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Mobile Nav Drawer ───────────────────────────────────── */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 899;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.nav-mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .nav-mobile-menu { display: block; }
}

.nav-mobile-inner {
  padding: 20px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nav-mobile-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #aaa;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.nav-mobile-section {
  display: flex;
  flex-direction: column;
}

.nav-mobile-section a {
  font-size: 16px;
  font-family: 'DM Sans', sans-serif;
  color: #333;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: block;
  transition: color 0.15s;
}

.nav-mobile-section a:last-child { border-bottom: none; }
.nav-mobile-section a:hover { color: var(--purple-5); }

.nav-mobile-footer {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.nav-mobile-footer a {
  font-size: 16px;
  font-family: 'DM Sans', sans-serif;
  color: #333;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: block;
}

.nav-mobile-footer a:hover { color: var(--purple-5); }

.nav-mobile-demo {
  margin-top: 14px;
  text-align: center;
  padding: 13px 20px !important;
  border-radius: 10px !important;
  border-bottom: none !important;
  display: block;
  font-size: 16px;
  font-weight: 600;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: linear-gradient(180deg, #0a0520 0%, #150840 40%, #1e0d5a 70%, #2d1070 100%);
  padding: 140px 24px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.hero-content {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding-bottom: 20px;
}

.hero-eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
  animation: hero-fade-up 0.65s ease-out both;
  animation-delay: 0.1s;
}

.hero-title {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 20px;
  animation: hero-fade-up 0.7s ease-out both;
  animation-delay: 0.24s;
}

.hero-sub {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.6;
  animation: hero-fade-up 0.7s ease-out both;
  animation-delay: 0.4s;
}

.hero-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  animation: hero-fade-up 0.65s ease-out both;
  animation-delay: 0.54s;
}

.hero-btn {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
  background: rgba(255,255,255,0.08);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.hero-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-2px);
}

/* ---- Mosaic animations ---- */
@keyframes mosaic-float {
  0%, 100% { transform: none; }
  50%       { transform: none; }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mosaic-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Card 1: scan beam sweeping across */
@keyframes scan-sweep {
  0%   { left: -40%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
/* Card 2: amber fill bar */
@keyframes alert-fill {
  0%, 8%    { width: 0; }
  60%, 78%  { width: 82%; }
  95%, 100% { width: 0; }
}
/* Card 3: scan line moving down the doc */
@keyframes doc-scan-move {
  0%, 10%   { top: 3px; opacity: 0; }
  16%       { opacity: 1; }
  78%, 88%  { top: 34px; opacity: 1; }
  98%, 100% { top: 34px; opacity: 0; }
}
/* Card 3: checkmark draws then fades */
@keyframes draw-checkmark {
  0%, 28%   { stroke-dashoffset: 14; }
  58%, 82%  { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 14; }
}
@keyframes badge-pop {
  0%, 28%   { opacity: 0; transform: scale(0.4); }
  52%, 80%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.4); }
}
/* Card 4: error dot blinks */
@keyframes error-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%      { box-shadow: 0 0 8px 4px rgba(239,68,68,0.45); }
}
/* Card 4: underline draws under key text */
@keyframes hl-draw {
  0%, 12%   { width: 0; opacity: 1; }
  55%, 80%  { width: 100%; opacity: 1; }
  95%, 100% { width: 0; opacity: 0; }
}
/* Card 5: typing dots bounce */
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
/* Card 5: typing group shows then hides */
@keyframes typing-cycle {
  0%, 5%    { opacity: 1; }
  38%, 100% { opacity: 0; }
}
/* Card 5: bubble hides then appears */
@keyframes bubble-cycle {
  0%, 32%   { opacity: 0; transform: translateY(7px); }
  50%, 82%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(-3px); }
}
/* Card 6: tick pops in */
@keyframes tick-pop {
  0%, 18%   { opacity: 0; transform: scale(0.3); }
  38%, 78%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.3); }
}
/* Card 6: big number pulses */
@keyframes num-pulse {
  0%, 100% { color: rgba(255,255,255,0.9); text-shadow: none; }
  45%      { color: #a78bfa; text-shadow: 0 0 18px rgba(140,108,255,0.6); }
}
/* Card 7: pulse rings expand */
@keyframes pulse-ring-out {
  0%   { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.8); opacity: 0; }
}
/* Card 8: warn tag attention shake */
@keyframes tag-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
/* Card 9: fill bar grows */
@keyframes fill-grow {
  0%, 6%    { width: 0; }
  62%, 80%  { width: 74%; }
  96%, 100% { width: 0; }
}
/* Card 9: dollar amount glows */
@keyframes dollar-glow {
  0%, 100% { color: rgba(255,255,255,0.85); text-shadow: none; }
  50%      { color: #c4b5fd; text-shadow: 0 0 14px rgba(140,108,255,0.5); }
}
/* Warn tag pulse */
@keyframes warn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  50%      { box-shadow: 0 0 10px 3px rgba(245,166,35,0.35); }
}
/* Ok tag glow */
@keyframes ok-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); }
  50%      { box-shadow: 0 0 10px 4px rgba(62,207,142,0.3); }
}

/* Mosaic grid */
.hero-mosaic {
  position: relative;
  width: calc(100% + 48px);
  margin-left: -24px;
  padding-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 97%);
  mask-image: linear-gradient(to bottom, black 75%, transparent 97%);
  animation: hero-fade-up 0.8s ease-out both;
  animation-delay: 0.6s;
}

.hero-mosaic::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(140,108,255,0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.4fr 1fr;
  grid-auto-rows: minmax(80px, auto);
  gap: 0;
  padding: 0;
}

.mosaic-card {
  background: linear-gradient(145deg, rgba(60,40,130,0.7) 0%, rgba(25,15,70,0.8) 100%);
  border: none;
  border-radius: 0;
  padding: 10px 12px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  line-height: 1.4;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: mosaic-card-in 0.55s ease-out both;
}

/* Stagger delays are applied by JS (diagonal-mosaic-stagger script in index.html)
   based on actual rendered card positions — fallback initial delay for no-JS */
.mosaic-card { animation-delay: 0.65s; }

.mosaic-card--wide  { grid-column: span 2; flex-direction: row; align-items: center; text-align: left; gap: 12px; }
.mosaic-card--image { align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(10,5,35,0.85) 0%, rgba(30,15,70,0.75) 100%); }
.mosaic-card--chat  { gap: 6px; }
.mosaic-card--light-purple {
  background: linear-gradient(145deg, rgba(160,130,255,0.35) 0%, rgba(120,85,240,0.45) 100%);
}

/* ---- Shared chip ---- */
.mosaic-chip {
  width: 32px;
  height: 32px;
  background: rgba(140,108,255,0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Card 1: scan beam ---- */
.mosaic-card--scan {
  position: relative;
  overflow: hidden;
}
.mosaic-scan-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, transparent, rgba(140,108,255,0.22), transparent);
  animation: scan-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* ---- Card 2: alert bar ---- */
.mosaic-alert-track {
  width: 100%;
  height: 3px;
  background: rgba(245,166,35,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.mosaic-alert-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f5a623, #f5c06a);
  border-radius: 2px;
  animation: alert-fill 5s ease-in-out infinite;
}

/* ---- Card 3: doc verify ---- */
.mosaic-doc-wrap {
  position: relative;
  width: 32px;
  height: 40px;
}
.mosaic-doc-scan-line {
  position: absolute;
  left: -2px; right: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(140,108,255,0.9), transparent);
  border-radius: 1px;
  top: 3px;
  animation: doc-scan-move 5s ease-in-out infinite;
}
.mosaic-drawn-check {
  position: absolute;
  bottom: -10px; right: -12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(62,207,142,0.2);
  border: 1px solid rgba(62,207,142,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-pop 5s ease-in-out infinite;
}
.mosaic-drawn-check path {
  animation: draw-checkmark 5s ease-in-out infinite;
}

/* ---- Card 4: mismatch ---- */
.mosaic-error-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mosaic-error-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: error-pulse 1.8s ease-in-out infinite;
}
.mosaic-error-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(239,68,68,0.85);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mosaic-hl {
  position: relative;
}
.mosaic-hl::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 0;
  background: rgba(239,68,68,0.7);
  animation: hl-draw 5s ease-in-out infinite;
}

/* ---- Card 5: typing → bubble ---- */
.mosaic-typing-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
  animation: typing-cycle 6s ease-in-out infinite;
}
.mosaic-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.mosaic-dot:nth-child(1) { animation: dot-bounce 1.1s ease-in-out infinite; }
.mosaic-dot:nth-child(2) { animation: dot-bounce 1.1s ease-in-out 0.18s infinite; }
.mosaic-dot:nth-child(3) { animation: dot-bounce 1.1s ease-in-out 0.36s infinite; }
.mosaic-card--confirm .mosaic-bubble--out {
  animation: bubble-cycle 6s ease-in-out infinite;
}

/* ---- Card 6: resolved counter ---- */
.mosaic-big-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.9);
  animation: num-pulse 4s ease-in-out infinite;
}
.mosaic-ticks {
  display: flex;
  gap: 5px;
}
.mosaic-tick {
  font-size: 11px;
  font-weight: 700;
  color: #3ecf8e;
}
.mosaic-tick:nth-child(1) { animation: tick-pop 4s ease-in-out 0s infinite; }
.mosaic-tick:nth-child(2) { animation: tick-pop 4s ease-in-out 0.45s infinite; }
.mosaic-tick:nth-child(3) { animation: tick-pop 4s ease-in-out 0.9s infinite; }

/* ---- Card 7: live monitoring ---- */
.mosaic-live-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.mosaic-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1.5px solid rgba(140,108,255,0.5);
  animation: pulse-ring-out 2.2s ease-out infinite;
}
.mosaic-pulse-ring--2 { animation-delay: 1.1s; }
.mosaic-live-num {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* ---- Card 8: review tag shakes ---- */
.mosaic-card--review .mosaic-tag--warn {
  animation: warn-pulse 2.8s ease-in-out infinite,
             tag-shake 4s ease-in-out 2s infinite;
}

/* ---- Card 9: variance fill bar ---- */
.mosaic-fill-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.mosaic-fill-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8c6cff, #c4b5fd);
  border-radius: 2px;
  animation: fill-grow 5.5s ease-in-out infinite;
}
.mosaic-dollar-amt {
  font-weight: 600;
  animation: dollar-glow 5.5s ease-in-out infinite;
}

/* ---- Card 10: expiry alert ---- */
@keyframes warn-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%      { box-shadow: 0 0 8px 3px rgba(245,158,11,0.45); }
}
@keyframes expiry-fill {
  0%, 8%    { width: 0; }
  62%, 78%  { width: 68%; }
  95%, 100% { width: 0; }
}
.mosaic-warn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  animation: warn-dot-pulse 2.5s ease-in-out infinite;
}
.mosaic-warn-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(245,158,11,0.9);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mosaic-expiry-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
  border-radius: 2px;
  animation: expiry-fill 5.5s ease-in-out 0.8s infinite;
}

/* ---- Card 11: notification dispatched ---- */
@keyframes notify-shimmer {
  0%, 100% { color: #86efac; text-shadow: none; }
  50%      { color: #bbf7d0; text-shadow: 0 0 14px rgba(134,239,172,0.5); }
}
.mosaic-card--notify {
  position: relative;
  overflow: hidden;
}
.mosaic-notify-done {
  color: #86efac;
  font-weight: 500;
  animation: notify-shimmer 4s ease-in-out infinite;
}

/* ---- Card 12: sync status ---- */
@keyframes sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); }
  50%      { box-shadow: 0 0 8px 3px rgba(62,207,142,0.4); }
}
.mosaic-sync-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mosaic-sync-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
  flex-shrink: 0;
  animation: sync-pulse 3s ease-in-out infinite;
}
.mosaic-sync-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(62,207,142,0.9);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---- Shared tag styles ---- */
.mosaic-small {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.mosaic-bubble {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  max-width: 90%;
}
.mosaic-bubble--out {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
}
.mosaic-bubble--in {
  background: var(--purple-5);
  color: #fff;
  align-self: flex-end;
}
.mosaic-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8c6cff, #5627ba);
}
.mosaic-icon { font-size: 20px; }

/* ============================================================
   SUB-HERO
   ============================================================ */
.sub-hero {
  background: linear-gradient(160deg, #e8e4ff 0%, #d6e4ff 35%, #f0eaff 65%, #ffffff 100%);
  padding: 140px 24px 60px;
  text-align: center;
}

.sub-hero-content {
  max-width: 820px;
  margin: 0 auto;
}

.sub-hero-title {
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark-title);
  letter-spacing: -0.5px;
}

.sub-hero-purple {
  color: var(--purple-5);
}

/* ============================================================
   PROOF STRIP
   ============================================================ */
.proof-strip {
  background: #F9F9F9;
  border-bottom: 1px solid #E5E5E5;
  padding: 48px 24px;
}

.proof-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.proof-block {
  flex: 1;
  text-align: center;
  padding: 0 40px;
}

.proof-figure {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--purple-5);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

.proof-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #3A3A3A;
  max-width: 220px;
  margin: 0 auto;
}

.proof-divider {
  width: 1px;
  height: 64px;
  background: #DCDCDC;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .proof-strip-inner {
    flex-direction: column;
    gap: 0;
  }

  .proof-block {
    width: 100%;
    padding: 28px 24px;
  }

  .proof-divider {
    width: 80px;
    height: 1px;
  }
}

.proof-source {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #888;
  font-style: italic;
  letter-spacing: 0;
}

/* ============================================================
   PERFORMANCE GAP TABLE
   ============================================================ */
.perf-gap {
  background: #0A0A0A;
  padding: 80px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.perf-gap-inner {
  max-width: 820px;
  margin: 0 auto;
}

.perf-gap-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #F5F4F0;
  margin-bottom: 32px;
  line-height: 1.1;
}

.perf-gap-table-wrap {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.perf-gap-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
}

.perf-gap-table thead th {
  padding: 13px 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.4);
  background: #1C1C2E;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.perf-gap-table thead th.perf-col-best,
.perf-gap-table tbody td.perf-col-best {
  color: #7B78EB;
  background: rgba(45,43,143,0.18);
  border-left: 1px solid rgba(92,89,255,0.2);
}

.perf-gap-table thead th.perf-col-best {
  color: #7B78EB;
}

.perf-gap-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.perf-gap-table tbody tr:last-child {
  border-bottom: none;
}

.perf-gap-table tbody td {
  padding: 16px 20px;
  font-size: 14px;
  color: rgba(245,244,240,0.55);
  background: #111118;
}

.perf-gap-table tbody td:first-child {
  color: #F5F4F0;
  font-weight: 500;
}

.perf-gap-table tbody td.perf-col-best {
  font-weight: 600;
  font-size: 14px;
  color: #7B78EB;
}

.perf-gap-source {
  margin-top: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(245,244,240,0.25);
  font-style: italic;
}

/* ============================================================
   LOGOS STRIP
   ============================================================ */
.logos-strip {
  background: #fff;
  padding: 40px 24px;
  text-align: center;
  border-bottom: 1px solid var(--gray-lines);
}

.logos-label {
  font-size: 15px;
  color: #888;
  margin-bottom: 28px;
  font-weight: 500;
}

.logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.logo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.logo-item:hover { opacity: 1; }

/* ============================================================
   LEASE GOVERNANCE BRIDGE BREAK
   ============================================================ */
.lease-bridge-break {
  background: linear-gradient(135deg, #1a0a4e 0%, #2d1070 50%, #3322b8 100%);
  padding: 80px 24px;
  color: #fff;
  text-align: center;
}

.lease-bridge-inner {
  max-width: 760px;
  margin: 0 auto;
}

.lease-bridge-main {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: #fff;
}

.lease-bridge-sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   PRODUCT PREVIEW
   ============================================================ */
.product-preview {
  background: #fff;
  padding: 72px 24px 80px;
}

.product-preview-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.product-preview-title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--dark-title);
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.product-preview-sub {
  font-size: 17px;
  color: var(--body-gray);
  max-width: 520px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

.product-screenshot-wrap {
  position: relative;
}

/* Soft glow behind the screenshot */
.product-screenshot-wrap::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(118,56,250,0.12) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 12px;
}

.product-screenshot-frame {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gray-lines);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.08),
    0 32px 64px rgba(118,56,250,0.08);
  position: relative;
  background: #f5f5f7;
}

.screenshot-bar {
  background: #f0f0f2;
  border-bottom: 1px solid var(--gray-lines);
  padding: 10px 16px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.screenshot-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  display: block;
}
.screenshot-dot:nth-child(1) { background: #ff5f57; }
.screenshot-dot:nth-child(2) { background: #febc2e; }
.screenshot-dot:nth-child(3) { background: #28c840; }

.product-screenshot-img {
  width: 100%;
  display: block;
  border-radius: 0 0 6px 6px;
}

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.solutions-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 12px;
}
.section-eyebrow.purple { color: var(--purple-5); }
.section-eyebrow.light { color: rgba(255,255,255,0.6); }

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--dark-title);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 17px;
  color: var(--body-gray);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
.section-subtitle.light { color: rgba(255,255,255,0.75); }

.solutions-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.solution-card {
  border-radius: 8px;
  padding: 40px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.solution-card--dark {
  background: linear-gradient(145deg, #1a0d3e 0%, #0d0626 100%);
  color: #fff;
}

.solution-card--light {
  background: linear-gradient(145deg, #f0eeff 0%, #e8e4ff 100%);
  color: var(--dark-title);
  border: 1px solid #d4ceff;
}

.solution-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.solution-card p {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 24px;
  line-height: 1.6;
}

.btn-outline-white {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
  align-self: flex-start;
  margin-bottom: 32px;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

.btn-outline-purple {
  display: inline-block;
  border: 1.5px solid var(--purple-5);
  color: var(--purple-5);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s;
  align-self: flex-start;
  margin-bottom: 32px;
}
.btn-outline-purple:hover {
  background: var(--purple-0);
}

/* Problem list inside solution cards */
.card-problem-list {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.problem-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}

.problem-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.problem-dot--red    { background: #e54545; }
.problem-dot--yellow { background: #f5a623; }
.problem-dot--green  { background: #3ecf8e; }

/* ── RiskSection two-panel ── */
.rs2-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-lines);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.rs2-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--gray-lines);
  pointer-events: none;
}
.rs2-panel {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f7f8fa;
}
.rs2-panel--right {
  justify-content: center;
  background: #fff;
}
.rs2-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-5);
  margin-bottom: 14px;
}
.rs2-eyebrow--muted {
  color: var(--light-grey);
  margin-bottom: 20px;
}
.rs2-headline {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--dark-title);
  margin-bottom: 16px;
}
.rs2-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--body-gray);
  max-width: 300px;
  margin-bottom: 24px;
}
.rs2-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rs2-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  color: var(--body-gray);
  line-height: 1.5;
}
.rs2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-5);
  flex-shrink: 0;
  margin-top: 6px;
}
.rs2-rows {
  display: flex;
  flex-direction: column;
}
.rs2-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-lines);
}
.rs2-row--first {
  border-top: 1px solid var(--gray-lines);
}
.rs2-row-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.rs2-row-body {
  font-size: 17px;
  color: var(--body-gray);
  line-height: 1.55;
  margin: 0;
}
.rs2-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--purple-5);
  margin-top: 24px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.rs2-cta:hover { color: var(--purple-6); }
.rs2-left-cta { margin-top: auto; align-self: flex-start; }

/* Mosaic tags */
.mosaic-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}
.mosaic-tag--warn {
  background: rgba(245,166,35,0.2);
  color: #f5c06a;
  border: 1px solid rgba(245,166,35,0.3);
  animation: warn-pulse 2.8s ease-in-out infinite;
}
.mosaic-tag--ok {
  background: rgba(62,207,142,0.15);
  color: #3ecf8e;
  border: 1px solid rgba(62,207,142,0.25);
  animation: ok-glow 2.8s ease-in-out infinite;
}

.mosaic-doc-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Impact icon wrap (reuse in channels section) */
.impact-icon-wrap {
  width: 52px;
  height: 52px;
  background: rgba(140,108,255,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140,108,255,0.2);
}

/* Hero primary button */
.hero-btn--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: #0d0f1a;
}
.hero-btn--primary:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.88);
  color: #0d0f1a;
}

/* Phone mockup */
.card-phone-mockup {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.phone-screen {
  width: 200px;
  background: #1a1a2e;
  border-radius: 20px;
  padding: 16px;
  border: 2px solid #333;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.phone-time {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-bottom: 12px;
}

.phone-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bubble {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  max-width: 85%;
}

.chat-bubble--in {
  background: var(--purple-5);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-bubble--out {
  background: #2a2a3e;
  color: rgba(255,255,255,0.85);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

/* Confirm mockup */
.card-confirm-mockup {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.confirm-bubble {
  background: #fff;
  border: 1px solid #d4ceff;
  border-radius: 8px;
  padding: 20px;
  max-width: 240px;
  box-shadow: 0 4px 20px rgba(118,56,250,0.1);
}

.confirm-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #c1b8ff, #8c6cff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
}

.confirm-bubble p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  opacity: 1 !important;
}

.confirm-sub {
  font-size: 12px;
  color: var(--purple-5);
  border: 1px solid #d4ceff;
  border-radius: 20px;
  padding: 4px 10px;
  display: inline-block;
}

/* ============================================================
   AI THAT DELIVERS
   ============================================================ */
.delivers {
  background: linear-gradient(135deg, #7638fa 0%, #5627ba 50%, #2d1070 100%);
  padding: 80px 24px;
  color: #fff;
}

.delivers-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.delivers-content h2 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}

.delivers-content p {
  font-size: 18px;
  opacity: 0.82;
  margin-bottom: 36px;
  line-height: 1.7;
}

.delivers-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivers .btn-outline-white {
  font-size: 16px;
  padding: 12px 28px;
  border-width: 2px;
}

@media (max-width: 860px) {
  .delivers-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .delivers-content {
    text-align: center;
  }
  .delivers-content p {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   AUTOMATION / FEATURES DIAGRAM
   ============================================================ */
.automation {
  padding: 80px 24px;
  background: #fff;
}

.automation-header {
  text-align: center;
  margin-bottom: 60px;
}

.fs-animation-wrap {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(99,179,237,0.15);
  box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04);
}

.automation-diagram {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  background: var(--gray-bg);
  border-radius: 10px;
  padding: 48px 40px;
  border: 1px solid var(--gray-lines);
}

.diagram-left,
.diagram-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.diagram-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--gray-lines);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-title);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}

.diagram-feature:hover {
  box-shadow: 0 4px 16px rgba(118,56,250,0.12);
  transform: translateY(-2px);
}

.feature-icon {
  width: 36px;
  height: 36px;
  background: var(--purple-0);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Stacked disk */
.diagram-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 20px 0;
}

.stack-disk {
  width: 140px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  margin-bottom: -10px;
}

.stack-disk--1 {
  background: linear-gradient(90deg, #c1b8ff 0%, #9e8cff 100%);
  opacity: 1;
  height: 40px;
  z-index: 4;
}
.stack-disk--2 {
  background: linear-gradient(90deg, #a89eff 0%, #8470ff 100%);
  opacity: 0.9;
  z-index: 3;
}
.stack-disk--3 {
  background: linear-gradient(90deg, #9080ff 0%, #6e58ff 100%);
  opacity: 0.8;
  z-index: 2;
}
.stack-disk--4 {
  background: linear-gradient(90deg, #7860ff 0%, #5840f0 100%);
  opacity: 0.7;
  z-index: 1;
}

/* ============================================================
   CHANNELS
   ============================================================ */
.channels {
  background: linear-gradient(160deg, #0f042d 0%, #1a0550 60%, #2d0a6e 100%);
  padding: 80px 24px;
  color: #fff;
}

.channels-header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.channels-header h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.channels-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.channel-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 24px;
  backdrop-filter: blur(10px);
  transition: background 0.2s, transform 0.2s;
}

.channel-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.channel-demo {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  padding: 16px;
}

/* SMS demo */
.channel-demo--text {
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.sms-bubble {
  background: #1a1a2e;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px 12px 12px 4px;
  font-size: 13px;
  max-width: 85%;
}

.sms-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  padding-left: 4px;
}

.sms-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  margin-top: 8px;
}

/* Email demo */
.channel-demo--email {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.lang-badge {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.email-body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
}

/* Chat demo */
.channel-demo--chat {
  justify-content: center;
  align-items: center;
}

.chat-widget {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}

/* Voice demo */
.channel-demo--voice {
  justify-content: center;
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
}

.voice-wave span {
  width: 4px;
  background: rgba(255,255,255,0.5);
  border-radius: 2px;
  animation: wave 1.2s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { height: 20px; animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 36px; animation-delay: 0.15s; }
.voice-wave span:nth-child(3) { height: 48px; animation-delay: 0.3s; }
.voice-wave span:nth-child(4) { height: 32px; animation-delay: 0.45s; }
.voice-wave span:nth-child(5) { height: 18px; animation-delay: 0.6s; }

@keyframes wave {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50% { transform: scaleY(0.4); opacity: 1; }
}

.channel-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.channel-card p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials {
  background: linear-gradient(135deg, #1a0a4e 0%, #2d1070 50%, #3322b8 100%);
  padding: 80px 24px;
  color: #fff;
}

.testimonial-carousel {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.testimonial-slides {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
}

.testimonial-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  animation: fadeIn 0.4s ease;
  width: 100%;
}

.testimonial-slide.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.testimonial-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

blockquote {
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 500;
  line-height: 1.55;
  color: #fff;
  quotes: none;
}

.testimonial-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.25);
}

.testimonial-author strong {
  font-size: 16px;
  font-weight: 700;
  display: block;
}

.testimonial-author span {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-top: 2px;
}

.carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.carousel-btn:hover { background: rgba(255,255,255,0.2); }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* ============================================================
   SMARTER OPERATIONS
   ============================================================ */
/* ============================================================
   GOVERNANCE STACK
   ============================================================ */
.gov-stack {
  background: #f7f8fa;
  padding: 100px 24px;
  color: var(--dark-title);
}

.gov-stack-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.gov-stack-header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.gov-stack-header h2 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark-title);
}

/* Main diagram container */
.gov-diagram {
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(118, 56, 250, 0.12),
    0 20px 60px -10px rgba(0,0,0,0.10);
}

/* Top branding bar */
.gov-diagram-bar {
  background: linear-gradient(135deg, #7638fa 0%, #5627ba 50%, #2d1070 100%);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.gov-diagram-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

.gov-diagram-bar-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* Dashed connector */
.gov-connector-row {
  background: #ffffff;
  padding: 0 40px;
  height: 28px;
  display: flex;
  align-items: center;
}

.gov-connector-line {
  flex: 1;
  border-top: 2px dashed rgba(118, 56, 250, 0.22);
}

/* Stage cards 2x2 grid */
.gov-stages {
  background: #ffffff;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Feature card (the new card format) */
.gov-feature-card {
  border-radius: 8px;
  border: 1px solid rgba(118, 56, 250, 0.12);
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(118,56,250,0.06);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

.gov-feature-card:hover {
  border-color: rgba(118, 56, 250, 0.35);
  box-shadow: 0 10px 36px rgba(118,56,250,0.14);
  transform: translateY(-3px);
}

.gov-preview-wrap {
  position: relative;
}

.gov-feature-preview {
  height: 320px;
  background: #f5f4f0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(118,56,250,0.07);
}

.gov-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 40, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.gov-preview-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.gov-feature-card:hover .gov-preview-icon,
.gov-feature-card:hover .gov-preview-overlay,
.gov-feature-card.playing .gov-preview-icon,
.gov-feature-card.playing .gov-preview-overlay {
  opacity: 0;
}

/* Playing state — mirrors hover lift for scroll-triggered mobile animations */
.gov-feature-card.playing {
  border-color: rgba(118, 56, 250, 0.35);
  box-shadow: 0 10px 36px rgba(118,56,250,0.14);
}

/* Expand button — appears on hover/playing */
.gov-preview-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(118, 56, 250, 0.18);
  color: rgba(118, 56, 250, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gov-feature-card:hover .gov-preview-expand,
.gov-feature-card.playing .gov-preview-expand {
  opacity: 1;
}

.gov-preview-expand:hover {
  background: var(--purple-5);
  border-color: var(--purple-5);
  color: #fff;
}

/* ─── Animation Expand Modal ──────────────────────────────── */
.gov-expand-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.gov-expand-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.gov-expand-panel {
  background: #F5F4F0;
  border-radius: 10px;
  width: 100%;
  max-width: 860px;
  height: 560px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.gov-expand-overlay.is-open .gov-expand-panel {
  transform: translateY(0) scale(1);
}

.gov-expand-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(28, 28, 46, 0.12);
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.gov-expand-close:hover {
  background: rgba(118, 56, 250, 0.1);
  color: var(--purple-5);
}

.gov-expand-preview-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Scale the React root div up so scene content fills the modal panel */
.gov-expand-preview-body > div {
  transform: scale(1.45);
  transform-origin: center center;
}

/* Dots are in the top-left corner which gets clipped by the scale — pull them
   into the visible center region of the scaled content */
.gov-expand-preview-body .preview-dots {
  top: auto !important;
  bottom: 110px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 768px) {
  .gov-expand-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .gov-expand-panel {
    max-width: 100%;
    height: 80vh;
    border-radius: 10px 10px 0 0;
    transform: translateY(24px);
  }

  .gov-expand-overlay.is-open .gov-expand-panel {
    transform: translateY(0);
  }

  /* Remove the desktop scale-up so content isn't clipped on narrow screens */
  .gov-expand-preview-body > div {
    transform: none;
  }
}


.gov-feature-body {
  padding: 22px 24px 26px;
}

.gov-feature-body .gov-stage-num {
  display: block;
  margin-bottom: 4px;
}

.gov-stage-subtitle {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(118, 56, 250, 0.7);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gov-feature-body .gov-stage-title {
  margin-bottom: 8px;
}

.gov-stage-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--body-gray);
  line-height: 1.65;
  margin: 0;
}

/* Legacy stage styles (kept for any residual use) */
.gov-stage-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--purple-5);
  background: rgba(118,56,250,0.08);
  border: 1px solid rgba(118,56,250,0.22);
  border-radius: 20px;
  padding: 5px 14px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Stage animation keyframes */
@keyframes smOverlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes smCard { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes smFI { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Inline stage panel */
.gov-stage-panel {
  background: #ffffff;
  border-top: 1px solid rgba(118,56,250,0.1);
  animation: smFI 0.3s ease forwards;
}

.gov-stage-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(118,56,250,0.12), rgba(86,39,186,0.06));
  border: 1px solid rgba(118,56,250,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 2px 10px rgba(118,56,250,0.1);
  transition: box-shadow 0.3s, background 0.3s;
}

.gov-stage:hover .gov-stage-icon {
  background: linear-gradient(135deg, rgba(118,56,250,0.18), rgba(86,39,186,0.1));
  box-shadow: 0 4px 18px rgba(118,56,250,0.2);
}

.gov-stage-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--purple-5);
  filter: none;
}

.gov-stage-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--purple-6);
  line-height: 1;
}

.gov-stage-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-title);
  line-height: 1.25;
  margin: 0;
}

.gov-stage-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-copy);
  margin: 0;
}

.gov-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.gov-arrow svg {
  width: 20px;
  height: 20px;
  stroke: rgba(118, 56, 250, 0.4);
}

/* Systems of Record bar */
.gov-systems {
  background: #f7f8fa;
  border-top: 1px solid rgba(118,56,250,0.08);
  padding: 22px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.gov-systems-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gray-copy);
  text-transform: uppercase;
  white-space: nowrap;
}

.gov-systems-divider {
  width: 1px;
  height: 20px;
  background: rgba(118,56,250,0.15);
  flex-shrink: 0;
}

.gov-systems-logos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gov-sys-logo {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--gray-lines);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.gov-sys-logo img {
  height: 20px;
  width: auto;
  max-width: 88px;
  display: block;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.2s;
}

.gov-sys-logo:hover {
  border-color: rgba(118,56,250,0.3);
}

.gov-sys-logo:hover img {
  filter: grayscale(0) opacity(1);
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights {
  padding: 80px 24px;
  background: #fff;
}

.insights-header {
  text-align: center;
  margin-bottom: 48px;
}

.insights-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.insight-card {
  border: 1px solid var(--gray-lines);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}

.insight-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.insight-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-img--purple {
  background: linear-gradient(135deg, #2d0a6e 0%, #1a0550 100%);
}

.insight-img--dark {
  background: #0d0830;
  position: relative;
  overflow: hidden;
}

.insight-img--bldg {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
}

.phone-mockup-small {
  width: 100px;
  background: #1c1c2e;
  border-radius: 14px;
  padding: 10px;
  border: 2px solid #333;
}

.pm-screen {
  font-size: 9px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

.bldg-logo {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
  padding: 12px 16px;
  border-radius: 4px;
  line-height: 1;
  letter-spacing: -1px;
}

.insight-body {
  padding: 24px;
}

.insight-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--purple-5);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.insight-body h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--dark-title);
}

.insight-body p {
  font-size: 15px;
  color: var(--body-gray);
  line-height: 1.6;
  margin-bottom: 16px;
}

.insight-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--purple-5);
  transition: color 0.2s;
  position: static;
}
.insight-link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.insight-link:hover { color: var(--purple-7); }
.insight-card:hover .insight-link { color: var(--purple-7); }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto 0;
  padding: 0 24px 80px;
}

.cta-card {
  background: var(--gray-bg);
  border: 1px solid var(--gray-lines);
  border-radius: 8px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px;
}

.cta-card h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.cta-card p {
  font-size: 16px;
  color: var(--body-gray);
  line-height: 1.65;
  flex: 1;
}

.cta-card .btn-outline-purple {
  margin-top: 16px;
  margin-bottom: 0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 80px 24px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--gray-lines);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--dark-title);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: color 0.2s;
  gap: 16px;
}

.faq-question:hover { color: var(--purple-5); }

.faq-chevron {
  font-size: 20px;
  color: #888;
  transition: transform 0.3s;
  flex-shrink: 0;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding-bottom: 20px;
}

.faq-answer p {
  font-size: 16px;
  color: var(--body-gray);
  line-height: 1.7;
}

/* Full-width CTA card */
.cta-card--full {
  grid-column: 1 / -1;
  background: var(--gray-bg);
  border: 1px solid var(--gray-lines);
  border-radius: 8px;
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-card--full h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  max-width: 600px;
  line-height: 1.3;
}

.cta-card--full p {
  font-size: 17px;
  color: var(--body-gray);
  max-width: 580px;
  line-height: 1.7;
}

.cta-card--content {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-card--content h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.3;
}

.cta-card--content p {
  font-size: 17px;
  color: var(--body-gray);
  line-height: 1.7;
}

.cta-card--image {
  padding: 0;
  overflow: hidden;
  min-height: 320px;
}

.cta-card--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   SECURITY & COMPLIANCE
   ============================================================ */
.security-section {
  background: #0A0A0F;
  padding: 100px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.security-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.security-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 20px;
}

.security-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 680px;
  margin: 0 auto 60px;
}

.security-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.security-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
}

.security-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(124,58,237,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
}

.security-feature-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.security-feature-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

.compliance-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 48px;
}

.compliance-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 180px;
  transition: border-color 0.2s, background 0.2s;
}

.compliance-badge:hover {
  background: rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.3);
}

.compliance-badge-icon {
  flex-shrink: 0;
}

.compliance-badge-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.compliance-badge-detail {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}


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

@media (max-width: 600px) {
  .security-section {
    padding: 64px 20px;
  }
  .security-sub {
    margin-bottom: 40px;
  }
  .security-features {
    grid-template-columns: 1fr;
    margin-bottom: 48px;
  }
  .security-feature,
  .security-feature-title,
  .security-feature-desc {
    text-align: left;
  }
  .compliance-badges {
    flex-direction: column;
    align-items: stretch;
    padding-top: 32px;
  }
  .compliance-badge {
    min-width: unset;
  }
  .compliance-badge-text {
    min-width: 0;
    text-align: left;
  }
  .compliance-badge-name,
  .compliance-badge-detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #fff;
  border-top: 1px solid var(--gray-lines);
  padding: 60px 24px 32px;
}

.footer-brand {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-lines);
  max-width: 480px;
}

.footer-desc {
  display: none;
}

.footer-top {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 4px;
}

.footer-col a {
  font-size: 15px;
  color: var(--body-gray);
  transition: color 0.2s;
  line-height: 1.8;
}

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

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--gray-lines);
  padding-top: 24px;
}

.footer-bottom-left p {
  font-size: 15px;
  color: #888;
  line-height: 1.6;
}

.footer-bottom-center {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom-center a {
  font-size: 15px;
  color: #888;
  transition: color 0.2s;
}
.footer-bottom-center a:hover { color: var(--purple-5); }

.footer-bottom-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-bottom-social a {
  color: #888;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.footer-bottom-social a:hover { color: var(--purple-5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .solutions-cards {
    grid-template-columns: 1fr;
  }
  .rs2-card {
    grid-template-columns: 1fr;
  }
  .rs2-divider {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: var(--gray-lines);
  }
  .rs2-panel { background: #f7f8fa; }
  .rs2-panel--right { background: #fff; }
  .rs2-headline { font-size: 40px; }

  .automation-diagram {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .diagram-center {
    flex-direction: row;
    justify-content: center;
  }

  .stack-disk {
    width: 48px;
    height: 100px;
    margin-bottom: 0;
    margin-right: -8px;
    border-radius: 50%;
  }

  .channels-grid {
    grid-template-columns: 1fr;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .cta-section {
    grid-template-columns: 1fr;
  }

  .gov-stages {
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    gap: 14px;
  }

  .gov-feature-preview {
    height: 300px;
  }

  .gov-diagram-bar {
    padding: 22px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .gov-systems {
    padding: 18px 24px;
    gap: 16px;
  }

  .gov-systems-divider {
    display: none;
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .gov-stages {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 14px;
  }

  .gov-feature-preview {
    height: 300px;
  }

  .gov-diagram-bar {
    padding: 18px 20px;
  }

  .gov-systems {
    padding: 16px 20px;
  }

  .nav-links,
  .nav-actions .btn-login,
  .nav-actions .btn-demo {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-container {
    gap: 16px;
  }

  .hero-title {
    font-size: 28px;
  }

  .logos-row {
    gap: 24px;
  }

  .testimonial-carousel {
    gap: 8px;
  }

  blockquote {
    font-size: 15px;
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mosaic grid: drop to 2 columns on tablet */
  .mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Solution cards: reduce padding on mobile */
  .solution-card {
    padding: 24px;
    min-height: 0;
  }

  /* Automation diagram: tighten padding */
  .automation-diagram {
    padding: 32px 20px;
  }

  /* Delivers section */
  .delivers {
    padding: 60px 20px;
  }

  /* CTA cards */
  .cta-card {
    padding: 32px 24px;
  }
  .cta-card--full {
    padding: 40px 24px;
  }
  .cta-card--content {
    padding: 40px 24px;
  }
  .cta-card--image {
    min-height: 240px;
  }
}

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

  .footer-bottom-center {
    flex-direction: column;
    gap: 8px;
  }

  .channels-grid {
    grid-template-columns: 1fr;
  }

  /* Hero: enough top padding to clear the fixed navbar */
  .hero {
    padding: 100px 16px 32px;
  }

  .hero-mosaic {
    width: calc(100% + 32px);
    margin-left: -16px;
  }

  .hero-sub {
    font-size: 16px;
  }

  /* Hide cards beyond row 3 on very small screens (2-col grid = 5 cards; wide card fills row 1, rows 2-3 each have 2 cards) */
  .mosaic-grid .mosaic-card:nth-child(n+6) {
    display: none;
  }

  /* Remove 3D tilt entirely on small phones */
  .mosaic-grid {
    transform: none;
  }

  /* Sections: reduce padding */
  .solutions,
  .automation,
  .channels,
  .testimonials,
  .insights,
  .gov-stack {
    padding: 56px 16px;
  }

  .cta-section {
    padding: 0 16px 56px;
  }

  .faq {
    padding: 56px 16px;
  }

  .automation-diagram {
    padding: 24px 16px;
  }

  .gov-connector-row {
    padding: 0 16px;
  }

  .gov-systems {
    padding: 14px 16px;
  }

  .gov-diagram-bar {
    padding: 16px;
  }

  .cta-card,
  .cta-card--full {
    padding: 28px 20px;
  }

  .solution-card {
    padding: 20px;
  }

  /* Testimonial carousel: hide nav buttons on very small screens */
  .carousel-btn {
    display: none;
  }
}

/* ─── Platform Capabilities Animation Scaling (mobile) ──────── */
/* The preview animations contain side-by-side panels that need ~408px of
   layout width (designed for desktop). On narrow screens we must override
   the React component's inline width/height/overflow to give the content
   a wider virtual layout box, then scale it back down visually so it fits
   inside .gov-feature-preview's overflow:hidden boundary.
   All properties need !important to beat the inline styles set by React. */
@media (max-width: 640px) {
  .gov-feature-preview {
    height: 340px;
  }

  /* Override the React root div's inline width:100%, height:100%, overflow:hidden */
  .gov-feature-preview > div {
    transform: scale(0.70) !important;
    transform-origin: top left !important;
    width: calc(100% / 0.70) !important;   /* lays out at ~143% then scales back to 100% */
    height: calc(100% / 0.70) !important;  /* same for height */
    overflow: visible !important;           /* let content use the expanded layout space */
  }

  .gov-feature-body {
    padding: 16px 18px 20px;
  }

  .gov-stage-desc {
    font-size: 14px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  .gov-feature-preview {
    height: 300px;
  }

  .gov-feature-preview > div {
    transform: scale(0.60) !important;
    width: calc(100% / 0.60) !important;
    height: calc(100% / 0.60) !important;
  }

  .gov-feature-body {
    padding: 14px 16px 18px;
  }
}

/* ─── Demo Request Modal ─────────────────────────────────────── */
.demo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.demo-modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.demo-modal {
  background: #0f0e1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 48px;
  width: 100%;
  max-width: 480px;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.demo-modal-overlay.is-open .demo-modal {
  transform: translateY(0);
}
.demo-modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7B78E8;
  margin-bottom: 10px;
}
.demo-modal h3 {
  font-size: 22px;
  font-weight: 700;
  color: #F5F4F0;
  margin-bottom: 6px;
  font-family: 'DM Sans', sans-serif;
  line-height: 1.25;
}
.demo-modal-sub {
  font-size: 14px;
  color: rgba(245, 244, 240, 0.45);
  margin-bottom: 32px;
  line-height: 1.6;
}
.demo-modal-row {
  display: flex;
  gap: 12px;
}
.demo-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  margin-bottom: 16px;
}
.demo-modal-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.5);
}
.demo-modal-field input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  color: #F5F4F0;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.demo-modal-field input::placeholder {
  color: rgba(245, 244, 240, 0.25);
}
.demo-modal-field input:-webkit-autofill,
.demo-modal-field input:-webkit-autofill:hover,
.demo-modal-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F5F4F0;
  -webkit-box-shadow: 0 0 0px 1000px #1a1929 inset;
  box-shadow: 0 0 0px 1000px #1a1929 inset;
  transition: background-color 5000s ease-in-out 0s;
}
.demo-modal-field input:focus {
  border-color: rgba(92, 89, 255, 0.6);
  background: rgba(92, 89, 255, 0.05);
}
.demo-modal-field textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  color: #F5F4F0;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.demo-modal-field textarea::placeholder {
  color: rgba(245, 244, 240, 0.25);
}
.demo-modal-field textarea:focus {
  border-color: rgba(92, 89, 255, 0.6);
  background: rgba(92, 89, 255, 0.05);
}
.demo-modal-submit {
  width: 100%;
  padding: 14px;
  background: #5C59FF;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}
.demo-modal-submit:hover {
  background: #4a47e0;
}
.demo-modal-submit:disabled {
  background: rgba(92, 89, 255, 0.4);
  cursor: not-allowed;
}
.demo-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(245, 244, 240, 0.4);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}
.demo-modal-close:hover {
  color: #F5F4F0;
}
.demo-modal-inner {
  position: relative;
}
.demo-modal-success {
  text-align: center;
  padding: 24px 0 8px;
}
.demo-modal-success-icon {
  width: 48px;
  height: 48px;
  background: rgba(92, 89, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.demo-modal-success h3 {
  margin-bottom: 8px;
}
@media (max-width: 480px) {
  .demo-modal {
    padding: 32px 24px;
  }
  .demo-modal-row {
    flex-direction: column;
    gap: 0;
  }
}


/* ============================================================
   SUB-PAGE DESIGN SYSTEM
   ============================================================ */

.subpage-body {
  background: #07051c;
}

/* ── Hero ── */
.sp-hero {
  background: linear-gradient(155deg, #0a0520 0%, #120840 45%, #1c0d5c 75%, #270f70 100%);
  padding: 120px clamp(24px, 6vw, 120px) 80px;
  position: relative;
  overflow: hidden;
}
.sp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 82% 50%, rgba(140,108,255,0.13) 0%, transparent 65%);
  pointer-events: none;
}
.sp-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sp-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(140,108,255,0.14);
  border: 1px solid rgba(140,108,255,0.28);
  border-radius: 100px;
  padding: 5px 14px 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c1b8ff;
  margin-bottom: 24px;
}
.sp-hero-title {
  font-family: 'DM Sans', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6.5vw, 80px);
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 24px;
  letter-spacing: -1px;
}
.sp-hero-sub {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
  max-width: 520px;
  margin: 0 0 36px;
}
.sp-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-btn-primary {
  background: #8c6cff;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  display: inline-block;
  transition: background 0.2s, transform 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.sp-btn-primary:hover {
  background: #7638fa;
  transform: translateY(-1px);
}
.sp-btn-ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 8px;
  display: inline-block;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.sp-btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
}

/* Hero right: stat cards panel */
.sp-hero-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(12px);
}
.sp-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(140,108,255,0.15);
  border: 1px solid rgba(140,108,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-stat-info {}
.sp-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
  display: block;
}
.sp-stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: #ffffff;
  line-height: 1;
  letter-spacing: 0.02em;
  display: block;
}
.sp-stat-value--violet { color: #a594ff; }
.sp-stat-value--green { color: #3ecf8e; }
.sp-stat-value--amber { color: #f59e0b; }

/* ── Content wrapper ── */
.sp-content {
  background: #07051c;
}

/* ── Sections ── */
.sp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px clamp(24px, 6vw, 120px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sp-section:last-child { border-bottom: none; }
.sp-section--full {
  max-width: 100%;
  padding: 80px clamp(24px, 6vw, 120px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sp-section--inner { max-width: 1100px; margin: 0 auto; }

.sp-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(140,108,255,0.75);
  margin-bottom: 14px;
  display: block;
}
.sp-section-title {
  font-family: 'DM Sans', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.5vw, 46px);
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}
.sp-section-body {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,0.58);
  max-width: 700px;
  margin-bottom: 16px;
}
.sp-section-body + .sp-section-body { margin-top: 0; }

/* ── Icon card grid ── */
.sp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.sp-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 28px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.sp-card:hover {
  border-color: rgba(140,108,255,0.28);
  background: rgba(140,108,255,0.04);
}
.sp-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(140,108,255,0.2), rgba(86,39,186,0.12));
  border: 1px solid rgba(140,108,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.sp-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
}
.sp-card-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.52);
}

/* ── Split layout ── */
.sp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.sp-split-text {}
.sp-split-visual {}

/* ── Visual mock panel ── */
.sp-mock-panel {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.sp-mock-panel::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(140,108,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.sp-mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sp-mock-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sp-mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 6px rgba(62,207,142,0.6);
}
.sp-mock-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.sp-mock-row:last-child { margin-bottom: 0; }
.sp-mock-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sp-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}
.sp-mock-tag--warn {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.22);
}
.sp-mock-tag--ok {
  background: rgba(62,207,142,0.12);
  color: #3ecf8e;
  border: 1px solid rgba(62,207,142,0.2);
}
.sp-mock-tag--alert {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.2);
}
.sp-mock-tag--info {
  background: rgba(140,108,255,0.15);
  color: #c1b8ff;
  border: 1px solid rgba(140,108,255,0.22);
}
.sp-mock-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.sp-mock-amount--red { color: #ef4444; }
.sp-mock-amount--green { color: #3ecf8e; }
.sp-mock-amount--violet { color: #a594ff; }
.sp-mock-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.sp-mock-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 6px;
}
.sp-mock-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 14px 0;
}

/* ── Process steps ── */
.sp-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 32px;
}
.sp-step {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sp-step:last-child { border-bottom: none; }
.sp-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(140,108,255,0.28), rgba(86,39,186,0.18));
  border: 1px solid rgba(140,108,255,0.32);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: #c1b8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.sp-step-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}
.sp-step-body {
  font-size: 15px;
  color: rgba(255,255,255,0.52);
  line-height: 1.65;
}

/* ── Highlight bar ── */
.sp-highlight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(140,108,255,0.07);
  border: 1px solid rgba(140,108,255,0.18);
  border-left: 3px solid #8c6cff;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
}
.sp-highlight-text {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
}

/* ── CTA section ── */
.sp-cta {
  background: linear-gradient(135deg, #1a0a4e 0%, #2d1070 50%, #3322b8 100%);
  padding: 80px clamp(24px, 6vw, 120px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sp-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(140,108,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.sp-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
}
.sp-cta-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(193,184,255,0.7);
  margin-bottom: 12px;
  display: block;
}
.sp-cta-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.sp-cta-body {
  font-size: 17px;
  color: rgba(255,255,255,0.62);
  margin-bottom: 32px;
  line-height: 1.7;
}
.sp-cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Related pages ── */
/* ── Real World Story block ── */
.sp-story-block {
  margin-top: 40px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}
.sp-story-scenario {
  background: rgba(92,89,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sp-story-scenario-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(140,108,255,0.9);
  background: rgba(92,89,255,0.15);
  border: 1px solid rgba(92,89,255,0.3);
  border-radius: 3px;
  padding: 4px 9px;
}
.sp-story-scenario-detail {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
}
.sp-story-scenario-detail strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.sp-story-body {
  padding: 32px 32px 0;
}
.sp-story-body p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}
.sp-story-body p:last-child { margin-bottom: 0; }
.sp-story-body strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.sp-story-outcome {
  margin: 28px 32px 32px;
  padding: 20px 24px;
  background: rgba(5,150,105,0.07);
  border: 1px solid rgba(5,150,105,0.2);
  border-left: 3px solid #059669;
  border-radius: 0 10px 10px 0;
}
.sp-story-outcome-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 10px;
  display: block;
}
.sp-story-outcome p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.sp-story-outcome strong {
  color: #34d399;
  font-weight: 600;
}
@media (max-width: 768px) {
  .sp-story-scenario { padding: 16px 20px; }
  .sp-story-body { padding: 24px 20px 0; }
  .sp-story-outcome { margin: 20px 20px 24px; padding: 16px 18px; }
}

.sp-related {
  display: none;
  padding: 56px clamp(24px, 6vw, 120px);
  background: #07051c;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.sp-related-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.sp-related-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 20px;
  display: block;
}
.sp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.sp-related-link {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.58);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sp-related-link:hover {
  border-color: rgba(140,108,255,0.3);
  color: #ffffff;
  background: rgba(140,108,255,0.06);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .sp-split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .sp-hero-right { display: none; }
  .sp-hero { padding-top: 90px; }
  .sp-cta-btns { flex-direction: column; align-items: center; }
}

/* ─────────────────────────────────────────────
   LIGHT THEME — Use Case Pages (.uc-body)
───────────────────────────────────────────── */
.uc-body {
  background: #f7f8fa;
}

/* Hero — light */
.uc-body .sp-hero {
  background: linear-gradient(155deg, #ffffff 0%, #f3f0ff 50%, #ede8ff 100%);
}
.uc-body .sp-hero::after {
  background: radial-gradient(ellipse 70% 60% at 82% 50%, rgba(140,108,255,0.08) 0%, transparent 65%);
}
.uc-body .sp-eyebrow-badge {
  background: rgba(140,108,255,0.10);
  border-color: rgba(140,108,255,0.22);
  color: #6c47ff;
}
.uc-body .sp-hero-title { color: #0f0c29; }
.uc-body .sp-hero-sub { color: rgba(15,12,41,0.60); }
.uc-body .sp-btn-ghost {
  background: rgba(15,12,41,0.05);
  border-color: rgba(15,12,41,0.15);
  color: rgba(15,12,41,0.75);
}
.uc-body .sp-btn-ghost:hover {
  background: rgba(15,12,41,0.08);
  border-color: rgba(15,12,41,0.25);
}
.sp-cta .sp-btn-ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid #ffffff;
  color: #ffffff;
}
.sp-cta .sp-btn-ghost:hover {
  background: rgba(255,255,255,0.16);
}

/* Stat cards — light */
.uc-body .sp-stat-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.uc-body .sp-stat-label { color: rgba(15,12,41,0.42); }
.uc-body .sp-stat-value { color: #0f0c29; }

/* ── Hero illustration (landing page) ── */
.hero-illus-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Product Showcase (replaces photo banner) ── */
.sp-showcase {
  background: #fff;
  padding: 52px 24px 52px;
}
.sp-showcase-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  height: 380px;
}
.sp-showcase-product {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 32px rgba(0,0,0,0.09);
  background: #fff;
}
.sp-showcase-product .ui-panel {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: #fff;
}
.sp-showcase-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.sp-showcase-people {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.09);
}
.sp-showcase-people img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Showcase layout variants */
.sp-showcase--gray { background: #f7f8fa; }
.sp-showcase--tinted { background: #f5f3ff; }
.sp-showcase--reversed .sp-showcase-inner {
  grid-template-columns: 1fr 1.6fr;
}
.sp-showcase--wide .sp-showcase-inner {
  grid-template-columns: 1fr;
  height: auto;
  min-height: 260px;
}
.sp-showcase--dual .sp-showcase-inner {
  grid-template-columns: 1fr 1fr;
}
/* ── UI Panel Components ── */
.ui-panel {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}
.ui-panel-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(15,12,41,0.40);
  text-transform: uppercase;
}
.ui-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ecf8e;
  box-shadow: 0 0 0 3px rgba(62,207,142,0.2);
  flex-shrink: 0;
}
.ui-card {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 13px 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ui-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ui-badge--verified {
  background: rgba(62,207,142,0.15);
  color: #1a9e68;
  border: 1px solid rgba(62,207,142,0.30);
}
.ui-badge--exception {
  background: rgba(239,68,68,0.10);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.22);
}
.ui-badge--upcoming {
  background: rgba(245,158,11,0.12);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.28);
}
.ui-badge--info {
  background: rgba(108,71,255,0.10);
  color: #6c47ff;
  border: 1px solid rgba(108,71,255,0.22);
}
.ui-badge--neutral {
  background: rgba(15,12,41,0.06);
  color: rgba(15,12,41,0.50);
  border: 1px solid rgba(15,12,41,0.10);
}
.ui-card-value {
  font-size: 15px;
  font-weight: 700;
  color: #6c47ff;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.ui-card-value--red { color: #dc2626; }
.ui-card-value--green { color: #1a9e68; }
.ui-card-value--dark { color: #0f0c29; }
.ui-card-desc {
  font-size: 13px;
  color: #0f0c29;
  line-height: 1.45;
  font-weight: 500;
}
.ui-card-meta {
  font-size: 11.5px;
  color: rgba(15,12,41,0.42);
  line-height: 1.4;
}
/* Horizontal model rows (wide panels) */
.ui-model-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ui-model-row {
  display: grid;
  grid-template-columns: 150px 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: #f7f8fa;
  border-radius: 10px;
  padding: 12px 16px;
}
.ui-model-label {
  font-size: 12px;
  font-weight: 600;
  color: #0f0c29;
}
.ui-model-formula {
  font-size: 11.5px;
  color: rgba(15,12,41,0.48);
  font-family: monospace;
}
.ui-model-value {
  font-size: 13px;
  font-weight: 700;
  color: #6c47ff;
  text-align: right;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ui-model-value--red { color: #dc2626; }
/* Property rows (wide panels) */
.ui-prop-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.ui-prop-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  background: #f7f8fa;
  border-radius: 10px;
  padding: 12px 16px;
}
.ui-prop-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f0c29;
}
.ui-prop-detail {
  font-size: 11px;
  color: rgba(15,12,41,0.45);
}
@media (max-width: 900px) {
  .sp-showcase-inner,
  .sp-showcase--reversed .sp-showcase-inner,
  .sp-showcase--dual .sp-showcase-inner {
    grid-template-columns: 1fr;
    height: auto;
  }
  .sp-showcase-product { height: 280px; }
  .sp-showcase-people { height: 220px; }
  .ui-model-row { grid-template-columns: 1fr auto; }
  .ui-model-formula { display: none; }
  .ui-prop-row { grid-template-columns: 1fr auto; }
  .ui-prop-detail { display: none; }
}
@media (max-width: 640px) {
  .sp-showcase-people { display: none; }
  .sp-showcase-product { height: 260px; }
}

/* Content — light */
.uc-body .sp-content {
  background: #f7f8fa;
}
.uc-body .sp-section {
  border-bottom-color: rgba(0,0,0,0.07);
}

/* Performance gap table — light-mode overrides for use-case pages */
.uc-body .perf-gap-table-wrap {
  border-color: rgba(0,0,0,0.1);
}
.uc-body .perf-gap-table thead th {
  background: #f0f0f5;
  color: rgba(0,0,0,0.45);
  border-bottom-color: rgba(0,0,0,0.1);
}
.uc-body .perf-gap-table thead th.perf-col-best {
  color: #2D2B8F;
  background: rgba(45,43,143,0.07);
}
.uc-body .perf-gap-table tbody td {
  background: #ffffff;
  color: rgba(0,0,0,0.5);
}
.uc-body .perf-gap-table tbody tr {
  border-bottom-color: rgba(0,0,0,0.07);
}
.uc-body .perf-gap-table tbody td:first-child {
  color: #1a1a2e;
}
.uc-body .perf-gap-table tbody td.perf-col-best {
  color: #2D2B8F;
  background: rgba(45,43,143,0.05);
  border-left-color: rgba(45,43,143,0.2);
}
.uc-body .perf-gap-table thead th.perf-col-best,
.uc-body .perf-gap-table tbody td.perf-col-best {
  border-left: 1px solid rgba(45,43,143,0.2);
}
.uc-body .sp-section-label { color: #6c47ff; }
.uc-body .sp-section-title { color: #0f0c29; }
.uc-body .sp-section-body { color: rgba(15,12,41,0.62); }

/* Cards — light */
.uc-body .sp-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.uc-body .sp-card:hover {
  border-color: rgba(108,71,255,0.30);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(108,71,255,0.08);
}
.uc-body .sp-card-title { color: #0f0c29; }
.uc-body .sp-card-body { color: rgba(15,12,41,0.60); }
.uc-body .sp-card-icon {
  background: linear-gradient(135deg, rgba(108,71,255,0.12), rgba(86,39,186,0.08));
  border-color: rgba(108,71,255,0.18);
}
.uc-body .sp-card-icon svg path,
.uc-body .sp-card-icon svg rect { stroke: #6c47ff; }

/* Feature list — left-border accent style */
.sp-feature-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}
.sp-feature-item {
  padding-left: 20px;
  border-left: 2px solid rgba(140,108,255,0.35);
}
.sp-feature-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}
.sp-feature-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.52);
}
.uc-body .sp-feature-item {
  border-left-color: #6c47ff;
}
.uc-body .sp-feature-title { color: #0f0c29; }
.uc-body .sp-feature-body { color: rgba(15,12,41,0.60); }

/* Mock panel — light */
.uc-body .sp-mock-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.uc-body .sp-mock-panel::before {
  background: radial-gradient(circle, rgba(140,108,255,0.06) 0%, transparent 70%);
}
.uc-body .sp-mock-title { color: rgba(15,12,41,0.42); }
.uc-body .sp-mock-row {
  background: rgba(15,12,41,0.025);
  border-color: rgba(0,0,0,0.07);
}
.uc-body .sp-mock-desc { color: rgba(15,12,41,0.55); }
.uc-body .sp-mock-meta { color: rgba(15,12,41,0.35); }
.uc-body .sp-mock-divider { background: rgba(0,0,0,0.06); }
.uc-body .sp-mock-tag--info { color: #6c47ff; background: rgba(108,71,255,0.10); border-color: rgba(108,71,255,0.20); }

/* Process steps — light */
.uc-body .sp-step { border-bottom-color: rgba(0,0,0,0.06); }
.uc-body .sp-step-title { color: #0f0c29; }
.uc-body .sp-step-body { color: rgba(15,12,41,0.60); }

/* Highlight bar — light */
.uc-body .sp-highlight {
  background: rgba(108,71,255,0.05);
  border-color: rgba(108,71,255,0.15);
}
.uc-body .sp-highlight-text { color: rgba(15,12,41,0.75); }

/* Story block — light */
.uc-body .sp-story-block {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.uc-body .sp-story-scenario {
  background: rgba(108,71,255,0.04);
  border-bottom-color: rgba(0,0,0,0.06);
}
.uc-body .sp-story-scenario-detail { color: rgba(15,12,41,0.55); }
.uc-body .sp-story-scenario-detail strong { color: #0f0c29; }
.uc-body .sp-story-body p { color: rgba(15,12,41,0.65); }
.uc-body .sp-story-body strong { color: #0f0c29; }
.uc-body .sp-story-outcome {
  background: rgba(5,150,105,0.05);
  border-color: rgba(5,150,105,0.18);
}
.uc-body .sp-story-outcome p { color: rgba(15,12,41,0.70); }

/* Related — light */
.uc-body .sp-related {
  background: #ffffff;
  border-top-color: rgba(0,0,0,0.07);
}
.uc-body .sp-related-label { color: rgba(15,12,41,0.38); }
.uc-body .sp-related-link {
  background: #f7f8fa;
  border-color: rgba(0,0,0,0.08);
  color: rgba(15,12,41,0.60);
}
.uc-body .sp-related-link:hover {
  border-color: rgba(108,71,255,0.30);
  color: #0f0c29;
  background: rgba(108,71,255,0.04);
}

/* ============================================================
   HOMEPAGE STAT CALLOUT — problem section big number
   ============================================================ */
.hp-stat-callout {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin: 28px 0 32px;
  padding: 22px 40px;
  background: linear-gradient(135deg, #1a0545 0%, #2d1070 60%, #6c47ff 100%);
  border-radius: 8px;
}
.hp-stat-callout-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 7vw, 88px);
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.hp-stat-callout-text {
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

/* ============================================================
   HOMEPAGE QUOTES GRID
   ============================================================ */
.hp-quotes {
  padding: 80px 24px;
}
.hp-quotes-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.hp-quote-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: background 0.2s, border-color 0.2s;
}
.hp-quote-card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}
.hp-quote-text {
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
  line-height: 1.65;
  color: rgba(255,255,255,0.90);
  padding-left: 18px;
  border-left: 3px solid rgba(140,108,255,0.7);
}
.hp-quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hp-quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.20);
}
.hp-quote-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c47ff, #3322b8);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-quote-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hp-quote-meta strong {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}
.hp-quote-meta span {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hp-quotes-grid { grid-template-columns: 1fr; }
  .hp-stat-callout { padding: 18px 24px; gap: 16px; }
  .hp-stat-callout-text { white-space: normal; }
}

/* ============================================================
   STAT CALLOUT — problem section big number (use-case pages)
   ============================================================ */
.sp-stat-callout {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 36px 0 40px;
  padding: 32px 40px;
  background: linear-gradient(135deg, #0f0c29 0%, #2d1070 60%, #3322b8 100%);
  border-radius: 8px;
  flex-wrap: wrap;
}
.uc-body .sp-stat-callout {
  background: linear-gradient(135deg, #1a0545 0%, #2d1070 60%, #6c47ff 100%);
}
.sp-stat-callout-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.sp-stat-callout-text {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  max-width: 420px;
}

/* ============================================================
   INDUSTRY QUOTES SECTION
   ============================================================ */
.uc-quotes {
  background: #f7f8fa;
  padding: 80px 24px 100px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.uc-quotes-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.uc-quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.uc-quote-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.uc-quote-card:hover {
  box-shadow: 0 6px 24px rgba(108,71,255,0.10);
  border-color: rgba(108,71,255,0.25);
}
.uc-quote-text {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.65;
  color: #0f0c29;
  position: relative;
  padding-left: 20px;
  border-left: 3px solid #6c47ff;
}
.uc-quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.uc-quote-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(108,71,255,0.20);
}
.uc-quote-avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c47ff, #3322b8);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uc-quote-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.uc-quote-meta strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f0c29;
}
.uc-quote-meta span {
  font-size: 13px;
  color: rgba(15,12,41,0.50);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .uc-quotes-grid {
    grid-template-columns: 1fr;
  }
  .sp-stat-callout {
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px;
  }
}