/* Nebor service pages · design system v6
   Tokens transcribed verbatim from nebor-design-system.md (the Framer source).
   Naming follows the doc: --color-* canonical names. Legacy aliases below
   keep the existing per-page CSS working without rewrites. */

:root {
  /* === CANONICAL NEBOR TOKENS === */

  /* Brand */
  --color-base:        #FFFFFF;
  --color-background:  #FBF8F6;
  --color-text:        #172A2D;
  --color-white:       #FFFFFF;
  --color-cta:         #16282D;   /* one notch off --color-text, used in nav CTA */
  /* Card header default · overridden per-page by tier-* classes */
  --card-header:       #172A2D;

  /* Gradients */
  --color-yellow-grad-1: #FAC064;
  --color-yellow-grad-2: #F9F2E9;
  --color-second-grad-1: #E0C4FC;
  --color-second-grad-2: rgba(250, 192, 100, 0.8);

  /* Dark Blue (text/neutral scale · labelled "blue" but it's the dark-teal ink) */
  --color-blue-50:  #E8EAEA;
  --color-blue-100: #B7BDBE;
  --color-blue-200: #949D9E;
  --color-blue-300: #647072;
  --color-blue-400: #455557;
  --color-blue-500: #172A2D;
  --color-blue-600: #152629;
  --color-blue-700: #101E20;
  --color-blue-800: #0D1719;
  --color-blue-900: #0A1213;

  /* Grey */
  --color-grey-50:  #EDEEF0;
  --color-grey-100: #C6CAD1;
  --color-grey-200: #AAB1BA;
  --color-grey-300: #848D9B;
  --color-grey-400: #6C7787;
  --color-grey-500: #475569;
  --color-grey-600: #414D60;
  --color-grey-700: #323C4B;
  --color-grey-800: #272F3A;
  --color-grey-900: #1E242C;

  /* Brown (warm neutral / surfaces) */
  --color-brown-50:  #FCFBFA;
  --color-brown-100: #F6F3EF;
  --color-brown-200: #F1EDE7;
  --color-brown-300: #EBE4DB;
  --color-brown-400: #E7DFD5;
  --color-brown-500: #E1D7CA;
  --color-brown-600: #CDC4B8;
  --color-brown-700: #A0998F;
  --color-brown-800: #7C766F;
  --color-brown-900: #5F5A55;

  /* Violet (signature soft accent · used for italic display words) */
  --color-violet-50:  #FCF9FF;
  --color-violet-100: #F5EDFE;
  --color-violet-200: #F1E4FE;
  --color-violet-300: #EAD7FD;
  --color-violet-400: #E6D0FD;
  --color-violet-500: #E0C4FC;     /* THE signature soft tint */
  --color-violet-600: #CCB2E5;
  --color-violet-700: #9F8BB3;
  --color-violet-800: #7B6C8B;
  --color-violet-900: #5E526A;

  /* Orange (warm pop) */
  --color-orange-50:  #FFF9F0;
  --color-orange-100: #FDEBCF;
  --color-orange-200: #FDE2B8;
  --color-orange-300: #FCD597;
  --color-orange-400: #FBCD83;
  --color-orange-500: #FAC064;     /* signature warm gold */
  --color-orange-600: #E4AF5B;
  --color-orange-700: #B28847;
  --color-orange-800: #8A6A37;
  --color-orange-900: #69512A;

  /* Purple (secondary deeper accent) */
  --color-purple-50:  #F3EFFE;
  --color-purple-100: #DBCCFC;
  --color-purple-200: #CAB4FB;
  --color-purple-300: #B192F9;
  --color-purple-400: #A27DF8;
  --color-purple-500: #8B5CF6;
  --color-purple-600: #7E54E0;
  --color-purple-700: #6341AF;
  --color-purple-800: #4C3387;
  --color-purple-900: #3A2767;

  /* Fonts (only two · no mono, no Inter, no Plex) */
  --font-sans:         "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif-italic: "Noto Serif", Georgia, "Times New Roman", serif;

  /* Component tokens */
  --radius-button:     8px;
  --transition-button: 200ms ease-in-out;

  /* === LEGACY ALIASES · kept so existing per-page CSS still works === */

  /* Surface */
  --bg:          var(--color-background);
  --bg-2:        var(--color-brown-200);
  --paper:       var(--color-base);
  --paper-warm:  var(--color-brown-50);

  /* Ink scale (mapped to canonical blue scale) */
  --ink:         var(--color-text);
  --ink-2:       var(--color-blue-400);
  --ink-3:       var(--color-blue-300);
  --ink-4:       var(--color-blue-200);
  --ink-5:       var(--color-blue-100);
  --ink-deep:    var(--color-blue-700);
  --ink-night:   var(--color-blue-900);

  /* Lines */
  --line:        rgba(23, 42, 45, 0.06);
  --line-2:      rgba(23, 42, 45, 0.12);
  --line-soft:   var(--color-blue-50);
  --line-warm:   var(--color-brown-300);

  /* CTA accent · dark ink, hover violet (per spec) */
  --accent:      var(--color-text);
  --accent-2:    var(--color-blue-400);

  /* Lavender legacy aliases */
  --lav-mist:    var(--color-violet-50);
  --lav-tint:    var(--color-violet-100);
  --lav-soft:    var(--color-violet-200);
  --lav-glow:    var(--color-violet-400);
  --lav-brand:   var(--color-violet-500);
  --lav-deep:    var(--color-violet-600);
  --lav-mid:     var(--color-purple-300);
  --lav-strong:  var(--color-purple-500);
  --lav-darker:  var(--color-purple-700);

  /* Gold legacy */
  --gold-tint:   var(--color-orange-100);
  --gold-soft:   var(--color-orange-300);
  --gold:        var(--color-orange-500);
  --gold-bright: #FBBF24;
  --gold-deep:   var(--color-orange-700);

  /* Other legacy aliases */
  --violet:        var(--color-purple-500);
  --violet-deep:   var(--color-purple-600);
  --violet-darker: var(--color-purple-700);
  --violet-ink:    var(--color-purple-800);
  --violet-light:  var(--color-purple-300);
  --violet-soft:   var(--color-violet-600);
  --violet-tint:   var(--color-violet-500);
  --violet-mist:   var(--color-violet-400);
  --amber:         #FBBF24;
  --amber-soft:    var(--color-orange-500);
  --amber-deep:    var(--color-orange-700);
  --amber-warm:    var(--color-orange-600);
  --cream:         var(--color-background);
  --cream-warm:    var(--color-yellow-grad-2);
  --cream-paper:   var(--color-brown-50);
  --teal-deep:     var(--color-text);
  --teal-night:    var(--color-blue-900);
  --teal-mid:      var(--color-grey-900);
  --lavender:      var(--color-purple-300);
  --lavender-deep: var(--color-purple-700);
  --lavender-soft: var(--color-violet-400);
  --butter:        var(--color-orange-500);
  --butter-deep:   #FBBF24;
  --peach:         var(--color-orange-500);
  --peach-deep:    var(--color-orange-700);
  --peach-soft:    var(--color-orange-600);
  --peach-cream:   var(--color-violet-500);
  --mint:          #B9D8C8;
  --mint-deep:     var(--color-purple-700);  /* nebor doesn't use green · alias to purple */
  --sky:           var(--color-violet-600);
  --sky-deep:      var(--color-purple-700);
  --rose:          var(--color-violet-500);

  /* Font legacy aliases · there's no mono in nebor; alias to sans */
  --display: var(--font-sans);
  --sans:    var(--font-sans);
  --serif:   var(--font-serif-italic);
  --mono:    var(--font-sans);

  /* Radii · matched to nebor's dominant scale */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 32px;

  /* Shadows · nebor is not a heavy-shadow site */
  --shadow-sm: 0 1px 2px rgba(23, 42, 45, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(23, 42, 45, 0.10), 0 2px 6px rgba(23, 42, 45, 0.04);
  --shadow-lg: 0 24px 60px -28px rgba(23, 42, 45, 0.18), 0 8px 22px -10px rgba(23, 42, 45, 0.08);
}

/* Tier palettes · every page uses ONLY canonical Nebor tokens.
   Each page gets its own --page-accent for hover/active highlights so
   chips and process cards differ between Sales / Demand / RevOps. */
.tier-revenue {
  /* Sales Engine · soft SAGE GREEN (organic, growth) */
  --tier-a:        #B8D4B0;
  --tier-b:        #B8D4B0;
  --tier-c:        #E8F0E2;
  --tier-accent:   var(--color-text);
  --tier-accent-2: #86A789;
  --tier-soft:     #86A789;
  --tier-tint:     #C8DBC2;
  --tier-glow:     rgba(134, 167, 137, 0.32);
  --tier-grad-1:   #86A789;
  --tier-grad-2:   #B8D4B0;
  --page-accent:        #86A789;    /* sage */
  --page-accent-strong: #4D6B50;    /* deep forest */
  --page-accent-soft:   #E0EBDF;    /* pale sage */
  --card-header:        #7A8794;    /* SOFT slate grey · light & airy */
}
.tier-demand {
  /* Demand Gen · pure SOFT YELLOW (no purple) */
  --tier-a:        #F4D77F;
  --tier-b:        #F4D77F;
  --tier-c:        #FBF3D9;
  --tier-accent:   var(--color-text);
  --tier-accent-2: #8A6A2A;
  --tier-soft:     #8A6A2A;
  --tier-tint:     #F4E5A8;
  --tier-glow:     rgba(244, 215, 127, 0.32);
  --tier-grad-1:   #F4D77F;
  --tier-grad-2:   #FBF3D9;
  --page-accent:        #F4D77F;    /* soft yellow */
  --page-accent-strong: #8A6A2A;    /* deep golden brown (replaces purple) */
  --page-accent-soft:   #FBF3D9;    /* pale yellow */
  --card-header:        #B8965A;    /* soft golden olive */
}
.tier-revops {
  /* CRM & RevOps · soft WHITISH LAVENDER (pale, washed-out purple) */
  --tier-a:        #D8CFE6;
  --tier-b:        #D8CFE6;
  --tier-c:        #EFE9F7;
  --tier-accent:   var(--color-text);
  --tier-accent-2: #B8A8D4;
  --tier-soft:     #B8A8D4;
  --tier-tint:     #E0D6EC;
  --tier-glow:     rgba(184, 168, 212, 0.32);
  --tier-grad-1:   #B8A8D4;
  --tier-grad-2:   #D8CFE6;
  --page-accent:        #B8A8D4;    /* soft lavender · whitish purple */
  --page-accent-strong: #5C4A82;    /* deep muted purple · for tag text */
  --page-accent-soft:   #EFE9F7;    /* near-white lavender wash */
  --card-header:        #8E7DAE;    /* soft dusty lavender */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Subtle brand-tinted ambient glow · calm, professional, no heavy blending */
body::before {
  content: "";
  position: fixed;
  inset: -10% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(40% 40% at 16% 14%, var(--tier-a) 0%, transparent 58%),
    radial-gradient(35% 35% at 86% 16%, var(--tier-b) 0%, transparent 58%);
  filter: blur(80px);
  opacity: 0.40;
  z-index: -1;
  pointer-events: none;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

/* Layout */
.container       { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-wide  { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.container-narrow{ width: 100%; max-width: 920px;  margin: 0 auto; padding: 0 32px; }

/* Typography · VERBATIM from nebor-design-system.md */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-300);
  font-weight: 500;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-violet-500);
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-violet-500) 28%, transparent);
}

/* Headings · Bricolage, weight 500, letter-spacing 0 (per doc) */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text);
}
h1 { font-size: 70px; line-height: 1.0; }
h2 { font-size: 32px; line-height: 1.0; }
h3 { font-size: 22px; line-height: 1.2; }
h4 { font-size: 20px; line-height: 1.24; }
h5 { font-size: 18px; line-height: 1.4; }
h6 { font-size: 16px; line-height: 1.4; }

/* Display headlines · same weights/sizes as h1, with responsive cap on small screens */
.h-display {
  font-family: var(--font-sans);
  font-size: clamp(44px, 6.4vw, 70px);
  line-height: 1.0;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--color-text);
}
.h-section {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.4vw, 32px);
  line-height: 1.0;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--color-text);
}
.h-card {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
}

/* Italic display accent · Noto Serif italic, violet-500 tint, -0.05em tracking
   This is the signature brand move (e.g. italic "strategy call" in violet) */
.h-display .serif,
.h-section .serif,
.h-card .serif,
h1 em, h2 em, h3 em, h4 em,
.accent {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--color-violet-500);
}

/* Body · 14px regular default per doc */
p, .text-body { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; font-weight: 400; }
.text-sm   { font-size: 12px; line-height: 1.4; }
.text-md   { font-size: 16px; line-height: 1.6; }
.text-lg   { font-size: 18px; line-height: 1.4; }

.lede  {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-blue-300);
  max-width: 60ch;
  font-weight: 400;
}
.body  { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--color-blue-300); }
.small { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: var(--color-blue-300); }
.mono  { font-family: var(--font-sans); }   /* no separate mono in Nebor system */

/* Common gradient utilities (from doc) */
.bg-gradient-warm   { background: linear-gradient(135deg, var(--color-yellow-grad-2) 0%, var(--color-yellow-grad-1) 100%); }
.bg-gradient-violet { background: linear-gradient(135deg, var(--color-second-grad-1) 0%, var(--color-second-grad-2) 100%); }

/* Buttons · VERBATIM from nebor-design-system.md "Primary CTA" spec.
   Dark #16282D fill, padding 10/24, radius 8, hover: violet-500 bg + chevron
   reveal + horizontal squeeze to 10/12. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 24px;
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--transition-button),
    color var(--transition-button),
    padding var(--transition-button),
    gap var(--transition-button);
}
.btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 14px;
  opacity: 0;
  overflow: hidden;
  transition:
    width var(--transition-button),
    opacity var(--transition-button);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
}

.btn-primary {
  background-color: var(--color-cta);
  color: var(--color-white);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-violet-500);
  color: var(--color-white);
  padding: 10px 12px;
  gap: 6px;
}
.btn-primary:hover .arrow,
.btn-primary:focus-visible .arrow { width: 14px; opacity: 1; }

/* Light variant · white pill on light surfaces, violet on hover */
.btn-ghost {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-blue-50);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-violet-500);
  color: var(--color-white);
  padding: 10px 12px;
  gap: 6px;
  border-color: transparent;
}
.btn-ghost:hover .arrow,
.btn-ghost:focus-visible .arrow { width: 14px; opacity: 1; }

/* Accent · alias to primary */
.btn-accent { background-color: var(--color-cta); color: var(--color-white); }
.btn-accent:hover {
  background-color: var(--color-violet-500);
  color: var(--color-white);
  padding: 10px 12px;
  gap: 6px;
}
.btn-accent:hover .arrow { width: 14px; opacity: 1; }

/* Glass card primitive · flatter, calmer */
.glass {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-lg);
}
.glass-dark {
  background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--paper) 8%, transparent);
  border-radius: var(--r-lg);
  color: var(--paper);
}

/* Section */
.section { padding: 96px 0; position: relative; }
.section-tight { padding: 72px 0; }
.section-pad-sm { padding: 48px 0; }
.section-paper {
  background: var(--paper-warm);
}
/* Soft violet wash · restrained, supports content */
.section-violet {
  background: var(--color-violet-100);
  position: relative;
}
/* Soft warm wash */
.section-warm {
  background: var(--color-yellow-grad-2);
  position: relative;
}
.section-ink { background: var(--ink); color: var(--paper); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--paper); }
.section-ink .lede, .section-ink .body { color: rgba(255, 255, 255, 0.72); }

/* Section cap */
.section-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.section-cap .left { max-width: 720px; }
.section-cap.center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-cap.center .left { max-width: 720px; }
.section-cap .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
}

/* Grid helpers */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 80px 0; }
}

/* Surface card */
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 28px;
}

/* ====================== NAV · floating sticky pill ====================== */
.nav {
  position: sticky;
  top: 16px;
  z-index: 50;
  margin: 0 24px;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 12px 0 22px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 8px 28px -10px rgba(23, 42, 45, 0.14);
  max-width: 1280px;
  margin: 0 auto;
}
.nav .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav .brand img {
  height: 26px;
  width: auto;
  display: block;
}
.nav-cta {
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.nav-cta:hover { background: var(--ink-night); transform: translateY(-1px); }

/* Nav links · minimalist nebor.ai style */
.nav-links {
  display: inline-flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--ink); }
@media (max-width: 880px) { .nav-links { display: none; } }

/* ====================== PROCESS STRIP · how an engagement runs ====================== */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
  align-items: start;   /* each card sizes independently · hover only grows the hovered card */
}
.process::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  top: 38px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    var(--ink-5) 10%,
    var(--ink-5) 90%,
    transparent);
  z-index: 0;
  border-radius: 1px;
}
.proc-step {
  position: relative;
  z-index: 1;
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color 0.22s ease,
    border-radius 0.22s ease,
    box-shadow 0.22s ease;
}
.proc-step:hover {
  border-color: var(--page-accent, var(--color-violet-500));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--page-accent, var(--color-violet-500)) 36%, transparent);
  z-index: 20;
}

/* Hover-reveal block · absolutely positioned dropdown so neighbors stay put */
.proc-step .proc-extra {
  position: absolute;
  top: calc(100% - 1px);
  left: -1px;
  right: -1px;
  background: var(--color-base);
  border: 1px solid transparent;
  border-top: 1px dashed transparent;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 0 22px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 19;
  pointer-events: none;
  transition: max-height 0.28s ease, opacity 0.20s ease, padding 0.28s ease;
}
.proc-step:hover .proc-extra {
  max-height: 460px;
  opacity: 1;
  padding: 14px 22px 22px;
  border-color: var(--page-accent, var(--color-violet-500));
  border-top-color: var(--color-blue-50);
  pointer-events: auto;
  box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--page-accent, var(--color-violet-500)) 36%, transparent);
}
.proc-extra-block + .proc-extra-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-blue-50);
}
.proc-extra-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-300);
  font-weight: 600;
  margin-bottom: 6px;
}
.proc-extra-block.see  .proc-extra-label { color: var(--page-accent-strong, var(--color-purple-700)); }
.proc-extra-block.need .proc-extra-label { color: var(--color-blue-400); }
.proc-extra ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proc-extra li {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-blue-400);
  padding-left: 14px;
  position: relative;
}
.proc-extra li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--page-accent, var(--color-violet-500));
}
.proc-extra-block.need li::before { background: var(--color-blue-200); }
.proc-step .proc-num {
  position: absolute;
  top: -16px;
  left: 22px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--page-accent, var(--color-violet-500));
  color: var(--page-accent-strong, var(--color-purple-700));
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--color-base);
}
/* Last step gets ink fill so the row reads "warm-up steps → final state" */
.proc-step:last-child .proc-num {
  background: var(--color-text);
  color: var(--color-base);
}
.proc-step .proc-when {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin-top: 24px;
}
.proc-step h4 {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.proc-step p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr 1fr; }
  .process::before { display: none; }
}
@media (max-width: 540px) {
  .process { grid-template-columns: 1fr; }
}

/* ====================== TIER SWITCHER · sticky bottom-center floating pill ====================== */
.tier-switch-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
  animation: tierSwitchIn 0.4s ease 0.2s both;
}
@keyframes tierSwitchIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tier-switcher {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(23, 42, 45, 0.10);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  box-shadow: 0 12px 32px -10px rgba(23, 42, 45, 0.14);
}
.tier-switcher a {
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-blue-300);
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.tier-switcher a:hover { color: var(--color-text); }
.tier-switcher a.active {
  background: var(--color-violet-500);
  color: var(--color-text);
}
@media (max-width: 760px) {
  .tier-switch-bar { bottom: 16px; max-width: calc(100vw - 32px); }
  /* Wrapping turned the switcher into a three-row block sitting over the page.
     Keep it on one row and shrink it to fit instead. The glass was also too
     see-through on a phone, so page content read straight through the labels. */
  .tier-switcher { flex-wrap: nowrap; justify-content: center; background: rgba(255, 255, 255, 0.93); }
  .tier-switcher a { padding: 6px 10px; font-size: 11.5px; }
}

/* ====================== FOOTER ====================== */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 96px 0 40px;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 10% 0%, color-mix(in srgb, var(--tier-soft) 18%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0.5;
}
.footer > .container { position: relative; z-index: 1; }
.footer h4 {
  color: var(--paper);
  font-size: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  margin-bottom: 16px;
}
.footer a {
  display: block;
  padding: 6px 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  transition: color 0.15s ease;
}
.footer a:hover { color: var(--paper); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.5);
}
.footer-brand img { height: 28px; filter: brightness(0) invert(1); margin-bottom: 16px; }

.rule { height: 1px; background: var(--line); border: none; margin: 0; }

/* ====================== HERO ELEMENTS · 3 illustrated cards inline below the hero ====================== */
/* Wider breakout wrapper so the 3 cards get more horizontal room than the 1180px hero-inner */
.hero-elements-wrap {
  max-width: 1500px;
  margin: 40px auto 0;
  padding: 0 20px;
  width: 100%;
}
/* === 3-COL GRID · all cards equal width === */
.hero-elements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
  width: 100%;
}
/* === NEW COMPOSITION · canvas fills the whole card, text overlay at the bottom === */
.hero-el {
  position: relative;
  display: block;
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  border-radius: 22px;
  overflow: hidden;
  padding-top: 130%;  /* height locked to width; %-padding can never run height-to-width like aspect-ratio does in fixed-height contexts (Framer canvas) */
  transition:
    border-color 0.26s ease,
    transform 0.26s ease,
    box-shadow 0.26s ease;
  text-decoration: none;
  color: inherit;
}
.hero-el:hover {
  transform: translateY(-3px);
  border-color: var(--page-accent, var(--color-violet-500));
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--page-accent, var(--color-violet-500)) 42%, transparent);
}

/* === Canvas fills entire card · NEAR-WHITE with whisper of tint at top === */
.hero-el-canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-accent-soft) 30%, #FBFAF8) 0%,
      #FBFAF8 70%,
      #FFFFFF 100%);
  overflow: hidden;
}
.hero-el-canvas::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(23,42,45,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,42,45,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: 0.55;
}
.hero-el-canvas svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* === Card content · overlay at bottom of canvas with frosted-glass reveal === */
.hero-el-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 28%,
    rgba(255,255,255,0.94) 65%,
    rgba(255,255,255,1) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Body text hidden by default · slides up on hover as a preview reveal */
.hero-el-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.05s,
    margin 0.3s ease;
}
.hero-el:hover .hero-el-body {
  max-height: 100px;
  opacity: 1;
  margin: 6px 0 0;
}
.hero-el:hover .hero-el-content {
  padding-top: 32px;
  padding-bottom: 30px;
}
.hero-el-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 12px 5px 10px;
  background: var(--page-accent-soft, var(--color-brown-200));
  border: 1px solid color-mix(in srgb, var(--page-accent-strong, var(--color-blue-500)) 20%, transparent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--page-accent-strong, var(--color-blue-500));
  font-weight: 700;
  line-height: 1;
}
.hero-el-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--page-accent-strong, var(--color-blue-500));
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--page-accent, var(--color-orange-500)) 35%, transparent);
}
.hero-el-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
  margin: 4px 0 0;
}
.hero-el-body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-blue-300);
  margin: 0;
}
.hero-el-foot {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--page-accent-strong, var(--color-purple-700));
  letter-spacing: -0.005em;
}
.hero-el-foot .arrow { transition: transform 0.22s ease; }
.hero-el:hover .hero-el-foot .arrow { transform: translateX(4px); }

/* === Shared SVG illustration primitives · flat on light canvas === */
.heroviz-chip {
  fill: #FFFFFF;
  stroke: rgba(23,42,45,0.10);
  stroke-width: 1;
}
.heroviz-chip-dark { fill: var(--color-text); }
.heroviz-text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  fill: var(--color-text);
}
.heroviz-text-mute {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--color-blue-300);
  font-weight: 500;
}
.heroviz-favicon {
  filter: drop-shadow(0 1px 2px rgba(23,42,45,0.08));
}
.heroviz-line {
  stroke: var(--page-accent, var(--color-violet-500));
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 5;
  opacity: 0.75;
  /* Continuously animated dash offset = "data flowing" along the connector */
  animation: heroviz-flow 1.8s linear infinite;
}
@keyframes heroviz-flow {
  to { stroke-dashoffset: -16; }
}
.hero-el:hover .heroviz-line {
  animation-duration: 0.9s;  /* speeds up on hover */
  opacity: 0.95;
}
/* heroviz-pulse hover override removed · animation is disabled entirely below */
.heroviz-line-solid {
  stroke: var(--page-accent, var(--color-violet-500));
  stroke-width: 1.4;
  fill: none;
  opacity: 0.75;
}
.heroviz-dot {
  fill: var(--page-accent, var(--color-violet-500));
}
.heroviz-ring {
  fill: none;
  stroke: var(--page-accent-strong, var(--color-purple-700));
  stroke-width: 1;
  opacity: 0.45;
}
/* heroviz-pulse · animation disabled (popping dots removed). Class kept as a no-op so existing HTML doesn't break. */
.heroviz-pulse,
.heroviz-pulse-2,
.heroviz-pulse-3 {
  animation: none;
}

/* heroviz-pulse-on · explicit opt-in for elements that SHOULD pulse (e.g., the Orchestrate orb). */
@keyframes heroviz-pulse-on {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.75; }
}
@keyframes heroviz-pulse-ring {
  0%   { transform: scale(0.92); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}
.heroviz-pulse-on {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroviz-pulse-on 1.8s ease-in-out infinite;
}
.heroviz-pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroviz-pulse-ring 1.8s ease-out infinite;
}

/* === Per-card color variants · MODERN SaaS trio (indigo · cyan · coral) === */
/* v-indigo: deep modern indigo · Linear / Stripe / Cursor energy */
.hero-el-v-indigo {
  --page-accent: #6366F1;          /* indigo-500 */
  --page-accent-strong: #3730A3;   /* indigo-800 */
  --page-accent-soft: #E0E7FF;     /* indigo-100 */
}
/* v-cyan: fresh sophisticated cyan · data/analytics energy */
.hero-el-v-cyan {
  --page-accent: #06B6D4;          /* cyan-500 */
  --page-accent-strong: #155E75;   /* cyan-800 */
  --page-accent-soft: #CFFAFE;     /* cyan-100 */
}
/* v-coral: warm coral pop · the warm anchor of the trio */
.hero-el-v-coral {
  --page-accent: #FB7185;          /* rose-400 / coral */
  --page-accent-strong: #9F1239;   /* rose-900 */
  --page-accent-soft: #FFE4E6;     /* rose-100 */
}

/* === Centered CTA below the 3 cards · larger + more prominent === */
.hero-elements-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  width: 100%;
}
.hero-elements-cta .btn {
  padding: 22px 44px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 999px;
  box-shadow: 0 18px 38px -18px color-mix(in srgb, var(--color-text) 55%, transparent);
}
.hero-elements-cta .btn .arrow { font-size: 20px; margin-left: 4px; }

@media (max-width: 980px) {
  .hero-elements { grid-template-columns: 1fr; gap: 12px; }
  .hero-el { padding-top: 0; height: 430px; }
  .hero-el-canvas { height: 340px; }
}

/* ====================== KEY ELEMENTS (3 per page, zigzag rows) ====================== */
.key-elements {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.key-el {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px dashed var(--color-blue-50);
}
.key-el:last-child { border-bottom: none; }
/* Zigzag: every other row flips text/visual */
.key-el:nth-child(even) .key-el-text   { order: 2; }
.key-el:nth-child(even) .key-el-visual { order: 1; }

.key-el-text { display: flex; flex-direction: column; gap: 14px; max-width: 52ch; }
.key-el-num {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--page-accent-strong, var(--color-purple-700));
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.key-el-num::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--page-accent, var(--color-violet-500));
  border-radius: 1px;
}
.key-el-title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}
.key-el-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-blue-300);
  margin: 0;
}
.key-el-body + .key-el-body { margin-top: -2px; }

/* Visual frame · clean paper card with subtle border, contained */
.key-el-visual {
  position: relative;
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  border-radius: var(--r-xl);
  padding: 32px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 32px -16px rgba(23, 42, 45, 0.10);
}
.key-el-visual::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--page-accent, var(--color-violet-500));
  pointer-events: none;
}

/* === Shared primitives used across the 9 visuals === */

/* Chip · small label with optional accent border */
.ke-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
}
.ke-chip.accent {
  background: var(--page-accent-soft, var(--color-violet-100));
  border-color: var(--page-accent, var(--color-violet-500));
  color: var(--page-accent-strong, var(--color-purple-700));
}
.ke-chip .ke-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--page-accent, var(--color-violet-500));
  flex-shrink: 0;
}

/* Hub · bigger labelled node */
.ke-hub {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--page-accent-soft, var(--color-violet-100));
  border: 1px solid var(--page-accent, var(--color-violet-500));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--page-accent) 38%, transparent);
}
.ke-hub b {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}
.ke-hub span {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--page-accent-strong, var(--color-purple-700));
  font-weight: 600;
}

/* Arrow */
.ke-arrow {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--page-accent, var(--color-violet-500));
  font-weight: 600;
}

/* Subtle pulse for living conceptual diagrams */
@keyframes kePulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--page-accent, var(--color-violet-500)) 18%, transparent); }
}
.ke-pulse { animation: kePulse 2.4s ease-in-out infinite; }

@media (max-width: 880px) {
  .key-el { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .key-el:nth-child(even) .key-el-text { order: 1; }
  .key-el:nth-child(even) .key-el-visual { order: 2; }
  .key-el-visual { min-height: 260px; padding: 24px; }
}

/* ====================== TESTIMONIAL · logo-led card, no italic ====================== */
.testimonial-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  border-radius: var(--r-xl);
  padding: 36px 40px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px -20px rgba(23, 42, 45, 0.12);
}
.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-violet-500), var(--color-orange-500));
}
.testimonial-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.testimonial-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-purple-500), var(--color-orange-500));
  color: var(--color-base);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-purple-500) 32%, transparent);
}
.testimonial-co-name {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.testimonial-co-meta {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--color-blue-300);
  margin-top: 2px;
  letter-spacing: 0;
}
.testimonial-text {
  font-family: var(--font-sans);   /* not italic, not serif */
  font-style: normal;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 28px;
  max-width: 56ch;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.testimonial-text b { font-weight: 600; color: var(--color-text); }
.testimonial-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--color-blue-50);
  flex-wrap: wrap;
}
.testimonial-by { display: flex; align-items: center; gap: 12px; }
.testimonial-by-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-violet-300);
  color: var(--color-purple-700);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.testimonial-by-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}
.testimonial-by-role {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--color-blue-300);
  margin-top: 2px;
}
.testimonial-metric {
  text-align: right;
  padding-left: 24px;
  border-left: 1px solid var(--color-blue-50);
}
.testimonial-metric-num {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-purple-700);
  line-height: 1;
}
.testimonial-metric-lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-blue-300);
  margin-top: 6px;
  font-weight: 500;
}
@media (max-width: 700px) {
  .testimonial-card { padding: 28px 24px; }
  .testimonial-foot { flex-direction: column; align-items: flex-start; }
  .testimonial-metric { padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid var(--color-blue-50); width: 100%; text-align: left; }
}

/* ====================== STATS · vibrant brand-color cycle ====================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat {
  padding: 28px 26px;
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}
/* Cycle through brand colors so the stat row reads as a brand spectrum */
.stat:nth-child(4n+1)::before {
  background: linear-gradient(180deg, var(--color-violet-200), transparent 70%);
}
.stat:nth-child(4n+2)::before {
  background: linear-gradient(180deg, var(--color-orange-100), transparent 70%);
}
.stat:nth-child(4n+3)::before {
  background: linear-gradient(180deg, var(--color-purple-100), transparent 70%);
}
.stat:nth-child(4n+4)::before {
  background: linear-gradient(180deg, var(--color-yellow-grad-2), transparent 70%);
}
.stat > * { position: relative; z-index: 1; }
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(23, 42, 45, 0.14);
  border-color: var(--color-violet-500);
}
.stat .num {
  font-family: var(--font-sans);
  font-size: 44px;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
}
.stat .num .serif {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--color-violet-500);
}
.stat .label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-blue-300);
  margin-top: 12px;
  line-height: 1.45;
  max-width: 28ch;
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ====================== FAQ · discrete paper cards, vibrant ====================== */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--color-base);
  border: 1px solid var(--color-blue-50);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 2px 6px rgba(23, 42, 45, 0.04);
}
.faq-item:hover {
  border-color: var(--color-violet-500);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.18);
}
.faq-item[open] {
  border-color: var(--color-purple-500);
  box-shadow: 0 12px 28px -10px rgba(139, 92, 246, 0.24);
}
.faq-item[open] summary {
  border-bottom: 1px solid color-mix(in srgb, var(--color-purple-500) 22%, transparent);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text);
  padding: 20px 24px;
  transition: border-color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .toggle {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--color-blue-50);
  background: var(--color-violet-100);
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-purple-700);
  flex-shrink: 0;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.faq-item[open] summary .toggle {
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--color-purple-500), var(--color-violet-500));
  color: var(--color-base);
  border-color: transparent;
}
.faq-item .ans {
  padding: 18px 24px 22px;
  color: var(--color-blue-300);
  max-width: 70ch;
  line-height: 1.65;
  font-size: 14.5px;
}

/* ====================== LOGO MARQUEE ====================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 32px 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink-2);
  opacity: 0.9;
  transition: all 0.25s ease;
}
.marquee-item:hover { opacity: 1; transform: translateY(-1px); }
.marquee-item .m-wm {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.marquee-item .m-name {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.marquee-item.icon-mark { gap: 10px; }
.marquee-item .glyph {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  flex-shrink: 0;
}

/* Icon-as-mask helper (used across pages) */
.ti {
  display: inline-block;
  width: var(--ti-size, 16px);
  height: var(--ti-size, 16px);
  background-color: var(--ti-color, currentColor);
  -webkit-mask: var(--ti-url) center / contain no-repeat;
          mask: var(--ti-url) center / contain no-repeat;
  flex-shrink: 0;
}

/* Favicon mark · rendered as <img> when no simple-icon is available */
.tfavi {
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
  vertical-align: middle;
}

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font-size: 12px;
  font-family: var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ====================== CTA banner · vivid brand gradient ====================== */
.cta-banner {
  background:
    linear-gradient(135deg, var(--color-second-grad-1) 0%, var(--color-second-grad-2) 100%),
    var(--color-base);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-2xl);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px -32px rgba(139, 92, 246, 0.30);
}
.cta-banner h2 { color: var(--color-text); }
.cta-banner .body { color: var(--color-blue-400); }
.cta-banner .accent-blob {
  position: absolute;
  right: -120px; top: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-purple-500) 0%, transparent 65%);
  filter: blur(50px);
  opacity: 0.40;
}
.cta-banner::after {
  content: "";
  position: absolute;
  left: -80px; bottom: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-orange-500) 0%, transparent 65%);
  filter: blur(50px);
  opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 900px) {
  .cta-banner { grid-template-columns: 1fr; padding: 40px 28px; }
}

/* Reveal */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 0.6s ease forwards; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.7; box-shadow: 0 0 0 8px transparent; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ====================== TOOL TOOLTIP (used by workflow) ====================== */
.tip {
  position: relative;
}
.tip[data-tip]:hover::before,
.tip[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.tip[data-tip]::before {
  content: attr(data-tip-name);
  position: absolute;
  left: 50%; bottom: calc(100% + 14px);
  transform: translate(-50%, 4px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 30;
}
.tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 44px);
  transform: translate(-50%, 4px);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 12px;
  width: max-content;
  max-width: 240px;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px -12px rgba(20,23,31,0.18);
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 29;
}