/* Kintris Website v2 - Edgy / AI-Forward Design */

:root {
  /* Brand Colors */
  --primary: #0272EA;
  --primary-dark: #0C263F;
  --accent: #002DAA;
  --accent-teal: #0891B2;
  --text-dark: #0C263F;
  --text-gray: #475569;
  --text-light: #96A0AF;
  --bg-white: #FFFFFF;
  --bg-light: #F8FAFC;
  --bg-dark: #060E1A;
  --border-light: rgba(226, 232, 240, 0.5);
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.3);

  /* Typography */
  --font-heading: 'Alexandria', sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;

  /* Layout */
  --max-width: 1280px;
  --text-max-width: 600px;

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(12, 38, 63, 0.04);
  --shadow-md: 0 4px 20px rgba(12, 38, 63, 0.08);
  --shadow-lg: 0 16px 48px rgba(12, 38, 63, 0.12);
  --shadow-glow: 0 0 40px rgba(2, 114, 234, 0.15);
  --transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-dark);
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(34px, 4.5vw, 52px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: clamp(22px, 2.5vw, 28px); }

p {
  color: var(--text-gray);
  max-width: var(--text-max-width);
  line-height: 1.7;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ===================== */
/*  REBRAND BANNER       */
/*  Temporary - see rebrand-banner.js for how to turn it off. */
/* ===================== */
.rebrand-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--text-dark);
  color: #fff;
  text-align: center;
  padding: 10px 44px;
}

.rebrand-banner p {
  margin: 0;
  font-size: 14px;
  max-width: none;
  color: #fff;
}

.rebrand-banner-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.rebrand-banner-close:hover {
  color: #fff;
}

/* Shifts the fixed header (and everything below it) down by the banner's
   own rendered height, set as a CSS variable by rebrand-banner.js. */
body.has-rebrand-banner {
  padding-top: var(--rebrand-banner-height, 0px);
}

body.has-rebrand-banner .header {
  top: var(--rebrand-banner-height, 0px);
}

/* ===================== */
/*  HEADER               */
/* ===================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.4);
  z-index: 1000;
  transition: var(--transition);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 20px rgba(12, 38, 63, 0.06);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo img {
  height: 48px;
  width: auto;
  transition: var(--transition);
}

.logo:hover img {
  transform: scale(1.02);
}

.nav {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.nav a {
  color: var(--text-gray);
  font-size: 15px;
  font-weight: 500;
  position: relative;
}

.nav a:not(.btn):hover {
  color: var(--text-dark);
}

/* Nav dropdown */
.nav-dropdown-trigger {
  position: relative;
  cursor: pointer;
}

.nav-dropdown-label {
  color: var(--text-gray);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.nav-dropdown-trigger:hover .nav-dropdown-label {
  color: var(--text-dark);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.nav-dropdown-trigger:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-gray);
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nav-dropdown a:hover {
  background: var(--bg-light);
  color: var(--primary);
}

.nav-dropdown a::after {
  display: none !important;
}

/* Resources mega-menu */
.nav-dropdown--mega {
  left: auto;
  right: 0;
  transform: translateY(4px);
  width: 680px;
  max-width: calc(100vw - 40px);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}

.nav-dropdown-trigger:hover .nav-dropdown--mega {
  transform: translateY(0);
}

.nav-dropdown--mega .nav-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  white-space: normal;
  transition: background 0.2s ease;
}

.nav-dropdown--mega .nav-mega-item:hover {
  background: var(--bg-light);
}

.nav-mega-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 114, 234, 0.08);
  color: var(--primary);
}

.nav-mega-icon svg {
  width: 18px;
  height: 18px;
}

.nav-mega-text {
  display: flex;
  flex-direction: column;
}

.nav-mega-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 3px;
  line-height: 1.2;
}

.nav-dropdown--mega .nav-mega-item:hover .nav-mega-title {
  color: var(--primary);
}

.nav-mega-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-gray);
  white-space: normal;
}

.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
  transition: width 0.3s ease;
}

.nav a:not(.btn):hover::after {
  width: 100%;
}

/* ===================== */
/*  BUTTONS              */
/* ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
  font-family: var(--font-body);
  position: relative;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white !important;
  box-shadow: 0 4px 20px rgba(2, 114, 234, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(2, 114, 234, 0.35);
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--border-light);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  border-color: var(--primary);
  background: rgba(2, 114, 234, 0.04);
  transform: translateY(-2px);
}

/* ===================== */
/*  HERO                 */
/* ===================== */
.hero {
  padding: 100px 0 var(--space-lg);
  height: 100vh;
  max-height: 900px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
}

/* Ambient gradient orbs */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(2, 114, 234, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbFloat 20s ease-in-out infinite;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(7, 181, 188, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: orbFloat 15s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--text-dark) 30%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: translateY(24px);
  animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.hero p {
  font-size: 19px;
  margin-bottom: var(--space-lg);
  max-width: 540px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================== */
/*  INTELLIGENCE VIZ     */
/* ===================== */
.hero-visual {
  position: relative;
  opacity: 0;
  animation: heroReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.intel-viz {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto;
}

/* Connection lines SVG */
.intel-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Central orb */
.intel-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.intel-orb-core {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #0272EA, #002DAA);
  box-shadow: 0 0 40px rgba(2, 114, 234, 0.4), 0 0 80px rgba(2, 114, 234, 0.15);
  animation: orbPulse 3s ease-in-out infinite;
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(2, 114, 234, 0.4), 0 0 80px rgba(2, 114, 234, 0.15); }
  50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(2, 114, 234, 0.5), 0 0 120px rgba(2, 114, 234, 0.2); }
}

.intel-orb-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(2, 114, 234, 0.15);
}

.intel-orb-ring--1 {
  width: 100px;
  height: 100px;
  animation: ringExpand 3s ease-in-out infinite;
}

.intel-orb-ring--2 {
  width: 160px;
  height: 160px;
  animation: ringExpand 3s ease-in-out infinite 0.5s;
  border-color: rgba(2, 114, 234, 0.1);
}

.intel-orb-ring--3 {
  width: 240px;
  height: 240px;
  animation: ringExpand 3s ease-in-out infinite 1s;
  border-color: rgba(2, 114, 234, 0.06);
}

@keyframes ringExpand {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.6; }
}

/* Floating metric cards */
.intel-card {
  position: absolute;
  width: 152px;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(12, 38, 63, 0.1);
  z-index: 2;
  opacity: 0;
}

/* Hexagonal ring: top, two down each side, bottom - all equidistant from the orb */
.intel-card--1 { top: -7.9%; left: 31.9%;  animation: cardAppear 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }  /* top */
.intel-card--2 { top: 15.7%; left: 72.7%;  animation: cardAppear 0.6s cubic-bezier(0.22,1,0.36,1) 0.7s forwards; }  /* upper-right */
.intel-card--3 { top: 62.9%; left: 72.7%;  animation: cardAppear 0.6s cubic-bezier(0.22,1,0.36,1) 0.9s forwards; }  /* lower-right */
.intel-card--4 { top: 86.4%; left: 31.9%;  animation: cardAppear 0.6s cubic-bezier(0.22,1,0.36,1) 1.1s forwards; }  /* bottom */
.intel-card--5 { top: 62.9%; left: -8.9%;  animation: cardAppear 0.6s cubic-bezier(0.22,1,0.36,1) 1.3s forwards; }  /* lower-left */
.intel-card--6 { top: 15.7%; left: -8.9%;  animation: cardAppear 0.6s cubic-bezier(0.22,1,0.36,1) 1.5s forwards; }  /* upper-left */

@keyframes cardAppear {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* After initial appear, JS adds .floating for drift */
.intel-card.floating {
  opacity: 1;
}

.intel-card--1.floating { animation: drift1 16s ease-in-out infinite; }
.intel-card--2.floating { animation: drift2 18s ease-in-out infinite; }
.intel-card--3.floating { animation: drift3 20s ease-in-out infinite; }
.intel-card--4.floating { animation: drift4 17s ease-in-out infinite; }
.intel-card--5.floating { animation: drift5 19s ease-in-out infinite; }
.intel-card--6.floating { animation: drift6 21s ease-in-out infinite; }

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, -12px); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6px, 10px); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, 8px); }
}
@keyframes drift4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, -10px); }
}
@keyframes drift5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, 6px); }
}
@keyframes drift6 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, -10px); }
}

.intel-card-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 4px;
}

.intel-card-trend {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-teal);
  line-height: 1;
  margin-bottom: 4px;
}

.intel-card-label {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.intel-card-bar {
  margin-top: 8px;
  height: 4px;
  background: rgba(12, 38, 63, 0.08);
  border-radius: 2px;
  overflow: hidden;
  width: 80px;
}

.intel-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
  border-radius: 2px;
  animation: barGrow 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
}

@keyframes barGrow {
  from { width: 0 !important; }
}

/* Score row: value + red/amber/green status pill */
.intel-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.intel-gauge .intel-card-value {
  margin-bottom: 0;
}

.intel-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.intel-pill--green { background: rgba(16, 185, 129, 0.15); color: #059669; }
.intel-pill--amber { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.intel-pill--red   { background: rgba(239, 68, 68, 0.15);  color: #DC2626; }

.intel-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}

.intel-card-dot--green {
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
  animation: dotPulse 2s ease-in-out infinite;
}

.intel-card-dot--red {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.intel-card-sparkline {
  width: 80px;
  margin-bottom: 4px;
}

.intel-card-sparkline svg {
  width: 100%;
  height: 24px;
}

/* Dashboard Mockup (used in feature sections) */
.dashboard-mockup {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

.dashboard-mockup::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.05), transparent 30%);
  animation: shimmer 8s linear infinite;
}

@keyframes shimmer {
  to { transform: rotate(360deg); }
}

.dashboard-screen {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ===================== */
/*  SECTIONS             */
/* ===================== */
.section {
  padding: var(--space-4xl) 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
}

.section-header h2 {
  margin-bottom: var(--space-md);
}

.section-header p {
  font-size: 19px;
  margin: 0 auto;
}

.bg-light {
  background: var(--bg-light);
}

/* Dot grid background for light sections */
.bg-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, rgba(12, 38, 63, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* ===================== */
/*  GRID LAYOUTS         */
/* ===================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

/* ===================== */
/*  CORE INSIGHT         */
/* ===================== */
.insight-section {
  background: var(--bg-light);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.insight-section .centered-content {
  position: relative;
  z-index: 1;
}

.insight-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: var(--space-md);
  max-width: none;
}

.gradient-heading {
  background: linear-gradient(135deg, var(--text-dark) 30%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.insight-section p:not(.insight-label) {
  color: var(--text-gray);
  margin-left: auto;
  margin-right: auto;
}

/* ===================== */
/*  FLYWHEEL             */
/* ===================== */
.flywheel {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.flywheel-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: flywheelSpin 60s linear infinite;
}

.flywheel-arrows {
  animation: flywheelSpin 60s linear infinite;
}

@keyframes flywheelSpin {
  to { transform: rotate(360deg); }
}

/* Cancel the parent spin so arrows stay oriented */
.flywheel-ring .flywheel-arrows {
  animation: none;
}

.flywheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Pulsing gradient background */
.flywheel-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--primary), var(--accent) 80%);
  animation: corePulse 3s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(2, 114, 234, 0.3), 0 0 80px rgba(2, 114, 234, 0.1);
}

@keyframes corePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(2, 114, 234, 0.3), 0 0 80px rgba(2, 114, 234, 0.1); }
  50% { transform: scale(1.04); box-shadow: 0 0 50px rgba(2, 114, 234, 0.4), 0 0 100px rgba(2, 114, 234, 0.15); }
}

/* Radiating heartbeat rings */
.flywheel-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(2, 114, 234, 0.25);
  animation: heartbeatRing 3.5s ease-out infinite;
  pointer-events: none;
}

.flywheel-pulse-ring--2 {
  animation-delay: 1.75s;
}

@keyframes heartbeatRing {
  0% { width: 130px; height: 130px; opacity: 0.5; }
  100% { width: 220px; height: 220px; opacity: 0; }
}

.flywheel-center span {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.flywheel-center span:nth-child(2),
.flywheel-center span:nth-child(3) {
  color: white;
}

/* Cards at each position */
.flywheel-card {
  position: absolute;
  width: 165px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  transition: var(--transition);
  z-index: 2;
}

.flywheel-card--top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -15%);
}

.flywheel-card--top:hover {
  transform: translate(-50%, -15%) scale(1.05);
}

.flywheel-card--right {
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(15%, -50%);
}

.flywheel-card--right:hover {
  transform: translate(15%, -50%) scale(1.05);
}

.flywheel-card--bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 15%);
}

.flywheel-card--bottom:hover {
  transform: translate(-50%, 15%) scale(1.05);
}

.flywheel-card--left {
  top: 50%;
  left: 0;
  transform: translate(-15%, -50%);
}

.flywheel-card--left:hover {
  transform: translate(-15%, -50%) scale(1.05);
}

.flywheel-card:hover {
  box-shadow: var(--shadow-lg), 0 0 24px rgba(2, 114, 234, 0.08);
  border-color: rgba(2, 114, 234, 0.2);
}

.flywheel-card-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.1), rgba(7, 181, 188, 0.1));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}

.flywheel-card:hover .flywheel-card-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  color: white;
}

.flywheel-card-icon svg {
  width: 20px;
  height: 20px;
}

.flywheel-card h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.flywheel-card p {
  font-size: 12px;
  color: var(--text-gray);
  max-width: none;
  line-height: 1.4;
  margin: 0;
}

/* ===================== */
/*  SYSTEM / HEXWHEEL    */
/* ===================== */
.system-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-3xl);
  align-items: center;
}

.system-text {
  text-align: left;
}

.system-text h2 {
  margin-bottom: var(--space-md);
}

.system-text p {
  font-size: 19px;
  color: var(--text-gray);
  margin: 0;
}

.hexwheel {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.hexwheel-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Dashes flow continuously around the node hexagon */
.hexwheel-flow {
  animation: hexFlow 0.9s linear infinite;
}

@keyframes hexFlow {
  to { stroke-dashoffset: -12; }
}

.hexwheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hexwheel-center::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--primary), var(--accent) 80%);
  animation: corePulse 3s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(2, 114, 234, 0.3), 0 0 80px rgba(2, 114, 234, 0.1);
}

.hexwheel-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(2, 114, 234, 0.25);
  animation: heartbeatRing 3.5s ease-out infinite;
  pointer-events: none;
}

.hexwheel-pulse-ring--2 {
  animation-delay: 1.75s;
}

.hexwheel-center span {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.hexwheel-center span:nth-of-type(2) {
  color: white;
}

/* Nodes at each hexagon vertex (centred on their point) */
.hex-node {
  position: absolute;
  width: 158px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: var(--transition);
  z-index: 2;
}

.hex-node:hover {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(2, 114, 234, 0.08);
  border-color: rgba(2, 114, 234, 0.2);
  z-index: 3;
}

.hex-node--1 { top: 13%;   left: 50%; }   /* Measure - top */
.hex-node--2 { top: 31.5%; left: 82%; }   /* Insight - upper right */
.hex-node--3 { top: 68.5%; left: 82%; }   /* Action - lower right */
.hex-node--4 { top: 87%;   left: 50%; }   /* Track - bottom */
.hex-node--5 { top: 68.5%; left: 18%; }   /* Pulse - lower left */
.hex-node--6 { top: 31.5%; left: 18%; }   /* Improve - upper left */

.hex-node-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.1), rgba(7, 181, 188, 0.1));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}

.hex-node:hover .hex-node-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  color: white;
}

.hex-node-icon svg {
  width: 19px;
  height: 19px;
}

.hex-node h3 {
  font-size: 14px;
  margin-bottom: 4px;
}

.hex-node p {
  font-size: 11.5px;
  color: var(--text-gray);
  max-width: none;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 1024px) {
  .system-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .system-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
  }
  .hexwheel {
    max-width: 540px;
  }
  .hex-node {
    width: 150px;
  }
}

@media (max-width: 600px) {
  .hexwheel {
    max-width: 380px;
  }
  .hex-node {
    width: 116px;
    padding: 10px;
  }
  .hex-node p {
    display: none;
  }
  .hexwheel-center {
    width: 104px;
    height: 104px;
  }
  .hexwheel-center span {
    font-size: 10px;
  }
}

/* ===================== */
/*  OUTCOMES GRID        */
/* ===================== */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.outcome-card {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.5);
  transition: var(--transition);
}

.outcome-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(2, 114, 234, 0.2);
}

.outcome-icon {
  width: 57px;
  height: 57px;
  margin: 0 auto var(--space-sm);
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.08), rgba(7, 181, 188, 0.08));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}

.outcome-card:hover .outcome-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  color: white;
}

.outcome-icon svg {
  width: 29px;
  height: 29px;
}

.outcome-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.kin-letter-badge {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.outcome-card p {
  font-size: 14px;
  color: var(--text-gray);
  max-width: none;
  line-height: 1.5;
}

/* Industry tab variant of .outcome-card - used on use-cases.html to select
   which industry's summary shows in .industry-panel below */
.outcome-card--tab {
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.outcome-card--tab.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(2, 114, 234, 0.15);
}

.outcome-card--tab.is-active .outcome-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  color: #fff;
}

/* Wraps each tab button with its (desktop-hidden) accordion panel so
   .stagger-children's entrance-animation delays - which key off each
   direct child's position via :nth-child - still see exactly 5 items
   regardless of the extra accordion divs. A plain block box (not
   display:contents - that would stop opacity/transform from having any
   visual effect on its contents, breaking the fade-in entirely): the
   wrapper has no padding/border/background of its own, so it's visually
   transparent - at desktop it's exactly one grid cell sized to its
   button (the accordion inside contributes no space, display:none), and
   at mobile the button and its accordion simply stack normally within it. */
.outcome-tab-wrap {
  display: flex;
  flex-direction: column;
}

.outcome-tab-wrap > .outcome-card--tab {
  flex: 1;
}

/* Chevron + inline per-tab panel only ever appear on mobile (see the
   768px breakpoint) - on desktop the shared .industry-panel below,
   driven by hover, is unchanged. Kept out of desktop's layout flow
   entirely via display:none, not just visually hidden. */
.tab-chevron {
  display: none;
}

.industry-accordion {
  display: none;
}

.industry-panel {
  max-width: 780px;
  margin: var(--space-xl) auto 0;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-xl);
  text-align: left;
}

.industry-panel-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}

.industry-panel h3 {
  margin: 0 0 10px;
}

.industry-panel p {
  margin: 0 0 var(--space-md);
  max-width: none;
}

.industry-panel-link {
  font-weight: 600;
  color: var(--primary);
  font-size: 14px;
}

/* ===================== */
/*  ABSTRACT VISUALS     */
/* ===================== */
.abstract-viz {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Survey Mockup */
.survey-mockup {
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.survey-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
}

.survey-logo {
  height: 22px;
  width: auto;
}

.survey-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-progress-bar {
  height: 4px;
  background: rgba(2, 114, 234, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.survey-progress-fill {
  height: 100%;
  width: 33%;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.survey-progress-text {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
  text-align: right;
}

.survey-body {
  padding: 40px 32px 48px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.survey-question {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: var(--space-lg);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.survey-question.fade-out {
  opacity: 0;
  transform: translateY(-8px);
}

.survey-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.survey-choices.fade-out {
  opacity: 0;
  transform: translateY(-8px);
}

.survey-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-white);
  cursor: default;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.4;
}

.survey-choice-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.survey-choice-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.survey-choice.selected {
  border-color: var(--primary);
  background: rgba(2, 114, 234, 0.04);
  color: var(--text-dark);
  font-weight: 500;
}

.survey-choice.selected .survey-choice-dot {
  border-color: var(--primary);
}

.survey-choice.selected .survey-choice-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.survey-choice-emoji {
  font-size: 18px;
  flex-shrink: 0;
}

/* Analytics viz */
.analytics-viz {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: var(--space-xl);
  aspect-ratio: auto;
  max-width: none;
  flex-direction: column;
  overflow: hidden;
}

.analytics-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 160px;
  width: 100%;
  margin-bottom: var(--space-md);
}

.analytics-bar {
  flex: 1;
  height: var(--height);
  background: linear-gradient(180deg, var(--primary), rgba(2, 114, 234, 0.3));
  border-radius: 6px 6px 2px 2px;
  opacity: 0;
  animation: barRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay) forwards;
  position: relative;
}

.analytics-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
  border-radius: 6px 6px 0 0;
}

@keyframes barRise {
  from { height: 0; opacity: 0; }
  to { height: var(--height); opacity: 1; }
}

.analytics-line {
  width: 100%;
  height: 80px;
}

.analytics-line svg {
  width: 100%;
  height: 100%;
}

.analytics-label {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
}

.analytics-label-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-teal);
  display: block;
  line-height: 1;
}

.analytics-label-text {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ===================== */
/*  CASE STUDY CARDS v2  */
/* ===================== */
.case-study-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-teal);
  background: rgba(7, 181, 188, 0.08);
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: var(--space-sm);
}

/* Industry tag colours - lets a reader sort a grid by industry at a glance */
.case-study-badge--financial-services { color: #0272EA; background: rgba(2, 114, 234, 0.08); }
.case-study-badge--insurance { color: #0891B2; background: rgba(8, 145, 178, 0.08); }
.case-study-badge--construction { color: #B45309; background: rgba(180, 83, 9, 0.08); }
.case-study-badge--hospitality { color: #BE185D; background: rgba(190, 24, 93, 0.08); }
.case-study-badge--public-sector { color: #6D28D9; background: rgba(109, 40, 217, 0.08); }
.case-study-badge--non-profit { color: #15803D; background: rgba(21, 128, 61, 0.08); }

.case-study-card .card-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  margin-top: auto;
  padding-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.case-study-card:hover .card-link {
  gap: 10px;
}

.case-study-card {
  display: flex;
  flex-direction: column;
}

/* ===================== */
/*  RESEARCH CARDS v2    */
/* ===================== */
.research-card-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.08), rgba(7, 181, 188, 0.08));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: var(--space-md);
  transition: var(--transition);
}

.research-card:hover .research-card-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  color: white;
}

.research-card-icon svg {
  width: 22px;
  height: 22px;
}

.research-card-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: var(--space-xs);
  max-width: none;
}

/* ===================== */
/*  IMPACT NUMBERS       */
/* ===================== */
.impact-section {
  padding: var(--space-3xl) 0;
  background: #0D253F;
  position: relative;
  overflow: hidden;
}

.impact-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(2, 114, 234, 0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.impact-section::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(7, 181, 188, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  position: relative;
  z-index: 1;
}

.impact-item {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
}

.impact-number {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  background: linear-gradient(135deg, white 30%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.impact-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  font-weight: 500;
}

/* ===================== */
/*  BEFORE / AFTER       */
/* ===================== */
.transform-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.transform-card {
  border-radius: 16px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.transform-card--before {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
}

.transform-card--after {
  background: rgba(2, 114, 234, 0.02);
  border: 1px solid rgba(2, 114, 234, 0.12);
  min-height: 420px;
}

.transform-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: var(--space-md);
  align-self: flex-start;
}

.transform-tag--before {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-light);
}

.transform-tag--after {
  background: rgba(2, 114, 234, 0.08);
  color: var(--primary);
}

.transform-caption {
  font-size: 14px;
  color: var(--text-light);
  margin-top: var(--space-md);
  max-width: none;
  text-align: center;
}

.transform-card--after .transform-caption {
  color: var(--primary);
  font-weight: 500;
}

.transform-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transform-arrow svg {
  width: 48px;
  height: 48px;
  animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Fragmented viz (before) */
.viz-fragmented {
  position: relative;
  height: 240px;
  flex: 1;
}

.frag {
  position: absolute;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
  animation: fragDrift var(--dur, 16s) ease-in-out infinite;
  line-height: 1.3;
}

.frag--1 { top: 8%; left: 5%; transform: rotate(-4deg); --dur: 18s; }
.frag--2 { top: 5%; right: 10%; transform: rotate(3deg); --dur: 20s; }
.frag--3 { top: 38%; left: 15%; transform: rotate(-2deg); --dur: 15s; font-size: 11px; }
.frag--4 { top: 45%; right: 5%; transform: rotate(5deg); --dur: 22s; }
.frag--5 { bottom: 18%; left: 8%; transform: rotate(2deg); --dur: 17s; }
.frag--6 { bottom: 12%; right: 25%; transform: rotate(-6deg); --dur: 19s; color: #e2e8f0; font-size: 18px; font-weight: 700; background: transparent; border: 2px dashed #e2e8f0; box-shadow: none; }
.frag--7 { top: 20%; left: 45%; transform: rotate(1deg); --dur: 21s; }

@keyframes fragDrift {
  0%, 100% { margin: 0; }
  30% { margin: -4px 0 0 5px; }
  60% { margin: 3px 0 0 -6px; }
}

/* System viz (after) - AI machine */
.viz-system {
  position: relative;
  height: 340px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sys-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

/* Pulsing core */
.sys-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--primary), var(--accent));
  box-shadow: 0 0 30px rgba(2, 114, 234, 0.35), 0 0 60px rgba(2, 114, 234, 0.1);
  z-index: 4;
  animation: sysCorePulse 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sys-core-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

.sys-core-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(2, 114, 234, 0.2);
  animation: sysCoreRipple 3s ease-out infinite;
}

.sys-core-pulse--2 {
  animation-delay: 1.5s;
}

@keyframes sysCorePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes sysCoreRipple {
  0% { width: 56px; height: 56px; opacity: 0.4; }
  100% { width: 120px; height: 120px; opacity: 0; }
}

/* Shared node styles */
.sys-node {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50px;
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
}

/* Inner ring nodes - data inputs (smaller, muted) */
.sys-node--inner {
  border: 1px solid rgba(12, 38, 63, 0.1);
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sys-node--i1 { top: 22%; left: 50%; transform: translateX(-50%); }
.sys-node--i2 { top: 50%; right: 12%; transform: translateY(-50%); }
.sys-node--i3 { bottom: 22%; left: 50%; transform: translateX(-50%); }
.sys-node--i4 { top: 50%; left: 12%; transform: translateY(-50%); }

.sys-node--i1 { animation: sysAppear 0.4s ease 0.2s forwards, sysDriftA 18s ease-in-out 1s infinite; }
.sys-node--i2 { animation: sysAppear 0.4s ease 0.4s forwards, sysDriftB 20s ease-in-out 1s infinite; }
.sys-node--i3 { animation: sysAppear 0.4s ease 0.6s forwards, sysDriftA 22s ease-in-out 1s infinite; }
.sys-node--i4 { animation: sysAppear 0.4s ease 0.8s forwards, sysDriftB 16s ease-in-out 1s infinite; }

/* Outer ring nodes - intelligence outputs (larger, branded) */
.sys-node--outer {
  border: 1px solid rgba(2, 114, 234, 0.15);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(2, 114, 234, 0.06);
}

.sys-node--o1 { top: 4%; left: 50%; transform: translateX(-50%); }
.sys-node--o2 { top: 50%; right: -4%; transform: translateY(-50%); color: #22c55e; border-color: rgba(34, 197, 94, 0.15); }
.sys-node--o3 { bottom: 4%; left: 50%; transform: translateX(-50%); color: var(--accent-teal); border-color: rgba(7, 181, 188, 0.15); }
.sys-node--o4 { top: 50%; left: -4%; transform: translateY(-50%); }

.sys-node--o1 { animation: sysAppear 0.5s ease 0.5s forwards, sysDriftC 15s ease-in-out 1.5s infinite; }
.sys-node--o2 { animation: sysAppear 0.5s ease 0.8s forwards, sysDriftD 17s ease-in-out 1.5s infinite; }
.sys-node--o3 { animation: sysAppear 0.5s ease 1.1s forwards, sysDriftC 19s ease-in-out 1.5s infinite; }
.sys-node--o4 { animation: sysAppear 0.5s ease 1.4s forwards, sysDriftD 14s ease-in-out 1.5s infinite; }

@keyframes sysAppear {
  to { opacity: 1; }
}

@keyframes sysDriftA {
  0%, 100% { margin: 0; }
  50% { margin: -3px 0 0 4px; }
}

@keyframes sysDriftB {
  0%, 100% { margin: 0; }
  50% { margin: 4px 0 0 -3px; }
}

@keyframes sysDriftC {
  0%, 100% { margin: 0; }
  40% { margin: -4px 0 0 6px; }
  80% { margin: 2px 0 0 -4px; }
}

@keyframes sysDriftD {
  0%, 100% { margin: 0; }
  35% { margin: 5px 0 0 -2px; }
  70% { margin: -3px 0 0 5px; }
}

/* ===================== */
/*  QUOTE                */
/* ===================== */
.quote-block {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.quote-mark {
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: -10px;
}

.quote-block blockquote {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-lg);
}

.quote-attribution {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.15), rgba(7, 181, 188, 0.15));
  border: 2px solid rgba(2, 114, 234, 0.1);
}

.quote-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
}

.quote-role {
  font-size: 13px;
  color: var(--text-light);
  text-align: left;
}

/* ===================== */
/*  ABOUT - PULL QUOTE   */
/* ===================== */
.about-pullquote-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  max-width: 780px;
  margin: var(--space-xl) auto 0;
}

.about-pullquote-photo-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-pullquote-photo-fallback {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
}

.about-pullquote-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-pullquote {
  padding-left: var(--space-lg);
  border-left: 3px solid var(--primary);
  text-align: left;
}

.about-pullquote blockquote {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 500;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.about-pullquote-attribution {
  font-size: 14px;
  color: var(--text-gray);
}

.about-pullquote-attribution strong {
  color: var(--text-dark);
}

@media (max-width: 700px) {
  .about-pullquote-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================== */
/*  TESTIMONIALS         */
/* ===================== */
.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  box-shadow: 0 4px 16px rgba(12, 38, 63, 0.07);
}

.testimonial-quote-mark {
  font-family: var(--font-heading);
  font-size: 46px;
  line-height: 1;
  margin: 0 0 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.testimonial-card blockquote {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0 0 var(--space-md);
  flex: 1;
}

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.testimonial-attribution::before {
  content: '';
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
  margin-bottom: var(--space-xs);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1);
  flex-shrink: 0;
}

.testimonial-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
}

.testimonial-role {
  font-size: 13px;
  color: var(--text-gray);
}

.testimonial-card--placeholder {
  border-style: dashed;
  box-shadow: none;
}

.testimonial-card--placeholder .testimonial-quote-mark {
  background: none;
  -webkit-text-fill-color: var(--border-light);
  color: var(--border-light);
}

.testimonial-card--placeholder .testimonial-attribution::before {
  background: var(--border-light);
}

.testimonial-card--placeholder blockquote,
.testimonial-card--placeholder .testimonial-name,
.testimonial-card--placeholder .testimonial-role {
  color: var(--text-gray);
}

/* Centered carousel with an emphasised active (middle) card */
.testimonials {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.testimonials .section-header {
  margin-bottom: var(--space-lg);
}

.testimonial-carousel {
  --card-w: 380px;
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-md) max(0px, calc(50% - var(--card-w) / 2));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.testimonial-carousel::-webkit-scrollbar {
  display: none;
}

.testimonial-carousel .testimonial-card {
  flex: 0 0 var(--card-w);
  height: auto;
  scroll-snap-align: center;
  transform: scale(0.9);
  opacity: 0.5;
  box-shadow: 0 6px 18px rgba(12, 38, 63, 0.06);
  transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease;
}

.testimonial-carousel .testimonial-card.is-active {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 22px 48px rgba(12, 38, 63, 0.18);
}

@media (max-width: 560px) {
  .testimonial-carousel {
    --card-w: 80vw;
  }
}

.testimonial-nav-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-md);
}

.testimonial-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(12, 38, 63, 0.08);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.testimonial-nav:hover {
  background: var(--bg-light);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 38, 63, 0.12);
}

/* ===================== */
/*  CTA v2               */
/* ===================== */
.cta-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  margin-bottom: var(--space-md);
  max-width: none;
  position: relative;
  z-index: 1;
}

.btn-lg {
  font-size: 17px;
  padding: 18px 40px;
}

/* ===================== */
/*  GLASS CARDS          */
/* ===================== */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: var(--space-xl);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2, 114, 234, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(2, 114, 234, 0.08);
  border-color: rgba(2, 114, 234, 0.2);
}

.card:hover::before {
  opacity: 1;
}

.card h3 {
  font-size: 22px;
  margin-bottom: var(--space-sm);
  transition: var(--transition);
}

.card:hover h3 {
  color: var(--primary);
}

.card p {
  font-size: 16px;
  color: var(--text-gray);
}

/* Card icon number */
.card-step {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-sm);
  line-height: 1;
}

/* ===================== */
/*  PROOF BAND           */
/* ===================== */
.proof-band {
  padding: var(--space-lg) 0;
  background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

/* Fade edges */
.proof-band::before,
.proof-band::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.proof-band::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-white), transparent);
}

.proof-band::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-light), transparent);
}

.marquee {
  display: flex;
  width: max-content;
  /* Without width: max-content, a block-level flex container sizes to its
     PARENT's width, not to its two overflowing tracks (kept alive only by
     flex-shrink: 0 on .marquee-content). translateX(-50%) is relative to
     this element's own box, so without this it only ever travels a
     fraction of the real track width before snapping back - looks both
     slow and like it resets partway through the list.
     animation-duration is set in JS (customers.js) once both tracks are
     built and measured, so it matches the actual content width */
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-shrink: 0;
  padding-right: var(--space-xl);
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-gray);
  transition: var(--transition);
}

.marquee-item:hover {
  border-color: rgba(2, 114, 234, 0.3);
  box-shadow: 0 0 20px rgba(2, 114, 234, 0.08);
}

.marquee-item strong {
  color: var(--primary);
  font-weight: 700;
}

.marquee-item .proof-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.marquee-item .proof-icon svg {
  width: 10px;
  height: 10px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Proof-band's marquee has fixed, static content (unlike the customer
   logo ticker below it, which is built and measured by customers.js at
   runtime) so it can use a fixed-duration CSS animation directly. */
.proof-band .marquee {
  animation: marquee 32s linear infinite;
}

/* Customer logo ticker */
.logo-strip {
  padding: var(--space-2xl) 0;
  overflow: hidden;
  position: relative;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.logo-strip-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-gray);
  margin: 0 auto var(--space-lg);
}

.logo-strip::before,
.logo-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.logo-strip::before { left: 0; background: linear-gradient(90deg, var(--bg-white), transparent); }
.logo-strip::after { right: 0; background: linear-gradient(-90deg, var(--bg-white), transparent); }

/* Each logo slot: a customer name, with a logo image above it once added */
.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  min-height: 48px;
  padding: 0 var(--space-md);
  white-space: nowrap;
  opacity: 0.7;
  transition: var(--transition);
}

.logo-item:hover {
  opacity: 1;
}

.logo-item-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-gray);
  transition: var(--transition);
}

.logo-item:hover .logo-item-label {
  color: var(--text-dark);
}

.logo-item.has-logo {
  min-height: 64px;
}

.logo-item.has-logo .logo-item-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
}

.logo-item img {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  transition: var(--transition);
}

.logo-item:hover img {
  filter: grayscale(0);
}

/* ===================== */
/*  FEATURE SECTIONS     */
/* ===================== */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

.feature-grid.reverse {
  direction: rtl;
}

.feature-grid.reverse > * {
  direction: ltr;
}

/* Grid items default to min-width:auto, which means a single long
   nbsp-joined word pair in .feature-content h2 (widow prevention) can
   force the WHOLE shared grid column wider than the viewport at narrow
   widths - both sides of the grid inflate and overflow together, even
   though the heading itself is the only thing actually too wide. */
.feature-content,
.feature-visual {
  min-width: 0;
}

.feature-content h2 {
  margin-bottom: var(--space-md);
}

.feature-content p {
  margin-bottom: var(--space-sm);
}

.feature-content ul {
  margin-top: var(--space-md);
}

.feature-content li {
  padding: 10px 0;
  padding-left: var(--space-lg);
  position: relative;
  color: var(--text-gray);
  font-size: 17px;
}

.feature-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  opacity: 0.15;
}

.feature-content li::after {
  content: "\2713";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-weight: bold;
  font-size: 12px;
}

/* ===================== */
/*  CASE STUDY CARDS     */
/* ===================== */
.case-study-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-xl);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.case-study-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.case-study-card:hover::after {
  transform: scaleX(1);
}

/* Placeholder (coming soon) case study cards */
.case-study-card--soon {
  border-style: dashed;
  cursor: default;
}

.case-study-card--soon:hover {
  transform: none;
  box-shadow: none;
}

.case-study-card--soon:hover::after {
  transform: scaleX(0);
}

.case-study-card .card-link.card-link--muted {
  color: var(--text-gray);
}

/* ===================== */
/*  CASE STUDIES — UNIFORM CARD GRID  */
/* ===================== */
/* Every card (live or coming-soon) shares one shape and size - readers tell
   them apart by content (stat, colour-coded industry tag), not box size. */
.cs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.cs-card-grid .case-study-card {
  padding: var(--space-md);
}

/* Thumbnail / logo placeholders */
.cs-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-gray);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.cs-thumb svg {
  width: 30px;
  height: 30px;
  opacity: 0.45;
}

.cs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Dominant stat - the primary thing a reader scans for on each card */
.cs-stat-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin-bottom: var(--space-sm);
}

.cs-stat-value {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.cs-stat-label {
  font-size: 13px;
  color: var(--text-gray);
}

.cs-stat-secondary {
  width: 100%;
  font-size: 12px;
  color: var(--text-light);
}

.case-study-logo {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.case-study-card h3 {
  font-size: 20px;
  color: var(--text-dark);
  line-height: 1.4;
  /* Headline text is editable via case-studies-list.md, so a length
     can't be assumed ahead of time. The card has overflow:hidden (to
     clip the hover accent bar to its rounded corners), which would
     otherwise silently clip an unbroken word too wide for a narrow
     card instead of wrapping it - this is just a defensive backstop
     against that, not something expected to trigger in practice. */
  overflow-wrap: break-word;
}

/* ===================== */
/*  OUTCOMES LIST        */
/* ===================== */
.outcomes-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  line-height: 1.6;
  color: var(--text-gray);
  font-size: 18px;
}

.outcomes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
}

/* ===================== */
/*  CTA SECTION          */
/* ===================== */
.cta-section {
  text-align: center;
  padding: var(--space-4xl) 0;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

/* Animated gradient mesh */
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(2, 114, 234, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(7, 181, 188, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 45, 170, 0.1) 0%, transparent 50%);
  animation: meshMove 12s ease-in-out infinite;
}

@keyframes meshMove {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-3%, 3%) rotate(2deg); }
}

.cta-section h2 {
  color: white;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  position: relative;
  z-index: 1;
}

.cta-section .btn {
  position: relative;
  z-index: 1;
}

/* ===================== */
/*  RESEARCH CARDS       */
/* ===================== */
.research-card {
  display: block;
  text-decoration: none;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-xl);
  transition: var(--transition);
}

.research-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.research-card h3 {
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
}

.research-card p {
  font-size: 16px;
}

.research-card .card-link {
  color: var(--primary);
  font-weight: 600;
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.research-card:hover .card-link {
  gap: 10px;
}

/* Resources page: icon inline to the left of the heading */
.resource-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  min-height: 68px; /* fits a two-line heading so all cards align (icon + description) */
}

.resource-card-head .research-card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

.resource-card-head .research-card-icon svg {
  width: 27px;
  height: 27px;
}

.resource-card-head h3 {
  margin-bottom: 0;
}

/* Strictly equal columns (content never widens one card) */
.resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Equal-height cards so text starts and the link ends in line across cards */
.resource-grid .research-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.resource-grid .research-card .card-link {
  margin-top: auto;
}

/* Guarantee at least one row of space between the description and the link,
   so links stay aligned at the bottom with breathing room on every card */
.resource-grid .research-card p {
  margin-bottom: var(--space-lg);
}

/* Trust / compliance badges (platform) */
.trust-badges {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.trust-badge-emblem {
  width: 104px;
  height: 104px;
  border-radius: 18px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
}

.trust-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
}

.trust-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.trust-emblem-soc {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--text-dark);
}

.trust-emblem-iso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.trust-emblem-iso span {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dark);
}

.trust-copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.trust-copy h2 {
  margin-bottom: var(--space-md);
}

.trust-copy p {
  font-size: 19px;
  color: var(--text-gray);
  margin: 0 auto;
}

/* Lead + two supporting columns */
.trust-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: 920px;
  margin: 0 auto;
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-light);
}

.trust-split-item h3 {
  margin-bottom: var(--space-sm);
  color: var(--text-dark);
}

.trust-split-item p {
  color: var(--text-gray);
  margin: 0;
}

@media (max-width: 768px) {
  .trust-split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Equal-size horizontal cards (icon left of heading, description beneath) */
.lead-rows {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lead-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 104px;
  padding: var(--space-lg) var(--space-xl);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  transition: var(--transition);
}

.lead-row:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(2, 114, 234, 0.2);
}

.lead-row .flywheel-card-icon {
  margin: 0;
  flex-shrink: 0;
  width: 47px;
  height: 47px;
  border-radius: 13px;
}

.lead-row .flywheel-card-icon svg {
  width: 26px;
  height: 26px;
}

.lead-row-text h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.lead-row-text p {
  margin: 0;
  color: var(--text-gray);
}

/* ===================== */
/*  FOOTER               */
/* ===================== */
.footer {
  background: var(--bg-dark);
  color: #8A94A6;
  padding: var(--space-3xl) 0 var(--space-lg);
  margin-top: -1px;
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  margin-bottom: 0;
}

/* Top: brand | link columns | newsletter, all in one row */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2.1fr 1.15fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-lg);
}

.footer-brand-col {
  max-width: none;
}

.footer-contact {
  display: inline-block;
  margin-top: var(--space-md);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  transition: var(--transition);
}

.footer-contact:hover {
  color: white;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.footer-badge svg {
  color: var(--accent-teal);
  flex-shrink: 0;
}

/* Social links */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: var(--space-md);
}

.footer-social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  transition: var(--transition);
}

.footer-social-link:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-2px);
}

/* Newsletter (rightmost column of the footer top row) */
.footer-newsletter {
  width: 100%;
  max-width: none;
}

.footer-newsletter h4 {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-family: var(--font-heading);
  margin-bottom: var(--space-md);
}

.footer-sub-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-sub-form input[type="text"],
.footer-sub-form input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: white;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-sub-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.footer-sub-form input:focus {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.1);
}

.footer-sub-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.footer-sub-consent input {
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.footer-sub-form .btn {
  width: 100%;
  justify-content: center;
  padding: 11px 20px;
  font-size: 14px;
}

.footer-sub-form.show-invalid input:invalid,
.footer-sub-form.show-invalid .footer-sub-consent input:invalid {
  border-color: #f87171;
}

.footer-sub-success {
  display: none;
  color: var(--accent-teal);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.footer-sub-form.submitted input,
.footer-sub-form.submitted .footer-sub-consent,
.footer-sub-form.submitted .btn {
  display: none;
}

.footer-sub-form.submitted .footer-sub-success {
  display: block;
}

/* Office locations */
.footer-offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-office h5 {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 6px;
}

.footer-office p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

.footer-column h4 {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  font-weight: 600;
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  transition: var(--transition);
}

.footer-column a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Match the Resources dropdown to the other footer links */
.footer .nav-dropdown-label {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.footer .nav-dropdown-trigger:hover .nav-dropdown-label {
  color: white;
}

.footer-brand .logo img {
  height: 32px;
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  font-size: 15px;
  line-height: 1.6;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.66);
}

.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 14px;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: none;
}

/* ===================== */
/*  MOBILE MENU          */
/* ===================== */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-dark);
}

/* ===================== */
/*  UTILITIES            */
/* ===================== */
.centered-content {
  max-width: 700px;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* ===================== */
/*  SCROLL ANIMATIONS    */
/* ===================== */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-animate.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-children.active > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(n+6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* ===================== */
/*  CASE STUDY PAGES     */
/* ===================== */
.cs-back {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: var(--space-md);
  transition: color 0.3s ease;
}

.cs-back:hover {
  color: var(--primary);
}

/* Impact card on overview */
.cs-impact-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-width: 380px;
  margin: 0 auto;
}

.cs-impact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-impact-items {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-impact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-dark);
  line-height: 1.5;
}

.cs-impact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Stat pills on case study cards */
.cs-card-stats {
  display: flex;
  gap: 8px;
  margin: var(--space-sm) 0;
  flex-wrap: wrap;
}

.cs-card-stat {
  font-size: 12px;
  color: var(--primary);
  background: rgba(2, 114, 234, 0.06);
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 500;
}

.cs-card-stat strong {
  font-weight: 700;
}

/* Key results strip - matched to .cs-timeline's width so the page reads as
   one consistent column instead of the strip/hero photo bleeding wider */
.cs-results-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: 740px;
  margin: 0 auto;
}

/* Case study hero photo - same max-width as .cs-timeline/.cs-results-strip.
   Selector combined with .blog-post-image for specificity, since that rule
   (defined later in this file) sets its own margin and would otherwise win. */
.blog-post-image.cs-hero-photo {
  max-width: 740px;
  margin: 0 auto;
}

.cs-result-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: var(--transition);
}

.cs-result-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(2, 114, 234, 0.2);
}

.cs-result-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-sm);
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.08), rgba(8, 145, 178, 0.08));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}

.cs-result-card:hover .cs-result-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  color: white;
}

.cs-result-icon svg {
  width: 22px;
  height: 22px;
}

.cs-result-card h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.cs-result-card p {
  font-size: 13px;
  color: var(--text-gray);
  max-width: none;
  margin: 0;
}

/* Timeline */
.cs-timeline {
  position: relative;
  padding-left: 40px;
  max-width: 740px;
  margin: 0 auto;
}

.cs-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 11px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--border-light) 0%, var(--primary) 30%, var(--accent-teal) 70%, var(--border-light) 100%);
  border-radius: 2px;
}

.cs-timeline-item {
  position: relative;
  padding-bottom: var(--space-xl);
}

.cs-timeline-item:last-child {
  padding-bottom: 0;
}

.cs-timeline-dot {
  position: absolute;
  left: -40px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 2px solid var(--border-light);
  z-index: 1;
  transition: var(--transition);
}

.cs-timeline-dot--active {
  border-color: var(--primary);
  background: var(--bg-white);
}

.cs-timeline-dot--active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

.cs-timeline-dot--complete {
  border-color: #22c55e;
  background: #22c55e;
}

.cs-timeline-dot--complete::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cs-timeline-content {
  padding: 0 0 0 var(--space-sm);
}

.cs-timeline-content h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin-bottom: var(--space-sm);
}

.cs-timeline-content p {
  max-width: none;
}

/* Before/After transform in timeline */
.cs-transform {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.cs-transform-from,
.cs-transform-to {
  flex: 1;
  padding: var(--space-md);
  border-radius: 12px;
}

.cs-transform-from {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
}

.cs-transform-to {
  background: rgba(2, 114, 234, 0.04);
  border: 1px solid rgba(2, 114, 234, 0.15);
}

.cs-transform-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}

.cs-transform-from .cs-transform-label {
  color: var(--text-light);
}

.cs-transform-to .cs-transform-label {
  color: var(--primary);
}

.cs-transform-from p,
.cs-transform-to p {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  max-width: none;
}

.cs-transform-from p { color: var(--text-gray); }
.cs-transform-to p { color: var(--text-dark); }

.cs-transform-arrow {
  flex-shrink: 0;
}

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

  .cs-timeline {
    padding-left: 32px;
  }

  .cs-timeline-dot {
    left: -32px;
    width: 20px;
    height: 20px;
  }

  .cs-transform {
    flex-direction: column;
  }

  .cs-transform-arrow {
    transform: rotate(90deg);
  }
}

/* ===================== */
/*  ABOUT - JOURNEY PATH */
/* ===================== */
.about-journey-track {
  display: flex;
  align-items: stretch;
  position: relative;
}

.about-journey-track::before {
  content: '';
  position: absolute;
  top: 96px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--border-light) 0%, var(--primary) 15%, var(--accent-teal) 85%, var(--border-light) 100%);
  z-index: 0;
}

.about-journey-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
  position: relative;
  z-index: 1;
}

.about-journey-slot {
  min-height: 82px;
}

.about-journey-slot--top {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 14px;
}

.about-journey-slot--bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 14px;
}

.about-journey-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  box-shadow: 0 4px 14px rgba(2, 114, 234, 0.25);
  transition: var(--transition);
}

/* Applied only to nodes whose item has text ABOVE the line (2016, 2021-22,
   2024, 2026). Those nodes used to flow directly after their own top-slot,
   so a node's position depended on how much text preceded it. 82px puts
   the node right at the bottom edge of a standard 2-line entry's text
   (2016/2024/2026), matching the pixel-verified line position as closely
   as possible without the node covering the text. The 3-line 2021-22
   entry needs its own larger value (set inline in about.html) since its
   text runs longer - anything this low would sit behind its last line.
   "Text below the line" nodes (2020/2023/2025) are already close to the
   line naturally and are left in normal flow, unaffected. */
.about-journey-node--pinned {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
}

.about-journey-node svg {
  width: 18px;
  height: 18px;
}

.about-journey-node--active {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--accent-teal), var(--primary));
  box-shadow: 0 0 0 6px rgba(2, 114, 234, 0.12), 0 6px 20px rgba(2, 114, 234, 0.3);
}

.about-journey-year {
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 4px;
}

.about-journey-item p {
  font-size: 12.5px;
  color: var(--text-gray);
  line-height: 1.45;
  margin: 0;
  max-width: none;
}

.about-journey-slot--top {
  /* Pulls the text up, away from the now fixed-position node below it -
     since the node no longer moves with this text's height (see
     .about-journey-node--pinned), this is a real, independent gap rather
     than something that shifts the node along with it. A transform is
     used (rather than margin) because it reliably moves the rendered
     content without affecting this flex-end container's own layout. */
  transform: translateY(-20px);
}

.about-journey-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .about-journey-track {
    flex-direction: column;
  }

  .about-journey-track::before {
    display: none;
  }

  .about-journey-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
  }

  .about-journey-node,
  .about-journey-node--pinned {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    order: 1;
  }

  .about-journey-slot {
    order: 2;
    min-height: 0;
  }

  .about-journey-slot--top,
  .about-journey-slot--bottom {
    padding: 0;
    justify-content: center;
    transform: none;
  }
}

/* ===================== */
/*  USE CASE VISUALS     */
/* ===================== */
.uc-viz {
  max-width: 380px;
  margin: 0 auto;
}

/* UC1: Risk Gauge */
.uc-gauge {
  padding: var(--space-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.uc-gauge-track {
  height: 12px;
  background: var(--bg-light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.uc-gauge-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  background: linear-gradient(90deg, #22c55e 0%, #f59e0b 60%, #f43f5e 100%);
  transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: var(--space-md);
}

.uc-gauge-alert {
  color: #f43f5e;
}

.uc-gauge-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.15);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #f43f5e;
  opacity: 0;
  transition: opacity 0.5s ease 1.8s;
}

.uc-gauge-status.active {
  opacity: 1;
}

.uc-gauge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f43f5e;
  animation: livePulse 2s ease-in-out infinite;
}

/* UC2: Manager bars */
.uc-managers {
  padding: var(--space-md);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.uc-mgr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  position: relative;
}

.uc-mgr-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  width: 56px;
  flex-shrink: 0;
}

.uc-mgr-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-light);
  border-radius: 6px;
  overflow: hidden;
}

.uc-mgr-fill {
  height: 100%;
  width: 0%;
  background: var(--color);
  border-radius: 6px;
  animation: ucBarGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--d) forwards;
}

@keyframes ucBarGrow {
  to { width: var(--w); }
}

.uc-mgr-val {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-heading);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.uc-mgr-badge {
  position: absolute;
  right: 0;
  top: -4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  padding: 2px 8px;
  border-radius: 50px;
  animation: badgePulse 2s ease-in-out infinite;
}

.uc-mgr-badge--red {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* UC4: Segmentation bars */
.uc-segments {
  padding: var(--space-md);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.uc-seg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  position: relative;
}

.uc-seg-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  width: 100px;
  flex-shrink: 0;
}

.uc-seg-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-light);
  border-radius: 6px;
  overflow: hidden;
}

.uc-seg-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease;
}

.uc-seg-fill--green { background: #22c55e; }
.uc-seg-fill--orange { background: #f59e0b; }
.uc-seg-fill--red { background: #f43f5e; }

.uc-seg-val {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--primary);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

.uc-seg-badge {
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  padding: 2px 8px;
  border-radius: 50px;
  animation: badgePulse 2s ease-in-out infinite;
}

.uc-seg-badge--red {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);
}

/* UC5: Trust shield */
.uc-shield {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uc-shield-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.uc-shield-core {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(2, 114, 234, 0.3);
  animation: orbPulse 3s ease-in-out infinite;
  z-index: 2;
}

.uc-shield-core svg {
  width: 28px;
  height: 28px;
}

.uc-shield-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(2, 114, 234, 0.15);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(12, 38, 63, 0.06);
}

.uc-shield-badge--1 { top: 8%; left: 50%; transform: translateX(-50%); animation: sysFloat1 16s ease-in-out infinite; }
.uc-shield-badge--2 { top: 50%; right: 4%; transform: translateY(-50%); animation: sysFloat2 18s ease-in-out infinite; }
.uc-shield-badge--3 { bottom: 8%; left: 50%; transform: translateX(-50%); animation: sysFloat3 14s ease-in-out infinite; }
.uc-shield-badge--4 { top: 50%; left: 4%; transform: translateY(-50%); animation: sysFloat4 20s ease-in-out infinite; }

@keyframes sysFloat1 { 0%, 100% { margin: 0; } 40% { margin: -3px 0 0 5px; } 80% { margin: 2px 0 0 -3px; } }
@keyframes sysFloat2 { 0%, 100% { margin: 0; } 35% { margin: 4px 0 0 0; } 70% { margin: -3px 0 0 0; } }
@keyframes sysFloat3 { 0%, 100% { margin: 0; } 30% { margin: 0 0 0 -4px; } 65% { margin: 0 0 0 3px; } }
@keyframes sysFloat4 { 0%, 100% { margin: 0; } 45% { margin: -4px 0 0 0; } 75% { margin: 3px 0 0 0; } }

/* ===================== */
/*  DEMO FORM            */
/* ===================== */
.demo-form-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.demo-form-text h2 {
  margin-bottom: var(--space-md);
}

.demo-form-text p {
  font-size: 18px;
  margin-bottom: var(--space-xl);
}

.demo-form-trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Office locations (Talk to the team section) */
.offices {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

.offices-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: var(--space-md);
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.office h4 {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text-dark);
}

.office p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-gray);
  margin: 0;
  max-width: none;
}

/* Office locations map (Leaflet) */
.offices-map {
  margin-top: var(--space-lg);
  height: 320px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  z-index: 0;
}

.leaflet-tooltip.office-map-label {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(12, 38, 63, 0.14);
  white-space: nowrap;
}

.leaflet-tooltip.office-map-label::before {
  display: none;
}

/* Pulsing "live location" office markers */
.leaflet-div-icon.office-pulse-icon {
  background: transparent;
  border: none;
}

.office-pulse-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.8);
}

.office-pulse-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.45);
  animation: officePulse 2s ease-out infinite;
}

@keyframes officePulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.6); opacity: 0; }
}

@media (max-width: 560px) {
  .offices-grid { grid-template-columns: 1fr; }
  .offices-map { height: 260px; }
}

/* Dedicated contact page */
.contact-head {
  max-width: 720px;
  margin-bottom: var(--space-2xl);
}

.contact-head h1 {
  margin-bottom: var(--space-md);
}

.contact-head p {
  font-size: 18px;
  margin-bottom: var(--space-lg);
}

.contact-head .demo-form-trust {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px var(--space-lg);
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-email {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.contact-email:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-aside .office {
  margin-bottom: var(--space-md);
}

.contact-map {
  margin-top: var(--space-2xl);
  height: 360px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  z-index: 0;
}

.contact-map-credit {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--text-gray);
  opacity: 0.7;
  text-align: right;
}

.contact-map-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

.demo-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-gray);
  font-weight: 500;
}

.demo-trust-item svg {
  color: var(--accent-teal);
  flex-shrink: 0;
}

.demo-form {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.demo-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.demo-field {
  margin-bottom: var(--space-sm);
}

.demo-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.demo-field label .req {
  color: #DC2626;
  margin-left: 2px;
}

.demo-field label.demo-checkbox {
  display: flex;
  font-weight: 400;
  margin-bottom: 0;
}

.demo-field input,
.demo-field textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  background: var(--bg-light);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.demo-field select {
  width: 100%;
  padding: 11px 40px 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  background-color: var(--bg-light);
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230C263F' stroke-width='1.5'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.demo-field input:focus,
.demo-field textarea:focus,
.demo-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(2, 114, 234, 0.08);
}

.demo-field textarea {
  resize: vertical;
  min-height: 70px;
}

/* Interest checklist */
.demo-interests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--space-md);
  margin-top: 4px;
}

.demo-error {
  display: none;
  color: #DC2626;
  font-size: 12px;
  margin-top: 8px;
}

.demo-error.show {
  display: block;
}

.demo-interests .demo-checkbox {
  font-size: 13.5px;
  color: var(--text-dark);
}

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

/* Consent checkbox */
.demo-consent {
  margin-bottom: var(--space-md);
}

.demo-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-gray);
  line-height: 1.5;
}

.demo-checkbox input {
  display: none;
}

.demo-checkmark {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid #94a3b8;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.2s ease;
  position: relative;
  background: white;
  display: block;
}

.demo-checkbox input:checked + .demo-checkmark {
  background: var(--primary);
  border-color: var(--primary);
}

.demo-checkbox input:checked + .demo-checkmark::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.demo-checkbox a {
  color: var(--primary);
  text-decoration: underline;
}

/* Success message */
.demo-success {
  display: none;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.demo-success svg {
  width: 48px;
  height: 48px;
  color: #22c55e;
  margin-bottom: var(--space-md);
}

.demo-success h3 {
  font-size: 20px;
  margin-bottom: var(--space-xs);
}

.demo-success p {
  font-size: 15px;
  color: var(--text-gray);
  max-width: none;
  margin: 0;
}

.demo-form.submitted .demo-form-row,
.demo-form.submitted .demo-field,
.demo-form.submitted .demo-consent,
.demo-form.submitted button[type="submit"] {
  display: none;
}

.demo-form.submitted .demo-success {
  display: block;
}

@media (max-width: 768px) {
  .demo-form-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .demo-form-row {
    grid-template-columns: 1fr;
  }
}

/* ===================== */
/*  BLOG - LIST LAYOUT   */
/* ===================== */

/* Filter pills */
.blog-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 0 auto var(--space-xl);
}

.blog-filter {
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-gray);
  background: var(--bg-light);
  border: 1.5px solid var(--border-light);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.blog-filter:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.blog-filter.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Article list: horizontal rows (thumbnail left, title + excerpt right) */
.blog-list {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--border-light);
}

.blog-list-card {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
}

.blog-list-img {
  width: 210px;
  height: 150px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  background-position: center !important;
  background-size: cover !important;
}

.blog-list-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-list-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
  color: white;
}

.blog-list-tag--culture { background: #6366f1; }
.blog-list-tag--performance { background: #0891B2; }
.blog-list-tag--leadership { background: #0272EA; }
.blog-list-tag--regulation { background: #002DAA; }

.blog-list-body h3 {
  font-size: 20px;
  color: var(--text-dark);
  line-height: 1.3;
  margin: 0 0 8px;
  transition: color 0.2s ease;
}

.blog-list-card:hover .blog-list-body h3 {
  color: var(--primary);
}

.blog-list-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-gray);
  margin: 0 0 12px;
  max-width: none;
}

.blog-list-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-light);
  margin-top: auto;
}

/* Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 820px;
  margin: var(--space-2xl) auto 0;
}

.blog-page {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-page:hover:not(:disabled) {
  background: var(--bg-light);
  border-color: var(--primary);
  color: var(--primary);
}

.blog-page.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.blog-page:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 560px) {
  .blog-list-card { flex-direction: column; gap: var(--space-sm); }
  .blog-list-img { width: 100%; height: 190px; }
}

/* Compact 'Latest blogs' cards on post pages (grid-3 context) */
.grid-3:has(.blog-list-card) {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.grid-3 .blog-list-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.grid-3 .blog-list-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.grid-3 .blog-list-img {
  width: 100%;
  height: 130px;
  border-radius: 0;
  flex-shrink: 1;
}

.grid-3 .blog-list-body {
  padding: var(--space-md);
}

.grid-3 .blog-list-body h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.grid-3 .blog-list-meta {
  gap: 12px;
  font-size: 12px;
}

/* Industry chips (compact 'industries we serve' list) */
.industry-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}

.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(12, 38, 63, 0.05);
}

.industry-chip svg {
  color: var(--accent-teal);
  flex-shrink: 0;
}

/* Shared blog elements for post pages */
.blog-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: white;
  background: var(--primary);
  padding: 3px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.blog-badge--culture { background: #6366f1; }
.blog-badge--performance { background: #0891B2; }
.blog-badge--leadership { background: #0272EA; }
.blog-badge--regulation { background: #002DAA; }

.blog-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-light);
  margin-top: auto;
  padding-top: 12px;
  flex-wrap: wrap;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Blog card (used in read-next) */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.blog-card-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-body h3 {
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--text-dark);
  line-height: 1.3;
}

/* Blog post article page */
.blog-post-header {
  max-width: 720px;
  margin: 0 auto;
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-light);
  margin-top: var(--space-md);
}

.blog-post-meta .blog-author {
  font-weight: 500;
  color: var(--text-dark);
}

.blog-post-body {
  max-width: 720px;
  margin: 0 auto;
}

.blog-post-body h2 {
  font-size: 24px;
  margin: var(--space-xl) 0 var(--space-sm);
}

.blog-post-body p {
  font-size: 17px;
  max-width: none;
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.blog-post-body ul {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}

.blog-post-body li {
  font-size: 17px;
  color: var(--text-gray);
  line-height: 1.7;
  margin-bottom: 8px;
  position: relative;
  padding-left: 8px;
}

.blog-post-body li::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.blog-pullquote {
  border-left: 4px solid var(--primary);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--bg-light);
  border-radius: 0 12px 12px 0;
}

.blog-pullquote p {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-dark);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}

.blog-post-image {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  margin: var(--space-lg) 0;
}

/* Star rating */
.star-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.star-rating-stars {
  display: flex;
  gap: 2px;
}

.star-rating-star {
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #e2e8f0;
  transition: color 0.2s ease;
}

.star-rating-star.active,
.star-rating-star.hover {
  color: #f59e0b;
}

.star-rating-text {
  font-size: 13px;
  color: var(--text-light);
  margin-left: 8px;
}

/* Author bio card */
.author-bio {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-light);
  border-radius: 16px;
  margin: var(--space-xl) auto;
  max-width: 720px;
}

.author-bio-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.author-bio-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

/* Blog FAQ */
.blog-faq {
  margin-top: var(--space-md);
}

.author-bio-desc {
  font-size: 14px;
  color: var(--text-gray);
  max-width: none;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .blog-list { grid-template-columns: 1fr; }
}

/* ===================== */
/*  REPORT CARDS & GATE  */
/* ===================== */
.report-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: var(--space-lg);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.report-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.report-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: rgba(2, 114, 234, 0.06);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: var(--space-sm);
  align-self: flex-start;
}

.report-card h3 {
  font-size: 18px;
  margin-bottom: var(--space-xs);
}

.report-card p {
  font-size: 14px;
  color: var(--text-gray);
  max-width: none;
  flex: 1;
  margin-bottom: var(--space-md);
}

.report-card-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin: calc(-1 * var(--space-xs)) 0 var(--space-sm);
}

.report-card .report-card-attribution {
  flex: 0 0 auto;
  font-size: 11px;
  font-style: italic;
  color: var(--text-gray);
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
}

.report-card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-gray);
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.report-card-thumb svg {
  width: 30px;
  height: 30px;
  opacity: 0.45;
}

/* 4-up benchmark grid: reserve fixed slots so title/sub/description/button align across cards */
.grid-4 .report-card h3 {
  min-height: 70px;
  line-height: 1.3;
}

.grid-4 .report-card-sub {
  min-height: 34px;
  line-height: 1.3;
}

.report-card .research-card-icon {
  margin-bottom: var(--space-md);
}

/* Icon inline, left of the card heading */
.report-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.report-card-head .research-card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.report-card-head h3 {
  margin-bottom: 0;
}

/* Gate modal */
.gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gate-overlay.active {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  /* Centering a taller-than-viewport modal with align-items:center and
     no overflow handling means the top of it (including the close
     button) can end up above the scrollable area with no way to reach
     it - happens whenever the form is taller than the available mobile
     viewport (very common once the keyboard opens for a focused field).
     Top-aligning it inside a scrollable overlay keeps the close button
     reachable immediately and lets the rest of the form scroll normally. */
  .gate-overlay {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
  }

  .gate-modal {
    width: 100%;
    margin: 0 auto;
  }
}

.gate-modal {
  background: var(--bg-white);
  border-radius: 20px;
  padding: var(--space-xl);
  max-width: 480px;
  width: 90%;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.gate-overlay.active .gate-modal {
  transform: translateY(0);
}

.gate-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.2s ease;
}

.gate-close:hover {
  color: var(--text-dark);
}

.gate-modal h3 {
  font-size: 22px;
  margin-bottom: var(--space-xs);
}

.gate-success {
  display: none;
  text-align: center;
  padding: var(--space-lg) 0;
}

.gate-success h3 {
  margin-top: var(--space-md);
}

.gate-success p {
  color: var(--text-gray);
  max-width: none;
}

.gate-success #gateSuccessLink,
.gate-success #gateUnavailableLink {
  margin-top: var(--space-md);
  width: 100%;
  justify-content: center;
}

/* ===================== */
/*  NEWSLETTER POPUP     */
/* ===================== */
.newsletter-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.newsletter-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.newsletter-popup-modal {
  background: var(--bg-white);
  border-radius: 20px;
  padding: var(--space-xl);
  max-width: 460px;
  width: 90%;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter-popup-overlay.active .newsletter-popup-modal {
  transform: translateY(0);
}

.newsletter-popup-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.2s ease;
}

.newsletter-popup-close:hover {
  color: var(--text-dark);
}

.newsletter-popup-modal h3 {
  font-size: 22px;
  margin-bottom: var(--space-xs);
}

.newsletter-popup-modal > p {
  color: var(--text-gray);
  max-width: none;
  margin-bottom: var(--space-md);
}

.newsletter-popup-form.submitted .demo-form-row,
.newsletter-popup-form.submitted .demo-field,
.newsletter-popup-form.submitted .btn {
  display: none;
}

.newsletter-popup-success {
  display: none;
  color: var(--accent-teal);
  font-size: 15px;
  font-weight: 600;
}

.newsletter-popup-form.submitted .newsletter-popup-success {
  display: block;
}

/* ===================== */
/*  FAQ SEARCH           */
/* ===================== */
.faq-search-wrap {
  margin-top: var(--space-xl);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--border-light);
  border-radius: 50px;
  padding: 14px 24px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.faq-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(2, 114, 234, 0.08), var(--shadow-md);
}

.faq-search-icon {
  width: 20px;
  height: 20px;
  color: var(--text-light);
  flex-shrink: 0;
}

.faq-search:focus-within .faq-search-icon {
  color: var(--primary);
}

.faq-search-input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-dark);
  outline: none;
}

.faq-search-input::placeholder {
  color: var(--text-light);
}

.faq-search-count {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
  white-space: nowrap;
}

.faq-no-results {
  text-align: center;
  padding: var(--space-xl) 0;
}

.faq-no-results p {
  font-size: 17px;
  color: var(--text-gray);
  max-width: none;
  margin: 0 auto;
}

/* ===================== */
/*  FAQ                  */
/* ===================== */
.faq-category {
  margin-bottom: var(--space-3xl);
}

.faq-category-title {
  font-size: clamp(20px, 2.5vw, 24px);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  padding-left: var(--space-sm);
  border-bottom: none;
  border-left: 3px solid var(--primary);
  color: var(--primary);
}

.faq-item {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition);
}

.faq-item:hover {
  border-color: rgba(2, 114, 234, 0.2);
  box-shadow: var(--shadow-sm);
}

.faq-item--open {
  border-color: rgba(2, 114, 234, 0.2);
  box-shadow: var(--shadow-md);
  background: white;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  line-height: 1.4;
  transition: color 0.3s ease;
}

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

.faq-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-light);
  transition: transform 0.3s ease, color 0.3s ease;
}

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

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s ease;
  padding: 0 20px;
}

.faq-item--open .faq-answer {
  max-height: 600px;
  padding: 0 20px 20px;
}

.faq-answer p {
  font-size: 15px;
  color: var(--text-gray);
  max-width: 720px;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* ===================== */
/*  PLATFORM VISUALS     */
/* ===================== */
.plat-viz {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

/* --- Measure: Data collection --- */
.plat-measure {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.measure-dots {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.measure-center {
  position: relative;
  z-index: 2;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(2,114,234,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(2,114,234,0.1);
}

.measure-counter {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.measure-label {
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 2px;
}

.measure-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(2,114,234,0.1);
}

.measure-ring--1 {
  width: 180px; height: 180px;
  animation: ringExpand 3s ease-in-out infinite;
}

.measure-ring--2 {
  width: 270px; height: 270px;
  animation: ringExpand 3s ease-in-out infinite 1s;
  border-color: rgba(2,114,234,0.06);
}

/* --- Interpret: Insight feed --- */
.plat-interpret {
  max-width: 400px;
}

.insight-feed {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.insight-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.insight-feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

.insight-feed-card {
  padding: 24px 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.insight-feed-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: rgba(2,114,234,0.08);
  padding: 3px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
  align-self: flex-start;
  transition: opacity 0.3s ease;
}

.insight-feed-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  font-weight: 500;
  max-width: none;
  margin: 0;
  transition: opacity 0.3s ease;
}

.insight-feed-metrics {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px;
  flex-wrap: wrap;
  /* Reserve height for the 2-row case (longer metric text wraps) so the
     card doesn't grow/shrink and re-centre in its grid row every time
     the cycling insight below swaps to a shorter/longer set of pills. */
  min-height: 79px;
  align-content: flex-start;
}

.insight-metric {
  padding: 4px 12px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-gray);
  transition: opacity 0.3s ease;
}

.insight-feed-bar {
  height: 3px;
  background: rgba(2,114,234,0.08);
}

.insight-feed-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
  transition: width 0.3s linear;
}

/* --- Act: Recommendation cards --- */
.plat-act {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
}

.act-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226,232,240,0.6);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(12,38,63,0.06);
  opacity: 0;
  transform: translateY(16px);
}

.act-card--1 { animation: actCardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; }
.act-card--2 { animation: actCardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.6s forwards; }
.act-card--3 { animation: actCardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.9s forwards; }

@keyframes actCardIn {
  to { opacity: 1; transform: translateY(0); }
}

.act-card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.act-card-icon svg { width: 18px; height: 18px; }

.act-card-icon--blue {
  background: rgba(2,114,234,0.1);
  color: var(--primary);
}

.act-card-icon--teal {
  background: rgba(8,145,178,0.1);
  color: var(--accent-teal);
}

.act-card-icon--green {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
}

.act-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.act-card-text strong {
  font-size: 14px;
  color: var(--text-dark);
}

.act-card-text span {
  font-size: 12px;
  color: var(--text-light);
}

/* Manager nudge notifications */
.act-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nudge-msg {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(12,38,63,0.04);
  opacity: 0;
  transform: translateY(10px);
  animation: msgIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes msgIn {
  to { opacity: 1; transform: translateY(0); }
}

.nudge-msg-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.nudge-msg-icon svg {
  width: 16px;
  height: 16px;
  color: white;
}

.nudge-msg-body {
  flex: 1;
  min-width: 0;
}

.nudge-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.nudge-msg-sector-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  flex-shrink: 0;
  margin-left: auto;
}

.nudge-msg-sector-icon svg {
  width: 13px;
  height: 13px;
}

.nudge-msg-tag {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent-teal));
  padding: 4px 12px;
  border-radius: 50px;
}

.nudge-msg-hook {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 4px;
}

.nudge-msg-text {
  font-size: 13px;
  color: var(--text-gray);
  line-height: 1.5;
}

.nudge-msg-outcome {
  font-size: 12px;
  font-style: italic;
  color: var(--text-gray);
  line-height: 1.45;
  margin-top: 6px;
}

.nudge-msg-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(2, 114, 234, 0.08);
  padding: 4px 10px;
  border-radius: 50px;
}

.plat-act--wide {
  max-width: 460px;
}

.nudge-card-single {
  position: relative;
  min-height: 240px;
}

.nudge-card-single .nudge-msg {
  position: absolute;
  inset: 0;
  animation: none;
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.nudge-card-single .nudge-msg.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

.nudge-card-single .nudge-msg.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

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

.nudge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border-light);
  cursor: pointer;
  transition: var(--transition);
}

.nudge-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent-teal));
}

/* ===================== */
/*  RESPONSIVE           */
/* ===================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .outcomes-grid { grid-template-columns: repeat(3, 1fr); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .flywheel { max-width: 520px; }
  .flywheel-card { width: 170px; padding: 16px; }
  .flywheel-card h3 { font-size: 15px; }
  .flywheel-card p { font-size: 12px; }
}

@media (max-width: 768px) {
  .hero {
    padding: 100px 0 var(--space-lg);
    height: auto;
    max-height: none;
  }

  .hero-grid,
  .feature-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .feature-grid.reverse {
    direction: ltr;
  }

  /* On desktop the direction:rtl trick above puts the visual before the
     heading in DOM order while showing it after visually. Once direction
     resets to ltr on mobile, that same DOM order would show the visual
     animation before "See culture intelligence in action" - reorder here
     so the heading reads first regardless of DOM order. */
  .feature-grid.reverse .feature-content {
    order: -1;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .nav {
    display: none;
  }

  .nav.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    /* .header is position:fixed, so this menu is viewport-anchored, not
       page-scrollable - once the Resources submenu expands, content can
       run past the bottom of the screen with no way to reach it unless
       the menu itself scrolls. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu-toggle {
    display: block;
  }

  /* Resources mega-menu: desktop's absolutely-positioned 680px, 2-column
     hover flyout has no touch equivalent and doesn't fit inside the
     mobile menu. Here it becomes an inline, tap-to-expand disclosure
     (toggled via .dropdown-open, set by script.js) - single column,
     positioned in normal flow instead of floating over other content. */
  .nav-dropdown-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-dropdown-label svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .nav-dropdown-trigger.dropdown-open .nav-dropdown-label svg {
    transform: rotate(180deg);
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    width: auto;
    max-width: none;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 4px 0 4px 12px;
    margin-top: 8px;
  }

  .nav-dropdown-trigger.dropdown-open .nav-dropdown {
    display: flex;
  }

  .nav-dropdown--mega {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .nav-dropdown--mega .nav-mega-item {
    padding: 8px 6px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-left {
    max-width: none;
  }

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

  .footer-newsletter {
    max-width: 360px;
  }

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

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

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

  .transform-arrow {
    transform: rotate(90deg);
    padding: var(--space-sm) 0;
  }

  .flywheel {
    max-width: 360px;
  }

  .flywheel-card {
    width: 140px;
    padding: 12px;
  }

  .flywheel-card p {
    display: none;
  }

  .flywheel-center {
    width: 100px;
    height: 100px;
  }

  .flywheel-center span {
    font-size: 10px;
  }

  .flywheel-pulse-ring {
    width: 100px;
    height: 100px;
  }

  @keyframes heartbeatRing {
    0% { width: 100px; height: 100px; opacity: 0.5; }
    100% { width: 170px; height: 170px; opacity: 0; }
  }

  .survey-mockup {
    max-width: 100%;
  }

  .survey-body {
    padding: 24px 16px 32px;
  }

  .survey-question {
    font-size: 17px;
  }

  .survey-choice {
    padding: 12px 14px;
    font-size: 14px;
  }

  .hero::before,
  .hero::after {
    width: 300px;
    height: 300px;
  }

  .hero-visual {
    padding: 0 26px;
  }

  .intel-viz {
    max-width: 320px;
    margin: var(--space-xl) auto 0;
  }

  .intel-card {
    width: 118px;
    height: 72px;
    padding: 8px 10px;
  }

  .intel-card-value {
    font-size: 17px;
  }

  .intel-card-label {
    font-size: 10px;
  }

  .intel-card-bar {
    width: 56px;
  }

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

  /* Industry tabs (use-cases.html): on desktop, hovering a card previews
     its content in the shared panel below - fast and obvious because the
     panel sits right next to the row of cards. Stacked single-column on
     mobile, that panel would sit far below whichever card got tapped,
     with no visual link between the two and no hover to signal the cards
     are interactive at all. Restyled as a single-open accordion instead:
     each card becomes a tappable row (icon, title, chevron) that expands
     its own answer directly beneath itself - matches the FAQ accordion
     pattern already used elsewhere, so the "tap to expand" affordance is
     already familiar. Content is generated by the same script that
     drives the desktop panel; see the <script> at the end of the body. */
  .outcome-card--tab {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
    padding: 14px 16px;
  }

  .outcome-card--tab:active {
    background: var(--bg-light);
  }

  .outcome-card--tab .outcome-icon {
    width: 44px;
    height: 44px;
    margin: 0;
    flex-shrink: 0;
  }

  .outcome-card--tab .outcome-icon svg {
    width: 22px;
    height: 22px;
  }

  .outcome-card--tab h3 {
    flex: 1;
    margin-bottom: 0;
    font-size: 15px;
  }

  .tab-chevron {
    display: block;
    flex-shrink: 0;
    color: var(--text-light);
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .outcome-card--tab.is-active .tab-chevron {
    transform: rotate(180deg);
    color: var(--primary);
  }

  .industry-accordion {
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--bg-light);
    border-radius: 0 0 12px 12px;
    margin-top: -10px;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .industry-accordion.is-open {
    max-height: 600px;
  }

  .industry-accordion-inner {
    padding: 14px 16px 18px;
  }

  .industry-accordion-inner .industry-panel-eyebrow {
    margin-top: 0;
  }

  .industry-panel {
    display: none;
  }

  /* At mobile widths the cycling Insight text/metrics (used on both
     platform.html and use-cases.html) wrap to more lines than at desktop
     width, so the desktop-sized reservation isn't tall enough here and
     the card still grows/shrinks between variants. Measured worst case
     across both pages down to 320px wide is 212px / 118px - a few px
     of buffer added on top. */
  .insight-feed-card {
    min-height: 220px;
  }

  .insight-feed-metrics {
    min-height: 122px;
  }
}

@media (max-width: 400px) {
  .hero-visual {
    padding: 0 16px;
  }

  .intel-viz {
    max-width: 240px;
  }

  .intel-card {
    width: 100px;
    height: 64px;
    padding: 6px 8px;
  }

  .intel-card-value {
    font-size: 15px;
  }

  .intel-card-label {
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .intel-card-bar {
    width: 46px;
  }
}

/* ===================== */
/*  COOKIE CONSENT       */
/* ===================== */
.cookie-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  width: calc(100% - 40px);
  max-width: 1080px;
  z-index: 4000;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.cookie-banner-close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-left: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 6px;
  transition: var(--transition);
}

.cookie-banner-close:hover {
  color: var(--text-dark);
  background: var(--bg-light);
}

.cookie-banner-text {
  flex: 1;
  min-width: 240px;
  margin: 0;
  padding-right: var(--space-lg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-gray);
}

.cookie-banner-text a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.cookie-banner .btn,
.cookie-modal .btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* Settings modal */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4100;
  background: rgba(12, 38, 63, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-modal-overlay.active {
  display: flex;
}

.cookie-modal {
  background: var(--bg-white);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-xl);
  position: relative;
  box-shadow: var(--shadow-lg);
}

.cookie-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
}

.cookie-modal h3 {
  margin-bottom: var(--space-sm);
}

.cookie-modal > p {
  font-size: 14px;
  color: var(--text-gray);
  margin-bottom: var(--space-md);
}

.cookie-modal > p a {
  color: var(--primary);
  font-weight: 600;
}

.cookie-cat {
  border-top: 1px solid var(--border-light);
  padding: var(--space-md) 0;
}

.cookie-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 4px;
}

.cookie-cat-head strong {
  color: var(--text-dark);
  font-family: var(--font-heading);
}

.cookie-cat p {
  font-size: 13px;
  color: var(--text-gray);
  margin: 0;
}

.cookie-locked {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.cookie-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--space-lg);
}

/* Toggle switch */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: 0.2s;
  cursor: pointer;
}

.cookie-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

.cookie-switch input:checked + .cookie-slider {
  background: var(--primary);
}

.cookie-switch input:checked + .cookie-slider::before {
  transform: translateX(20px);
}

@media (max-width: 560px) {
  .cookie-banner { padding: 40px 16px 16px; position: fixed; }
  .cookie-banner-text { padding-right: 0; }
  .cookie-banner-actions { width: 100%; margin-left: 0; }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
  .cookie-banner-close {
    position: absolute;
    top: 8px;
    right: 10px;
    margin-left: 0;
  }
}

/* ===================== */
/*  LEGAL / POLICY TEXT  */
/* ===================== */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  margin: var(--space-xl) 0 var(--space-sm);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--text-gray);
  margin-bottom: var(--space-md);
  max-width: none;
}

.legal-content ul {
  list-style: disc;
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.legal-content li {
  color: var(--text-gray);
  margin-bottom: 8px;
  line-height: 1.7;
}

.legal-content a {
  color: var(--primary);
  font-weight: 600;
}

/* ===================== */
/*  CASE STUDY DOCUMENT  */
/* ===================== */
/* Shared template for individual case study pages (aib-life.html,
   linesight.html, fbd.html, ...) - a compact, magazine-style layout
   ported from source PDFs/decks, fluid instead of fixed A4 width so it
   reads as one dense page while staying responsive. Reuse the .cs-doc-*
   classes for every new case study; omit a section entirely (rather
   than inventing content) when a case study has no source material for
   it - e.g. no named quote, no numbered solution icons. */
.cs-doc {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cs-doc-hero {
  background: linear-gradient(120deg, rgba(12, 38, 63, 0.97) 0%, rgba(12, 38, 63, 0.9) 45%, rgba(12, 38, 63, 0.6) 100%);
  padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 48px) clamp(20px, 3vw, 32px);
  color: #fff;
}

.cs-doc-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(16px, 3vw, 26px);
}

.cs-doc-brandrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-doc-brandrow img { height: 30px; display: block; }
.cs-doc-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }

.cs-doc-tag {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: #cfd8ee;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

.cs-doc-hero h1 {
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.22;
  margin: 0 0 10px 0;
  font-weight: 700;
  max-width: 640px;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

.cs-doc-hero p {
  font-size: 13.5px;
  color: #cfd8ee;
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.cs-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(2, 114, 234, 0.1);
  color: var(--primary);
}

.cs-doc-icon svg { width: 15px; height: 15px; display: block; }

.cs-doc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: clamp(16px, 3vw, 24px) clamp(24px, 5vw, 48px) 4px;
}

/* For a 3-stat page (FBD, Linesight) - a real class rather than an
   inline style, for the same reason as .cs-doc-value-grid--2col above:
   an inline grid-template-columns blocks the mobile breakpoints below
   from ever applying. */
.cs-doc-stats--3col {
  grid-template-columns: repeat(3, 1fr);
}

.cs-doc-stat {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-light);
}

.cs-doc-stat-top { display: flex; align-items: center; gap: 10px; }
.cs-doc-stat-num { font-size: 19px; font-weight: 700; color: var(--text-dark); font-family: var(--font-heading); }
.cs-doc-stat-num small { font-size: 11px; font-weight: 600; color: var(--text-light); margin-left: 2px; }
.cs-doc-stat-label { font-size: 11px; color: var(--text-gray); line-height: 1.3; }

.cs-doc-section { padding: 18px clamp(24px, 5vw, 48px); }

.cs-doc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--text-dark);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cs-doc-rule { width: 30px; height: 3px; background: var(--accent-teal); border-radius: 2px; margin-bottom: 14px; }

.cs-doc-challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cs-doc-challenge-item { display: flex; gap: 10px; margin-bottom: 14px; }
.cs-doc-challenge-item h4 { margin: 0 0 3px 0; font-size: 13px; font-weight: 700; color: var(--text-dark); }
.cs-doc-challenge-item p { margin: 0; font-size: 12px; color: var(--text-gray); line-height: 1.45; max-width: none; }

.cs-doc-quote {
  background: linear-gradient(135deg, rgba(2, 114, 234, 0.06) 0%, var(--bg-light) 100%);
  border-radius: 12px;
  padding: 20px 22px 18px;
}

.cs-doc-quote .quote-mark { font-size: 34px; margin-bottom: 4px; }
.cs-doc-quote blockquote { margin: 0 0 14px 0; font-size: 16px; font-style: italic; font-weight: 700; color: var(--text-dark); line-height: 1.35; font-family: var(--font-heading); }
.cs-doc-quote-rule { width: 30px; height: 3px; background: var(--primary); border-radius: 2px; margin-bottom: 8px; }
.cs-doc-quote-name { font-weight: 700; color: var(--primary); font-size: 12.5px; }
.cs-doc-quote-role { font-size: 11.5px; color: var(--text-gray); }

.cs-doc-solution {
  margin: 4px clamp(24px, 5vw, 48px) 20px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.06) 0%, rgba(2, 114, 234, 0.06) 100%);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cs-doc-solution-left { flex: 1 1 220px; display: flex; gap: 12px; }
.cs-doc-solution-left p { margin: 0; font-size: 12px; color: var(--text-dark); line-height: 1.5; max-width: none; }
.cs-doc-solution-left strong { color: var(--text-dark); }
.cs-doc-solution-right { flex: 2 1 320px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cs-doc-sol-item { background: #fff; border-radius: 9px; padding: 10px 5px; text-align: center; box-shadow: var(--shadow-sm); }
.cs-doc-sol-icon { width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 7px; background: rgba(2, 114, 234, 0.1) !important; color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cs-doc-sol-icon svg { width: 13px; height: 13px; }
.cs-doc-sol-label { font-size: 10px; color: var(--text-dark); font-weight: 600; line-height: 1.3; }

.cs-doc-banner {
  background: var(--bg-dark);
  color: #fff;
  padding: 14px clamp(24px, 5vw, 48px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.cs-doc-banner .arrow { color: var(--accent-teal); font-size: 17px; }

.cs-doc-p2header { padding: 28px clamp(24px, 5vw, 48px) 8px; }
.cs-doc-p2header h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: var(--text-dark); margin: 0 0 8px 0; }
.cs-doc-p2header .cs-doc-rule { width: 36px; height: 4px; margin-bottom: 12px; }
.cs-doc-p2header p { font-size: 12.5px; color: var(--text-gray); line-height: 1.6; max-width: 640px; margin: 0; }

.cs-doc-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px clamp(24px, 5vw, 48px) 4px; }
/* For a 4-card grid (FBD, Linesight) - a real class, not an inline style,
   so the mobile breakpoints below (which target .cs-doc-value-grid) can
   still override it. An inline style always wins over a media query
   regardless of specificity, which is exactly what broke this on mobile
   before - the grid stayed 2-up and bled off the screen at every width. */
.cs-doc-value-grid--2col { grid-template-columns: repeat(2, 1fr); }
.cs-doc-value-card { border: 1px solid var(--border-light); border-radius: 10px; padding: 14px 13px; background: var(--bg-light); }
.cs-doc-value-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cs-doc-value-card h4 { font-size: 12.5px; font-weight: 700; color: var(--text-dark); margin: 0; line-height: 1.3; }
.cs-doc-value-underline { width: 22px; height: 2.5px; background: var(--accent-teal); border-radius: 2px; margin-bottom: 6px; }
.cs-doc-value-card p { font-size: 11px; color: var(--text-gray); line-height: 1.5; margin: 0; max-width: none; }

.cs-doc-flow { padding: 20px clamp(24px, 5vw, 48px) 6px; }
.cs-doc-flow-title { font-size: 11px; font-weight: 700; letter-spacing: 0.7px; color: var(--text-dark); text-transform: uppercase; margin-bottom: 14px; }
.cs-doc-flow-row { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.cs-doc-flow-step { flex: 1 1 90px; min-width: 90px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; margin-bottom: 10px; }
.cs-doc-flow-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 8px; }
.cs-doc-flow-circle svg { width: 15px; height: 15px; }
.cs-doc-flow-step h5 { font-size: 10.5px; font-weight: 700; color: var(--text-dark); margin: 0 0 4px 0; line-height: 1.3; }
.cs-doc-flow-step p { font-size: 9.5px; color: var(--text-gray); line-height: 1.4; margin: 0; max-width: none; }
.cs-doc-flow-arrow { color: var(--text-light); font-size: 15px; padding-top: 8px; flex: 0 0 14px; }

.cs-doc-about {
  margin: 20px clamp(24px, 5vw, 48px) 28px;
  background: var(--bg-dark);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  flex-wrap: wrap;
}

.cs-doc-about-left { flex: 1.6 1 260px; }
.cs-doc-about-left h4 { color: var(--accent-teal); font-size: 14px; font-weight: 700; margin: 0 0 8px 0; }
.cs-doc-about-left p { font-size: 11.5px; color: rgba(255, 255, 255, 0.75); line-height: 1.6; margin: 0; max-width: none; }
.cs-doc-about-mid { flex: 0 0 1px; height: 48px; background: rgba(255, 255, 255, 0.2); }
.cs-doc-about-right { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; }
.cs-doc-about-right .row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.cs-doc-about-right .ic { color: var(--accent-teal); display: inline-flex; align-items: center; }
.cs-doc-about-right a { color: var(--accent-teal); font-weight: 700; text-decoration: none; }

@media (max-width: 700px) {
  .cs-doc-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-doc-challenge-grid { grid-template-columns: 1fr; }
  .cs-doc-solution-right { grid-template-columns: repeat(2, 1fr); }
  .cs-doc-value-grid { grid-template-columns: 1fr 1fr; }
  .cs-doc-flow-row { flex-direction: column; align-items: stretch; }
  .cs-doc-flow-step { flex-direction: row; text-align: left; align-items: center; gap: 10px; }
  .cs-doc-flow-circle { margin-bottom: 0; flex: 0 0 auto; }
  .cs-doc-flow-arrow { display: none; }
}

@media (max-width: 480px) {
  .cs-doc-stats { grid-template-columns: 1fr 1fr; }
  .cs-doc-value-grid { grid-template-columns: 1fr; }
}