/* =====================================================================
   CODENA — The Operating System for AI-Powered Organizations
   Design System / Base Stylesheet
   ---------------------------------------------------------------------
   Section-specific styles are appended below the SECTION STYLES marker
   by the build process. Everything reusable lives here.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. DESIGN TOKENS                                                   */
/* ------------------------------------------------------------------ */
:root {
  /* --- Surfaces / background layers (soft light, not glaring) */
  --bg:            #E7EBF2;
  --bg-alt:        #DFE4EE;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFFAA;
  --surface-solid: #FFFFFF;
  --surface-3:     #EDF0F6;
  --elevated:      #FFFFFF;

  /* --- Lines & strokes (dark hairlines on light surfaces) */
  --line:    rgba(17,24,39,0.11);
  --line-2:  rgba(17,24,39,0.18);
  --line-3:  rgba(17,24,39,0.28);

  /* --- Text (dark on light) */
  --text:    #141B2B;
  --text-2:  #46526B;
  --text-3:  #6A7488;
  --text-on-brand: #FFFFFF;

  /* --- Brand palette */
  --brand:    #7C5CFF;   /* violet (darkened for light theme contrast) */
  --brand-2:  #4A7FE8;   /* blue   */
  --cyan:     #1296AC;
  --emerald:  #0FA877;
  --amber:    #C9821C;
  --rose:     #E0466F;

  --brand-rgb:  124,92,255;
  --brand2-rgb: 74,127,232;
  --cyan-rgb:   18,150,172;
  --emerald-rgb:15,168,119;

  /* --- Gradients */
  --grad-brand:  linear-gradient(120deg, #7C5CFF 0%, #4A7FE8 52%, #1FA9C0 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(124,92,255,.12), rgba(18,150,172,.08));
  --grad-line:   linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.45), transparent);
  --grad-text:   linear-gradient(110deg, #6D4BFF 0%, #4A7FE8 52%, #119AB0 100%);
  --grad-panel:  linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));

  /* --- Glows (subtle tints on light surfaces) */
  --glow-brand: radial-gradient(closest-side, rgba(var(--brand-rgb),.18), transparent 70%);
  --glow-cyan:  radial-gradient(closest-side, rgba(var(--cyan-rgb),.14),  transparent 70%);

  /* --- Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl:38px;
  --r-pill: 999px;

  /* --- Shadows (soft, light-theme) */
  --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow:    0 14px 40px -18px rgba(16,24,40,.20);
  --shadow-lg: 0 34px 80px -36px rgba(16,24,40,.28);
  --shadow-brand: 0 22px 60px -28px rgba(var(--brand-rgb),.40);
  --ring:      0 0 0 1px var(--line-2);

  /* --- Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-sm:   0.92rem;
  --fs-base: 1.02rem;
  --fs-lg:   1.18rem;
  --fs-xl:   clamp(1.25rem, 0.9rem + 1.1vw, 1.6rem);
  --fs-h3:   clamp(1.4rem, 1rem + 1.5vw, 2rem);
  --fs-h2:   clamp(2.05rem, 1.3rem + 2.9vw, 3.5rem);
  --fs-h1:   clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  --fs-display: clamp(3rem, 1.4rem + 6vw, 6.2rem);

  /* --- Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-pad: clamp(72px, 9vw, 140px);

  /* --- Motion */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .2s;
  --t:      .42s;
  --t-slow: .8s;

  --z-nav: 100;
  --z-overlay: 200;
}

/* ------------------------------------------------------------------ */
/*  2. RESET / BASE                                                    */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv01","cv11";
  overflow-x: hidden;
  position: relative;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
strong, b { font-weight: 600; color: var(--text); }

::selection { background: rgba(var(--brand-rgb),.22); color: var(--text); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #c2cad8; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #aab4c6; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/*  3. GLOBAL BACKDROP (aurora + grid)                                 */
/* ------------------------------------------------------------------ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.backdrop::before { /* faint grid */
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
}
.backdrop__aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .34;
}
.backdrop__aurora--1 { top: -240px; left: 50%; width: 900px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb),.34), transparent 70%); }
.backdrop__aurora--2 { top: 8%; right: -180px; width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb),.18), transparent 70%); }
.backdrop__aurora--3 { top: 40%; left: -200px; width: 560px; height: 560px;
  background: radial-gradient(closest-side, rgba(var(--brand2-rgb),.16), transparent 70%); }

/* ------------------------------------------------------------------ */
/*  4. LAYOUT PRIMITIVES                                               */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 880px; }

.section {
  position: relative;
  padding-block: var(--section-pad);
}
/* alt sections fade in/out at the edges so they never hard-cut against
   the body background between sections */
.section--alt { background:
  linear-gradient(180deg,
    transparent 0%,
    var(--bg-alt) 9%,
    var(--bg-alt) 91%,
    transparent 100%); }
.section--hairline { border-top: 1px solid var(--line); }

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ------------------------------------------------------------------ */
/*  5. TYPOGRAPHY HELPERS                                              */
/* ------------------------------------------------------------------ */
h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(var(--brand-rgb),.8);
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-title { font-size: var(--fs-h2); margin-top: 18px; }
.section-sub {
  margin-top: 20px;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 60ch;
}
.section-head--center .section-sub { margin-inline: auto; }

.lead { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.6; }
.muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }

/* ------------------------------------------------------------------ */
/*  6. BUTTONS                                                         */
/* ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad-brand);
  color: var(--text-on-brand);
  font-weight: 700;
  box-shadow: 0 12px 34px -14px rgba(var(--brand-rgb),.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover { box-shadow: 0 18px 50px -14px rgba(var(--brand-rgb),.95), inset 0 1px 0 rgba(255,255,255,.45); }

.btn--secondary {
  background: var(--surface);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover { background: var(--surface-3); border-color: var(--line-3); }

.btn--ghost { background: transparent; color: var(--text-2); padding-inline: 12px; }
.btn--ghost:hover { color: var(--text); transform: none; }

.btn--lg { padding: 17px 28px; font-size: 1.02rem; }
.btn--sm { padding: 10px 16px; font-size: 0.88rem; }

/* ------------------------------------------------------------------ */
/*  7. TAGS / BADGES / PILLS                                           */
/* ------------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(17,24,39,.03);
}
.pill--brand { color: var(--brand); border-color: rgba(var(--brand-rgb),.35); background: rgba(var(--brand-rgb),.08); }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
  padding: 5px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/*  8. CARDS                                                           */
/* ------------------------------------------------------------------ */
.card {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(var(--brand-rgb),.055), transparent 52%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(16,24,40,.05),
    0 14px 30px -22px rgba(16,24,40,.22);
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card--hover:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-rgb),.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 22px 46px -24px rgba(var(--brand-rgb),.38),
    0 10px 22px -18px rgba(16,24,40,.20);
}
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(var(--brand-rgb),.12);
  border: 1px solid rgba(var(--brand-rgb),.25);
  color: var(--brand);
  margin-bottom: 18px;
}
.card__icon svg { width: 22px; height: 22px; }
.card__title { font-size: var(--fs-xl); margin-bottom: 10px; }
.card__desc { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

/* a subtle top hairline highlight that many cards share */
.card--glow::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--grad-line);
  opacity: .6;
}

/* ------------------------------------------------------------------ */
/*  9. METRICS                                                         */
/* ------------------------------------------------------------------ */
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.12;          /* room so background-clip:text doesn't crop glyph tops/descenders */
  padding-block: 0.04em;
  letter-spacing: -0.03em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric__label { color: var(--text-2); font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ */
/* 10. DECORATIVE                                                      */
/* ------------------------------------------------------------------ */
.divider { height: 1px; background: var(--line); border: 0; }
.divider--glow { background: var(--grad-line); }

.glow-spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.flow-arrow { color: var(--text-3); display: inline-flex; }
.flow-arrow svg { width: 26px; height: 26px; }

/* generic node-chip used in diagrams */
.node-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface-solid); border: 1px solid var(--line-2);
  font-size: 0.86rem; font-weight: 500; color: var(--text);
  box-shadow: var(--shadow-sm);
}
.node-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); }

/* ------------------------------------------------------------------ */
/* 11. SCROLL REVEAL                                                   */
/* ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: translateY(20px) scale(.97); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------------ */
/* 12. NAVIGATION                                                      */
/* ------------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--line);
}
.nav__inner {
  height: 72px;
  display: flex; align-items: center; gap: 28px;
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.02em; }
.nav__mark { width: 30px; height: 30px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav__link {
  position: relative;
  padding: 9px 14px;
  font-size: 0.94rem; font-weight: 500; color: var(--text-2);
  border-radius: var(--r-xs);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--text); background: rgba(17,24,39,.05); }
.nav__link.is-active { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-xs); align-items: center; justify-content: center; }
.nav__toggle span { position: relative; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--t-fast); }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--t-fast); }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .nav__links, .nav__actions .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__actions { margin-left: auto; }
  .nav__mobile {
    position: fixed; inset: 72px 0 auto 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 18px var(--gutter) 28px;
    display: flex; flex-direction: column; gap: 4px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: var(--t) var(--ease);
  }
  body.nav-open .nav__mobile { transform: none; opacity: 1; pointer-events: auto; }
  .nav__mobile a { padding: 14px 8px; font-size: 1.05rem; color: var(--text-2); border-bottom: 1px solid var(--line); }
  .nav__mobile a:last-of-type { border-bottom: 0; }
  .nav__mobile .btn { margin-top: 14px; }
}
.nav__mobile { display: none; }
@media (max-width: 980px) { .nav__mobile { display: flex; } }

/* ------------------------------------------------------------------ */
/* 13. HERO                                                            */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-top: clamp(130px, 16vh, 190px);
  padding-bottom: clamp(70px, 9vw, 120px);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 26px; }
.hero__title {
  font-size: var(--fs-h1);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.hero__title .gradient-text { display: inline; }
.hero__sub {
  margin-top: 26px;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  color: var(--text-2);
  max-width: 36ch;
  line-height: 1.55;
}
.hero__actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__trust { margin-top: 46px; }
.hero__trust-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.hero__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; opacity: .72; }
.hero__logos span { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-2); letter-spacing: -0.01em; }

/* --- hero visual: live operations console --- */
.hero__visual { position: relative; }
.hero__visual-glow {
  position: absolute; inset: 4% 2% 8% 2%;
  background:
    radial-gradient(closest-side at 30% 35%, rgba(var(--brand-rgb),.42), transparent 70%),
    radial-gradient(closest-side at 75% 70%, rgba(var(--cyan-rgb),.30), transparent 72%);
  filter: blur(26px);
  opacity: .75;
  animation: breathe 7s var(--ease) infinite;
}

/* window */
.os {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  border: 1px solid var(--line-3);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--line),
    0 30px 70px -40px rgba(var(--brand-rgb),.35);
  overflow: hidden;
  animation: floaty 7s ease-in-out infinite;
}
.os::before { /* top accent hairline */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.55), rgba(var(--cyan-rgb),.5), transparent);
}

/* title bar */
.os__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-3);
}
.os__dots { display: inline-flex; gap: 7px; }
.os__dots i { width: 10px; height: 10px; border-radius: 50%; background: #cdd3df; }
.os__dots i:nth-child(1){ background:#f7647e; } .os__dots i:nth-child(2){ background:#f6b45a; } .os__dots i:nth-child(3){ background:#37d9a6; }
.os__crumb { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os__crumb strong { color: var(--text-2); font-weight: 600; }
.os__crumb-sep { color: var(--line-3); margin: 0 2px; }
.os__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(var(--emerald-rgb),.10); border: 1px solid rgba(var(--emerald-rgb),.28);
}
.os__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(var(--emerald-rgb),.6); animation: ping 2s ease-out infinite; }

/* body layout */
.os__body { display: grid; grid-template-columns: 56px 1fr; }
.os__rail {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 18px 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.os__rail-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--grad-brand); box-shadow: 0 6px 16px -6px rgba(var(--brand-rgb),.9); margin-bottom: 4px; }
.os__rail-item { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); }
.os__rail-item svg { width: 18px; height: 18px; }
.os__rail-item.is-active { color: var(--brand); background: rgba(var(--brand-rgb),.14); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.30); }

/* main */
.os__main { padding: clamp(16px, 2.4vw, 24px); display: flex; flex-direction: column; gap: 16px; }
.os__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.os__kicker { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; color: var(--brand); }
.os__h { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, .85rem + .5vw, 1.22rem); letter-spacing: -0.02em; color: var(--text); }
.os__chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.os__chip--run { color: var(--cyan); background: rgba(var(--cyan-rgb),.10); border: 1px solid rgba(var(--cyan-rgb),.30); }
.os__chip--run i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: blink 1.4s ease-in-out infinite; }

/* steps */
.os__steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.os__step {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
}
.os__step + .os__step::before { /* connector line */
  content: ""; position: absolute; left: 28px; top: -11px; width: 1px; height: 11px;
  background: linear-gradient(var(--line-3), transparent);
}
.os__step-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--text-3); }
.os__step-ico svg { width: 15px; height: 15px; }
.os__step-name { display: block; font-weight: 500; font-size: .92rem; color: var(--text-2); letter-spacing: -0.01em; }
.os__step-meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); }
.os__step-tag { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); }

.os__step.is-done { background: rgba(var(--emerald-rgb),.05); border-color: rgba(var(--emerald-rgb),.18); }
.os__step.is-done .os__step-ico { color: var(--emerald); border-color: rgba(var(--emerald-rgb),.40); background: rgba(var(--emerald-rgb),.12); }
.os__step.is-done .os__step-name { color: var(--text); }

.os__step.is-active {
  background:
    linear-gradient(rgba(var(--brand-rgb),.10), rgba(var(--brand-rgb),.04)),
    var(--surface-solid);
  border-color: rgba(var(--brand-rgb),.45);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb),.18), 0 14px 34px -22px rgba(var(--brand-rgb),.9);
}
.os__step.is-active .os__step-name { color: var(--text); }
.os__step.is-active .os__step-ico { border-color: rgba(var(--brand-rgb),.5); }
.os__step-tag--live { color: var(--brand); font-weight: 600; }
.os__spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(var(--brand-rgb),.25); border-top-color: var(--brand); animation: spin .9s linear infinite; }

/* footer */
.os__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.os__badge { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-2); }
.os__badge svg { width: 17px; height: 17px; color: var(--emerald); }
.os__metric { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }
.os__metric b { color: var(--text); font-weight: 600; }

@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100%{ transform: scale(1); opacity:.6 } 50%{ transform: scale(1.06); opacity:.85 } }
@keyframes ping { 0%{ box-shadow: 0 0 0 0 rgba(var(--emerald-rgb),.55) } 70%,100%{ box-shadow: 0 0 0 7px rgba(var(--emerald-rgb),0) } }
@keyframes blink { 0%,100%{ opacity: 1 } 50%{ opacity: .35 } }

@media (prefers-reduced-motion: reduce) {
  .os, .os__live i, .os__chip--run i, .os__spin, .hero__visual-glow { animation: none; }
  .os__spin { border-top-color: var(--brand); }
}

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__sub { max-width: 52ch; }
  .hero__visual { max-width: 560px; margin-inline: auto; margin-top: 12px; }
}

/* ------------------------------------------------------------------ */
/* 14. FOOTER                                                          */
/* ------------------------------------------------------------------ */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.01), var(--bg) 40%);
  padding-block: clamp(56px, 7vw, 84px) 40px;
}
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 24px; }
.footer__brand { max-width: 320px; }
.footer__brandrow { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 18px; }
.footer__tagline { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.footer__col h4 { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 16px; }
.footer__col a { display: block; color: var(--text-2); font-size: 0.94rem; padding: 6px 0; transition: color var(--t-fast); }
.footer__col a:hover { color: var(--text); }
.footer__bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.footer__copy { color: var(--text-3); font-size: 0.86rem; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); color: var(--text-2); transition: var(--t-fast); }
.footer__social a:hover { color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,.04); }
.footer__social svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* 15. SHARED RESPONSIVE GRID FALLBACKS                                */
/* ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.relative { position: relative; }
.mono { font-family: var(--font-mono); }

/* =====================================================================
   @@SECTION-STYLES@@
   Section-specific CSS is appended below this line by the build step,
   in section order. Do not remove this marker.
   ===================================================================== */

/* ===== SECTION: problem ===== */
/* =====================================================================
   SECTION: The Problem  —  prefix s-problem__
   Side-by-side comparison: Traditional AI Tools vs Codena
   ===================================================================== */

.s-problem { overflow: hidden; }

/* ambient brand glow behind the Codena column */
.s-problem__glow {
  position: absolute;
  top: 50%;
  right: clamp(-220px, -8vw, -80px);
  width: clamp(360px, 42vw, 620px);
  height: clamp(360px, 42vw, 620px);
  transform: translateY(-50%);
  background: var(--glow-brand);
  filter: blur(40px);
  opacity: .42;
  pointer-events: none;
  z-index: 0;
}

.s-problem .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/*  Comparison layout                                                  */
/* ------------------------------------------------------------------ */
.s-problem__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
}

.s-problem__col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--grad-panel), var(--surface);
  transition: transform var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

/* LEFT — Traditional, intentionally quiet */
.s-problem__col--muted {
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)), var(--bg-alt);
  border-color: var(--line);
}

/* RIGHT — Codena, elevated with gradient border + glow */
.s-problem__col--codena {
  background: var(--grad-panel), var(--surface-solid);
  box-shadow: var(--shadow-brand), var(--shadow);
}
.s-problem__col--codena:hover { transform: translateY(-4px); }

/* gradient hairline border via mask (sits above bg, below content) */
.s-problem__col-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(var(--brand-rgb), .65) 0%,
    rgba(var(--brand2-rgb), .35) 45%,
    rgba(var(--cyan-rgb), .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* soft inner top sheen on Codena card */
.s-problem__col--codena::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--grad-line);
  opacity: .7;
}

/* ------------------------------------------------------------------ */
/*  Column headers                                                     */
/* ------------------------------------------------------------------ */
.s-problem__col-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: clamp(18px, 2vw, 24px);
  margin-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}
.s-problem__col--codena .s-problem__col-head { border-bottom-color: var(--line-2); }

.s-problem__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--text-3);
}
.s-problem__tag--brand { color: var(--text); }
.s-problem__tag-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 14px rgba(var(--brand-rgb), .9);
}

.s-problem__col-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.s-problem__col-note--brand { color: var(--brand); }

/* ------------------------------------------------------------------ */
/*  Lists                                                              */
/* ------------------------------------------------------------------ */
.s-problem__list {
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 1.4vw, 17px);
}
.s-problem__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-base);
  line-height: 1.4;
}

.s-problem__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

/* LEFT — dim dash marker, classy not negative */
.s-problem__mark--dim {
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.s-problem__mark--dim::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.5px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: var(--text-3);
  opacity: .65;
}

/* RIGHT — refined gradient affirm mark */
.s-problem__mark--affirm {
  border: 1px solid rgba(var(--brand-rgb), .28);
  background: rgba(var(--brand-rgb), .10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.s-problem__mark--affirm svg { width: 14px; height: 14px; }

.s-problem__label { color: var(--text-2); }
.s-problem__col--muted .s-problem__label { color: var(--text-3); }
.s-problem__col--codena .s-problem__label { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------------ */
/*  Center bridge (desktop directional cue)                            */
/* ------------------------------------------------------------------ */
.s-problem__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-inline: clamp(2px, 0.6vw, 8px);
}
.s-problem__bridge-line {
  width: 1px;
  flex: 1 1 auto;
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}
.s-problem__bridge-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--brand);
  background: var(--surface-solid);
  border: 1px solid rgba(var(--brand-rgb), .30);
  box-shadow: var(--shadow-sm), 0 0 26px -6px rgba(var(--brand-rgb), .5);
}
.s-problem__bridge-chip svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ */
/*  Key-message banner                                                 */
/* ------------------------------------------------------------------ */
.s-problem__banner {
  position: relative;
  margin-top: clamp(36px, 5vw, 60px);
  padding: clamp(30px, 4vw, 48px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    var(--grad-brand-soft),
    var(--grad-panel),
    var(--surface);
  text-align: center;
  overflow: hidden;
}
.s-problem__banner-line {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--grad-line);
}
.s-problem__banner-text {
  margin-inline: auto;
  max-width: 28ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.s-problem__banner-text .brand-text { font-weight: 600; }

/* ------------------------------------------------------------------ */
/*  Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 820px) {
  .s-problem__compare {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 22px);
  }
  /* Codena card first on mobile */
  .s-problem__col--codena { order: 1; }
  .s-problem__bridge      { order: 2; flex-direction: row; padding-block: 2px; }
  .s-problem__col--muted  { order: 3; }

  .s-problem__bridge-line { width: auto; height: 1px; flex: 1 1 auto;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
  .s-problem__bridge-chip { transform: rotate(90deg); width: 42px; height: 42px; }
  .s-problem__bridge-chip svg { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  .s-problem__glow { opacity: .3; }
}

/* ===== SECTION: build ===== */
/* =====================================================================
   SECTION — BUILD  |  "Create Business Systems at the Speed of Thought"
   Prompt → Operational System. All rules namespaced .s-build__
   ===================================================================== */

.s-build { overflow: hidden; }

/* ambient glows behind the visual */
.s-build__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.s-build__glow--a {
  top: -8%; right: -6%;
  width: clamp(320px, 38vw, 620px); height: clamp(320px, 38vw, 620px);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .22), transparent 70%);
}
.s-build__glow--b {
  bottom: -14%; right: 6%;
  width: clamp(280px, 30vw, 520px); height: clamp(280px, 30vw, 520px);
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb), .14), transparent 70%);
}

.s-build__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

/* ------------------------------------------------------------------ */
/*  LEFT — copy + generated-artifacts list                            */
/* ------------------------------------------------------------------ */
.s-build__gen {
  margin-top: clamp(30px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s-build__gen-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.s-build__gen-row:hover {
  background: rgba(255,255,255,.025);
  border-color: var(--line);
}
.s-build__gen-icon {
  width: 40px; height: 40px;
  margin-bottom: 0;
  flex: none;
  border-radius: 11px;
}
.s-build__gen-icon svg { width: 19px; height: 19px; }
.s-build__gen-text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.s-build__gen-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.s-build__gen-desc {
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.45;
}
.s-build__actions { margin-top: clamp(28px, 3vw, 40px); gap: 18px; }

/* ------------------------------------------------------------------ */
/*  RIGHT — the hero visual                                            */
/* ------------------------------------------------------------------ */
.s-build__visual { position: relative; }
.s-build__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* --- prompt input mock --- */
.s-build__prompt {
  position: relative;
  z-index: 2;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb), .06), rgba(255,255,255,0) 60%),
    var(--surface-solid);
  box-shadow: var(--shadow), 0 0 0 1px rgba(var(--brand-rgb), .05);
  padding: clamp(18px, 2vw, 24px);
}
.s-build__prompt::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--grad-line);
  opacity: .7;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.s-build__prompt-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.s-build__prompt-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  color: var(--brand);
  background: rgba(var(--brand-rgb), .12);
  border: 1px solid rgba(var(--brand-rgb), .25);
}
.s-build__prompt-mark svg { width: 17px; height: 17px; }
.s-build__prompt-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.s-build__prompt-badge { margin-left: auto; }
.s-build__prompt-text {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.85rem + .35vw, 1.12rem);
  line-height: 1.7;
  color: var(--text);
  letter-spacing: -0.01em;
}
.s-build__hl { color: var(--brand); }
.s-build__caret {
  display: inline-block;
  width: 9px; height: 1.05em;
  margin-left: 3px;
  transform: translateY(2px);
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(var(--brand-rgb), .7);
  animation: build-caret 1.05s steps(1, end) infinite;
}
.s-build__prompt-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.s-build__chip-mini {
  font-size: 0.74rem;
  color: var(--text-3);
  padding: 5px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.s-build__generate {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.86rem; font-weight: 600;
  color: var(--text-on-brand);
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  box-shadow: 0 10px 26px -12px rgba(var(--brand-rgb), .8), inset 0 1px 0 rgba(255,255,255,.35);
}
.s-build__generate-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.9);
  animation: build-pulse 1.8s var(--ease) infinite;
}

/* --- animated flow connector --- */
.s-build__connector {
  position: relative;
  z-index: 1;
  height: clamp(56px, 7vw, 84px);
  display: flex;
  justify-content: center;
  margin: -2px 0;
}
.s-build__connector svg { width: 64px; height: 100%; overflow: visible; }
.s-build__flow-track {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 2;
  stroke-linecap: round;
}
.s-build__flow-live {
  fill: none;
  stroke: url(#build-flow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 16 60;
  filter: drop-shadow(0 0 5px rgba(var(--cyan-rgb), .55));
  animation: build-flow 1.9s linear infinite;
}
.s-build__flow-head {
  stroke: url(#build-flow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.s-build__flow-spark {
  offset-path: path('M32 4 L32 78');
  animation: build-spark 1.9s linear infinite;
}

/* --- generated operational system panel --- */
.s-build__system {
  position: relative;
  z-index: 2;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    var(--grad-panel),
    var(--surface-solid);
  box-shadow: var(--shadow-lg), var(--shadow-brand);
  padding: clamp(18px, 2vw, 24px);
  overflow: hidden;
}
.s-build__system::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--grad-line);
  opacity: .8;
}
.s-build__system::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% -40%;
  height: 70%;
  background: var(--glow-brand);
  opacity: .35;
  filter: blur(30px);
  pointer-events: none;
}
.s-build__system-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.s-build__system-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.s-build__system-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .55);
  animation: build-halo 2.6s var(--ease) infinite;
}
.s-build__system-badge {
  margin-left: auto;
  color: var(--emerald);
  border-color: rgba(var(--emerald-rgb), .35);
  background: rgba(var(--emerald-rgb), .08);
}

.s-build__artifacts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.s-build__artifact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-3);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
}
.s-build__artifact:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  background: var(--elevated);
}
.s-build__artifact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  color: var(--brand);
  background: rgba(var(--brand-rgb), .12);
  border: 1px solid rgba(var(--brand-rgb), .22);
}
.s-build__artifact-icon svg { width: 19px; height: 19px; }
.s-build__artifact-icon[data-tone="violet"]  { color: var(--brand);   background: rgba(var(--brand-rgb), .12);   border-color: rgba(var(--brand-rgb), .22); }
.s-build__artifact-icon[data-tone="blue"]     { color: var(--brand-2); background: rgba(var(--brand2-rgb), .12);  border-color: rgba(var(--brand2-rgb), .22); }
.s-build__artifact-icon[data-tone="cyan"]     { color: var(--cyan);    background: rgba(var(--cyan-rgb), .12);    border-color: rgba(var(--cyan-rgb), .22); }
.s-build__artifact-icon[data-tone="amber"]    { color: var(--amber);   background: rgba(246,180,90, .12);         border-color: rgba(246,180,90, .25); }
.s-build__artifact-icon[data-tone="emerald"]  { color: var(--emerald); background: rgba(var(--emerald-rgb), .12); border-color: rgba(var(--emerald-rgb), .22); }
.s-build__artifact-icon[data-tone="rose"]      { color: var(--rose);    background: rgba(247,113,152, .12);        border-color: rgba(247,113,152, .25); }

.s-build__artifact-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.s-build__artifact-text strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.s-build__artifact-sub {
  font-size: 0.78rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-build__artifact-check {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  color: var(--emerald);
  background: rgba(var(--emerald-rgb), .12);
  border: 1px solid rgba(var(--emerald-rgb), .3);
}
.s-build__artifact-check svg { width: 13px; height: 13px; }

.s-build__system-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--line);
}
.s-build__system-status { padding: 8px 14px; font-size: 0.82rem; }
.s-build__system-meta { margin-left: auto; font-size: 0.74rem; color: var(--text-3); }

/* ------------------------------------------------------------------ */
/*  KEYFRAMES (subtle, prefixed)                                       */
/* ------------------------------------------------------------------ */
@keyframes build-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes build-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes build-flow  { to { stroke-dashoffset: -76; } }
@keyframes build-spark { 0% { offset-distance: 0%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes build-halo  {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .5); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--brand-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .s-build__caret { opacity: 1; }
  .s-build__caret,
  .s-build__generate-dot,
  .s-build__flow-live,
  .s-build__flow-spark,
  .s-build__system-pulse { animation: none; }
  .s-build__flow-spark { opacity: 0; }
}

/* ------------------------------------------------------------------ */
/*  RESPONSIVE                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .s-build__layout { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 56px); }
  .s-build__visual { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 620px) {
  .s-build__gen-desc { display: none; }
  .s-build__gen-row { align-items: center; padding: 9px 8px; gap: 14px; }
  .s-build__artifacts { grid-template-columns: 1fr; }
  .s-build__prompt-foot { flex-wrap: wrap; }
  .s-build__system-foot { flex-wrap: wrap; }
  .s-build__system-meta { margin-left: 0; }
}
@media (max-width: 380px) {
  .s-build__generate { width: 100%; justify-content: center; margin-left: 0; }
  .s-build__prompt-foot .s-build__chip-mini { order: -1; }
}

/* ===== SECTION: govern ===== */
/* =====================================================================
   SECTION 04 — GOVERN  (flagship / largest)
   Control-plane diagram + capabilities grid + closing banner.
   All custom classes are namespaced s-govern__ ; keyframes prefixed govern-.
   ===================================================================== */

.s-govern {
  overflow: clip;
  /* extra vertical rhythm so this reads as the biggest section */
  padding-block: clamp(96px, 12vw, 188px);
}

/* ambient glows behind the control plane */
.s-govern__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.s-govern__glow--a {
  top: 14%; left: 50%;
  width: min(820px, 92vw); height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .26), transparent 72%);
}
.s-govern__glow--b {
  bottom: 8%; left: 50%;
  width: min(620px, 80vw); height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb), .14), transparent 72%);
}
.s-govern .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/*  PART A — CONTROL PLANE DIAGRAM                                      */
/* ------------------------------------------------------------------ */
.s-govern__plane {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--brand-rgb),.06), transparent 55%),
    linear-gradient(180deg, #FFFFFF, #F6F8FC);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.s-govern__plane::before { /* top accent — clipped to the rounded corners */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand);
  opacity: .85;
}
/* ---- governance flow (light, clean: no traveling dots / dashed lines) ---- */
.gov-flow__tier { width: 100%; }
.gov-flow__label {
  display: block; text-align: center;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 12px;
}
.gov-flow__chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.gov-flow__chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: .92rem; font-weight: 500; color: var(--text);
  box-shadow: var(--shadow-sm);
}
.gov-flow__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--brand)); }
.gov-flow__chip--out { border-color: rgba(var(--brand-rgb), .3); }

.gov-flow__arrow {
  display: flex; justify-content: center; color: var(--text-3);
  margin: 14px 0;
}
.gov-flow__arrow svg { width: 22px; height: 22px; opacity: .55; }

/* the governance layer — the showpiece */
.gov-gate {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(18px, 2.4vw, 26px);
  background:
    linear-gradient(120deg, rgba(var(--brand-rgb),.12), rgba(var(--cyan-rgb),.07)),
    var(--surface);
  border: 1px solid rgba(var(--brand-rgb), .32);
  box-shadow: 0 18px 44px -26px rgba(var(--brand-rgb), .7);
}
.gov-gate::after { /* soft breathing sheen */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% -20%, rgba(var(--brand-rgb),.16), transparent 60%);
  animation: gov-breathe 6s var(--ease) infinite; pointer-events: none;
}
.gov-gate__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.gov-gate__icon {
  flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; background: var(--grad-brand);
  box-shadow: 0 12px 26px -10px rgba(var(--brand-rgb), .8);
}
.gov-gate__icon svg { width: 26px; height: 26px; }
.gov-gate__text { display: flex; flex-direction: column; gap: 4px; }
.gov-gate__text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--text); }
.gov-gate__text span { font-size: .9rem; color: var(--text-2); line-height: 1.45; }
.gov-gate__tag {
  margin-left: auto; flex: none; align-self: flex-start;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(var(--brand-rgb), .1); border: 1px solid rgba(var(--brand-rgb), .3);
}
.gov-gate__checks {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px;
}
.gov-gate__checks span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 500; color: var(--text-2);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
}
.gov-gate__checks svg { width: 14px; height: 14px; color: var(--emerald); }

/* live operations panel */
.gov-ops {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.gov-ops__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: var(--surface-3);
}
.gov-ops__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); }
.gov-ops__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald); padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(var(--emerald-rgb), .1); border: 1px solid rgba(var(--emerald-rgb), .3);
}
.gov-ops__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); animation: gov-blink 2s var(--ease) infinite; }
.gov-ops__rows { display: flex; flex-direction: column; }
.gov-ops__rows li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; font-size: .9rem; color: var(--text-2);
  border-top: 1px solid var(--line);
}
.gov-ops__rows li:first-child { border-top: 0; }
.gov-ops__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--brand)); }
.gov-ops__rows b {
  margin-left: auto; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; color: var(--emerald);
}

@keyframes gov-breathe { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes gov-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }


/* ------------------------------------------------------------------ */
/*  METRICS STRIP                                                      */
/* ------------------------------------------------------------------ */
.s-govern__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
}
.s-govern__stat { text-align: center; align-items: center; }
.s-govern__stat-div {
  width: 1px;
  align-self: stretch;
  min-height: 56px;
  background: var(--line-2);
}

/* ------------------------------------------------------------------ */
/*  PART B — CAPABILITIES GRID                                         */
/* ------------------------------------------------------------------ */
.s-govern__cap-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  margin-top: clamp(72px, 9vw, 124px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.s-govern__cap-title { font-size: var(--fs-h3); max-width: 22ch; }

.s-govern__cards { align-items: stretch; }
.s-govern__card { height: 100%; }

/* accent tile filling the 8th cell */
.s-govern__card--accent {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--brand-rgb), .28);
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(var(--brand-rgb), .18), transparent 60%),
    var(--surface-solid);
  overflow: hidden;
}
.s-govern__accent-kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}
.s-govern__accent-text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}
.s-govern__accent-orbit {
  position: absolute;
  top: -42px; right: -42px;
  width: 130px; height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-rgb), .3);
  animation: govern-spin 22s linear infinite;
}
.s-govern__accent-orbit span {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(var(--brand-rgb), .9);
}
.s-govern__accent-orbit span:nth-child(1) { top: -3px;  left: 50%; }
.s-govern__accent-orbit span:nth-child(2) { bottom: 14px; right: -3px; }
.s-govern__accent-orbit span:nth-child(3) { bottom: -3px; left: 28%; }
@keyframes govern-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/*  CLOSING BANNER                                                     */
/* ------------------------------------------------------------------ */
.s-govern__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 48px);
  margin-top: clamp(80px, 10vw, 140px);
}
.s-govern__banner-line {
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: var(--grad-line);
}
.s-govern__banner-line--r { transform: scaleX(-1); }
.s-govern__banner-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--text);
  text-wrap: balance;
}

/* ------------------------------------------------------------------ */
/*  RESPONSIVE                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .s-govern__stat-div { display: none; }
  .s-govern__stats { gap: 28px 36px; }
}
@media (max-width: 620px) {
  .s-govern__banner-line { max-width: 60px; }
  .s-govern__legend-arrow { transform: rotate(90deg); }
  .s-govern__legend { flex-direction: column; }
}

/* reduced motion — keep it calm (global rule also fires) */
@media (prefers-reduced-motion: reduce) {
  .gov-gate::after, .gov-ops__badge i, .s-govern__accent-orbit { animation: none; }
}

/* ===== SECTION: workforce ===== */
/* =====================================================================
   SECTION: AI Workforce  (#workforce)
   Namespace: s-workforce__
   ===================================================================== */

.s-workforce { overflow: hidden; }

/* ambient glow anchored top-center, echoing the hero core */
.s-workforce__glow {
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(900px, 90vw);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .14), transparent 72%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.s-workforce .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/*  Metrics strip                                                      */
/* ------------------------------------------------------------------ */
.s-workforce__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 32px);
  padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 40px);
  margin-bottom: clamp(48px, 6vw, 72px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    var(--grad-panel),
    var(--surface-solid);
  box-shadow: var(--shadow-sm);
}
.s-workforce__metric {
  position: relative;
  gap: 8px;
  padding-left: clamp(18px, 2vw, 28px);
}
.s-workforce__metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.s-workforce__metric:first-child { padding-left: 0; }
.s-workforce__metric:first-child::before { display: none; }
.s-workforce__metric .metric__label { letter-spacing: -0.005em; }

/* the "Unlimited" value: keep it on the same gradient + scale as numbers */
.s-workforce__metric .metric__value {
  font-size: clamp(2.2rem, 1.2rem + 3vw, 3.4rem);
}

/* ------------------------------------------------------------------ */
/*  Lede above department grid                                         */
/* ------------------------------------------------------------------ */
.s-workforce__lede {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: clamp(24px, 3vw, 34px);
}
.s-workforce__lede-text {
  font-size: var(--fs-sm);
  max-width: 62ch;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/*  Department grid                                                    */
/* ------------------------------------------------------------------ */
.s-workforce__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}

.s-workforce__dept {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* a soft brand wash that grows on hover — reinforces "living" teams */
.s-workforce__dept::after {
  content: "";
  position: absolute;
  inset: auto -30% -55% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .12), transparent 70%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}
.s-workforce__dept:hover::after { opacity: 1; }

.s-workforce__dept-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.s-workforce__dept-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(var(--brand-rgb), .12);
  border: 1px solid rgba(var(--brand-rgb), .25);
  color: var(--brand);
}
.s-workforce__dept-icon svg { width: 23px; height: 23px; }

/* per-department accent — calm, not neon */
.s-workforce__dept-icon--violet  { color: var(--brand);   background: rgba(var(--brand-rgb), .12);   border-color: rgba(var(--brand-rgb), .25); }
.s-workforce__dept-icon--blue    { color: var(--brand-2); background: rgba(var(--brand2-rgb), .12);  border-color: rgba(var(--brand2-rgb), .25); }
.s-workforce__dept-icon--cyan    { color: var(--cyan);    background: rgba(var(--cyan-rgb), .12);    border-color: rgba(var(--cyan-rgb), .25); }
.s-workforce__dept-icon--emerald { color: var(--emerald); background: rgba(var(--emerald-rgb), .12); border-color: rgba(var(--emerald-rgb), .25); }
.s-workforce__dept-icon--amber   { color: var(--amber);   background: rgba(246, 180, 90, .12);       border-color: rgba(246, 180, 90, .25); }
.s-workforce__dept-icon--rose    { color: var(--rose);    background: rgba(247, 113, 152, .12);      border-color: rgba(247, 113, 152, .25); }

.s-workforce__dept-title {
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
}

/* per-department capabilities — quiet keyword chips, no repeated status text */
.s-workforce__dept-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}
.s-workforce__dept-tags span {
  font-size: 0.74rem;
  color: var(--text-3);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.s-workforce__dept:hover .s-workforce__dept-tags span {
  color: var(--text-2);
  border-color: var(--line-2);
}

/* ------------------------------------------------------------------ */
/*  Footline                                                           */
/* ------------------------------------------------------------------ */
.s-workforce__footline {
  justify-content: center;
  text-align: center;
  margin-top: clamp(34px, 4vw, 52px);
  gap: 14px 22px;
}
.s-workforce__footline-note {
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------ */
/*  Motion                                                             */
/* ------------------------------------------------------------------ */
@keyframes workforce-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .s-workforce__pulse { animation: none; }
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .s-workforce__grid { grid-template-columns: repeat(2, 1fr); }
  .s-workforce__metrics { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 4vw, 34px); }
  /* re-draw separators for a 2-col metric layout */
  .s-workforce__metric:nth-child(3) { padding-left: 0; }
  .s-workforce__metric:nth-child(3)::before { display: none; }
}

@media (max-width: 620px) {
  .s-workforce__grid { grid-template-columns: 1fr; }
  .s-workforce__metrics { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .s-workforce__metric { padding-left: 0; }
  .s-workforce__metric::before { display: none; }
  .s-workforce__lede { align-items: flex-start; }
}

/* ===== SECTION: memory ===== */
/* =====================================================================
   SECTION: Enterprise Memory  (.s-memory)
   Sources -> Memory core (left) + grounded Q&A panel (right)
   ===================================================================== */
.s-memory { overflow: hidden; }

/* ambient glows */
.s-memory__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.s-memory__glow--a {
  top: 8%; left: -160px;
  width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .20), transparent 70%);
}
.s-memory__glow--b {
  bottom: -10%; right: -140px;
  width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb), .15), transparent 70%);
}

.s-memory .container { position: relative; z-index: 1; }

/* ---- layout grid ---- */
.s-memory__grid {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ------------------------------------------------------------------ */
/*  LEFT — converging diagram                                          */
/* ------------------------------------------------------------------ */
.s-memory__visual { position: relative; }
.s-memory__visual-glow {
  position: absolute;
  inset: 16% 22% 22% 22%;
  background: var(--glow-brand);
  filter: blur(26px);
  opacity: .55;
  animation: memory-breathe 8s var(--ease) infinite;
  pointer-events: none;
}
/* ---- memory flow (sources -> unify -> core) ---- */
.s-memory__flow {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--brand-rgb),.05), transparent 55%),
    linear-gradient(180deg, #FFFFFF, #F6F8FC);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    var(--shadow-lg);
}
.s-memory__flow::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand); opacity: .85;
}
.s-memory__flow-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.s-memory__flow-kicker {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
}
.s-memory__flow-sync {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--emerald);
}
.s-memory__flow-sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); animation: memory-rec 2.2s var(--ease) infinite; }

.s-memory__srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.s-memory__src {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  font-size: .86rem; color: var(--text-2); font-weight: 500;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.s-memory__src svg { width: 17px; height: 17px; color: var(--c, var(--brand)); flex: none; }
.s-memory__visual:hover .s-memory__src { border-color: var(--line-2); }

/* funnel / flow connector */
.s-memory__pipe {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 64px; margin: 4px 0;
}
.s-memory__pipe-stream {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background:
    repeating-linear-gradient(180deg,
      rgba(var(--brand-rgb),.9) 0 6px,
      transparent 6px 16px);
  background-size: 100% 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  animation: memory-stream 1.1s linear infinite;
}
.s-memory__pipe-chip {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--text-2);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-solid); border: 1px solid rgba(var(--brand-rgb),.3);
  box-shadow: 0 0 22px -8px rgba(var(--brand-rgb),.8);
}
@keyframes memory-stream { to { background-position: 0 16px; } }

/* unified core card */
.s-memory__core {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(120deg, rgba(var(--brand-rgb),.14), rgba(var(--cyan-rgb),.06)),
    var(--surface-solid);
  border: 1px solid rgba(var(--brand-rgb),.34);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb),.06), 0 22px 50px -30px rgba(var(--brand-rgb),.85);
}
.s-memory__core-glow {
  position: absolute; inset: -40% 40% 40% -10%;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb),.4), transparent 70%);
  filter: blur(24px); animation: memory-breathe 7s var(--ease) infinite; pointer-events: none;
}
.s-memory__core-ico {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb),.9);
}
.s-memory__core-ico svg { width: 24px; height: 24px; }
.s-memory__core-text { position: relative; display: flex; flex-direction: column; gap: 3px; }
.s-memory__core-text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--text); }
.s-memory__core-text span { font-size: .82rem; color: var(--text-2); line-height: 1.4; }
.s-memory__core-badge {
  position: relative; margin-left: auto; flex: none; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald); padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(var(--emerald-rgb),.1); border: 1px solid rgba(var(--emerald-rgb),.28);
}
.s-memory__core-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); animation: memory-rec 2s var(--ease) infinite; }

.s-memory__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(6px, 1.5vw, 16px);
}

/* ------------------------------------------------------------------ */
/*  RIGHT — grounded Q&A panel                                         */
/* ------------------------------------------------------------------ */
.s-memory__qa {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(var(--cyan-rgb),.05), transparent 55%),
    linear-gradient(180deg, #FFFFFF, #F6F8FC);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    var(--shadow);
  overflow: hidden;
}
.s-memory__qa::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand);
  opacity: .85;
}

.s-memory__qa-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
.s-memory__qa-hint { font-size: 0.8rem; }
.s-memory__rec {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: memory-rec 2.4s var(--ease) infinite;
}

.s-memory__qa-prompt {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 14px;
}

/* question chips (tabs) */
.s-memory__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}
.s-memory__chip {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--text-2);
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.s-memory__chip:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-1px); }
.s-memory__chip.is-active {
  color: var(--text);
  border-color: rgba(var(--brand-rgb), .45);
  background: rgba(var(--brand-rgb), .10);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .12);
}

/* answer panels */
.s-memory__answer { display: none; }
.s-memory__answer.is-active { display: block; animation: memory-answer-in .5s var(--ease-out) both; }

.s-memory__answer-line { display: flex; gap: 13px; align-items: flex-start; }
.s-memory__avatar {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-on-brand);
  background: var(--grad-brand);
  box-shadow: 0 6px 18px -8px rgba(var(--brand-rgb), .8);
}
.s-memory__answer-text {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-2);
}
.s-memory__answer-text strong { color: var(--text); font-weight: 600; }

/* citation records */
.s-memory__cites {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.s-memory__cite {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: .01em;
  color: var(--text-2);
}
.s-memory__cite svg { width: 15px; height: 15px; flex: none; color: var(--brand); }

/* grounded clarifier callout */
.s-memory__callout {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--brand-rgb), .22);
  background: var(--grad-brand-soft);
}
.s-memory__callout-icon {
  flex: none;
  display: inline-flex;
  color: var(--emerald);
  margin-top: 1px;
}
.s-memory__callout-icon svg { width: 22px; height: 22px; }
.s-memory__callout-text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}
.s-memory__callout-text strong { color: var(--text); }

/* stats below panel */
.s-memory__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.s-memory__stat .metric__value { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.6rem); }
.s-memory__stat .metric__label { max-width: 24ch; }

/* ------------------------------------------------------------------ */
/*  KEYFRAMES                                                          */
/* ------------------------------------------------------------------ */
@keyframes memory-dashflow { to { stroke-dashoffset: -24; } }
@keyframes memory-pulse {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes memory-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes memory-spin { to { transform: rotate(360deg); } }
@keyframes memory-breathe { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.07); opacity: .8; } }
@keyframes memory-rec { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes memory-answer-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-memory__rail, .s-memory__pulse, .s-memory__float, .s-memory__corering,
  .s-memory__coreglow, .s-memory__visual-glow, .s-memory__rec { animation: none; }
  .s-memory__pulse { opacity: .9; }
  .s-memory__answer.is-active { animation: none; }
}

/* ------------------------------------------------------------------ */
/*  RESPONSIVE                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .s-memory__grid { grid-template-columns: 1fr; }
  .s-memory__visual { max-width: 540px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .s-memory__stats { grid-template-columns: 1fr; }
  .s-memory__qa-head { justify-content: flex-start; }
  .s-memory__chip { font-size: 0.82rem; }
}

/* ===== SECTION: intelligence ===== */
/* =====================================================================
   SECTION 07 — Operational Intelligence
   "Your Organization Learns From Every Decision"
   A calm, data-driven analytics surface. Bento layout.
   ===================================================================== */

.s-intelligence {
  position: relative;
  overflow: hidden;
}
.s-intelligence__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.s-intelligence__glow--a {
  top: -120px; left: 8%;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .16), transparent 70%);
}
.s-intelligence__glow--b {
  bottom: -160px; right: 4%;
  width: 560px; height: 560px;
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb), .10), transparent 70%);
}
.s-intelligence .container { position: relative; z-index: 1; }

/* ---------- BENTO GRID ---------- */
.s-intelligence__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}
/* lead reasoning panel spans 2 cols tall */
.s-intelligence__panel--lead { grid-column: span 2; grid-row: span 2; }
/* default insight card = 2 cols */
.s-intelligence__card { grid-column: span 2; }
/* the wide attribution card = 4 cols */
/* the wide attribution card closes the grid as a full-width row */
.s-intelligence__card--wide { grid-column: span 6; }

.s-intelligence__card,
.s-intelligence__panel {
  display: flex;
  flex-direction: column;
}

/* ---------- CARD HEADER / QUESTION / ANSWER ---------- */
.s-intelligence__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.s-intelligence__q {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text);
  margin-bottom: 8px;
}
.s-intelligence__a {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: 22px;
}
.s-intelligence__unit {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* tags — tinted per insight category */
.s-intelligence__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.s-intelligence__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.s-intelligence__tag--rose    { color: var(--rose);    border-color: rgba(247,113,152,.30);  background: rgba(247,113,152,.07); }
.s-intelligence__tag--amber   { color: var(--amber);   border-color: rgba(246,180,90,.30);   background: rgba(246,180,90,.07); }
.s-intelligence__tag--violet  { color: var(--brand);   border-color: rgba(var(--brand-rgb),.30); background: rgba(var(--brand-rgb),.07); }
.s-intelligence__tag--cyan    { color: var(--cyan);    border-color: rgba(var(--cyan-rgb),.30);  background: rgba(var(--cyan-rgb),.07); }
.s-intelligence__tag--emerald { color: var(--emerald); border-color: rgba(var(--emerald-rgb),.30); background: rgba(var(--emerald-rgb),.07); }

/* the viz region sits at the bottom of each card */
.s-intelligence__viz { margin-top: auto; }
.s-intelligence__chart { width: 100%; height: auto; overflow: visible; }

/* ---------- CARD 1 — rejection breakdown bars ---------- */
.s-intelligence__track { fill: rgba(255,255,255,.05); }
.s-intelligence__fill {
  width: var(--w);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--i) * .12s + .15s);
}
.is-visible .s-intelligence__fill,
[data-reveal].is-visible .s-intelligence__fill { transform: scaleX(1); }
.s-intelligence__card.is-visible .s-intelligence__fill { transform: scaleX(1); }

.s-intelligence__legend {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.s-intelligence__legend li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text-2);
}
.s-intelligence__legend b {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
}

/* ---------- CARD 2 — supplier delay trend ---------- */
.s-intelligence__chart--trend { height: 90px; }
.s-intelligence__line {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.4s var(--ease-out) .2s;
}
.s-intelligence__card.is-visible .s-intelligence__line { stroke-dashoffset: 0; }
.s-intelligence__area { opacity: 0; transition: opacity 1s var(--ease) .6s; }
.s-intelligence__card.is-visible .s-intelligence__area { opacity: 1; }
.s-intelligence__flag {
  fill: var(--amber);
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .4s var(--ease), transform .4s var(--ease-out);
  transition-delay: var(--d);
}
.s-intelligence__flag--hot {
  fill: var(--rose);
  filter: drop-shadow(0 0 6px rgba(247,113,152,.8));
  animation: intelligence-ping 2.6s var(--ease) infinite 1.6s;
}
.s-intelligence__card.is-visible .s-intelligence__flag { opacity: 1; transform: scale(1); }

.s-intelligence__suppliers {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.s-intelligence__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-2);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.s-intelligence__chip b { font-family: var(--font-mono); color: var(--text); font-size: 0.76rem; }
.s-intelligence__chip-dot { width: 7px; height: 7px; border-radius: 50%; }
.s-intelligence__chip-dot--rose  { background: var(--rose);  box-shadow: 0 0 8px rgba(247,113,152,.7); }
.s-intelligence__chip-dot--amber { background: var(--amber); box-shadow: 0 0 8px rgba(246,180,90,.7); }

/* ---------- CARD 3 — department ranking ---------- */
.s-intelligence__rank {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.s-intelligence__rank li {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) 3fr auto;
  align-items: center;
  gap: 16px;
}
.s-intelligence__rank-name { font-size: 0.92rem; color: var(--text); font-weight: 500; }
.s-intelligence__rank-bar {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.s-intelligence__rank-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--i) * .1s + .2s);
}
.s-intelligence__card--wide.is-visible .s-intelligence__rank-bar i { transform: scaleX(1); }
.s-intelligence__rank li:first-child .s-intelligence__rank-bar i {
  background: linear-gradient(90deg, var(--brand), var(--rose));
}
.s-intelligence__rank-val {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}

/* ---------- CARD 4 — workflow funnel ---------- */
.s-intelligence__funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s-intelligence__funnel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: var(--w);
  min-width: 44%;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(var(--brand2-rgb),.20), rgba(var(--cyan-rgb),.08));
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--text);
  transform-origin: left center;
  transform: scaleX(.4);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease);
  transition-delay: calc(var(--i) * .1s + .2s);
}
.s-intelligence__card.is-visible .s-intelligence__funnel-stage { transform: scaleX(1); opacity: 1; }
.s-intelligence__funnel-stage em { font-style: normal; color: var(--text-2); }
.s-intelligence__funnel-stage b { font-family: var(--font-mono); font-size: 0.78rem; }
.s-intelligence__funnel-stage--hot {
  background: linear-gradient(90deg, rgba(247,113,152,.26), rgba(246,180,90,.10));
  border-color: rgba(247,113,152,.45);
}
.s-intelligence__funnel-stage--hot em { color: var(--rose); }

.s-intelligence__flag-note {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.s-intelligence__flag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 0 rgba(247,113,152,.6);
  animation: intelligence-ping 2.4s var(--ease) infinite;
}

/* ---------- CARD 5 — approval correlation scatter ---------- */
.s-intelligence__chart--scatter { height: 104px; }
.s-intelligence__axis { stroke: var(--line-2); stroke-width: 1; }
.s-intelligence__grid-lines line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
/* confidence band draws in softly */
.s-intelligence__corr-band {
  opacity: 0;
  transition: opacity .9s var(--ease) .35s;
}
.s-intelligence__card.is-visible .s-intelligence__corr-band { opacity: 1; }
/* solid trend line that draws itself in once (no looping dash jump-cut) */
.s-intelligence__corr-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.1s var(--ease-out) .45s;
}
.s-intelligence__card.is-visible .s-intelligence__corr-line { stroke-dashoffset: 0; }
.s-intelligence__dots circle {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(var(--cyan-rgb), .55));
  transition: opacity .4s var(--ease), transform .45s var(--ease-out);
  transition-delay: var(--d);
}
.s-intelligence__card.is-visible .s-intelligence__dots circle { opacity: 1; transform: scale(1); }
.s-intelligence__corr-foot {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.s-intelligence__corr-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.s-intelligence__corr-val {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--emerald);
}

/* ---------- LEAD REASONING PANEL ---------- */
.s-intelligence__panel--lead {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--brand-rgb),.10), transparent 55%),
    var(--grad-panel),
    var(--surface-solid);
}
.s-intelligence__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.s-intelligence__lead-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.s-intelligence__lead-q {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 26px;
}
.s-intelligence__hl {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.s-intelligence__evidence {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}
.s-intelligence__ev {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-2);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out);
  transition-delay: var(--d);
}
.s-intelligence__panel--lead.is-visible .s-intelligence__ev { opacity: 1; transform: none; }
.s-intelligence__ev strong { color: var(--text); }
.s-intelligence__ev-ic {
  flex: none;
  width: 34px; height: 34px;
  padding: 7px;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(var(--brand-rgb),.10);
  border: 1px solid rgba(var(--brand-rgb),.22);
}

.s-intelligence__verdict {
  margin-top: auto;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.s-intelligence__verdict-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.s-intelligence__verdict-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.s-intelligence__verdict-val {
  font-weight: 600;
  color: var(--text);
  font-size: 0.96rem;
}
.s-intelligence__verdict-bar {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  overflow: hidden;
  margin-bottom: 12px;
}
.s-intelligence__verdict-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) .4s;
}
.s-intelligence__panel--lead.is-visible .s-intelligence__verdict-fill { transform: scaleX(1); }
.s-intelligence__verdict-foot {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.5;
}
.s-intelligence__verdict-foot strong { color: var(--text); }
.s-intelligence__verdict-pct {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand);
}

/* ---------- KEYFRAMES (prefixed, subtle) ---------- */
@keyframes intelligence-ping {
  0%   { box-shadow: 0 0 0 0 rgba(247,113,152,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(247,113,152,0); }
  100% { box-shadow: 0 0 0 0 rgba(247,113,152,0); }
}
@keyframes intelligence-dash { to { stroke-dashoffset: -180; } }

@media (prefers-reduced-motion: reduce) {
  .s-intelligence__fill,
  .s-intelligence__rank-bar i,
  .s-intelligence__verdict-fill { transform: scaleX(1) !important; transition: none !important; }
  .s-intelligence__line { stroke-dashoffset: 0 !important; }
  .s-intelligence__area,
  .s-intelligence__corr-line,
  .s-intelligence__dots circle,
  .s-intelligence__flag,
  .s-intelligence__ev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .s-intelligence__funnel-stage { opacity: 1 !important; transform: scaleX(1) !important; transition: none !important; }
  .s-intelligence__flag--hot,
  .s-intelligence__flag-dot,
  .s-intelligence__corr-line { animation: none !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .s-intelligence__grid { grid-template-columns: repeat(4, 1fr); }
  .s-intelligence__panel--lead { grid-column: span 2; grid-row: span 2; }
  .s-intelligence__card { grid-column: span 2; }
  .s-intelligence__card--wide { grid-column: span 4; }
}
@media (max-width: 760px) {
  .s-intelligence__grid { grid-template-columns: repeat(2, 1fr); }
  .s-intelligence__panel--lead { grid-column: span 2; grid-row: auto; }
  .s-intelligence__card { grid-column: span 1; }
  .s-intelligence__card--wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .s-intelligence__grid { grid-template-columns: 1fr; }
  .s-intelligence__panel--lead,
  .s-intelligence__card,
  .s-intelligence__card--wide { grid-column: span 1; }
  .s-intelligence__rank li { grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: 12px; }
}

/* ===== SECTION: marketplace ===== */
/* =====================================================================
   SECTION · Marketplace — Ready-Made Operational Systems
   All custom rules namespaced s-marketplace__ ; keyframes marketplace-*
   ===================================================================== */

.s-marketplace { overflow: hidden; }

/* ambient glow behind the catalog */
.s-marketplace__glow {
  position: absolute;
  top: -8%;
  left: 50%;
  width: min(900px, 90%);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .16), transparent 72%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.s-marketplace .container { position: relative; z-index: 1; }

/* grid wrapper — strip list semantics for layout */
.s-marketplace__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.s-marketplace__grid > li { display: flex; }

/* ---- card --------------------------------------------------------- */
.s-marketplace__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(24px, 2.4vw, 32px);
  isolation: isolate;
}

/* per-card hover wash that picks up the card's own icon gradient */
.s-marketplace__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% -10%, rgba(var(--brand-rgb), .10), transparent 60%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.s-marketplace__card:hover::after,
.s-marketplace__card:focus-visible::after { opacity: 1; }

.s-marketplace__card:focus-visible {
  outline: none;
  border-color: rgba(var(--brand-rgb), .45);
  box-shadow: var(--shadow), 0 0 0 1px rgba(var(--brand-rgb), .35);
  transform: translateY(-4px);
}

/* corner "System" badge */
.s-marketplace__badge {
  position: absolute;
  top: clamp(20px, 2.2vw, 28px);
  right: clamp(20px, 2.2vw, 28px);
  color: var(--text-3);
  background: rgba(255, 255, 255, .03);
}

/* icon tile — subtle lift + gradient ring on hover */
.s-marketplace__icon {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line-2);
  color: var(--text-2);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.s-marketplace__card:hover .s-marketplace__icon,
.s-marketplace__card:focus-visible .s-marketplace__icon {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(var(--brand-rgb), .4);
  background: rgba(var(--brand-rgb), .1);
}
.s-marketplace__icon svg { width: 24px; height: 24px; overflow: visible; }

.s-marketplace__card .card__title { letter-spacing: -0.02em; }
.s-marketplace__card .card__desc { max-width: 38ch; }

/* ---- included tag pills ------------------------------------------ */
.s-marketplace__tags {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.s-marketplace__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: .04em;
  color: var(--text-3);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.s-marketplace__card:hover .s-marketplace__tag,
.s-marketplace__card:focus-visible .s-marketplace__tag {
  color: var(--text-2);
  border-color: var(--line-2);
}

/* ---- footer affordance: Deploy / Explore ------------------------- */
.s-marketplace__action {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.s-marketplace__action::before {
  content: "";
  position: absolute;
  left: clamp(24px, 2.4vw, 32px);
  right: clamp(24px, 2.4vw, 32px);
  height: 1px;
  margin-top: -22px;
  background: var(--line);
  opacity: .8;
}

.s-marketplace__deploy {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}
.s-marketplace__card:hover .s-marketplace__deploy,
.s-marketplace__card:focus-visible .s-marketplace__deploy {
  color: var(--text);
}

.s-marketplace__explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.s-marketplace__explore svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-fast) var(--ease);
}
.s-marketplace__card:hover .s-marketplace__explore,
.s-marketplace__card:focus-visible .s-marketplace__explore {
  opacity: 1;
  transform: none;
}
.s-marketplace__card:hover .s-marketplace__explore svg { transform: translateX(3px); }

/* ---- closing note ------------------------------------------------- */
.s-marketplace__footnote {
  margin: clamp(36px, 4vw, 52px) auto 0;
  max-width: 56ch;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ---- responsive --------------------------------------------------- */
@media (max-width: 620px) {
  .s-marketplace__badge {
    top: clamp(18px, 5vw, 24px);
    right: clamp(18px, 5vw, 24px);
  }
  /* on touch / narrow screens the explore affordance should always read */
  .s-marketplace__explore { opacity: 1; transform: none; }
}

@media (hover: none) {
  .s-marketplace__explore { opacity: 1; transform: none; }
}

/* ===== SECTION: scale ===== */
/* =====================================================================
   SECTION — SCALE  (s-scale__)
   From one workflow to an AI-powered organization: an interactive
   "isolated systems" vs "one operating system" convergence visual.
   ===================================================================== */

.s-scale { overflow: hidden; }

.s-scale__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.s-scale__glow--a {
  top: 18%;
  left: 50%;
  width: clamp(420px, 60vw, 760px);
  height: clamp(300px, 40vw, 480px);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .14), transparent 72%);
}

.s-scale .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- */
/*  Stage + toggle                                                   */
/* ---------------------------------------------------------------- */
.s-scale__stage {
  max-width: 880px;
  margin: clamp(20px, 3vw, 36px) auto 0;
}

/* departments — clean chips, no scattered node graph */
.s-scale__depts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.s-scale__dept {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: -0.01em;
}
.s-scale__dept i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--brand)); }

/* full-width "unify" divider — always spans edge to edge, with a centered label */
.s-scale__merge {
  display: flex; align-items: center; gap: 16px;
  margin: clamp(18px, 2.4vw, 26px) 0;
}
.s-scale__merge-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-3));
}
.s-scale__merge-line:last-child {
  background: linear-gradient(90deg, var(--line-3), transparent);
}
.s-scale__merge-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand);
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(var(--brand-rgb), .08); border: 1px solid rgba(var(--brand-rgb), .28);
}
.s-scale__merge-chip svg { width: 15px; height: 15px; }

/* the single operational layer everything unifies onto */
.s-scale__layerbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-xl);
  background:
    linear-gradient(120deg, rgba(var(--brand-rgb),.14), rgba(var(--cyan-rgb),.08)),
    var(--surface);
  border: 1px solid rgba(var(--brand-rgb), .3);
  box-shadow: 0 22px 50px -28px rgba(var(--brand-rgb), .7);
}
.s-scale__layerbar-ico {
  flex: none; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  color: #fff; background: var(--grad-brand);
  box-shadow: 0 12px 28px -10px rgba(var(--brand-rgb), .85);
}
.s-scale__layerbar-ico svg { width: 28px; height: 28px; }
.s-scale__layerbar-text { display: flex; flex-direction: column; gap: 4px; }
.s-scale__layerbar-text strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem,.95rem+.5vw,1.35rem); letter-spacing: -0.02em; color: var(--text); }
.s-scale__layerbar-text span { font-size: .92rem; color: var(--text-2); line-height: 1.45; }
.s-scale__layerbar-pills { margin-left: auto; display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.s-scale__layerbar-pills span {
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-2);
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
}


/* ---------------------------------------------------------------- */
/*  Metrics                                                          */
/* ---------------------------------------------------------------- */
.s-scale__metrics { margin-top: clamp(48px, 6vw, 80px); }
.s-scale__metric { text-align: center; }
.s-scale__metric .metric { align-items: center; }

/* ---------------------------------------------------------------- */
/*  Keyframes                                                        */
/* ---------------------------------------------------------------- */
@keyframes scale-dashflow { to { stroke-dashoffset: -24; } }
@keyframes scale-spin { to { transform: rotate(360deg); } }
@keyframes scale-pulse-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------------------------------------------------------------- */
/*  Responsive                                                       */
/* ---------------------------------------------------------------- */
@media (max-width: 760px) {
  .s-scale__layerbar { flex-wrap: wrap; }
  .s-scale__layerbar-pills { margin-left: 0; justify-content: flex-start; }
}

@media (max-width: 620px) {
  .s-scale__toggle { width: 100%; max-width: 420px; }
  .s-scale__tab { flex: 1; justify-content: center; padding-inline: 10px; }
  .s-scale__layer { gap: 8px; }
  .s-scale__layer .node-chip { padding: 8px 13px; font-size: 0.8rem; }
}

/* ===== SECTION: architecture ===== */
/* =====================================================================
   SECTION: Architecture — "Built for Enterprise Reality"
   Vertical layered operating stack + closing principle note.
   All custom classes namespaced .s-architecture__ ; keyframes prefixed.
   ===================================================================== */

.s-architecture { overflow: hidden; }

/* ambient glow spots (decorative) */
.s-architecture__spot {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.s-architecture__spot--a {
  top: 8%; left: -8%;
  width: clamp(280px, 38vw, 540px); height: clamp(280px, 38vw, 540px);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .18), transparent 70%);
}
.s-architecture__spot--b {
  bottom: 2%; right: -10%;
  width: clamp(260px, 34vw, 480px); height: clamp(260px, 34vw, 480px);
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb), .12), transparent 70%);
}

/* layout: stack on the left, principle note on the right */
.s-architecture__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* ---------------------------------------------------------------- */
/*  THE STACK                                                        */
/* ---------------------------------------------------------------- */
.s-architecture__stack {
  display: flex;
  flex-direction: column;
  perspective: 1400px;
}

/* each layer = full-width horizontal bar */
.s-architecture__layer {
  --accent: var(--brand-rgb);
  position: relative;
  display: grid;
  grid-template-columns: auto 46px 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    var(--grad-panel),
    var(--surface-solid);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
  /* progressive depth: top layer brightest, lower layers recede */
  opacity: calc(1 - var(--i) * 0.085);
}
.s-architecture__layer::before {
  /* top hairline highlight */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), .5), transparent);
  opacity: .5;
}
.s-architecture__layer:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  opacity: 1;
}

/* per-layer accent assignments */
.s-architecture__layer--1 { --accent: var(--emerald-rgb); }
.s-architecture__layer--2 { --accent: var(--cyan-rgb); }
.s-architecture__layer--3 { --accent: var(--brand2-rgb); }
.s-architecture__layer--5 { --accent: var(--brand-rgb); }
.s-architecture__layer--6 { --accent: var(--brand-rgb); }

.s-architecture__rank {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: .12em;
  color: var(--text-3);
  font-weight: 500;
}

.s-architecture__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  color: rgb(var(--accent));
  background: rgba(var(--accent), .10);
  border: 1px solid rgba(var(--accent), .26);
}
.s-architecture__glyph svg { width: 22px; height: 22px; }

.s-architecture__layer-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s-architecture__layer-title {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.15;
}
.s-architecture__layer-desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.s-architecture__layer-meta {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

/* connector between layers */
.s-architecture__link {
  position: relative;
  display: block;
  height: clamp(22px, 2.6vw, 30px);
  margin-inline: auto;
  width: 1px;
}
.s-architecture__link::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .55), rgba(var(--brand-rgb), .12));
}
.s-architecture__link::after {
  /* arrowhead */
  content: "";
  position: absolute; left: 50%; bottom: 2px;
  width: 6px; height: 6px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1.5px solid rgba(var(--brand-rgb), .7);
  border-bottom: 1.5px solid rgba(var(--brand-rgb), .7);
}
/* traveling pulse riding the connector */
.s-architecture__link-label {
  position: absolute; left: calc(50% + 12px); top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.s-architecture__link::before {
  background-image:
    linear-gradient(180deg, rgba(var(--brand-rgb), .55), rgba(var(--brand-rgb), .12)),
    linear-gradient(180deg, transparent, #fff, transparent);
  background-size: 100% 100%, 100% 40%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 -40%;
  animation: architecture-flow 2.6s var(--ease) infinite;
}
@keyframes architecture-flow {
  0%   { background-position: 0 0, 50% -40%; }
  100% { background-position: 0 0, 50% 140%; }
}

/* ---------------------------------------------------------------- */
/*  GOVERNANCE LAYER — the control plane (emphasized / glowing)      */
/* ---------------------------------------------------------------- */
.s-architecture__layer--gov {
  --accent: var(--brand-rgb);
  opacity: 1;
  border-color: rgba(var(--brand-rgb), .42);
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb), .14), rgba(var(--brand-rgb), .04)),
    var(--surface-solid);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(var(--brand-rgb), .12),
    0 20px 60px -28px rgba(var(--brand-rgb), .6);
}
.s-architecture__layer--gov::before { opacity: 1; }
.s-architecture__gov-aura {
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 30px -6px rgba(var(--brand-rgb), .5);
  opacity: .55;
  animation: architecture-pulse 5s var(--ease) infinite;
}
.s-architecture__layer--gov .s-architecture__glyph {
  background: rgba(var(--brand-rgb), .2);
  border-color: rgba(var(--brand-rgb), .5);
  box-shadow: 0 0 18px -2px rgba(var(--brand-rgb), .55);
}
.s-architecture__layer--gov .s-architecture__rank { color: var(--brand); }

.s-architecture__gov-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-brand);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  box-shadow: 0 4px 14px -4px rgba(var(--brand-rgb), .8);
}
.s-architecture__layer-meta--gov {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .4);
  background: rgba(var(--brand-rgb), .1);
}

@keyframes architecture-pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: .8; }
}

/* ---------------------------------------------------------------- */
/*  CLOSING PRINCIPLE NOTE                                           */
/* ---------------------------------------------------------------- */
.s-architecture__note {
  position: sticky;
  top: 96px;
}
.s-architecture__note-inner {
  position: relative;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    var(--grad-panel),
    var(--surface-solid);
  overflow: hidden;
}
.s-architecture__note-inner::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--grad-line);
  opacity: .7;
}
.s-architecture__note-badge { margin-bottom: 20px; }

.s-architecture__note-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
  text-wrap: balance;
}
.s-architecture__orchestrate {
  position: relative;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.s-architecture__orchestrate::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: var(--grad-brand);
  opacity: .55;
  transform-origin: left;
  animation: architecture-underline 2.8s var(--ease) infinite;
}
@keyframes architecture-underline {
  0%, 100% { transform: scaleX(.4); opacity: .35; }
  50%      { transform: scaleX(1);  opacity: .7; }
}

.s-architecture__note-body {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 26px;
}

.s-architecture__facts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.s-architecture__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface-solid);
}
.s-architecture__fact-k {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--text);
}
.s-architecture__fact-k::before {
  content: "";
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(var(--brand-rgb), .7);
  flex: none;
}
.s-architecture__fact-v {
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.5;
  padding-left: 16px;
}

/* ---------------------------------------------------------------- */
/*  RESPONSIVE                                                       */
/* ---------------------------------------------------------------- */
@media (max-width: 1000px) {
  .s-architecture__layout { grid-template-columns: 1fr; }
  .s-architecture__note { position: static; }
}

@media (max-width: 620px) {
  .s-architecture__layer {
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "glyph body"
      "glyph meta";
    gap: 4px 14px;
    row-gap: 10px;
    padding: 16px;
  }
  .s-architecture__rank { display: none; }
  .s-architecture__glyph { grid-area: glyph; align-self: start; width: 40px; height: 40px; }
  .s-architecture__glyph svg { width: 20px; height: 20px; }
  .s-architecture__layer-body { grid-area: body; }
  .s-architecture__layer-meta {
    grid-area: meta;
    justify-self: start;
    margin-top: 2px;
  }
  .s-architecture__link-label {
    left: auto; right: calc(50% + 12px);
    text-align: right;
  }
}

/* ---------------------------------------------------------------- */
/*  REDUCED MOTION                                                   */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .s-architecture__link::before,
  .s-architecture__gov-aura,
  .s-architecture__orchestrate::after {
    animation: none;
  }
  .s-architecture__layer { opacity: 1; }
}

/* ===== SECTION: platform / capabilities ===== */
.s-platform { position: relative; overflow: hidden; }
.s-platform__glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: min(900px, 90%); height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .12), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.s-platform .container { position: relative; z-index: 1; }

/* ---- the two build/connect paths + AI ---- */
.s-platform__paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(36px, 4.5vw, 60px);
}
.s-platform__path {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(var(--brand-rgb),.05), transparent 52%),
    linear-gradient(180deg, #FFFFFF, #F6F8FC);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 30px -22px rgba(16,24,40,.22);
}
/* connecting chevrons between the three paths */
.s-platform__path:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -16px; z-index: 2;
  width: 22px; height: 22px; transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid var(--line-3); border-right: 2px solid var(--line-3);
  background: var(--bg-alt);
}
.s-platform__path--ai {
  border-color: rgba(var(--brand-rgb), .4);
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb),.14), rgba(var(--cyan-rgb),.08)),
    #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 50px -28px rgba(var(--brand-rgb),.6);
}
.s-platform__path-num {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--text-3); margin-bottom: 14px;
}
.s-platform__path-ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 16px;
  background: rgba(var(--brand-rgb), .1); border: 1px solid rgba(var(--brand-rgb), .2);
  color: var(--brand);
}
.s-platform__path-ico[data-tone="cyan"] { background: rgba(var(--cyan-rgb), .1); border-color: rgba(var(--cyan-rgb), .22); color: var(--cyan); }
.s-platform__path-ico[data-tone="ai"] { color: #fff; background: var(--grad-brand); border-color: transparent; box-shadow: 0 12px 26px -10px rgba(var(--brand-rgb), .85); }
.s-platform__path-ico svg { width: 26px; height: 26px; }
.s-platform__path-title { font-size: var(--fs-lg); letter-spacing: -0.015em; margin-bottom: 8px; }
.s-platform__path-desc { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.s-platform__path-tag {
  align-self: flex-start; margin-top: 18px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface);
}
.s-platform__path-tag--ai { color: var(--brand); border-color: rgba(var(--brand-rgb), .3); background: rgba(var(--brand-rgb), .08); }

/* ---- capability grid ---- */
.s-platform__cap-head {
  text-align: center;
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.s-platform__cap-heading { font-size: var(--fs-h3); margin-top: 14px; }
.s-platform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.s-platform__cap { display: flex; flex-direction: column; }
.s-platform__cap-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 16px;
  background: rgba(var(--brand-rgb), .1); border: 1px solid rgba(var(--brand-rgb), .2); color: var(--brand);
}
.s-platform__cap-ico svg { width: 22px; height: 22px; }
.s-platform__cap-ico[data-tone="blue"]    { color: var(--brand-2); background: rgba(var(--brand2-rgb), .1); border-color: rgba(var(--brand2-rgb), .2); }
.s-platform__cap-ico[data-tone="cyan"]    { color: var(--cyan);    background: rgba(var(--cyan-rgb), .1);    border-color: rgba(var(--cyan-rgb), .2); }
.s-platform__cap-ico[data-tone="emerald"] { color: var(--emerald); background: rgba(var(--emerald-rgb), .1); border-color: rgba(var(--emerald-rgb), .2); }
.s-platform__cap-ico[data-tone="amber"]   { color: var(--amber);   background: rgba(201,130,28, .1);          border-color: rgba(201,130,28, .2); }
.s-platform__cap-ico[data-tone="rose"]    { color: var(--rose);    background: rgba(224,70,111, .1);          border-color: rgba(224,70,111, .2); }
.s-platform__cap-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.s-platform__cap-desc { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.s-platform__cap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.s-platform__cap-tags span {
  font-family: var(--font-mono); font-size: .66rem; color: var(--text-3);
  padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(17,24,39,.02);
}

@media (max-width: 900px) {
  .s-platform__paths { grid-template-columns: 1fr; }
  .s-platform__path:not(:last-child)::after {
    top: auto; bottom: -16px; right: 50%; transform: translateX(50%) rotate(135deg);
  }
}

/* ===== SECTION: trust ===== */
/* =====================================================================
   SECTION: trust — "Operational Outcomes at Enterprise Scale"
   ===================================================================== */
.s-trust { overflow: hidden; }

.s-trust__glow {
  position: absolute;
  inset: auto 0 -30% 0;
  height: 60%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(var(--brand-rgb), .12), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.s-trust .container { position: relative; z-index: 1; }

/* ---- 1. LOGO STRIP ------------------------------------------------- */
/* ---- 1. SLIDING REFERENCE MARQUEE --------------------------------- */
.s-trust__marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vw, 26px);
  padding: clamp(22px, 3vw, 34px) 0 clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-panel), rgba(255, 255, 255, .012);
}
.s-trust__marquee-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.s-trust__marquee-mask {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.s-trust__marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-left: clamp(28px, 4vw, 56px);
  animation: trust-marquee 38s linear infinite;
}
.s-trust__marquee:hover .s-trust__marquee-track { animation-play-state: paused; }
@keyframes trust-marquee { to { transform: translateX(-50%); } }

.s-trust__ref {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.9rem, .8rem + .35vw, 1.08rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-3);
  opacity: .7;
  transition: color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.s-trust__ref:hover { color: var(--text); opacity: 1; }

/* ---- solution-partner accreditations ---- */
.s-trust__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding-inline: 18px;
}
.s-trust__partners-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.s-trust__partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(var(--brand-rgb), .08);
  border: 1px solid rgba(var(--brand-rgb), .25);
}
.s-trust__partner svg { width: 15px; height: 15px; color: var(--brand); }

/* ---- 2. METRICS ---------------------------------------------------- */
.s-trust__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(20px, 3vw, 30px);
}
.s-trust__metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.s-trust__metric:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.s-trust__metric .metric__value { font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem); }
.s-trust__metric .metric__label {
  color: var(--text-2);
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
}

/* ---- 3. CUSTOMER STORIES ------------------------------------------ */
.s-trust__stories { margin-top: clamp(20px, 3vw, 30px); }

.s-trust__story {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(26px, 2.8vw, 38px);
}
.s-trust__quote-mark { width: 38px; height: auto; opacity: 0.85; }
.s-trust__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.12rem, 1rem + 0.55vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.s-trust__quote b { font-weight: 600; color: var(--text); }

.s-trust__person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: clamp(18px, 2vw, 22px);
  border-top: 1px solid var(--line);
}
.s-trust__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--text);
  background: rgba(var(--brand-rgb), .14);
  border: 1px solid rgba(var(--brand-rgb), .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.s-trust__avatar--alt {
  background: rgba(var(--cyan-rgb), .12);
  border-color: rgba(var(--cyan-rgb), .3);
}
.s-trust__person-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-trust__person-name { font-weight: 600; font-size: 0.96rem; color: var(--text); }
.s-trust__person-role {
  font-size: var(--fs-sm);
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.s-trust__person-badge {
  margin-left: auto;
  flex: none;
  color: var(--emerald);
  border-color: rgba(var(--emerald-rgb), .3);
  background: rgba(var(--emerald-rgb), .07);
}

/* ---- RESPONSIVE ---------------------------------------------------- */
@media (max-width: 860px) {
  .s-trust__metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .s-trust__metrics { grid-template-columns: 1fr; }
  .s-trust__person { flex-wrap: wrap; }
  .s-trust__person-badge { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .s-trust__marquee-track { animation: none; }
}

/* ===== SECTION: demo ===== */
/* =====================================================================
   SECTION: demo — Final CTA "Build the Future of Business Operations"
   The scroll target (#demo) for every "Book Demo" link. A glowing,
   confident closer with a faint echo of the hero operational network.
   ===================================================================== */
.s-demo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(96px, 13vw, 188px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0) 24%),
    var(--bg-alt);
}

/* ---- radial brand glow stack -------------------------------------- */
.s-demo__glows {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.s-demo__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.s-demo__glow--core {
  top: 50%; left: 50%;
  width: min(960px, 110%);
  height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .20), transparent 72%);
  opacity: .85;
  animation: demo-breathe 9s var(--ease) infinite;
}
.s-demo__glow--cyan {
  top: 18%; right: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(var(--cyan-rgb), .18), transparent 70%);
}
.s-demo__glow--blue {
  bottom: -160px; left: -100px;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(var(--brand2-rgb), .16), transparent 70%);
}

/* a soft top hairline of brand light, like the section is lit from above */
.s-demo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--grad-line);
  opacity: .55;
  z-index: -1;
}

/* ---- faint echo of the hero network ------------------------------- */
.s-demo__echo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
}
.s-demo__echo svg { width: 100%; height: 100%; }

.s-demo__net-line {
  fill: none;
  stroke: url(#demo-line);
  stroke-width: 1.2;
  stroke-dasharray: 4 8;
  opacity: .42;
  animation: demo-dash 3.2s linear infinite;
}
.s-demo__net-pulse {
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(var(--cyan-rgb), .9));
  animation: demo-pulse 3.6s var(--ease) infinite;
}
.s-demo__net-node {
  fill: var(--surface-solid);
  stroke: var(--line-2);
  stroke-width: 1.1;
}
.s-demo__net-core { transform-box: fill-box; transform-origin: center; }
.s-demo__net-disc {
  fill: url(#demo-core);
  stroke: rgba(var(--brand-rgb), .5);
  stroke-width: 1.3;
}
.s-demo__net-ring {
  fill: none;
  stroke: rgba(var(--brand-rgb), .42);
  stroke-width: 1.1;
  stroke-dasharray: 4 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: demo-spin 30s linear infinite;
}
.s-demo__net-ring--2 {
  stroke: rgba(var(--cyan-rgb), .3);
  animation-duration: 44s;
  animation-direction: reverse;
}

/* ---- content ------------------------------------------------------ */
.s-demo__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-demo__eyebrow { margin-bottom: 26px; }
.s-demo__pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: demo-blink 2.4s var(--ease) infinite;
}

.s-demo__title {
  margin-top: 0;
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 16ch;
}
.s-demo__title .gradient-text { display: inline; }

.s-demo__sub {
  margin-top: clamp(20px, 2.6vw, 28px);
  max-width: 56ch;
  font-size: clamp(1.05rem, .96rem + .5vw, 1.32rem);
  line-height: 1.55;
  color: var(--text-2);
}

.s-demo__actions {
  margin-top: clamp(34px, 4vw, 46px);
  justify-content: center;
  gap: 16px;
}

/* a slow breathing halo behind the primary CTA */
.s-demo__cta { position: relative; }
.s-demo__cta::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  filter: blur(20px);
  opacity: .45;
  z-index: -1;
  animation: demo-halo 4.5s var(--ease) infinite;
}

/* ---- reassurance line --------------------------------------------- */
.s-demo__assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(34px, 4vw, 48px);
}
.s-demo__assurance-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.s-demo__assurance-item svg {
  width: 15px; height: 15px;
  color: var(--brand);
  flex: none;
}
.s-demo__assurance-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-3);
}

/* ---- keyframes ---------------------------------------------------- */
@keyframes demo-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes demo-dash { to { stroke-dashoffset: -24; } }
@keyframes demo-pulse {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes demo-halo { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 620px) {
  .s-demo__actions { flex-direction: column; width: 100%; }
  .s-demo__actions .btn { width: 100%; }
  .s-demo__assurance-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-demo__glow--core,
  .s-demo__net-line,
  .s-demo__net-pulse,
  .s-demo__net-ring,
  .s-demo__pulse-dot,
  .s-demo__cta::after { animation: none; }
  .s-demo__net-pulse { opacity: .85; }
}