/* ============================================================
   ECOPSHUB BY GAZELLES — Design System
   Premium B2B ESG Platform
   ============================================================ */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ─── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Brand Colors */
  --eco-green:       #6FCF97;
  --forest-green:    #2F855A;
  --deep-green:      #0B6E4F;
  --fresh-green:     #4CAF50;
  --soft-mint:       #A8E6CF;
  --light-olive:     #A3B18A;

  --beige:           #F5F1E8;
  --off-white:       #FAFAFA;
  --white:           #FFFFFF;

  --terracotta:      #E07A5F;
  --soft-yellow:     #F2C94C;

  --charcoal:        #1F2937;
  --dark-charcoal:   #1F2933;
  --mid-grey:        #6B7280;
  --light-grey:      #E5E7EB;

  /* Semantic Aliases */
  --primary:         var(--deep-green);
  --primary-hover:   #09593f;
  --accent:          var(--eco-green);
  --accent-mint:     var(--soft-mint);
  --highlight:       var(--soft-yellow);
  --warning:         var(--terracotta);
  --surface:         var(--off-white);
  --surface-alt:     var(--beige);
  --text-primary:    var(--charcoal);
  --text-secondary:  var(--mid-grey);
  --border:          var(--light-grey);

  /* Typography */
  --font-heading:    'Manrope', sans-serif;
  --font-body:       'Inter', sans-serif;

  /* Spacing (8pt system) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Radius */
  --radius-sm:  12px;
  --radius-md:  20px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(15,40,30,0.06), 0 1px 2px rgba(15,40,30,0.04);
  --shadow-md:   0 4px 16px rgba(15,40,30,0.08), 0 2px 6px rgba(15,40,30,0.05);
  --shadow-lg:   0 12px 40px rgba(15,40,30,0.12), 0 4px 12px rgba(15,40,30,0.06);
  --shadow-xl:   0 24px 64px rgba(15,40,30,0.14), 0 8px 24px rgba(15,40,30,0.08);

  /* Transitions */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --trans-fast:  0.15s var(--ease-in-out);
  --trans-med:   0.25s var(--ease-out);
  --trans-slow:  0.4s var(--ease-out);
}

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

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

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

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ─── Typography Scale ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
h6 { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

p { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); }
.lead { font-size: 1.175rem; line-height: 1.65; color: var(--mid-grey); }
.small { font-size: 0.875rem; }
.xsmall { font-size: 0.75rem; }

/* ─── Layout Container ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
.container--narrow { max-width: 860px; }
.container--wide   { max-width: 1440px; padding: 0 var(--sp-6); }

/* ─── Grid ──────────────────────────────────────────────────── */
.grid { display: grid; }
.grid-2  { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3  { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4  { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.grid-12 { grid-template-columns: repeat(12, 1fr); gap: var(--sp-3); }

/* ─── Flex Utilities ────────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* ─── Spacing Utilities ─────────────────────────────────────── */
.section      { padding: var(--sp-12) 0; }
.section--lg  { padding: var(--sp-16) 0; }
.section--sm  { padding: var(--sp-8) 0; }
.section--xs  { padding: var(--sp-5) 0; }
.mt-auto { margin-top: auto; }

/* ─── Color Backgrounds ─────────────────────────────────────── */
.bg-white      { background: var(--white); }
.bg-surface    { background: var(--surface); }
.bg-beige      { background: var(--beige); }
.bg-mint-light { background: #EBF9F2; }
.bg-dark       { background: var(--dark-charcoal); color: var(--white); }
.bg-deep-green { background: var(--deep-green); color: var(--white); }
.bg-forest     { background: var(--forest-green); color: var(--white); }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all var(--trans-med);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0; transition: opacity var(--trans-fast);
}
.btn:hover::before { opacity: 0.06; background: var(--white); }

.btn--primary {
  background: var(--deep-green);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(11,110,79,0.30);
}
.btn--primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 6px 24px rgba(11,110,79,0.40);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--deep-green);
  border: 2px solid var(--deep-green);
}
.btn--secondary:hover {
  background: var(--deep-green);
  color: var(--white);
  transform: translateY(-1px);
}

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

.btn--ghost {
  background: transparent;
  color: var(--deep-green);
  padding: 10px 16px;
}
.btn--ghost:hover { background: rgba(11,110,79,0.06); }

.btn--mint {
  background: var(--soft-mint);
  color: var(--deep-green);
  font-weight: 700;
}
.btn--mint:hover { background: var(--eco-green); transform: translateY(-1px); }

.btn--sm { padding: 10px 20px; font-size: 0.875rem; }
.btn--lg { padding: 18px 36px; font-size: 1.0625rem; }
.btn--xl { padding: 20px 44px; font-size: 1.125rem; }

/* ─── Tag / Badge ───────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tag--green   { background: rgba(111,207,151,0.18); color: var(--forest-green); }
.tag--mint    { background: rgba(168,230,207,0.25); color: var(--deep-green); }
.tag--beige   { background: var(--beige); color: var(--charcoal); }
.tag--terra   { background: rgba(224,122,95,0.15); color: #b55d46; }
.tag--yellow  { background: rgba(242,201,76,0.18); color: #8a6f1a; }
.tag--grey    { background: var(--light-grey); color: var(--mid-grey); }

/* ─── Navigation ────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(250,250,250,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(229,231,235,0.6);
  transition: all var(--trans-med);
}
.nav.scrolled {
  background: rgba(250,250,250,0.97);
  box-shadow: var(--shadow-sm);
}
.nav--hidden {
  transform: translateY(-100%);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--sp-4);
  max-width: 1320px; margin: 0 auto;
}
.nav__logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--deep-green);
  letter-spacing: -0.03em;
}
.nav__logo-mark {
  width: 40px; height: 40px;
  background: var(--deep-green);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
}
.nav__logo-text span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--mid-grey);
  letter-spacing: 0.02em;
  text-transform: none;
}
.nav__menu {
  display: flex; align-items: center; gap: var(--sp-1);
}
.nav__link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: all var(--trans-fast);
  position: relative;
}
.nav__link:hover { background: rgba(11,110,79,0.06); color: var(--deep-green); }
.nav__link.active { color: var(--deep-green); font-weight: 600; }
.nav__dropdown {
  position: relative;
}
.nav__dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  min-width: 240px;
  opacity: 0; visibility: hidden;
  transition: all var(--trans-med);
  pointer-events: none;
}
.nav__dropdown:hover .nav__dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.nav__dropdown-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background var(--trans-fast);
  cursor: pointer;
}
.nav__dropdown-item:hover { background: #EBF9F2; }
.nav__dropdown-item-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(111,207,151,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}
.nav__dropdown-item-text strong {
  display: block;
  font-size: 0.875rem; font-weight: 600;
  color: var(--charcoal); margin-bottom: 2px;
}
.nav__dropdown-item-text span {
  font-size: 0.78rem; color: var(--mid-grey);
}
.nav__ctas { display: flex; align-items: center; gap: var(--sp-2); }
.nav__hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer;
}
.nav__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--charcoal); border-radius: 2px;
  transition: all var(--trans-fast);
}

/* ─── Page Offset for Fixed Nav ─────────────────────────────── */
.page-offset { padding-top: 72px; }

/* ─── Hero Section ──────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #FAFAFA 0%, #EBF9F2 35%, #F5F1E8 100%);
}
.hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}
.hero__bg-orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(111,207,151,0.4), transparent 70%);
  top: -100px; right: -100px;
  animation: orbFloat 8s ease-in-out infinite;
}
.hero__bg-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168,230,207,0.35), transparent 70%);
  bottom: -80px; left: 5%;
  animation: orbFloat 10s ease-in-out infinite reverse;
}
.hero__bg-orb--3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(242,201,76,0.2), transparent 70%);
  top: 30%; left: 40%;
  animation: orbFloat 12s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

.hero__content {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: var(--sp-8);
  padding: var(--sp-12) 0;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11,110,79,0.08);
  border: 1px solid rgba(11,110,79,0.15);
  color: var(--deep-green);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.hero__eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--eco-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}
.hero__title {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-3);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--deep-green), var(--eco-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__sub {
  font-size: 1.175rem;
  color: var(--mid-grey);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--sp-5);
}
.hero__actions {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.hero__stats {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.hero__stat-num {
  font-family: var(--font-heading);
  font-size: 1.625rem; font-weight: 800;
  color: var(--deep-green); letter-spacing: -0.03em;
}
.hero__stat-label {
  font-size: 0.8125rem; color: var(--mid-grey); font-weight: 500;
  line-height: 1.3;
}
.hero__stat-divider {
  width: 1px; height: 36px; background: var(--border);
}
.hero__visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* ─── Globe / Orbit Visual ──────────────────────────────────── */
.globe-visual {
  position: relative;
  width: 480px; height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.globe-core {
  position: absolute;
  width: 220px; height: 220px;
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 60px rgba(11,110,79,0.35), 0 0 0 20px rgba(111,207,151,0.12), 0 0 0 40px rgba(111,207,151,0.06);
  z-index: 5;
}
.globe-core-letter {
  font-family: var(--font-heading);
  font-size: 4.5rem; font-weight: 800;
  color: rgba(255,255,255,0.9); letter-spacing: -0.05em;
}
.globe-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  animation: spinRing linear infinite;
}
.globe-ring--1 {
  width: 300px; height: 300px;
  border-color: rgba(111,207,151,0.35);
  animation-duration: 18s;
}
.globe-ring--2 {
  width: 370px; height: 370px;
  border-color: rgba(168,230,207,0.25);
  border-style: dashed;
  animation-duration: 28s;
  animation-direction: reverse;
}
.globe-ring--3 {
  width: 450px; height: 450px;
  border-color: rgba(242,201,76,0.15);
  animation-duration: 40s;
}
@keyframes spinRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.globe-node {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--eco-green);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(111,207,151,0.6);
}
.globe-node--gold {
  background: var(--soft-yellow);
  box-shadow: 0 0 12px rgba(242,201,76,0.6);
}
.globe-node--terra {
  background: var(--terracotta);
  box-shadow: 0 0 12px rgba(224,122,95,0.6);
}

/* ─── Platform Flow Diagram ─────────────────────────────────── */
.flow-diagram {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.flow-diagram::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green), var(--soft-yellow));
}
.flow-track {
  display: flex; align-items: stretch; gap: 0;
  position: relative;
}
.flow-track--gazelles { margin-bottom: var(--sp-4); }
.flow-track-label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: var(--sp-2) 0;
  color: var(--mid-grey);
  min-width: 28px;
  display: flex; align-items: center; justify-content: center;
}
.flow-steps {
  display: flex; align-items: center; gap: 0;
  flex: 1; position: relative;
}
.flow-step {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  padding: 16px 8px;
  position: relative;
  cursor: default;
  transition: all var(--trans-med);
}
.flow-step:hover .flow-step__bubble { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 16px; height: 1px;
  background: var(--light-grey);
}
.flow-step__bubble {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: all var(--trans-med);
  position: relative; z-index: 1;
}
.flow-step__bubble--g {
  background: linear-gradient(135deg, rgba(11,110,79,0.12), rgba(47,133,90,0.08));
  border: 2px solid rgba(11,110,79,0.2);
}
.flow-step__bubble--e {
  background: linear-gradient(135deg, rgba(168,230,207,0.3), rgba(111,207,151,0.2));
  border: 2px solid rgba(111,207,151,0.35);
}
.flow-step__num {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%; background: var(--deep-green);
  color: var(--white); font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.flow-step__name {
  font-size: 0.72rem; font-weight: 700;
  color: var(--charcoal); text-align: center;
  letter-spacing: 0.01em;
}
.flow-divider {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); margin: var(--sp-3) 0;
  padding: 10px 0;
  border-top: 1px dashed rgba(111,207,151,0.4);
  border-bottom: 1px dashed rgba(168,230,207,0.4);
  position: relative;
}
.flow-divider-text {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mid-grey); white-space: nowrap;
}
.flow-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,110,79,0.2), transparent);
}

/* ─── Section Header ────────────────────────────────────────── */
.section-header { margin-bottom: var(--sp-8); }
.section-header--center { text-align: center; }
.section-header--center .section-header__desc { margin: 0 auto; }
.section-header__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--forest-green);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.section-header__eyebrow-line {
  display: block; width: 24px; height: 2px;
  background: var(--eco-green); border-radius: 2px;
}
.section-header__title { margin-bottom: var(--sp-2); }
.section-header__desc {
  font-size: 1.0625rem; color: var(--mid-grey);
  line-height: 1.7; max-width: 640px;
}

/* ─── Feature Cards ─────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: all var(--trans-med);
  position: relative;
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(111,207,151,0.35);
}
.card--featured {
  border-color: transparent;
  background: linear-gradient(135deg, var(--white), #EBF9F2);
  box-shadow: var(--shadow-md);
}
.card--dark {
  background: var(--dark-charcoal);
  border-color: rgba(255,255,255,0.08);
  color: var(--white);
}
.card--dark p { color: rgba(255,255,255,0.65); }
.card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}
.card__icon--green  { background: rgba(111,207,151,0.18); }
.card__icon--mint   { background: rgba(168,230,207,0.25); }
.card__icon--terra  { background: rgba(224,122,95,0.15); }
.card__icon--yellow { background: rgba(242,201,76,0.15); }
.card__icon--dark   { background: rgba(255,255,255,0.08); }
.card__title {
  font-size: 1.1rem; font-weight: 700; margin-bottom: var(--sp-1);
  color: var(--charcoal);
}
.card--dark .card__title { color: var(--white); }
.card__desc { font-size: 0.9375rem; line-height: 1.65; color: var(--mid-grey); }
.card--dark .card__desc { color: rgba(255,255,255,0.6); }
.card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--deep-green);
  margin-top: var(--sp-3);
  transition: gap var(--trans-fast);
}
.card__link:hover { gap: 10px; }
.card--dark .card__link { color: var(--eco-green); }

/* ─── KPI / Stats ───────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}
.kpi-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  transition: all var(--trans-med);
  position: relative; overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.kpi-card:hover::after { transform: scaleX(1); }
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-number {
  font-family: var(--font-heading);
  font-size: 2.5rem; font-weight: 800;
  color: var(--deep-green); letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-label {
  font-size: 0.875rem; color: var(--mid-grey); font-weight: 500;
}
.kpi-sub {
  font-size: 0.75rem; color: var(--eco-green); font-weight: 600;
  margin-top: 4px;
}

/* ─── Product Screenshot / Frame ───────────────────────────── */
.product-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  background: var(--white);
}
.product-frame__browser {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  background: #F3F4F6;
  border-bottom: 1px solid var(--border);
}
.product-frame__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.product-frame__dot--red    { background: #FC6058; }
.product-frame__dot--yellow { background: #FEC12C; }
.product-frame__dot--green  { background: #2ACA44; }
.product-frame__url {
  flex: 1;
  background: var(--white);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--mid-grey);
  font-family: var(--font-body);
}
.product-frame__body {
  background: linear-gradient(180deg, #EBF9F2, var(--white));
  min-height: 320px;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* ─── Dashboard Mock ────────────────────────────────────────── */
.dash-mock {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-md);
}
.dash-mock__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.dash-mock__title {
  font-size: 0.875rem; font-weight: 700; color: var(--charcoal);
}
.dash-mock__kpis {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.dash-mock__kpi {
  background: #F3F9F6;
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.dash-mock__kpi-val {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 800;
  color: var(--deep-green); letter-spacing: -0.03em;
}
.dash-mock__kpi-lbl {
  font-size: 0.7rem; color: var(--mid-grey); font-weight: 500; margin-top: 2px;
}
.dash-mock__chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 80px;
}
.dash-mock__bar {
  flex: 1; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--eco-green), var(--forest-green));
  opacity: 0.75;
  transition: opacity var(--trans-fast);
}
.dash-mock__bar:hover { opacity: 1; }

/* ─── Trust Logos ───────────────────────────────────────────── */
.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-5) 0;
}
.trust-bar__label {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mid-grey); margin-bottom: var(--sp-4);
  text-align: center;
}
.trust-bar__logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--sp-5);
}
.trust-logo {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 700;
  color: var(--light-grey);
  letter-spacing: -0.02em;
  transition: color var(--trans-fast);
  filter: grayscale(1) opacity(0.45);
}
.trust-logo:hover { filter: grayscale(0) opacity(0.8); }

/* ─── Process Steps ─────────────────────────────────────────── */
.process-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  position: relative;
}
.process-row::before {
  content: '';
  position: absolute; top: 36px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eco-green), var(--soft-mint), var(--eco-green), transparent);
  z-index: 0;
}
.process-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-2);
}
.process-step__circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  position: relative;
  transition: all var(--trans-med);
}
.process-step__circle--g {
  background: linear-gradient(135deg, rgba(11,110,79,0.1), rgba(47,133,90,0.06));
  border: 2px solid rgba(11,110,79,0.2);
  box-shadow: 0 0 0 6px rgba(11,110,79,0.05);
}
.process-step__circle--e {
  background: linear-gradient(135deg, rgba(168,230,207,0.35), rgba(111,207,151,0.2));
  border: 2px solid rgba(111,207,151,0.4);
  box-shadow: 0 0 0 6px rgba(168,230,207,0.15);
}
.process-step:hover .process-step__circle {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(11,110,79,0.2), 0 0 0 8px rgba(11,110,79,0.06);
}
.process-step__num {
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--deep-green); color: var(--white);
  font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
}
.process-step__name {
  font-size: 0.9rem; font-weight: 700; color: var(--charcoal);
}
.process-step__sub {
  font-size: 0.78rem; color: var(--mid-grey); line-height: 1.4;
}

/* ─── Split Flow Section ────────────────────────────────────── */
.split-flow {
  background: var(--dark-charcoal);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  position: relative; overflow: hidden;
}
.split-flow::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.split-flow__title {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.split-flow__title--g { color: rgba(111,207,151,0.7); }
.split-flow__title--e { color: rgba(168,230,207,0.7); }
.split-flow-track {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2); position: relative;
}
.split-flow-track::before {
  content: '';
  position: absolute; top: 28px; left: 12%; right: 12%;
  height: 1px;
  z-index: 0;
}
.split-flow-track--g::before { background: linear-gradient(90deg, rgba(11,110,79,0.5), rgba(111,207,151,0.5), rgba(11,110,79,0.5)); }
.split-flow-track--e::before { background: linear-gradient(90deg, rgba(168,230,207,0.3), rgba(111,207,151,0.4), rgba(168,230,207,0.3)); }
.split-flow-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; position: relative; z-index: 1;
  cursor: default;
}
.split-flow-step__bubble {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: all var(--trans-med);
}
.split-flow-step--g .split-flow-step__bubble {
  background: rgba(11,110,79,0.25);
  border: 1.5px solid rgba(111,207,151,0.35);
}
.split-flow-step--e .split-flow-step__bubble {
  background: rgba(168,230,207,0.15);
  border: 1.5px solid rgba(168,230,207,0.3);
}
.split-flow-step:hover .split-flow-step__bubble {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
.split-flow-step__name {
  font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.8);
  text-align: center; letter-spacing: 0.01em;
}
.split-flow-connector {
  text-align: center; padding: var(--sp-4) 0;
  border-top: 1px dashed rgba(255,255,255,0.06);
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  margin: var(--sp-5) 0;
  position: relative;
}
.split-flow-connector__text {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.split-flow-connector__icon {
  font-size: 1.25rem; margin: 4px 0;
}

/* ─── Solution Cards ────────────────────────────────────────── */
.solution-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  transition: all var(--trans-med);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.solution-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.solution-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: rgba(111,207,151,0.3);
}
.solution-card:hover::before { transform: scaleX(1); }
.solution-card__num {
  font-family: var(--font-heading);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(11,110,79,0.3);
}
.solution-card__icon { font-size: 2.25rem; margin: 4px 0; }
.solution-card__title { font-size: 1.2rem; font-weight: 700; color: var(--charcoal); }
.solution-card__desc { font-size: 0.9rem; color: var(--mid-grey); line-height: 1.65; }
.solution-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-2); }

/* ─── Industry Cards ────────────────────────────────────────── */
.industry-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--trans-med);
  display: flex; flex-direction: column;
}
.industry-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.industry-card__cover {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  position: relative; overflow: hidden;
}
.industry-card__cover--energy   { background: linear-gradient(135deg, #0B6E4F22, #6FCF9722); }
.industry-card__cover--finance  { background: linear-gradient(135deg, #1F293722, #6B728022); }
.industry-card__cover--mfg      { background: linear-gradient(135deg, #F2C94C22, #E07A5F22); }
.industry-card__cover--tech     { background: linear-gradient(135deg, #A8E6CF22, #4CAF5022); }
.industry-card__cover--retail   { background: linear-gradient(135deg, #E07A5F22, #F2C94C22); }
.industry-card__cover--health   { background: linear-gradient(135deg, #6FCF9722, #A8E6CF22); }
.industry-card__body { padding: var(--sp-3) var(--sp-3); flex: 1; display: flex; flex-direction: column; }
.industry-card__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.industry-card__desc  { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.6; flex: 1; }
.industry-card__link  {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8375rem; font-weight: 600; color: var(--deep-green);
  margin-top: var(--sp-2); transition: gap var(--trans-fast);
}
.industry-card__link:hover { gap: 10px; }

/* ─── Testimonials ──────────────────────────────────────────── */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: all var(--trans-med);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.testimonial-card:hover { box-shadow: var(--shadow-md); }
.testimonial-card__quote {
  font-size: 1.0625rem; line-height: 1.7;
  color: var(--charcoal); font-style: italic;
  flex: 1;
}
.testimonial-card__quote::before { content: '\201C'; font-size: 2rem; color: var(--eco-green); line-height: 0; vertical-align: -0.5rem; margin-right: 4px; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700; color: var(--white);
  flex-shrink: 0;
}
.testimonial-card__name { font-size: 0.9rem; font-weight: 700; color: var(--charcoal); }
.testimonial-card__role { font-size: 0.8rem; color: var(--mid-grey); }
.testimonial-stars { display: flex; gap: 3px; color: var(--soft-yellow); font-size: 0.85rem; }

/* ─── Case Study Cards ──────────────────────────────────────── */
.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--trans-med);
  display: flex; flex-direction: column;
}
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.case-card__cover {
  height: 200px;
  background: linear-gradient(135deg, var(--dark-charcoal), #2d3748);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.case-card__cover-icon { font-size: 3.5rem; opacity: 0.35; }
.case-card__cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,20,15,0.6) 100%);
}
.case-card__cover-tags {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 6px;
}
.case-card__body { padding: var(--sp-3) var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.case-card__kpi {
  display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
.case-card__kpi-item { text-align: center; }
.case-card__kpi-val  { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800; color: var(--deep-green); letter-spacing: -0.03em; }
.case-card__kpi-lbl  { font-size: 0.7rem; color: var(--mid-grey); font-weight: 500; margin-top: 2px; }
.case-card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.case-card__excerpt { font-size: 0.9rem; color: var(--mid-grey); line-height: 1.65; flex: 1; }
.case-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.case-card__company { font-size: 0.825rem; font-weight: 600; color: var(--charcoal); }
.case-card__read {
  font-size: 0.825rem; font-weight: 600; color: var(--deep-green);
  display: flex; align-items: center; gap: 5px;
  transition: gap var(--trans-fast);
}
.case-card__read:hover { gap: 9px; }

/* ─── FAQ Accordion ─────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--trans-fast);
}
.faq-item.open { border-color: rgba(111,207,151,0.4); box-shadow: var(--shadow-sm); }
.faq-item__question {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: 1rem; font-weight: 600; color: var(--charcoal);
  gap: var(--sp-2);
  transition: color var(--trans-fast);
  user-select: none;
}
.faq-item__question:hover { color: var(--deep-green); }
.faq-item.open .faq-item__question { color: var(--deep-green); }
.faq-item__chevron {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--light-grey); color: var(--mid-grey);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.75rem;
  transition: all var(--trans-med);
}
.faq-item.open .faq-item__chevron {
  background: rgba(11,110,79,0.1);
  color: var(--deep-green);
  transform: rotate(180deg);
}
.faq-item__answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s var(--ease-out), padding 0.3s;
  padding: 0 var(--sp-4);
}
.faq-item.open .faq-item__answer { max-height: 600px; padding-bottom: var(--sp-3); }
.faq-item__answer p { font-size: 0.95rem; color: var(--mid-grey); line-height: 1.7; }

/* ─── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 0.825rem;
  color: var(--mid-grey);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--mid-grey); transition: color var(--trans-fast); }
.breadcrumb a:hover { color: var(--deep-green); }
.breadcrumb__sep { color: var(--light-grey); font-size: 0.75rem; }
.breadcrumb__current { color: var(--charcoal); font-weight: 500; }

/* ─── CTA Section ───────────────────────────────────────────── */
.cta-block {
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  border-radius: var(--radius-xl);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  position: relative; overflow: hidden;
  color: var(--white);
}
.cta-block::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E") repeat;
}
.cta-block__eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(168,230,207,0.85); margin-bottom: var(--sp-2);
}
.cta-block__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800; color: var(--white);
  margin-bottom: var(--sp-2); position: relative;
}
.cta-block__desc {
  font-size: 1.0625rem; color: rgba(255,255,255,0.7);
  max-width: 560px; margin: 0 auto var(--sp-5);
  line-height: 1.7; position: relative;
}
.cta-block__actions { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; position: relative; }

/* ─── Resource Cards ────────────────────────────────────────── */
.resource-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: all var(--trans-med);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.resource-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.resource-card__type {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.resource-card__title { font-size: 1rem; font-weight: 700; color: var(--charcoal); line-height: 1.4; }
.resource-card__desc  { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.6; flex: 1; }
.resource-card__meta  { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.78rem; color: var(--mid-grey); }

/* ─── Team Cards ────────────────────────────────────────────── */
.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden; transition: all var(--trans-med);
  text-align: center;
}
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.team-card__avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  margin: var(--sp-4) auto var(--sp-2);
  font-family: var(--font-heading);
  font-size: 1.75rem; font-weight: 800; color: var(--white);
}
.team-card__name   { font-size: 1.05rem; font-weight: 700; color: var(--charcoal); padding: 0 var(--sp-2); }
.team-card__role   { font-size: 0.8375rem; color: var(--mid-grey); padding: 4px var(--sp-2); }
.team-card__body   { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.team-card__bio    { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.6; }

/* ─── Form Elements ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 0.875rem; font-weight: 600;
  color: var(--charcoal); letter-spacing: -0.01em;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--charcoal);
  background: var(--white);
  transition: all var(--trans-fast);
  outline: none;
  font-family: var(--font-body);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--eco-green);
  box-shadow: 0 0 0 4px rgba(111,207,151,0.15);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-hint { font-size: 0.78rem; color: var(--mid-grey); }
.form-error { font-size: 0.78rem; color: var(--terracotta); }

/* ─── Framework / Compliance Badges ─────────────────────────── */
.framework-badge {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: var(--sp-3) var(--sp-2); text-align: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); transition: all var(--trans-med);
}
.framework-badge:hover { box-shadow: var(--shadow-md); border-color: rgba(111,207,151,0.4); transform: translateY(-3px); }
.framework-badge__logo {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(11,110,79,0.1), rgba(111,207,151,0.1));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; color: var(--deep-green);
  font-family: var(--font-heading); letter-spacing: -0.03em;
}
.framework-badge__name { font-size: 0.875rem; font-weight: 700; color: var(--charcoal); }
.framework-badge__sub  { font-size: 0.72rem; color: var(--mid-grey); line-height: 1.3; }

/* ─── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--dark-charcoal);
  color: rgba(255,255,255,0.7);
  padding-top: var(--sp-12);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand {}
.footer__brand-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
.footer__brand-mark {
  width: 36px; height: 36px;
  background: rgba(111,207,151,0.2);
  border: 1px solid rgba(111,207,151,0.3);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 800; color: var(--eco-green);
}
.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 800;
  color: var(--white); letter-spacing: -0.03em;
}
.footer__brand-name span {
  display: block; font-size: 0.65rem; font-weight: 400;
  color: rgba(255,255,255,0.4); letter-spacing: 0.02em;
}
.footer__tagline {
  font-size: 0.875rem; line-height: 1.65;
  color: rgba(255,255,255,0.5); max-width: 260px;
  margin-bottom: var(--sp-4);
}
.footer__col-title {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--sp-3);
}
.footer__links { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__link {
  font-size: 0.875rem; color: rgba(255,255,255,0.55);
  transition: color var(--trans-fast);
  padding: 3px 0;
}
.footer__link:hover { color: var(--eco-green); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) 0;
  font-size: 0.8rem; color: rgba(255,255,255,0.35);
}
.footer__bottom-links { display: flex; gap: var(--sp-3); }
.footer__bottom-link {
  color: rgba(255,255,255,0.35); transition: color var(--trans-fast);
}
.footer__bottom-link:hover { color: rgba(255,255,255,0.7); }
.footer__social {
  display: flex; gap: 10px; margin-top: var(--sp-3);
}
.footer__social-link {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  transition: all var(--trans-fast);
}
.footer__social-link:hover { background: rgba(111,207,151,0.2); color: var(--eco-green); border-color: rgba(111,207,151,0.3); }

/* ─── Page Sections with Tinted BG ─────────────────────────── */
.section-tint {
  background: #EBF9F2;
  border-radius: var(--radius-xl);
  padding: var(--sp-8) var(--sp-6);
}
.section-beige {
  background: var(--beige);
}

/* ─── Internal Link Rail ────────────────────────────────────── */
.link-rail {
  display: flex; align-items: stretch; gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.link-rail__item {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--border);
  transition: background var(--trans-fast);
  cursor: pointer;
}
.link-rail__item:last-child { border-right: none; }
.link-rail__item:hover { background: #EBF9F2; }
.link-rail__icon { font-size: 1.5rem; }
.link-rail__label { font-size: 0.9rem; font-weight: 700; color: var(--charcoal); }
.link-rail__sub   { font-size: 0.8rem; color: var(--mid-grey); }
.link-rail__arrow { font-size: 0.75rem; color: var(--deep-green); margin-top: auto; }

/* ─── Tab System ────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px;
  background: var(--light-grey);
  border-radius: var(--radius-full);
  padding: 4px;
  width: fit-content;
}
.tab {
  padding: 9px 20px;
  border-radius: var(--radius-full);
  font-size: 0.875rem; font-weight: 600;
  color: var(--mid-grey);
  cursor: pointer;
  transition: all var(--trans-fast);
  white-space: nowrap;
}
.tab.active {
  background: var(--white);
  color: var(--deep-green);
  box-shadow: var(--shadow-sm);
}
.tab:hover:not(.active) { color: var(--charcoal); }
.tab-panels > * { display: none; }
.tab-panels > *.active { display: block; }

/* ─── Gradient Text ─────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--deep-green), var(--eco-green) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #c9a227, var(--soft-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Misc Utilities ────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); }
.divider--light { background: rgba(229,231,235,0.5); }
.rounded { border-radius: var(--radius-md); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.visible { display: block !important; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }

/* ─── Page Inner Header ─────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--dark-charcoal), #2a3a2e);
  color: var(--white);
  padding: var(--sp-12) 0 var(--sp-8);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111,207,151,0.3), transparent);
}
.page-hero__eyebrow { color: rgba(168,230,207,0.85); margin-bottom: var(--sp-2); }
.page-hero__title   { color: var(--white); margin-bottom: var(--sp-2); }
.page-hero__desc    { color: rgba(255,255,255,0.65); font-size: 1.1rem; max-width: 620px; }

/* ─── Animations ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.anim-fade-up   { animation: fadeUp   0.6s var(--ease-out) both; }
.anim-fade-in   { animation: fadeIn   0.4s ease both; }
.anim-scale-in  { animation: scaleIn  0.5s var(--ease-out) both; }
.anim-delay-1   { animation-delay: 0.1s; }
.anim-delay-2   { animation-delay: 0.2s; }
.anim-delay-3   { animation-delay: 0.3s; }
.anim-delay-4   { animation-delay: 0.4s; }
.anim-delay-5   { animation-delay: 0.5s; }

/* ─── Responsive: Tablet ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process-row { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .hero__content { gap: var(--sp-6); }
  .globe-visual { width: 380px; height: 380px; }
  .globe-ring--3 { width: 360px; height: 360px; }
  .globe-ring--2 { width: 300px; height: 300px; }
  .globe-ring--1 { width: 240px; height: 240px; }
  .globe-core    { width: 180px; height: 180px; }
}

/* ─── Responsive: Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sp-8: 48px;
    --sp-10: 64px;
    --sp-12: 80px;
    --sp-16: 96px;
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero__content { grid-template-columns: 1fr; }
  .hero__visual  { display: none; }
  .split-flow-track, .process-row { grid-template-columns: repeat(2, 1fr); }
  .split-flow-track--e, .split-flow-track--g { grid-template-columns: repeat(3, 1fr); }
  .nav__menu, .nav__ctas .btn:not(.btn--primary) { display: none; }
  .nav__hamburger { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }
  .link-rail { flex-direction: column; }
  .link-rail__item { border-right: none; border-bottom: 1px solid var(--border); }
  .link-rail__item:last-child { border-bottom: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { flex-wrap: wrap; gap: var(--sp-2); }
}

@media (max-width: 480px) {
  .section { padding: var(--sp-8) 0; }
  .section-header { margin-bottom: var(--sp-5); }
  .hero { min-height: auto; padding: var(--sp-8) 0; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .split-flow { padding: var(--sp-4); }
  .split-flow-track { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: repeat(2, 1fr); }
  .process-row::before { display: none; }
}

/* ─── Mobile Nav Menu ────────────────────────────────────────── */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;
  background: rgba(250,250,250,0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding: var(--sp-4);
  flex-direction: column; gap: var(--sp-2);
  overflow-y: auto;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 1rem; font-weight: 600;
  color: var(--charcoal);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--trans-fast);
}
.nav-mobile-link:hover { background: rgba(11,110,79,0.06); color: var(--deep-green); }

/* ─── Scroll Reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── Notification Bar ───────────────────────────────────────── */
.topbar {
  background: var(--deep-green);
  color: rgba(255,255,255,0.9);
  text-align: center; padding: 10px var(--sp-4);
  font-size: 0.8375rem; font-weight: 500;
  position: relative; z-index: 1001;
}
.topbar a { color: var(--eco-green); font-weight: 600; margin-left: 6px; }
.topbar__close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  cursor: pointer; font-size: 1rem; opacity: 0.6;
  transition: opacity var(--trans-fast);
}
.topbar__close:hover { opacity: 1; }


/* ============================================================
   ECOPSHUB v2 — Premium Homepage Styles
   ============================================================ */

/* ─── Hero Grid Lines ───────────────────────────────────────── */
.hero__grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,110,79,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,110,79,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.hero__stat-item { min-width: 80px; }

/* ─── Hero Orbit Accents ─────────────────────────────────────── */
.hero__orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(111,207,151,0.2);
  pointer-events: none;
  animation: spinRing linear infinite;
  z-index: 1;
}
.hero__orbit--1 {
  width: 560px; height: 560px;
  right: -60px; top: 50%; transform: translateY(-50%);
  animation-duration: 40s;
}
.hero__orbit--2 {
  width: 700px; height: 700px;
  right: -130px; top: 50%; transform: translateY(-50%);
  border-color: rgba(168,230,207,0.12);
  animation-duration: 60s; animation-direction: reverse;
}
.hero__orbit-node {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--eco-green);
  box-shadow: 0 0 10px rgba(111,207,151,0.7);
  z-index: 2; pointer-events: none;
}
.hero__orbit-node--1 { right: 120px; top: 20%; }
.hero__orbit-node--2 { background: var(--soft-yellow); box-shadow: 0 0 10px rgba(242,201,76,0.7); right: 60px; top: 65%; }
.hero__orbit-node--3 { right: 200px; top: 80%; }

/* ─── Hero UI Mockup ─────────────────────────────────────────── */
.hero-mockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  position: relative; z-index: 3;
}
.hero-mockup__chrome {
  background: #F3F4F6;
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.hero-mockup__dots { display: flex; gap: 6px; }
.hero-mockup__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.hero-mockup__dot--r { background: #FF5F57; }
.hero-mockup__dot--y { background: #FEBC2E; }
.hero-mockup__dot--g { background: #28C840; }
.hero-mockup__url {
  flex: 1; text-align: center;
  font-size: 0.78rem; color: var(--mid-grey);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px;
}
.hero-mockup__header {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.hero-mockup__header-title {
  font-size: 0.875rem; font-weight: 700;
  color: var(--charcoal); font-family: var(--font-heading);
}
.hero-mockup__kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
}
.hero-mockup__kpi-card {
  background: var(--white);
  padding: 14px 12px; text-align: center;
}
.hero-mockup__kpi-card--green { background: #EBF9F2; }
.hero-mockup__kpi-val {
  font-family: var(--font-heading);
  font-size: 1.35rem; font-weight: 800;
  color: var(--charcoal); letter-spacing: -0.03em;
  line-height: 1;
}
.hero-mockup__kpi-val span { font-size: 0.85rem; }
.hero-mockup__kpi-lbl {
  font-size: 0.68rem; color: var(--mid-grey);
  margin-top: 3px; font-weight: 500;
}
.hero-mockup__kpi-trend {
  font-size: 0.65rem; color: var(--forest-green);
  font-weight: 600; margin-top: 2px;
}
.hero-mockup__mid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 12px; padding: 14px;
  border-top: 1px solid var(--border);
}
.hero-mockup__chart-area { display: flex; flex-direction: column; }
.hero-mockup__chart-label { font-size: 0.65rem; color: var(--mid-grey); font-weight: 600; margin-bottom: 8px; }
.hero-mockup__bars {
  display: flex; align-items: flex-end; gap: 4px;
  flex: 1; min-height: 60px;
}
.hero-mockup__bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; height: 100%;
  justify-content: flex-end;
}
.hero-mockup__bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--eco-green), var(--deep-green));
  transition: height 1s var(--ease-out);
  min-height: 4px;
}
.hero-mockup__bar-label { font-size: 0.55rem; color: var(--mid-grey); }
.hero-mockup__scorecard { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.hero-mockup__scorecard-title { font-size: 0.65rem; color: var(--mid-grey); font-weight: 600; margin-bottom: 4px; }
.hero-mockup__scorecard-row { display: flex; align-items: center; gap: 6px; }
.hero-mockup__scorecard-fw { font-size: 0.65rem; font-weight: 700; color: var(--charcoal); min-width: 32px; }
.hero-mockup__progress-bar {
  flex: 1; height: 5px; background: var(--light-grey);
  border-radius: 99px; overflow: hidden;
}
.hero-mockup__progress-fill { height: 100%; border-radius: 99px; }
.hero-mockup__scorecard-pct { font-size: 0.6rem; color: var(--mid-grey); font-weight: 600; min-width: 24px; text-align: right; }
.hero-mockup__bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 14px;
  border-top: 1px solid var(--border);
}
.hero-mockup__tracker-title,
.hero-mockup__insights-label { font-size: 0.65rem; color: var(--mid-grey); font-weight: 600; margin-bottom: 6px; }
.hero-mockup__action-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 0;
}
.hero-mockup__action-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.hero-mockup__action-dot--green { background: var(--eco-green); }
.hero-mockup__action-dot--yellow { background: var(--soft-yellow); }
.hero-mockup__action-dot--grey { background: var(--light-grey); }
.hero-mockup__action-text { font-size: 0.62rem; color: var(--charcoal); flex: 1; font-weight: 500; line-height: 1.3; }
.hero-mockup__action-status { font-size: 0.55rem; font-weight: 700; white-space: nowrap; }
.hero-mockup__action-status--green { color: var(--forest-green); }
.hero-mockup__action-status--yellow { color: #8A6F1A; }
.hero-mockup__action-status--grey { color: var(--mid-grey); }
.hero-mockup__insights {
  background: #EBF9F2;
  border-radius: var(--radius-sm);
  padding: 10px;
}
.hero-mockup__insights-text {
  font-size: 0.63rem; color: var(--deep-green);
  line-height: 1.45; font-style: italic; margin-bottom: 6px;
}
.hero-mockup__insights-link { font-size: 0.6rem; font-weight: 700; color: var(--deep-green); }

/* ─── Trust Strip ────────────────────────────────────────────── */
.trust-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}
.trust-strip__inner { display: flex; align-items: center; justify-content: center; }
.trust-strip__pillars {
  display: flex; align-items: center; gap: 0;
  flex-wrap: wrap; justify-content: center;
}
.trust-strip__pillar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--sp-6);
}
.trust-strip__sep {
  width: 1px; height: 40px;
  background: var(--border);
}
.trust-strip__pillar-icon {
  width: 40px; height: 40px;
  background: #EBF9F2;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-strip__pillar-val {
  font-family: var(--font-heading);
  font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal); letter-spacing: -0.01em;
}
.trust-strip__pillar-lbl {
  font-size: 0.78rem; color: var(--mid-grey); margin-top: 1px;
}

/* ─── Brand Story Section ────────────────────────────────────── */
.brand-story {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.brand-story__track {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.brand-story__track--g { border-top: 3px solid var(--deep-green); }
.brand-story__track--e { border-top: 3px solid var(--eco-green); }
.brand-story__track-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.brand-story__track-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800;
  color: var(--white); flex-shrink: 0;
}
.brand-story__track-logo--g { background: var(--deep-green); }
.brand-story__track-logo--e { background: linear-gradient(135deg, var(--forest-green), var(--eco-green)); }
.brand-story__track-name {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: var(--charcoal);
}
.brand-story__track-sub { font-size: 0.78rem; color: var(--mid-grey); }
.brand-story__steps { display: flex; flex-direction: column; gap: 0; }
.brand-story__step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  position: relative;
}
.brand-story__step-n {
  font-size: 0.65rem; font-weight: 800;
  color: var(--mid-grey); letter-spacing: 0.08em;
  min-width: 22px; margin-top: 2px;
}
.brand-story__step-icon {
  width: 36px; height: 36px;
  background: rgba(11,110,79,0.08);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.brand-story__step-icon--e { background: rgba(111,207,151,0.15); }
.brand-story__step-body { flex: 1; }
.brand-story__step-name {
  font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal);
}
.brand-story__step-sub {
  font-size: 0.78rem; color: var(--mid-grey); margin-top: 2px;
}
.brand-story__step-connector--g,
.brand-story__step-connector--e {
  position: absolute; left: 62px; bottom: 0;
  width: 1px; height: 12px;
}
.brand-story__step-connector--g { background: linear-gradient(180deg, var(--deep-green), transparent); }
.brand-story__step-connector--e { background: linear-gradient(180deg, var(--eco-green), transparent); }

/* Bridge column */
.brand-story__bridge {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding-top: var(--sp-8);
  min-width: 60px;
}
.brand-story__bridge-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-story__bridge-lines { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.brand-story__bridge-line {
  width: 2px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, var(--eco-green), var(--soft-mint));
  opacity: 0.6;
  align-self: center;
}
.brand-story__bridge-label {
  font-size: 0.65rem; font-weight: 700;
  color: var(--deep-green); text-align: center;
  letter-spacing: 0.05em; text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  background: var(--white);
  padding: 8px 4px;
  border: 1px solid rgba(111,207,151,0.3);
  border-radius: 6px;
}

/* ─── Platform Capabilities Cards ────────────────────────────── */
.platform-caps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}
.platform-cap-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: all var(--trans-med);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
}
.platform-cap-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.platform-cap-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(111,207,151,0.3); }
.platform-cap-card:hover::before { transform: scaleX(1); }
.platform-cap-card__num {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}
.platform-cap-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: var(--sp-2);
}
.platform-cap-card__name {
  font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: 8px;
}
.platform-cap-card__desc {
  font-size: 0.85rem; line-height: 1.6; color: var(--mid-grey);
  flex: 1; margin-bottom: var(--sp-2);
}
.platform-cap-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-2); }
.platform-cap-card__arrow {
  font-size: 0.8rem; font-weight: 600; color: var(--deep-green);
  margin-top: auto;
}

/* ─── Differentiation Section ────────────────────────────────── */
.diff-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}
.diff-col {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  position: relative;
  transition: all var(--trans-med);
}
.diff-col:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
}
.diff-col--featured {
  background: rgba(255,255,255,0.1);
  border-color: rgba(242,201,76,0.4);
  box-shadow: 0 0 0 1px rgba(242,201,76,0.2), 0 20px 60px rgba(0,0,0,0.3);
}
.diff-col__badge {
  display: inline-block;
  background: var(--soft-yellow);
  color: #5C4A0F;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 12px; border-radius: 99px;
  margin-bottom: var(--sp-3);
}
.diff-col__icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3);
}
.diff-col__title {
  font-size: 1.15rem; font-weight: 700;
  color: var(--white);
  margin-bottom: var(--sp-2);
}
.diff-col__desc {
  font-size: 0.9rem; line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--sp-3);
}
.diff-col__list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0;
}
.diff-col__list li {
  font-size: 0.82rem; color: rgba(255,255,255,0.7);
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.diff-col__list li::before {
  content: '✓';
  color: var(--eco-green);
  font-weight: 700; font-size: 0.7rem;
  flex-shrink: 0;
}

/* ─── Module Grid ────────────────────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.module-grid-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex; align-items: flex-start; gap: 12px;
  transition: all var(--trans-med);
}
.module-grid-item:hover {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-color: rgba(111,207,151,0.3);
  transform: translateY(-2px);
}
.module-grid-item__icon {
  font-size: 1.4rem; flex-shrink: 0;
  line-height: 1.3;
}
.module-grid-item__name {
  font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: 3px;
}
.module-grid-item__sub {
  font-size: 0.78rem; color: var(--mid-grey); line-height: 1.4;
}

/* ─── Outcome / KPI Cards ────────────────────────────────────── */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.outcome-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: all var(--trans-med);
  position: relative; overflow: hidden;
}
.outcome-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.outcome-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.outcome-card:hover::after { transform: scaleX(1); }
.outcome-card__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.outcome-card__icon { font-size: 1.5rem; }
.outcome-card__val {
  font-family: var(--font-heading);
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.outcome-card__label {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: 8px;
}
.outcome-card__desc {
  font-size: 0.875rem; line-height: 1.65; color: var(--mid-grey);
}

/* ─── Industry Strip Cards ───────────────────────────────────── */
.industry-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}
.industry-strip-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: all var(--trans-med);
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  position: relative; overflow: hidden;
}
.industry-strip-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.industry-strip-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-4px);
  border-color: rgba(111,207,151,0.35);
}
.industry-strip-card:hover::before { transform: scaleX(1); }
.industry-strip-card__icon { font-size: 1.75rem; }
.industry-strip-card__name {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: var(--charcoal);
}
.industry-strip-card__desc {
  font-size: 0.82rem; line-height: 1.6; color: var(--mid-grey); flex: 1;
}
.industry-strip-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.industry-strip-card__link {
  font-size: 0.82rem; font-weight: 700; color: var(--deep-green);
  margin-top: auto;
}

/* ─── Framework Strip Cards ──────────────────────────────────── */
.framework-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
.framework-strip-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-align: center;
  transition: all var(--trans-med);
  position: relative;
}
.framework-strip-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
  border-color: rgba(11,110,79,0.25);
}
.framework-strip-card__abbr {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 800;
  color: var(--deep-green); letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.framework-strip-card__full {
  font-size: 0.78rem; font-weight: 700; color: var(--charcoal);
  margin-bottom: 3px;
}
.framework-strip-card__sub {
  font-size: 0.68rem; color: var(--mid-grey); line-height: 1.3;
}
.framework-strip-card__badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.6rem; font-weight: 800;
  background: var(--soft-yellow); color: #5C4A0F;
  padding: 2px 6px; border-radius: 99px;
}

/* ─── Case Study Cards ───────────────────────────────────────── */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.cs-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--trans-med);
  display: flex; flex-direction: column;
}
.cs-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-5px); }
.cs-card__header {
  padding: var(--sp-3) var(--sp-4);
  background: #EBF9F2;
  display: flex; align-items: center; justify-content: space-between;
}
.cs-card__icon { font-size: 1.5rem; }
.cs-card__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-card__kpis {
  display: flex; gap: 0;
  background: var(--deep-green);
}
.cs-card__kpi {
  flex: 1; padding: 12px 8px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.cs-card__kpi:last-child { border-right: none; }
.cs-card__kpi-val {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 800;
  color: var(--eco-green); letter-spacing: -0.03em;
  line-height: 1;
}
.cs-card__kpi-lbl {
  font-size: 0.65rem; color: rgba(255,255,255,0.65);
  margin-top: 3px; font-weight: 500;
}
.cs-card__body {
  padding: var(--sp-4);
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-3);
}
.cs-card__section { display: flex; flex-direction: column; gap: 4px; }
.cs-card__section--outcome { background: #F5FBF8; border-radius: var(--radius-sm); padding: 12px; }
.cs-card__section-label {
  font-size: 0.7rem; font-weight: 800; color: var(--forest-green);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cs-card__section-text { font-size: 0.85rem; color: var(--charcoal); line-height: 1.6; }
.cs-card__footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.cs-card__company { font-size: 0.8rem; font-weight: 600; color: var(--mid-grey); }
.cs-card__read { font-size: 0.8rem; font-weight: 700; color: var(--deep-green); }

/* ─── Resource Cards ─────────────────────────────────────────── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.resource-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: all var(--trans-med);
  position: relative; overflow: hidden;
}
.resource-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.resource-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.resource-card:hover::before { transform: scaleX(1); }
.resource-card__type {
  display: inline-block;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px; border-radius: 99px;
  align-self: flex-start;
}
.resource-card__title {
  font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.4;
  flex: 1;
}
.resource-card__desc {
  font-size: 0.82rem; color: var(--mid-grey); line-height: 1.6;
}
.resource-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.resource-card__time { font-size: 0.72rem; color: var(--mid-grey); font-weight: 500; }
.resource-card__arrow { font-size: 0.9rem; color: var(--deep-green); font-weight: 700; }

/* ─── Final CTA Block ────────────────────────────────────────── */
.final-cta-block {
  background: linear-gradient(135deg, var(--deep-green) 0%, #0D4F39 50%, #0B3D2E 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  position: relative; overflow: hidden;
}
.final-cta-block__bg-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none;
}
.final-cta-block__bg-orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(111,207,151,0.15), transparent 70%);
  top: -200px; right: -100px;
  animation: orbFloat 10s ease-in-out infinite;
}
.final-cta-block__bg-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(242,201,76,0.1), transparent 70%);
  bottom: -150px; left: -50px;
  animation: orbFloat 14s ease-in-out infinite reverse;
}
.final-cta-block__content { position: relative; z-index: 2; }
.final-cta-block__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(111,207,151,0.12);
  border: 1px solid rgba(111,207,151,0.3);
  color: var(--eco-green);
  padding: 6px 20px; border-radius: 99px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.final-cta-block__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; color: var(--white);
  letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.final-cta-block__desc {
  font-size: 1.0625rem; color: rgba(255,255,255,0.65);
  line-height: 1.7; max-width: 600px; margin: 0 auto var(--sp-6);
}
.final-cta-block__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.final-cta-block__assurance {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); flex-wrap: wrap;
  font-size: 0.8125rem; color: rgba(255,255,255,0.55); font-weight: 500;
}

/* ─── Responsive Overrides ───────────────────────────────────── */
@media (max-width: 1200px) {
  .platform-caps { grid-template-columns: repeat(3, 1fr); }
  .industry-strip { grid-template-columns: repeat(3, 1fr); }
  .framework-strip { grid-template-columns: repeat(3, 1fr); }
  .module-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-story { grid-template-columns: 1fr; gap: var(--sp-3); }
  .brand-story__bridge { flex-direction: row; padding-top: 0; align-items: center; gap: var(--sp-2); }
  .brand-story__bridge-label { writing-mode: horizontal-tb; transform: none; }
  .brand-story__bridge-lines { flex-direction: row; }
  .brand-story__bridge-line { width: 12px; height: 2px; }
}
@media (max-width: 1024px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .hero__orbit, .hero__orbit-node { display: none; }
  .diff-cols { grid-template-columns: 1fr; gap: var(--sp-4); }
  .cs-grid { grid-template-columns: 1fr 1fr; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .trust-strip__sep { display: none; }
  .trust-strip__pillar { padding: 8px var(--sp-3); }
  .platform-caps { grid-template-columns: 1fr 1fr; }
  .industry-strip { grid-template-columns: 1fr 1fr; }
  .framework-strip { grid-template-columns: repeat(3, 1fr); }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .cs-grid { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr; }
  .final-cta-block { padding: var(--sp-8) var(--sp-4); }
}
@media (max-width: 480px) {
  .platform-caps { grid-template-columns: 1fr; }
  .industry-strip { grid-template-columns: 1fr; }
  .framework-strip { grid-template-columns: 1fr 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .trust-strip__pillars { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 var(--sp-3); }
}


/* ============================================================
   ECOPSHUB — Platform Overview Page Styles (v2)
   ============================================================ */

/* ─── Breadcrumb strip ──────────────────────────────────────── */
.plat-breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: var(--mid-grey);
}
.breadcrumb__link {
  color: var(--mid-grey); transition: color var(--trans-fast);
}
.breadcrumb__link:hover { color: var(--deep-green); }
.breadcrumb__sep { color: var(--light-grey); }
.breadcrumb__current { color: var(--charcoal); font-weight: 600; }

/* ─── Platform Hero ──────────────────────────────────────────── */
.plat-hero {
  position: relative;
  background: linear-gradient(135deg, #FAFAFA 0%, #EBF9F2 40%, #F5F1E8 100%);
  overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-16);
}
.plat-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,110,79,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,110,79,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.plat-hero__orbit {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(111,207,151,0.18);
  pointer-events: none;
}
.plat-hero__orbit--1 {
  width: 700px; height: 700px;
  right: -180px; top: -160px;
  animation: spinRing 55s linear infinite;
}
.plat-hero__orbit--2 {
  width: 900px; height: 900px;
  right: -280px; top: -260px;
  border-color: rgba(168,230,207,0.10);
  animation: spinRing 80s linear infinite reverse;
}
.plat-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-10); align-items: center;
}
.plat-hero__copy {}
.plat-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11,110,79,0.08);
  border: 1px solid rgba(11,110,79,0.14);
  color: var(--deep-green);
  padding: 6px 16px; border-radius: 99px;
  font-size: 0.79rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.plat-hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eco-green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.plat-hero__h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-3);
}
.plat-hero__h1-grad {
  background: linear-gradient(135deg, var(--deep-green), var(--eco-green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plat-hero__intro {
  font-size: 1.0625rem; color: var(--mid-grey);
  line-height: 1.75; max-width: 540px;
  margin-bottom: var(--sp-4);
}
.plat-hero__intro strong { color: var(--charcoal); font-weight: 600; }
.plat-hero__pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--sp-5);
}
.plat-pill {
  display: inline-block;
  background: rgba(11,110,79,0.07);
  border: 1px solid rgba(11,110,79,0.12);
  color: var(--deep-green);
  font-size: 0.78rem; font-weight: 600;
  padding: 5px 14px; border-radius: 99px;
  letter-spacing: 0.01em;
}
.plat-hero__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}

/* ─── Platform Hero Layered Screen ──────────────────────────── */
.plat-hero__visual { position: relative; }
.plat-screen {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.plat-screen--main { width: 100%; }
.plat-screen__chrome {
  background: #F3F4F6;
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.plat-screen__dots { display: flex; gap: 6px; }
.plat-screen__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.plat-screen__dot--r { background: #FF5F57; }
.plat-screen__dot--y { background: #FEBC2E; }
.plat-screen__dot--g { background: #28C840; }
.plat-screen__url {
  flex: 1; text-align: center;
  font-size: 0.75rem; color: var(--mid-grey);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px;
}
.plat-screen__nav-mock {
  display: flex; align-items: center; gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: #FAFAFA;
}
.plat-screen__nav-item {
  font-size: 0.72rem; font-weight: 600;
  color: var(--mid-grey);
  padding: 8px 12px;
  cursor: default;
  white-space: nowrap;
}
.plat-screen__nav-item--active {
  color: var(--deep-green);
  border-bottom: 2px solid var(--deep-green);
  margin-bottom: -1px;
}
.plat-screen__kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
}
.plat-screen__kpi {
  background: var(--white); padding: 12px 14px;
}
.plat-screen__kpi--green { background: #EBF9F2; }
.plat-screen__kpi-val {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 800;
  color: var(--charcoal); letter-spacing: -0.03em;
  line-height: 1;
}
.plat-screen__kpi-val span { font-size: 0.8rem; }
.plat-screen__kpi-label { font-size: 0.65rem; color: var(--mid-grey); margin-top: 3px; font-weight: 500; }
.plat-screen__kpi-delta { font-size: 0.63rem; font-weight: 700; margin-top: 2px; }
.plat-screen__kpi-delta--up { color: var(--forest-green); }
.plat-screen__kpi-delta--warn { color: #8A6F1A; }
.plat-screen__body {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 12px; padding: 14px;
  border-top: 1px solid var(--border);
}
.plat-screen__panel-label {
  font-size: 0.65rem; font-weight: 700;
  color: var(--mid-grey); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.plat-screen__bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 72px;
}
.plat-screen__bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  height: 100%; justify-content: flex-end;
}
.plat-screen__bar {
  width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--eco-green) 0%, var(--deep-green) 100%);
  transition: height 1s var(--ease-out);
  min-height: 4px;
}
.plat-screen__bar-label { font-size: 0.5rem; color: var(--mid-grey); }
.plat-screen__side-panel { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.plat-screen__fw-row { display: flex; align-items: center; gap: 6px; }
.plat-screen__fw-name { font-size: 0.65rem; font-weight: 700; color: var(--charcoal); min-width: 28px; }
.plat-screen__fw-bar {
  flex: 1; height: 5px; background: var(--light-grey);
  border-radius: 99px; overflow: hidden;
}
.plat-screen__fw-fill { height: 100%; border-radius: 99px; }
.plat-screen__fw-pct { font-size: 0.6rem; color: var(--mid-grey); font-weight: 600; min-width: 22px; text-align: right; }
.plat-screen__actions-bar {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
}
.plat-screen__actions-label { font-size: 0.62rem; font-weight: 700; color: var(--mid-grey); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.plat-screen__action-items { display: flex; flex-direction: column; gap: 4px; }
.plat-screen__action-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.plat-screen__action-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.plat-screen__action-dot--green { background: var(--eco-green); }
.plat-screen__action-dot--yellow { background: var(--soft-yellow); }
.plat-screen__action-dot--grey { background: #D1D5DB; }
.plat-screen__action-text { font-size: 0.65rem; color: var(--charcoal); font-weight: 500; flex: 1; line-height: 1.3; }
.plat-screen__action-badge { font-size: 0.58rem; font-weight: 700; white-space: nowrap; }
.plat-screen__action-badge--green { color: var(--forest-green); }
.plat-screen__action-badge--yellow { color: #8A6F1A; }
.plat-screen__action-badge--grey { color: var(--mid-grey); }

/* Floating cards */
.plat-floater {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  z-index: 10;
  animation: orbFloat 5s ease-in-out infinite;
}
.plat-floater--insight {
  bottom: 30px; left: -32px;
  animation-delay: 0s;
}
.plat-floater--report {
  top: 60px; right: -32px;
  animation-delay: 2.5s;
}
.plat-floater__icon { font-size: 1.2rem; flex-shrink: 0; }
.plat-floater__label { font-size: 0.62rem; font-weight: 700; color: var(--mid-grey); text-transform: uppercase; letter-spacing: 0.04em; }
.plat-floater__text { font-size: 0.75rem; font-weight: 600; color: var(--charcoal); margin-top: 1px; }

/* ─── Process Loop ───────────────────────────────────────────── */
.plat-loop { background: var(--surface); padding: var(--sp-12) 0; }
.plat-loop__diagram {
  display: flex; align-items: flex-start;
  gap: 0; justify-content: center;
  position: relative; flex-wrap: wrap;
}
.plat-loop__node {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: var(--sp-2);
  position: relative;
  padding: 0 var(--sp-1);
  transition: transform var(--trans-med);
}
.plat-loop__node:hover { transform: translateY(-4px); }
.plat-loop__node-circle {
  width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  position: relative; background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--trans-med);
}
.plat-loop__node:hover .plat-loop__node-circle { box-shadow: var(--shadow-md); }
.plat-loop__node-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
}
.plat-loop__node-num {
  position: absolute; bottom: -4px; right: -4px;
  font-size: 0.62rem; font-weight: 800;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 99px; padding: 1px 6px;
  letter-spacing: 0.04em;
}
.plat-loop__node-name {
  font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 800;
  letter-spacing: -0.01em;
}
.plat-loop__node-desc {
  font-size: 0.78rem; color: var(--mid-grey);
  max-width: 120px; line-height: 1.4;
}
.plat-loop__arrow {
  position: absolute; right: -16px; top: 34px;
  font-size: 1.1rem; color: var(--eco-green);
  font-weight: 700; z-index: 1;
}
.plat-loop__return {
  width: 100%; text-align: center;
  margin-top: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.plat-loop__return-line {
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--eco-green), var(--soft-yellow), var(--eco-green), transparent);
  border-radius: 2px;
}
.plat-loop__return-label {
  font-size: 0.78rem; font-weight: 600;
  color: var(--mid-grey); letter-spacing: 0.03em;
}

/* ─── Feature Sections ───────────────────────────────────────── */
.plat-feature-section {}
.plat-feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-10); align-items: center;
}
.plat-feature--reverse .plat-feature__copy { order: 2; }
.plat-feature--reverse .plat-feature__visual { order: 1; }
.plat-feature__module-tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 99px;
  margin-bottom: var(--sp-2);
}
.plat-feature__lead {
  font-size: 1.0625rem; color: var(--mid-grey);
  line-height: 1.75; margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.plat-feature__checklist {
  display: flex; flex-direction: column; gap: 10px;
}
.plat-feature__check-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9rem; color: var(--charcoal); font-weight: 500;
  line-height: 1.5;
}
.plat-feature__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.plat-feature__capability-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2); margin-top: var(--sp-4);
}

/* ─── Cap Tile ───────────────────────────────────────────────── */
.plat-cap-tile {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  transition: all var(--trans-fast);
}
.plat-cap-tile:hover {
  border-color: rgba(111,207,151,0.35);
  box-shadow: var(--shadow-sm);
}
.plat-cap-tile__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.plat-cap-tile__title { font-size: 0.875rem; font-weight: 700; color: var(--charcoal); }
.plat-cap-tile__desc { font-size: 0.75rem; color: var(--mid-grey); margin-top: 2px; line-height: 1.4; }

/* ─── Shared Card Screen ─────────────────────────────────────── */
.plat-card-screen {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-4);
  overflow: hidden;
  position: relative;
}
.plat-card-screen::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green), var(--soft-yellow));
}
.plat-card-screen__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3); padding-top: 6px;
}
.plat-card-screen__title {
  font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal);
}
.plat-card-screen__panel-label {
  font-size: 0.65rem; font-weight: 700;
  color: var(--mid-grey); text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 10px;
}
.plat-card-screen__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: 0.72rem; color: var(--mid-grey);
}
.plat-card-screen__footer-link { font-weight: 700; color: var(--deep-green); }

/* ─── Data Source Rows ───────────────────────────────────────── */
.plat-source-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.plat-source-row:last-of-type { border-bottom: none; }
.plat-source-row__icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }
.plat-source-row__info { flex: 1; }
.plat-source-row__name { font-size: 0.8rem; font-weight: 600; color: var(--charcoal); margin-bottom: 4px; }
.plat-source-row__bar {
  height: 4px; background: var(--light-grey); border-radius: 99px; overflow: hidden;
}
.plat-source-row__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  border-radius: 99px;
}
.plat-source-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.plat-source-row__type { font-size: 0.6rem; color: var(--mid-grey); font-weight: 600; }

/* ─── Track KPIs mini ────────────────────────────────────────── */
.plat-track-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  margin-bottom: var(--sp-3);
}
.plat-track-kpi {
  background: var(--white); padding: 10px 8px; text-align: center;
}
.plat-track-kpi__val {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 800;
  color: var(--charcoal); line-height: 1; letter-spacing: -0.02em;
}
.plat-track-kpi__label { font-size: 0.62rem; color: var(--mid-grey); margin-top: 2px; font-weight: 500; }
.plat-track-kpi__trend { font-size: 0.58rem; font-weight: 700; margin-top: 2px; }
.plat-track-kpi__trend--up { color: var(--forest-green); }
.plat-track-kpi__trend--warn { color: #8A6F1A; }
.plat-mini-bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 56px; margin-bottom: 6px;
}
.plat-mini-bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  height: 100%; justify-content: flex-end;
}
.plat-mini-bar {
  width: 100%; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--eco-green), var(--deep-green));
  min-height: 3px;
}
.plat-mini-bar-lbl { font-size: 0.5rem; color: var(--mid-grey); }
.plat-scope-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.plat-scope-tag {
  font-size: 0.65rem; font-weight: 600; color: var(--deep-green);
  padding: 3px 10px; border-radius: 99px;
}

/* ─── Report Rows ────────────────────────────────────────────── */
.plat-report-list { display: flex; flex-direction: column; gap: 0; }
.plat-report-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.plat-report-row:last-child { border-bottom: none; }
.plat-report-row__fw {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800;
  color: var(--deep-green); min-width: 36px;
}
.plat-report-row__info { flex: 1; }
.plat-report-row__title { font-size: 0.75rem; font-weight: 600; color: var(--charcoal); margin-bottom: 4px; line-height: 1.3; }
.plat-report-row__bar { height: 4px; background: var(--light-grey); border-radius: 99px; overflow: hidden; }
.plat-report-row__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  border-radius: 99px;
}

/* ─── Improve Rows ───────────────────────────────────────────── */
.plat-improve-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; background: #FAFAFA;
  border-radius: var(--radius-sm); margin-bottom: 6px;
  border: 1px solid var(--border);
}
.plat-improve-row__pri {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--deep-green); color: var(--white);
  font-size: 0.65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.plat-improve-row__body { flex: 1; }
.plat-improve-row__area { font-size: 0.8rem; font-weight: 600; color: var(--charcoal); }
.plat-improve-row__impact { font-size: 0.68rem; color: var(--mid-grey); margin-top: 1px; }

/* ─── Sustain Section ────────────────────────────────────────── */
.plat-sustain-section {
  position: relative; overflow: hidden;
}
.plat-sustain-section__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0B3D2E 0%, #0B6E4F 50%, #0D4F39 100%);
}
.plat-sustain-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
}
.plat-sustain-card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.plat-sustain-card__title { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700; color: var(--white); }
.plat-sustain-card__badge {
  font-size: 0.68rem; font-weight: 700;
  background: rgba(111,207,151,0.15);
  border: 1px solid rgba(111,207,151,0.3);
  color: var(--eco-green);
  padding: 3px 10px; border-radius: 99px;
}
.plat-sustain-step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.plat-sustain-step:last-of-type { border-bottom: none; }
.plat-sustain-step__num {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(111,207,151,0.15);
  border: 1px solid rgba(111,207,151,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800;
  color: var(--eco-green); flex-shrink: 0;
}
.plat-sustain-step__body { flex: 1; }
.plat-sustain-step__name { font-size: 0.875rem; font-weight: 700; color: var(--white); }
.plat-sustain-step__owner { font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-top: 1px; }
.plat-sustain-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.plat-sustain-dot--green { background: var(--eco-green); }
.plat-sustain-dot--yellow { background: var(--soft-yellow); }
.plat-sustain-dot--grey { background: rgba(255,255,255,0.25); }
.plat-sustain-step__status { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.6); white-space: nowrap; }
.plat-sustain-card__loop {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-3); padding: 12px;
  background: rgba(111,207,151,0.08);
  border: 1px solid rgba(111,207,151,0.2);
  border-radius: var(--radius-sm);
}
.plat-sustain-card__loop-icon { font-size: 1.1rem; flex-shrink: 0; }
.plat-sustain-card__loop-text { font-size: 0.75rem; color: rgba(168,230,207,0.85); font-weight: 500; line-height: 1.4; }

/* ─── Architecture Diagram ───────────────────────────────────── */
.plat-arch {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
.plat-arch-layer { margin-bottom: var(--sp-1); }
.plat-arch-layer__label {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mid-grey);
  margin-bottom: var(--sp-2);
}
.plat-arch-layer__cards { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.plat-arch-node {
  font-size: 0.8rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-sm);
  transition: all var(--trans-fast);
}
.plat-arch-node--input {
  background: rgba(11,110,79,0.06);
  border: 1px solid rgba(11,110,79,0.15);
  color: var(--deep-green);
}
.plat-arch-node--module {
  display: flex; align-items: center; gap: 8px;
  background: var(--deep-green); color: var(--white);
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 700;
  flex: 1; justify-content: center;
}
.plat-arch-node--output {
  background: rgba(168,230,207,0.2);
  border: 1px solid rgba(111,207,151,0.35);
  color: var(--forest-green);
}
.plat-arch-arrow {
  text-align: center;
  font-size: 0.75rem; font-weight: 700;
  color: var(--mid-grey); letter-spacing: 0.04em;
  padding: var(--sp-2) 0;
  border-left: 2px dashed rgba(111,207,151,0.3);
  margin-left: 60px; padding-left: var(--sp-3);
}
.plat-arch-layer--core .plat-arch-layer__cards { gap: var(--sp-2); }
.plat-arch-foundation {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed rgba(111,207,151,0.3);
}
.plat-arch-foundation__item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--mid-grey);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 99px;
}

/* ─── Data Flow Grid ─────────────────────────────────────────── */
.plat-flow-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.plat-flow-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.plat-flow-col--middle { position: relative; }
.plat-flow-col__header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--sp-3) var(--sp-4);
}
.plat-flow-col__header--input { background: rgba(11,110,79,0.06); color: var(--deep-green); border-bottom: 2px solid rgba(11,110,79,0.15); }
.plat-flow-col__header--process { background: rgba(47,133,90,0.06); color: #2F855A; border-bottom: 2px solid rgba(47,133,90,0.18); }
.plat-flow-col__header--output { background: rgba(168,230,207,0.2); color: var(--forest-green); border-bottom: 2px solid rgba(111,207,151,0.35); }
.plat-flow-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px var(--sp-4);
  font-size: 0.85rem; color: var(--charcoal); font-weight: 500;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.plat-flow-item:last-child { border-bottom: none; }
.plat-flow-item__dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.plat-flow-item__dot--input { background: rgba(11,110,79,0.5); }
.plat-flow-item__dot--process { background: rgba(47,133,90,0.5); }
.plat-flow-item__dot--output { background: rgba(111,207,151,0.7); }

/* ─── Integrations ───────────────────────────────────────────── */
.plat-integrations { display: flex; flex-direction: column; gap: var(--sp-4); }
.plat-integ-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
}
.plat-integ-group__cat {
  font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  min-width: 110px; flex-shrink: 0;
}
.plat-integ-group__items {
  display: flex; flex-wrap: wrap; gap: 8px; flex: 1;
}
.plat-integ-chip {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: 0.82rem; font-weight: 600; color: var(--charcoal);
  transition: all var(--trans-fast);
}
.plat-integ-chip:hover {
  border-color: rgba(111,207,151,0.4);
  box-shadow: var(--shadow-sm);
}
.plat-api-banner {
  background: linear-gradient(135deg, #EBF9F2, #F5F1E8);
  border: 1px solid rgba(111,207,151,0.3);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.plat-api-banner__icon { font-size: 2rem; flex-shrink: 0; }
.plat-api-banner__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--charcoal); }
.plat-api-banner__desc { font-size: 0.875rem; color: var(--mid-grey); margin-top: 3px; }

/* ─── Security Grid ──────────────────────────────────────────── */
.plat-security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.plat-security-group {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.plat-security-group__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.plat-security-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.plat-security-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: var(--charcoal); font-weight: 500;
  line-height: 1.4;
}
.plat-roles__label {
  font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: var(--sp-3);
}
.plat-roles__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3);
}
.plat-role-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  transition: all var(--trans-med);
  text-align: center;
}
.plat-role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(111,207,151,0.3); }
.plat-role-card__icon { font-size: 1.5rem; margin-bottom: 8px; }
.plat-role-card__role { font-size: 0.82rem; font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.plat-role-card__perms { font-size: 0.72rem; color: var(--mid-grey); line-height: 1.4; }

/* ─── Audit Readiness ────────────────────────────────────────── */
.plat-audit-points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.plat-audit-point {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  transition: all var(--trans-fast);
}
.plat-audit-point:hover { border-color: rgba(111,207,151,0.35); box-shadow: var(--shadow-sm); }
.plat-audit-point__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.plat-audit-point__title { font-size: 0.875rem; font-weight: 700; color: var(--charcoal); }
.plat-audit-point__desc { font-size: 0.775rem; color: var(--mid-grey); margin-top: 2px; line-height: 1.4; }
.plat-audit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.plat-audit-row:last-child { border-bottom: none; }
.plat-audit-row__section { font-size: 0.78rem; font-weight: 600; color: var(--charcoal); flex: 1; line-height: 1.3; }
.plat-audit-row__meta { font-size: 0.65rem; color: var(--mid-grey); white-space: nowrap; }
.plat-audit-row__bar {
  width: 80px; height: 5px; background: var(--light-grey);
  border-radius: 99px; overflow: hidden; flex-shrink: 0;
}
.plat-audit-row__fill { height: 100%; border-radius: 99px; }
.plat-audit-row__pct { font-size: 0.68rem; font-weight: 800; min-width: 28px; text-align: right; }

/* ─── Platform CTA Banner ────────────────────────────────────── */
.plat-cta-banner {
  background: linear-gradient(135deg, var(--deep-green) 0%, #0D4F39 50%, #0B3D2E 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  position: relative; overflow: hidden;
}
.plat-cta-banner__orb {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.plat-cta-banner__orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(111,207,151,0.12), transparent 70%);
  top: -250px; right: -100px;
  animation: orbFloat 12s ease-in-out infinite;
}
.plat-cta-banner__orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(242,201,76,0.08), transparent 70%);
  bottom: -150px; left: -50px;
  animation: orbFloat 16s ease-in-out infinite reverse;
}
.plat-cta-banner__orbit--1 {
  position: absolute;
  width: 450px; height: 450px;
  border: 1px dashed rgba(111,207,151,0.12);
  border-radius: 50%;
  right: -80px; top: -80px;
  animation: spinRing 50s linear infinite;
}
.plat-cta-banner__content { position: relative; z-index: 2; }
.plat-cta-banner__eyebrow {
  display: inline-flex; align-items: center;
  background: rgba(111,207,151,0.1);
  border: 1px solid rgba(111,207,151,0.25);
  color: var(--eco-green);
  padding: 6px 20px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.plat-cta-banner__title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 800; color: var(--white);
  letter-spacing: -0.03em; line-height: 1.2;
  margin-bottom: var(--sp-3);
}
.plat-cta-banner__desc {
  font-size: 1.0625rem; color: rgba(255,255,255,0.6);
  line-height: 1.7; max-width: 560px; margin: 0 auto var(--sp-6);
}
.plat-cta-banner__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.plat-cta-banner__assurance {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5); flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(255,255,255,0.5); font-weight: 500;
}

/* ─── Responsive — Platform Page ─────────────────────────────── */
@media (max-width: 1200px) {
  .plat-hero__inner { grid-template-columns: 1fr; }
  .plat-hero__visual { display: none; }
  .plat-roles__grid { grid-template-columns: repeat(3, 1fr); }
  .plat-arch-layer__cards { flex-wrap: wrap; }
  .plat-arch-node--module { flex: 0 0 auto; }
}
@media (max-width: 1024px) {
  .plat-feature { grid-template-columns: 1fr; }
  .plat-feature--reverse .plat-feature__copy { order: 1; }
  .plat-feature--reverse .plat-feature__visual { order: 2; }
  .plat-flow-grid { grid-template-columns: 1fr; }
  .plat-security-grid { grid-template-columns: 1fr; }
  .plat-audit-points { grid-template-columns: 1fr; }
  .plat-loop__diagram { flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
  .plat-loop__arrow { display: none; }
}
@media (max-width: 768px) {
  .plat-feature__capability-grid { grid-template-columns: 1fr; }
  .plat-roles__grid { grid-template-columns: repeat(2, 1fr); }
  .plat-integ-group { flex-direction: column; align-items: flex-start; }
  .plat-security-row { grid-template-columns: 1fr; }
  .plat-track-kpis { grid-template-columns: repeat(2, 1fr); }
  .plat-screen__kpi-row { grid-template-columns: repeat(2, 1fr); }
  .plat-screen__body { grid-template-columns: 1fr; }
  .plat-cta-banner { padding: var(--sp-8) var(--sp-4); }
}
@media (max-width: 480px) {
  .plat-roles__grid { grid-template-columns: repeat(2, 1fr); }
  .plat-hero__pills { gap: 6px; }
}

/* ================================================================
   SOLUTIONS PAGE — Premium CSS
   Sections: Hero, Trust Strip, Solution Cards, Why Section,
   Industry Grid, Framework Grid, Case Studies, Final CTA
   ================================================================ */

/* ── Solutions Hero ──────────────────────────────────────────── */
.sol-hero {
  position: relative;
  background: linear-gradient(135deg, #FAFAFA 0%, #EBF9F2 45%, #F5F1E8 100%);
  overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-16);
}
.sol-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,110,79,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,110,79,0.032) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.sol-hero__orbit {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(111,207,151,0.16);
  pointer-events: none;
}
.sol-hero__orbit--1 {
  width: 680px; height: 680px;
  right: -150px; top: -150px;
  animation: spinRing 60s linear infinite;
}
.sol-hero__orbit--2 {
  width: 920px; height: 920px;
  right: -250px; top: -250px;
  border-color: rgba(168,230,207,0.09);
  animation: spinRing 90s linear infinite reverse;
}
.sol-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 420px;
  gap: var(--sp-10); align-items: center;
}
.sol-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11,110,79,0.08);
  border: 1px solid rgba(11,110,79,0.14);
  color: var(--deep-green);
  padding: 6px 16px; border-radius: 99px;
  font-size: 0.79rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.sol-hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eco-green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.sol-hero__h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-3);
}
.sol-hero__h1-grad {
  background: linear-gradient(135deg, var(--deep-green), var(--eco-green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sol-hero__intro {
  font-size: 1.05rem; color: var(--mid-grey);
  line-height: 1.75; max-width: 560px;
  margin-bottom: var(--sp-5);
}
.sol-hero__intro strong { color: var(--charcoal); font-weight: 600; }

/* Hero stats row */
.sol-hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(11,110,79,0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
}
.sol-hero__stat {
  text-align: center;
  padding: var(--sp-1) 0;
}
.sol-hero__stat-val {
  font-family: var(--font-heading);
  font-size: 1.6rem; font-weight: 800;
  color: var(--deep-green);
  letter-spacing: -0.03em;
  line-height: 1;
}
.sol-hero__stat-label {
  font-size: 0.72rem; color: var(--mid-grey);
  font-weight: 500; margin-top: 4px;
  line-height: 1.3;
}
.sol-hero__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}

/* Solutions Navigator Card */
.sol-nav-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.sol-nav-card__header {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #EBF9F2, #FAFAFA);
}
.sol-nav-card__title {
  font-family: var(--font-heading);
  font-size: 0.875rem; font-weight: 800;
  color: var(--charcoal); letter-spacing: -0.01em;
}
.sol-nav-card__sub {
  font-size: 0.72rem; color: var(--mid-grey);
  margin-top: 2px;
}
.sol-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: all var(--trans-fast);
  cursor: pointer;
}
.sol-nav-item:last-of-type { border-bottom: none; }
.sol-nav-item:hover {
  background: rgba(11,110,79,0.04);
  transform: translateX(3px);
}
.sol-nav-item__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(11,110,79,0.07);
  border: 1px solid rgba(11,110,79,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.sol-nav-item__body { flex: 1; }
.sol-nav-item__name {
  font-size: 0.875rem; font-weight: 700;
  color: var(--charcoal); line-height: 1.2;
}
.sol-nav-item__badge {
  font-size: 0.65rem; font-weight: 600;
  color: var(--mid-grey); margin-top: 2px;
}
.sol-nav-item__arrow {
  color: var(--mid-grey);
  transition: all var(--trans-fast);
  opacity: 0.5;
}
.sol-nav-item:hover .sol-nav-item__arrow {
  color: var(--deep-green);
  opacity: 1;
  transform: translateX(3px);
}
.sol-nav-card__footer {
  padding: 10px var(--sp-4);
  background: var(--surface);
  font-size: 0.68rem; color: var(--mid-grey);
  font-weight: 500;
  border-top: 1px solid var(--border);
}

/* ── Trust Strip ─────────────────────────────────────────────── */
.sol-trust-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.sol-trust-strip__inner {
  display: flex; align-items: center;
  justify-content: center; gap: var(--sp-8);
  flex-wrap: wrap;
}
.sol-trust-strip__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem; font-weight: 600;
  color: var(--mid-grey);
}
.sol-trust-strip__icon { font-size: 1rem; }
.sol-trust-strip__label { white-space: nowrap; }

/* ── Solution Cards Stack ────────────────────────────────────── */
.sol-cards-stack {
  display: flex; flex-direction: column;
  gap: var(--sp-6);
}
.sol-card {
  background: var(--white);
  border: 1px solid var(--sol-border, rgba(11,110,79,0.14));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--trans-med), transform var(--trans-med);
  position: relative;
}
.sol-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.sol-card__accent {
  height: 4px;
  width: 100%;
}
.sol-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.sol-card__left {
  padding: var(--sp-6);
  border-right: 1px solid var(--border);
}
.sol-card__right {
  padding: var(--sp-6);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sol-card__right-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-3); flex: 1;
}
.sol-card__head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: var(--sp-3);
}
.sol-card__icon-wrap {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sol-card__icon { font-size: 1.7rem; }
.sol-card__num {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 3px;
}
.sol-card__name {
  font-size: 1.625rem; font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1; margin: 0 0 3px;
}
.sol-card__sub {
  font-size: 0.82rem; font-weight: 500;
  color: var(--mid-grey); line-height: 1.3;
}
.sol-card__tagline {
  display: block;
  font-size: 0.9375rem; font-weight: 600;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--sol-bg, rgba(11,110,79,0.06));
  margin-bottom: var(--sp-3);
  font-style: italic;
}
.sol-card__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--sp-3);
}
.sol-card__tag {
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 99px;
  letter-spacing: 0.01em;
}
.sol-card__desc {
  font-size: 0.9375rem; color: var(--mid-grey);
  line-height: 1.7; margin-bottom: var(--sp-4);
}
.sol-card__actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: auto;
}

/* Solution card panels (right side) */
.sol-card__panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
}
.sol-card__panel--outcomes {
  border-color: var(--sol-border, rgba(11,110,79,0.14));
}
.sol-card__panel-label {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: var(--sp-2);
}
.sol-card__features {
  display: flex; flex-direction: column; gap: 8px;
}
.sol-card__feature-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.825rem; color: var(--charcoal);
  font-weight: 500; line-height: 1.45;
}
.sol-card__outcomes {
  display: flex; flex-direction: column; gap: 8px;
}
.sol-card__outcome {
  font-size: 0.84rem; font-weight: 700;
  padding: 8px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--sol-border, rgba(11,110,79,0.14));
  border-radius: 8px;
  line-height: 1.35;
}

/* Platform modules bar */
.sol-card__platform-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sol-border, rgba(11,110,79,0.14));
  font-size: 0.72rem;
}
.sol-card__platform-label {
  font-weight: 800; color: var(--mid-grey);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.sol-card__platform-chip {
  font-weight: 700; font-size: 0.72rem;
  padding: 2px 8px;
  background: rgba(255,255,255,0.8);
  border-radius: 99px;
  border: 1px solid currentColor;
  opacity: 0.85;
}

/* ── Why Ecopshub + Gazelles — dark section ──────────────────── */
.sol-why {
  position: relative; overflow: hidden;
  padding: var(--sp-16) 0;
}
.sol-why__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0B3D2E 0%, #0B6E4F 55%, #0D4F39 100%);
}

/* Dual track layout */
.sol-dual-track {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.sol-dual-col__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--sp-3);
}
.sol-dual-col__label-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sol-dual-col__label-dot--g { background: var(--eco-green); }
.sol-dual-col__label-dot--e { background: var(--soft-mint); }
.sol-dual-col__steps {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sol-dual-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  transition: all var(--trans-fast);
}
.sol-dual-step:hover {
  background: rgba(255,255,255,0.1);
  transform: translateX(3px);
}
.sol-dual-step--e:hover { transform: translateX(-3px); }
.sol-dual-step__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(111,207,151,0.18);
  border: 1px solid rgba(111,207,151,0.35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.68rem; font-weight: 800;
  color: var(--eco-green); flex-shrink: 0;
}
.sol-dual-step__num--e {
  background: rgba(168,230,207,0.12);
  border-color: rgba(168,230,207,0.3);
  color: var(--soft-mint);
}
.sol-dual-step__icon {
  font-size: 1.1rem; flex-shrink: 0;
  margin-top: 1px;
}
.sol-dual-step__body { flex: 1; }
.sol-dual-step__name {
  font-family: var(--font-heading);
  font-size: 0.9rem; font-weight: 800;
  color: var(--white); margin-bottom: 3px;
}
.sol-dual-step__desc {
  font-size: 0.775rem; color: rgba(255,255,255,0.5);
  line-height: 1.45;
}

/* Bridge column */
.sol-dual-bridge {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center;
  padding: var(--sp-4) 0;
  position: relative;
}
.sol-dual-bridge__line {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(111,207,151,0.35), transparent);
  z-index: 0;
}
.sol-dual-bridge__icon {
  font-size: 1.5rem; z-index: 1;
  background: rgba(11,110,79,0.8);
  border: 1px solid rgba(111,207,151,0.3);
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.sol-dual-bridge__label {
  font-size: 0.78rem; font-weight: 800;
  color: var(--eco-green);
  z-index: 1;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sol-dual-bridge__sub {
  font-size: 0.68rem; color: rgba(255,255,255,0.45);
  line-height: 1.4; max-width: 130px; z-index: 1;
}

/* Three differentiator pillars */
.sol-why-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.sol-why-pillar {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: background var(--trans-fast);
}
.sol-why-pillar:hover { background: rgba(255,255,255,0.11); }
.sol-why-pillar__icon {
  font-size: 1.8rem; margin-bottom: var(--sp-2);
}
.sol-why-pillar__title {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 800;
  color: var(--white); margin-bottom: var(--sp-1);
  letter-spacing: -0.01em;
}
.sol-why-pillar__desc {
  font-size: 0.875rem; color: rgba(255,255,255,0.55);
  line-height: 1.65;
}

/* ── Industry Grid ───────────────────────────────────────────── */
.sol-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.sol-industry-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: all var(--trans-med);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sol-industry-card:hover {
  border-color: rgba(111,207,151,0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.sol-industry-card__icon {
  font-size: 1.6rem;
}
.sol-industry-card__name {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 800;
  color: var(--charcoal); letter-spacing: -0.01em;
}
.sol-industry-card__solutions {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.sol-industry-card__solution-tag {
  font-size: 0.68rem; font-weight: 600;
  background: rgba(11,110,79,0.07);
  border: 1px solid rgba(11,110,79,0.12);
  color: var(--deep-green);
  padding: 3px 8px; border-radius: 99px;
  line-height: 1.4;
}
.sol-industry-card__link {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--deep-green);
  margin-top: auto; padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

/* ── Framework Grid ──────────────────────────────────────────── */
.sol-fw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.sol-fw-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  transition: all var(--trans-fast);
  overflow: hidden;
  position: relative;
}
.sol-fw-card:hover {
  border-color: rgba(111,207,151,0.35);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.sol-fw-card__top {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.sol-fw-card__code {
  font-family: var(--font-heading);
  font-size: 1.05rem; font-weight: 800;
  letter-spacing: -0.02em;
}
.sol-fw-card__region {
  font-size: 0.62rem; font-weight: 700;
  background: rgba(11,110,79,0.08);
  border: 1px solid rgba(11,110,79,0.12);
  color: var(--deep-green);
  padding: 2px 7px; border-radius: 99px;
}
.sol-fw-card__solutions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: var(--sp-2);
}
.sol-fw-card__sol-tag {
  font-size: 0.65rem; font-weight: 600;
  color: var(--mid-grey);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 99px;
}
.sol-fw-card__bar {
  height: 3px;
  border-radius: 99px;
  opacity: 0.6;
  transition: opacity var(--trans-fast);
}
.sol-fw-card:hover .sol-fw-card__bar { opacity: 1; }

/* ── Case Study Cards ────────────────────────────────────────── */
.sol-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.sol-cs-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--trans-med);
  display: flex; flex-direction: column;
}
.sol-cs-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.sol-cs-card__header {
  padding: var(--sp-4);
  display: flex; align-items: flex-end;
  justify-content: space-between;
}
.sol-cs-card__sector {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 800;
  color: rgba(255,255,255,0.95);
}
.sol-cs-card__region {
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.18);
  padding: 3px 8px; border-radius: 99px;
}
.sol-cs-card__body {
  padding: var(--sp-4); flex: 1;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sol-cs-card__section-label {
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid-grey);
}
.sol-cs-card__text {
  font-size: 0.875rem; color: var(--charcoal);
  line-height: 1.6; margin: 0;
}
.sol-cs-card__outcomes {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: var(--sp-1);
}
.sol-cs-card__outcome {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem; font-weight: 700;
}
.sol-cs-card__outcome-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.sol-cs-card__footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.sol-cs-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.84rem; font-weight: 700;
  transition: gap var(--trans-fast);
}
.sol-cs-card:hover .sol-cs-card__link { gap: 10px; }

/* ── Final CTA Banner ────────────────────────────────────────── */
.sol-final-cta {
  background: linear-gradient(135deg, var(--deep-green) 0%, #0D4F39 55%, #0B3D2E 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-14) var(--sp-10);
  text-align: center;
  position: relative; overflow: hidden;
}
.sol-final-cta__orb {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.sol-final-cta__orb--1 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(111,207,151,0.13), transparent 70%);
  top: -220px; right: -80px;
  animation: orbFloat 12s ease-in-out infinite;
}
.sol-final-cta__orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(242,201,76,0.07), transparent 70%);
  bottom: -160px; left: -60px;
  animation: orbFloat 16s ease-in-out infinite reverse;
}
.sol-final-cta__orbit {
  position: absolute;
  width: 500px; height: 500px;
  border: 1px dashed rgba(111,207,151,0.1);
  border-radius: 50%;
  right: -100px; top: -100px;
  animation: spinRing 55s linear infinite;
  pointer-events: none;
}
.sol-final-cta__content { position: relative; z-index: 2; }
.sol-final-cta__eyebrow {
  display: inline-flex; align-items: center;
  background: rgba(111,207,151,0.1);
  border: 1px solid rgba(111,207,151,0.25);
  color: var(--eco-green);
  padding: 6px 20px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.sol-final-cta__title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 800; color: var(--white);
  letter-spacing: -0.03em; line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.sol-final-cta__title-sub {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sol-final-cta__desc {
  font-size: 1.05rem; color: rgba(255,255,255,0.6);
  line-height: 1.7; max-width: 560px; margin: 0 auto var(--sp-6);
}
.sol-final-cta__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.sol-final-cta__assurance {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5); flex-wrap: wrap;
  font-size: 0.8rem; color: rgba(255,255,255,0.5); font-weight: 500;
}

/* ── Solutions Responsive ────────────────────────────────────── */
@media (max-width: 1200px) {
  .sol-hero__inner { grid-template-columns: 1fr; }
  .sol-hero__visual { display: none; }
  .sol-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .sol-fw-grid { grid-template-columns: repeat(3, 1fr); }
  .sol-dual-track { grid-template-columns: 1fr; }
  .sol-dual-bridge { display: none; }
}
@media (max-width: 1024px) {
  .sol-card__inner { grid-template-columns: 1fr; }
  .sol-card__left { border-right: none; border-bottom: 1px solid var(--border); }
  .sol-card__right { background: var(--white); }
  .sol-why-pillars { grid-template-columns: 1fr 1fr; }
  .sol-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-cs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sol-card__right-top { grid-template-columns: 1fr; }
  .sol-fw-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-why-pillars { grid-template-columns: 1fr; }
  .sol-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-cs-grid { grid-template-columns: 1fr; }
  .sol-trust-strip__inner { gap: var(--sp-4); }
  .sol-final-cta { padding: var(--sp-8) var(--sp-4); }
}
@media (max-width: 480px) {
  .sol-industry-grid { grid-template-columns: 1fr; }
  .sol-fw-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SOLUTIONS OVERVIEW v3 — solv3- namespace
   8-card grid, dual-track methodology, industries, frameworks,
   case studies, FAQ, guides, CTA banner
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.solv3-hero {
  position: relative;
  background: linear-gradient(160deg, var(--deep-forest) 0%, #0d3d28 55%, #0b3020 100%);
  overflow: hidden;
  padding: var(--sp-16) 0 var(--sp-14);
}
.solv3-hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(11,110,79,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,110,79,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
.solv3-hero__orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(11,110,79,0.15);
  pointer-events: none; z-index: 0;
}
.solv3-hero__orbit--1 {
  width: 560px; height: 560px;
  top: -160px; right: -140px;
  animation: orbitSpin 28s linear infinite;
}
.solv3-hero__orbit--2 {
  width: 820px; height: 820px;
  top: -300px; right: -320px;
  border-style: dashed;
  animation: orbitSpin 42s linear infinite reverse;
}
.solv3-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: var(--sp-8);
  max-width: 700px;
}
.solv3-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(168,230,207,0.75);
}
.solv3-hero__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eco-green); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(11,110,79,0.25);
}
.solv3-hero__h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800; line-height: 1.12;
  color: var(--white); letter-spacing: -0.02em;
  margin: 0;
}
.solv3-hero__h1-accent {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.solv3-hero__desc {
  font-size: 1.0625rem; line-height: 1.7;
  color: rgba(255,255,255,0.60); max-width: 600px; margin: 0;
}
.solv3-hero__desc strong { color: rgba(255,255,255,0.88); }
.solv3-hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-1);
}
.solv3-hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  max-width: 700px;
}
.solv3-hero__stat {
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid rgba(255,255,255,0.07);
  text-align: center;
}
.solv3-hero__stat:last-child { border-right: none; }
.solv3-hero__stat-val {
  font-size: 1.5rem; font-weight: 800;
  color: var(--eco-green); line-height: 1.1;
}
.solv3-hero__stat-lbl {
  font-size: 0.72rem; color: rgba(255,255,255,0.45);
  font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Trust strip ───────────────────────────────────────────── */
.solv3-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.solv3-strip__inner {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-4) 0;
}
.solv3-strip__item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.8125rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}

/* ── 8-card grid ───────────────────────────────────────────── */
.solv3-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.solv3-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  cursor: default;
}
.solv3-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 6px 28px rgba(11,110,79,0.10), 0 0 0 3px rgba(11,110,79,0.05);
  transform: translateY(-3px);
}
.solv3-card__bar {
  height: 3px; width: 100%; flex-shrink: 0;
}
.solv3-card__body {
  padding: var(--sp-5); display: flex; flex-direction: column;
  gap: var(--sp-3); flex: 1;
}
.solv3-card__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.solv3-card__icon-wrap {
  width: 46px; height: 46px; border-radius: 12px;
  border: 1.5px solid; display: grid; place-items: center;
  flex-shrink: 0;
}
.solv3-card__icon { font-size: 1.4rem; line-height: 1; }
.solv3-card__name {
  font-size: 0.975rem; font-weight: 700; color: var(--text-dark);
  line-height: 1.3; margin: 0 0 var(--sp-1);
}
.solv3-card__tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.solv3-card__tag {
  font-size: 0.69rem; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; border: 1px solid; letter-spacing: 0.02em;
}
.solv3-card__tagline {
  font-size: 0.825rem; line-height: 1.5;
  color: var(--text-muted); margin: 0;
}
.solv3-card__features {
  display: flex; flex-direction: column; gap: var(--sp-2); flex: 1;
}
.solv3-card__feat {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: 0.8rem; color: var(--text-body); line-height: 1.4;
}
.solv3-card__outcomes {
  display: flex; flex-direction: column; gap: 5px; margin-top: auto;
}
.solv3-card__outcome-chip {
  display: block; font-size: 0.75rem; font-weight: 700;
  padding: 4px 10px; border-radius: 8px; border: 1px solid;
  line-height: 1.4;
}
.solv3-card__footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.solv3-card__cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  transition: gap 0.18s ease;
}
.solv3-card:hover .solv3-card__cta { gap: 8px; }
.solv3-card__demo {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--border);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.solv3-card__demo:hover {
  border-color: var(--eco-green); color: var(--eco-green);
}

/* ── Why Ecopshub + Gazelles ───────────────────────────────── */
.solv3-why {
  position: relative; padding: var(--sp-16) 0;
  overflow: hidden;
}
.solv3-why__bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #0b3a26 0%, var(--deep-forest) 40%, #061e14 100%);
}
/* Dual-track layout */
.solv3-dual {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.solv3-dual__col {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.solv3-dual__col-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-2);
}
.solv3-dual__col-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.solv3-dual__col-dot--g { background: var(--eco-green); }
.solv3-dual__col-dot--e { background: var(--soft-mint); }
.solv3-dual__step {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.solv3-dual__step:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(11,110,79,0.35);
}
.solv3-dual__step-num {
  font-size: 0.68rem; font-weight: 800;
  color: rgba(255,255,255,0.25); min-width: 20px;
  padding-top: 2px;
}
.solv3-dual__step-num--e { color: rgba(188,245,225,0.3); }
.solv3-dual__step-icon {
  font-size: 1.2rem; line-height: 1; flex-shrink: 0; padding-top: 1px;
}
.solv3-dual__step-name {
  font-size: 0.875rem; font-weight: 700;
  color: rgba(255,255,255,0.88); margin-bottom: 3px;
}
.solv3-dual__step-desc {
  font-size: 0.78rem; line-height: 1.5;
  color: rgba(255,255,255,0.45);
}
/* Bridge column */
.solv3-dual__bridge {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-2); padding-top: var(--sp-8);
}
.solv3-dual__bridge-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(11,110,79,0.6), transparent);
}
.solv3-dual__bridge-icon {
  font-size: 1.4rem; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(11,110,79,0.2);
  border: 1.5px solid rgba(11,110,79,0.4);
  display: grid; place-items: center;
}
.solv3-dual__bridge-label {
  font-size: 0.72rem; font-weight: 700; text-align: center;
  color: rgba(255,255,255,0.6); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.solv3-dual__bridge-sub {
  font-size: 0.69rem; text-align: center;
  color: rgba(255,255,255,0.3); line-height: 1.4;
}
/* Three pillars */
.solv3-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.solv3-pillar {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; padding: var(--sp-5);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.solv3-pillar:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(11,110,79,0.4);
}
.solv3-pillar__icon {
  font-size: 1.8rem; margin-bottom: var(--sp-3); line-height: 1;
}
.solv3-pillar__title {
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,0.92); margin-bottom: var(--sp-2);
}
.solv3-pillar__desc {
  font-size: 0.84rem; line-height: 1.6;
  color: rgba(255,255,255,0.48);
}

/* ── Industry grid ─────────────────────────────────────────── */
.solv3-industry-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.solv3-industry-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  color: inherit;
}
.solv3-industry-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 4px 18px rgba(11,110,79,0.08);
  transform: translateY(-2px);
}
.solv3-industry-card__icon { font-size: 1.8rem; line-height: 1; }
.solv3-industry-card__name {
  font-size: 0.975rem; font-weight: 700;
  color: var(--text-dark); margin: 0;
}
.solv3-industry-card__solutions {
  display: flex; flex-wrap: wrap; gap: 5px; flex: 1;
}
.solv3-industry-card__tag {
  font-size: 0.69rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(11,110,79,0.07);
  color: var(--eco-green);
  border: 1px solid rgba(11,110,79,0.15);
}
.solv3-industry-card__cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8rem; font-weight: 700; color: var(--eco-green);
  margin-top: var(--sp-2);
  transition: gap 0.18s ease;
}
.solv3-industry-card:hover .solv3-industry-card__cta { gap: 8px; }

/* ── Framework grid ────────────────────────────────────────── */
.solv3-fw-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.solv3-fw-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative; overflow: hidden;
}
.solv3-fw-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 4px 16px rgba(11,110,79,0.08);
}
.solv3-fw-card__top {
  display: flex; align-items: center;
  justify-content: space-between;
}
.solv3-fw-card__code {
  font-size: 0.975rem; font-weight: 800; letter-spacing: -0.01em;
}
.solv3-fw-card__region {
  font-size: 0.68rem; font-weight: 700;
  background: rgba(11,110,79,0.08); color: var(--eco-green);
  padding: 2px 7px; border-radius: 20px;
  border: 1px solid rgba(11,110,79,0.15);
}
.solv3-fw-card__sols {
  display: flex; flex-wrap: wrap; gap: 4px; flex: 1;
}
.solv3-fw-card__sol {
  font-size: 0.69rem; font-weight: 600;
  color: var(--text-muted);
  padding: 2px 7px; border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.solv3-fw-card__bar {
  height: 3px; border-radius: 3px; width: 0%;
  transition: width 0.5s ease 0.1s;
  margin-top: auto;
}
.solv3-fw-card:hover .solv3-fw-card__bar { width: 100%; }

/* ── Case study grid ───────────────────────────────────────── */
.solv3-cs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.solv3-cs-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.solv3-cs-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 6px 24px rgba(11,110,79,0.10);
  transform: translateY(-3px);
}
.solv3-cs-card__head {
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between;
}
.solv3-cs-card__sector {
  font-size: 0.875rem; font-weight: 700; color: var(--white);
}
.solv3-cs-card__region {
  font-size: 0.72rem; font-weight: 600;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  padding: 2px 9px; border-radius: 20px;
}
.solv3-cs-card__body {
  padding: var(--sp-5); flex: 1;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.solv3-cs-card__lbl {
  font-size: 0.69rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: 2px;
}
.solv3-cs-card__txt {
  font-size: 0.825rem; line-height: 1.55;
  color: var(--text-body); margin: 0;
}
.solv3-cs-card__outcomes {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.solv3-cs-card__outcome {
  display: flex; align-items: center; gap: 8px;
}
.solv3-cs-card__outcome-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.solv3-cs-card__foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
}
.solv3-cs-card__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  transition: gap 0.18s ease;
}
.solv3-cs-card:hover .solv3-cs-card__link { gap: 8px; }

/* ── Final CTA ─────────────────────────────────────────────── */
.solv3-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #062718 0%, #0b3d28 50%, #0d4a32 100%);
  border-radius: 24px; padding: var(--sp-14) var(--sp-10);
  text-align: center;
  border: 1px solid rgba(11,110,79,0.35);
}
.solv3-cta__orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.solv3-cta__orb--1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(11,110,79,0.25) 0%, transparent 65%);
  top: -120px; right: -100px;
}
.solv3-cta__orb--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(188,245,225,0.08) 0%, transparent 65%);
  bottom: -80px; left: -60px;
}
.solv3-cta__ring {
  position: absolute; z-index: 0;
  width: 700px; height: 700px;
  border-radius: 50%;
  border: 1px dashed rgba(11,110,79,0.15);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
  animation: orbitSpin 50s linear infinite;
}
.solv3-cta__inner {
  position: relative; z-index: 2;
  max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-4);
}
.solv3-cta__eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--eco-green);
}
.solv3-cta__title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800; color: var(--white);
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0;
}
.solv3-cta__title-accent {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.solv3-cta__desc {
  font-size: 0.9625rem; line-height: 1.65;
  color: rgba(255,255,255,0.55); max-width: 520px; margin: 0;
}
.solv3-cta__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center; margin-top: var(--sp-1);
}
.solv3-cta__assurance {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  justify-content: center;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.40);
}

/* ── Solutions v3 Responsive ───────────────────────────────── */
@media (max-width: 1280px) {
  .solv3-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .solv3-dual { grid-template-columns: 1fr 90px 1fr; }
  .solv3-fw-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .solv3-grid { grid-template-columns: repeat(2, 1fr); }
  .solv3-pillars { grid-template-columns: repeat(2, 1fr); }
  .solv3-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .solv3-cs-grid { grid-template-columns: repeat(2, 1fr); }
  .solv3-dual { grid-template-columns: 1fr; }
  .solv3-dual__bridge {
    flex-direction: row; justify-content: center;
    padding: 0; gap: var(--sp-3);
  }
  .solv3-dual__bridge-line { width: 60px; height: 1px; }
  .solv3-hero__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .solv3-hero { padding: var(--sp-12) 0 var(--sp-10); }
  .solv3-grid { grid-template-columns: 1fr; }
  .solv3-pillars { grid-template-columns: 1fr; }
  .solv3-cs-grid { grid-template-columns: 1fr; }
  .solv3-fw-grid { grid-template-columns: repeat(2, 1fr); }
  .solv3-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .solv3-cta { padding: var(--sp-10) var(--sp-5); }
  .solv3-cta__title { font-size: 1.75rem; }
  .solv3-strip__inner { gap: var(--sp-3) var(--sp-4); justify-content: center; }
}
@media (max-width: 480px) {
  .solv3-hero__h1 { font-size: 1.85rem; }
  .solv3-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .solv3-industry-grid { grid-template-columns: 1fr; }
  .solv3-fw-grid { grid-template-columns: 1fr 1fr; }
  .solv3-cta__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   SOLUTION DETAIL PAGE — sd- namespace
   Premium 15-section template: hero · challenge · help ·
   loop · gazelles · features · outcomes · frameworks ·
   case study · FAQ · links · other solutions · CTA band
   ============================================================ */

/* ── §1 Shared variables (gold accent, used selectively) ─── */
:root {
  --gold:          #F2C94C;
  --gold-dark:     #C9A227;
  --gold-light:    rgba(242,201,76,0.12);
  --deep-forest:   #0B3D2E;
  --text-dark:     var(--charcoal);
  --text-body:     #374151;
  --text-muted:    var(--mid-grey);
}

/* ── §2 HERO ─────────────────────────────────────────────── */
.sd-hero {
  position: relative;
  background: linear-gradient(150deg, #0a2d1f 0%, #0b3d2e 45%, #062618 100%);
  overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-16);
}
.sd-hero__bg-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(11,110,79,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,110,79,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
}
.sd-hero__orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(11,110,79,0.12);
  pointer-events: none; z-index: 0;
}
.sd-hero__orbit--1 {
  width: 640px; height: 640px;
  top: -200px; right: -180px;
  animation: orbitSpin 32s linear infinite;
}
.sd-hero__orbit--2 {
  width: 960px; height: 960px;
  top: -380px; right: -360px;
  border-style: dashed; opacity: 0.5;
  animation: orbitSpin 50s linear infinite reverse;
}
.sd-hero__layout {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}
/* copy column */
.sd-hero__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.sd-hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 5px 14px; border-radius: var(--radius-full);
  border: 1.5px solid;
  font-size: 0.78rem; font-weight: 700;
  width: fit-content;
}
.sd-hero__h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800; line-height: 1.1;
  color: var(--white); letter-spacing: -0.025em;
  margin: 0;
}
.sd-hero__sub {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4;
  color: rgba(168,230,207,0.75); margin: 0;
}
.sd-hero__intro {
  font-size: 0.925rem; line-height: 1.7;
  color: rgba(255,255,255,0.50); margin: 0;
  max-width: 520px;
}
.sd-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
/* KPI strip */
.sd-hero__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(4px);
  margin-top: var(--sp-2);
}
.sd-hero__kpi {
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.sd-hero__kpi:last-child { border-right: none; }
.sd-hero__kpi-val {
  font-size: 1.35rem; font-weight: 800; line-height: 1.1;
}
.sd-hero__kpi-label {
  font-size: 0.69rem; color: rgba(255,255,255,0.5);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 2px;
}
.sd-hero__kpi-delta {
  font-size: 0.65rem; color: rgba(255,255,255,0.3);
  margin-top: 1px;
}

/* ── Dashboard visual (hero right panel) ─────────────────── */
.sd-dash {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2);
  overflow: hidden;
  max-width: 520px;
}
.sd-dash__chrome {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 14px;
  background: #1A2E25;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sd-dash__dots { display: flex; gap: 5px; }
.sd-dash__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.sd-dash__dot--r { background: #FF5F57; }
.sd-dash__dot--y { background: #FFBD2E; }
.sd-dash__dot--g { background: #28CA41; }
.sd-dash__url {
  flex: 1; font-size: 0.72rem; color: rgba(255,255,255,0.35);
  font-family: var(--font-body); text-align: center;
  background: rgba(255,255,255,0.06); border-radius: 6px;
  padding: 3px 10px;
}
.sd-dash__tag {
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
/* body split */
.sd-dash__body {
  display: grid; grid-template-columns: 110px 1fr;
}
/* sidebar */
.sd-dash__sidebar {
  background: #F7FAF9;
  border-right: 1px solid var(--border);
  padding: 10px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.sd-dash__nav-item {
  font-size: 0.7rem; font-weight: 500;
  padding: 7px 12px; color: var(--mid-grey);
  border-radius: 6px; margin: 0 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.sd-dash__nav-item--active { font-weight: 700; }
/* main area */
.sd-dash__main {
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
/* KPI cards row */
.sd-dash__kpi-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.sd-dash__kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 10px;
}
.sd-dash__kpi-label {
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--mid-grey); margin-bottom: 3px;
}
.sd-dash__kpi-val {
  font-size: 1.1rem; font-weight: 800;
  line-height: 1; font-family: var(--font-heading);
}
.sd-dash__kpi-delta {
  font-size: 0.6rem; font-weight: 600; margin-top: 2px;
}
.sd-dash__kpi-delta--up { color: #2F855A; }
/* framework bars */
.sd-dash__fw-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.sd-dash__fw-label {
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--mid-grey); margin-bottom: 3px;
}
.sd-dash__fw-row {
  display: flex; align-items: center; gap: 6px;
}
.sd-dash__fw-name {
  font-size: 0.62rem; font-weight: 700;
  color: var(--charcoal); min-width: 34px;
}
.sd-dash__fw-track {
  flex: 1; height: 5px; background: var(--light-grey);
  border-radius: 99px; overflow: hidden;
}
.sd-dash__fw-fill {
  height: 100%; border-radius: 99px;
  transition: width 1.2s var(--ease-out);
}
.sd-dash__fw-pct {
  font-size: 0.6rem; font-weight: 700;
  color: var(--mid-grey); min-width: 24px; text-align: right;
}
/* status bar */
.sd-dash__status-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.sd-dash__status-dot {
  width: 6px; height: 6px; border-radius: 50; flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
.sd-dash__status-text {
  font-size: 0.6rem; color: var(--mid-grey); font-weight: 500;
}
/* floater card */
.sd-dash__floater {
  position: absolute;
  bottom: 24px; right: -16px;
  background: var(--white);
  border: 1.5px solid;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  animation: orbFloat 5s ease-in-out infinite;
  z-index: 10;
}
.sd-dash__floater-icon { font-size: 1.2rem; flex-shrink: 0; }
.sd-dash__floater-label {
  font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mid-grey);
}
.sd-dash__floater-text {
  font-size: 0.7rem; font-weight: 600;
  color: var(--charcoal); margin-top: 1px;
}

/* ── §3 Challenge ─────────────────────────────────────────── */
.sd-challenge__layout {
  display: grid; grid-template-columns: 380px 1fr;
  gap: var(--sp-10); align-items: start;
}
.sd-challenge__title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--text-dark);
  margin: var(--sp-2) 0 var(--sp-3);
}
.sd-challenge__desc {
  font-size: 0.9625rem; line-height: 1.7;
  color: var(--text-body);
}
.sd-challenge__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.sd-challenge__card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: var(--sp-4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sd-challenge__card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 4px 16px rgba(11,110,79,0.07);
}
.sd-challenge__card-icon { font-size: 1.6rem; margin-bottom: var(--sp-2); }
.sd-challenge__card-title {
  font-size: 0.9rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: 6px;
}
.sd-challenge__card-desc {
  font-size: 0.825rem; line-height: 1.55;
  color: var(--text-muted);
}

/* ── §4 Help panels ───────────────────────────────────────── */
.sd-help__panels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.sd-help__panel {
  background: var(--white);
  border: 1.5px solid;
  border-radius: 16px; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-help__panel:hover {
  box-shadow: 0 6px 24px rgba(11,110,79,0.09);
  transform: translateY(-3px);
}
.sd-help__panel-tag {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  width: fit-content; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sd-help__panel-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text-dark); line-height: 1.3; margin: 0;
}
.sd-help__panel-desc {
  font-size: 0.875rem; line-height: 1.65;
  color: var(--text-muted); margin: 0; flex: 1;
}
/* mini visuals */
.sd-help__panel-visual {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.sd-help__mini-vis {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.sd-help__source-chip {
  font-size: 0.72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-body);
}
.sd-help__source-arrow {
  font-size: 0.72rem; font-weight: 700;
  color: var(--deep-green); margin-top: 4px; width: 100%;
}
.sd-help__fw-chip {
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; border: 1px solid;
}
/* governance flow */
.sd-help__mini-vis--gov {
  flex-direction: column; gap: 4px;
}
.sd-help__gov-step {
  display: flex; align-items: center; gap: 8px; position: relative;
}
.sd-help__gov-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.65rem; font-weight: 800; color: var(--white);
}
.sd-help__gov-name {
  font-size: 0.78rem; font-weight: 600; color: var(--text-dark);
}
.sd-help__gov-arrow {
  font-size: 0.7rem; color: var(--mid-grey);
  margin-left: 11px;
}

/* ── §5 Platform Loop ─────────────────────────────────────── */
.sd-loop {
  position: relative; padding: var(--sp-16) 0; overflow: hidden;
}
.sd-loop__bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #062618 0%, var(--deep-forest) 50%, #0a2d1f 100%);
}
.sd-loop__steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3); position: relative;
}
.sd-loop__step {
  position: relative; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: var(--sp-5);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sd-loop__step:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(11,110,79,0.45);
  transform: translateY(-4px);
}
/* connector between steps */
.sd-loop__connector {
  position: absolute; top: 48px;
  right: calc(-1 * var(--sp-3) / 2 - 1px);
  width: var(--sp-3); height: 2px;
  background: linear-gradient(90deg, rgba(11,110,79,0.4), rgba(11,110,79,0.1));
  z-index: 3;
}
.sd-loop__step-head {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.sd-loop__step-circle {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid; display: grid; place-items: center;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
}
.sd-loop__step:hover .sd-loop__step-circle {
  box-shadow: 0 0 0 6px rgba(11,110,79,0.12);
}
.sd-loop__step-icon { font-size: 1.3rem; line-height: 1; }
.sd-loop__step-num {
  font-size: 0.65rem; font-weight: 800;
  color: rgba(255,255,255,0.28); letter-spacing: 0.04em;
}
.sd-loop__step-name {
  font-size: 0.875rem; font-weight: 700;
  color: rgba(255,255,255,0.88);
}
.sd-loop__step-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.sd-loop__step-desc {
  font-size: 0.78rem; line-height: 1.55;
  color: rgba(255,255,255,0.45); text-align: center;
}
.sd-loop__step-bullets {
  display: flex; flex-direction: column; gap: 5px;
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sd-loop__step-bullet {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; color: rgba(255,255,255,0.38); line-height: 1.4;
}
.sd-loop__step-bullet-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; opacity: 0.8;
}
/* return arc */
.sd-loop__return {
  margin-top: var(--sp-8); display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2);
}
.sd-loop__return-line {
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,110,79,0.5), transparent);
}
.sd-loop__return-label {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.3); text-align: center;
}

/* ── §6 Gazelles consulting ───────────────────────────────── */
.sd-gazelles__phases {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4); position: relative;
}
.sd-gazelles__phase {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px; padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-gazelles__phase:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 6px 20px rgba(11,110,79,0.09);
  transform: translateY(-3px);
}
.sd-gazelles__phase-line {
  position: absolute; top: 44px;
  right: calc(-1 * var(--sp-4) / 2 - 1px);
  width: var(--sp-4); height: 1px;
  border-top: 2px dashed;
  z-index: 2;
}
.sd-gazelles__phase-head {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sd-gazelles__phase-circle {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid; display: grid; place-items: center;
  position: relative; flex-shrink: 0;
}
.sd-gazelles__phase-icon { font-size: 1.3rem; }
.sd-gazelles__phase-num {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 0.58rem; font-weight: 800;
  background: var(--white); border-radius: 50%;
  width: 16px; height: 16px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-muted);
}
.sd-gazelles__phase-name {
  font-size: 0.9rem; font-weight: 700; text-align: center;
}
.sd-gazelles__phase-desc {
  font-size: 0.78rem; line-height: 1.55;
  color: var(--text-muted);
}
.sd-gazelles__phase-deliverables {
  display: flex; flex-direction: column; gap: 5px;
  padding-top: var(--sp-2); border-top: 1px solid var(--border);
  margin-top: auto;
}
.sd-gazelles__phase-del-label {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 3px;
}
.sd-gazelles__phase-del {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.75rem; color: var(--text-body); line-height: 1.4;
}
/* badge */
.sd-gazelles__badge {
  background: linear-gradient(135deg, #f5f0e8 0%, #fff9ed 100%);
  border: 1.5px solid rgba(242,201,76,0.35);
  border-radius: 16px; padding: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-2);
  flex-shrink: 0;
}
.sd-gazelles__badge-icon { font-size: 1.6rem; }
.sd-gazelles__badge-text {
  font-size: 0.825rem; font-weight: 700;
  color: #7A6010; line-height: 1.4;
}

/* ── §7 Features grid ─────────────────────────────────────── */
.sd-features__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.sd-feature-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: var(--sp-4);
  display: flex; align-items: flex-start; gap: var(--sp-3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-feature-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 4px 16px rgba(11,110,79,0.08);
  transform: translateY(-2px);
}
.sd-feature-card__icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid; display: grid; place-items: center;
  flex-shrink: 0;
}
.sd-feature-card__icon { font-size: 1.3rem; line-height: 1; }
.sd-feature-card__body { flex: 1; }
.sd-feature-card__title {
  font-size: 0.875rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: 4px;
}
.sd-feature-card__desc {
  font-size: 0.78rem; line-height: 1.55; color: var(--text-muted);
}

/* ── §8 Outcomes ──────────────────────────────────────────── */
.sd-outcomes {
  position: relative; padding: var(--sp-16) 0; overflow: hidden;
}
.sd-outcomes__bg {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #062618 0%, #0b3d2e 50%, #0a2d1f 100%);
}
.sd-outcomes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.sd-outcome-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: var(--sp-5);
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sd-outcome-card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(11,110,79,0.45);
}
.sd-outcome-card__val {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800; line-height: 1.1;
  color: var(--eco-green); letter-spacing: -0.02em;
  font-family: var(--font-heading);
  margin-bottom: 6px;
}
.sd-outcome-card__label {
  font-size: 0.875rem; font-weight: 700;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--sp-2);
}
.sd-outcome-card__desc {
  font-size: 0.78rem; line-height: 1.6;
  color: rgba(255,255,255,0.4);
}

/* ── §9 Frameworks ────────────────────────────────────────── */
.sd-frameworks__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.sd-fw-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sd-fw-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 4px 16px rgba(11,110,79,0.08);
}
.sd-fw-card__head {
  display: flex; align-items: center; justify-content: space-between;
}
.sd-fw-card__code {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
}
.sd-fw-card__region {
  font-size: 0.68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(11,110,79,0.08); color: var(--deep-green);
  border: 1px solid rgba(11,110,79,0.15);
}
.sd-fw-card__desc {
  font-size: 0.825rem; line-height: 1.55;
  color: var(--text-muted); flex: 1;
}
.sd-fw-card__readiness {
  display: flex; align-items: center; gap: 8px;
  padding-top: var(--sp-2); border-top: 1px solid var(--border);
  margin-top: auto;
}
.sd-fw-card__readiness-label {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); white-space: nowrap;
}
.sd-fw-card__readiness-bar {
  flex: 1; height: 5px; background: var(--light-grey);
  border-radius: 99px; overflow: hidden;
}
.sd-fw-card__readiness-fill {
  height: 100%; border-radius: 99px;
}
.sd-fw-card__readiness-pct {
  font-size: 0.72rem; font-weight: 800; min-width: 32px;
  text-align: right;
}

/* ── §10 Case study ───────────────────────────────────────── */
.sd-cs {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(11,110,79,0.08);
}
.sd-cs__head {
  padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4);
}
.sd-cs__sector {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6); margin-bottom: 4px;
}
.sd-cs__company {
  font-size: 1.2rem; font-weight: 800;
  color: var(--white); line-height: 1.2;
}
.sd-cs__size {
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
  margin-top: 4px;
}
.sd-cs__region-badge {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 20px; flex-shrink: 0;
}
/* body split */
.sd-cs__body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6); padding: var(--sp-6);
}
.sd-cs__col-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-bottom: var(--sp-2);
}
.sd-cs__col-text {
  font-size: 0.875rem; line-height: 1.65;
  color: var(--text-body);
}
.sd-cs__solution-list {
  display: flex; flex-direction: column; gap: 7px;
}
.sd-cs__solution-item {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.825rem; color: var(--text-body); line-height: 1.5;
}
.sd-cs__outcomes { display: flex; flex-direction: column; gap: var(--sp-3); }
.sd-cs__outcome-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
}
.sd-cs__outcome-chip {
  background: var(--surface);
  border: 1.5px solid; border-radius: 12px;
  padding: var(--sp-3); text-align: center;
}
.sd-cs__outcome-val {
  font-size: 1.5rem; font-weight: 800;
  line-height: 1.1; font-family: var(--font-heading);
}
.sd-cs__outcome-label {
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-dark); margin-top: 3px;
}
.sd-cs__outcome-sub {
  font-size: 0.68rem; color: var(--text-muted); margin-top: 2px;
}
.sd-cs__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  margin-top: var(--sp-2);
  transition: gap 0.18s ease;
}
.sd-cs:hover .sd-cs__link { gap: 9px; }

/* ── §12 Internal links ───────────────────────────────────── */
.sd-links__row {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-10);
  align-items: start;
}
.sd-links__block { display: flex; flex-direction: column; gap: var(--sp-2); }
.sd-links__industries { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sd-links__industry-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.825rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white); color: var(--text-body);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.sd-links__industry-chip:hover {
  border-color: var(--soft-mint); color: var(--deep-green);
  box-shadow: 0 2px 10px rgba(11,110,79,0.1);
}
.sd-links__resources { display: flex; flex-direction: column; gap: 10px; }
.sd-links__resource-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: 12px;
  background: var(--white); border: 1px solid var(--border);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sd-links__resource-row:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 2px 12px rgba(11,110,79,0.07);
}
.sd-links__resource-type {
  font-size: 0.65rem; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sd-links__resource-title {
  font-size: 0.825rem; font-weight: 600; color: var(--text-dark);
  flex: 1; line-height: 1.35;
}
.sd-links__resource-time {
  font-size: 0.7rem; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
}

/* ── §13 Other solutions strip ────────────────────────────── */
.sd-other-sols__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.sd-mini-sol-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-mini-sol-card:hover {
  border-color: var(--soft-mint);
  box-shadow: 0 4px 18px rgba(11,110,79,0.09);
  transform: translateY(-3px);
}
.sd-mini-sol-card__bar { height: 3px; width: 100%; }
.sd-mini-sol-card__icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid; display: grid; place-items: center;
  margin: var(--sp-4) var(--sp-4) 0; font-size: 1.3rem;
  flex-shrink: 0;
}
.sd-mini-sol-card__name {
  font-size: 0.9rem; font-weight: 700; color: var(--text-dark);
  padding: var(--sp-2) var(--sp-4) 0; line-height: 1.3;
}
.sd-mini-sol-card__tagline {
  font-size: 0.78rem; line-height: 1.5; color: var(--text-muted);
  padding: 6px var(--sp-4) var(--sp-3); flex: 1;
}
.sd-mini-sol-card__cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  transition: gap 0.18s ease;
}
.sd-mini-sol-card:hover .sd-mini-sol-card__cta { gap: 8px; }

/* ── §14 CTA band ─────────────────────────────────────────── */
.sd-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #062718 0%, #0b3d28 50%, #0d4a32 100%);
  border-radius: 24px; padding: var(--sp-14) var(--sp-10);
  text-align: center;
  border: 1px solid rgba(11,110,79,0.35);
}
.sd-cta__orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.sd-cta__orb--1 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(11,110,79,0.22) 0%, transparent 65%);
  top: -130px; right: -100px;
}
.sd-cta__orb--2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(242,201,76,0.07) 0%, transparent 65%);
  bottom: -80px; left: -60px;
}
.sd-cta__orbit {
  position: absolute; z-index: 0;
  width: 750px; height: 750px; border-radius: 50%;
  border: 1px dashed rgba(11,110,79,0.12);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
  animation: orbitSpin 55s linear infinite;
}
.sd-cta__inner {
  position: relative; z-index: 2;
  max-width: 580px; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-4);
}
.sd-cta__eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--eco-green);
}
.sd-cta__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800; color: var(--white);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0;
}
.sd-cta__title-accent {
  /* gold for selective emphasis on this CTA only */
  color: var(--gold);
}
.sd-cta__desc {
  font-size: 0.9625rem; line-height: 1.65;
  color: rgba(255,255,255,0.50); max-width: 500px; margin: 0;
}
.sd-cta__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center; margin-top: var(--sp-1);
}
.sd-cta__assurance {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  justify-content: center;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.38);
}

/* ── Solution detail responsive ───────────────────────────── */
@media (max-width: 1280px) {
  .sd-gazelles__phases { grid-template-columns: repeat(3, 1fr); }
  .sd-loop__steps { grid-template-columns: repeat(3, 1fr); }
  .sd-features__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .sd-hero__layout { grid-template-columns: 1fr; }
  .sd-dash { max-width: 100%; }
  .sd-challenge__layout { grid-template-columns: 1fr; }
  .sd-help__panels { grid-template-columns: 1fr; }
  .sd-frameworks__grid { grid-template-columns: repeat(2, 1fr); }
  .sd-links__row { grid-template-columns: 1fr; gap: var(--sp-8); }
  .sd-other-sols__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .sd-hero__kpis { grid-template-columns: repeat(2, 1fr); }
  .sd-loop__steps { grid-template-columns: repeat(2, 1fr); }
  .sd-gazelles__phases { grid-template-columns: repeat(2, 1fr); }
  .sd-features__grid { grid-template-columns: repeat(2, 1fr); }
  .sd-outcomes__grid { grid-template-columns: repeat(2, 1fr); }
  .sd-cs__body { grid-template-columns: 1fr; }
  .sd-challenge__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sd-hero { padding: var(--sp-10) 0 var(--sp-12); }
  .sd-hero__h1 { font-size: 1.9rem; }
  .sd-loop__steps { grid-template-columns: 1fr 1fr; }
  .sd-gazelles__phases { grid-template-columns: 1fr; }
  .sd-features__grid { grid-template-columns: 1fr 1fr; }
  .sd-outcomes__grid { grid-template-columns: 1fr; }
  .sd-frameworks__grid { grid-template-columns: 1fr; }
  .sd-help__panels { grid-template-columns: 1fr; }
  .sd-other-sols__grid { grid-template-columns: repeat(2, 1fr); }
  .sd-cta { padding: var(--sp-10) var(--sp-4); }
  .sd-cs__outcome-grid { grid-template-columns: 1fr 1fr; }
  .sd-dash__body { grid-template-columns: 1fr; }
  .sd-dash__sidebar { display: none; }
}
@media (max-width: 480px) {
  .sd-loop__steps { grid-template-columns: 1fr; }
  .sd-features__grid { grid-template-columns: 1fr; }
  .sd-other-sols__grid { grid-template-columns: 1fr; }
  .sd-hero__kpis { grid-template-columns: repeat(2, 1fr); }
  .sd-cs__outcome-grid { grid-template-columns: 1fr; }
  .sd-cta__actions { flex-direction: column; align-items: stretch; }
  .sd-dash__kpi-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SOLUTION DETAIL — Enhancement Layer v2
   Fills gaps, polishes visuals, adds depth and refinement
   ============================================================ */

/* ── Hero enhancements ───────────────────────────────────── */
.sd-hero {
  padding: var(--sp-14) 0 var(--sp-16);
}
/* Subtle radial glow behind dashboard */
.sd-hero__visual::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120%; height: 120%;
  background: radial-gradient(ellipse, rgba(11,110,79,0.18) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.sd-hero__visual {
  position: relative;
}
.sd-hero__h1-accent {
  background: linear-gradient(135deg, var(--eco-green) 0%, var(--soft-mint) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Dashboard card depth improvements */
.sd-dash {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(11,110,79,0.12),
    0 24px 80px rgba(0,0,0,0.4),
    0 4px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
/* KPI strip: tighter, more premium */
.sd-hero__kpis {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);
}
.sd-hero__kpi {
  padding: var(--sp-3);
  position: relative;
}
.sd-hero__kpi-val {
  font-size: 1.45rem;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}
/* Floater always visible, better positioned */
.sd-dash__floater {
  bottom: -12px; right: 12px;
  background: var(--white);
  border: 1.5px solid rgba(11,110,79,0.22);
  min-width: 195px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.16),
    0 2px 8px rgba(11,110,79,0.12);
}
/* status dot fix: border-radius 50% not 50 */
.sd-dash__status-dot {
  border-radius: 50%;
}

/* ── Challenge section ────────────────────────────────────── */
.sd-challenge {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
.sd-challenge__layout {
  grid-template-columns: 400px 1fr;
  gap: var(--sp-12);
}
.sd-challenge__copy {
  position: sticky;
  top: 96px;
  align-self: start;
}
/* Stronger challenge card hover with left accent */
.sd-challenge__card {
  border-left: 3px solid transparent;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    background 0.22s ease;
}
.sd-challenge__card:hover {
  border-left-color: var(--eco-green);
  background: var(--white);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(11,110,79,0.09);
}
.sd-challenge__card-title {
  font-size: 0.925rem;
}

/* ── Help / Solution panels ────────────────────────────────── */
.sd-help {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Visual accent line top on each panel */
.sd-help__panel {
  border-top: 3px solid;
  border-top-color: inherit;
}
/* Data chips styled better */
.sd-help__mini-vis--data {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sd-help__source-chip {
  background: linear-gradient(135deg, var(--surface) 0%, #e8f4ef 100%);
  border: 1px solid rgba(11,110,79,0.15);
  color: var(--deep-green);
  font-weight: 700;
}
.sd-help__source-arrow {
  font-size: 0.78rem;
  color: var(--deep-green);
  font-weight: 700;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(11,110,79,0.06), rgba(168,230,207,0.1));
  border: 1px dashed rgba(11,110,79,0.2);
  margin-top: 4px;
}
/* Governance flow: vertical arrow as line */
.sd-help__gov-step {
  flex-direction: row;
}
.sd-help__gov-arrow {
  font-size: 1rem;
  margin-left: 4px;
  opacity: 0.35;
}

/* ── Platform loop enhancements ───────────────────────────── */
.sd-loop {
  padding: var(--sp-14) 0 var(--sp-16);
}
/* Step circles with step number badge overlay */
.sd-loop__step-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-heading);
}
.sd-loop__step-name {
  font-size: 0.925rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sd-loop__step-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.50);
  text-align: center;
  line-height: 1.6;
}
.sd-loop__step-bullet {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.45);
}
/* Gradient connector — positive direction */
.sd-loop__connector {
  background: linear-gradient(90deg,
    rgba(111,207,151,0.35) 0%,
    rgba(168,230,207,0.15) 100%);
  height: 1.5px;
  top: 46px;
}
/* Return arc */
.sd-loop__return {
  margin-top: var(--sp-10);
}
.sd-loop__return-line {
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111,207,151,0.45) 30%,
    rgba(111,207,151,0.45) 70%,
    transparent 100%);
}
.sd-loop__return-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(168,230,207,0.45);
  letter-spacing: 0.02em;
}

/* ── Gazelles consulting enhancements ─────────────────────── */
.sd-gazelles {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Add top number badge inside phase circle */
.sd-gazelles__phase-circle {
  width: 56px; height: 56px;
}
.sd-gazelles__phase-num {
  width: 18px; height: 18px;
  font-size: 0.62rem;
}
/* Deliverable items */
.sd-gazelles__phase-del {
  font-size: 0.78rem;
  color: var(--text-body);
}
/* Badge — gold border, warm background */
.sd-gazelles__badge {
  box-shadow: 0 4px 16px rgba(242,201,76,0.12);
}

/* ── Feature grid enhancements ────────────────────────────── */
.sd-features {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Left border accent on hover */
.sd-feature-card {
  border-left: 3px solid transparent;
}
.sd-feature-card:hover {
  border-left-color: var(--eco-green);
  transform: translateY(-2px) translateX(2px);
}

/* ── Outcomes enhancements ────────────────────────────────── */
.sd-outcomes {
  padding: var(--sp-14) 0 var(--sp-16);
}
/* One special "gold" outcome card — the 3× ROI card */
.sd-outcome-card:nth-child(4) .sd-outcome-card__val {
  color: var(--gold);
  text-shadow: 0 0 32px rgba(242,201,76,0.35);
}
/* Shimmer on outcome val hover */
.sd-outcome-card:hover .sd-outcome-card__val {
  text-shadow: 0 0 24px rgba(111,207,151,0.5);
}
.sd-outcome-card__label {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ── Framework cards ─────────────────────────────────────── */
.sd-frameworks {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Readiness bar animated fill */
.sd-fw-card__readiness-fill {
  animation: fw-fill 1.4s var(--ease-out) 0.3s both;
  transform-origin: left;
}
@keyframes fw-fill {
  from { width: 0 !important; }
}

/* ── Case study enhancements ─────────────────────────────── */
.sd-casestudy {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Case study card: colored left side strip */
.sd-cs {
  box-shadow:
    0 12px 40px rgba(11,110,79,0.10),
    0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sd-cs:hover {
  box-shadow:
    0 20px 56px rgba(11,110,79,0.15),
    0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
/* Outcome chip: stronger visual */
.sd-cs__outcome-chip {
  background: linear-gradient(135deg, var(--surface), #edf7f2);
  border-radius: 14px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sd-cs__outcome-chip:hover {
  box-shadow: 0 4px 12px rgba(11,110,79,0.1);
  transform: translateY(-2px);
}
.sd-cs__outcome-val {
  font-size: 1.6rem;
}
/* Solution items */
.sd-cs__solution-item {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ── FAQ section — already uses shared .faq styles, minor tweaks */
/* ── §11 Internal links tweaks */
.sd-links {
  padding-top: var(--sp-14);
  padding-bottom: var(--sp-14);
}
/* Industry chip refined */
.sd-links__industry-chip {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  background: var(--white);
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.sd-links__industry-chip:hover {
  background: rgba(11,110,79,0.04);
  transform: translateY(-1px);
}
/* Resource row: icon alignment */
.sd-links__resource-row {
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

/* ── Other solutions strip ───────────────────────────────── */
.sd-other-sols {
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-12);
  border-top: 1px solid var(--border);
}
/* Mini card: add mint glow on hover */
.sd-mini-sol-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sd-mini-sol-card:hover {
  box-shadow: 0 8px 28px rgba(11,110,79,0.12);
}

/* ── CTA band ─────────────────────────────────────────────── */
.sd-cta-band {
  background: transparent;
  padding-bottom: var(--sp-16);
}
.sd-cta {
  box-shadow: 0 32px 80px rgba(0,0,0,0.25);
}

/* ── Scroll-animated reveal polish ───────────────────────── */
/* Platform loop connector on 5-col grid: exact right offset */
@media (min-width: 1280px) {
  .sd-loop__steps {
    grid-template-columns: repeat(5, 1fr);
  }
  .sd-loop__connector {
    /* full gap width */
    width: var(--sp-3);
    right: calc(-1 * var(--sp-3) / 2);
  }
}

/* ── Responsive additions ───────────────────────────────────── */
@media (max-width: 1100px) {
  .sd-challenge__layout { gap: var(--sp-8); }
  .sd-challenge__copy { position: static; }
}
@media (max-width: 768px) {
  .sd-challenge { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-help { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-gazelles { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-features { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-outcomes { padding: var(--sp-10) 0; }
  .sd-frameworks { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-casestudy { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-links { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
  .sd-links__row { gap: var(--sp-6); }
  .sd-challenge__layout { grid-template-columns: 1fr; }
  .sd-challenge__copy { position: static; }
  .sd-cs__body { gap: var(--sp-5); padding: var(--sp-5); }
  .sd-cs__head { padding: var(--sp-4) var(--sp-5); }
  .sd-mini-sol-card { border-radius: 12px; }
  .sd-loop__return-line { width: 70%; }
}
@media (max-width: 480px) {
  .sd-hero__kpis { gap: 0; }
  .sd-dash__kpi-row { grid-template-columns: repeat(2, 1fr); }
  .sd-challenge__grid { grid-template-columns: 1fr; }
  .sd-help__panels { grid-template-columns: 1fr; }
  .sd-loop__steps { grid-template-columns: 1fr; }
  .sd-outcomes__grid { grid-template-columns: 1fr 1fr; }
  .sd-cta { padding: var(--sp-8) var(--sp-4); }
  .sd-other-sols { padding-top: var(--sp-8); }
}

/* ============================================================
   INDUSTRIES OVERVIEW PAGE — inds- namespace
   Premium B2B, enterprise-grade
   ============================================================ */

/* ── §2 Hero ─────────────────────────────────────────────── */
.inds-hero {
  position: relative;
  background: linear-gradient(160deg, #062d20 0%, #0a4530 40%, #0d5a3d 70%, #0B6E4F 100%);
  padding: var(--sp-16) 0 var(--sp-12);
  overflow: hidden;
}
.inds-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111,207,151,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,151,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.inds-hero__orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(111,207,151,0.06);
  pointer-events: none;
  animation: orbitSpin 36s linear infinite;
}
.inds-hero__orbit--1 { width: 640px; height: 640px; top: -200px; right: -160px; }
.inds-hero__orbit--2 { width: 440px; height: 440px; bottom: -180px; left: -100px; animation-duration: 52s; animation-direction: reverse; }

.inds-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.inds-hero__copy { position: relative; z-index: 2; }

.inds-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(168,230,207,0.75);
  margin-bottom: var(--sp-3);
}
.inds-hero__eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--eco-green);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
.inds-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}
.inds-hero__h1-accent {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.inds-hero__desc {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: var(--sp-5);
}
.inds-hero__ctas {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

/* credential strip */
.inds-hero__creds {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.inds-hero__cred {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inds-hero__cred-val {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--eco-green);
}
.inds-hero__cred-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Dashboard panel (right col) */
.inds-hero__visual {
  position: relative;
  z-index: 2;
}
.inds-hero__panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.24);
}
.inds-hero__panel-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.inds-hero__panel-dots { display: flex; gap: 6px; }
.inds-hero__dot { width: 10px; height: 10px; border-radius: 50%; }
.inds-hero__dot--r { background: #FF5F57; }
.inds-hero__dot--y { background: #FEBC2E; }
.inds-hero__dot--g { background: #28C840; }
.inds-hero__panel-title {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.inds-hero__panel-live {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eco-green);
  background: rgba(111,207,151,0.12);
  padding: 2px 8px;
  border-radius: 99px;
}
.inds-hero__panel-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }

/* rows */
.inds-hero__row {
  display: grid;
  grid-template-columns: 28px 1fr 100px 32px 32px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.inds-hero__row-icon { font-size: 1rem; }
.inds-hero__row-name { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.8); white-space: nowrap; }
.inds-hero__row-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.inds-hero__row-fill { height: 100%; border-radius: 3px; }
.inds-hero__row-score { font-size: 0.76rem; font-weight: 700; text-align: right; }
.inds-hero__row-delta { font-size: 0.7rem; font-weight: 700; color: var(--eco-green); text-align: right; }

/* framework chip strip */
.inds-hero__fw-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}
.inds-hero__fw-chip {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(111,207,151,0.1);
  color: var(--eco-green);
  border: 1px solid rgba(111,207,151,0.18);
}

/* status bar */
.inds-hero__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.inds-hero__status-dot {
  width: 7px; height: 7px;
  background: var(--eco-green);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.inds-hero__status-text { font-size: 0.7rem; color: rgba(255,255,255,0.35); font-weight: 500; }

/* Floater insight */
.inds-hero__floater {
  position: absolute;
  bottom: -12px;
  left: -16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(11,110,79,0.12);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
}
.inds-hero__floater-icon { font-size: 1.2rem; }
.inds-hero__floater-label { font-size: 0.72rem; font-weight: 700; color: var(--charcoal); }
.inds-hero__floater-val   { font-size: 0.68rem; color: var(--mid-grey); }

/* ── §3 Trust Strip ──────────────────────────────────────── */
.inds-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) 0;
}
.inds-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.inds-strip__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px var(--sp-4);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mid-grey);
  letter-spacing: 0.01em;
  border-right: 1px solid var(--border);
}
.inds-strip__item:last-child { border-right: none; }
.inds-strip__item-icon { font-size: 1rem; }

/* ── §4 Industry Cards ───────────────────────────────────── */
.inds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.inds-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--trans-med), transform var(--trans-med), border-color var(--trans-med);
  position: relative;
}
.inds-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(111,207,151,0.5);
}

.inds-card__bar {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}
.inds-card__body {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.inds-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.inds-card__icon-wrap {
  width: 48px; height: 48px;
  border-radius: 14px;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inds-card__icon { font-size: 1.4rem; line-height: 1; }
.inds-card__name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
  margin: 0;
}
.inds-card__sub {
  font-size: 0.72rem;
  color: var(--mid-grey);
  font-weight: 500;
  margin-top: 1px;
}

.inds-card__pain-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: -6px;
}
.inds-card__pain {
  font-size: 0.875rem;
  color: var(--mid-grey);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.inds-card__sols {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.inds-card__sol-tag {
  font-size: 0.67rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid;
  letter-spacing: 0.02em;
}

.inds-card__fw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.inds-card__fw {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--off-white);
  color: var(--mid-grey);
  border: 1px solid var(--border);
  letter-spacing: 0.03em;
}

.inds-card__footer {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.inds-card__stat { display: flex; flex-direction: column; gap: 1px; }
.inds-card__stat-val {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
}
.inds-card__stat-label { font-size: 0.68rem; color: var(--mid-grey); font-weight: 500; }

.inds-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap var(--trans-fast), opacity var(--trans-fast);
  white-space: nowrap;
}
.inds-card__cta:hover { gap: 8px; opacity: 0.8; }

/* ── §5 Cross-Industry Challenges ───────────────────────── */
.inds-challenges {
  position: relative;
  padding: var(--sp-16) 0;
  overflow: hidden;
}
.inds-challenges__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #062d20 0%, #0a3d2a 50%, #062d20 100%);
  pointer-events: none;
}
.inds-challenges__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.inds-ch-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(111,207,151,0.1);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: background var(--trans-med), border-color var(--trans-med);
}
.inds-ch-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(111,207,151,0.25);
}
.inds-ch-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.inds-ch-card__icon { font-size: 1.5rem; }
.inds-ch-card__num {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: rgba(111,207,151,0.15);
  line-height: 1;
}
.inds-ch-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 var(--sp-1);
  line-height: 1.3;
}
.inds-ch-card__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin: 0;
}

/* ── §6 Platform + Consulting Model ─────────────────────── */
.inds-model__split {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: start;
}

.inds-model__col {
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.inds-model__col--left { border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.inds-model__col--right { border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.inds-model__col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px var(--sp-3);
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0.02em;
}
.inds-model__col-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inds-model__col-dot--g { background: #0B6E4F; }
.inds-model__col-dot--e { background: #38A169; }

.inds-model__col-body { padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; }

.inds-model__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px var(--sp-2);
  border-radius: 10px;
  transition: background var(--trans-fast);
}
.inds-model__step:hover { background: rgba(11,110,79,0.05); }
.inds-model__step-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.inds-model__step-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 2px;
}
.inds-model__step-desc { font-size: 0.8rem; color: var(--mid-grey); line-height: 1.5; }

/* bridge column */
.inds-model__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) 0;
  gap: 0;
  height: 100%;
  min-height: 320px;
}
.inds-model__bridge-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(11,110,79,0.25), transparent);
}
.inds-model__bridge-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(11,110,79,0.06);
  border: 1.5px solid rgba(11,110,79,0.18);
  border-radius: 12px;
  margin: 8px 0;
}
.inds-model__bridge-icon { font-size: 1.1rem; }
.inds-model__bridge-label { font-size: 0.58rem; font-weight: 700; color: var(--deep-green); text-align: center; letter-spacing: 0.04em; }

/* three pillars */
.inds-model__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.inds-model__pillar {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: box-shadow var(--trans-med), border-color var(--trans-med);
}
.inds-model__pillar:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(111,207,151,0.4);
}
.inds-model__pillar-icon { font-size: 1.5rem; margin-bottom: var(--sp-2); }
.inds-model__pillar-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 8px;
  line-height: 1.3;
}
.inds-model__pillar-desc { font-size: 0.8375rem; color: var(--mid-grey); line-height: 1.65; }

/* ── §7 Outcomes ─────────────────────────────────────────── */
.inds-outcomes {
  position: relative;
  padding: var(--sp-16) 0;
  overflow: hidden;
}
.inds-outcomes__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #062d20 0%, #0B6E4F 60%, #0d5a3d 100%);
}
.inds-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.inds-outcome-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: center;
  transition: background var(--trans-med), border-color var(--trans-med), transform var(--trans-med);
}
.inds-outcome-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(111,207,151,0.3);
  transform: translateY(-3px);
}
.inds-outcome-card--gold {
  background: rgba(242,201,76,0.08);
  border-color: rgba(242,201,76,0.25);
}
.inds-outcome-card--gold .inds-outcome-card__val { color: var(--soft-yellow); }
.inds-outcome-card__val {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--eco-green);
  line-height: 1;
  margin-bottom: 6px;
}
.inds-outcome-card__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.inds-outcome-card__sub { font-size: 0.78rem; color: rgba(255,255,255,0.42); line-height: 1.5; }

/* ── §8 Framework Relevance ─────────────────────────────── */
.inds-fw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.inds-fw-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--trans-med), border-color var(--trans-med);
}
.inds-fw-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(111,207,151,0.4);
}
.inds-fw-card__head { display: flex; align-items: center; justify-content: space-between; }
.inds-fw-card__code {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.inds-fw-card__region {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--off-white);
  color: var(--mid-grey);
  border: 1px solid var(--border);
}
.inds-fw-card__desc { font-size: 0.8375rem; color: var(--mid-grey); line-height: 1.6; flex: 1; }
.inds-fw-card__industries { display: flex; flex-wrap: wrap; gap: 5px; }
.inds-fw-card__ind-chip {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid;
}
.inds-fw-card__bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0.35;
  transition: opacity var(--trans-fast);
}
.inds-fw-card:hover .inds-fw-card__bar { opacity: 0.7; }

/* ── §9 Case Study Strip ─────────────────────────────────── */
.inds-cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.inds-cs-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--trans-med), transform var(--trans-med);
}
.inds-cs-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.inds-cs-card__head {
  padding: var(--sp-3);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.inds-cs-card__head-left { display: flex; flex-direction: column; gap: 4px; }
.inds-cs-card__sector {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.inds-cs-card__company {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}
.inds-cs-card__region {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
.inds-cs-card__body { padding: var(--sp-3); flex: 1; display: flex; flex-direction: column; gap: 8px; }
.inds-cs-card__lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.inds-cs-card__txt { font-size: 0.845rem; color: var(--mid-grey); line-height: 1.6; margin: 0; }
.inds-cs-card__outcomes { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-2); }
.inds-cs-card__outcome { display: flex; align-items: center; gap: 8px; }
.inds-cs-card__outcome-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.inds-cs-card__foot {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1.5px solid var(--border);
}
.inds-cs-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap var(--trans-fast), opacity var(--trans-fast);
}
.inds-cs-card__link:hover { gap: 9px; opacity: 0.75; }

/* ── §12 Internal links ──────────────────────────────────── */
.inds-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.inds-links__col { display: flex; flex-direction: column; }
.inds-links__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.inds-links__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--deep-green);
  background: rgba(11,110,79,0.06);
  border: 1px solid rgba(11,110,79,0.16);
  border-radius: 99px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background var(--trans-fast), border-color var(--trans-fast), gap var(--trans-fast);
}
.inds-links__chip:hover {
  background: rgba(11,110,79,0.12);
  border-color: rgba(11,110,79,0.32);
  gap: 8px;
}
.inds-links__chip--fw {
  color: #2F855A;
  background: rgba(47,133,90,0.06);
  border-color: rgba(47,133,90,0.16);
}
.inds-links__chip--fw:hover {
  background: rgba(47,133,90,0.12);
  border-color: rgba(47,133,90,0.32);
}

/* ── §13 CTA Band ────────────────────────────────────────── */
.inds-cta {
  position: relative;
  background: linear-gradient(135deg, #062d20 0%, #0B6E4F 60%, #0d5a3d 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-8);
  overflow: hidden;
  text-align: center;
}
.inds-cta__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.inds-cta__orb--1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(111,207,151,0.12) 0%, transparent 70%);
  top: -160px; right: -100px;
}
.inds-cta__orb--2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(168,230,207,0.08) 0%, transparent 70%);
  bottom: -120px; left: -60px;
}
.inds-cta__orbit {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(111,207,151,0.07);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin 40s linear infinite;
  pointer-events: none;
}
.inds-cta__inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.inds-cta__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(168,230,207,0.65);
  margin-bottom: var(--sp-2);
}
.inds-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.inds-cta__title-accent {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.inds-cta__desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}
.inds-cta__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.inds-cta__assurance {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
  font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .inds-hero__layout    { gap: var(--sp-6); }
  .inds-grid            { grid-template-columns: repeat(2, 1fr); }
  .inds-challenges__grid { grid-template-columns: repeat(2, 1fr); }
  .inds-outcomes__grid  { grid-template-columns: repeat(3, 1fr); }
  .inds-fw-grid         { grid-template-columns: repeat(2, 1fr); }
  .inds-cs-grid         { grid-template-columns: repeat(2, 1fr); }
  .inds-model__split    { grid-template-columns: 1fr; gap: 0; }
  .inds-model__col--left { border-radius: var(--radius-md) var(--radius-md) 0 0; border-right: 1.5px solid var(--border); border-bottom: none; }
  .inds-model__col--right { border-radius: 0 0 var(--radius-md) var(--radius-md); border-left: 1.5px solid var(--border); border-top: none; }
  .inds-model__bridge   { flex-direction: row; height: 56px; min-height: 0; width: 100%; padding: 0 var(--sp-4); }
  .inds-model__bridge-line { flex: 1; width: auto; height: 2px; background: linear-gradient(to right, transparent, rgba(11,110,79,0.25), transparent); }
}
@media (max-width: 768px) {
  .inds-hero__layout    { grid-template-columns: 1fr; }
  .inds-hero__visual    { display: none; }
  .inds-hero__creds     { gap: var(--sp-3); }
  .inds-grid            { grid-template-columns: 1fr; }
  .inds-challenges__grid { grid-template-columns: 1fr; }
  .inds-outcomes__grid  { grid-template-columns: repeat(2, 1fr); }
  .inds-fw-grid         { grid-template-columns: 1fr; }
  .inds-cs-grid         { grid-template-columns: 1fr; }
  .inds-model__pillars  { grid-template-columns: 1fr; }
  .inds-links           { grid-template-columns: 1fr; gap: var(--sp-6); }
  .inds-cta             { padding: var(--sp-8) var(--sp-3); border-radius: var(--radius-lg); }
  .inds-strip__item     { padding: 8px var(--sp-2); }
}
@media (max-width: 480px) {
  .inds-outcomes__grid  { grid-template-columns: 1fr 1fr; }
  .inds-hero__ctas      { flex-direction: column; }
  .inds-cta__actions    { flex-direction: column; align-items: center; }
  .inds-cta__assurance  { gap: var(--sp-2); }
}

/* ============================================================
   INDUSTRY DETAIL — MANUFACTURING  (mid- namespace)
   Premium B2B, operational-intelligence aesthetic
   ============================================================ */

/* ── @keyframes (define here if not already present) ─────── */
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes midFwFill {
  from { width: 0 !important; }
  to   { /* final width set inline */ }
}

/* ── §2 Hero ─────────────────────────────────────────────── */
.mid-hero {
  position: relative;
  background: linear-gradient(160deg, #061e14 0%, #0a3322 40%, #0d4a30 70%, #0B6E4F 100%);
  padding: var(--sp-16) 0 var(--sp-12);
  overflow: hidden;
}
.mid-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,207,151,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,151,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.mid-hero__orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(111,207,151,0.05);
  pointer-events: none;
  animation: orbitSpin 40s linear infinite;
}
.mid-hero__orbit--1 { width: 700px; height: 700px; top: -240px; right: -200px; }
.mid-hero__orbit--2 { width: 460px; height: 460px; bottom: -200px; left: -120px; animation-duration: 58s; animation-direction: reverse; }

.mid-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.mid-hero__copy { position: relative; z-index: 2; }

.mid-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(168,230,207,0.7);
  margin-bottom: var(--sp-3);
  padding: 6px 14px;
  background: rgba(111,207,151,0.08);
  border: 1px solid rgba(111,207,151,0.15);
  border-radius: 99px;
}
.mid-hero__eyebrow-icon { font-size: 0.9rem; }

.mid-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.12; letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}
.mid-hero__h1-accent {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mid-hero__intro {
  font-size: 1rem; color: rgba(255,255,255,0.58);
  line-height: 1.72; max-width: 540px;
  margin-bottom: var(--sp-4);
}
.mid-hero__ctas {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

/* KPI strip */
.mid-hero__kpis {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.mid-hero__kpi {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.mid-hero__kpi:last-child { border-right: none; }
.mid-hero__kpi-val {
  font-family: var(--font-heading);
  font-size: 1.3rem; font-weight: 800;
  color: var(--eco-green); line-height: 1;
}
.mid-hero__kpi-label {
  font-size: 0.7rem; font-weight: 600;
  color: rgba(255,255,255,0.65); line-height: 1.3;
}
.mid-hero__kpi-sub { font-size: 0.62rem; color: rgba(255,255,255,0.3); font-weight: 500; }

/* Hero visual / mini-dashboard */
.mid-hero__visual { position: relative; z-index: 2; }

.mid-dash {
  background: rgba(10,26,18,0.8);
  border: 1px solid rgba(111,207,151,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 72px rgba(0,0,0,0.32);
}
.mid-dash__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mid-dash__dots { display: flex; gap: 5px; }
.mid-dash__dot { width: 9px; height: 9px; border-radius: 50%; }
.mid-dash__dot--r { background: #FF5F57; }
.mid-dash__dot--y { background: #FEBC2E; }
.mid-dash__dot--g { background: #28C840; }
.mid-dash__url { flex: 1; font-size: 0.68rem; color: rgba(255,255,255,0.35); font-weight: 500; text-align: center; }
.mid-dash__live {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--eco-green); background: rgba(111,207,151,0.12);
  padding: 2px 7px; border-radius: 99px;
}

/* metric cards */
.mid-dash__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mid-dash__metric {
  padding: 10px 12px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.mid-dash__metric:last-child,:nth-child(3n) { border-right: none; }
.mid-dash__metric-label { font-size: 0.62rem; color: rgba(255,255,255,0.35); font-weight: 500; margin-bottom: 2px; }
.mid-dash__metric-val { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; line-height: 1; }
.mid-dash__metric-unit { font-size: 0.6rem; opacity: 0.6; }
.mid-dash__metric-delta { font-size: 0.62rem; font-weight: 700; margin-top: 2px; }
.mid-dash__metric-delta--up   { color: #6FCF97; }
.mid-dash__metric-delta--warn { color: #E07A5F; }

/* table */
.mid-dash__table-head {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 7px 12px 5px;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mid-dash__row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center; gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mid-dash__row:last-of-type { border-bottom: none; }
.mid-dash__row-plant { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.7); }
.mid-dash__row-score {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700; color: #6FCF97;
}
.mid-dash__score-bar { width: 36px; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.mid-dash__score-fill { height: 100%; border-radius: 3px; }
.mid-dash__row-intens { font-size: 0.68rem; color: rgba(255,255,255,0.45); }
.mid-dash__row-status { font-size: 0.65rem; font-weight: 700; }

/* AI insight */
.mid-dash__insight {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  background: rgba(111,207,151,0.06);
  border-top: 1px solid rgba(111,207,151,0.1);
}
.mid-dash__insight-icon { font-size: 0.75rem; color: var(--eco-green); }
.mid-dash__insight-text { font-size: 0.68rem; color: rgba(111,207,151,0.75); font-weight: 500; }

/* Hero credential badge */
.mid-hero__badge {
  position: absolute; bottom: -10px; left: -12px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(11,110,79,0.12);
  border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--shadow-lg);
}
.mid-hero__badge-icon { font-size: 1.15rem; }
.mid-hero__badge-title { font-size: 0.72rem; font-weight: 700; color: var(--charcoal); }
.mid-hero__badge-sub   { font-size: 0.65rem; color: var(--mid-grey); }

/* ── §3 Context strip ────────────────────────────────────── */
.mid-context {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) 0;
}
.mid-context__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
}
.mid-context__item {
  display: flex; align-items: center; gap: 6px;
  padding: 9px var(--sp-3);
  font-size: 0.8rem; font-weight: 600;
  color: var(--mid-grey);
  border-right: 1px solid var(--border);
}
.mid-context__item:last-child { border-right: none; }
.mid-context__item-icon { font-size: 0.95rem; }

/* ── §4 Challenges ────────────────────────────────────────── */
.mid-challenges {
  position: relative;
  padding: var(--sp-16) 0;
  overflow: hidden;
}
.mid-challenges__bg {
  position: absolute; inset: 0;
  background: linear-gradient(158deg, #061e14 0%, #0a2e1c 55%, #061e14 100%);
  pointer-events: none;
}
.mid-challenges__grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
}
.mid-ch-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(111,207,151,0.09);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: background var(--trans-med), border-color var(--trans-med);
}
.mid-ch-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(111,207,151,0.22);
}
.mid-ch-card__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.mid-ch-card__icon { font-size: 1.5rem; }
.mid-ch-card__title {
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700;
  color: var(--white); margin: 0 0 var(--sp-1);
  line-height: 1.3;
}
.mid-ch-card__desc {
  font-size: 0.86rem; color: rgba(255,255,255,0.44);
  line-height: 1.65; margin: 0;
}

/* ── §5 Solution Modules ──────────────────────────────────── */
.mid-sols-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
}
.mid-sol-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--trans-med), transform var(--trans-med), border-color var(--trans-med);
}
.mid-sol-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-4px);
  border-color: rgba(111,207,151,0.45);
}
.mid-sol-card__bar { height: 3px; flex-shrink: 0; }
.mid-sol-card__body { padding: var(--sp-3); flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mid-sol-card__head { display: flex; align-items: center; justify-content: space-between; }
.mid-sol-card__icon-wrap {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mid-sol-card__icon { font-size: 1.2rem; }
.mid-sol-card__tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 99px; border: 1px solid;
}
.mid-sol-card__name {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: var(--charcoal); margin: 0; line-height: 1.25;
}
.mid-sol-card__desc { font-size: 0.845rem; color: var(--mid-grey); line-height: 1.6; flex: 1; }
.mid-sol-card__foot { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border); }
.mid-sol-card__cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
  transition: gap var(--trans-fast), opacity var(--trans-fast);
}
.mid-sol-card__cta:hover { gap: 8px; opacity: 0.8; }

/* ── §6 Workflow ──────────────────────────────────────────── */
.mid-workflow {
  position: relative; padding: var(--sp-16) 0; overflow: hidden;
}
.mid-workflow__bg {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, #071f15 0%, #0a3322 50%, #071f15 100%);
  pointer-events: none;
}
.mid-workflow__track {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 0; position: relative;
}
.mid-wf-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 var(--sp-1);
  position: relative;
}
.mid-wf-step__connector {
  position: absolute;
  top: 28px; left: 50%; width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(111,207,151,0.3), rgba(111,207,151,0.1));
  z-index: 0;
}
.mid-wf-step__circle {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; flex-shrink: 0;
  transition: transform var(--trans-med);
}
.mid-wf-step:hover .mid-wf-step__circle { transform: scale(1.08); }
.mid-wf-step__icon { font-size: 1.3rem; }
.mid-wf-step__num {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(111,207,151,0.4); margin: 8px 0 2px;
}
.mid-wf-step__name {
  font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700;
  color: var(--white); margin-bottom: 8px;
}
.mid-wf-step__desc {
  font-size: 0.78rem; color: rgba(255,255,255,0.4);
  line-height: 1.6;
}
.mid-workflow__return {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.mid-workflow__return-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(111,207,151,0.2), transparent);
}
.mid-workflow__return-label {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(111,207,151,0.45); white-space: nowrap;
}

/* ── §7 Full Dashboard ────────────────────────────────────── */
.mid-full-dash {
  background: #0a1a10;
  border: 1px solid rgba(111,207,151,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.mid-full-dash__chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mid-full-dash__dots { display: flex; gap: 6px; }
.mid-full-dash__title {
  flex: 1; text-align: center;
  font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.3);
}
.mid-full-dash__live {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--eco-green);
}
.mid-full-dash__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eco-green);
  animation: pulse 2s infinite;
}
.mid-full-dash__body {
  display: grid; grid-template-columns: 160px 1fr;
}
.mid-full-dash__sidebar {
  padding: var(--sp-2);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 2px;
}
.mid-full-dash__sidebar-label {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.2);
  padding: 8px 8px 4px;
}
.mid-full-dash__nav-item {
  padding: 7px 10px;
  font-size: 0.72rem; font-weight: 500; color: rgba(255,255,255,0.38);
  border-radius: 8px; cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.mid-full-dash__nav-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); }
.mid-full-dash__nav-item--active {
  background: rgba(11,110,79,0.15); color: var(--eco-green); font-weight: 600;
}
.mid-full-dash__fw-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 0.68rem; font-weight: 500; color: rgba(255,255,255,0.35);
}
.mid-full-dash__fw-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--eco-green);
  flex-shrink: 0;
}

.mid-full-dash__main {
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3);
}
.mid-full-dash__kpi-row {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm); overflow: hidden;
}
.mid-full-dash__kpi {
  padding: 10px 12px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.mid-full-dash__kpi:last-child { border-right: none; }
.mid-full-dash__kpi-label { font-size: 0.6rem; color: rgba(255,255,255,0.28); margin-bottom: 2px; font-weight: 500; }
.mid-full-dash__kpi-val { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; line-height: 1; }
.mid-full-dash__kpi-delta { font-size: 0.6rem; font-weight: 700; margin-top: 2px; }
.mid-full-dash__kpi-delta--up   { color: #6FCF97; }
.mid-full-dash__kpi-delta--warn { color: #E07A5F; }

.mid-full-dash__content-row {
  display: grid; grid-template-columns: 1fr 220px; gap: var(--sp-3);
}
.mid-full-dash__chart {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: var(--sp-2);
}
.mid-full-dash__chart-label {
  font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em; margin-bottom: 10px;
}
.mid-full-dash__chart-area svg { display: block; }
.mid-full-dash__chart-legend {
  display: flex; gap: var(--sp-3);
  font-size: 0.62rem; font-weight: 600; margin-top: 6px;
}

.mid-full-dash__fw-panel {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: var(--sp-2);
  display: flex; flex-direction: column; gap: 10px;
}
.mid-full-dash__fw-row { display: flex; align-items: center; gap: 8px; }
.mid-full-dash__fw-name { font-size: 0.65rem; font-weight: 700; width: 60px; flex-shrink: 0; }
.mid-full-dash__fw-track { flex: 1; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.mid-full-dash__fw-fill { height: 100%; border-radius: 3px; }
.mid-full-dash__fw-pct { font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.5); width: 28px; text-align: right; }

.mid-full-dash__plant-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: var(--sp-2);
}
.mid-full-dash__plant-head {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 5px 8px 8px;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mid-full-dash__plant-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center; gap: 4px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mid-full-dash__plant-row:last-child { border-bottom: none; }

/* ── §8 Use Cases ─────────────────────────────────────────── */
.mid-uc-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3);
}
.mid-uc-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: box-shadow var(--trans-med), border-color var(--trans-med);
}
.mid-uc-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(111,207,151,0.4); }
.mid-uc-card__head { display: flex; align-items: center; gap: var(--sp-2); }
.mid-uc-card__icon { font-size: 1.5rem; }
.mid-uc-card__tag {
  font-size: 0.65rem; font-weight: 700; padding: 3px 10px;
  border-radius: 99px; border: 1px solid; letter-spacing: 0.04em;
}
.mid-uc-card__title {
  font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700;
  color: var(--charcoal); margin: 0; line-height: 1.3;
}
.mid-uc-card__desc { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.68; flex: 1; }
.mid-uc-card__outcomes { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mid-uc-card__outcome { display: flex; align-items: flex-start; gap: 8px; }

/* ── §9 Frameworks ────────────────────────────────────────── */
.mid-fw-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
}
.mid-fw-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: box-shadow var(--trans-med), border-color var(--trans-med);
}
.mid-fw-card:hover { box-shadow: var(--shadow-md); border-color: rgba(111,207,151,0.4); }
.mid-fw-card__top { display: flex; align-items: center; justify-content: space-between; }
.mid-fw-card__code {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800;
}
.mid-fw-card__region {
  font-size: 0.65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; background: var(--off-white);
  color: var(--mid-grey); border: 1px solid var(--border);
}
.mid-fw-card__readiness { display: flex; align-items: center; gap: 8px; }
.mid-fw-card__readiness-bar {
  flex: 1; height: 6px; background: var(--light-grey);
  border-radius: 3px; overflow: hidden;
}
.mid-fw-card__readiness-fill {
  height: 100%; border-radius: 3px;
  transition: width 1.2s var(--ease-out);
}
.mid-fw-card__readiness-pct { font-size: 0.72rem; font-weight: 700; width: 36px; text-align: right; }
.mid-fw-card__desc { font-size: 0.83rem; color: var(--mid-grey); line-height: 1.6; flex: 1; }
.mid-fw-card__bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; opacity: 0.3;
  transition: opacity var(--trans-fast);
}
.mid-fw-card:hover .mid-fw-card__bar { opacity: 0.65; }

/* ── §10 Case Study ────────────────────────────────────────── */
.mid-case { background: var(--off-white); padding: var(--sp-12) 0; }
.mid-case-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mid-case-card__head {
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.mid-case-card__head-left { display: flex; flex-direction: column; gap: 4px; }
.mid-case-card__sector {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.mid-case-card__company { font-size: 1.25rem; font-weight: 800; color: var(--white); }
.mid-case-card__size    { font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 500; }
.mid-case-card__region {
  font-size: 0.65rem; font-weight: 700; padding: 4px 12px;
  border-radius: 99px; background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}
.mid-case-card__body { padding: var(--sp-5); }
.mid-case-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.mid-case-card__col-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mid-grey); margin-bottom: 6px;
}
.mid-case-card__col-text { font-size: 0.88rem; color: var(--mid-grey); line-height: 1.68; margin: 0; }
.mid-case-card__outcomes {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: var(--sp-2); margin-top: var(--sp-3);
}
.mid-case-card__outcome {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.mid-case-card__outcome-val {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800;
}
.mid-case-card__outcome-label { font-size: 0.8rem; font-weight: 700; color: var(--charcoal); }
.mid-case-card__outcome-sub   { font-size: 0.7rem; color: var(--mid-grey); }
.mid-case-card__foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
}
.mid-case-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
  transition: gap var(--trans-fast), opacity var(--trans-fast);
}
.mid-case-card__link:hover { gap: 9px; opacity: 0.75; }

/* ── §13 CTA ──────────────────────────────────────────────── */
.mid-cta {
  position: relative;
  background: linear-gradient(140deg, #061e14 0%, #0B6E4F 60%, #0a3322 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-8);
  overflow: hidden; text-align: center;
}
.mid-cta__orb {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.mid-cta__orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(111,207,151,0.11) 0%, transparent 70%);
  top: -180px; right: -80px;
}
.mid-cta__orb--2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(168,230,207,0.07) 0%, transparent 70%);
  bottom: -120px; left: -60px;
}
.mid-cta__orbit {
  position: absolute; width: 640px; height: 640px; border-radius: 50%;
  border: 1px solid rgba(111,207,151,0.06);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: orbitSpin 44s linear infinite;
  pointer-events: none;
}
.mid-cta__inner { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; }
.mid-cta__eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(168,230,207,0.6);
  margin-bottom: var(--sp-2);
}
.mid-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 800;
  color: var(--white); line-height: 1.12; letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.mid-cta__accent {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mid-cta__desc {
  font-size: 1rem; color: rgba(255,255,255,0.5); line-height: 1.72;
  margin-bottom: var(--sp-5);
}
.mid-cta__actions {
  display: flex; gap: var(--sp-2); justify-content: center;
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.mid-cta__assurance {
  display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap;
  font-size: 0.73rem; color: rgba(255,255,255,0.35); font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mid-hero__layout         { gap: var(--sp-5); }
  .mid-hero__kpis           { grid-template-columns: repeat(2,1fr); }
  .mid-challenges__grid     { grid-template-columns: repeat(2,1fr); }
  .mid-sols-grid            { grid-template-columns: repeat(2,1fr); }
  .mid-uc-grid              { grid-template-columns: repeat(2,1fr); }
  .mid-fw-grid              { grid-template-columns: repeat(2,1fr); }
  .mid-workflow__track      { grid-template-columns: repeat(3,1fr); row-gap: var(--sp-5); }
  .mid-full-dash__body      { grid-template-columns: 1fr; }
  .mid-full-dash__sidebar   { display: none; }
  .mid-full-dash__kpi-row   { grid-template-columns: repeat(3,1fr); }
  .mid-full-dash__content-row { grid-template-columns: 1fr; }
  .mid-full-dash__fw-panel  { display: none; }
}
@media (max-width: 768px) {
  .mid-hero__layout         { grid-template-columns: 1fr; }
  .mid-hero__visual         { display: none; }
  .mid-hero__kpis           { grid-template-columns: repeat(2,1fr); }
  .mid-challenges__grid     { grid-template-columns: 1fr; }
  .mid-sols-grid            { grid-template-columns: 1fr; }
  .mid-uc-grid              { grid-template-columns: 1fr; }
  .mid-fw-grid              { grid-template-columns: 1fr; }
  .mid-workflow__track      { grid-template-columns: repeat(2,1fr); row-gap: var(--sp-5); }
  .mid-case-card__cols      { grid-template-columns: 1fr; }
  .mid-case-card__outcomes  { grid-template-columns: repeat(2,1fr); }
  .mid-cta                  { padding: var(--sp-8) var(--sp-3); border-radius: var(--radius-lg); }
  .mid-context__item        { padding: 8px var(--sp-2); font-size: 0.75rem; }
  .mid-full-dash__kpi-row   { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .mid-hero__kpis           { grid-template-columns: 1fr 1fr; }
  .mid-hero__ctas           { flex-direction: column; }
  .mid-workflow__track      { grid-template-columns: 1fr; }
  .mid-case-card__outcomes  { grid-template-columns: 1fr; }
  .mid-cta__actions         { flex-direction: column; align-items: center; }
  .mid-cta__assurance       { gap: var(--sp-2); flex-direction: column; align-items: center; }
}

/* ============================================================
   FW — Frameworks & Compliance Page
   Namespace: fw-
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.fw-hero {
  position: relative;
  background: linear-gradient(145deg, #0B1B14 0%, #0F2A1D 40%, #0B1E28 100%);
  padding: var(--sp-12) 0 var(--sp-10);
  overflow: hidden;
  color: var(--white);
}
.fw-hero__bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(212,160,23,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.fw-hero__orbit {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(212,160,23,0.08);
}
.fw-hero__orbit--1 { width: 700px; height: 700px; top: -200px; right: -200px; animation: orbitSpin 60s linear infinite; }
.fw-hero__orbit--2 { width: 420px; height: 420px; top: -50px; right: -50px; animation: orbitSpin 40s linear infinite reverse; border-color: rgba(111,207,151,0.07); }

.fw-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.fw-hero__breadcrumb { color: rgba(255,255,255,0.35); margin-bottom: var(--sp-3); }
.fw-hero__breadcrumb a { color: rgba(255,255,255,0.35); }
.fw-hero__breadcrumb a:hover { color: var(--soft-yellow); }
.fw-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(212,160,23,0.8);
  margin-bottom: var(--sp-3);
}
.fw-hero__eyebrow-line {
  display: block; width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--soft-yellow), transparent);
  border-radius: 2px;
}
.fw-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--white); margin-bottom: var(--sp-4);
}
.fw-hero__h1-accent {
  background: linear-gradient(135deg, var(--soft-yellow) 0%, #F5A623 50%, var(--eco-green) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fw-hero__desc {
  font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.72;
  max-width: 560px; margin-bottom: var(--sp-5);
}
.fw-hero__ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.fw-hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fw-hero__trust-chip {
  display: inline-block; padding: 4px 10px;
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: 99px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(212,160,23,0.75);
  background: rgba(212,160,23,0.05);
}

/* ── Compliance Panel (hero right) ─────────────────────────── */
.fw-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,160,23,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 60px rgba(212,160,23,0.06), 0 20px 60px rgba(0,0,0,0.4);
}
.fw-panel__header {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 16px;
}
.fw-panel__header-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.fw-panel__header-dot--red   { background: #FF5F57; }
.fw-panel__header-dot--yellow { background: #FFBD2E; margin-right: 2px; }
.fw-panel__header-dot--green  { background: #28C840; }
.fw-panel__header-title {
  flex: 1; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.fw-panel__live {
  font-size: 0.65rem; font-weight: 700; color: #22c55e;
  letter-spacing: 0.06em;
}
.fw-panel__body { padding: var(--sp-4); }
.fw-panel__entity-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fw-panel__entity-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.3);
}
.fw-panel__entity-val {
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.7);
}
.fw-panel__fw-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-3); }
.fw-panel__fw-row {
  display: grid; grid-template-columns: 90px 1fr 34px 72px;
  align-items: center; gap: 8px;
}
.fw-panel__fw-code { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.65); }
.fw-panel__fw-bar-wrap {
  height: 6px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden;
}
.fw-panel__fw-bar-fill { height: 100%; border-radius: 99px; transition: width 1s ease; }
.fw-panel__fw-pct { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.4); text-align: right; }
.fw-panel__fw-status { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; text-align: right; }
.fw-panel__divider { height: 1px; background: rgba(255,255,255,0.06); margin: var(--sp-2) 0; }
.fw-panel__footer-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: var(--sp-3); }
.fw-panel__footer-item { text-align: center; }
.fw-panel__footer-val {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800;
  color: var(--white); line-height: 1;
}
.fw-panel__footer-label { font-size: 0.62rem; color: rgba(255,255,255,0.35); margin-top: 3px; }
.fw-panel__badge {
  background: rgba(212,160,23,0.08);
  border: 1px solid rgba(212,160,23,0.2);
  border-radius: var(--radius-sm);
  padding: 6px 10px; text-align: center;
}
.fw-panel__badge-text { font-size: 0.7rem; font-weight: 700; color: rgba(212,160,23,0.8); }

/* ── Framework Cards Grid ──────────────────────────────────── */
.fw-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.fw-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  transition: all var(--transition-medium);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.fw-card:hover {
  border-color: var(--fw-accent, #D4A017);
  box-shadow: 0 0 0 1px var(--fw-accent, #D4A017), 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.fw-card__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 4px 0 0 4px; opacity: 0.5;
  transition: opacity var(--transition-medium);
}
.fw-card:hover .fw-card__bar { opacity: 1; }

.fw-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.fw-card__icon-wrap {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fw-card__icon { font-size: 1.4rem; }
.fw-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fw-card__region { font-size: 0.68rem; color: var(--mid-grey); font-weight: 600; }

/* Badges */
.fw-badge {
  display: inline-block; padding: 3px 8px;
  border-radius: 99px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.fw-badge--gold   { background: rgba(212,160,23,0.12); color: #A07800; border: 1px solid rgba(212,160,23,0.3); }
.fw-badge--blue   { background: rgba(59,130,246,0.1);  color: #1D4ED8; border: 1px solid rgba(59,130,246,0.25); }
.fw-badge--green  { background: rgba(47,133,90,0.1);   color: #166534; border: 1px solid rgba(47,133,90,0.25); }
.fw-badge--teal   { background: rgba(8,145,178,0.1);   color: #0E7490; border: 1px solid rgba(8,145,178,0.25); }

.fw-card__code {
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 900;
  letter-spacing: -0.02em; color: var(--charcoal);
}
.fw-card__name { font-size: 0.88rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.fw-card__desc { font-size: 0.82rem; color: var(--mid-grey); line-height: 1.65; }

.fw-card__relevance { background: var(--surface); border-radius: var(--radius-md); padding: var(--sp-3); }
.fw-card__relevance-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mid-grey); margin-bottom: 5px; }
.fw-card__relevance-text { font-size: 0.8rem; color: var(--charcoal); line-height: 1.58; }

.fw-card__support-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mid-grey); margin-bottom: var(--sp-2); }
.fw-card__support-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fw-card__support-item { display: flex; align-items: flex-start; gap: 7px; font-size: 0.79rem; color: var(--charcoal); }
.fw-card__support-check { color: var(--deep-green); font-weight: 800; flex-shrink: 0; margin-top: 1px; }

.fw-card__readiness-row {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
}
.fw-card__readiness-label { font-size: 0.65rem; font-weight: 700; color: var(--mid-grey); min-width: 110px; }
.fw-card__readiness-bar {
  flex: 1; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.fw-card__readiness-fill { height: 100%; border-radius: 99px; transition: width 1.2s ease 0.3s; }
.fw-card__readiness-pct { font-size: 0.7rem; font-weight: 800; color: var(--charcoal); }

.fw-card__stat-row { border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.fw-card__stat-val {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900; line-height: 1;
}
.fw-card__stat-label { font-size: 0.7rem; color: var(--mid-grey); margin-top: 3px; }

.fw-card__solutions { display: flex; flex-wrap: wrap; gap: 7px; }
.fw-card__sol-tag {
  display: inline-block; padding: 4px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.7rem; font-weight: 700;
  color: var(--deep-green); text-decoration: none;
  transition: all var(--transition-fast);
}
.fw-card__sol-tag:hover {
  background: var(--deep-green); color: var(--white); border-color: var(--deep-green);
}

/* ── Challenges ────────────────────────────────────────────── */
.fw-challenges-section {
  background: linear-gradient(135deg, #F5F1E8 0%, #EBF9F2 100%);
}
.fw-challenges__layout {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-10); align-items: start;
}
.fw-challenges__h2 {
  font-family: var(--font-heading); font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.15; margin-bottom: var(--sp-4);
}
.fw-challenges__lead {
  font-size: 0.95rem; color: var(--mid-grey); line-height: 1.72; margin-bottom: var(--sp-5);
}
.fw-challenges__grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3);
}
.fw-challenge-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-3);
  transition: all var(--transition-medium);
}
.fw-challenge-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fw-challenge-card__icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.fw-challenge-card__title { font-size: 0.85rem; font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.fw-challenge-card__desc { font-size: 0.79rem; color: var(--mid-grey); line-height: 1.58; }

/* ── Process steps ─────────────────────────────────────────── */
.fw-process-track {
  display: grid; grid-template-columns: repeat(6,1fr); gap: var(--sp-3); position: relative;
}
.fw-process-step {
  position: relative; text-align: center; padding-top: var(--sp-4);
}
.fw-process-step__connector {
  display: none;
}
.fw-process-step::before {
  content: ''; position: absolute; top: 24px; left: 50%; right: -50%;
  height: 2px; background: linear-gradient(90deg, rgba(47,133,90,0.4), rgba(47,133,90,0.1));
  z-index: 0;
}
.fw-process-step:last-child::before { display: none; }
.fw-process-step__icon-wrap {
  position: relative; z-index: 1; width: 48px; height: 48px;
  border-radius: 50%; margin: 0 auto var(--sp-2);
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(11,110,79,0.3);
}
.fw-process-step__number {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--deep-green); margin-bottom: 6px;
}
.fw-process-step__title {
  font-size: 0.82rem; font-weight: 700; color: var(--charcoal); margin-bottom: 6px; line-height: 1.3;
}
.fw-process-step__desc { font-size: 0.74rem; color: var(--mid-grey); line-height: 1.58; }

/* ── Gazelles advisory section ─────────────────────────────── */
.fw-gazelles-section {
  background: linear-gradient(135deg, #0B1B14 0%, #0F2A1D 100%);
  color: var(--white);
}
.fw-gazelles__layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start;
}
.fw-gazelles__h2 {
  font-family: var(--font-heading); font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800; color: var(--white); line-height: 1.12; margin-bottom: var(--sp-4);
}
.fw-gazelles__desc {
  font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.72; margin-bottom: var(--sp-5);
}
.fw-gazelles__services { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.fw-gazelles__service-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.fw-gazelles__service-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: rgba(212,160,23,0.1); border: 1px solid rgba(212,160,23,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.fw-gazelles__service-title { font-size: 0.88rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.fw-gazelles__service-desc  { font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.6; }

/* Gazelles timeline panel */
.fw-gaz-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,160,23,0.18);
  border-radius: var(--radius-xl); overflow: hidden;
  backdrop-filter: blur(12px);
}
.fw-gaz-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.fw-gaz-panel__title { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.6); }
.fw-gaz-panel__tag {
  font-size: 0.62rem; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  background: rgba(212,160,23,0.15); color: rgba(212,160,23,0.9);
  border: 1px solid rgba(212,160,23,0.25);
}
.fw-gaz-panel__timeline { display: flex; flex-direction: column; gap: 0; padding: var(--sp-3) var(--sp-4); }
.fw-gaz-timeline__row {
  display: grid; grid-template-columns: 52px 1px 64px 1fr auto;
  align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
}
.fw-gaz-timeline__row:last-child { border-bottom: none; }
.fw-gaz-timeline__row--done { opacity: 1; }
.fw-gaz-timeline__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; justify-self: center;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.2);
}
.fw-gaz-timeline__row--done .fw-gaz-timeline__dot {
  background: var(--eco-green); border-color: var(--eco-green);
}
.fw-gaz-timeline__line {
  width: 1px; height: 100%; background: rgba(255,255,255,0.08); justify-self: center;
}
.fw-gaz-timeline__month {
  font-size: 0.68rem; font-weight: 700; color: rgba(212,160,23,0.7); letter-spacing: 0.04em;
}
.fw-gaz-timeline__label {
  font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.4;
}
.fw-gaz-timeline__row--done .fw-gaz-timeline__label { color: rgba(255,255,255,0.85); }
.fw-gaz-timeline__check { font-size: 0.75rem; color: var(--eco-green); font-weight: 800; }
.fw-gaz-panel__footer {
  padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(212,160,23,0.06);
  text-align: center;
}
.fw-gaz-panel__footer-note { font-size: 0.72rem; color: rgba(212,160,23,0.8); font-weight: 600; }

/* ── Governance cards ──────────────────────────────────────── */
.fw-gov-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4);
}
.fw-gov-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: all var(--transition-medium);
}
.fw-gov-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fw-gov-card__step {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 900;
  color: var(--white);
}
.fw-gov-card__title { font-size: 0.9rem; font-weight: 700; color: var(--charcoal); }
.fw-gov-card__desc { font-size: 0.8rem; color: var(--mid-grey); line-height: 1.62; flex: 1; }
.fw-gov-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fw-gov-card__tag {
  display: inline-block; padding: 3px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.65rem; font-weight: 700;
  color: var(--mid-grey);
}

/* ── Outcomes ──────────────────────────────────────────────── */
.fw-outcomes-section {
  background: linear-gradient(135deg, #0B1B14 0%, #1a2a1a 50%, #0B1E28 100%);
  position: relative; overflow: hidden;
}
.fw-outcomes-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(212,160,23,0.04), transparent);
}
.fw-outcomes-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4);
}
.fw-outcome-card {
  text-align: center; padding: var(--sp-5) var(--sp-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: var(--radius-xl);
  transition: all var(--transition-medium);
}
.fw-outcome-card:hover {
  background: rgba(212,160,23,0.06);
  border-color: rgba(212,160,23,0.3);
  transform: translateY(-3px);
}
.fw-outcome-card__icon { font-size: 1.6rem; margin-bottom: var(--sp-2); display: block; }
.fw-outcome-card__stat {
  font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--soft-yellow), #F5A623);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1; margin-bottom: var(--sp-2);
}
.fw-outcome-card__label {
  font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.5;
}

/* ── Guides ────────────────────────────────────────────────── */
.fw-guides-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3);
}
.fw-guide-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  text-decoration: none; color: inherit;
  transition: all var(--transition-medium);
  position: relative; overflow: hidden;
}
.fw-guide-card:hover {
  border-color: var(--soft-yellow);
  box-shadow: 0 0 0 1px rgba(212,160,23,0.3), 0 8px 24px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}
.fw-guide-card__type {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(212,160,23,0.9);
  background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.2);
  padding: 3px 8px; border-radius: 99px; align-self: flex-start;
}
.fw-guide-card__download-icon {
  font-size: 1.2rem; color: var(--mid-grey);
}
.fw-guide-card__title {
  font-size: 0.88rem; font-weight: 700; color: var(--charcoal); line-height: 1.42; flex: 1;
}
.fw-guide-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--border);
}
.fw-guide-card__time { font-size: 0.72rem; color: var(--mid-grey); }
.fw-guide-card__arrow { font-size: 0.9rem; color: var(--deep-green); font-weight: 700; }

/* ── FAQ section ───────────────────────────────────────────── */
.fw-faq-section { background: linear-gradient(135deg, #F5F1E8 0%, #EBF9F2 100%); }

/* ── Internal links ────────────────────────────────────────── */
.fw-links-row { display: flex; flex-direction: column; gap: var(--sp-5); }
.fw-links-group__label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid-grey); margin-bottom: var(--sp-2);
}
.fw-links-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-link-chip {
  display: inline-block; padding: 7px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.78rem; font-weight: 600;
  color: var(--charcoal); text-decoration: none;
  transition: all var(--transition-fast);
}
.fw-link-chip:hover {
  background: var(--deep-green); color: var(--white); border-color: var(--deep-green);
}

/* ── CTA band ──────────────────────────────────────────────── */
.fw-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #0B1B14, #0F2A1D, #1a2a12);
  border-radius: var(--radius-2xl);
  padding: var(--sp-12) var(--sp-6); text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}
.fw-cta__orbit {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.fw-cta__orbit--1 {
  width: 600px; height: 600px; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(212,160,23,0.06);
  animation: orbitSpin 50s linear infinite;
}
.fw-cta__orbit--2 {
  width: 380px; height: 380px; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(111,207,151,0.07);
  animation: orbitSpin 32s linear infinite reverse;
}
.fw-cta__inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.fw-cta__eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(212,160,23,0.7); margin-bottom: var(--sp-3);
}
.fw-cta__title {
  font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 800; color: var(--white); line-height: 1.12;
  letter-spacing: -0.02em; margin-bottom: var(--sp-3);
}
.fw-cta__accent {
  background: linear-gradient(135deg, var(--soft-yellow), #F5A623, var(--eco-green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fw-cta__desc {
  font-size: 1rem; color: rgba(255,255,255,0.5); line-height: 1.72; margin-bottom: var(--sp-5);
}
.fw-cta__actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.fw-cta__assurance {
  display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
  font-size: 0.7rem; color: rgba(255,255,255,0.3); font-weight: 500;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .fw-cards-grid    { grid-template-columns: repeat(2,1fr); }
  .fw-guides-grid   { grid-template-columns: repeat(2,1fr); }
  .fw-process-track { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1100px) {
  .fw-hero__layout        { grid-template-columns: 1fr; }
  .fw-hero__panel         { max-width: 560px; }
  .fw-challenges__layout  { grid-template-columns: 1fr; gap: var(--sp-6); }
  .fw-gazelles__layout    { grid-template-columns: 1fr; }
  .fw-outcomes-grid       { grid-template-columns: repeat(3,1fr); }
  .fw-gov-grid            { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .fw-hero          { padding: var(--sp-8) 0 var(--sp-6); }
  .fw-cards-grid    { grid-template-columns: 1fr; }
  .fw-challenges__grid { grid-template-columns: 1fr; }
  .fw-process-track { grid-template-columns: repeat(2,1fr); }
  .fw-outcomes-grid { grid-template-columns: repeat(2,1fr); }
  .fw-gov-grid      { grid-template-columns: 1fr; }
  .fw-guides-grid   { grid-template-columns: 1fr 1fr; }
  .fw-panel         { display: none; }
  .fw-gaz-panel     { display: none; }
}
@media (max-width: 480px) {
  .fw-hero__ctas         { flex-direction: column; }
  .fw-outcomes-grid      { grid-template-columns: 1fr; }
  .fw-process-track      { grid-template-columns: 1fr; }
  .fw-guides-grid        { grid-template-columns: 1fr; }
  .fw-cta__actions       { flex-direction: column; align-items: center; }
  .fw-cta__assurance     { flex-direction: column; align-items: center; gap: var(--sp-1); font-size: 0.65rem; }
}

/* ============================================================
   RH — Resources Hub Page
   Namespace: rh-
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.rh-hero {
  position: relative;
  background: linear-gradient(160deg, #0B1B14 0%, #0F2420 45%, #091820 100%);
  padding: var(--sp-12) 0 var(--sp-10);
  overflow: hidden;
  color: var(--white);
}
.rh-hero__grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.6;
}
.rh-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: end;
}
.rh-hero__breadcrumb { color: rgba(255,255,255,0.35); margin-bottom: var(--sp-3); }
.rh-hero__breadcrumb a { color: rgba(255,255,255,0.35); }
.rh-hero__breadcrumb a:hover { color: var(--eco-green); }
.rh-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(111,207,151,0.8); margin-bottom: var(--sp-3);
}
.rh-hero__eyebrow-pip {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--eco-green);
  box-shadow: 0 0 8px rgba(111,207,151,0.6);
}
.rh-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--white); margin-bottom: var(--sp-4);
}
.rh-hero__h1-accent {
  background: linear-gradient(135deg, var(--eco-green) 0%, var(--soft-mint) 60%, #A8E6CF 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rh-hero__desc {
  font-size: 1rem; color: rgba(255,255,255,0.55); line-height: 1.75;
  max-width: 600px; margin-bottom: var(--sp-5);
}
.rh-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-hero__cat-pill {
  display: inline-block; padding: 6px 14px;
  background: rgba(111,207,151,0.08);
  border: 1px solid rgba(111,207,151,0.2);
  border-radius: 99px; font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.7); text-decoration: none;
  transition: all var(--transition-fast);
}
.rh-hero__cat-pill:hover {
  background: rgba(111,207,151,0.18); color: var(--eco-green);
  border-color: rgba(111,207,151,0.4);
}

/* Hero stats column */
.rh-hero__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(111,207,151,0.1);
  border-radius: var(--radius-xl); overflow: hidden;
  min-width: 260px;
}
.rh-hero__stat {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-4) var(--sp-3); gap: 4px; text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  transition: background var(--transition-fast);
}
.rh-hero__stat:hover { background: rgba(111,207,151,0.06); }
.rh-hero__stat-icon { font-size: 1.3rem; }
.rh-hero__stat-val {
  font-family: var(--font-heading); font-size: 1.6rem; font-weight: 900;
  color: var(--eco-green); letter-spacing: -0.02em; line-height: 1;
}
.rh-hero__stat-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); font-weight: 500; }

/* ── Shared badge ──────────────────────────────────────────── */
.rh-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
.rh-badge--teal   { background: rgba(8,145,178,0.1);   color: #0E7490; border: 1px solid rgba(8,145,178,0.25); }
.rh-badge--green  { background: rgba(47,133,90,0.1);   color: #166534; border: 1px solid rgba(47,133,90,0.25); }
.rh-badge--mint   { background: rgba(111,207,151,0.15); color: var(--deep-green); border: 1px solid rgba(111,207,151,0.3); }
.rh-badge--gold   { background: rgba(212,160,23,0.1);  color: #A07800; border: 1px solid rgba(212,160,23,0.25); }
.rh-badge--purple { background: rgba(124,58,237,0.1);  color: #6D28D9; border: 1px solid rgba(124,58,237,0.25); }
.rh-badge--grey   { background: rgba(107,114,128,0.1); color: #4B5563; border: 1px solid rgba(107,114,128,0.2); }

/* ── Featured card ─────────────────────────────────────────── */
.rh-featured {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  background: linear-gradient(135deg, #0B6E4F 0%, #0F2A1D 55%, #0B1E28 100%);
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  position: relative;
}
.rh-featured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 20% 50%, rgba(111,207,151,0.07), transparent);
}
.rh-featured__left {
  padding: var(--sp-8) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4);
  position: relative; z-index: 1;
}
.rh-featured__eyebrow { display: flex; align-items: center; gap: var(--sp-2); }
.rh-featured__date { font-size: 0.72rem; color: rgba(255,255,255,0.4); font-weight: 600; }
.rh-featured__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800; color: var(--white); line-height: 1.18; letter-spacing: -0.02em;
}
.rh-featured__excerpt { font-size: 0.92rem; color: rgba(255,255,255,0.6); line-height: 1.72; }
.rh-featured__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rh-featured__tag {
  display: inline-block; padding: 4px 10px;
  background: rgba(111,207,151,0.1); border: 1px solid rgba(111,207,151,0.2);
  border-radius: 99px; font-size: 0.68rem; font-weight: 700;
  color: rgba(168,230,207,0.9);
}
.rh-featured__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto; }
.rh-featured__meta { font-size: 0.75rem; color: rgba(255,255,255,0.4); font-weight: 500; }

.rh-featured__right {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6);
  background: rgba(0,0,0,0.15);
  border-left: 1px solid rgba(255,255,255,0.06);
  justify-content: center;
}
.rh-featured__stats-panel { display: flex; flex-direction: column; gap: var(--sp-2); }
.rh-featured__panel-label {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 4px;
}
.rh-featured__panel-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  gap: var(--sp-3);
}
.rh-featured__panel-val {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900;
  color: var(--eco-green); line-height: 1;
}
.rh-featured__panel-label-sm { font-size: 0.72rem; color: rgba(255,255,255,0.45); }

.rh-featured__cover {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  text-align: center;
}
.rh-featured__cover-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rh-featured__cover-icon { font-size: 2.5rem; }
.rh-featured__cover-title {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800;
  color: var(--white); line-height: 1.3;
}
.rh-featured__cover-sub { font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.rh-featured__cover-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--eco-green); background: rgba(111,207,151,0.1);
  border: 1px solid rgba(111,207,151,0.2);
  padding: 3px 8px; border-radius: 99px;
}

/* ── Category cards ────────────────────────────────────────── */
.rh-cats-section { background: linear-gradient(160deg, #F5F1E8 0%, #EBF9F2 100%); }
.rh-cats-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
}
.rh-cat-card {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--cat-accent-border, var(--border));
  border-radius: var(--radius-xl); padding: var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  text-decoration: none; color: inherit;
  transition: all var(--transition-medium);
}
.rh-cat-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-3px);
  border-color: var(--cat-accent, #2F855A);
}
.rh-cat-card__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-accent, #2F855A); opacity: 0.4;
  transition: opacity var(--transition-medium);
}
.rh-cat-card:hover .rh-cat-card__bar { opacity: 1; }
.rh-cat-card__top { display: flex; align-items: center; justify-content: space-between; }
.rh-cat-card__icon-wrap {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--cat-accent-bg, rgba(47,133,90,0.08));
  display: flex; align-items: center; justify-content: center;
}
.rh-cat-card__icon { font-size: 1.3rem; }
.rh-cat-card__count {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900;
  color: var(--cat-accent, #2F855A); line-height: 1;
}
.rh-cat-card__label { font-size: 1rem; font-weight: 800; color: var(--charcoal); margin-top: 2px; }
.rh-cat-card__desc { font-size: 0.82rem; color: var(--mid-grey); line-height: 1.6; }
.rh-cat-card__items {
  list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 4px;
}
.rh-cat-card__items li {
  font-size: 0.75rem; color: var(--mid-grey);
  padding-left: 14px; position: relative;
}
.rh-cat-card__items li::before {
  content: '·'; position: absolute; left: 4px;
  color: var(--cat-accent, #2F855A); font-weight: 800;
}
.rh-cat-card__cta {
  margin-top: auto; padding-top: var(--sp-2);
  font-size: 0.78rem; font-weight: 700;
  color: var(--cat-accent, #2F855A);
  border-top: 1px solid var(--border);
}

/* ── Filter bar ────────────────────────────────────────────── */
.rh-filter-bar {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.rh-filter-bar__search-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px;
  transition: border-color var(--transition-fast);
}
.rh-filter-bar__search-wrap:focus-within {
  border-color: var(--deep-green);
  box-shadow: 0 0 0 3px rgba(11,110,79,0.08);
}
.rh-filter-bar__search-icon { font-size: 0.9rem; flex-shrink: 0; opacity: 0.5; }
.rh-filter-bar__search {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--charcoal);
}
.rh-filter-bar__search::placeholder { color: var(--mid-grey); }
.rh-filter-bar__tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rh-filter-tab {
  display: inline-block; padding: 6px 14px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.78rem; font-weight: 600;
  color: var(--mid-grey); cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-body);
}
.rh-filter-tab:hover { color: var(--charcoal); border-color: var(--charcoal); }
.rh-filter-tab--active {
  background: var(--deep-green); color: var(--white); border-color: var(--deep-green);
}

/* ── Content grid ──────────────────────────────────────────── */
.rh-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.rh-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  text-decoration: none; color: inherit;
  transition: all var(--transition-medium);
  position: relative; overflow: hidden;
}
.rh-card::before {
  content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--eco-green), var(--soft-mint));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-medium);
}
.rh-card:hover {
  border-color: rgba(111,207,151,0.4);
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
  transform: translateY(-3px);
}
.rh-card:hover::before { transform: scaleX(1); }
.rh-card__top {
  display: flex; align-items: center; justify-content: space-between;
}
.rh-card__date { font-size: 0.68rem; color: var(--mid-grey); font-weight: 600; }
.rh-card__title {
  font-size: 0.95rem; font-weight: 700; color: var(--charcoal); line-height: 1.42; flex: 1;
}
.rh-card__excerpt {
  font-size: 0.82rem; color: var(--mid-grey); line-height: 1.65; flex: 1;
}
.rh-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.rh-card__topic-chip {
  display: inline-block; padding: 3px 8px;
  background: var(--surface); border-radius: 99px;
  font-size: 0.65rem; font-weight: 700; color: var(--mid-grey);
  border: 1px solid var(--border);
}
.rh-card__read { display: flex; align-items: center; gap: 5px; }
.rh-card__read-time { font-size: 0.72rem; color: var(--mid-grey); }
.rh-card__arrow { font-size: 0.88rem; color: var(--deep-green); font-weight: 700; }

/* Load more */
.rh-load-more {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.rh-load-more__count { font-size: 0.82rem; color: var(--mid-grey); }
.btn--outline-dark {
  background: transparent; border: 1.5px solid var(--charcoal);
  color: var(--charcoal);
}
.btn--outline-dark:hover { background: var(--charcoal); color: var(--white); }

/* ── Mid section (topics + newsletter) ────────────────────── */
.rh-mid-section { background: linear-gradient(135deg, #EBF9F2 0%, #F5F1E8 100%); }
.rh-mid-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start;
}

/* Topics */
.rh-topics__h3 {
  font-family: var(--font-heading); font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.2; margin-bottom: var(--sp-2);
}
.rh-topics__desc { font-size: 0.88rem; color: var(--mid-grey); line-height: 1.65; margin-bottom: var(--sp-4); }
.rh-topics__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-topic-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 99px; text-decoration: none;
  transition: all var(--transition-fast);
}
.rh-topic-chip:hover {
  background: var(--deep-green); border-color: var(--deep-green);
}
.rh-topic-chip:hover .rh-topic-chip__label,
.rh-topic-chip:hover .rh-topic-chip__count { color: var(--white); }
.rh-topic-chip__label { font-size: 0.78rem; font-weight: 700; color: var(--charcoal); }
.rh-topic-chip__count {
  font-size: 0.62rem; font-weight: 800; color: var(--mid-grey);
  background: var(--surface); padding: 2px 6px; border-radius: 99px;
  transition: background var(--transition-fast);
}

/* Newsletter */
.rh-newsletter__inner {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.rh-newsletter__icon { font-size: 2rem; }
.rh-newsletter__eyebrow {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--deep-green);
}
.rh-newsletter__h3 {
  font-family: var(--font-heading); font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.2;
}
.rh-newsletter__desc { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.65; }
.rh-newsletter__benefits {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
}
.rh-newsletter__benefits li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: var(--charcoal);
}
.rh-newsletter__check { color: var(--deep-green); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.rh-newsletter__input-row { display: flex; gap: 8px; }
.rh-newsletter__input {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 0.9rem; color: var(--charcoal);
  outline: none; transition: border-color var(--transition-fast);
}
.rh-newsletter__input:focus { border-color: var(--deep-green); box-shadow: 0 0 0 3px rgba(11,110,79,0.08); }
.rh-newsletter__btn { white-space: nowrap; }
.rh-newsletter__legal { font-size: 0.72rem; color: var(--mid-grey); }

/* ── Glossary ──────────────────────────────────────────────── */
.rh-glossary-layout {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-10); align-items: start;
}
.rh-glossary__h2 {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.18; margin-bottom: var(--sp-3);
}
.rh-glossary__desc {
  font-size: 0.9rem; color: var(--mid-grey); line-height: 1.72; margin-bottom: var(--sp-4);
}
.rh-glossary__terms { display: flex; flex-direction: column; gap: var(--sp-3); }
.rh-glossary-term {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--eco-green);
  transition: all var(--transition-medium);
}
.rh-glossary-term:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.rh-glossary-term__word {
  font-size: 0.92rem; font-weight: 800; color: var(--charcoal); margin-bottom: 6px;
}
.rh-glossary-term__def { font-size: 0.82rem; color: var(--mid-grey); line-height: 1.65; }

/* ── Free tools ────────────────────────────────────────────── */
.rh-tools-section {
  background: linear-gradient(160deg, #EBF9F2 0%, #E0F5F5 100%);
}
.rh-tools-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3);
}
.rh-tool-card {
  background: var(--white); border: 1px solid rgba(8,145,178,0.2);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: all var(--transition-medium);
}
.rh-tool-card:hover {
  border-color: #0891B2;
  box-shadow: 0 8px 28px rgba(8,145,178,0.1);
  transform: translateY(-3px);
}
.rh-tool-card__icon { font-size: 1.8rem; }
.rh-tool-card__title { font-size: 0.9rem; font-weight: 800; color: var(--charcoal); line-height: 1.35; }
.rh-tool-card__desc { font-size: 0.79rem; color: var(--mid-grey); line-height: 1.62; flex: 1; }
.rh-tool-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.rh-tool-card__tag {
  display: inline-block; padding: 3px 7px;
  background: rgba(8,145,178,0.07); border: 1px solid rgba(8,145,178,0.15);
  border-radius: 99px; font-size: 0.62rem; font-weight: 700; color: #0E7490;
}
.rh-tool-card__cta {
  display: block; margin-top: auto;
  padding: 9px 14px; text-align: center;
  background: linear-gradient(135deg, #0891B2, #0E7490);
  color: var(--white); border-radius: var(--radius-md);
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
  transition: opacity var(--transition-fast);
}
.rh-tool-card__cta:hover { opacity: 0.88; }

/* ── Related solutions strip ───────────────────────────────── */
.rh-solutions-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center;
}
.rh-solutions-strip__h3 {
  font-family: var(--font-heading); font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.2; margin-bottom: var(--sp-2);
}
.rh-solutions-strip__desc {
  font-size: 0.88rem; color: var(--mid-grey); line-height: 1.65; margin-bottom: var(--sp-4);
}
.rh-solutions-strip__cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-2);
}
.rh-sol-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-3); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: all var(--transition-medium);
}
.rh-sol-card:hover {
  background: var(--deep-green); border-color: var(--deep-green);
}
.rh-sol-card:hover .rh-sol-card__label,
.rh-sol-card:hover .rh-sol-card__arrow { color: var(--white); }
.rh-sol-card__icon { font-size: 1.3rem; }
.rh-sol-card__label { font-size: 0.75rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.rh-sol-card__arrow { font-size: 0.75rem; color: var(--deep-green); }

/* ── CTA band ──────────────────────────────────────────────── */
.rh-cta {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-8);
  align-items: center;
  background: linear-gradient(135deg, var(--surface), #EBF9F2);
  border: 1px solid rgba(111,207,151,0.25);
  border-radius: var(--radius-2xl); padding: var(--sp-8);
  position: relative; overflow: hidden;
}
.rh-cta::before {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,207,151,0.08), transparent 70%);
  pointer-events: none;
}
.rh-cta__eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--deep-green); margin-bottom: var(--sp-2);
}
.rh-cta__title {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 800; color: var(--charcoal); line-height: 1.15; margin-bottom: var(--sp-3);
}
.rh-cta__desc {
  font-size: 0.9rem; color: var(--mid-grey); line-height: 1.7; margin-bottom: var(--sp-5);
}
.rh-cta__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rh-cta__right {
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: flex-start; justify-content: center;
}
.rh-cta__stat {
  padding: var(--sp-3) var(--sp-4);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%;
  border-left: 3px solid var(--eco-green);
}
.rh-cta__stat-val {
  font-family: var(--font-heading); font-size: 1.6rem; font-weight: 900;
  color: var(--deep-green); line-height: 1;
}
.rh-cta__stat-label { font-size: 0.72rem; color: var(--mid-grey); margin-top: 3px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .rh-tools-grid     { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1100px) {
  .rh-hero__inner    { grid-template-columns: 1fr; }
  .rh-hero__stats    { grid-template-columns: repeat(4,1fr); min-width: unset; }
  .rh-featured       { grid-template-columns: 1fr; }
  .rh-featured__right { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); }
  .rh-cats-grid      { grid-template-columns: repeat(2,1fr); }
  .rh-grid           { grid-template-columns: repeat(2,1fr); }
  .rh-mid-layout     { grid-template-columns: 1fr; gap: var(--sp-6); }
  .rh-glossary-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .rh-solutions-strip { grid-template-columns: 1fr; gap: var(--sp-5); }
  .rh-cta            { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .rh-hero           { padding: var(--sp-8) 0 var(--sp-6); }
  .rh-hero__stats    { grid-template-columns: repeat(2,1fr); }
  .rh-cats-grid      { grid-template-columns: 1fr; }
  .rh-grid           { grid-template-columns: 1fr; }
  .rh-tools-grid     { grid-template-columns: 1fr 1fr; }
  .rh-solutions-strip__cards { grid-template-columns: repeat(2,1fr); }
  .rh-filter-bar__tabs { gap: 5px; }
  .rh-filter-tab     { padding: 5px 10px; font-size: 0.72rem; }
}
@media (max-width: 480px) {
  .rh-hero__cat-pill { padding: 5px 10px; font-size: 0.72rem; }
  .rh-hero__h1       { font-size: 1.8rem; }
  .rh-hero__stats    { grid-template-columns: 1fr 1fr; }
  .rh-tools-grid     { grid-template-columns: 1fr; }
  .rh-solutions-strip__cards { grid-template-columns: repeat(3,1fr); }
  .rh-cta__actions   { flex-direction: column; }
  .rh-featured__actions { flex-direction: column; align-items: flex-start; }
  .rh-newsletter__input-row { flex-direction: column; }
}

/* ── RH Enhanced Components (v2) ───────────────────────────── */

/* Grid-lines overlay in hero */
.rh-hero__grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(111,207,151,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,151,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Hero trust strip */
.rh-hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.rh-hero__trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: rgba(255,255,255,0.4); font-weight: 500;
}
.rh-hero__trust-dot {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--eco-green); opacity: 0.7;
}
.rh-hero__trust-sep { color: rgba(255,255,255,0.15); }

/* Scroll cue */
.rh-hero__scroll {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.rh-hero__scroll-line {
  display: block; width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(111,207,151,0.5), transparent);
  animation: rh-scroll-pulse 2s ease-in-out infinite;
}
@keyframes rh-scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 0.9; transform: scaleY(1.15); }
}

/* ── Editorial Ticker ──────────────────────────────────────── */
.rh-ticker {
  background: var(--deep-green); overflow: hidden;
  padding: 10px 0; white-space: nowrap;
  border-bottom: 1px solid rgba(111,207,151,0.15);
}
.rh-ticker__track {
  display: inline-flex; gap: 0;
  animation: rh-ticker-scroll 30s linear infinite;
}
.rh-ticker:hover .rh-ticker__track { animation-play-state: paused; }
.rh-ticker__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(168,230,207,0.8); padding: 0 var(--sp-5);
}
.rh-ticker__pip {
  font-size: 0.45rem; color: var(--eco-green); opacity: 0.6;
}
@keyframes rh-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Featured section header ───────────────────────────────── */
.rh-featured-section {
  background: var(--white);
}
.rh-featured-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.rh-featured-header__link {
  font-size: 0.82rem; font-weight: 700; color: var(--deep-green);
  text-decoration: none; transition: opacity var(--transition-fast);
}
.rh-featured-header__link:hover { opacity: 0.7; }

/* Accent bar on featured */
.rh-featured__accent-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--eco-green), var(--soft-mint), #0891B2, var(--eco-green));
  background-size: 200% auto;
  animation: rh-shimmer 4s linear infinite;
}
@keyframes rh-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Glow inside cover mockup */
.rh-featured__cover-glow {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(111,207,151,0.12), transparent 70%);
  pointer-events: none;
}
.rh-featured__cover { position: relative; }

/* ── Cat pill color override ───────────────────────────────── */
.rh-hero__cat-pill {
  border-color: rgba(var(--pill-color), 0.25);
}
.rh-hero__cat-pill:hover {
  background: color-mix(in srgb, var(--pill-color, #6FCF97) 15%, transparent);
  color: var(--eco-green);
}

/* ── Glossary enhancements ─────────────────────────────────── */
.rh-glossary__alpha {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-4);
}
.rh-glossary__alpha-link {
  display: inline-block; width: 28px; height: 28px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.72rem; font-weight: 700; color: var(--mid-grey);
  text-align: center; line-height: 26px; text-decoration: none;
  transition: all var(--transition-fast);
}
.rh-glossary__alpha-link:hover {
  background: var(--deep-green); color: var(--white); border-color: var(--deep-green);
}
.rh-glossary-term__link {
  display: inline-block; margin-top: 6px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--deep-green); text-decoration: none;
  opacity: 0.75; transition: opacity var(--transition-fast);
}
.rh-glossary-term__link:hover { opacity: 1; }

/* ── Tool card enhancements ────────────────────────────────── */
.rh-tool-card__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2);
}
.rh-tool-card__downloads {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.65rem; font-weight: 700; color: #0E7490;
  background: rgba(8,145,178,0.07); border: 1px solid rgba(8,145,178,0.15);
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.rh-tool-card__dl-icon { font-size: 0.6rem; }

/* ── Downloadable Guides Section ───────────────────────────── */
.rh-guides-section {
  background: var(--white);
}
.rh-guides-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3);
}
.rh-guide-card {
  position: relative; overflow: hidden;
  background: var(--guide-accent-bg, rgba(47,133,90,0.06));
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-xl); padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: all var(--transition-medium);
}
.rh-guide-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
  transform: translateY(-4px);
  border-color: var(--guide-accent, #2F855A);
}
.rh-guide-card__accent-line {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--guide-accent, #2F855A); opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.rh-guide-card:hover .rh-guide-card__accent-line { opacity: 1; }
.rh-guide-card__icon { font-size: 2.2rem; }
.rh-guide-card__content { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.rh-guide-card__subtitle {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--guide-accent, #2F855A); opacity: 0.8;
}
.rh-guide-card__title {
  font-size: 0.95rem; font-weight: 800; color: var(--charcoal); line-height: 1.35;
}
.rh-guide-card__desc {
  font-size: 0.8rem; color: var(--mid-grey); line-height: 1.62; margin-top: 4px;
}
.rh-guide-card__tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--sp-2);
}
.rh-guide-card__tag {
  display: inline-block; padding: 3px 7px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.08);
  border-radius: 99px; font-size: 0.62rem; font-weight: 700; color: var(--charcoal);
}
.rh-guide-card__cta {
  display: block; padding: 10px 14px; text-align: center;
  background: var(--guide-accent, #2F855A); color: var(--white);
  border-radius: var(--radius-md); font-size: 0.78rem; font-weight: 700;
  text-decoration: none; transition: opacity var(--transition-fast);
}
.rh-guide-card__cta:hover { opacity: 0.88; }

/* ── Solutions strip section bg ────────────────────────────── */
.rh-sol-section {
  background: linear-gradient(160deg, #EBF9F2 0%, #F0F9FF 100%);
}
.rh-solutions-strip__left { padding-right: var(--sp-4); }

/* ── Internal Link Tiles ───────────────────────────────────── */
.rh-links-section { background: var(--white); }
.rh-link-tiles {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3);
}
.rh-link-tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  text-decoration: none; color: inherit;
  transition: all var(--transition-medium);
}
.rh-link-tile:hover {
  border-color: rgba(111,207,151,0.5);
  box-shadow: 0 8px 28px rgba(11,110,79,0.08);
  transform: translateY(-3px);
  background: #EBF9F2;
}
.rh-link-tile__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.rh-link-tile__icon { font-size: 1.5rem; }
.rh-link-tile__badge {
  display: inline-block; padding: 3px 8px;
  background: rgba(212,160,23,0.1); border: 1px solid rgba(212,160,23,0.25);
  border-radius: 99px; font-size: 0.62rem; font-weight: 800;
  color: #A07800; letter-spacing: 0.04em;
}
.rh-link-tile__title {
  font-size: 0.95rem; font-weight: 800; color: var(--charcoal); line-height: 1.3;
}
.rh-link-tile__desc {
  font-size: 0.8rem; color: var(--mid-grey); line-height: 1.6; flex: 1;
}
.rh-link-tile__arrow {
  margin-top: auto; font-size: 1rem; color: var(--deep-green);
  font-weight: 700; transition: transform var(--transition-fast);
}
.rh-link-tile:hover .rh-link-tile__arrow { transform: translateX(4px); }

/* ── CTA section enhancements ──────────────────────────────── */
.rh-cta-section { background: linear-gradient(160deg, #F5F1E8 0%, #EBF9F2 100%); }
.rh-cta__orbit {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.rh-cta__orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(111,207,151,0.12);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.rh-cta__orbit-ring--1 { width: 200px; height: 200px; }
.rh-cta__orbit-ring--2 { width: 320px; height: 320px; animation: rh-orbit-spin 20s linear infinite; }
@keyframes rh-orbit-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* ── Responsive additions ──────────────────────────────────── */
@media (max-width: 1280px) {
  .rh-guides-grid   { grid-template-columns: repeat(2,1fr); }
  .rh-link-tiles    { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1100px) {
  .rh-guides-grid   { grid-template-columns: repeat(2,1fr); }
  .rh-link-tiles    { grid-template-columns: repeat(2,1fr); }
  .rh-cta__orbit    { display: none; }
}
@media (max-width: 768px) {
  .rh-ticker        { display: none; }
  .rh-hero__scroll  { display: none; }
  .rh-guides-grid   { grid-template-columns: 1fr; }
  .rh-link-tiles    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .rh-link-tiles    { grid-template-columns: 1fr; }
  .rh-glossary__alpha { display: none; }
}

/* ============================================================
   ART — Article / Guide Template
   Namespace: art-
   SEO-first, premium editorial layout
   ============================================================ */

/* ── Body class helper ─────────────────────────────────────── */
.art-body { background: var(--white); }

/* ── Hero ──────────────────────────────────────────────────── */
.art-hero {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-8) 0 0;
  overflow: hidden;
}
.art-hero__bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(235,249,242,0.55) 0%, rgba(255,255,255,0) 100%);
}
.art-hero__gradient {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green), var(--soft-mint), #0891B2);
  z-index: 2;
}
.art-hero__inner {
  position: relative; z-index: 1;
  max-width: 820px;
  padding-bottom: var(--sp-6);
}

/* Breadcrumb */
.art-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: var(--sp-4);
}
.art-breadcrumb__link {
  font-size: 0.78rem; color: var(--mid-grey); font-weight: 500;
  text-decoration: none; transition: color var(--trans-fast);
}
.art-breadcrumb__link:hover { color: var(--deep-green); }
.art-breadcrumb__sep { font-size: 0.78rem; color: var(--light-grey); }
.art-breadcrumb__current { font-size: 0.78rem; color: var(--charcoal); font-weight: 600; }

/* Category / topic badges */
.art-hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.art-hero__cat-badge {
  display: inline-block; padding: 5px 12px;
  background: rgba(11,110,79,0.07); border: 1px solid rgba(11,110,79,0.2);
  border-radius: 99px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--deep-green); text-decoration: none;
  transition: background var(--trans-fast);
}
.art-hero__cat-badge:hover { background: rgba(11,110,79,0.14); }
.art-hero__topic-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.25);
  border-radius: 99px; font-size: 0.7rem; font-weight: 700;
  color: #92600A; text-decoration: none;
  transition: background var(--trans-fast);
}
.art-hero__topic-badge:hover { background: rgba(212,160,23,0.15); }

/* H1 */
.art-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 800; line-height: 1.13;
  letter-spacing: -0.025em; color: var(--charcoal);
  margin-bottom: var(--sp-4);
}

/* Description */
.art-hero__desc {
  font-size: 1.075rem; line-height: 1.72; color: var(--mid-grey);
  margin-bottom: var(--sp-5); max-width: 680px;
}

/* Meta row */
.art-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.art-hero__author { display: flex; align-items: center; gap: 10px; }
.art-hero__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 900;
  color: var(--eco-green); font-size: 0.9rem;
  flex-shrink: 0;
}
.art-hero__author-info { display: flex; flex-direction: column; gap: 1px; }
.art-hero__author-name { font-size: 0.82rem; font-weight: 700; color: var(--charcoal); }
.art-hero__author-role { font-size: 0.7rem; color: var(--mid-grey); }
.art-hero__divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.art-hero__dates { display: flex; gap: var(--sp-3); }
.art-hero__date-item { display: flex; flex-direction: column; gap: 1px; }
.art-hero__date-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid-grey); }
.art-hero__date-val { font-size: 0.8rem; font-weight: 600; color: var(--charcoal); }
.art-hero__readmeta { display: flex; gap: 8px; }
.art-hero__read-pill {
  display: inline-block; padding: 4px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.72rem; font-weight: 600; color: var(--mid-grey);
}

/* Tags */
.art-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.art-hero__tag {
  display: inline-block; padding: 4px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.68rem; font-weight: 600;
  color: var(--mid-grey);
}

/* Reading progress bar */
.art-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--border); overflow: hidden;
}
.art-progress__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--deep-green), var(--eco-green));
  transition: width 0.1s linear;
}

/* ── Three-column layout ────────────────────────────────────── */
.art-layout {
  display: grid;
  grid-template-columns: 52px 1fr 300px;
  grid-template-areas: "left content right";
  gap: 0 var(--sp-6);
  align-items: start;
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-10);
}

/* ── Left rail ─────────────────────────────────────────────── */
.art-rail-left { grid-area: left; }
.art-rail-left__inner {
  position: sticky; top: 90px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.art-rail-left__sep {
  width: 28px; height: 1px; background: var(--border);
}

/* Share buttons */
.art-share { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.art-share__label {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mid-grey);
}
.art-share__btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--share-bg, rgba(107,114,128,0.08));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--share-color, var(--mid-grey));
  cursor: pointer; transition: all var(--trans-fast);
}
.art-share__btn:hover {
  background: var(--share-color, var(--deep-green));
  color: var(--white); border-color: var(--share-color, var(--deep-green));
  transform: scale(1.08);
}

/* Bookmark */
.art-bookmark {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 36px; background: none; border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 4px; cursor: pointer;
  transition: all var(--trans-fast);
}
.art-bookmark:hover, .art-bookmark.bookmarked {
  background: rgba(212,160,23,0.1); border-color: rgba(212,160,23,0.4);
}
.art-bookmark__icon { font-size: 0.85rem; }
.art-bookmark__label { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid-grey); }

/* Listen */
.art-listen {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 36px; background: none; border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 4px; cursor: pointer;
  transition: all var(--trans-fast);
}
.art-listen:hover { background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.3); }
.art-listen__label { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid-grey); }

/* ── Main content ──────────────────────────────────────────── */
.art-content { grid-area: content; min-width: 0; }

/* ── Summary box ───────────────────────────────────────────── */
.art-summary {
  background: linear-gradient(135deg, #EBF9F2 0%, #F0FAF6 100%);
  border: 1px solid rgba(111,207,151,0.35);
  border-left: 4px solid var(--eco-green);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.art-summary__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
.art-summary__icon { font-size: 1.1rem; }
.art-summary__label {
  font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-green);
}
.art-summary__list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: var(--sp-4);
}
.art-summary__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9rem; color: var(--charcoal); line-height: 1.55;
}
.art-summary__check {
  color: var(--deep-green); font-weight: 900; flex-shrink: 0;
  margin-top: 1px; font-size: 0.8rem;
}
.art-summary__footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: var(--sp-3); border-top: 1px solid rgba(111,207,151,0.3);
}
.art-summary__footer-label { font-size: 0.72rem; font-weight: 700; color: var(--deep-green); }
.art-summary__jump {
  display: inline-block; padding: 3px 10px;
  background: rgba(11,110,79,0.08); border: 1px solid rgba(11,110,79,0.2);
  border-radius: 99px; font-size: 0.7rem; font-weight: 700;
  color: var(--deep-green); text-decoration: none;
  transition: all var(--trans-fast);
}
.art-summary__jump:hover { background: var(--deep-green); color: var(--white); }

/* ── Content sections ──────────────────────────────────────── */
.art-section {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}
.art-section:last-of-type { border-bottom: none; }

/* Typography inside article */
.art-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800; color: var(--charcoal);
  letter-spacing: -0.02em; line-height: 1.22;
  margin-bottom: var(--sp-3);
  scroll-margin-top: 100px;
}
.art-h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 700;
  color: var(--charcoal); letter-spacing: -0.015em;
  margin: var(--sp-4) 0 var(--sp-2);
}
.art-body-text {
  font-size: 1rem; line-height: 1.8; color: #374151;
  margin-bottom: var(--sp-3);
}
.art-body-text strong { color: var(--charcoal); font-weight: 700; }
.art-body-text em { font-style: italic; color: var(--charcoal); }

/* Lists */
.art-list, .art-ordered-list {
  margin: var(--sp-2) 0 var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: 10px;
}
.art-list { list-style: none; padding-left: 0; margin-left: 0; }
.art-list li {
  padding-left: 22px; position: relative;
  font-size: 1rem; line-height: 1.72; color: #374151;
}
.art-list li::before {
  content: '–'; position: absolute; left: 4px;
  color: var(--eco-green); font-weight: 900;
}
.art-ordered-list { list-style: decimal; }
.art-ordered-list li { font-size: 1rem; line-height: 1.72; color: #374151; padding-left: 6px; }
.art-ordered-list li strong { color: var(--charcoal); }

/* ── Callout cards ─────────────────────────────────────────── */
.art-callout {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border-radius: var(--radius-md); padding: var(--sp-4);
  margin: var(--sp-4) 0;
}
.art-callout--tip {
  background: rgba(11,110,79,0.05);
  border: 1px solid rgba(11,110,79,0.15);
  border-left: 4px solid var(--deep-green);
}
.art-callout--warning {
  background: rgba(180,83,9,0.05);
  border: 1px solid rgba(180,83,9,0.15);
  border-left: 4px solid #D97706;
}
.art-callout--stat {
  background: rgba(8,145,178,0.04);
  border: 1px solid rgba(8,145,178,0.15);
  border-left: 4px solid #0891B2;
}
.art-callout--gold {
  background: rgba(212,160,23,0.05);
  border: 1px solid rgba(212,160,23,0.2);
  border-left: 4px solid #D4A017;
}
.art-callout__icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.art-callout__body { flex: 1; }
.art-callout__label {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 8px;
}
.art-callout--tip    .art-callout__label { color: var(--deep-green); }
.art-callout--warning .art-callout__label { color: #B45309; }
.art-callout--stat   .art-callout__label { color: #0891B2; }
.art-callout--gold   .art-callout__label { color: #92600A; }
.art-callout__text { font-size: 0.9rem; line-height: 1.7; color: var(--charcoal); }
.art-callout__text strong { font-weight: 700; }

/* ── Data table ─────────────────────────────────────────────── */
.art-table-wrap {
  overflow-x: auto; margin: var(--sp-4) 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.art-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.875rem; color: var(--charcoal);
}
.art-table__caption {
  caption-side: top;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--mid-grey);
  text-align: left; padding: 12px 16px 0; margin-bottom: 4px;
}
.art-table thead { background: var(--surface); }
.art-table th {
  padding: 12px 16px; text-align: left;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mid-grey);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.art-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  line-height: 1.55; vertical-align: top;
}
.art-table tbody tr:last-child td { border-bottom: none; }
.art-table tbody tr:hover { background: #F9FAFB; }
.art-table__row--highlight td { background: rgba(11,110,79,0.04); }
.art-table__row--highlight:hover td { background: rgba(11,110,79,0.07); }
.art-table td strong { font-weight: 700; color: var(--charcoal); }

/* ── ESRS standards grid ────────────────────────────────────── */
.art-standards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.art-std-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--std-color, #6B7280);
  border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-2);
  display: flex; flex-direction: column; gap: 5px;
  transition: box-shadow var(--trans-fast);
}
.art-std-card:hover { box-shadow: var(--shadow-sm); }
.art-std-card__code {
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800;
  color: var(--std-color, #6B7280); letter-spacing: 0.02em;
}
.art-std-card__badge {
  display: inline-block; padding: 2px 6px; border-radius: 99px;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
.art-std-card__label {
  font-size: 0.75rem; font-weight: 600; color: var(--charcoal); line-height: 1.35;
}

/* ── Double-materiality two columns ─────────────────────────── */
.art-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.art-two-col__card {
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.art-two-col__card--left {
  background: rgba(11,110,79,0.05);
  border: 1px solid rgba(11,110,79,0.18);
  border-top: 3px solid var(--deep-green);
}
.art-two-col__card--right {
  background: rgba(8,145,178,0.05);
  border: 1px solid rgba(8,145,178,0.18);
  border-top: 3px solid #0891B2;
}
.art-two-col__label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--charcoal);
}
.art-two-col__text { font-size: 0.875rem; color: var(--charcoal); line-height: 1.65; }
.art-two-col__list {
  list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 0;
}
.art-two-col__list li {
  font-size: 0.8rem; color: #374151; padding-left: 16px; position: relative;
}
.art-two-col__list li::before {
  content: '·'; position: absolute; left: 4px;
  font-weight: 900; color: var(--eco-green);
}

/* ── Timeline ───────────────────────────────────────────────── */
.art-timeline {
  display: flex; flex-direction: column;
  margin: var(--sp-4) 0;
  position: relative;
}
.art-timeline-item {
  display: grid; grid-template-columns: 56px 28px 1fr;
  gap: 0 var(--sp-2); align-items: start; padding-bottom: var(--sp-4);
}
.art-timeline-item__year {
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 900;
  color: var(--mid-grey); padding-top: 2px; text-align: right;
}
.art-timeline-item--active .art-timeline-item__year { color: var(--deep-green); }
.art-timeline-item__connector {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.art-timeline-item__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--border);
  z-index: 1; flex-shrink: 0; margin-top: 3px;
  transition: all var(--trans-fast);
}
.art-timeline-item--active .art-timeline-item__dot {
  background: var(--deep-green);
  box-shadow: 0 0 0 3px rgba(11,110,79,0.25);
}
.art-timeline-item__line {
  flex: 1; width: 2px;
  background: var(--border); min-height: 28px;
  margin-top: 4px;
}
.art-timeline-item__content { padding-top: 0; }
.art-timeline-item__label {
  font-size: 0.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 4px;
}
.art-timeline-item--active .art-timeline-item__label { color: var(--deep-green); }
.art-timeline-item__desc { font-size: 0.82rem; color: var(--mid-grey); line-height: 1.65; }

/* ── Step-by-step process ───────────────────────────────────── */
.art-steps {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.art-step {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-3);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  transition: all var(--trans-med);
  position: relative; overflow: hidden;
}
.art-step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--eco-green), var(--soft-mint));
  opacity: 0; transition: opacity var(--trans-fast);
}
.art-step:hover { box-shadow: var(--shadow-sm); border-color: rgba(111,207,151,0.4); }
.art-step:hover::before { opacity: 1; }
.art-step__num {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 900;
  color: rgba(11,110,79,0.15); line-height: 1; align-self: center;
  letter-spacing: -0.04em;
}
.art-step__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.art-step__header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.art-step__icon { font-size: 1.1rem; }
.art-step__title { font-size: 0.95rem; font-weight: 800; color: var(--charcoal); flex: 1; }
.art-step__time {
  display: inline-block; padding: 3px 8px;
  background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.25);
  border-radius: 99px; font-size: 0.65rem; font-weight: 800;
  color: #92600A;
}
.art-step__desc { font-size: 0.875rem; color: #374151; line-height: 1.7; }

/* ── Downloadable asset card ────────────────────────────────── */
.art-asset-card {
  display: flex; gap: var(--sp-5);
  background: linear-gradient(135deg, #0B6E4F, #0F2A1D 60%, #0B1E28 100%);
  border-radius: var(--radius-xl); padding: var(--sp-6);
  margin: var(--sp-6) 0;
  position: relative; overflow: hidden;
}
.art-asset-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 15% 50%, rgba(111,207,151,0.08), transparent);
}
.art-asset-card__left { flex-shrink: 0; position: relative; z-index: 1; }
.art-asset-card__book {
  display: flex; height: 140px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
.art-asset-card__book-spine {
  width: 16px; height: 100%;
  background: linear-gradient(to right, #09503A, #0B6E4F);
  border-radius: 4px 0 0 4px;
}
.art-asset-card__book-cover {
  width: 96px; height: 100%;
  background: linear-gradient(160deg, #1A7A5E, #0F4A35);
  border-radius: 0 6px 6px 0;
  border: 1px solid rgba(111,207,151,0.2);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; padding: var(--sp-2);
  text-align: center;
}
.art-asset-card__book-icon { font-size: 1.6rem; }
.art-asset-card__book-title {
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800;
  color: var(--white); line-height: 1.25;
}
.art-asset-card__book-sub { font-size: 0.58rem; color: rgba(255,255,255,0.5); font-weight: 600; }

.art-asset-card__content {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative; z-index: 1;
}
.art-asset-card__eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--eco-green);
}
.art-asset-card__pip { font-size: 0.8rem; }
.art-asset-card__title {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800;
  color: var(--white); line-height: 1.25;
}
.art-asset-card__desc { font-size: 0.85rem; color: rgba(255,255,255,0.62); line-height: 1.7; }
.art-asset-card__meta { display: flex; gap: 8px; }
.art-asset-card__format {
  display: inline-block; padding: 3px 10px;
  background: rgba(111,207,151,0.12); border: 1px solid rgba(111,207,151,0.25);
  border-radius: 99px; font-size: 0.65rem; font-weight: 800;
  color: rgba(168,230,207,0.9);
}
.art-asset-card__cta { margin-top: auto; align-self: flex-start; }

/* ── Feature grid ───────────────────────────────────────────── */
.art-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.art-feature-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
  transition: box-shadow var(--trans-fast), border-color var(--trans-fast);
}
.art-feature-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: rgba(111,207,151,0.35);
}
.art-feature-card__icon { font-size: 1.25rem; margin-bottom: 2px; }
.art-feature-card__title { font-size: 0.85rem; font-weight: 800; color: var(--charcoal); }
.art-feature-card__desc { font-size: 0.78rem; color: var(--mid-grey); line-height: 1.62; }

/* ── FAQ section ────────────────────────────────────────────── */
.art-faq {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; margin-top: var(--sp-3);
}
.art-faq-item {
  border-bottom: 1px solid var(--border); background: var(--white);
}
.art-faq-item:last-child { border-bottom: none; }
.art-faq-item__question {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--sp-4) var(--sp-4);
  background: none; border: none; cursor: pointer; text-align: left;
  gap: var(--sp-3); transition: background var(--trans-fast);
}
.art-faq-item__question:hover { background: var(--surface); }
.art-faq-item.open .art-faq-item__question { background: rgba(11,110,79,0.04); }
.art-faq-item__q-text {
  font-size: 0.95rem; font-weight: 700; color: var(--charcoal);
  line-height: 1.45; flex: 1;
}
.art-faq-item__chevron {
  font-size: 1.4rem; color: var(--mid-grey); flex-shrink: 0;
  transition: transform var(--trans-med);
  display: inline-block; line-height: 1;
}
.art-faq-item.open .art-faq-item__chevron { transform: rotate(90deg); }
.art-faq-item__answer {
  max-height: 0; overflow: hidden;
  transition: max-height var(--trans-med), padding var(--trans-fast);
  padding: 0 var(--sp-4);
}
.art-faq-item.open .art-faq-item__answer {
  max-height: 400px;
  padding: 0 var(--sp-4) var(--sp-4);
}
.art-faq-item__answer-text {
  font-size: 0.9rem; color: #374151; line-height: 1.78;
  border-top: 1px solid var(--border); padding-top: var(--sp-3);
}

/* ── Article footer meta ────────────────────────────────────── */
.art-footer-meta {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5) 0; margin-top: var(--sp-5);
  border-top: 2px solid var(--border);
}
.art-footer-meta__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.art-footer-meta__tags-label { font-size: 0.72rem; font-weight: 700; color: var(--mid-grey); }
.art-footer-meta__tag {
  display: inline-block; padding: 4px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.68rem; font-weight: 600;
  color: var(--mid-grey); text-decoration: none;
  transition: all var(--trans-fast);
}
.art-footer-meta__tag:hover { background: var(--deep-green); color: var(--white); border-color: var(--deep-green); }
.art-footer-meta__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-footer-meta__share-label { font-size: 0.72rem; font-weight: 700; color: var(--mid-grey); }
.art-footer-meta__share-btn {
  padding: 6px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; font-size: 0.72rem; font-weight: 700; color: var(--charcoal);
  cursor: pointer; transition: all var(--trans-fast); font-family: var(--font-body);
}
.art-footer-meta__share-btn:hover { background: var(--charcoal); color: var(--white); }
.art-footer-meta__update {
  font-size: 0.78rem; color: var(--mid-grey); line-height: 1.6;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(212,160,23,0.05); border: 1px solid rgba(212,160,23,0.18);
  border-radius: var(--radius-sm);
}
.art-footer-meta__update-icon { margin-right: 5px; }

/* ── Right rail ─────────────────────────────────────────────── */
.art-rail-right { grid-area: right; }
.art-rail-right__inner {
  position: sticky; top: 90px;
  display: flex; flex-direction: column; gap: var(--sp-4);
}

/* Table of contents */
.art-toc {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.art-toc__header {
  display: flex; align-items: center; gap: 8px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mid-grey);
}
.art-toc__header-icon { font-size: 0.9rem; }
.art-toc__list { list-style: none; padding: var(--sp-1) 0; }
.art-toc__item { }
.art-toc__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--sp-3); text-decoration: none;
  transition: all var(--trans-fast); border-left: 2px solid transparent;
}
.art-toc__link:hover {
  background: rgba(11,110,79,0.04);
  border-left-color: rgba(111,207,151,0.4);
}
.art-toc__link--active {
  background: rgba(11,110,79,0.06);
  border-left-color: var(--deep-green);
}
.art-toc__num {
  font-family: var(--font-heading); font-size: 0.6rem; font-weight: 800;
  color: var(--mid-grey); flex-shrink: 0; letter-spacing: 0.04em;
}
.art-toc__link--active .art-toc__num { color: var(--deep-green); }
.art-toc__label { font-size: 0.78rem; font-weight: 500; color: var(--mid-grey); line-height: 1.4; }
.art-toc__link--active .art-toc__label, .art-toc__link:hover .art-toc__label { color: var(--charcoal); }

/* Book demo card */
.art-demo-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0B6E4F, #0F2A1D);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.art-demo-card__glow {
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,207,151,0.12), transparent 70%);
  pointer-events: none;
}
.art-demo-card__eyebrow {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--eco-green);
}
.art-demo-card__title {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800;
  color: var(--white); line-height: 1.3;
}
.art-demo-card__desc { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.65; }
.art-demo-card__list {
  list-style: none; display: flex; flex-direction: column; gap: 6px;
}
.art-demo-card__list li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.75rem; color: rgba(255,255,255,0.7);
}
.art-demo-card__list li span { color: var(--eco-green); flex-shrink: 0; font-weight: 900; }
.art-demo-card__cta { margin-top: var(--sp-1); width: 100%; }
.art-demo-card__note {
  font-size: 0.68rem; color: rgba(255,255,255,0.35);
  text-align: center; margin-top: 4px;
}

/* Rail links */
.art-rail-links {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.art-rail-links__header {
  padding: var(--sp-2) var(--sp-3);
  background: var(--white); border-bottom: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mid-grey);
}
.art-rail-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--sp-3); text-decoration: none;
  border-bottom: 1px solid var(--border); transition: background var(--trans-fast);
}
.art-rail-link:last-child { border-bottom: none; }
.art-rail-link:hover { background: rgba(11,110,79,0.05); }
.art-rail-link__icon { font-size: 0.9rem; flex-shrink: 0; }
.art-rail-link__label { font-size: 0.78rem; font-weight: 600; color: var(--charcoal); flex: 1; }
.art-rail-link__arrow { font-size: 0.72rem; color: var(--deep-green); font-weight: 700; }

/* ── Badge colours (shared with related cards) ─────────────── */
.art-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.art-badge--teal   { background: rgba(8,145,178,0.1);   color: #0E7490; border: 1px solid rgba(8,145,178,0.25); }
.art-badge--green  { background: rgba(47,133,90,0.1);   color: #166534; border: 1px solid rgba(47,133,90,0.25); }
.art-badge--gold   { background: rgba(212,160,23,0.1);  color: #A07800; border: 1px solid rgba(212,160,23,0.25); }
.art-badge--purple { background: rgba(124,58,237,0.1);  color: #6D28D9; border: 1px solid rgba(124,58,237,0.25); }

/* ── Related resources ──────────────────────────────────────── */
.art-related-section {
  background: var(--surface); padding: var(--sp-10) 0;
  border-top: 1px solid var(--border);
}
.art-related-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.art-related-header__h2 {
  font-family: var(--font-heading); font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800; color: var(--charcoal);
}
.art-related-header__link {
  font-size: 0.82rem; font-weight: 700; color: var(--deep-green); text-decoration: none;
  transition: opacity var(--trans-fast);
}
.art-related-header__link:hover { opacity: 0.7; }
.art-related-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
}
.art-related-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  text-decoration: none; color: inherit;
  transition: all var(--trans-med); position: relative; overflow: hidden;
}
.art-related-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--eco-green), var(--soft-mint));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.art-related-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
  border-color: rgba(111,207,151,0.4);
}
.art-related-card:hover::after { transform: scaleX(1); }
.art-related-card__top { display: flex; align-items: center; justify-content: space-between; }
.art-related-card__time { font-size: 0.65rem; color: var(--mid-grey); font-weight: 600; }
.art-related-card__title {
  font-size: 0.875rem; font-weight: 700; color: var(--charcoal);
  line-height: 1.45; flex: 1;
}
.art-related-card__arrow {
  margin-top: auto; font-size: 0.78rem; font-weight: 700;
  color: var(--deep-green); opacity: 0;
  transition: opacity var(--trans-fast);
}
.art-related-card:hover .art-related-card__arrow { opacity: 1; }

/* ── CTA banner ─────────────────────────────────────────────── */
.art-cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #051A10 0%, #0B1E14 50%, #091820 100%);
  padding: var(--sp-12) 0;
}
.art-cta-banner__bg {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px; opacity: 0.7; pointer-events: none;
}

/* Floating particles */
.art-cta-banner__particles { position: absolute; inset: 0; pointer-events: none; }
.art-cta-banner__particle {
  position: absolute; border-radius: 50%;
  background: rgba(111,207,151,0.12);
  animation: art-float 8s ease-in-out infinite;
}
.art-cta-banner__particle--1 { width:120px; height:120px; top:10%; left:5%;  animation-delay:0s;   animation-duration:9s;  }
.art-cta-banner__particle--2 { width: 80px; height: 80px; top:60%; left:15%; animation-delay:1.5s; animation-duration:7s;  opacity:.6; }
.art-cta-banner__particle--3 { width:160px; height:160px; top:20%; left:80%; animation-delay:3s;   animation-duration:11s; opacity:.4; }
.art-cta-banner__particle--4 { width: 60px; height: 60px; top:70%; left:75%; animation-delay:2s;   animation-duration:8s;  opacity:.5; }
.art-cta-banner__particle--5 { width:100px; height:100px; top:5%;  left:50%; animation-delay:4s;   animation-duration:10s; opacity:.3; }
.art-cta-banner__particle--6 { width: 40px; height: 40px; top:80%; left:55%; animation-delay:0.5s; animation-duration:6s;  opacity:.7; }
@keyframes art-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.05); }
}

.art-cta-banner__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-10); align-items: center;
}
.art-cta-banner__left { display: flex; flex-direction: column; gap: var(--sp-3); }
.art-cta-banner__eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eco-green);
}
.art-cta-banner__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800; color: var(--white); line-height: 1.15; letter-spacing: -0.025em;
}
.art-cta-banner__desc { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.72; }
.art-cta-banner__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.art-cta-banner__trust { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 4px; }
.art-cta-banner__trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: rgba(255,255,255,0.4); font-weight: 500;
}
.art-cta-banner__trust-pip { color: var(--eco-green); font-weight: 900; }

/* CTA readiness card */
.art-cta-banner__right { }
.art-cta-banner__card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  backdrop-filter: blur(4px);
}
.art-cta-banner__card-header {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--eco-green); margin-bottom: 2px;
}
.art-cta-banner__card-row {
  display: flex; align-items: center; gap: 10px;
}
.art-cta-banner__card-label { font-size: 0.78rem; color: rgba(255,255,255,0.6); flex: 1; white-space: nowrap; }
.art-cta-banner__card-bar {
  flex: 1; height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 99px; overflow: hidden;
}
.art-cta-banner__card-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--eco-green), var(--soft-mint));
  border-radius: 99px;
  transition: width 1.5s var(--ease-out);
}
.art-cta-banner__card-pct {
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800;
  color: var(--eco-green); min-width: 36px; text-align: right;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .art-layout { grid-template-columns: 52px 1fr 260px; gap: 0 var(--sp-5); }
  .art-standards-grid { grid-template-columns: repeat(3, 1fr); }
  .art-related-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .art-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "right";
    gap: var(--sp-6) 0;
  }
  .art-rail-left { display: none; }
  .art-rail-right__inner { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .art-toc { grid-column: 1 / -1; }
  .art-cta-banner__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .art-cta-banner__right { display: none; }
}
@media (max-width: 768px) {
  .art-hero__meta { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .art-hero__divider { display: none; }
  .art-two-col { grid-template-columns: 1fr; }
  .art-standards-grid { grid-template-columns: repeat(2, 1fr); }
  .art-features-grid { grid-template-columns: 1fr 1fr; }
  .art-asset-card { flex-direction: column; gap: var(--sp-4); }
  .art-asset-card__left { align-self: center; }
  .art-related-grid { grid-template-columns: 1fr 1fr; }
  .art-rail-right__inner { grid-template-columns: 1fr; }
  .art-hero__h1 { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .art-layout { padding-top: var(--sp-5); }
  .art-standards-grid { grid-template-columns: 1fr 1fr; }
  .art-features-grid { grid-template-columns: 1fr; }
  .art-related-grid { grid-template-columns: 1fr; }
  .art-step { grid-template-columns: 36px 1fr; }
  .art-cta-banner__actions { flex-direction: column; }
  .art-hero__read-pill { font-size: 0.65rem; }
}

/* ============================================================
   ABOUT PAGE — Namespace: ab-
   Premium trust-heavy editorial layout
   ============================================================ */

.ab-body { background: var(--white); }

/* ── 1. HERO ─────────────────────────────────────────────────── */
.ab-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #071811 0%, #0B1E14 40%, #0A1C22 100%);
  padding: var(--sp-16) 0 var(--sp-14);
}
.ab-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px 200px; opacity: .7;
}
.ab-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(111,207,151,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,151,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.ab-hero__gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 70% 50%, rgba(11,110,79,0.18) 0%, transparent 70%);
}
.ab-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-6);
}
.ab-breadcrumb__link {
  font-size: 0.78rem; font-weight: 500;
  color: rgba(255,255,255,0.35); text-decoration: none;
  transition: color var(--trans-fast);
}
.ab-breadcrumb__link:hover { color: var(--eco-green); }
.ab-breadcrumb__sep { font-size: 0.75rem; color: rgba(255,255,255,0.2); }
.ab-breadcrumb__current { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.55); }

.ab-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-10); align-items: center;
}
.ab-hero__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.ab-hero__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eco-green);
}
.ab-hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--eco-green); flex-shrink: 0;
  animation: ab-pulse 2.4s ease-in-out infinite;
}
@keyframes ab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,207,151,0.45); }
  50%       { box-shadow: 0 0 0 6px rgba(111,207,151,0); }
}
.ab-hero__h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 800; color: var(--white);
  line-height: 1.12; letter-spacing: -0.03em;
}
.ab-hero__h1-accent {
  color: var(--soft-mint);
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-hero__desc {
  font-size: 1.05rem; color: rgba(255,255,255,0.6);
  line-height: 1.75; max-width: 540px;
}
.ab-hero__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ab-hero__chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(111,207,151,0.07);
  border: 1px solid rgba(111,207,151,0.18);
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.6);
}
.ab-hero__chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--eco-green); flex-shrink: 0;
}
.ab-hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Stats panel */
.ab-hero__stats-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  padding: var(--sp-5); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ab-hero__stats-panel-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
}
.ab-hero__stats-panel-label::before,
.ab-hero__stats-panel-label::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}
.ab-hero__stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.ab-hero__stat { text-align: center; }
.ab-hero__stat-num {
  font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800;
  color: var(--white); letter-spacing: -0.03em;
  line-height: 1.1;
}
.ab-hero__stat-label {
  font-size: 0.65rem; color: rgba(255,255,255,0.38);
  font-weight: 600; margin-top: 3px; line-height: 1.35;
}
.ab-hero__ribbons {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ab-hero__ribbon {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: rgba(212,160,23,0.06);
  border: 1px solid rgba(212,160,23,0.15);
}
.ab-hero__ribbon-icon { font-size: 0.85rem; flex-shrink: 0; }
.ab-hero__ribbon-text { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.55); }

/* ── 2. ORIGIN STORY ─────────────────────────────────────────── */
.ab-story { padding: var(--sp-14) 0; }
.ab-story__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start;
}
.ab-story__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 800; color: var(--charcoal);
  line-height: 1.2; letter-spacing: -0.025em;
  margin: var(--sp-2) 0 var(--sp-4);
}
.ab-story__lead {
  font-size: 1.1rem; font-weight: 500;
  color: var(--charcoal); line-height: 1.7;
  margin-bottom: var(--sp-3);
}
.ab-story__body {
  font-size: 0.9875rem; color: #374151; line-height: 1.78;
  margin-bottom: var(--sp-2);
}
.ab-story__founders {
  display: flex; align-items: center; gap: 12px;
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ab-story__founder-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem;
  color: var(--white);
}
.ab-story__founder-name { font-size: 0.875rem; font-weight: 700; color: var(--charcoal); }
.ab-story__founder-role { font-size: 0.75rem; color: var(--mid-grey); margin-top: 2px; }

/* Milestones timeline */
.ab-story__milestones { display: flex; flex-direction: column; }
.ab-milestone {
  display: grid; grid-template-columns: 52px 24px 1fr; gap: 0 12px; align-items: flex-start;
}
.ab-milestone__year {
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800;
  color: var(--deep-green); letter-spacing: 0.04em;
  padding-top: 2px; text-align: right;
}
.ab-milestone__connector {
  display: flex; flex-direction: column; align-items: center;
}
.ab-milestone__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--eco-green);
  border: 2px solid rgba(11,110,79,0.25);
  margin-top: 4px;
}
.ab-milestone__line {
  width: 2px; flex: 1; min-height: 28px;
  background: linear-gradient(to bottom, rgba(11,110,79,0.25), rgba(11,110,79,0.07));
  margin: 4px 0;
}
.ab-milestone__event {
  font-size: 0.85rem; color: var(--charcoal); line-height: 1.55;
  padding: 2px 0 20px;
}

/* ── 3. SPLIT STORY ──────────────────────────────────────────── */
.ab-split {
  position: relative; overflow: hidden;
  background: var(--surface); padding: var(--sp-14) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ab-split__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(11,110,79,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(8,145,178,0.04) 0%, transparent 70%);
}
.ab-split__header {
  text-align: center; margin-bottom: var(--sp-10);
  position: relative; z-index: 1;
}
.ab-split__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 800; color: var(--charcoal);
  letter-spacing: -0.025em; margin: var(--sp-2) 0 var(--sp-3);
}
.ab-split__desc {
  font-size: 1rem; color: var(--mid-grey); line-height: 1.72;
  max-width: 620px; margin: 0 auto;
}
.ab-split__cols {
  display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0;
  position: relative; z-index: 1; align-items: start;
}

/* Column */
.ab-split__col {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.ab-split__col:hover { box-shadow: var(--shadow-md); }
.ab-split__col-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.ab-split__col-logo { display: flex; align-items: center; gap: 10px; }
.ab-split__col-logo-mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 900;
  color: var(--white);
}
.ab-split__col-logo-mark--eco {
  background: linear-gradient(135deg, #0891B2, #0B6E4F);
}
.ab-split__col-logo-text { display: flex; flex-direction: column; gap: 1px; }
.ab-split__col-name {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800;
  color: var(--charcoal); line-height: 1;
}
.ab-split__col-sub {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mid-grey);
}
.ab-split__col-badge {
  padding: 4px 10px; border-radius: 99px;
  background: rgba(11,110,79,0.08); border: 1px solid rgba(11,110,79,0.2);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--deep-green); flex-shrink: 0;
}
.ab-split__col-badge--mint {
  background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.2);
  color: #0E7490;
}
.ab-split__col-desc {
  font-size: 0.875rem; color: var(--mid-grey); line-height: 1.7;
}

/* Steps */
.ab-split__steps { display: flex; flex-direction: column; }
.ab-split__step {
  display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; align-items: flex-start;
}
.ab-split__step-left { display: flex; flex-direction: column; align-items: center; }
.ab-split__step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(11,110,79,0.1); border: 1.5px solid rgba(11,110,79,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.6rem; font-weight: 900;
  color: var(--deep-green); flex-shrink: 0;
}
.ab-split__step-num--eco {
  background: rgba(8,145,178,0.1); border-color: rgba(8,145,178,0.25);
  color: #0891B2;
}
.ab-split__step-line {
  width: 1.5px; flex: 1; min-height: 16px;
  background: linear-gradient(to bottom, rgba(11,110,79,0.2), rgba(11,110,79,0.05));
  margin: 4px 0;
}
.ab-split__step-line--eco {
  background: linear-gradient(to bottom, rgba(8,145,178,0.2), rgba(8,145,178,0.05));
}
.ab-split__step-body { padding: 3px 0 18px; }
.ab-split__step-verb {
  font-family: var(--font-heading); font-size: 0.92rem; font-weight: 800;
  color: var(--deep-green); margin-bottom: 3px;
}
.ab-split__step-verb--eco { color: #0891B2; }
.ab-split__step-desc { font-size: 0.8rem; color: var(--mid-grey); line-height: 1.6; }
.ab-split__col-footer { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.ab-split__col-link {
  font-size: 0.82rem; font-weight: 700; color: var(--deep-green);
  text-decoration: none; transition: opacity var(--trans-fast);
}
.ab-split__col-link:hover { opacity: 0.7; }
.ab-split__col-link--eco { color: #0891B2; }

/* Centre divider */
.ab-split__divider {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-8) 0; gap: 0;
}
.ab-split__divider-line {
  flex: 1; width: 1px; background: var(--border); min-height: 40px;
}
.ab-split__divider-circle {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 900;
  color: var(--deep-green); box-shadow: var(--shadow-sm);
}

/* Integration callout */
.ab-split__integration {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(135deg, rgba(11,110,79,0.06), rgba(8,145,178,0.04));
  border: 1px solid rgba(11,110,79,0.15);
  border-radius: var(--radius-lg);
}
.ab-split__integration-icon {
  font-size: 1.5rem; flex-shrink: 0; margin-top: 2px;
}
.ab-split__integration-title {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 800;
  color: var(--charcoal); margin-bottom: 6px;
}
.ab-split__integration-desc {
  font-size: 0.9rem; color: var(--mid-grey); line-height: 1.7;
}

/* ── 4. MISSION / VISION / VALUES ────────────────────────────── */
.ab-mvv { padding: var(--sp-14) 0; }
.ab-mvv__header { text-align: center; margin-bottom: var(--sp-8); }
.ab-mvv__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--charcoal);
  letter-spacing: -0.025em; margin: var(--sp-2) 0;
}

/* Vision + Mission cards */
.ab-mvv__vm-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
.ab-mvv__vm-card {
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--radius-xl); position: relative; overflow: hidden;
}
.ab-mvv__vm-card--vision {
  background: linear-gradient(145deg, #071811, #0D2318);
}
.ab-mvv__vm-card--mission {
  background: linear-gradient(145deg, #071820, #0A1A2E);
}
.ab-mvv__vm-eyebrow {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eco-green);
  margin-bottom: var(--sp-3);
}
.ab-mvv__vm-quote {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 600; color: rgba(255,255,255,0.82);
  line-height: 1.6; letter-spacing: -0.01em;
  font-style: italic;
  border-left: 3px solid rgba(111,207,151,0.35);
  padding-left: var(--sp-4); margin: 0;
}

/* Values grid */
.ab-mvv__values-label {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mid-grey);
  text-align: center; margin-bottom: var(--sp-5);
}
.ab-mvv__values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.ab-mvv__value-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: all var(--trans-med);
}
.ab-mvv__value-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--eco-green), var(--soft-mint));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.ab-mvv__value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ab-mvv__value-card:hover::before { transform: scaleX(1); }
.ab-mvv__value-num {
  position: absolute; top: var(--sp-2); right: var(--sp-3);
  font-family: var(--font-heading); font-size: 2.5rem; font-weight: 900;
  color: var(--border); line-height: 1; pointer-events: none;
  transition: color var(--trans-med);
}
.ab-mvv__value-card:hover .ab-mvv__value-num { color: rgba(11,110,79,0.08); }
.ab-mvv__value-icon { font-size: 1.4rem; }
.ab-mvv__value-title {
  font-size: 0.95rem; font-weight: 800; color: var(--charcoal); line-height: 1.3;
}
.ab-mvv__value-desc {
  font-size: 0.82rem; color: var(--mid-grey); line-height: 1.67;
}

/* ── 5. DIFFERENTIATION ──────────────────────────────────────── */
.ab-diff {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #071811 0%, #0B1E14 55%, #071820 100%);
  padding: var(--sp-14) 0;
}
.ab-diff__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(111,207,151,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,151,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ab-diff__header { text-align: center; margin-bottom: var(--sp-10); position: relative; z-index: 1; }
.ab-diff__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 800; color: var(--white);
  letter-spacing: -0.025em; margin: var(--sp-2) 0 var(--sp-3);
}
.ab-diff__desc {
  font-size: 1rem; color: rgba(255,255,255,0.5);
  line-height: 1.72; max-width: 600px; margin: 0 auto;
}
.ab-diff__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  position: relative; z-index: 1; margin-bottom: var(--sp-10);
}
.ab-diff__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: all var(--trans-med); backdrop-filter: blur(2px);
}
.ab-diff__card:hover {
  background: rgba(111,207,151,0.06);
  border-color: rgba(111,207,151,0.2);
  transform: translateY(-4px);
}
.ab-diff__card-icon { font-size: 1.5rem; margin-bottom: 2px; }
.ab-diff__card-title {
  font-size: 0.875rem; font-weight: 800; color: rgba(255,255,255,0.88);
  line-height: 1.35;
}
.ab-diff__card-desc {
  font-size: 0.78rem; color: rgba(255,255,255,0.44); line-height: 1.68;
}

/* Comparison table */
.ab-diff__table-wrap {
  position: relative; z-index: 1; overflow-x: auto;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.08);
}
.ab-diff__table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,0.03);
}
.ab-diff__table-caption {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
  text-align: left; padding: 10px var(--sp-4);
  caption-side: top;
}
.ab-diff__table thead { background: rgba(255,255,255,0.05); }
.ab-diff__table th {
  padding: 12px var(--sp-4); font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.5); text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}
.ab-diff__table-th--us {
  background: rgba(11,110,79,0.1);
  color: var(--eco-green) !important;
}
.ab-diff__table td {
  padding: 11px var(--sp-4); font-size: 0.82rem; color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.ab-diff__table tbody tr:last-child td { border-bottom: none; }
.ab-diff__table-feature {
  font-weight: 600; color: rgba(255,255,255,0.7) !important;
}
.ab-diff__table-cell--neutral { text-align: center; }
.ab-diff__table-cell--us {
  background: rgba(11,110,79,0.07);
  font-weight: 700; color: var(--eco-green) !important;
  text-align: center;
}

/* ── 6. TEAM ─────────────────────────────────────────────────── */
.ab-team { padding: var(--sp-14) 0; }
.ab-team__header { text-align: center; margin-bottom: var(--sp-8); }
.ab-team__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--charcoal);
  letter-spacing: -0.025em; margin: var(--sp-2) 0 var(--sp-3);
}
.ab-team__desc {
  font-size: 1rem; color: var(--mid-grey); line-height: 1.72;
  max-width: 580px; margin: 0 auto;
}
.ab-team__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.ab-team__card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: all var(--trans-med); position: relative; overflow: hidden;
}
.ab-team__card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--deep-green), var(--soft-mint));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--trans-med);
}
.ab-team__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.ab-team__card:hover::after { transform: scaleX(1); }
.ab-team__card-top { display: flex; align-items: center; gap: 12px; }
.ab-team__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--deep-green), var(--forest-green));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 900;
  color: var(--white); border: 3px solid rgba(11,110,79,0.12);
}
.ab-team__card-meta { display: flex; flex-direction: column; gap: 2px; }
.ab-team__name { font-size: 1rem; font-weight: 800; color: var(--charcoal); }
.ab-team__role { font-size: 0.75rem; color: var(--mid-grey); font-weight: 500; line-height: 1.4; }
.ab-team__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ab-team__tag {
  padding: 3px 9px; border-radius: 99px;
  background: rgba(11,110,79,0.07); border: 1px solid rgba(11,110,79,0.18);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--deep-green);
}
.ab-team__bio { font-size: 0.82rem; color: var(--mid-grey); line-height: 1.65; flex: 1; }
.ab-team__linkedin {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  text-decoration: none; font-size: 0.75rem; font-weight: 700;
  color: #0A66C2; transition: opacity var(--trans-fast);
}
.ab-team__linkedin:hover { opacity: 0.7; }
.ab-team__linkedin-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: #0A66C2; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 900;
}

/* Team stats bar */
.ab-team__stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: var(--sp-8); padding: var(--sp-4) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ab-team__stats-item {
  text-align: center; padding: var(--sp-3);
  border-right: 1px solid var(--border);
}
.ab-team__stats-item:last-child { border-right: none; }
.ab-team__stats-num {
  font-family: var(--font-heading); font-size: 1.85rem; font-weight: 800;
  color: var(--deep-green); letter-spacing: -0.03em;
}
.ab-team__stats-label {
  font-size: 0.72rem; color: var(--mid-grey); font-weight: 600; margin-top: 4px;
}

/* ── 7. CAREERS ──────────────────────────────────────────────── */
.ab-careers { padding: var(--sp-14) 0; }
.ab-careers__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start;
}
.ab-careers__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800; color: var(--charcoal);
  letter-spacing: -0.025em; margin: var(--sp-2) 0 var(--sp-3);
}
.ab-careers__desc {
  font-size: 0.9375rem; color: var(--mid-grey); line-height: 1.75;
}
.ab-careers__perks { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-3); }
.ab-careers__perk {
  display: flex; align-items: center;
  font-size: 0.875rem; color: var(--charcoal); font-weight: 500;
}
.ab-careers__roles-label {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mid-grey);
  margin-bottom: var(--sp-3);
}
.ab-careers__role-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 14px var(--sp-4); margin-bottom: 8px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none;
  transition: all var(--trans-fast);
}
.ab-careers__role-item:hover {
  border-color: rgba(11,110,79,0.3);
  box-shadow: var(--shadow-sm); transform: translateX(3px);
}
.ab-careers__role-title {
  font-size: 0.875rem; font-weight: 700; color: var(--charcoal);
}
.ab-careers__role-loc {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.75rem; color: var(--mid-grey); margin-top: 3px;
}
.ab-careers__role-loc-icon { font-size: 0.7rem; }
.ab-careers__role-arrow {
  font-size: 0.82rem; font-weight: 700; color: var(--deep-green);
  flex-shrink: 0; opacity: 0; transition: opacity var(--trans-fast);
}
.ab-careers__role-item:hover .ab-careers__role-arrow { opacity: 1; }
.ab-careers__roles-footer {
  font-size: 0.78rem; color: var(--mid-grey); line-height: 1.6;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* ── 8. CTA BAND ─────────────────────────────────────────────── */
.ab-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #051A10 0%, #0B1E14 50%, #091820 100%);
  padding: var(--sp-14) 0;
}
.ab-cta__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px; opacity: 0.7;
}
.ab-cta__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(111,207,151,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,151,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.ab-cta__orb-1 {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  top: -180px; left: -120px; pointer-events: none;
  background: radial-gradient(circle, rgba(11,110,79,0.12) 0%, transparent 70%);
}
.ab-cta__orb-2 {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  bottom: -140px; right: -80px; pointer-events: none;
  background: radial-gradient(circle, rgba(8,145,178,0.09) 0%, transparent 70%);
}
.ab-cta__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center;
}
.ab-cta__copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.ab-cta__eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eco-green);
}
.ab-cta__h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800; color: var(--white);
  line-height: 1.15; letter-spacing: -0.025em;
}
.ab-cta__desc { font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.75; }
.ab-cta__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ab-cta__trust { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 4px; }
.ab-cta__trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; color: rgba(255,255,255,0.38); font-weight: 500;
}
.ab-cta__trust-pip { color: var(--eco-green); font-weight: 900; }

/* Testimonial card */
.ab-cta__testimonial {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl); padding: var(--sp-6);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ab-cta__quote-mark {
  font-family: Georgia, serif; font-size: 4rem; font-weight: 900;
  color: rgba(111,207,151,0.2); line-height: 0.8;
  margin-bottom: -8px;
}
.ab-cta__quote {
  font-size: 0.9375rem; color: rgba(255,255,255,0.75);
  line-height: 1.72; font-style: italic; margin: 0;
  border-left: 3px solid rgba(111,207,151,0.3);
  padding-left: var(--sp-4);
}
.ab-cta__testimonial-author { display: flex; align-items: center; gap: 12px; }
.ab-cta__testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(111,207,151,0.15); border: 1px solid rgba(111,207,151,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800;
  color: var(--eco-green);
}
.ab-cta__testimonial-name { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.8); }
.ab-cta__testimonial-org { font-size: 0.72rem; color: rgba(255,255,255,0.38); margin-top: 2px; }
.ab-cta__rating {
  display: flex; align-items: center; gap: 8px;
  padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.07);
}
.ab-cta__stars { font-size: 0.85rem; color: #D4A017; letter-spacing: 1px; }
.ab-cta__rating-val { font-size: 0.78rem; font-weight: 800; color: rgba(255,255,255,0.7); }
.ab-cta__rating-src { font-size: 0.65rem; color: rgba(255,255,255,0.3); font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ab-diff__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .ab-hero__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ab-hero__stats-panel { display: none; }
  .ab-split__cols { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: var(--sp-4); }
  .ab-split__divider { flex-direction: row; padding: 0; }
  .ab-split__divider-line { flex: 1; width: auto; height: 1px; min-height: 0; }
  .ab-split__divider-circle { width: 36px; height: 36px; }
  .ab-cta__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 900px) {
  .ab-story__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ab-mvv__vm-row { grid-template-columns: 1fr; }
  .ab-mvv__values-grid { grid-template-columns: 1fr 1fr; }
  .ab-team__grid { grid-template-columns: 1fr 1fr; }
  .ab-careers__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ab-diff__grid { grid-template-columns: repeat(2, 1fr); }
  .ab-team__stats-bar { grid-template-columns: repeat(2, 1fr); }
  .ab-team__stats-item:nth-child(2) { border-right: none; }
}
@media (max-width: 640px) {
  .ab-hero { padding: var(--sp-10) 0; }
  .ab-hero__h1 { font-size: 1.7rem; }
  .ab-mvv__values-grid { grid-template-columns: 1fr; }
  .ab-team__grid { grid-template-columns: 1fr; }
  .ab-diff__grid { grid-template-columns: 1fr; }
  .ab-team__stats-bar { grid-template-columns: 1fr 1fr; }
  .ab-hero__actions { flex-direction: column; }
  .ab-cta__actions { flex-direction: column; }
  .ab-diff__table-wrap { font-size: 0.78rem; }
  .ab-hero__stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   GLOBAL ENHANCEMENTS & POLISH (v3)
   ============================================================ */

/* ─── Smooth Nav Transition ──────────────────────────────── */
.nav {
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* ─── Focus Visible Accessibility ────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--eco-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Selection Highlight ─────────────────────────────────── */
::selection {
  background: rgba(111, 207, 151, 0.3);
  color: var(--charcoal);
}

/* ─── Smooth Image Loading ────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Skip to Main (Accessibility) ───────────────────────── */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--deep-green);
  color: var(--white);
  padding: 12px 24px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-to-main:focus {
  top: 0;
}

/* ─── Home Testimonials Dark Style Fix ───────────────────── */
#testimonials .testimonial-stars { color: var(--soft-yellow); }

/* ─── Improved Case Card Tag Wrapping ────────────────────── */
.case-card__body { padding: var(--sp-3); }
.case-card__kpi { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: var(--sp-2); 
  padding: var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.case-card__kpi-val { 
  font-size: 1.25rem; 
  font-weight: 800; 
  color: var(--deep-green); 
  line-height: 1.2;
}
.case-card__kpi-lbl { 
  font-size: 0.72rem; 
  color: var(--mid-grey); 
  margin-top: 2px;
}

/* ─── Form Improvements ───────────────────────────────────── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--eco-green);
  box-shadow: 0 0 0 3px rgba(111, 207, 151, 0.15);
}

/* ─── Resource Card Polish ────────────────────────────────── */
.resource-card {
  transition: all 0.22s ease;
}
.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ─── Blog / Article Cards on dark bg ────────────────────── */
.bg-deep-green .resource-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(111,207,151,0.12);
  color: rgba(255,255,255,0.85);
}
.bg-deep-green .resource-card h3,
.bg-deep-green .resource-card .resource-card__title { color: var(--white); }
.bg-deep-green .resource-card:hover {
  background: rgba(255,255,255,0.1);
}

/* ─── Section Dividers ────────────────────────────────────── */
.section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--eco-green), transparent);
  margin: var(--sp-3) 0;
  border-radius: 2px;
}

/* ─── Gradient Text on dark ──────────────────────────────── */
.bg-deep-green .text-gradient {
  background: linear-gradient(135deg, var(--eco-green), var(--soft-mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Platform Caps Card Improved ────────────────────────── */
.platform-cap-card {
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1);
}
.platform-cap-card:hover {
  transform: translateY(-4px);
}

/* ─── Outcome Card Hover ──────────────────────────────────── */
.outcome-card {
  transition: all 0.22s ease;
}
.outcome-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* ─── Responsive Testimonials ────────────────────────────── */
@media (max-width: 768px) {
  #testimonials .grid-3 { grid-template-columns: 1fr; }
}

/* ─── Print Styles ────────────────────────────────────────── */
@media print {
  .nav, .footer, .topbar, .nav-mobile-menu { display: none !important; }
  .page-offset { padding-top: 0; }
  body { font-size: 12pt; }
}

/* ═══════════════════════════════════════════════════════════
   CLIENTELE BANNER — Moving logo strip
   ═══════════════════════════════════════════════════════════ */
.clientele-banner {
  background: var(--white);
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.clientele-banner__header {
  text-align: center;
  margin-bottom: var(--sp-5);
}
.clientele-banner__track-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.clientele-banner__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: clientele-scroll 40s linear infinite;
}
.clientele-banner__track:hover {
  animation-play-state: paused;
}
@keyframes clientele-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.clientele-banner__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-5);
  margin: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--trans-fast);
  min-width: 160px;
}
.clientele-banner__logo:hover {
  border-color: rgba(11,110,79,0.3);
  background: rgba(11,110,79,0.04);
  box-shadow: var(--shadow-sm);
}
.clientele-banner__logo-text {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mid-grey);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--trans-fast);
}
.clientele-banner__logo:hover .clientele-banner__logo-text {
  color: var(--deep-green);
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM MODULE CARDS — Homepage (new 5-module layout)
   ═══════════════════════════════════════════════════════════ */
.platform-caps--five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
@media (max-width: 1280px) {
  .platform-caps--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .platform-caps--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .platform-caps--five { grid-template-columns: 1fr; }
}

.platform-module-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: all var(--trans-med);
  position: relative;
  overflow: hidden;
}
.platform-module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans-med);
}
.platform-module-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(111,207,151,0.25);
}
.platform-module-card:hover::before {
  transform: scaleX(1);
}
.platform-module-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.platform-module-card__num {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.platform-module-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.platform-module-card__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.platform-module-card__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--mid-grey);
  flex: 1;
  margin: 0;
}
.platform-module-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-module-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--charcoal);
  line-height: 1.4;
}
.platform-module-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid;
  border-radius: var(--radius-sm);
  margin-top: auto;
  transition: all var(--trans-fast);
  text-align: center;
  justify-content: center;
}
.platform-module-card__cta:hover {
  transform: translateX(2px);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM MODULE FEATURES — Feature chips on platform page
   ═══════════════════════════════════════════════════════════ */
.plat-module-features {
  margin-top: var(--sp-4);
}
.plat-module-features__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid-grey);
  margin-bottom: var(--sp-2);
}
.plat-module-features__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plat-module-feature-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR REMOVED — Remove top-offset padding if topbar gone
   ═══════════════════════════════════════════════════════════ */
.topbar { display: none !important; }

/* ─── Responsive: clientele banner on mobile ─────────────── */
@media (max-width: 768px) {
  .clientele-banner { padding: var(--sp-6) 0 var(--sp-4); }
  .clientele-banner__logo { min-width: 130px; padding: var(--sp-2) var(--sp-3); }
  .clientele-banner__logo-text { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM MODULE TABS — sticky navigation bar
   ═══════════════════════════════════════════════════════════ */
.plat-module-tabs {
  position: sticky;
  top: 72px;
  z-index: 80;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.plat-module-tabs .container {
  padding-top: 0;
  padding-bottom: 0;
}
.plat-module-tabs__nav {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}
.plat-module-tabs__nav::-webkit-scrollbar { display: none; }

.plat-module-tabs__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--mid-grey);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-heading);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.plat-module-tabs__tab:hover {
  color: var(--charcoal);
  background: rgba(11,110,79,0.03);
}
.plat-module-tabs__tab.active {
  color: var(--forest-green);
  border-bottom-color: var(--forest-green);
  background: rgba(11,110,79,0.04);
}
.plat-module-tabs__tab-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.plat-module-tabs__tab-label {
  letter-spacing: -0.01em;
}

/* Active color overrides per module */
.plat-module-tabs__tab[data-tab-target="carbon-accounting"].active {
  color: #0B6E4F; border-bottom-color: #0B6E4F;
}
.plat-module-tabs__tab[data-tab-target="decarbonization"].active {
  color: #2F855A; border-bottom-color: #2F855A;
}
.plat-module-tabs__tab[data-tab-target="esg-reporting"].active {
  color: #38A169; border-bottom-color: #38A169;
}
.plat-module-tabs__tab[data-tab-target="idea-management"].active {
  color: #D97706; border-bottom-color: #D97706;
}
.plat-module-tabs__tab[data-tab-target="cbam"].active {
  color: #7C3AED; border-bottom-color: #7C3AED;
}

@media (max-width: 768px) {
  .plat-module-tabs__tab {
    padding: 12px 14px;
    font-size: 0.78rem;
    gap: 5px;
  }
  .plat-module-tabs__tab-icon { font-size: 0.95rem; }
  .plat-module-tabs {
    top: 60px;
  }
}

/* ============================================================
   PLATFORM PAGE — TABBED INTERFACE (v3)
   New sidebar-tab layout + module content panels
   ============================================================ */

/* ── Platform tabs section wrapper ─────────────────────────── */
.plat-tabs-section {
  background: #f8fafb;
  min-height: 80vh;
}

.plat-tabs-layout {
  display: flex;
  align-items: flex-start;
  min-height: 80vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.plat-tabs-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  min-height: 80vh;
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
}

.plat-tabs-sidebar__inner {
  padding: 24px 0 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plat-tabs-sidebar__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 20px 12px;
}

.plat-tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.plat-tabs-sidebar__divider {
  height: 1px;
  background: #f0f0f0;
  margin: 10px 20px;
}

.plat-tabs-sidebar__group-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #D1D5DB;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 8px 6px;
}

.plat-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.18s ease;
  position: relative;
}

.plat-tab:hover {
  background: #f3f4f6;
}

.plat-tab--active {
  background: rgba(11,110,79,0.07) !important;
}

.plat-tab--active .plat-tab__name {
  color: #0B6E4F;
  font-weight: 700;
}

.plat-tab--active .plat-tab__icon {
  background: rgba(11,110,79,0.12);
}

.plat-tab--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: #0B6E4F;
  border-radius: 0 2px 2px 0;
}

.plat-tab__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.18s;
}

.plat-tab__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.plat-tab__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.2;
}

.plat-tab__sub {
  font-size: 0.62rem;
  color: #9CA3AF;
  line-height: 1.2;
}

.plat-tab__arrow {
  font-size: 0.9rem;
  color: #D1D5DB;
  transition: color 0.18s;
}

.plat-tab--active .plat-tab__arrow {
  color: #0B6E4F;
}

.plat-tabs-sidebar__cta {
  margin-top: auto;
  padding: 16px 20px 0;
}

/* ── Content panels ─────────────────────────────────────── */
.plat-tabs-content {
  flex: 1;
  min-width: 0;
  padding: 40px 48px;
}

.plat-tab-panel {
  display: none;
}

.plat-tab-panel--active {
  display: block;
  animation: panelFadeIn 0.25s ease;
}

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

/* ── Panel header ─────────────────────────────────────── */
.plat-tab-panel__header {
  margin-bottom: 36px;
}

.plat-tab-panel__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0B6E4F;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.plat-tab-panel__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.2;
}

.plat-tab-panel__desc {
  font-size: 1rem;
  color: #6B7280;
  max-width: 620px;
  line-height: 1.6;
}

/* ── Overview grid (5 module cards) ───────────────────── */
.plat-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.plat-overview-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 18px;
  position: relative;
  transition: all 0.2s ease;
  border-top: 3px solid var(--mod-color, #0B6E4F);
  cursor: default;
}

.plat-overview-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.plat-overview-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.plat-overview-card__num {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.plat-overview-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.plat-overview-card__name {
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.2;
}

.plat-overview-card__desc {
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 12px;
}

.plat-overview-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plat-overview-card__feature {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: #374151;
}

.plat-overview-card__cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mod-color, #0B6E4F);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: gap 0.15s;
}

.plat-overview-card__cta:hover {
  gap: 8px;
}

/* ── Architecture strip ───────────────────────────────── */
.plat-arch-strip {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 24px;
}

.plat-arch-strip__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.plat-arch-strip__layers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plat-arch-strip__layer {
  border-radius: 10px;
  padding: 14px;
}

.plat-arch-strip__layer--input { background: #f0fdf4; border: 1px solid #bbf7d0; }
.plat-arch-strip__layer--core { background: rgba(11,110,79,0.05); border: 1px solid rgba(11,110,79,0.2); }
.plat-arch-strip__layer--output { background: #eff6ff; border: 1px solid #bfdbfe; }

.plat-arch-strip__layer-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.plat-arch-strip__arrow {
  text-align: center;
  color: #9CA3AF;
  font-size: 1.2rem;
  line-height: 1;
}

.plat-arch-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plat-arch-strip__chip {
  font-size: 0.68rem;
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 3px 9px;
}

.plat-arch-strip__chip--core {
  background: rgba(11,110,79,0.07);
  color: #0B6E4F;
  border-color: rgba(11,110,79,0.2);
  font-weight: 600;
}

/* ── Module layout (2-col) ───────────────────────────── */
.plat-module-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}

.plat-module-layout--reverse {
  direction: rtl;
}

.plat-module-layout--reverse > * {
  direction: ltr;
}

.plat-module-tag {
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

.plat-module-eyebrow {
  font-size: 1rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

.plat-module-title {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  margin-bottom: 14px;
}

.plat-module-lead {
  font-size: 0.9rem;
  color: #6B7280;
  line-height: 1.65;
  margin-bottom: 20px;
}

.plat-module-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.plat-module-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.5;
}

.plat-module-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.plat-module-cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #f8fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.plat-module-cap__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.plat-module-cap__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 3px;
}

.plat-module-cap__desc {
  font-size: 0.68rem;
  color: #6B7280;
  line-height: 1.4;
}

.plat-module-features {
  margin-bottom: 8px;
}

.plat-module-features__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.plat-module-features__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Feature chips with colors */
.plat-feat-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
}

.plat-feat-chip--green {
  background: rgba(11,110,79,0.07);
  color: #0B6E4F;
  border-color: rgba(11,110,79,0.2);
}

.plat-feat-chip--teal {
  background: rgba(47,133,90,0.07);
  color: #2F855A;
  border-color: rgba(47,133,90,0.2);
}

.plat-feat-chip--sage {
  background: rgba(56,161,105,0.07);
  color: #38A169;
  border-color: rgba(56,161,105,0.2);
}

.plat-feat-chip--amber {
  background: rgba(217,119,6,0.07);
  color: #D97706;
  border-color: rgba(217,119,6,0.2);
}

.plat-feat-chip--violet {
  background: rgba(124,58,237,0.07);
  color: #7C3AED;
  border-color: rgba(124,58,237,0.2);
}

/* ── Process list ────────────────────────────────────── */
.plat-module-process {
  background: #f8fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.plat-module-process__title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.plat-module-process__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
}

.plat-module-process__step:last-child {
  border-bottom: none;
}

.plat-module-process__num {
  width: 22px;
  height: 22px;
  background: rgba(56,161,105,0.1);
  color: #38A169;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
}

.plat-module-process__name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1px;
}

.plat-module-process__desc {
  font-size: 0.65rem;
  color: #6B7280;
}

/* ── Product screen ──────────────────────────────────── */
.plat-product-screen {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.plat-product-screen--dark {
  background: #1a1f2e;
  border-color: rgba(255,255,255,0.08);
}

.plat-product-screen--dark-purple {
  background: #1E1B4B;
  border-color: rgba(167,139,250,0.2);
}

.plat-product-screen__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafb;
  border-bottom: 1px solid #e5e7eb;
}

.plat-product-screen__topbar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

/* ── Workflow strip ──────────────────────────────────── */
.plat-module-workflow {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.plat-module-workflow__title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.plat-module-workflow__steps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.plat-wf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.plat-wf-step__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(11,110,79,0.1);
  color: #0B6E4F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.plat-wf-step__name {
  font-size: 0.58rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  max-width: 60px;
  line-height: 1.2;
}

.plat-wf-arrow {
  font-size: 0.9rem;
  color: #D1D5DB;
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1100px) {
  .plat-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .plat-tabs-sidebar {
    width: 240px;
  }
  .plat-tabs-content {
    padding: 28px 24px;
  }
  .plat-module-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .plat-tabs-layout {
    flex-direction: column;
  }
  .plat-tabs-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .plat-tabs-sidebar__inner {
    padding: 12px 0 16px;
  }
  .plat-tabs-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 12px;
    gap: 6px;
  }
  .plat-tab {
    width: auto;
    padding: 6px 10px;
  }
  .plat-tab__sub { display: none; }
  .plat-tab__arrow { display: none; }
  .plat-tabs-sidebar__divider,
  .plat-tabs-sidebar__group-label { display: none; }
  .plat-tabs-sidebar__cta { display: none; }
  .plat-tabs-content {
    padding: 20px 16px;
  }
  .plat-overview-grid {
    grid-template-columns: 1fr;
  }
  .plat-module-layout--reverse {
    direction: ltr;
  }
}

/* ═══════════════════════════════════════════════════════════
   SOLUTIONS PAGE — MODULE TAB NAVIGATION
   ═══════════════════════════════════════════════════════════ */

/* Sticky tab bar */
.sol-module-tabs {
  position: sticky;
  top: 72px;
  z-index: 80;
  background: #ffffff;
  border-bottom: 2px solid #e8f5ee;
  box-shadow: 0 2px 12px rgba(11,110,79,0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sol-module-tabs::-webkit-scrollbar { display: none; }

.sol-module-tabs__inner {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  padding: 0 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

.sol-module-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: #4b5563;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
  cursor: pointer;
}
.sol-module-tab:hover {
  color: var(--tab-color, #0B6E4F);
  background: rgba(11,110,79,0.04);
  border-bottom-color: var(--tab-color, #0B6E4F);
}
.sol-module-tab.active {
  color: var(--tab-color, #0B6E4F);
  border-bottom-color: var(--tab-color, #0B6E4F);
  font-weight: 600;
  background: rgba(11,110,79,0.03);
}

.sol-module-tab__icon {
  font-size: 1rem;
  line-height: 1;
}
.sol-module-tab__label {
  line-height: 1.2;
}

/* ── Carbon Credit Phase Cards ───────────────────────────── */
.sol-cc-phases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .sol-cc-phases {
    grid-template-columns: 1fr;
  }
}

.sol-cc-phase {
  background: #ffffff;
  border: 1px solid rgba(6,95,70,0.12);
  border-radius: 16px;
  padding: 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.sol-cc-phase::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--phase-color, #065F46);
}
.sol-cc-phase:hover {
  box-shadow: 0 8px 32px rgba(6,95,70,0.10);
  transform: translateY(-2px);
}

.sol-cc-phase__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.sol-cc-phase__num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.sol-cc-phase__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: -2px;
}

.sol-cc-phase__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a2e1a;
  line-height: 1.3;
}

.sol-cc-phase__sub {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 0.15rem;
  font-weight: 500;
}

.sol-cc-phase__tasks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sol-cc-phase__task {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.5;
}

/* Mobile adjustments for solution tabs */
@media (max-width: 768px) {
  .sol-module-tabs {
    top: 60px;
  }
  .sol-module-tabs__inner {
    padding: 0 0.75rem;
    gap: 0;
  }
  .sol-module-tab {
    padding: 0.7rem 0.65rem;
    font-size: 0.72rem;
  }
  .sol-module-tab__icon {
    font-size: 0.9rem;
  }
}