/* ══════════════════════════════════════════════
   CODEBAILEY Brand System
   Cream canvas + charcoal accents + business-card pastels
   (puzzle: coral, pink, yellow, lime, teal, purple)
   ══════════════════════════════════════════════ */
:root {
  /* Business-card pastel palette (puzzle pieces) */
  --cb-coral:   #F47B7B;   /* M / T / F / E / W / A labels */
  --cb-pink:    #E2548B;
  --cb-yellow:  #F2C94C;
  --cb-lime:    #B8C66A;
  --cb-teal:    #5A8678;
  --cb-purple:  #A78BCA;
  --cb-blue:    #5B8BC9;   /* role line on card (SI Business Team) */

  /* Backwards-compatible aliases used across the codebase
     (kept names; values re-mapped to the new palette so existing
     class names like .m-stripe / .m-blue-* continue to work) */
  --m-blue-light:    var(--cb-teal);
  --m-blue-dark:     var(--cb-blue);
  --m-red:           var(--cb-coral);
  --bmw-blue:        var(--cb-blue);
  --electric-blue:   var(--cb-blue);

  /* Light canvas */
  --canvas:          #F8F4E6;   /* cream — like the business card */
  --surface-soft:    #FCF8EB;
  --surface-card:    #FFFFFF;
  --surface-elevated:#FFFFFF;
  --carbon-gray:     #ECE7D2;

  --hairline:        #E2DCC4;
  --hairline-strong: #D2CBAE;

  /* Type colors on light surfaces.
     NOTE: var(--on-dark) historically meant "primary foreground". On a
     light theme we re-map it to charcoal so all existing rules that
     reference it (titles, buttons, etc.) become dark-on-cream. */
  --on-dark:         #2E2E2E;   /* charcoal — primary text */
  --body:            #5A5A5A;
  --body-strong:     #2E2E2E;
  --muted:           #8E8B7B;

  --success:         #4F8A5A;
  --warning:         #D9A23C;

  /* Dark sections (hero / CTA / footer) — mirror the dark business-card side */
  --dark-canvas:     #2E2E2E;
  --dark-surface:    #383838;
  --dark-hairline:   #4A4A4A;
  --dark-fg:         #FFFFFF;
  --dark-fg-soft:    #D8D5C8;
  --dark-fg-muted:   #9A9787;

  --r-none:    0px;
  --r-sm:      6px;
  --r-md:      10px;
  --r-lg:      16px;
  --r-full:    9999px;

  --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 40px; --sp-xxl: 64px; --sp-section: 96px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.55;
  color: var(--body); background: var(--canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  word-break: keep-all; overflow-wrap: break-word;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Typography */
.display-xl { font-size: 80px; font-weight: 800; line-height: 1.0; letter-spacing: -1.5px; color: var(--on-dark); }
.display-lg { font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; color: var(--on-dark); }
.display-md { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; color: var(--on-dark); }
.display-sm { font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--on-dark); }
.title-lg { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--on-dark); }
.title-md { font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--on-dark); }
.title-sm { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--on-dark); }
.body-md { font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--body); }
.body-sm { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--body); }
.caption { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.4px; color: var(--muted); }
.label-up { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cb-coral); }
.label-up-muted { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.nav-link { font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, Consolas, monospace; }

/* Containers */
.page-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-xl); }
.section-pad { padding: var(--sp-section) 0; }

/* ────────────────────────────────────────────────
   TOP NAV (light, cream)
   ──────────────────────────────────────────────── */
.top-nav { position: sticky; top: 0; z-index: 100; background: rgba(248,244,230,0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--hairline); height: 72px; display: flex; align-items: center; }
.top-nav .page-wrap { width: 100%; display: flex; align-items: center; gap: var(--sp-lg); }
.nav-logo { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }

/* cb mark — black rounded square with white "cb" (matches business card) */
.nav-logo-mark { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; background: #111111; border: 1px solid #111111; align-items: center; justify-content: center; color: #ffffff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.5px; }
.nav-logo-mark .stripe { display: none; } /* old BMW stripe disabled */
.nav-logo-mark::before { content: "cb"; }

.nav-logo-text { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-name { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; text-transform: lowercase; color: var(--on-dark); }
.nav-logo-sub { font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.nav-divider-v { width: 1px; height: 24px; background: var(--hairline); }
.nav-menu { display: flex; align-items: center; gap: 0; list-style: none; flex: 1; }
.nav-menu li a { display: block; padding: 0 var(--sp-sm); height: 72px; line-height: 72px; color: var(--body-strong); font-size: 14px; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.nav-menu li a:hover { color: var(--cb-coral); }
.nav-menu li a.active { color: var(--on-dark); font-weight: 700; border-bottom-color: var(--cb-coral); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-md); margin-left: auto; flex-shrink: 0; }
.lang-group { display: flex; align-items: center; gap: var(--sp-xs); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.lang-group button { background: none; border: none; color: var(--muted); padding: 4px 6px; cursor: pointer; }
.lang-group button.active { color: var(--on-dark); font-weight: 800; }
.lang-group .sep { color: var(--hairline-strong); }
.icon-btn { width: 38px; height: 38px; background: transparent; border: 1px solid var(--hairline-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--on-dark); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.icon-btn:hover { background: var(--surface-card); border-color: var(--cb-coral); color: var(--cb-coral); }

/* ────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────── */
.btn-primary { display: inline-flex; align-items: center; gap: var(--sp-xs); background: #111111; color: #ffffff; border: 1px solid #111111; border-radius: 999px; padding: 0 var(--sp-xl); height: 48px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; transition: background 0.15s, color 0.15s, transform 0.15s; }
.btn-primary:hover { background: var(--cb-coral); border-color: var(--cb-coral); color: #ffffff; transform: translateY(-1px); }
.btn-secondary { display: inline-flex; align-items: center; gap: var(--sp-xs); background: transparent; color: var(--on-dark); border: 1px solid var(--on-dark); border-radius: 999px; padding: 0 var(--sp-xl); height: 48px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.btn-secondary:hover { background: var(--on-dark); color: #ffffff; }
.text-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: var(--cb-coral); font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; transition: gap 0.15s, color 0.15s; }
.text-link:hover { gap: 12px; color: var(--cb-pink); }
.text-link::after { content: "›"; font-size: 18px; line-height: 1; }
.text-link.no-arrow::after { content: ""; }

/* ────────────────────────────────────────────────
   HERO BAND (dark — like the back of the business card)
   ──────────────────────────────────────────────── */
.hero-band { position: relative; background: var(--dark-canvas); min-height: 720px; overflow: hidden; color: var(--dark-fg); }
.hero-band .hero-eyebrow,
.hero-band h1,
.hero-band .lead,
.hero-band .hero-stat-value { color: var(--dark-fg); }
.hero-band .lead { color: var(--dark-fg-soft); }
.hero-band .hero-stat-label { color: var(--dark-fg-muted); }
.hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: luminosity; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,46,46,0.55) 0%, rgba(46,46,46,0.78) 60%, rgba(46,46,46,0.98) 100%); }

/* RAG Pipeline Console — live production log visualization in hero */
.hero-console {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 680px;
  max-width: 50vw;
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  box-shadow: 0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
  z-index: 1;
  backdrop-filter: blur(8px);
}
.console-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 18px;
  background: #161616;
  border-bottom: 1px solid #2a2a2a;
}
.console-bar .dot { width: 13px; height: 13px; border-radius: 50%; }
.console-bar .dot.red { background: #ff5f57; }
.console-bar .dot.yellow { background: #febc2e; }
.console-bar .dot.green { background: #28c941; }
.console-bar .console-title { flex: 1; text-align: center; color: #7a7a7a; font-size: 12px; font-weight: 500; letter-spacing: 0.4px; }
.console-bar .console-status { display: inline-flex; align-items: center; gap: 6px; color: var(--cb-lime); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; }
.console-bar .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cb-lime); box-shadow: 0 0 8px var(--cb-lime); animation: liveBlink 1.4s ease-in-out infinite; }
@keyframes liveBlink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.console-body {
  padding: 26px 24px 28px;
  color: #d5d5d5;
  min-height: 440px;
  position: relative;
}
.log-line {
  display: flex; align-items: baseline; gap: 11px;
  margin-bottom: 10px;
  white-space: nowrap;
  opacity: 0;
  animation: logCycle 5s ease-out infinite;
  animation-delay: var(--d, 0s);
}
.log-line .ts { color: #6a6a6a; font-size: 12px; flex-shrink: 0; }
.log-line .lv { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; flex-shrink: 0; line-height: 1.4; }
.log-line .lv.info { color: var(--cb-teal);  background: rgba(90,134,120,0.18); }
.log-line .lv.dbg  { color: #9a8aff;         background: rgba(154,138,255,0.16); }
.log-line .lv.pass { color: var(--cb-lime);  background: rgba(184,198,106,0.18); }
.log-line .lv.done { color: var(--cb-yellow);background: rgba(242,201,76,0.18); }
.log-line .msg { color: #d8d8d8; flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.log-line .msg .qstr  { color: var(--cb-coral); }
.log-line .msg .model { color: var(--cb-yellow); }
.log-line .lat { color: var(--cb-coral); font-weight: 700; font-size: 12.5px; flex-shrink: 0; }

.log-line.prompt-line .prompt { color: var(--cb-coral); font-weight: 700; margin-right: 4px; }
.log-line.prompt-line .caret  { color: var(--cb-yellow); animation: caretBlink 1.1s steps(2) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

@keyframes logCycle {
  0%, 2%   { opacity: 0; transform: translateY(-3px); }
  6%, 86%  { opacity: 1; transform: translateY(0); }
  94%, 100%{ opacity: 0; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .hero-console { right: 50%; top: 14%; transform: translateX(50%); width: 88vw; max-width: 460px; }
}
@media (max-width: 640px) {
  .hero-console { display: none; }
}

/* keep these for any other page that may still use them — leave .hero-flow rules below */
.hero-flow { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 460px; height: 460px; z-index: 1; pointer-events: none; max-width: 38vw; display: block; }
@media (max-width: 1024px) {
  .hero-flow { right: 50%; top: 14%; transform: translateX(50%); width: 280px; height: 280px; opacity: 0.55; }
}
@media (max-width: 640px) {
  .hero-flow { display: none; }
}

.hero-flow .dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: dotForm 11s ease-in-out infinite both;
  animation-delay: var(--delay, 0s);
}
@keyframes dotForm {
  0%, 8% {
    transform: translate(var(--tx, 0), var(--ty, 0));
    opacity: 0.45;
  }
  40%, 60% {
    transform: translate(0, 0);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(var(--tx, 0), var(--ty, 0));
    opacity: 0.45;
  }
}

/* AI/RAG core pulse */
.ai-core .core-pulse {
  transform-box: fill-box;
  transform-origin: 150px 150px;
  animation: corePulse 3.4s ease-in-out infinite;
}
.ai-core .core-ring {
  transform-box: fill-box;
  transform-origin: 150px 150px;
  animation: coreSpin 12s linear infinite, ringPulse 3.4s ease-in-out infinite;
}
.ai-core .core-mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: coreSpin 8s linear infinite reverse;
}
@keyframes corePulse {
  0%, 100% { opacity: 0.25; r: 30; }
  50%      { opacity: 0.75; r: 40; }
}
@keyframes ringPulse {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 1; }
}
@keyframes coreSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Cluster rings fade in only when dots are clustered (sync with dotForm) */
.hero-flow .cluster-rings circle {
  animation: ringReveal 11s ease-in-out infinite both;
}
@keyframes ringReveal {
  0%, 20%, 80%, 100% { opacity: 0; }
  45%, 55%           { opacity: 0.45; }
}

/* Flow lines fade in lightly when clustered */
.hero-flow .flow-lines line {
  animation: lineReveal 11s ease-in-out infinite both;
}
@keyframes lineReveal {
  0%, 20%, 80%, 100% { stroke-opacity: 0; }
  45%, 55%           { stroke-opacity: 0.20; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flow .dot,
  .ai-core .core-pulse,
  .ai-core .core-ring,
  .hero-flow .cluster-rings circle,
  .hero-flow .flow-lines line { animation: none; opacity: 1; transform: none; }
}

.hero-content { position: relative; z-index: 2; padding-top: 120px; padding-bottom: var(--sp-section); padding-right: clamp(0px, 50vw, 720px); }
@media (max-width: 1024px) {
  .hero-content { padding-right: 0; padding-top: 320px; }
}
.hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cb-yellow); margin-bottom: var(--sp-lg); display: inline-flex; align-items: center; gap: var(--sp-md); }
.hero-eyebrow::before {
  content: "";
  width: 56px; height: 6px; border-radius: 4px;
  background: linear-gradient(to right,
    var(--cb-coral) 0%, var(--cb-coral) 20%,
    var(--cb-yellow) 20%, var(--cb-yellow) 40%,
    var(--cb-lime) 40%, var(--cb-lime) 60%,
    var(--cb-teal) 60%, var(--cb-teal) 80%,
    var(--cb-purple) 80%, var(--cb-purple) 100%);
}
.hero-band h1 { text-transform: none; font-size: clamp(44px, 6.5vw, 80px); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: var(--sp-lg); max-width: 1000px; }
.hero-band h1 .accent { background: linear-gradient(90deg, var(--cb-coral), var(--cb-yellow) 60%, var(--cb-lime)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-band .lead { font-size: 17px; font-weight: 400; line-height: 1.65; max-width: 780px; margin-bottom: var(--sp-xl); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-bottom: var(--sp-xxl); }
.hero-band .btn-primary { background: var(--cb-coral); border-color: var(--cb-coral); color: #ffffff; }
.hero-band .btn-primary:hover { background: var(--cb-pink); border-color: var(--cb-pink); }
.hero-band .btn-secondary { color: var(--dark-fg); border-color: var(--dark-fg); }
.hero-band .btn-secondary:hover { background: var(--dark-fg); color: var(--dark-canvas); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--dark-hairline); border-bottom: 1px solid var(--dark-hairline); margin-top: var(--sp-xl); }
.hero-stat { padding: var(--sp-lg) 0; padding-right: var(--sp-lg); border-right: 1px solid var(--dark-hairline); }
.hero-stat:last-child { border-right: none; padding-right: 0; }
.hero-stat:not(:first-child) { padding-left: var(--sp-lg); }
.hero-stat-value { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; margin-bottom: 6px; }
.hero-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }

/* SUB-PAGE HERO (smaller) */
.sub-hero { position: relative; background: var(--dark-canvas); min-height: 440px; overflow: hidden; border-bottom: 1px solid var(--hairline); color: var(--dark-fg); }
.sub-hero h1, .sub-hero .lead, .sub-hero .hero-eyebrow { color: var(--dark-fg); }
.sub-hero .lead { color: var(--dark-fg-soft); }
.sub-hero .hero-photo { opacity: 0.18; }
.sub-hero .hero-content { padding-top: 110px; padding-bottom: var(--sp-xxl); }
.sub-hero h1 { font-size: clamp(36px, 5.5vw, 64px); margin-bottom: var(--sp-md); line-height: 1.1; letter-spacing: -0.8px; text-transform: none; }
.sub-hero .lead { font-size: 16px; max-width: 720px; margin-bottom: var(--sp-lg); }
.breadcrumb { display: flex; align-items: center; gap: var(--sp-sm); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dark-fg-muted); margin-bottom: var(--sp-lg); }
.breadcrumb a { color: var(--dark-fg-muted); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--cb-yellow); }
.breadcrumb span { color: var(--dark-hairline); }

/* COLORFUL STRIPE — used as section separator (replaces M tricolor) */
.m-stripe {
  height: 6px;
  background: linear-gradient(to right,
    var(--cb-coral) 0%, var(--cb-coral) 16.66%,
    var(--cb-pink) 16.66%, var(--cb-pink) 33.33%,
    var(--cb-yellow) 33.33%, var(--cb-yellow) 50%,
    var(--cb-lime) 50%, var(--cb-lime) 66.66%,
    var(--cb-teal) 66.66%, var(--cb-teal) 83.33%,
    var(--cb-purple) 83.33%, var(--cb-purple) 100%);
}

/* CATEGORY BAR */
.category-bar { background: var(--surface-soft); border-bottom: 1px solid var(--hairline); }
.category-bar .page-wrap { display: flex; align-items: center; gap: 0; overflow-x: auto; }
.cat-tab { padding: var(--sp-md) var(--sp-lg); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.cat-tab:hover { color: var(--cb-coral); }
.cat-tab.active { color: var(--on-dark); border-bottom-color: var(--cb-coral); }

/* SECTION HEADER */
.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-xl); margin-bottom: var(--sp-xxl); padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--hairline); }
.section-header-title { max-width: none; flex: 1; }
.section-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); }
.section-header h2 { text-transform: none; font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.15; letter-spacing: -0.8px; color: var(--on-dark); margin-bottom: var(--sp-md); }
.section-header p { font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--body); max-width: none; }

/* EXPERTISE BAND */
.expertise-band { background: var(--canvas); padding: var(--sp-section) 0; }
.expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xxl); align-items: center; margin-top: var(--sp-xl); }
.expertise-photo { position: relative; aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 12px 40px rgba(46,46,46,0.12); }
.expertise-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,46,46,0) 0%, rgba(46,46,46,0.7) 100%); }
.expertise-photo-caption { position: absolute; left: var(--sp-lg); bottom: var(--sp-lg); right: var(--sp-lg); color: #ffffff; }
.expertise-photo-caption .num { font-size: 64px; font-weight: 800; line-height: 1; color: #ffffff; letter-spacing: -2px; }
.expertise-photo-caption .label { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cb-yellow); margin-top: var(--sp-xs); }

/* PIPELINE */
.pipeline { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-lg); }
.pipeline-title { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); }
.pipeline-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pipeline-step { flex: 1 1 92px; min-width: 84px; padding: 8px 10px; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); color: var(--on-dark); font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px; text-align: center; white-space: normal; line-height: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pipeline-arrow { color: var(--cb-coral); font-size: 18px; font-weight: 800; flex-shrink: 0; }
.equation-list { display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-xl); }
.equation { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-md); background: var(--surface-card); border-radius: var(--r-sm); border-left: 3px solid var(--cb-teal); box-shadow: 0 1px 3px rgba(46,46,46,0.05); }
.equation .eq-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-teal); }
.equation .eq-formula { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; color: var(--on-dark); overflow-x: auto; }

/* SPEC ROW */
.spec-band { background: var(--surface-soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.spec-row { display: grid; grid-template-columns: repeat(5, 1fr); }
.spec-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.spec-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.spec-cell { padding: var(--sp-xl) var(--sp-lg); border-right: 1px solid var(--hairline); }
.spec-cell:last-child { border-right: none; }
.spec-cell:nth-child(5n+1) .spec-value { color: var(--cb-coral); }
.spec-cell:nth-child(5n+2) .spec-value { color: var(--cb-teal); }
.spec-cell:nth-child(5n+3) .spec-value { color: var(--cb-pink); }
.spec-cell:nth-child(5n+4) .spec-value { color: var(--cb-purple); }
.spec-cell:nth-child(5n+5) .spec-value { color: var(--cb-yellow); }
.spec-value { font-size: 46px; font-weight: 800; line-height: 1; margin-bottom: var(--sp-xs); letter-spacing: -1.5px; }
.spec-value-sm { font-size: 32px; }
.spec-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }

/* TECH STACK */
.tech-band { background: var(--canvas); padding: var(--sp-section) 0; }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.tech-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tech-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tech-card { background: var(--surface-card); padding: var(--sp-xl); display: flex; flex-direction: column; border-radius: var(--r-md); border: 1px solid var(--hairline); box-shadow: 0 1px 3px rgba(46,46,46,0.04); transition: transform 0.18s, box-shadow 0.18s; }
.tech-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(46,46,46,0.08); }
.tech-card:nth-child(4n+1) { border-top: 4px solid var(--cb-coral); }
.tech-card:nth-child(4n+2) { border-top: 4px solid var(--cb-yellow); }
.tech-card:nth-child(4n+3) { border-top: 4px solid var(--cb-teal); }
.tech-card:nth-child(4n+4) { border-top: 4px solid var(--cb-purple); }
.tech-card-num { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: var(--cb-coral); margin-bottom: var(--sp-md); }
.tech-card:nth-child(4n+2) .tech-card-num { color: var(--cb-yellow); }
.tech-card:nth-child(4n+3) .tech-card-num { color: var(--cb-teal); }
.tech-card:nth-child(4n+4) .tech-card-num { color: var(--cb-purple); }
.tech-card h3 { font-size: 20px; font-weight: 800; color: var(--on-dark); margin-bottom: var(--sp-sm); text-transform: none; letter-spacing: -0.3px; }
.tech-desc { font-size: 13px; font-weight: 400; color: var(--body); line-height: 1.65; margin-bottom: 0; flex: 1; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-md); }
.tech-tag { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 999px; color: var(--body-strong); font-size: 12px; font-weight: 500; letter-spacing: 0.2px; }

/* SOLUTIONS BAND */
.solutions-band { background: var(--surface-soft); padding: var(--sp-section) 0; position: relative; }
.solutions-photo { position: relative; height: 320px; margin: 0 calc(-1 * var(--sp-xl)) var(--sp-xxl); background-size: cover; background-position: center; border-radius: var(--r-lg); overflow: hidden; }
.solutions-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,46,46,0.35) 0%, rgba(46,46,46,0.85) 100%); }
.solutions-photo-caption { position: absolute; bottom: var(--sp-xl); left: var(--sp-xl); right: var(--sp-xl); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; }
.solutions-photo-title { text-transform: none; font-size: 36px; font-weight: 800; line-height: 1.05; color: #ffffff; letter-spacing: -1px; }
.solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }

/* PHASE CARDS — colored per the business-card puzzle palette */
.phase-card { background: var(--surface-card); padding: var(--sp-xl); position: relative; display: flex; flex-direction: column; border-radius: var(--r-md); border: 1px solid var(--hairline); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }
.phase-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cb-coral); }
.phase-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(46,46,46,0.08); }
.phase-num { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: var(--cb-coral); margin-bottom: var(--sp-sm); }
.phase-card h3 { text-transform: none; font-size: 26px; font-weight: 800; color: var(--on-dark); line-height: 1.15; margin-bottom: var(--sp-sm); letter-spacing: -0.5px; }
.phase-card p { font-size: 14px; font-weight: 400; color: var(--body); line-height: 1.6; margin-bottom: var(--sp-lg); flex: 1; }
.phase-stripe { height: 3px; width: 40px; background: var(--cb-coral); border-radius: 2px; margin-bottom: var(--sp-lg); }
.phase-card.connect::before  { background: var(--cb-coral); }
.phase-card.connect .phase-num,
.phase-card.connect .phase-stripe { background: var(--cb-coral); color: var(--cb-coral); }
.phase-card.connect .phase-stripe { background: var(--cb-coral); }
.phase-card.govern::before   { background: var(--cb-yellow); }
.phase-card.govern .phase-num { color: #C29512; }
.phase-card.govern .phase-stripe { background: var(--cb-yellow); }
.phase-card.protect::before  { background: var(--cb-purple); }
.phase-card.protect .phase-num { color: var(--cb-purple); }
.phase-card.protect .phase-stripe { background: var(--cb-purple); }
.phase-card.activate::before { background: var(--cb-teal); }
.phase-card.activate .phase-num { color: var(--cb-teal); }
.phase-card.activate .phase-stripe { background: var(--cb-teal); }

.phase-list { list-style: none; margin-bottom: var(--sp-lg); }
.phase-list li { padding: var(--sp-sm) 0; border-bottom: 1px solid var(--hairline); color: var(--body-strong); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.phase-list li:last-child { border-bottom: none; }
.phase-list li .arrow { color: var(--muted); font-size: 14px; }
.phase-count-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-md); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--hairline); }
.phase-count { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.phase-count-num { font-size: 26px; font-weight: 800; color: var(--on-dark); letter-spacing: -0.5px; }

/* DIFFERENTIATORS */
.differentiators-band { background: var(--canvas); padding: var(--sp-section) 0; }
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.diff-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.diff-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.diff-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }
.diff-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(46,46,46,0.1); }
.diff-photo { height: 220px; background-size: cover; background-position: center; position: relative; }
.diff-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,46,46,0.05) 0%, rgba(46,46,46,0.6) 100%); }
.diff-photo-num { position: absolute; bottom: var(--sp-md); right: var(--sp-md); z-index: 2; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: #ffffff; }
.diff-card:nth-child(3n+1) .diff-photo-num { color: var(--cb-coral); }
.diff-card:nth-child(3n+2) .diff-photo-num { color: var(--cb-yellow); }
.diff-card:nth-child(3n+3) .diff-photo-num { color: var(--cb-lime); }
.diff-body { padding: var(--sp-xl); flex: 1; display: flex; flex-direction: column; }
.diff-body h3 { text-transform: none; font-size: 22px; font-weight: 800; color: var(--on-dark); line-height: 1.2; margin-bottom: var(--sp-md); letter-spacing: -0.4px; }
.diff-body > p { font-size: 14px; font-weight: 400; color: var(--body); line-height: 1.65; margin-bottom: var(--sp-lg); }
.diff-points { list-style: none; margin-top: auto; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.diff-points li { padding: var(--sp-xs) 0; color: var(--body-strong); font-size: 13px; font-weight: 500; display: flex; align-items: flex-start; gap: var(--sp-sm); }
.diff-points li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--cb-coral); margin-top: 8px; flex-shrink: 0; }
.diff-card:nth-child(3n+2) .diff-points li::before { background: var(--cb-yellow); }
.diff-card:nth-child(3n+3) .diff-points li::before { background: var(--cb-teal); }

/* CUSTOMERS */
.customers-band { background: var(--surface-soft); padding: var(--sp-section) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.partners-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-xxl); }
.partner-stat { background: var(--surface-card); padding: var(--sp-lg) var(--sp-xl); border-radius: var(--r-md); border: 1px solid var(--hairline); border-bottom: 4px solid var(--cb-coral); display: flex; align-items: center; gap: 14px; }
.partner-stat:nth-child(4n+2) { border-bottom-color: var(--cb-yellow); }
.partner-stat:nth-child(4n+3) { border-bottom-color: var(--cb-teal); }
.partner-stat:nth-child(4n+4) { border-bottom-color: var(--cb-purple); }
.partner-stat-value { font-size: 46px; font-weight: 800; color: var(--on-dark); line-height: 1; margin-bottom: 0; letter-spacing: -1.5px; flex: none; }
.partner-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); line-height: 1.35; min-width: 0; }
.credential-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-xxl); }
.credential-chip { display: inline-flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-lg); background: var(--surface-card); border: 1px solid var(--hairline); border-radius: 999px; color: var(--on-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }
.credential-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cb-teal); }
.credential-chip.red .dot { background: var(--cb-coral); }
.credential-chip.success .dot { background: var(--success); }
.customer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-xs); }
.customer-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.customer-cell { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--sp-xl) var(--sp-md); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 130px; transition: border-color 0.15s, transform 0.15s; }
.customer-cell:hover { border-color: var(--cb-coral); transform: translateY(-2px); }
.customer-name { font-size: 18px; font-weight: 800; color: var(--on-dark); margin-bottom: 6px; letter-spacing: -0.3px; }
.customer-cat { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: var(--cb-coral); text-transform: none; }

/* CERTIFICATIONS */
.cert-band { background: var(--canvas); padding: var(--sp-section) 0; }
.cert-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-xxl); }
.cert-stat { background: var(--surface-card); padding: var(--sp-xl); border-radius: var(--r-md); border: 1px solid var(--hairline); border-top: 4px solid var(--cb-coral); }
.cert-stat:nth-child(4n+2) { border-top-color: var(--cb-yellow); }
.cert-stat:nth-child(4n+3) { border-top-color: var(--cb-teal); }
.cert-stat:nth-child(4n+4) { border-top-color: var(--cb-purple); }
.cert-stat-value { font-size: 46px; font-weight: 800; color: var(--on-dark); line-height: 1; margin-bottom: var(--sp-xs); letter-spacing: -1.5px; }
.cert-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.cert-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.cert-image-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.cert-image-thumb { background: var(--surface-soft); display: flex; align-items: center; justify-content: center; padding: var(--sp-xl); position: relative; min-height: 360px; }
.cert-image-thumb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; object-fit: contain; box-shadow: 0 8px 30px rgba(46,46,46,0.12); }
.cert-image-body { padding: var(--sp-lg); border-top: 1px solid var(--hairline); }
.cert-image-body .label-up { margin-bottom: 6px; }
.cert-image-body h4 { font-size: 18px; font-weight: 800; color: var(--on-dark); margin-bottom: var(--sp-xs); letter-spacing: -0.3px; }
.cert-image-body p { font-size: 13px; font-weight: 400; color: var(--body); }

/* CTA BAND (dark — like the card back) */
.cta-band { position: relative; background: var(--dark-canvas); padding: 140px 0; overflow: hidden; text-align: center; color: var(--dark-fg); }
.cta-band h2, .cta-band p { color: var(--dark-fg); }
.cta-band p { color: var(--dark-fg-soft); }
.cta-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.15; mix-blend-mode: luminosity; }
.cta-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(46,46,46,0.45) 0%, rgba(46,46,46,0.9) 70%, rgba(46,46,46,1) 100%); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 20%, var(--cb-yellow) 0 12px, transparent 13px),
    radial-gradient(circle at 88% 30%, var(--cb-coral) 0 14px, transparent 15px),
    radial-gradient(circle at 10% 78%, var(--cb-teal) 0 16px, transparent 17px),
    radial-gradient(circle at 90% 80%, var(--cb-lime) 0 10px, transparent 11px),
    radial-gradient(circle at 50% 12%, var(--cb-purple) 0 8px, transparent 9px);
  opacity: 0.6;
}
.cta-content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 0 var(--sp-xl); }
.cta-content h2 { text-transform: none; font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; line-height: 1.15; margin-bottom: var(--sp-md); letter-spacing: -1px; }
.cta-content p { font-size: 17px; font-weight: 400; line-height: 1.65; margin-bottom: var(--sp-xl); max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center; }
.cta-band .btn-primary { background: var(--cb-coral); border-color: var(--cb-coral); color: #ffffff; }
.cta-band .btn-primary:hover { background: var(--cb-pink); border-color: var(--cb-pink); }
.cta-band .btn-secondary { color: var(--dark-fg); border-color: var(--dark-fg); }
.cta-band .btn-secondary:hover { background: var(--dark-fg); color: var(--dark-canvas); }

/* FOOTER (dark) */
.footer { background: var(--dark-canvas); border-top: 1px solid var(--dark-hairline); padding: var(--sp-section) 0 var(--sp-xl); color: var(--dark-fg-soft); }
.footer .nav-logo-name { color: var(--dark-fg); }
.footer .nav-logo-sub { color: var(--dark-fg-muted); }
.footer-tagline { font-size: 13.5px; line-height: 1.7; color: var(--dark-fg-soft); max-width: 290px; margin: 0; }
.footer-top { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-xxl); padding-bottom: var(--sp-xxl); border-bottom: 1px solid var(--dark-hairline); margin-bottom: var(--sp-xxl); align-items: start; }
.footer-newsletter h3 { font-size: 22px; font-weight: 800; color: var(--dark-fg); margin-bottom: var(--sp-md); text-transform: none; letter-spacing: -0.3px; }
.footer-newsletter p { font-size: 14px; font-weight: 400; color: var(--dark-fg-soft); margin-bottom: var(--sp-lg); }
.newsletter-form { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--dark-hairline); border-radius: 999px; background: var(--dark-surface); overflow: hidden; }
.newsletter-form input { flex: 1; padding: 0 var(--sp-lg); height: 48px; background: transparent; border: none; color: var(--dark-fg); font-family: inherit; font-size: 14px; font-weight: 400; }
.newsletter-form input::placeholder { color: var(--dark-fg-muted); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button { padding: 0 var(--sp-lg); background: var(--cb-coral); color: #ffffff; border: none; font-size: 12px; font-weight: 800; letter-spacing: 0.6px; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; }
.newsletter-form button:hover { background: var(--cb-pink); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }
.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--dark-hairline); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--sp-sm); }
.footer-col li a { font-size: 14px; font-weight: 400; color: var(--dark-fg-soft); transition: color 0.15s; }
.footer-col li a:hover { color: var(--cb-yellow); }
.footer-col .contact-line { font-size: 13px; font-weight: 400; color: var(--dark-fg-soft); margin-bottom: var(--sp-xs); }
.footer-col .contact-line strong { font-weight: 800; color: var(--cb-coral); display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); padding-top: var(--sp-xl); border-top: 1px solid var(--dark-hairline); }
.footer-bottom-left { display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap; }
.footer-bottom p { font-size: 12px; font-weight: 400; color: var(--dark-fg-muted); }
.footer-bottom-links { display: flex; gap: var(--sp-lg); }
.footer-bottom-links a { font-size: 12px; font-weight: 500; color: var(--dark-fg-muted); letter-spacing: 0.2px; }
.footer-bottom-links a:hover { color: var(--cb-yellow); }

/* CATALOG GRID */
.catalog-section { background: var(--canvas); padding: var(--sp-section) 0; }
.catalog-section.alt { background: var(--surface-soft); }
.catalog-header { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-xl); margin-bottom: var(--sp-xl); padding-bottom: var(--sp-md); border-bottom: 1px solid var(--hairline); }
.catalog-num { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--cb-coral); }
.catalog-title { text-transform: none; font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--on-dark); letter-spacing: -0.6px; }
.catalog-title .sub { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--body); margin-top: var(--sp-xs); }
.catalog-desc { font-size: 14px; font-weight: 400; color: var(--body); line-height: 1.65; max-width: none; }
.catalog-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.catalog-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.catalog-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.catalog-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.catalog-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xs); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; cursor: pointer; min-height: 140px; }
.catalog-card:hover { border-color: var(--cb-coral); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(46,46,46,0.06); }
.catalog-card-code { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--cb-coral); }
.catalog-card-name { font-size: 16px; font-weight: 800; color: var(--on-dark); margin-bottom: var(--sp-xs); letter-spacing: -0.2px; }
.catalog-card-desc { font-size: 12px; font-weight: 400; color: var(--body); line-height: 1.5; flex: 1; }
.catalog-card-arrow { display: flex; justify-content: flex-end; color: var(--cb-coral); font-size: 14px; }

/* PACKAGE CARDS */
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.package-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-xl); display: flex; flex-direction: column; position: relative; }
.package-card.popular { border-color: var(--cb-coral); box-shadow: 0 12px 30px rgba(244,123,123,0.18); }
.package-tag { position: absolute; top: -12px; left: var(--sp-xl); background: var(--cb-coral); color: #ffffff; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.package-name { font-size: 24px; font-weight: 800; color: var(--on-dark); text-transform: none; margin-bottom: var(--sp-xs); letter-spacing: -0.4px; }
.package-target { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); }
.package-desc { font-size: 13px; font-weight: 400; color: var(--body); margin-bottom: var(--sp-lg); padding-bottom: var(--sp-md); border-bottom: 1px solid var(--hairline); }
.package-features { list-style: none; margin-bottom: var(--sp-lg); flex: 1; }
.package-features li { padding: var(--sp-xs) 0; color: var(--body-strong); font-size: 13px; font-weight: 400; display: flex; align-items: flex-start; gap: var(--sp-sm); }
.package-features li::before { content: "✓"; color: var(--cb-teal); font-weight: 800; flex-shrink: 0; }

/* PROJECT/CASE ROWS */
.project-list { display: flex; flex-direction: column; gap: var(--sp-xs); }
.project-row { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-xl); display: grid; grid-template-columns: 80px 280px 1fr 200px; gap: var(--sp-xl); align-items: start; transition: border-color 0.15s, box-shadow 0.15s; }
.project-row:hover { border-color: var(--cb-coral); box-shadow: 0 8px 20px rgba(46,46,46,0.06); }
.project-num { font-size: 14px; font-weight: 800; letter-spacing: 1.4px; color: var(--cb-coral); padding-top: 4px; }
.project-client { font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-xs); }
.project-name { font-size: 18px; font-weight: 800; color: var(--on-dark); line-height: 1.3; letter-spacing: -0.3px; }
.project-summary p { font-size: 14px; font-weight: 400; color: var(--body); line-height: 1.6; margin-bottom: var(--sp-sm); }
.project-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.project-tag { padding: 4px 10px; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 999px; color: var(--body-strong); font-size: 11px; font-weight: 500; }
.project-results { display: flex; flex-direction: column; gap: var(--sp-xs); }
.project-result { display: flex; flex-direction: column; padding-left: var(--sp-sm); border-left: 3px solid var(--cb-coral); }
.project-result-value { font-size: 16px; font-weight: 800; color: var(--on-dark); letter-spacing: -0.3px; }
.project-result-label { font-size: 11px; font-weight: 500; color: var(--muted); }

/* TIMELINE */
.timeline-band { background: var(--canvas); padding: var(--sp-section) 0; }
.timeline-year { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-xxl); margin-bottom: var(--sp-xxl); padding-bottom: var(--sp-xxl); border-bottom: 1px solid var(--hairline); }
.timeline-year:last-child { border-bottom: none; }
.timeline-year-marker { position: sticky; top: 96px; align-self: start; }
.timeline-year-num { font-size: 84px; font-weight: 800; color: var(--on-dark); line-height: 1; letter-spacing: -3px; }
.timeline-year-bar { width: 56px; height: 6px; border-radius: 4px; background: linear-gradient(to right, var(--cb-coral), var(--cb-yellow), var(--cb-teal)); margin-top: var(--sp-md); }
.timeline-events { display: flex; flex-direction: column; gap: var(--sp-md); }
.timeline-event { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-xl); }
.timeline-event-type { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-coral); padding: 4px 10px; border: 1px solid var(--cb-coral); border-radius: 999px; margin-bottom: var(--sp-md); }
.timeline-event-type.cert { color: var(--success); border-color: var(--success); }
.timeline-event-type.patent { color: var(--cb-pink); border-color: var(--cb-pink); }
.timeline-event-type.partner { color: var(--warning); border-color: var(--warning); }
.timeline-event-type.milestone { color: var(--cb-teal); border-color: var(--cb-teal); }
.timeline-event h4 { font-size: 18px; font-weight: 800; color: var(--on-dark); margin-bottom: var(--sp-xs); line-height: 1.3; letter-spacing: -0.3px; }
.timeline-event p { font-size: 14px; font-weight: 400; color: var(--body); line-height: 1.6; margin-bottom: var(--sp-sm); }
.timeline-event-meta { display: flex; flex-wrap: wrap; gap: var(--sp-md); padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); margin-top: var(--sp-sm); font-size: 12px; }
.timeline-event-meta-item { color: var(--muted); }
.timeline-event-meta-item strong { color: var(--body-strong); font-weight: 700; }

/* CONTACT FORM */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xxl); padding: var(--sp-section) 0; }
.contact-form-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-xl); }
.form-row { margin-bottom: var(--sp-md); }
.form-row label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 12px var(--sp-md); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sm); color: var(--on-dark); font-family: inherit; font-size: 14px; font-weight: 400; transition: border-color 0.15s; }
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--cb-coral); }
.contact-info { display: flex; flex-direction: column; gap: var(--sp-lg); }
.contact-info-block { padding: var(--sp-lg); background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.contact-info-block h4 { font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); }
.contact-info-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-md); padding: var(--sp-xs) 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.contact-info-row:last-child { border-bottom: none; }
.contact-info-row .label { font-weight: 800; color: var(--cb-coral); font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; padding-top: 2px; }
.contact-info-row .value { color: var(--on-dark); font-weight: 500; }

/* ════════════════════════════════════════
   AI / RAG ARCHITECTURE STACK (enhanced expertise band)
   ════════════════════════════════════════ */
.rag-stack { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-lg); margin-bottom: var(--sp-lg); }
.rag-stack-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-md); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--hairline); }
.rag-stack-head .label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cb-coral); }
.rag-stack-head .badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: var(--cb-teal); background: rgba(90,134,120,0.10); padding: 4px 10px; border-radius: var(--r-sm); letter-spacing: 0.4px; }
.rag-layer { display: grid; grid-template-columns: 40px 1fr 92px; gap: var(--sp-sm); align-items: center; padding: 11px var(--sp-sm); background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-sm); margin-bottom: 6px; transition: transform 0.2s, border-color 0.2s, background 0.2s; }
.rag-layer:last-child { margin-bottom: 0; }
.rag-layer:hover { transform: translateX(4px); border-color: var(--cb-coral); background: var(--surface-card); }
.rag-layer-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: 0.8px; }
.rag-layer-name { font-size: 13px; font-weight: 700; color: var(--on-dark); letter-spacing: -0.1px; line-height: 1.25; }
.rag-layer-name .sub { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--body); letter-spacing: 0.1px; margin-top: 3px; }
.rag-layer-metric { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--cb-teal); text-align: right; }
.rag-layer.l1 { border-left: 3px solid var(--cb-coral); }
.rag-layer.l1 .rag-layer-tag { color: var(--cb-coral); }
.rag-layer.l2 { border-left: 3px solid var(--cb-yellow); }
.rag-layer.l2 .rag-layer-tag { color: var(--warning); }
.rag-layer.l3 { border-left: 3px solid var(--cb-lime); }
.rag-layer.l3 .rag-layer-tag { color: var(--cb-teal); }
.rag-layer.l4 { border-left: 3px solid var(--cb-teal); }
.rag-layer.l4 .rag-layer-tag { color: var(--cb-teal); }
.rag-layer.l5 { border-left: 3px solid var(--cb-purple); }
.rag-layer.l5 .rag-layer-tag { color: var(--cb-purple); }
.rag-layer.l6 { border-left: 3px solid var(--cb-pink); }
.rag-layer.l6 .rag-layer-tag { color: var(--cb-pink); }

/* ════════════════════════════════════════
   MATHEMATICAL FOUNDATIONS BAND
   ════════════════════════════════════════ */
.foundations-band { background: var(--surface-soft); padding: var(--sp-section) 0; position: relative; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.foundations-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 18%, var(--cb-coral) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 28%, var(--cb-teal) 0 7px, transparent 8px),
    radial-gradient(circle at 84% 84%, var(--cb-yellow) 0 4px, transparent 5px),
    radial-gradient(circle at 14% 78%, var(--cb-purple) 0 6px, transparent 7px),
    radial-gradient(circle at 50% 50%, var(--cb-lime) 0 3px, transparent 4px);
  opacity: 0.10;
}
.foundations-band > .page-wrap { position: relative; z-index: 1; }
.foundations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.formula-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-lg); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.formula-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(46,46,46,0.10); border-color: var(--cb-coral); }
.formula-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cb-coral); }
.formula-card.f-attn::before  { background: linear-gradient(90deg, var(--cb-coral), var(--cb-yellow)); }
.formula-card.f-embed::before { background: linear-gradient(90deg, var(--cb-teal), var(--cb-lime)); }
.formula-card.f-bm25::before  { background: linear-gradient(90deg, var(--cb-yellow), var(--cb-coral)); }
.formula-card.f-rrf::before   { background: linear-gradient(90deg, var(--cb-purple), var(--cb-pink)); }
.formula-card.f-mmr::before   { background: linear-gradient(90deg, var(--cb-lime), var(--cb-teal)); }
.formula-card.f-lora::before  { background: linear-gradient(90deg, var(--cb-pink), var(--cb-purple)); }
.formula-card.f-dpo::before   { background: linear-gradient(90deg, var(--cb-coral), var(--cb-pink)); }
.formula-card.f-faith::before { background: linear-gradient(90deg, var(--cb-teal), var(--cb-purple)); }
.formula-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-sm); }
.formula-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); }
.formula-cat { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-coral); padding: 3px 9px; border: 1px solid var(--cb-coral); border-radius: 999px; }
.formula-card.f-embed .formula-cat,
.formula-card.f-mmr .formula-cat { color: var(--cb-teal); border-color: var(--cb-teal); }
.formula-card.f-rrf .formula-cat,
.formula-card.f-lora .formula-cat { color: var(--cb-purple); border-color: var(--cb-purple); }
.formula-card.f-bm25 .formula-cat { color: var(--warning); border-color: var(--warning); }
.formula-card.f-faith .formula-cat { color: var(--cb-pink); border-color: var(--cb-pink); }
.formula-card h3 { font-size: 15.5px; font-weight: 800; color: var(--on-dark); margin-bottom: var(--sp-md); letter-spacing: -0.25px; line-height: 1.3; text-transform: none; }
.formula-math { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--sp-md); margin-bottom: var(--sp-md); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 2.0; color: var(--on-dark); overflow-x: auto; letter-spacing: 0; min-height: 88px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; word-break: break-word; }
.formula-math em { color: var(--cb-coral); font-style: normal; font-weight: 700; }
.formula-math sup { vertical-align: 0.42em;  font-size: 0.72em; line-height: 1; }
.formula-math sub { vertical-align: -0.28em; font-size: 0.72em; line-height: 1; }
.formula-math .sm { font-size: 10.5px; color: var(--body); display: block; margin-top: 4px; line-height: 1.8; }
.formula-math .row { display: block; }
.formula-card p { font-size: 12.5px; font-weight: 400; color: var(--body); line-height: 1.6; margin-bottom: var(--sp-md); flex: 1; }
.formula-tags { display: flex; flex-wrap: wrap; gap: 4px; padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); }
.formula-tags span { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--body-strong); background: var(--surface-soft); border: 1px solid var(--hairline); padding: 3px 8px; border-radius: var(--r-sm); letter-spacing: 0.2px; }

/* ════════════════════════════════════════
   CASE STUDIES — categorized project cards
   ════════════════════════════════════════ */
.cases-anchor-bar { background: var(--surface-card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); position: sticky; top: 72px; z-index: 50; backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }
.cases-anchor-bar .page-wrap { display: flex; align-items: center; gap: var(--sp-md); overflow-x: auto; padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.cases-anchor-bar a { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 8px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--body-strong); border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-soft); white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.cases-anchor-bar a:hover { border-color: var(--cb-coral); color: var(--cb-coral); }
.cases-anchor-bar a .ct { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; color: var(--muted); padding: 2px 6px; background: var(--surface-card); border-radius: var(--r-sm); }

.case-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.case-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(46,46,46,0.08); border-color: var(--cb-coral); }
.case-meta { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: 2px; flex-wrap: wrap; }
.case-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--cb-coral); }
.case-client { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--body-strong); padding: 3px 9px; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: 999px; text-transform: none; }
.case-card h4 { font-size: 15px; font-weight: 800; color: var(--on-dark); line-height: 1.3; letter-spacing: -0.25px; margin: 0; }
.case-card p { font-size: 12.5px; font-weight: 400; color: var(--body); line-height: 1.55; flex: 1; margin: 0; }
.case-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-sm); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.case-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--body-strong); background: var(--surface-soft); border: 1px solid var(--hairline); padding: 3px 8px; border-radius: var(--r-sm); letter-spacing: 0.2px; }

/* per-category color accents */
.cases-cat-global    .case-code { color: var(--cb-coral); }
.cases-cat-public    .case-code { color: var(--warning); }
.cases-cat-research  .case-code { color: var(--cb-teal); }
.cases-cat-healthcare .case-code { color: var(--cb-pink); }
.cases-cat-enterprise .case-code { color: var(--cb-purple); }
.cases-cat-global    .catalog-num { color: var(--cb-coral); }
.cases-cat-public    .catalog-num { color: var(--warning); }
.cases-cat-research  .catalog-num { color: var(--cb-teal); }
.cases-cat-healthcare .catalog-num { color: var(--cb-pink); }
.cases-cat-enterprise .catalog-num { color: var(--cb-purple); }
.cases-cat-global    .case-card:hover { border-color: var(--cb-coral); }
.cases-cat-public    .case-card:hover { border-color: var(--warning); }
.cases-cat-research  .case-card:hover { border-color: var(--cb-teal); }
.cases-cat-healthcare .case-card:hover { border-color: var(--cb-pink); }
.cases-cat-enterprise .case-card:hover { border-color: var(--cb-purple); }

/* align cases spec-band colors with category accents */
.cases-spec .spec-cell:nth-child(1) .spec-value { color: var(--cb-coral); }
.cases-spec .spec-cell:nth-child(2) .spec-value { color: var(--warning); }
.cases-spec .spec-cell:nth-child(3) .spec-value { color: var(--cb-teal); }
.cases-spec .spec-cell:nth-child(4) .spec-value { color: var(--cb-pink); }
.cases-spec .spec-cell:nth-child(5) .spec-value { color: var(--cb-purple); }

/* ════════════════════════════════════════
   SERVICES — detailed per-service sections
   ════════════════════════════════════════ */
.svc-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-xl); align-items: start; margin-top: var(--sp-lg); }
.svc-detail-main { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-xl); }
.svc-detail-main h3 { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); }
.svc-capability-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-md); }
.svc-capability-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-sm); padding-bottom: var(--sp-md); border-bottom: 1px solid var(--hairline); }
.svc-capability-list li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-capability-list .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; color: var(--cb-coral); letter-spacing: 0.8px; padding-top: 2px; }
.svc-capability-list h5 { font-size: 14px; font-weight: 800; color: var(--on-dark); margin-bottom: 4px; letter-spacing: -0.2px; text-transform: none; }
.svc-capability-list p { font-size: 12.5px; font-weight: 400; color: var(--body); line-height: 1.6; margin: 0; }

.svc-side { display: flex; flex-direction: column; gap: var(--sp-md); }
.svc-side-card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-lg); }
.svc-side-card h4 { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: var(--sp-md); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--hairline); }
.svc-stack-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.svc-stack-tags span { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--body-strong); background: var(--surface-soft); border: 1px solid var(--hairline); padding: 5px 10px; border-radius: var(--r-sm); letter-spacing: 0.2px; }
.svc-ref { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-sm) 0; border-bottom: 1px solid var(--hairline); }
.svc-ref:last-child { border-bottom: none; padding-bottom: 0; }
.svc-ref-client { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--cb-coral); }
.svc-ref-name { font-size: 13px; font-weight: 600; color: var(--on-dark); letter-spacing: -0.1px; }

/* per-service color accents */
.svc-rag    .svc-detail-main h3,   .svc-rag    .svc-side-card h4,
.svc-rag    .svc-capability-list .num, .svc-rag .svc-ref-client { color: var(--cb-coral); }
.svc-llmops .svc-detail-main h3,   .svc-llmops .svc-side-card h4,
.svc-llmops .svc-capability-list .num, .svc-llmops .svc-ref-client { color: var(--warning); }
.svc-bigdata .svc-detail-main h3,  .svc-bigdata .svc-side-card h4,
.svc-bigdata .svc-capability-list .num, .svc-bigdata .svc-ref-client { color: var(--cb-teal); }
.svc-cloud  .svc-detail-main h3,   .svc-cloud  .svc-side-card h4,
.svc-cloud  .svc-capability-list .num, .svc-cloud  .svc-ref-client { color: var(--cb-purple); }

/* ════════════════════════════════════════
   CONCEPT BAND — scattered puzzle → bulb animation
   ════════════════════════════════════════ */
.concept-band { background: var(--canvas); padding: var(--sp-section) 0; border-bottom: 1px solid var(--hairline); }
.concept-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-xxl); align-items: center; }
.concept-text .section-eyebrow { color: var(--cb-coral); margin-bottom: var(--sp-md); }
.concept-text h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: -0.6px; color: var(--on-dark); margin-bottom: var(--sp-md); text-transform: none; }
.concept-text h2 .accent { background: linear-gradient(90deg, var(--cb-coral), var(--cb-yellow) 50%, var(--cb-teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.concept-text p { font-size: 16px; line-height: 1.75; color: var(--body); margin-bottom: var(--sp-lg); max-width: 560px; }
.concept-flow { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; margin-top: var(--sp-md); }
.concept-flow span { padding: 7px 15px; border: 1px solid var(--c, var(--hairline)); color: var(--c, var(--body-strong)); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.4px; background: var(--surface-soft); }
.concept-flow .arrow { background: none; border: none; color: var(--cb-coral); font-weight: 800; font-size: 18px; padding: 0 4px; }
.concept-flow .result { background: var(--on-dark); color: #fff; border-color: var(--on-dark); }

.concept-visual { display: flex; justify-content: center; align-items: center; min-height: 360px; position: relative; }
.concept-visual::before {
  content: ""; position: absolute; inset: -8% 0; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(242,201,76,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.puzzle-svg { display: block; aspect-ratio: 1; width: 100%; height: 100%; }
.puzzle-piece { transform-box: fill-box; transform-origin: center; animation: puzzleForm 10s ease-in-out infinite both; animation-delay: var(--delay, 0s); }
@keyframes puzzleForm {
  0%, 8% {
    transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--tr, 0deg));
    opacity: 0.62;
  }
  40%, 62% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--tr, 0deg));
    opacity: 0.62;
  }
}
@media (prefers-reduced-motion: reduce) {
  .puzzle-piece { animation: none; opacity: 1; transform: none; }
}

/* services spec colors */
.svc-spec .spec-cell:nth-child(1) .spec-value { color: var(--cb-coral); }
.svc-spec .spec-cell:nth-child(2) .spec-value { color: var(--warning); }
.svc-spec .spec-cell:nth-child(3) .spec-value { color: var(--cb-teal); }
.svc-spec .spec-cell:nth-child(4) .spec-value { color: var(--cb-purple); }

/* engagement process timeline */
.svc-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-sm); position: relative; margin-top: var(--sp-xl); }
.svc-process::before { content: ""; position: absolute; left: 32px; right: 32px; top: 28px; height: 2px; background: linear-gradient(to right, var(--cb-coral), var(--warning), var(--cb-lime), var(--cb-teal), var(--cb-purple)); border-radius: 2px; z-index: 0; }
.svc-step { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-lg); position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; transition: transform 0.18s, box-shadow 0.18s; }
.svc-step:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(46,46,46,0.08); }
.svc-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; color: #ffffff; letter-spacing: 0.4px; margin-bottom: var(--sp-sm); }
.svc-step:nth-child(1) .svc-step-num { background: var(--cb-coral); }
.svc-step:nth-child(2) .svc-step-num { background: var(--warning); }
.svc-step:nth-child(3) .svc-step-num { background: var(--cb-lime); color: var(--on-dark); }
.svc-step:nth-child(4) .svc-step-num { background: var(--cb-teal); }
.svc-step:nth-child(5) .svc-step-num { background: var(--cb-purple); }
.svc-step h4 { font-size: 15px; font-weight: 800; color: var(--on-dark); letter-spacing: -0.2px; line-height: 1.3; }
.svc-step p { font-size: 12px; font-weight: 400; color: var(--body); line-height: 1.55; margin: 0; }

/* ════════════════════════════════════════
   CASE HIGHLIGHT — featured project (wide card)
   ════════════════════════════════════════ */
.case-highlight { display: grid; grid-template-columns: 340px 1fr; gap: 0; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 16px 40px rgba(46,46,46,0.10); margin-bottom: var(--sp-xl); }
.case-highlight-visual { position: relative; background: var(--dark-canvas); padding: var(--sp-xl); display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; color: var(--dark-fg); overflow: hidden; }
.case-highlight-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 86% 14%, var(--cb-yellow) 0 10px, transparent 11px),
    radial-gradient(circle at 14% 88%, var(--cb-coral) 0 14px, transparent 15px),
    radial-gradient(circle at 80% 78%, var(--cb-teal)  0 8px,  transparent 9px),
    radial-gradient(circle at 24% 22%, var(--cb-purple) 0 6px, transparent 7px);
  opacity: 0.55;
}
.case-highlight-visual::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(to right, #006633 0 50%, #FFFFFF 50% 100%);
}
.case-highlight-visual > * { position: relative; z-index: 1; }
.case-highlight-region { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cb-yellow); }
.case-highlight-flag { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--dark-fg-soft); letter-spacing: 0.4px; margin-top: 6px; }
.case-highlight-name { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.8px; color: var(--dark-fg); margin: var(--sp-md) 0; }
.case-highlight-name .accent { color: var(--cb-coral); }
.case-highlight-period { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--cb-yellow); padding: 6px 12px; border: 1px solid var(--cb-yellow); border-radius: 999px; align-self: flex-start; }
.case-highlight-period .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--cb-yellow); }

.case-highlight-body { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-md); }
.case-highlight-meta { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.case-highlight-meta .case-client { background: var(--surface-soft); padding: 4px 12px; font-size: 11px; }
.case-highlight-body h3 { font-size: 24px; font-weight: 800; color: var(--on-dark); line-height: 1.2; letter-spacing: -0.4px; text-transform: none; margin: 0; }
.case-highlight-lead { font-size: 14.5px; font-weight: 400; color: var(--body); line-height: 1.75; margin: 0; padding-bottom: var(--sp-md); border-bottom: 1px solid var(--hairline); }
.case-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md) var(--sp-lg); }
.case-detail { padding-left: var(--sp-md); border-left: 3px solid var(--cb-coral); }
.case-detail-label { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cb-coral); margin-bottom: 4px; }
.case-detail p { font-size: 12.5px; font-weight: 400; color: var(--body); line-height: 1.65; margin: 0; }
.case-highlight-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-sm); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
.case-highlight-tags .case-tag { padding: 4px 10px; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat { border-right: none; padding-left: 0; padding-right: 0; }
  .spec-row, .spec-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .tech-grid, .tech-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-grid, .diff-grid.cols-4 { grid-template-columns: 1fr; }
  .partners-summary { grid-template-columns: repeat(2, 1fr); }
  .cert-stats { grid-template-columns: repeat(4, 1fr); }
  .foundations-grid { grid-template-columns: repeat(2, 1fr); }
  .case-highlight { grid-template-columns: 1fr; }
  .case-highlight-visual { min-height: 240px; }
  .case-detail-grid { grid-template-columns: 1fr; }
  .svc-detail-grid { grid-template-columns: 1fr; }
  .svc-process { grid-template-columns: repeat(2, 1fr); }
  .svc-process::before { display: none; }
  .concept-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .customer-grid, .customer-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
  .expertise-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .cert-image-grid { grid-template-columns: 1fr; }
  .catalog-grid, .catalog-grid.cols-6, .catalog-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .package-grid { grid-template-columns: 1fr; }
  .catalog-header { grid-template-columns: 1fr; gap: var(--sp-md); }
  .project-row { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .timeline-year { grid-template-columns: 1fr; gap: var(--sp-md); }
  .timeline-year-marker { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-band::after { display: none; }
}
@media (max-width: 640px) {
  :root { --sp-section: 64px; --sp-xxl: 40px; --sp-xl: 24px; }
  /* narrow-width nav fit (logo + actions don't overflow) */
  .top-nav .page-wrap { gap: var(--sp-sm); }
  .nav-actions { gap: var(--sp-sm); }
  .nav-actions .icon-btn { display: none; }
  .lang-group { gap: 4px; }
  .lang-group button { padding: 0 2px; }
  /* grid items may shrink below content min-width (prevents column overflow) */
  .partners-summary > *, .cert-stats > *, .catalog-grid > *, .tech-grid > * { min-width: 0; }
  .hero-band { min-height: 560px; }
  .hero-content { padding-top: 80px; }
  .hero-band h1, .sub-hero h1 { font-size: 36px !important; letter-spacing: -0.5px !important; line-height: 1.1 !important; }
  .display-xl { font-size: 44px; }
  .display-lg { font-size: 32px; }
  .spec-row { grid-template-columns: 1fr 1fr; }
  .tech-grid, .solutions-grid { grid-template-columns: 1fr; }
  .partners-summary { grid-template-columns: 1fr; }
  .cert-stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-xs); }
  .cert-stat { padding: var(--sp-md); }
  .cert-stat-value { font-size: 28px; }
  .cert-stat-label { font-size: 9.5px; letter-spacing: 0.6px; }
  .foundations-grid { grid-template-columns: 1fr; }
  .rag-layer { grid-template-columns: 32px 1fr 70px; }
  .customer-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .catalog-grid, .catalog-grid.cols-2, .catalog-grid.cols-3, .catalog-grid.cols-4, .catalog-grid.cols-6 { grid-template-columns: 1fr; }
}

/* ── Product-UI tone hero background (서비스 히어로의 스톡 사진 대체) ── */
.sub-hero .hero-photo.hero-screen,
.hero-band .hero-photo.hero-screen {
  opacity: 1; mix-blend-mode: normal;
  background:
    radial-gradient(900px 440px at 10% -14%, rgba(244,123,123,0.20), transparent 58%),
    radial-gradient(820px 440px at 94% 2%, rgba(90,134,120,0.22), transparent 58%),
    radial-gradient(720px 520px at 62% 124%, rgba(167,139,202,0.13), transparent 60%),
    linear-gradient(180deg, #242424 0%, #2b2b2b 55%, #2e2e2e 100%);
}
.hero-photo.hero-screen::after {
  background: linear-gradient(180deg, rgba(46,46,46,0.28) 0%, rgba(46,46,46,0.52) 68%, rgba(46,46,46,0.9) 100%);
}
.hero-photo.hero-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 95% at 82% 8%, #000 0%, transparent 72%);
  mask-image: radial-gradient(130% 95% at 82% 8%, #000 0%, transparent 72%);
}