/* =========================================================
   Sorraia Global Stylesheet
   ========================================================= */

/* ---------------------------------------------------------
   Variables
   --------------------------------------------------------- */
:root {
  --navy:          #0A0F1E;
  --navy-mid:      #111827;
  --white:         #FFFFFF;
  --off-white:     #F7F9FC;
  --surface:       #F1F5F9;
  --text:          #111827;
  --text-mid:      #374151;
  --text-muted:    #6B7280;
  --text-faint:    #9CA3AF;
  --accent:        #1D4ED8;
  --accent-light:  #EFF6FF;
  --border:        #E5E7EB;
  --border-mid:    #D1D5DB;
  --nav-h:         64px;
  --max:           1160px;
  --max-wide:      1240px;
  --max-narrow:    960px;
  --radius:        6px;
  --r-sm:          8px;
  --r-md:          12px;
  --r-lg:          16px;
  --shadow-soft:   0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-1:      0 1px 3px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);
  --shadow-2:      0 8px 28px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.04);
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 120px;
  --max-prose: 600px;
  --success:       #059669;
  --error:         #DC2626;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

/* ---------------------------------------------------------
   Container
   --------------------------------------------------------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 36px;
}

.container--wide {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 36px;
}

.container--narrow {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 36px;
}

/* ---------------------------------------------------------
   Utility Classes
   --------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-5); }
.stack--sm > * + * { margin-top: var(--space-3); }
.stack--lg > * + * { margin-top: var(--space-6); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

.card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}

.card:hover,
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(29,78,216,0.18);
}

.card--soft {
  background: var(--off-white);
  border-color: transparent;
  box-shadow: none;
}

.chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.chip--accent {
  background: var(--accent-light);
  border: 1px solid #dbeafe;
  color: var(--accent);
}

.chip--muted {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

.text-muted { color: var(--text-muted); }

/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 200;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s;
}

#navbar.nav--dark {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#navbar.nav--light {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.nav-logo {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.25s ease;
}

#navbar.nav--dark .nav-logo { color: rgba(255,255,255,0.9); }
#navbar.nav--light .nav-logo { color: var(--text); }

.nav-logo__img,
.nav-logo svg {
  height: 22px;
  width: auto;
  display: block;
}

.nav-logo svg path { fill: currentColor; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-links a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease;
}

#navbar.nav--dark .nav-links a { color: rgba(255,255,255,0.7); }
#navbar.nav--light .nav-links a { color: var(--text); }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-links a:hover { opacity: 0.9; color: var(--text); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  transition: background 0.25s ease;
}

#navbar.nav--dark .nav-toggle span { background: rgba(255,255,255,0.9); }
#navbar.nav--light .nav-toggle span { background: var(--text); }

/* ---------------------------------------------------------
   Hero (Home)
   --------------------------------------------------------- */
#hero {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.hero-content {
  padding: calc(var(--nav-h) + 56px) 36px 52px;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

#hero h1 {
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  color: white;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  max-width: 540px;
}

.hero-sub {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.50);
  max-width: 520px;
  line-height: 1.6;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn--white {
  background: white;
  color: var(--text);
}

.btn--white:hover {
  background: #F1F5F9;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.btn--dark {
  background: var(--text);
  color: white;
}

.btn--dark:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(29, 78, 216, 0.22);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-mid);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.hero-cta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------------------------------------------------------
   Page Header (inner pages)
   --------------------------------------------------------- */
.page-header {
  background: var(--navy);
  padding: calc(var(--nav-h) + 80px) 0 80px;
  text-align: center;
}

.page-header__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

.page-header__heading {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  color: white;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.page-header__sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.45);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Section Defaults
   --------------------------------------------------------- */
.section        { padding: var(--space-8) 0; }
.section--alt   { background: var(--off-white); }
/* Body paragraph (used in narrative prose sections) */
.prose-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-muted);
}
.prose-body + .prose-body { margin-top: var(--space-4); }

/* Card heading used in about/beliefs card grids */
.card__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}

/* Centered section heading modifier */
.section__heading--center {
  text-align: center;
}

/* Centered sub modifier */
.section__sub--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* CTA dark (About page style) */
.section--cta-navy {
  background: var(--navy);
  color: #fff;
  padding: var(--space-8) 0;
  text-align: center;
}
.section--cta-navy .section__heading {
  font-size: 28px;
  margin-bottom: var(--space-3);
}
.section--cta-navy .section__sub {
  color: rgba(255,255,255,.6);
  margin-bottom: var(--space-5);
}
.section--cta-navy .btn--invert {
  background: #fff;
  color: var(--navy);
}

/* Contact page: Book-a-time button */
.btn--ghost-light {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  width: 100%;
  text-align: center;
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,0.18);
}

/* CTA button group */
.cta-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.section--dark  { background: var(--navy); }
.section--tone  { background: #FBFCFE; }
.section--center { text-align: center; }
.section--center .section__sub { margin-left: auto; margin-right: auto; }

.section__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section__heading {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.section__heading--light { color: white; }

.section__sub {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 600px;
}

.section__sub--light { color: rgba(255, 255, 255, 0.5); }

/* Subtle rhythm so section transitions feel intentional */
#platform,
#insights,
#team,
#contact {
  border-top: 1px solid var(--border);
}

#about,
#platform,
#insights,
#principles {
  scroll-margin-top: calc(var(--nav-h) + 36px);
}

/* ---------------------------------------------------------
   Platform The Sorraia Ontology Overview
   --------------------------------------------------------- */
/* Ontology Entity Cards */
.ontology-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ontology-card {
  width: calc(33.333% - 12px);
  box-sizing: border-box;
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.ontology-card--highlight {
  border-color: rgba(29, 78, 216, 0.35);
  background: linear-gradient(135deg, rgba(29,78,216,0.04) 0%, var(--white) 100%);
}

.ontology-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ontology-card__icon {
  font-size: 22px;
  color: var(--text-mid);
}

.ontology-card__icon--primary {
  color: #3B82F6;
}

.ontology-card__name {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.ontology-card__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 14px;
}

.ontology-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ontology-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--off-white);
  color: var(--text-mid);
  border: 1px solid var(--border);
  letter-spacing: 0.01em;
}

.ontology-card--highlight .ontology-tag {
  background: rgba(29,78,216,0.06);
  border-color: rgba(29,78,216,0.18);
  color: #1D4ED8;
}

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

/* ---------------------------------------------------------
   Platform Metrics
   --------------------------------------------------------- */
.platform-metrics {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.platform-metric {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.platform-metric::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.platform-metric:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: var(--shadow-2);
}

.platform-metric:hover::after {
  opacity: 1;
}

.platform-metric .kicker {
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.platform-metric__value {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: var(--space-2);
  line-height: 1.1;
}

.platform-metric__label {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.platform-metric.is-visible {
  animation: platformMetricIn 0.5s ease-out forwards;
}

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

/* ---------------------------------------------------------
   Platform Flow Stepper
   --------------------------------------------------------- */
.flow-stepper {
  margin-top: var(--space-6);
  display: flex;
  align-items: stretch;
}

.flow-stepper__step {
  flex: 1;
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.flow-stepper__step .kicker {
  color: var(--accent);
}

.flow-stepper__step p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: var(--space-2);
}

.flow-stepper__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}

.flow-stepper__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  color: var(--border-mid);
  font-size: 20px;
}

/* ---------------------------------------------------------
   Platform Use Cases
   --------------------------------------------------------- */
.usecase-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.usecase-card {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}

.usecase-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: var(--shadow-2);
}

.usecase-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #1D4ED8, #3B82F6);
  opacity: 0.9;
  margin-bottom: var(--space-3);
}

.usecase-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.usecase-card__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  flex: 1;
}

.usecase-card__outcome {
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  font-style: italic;
}

/* ---------------------------------------------------------
   Platform Split Layout (Enterprise + Intelligence)
   --------------------------------------------------------- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

/* ---------------------------------------------------------
   Platform Enterprise Ontology
   --------------------------------------------------------- */
.enterprise-graph {
  margin: var(--space-5) 0 var(--space-3);
  display: grid;
  gap: 10px;
}

.enterprise-graph__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.enterprise-graph__node {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: #f9fafb;
  font-size: 13px;
  font-weight: 500;
}

.enterprise-graph__node--primary {
  border-color: #0ea5e9;
  background: #e0f2fe;
  font-weight: 600;
}

.enterprise-graph__edge {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}

/* ---------------------------------------------------------
   Platform Intelligence Stack
   --------------------------------------------------------- */
.intelligence-stack {
  margin-top: var(--space-4);
  display: grid;
  gap: 10px;
}

.intelligence-stack__layer {
  padding: 22px 28px;
  border-radius: var(--r-md);
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: linear-gradient(135deg, #020617, #020617);
}

.intelligence-stack__layer--top,
.intelligence-stack__layer--middle,
.intelligence-stack__layer--bottom {
  background: linear-gradient(135deg, #020617, #0f172a);
}

.intelligence-stack__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.9);
  margin-bottom: 6px;
}

.intelligence-stack__body {
  font-size: 14px;
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Beliefs Page
   --------------------------------------------------------- */
.beliefs-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}

.beliefs-main > * + * {
  margin-top: var(--space-4);
}

.beliefs-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-5));
}

.beliefs-sidebar > * + * {
  margin-top: var(--space-4);
}

.beliefs-card {
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.beliefs-card__num {
  font-size: 44px;
  font-weight: 600;
  color: #DBEAFE;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.beliefs-card__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.beliefs-card__lead {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  max-width: 58ch;
}

.beliefs-card__list {
  list-style: disc;
  padding-left: 20px;
}

.beliefs-card__list li {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-2);
}

.beliefs-card__list li:last-child {
  margin-bottom: 0;
}

/* Sidebar blocks */
.sidebar-block {
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.sidebar-block .kicker {
  margin-bottom: var(--space-3);
}

.sidebar-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.sidebar-metric {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--r-sm);
  background: var(--off-white);
}

.sidebar-metric__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  display: block;
  line-height: 1.2;
}

.sidebar-metric__label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  display: block;
}

.sidebar-block__list {
  list-style: none;
  padding: 0;
}

.sidebar-block__list li {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-block__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-block__list li::before {
  content: "\2713\0020";
  color: var(--accent);
  font-weight: 600;
}

.sidebar-block__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Operationalize section */
.operationalize-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.operationalize-card {
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.operationalize-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(37, 99, 235, 0.2);
}

.operationalize-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.operationalize-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Mission Callout
   --------------------------------------------------------- */
.mission {
  padding: var(--space-6) 0;
  text-align: center;
}

.mission__text {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 780px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}

.mission__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  text-align: left;
}

.mission__heading {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
}

.mission__body {
  display: grid;
  gap: 18px;
}

.mission__body p {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

.mission__body--em {
  color: var(--text) !important;
  font-weight: 500;
}

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

/* ---------------------------------------------------------
   Decision Transformation visual showcase
   --------------------------------------------------------- */
.decision-transform {
  padding: var(--space-8) 0;
}

.decision-transform__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.decision-transform__header {
  text-align: center;
  margin-bottom: 48px;
}

.decision-transform__header .section__heading {
  margin-bottom: 10px;
}

.decision-transform__sub {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 auto 20px;
}

.dt-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 18px;
}

/* --- Showcase card --- */
.dt-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.03);
  position: relative;
}

.dt-showcase__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.dt-showcase__label--accent {
  color: var(--accent);
}

/* --- Before panel --- */
.dt-showcase__before {
  padding: 36px 32px;
  background: var(--off-white);
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dt-surface {
  margin-bottom: 20px;
}

.dt-surface__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.dt-surface__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.dt-surface__txn {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.dt-surface__meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.dt-surface__amt {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dt-surface__cat {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 4px;
  padding: 2px 8px;
}

.dt-hidden-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.dt-scatter {
  position: relative;
  height: 400px;
}

.dt-scatter__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dt-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  white-space: nowrap;
}

.dt-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(29,78,216,0.06);
  color: var(--accent);
  flex-shrink: 0;
}

.dt-chip__icon svg {
  width: 14px;
  height: 14px;
}

.dt-chip__eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.3;
}

.dt-chip__val {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  line-height: 1.25;
}

/* --- After panel --- */
.dt-showcase__after {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}

.dt-metric-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.dt-metric-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.dt-metric-value {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}

.dt-metric-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
}

.dt-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  margin-top: 6px;
}

.dt-badge--resolved {
  color: var(--accent);
  background: var(--accent-light, rgba(29,78,216,0.06));
  border-color: rgba(29,78,216,0.2);
}

/* --- Source rows --- */
.dt-sources {
  margin-bottom: 20px;
}


.dt-sources__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dt-sources__header .dt-sources__heading {
  margin-bottom: 0;
}

.dt-collapse-all {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

.dt-collapse-all.is-active {
  opacity: 1;
  pointer-events: auto;
  color: var(--text-muted);
  border-color: var(--border);
}

.dt-collapse-all.is-active:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.dt-sources__heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.dt-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.dt-source-row:last-child {
  border-bottom: none;
}

.dt-source-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(29,78,216,0.06);
  color: var(--accent);
  flex-shrink: 0;
}

.dt-source-icon svg {
  width: 14px;
  height: 14px;
}

.dt-source-info {
  flex: 1;
  min-width: 0;
}

.dt-source-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dt-source-detail {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.dt-source-check {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

/* --- Interactive source rows --- */
.dt-source-row--interactive {
  flex-wrap: wrap;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 8px;
  padding: 10px 8px;
  margin: 0 -8px;
}

.dt-source-row--interactive:hover {
  background: rgba(29,78,216,0.03);
}

.dt-source-row--interactive .dt-source-check {
  transition: transform 0.2s ease;
}

.dt-source-row--interactive.is-expanded .dt-source-check {
  transform: rotate(90deg);
}

.dt-source-expand {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
  opacity: 0;
  margin-top: 0;
  padding-left: 38px;
}

.dt-source-row--interactive.is-expanded .dt-source-expand {
  max-height: 300px;
  opacity: 1;
  margin-top: 8px;
}

.dt-source-expand__text {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--off-white);
  border-radius: 6px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
}

/* --- Action row --- */
.dt-action {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--off-white);
  border-radius: 10px;
  margin-top: auto;
}

.dt-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

.dt-action__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.dt-action__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.dt-action--negative {
  background: rgba(15,23,42,0.04);
  border: 1px dashed var(--border);
}

.dt-action__icon--neg {
  background: var(--text-faint);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .dt-showcase {
    grid-template-columns: 1fr;
  }
  .dt-showcase__before {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 28px 24px;
  }
  .dt-showcase__after {
    padding: 28px 24px;
  }
  .dt-scatter {
    height: 340px;
  }
}


/* ---------------------------------------------------------
   Decision Transformation Animation System
   --------------------------------------------------------- */

/* Background gradient */
.decision-transform {
  background: radial-gradient(ellipse at 50% 40%, #f8fafc 0%, #ffffff 70%);
  position: relative;
}

/* --- Phase system: everything hidden until orchestrator triggers --- */
.dt-showcase[data-dt-animate] .dt-showcase__before,
.dt-showcase[data-dt-animate] .dt-showcase__after {
  will-change: transform, opacity;
}

/* --- CHIPS: initial hidden state --- */
.dt-showcase[data-dt-animate] .dt-chip {
  opacity: 0;
  transform: translateY(20px) scale(0.96) var(--chip-rotate, rotate(0deg));
  transition: none;
  will-change: transform, opacity;
}

/* Phase 1: chips enter */
.dt-showcase.dt-phase-enter .dt-chip {
  opacity: 1;
  transform: translateY(0) scale(1) var(--chip-rotate, rotate(0deg));
  transition: opacity 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dt-showcase.dt-phase-enter .dt-chip:nth-child(1) { transition-delay: 0ms; }
.dt-showcase.dt-phase-enter .dt-chip:nth-child(2) { transition-delay: 60ms; }
.dt-showcase.dt-phase-enter .dt-chip:nth-child(3) { transition-delay: 120ms; }
.dt-showcase.dt-phase-enter .dt-chip:nth-child(4) { transition-delay: 180ms; }
.dt-showcase.dt-phase-enter .dt-chip:nth-child(5) { transition-delay: 240ms; }
.dt-showcase.dt-phase-enter .dt-chip:nth-child(6) { transition-delay: 300ms; }

/* Phase 2: floating idle */
@keyframes dt-float-1 { 0%,100% { transform: translateY(0) var(--chip-rotate); } 50% { transform: translateY(-6px) var(--chip-rotate); } }
@keyframes dt-float-2 { 0%,100% { transform: translateY(0) var(--chip-rotate); } 50% { transform: translateY(-5px) var(--chip-rotate); } }
@keyframes dt-float-3 { 0%,100% { transform: translateY(0) var(--chip-rotate); } 50% { transform: translateY(-7px) var(--chip-rotate); } }

.dt-showcase.dt-phase-float .dt-chip:nth-child(1) { animation: dt-float-1 4.2s ease-in-out infinite; }
.dt-showcase.dt-phase-float .dt-chip:nth-child(2) { animation: dt-float-2 5.1s ease-in-out infinite 0.3s; }
.dt-showcase.dt-phase-float .dt-chip:nth-child(3) { animation: dt-float-3 4.6s ease-in-out infinite 0.6s; }
.dt-showcase.dt-phase-float .dt-chip:nth-child(4) { animation: dt-float-1 5.4s ease-in-out infinite 0.15s; }
.dt-showcase.dt-phase-float .dt-chip:nth-child(5) { animation: dt-float-2 4.8s ease-in-out infinite 0.45s; }
.dt-showcase.dt-phase-float .dt-chip:nth-child(6) { animation: dt-float-3 5.0s ease-in-out infinite 0.7s; }

/* Hover: chips */
.dt-showcase.dt-phase-float .dt-chip:hover {
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.03) var(--chip-rotate);
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- BEFORE PANEL: surface card + hidden label entrance --- */
.dt-showcase[data-dt-animate] .dt-surface,
.dt-showcase[data-dt-animate] .dt-hidden-label,
.dt-showcase[data-dt-animate] .dt-showcase__label,
.dt-showcase[data-dt-animate] .dt-showcase__before .dt-action {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
  will-change: transform, opacity;
}

.dt-showcase.dt-phase-enter .dt-surface {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.dt-showcase.dt-phase-enter .dt-showcase__before .dt-showcase__label {
  opacity: 1; transform: translateY(0);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.dt-showcase.dt-phase-enter .dt-hidden-label {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease-out 100ms, transform 400ms ease-out 100ms;
}
.dt-showcase.dt-phase-enter .dt-showcase__before .dt-action {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease-out 350ms, transform 400ms ease-out 350ms;
}

/* --- AFTER PANEL: hidden until phase-resolve --- */
.dt-showcase[data-dt-animate] .dt-showcase__after > * {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
  will-change: transform, opacity;
}
.dt-showcase[data-dt-animate] .dt-showcase__after {
  position: relative;
}

/* Right label */
.dt-showcase.dt-phase-resolve .dt-showcase__after .dt-showcase__label {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* Metric header */
.dt-showcase.dt-phase-resolve .dt-showcase__after .dt-metric-header {
  opacity: 1; transform: translateY(0);
  transition: opacity 450ms ease-out 80ms, transform 450ms ease-out 80ms;
}

/* Amount pulse */
@keyframes dt-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.dt-showcase.dt-phase-resolve .dt-metric-value {
  animation: dt-pulse 1.2s ease-in-out 300ms 1;
}

/* Sources heading */
.dt-showcase.dt-phase-resolve .dt-showcase__after .dt-sources {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease-out 160ms, transform 400ms ease-out 160ms;
}

/* Source rows stagger */
.dt-showcase[data-dt-animate] .dt-source-row {
  opacity: 0;
  transform: translateX(8px);
  transition: none;
  will-change: transform, opacity;
}
.dt-showcase.dt-phase-rows .dt-source-row {
  opacity: 1; transform: translateX(0);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(1) { transition-delay: 0ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(2) { transition-delay: 80ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(3) { transition-delay: 160ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(4) { transition-delay: 240ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(5) { transition-delay: 320ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(6) { transition-delay: 400ms; }

/* Checkmark scale */
.dt-showcase[data-dt-animate] .dt-source-check {
  transform: scale(0);
  transition: none;
}
.dt-showcase.dt-phase-rows .dt-source-check {
  transform: scale(1);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(1) .dt-source-check { transition-delay: 150ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(2) .dt-source-check { transition-delay: 230ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(3) .dt-source-check { transition-delay: 310ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(4) .dt-source-check { transition-delay: 390ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(5) .dt-source-check { transition-delay: 470ms; }
.dt-showcase.dt-phase-rows .dt-source-row:nth-child(6) .dt-source-check { transition-delay: 550ms; }

/* After action card */
.dt-showcase[data-dt-animate] .dt-showcase__after .dt-action {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}
.dt-showcase.dt-phase-rows .dt-showcase__after .dt-action {
  opacity: 1; transform: translateY(0);
  transition: opacity 400ms ease-out 500ms, transform 400ms ease-out 500ms;
}

/* --- CONNECTION LINES --- */
.dt-flow-lines {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.dt-flow-line {
  position: absolute;
  height: 1px;
  width: 0;
  opacity: 0;
  will-change: width, opacity;
}
.dt-flow-line__track {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(29,78,216,0.35), transparent);
}
.dt-flow-dot {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(29,78,216,0.5);
  opacity: 0;
  will-change: transform, opacity;
}

/* Flow line animation */
@keyframes dt-line-grow {
  0% { width: 0; opacity: 0; }
  20% { opacity: 0.4; }
  100% { width: 100%; opacity: 0.3; }
}
@keyframes dt-dot-travel {
  0% { left: 0; opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

.dt-showcase.dt-phase-resolve .dt-flow-line {
  animation: dt-line-grow 800ms ease-out forwards;
}
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(1) { animation-delay: 0ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(2) { animation-delay: 80ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(3) { animation-delay: 160ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(4) { animation-delay: 240ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(5) { animation-delay: 320ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(6) { animation-delay: 400ms; }

.dt-showcase.dt-phase-resolve .dt-flow-dot {
  animation: dt-dot-travel 1s ease-in-out forwards;
}
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(1) .dt-flow-dot { animation-delay: 100ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(2) .dt-flow-dot { animation-delay: 180ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(3) .dt-flow-dot { animation-delay: 260ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(4) .dt-flow-dot { animation-delay: 340ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(5) .dt-flow-dot { animation-delay: 420ms; }
.dt-showcase.dt-phase-resolve .dt-flow-line:nth-child(6) .dt-flow-dot { animation-delay: 500ms; }

/* --- HOVER: right card --- */
.dt-showcase__after {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.dt-showcase.dt-phase-resolve .dt-showcase__after:hover {
  box-shadow: inset 0 0 0 1px rgba(29,78,216,0.08);
}

/* --- RESPONSIVE: mobile simplification --- */
@media (max-width: 768px) {
  .dt-showcase[data-dt-animate] .dt-chip {
    opacity: 0;
    transform: translateY(12px) scale(0.98) var(--chip-rotate, rotate(0deg));
  }
  .dt-showcase.dt-phase-enter .dt-chip {
    opacity: 1;
    transform: translateY(0) scale(1) var(--chip-rotate, rotate(0deg));
    transition: opacity 400ms ease-out, transform 400ms ease-out;
  }
  /* No floating on mobile */
  .dt-showcase.dt-phase-float .dt-chip {
    animation: none;
  }
  /* No flow lines on mobile */
  .dt-flow-lines { display: none; }
}

/* Respect reduced motion */


/* =========================================================
   DEFENSIVE OVERRIDES - Ensure redesigned pages override
   old global .btn and nav CTA border-radius
   ========================================================= */

/* Force no border-radius on all redesigned page buttons */
.pg-home .hero-dark__btn,
.pg-home .hero-dark__btn--primary,
.pg-home .hero-dark__btn--secondary,
.pg-about .abt-cta__btn,
.pg-agent .ag-cta__btn,
.pg-agent .ag-cta__btn--primary,
.pg-agent .ag-cta__btn--secondary,
.pg-agent .ag-hero__send,
.pg-platform .pl-cta__btn,
.pg-contact .ct-form__submit,
.pg-contact .ct-info__cal-btn,
.pg-contact .ct-closing-cta__link,
.pg-team .tm-hiring__btn,
.pg-insights .in-nl__btn,
.pg-beliefs .bl-cta__btn {
  border-radius: 0 !important;
}

/* Force no border-radius on nav CTA (Agent button) across ALL pages */
.pg-home #navbar .nav-links li:last-child a,
.pg-about #navbar .nav-links li:last-child a,
.pg-agent #navbar .nav-links li:last-child a,
.pg-platform #navbar .nav-links li:last-child a,
.pg-contact #navbar .nav-links li:last-child a,
.pg-team #navbar .nav-links li:last-child a,
.pg-insights #navbar .nav-links li:last-child a,
.pg-beliefs #navbar .nav-links li:last-child a,
#navbar .nav-links li:last-child a {
  border-radius: 0 !important;
  background: #2563EB !important;
  color: #fff !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  padding: 9px 20px !important;
  border: none !important;
  text-decoration: none !important;
}

/* Ensure all eyebrow tags have no border-radius */
[class*="__eyebrow"] {
  border-radius: 0 !important;
}

/* Ensure all tag pills have no border-radius */
[class*="__tag"],
[class*="-tag"] {
  border-radius: 0 !important;
}

/* =========================================================
   GLOBAL ANIMATION SYSTEM
   Subtle, elegant animations across all pages
   ========================================================= */

/* --- Reveal stagger delay utilities --- */
.reveal-d1 { transition-delay: 60ms !important; }
.reveal-d2 { transition-delay: 120ms !important; }
.reveal-d3 { transition-delay: 180ms !important; }
.reveal-d4 { transition-delay: 240ms !important; }
.reveal-d5 { transition-delay: 300ms !important; }
.reveal-d6 { transition-delay: 360ms !important; }
.reveal-d7 { transition-delay: 420ms !important; }
.reveal-d8 { transition-delay: 480ms !important; }

/* --- Directional reveal variants --- */
.reveal--left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Gentle scale-in for pull quotes and highlight sections */
.reveal--scale {
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Blur-in for hero text */
.reveal--blur {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  transition:
    opacity 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* --- Keyframes --- */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes gentleDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes borderDraw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

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

/* --- Live indicator pulse --- */
.live-dot, .hero-dark__dot, [class*="dot"] {
  animation: subtlePulse 2.4s ease-in-out infinite;
}

/* --- Global link hover underline draw --- */
.nav-links a::after {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Global button hover micro-interactions --- */
a[class*="btn"], button[class*="btn"],
a[class*="cta"], button[class*="cta"],
.ct-form__submit, .in-nl__btn, .abt-cta__btn {
  transition: background 0.25s ease, color 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease !important;
}
a[class*="btn"]:hover, button[class*="btn"]:hover,
a[class*="cta"]:hover, button[class*="cta"]:hover,
.ct-form__submit:hover, .in-nl__btn:hover, .abt-cta__btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
a[class*="btn"]:active, button[class*="btn"]:active,
a[class*="cta"]:active, button[class*="cta"]:active,
.ct-form__submit:active, .in-nl__btn:active, .abt-cta__btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: none !important;
}

/* --- Global card hover lift --- */
[class*="__card"]:not([class*="strip"]):not([class*="card-icon"]):not([class*="card-hdr"]):not([class*="card-title"]):not([class*="card-body"]) {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
}
[class*="__card"]:not([class*="strip"]):not([class*="card-icon"]):not([class*="card-hdr"]):not([class*="card-title"]):not([class*="card-body"]):hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}

/* --- Footer link hover --- */
footer a, .footer a, [class*="footer"] a {
  transition: color 0.2s ease !important;
  position: relative;
}

/* --- Form field focus glow --- */
input[type="text"]:focus, input[type="email"]:focus,
textarea:focus, select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08) !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input[type="text"], input[type="email"], textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Eyebrow tag hover shimmer --- */
[class*="eyebrow"] {
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

/* --- Stat value accent character gentle float --- */
.accent, [class*="accent"] {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Smooth scroll --- */
html { scroll-behavior: smooth; }

/* --- Section transition --- */
section, [class*="section"], [class*="strip"] {
  transition: opacity 0.3s ease;
}

/* --- Badge hover --- */
[class*="badge"], [class*="pill"], [class*="tag"] {
  transition: transform 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease !important;
}
[class*="badge"]:hover, [class*="pill"]:hover, [class*="tag"]:hover {
  transform: translateY(-1px);
}

/* --- CTA section background gradient animation --- */
@keyframes ctaGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Grid row hover highlight --- */
[class*="pipeline"] tr:hover td,
[class*="pipeline"] tr:hover th,
[class*="row"]:hover {
  transition: background 0.2s ease;
}


@media (prefers-reduced-motion: reduce) {
  .dt-showcase[data-dt-animate] .dt-chip,
  .dt-showcase[data-dt-animate] .dt-surface,
  .dt-showcase[data-dt-animate] .dt-hidden-label,
  .dt-showcase[data-dt-animate] .dt-showcase__label,
  .dt-showcase[data-dt-animate] .dt-showcase__after > *,
  .dt-showcase[data-dt-animate] .dt-source-row,
  .dt-showcase[data-dt-animate] .dt-source-check,
  .dt-showcase[data-dt-animate] .dt-showcase__before .dt-action,
  .dt-showcase[data-dt-animate] .dt-showcase__after .dt-action {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .dt-flow-lines { display: none; }

  .reveal--left, .reveal--right, .reveal--scale, .reveal--blur,
  .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4,
  .reveal-d5, .reveal-d6, .reveal-d7, .reveal-d8 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
  [class*="__card"]:hover,
  a[class*="btn"]:hover, button[class*="btn"]:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}


/* ---------------------------------------------------------
   Pillars (3-column cards)
   --------------------------------------------------------- */
.pillars {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.pillar {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.pillar__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.pillar__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.pillar__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   Principles Grid (homepage)
   --------------------------------------------------------- */
.principles {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.principle {
  background: var(--white);
  padding: var(--space-4);
  box-shadow: inset 0 0 0 1px rgba(229, 231, 235, 0.55);
}

.principle__num {
  font-size: 28px;
  font-weight: 600;
  color: #DBEAFE;
  margin-bottom: 14px;
}

.principle__heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.principle__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   Team Grid
   --------------------------------------------------------- */
.team-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.team-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29,78,216,0.15);
  box-shadow: var(--shadow-2);
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}

.team-card__photo-placeholder {
  width: 56px;
  height: 56px;
  background: var(--border);
  border-radius: 50%;
}

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

.team-card__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.team-card__role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.team-card__bio {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 32ch;
}

.team-card__social {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  color: var(--text-faint);
  transition: color 0.15s ease;
}

.team-card__social:hover {
  color: var(--accent);
}

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-info__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
  margin-top: 32px;
}

.contact-info__label:first-child { margin-top: 0; }

.contact-info__value {
  font-size: 16px;
  color: var(--text);
}

.contact-info__value a {
  color: var(--accent);
  transition: opacity 0.15s ease, color 0.15s ease;
}

.contact-info__value a:hover {
  opacity: 0.82;
  color: #1D4ED8;
}

.contact-info__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 360px;
}

.contact-info__cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
}

.contact-info__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-info__note {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 12px;
}

/* Form */
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__label {
  font-size: 13px;
  font-weight: 500;
  color: #1F2937;
}

.form__input,
.form__textarea {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}

.form__input:invalid:not(:placeholder-shown),
.form__textarea:invalid:not(:placeholder-shown) {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form__input:valid:not(:placeholder-shown),
.form__textarea:valid:not(:placeholder-shown) {
  border-color: #10B981;
}

.form__help {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--text-faint);
}

.form__textarea {
  resize: vertical;
  min-height: 128px;
}

/* ---------------------------------------------------------
   Quote Section
   --------------------------------------------------------- */
.quote-section {
  background: var(--navy);
  padding: var(--space-8) 0;
  text-align: center;
}

.quote-section__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 72px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  margin-bottom: 20px;
}

.quote-section__text {
  font-size: 21px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 680px;
  margin: 0 auto 24px;
  letter-spacing: -0.01em;
}

.quote-section__attr {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  font-style: normal;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer {
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 48px 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer__logo-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s;
}

.footer__logo-text:hover { color: white; }

.footer__logo-img,
.footer__logo-text svg {
  height: 16px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.15s;
}

.footer__logo-text:hover .footer__logo-img,
.footer__logo-text:hover svg {
  opacity: 1;
}

.footer__links {
  display: flex;
  gap: 28px;
}

.footer__links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.15s;
}

.footer__links a:hover { color: rgba(255, 255, 255, 0.65); }

.footer__copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.18);
}

.footer__meta {
  text-align: right;
}

.footer__tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: 4px;
}

.footer__trust {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.34);
}

.footer__legal {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.22);
  max-width: 600px;
}

/* ---------------------------------------------------------
   Feature Split (text + image side by side)
   --------------------------------------------------------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.feature-split__text { max-width: 480px; }

.feature-split__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-top: 18px;
  max-width: 54ch;
}

.feature-split__image img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

#about { padding-bottom: 34px; }
#platform { padding-top: 62px; }

#about .feature-split__image {
  max-height: 340px;
  overflow: hidden;
  border-radius: var(--radius);
}

#about .feature-split__image img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------------------------------------------------------
   Section Image
   --------------------------------------------------------- */
.section-image {
  margin-top: 56px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.09);
}

.section-image img {
  width: 100%;
  display: block;
}

.section-image--narrow {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 56px;
  margin-top: 40px;
}

.section-image--medium {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.section-image__caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------------------------------------------------
   Tech Partner
   --------------------------------------------------------- */
.tech-partner {
  margin-top: 56px;
  padding: 32px 36px;
  background: var(--accent-light);
  border: 1px solid #DBEAFE;
  border-radius: var(--radius);
}

.tech-partner__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.tech-partner__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 760px;
}

/* ---------------------------------------------------------
   OS Comparison Card
   --------------------------------------------------------- */
.os-comparison {
  margin-top: 56px;
  background: #fff;
  border-radius: 16px;
  padding: 56px 48px 48px;
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.os-comparison__lead {
  font-size: 0.9375rem;
  color: var(--text-secondary, #6B7280);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.os-comparison__heading {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy, #0F172A);
  margin-bottom: 48px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.os-comparison__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

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

.os-comparison__label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy, #0F172A);
  margin-bottom: 20px;
}

.os-comparison__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-bottom: 20px;
}

.os-comparison__logo svg,
.os-comparison__logo img {
  max-height: 56px;
  width: auto;
}

.os-comparison__desc {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary, #6B7280);
}

.os-comparison__footer {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-mid, #4B5563);
  max-width: 640px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 680px) {
  .os-comparison {
    padding: 40px 24px 36px;
  }
  .os-comparison__heading {
    font-size: 1.375rem;
    margin-bottom: 36px;
  }
  .os-comparison__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}


/* ---------------------------------------------------------
   Hero Entrance & Motion
   --------------------------------------------------------- */
@keyframes heroBgDrift {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.03) translate(-0.4%, 0.25%); }
  100% { transform: scale(1) translate(0, 0); }
}

@keyframes heroPulseGlow {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.11; }
}

#hero::before {
  animation: heroBgDrift 22s ease-in-out infinite;
  will-change: transform;
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(29,78,216,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: heroPulseGlow 8s ease-in-out infinite;
}

.hero-enter {
  opacity: 0;
  transform: translateY(20px);
}

.hero-enter.hero-visible {
  opacity: 1;
  transform: translateY(0);
}

#hero h1.hero-enter {
  position: relative;
  display: inline-block;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

#hero h1.hero-enter::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(29,78,216,0.2));
  border-radius: 1px;
}

#hero h1.hero-enter.hero-visible::after {
  width: 64px;
  transition: width 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
}

#hero .hero-sub.hero-enter {
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1) 150ms,
              transform 550ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
}

#hero .hero-cta.hero-enter {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) 300ms,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 300ms;
}

#hero .hero-feature-card.hero-enter:nth-child(1) {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) 400ms,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 400ms;
}
#hero .hero-feature-card.hero-enter:nth-child(2) {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) 520ms,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 520ms;
}
#hero .hero-feature-card.hero-enter:nth-child(3) {
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) 640ms,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 640ms;
}



@media (prefers-reduced-motion: reduce) {
  #hero::before,
  #hero::after { animation: none !important; }
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   Partners Logo Strip
   --------------------------------------------------------- */
.partners {
  padding: var(--space-7) 0;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partners__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 24px;
}

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

.partners__logo {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  transition: color 0.15s;
}

.partners__logo:hover {
  color: var(--text);
}

.partners__logo-img {
  height: 44px;
  width: auto;
  flex: 0 0 auto;
}

.partners__logo-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
}

/* ---------------------------------------------------------
   Divider utility
   --------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--border);
}

/* ---------------------------------------------------------
   Insights Cards
   --------------------------------------------------------- */
.articles-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.article-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  padding: 36px 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  border-color: var(--border-mid);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.article-card__date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.article-card__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.article-card__excerpt {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.article-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease;
}

.article-card__link:hover { opacity: 0.7; }

/* ---------------------------------------------------------
   Article Prose (single article page)
   --------------------------------------------------------- */
.article-header {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.article-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 32px;
  transition: opacity 0.15s ease;
}

.article-header__back:hover { opacity: 0.7; }

.article-header__meta {
  font-size: 13px;
  color: var(--text-faint);
  margin-bottom: 16px;
}

.article-header__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
}

.prose {
  max-width: 720px;
  margin: 48px auto 0;
}

.prose p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 24px;
}

.prose h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.prose h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-top: 36px;
  margin-bottom: 12px;
}

.prose ul,
.prose ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 8px;
}

.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--accent-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote-section blockquote {
  background: none !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 auto 24px !important;
}

.prose blockquote p {
  color: var(--text);
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Extended Contact Sections
   --------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}

.contact-channel {
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}

.contact-channel__icon {
  width: 40px;
  height: 40px;
  background: var(--accent-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.contact-channel__icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.contact-channel__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.contact-channel__value {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}

.contact-channel__value a {
  color: var(--accent);
  transition: opacity 0.15s ease;
}

.contact-channel__value a:hover { opacity: 0.7; }

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.social-link {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.social-link:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.social-link svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.social-link:hover svg { color: var(--accent); }

.map-embed {
  margin-top: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

.booking-cta {
  margin-top: 56px;
  padding: 40px;
  background: var(--navy);
  border-radius: var(--r-md);
  text-align: center;
}

.booking-cta__heading {
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin-bottom: 10px;
}

.booking-cta__sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
  line-height: 1.6;
}

.faq-list { margin-top: 56px; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-question {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
}

.faq-question::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--text-faint);
}

.faq-item.is-open .faq-question::after { content: '\2212'; }

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

.faq-item.is-open .faq-answer { max-height: 400px; }

.faq-answer__inner {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }

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

  .team-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

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

  .feature-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .feature-split__text { max-width: 100%; }

  #about { padding-bottom: 46px; }
  #platform { padding-top: 66px; }

  #about .feature-split__image {
    max-height: none;
    overflow: visible;
    border-radius: 0;
  }

  #about .feature-split__image img {
    height: auto;
    object-fit: contain;
  }

  .section-image--medium { max-width: none; }

  .section-image__caption {
    max-width: none;
    text-align: left;
  }

  .tech-partner { padding: 26px 24px; }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .articles-grid,
  .platform-metrics,
  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }

  .split-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .beliefs-layout {
    grid-template-columns: 1fr;
  }

  .beliefs-sidebar {
    position: static;
  }

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

  .flow-stepper {
    flex-direction: column;
  }

  .flow-stepper__connector {
    width: auto;
    padding: 8px 0;
    justify-content: center;
  }

  .footer__inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .footer__meta { text-align: center; }
}

@media (max-width: 768px) {
  .navbar__inner { justify-content: space-between; }

  .nav-toggle { display: inline-flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    padding: 18px 20px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid transparent;
  }

  #navbar.nav-open .nav-links { display: flex; }

  #navbar.nav--dark .nav-links {
    background: rgba(10, 15, 30, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  #navbar.nav--light .nav-links {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: var(--border);
  }

  .container,
  .container--wide,
  .container--narrow { padding: 0 24px; }
}

@media (max-width: 640px) {
  .container,
  .container--wide,
  .container--narrow { padding: 0 20px; }

  #about,
  #platform,
  #insights,
  #principles {
    scroll-margin-top: calc(var(--nav-h) + 18px);
  }

  #hero h1 { font-size: 32px; }
  .hero-content { padding: calc(var(--nav-h) + 48px) 20px 44px; }

  .section { padding: var(--space-7) 0; }

  #about { padding-bottom: 44px; }
  #platform { padding-top: 64px; }

  .section__heading { font-size: 28px; }

  .mission__text { font-size: 19px; }

  .team-grid { grid-template-columns: 1fr; gap: 28px; }

  .contact-info__actions { gap: 8px; }

  .partners__logo {
    flex-direction: column;
    gap: 10px;
  }

  .partners__logo-img { height: 36px; }

  .quote-section__text { font-size: 18px; }

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

  .platform-metric__value { font-size: 30px; }

  .sidebar-metrics { grid-template-columns: 1fr 1fr; }

  .beliefs-card { padding: var(--space-4); }
  .beliefs-card__num { font-size: 36px; }
  .beliefs-card__title { font-size: 19px; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.35);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Hero Gradient Overlay
   --------------------------------------------------------- */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(29,78,216,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 80% 20%, rgba(59,130,246,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#hero > :not(.motif) {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Article Card Enhancements (Insights)
   --------------------------------------------------------- */
.article-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  margin: -36px -32px 24px -32px;
  width: calc(100% + 64px);
}

.article-card__chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------
   Newsletter Signup Section
   --------------------------------------------------------- */
.newsletter {
  background: var(--navy);
  padding: var(--space-7) 0;
  text-align: center;
}

.newsletter h2 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-2);
}

.newsletter p {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-5);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter__form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.newsletter__input {
  flex: 1;
  padding: 11px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.newsletter__input::placeholder {
  color: rgba(255,255,255,0.3);
}

.newsletter__input:focus {
  border-color: rgba(59,130,246,0.6);
}

.newsletter__btn {
  padding: 11px 22px;
  border-radius: 4px;
  border: none;
  background: #fff;
  color: var(--navy);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}

.newsletter__btn:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   About Page Step Numbers
   --------------------------------------------------------- */
.step-num {
  font-size: 42px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-2);
  letter-spacing: -0.03em;
}

/* ---------------------------------------------------------
   Footer Columns Layout
   --------------------------------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-3);
}

.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  transition: color 0.15s;
}

.footer__col-links a:hover {
  color: rgba(255,255,255,0.7);
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------------------------------------------------------
   About Numbered Steps
   --------------------------------------------------------- */
.step-num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-2);
  position: relative;
  display: inline-block;
}
.step-num::after {
  content: '';
  display: block;
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: 8px;
  opacity: 0.5;
}



/* ---------------------------------------------------------
   Consistent Hover Elevation (all cards site-wide)
   --------------------------------------------------------- */
.card--hover:hover,
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}

/* ---------------------------------------------------------
   Contact Split Layout (form + dark panel)
   --------------------------------------------------------- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.contact-split__form {
  padding: var(--space-6) var(--space-5);
  background: var(--white);
}

.contact-split__panel {
  background: var(--navy);
  padding: var(--space-6) var(--space-5);
  color: #fff;
}

.contact-split__panel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-4);
}

.contact-split__detail {
  margin-bottom: var(--space-4);
}

.contact-split__detail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}

.contact-split__detail-value {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

.contact-split__detail-value a {
  color: rgba(255,255,255,0.8);
  transition: color 0.15s;
}

.contact-split__detail-value a:hover {
  color: #fff;
}

.contact-split__divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: var(--space-4) 0;
}

.contact-split__socials {
  display: flex;
  gap: 12px;
  margin-bottom: var(--space-2);
}

.contact-split__socials a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.contact-split__socials a:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}

.contact-split__socials svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.6);
}

/* ---------------------------------------------------------
   Insights Featured Article (hero card)
   --------------------------------------------------------- */
.featured-article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.featured-article:hover {
  border-color: var(--border-mid);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}

.featured-article__img {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
  min-height: 320px;
}

.featured-article__body {
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-article__title {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

.featured-article__title a { color: inherit; }

.featured-article__excerpt {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------
   About Horizontal Process Stepper
   --------------------------------------------------------- */
.process-stepper {
  display: flex;
  align-items: stretch;
}

.process-stepper__step {
  flex: 1;
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--off-white);
  position: relative;
}

.process-stepper__num {
  font-size: 42px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.03em;
}

.process-stepper__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.process-stepper__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
}

.process-stepper__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  color: var(--border-mid);
}

.process-stepper__connector svg {
  width: 48px;
  height: 24px;
}

/* ---------------------------------------------------------
   Why Sorraia Differentiator Cards (Home)
   --------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.why-card {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: var(--shadow-2);
}

.why-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.why-card__icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.why-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.why-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Trust Strip (Home)
   --------------------------------------------------------- */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-6) 0;
  background: var(--off-white);
}

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

.trust-strip__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.trust-strip__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-strip__icon svg {
  width: 18px;
  height: 18px;
  color: var(--white);
}

.trust-strip__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.trust-strip__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Platform Architecture Diagram (Signature Visual)
   --------------------------------------------------------- */
.arch-diagram {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
}

.arch-diagram__col {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.arch-diagram__col--left {
  background: var(--off-white);
  border-right: 1px solid var(--border);
}

.arch-diagram__col--center {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-4);
  position: relative;
}

.arch-diagram__col--right {
  background: var(--off-white);
  border-left: 1px solid var(--border);
}

.arch-diagram__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.arch-diagram__col--left .arch-diagram__label,
.arch-diagram__col--right .arch-diagram__label {
  color: var(--text-faint);
}

.arch-diagram__col--center .arch-diagram__label {
  color: rgba(255,255,255,0.45);
}

.arch-diagram__item {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
}

.arch-diagram__col--center .arch-diagram__item {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
}

.arch-diagram__outputs {
  border-top: 1px solid var(--border);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--white);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arch-diagram__outputs .arch-diagram__label {
  width: 100%;
  margin: 0 0 var(--space-1) 0;
  color: var(--text-faint);
  text-align: center;
}

/* ---------------------------------------------------------
   Core Modules Grid (Platform)
   --------------------------------------------------------- */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.module-card {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: var(--shadow-2);
}

.module-card__num {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.module-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.module-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Callout Financial Data Integrity (Platform)
   --------------------------------------------------------- */
.callout-bar {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--white) 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
}

.callout-bar__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.callout-bar__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.callout-bar__icon svg {
  width: 16px;
  height: 16px;
  color: var(--white);
}

.callout-bar__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.callout-bar__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Beliefs → Platform Mapping
   --------------------------------------------------------- */
.belief-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.belief-map__card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.belief-map__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.belief-map__belief {
  padding: var(--space-4);
  background: var(--navy);
  color: var(--white);
}

.belief-map__belief-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-2);
}

.belief-map__belief-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.belief-map__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  color: var(--accent);
}

.belief-map__feature {
  padding: var(--space-4);
}

.belief-map__feature-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

.belief-map__feature-text {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Hero Enhancements
   --------------------------------------------------------- */
.hero-sub--secondary {
  display: inline-block;
  margin-left: 12px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
  transition: color 0.15s;
}

.hero-sub--secondary:hover {
  color: var(--white);
}

/* ---------------------------------------------------------
   Responsive: New Components
   --------------------------------------------------------- */
@media (max-width: 960px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .arch-diagram {
    grid-template-columns: 1fr;
  }
  .arch-diagram__col--left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .arch-diagram__col--right {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .callout-bar {
    grid-template-columns: 1fr;
  }
  .belief-map {
    grid-template-columns: 1fr;
  }
  .trust-strip__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
  .modules-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Polish Layer premium refinements
   ========================================================= */

/* --- Focus-visible ring for accessibility --- */
.btn:focus-visible,
a:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Text line-length utility --- */
.text-block { max-width: 680px; }

/* --- Gradient divider (replaces plain 1px borders) --- */
.divider--gradient {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border-mid) 50%, var(--border) 80%, transparent 100%);
}

/* --- Background glow (pseudo-element, use on select sections) --- */
.bg-glow { position: relative; overflow: hidden; }
.bg-glow::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 600px;
  height: 600px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bg-glow > * { position: relative; z-index: 1; }

/* --- Signature network motif (very low opacity behind hero) --- */
.motif {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
}
.motif--hero {
  top: 50%;
  right: -2%;
  translate: 0 -50%;
  width: 520px;
  height: 520px;
  animation: motifPulse 7s ease-in-out infinite;
}
@keyframes motifPulse {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.08; }
}

/* --- Motion System differentiated animation types --- */

/* REVEAL for text elements (headlines, paragraphs, eyebrows) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FOCUS for visuals, cards, diagrams, images */
.reveal--focus {
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--focus.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* CONTINUITY for section-level soft transitions */
.reveal--cont {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--cont.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }
.reveal--delay-5 { transition-delay: 400ms; }

/* --- Footer top border gradient --- */
.footer::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 70%, transparent 100%);
}

/* --- Section spacing scale (desktop) --- */
@media (min-width: 1025px) {
  .section { padding: var(--space-9) 0; }
  .mission { padding: 72px 0; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .section { padding: var(--space-8) 0; }
  .mission { padding: 72px 0; }
}

/* --- Hero subtle depth layer --- */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 75% 40%, rgba(29,78,216,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
#hero > :not(.motif) { position: relative; z-index: 1; }

/* --- Quote section subtle polish --- */
.quote-section {
  position: relative;
}
.quote-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 50%, transparent);
}

/* --- Section spacing variants --- */
.section-tight { padding: 64px 0; }
.section-large { padding: 120px 0; }
@media (max-width: 768px) {
  .section-tight { padding: 48px 0; }
  .section-large { padding: 80px 0; }
}

/* --- Stack utilities --- */
.stack-md { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }

/* --- Lead paragraph --- */
.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 600px;
}

/* --- Muted text --- */
.muted { color: var(--text-muted); }

/* --- Card outline variant --- */
.card--outline {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}

/* --- Subtle grid background (use sparingly, max 2 sections) --- */
.bg-grid {
  position: relative;
}
.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(229,231,235,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,231,235,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 80%);
}
.bg-grid > * { position: relative; z-index: 1; }

/* --- Hero 2-column split layout --- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* --- Hero feature stack (cosmetic mini-cards on right) --- */
.hero-feature-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-feature-card {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.hero-feature-card:nth-child(2) {
  margin-top: 0;
}
.hero-feature-card:nth-child(3) {
  margin-top: 0;
}
.hero-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}
.hero-feature-card__title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-feature-card__title svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}
.hero-feature-card__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .hero-feature-card:nth-child(2),
  .hero-feature-card:nth-child(3) {
    margin-top: 0;
  }
}

/* --- Beliefs card decorative quote mark --- */
.beliefs-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.beliefs-card::before {
  content: "\201C";
  position: absolute;
  top: -8px;
  right: 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 120px;
  line-height: 1;
  color: rgba(219,234,254,0.3);
  pointer-events: none;
  z-index: 0;
}
.beliefs-card > * { position: relative; z-index: 1; }

/* --- Platform callout card --- */
.callout-card {
  padding: 32px 36px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(29,78,216,0.12);
  background: linear-gradient(135deg, var(--accent-light) 0%, rgba(239,246,255,0.5) 100%);
}
.callout-card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.callout-card__heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.callout-card__body {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 60ch;
}

/* --- Footer polish: subtle bg overlay --- */
.footer {
  position: relative;
}
.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;
  height: 400px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.footer > .container { position: relative; z-index: 1; }

/* --- Footer link hover consistency --- */
.footer__col-links a {
  transition: color 0.18s ease;
}
.footer__col-links a:hover {
  color: rgba(255,255,255,0.75);
}

/* --- Nav link active indicator refinement --- */
.nav-links a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* --- Divider spacing --- */
.divider--gradient {
  margin: 0 auto;
}

/* --- Why-card hover lift --- */
.why-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

/* --- Pillar card radius upgrade --- */
.pillar { border-radius: var(--r-lg); }
.beliefs-card { border-radius: var(--r-lg); }
.sidebar-block { border-radius: var(--r-lg); }
.operationalize-card { border-radius: var(--r-lg); }
.module-card { border-radius: var(--r-lg); }
.usecase-card { border-radius: var(--r-lg); }
.flow-stepper__step { border-radius: var(--r-lg); }
.platform-metric { border-radius: var(--r-lg); }
.team-card { border-radius: var(--r-lg); }

/* --- Belief map card radius --- */
.belief-map__card { border-radius: var(--r-lg); overflow: hidden; }

/* =========================================================
   Step 1 Modular Feature Grid with Glass Cards
   ========================================================= */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.feature-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .feature-grid,
  .feature-grid--4 { grid-template-columns: 1fr; }
}

.feature-grid__card {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-1);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.feature-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(29,78,216,0.18);
}

.feature-grid__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.feature-grid__icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.feature-grid__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.feature-grid__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Dark variant for glass cards on dark backgrounds */
.feature-grid__card--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.feature-grid__card--dark:hover {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}
.feature-grid__card--dark .feature-grid__icon {
  background: rgba(255,255,255,0.08);
}
.feature-grid__card--dark .feature-grid__icon svg {
  color: rgba(255,255,255,0.7);
}
.feature-grid__card--dark .feature-grid__title {
  color: rgba(255,255,255,0.9);
}
.feature-grid__card--dark .feature-grid__desc {
  color: rgba(255,255,255,0.45);
}

/* =========================================================
   Step 2 Section Split (text left, content right)
   ========================================================= */
.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.section-split--center {
  align-items: center;
}
@media (max-width: 768px) {
  .section-split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* =========================================================
   Step 5 Staggered Card Animations
   ========================================================= */
/* SEQUENCE staggered children (standard) */
.stagger > .reveal:nth-child(1),
.stagger > .reveal--focus:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2),
.stagger > .reveal--focus:nth-child(2) { transition-delay: 80ms; }
.stagger > .reveal:nth-child(3),
.stagger > .reveal--focus:nth-child(3) { transition-delay: 160ms; }
.stagger > .reveal:nth-child(4),
.stagger > .reveal--focus:nth-child(4) { transition-delay: 240ms; }
.stagger > .reveal:nth-child(5),
.stagger > .reveal--focus:nth-child(5) { transition-delay: 320ms; }
.stagger > .reveal:nth-child(6),
.stagger > .reveal--focus:nth-child(6) { transition-delay: 400ms; }

/* SEQUENCE architectural stagger (wider gaps for system sections) */
.stagger--arch > .reveal:nth-child(1),
.stagger--arch > .reveal--focus:nth-child(1) { transition-delay: 0ms; }
.stagger--arch > .reveal:nth-child(2),
.stagger--arch > .reveal--focus:nth-child(2) { transition-delay: 120ms; }
.stagger--arch > .reveal:nth-child(3),
.stagger--arch > .reveal--focus:nth-child(3) { transition-delay: 240ms; }
.stagger--arch > .reveal:nth-child(4),
.stagger--arch > .reveal--focus:nth-child(4) { transition-delay: 360ms; }

/* =========================================================
   Step 6 Navbar: transparent border by default
   ========================================================= */
#navbar.nav--dark {
  border-bottom-color: transparent;
}
#navbar.nav--scrolled.nav--dark,
#navbar.nav--scrolled.nav--light {
  border-bottom-color: var(--border);
}

/* =========================================================
   Step 9 CTA Section Polish
   ========================================================= */
.section--cta {
  padding: var(--space-8) 0;
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  text-align: center;
}
.section--cta .section__heading {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.section--cta .section__sub {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.section--cta .btn {
  margin-top: var(--space-4);
}

/* Dark CTA variant with gradient */
.section--cta-dark {
  padding: 96px 0;
  background: linear-gradient(135deg, var(--navy) 0%, #0f172a 50%, #0c1629 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section--cta-dark::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 800px;
  height: 800px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.section--cta-dark > * { position: relative; z-index: 1; }

/* =========================================================
   Step 10 Extra Micro-interactions
   ========================================================= */
.pillar {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(29,78,216,0.15);
}

.principle {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.principle:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(29,78,216,0.15);
}

.trust-strip__item {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.trust-strip__item:hover {
  transform: translateY(-3px);
}

.team-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(29,78,216,0.15);
}

/* Button scale micro-interaction */
.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Smooth icon rotation on card hover */
.feature-grid__card:hover .feature-grid__icon svg {
  transform: scale(1.08);
  transition: transform 0.22s ease;
}

/* =========================================================
   Step 7 Section transition dividers
   ========================================================= */
.divider {
  height: 1px;
  width: 90%;
  margin: 0 auto;
  border: none;
  background: linear-gradient(to right, transparent, rgba(229,231,235,0.6), transparent);
}
.divider--dark {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
}

/* =========================================================
   Step 9 Contact page layout polish
   ========================================================= */
.contact-split__form {
  position: relative;
}
.contact-split__form::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  width: 500px;
  height: 500px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29,78,216,0.045) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.contact-split__form > * { position: relative; z-index: 1; }

.contact-split__panel {
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.contact-channel {
  border-radius: var(--r-lg);
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.contact-channel:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.10);
}

/* =========================================================
   Step 10 Insights editorial cards polish
   ========================================================= */
.article-card {
  border-radius: var(--r-lg);
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  border-color: rgba(29,78,216,0.18);
}
.featured-article {
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all 220ms cubic-bezier(.2,.8,.2,1);
}
.featured-article:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.10);
}

/* =========================================================
   Step 11 Footer polish
   ========================================================= */
.footer {
  position: relative;
}
.footer > .container {
  position: relative;
  z-index: 1;
}
.footer__grid {
  padding-top: 64px;
  padding-bottom: 48px;
}
.footer__col-title {
  margin-bottom: 16px;
}
.footer__bottom {
  padding-top: 32px;
  padding-bottom: 40px;
}

/* =========================================================
   Card System Three distinct card styles
   ========================================================= */

/* Card A Content cards (white, subtle border, light shadow) */
.card-a {
  background: var(--white);
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  padding: 28px;
  transition: all 0.2s ease;
}
.card-a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Card B Feature cards (gradient bg, medium shadow) */
.card-b {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #E6EAF0;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
  padding: 28px;
  transition: all 0.2s ease;
}
.card-b:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Card C Highlight cards (dark bg, light border) */
.card-c {
  background: #0b1a2b;
  color: white;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 28px;
  transition: all 0.2s ease;
}
.card-c:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.18);
}
.card-c .section__eyebrow,
.card-c .kicker { color: rgba(255,255,255,0.4); }
.card-c h3, .card-c p { color: rgba(255,255,255,0.85); }
.card-c p { color: rgba(255,255,255,0.55); }

/* =========================================================
   Section Rhythm standardized spacing
   ========================================================= */
.section--sm { padding: 80px 0; }
.section--lg { padding: 160px 0; }
@media (max-width: 768px) {
  .section--sm { padding: 56px 0; }
  .section--lg { padding: 100px 0; }
}

/* =========================================================
   Section Transitions alternating backgrounds
   ========================================================= */
.section--gray { background: #F7F9FC; }
.section--navy {
  background: var(--navy);
  color: white;
}
.section--navy .section__eyebrow { color: rgba(255,255,255,0.4); }
.section--navy .section__heading { color: white; }
.section--navy .section__sub { color: rgba(255,255,255,0.5); }

/* =========================================================
   Team Card Polish image zoom, shadow, pointer
   ========================================================= */
.team-card { cursor: pointer; }
.team-card__photo img {
  transition: transform 0.3s ease;
}
.team-card:hover .team-card__photo img {
  transform: scale(1.04);
}
.team-card:hover {
  box-shadow: 0 16px 40px rgba(15,23,42,0.12);
}

/* =========================================================
   CTA Radial Gradient Enhancement
   ========================================================= */
.section--cta-glow {
  position: relative;
}
.section--cta-glow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent);
  pointer-events: none;
  z-index: 0;
}
.section--cta-glow > * { position: relative; z-index: 1; }

/* =========================================================
   Graph Motifs CSS-based dot patterns (5-8% opacity)
   ========================================================= */
.bg-dots {
  position: relative;
}
.bg-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(148,163,184,0.35) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 75%);
}
.bg-dots > * { position: relative; z-index: 1; }

/* Dark variant of dot pattern */
.bg-dots--dark::after {
  background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px);
  opacity: 0.07;
}

/* =========================================================
   Step 12 Accessibility
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .reveal--focus,
  .reveal--cont,
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 960px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .newsletter__form {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .contact-split {
    grid-template-columns: 1fr;
  }
  .featured-article {
    grid-template-columns: 1fr;
  }
  .featured-article__img {
    min-height: 200px;
  }
  .process-stepper {
    flex-direction: column;
  }
  .process-stepper__connector {
    width: auto;
    height: 32px;
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .article-card__img {
    margin: -24px -20px 18px -20px;
    width: calc(100% + 40px);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }
  .callout-card {
    padding: 28px 28px;
  }
  .hero-feature-card {
    padding: 14px 16px;
  }
  .callout-bar {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------
   Global Hover Polish (motion spec)
   --------------------------------------------------------- */
.why-card,
.pillar,
.principle,
.team-card {
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 200ms ease;
}

.why-card:hover,
.pillar:hover,
.principle:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.hero-feature-card {
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 200ms ease,
              background 200ms ease;
}

.hero-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
}

.os-comparison__item {
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.os-comparison__item:hover {
  transform: translateY(-2px);
}

.btn {
  transition: transform 180ms ease,
              box-shadow 180ms ease,
              background-color 180ms ease,
              border-color 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.feature-split__image {
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------------------------------------------------------
   Section Upgrades Visual Depth & Motion
   Applying principles from the gold-standard dt-showcase:
   layering, motion, depth, progressive disclosure, storytelling
   --------------------------------------------------------- */

/* =========================================================
   1. ABOUT HERO Staggered reveal + accent underline
   ========================================================= */
.page-header[data-hero-animate] .page-header__eyebrow,
.page-header[data-hero-animate] .page-header__heading,
.page-header[data-hero-animate] .page-header__sub {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
  will-change: transform, opacity;
}

.page-header[data-hero-animate] .page-header__heading {
  position: relative;
  display: inline-block;
}

.page-header[data-hero-animate] .page-header__heading::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(29,78,216,0.2));
  border-radius: 1px;
  transition: none;
}

.page-header.hero-phase-in .page-header__eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.page-header.hero-phase-in .page-header__heading {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms ease-out 120ms, transform 450ms ease-out 120ms;
}

.page-header.hero-phase-in .page-header__heading::after {
  width: 64px;
  transition: width 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
}

.page-header.hero-phase-in .page-header__sub {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms ease-out 280ms, transform 450ms ease-out 280ms;
}

/* =========================================================
   2. PLATFORM ARCHITECTURE Sequential pipeline animation
   ========================================================= */
.arch-diagram[data-arch-animate] .arch-diagram__col,
.arch-diagram[data-arch-animate] .arch-diagram__outputs {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
  will-change: transform, opacity;
}

.arch-diagram[data-arch-animate] .arch-diagram__item {
  opacity: 0;
  transform: translateX(6px);
  transition: none;
  will-change: transform, opacity;
}

.arch-diagram[data-arch-animate] .arch-diagram__label {
  opacity: 0;
  transition: none;
}

.arch-diagram.arch-phase-col1 .arch-diagram__col--left {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__label {
  opacity: 1;
  transition: opacity 350ms ease-out 50ms;
}
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__item:nth-child(2) { transition-delay: 60ms; }
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__item:nth-child(3) { transition-delay: 120ms; }
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__item:nth-child(4) { transition-delay: 180ms; }
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__item:nth-child(5) { transition-delay: 240ms; }
.arch-diagram.arch-phase-col1 .arch-diagram__col--left .arch-diagram__item:nth-child(6) { transition-delay: 300ms; }

.arch-diagram.arch-phase-col2 .arch-diagram__col--center {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__label {
  opacity: 1;
  transition: opacity 350ms ease-out 50ms;
}
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__item:nth-child(2) { transition-delay: 60ms; }
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__item:nth-child(3) { transition-delay: 120ms; }
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__item:nth-child(4) { transition-delay: 180ms; }
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__item:nth-child(5) { transition-delay: 240ms; }
.arch-diagram.arch-phase-col2 .arch-diagram__col--center .arch-diagram__item:nth-child(6) { transition-delay: 300ms; }

.arch-diagram.arch-phase-col3 .arch-diagram__col--right {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__label {
  opacity: 1;
  transition: opacity 350ms ease-out 50ms;
}
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__item:nth-child(2) { transition-delay: 60ms; }
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__item:nth-child(3) { transition-delay: 120ms; }
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__item:nth-child(4) { transition-delay: 180ms; }
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__item:nth-child(5) { transition-delay: 240ms; }
.arch-diagram.arch-phase-col3 .arch-diagram__col--right .arch-diagram__item:nth-child(6) { transition-delay: 300ms; }

.arch-diagram.arch-phase-outputs .arch-diagram__outputs {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}

.arch-diagram[data-arch-animate] .arch-diagram__outputs .chip {
  opacity: 0;
  transform: scale(0.92);
  transition: none;
}
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip:nth-child(2) { transition-delay: 60ms; }
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip:nth-child(3) { transition-delay: 120ms; }
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip:nth-child(4) { transition-delay: 180ms; }
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip:nth-child(5) { transition-delay: 240ms; }
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip:nth-child(6) { transition-delay: 300ms; }
.arch-diagram.arch-phase-outputs .arch-diagram__outputs .chip:nth-child(7) { transition-delay: 360ms; }

/* Hover depth on architecture items */
.arch-diagram__item {
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.arch-diagram__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.arch-diagram__col--center .arch-diagram__item:hover {
  border-color: rgba(29,78,216,0.2);
}

/* =========================================================
   3. BELIEFS Card entrance stagger + hover depth
   ========================================================= */
.beliefs-card[data-beliefs-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: none;
  will-change: transform, opacity;
}

.beliefs-card[data-beliefs-animate].beliefs-enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.beliefs-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-left-color 250ms ease;
  border-left: 3px solid transparent;
}
.beliefs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-left-color: var(--accent);
}

.sidebar-block[data-beliefs-animate] {
  opacity: 0;
  transform: translateX(12px);
  transition: none;
  will-change: transform, opacity;
}
.sidebar-block[data-beliefs-animate].beliefs-enter {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}

/* =========================================================
   4. INSIGHTS Entrance stagger + hover lift + ghost shadow
   ========================================================= */
.featured-article[data-insights-animate],
.article-card[data-insights-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
  will-change: transform, opacity;
}

.featured-article[data-insights-animate].insights-enter,
.article-card[data-insights-animate].insights-enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.article-card {
  position: relative;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.article-card::before {
  content: '';
  position: absolute;
  inset: 6px 4px -4px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 250ms ease;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.article-card:hover::before {
  opacity: 1;
  transform: translateY(6px);
}

.featured-article {
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.featured-article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* =========================================================
   5. CONTACT Split panel reveal + form field animation
   ========================================================= */
.contact-split__form[data-contact-animate] {
  opacity: 0;
  transform: translateX(-20px);
  transition: none;
  will-change: transform, opacity;
}
.contact-split__form[data-contact-animate].contact-enter {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.contact-split__panel[data-contact-animate] {
  opacity: 0;
  transform: translateX(20px);
  transition: none;
  will-change: transform, opacity;
}
.contact-split__panel[data-contact-animate].contact-enter {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 500ms ease-out 150ms, transform 500ms ease-out 150ms;
}

.contact-split__form[data-contact-animate] .form__group {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
  will-change: transform, opacity;
}
.contact-split__form.contact-fields .form__group {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.contact-split__form.contact-fields .form__group:nth-child(1) { transition-delay: 0ms; }
.contact-split__form.contact-fields .form__group:nth-child(2) { transition-delay: 80ms; }
.contact-split__form.contact-fields .form__group:nth-child(3) { transition-delay: 160ms; }
.contact-split__form.contact-fields .form__group:nth-child(4) { transition-delay: 240ms; }
.contact-split__form.contact-fields .form__group:nth-child(5) { transition-delay: 320ms; }

.contact-split__panel[data-contact-animate] .contact-split__detail,
.contact-split__panel[data-contact-animate] .contact-split__socials,
.contact-split__panel[data-contact-animate] .contact-split__divider {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}
.contact-split__panel.contact-details .contact-split__detail,
.contact-split__panel.contact-details .contact-split__socials,
.contact-split__panel.contact-details .contact-split__divider {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.contact-split__panel.contact-details .contact-split__detail:nth-child(2) { transition-delay: 60ms; }
.contact-split__panel.contact-details .contact-split__detail:nth-child(3) { transition-delay: 120ms; }
.contact-split__panel.contact-details .contact-split__divider:nth-of-type(1) { transition-delay: 180ms; }
.contact-split__panel.contact-details .contact-split__socials { transition-delay: 200ms; }
.contact-split__panel.contact-details .contact-split__divider:nth-of-type(2) { transition-delay: 260ms; }

/* =========================================================
   RESPONSIVE & REDUCED MOTION for all section upgrades
   ========================================================= */
@media (max-width: 768px) {
  .arch-diagram[data-arch-animate] .arch-diagram__item {
    transform: translateY(8px);
  }
  .contact-split__form[data-contact-animate] {
    transform: translateY(16px);
  }
  .contact-split__panel[data-contact-animate] {
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-header[data-hero-animate] .page-header__eyebrow,
  .page-header[data-hero-animate] .page-header__heading,
  .page-header[data-hero-animate] .page-header__sub,
  .page-header[data-hero-animate] .page-header__heading::after,
  .arch-diagram[data-arch-animate] .arch-diagram__col,
  .arch-diagram[data-arch-animate] .arch-diagram__outputs,
  .arch-diagram[data-arch-animate] .arch-diagram__item,
  .arch-diagram[data-arch-animate] .arch-diagram__label,
  .arch-diagram[data-arch-animate] .arch-diagram__outputs .chip,
  .beliefs-card[data-beliefs-animate],
  .sidebar-block[data-beliefs-animate],
  .featured-article[data-insights-animate],
  .article-card[data-insights-animate],
  .contact-split__form[data-contact-animate],
  .contact-split__panel[data-contact-animate],
  .contact-split__form[data-contact-animate] .form__group,
  .contact-split__panel[data-contact-animate] .contact-split__detail,
  .contact-split__panel[data-contact-animate] .contact-split__socials,
  .contact-split__panel[data-contact-animate] .contact-split__divider {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .page-header[data-hero-animate] .page-header__heading::after {
    width: 64px !important;
  }
}

/* =========================================================
   About Page Redesigned Sections
   ========================================================= */

/* ----- Transformation Comparison (Section 2) ----- */
.abt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
  position: relative;
}

.abt-compare__col {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.abt-compare__before {
  background: var(--surface);
}

.abt-compare__after {
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.abt-compare__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Fragment chips */
.abt-frags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--space-4) 0;
  min-height: 180px;
  align-content: flex-start;
}

.abt-frag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  opacity: 0.75;
  transform: translate(var(--frag-x, 0), var(--frag-y, 0)) rotate(var(--frag-r, 0deg));
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform;
}

.abt-frag:hover {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

.abt-frag svg { color: var(--text-faint); flex-shrink: 0; }

/* Verdict cards */
.abt-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  margin-top: auto;
}

.abt-verdict--weak {
  background: var(--white);
  border: 1px solid var(--border);
}

.abt-verdict--weak svg { color: var(--text-faint); }

.abt-verdict--strong {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.abt-verdict__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.abt-verdict__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.abt-compare__before .abt-verdict { margin-top: 0; }

/* Structured answer card */
.abt-answer {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  flex: 1;
}

.abt-answer__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.abt-answer__response {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}

.abt-answer__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.abt-answer__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
}

.abt-answer__trace {
  font-size: 11px;
  color: var(--text-faint);
}

/* Animation phases for comparison */
.abt-compare[data-abt-animate] .abt-compare__before,
.abt-compare[data-abt-animate] .abt-compare__after {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
  will-change: transform, opacity;
}

.abt-compare[data-abt-animate] .abt-frag {
  opacity: 0;
  transform: translate(var(--frag-x, 0), calc(var(--frag-y, 0px) + 10px)) rotate(var(--frag-r, 0deg));
  transition: none;
}

.abt-compare[data-abt-animate] .abt-answer__source {
  opacity: 0;
  transform: translateX(6px);
  transition: none;
}

.abt-compare.abt-phase-chaos .abt-compare__before {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}

.abt-compare.abt-phase-chaos .abt-frag {
  opacity: 0.75;
  transform: translate(var(--frag-x, 0), var(--frag-y, 0)) rotate(var(--frag-r, 0deg));
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}

.abt-compare.abt-phase-chaos .abt-frag:nth-child(1) { transition-delay: 0ms; }
.abt-compare.abt-phase-chaos .abt-frag:nth-child(2) { transition-delay: 80ms; }
.abt-compare.abt-phase-chaos .abt-frag:nth-child(3) { transition-delay: 160ms; }
.abt-compare.abt-phase-chaos .abt-frag:nth-child(4) { transition-delay: 240ms; }
.abt-compare.abt-phase-chaos .abt-frag:nth-child(5) { transition-delay: 320ms; }
.abt-compare.abt-phase-chaos .abt-frag:nth-child(6) { transition-delay: 400ms; }

.abt-compare.abt-phase-resolve .abt-compare__after {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.abt-compare.abt-phase-sources .abt-answer__source {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.abt-compare.abt-phase-sources .abt-answer__source:nth-child(1) { transition-delay: 0ms; }
.abt-compare.abt-phase-sources .abt-answer__source:nth-child(2) { transition-delay: 80ms; }
.abt-compare.abt-phase-sources .abt-answer__source:nth-child(3) { transition-delay: 160ms; }
.abt-compare.abt-phase-sources .abt-answer__source:nth-child(4) { transition-delay: 240ms; }

/* ----- Expanding Cards (Section 3) ----- */
.abt-expand-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: box-shadow 250ms ease, border-color 250ms ease;
}

.abt-expand-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-mid);
}

.abt-expand-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.abt-expand-card__toggle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  transition: transform 250ms ease, background 250ms ease;
}

.abt-expand-card__toggle::before,
.abt-expand-card__toggle::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  border-radius: 1px;
}

.abt-expand-card__toggle::before {
  width: 10px;
  height: 1.5px;
}

.abt-expand-card__toggle::after {
  width: 1.5px;
  height: 10px;
  transition: transform 250ms ease;
}

.abt-expand-card.is-open .abt-expand-card__toggle {
  background: var(--accent-light);
}

.abt-expand-card.is-open .abt-expand-card__toggle::after {
  transform: rotate(90deg);
}

.abt-expand-card__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease, margin-top 350ms ease;
  margin-top: 0;
}

.abt-expand-card.is-open .abt-expand-card__detail {
  max-height: 400px;
  margin-top: 16px;
}

.abt-expand-card__caption {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.6;
}

/* Mini graph (ontology card) */
.abt-mini-graph {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.abt-node {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 14px;
  white-space: nowrap;
}

.abt-node--accent {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.abt-edge {
  width: 24px;
  height: 1px;
  background: var(--border-mid);
  flex-shrink: 0;
}

/* Resilience items (production card) */
.abt-resilience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--r-md);
}

.abt-res-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
}

.abt-res-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.abt-res-dot--green { background: var(--accent); }

/* QA demo (answers card) */
.abt-qa-demo {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--r-md);
}

.abt-qa-demo__q {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.abt-qa-demo__a {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 8px;
}

.abt-qa-demo__cite {
  font-size: 11px;
  color: var(--text-faint);
}

/* ----- Stack Flow (Section 4) ----- */
.abt-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: var(--space-6);
}

.abt-stack__tier {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  text-align: center;
  background: var(--white);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.abt-stack__tier:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.abt-stack__tier--sorraia {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.abt-stack__tier--sorraia .abt-stack__label { color: var(--white); }
.abt-stack__tier--sorraia .abt-stack__sub { color: rgba(255,255,255,0.6); }

.abt-stack__tier--sorraia:hover {
  box-shadow: 0 8px 28px rgba(10,15,30,0.25);
}

.abt-stack__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.abt-stack__sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.abt-stack__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.abt-stack__arrow {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

/* Stack animation */
.abt-stack__tier,
.abt-stack__arrow {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
  will-change: transform, opacity;
}

.abt-stack__tier.abt-stack-in,
.abt-stack__arrow.abt-stack-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.abt-stack__tier--sorraia.abt-stack-in {
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

/* ----- Scenario Cards (Section 5) ----- */
.abt-scenario {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.abt-scenario:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-4px);
}

.abt-scenario__q {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin: 12px 0 8px;
}

.abt-scenario__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease, padding-top 350ms ease;
  padding-top: 0;
}

.abt-scenario.is-open .abt-scenario__answer {
  max-height: 300px;
  padding-top: 12px;
}

.abt-scenario__response {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 12px;
}

.abt-scenario__drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.abt-scenario__driver {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 100px;
  padding: 3px 10px;
}

.abt-scenario__trace {
  font-size: 11px;
  color: var(--text-faint);
}

.abt-scenario__cta {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 12px;
  transition: color 200ms ease;
}

.abt-scenario.is-open .abt-scenario__cta {
  display: none;
}

/* ----- Steps (Section 6) ----- */
.abt-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-6);
}

.abt-step {
  flex: 1;
  text-align: center;
  padding: 0 var(--space-3);
}

.abt-step__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}

.abt-step__num {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.abt-step__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.abt-step__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

.abt-step__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.abt-step__connector {
  width: 48px;
  flex-shrink: 0;
  padding-top: 20px;
}

.abt-step__connector svg {
  width: 100%;
  height: auto;
}

/* Step animation */
.abt-step,
.abt-step__connector {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
  will-change: transform, opacity;
}

.abt-step.abt-step-in,
.abt-step__connector.abt-step-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}

/* ----- Big Statement (Section 7) ----- */
.abt-big-statement {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 640px;
  margin: 0 auto;
}

/* ----- About page responsive ----- */
@media (max-width: 768px) {
  .abt-compare {
    grid-template-columns: 1fr;
  }

  .abt-frags { min-height: auto; }

  .abt-steps {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .abt-step { padding: 0; }

  .abt-step__connector {
    transform: rotate(90deg);
    width: 48px;
    padding-top: 0;
  }

  .abt-resilience {
    grid-template-columns: 1fr;
  }

  .abt-big-statement {
    font-size: 22px;
  }

  .abt-stack__tier {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt-compare[data-abt-animate] .abt-compare__before,
  .abt-compare[data-abt-animate] .abt-compare__after,
  .abt-compare[data-abt-animate] .abt-frag,
  .abt-compare[data-abt-animate] .abt-answer__source,
  .abt-stack__tier,
  .abt-stack__arrow,
  .abt-step,
  .abt-step__connector {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   About Page V2 Refinements
   Constellation, hover cards, enhanced stack, CTA fix
   ========================================================= */

/* ----- Constellation Visualization ----- */
.abt-constellation {
  margin-top: var(--space-6);
}

.abt-constellation__field {
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  background: radial-gradient(ellipse at 50% 50%, rgba(29,78,216,0.03) 0%, transparent 70%);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.abt-cnode {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 16px;
  white-space: nowrap;
  opacity: 0;
  transition: left 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
              top 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.5s ease-out,
              box-shadow 0.6s ease,
              background 0.6s ease,
              color 0.6s ease,
              border-color 0.6s ease;
  will-change: left, top, opacity;
  z-index: 2;
}

.abt-cnode--center {
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
  opacity: 0 !important;
  z-index: 3;
}

.abt-constellation__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.abt-constellation__svg line {
  opacity: 0;
  transition: opacity 0.8s ease-out 0.6s;
}

.abt-constellation__text {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 16px;
  font-weight: 500;
  transition: opacity 0.5s ease-out;
}

.abt-constellation__text--before {
  color: var(--text-muted);
  opacity: 0;
}

.abt-constellation__text--after {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: var(--space-4);
}

/* Drift keyframes */
@keyframes cst-drift-1 { 0%,100%{transform:translate(-50%,-50%) translate(0,0)} 50%{transform:translate(-50%,-50%) translate(6px,-4px)} }
@keyframes cst-drift-2 { 0%,100%{transform:translate(-50%,-50%) translate(0,0)} 50%{transform:translate(-50%,-50%) translate(-5px,5px)} }
@keyframes cst-drift-3 { 0%,100%{transform:translate(-50%,-50%) translate(0,0)} 50%{transform:translate(-50%,-50%) translate(4px,6px)} }
@keyframes cst-drift-4 { 0%,100%{transform:translate(-50%,-50%) translate(0,0)} 50%{transform:translate(-50%,-50%) translate(-6px,-3px)} }
@keyframes cst-drift-5 { 0%,100%{transform:translate(-50%,-50%) translate(0,0)} 50%{transform:translate(-50%,-50%) translate(5px,-5px)} }
@keyframes cst-drift-6 { 0%,100%{transform:translate(-50%,-50%) translate(0,0)} 50%{transform:translate(-50%,-50%) translate(-4px,4px)} }

/* Phase: scatter nodes appear and drift */
.cst-phase-scatter .abt-cnode { opacity: 0.7; }
.cst-phase-scatter .abt-cnode:nth-child(1) { animation: cst-drift-1 5s ease-in-out infinite; transition-delay: 0ms; }
.cst-phase-scatter .abt-cnode:nth-child(2) { animation: cst-drift-2 5.5s ease-in-out infinite; transition-delay: 80ms; }
.cst-phase-scatter .abt-cnode:nth-child(3) { animation: cst-drift-3 6s ease-in-out infinite; transition-delay: 160ms; }
.cst-phase-scatter .abt-cnode:nth-child(4) { animation: cst-drift-4 5.2s ease-in-out infinite; transition-delay: 240ms; }
.cst-phase-scatter .abt-cnode:nth-child(5) { animation: cst-drift-5 5.8s ease-in-out infinite; transition-delay: 320ms; }
.cst-phase-scatter .abt-cnode:nth-child(6) { animation: cst-drift-6 6.2s ease-in-out infinite; transition-delay: 400ms; }
.cst-phase-scatter .abt-cnode--center { opacity: 0 !important; }
.cst-phase-scatter .abt-constellation__text--before { opacity: 1; }

/* Phase: converge nodes move to connected positions */
.cst-phase-converge .abt-cnode {
  left: var(--ex) !important;
  top: var(--ey) !important;
  opacity: 1;
  animation: none !important;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.08);
}

.cst-phase-converge .abt-cnode--center {
  opacity: 1 !important;
  box-shadow: 0 0 20px rgba(29,78,216,0.15), 0 0 0 3px rgba(29,78,216,0.1);
}

.cst-phase-converge .abt-constellation__svg line {
  opacity: 0.35;
}

.cst-phase-converge .abt-constellation__text--before {
  opacity: 0;
}

.cst-phase-converge .abt-constellation__text--after {
  opacity: 1;
  transition-delay: 1s;
}

/* Wrapper needs relative for absolute text */
.abt-constellation {
  position: relative;
}

/* ----- Enhanced hover for expand cards ----- */
@media (hover: hover) {
  .abt-expand-card[data-hover-expand]:hover .abt-expand-card__detail {
    max-height: 400px;
    margin-top: 16px;
  }
  .abt-expand-card[data-hover-expand]:hover .abt-expand-card__toggle {
    background: var(--accent-light);
  }
  .abt-expand-card[data-hover-expand]:hover .abt-expand-card__toggle::after {
    transform: rotate(90deg);
  }
}

/* ----- Enhanced Stack Flow ----- */
.abt-stack__thread {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 40px;
}

.abt-stack__thread-filament {
  display: block;
  width: 1px;
  height: 100%;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(29,78,216,0.04) 0%,
    rgba(29,78,216,0.18) 40%,
    rgba(29,78,216,0.18) 60%,
    rgba(29,78,216,0.04) 100%
  );
}

.abt-stack__thread-filament::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(29,78,216,0.22);
  box-shadow: 0 0 6px rgba(29,78,216,0.12);
}

.abt-stack__thread.abt-stack-in .abt-stack__thread-filament {
  animation: abt-thread-draw 600ms ease-out forwards;
}

@keyframes abt-thread-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.abt-stack__tier--glow.abt-stack-in {
  box-shadow: 0 0 32px rgba(29,78,216,0.12), 0 0 0 1px rgba(29,78,216,0.08);
}

.abt-stack__tagline {
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  text-align: center;
  margin-top: var(--space-3);
  letter-spacing: -0.01em;
}

/* ----- CTA Fix ----- */
.abt-cta-fixed {
  padding: var(--space-9) 0 !important;
  text-align: center;
}

.abt-cta__heading {
  font-size: 32px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--space-3);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.abt-cta__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto var(--space-5);
}

.abt-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.abt-cta__buttons .btn {
  width: auto;
}

.abt-cta__btn {
  padding: 14px 32px !important;
  font-size: 15px !important;
  border-radius: var(--r-sm) !important;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease !important;
}

.abt-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.btn--invert.abt-cta__btn {
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
}

.btn--invert.abt-cta__btn:hover {
  background: #F0F4FF;
}

.btn--ghost-light.abt-cta__btn {
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  background: transparent;
}

.btn--ghost-light.abt-cta__btn:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}

/* ----- Constellation responsive ----- */
@media (max-width: 768px) {
  .abt-constellation__field {
    padding-bottom: 80%;
  }
  .abt-cnode {
    font-size: 11px;
    padding: 5px 12px;
  }
  .abt-constellation__text--after {
    position: relative;
    font-size: 16px;
  }
  .abt-cta__heading {
    font-size: 24px;
  }
  .abt-cta__sub {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt-cnode {
    opacity: 1 !important;
    left: var(--ex) !important;
    top: var(--ey) !important;
    animation: none !important;
    transition: none !important;
  }
  .abt-cnode--center { opacity: 1 !important; }
  .abt-constellation__svg line { opacity: 0.35 !important; transition: none !important; }
  .abt-constellation__text--before { opacity: 0 !important; }
  .abt-constellation__text--after { opacity: 1 !important; transition: none !important; }
  .abt-flow-line { animation: none !important; }
}

/* =========================================================
   About Page Interactive Decision Panels (V3)
   ========================================================= */

.abt-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.abt-panels__col {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border-radius: var(--r-lg);
}

.abt-panels__left {
  background: var(--off-white, #F7F9FC);
  border: 1px solid var(--border);
  align-self: start;
  min-height: 420px;
}

.abt-panels__right {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
  padding: var(--space-5);
}

.abt-panels__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Fragments */
.abt-fragments {
  position: relative;
  height: 280px;
}

.abt-fragment {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 450;
  color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  will-change: transform, opacity;
}

.abt-fragment svg {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.abt-fragment:hover,
.abt-fragment.is-active {
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
  border-color: var(--accent);
  color: var(--text);
  animation-play-state: paused !important;
}
.abt-fragment:hover svg,
.abt-fragment.is-active svg { opacity: 0.8; }

.abt-fragment.is-linked {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(29,78,216,0.1);
  animation-play-state: paused !important;
}
.abt-fragment.is-linked svg { opacity: 0.8; }

/* Reasoning card */
.abt-reasoning {
  margin-bottom: var(--space-4);
  flex: 1;
}

.abt-reasoning__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.5;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.abt-reasoning__a {
  font-size: 14.5px;
  color: var(--text-secondary, #374151);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

/* Evidence chips */
.abt-evidence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-4);
}

.abt-evidence__chip {
  padding: 11px 16px;
  border-left: 2px solid rgba(29,78,216,0.3);
  background: transparent;
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  user-select: none;
}

.abt-evidence__chip:hover,
.abt-evidence__chip.is-active {
  background: rgba(29,78,216,0.06);
  transform: translateX(2px);
}

.abt-evidence__chip.is-linked {
  background: rgba(29,78,216,0.08);
  box-shadow: 0 0 0 1px rgba(29,78,216,0.12);
  border-left-color: var(--accent);
  transform: translateX(2px);
}

/* Sources used */
.abt-sources-used {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.abt-sources-used__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.abt-sources-used__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.abt-source-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
}

/* Verdict cards */
.abt-panels__verdict {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-top: var(--space-4);
}

.abt-panels__verdict svg { flex-shrink: 0; margin-top: 1px; }

.abt-panels__verdict--weak {
  background: rgba(0,0,0,0.025);
  border: 1px solid var(--border);
}

.abt-panels__verdict--strong {
  background: rgba(5,150,105,0.035);
  border: 1px solid rgba(5,150,105,0.12);
}

.abt-panels__verdict-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.abt-panels__verdict-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Progressive reveal animation ---- */
.abt-fragment {
  opacity: 0;
  transform: translateY(16px) scale(0.96) rotate(var(--fr, 0deg));
  transition: none;
}

.abt-reasoning__q,
.abt-reasoning__a,
.abt-evidence__chip,
.abt-sources-used,
.abt-panels__verdict {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms ease-out, transform 450ms ease-out,
              box-shadow 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.abt-panels--reveal .abt-fragment {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--fr, 0deg));
  transition: opacity 450ms cubic-bezier(0.25,0.46,0.45,0.94),
              transform 450ms cubic-bezier(0.25,0.46,0.45,0.94);
}

.abt-panels--reveal .abt-reasoning__q,
.abt-panels--reveal .abt-reasoning__a,
.abt-panels--reveal .abt-evidence__chip,
.abt-panels--reveal .abt-sources-used,
.abt-panels--reveal .abt-panels__verdict {
  opacity: 1;
  transform: translateY(0);
}

/* Floating idle animation */
@keyframes abt-float-1 { 0%,100% { transform: translateY(0) rotate(var(--fr, 0deg)); } 50% { transform: translateY(-6px) rotate(var(--fr, 0deg)); } }
@keyframes abt-float-2 { 0%,100% { transform: translateY(0) rotate(var(--fr, 0deg)); } 50% { transform: translateY(-5px) rotate(var(--fr, 0deg)); } }
@keyframes abt-float-3 { 0%,100% { transform: translateY(0) rotate(var(--fr, 0deg)); } 50% { transform: translateY(-7px) rotate(var(--fr, 0deg)); } }

.abt-panels--float .abt-fragment:nth-child(1) { animation: abt-float-1 4.2s ease-in-out infinite; }
.abt-panels--float .abt-fragment:nth-child(2) { animation: abt-float-2 5.1s ease-in-out infinite 0.3s; }
.abt-panels--float .abt-fragment:nth-child(3) { animation: abt-float-3 4.6s ease-in-out infinite 0.6s; }
.abt-panels--float .abt-fragment:nth-child(4) { animation: abt-float-1 5.4s ease-in-out infinite 0.15s; }
.abt-panels--float .abt-fragment:nth-child(5) { animation: abt-float-2 4.8s ease-in-out infinite 0.45s; }
.abt-panels--float .abt-fragment:nth-child(6) { animation: abt-float-3 5.0s ease-in-out infinite 0.7s; }

.abt-panels--float .abt-fragment {
  transition: box-shadow 200ms ease, border-color 200ms ease, color 200ms ease;
}

.abt-panels--reveal .abt-fragment:nth-child(1) { transition-delay: 0ms; }
.abt-panels--reveal .abt-fragment:nth-child(2) { transition-delay: 70ms; }
.abt-panels--reveal .abt-fragment:nth-child(3) { transition-delay: 140ms; }
.abt-panels--reveal .abt-fragment:nth-child(4) { transition-delay: 210ms; }
.abt-panels--reveal .abt-fragment:nth-child(5) { transition-delay: 280ms; }
.abt-panels--reveal .abt-fragment:nth-child(6) { transition-delay: 350ms; }

.abt-panels--reveal .abt-reasoning__q { transition-delay: 200ms; }
.abt-panels--reveal .abt-reasoning__a { transition-delay: 500ms; }

.abt-panels--reveal .abt-evidence__chip:nth-child(1) { transition-delay: 700ms; }
.abt-panels--reveal .abt-evidence__chip:nth-child(2) { transition-delay: 780ms; }
.abt-panels--reveal .abt-evidence__chip:nth-child(3) { transition-delay: 860ms; }
.abt-panels--reveal .abt-evidence__chip:nth-child(4) { transition-delay: 940ms; }

.abt-panels--reveal .abt-sources-used { transition-delay: 1050ms; }

.abt-panels--reveal .abt-panels__left .abt-panels__verdict { transition-delay: 450ms; }
.abt-panels--reveal .abt-panels__right .abt-panels__verdict { transition-delay: 1200ms; }

/* ---- CTA refinement ---- */
.abt-cta-fixed {
  padding: var(--space-9) 0 !important;
  text-align: center;
  background: var(--navy) !important;
}

.abt-cta__heading {
  font-size: 32px;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 auto var(--space-3);
  max-width: 680px;
}

.abt-cta__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto var(--space-5);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .abt-panels {
    grid-template-columns: 1fr;
  }
  .abt-panels__col {
    padding: var(--space-3);
  }
  .abt-fragment {
    font-size: 12px;
    padding: 6px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abt-fragment,
  .abt-reasoning__q,
  .abt-reasoning__a,
  .abt-evidence__chip,
  .abt-sources-used,
  .abt-panels__verdict {
    opacity: 1 !important;
    transform: translateY(0) rotate(var(--fr, 0deg)) !important;
    transition: box-shadow 200ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease !important;
    animation: none !important;
  }
}

/* =========================================================
   Beliefs Page V2 Redesign
   ========================================================= */

.blf-hero { padding-bottom: var(--space-7) !important; }
.blf-section { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

/* --- Grid layout --- */
.blf-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-4);
  align-items: start;
}

.blf-main > * + * { margin-top: var(--space-4); }

/* --- Principle cards --- */
.blf-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  position: relative;
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.blf-card:hover {
  box-shadow: 0 4px 20px rgba(15,23,42,0.06);
  transform: translateY(-2px);
}

.blf-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.blf-card__num {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(29,78,216,0.12);
  line-height: 1;
}

.blf-card__glyph { opacity: 0.35; }

.blf-card__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.blf-card__lead {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}

.blf-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blf-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}
.blf-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
}
.blf-card__list li:last-child { margin-bottom: 0; }

/* --- Proof drawer --- */
.blf-proof-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(29,78,216,0.04);
  border: 1px solid rgba(29,78,216,0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.blf-proof-toggle:hover {
  background: rgba(29,78,216,0.08);
  border-color: rgba(29,78,216,0.2);
}
.blf-proof-toggle svg {
  transition: transform 250ms ease;
}
.blf-proof-open .blf-proof-toggle svg {
  transform: rotate(180deg);
}
.blf-proof-open .blf-proof-toggle__label::after {
  content: none;
}

.blf-proof-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease, margin-top 300ms ease, opacity 300ms ease;
  opacity: 0;
  margin-top: 0;
}
.blf-proof-open .blf-proof-drawer {
  max-height: 360px;
  opacity: 1;
  margin-top: var(--space-3);
}

.blf-proof-drawer__kicker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.blf-trace { display: flex; flex-direction: column; gap: 0; }

.blf-trace__step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-left: 2px solid var(--border);
  margin-left: 6px;
  padding-left: 18px;
  position: relative;
}
.blf-trace__step:last-child { border-left-color: transparent; }

.blf-trace__dot {
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--white);
}
.blf-trace__dot--accent {
  background: var(--accent);
}

.blf-trace__system {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
}
.blf-trace__detail {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Side panels --- */
.blf-side > * + * { margin-top: var(--space-3); }

.blf-metrics-panel,
.blf-built-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  transition: box-shadow 300ms ease;
}
.blf-metrics-panel:hover,
.blf-built-panel:hover {
  box-shadow: 0 4px 20px rgba(15,23,42,0.05);
}

.blf-kicker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.blf-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.blf-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  background: var(--white);
  text-align: center;
}

.blf-metric__val {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.blf-metric__lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Built groups */
.blf-built-group + .blf-built-group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.blf-built-group__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.blf-built-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blf-built-list li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding: 4px 0;
  padding-left: 14px;
  position: relative;
}
.blf-built-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
}

/* --- Bridge --- */
.blf-bridge {
  padding: var(--space-5) 0;
  text-align: center;
}
.blf-bridge__text {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Ops cards --- */
.blf-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.blf-ops-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.blf-ops-card:hover {
  box-shadow: 0 4px 20px rgba(15,23,42,0.06);
  transform: translateY(-2px);
}

.blf-ops-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29,78,216,0.05);
  border-radius: 10px;
  margin-bottom: var(--space-3);
}

.blf-ops-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.blf-ops-card__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- CTA --- */
.blf-cta {
  padding: var(--space-8) 0 !important;
}
.blf-cta__heading {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--space-3);
}
.blf-cta__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
  margin-bottom: var(--space-5);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Animations --- */
.blf-card[data-beliefs-animate],
.blf-metrics-panel[data-beliefs-animate],
.blf-built-panel[data-beliefs-animate],
.blf-ops-card[data-beliefs-animate] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.blf-card[data-beliefs-animate].beliefs-enter,
.blf-metrics-panel[data-beliefs-animate].beliefs-enter,
.blf-built-panel[data-beliefs-animate].beliefs-enter,
.blf-ops-card[data-beliefs-animate].beliefs-enter {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .blf-grid {
    grid-template-columns: 1fr;
  }
  .blf-ops-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blf-card[data-beliefs-animate],
  .blf-metrics-panel[data-beliefs-animate],
  .blf-built-panel[data-beliefs-animate],
  .blf-ops-card[data-beliefs-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
  .blf-proof-drawer { transition: none !important; }
}

/* =========================================================
   Beliefs Page Interaction Upgrades
   ========================================================= */

/* --- Upgrade 1: Structure model drawer --- */
.blf-model {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 0 12px;
}
.blf-model__node {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: rgba(29,78,216,0.04);
  border: 1px solid rgba(29,78,216,0.12);
  border-radius: 6px;
  padding: 6px 16px;
  text-align: center;
}
.blf-model__node--root {
  background: rgba(29,78,216,0.08);
  border-color: rgba(29,78,216,0.18);
  font-weight: 600;
}
.blf-model__edge {
  font-size: 12px;
  color: var(--accent);
  opacity: 0.5;
  line-height: 1;
  padding: 2px 0;
}
.blf-model__row {
  display: flex;
  gap: 8px;
}
.blf-model__note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}

/* --- Upgrade 1b: Collapse drawer (Simplicity) --- */
.blf-collapse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.blf-collapse__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.blf-collapse__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  width: 100%;
  text-align: center;
  margin-bottom: 2px;
}
.blf-collapse__tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
}
.blf-collapse__arrow {
  opacity: 0.5;
}
.blf-collapse__output {
  text-align: center;
}
.blf-collapse__answer {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto;
  background: rgba(29,78,216,0.03);
  border: 1px solid rgba(29,78,216,0.1);
  border-radius: 6px;
  padding: 10px 14px;
}

/* --- Upgrade 2: Trace cross-highlighting --- */
.blf-trace__step[data-trace-hl] {
  transition: opacity 200ms ease, background 200ms ease;
  border-radius: 6px;
  margin-left: 6px;
}
.blf-trace__step.blf-trace--hl {
  background: rgba(29,78,216,0.03);
  border-left-color: var(--accent);
}
.blf-trace__step.blf-trace--dim {
  opacity: 0.35;
}

/* --- Upgrade 3: Metric tile stagger reveal --- */
.blf-metric {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transition-delay: calc(var(--mi, 0) * 90ms);
}
.blf-metric--visible,
.blf-metric.blf-metric--visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Upgrade 4: Card hover already exists, ensure ops cards too --- */
.blf-ops-card {
  transition: box-shadow 300ms ease, transform 300ms ease, border-color 300ms ease;
}
.blf-ops-card:hover {
  border-color: rgba(29,78,216,0.15);
}
.blf-card:hover {
  border-color: rgba(29,78,216,0.12);
}

/* --- Reduced motion overrides --- */
@media (prefers-reduced-motion: reduce) {
  .blf-metric {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .blf-trace__step[data-trace-hl] {
    transition: none !important;
  }
}

/* =========================================================
   INSIGHTS PAGE Elevated Editorial Design
   ========================================================= */

/* --- Section spacing --- */
.ins-section { padding-top: var(--space-6); padding-bottom: var(--space-5); }

/* --- Featured Article --- */
.ins-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}
.ins-featured:hover {
  border-color: rgba(29,78,216,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.ins-featured__visual {
  background: linear-gradient(145deg, #f0f4f8 0%, #e2e8f0 40%, #dfe6ee 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  min-height: 380px;
}

.ins-featured__visual-inner { width: 100%; max-width: 360px; }

.ins-featured__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.ins-featured__flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ins-featured__flow-ring {
  width: 56px;
  height: 56px;
  color: #94a3b8;
  transition: transform 400ms ease, color 400ms ease;
}
.ins-featured__flow-ring--accent {
  color: var(--accent, #1D4ED8);
}
.ins-featured__flow-ring svg { width: 100%; height: 100%; }
.ins-featured__flow-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  transition: color 300ms ease;
}
.ins-featured__flow-stage--active .ins-featured__flow-label {
  color: var(--accent, #1D4ED8);
}
.ins-featured__flow-sub {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.ins-featured__flow-connector {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-bottom: 36px;
}
.ins-featured__flow-connector svg { width: 100%; height: 24px; }

.ins-featured:hover .ins-featured__flow-ring--accent {
  transform: scale(1.08);
}
.ins-featured:hover .ins-featured__flow-stage--active .ins-featured__flow-label {
  color: var(--accent, #1D4ED8);
}

@keyframes ins-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}
.ins-featured__flow-ring--accent svg circle:last-child {
  animation: ins-pulse 3s ease-in-out infinite;
}

.ins-featured__body {
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ins-featured__meta {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ins-featured__date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 16px;
}

.ins-featured__title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.ins-featured__title a { color: inherit; text-decoration: none; }
.ins-featured__title a:hover { color: var(--accent); }

.ins-featured__excerpt {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* --- Tags --- */
.ins-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1.4;
}
.ins-tag--accent {
  background: rgba(29,78,216,0.06);
  color: var(--accent);
}
.ins-tag--muted {
  background: rgba(15,23,42,0.04);
  color: var(--text-faint);
}

/* --- Read Link --- */
.ins-read-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 200ms ease;
}
.ins-read-link:hover { gap: 10px; }
.ins-read-link__arrow {
  transition: transform 200ms ease;
}
.ins-read-link:hover .ins-read-link__arrow {
  transform: translateX(2px);
}

/* --- Category Filters --- */
.ins-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--space-5);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.ins-filter {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all 180ms ease;
}
.ins-filter:hover {
  background: rgba(15,23,42,0.03);
  color: var(--text);
}
.ins-filter.is-active {
  background: rgba(29,78,216,0.06);
  color: var(--accent);
  border-color: rgba(29,78,216,0.12);
}

/* --- Article Grid --- */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* --- Article Card --- */
.ins-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
  overflow: hidden;
}
.ins-card:hover {
  border-color: rgba(29,78,216,0.14);
  box-shadow: 0 16px 48px rgba(0,0,0,0.06);
  transform: translateY(-3px);
}

.ins-card__inner {
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ins-card__meta {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ins-card__date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.ins-card__title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.ins-card__title a { color: inherit; text-decoration: none; }
.ins-card__title a:hover { color: var(--accent); }

.ins-card__excerpt {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 20px;
  flex: 1;
}

/* --- Editorial Bridge --- */
.ins-bridge {
  padding: var(--space-6) 0;
  text-align: center;
}
.ins-bridge__text {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  color: var(--text-secondary, var(--text));
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.ins-bridge__text::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,78,216,0.3), transparent);
  margin: 0 auto var(--space-4);
}

/* --- Newsletter / Subscribe --- */
.ins-subscribe {
  background: var(--navy);
  padding: var(--space-7) 0;
  text-align: center;
}

.ins-subscribe h2 {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.ins-subscribe__desc {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-5);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.ins-subscribe__form {
  display: flex;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}

.ins-subscribe__input {
  flex: 1;
  padding: 13px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.ins-subscribe__input::placeholder { color: rgba(255,255,255,0.28); }
.ins-subscribe__input:focus {
  border-color: rgba(59,130,246,0.5);
  background: rgba(255,255,255,0.08);
}

.ins-subscribe__btn {
  padding: 13px 28px;
  border-radius: 6px;
  border: none;
  background: #fff;
  color: var(--navy);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
  white-space: nowrap;
}
.ins-subscribe__btn:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

/* --- Insights entrance animation --- */
.ins-featured[data-insights-animate],
.ins-card[data-insights-animate],
.ins-filters[data-insights-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: none;
  will-change: transform, opacity;
}
.ins-featured[data-insights-animate].insights-enter,
.ins-card[data-insights-animate].insights-enter,
.ins-filters[data-insights-animate].insights-enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .ins-featured { grid-template-columns: 1fr; }
  .ins-featured__visual { min-height: 240px; }
  .ins-featured__body { padding: 28px 24px; }
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ins-grid { grid-template-columns: 1fr; }
  .ins-featured__title { font-size: 22px; }
  .ins-subscribe__form { flex-direction: column; }
  .ins-filters { gap: 6px; }
  .ins-filter { padding: 6px 12px; font-size: 12px; }
}

/* ───────────────────────────────────────────────
   CONTACT PAGE ELEVATED SECTIONS
   ─────────────────────────────────────────────── */

.reveal--delay-1 { transition-delay: 120ms; }

.ct-trust {
  padding: var(--space-6) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ct-trust__text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.ct-qualify {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.ct-qualify__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.ct-qualify__item {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.ct-qualify__item:hover {
  border-color: rgba(29, 78, 216, 0.2);
  box-shadow: 0 2px 12px rgba(29, 78, 216, 0.04);
}

.ct-qualify__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.ct-qualify__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.ct-location__sub {
  font-size: 15px;
  color: var(--muted);
  margin-top: -4px;
  margin-bottom: var(--space-5);
}

.faq-question {
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

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

.faq-answer__inner {
  line-height: 1.7;
  color: var(--muted);
}

.ct-closing {
  padding: var(--space-7) 0;
  background: var(--dark);
  text-align: center;
}

.ct-closing__text {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 540px;
  margin: 0 auto;
}

.ct-closing__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 200ms ease;
}

.ct-closing__link:hover {
  opacity: 0.8;
}

.form__input,
.form__textarea {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
  outline: none;
}

.btn--dark {
  transition: background 200ms ease, transform 120ms ease, box-shadow 200ms ease;
}

.btn--dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.btn--dark:active {
  transform: translateY(0);
}

.btn--ghost-light {
  transition: background 200ms ease, border-color 200ms ease, transform 120ms ease;
}

.btn--ghost-light:hover {
  transform: translateY(-1px);
}

/* Responsive Contact qualify grid */
@media (max-width: 900px) {
  .ct-qualify__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ct-qualify__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .ct-trust__text { font-size: 14px; padding: 0 var(--space-3); }
  .ct-closing__text { font-size: 15px; padding: 0 var(--space-3); }
}

/* =========================================================
   HOMEPAGE SVG ANIMATIONS
   ========================================================= */

/* --- Iceberg depth reveal --- */
#about .feature-split__image {
  position: relative;
}
#about .feature-split__image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, var(--bg, #fff) 70%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s ease-in-out 0.4s;
}
#about .feature-split__image.is-visible::after {
  opacity: 0;
}

/* --- Hero feature card icon stroke draw --- */
.hero-feature-card svg {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.9s ease-in-out;
}
.hero-feature-card.hero-visible svg {
  stroke-dashoffset: 0;
}
.hero-feature-card.hero-visible:nth-child(1) svg { transition-delay: 0.6s; }
.hero-feature-card.hero-visible:nth-child(2) svg { transition-delay: 0.8s; }
.hero-feature-card.hero-visible:nth-child(3) svg { transition-delay: 1.0s; }

/* --- How-It-Works pipeline card icon stroke draw --- */
.stagger--arch .why-card svg {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.8s ease-in-out;
}
.stagger--arch .why-card.is-visible svg {
  stroke-dashoffset: 0;
}
.stagger--arch .why-card:nth-child(1).is-visible svg { transition-delay: 0.1s; }
.stagger--arch .why-card:nth-child(2).is-visible svg { transition-delay: 0.25s; }
.stagger--arch .why-card:nth-child(3).is-visible svg { transition-delay: 0.4s; }
.stagger--arch .why-card:nth-child(4).is-visible svg { transition-delay: 0.55s; }

/* --- Pipeline connector line --- */
.pipeline-connector {
  position: relative;
  height: 2px;
  margin: -12px auto 0;
  max-width: 80%;
}
.pipeline-connector__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pipeline-connector__line line {
  stroke: var(--accent, #1D4ED8);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s ease-in-out 0.3s;
}
.pipeline-connector.is-visible .pipeline-connector__line line {
  stroke-dashoffset: 0;
}

/* --- Pipeline flow dots --- */
@keyframes flow-dot {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.pipeline-connector__dot {
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #1D4ED8);
  opacity: 0;
}
.pipeline-connector.is-visible .pipeline-connector__dot {
  animation: flow-dot 3s ease-in-out 1.5s 1 forwards;
}

/* --- Why-card icon subtle pulse on hover --- */
.why-card__icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover .why-card__icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(29,78,216,.08);
}

/* --- OS Comparison item entrance --- */
.os-comparison__item {
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.os-comparison.is-visible .os-comparison__item:nth-child(1) { transition-delay: 0.1s; }
.os-comparison.is-visible .os-comparison__item:nth-child(2) { transition-delay: 0.3s; }
.os-comparison.is-visible .os-comparison__item:nth-child(3) { transition-delay: 0.5s; }

/* --- OS Comparison hover interactions --- */
.os-comparison__grid:hover .os-comparison__item {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.os-comparison__grid:hover .os-comparison__item:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.os-comparison__grid:hover .os-comparison__item--highlight {
  opacity: 0.85;
}

/* --- Outcomes principle number draw-in --- */
.principle__num {
  transition: color 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.principle.is-visible .principle__num {
  color: var(--accent, #1D4ED8);
}
.principle:hover .principle__num {
  transform: scale(1.1);
}

/* --- Pillar hover interaction --- */
.pillar {
  transition: transform 0.3s ease;
}
.pillar:hover {
  transform: translateY(-2px);
}
.pillar__num {
  transition: color 0.3s ease, transform 0.3s ease;
}
.pillar:hover .pillar__num {
  color: var(--accent, #1D4ED8);
  transform: scale(1.1);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero-feature-card svg,
  .stagger--arch .why-card svg,
  .pipeline-connector__line line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .pipeline-connector__dot { animation: none !important; }
  #about .feature-split__image::after { transition: none !important; opacity: 0 !important; }
}

/* =========================================================
   HOMEPAGE REFINEMENT Narrative Bridges & Pacing
   ========================================================= */

/* --- Narrative bridge lines --- */
.narrative-bridge {
  padding: 48px 0;
  text-align: center;
}
.narrative-bridge__text {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-style: italic;
  font-weight: 300;
  color: var(--muted, #6B7280);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
  letter-spacing: 0.01em;
  position: relative;
}
.narrative-bridge__text::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--accent, #1D4ED8);
  margin: 0 auto 18px;
  opacity: 0.4;
}
.narrative-bridge--dark .narrative-bridge__text {
  color: var(--text-secondary, #9CA3AF);
}

/* --- Section breathe extra vertical space for the "aha" moment --- */
.section--breathe {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* --- Feature split body emphasis line --- */
.feature-split__body--em {
  font-weight: 500;
  color: var(--text, #111827);
  margin-top: 8px;
}

/* --- Mission section tightening --- */
.mission__body--em {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}






/* =============================================
   SIGNATURE The thesis (Insights)
   ============================================= */
.section--signature-ins {
  padding-top: 96px;
  padding-bottom: 96px;
  background: var(--white, #fff);
}

.ths-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ths-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 120px;
}

.ths-stage__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.ths-stage__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
}

.ths-stage--active .ths-stage__label {
  color: var(--accent, #1D4ED8);
}

.ths-stage__sub {
  font-size: 12.5px;
  color: var(--text-secondary, #6B7280);
  line-height: 1.4;
  max-width: 140px;
}

.ths-arrow {
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 40px;
}

.ths-microcopy {
  text-align: center;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: 450;
  color: var(--text, #111827);
  margin-top: 56px;
  font-style: italic;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* --- Responsive: THS section --- */
@media (max-width: 540px) {
  .ths-flow {
    flex-direction: column;
    gap: 8px;
  }
  .ths-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
    margin-bottom: 0;
  }
  .ths-stage {
    min-width: auto;
  }
  .section--signature-ins {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =============================================
   SIGNATURE These aren't principles (Beliefs)
   ============================================= */
.section--signature-blf {
  padding-top: 96px;
  padding-bottom: 96px;
  background: var(--bg-alt, #F9FAFB);
}

.enf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.enf-item {
  text-align: center;
  padding: 32px 24px;
  border-radius: 12px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E5E7EB);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.enf-item:hover {
  border-color: var(--accent, #1D4ED8);
  box-shadow: 0 4px 20px rgba(29,78,216,0.06);
}

.enf-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(29,78,216,0.06);
  margin-bottom: 20px;
}

.enf-item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 10px;
}

.enf-item__desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary, #6B7280);
}

.enf-closing {
  text-align: center;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 450;
  color: var(--text-secondary, #6B7280);
  margin-top: 48px;
  font-style: italic;
}

/* --- Responsive: ENF section --- */
@media (max-width: 768px) {
  .enf-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .enf-item {
    padding: 28px 28px;
  }
  .section--signature-blf {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =============================================
   SIGNATURE Inside the intelligence layer (Platform)
   ============================================= */
.section--signature-plat {
  padding-top: 96px;
  padding-bottom: 96px;
}

.ial-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.ial-tier {
  width: 100%;
  padding: 28px 24px;
  border-radius: 12px;
  border: 1px solid var(--border, #E5E7EB);
  text-align: center;
}

.ial-tier--top,
.ial-tier--bottom {
  background: var(--bg-alt, #F9FAFB);
}

.ial-tier--core {
  background: var(--white, #fff);
  border-color: var(--accent, #1D4ED8);
  border-width: 1.5px;
  box-shadow: 0 4px 24px rgba(29,78,216,0.06);
  padding: 32px 28px;
}

.ial-tier__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 16px;
}

.ial-tier__label--accent {
  color: var(--accent, #1D4ED8);
}

.ial-tier__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ial-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}

.ial-connector__line {
  display: block;
  width: 1.5px;
  height: 24px;
  background: var(--accent, #1D4ED8);
  opacity: 0.3;
}

.ial-connector__chevron {
  margin-top: 2px;
}

.ial-capabilities {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 320px;
  margin: 0 auto;
  text-align: left;
}

.ial-cap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ial-cap__marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #1D4ED8);
}

.ial-cap__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #111827);
  line-height: 1.4;
}

.ial-closing {
  text-align: center;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 450;
  color: var(--text-secondary, #6B7280);
  margin-top: 48px;
  font-style: italic;
}

/* --- Responsive: IAL section --- */
@media (max-width: 540px) {
  .ial-stack {
    max-width: 100%;
  }
  .ial-tier {
    padding: 28px 28px;
  }
  .ial-tier--core {
    padding: 28px 20px;
  }
  .section--signature-plat {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =============================================
   SIGNATURE Why this needed to exist (About)
   ============================================= */
.section--signature-abt {
  padding-top: 96px;
  padding-bottom: 96px;
}

.wte-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.wte-col {
  padding: 36px 32px;
  border-radius: 12px;
  border: 1px solid var(--border, #E5E7EB);
  text-align: left;
}

.wte-col--before {
  background: var(--bg-alt, #F9FAFB);
}

.wte-col--after {
  background: var(--white, #fff);
  border-color: var(--accent, #1D4ED8);
  border-width: 1.5px;
  box-shadow: 0 4px 24px rgba(29,78,216,0.06);
}

.wte-col__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 28px;
}

.wte-col__label--accent {
  color: var(--accent, #1D4ED8);
}

.wte-items {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wte-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.wte-item__marker {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}

.wte-item__marker--weak {
  background: var(--text-muted, #9CA3AF);
  opacity: 0.4;
}

.wte-item__marker--strong {
  background: var(--accent, #1D4ED8);
}

.wte-item__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 4px;
}

.wte-item__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary, #6B7280);
}

.wte-col__verdict {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #E5E7EB);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
}

.wte-col__verdict--strong {
  color: var(--accent, #1D4ED8);
  border-top-color: rgba(29,78,216,0.15);
}

.wte-closing {
  text-align: center;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 450;
  color: var(--text-secondary, #6B7280);
  margin-top: 48px;
  font-style: italic;
}

/* --- Responsive: WTE section --- */
@media (max-width: 768px) {
  .wte-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .wte-col {
    padding: 28px 24px;
  }
  .section--signature-abt {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =============================================
   SIGNATURE From question to decision
   ============================================= */
.section--signature {
  background: var(--bg-alt, #F9FAFB);
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}

.q2d-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  counter-reset: q2d-step;
}

.q2d-step {
  position: relative;
  padding: 32px 28px;
  border-left: 1px solid var(--border, #E5E7EB);
}

.q2d-step:first-child {
  border-left: none;
}

.q2d-step__number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent, #1D4ED8);
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}

.q2d-step__connector {
  position: absolute;
  top: 40px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white, #fff);
  border: 2px solid var(--accent, #1D4ED8);
  z-index: 2;
}

.q2d-step:last-child .q2d-step__connector {
  display: none;
}

.q2d-step__title {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 10px;
  line-height: 1.35;
}

.q2d-step__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary, #6B7280);
  max-width: 280px;
}

.q2d-summary {
  text-align: center;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 450;
  color: var(--text-secondary, #6B7280);
  margin-top: 48px;
  font-style: italic;
}

/* --- Responsive: Q2D section --- */
@media (max-width: 900px) {
  .q2d-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .q2d-step {
    padding: 28px 28px;
  }
  .q2d-step:nth-child(1),
  .q2d-step:nth-child(3) {
    border-left: none;
  }
  .q2d-step:nth-child(3),
  .q2d-step:nth-child(4) {
    border-top: 1px solid var(--border, #E5E7EB);
  }
  .q2d-step__connector {
    display: none;
  }
}

@media (max-width: 540px) {
  .q2d-steps {
    grid-template-columns: 1fr;
  }
  .q2d-step {
    border-left: 3px solid var(--accent, #1D4ED8);
    border-top: none !important;
    padding: 20px 20px 20px 24px;
  }
  .q2d-step:first-child {
    border-left: 3px solid var(--accent, #1D4ED8);
  }
  .q2d-step__desc {
    max-width: none;
  }
  .q2d-step__connector {
    display: none;
  }
  .section--signature {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* =============================================
   SIGNATURE What happens next (Contact)
   ============================================= */
.section--signature-ct {
  padding-top: 96px;
  padding-bottom: 96px;
}

.whn-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-5);
}

.whn-step {
  flex: 0 1 280px;
  text-align: center;
  padding: 0 24px;
}

.whn-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent, #1D4ED8);
  color: var(--accent, #1D4ED8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.whn-step__title {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 600;
  color: var(--text, #111827);
  margin-bottom: 10px;
  line-height: 1.4;
}

.whn-step__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary, #6B7280);
}

.whn-step__connector {
  display: flex;
  align-items: center;
  padding-top: 20px;
  flex-shrink: 0;
}

.whn-step__line {
  display: block;
  width: 48px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--border, #E5E7EB) 0%, var(--accent, #1D4ED8) 50%, var(--border, #E5E7EB) 100%);
  opacity: 0.5;
}

.whn-closing {
  text-align: center;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 450;
  color: var(--text-secondary, #6B7280);
  margin-top: 48px;
  font-style: italic;
}

/* --- Responsive: WHN section --- */
@media (max-width: 768px) {
  .whn-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .whn-step {
    flex: none;
    max-width: 340px;
    padding: 0;
    margin-bottom: 8px;
  }
  .whn-step__connector {
    justify-content: center;
    padding: 12px 0;
  }
  .whn-step__line {
    width: 1.5px;
    height: 32px;
    background: linear-gradient(180deg, var(--border, #E5E7EB) 0%, var(--accent, #1D4ED8) 50%, var(--border, #E5E7EB) 100%);
  }
  .whn-closing {
    margin-top: 36px;
  }
  .section--signature-ct {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* --- Responsive bridges --- */
@media (max-width: 600px) {
  .narrative-bridge { padding: 32px 16px; }
  .section--breathe { padding-top: 64px; padding-bottom: 64px; }
}

/* =============================================
   HOMEPAGE REFINEMENTS - spacing, hover, polish
   ============================================= */

/* Increased section spacing (~10-15% more breathing room) */
.section--breathe { padding-top: 112px; padding-bottom: 112px; }
.mission { padding-top: 104px; padding-bottom: 104px; }

/* Enhanced card hover: lift + subtle border glow */
.card-b:hover,
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(15,23,42,0.08), 0 0 0 1px rgba(29,78,216,0.1);
  border-color: rgba(29,78,216,0.15);
}

.pillar:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,0.06), 0 0 0 1px rgba(29,78,216,0.1);
  border-color: rgba(29,78,216,0.15);
}

.principle:hover {
  box-shadow: 0 6px 20px rgba(15,23,42,0.05), 0 0 0 1px rgba(29,78,216,0.08);
}

/* Narrative bridge increased vertical spacing */
.narrative-bridge {
  padding: 44px 0;
}

/* OS comparison section increased spacing */
.os-comparison {
  margin-top: 64px;
}

/* Tech partner increased spacing */
.tech-partner {
  margin-top: 56px;
}

/* Quote section breathing room */
.quote-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

@media (max-width: 768px) {
  .section--breathe { padding-top: 80px; padding-bottom: 80px; }
  .mission { padding-top: 72px; padding-bottom: 72px; }
  .narrative-bridge { padding: 32px 0; }
}

/* =============================================
   ABOUT PAGE REFINEMENTS - contrast, whitespace, narrative tone
   ============================================= */

/* Increase signature section whitespace */
.section--signature-abt {
  padding-top: 112px;
  padding-bottom: 112px;
}

/* Left panel: softer, more muted */
.wte-col--before {
  background: #F4F5F7;
  border-color: #E0E3E8;
  opacity: 0.92;
}

/* Right panel: sharper, higher contrast */
.wte-col--after {
  background: #fff;
  border-color: var(--accent, #1D4ED8);
  border-width: 2px;
  box-shadow: 0 6px 32px rgba(29,78,216,0.08);
}

/* Left panel text slightly more muted */
.wte-col--before .wte-item__title {
  color: var(--text-mid, #374151);
}
.wte-col--before .wte-item__desc {
  color: var(--text-faint, #9CA3AF);
}

/* Right panel text sharper */
.wte-col--after .wte-item__title {
  color: var(--text, #111827);
  font-weight: 600;
}
.wte-col--after .wte-item__desc {
  color: var(--text-mid, #374151);
}

/* Decision panels: softer left, sharper right */
.abt-panels__left {
  opacity: 0.88;
  border-color: #E0E3E8;
}
.abt-panels__right {
  box-shadow: 0 4px 20px rgba(15,23,42,0.06), 0 0 0 1px rgba(29,78,216,0.08);
}

/* About page expand cards: subtle hover */
.abt-expand-card {
  transition: all 0.25s ease;
}
.abt-expand-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,0.06), 0 0 0 1px rgba(29,78,216,0.08);
}

/* About page scenario cards: hover lift */
.abt-scenario {
  transition: all 0.25s ease;
}
.abt-scenario:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(15,23,42,0.06);
}

/* About page sections: increased breathing room */
.section--signature-abt + .narrative-bridge {
  padding: 48px 0;
}

/* Vision section: more whitespace */
.abt-big-statement {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .section--signature-abt {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .wte-col--before { opacity: 1; }
  .abt-panels__left { opacity: 1; }
}

/* =============================================
   PLATFORM PAGE REFINEMENTS - metrics, architecture, interactions
   ============================================= */

/* Metrics: larger numbers, more spacing */
.platform-metric {
  padding: 32px 28px;
}
.platform-metric__value {
  font-size: clamp(42px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.platform-metrics {
  gap: 28px;
  margin-top: 48px;
}

/* Metrics hover: blue border glow */
.platform-metric:hover {
  border-color: rgba(29,78,216,0.25);
  box-shadow: 0 12px 36px rgba(15,23,42,0.08), 0 0 0 1px rgba(29,78,216,0.1);
}

/* Architecture center column: subtle glow */
.arch-diagram__col--center {
  box-shadow: 0 0 40px rgba(29,78,216,0.12), 0 0 80px rgba(29,78,216,0.06);
}

/* Architecture items: hover highlight */
.arch-diagram__item {
  transition: all 0.2s ease;
}
.arch-diagram__item:hover {
  border-color: rgba(29,78,216,0.2);
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  transform: translateY(-1px);
}
.arch-diagram__col--center .arch-diagram__item:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
}

/* Module cards: enhanced hover */
.module-card:hover {
  box-shadow: 0 12px 36px rgba(15,23,42,0.08), 0 0 0 1px rgba(29,78,216,0.1);
  border-color: rgba(29,78,216,0.15);
}

/* Ontology cards: enhanced hover */
.ontology-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,0.06), 0 0 0 1px rgba(29,78,216,0.08);
  border-color: rgba(29,78,216,0.15);
}

/* Use case cards: hover lift */
.usecase-card {
  transition: all 0.25s ease;
}
.usecase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(15,23,42,0.06), 0 0 0 1px rgba(29,78,216,0.08);
}

/* Callout bar items: hover */
.callout-bar__item {
  transition: all 0.2s ease;
}
.callout-bar__item:hover {
  box-shadow: 0 4px 16px rgba(15,23,42,0.05);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .platform-metric__value {
    font-size: 36px;
  }
  .platform-metrics {
    gap: 20px;
    margin-top: 32px;
  }
}

/* =============================================
   BELIEFS PAGE REFINEMENTS - interaction, depth, motion
   ============================================= */

/* Card hover: stronger lift + blue accent border */
.blf-card:hover {
  box-shadow: 0 8px 32px rgba(15,23,42,0.08), 0 0 0 1px rgba(29,78,216,0.1);
  transform: translateY(-3px);
  border-color: rgba(29,78,216,0.15);
}

/* Implication line: hidden by default, revealed on hover */
.blf-card__implication {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--accent, #1D4ED8);
  padding-left: 14px;
  border-left: 2px solid var(--accent, #1D4ED8);
  margin-top: 0;
  transition: max-height 350ms ease, opacity 300ms ease 50ms, margin-top 300ms ease;
}
.blf-card:hover .blf-card__implication {
  max-height: 80px;
  opacity: 0.85;
  margin-top: 12px;
}
.blf-card__impl-label {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 2px;
  opacity: 0.65;
}

/* Enhanced metric tile: larger numbers, hover emphasis */
.blf-metric__val {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.blf-metric {
  transition: background 200ms ease, box-shadow 200ms ease;
  cursor: default;
}
.blf-metric:hover {
  background: rgba(29,78,216,0.03);
  box-shadow: inset 0 0 0 1px rgba(29,78,216,0.08);
}
.blf-metric:hover .blf-metric__val {
  color: var(--accent, #1D4ED8);
}
.blf-metric__val {
  transition: color 200ms ease;
}

/* Metric panel: subtle blue top-border accent */
.blf-metrics-panel {
  border-top: 2px solid var(--accent, #1D4ED8);
}

/* Ops cards: enhanced hover with blue accent */
.blf-ops-card:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,0.07), 0 0 0 1px rgba(29,78,216,0.08);
  transform: translateY(-3px);
  border-color: rgba(29,78,216,0.12);
}

/* Signature section enforced items: hover lift */
.enf-item {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.enf-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(15,23,42,0.06);
  border-color: rgba(29,78,216,0.12);
}

/* Trace steps: smoother highlight */
.blf-trace__step {
  transition: opacity 200ms ease, background 200ms ease;
  border-radius: 6px;
}
.blf-trace--hl {
  background: rgba(29,78,216,0.04);
}
.blf-trace--dim {
  opacity: 0.4;
}

/* Card number: subtle left-accent on hover */
.blf-card__num {
  transition: color 300ms ease;
}
.blf-card:hover .blf-card__num {
  color: rgba(29,78,216,0.25);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .blf-card__implication {
    font-size: 13px;
  }
  .blf-metric__val {
    font-size: 22px;
  }
}

/* =============================================
   INSIGHTS PAGE REFINEMENTS - editorial, premium
   ============================================= */

/* Featured article: hover zoom on visual */
.ins-featured__visual {
  overflow: hidden;
  transition: transform 400ms ease;
}
.ins-featured__visual-inner {
  transition: transform 500ms ease;
}
.ins-featured:hover .ins-featured__visual-inner {
  transform: scale(1.04);
}

/* Featured: gradient overlay for readability */
.ins-featured__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(29,78,216,0.04) 100%);
  pointer-events: none;
  z-index: 1;
}
.ins-featured__visual {
  position: relative;
}

/* Featured title: larger, better spacing */
.ins-featured__title {
  font-size: 30px;
  line-height: 1.22;
  margin-bottom: 20px;
}
.ins-featured__excerpt {
  margin-bottom: 28px;
}
.ins-featured__date {
  margin-bottom: 20px;
}

/* Article card: enhanced hover with title underline */
.ins-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.07), 0 0 0 1px rgba(29,78,216,0.08);
  transform: translateY(-4px);
}
.ins-card__title a {
  transition: color 200ms ease;
  text-decoration: none;
  background-image: linear-gradient(var(--accent, #1D4ED8), var(--accent, #1D4ED8));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 300ms ease, color 200ms ease;
}
.ins-card:hover .ins-card__title a {
  background-size: 100% 1px;
  color: var(--accent, #1D4ED8);
}

/* Card typography: better spacing */
.ins-card__title {
  margin-bottom: 16px;
}
.ins-card__date {
  margin-bottom: 16px;
}
.ins-card__excerpt {
  line-height: 1.7;
}

/* Staggered card load animation */
.ins-card[data-insights-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.ins-card[data-insights-animate].insights-enter {
  opacity: 1;
  transform: translateY(0);
}
.ins-card[data-insights-animate]:nth-child(1) { transition-delay: 0ms; }
.ins-card[data-insights-animate]:nth-child(2) { transition-delay: 100ms; }
.ins-card[data-insights-animate]:nth-child(3) { transition-delay: 200ms; }

/* Filter buttons: stronger active state + smooth transitions */
.ins-filter {
  transition: all 220ms ease;
  position: relative;
}
.ins-filter.is-active {
  background: rgba(29,78,216,0.08);
  color: var(--accent, #1D4ED8);
  border-color: rgba(29,78,216,0.18);
  font-weight: 600;
}
.ins-filter.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--accent, #1D4ED8);
  border-radius: 1px;
}
.ins-filter:hover:not(.is-active) {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
}

/* Featured article: stronger hover shadow */
.ins-featured:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.08), 0 0 0 1px rgba(29,78,216,0.1);
  transform: translateY(-3px);
}

/* =============================================
   CONTACT PAGE REFINEMENTS - premium, intentional
   ============================================= */

/* Form inputs: enhanced focus glow + spacing */
.form__group {
  gap: 8px;
}
.form__group + .form__group {
  margin-top: 6px;
}
.form__input,
.form__textarea {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14.5px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.form__input:focus,
.form__textarea:focus {
  border-color: var(--accent, #1D4ED8);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.10), 0 1px 3px rgba(29,78,216,0.06);
  background: #FAFBFF;
}
.form__label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Right panel: depth, gradient, CTA visibility */
.contact-split__panel {
  background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.contact-split__panel .btn--ghost-light {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  padding: 12px 28px;
  font-weight: 600;
  transition: all 220ms ease;
}
.contact-split__panel .btn--ghost-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* "Typical conversations" cards: hover states with variation */
.ct-qualify__item {
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.ct-qualify__item:hover {
  border-color: rgba(29,78,216,0.18);
  box-shadow: 0 8px 28px rgba(15,23,42,0.06), 0 0 0 1px rgba(29,78,216,0.06);
  transform: translateY(-3px);
}
.ct-qualify__item:nth-child(1) { border-top: 2px solid transparent; }
.ct-qualify__item:nth-child(1):hover { border-top-color: var(--accent, #1D4ED8); }
.ct-qualify__item:nth-child(2) { border-top: 2px solid transparent; }
.ct-qualify__item:nth-child(2):hover { border-top-color: #3B82F6; }
.ct-qualify__item:nth-child(3) { border-top: 2px solid transparent; }
.ct-qualify__item:nth-child(3):hover { border-top-color: #6366F1; }
.ct-qualify__item:nth-child(4) { border-top: 2px solid transparent; }
.ct-qualify__item:nth-child(4):hover { border-top-color: #8B5CF6; }

/* FAQ: smoother expand/collapse */
.faq-answer {
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1), padding 300ms ease;
}
.faq-question {
  transition: color 200ms ease;
}
.faq-question:hover {
  color: var(--accent, #1D4ED8);
}
.faq-question::after {
  transition: transform 250ms ease, color 200ms ease;
}
.faq-item.is-open .faq-question {
  color: var(--accent, #1D4ED8);
}
.faq-item.is-open .faq-question::after {
  color: var(--accent, #1D4ED8);
  transform: translateY(-50%) rotate(180deg);
}
.faq-item {
  transition: background 200ms ease;
}
.faq-item.is-open {
  background: rgba(29,78,216,0.015);
  border-radius: 4px;
}

/* Submit button: stronger presence */
.contact-split__form .btn--dark {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 220ms ease;
}
.contact-split__form .btn--dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15,23,42,0.15);
}

/* Social links: enhanced hover */
.contact-split__socials a:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 900px) {
  .form__input,
  .form__textarea {
    padding: 11px 14px;
  }
}

/* =============================================
   HOMEPAGE: Pillar + Audience card visual upgrade
   ============================================= */

/* --- Pillars: accent border, stronger number, visual hierarchy --- */
.pillars {
  gap: var(--space-5);
}
.pillar {
  padding: 32px 28px 32px 32px;
  border-left: 3px solid transparent;
  position: relative;
}
.pillar:nth-child(1) { border-left-color: rgba(26,25,23,0.25); }
.pillar:nth-child(2) { border-left-color: rgba(26,25,23,0.18); }
.pillar:nth-child(3) { border-left-color: rgba(26,25,23,0.12); }

.pillar__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(26,25,23,0.40);
  margin-bottom: 16px;
  opacity: 0.7;
}
.pillar:nth-child(2) .pillar__num { color: rgba(26,25,23,0.35); }
.pillar:nth-child(3) .pillar__num { color: rgba(26,25,23,0.30); }

.pillar__heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pillar:hover {
  border-left-width: 3px;
}
.pillar:nth-child(1):hover {
  background: linear-gradient(135deg, rgba(26,25,23,0.02) 0%, transparent 60%);
}
.pillar:nth-child(2):hover {
  background: linear-gradient(135deg, rgba(26,25,23,0.02) 0%, transparent 60%);
}
.pillar:nth-child(3):hover {
  background: linear-gradient(135deg, rgba(26,25,23,0.02) 0%, transparent 60%);
}

/* --- Audience: 2x2 grid, top accent stripe, stronger presence --- */
#audience .why-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
#audience .why-card {
  padding: 36px 32px;
  border-top: 3px solid transparent;
  position: relative;
}
#audience .why-card:nth-child(1) { border-top-color: rgba(26,25,23,0.25); }
#audience .why-card:nth-child(2) { border-top-color: rgba(26,25,23,0.20); }
#audience .why-card:nth-child(3) { border-top-color: rgba(26,25,23,0.15); }
#audience .why-card:nth-child(4) { border-top-color: rgba(26,25,23,0.10); }

#audience .why-card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
#audience .why-card__desc {
  font-size: 14.5px;
  line-height: 1.7;
}

#audience .why-card:nth-child(1):hover {
  background: linear-gradient(160deg, rgba(29,78,216,0.025) 0%, #fff 50%);
}
#audience .why-card:nth-child(2):hover {
  background: linear-gradient(160deg, rgba(59,130,246,0.025) 0%, #fff 50%);
}
#audience .why-card:nth-child(3):hover {
  background: linear-gradient(160deg, rgba(99,102,241,0.025) 0%, #fff 50%);
}
#audience .why-card:nth-child(4):hover {
  background: linear-gradient(160deg, rgba(139,92,246,0.025) 0%, #fff 50%);
}

/* Responsive: audience stays 2x2 on tablet, stacks on mobile */
@media (max-width: 640px) {
  #audience .why-grid {
    grid-template-columns: 1fr;
  }
}


/* --- Footer cream theme overrides --- */
.pg-home .footer,
.pg-about .footer,
.pg-platform .footer,
.pg-beliefs .footer,
.pg-team .footer,
.pg-insights .footer,
.pg-contact .footer,
.pg-agent .footer {
  background: #F5F3EE !important;
  border-top: 0.5px solid rgba(26,25,23,0.10) !important;
}
.pg-home .footer::before,
.pg-about .footer::before,
.pg-platform .footer::before,
.pg-beliefs .footer::before,
.pg-team .footer::before,
.pg-insights .footer::before,
.pg-contact .footer::before,
.pg-agent .footer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(26,25,23,0.06) 30%, rgba(26,25,23,0.10) 50%, rgba(26,25,23,0.06) 70%, transparent 100%) !important;
}
.pg-home .footer__logo-text,
.pg-about .footer__logo-text,
.pg-platform .footer__logo-text,
.pg-beliefs .footer__logo-text,
.pg-team .footer__logo-text,
.pg-insights .footer__logo-text,
.pg-contact .footer__logo-text,
.pg-agent .footer__logo-text {
  color: rgba(26,25,23,0.35) !important;
}
.pg-home .footer__logo-text:hover,
.pg-about .footer__logo-text:hover,
.pg-platform .footer__logo-text:hover,
.pg-beliefs .footer__logo-text:hover,
.pg-team .footer__logo-text:hover,
.pg-insights .footer__logo-text:hover,
.pg-contact .footer__logo-text:hover,
.pg-agent .footer__logo-text:hover {
  color: rgba(26,25,23,0.65) !important;
}
.pg-home .footer__logo-img,
.pg-about .footer__logo-img,
.pg-platform .footer__logo-img,
.pg-beliefs .footer__logo-img,
.pg-team .footer__logo-img,
.pg-insights .footer__logo-img,
.pg-contact .footer__logo-img,
.pg-agent .footer__logo-img,
.pg-home .footer__logo-text svg,
.pg-about .footer__logo-text svg,
.pg-platform .footer__logo-text svg,
.pg-beliefs .footer__logo-text svg,
.pg-team .footer__logo-text svg,
.pg-insights .footer__logo-text svg,
.pg-contact .footer__logo-text svg,
.pg-agent .footer__logo-text svg {
  filter: none !important;
  opacity: 0.35 !important;
}
.pg-home .footer__col-title,
.pg-about .footer__col-title,
.pg-platform .footer__col-title,
.pg-beliefs .footer__col-title,
.pg-team .footer__col-title,
.pg-insights .footer__col-title,
.pg-contact .footer__col-title,
.pg-agent .footer__col-title {
  color: rgba(26,25,23,0.40) !important;
}
.pg-home .footer__col-links a,
.pg-about .footer__col-links a,
.pg-platform .footer__col-links a,
.pg-beliefs .footer__col-links a,
.pg-team .footer__col-links a,
.pg-insights .footer__col-links a,
.pg-contact .footer__col-links a,
.pg-agent .footer__col-links a {
  color: rgba(26,25,23,0.40) !important;
}
.pg-home .footer__col-links a:hover,
.pg-about .footer__col-links a:hover,
.pg-platform .footer__col-links a:hover,
.pg-beliefs .footer__col-links a:hover,
.pg-team .footer__col-links a:hover,
.pg-insights .footer__col-links a:hover,
.pg-contact .footer__col-links a:hover,
.pg-agent .footer__col-links a:hover {
  color: rgba(26,25,23,0.70) !important;
}
.pg-home .footer__tagline,
.pg-about .footer__tagline,
.pg-platform .footer__tagline,
.pg-beliefs .footer__tagline,
.pg-team .footer__tagline,
.pg-insights .footer__tagline,
.pg-contact .footer__tagline,
.pg-agent .footer__tagline {
  color: rgba(26,25,23,0.40) !important;
}
.pg-home .footer__bottom,
.pg-about .footer__bottom,
.pg-platform .footer__bottom,
.pg-beliefs .footer__bottom,
.pg-team .footer__bottom,
.pg-insights .footer__bottom,
.pg-contact .footer__bottom,
.pg-agent .footer__bottom {
  border-top-color: rgba(26,25,23,0.08) !important;
}
.pg-home .footer__copy,
.pg-about .footer__copy,
.pg-platform .footer__copy,
.pg-beliefs .footer__copy,
.pg-team .footer__copy,
.pg-insights .footer__copy,
.pg-contact .footer__copy,
.pg-agent .footer__copy {
  color: rgba(26,25,23,0.25) !important;
}
.pg-home .footer__trust,
.pg-about .footer__trust,
.pg-platform .footer__trust,
.pg-beliefs .footer__trust,
.pg-team .footer__trust,
.pg-insights .footer__trust,
.pg-contact .footer__trust,
.pg-agent .footer__trust {
  color: rgba(26,25,23,0.25) !important;
}
.pg-home .footer__legal,
.pg-about .footer__legal,
.pg-platform .footer__legal,
.pg-beliefs .footer__legal,
.pg-team .footer__legal,
.pg-insights .footer__legal,
.pg-contact .footer__legal,
.pg-agent .footer__legal {
  color: rgba(26,25,23,0.20) !important;
}
.pg-home .footer__links a,
.pg-about .footer__links a,
.pg-platform .footer__links a,
.pg-beliefs .footer__links a,
.pg-team .footer__links a,
.pg-insights .footer__links a,
.pg-contact .footer__links a,
.pg-agent .footer__links a {
  color: rgba(26,25,23,0.35) !important;
}
.pg-home .footer__links a:hover,
.pg-about .footer__links a:hover,
.pg-platform .footer__links a:hover,
.pg-beliefs .footer__links a:hover,
.pg-team .footer__links a:hover,
.pg-insights .footer__links a:hover,
.pg-contact .footer__links a:hover,
.pg-agent .footer__links a:hover {
  color: rgba(26,25,23,0.65) !important;
}

/* ============================================================
   Homepage layout overrides (must come last for specificity)
   ============================================================ */

/* HERO - dark background override */
body.pg-home #hero {
  background: linear-gradient(135deg, #F0F4FF 0%, #FAFAF8 100%) !important;
}

/* PIPELINE STEPS - VERTICAL STACKING */
body.pg-home .q2d-steps,
.pg-home .q2d-steps.stagger,
.pg-home .q2d-steps {
  display: block !important;
  grid-template-columns: none !important;
}
body.pg-home .q2d-step,
.pg-home .q2d-step {
  display: grid !important;
  grid-template-columns: 72px 180px 1fr !important;
  border-left: none !important;
  border-bottom: 1px solid #EAE7E0 !important;
  padding: 0 !important;
  align-items: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.pg-home .q2d-step:last-child { border-bottom: none !important; }
body.pg-home .q2d-step__connector { display: none !important; }
body.pg-home .q2d-step__number {
  padding: 20px 0 !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: 28px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.pg-home .q2d-step__title {
  border-left: 1px solid #EAE7E0 !important;
  border-right: 1px solid #EAE7E0 !important;
  padding: 20px 28px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}
body.pg-home .q2d-step__desc {
  padding: 20px 28px !important;
  margin: 0 !important;
  max-width: none !important;
}

/* PRINCIPLES - VERTICAL STACKING */
body.pg-home .principles {
  display: block !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body.pg-home .principle {
  border-bottom: 1px solid #EAE7E0 !important;
  padding: 24px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.pg-home .principle:first-child {
  border-top: 1px solid #EAE7E0 !important;
}

/* QUOTE SECTION - NO PINK */
body.pg-home .quote-section,
.pg-home .quote-section {
  background: #FAFAF8 !important;
}

.quote-section blockquote,
.quote-section .quote-section__text {
  background: transparent !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 auto 24px !important;
  max-width: 680px;
}