/* =========================================================
   Canexi Studios: design system
   Built on the "Architectural Precision & Electric Modernism"
   brand guide: forest green + electric cyan on an airy
   off-white surface, Inter for headlines/body, Hanken Grotesk
   for structural labels and UI text. Hairline borders and
   diffused tonal shadows instead of heavy drop shadows or
   gradient blur effects.
   ========================================================= */

:root {
  /* Surfaces */
  --bg: #faf8ff;
  --bg-soft: #f2f3ff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);

  /* Text */
  --text: #0f172a;
  --text-dim: #3f4944;
  --text-faint: #6f7973;

  /* Brand colors */
  --primary: #065f46;
  --primary-hover: #047857;
  --secondary: #047857;
  --electric: #0ea5e9;
  --electric-wash: #e0f2fe;
  --emerald-wash: #ecfdf5;
  --accent-solid: var(--primary);
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Dark surface: for on-brand dark sections (CTA band glow, any future
     dark block), pulled from the same forest-green family as --primary
     rather than a generic neutral black, so it reads as "our" dark. */
  --ink: #081b15;
  --ink-border: rgba(255, 255, 255, 0.08);

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-label: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1320px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);

  /* Motion: custom curves with real punch, standing in for the built-in
     ease/ease-in-out keywords everywhere something enters, exits, or
     moves on screen. Plain "ease" reads soft to the point of sluggish. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Intro ----------
   One-time full-screen wordmark intro on the homepage: holds briefly,
   then lifts away like a curtain to reveal the page (whose hero already
   has its own staged reveal, so the two hand off cleanly). Sits above
   absolutely everything, including the custom cursor. Skippable with a
   click; remembered per browser tab session so it doesn't replay every
   time you return to the homepage. Removed outright for anyone with
   prefers-reduced-motion, rather than just skipping the animation. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease 0.2s;
}

.intro.intro-out {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.intro-wordmark {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(32px, 6vw, 64px);
  letter-spacing: -0.03em;
  color: #f3fbf7;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.intro.intro-in .intro-wordmark {
  opacity: 1;
  transform: translateY(0);
}

.intro-wordmark span {
  color: #a6f2d1;
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* Ambient aura background: a handful of large, softly blurred brand-color
   blobs that drift slowly behind all scrolling content, fixed to the
   viewport. Pure CSS, no JS, no external runtime, respects reduced motion.
   Same idea as the Framer "Aura Background" component, reimplemented
   dependency-free with our own palette instead of pulling in React +
   Three.js + Framer's runtime. */
/* Vanta.js fog container: same fixed full-viewport slot as the CSS aura-bg
   fallback above it. JS only initializes Vanta on capable, non-mobile,
   motion-ok browsers; body.vanta-active hides the CSS version once the
   canvas is confirmed running so the two never show at once. */
.vanta-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Light scrim over the fog canvas so it reads as a soft accent behind the
   content instead of a saturated cloud fighting with text contrast. */
.vanta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 255, 0.72);
  pointer-events: none;
}

body.vanta-active .aura-bg {
  display: none;
}

.aura-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aura-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.aura-bg span:nth-child(1) {
  width: 560px;
  height: 560px;
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(6, 95, 70, 0.30), transparent 72%);
  animation: aura-drift-1 24s ease-in-out infinite;
}

.aura-bg span:nth-child(2) {
  width: 620px;
  height: 620px;
  top: -200px;
  right: -160px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.26), transparent 72%);
  animation: aura-drift-2 28s ease-in-out infinite;
}

.aura-bg span:nth-child(3) {
  width: 520px;
  height: 520px;
  bottom: -200px;
  left: 28%;
  background: radial-gradient(circle, rgba(4, 120, 87, 0.22), transparent 72%);
  animation: aura-drift-3 32s ease-in-out infinite;
}

@keyframes aura-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, 50px) scale(1.08); }
}

@keyframes aura-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 70px) scale(1.05); }
}

@keyframes aura-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -60px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .aura-bg span { animation: none; }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  position: relative;
  padding: 96px 0;
}

@media (max-width: 720px) {
  section { padding: 64px 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--electric);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-in-out), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

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

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 12px 28px -10px rgba(6, 95, 70, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* ---------- Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0 0;
  /* Sticky header's own box (the gap around the floating nav pill) needs
     the same translucent scrim as the pill itself - otherwise page
     content scrolling underneath is only hidden behind the pill shape
     and bleeds through, legible, in the corners around it. */
  background: rgba(250, 248, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(250, 248, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 10px 10px 22px;
  box-shadow: var(--shadow-sm);
}

.nav-logo {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  display: block;
  height: 46px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
}

.nav-links a {
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a.active {
  color: var(--primary);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  transition: transform 0.15s var(--ease-in-out);
}

.nav-toggle:active {
  transform: scale(0.9);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  /* Stays in the layout (display: flex) at all times so open/close can
     transition instead of snapping via display: none. Anchored top-right,
     matching where the toggle and "Book a call" pill actually sit, so it
     scales in from its own trigger rather than from a generic center. */
  .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    box-shadow: var(--shadow-lg);
    transform-origin: top right;
    opacity: 0;
    transform: scale(0.95) translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    /* Exit: quick, no lingering. */
    transition: opacity 150ms ease, transform 150ms ease-in, visibility 150ms;
  }

  .nav-links.nav-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
    pointer-events: auto;
    /* Enter: a touch slower, eased out so it feels like it's arriving
       rather than snapping into place. */
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 14px;
    width: 100%;
  }

  /* Book a call pill in the nav bar sits at the standard btn-sm size,
     which runs a couple px under the 44px touch-target minimum -
     bumped here rather than globally so desktop's btn-sm elsewhere
     keeps its tighter sizing. */
  .nav-cta .btn-sm {
    min-height: 44px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* Footer nav/contact links and the breadcrumb trail are plain inline
     text links with no padding, so their tap target is just the text's
     line-height (~17-19px) - well under the 44px touch minimum. Padding
     plus a matching negative margin grows the hit area without shifting
     anything visually or disturbing the surrounding gap/line spacing. */
  .footer-col a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }

  .breadcrumbs a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links.nav-open {
    transform: none;
    transition: opacity 150ms ease, visibility 150ms;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding: 24px 0 0;
}

/* ---------- Hero card ----------
   Full-bleed rounded card filled with a soft, slow-drifting mesh of
   blurred brand-color blobs (pure CSS, no image asset) instead of the
   flat off-white page background. Headline sits top-left over the
   darkest corner of the blend; the scrim guarantees that corner stays
   dark regardless of where the blobs have drifted to. CTAs are pinned
   to the bottom-right, mirroring how the reference site anchors its
   "discover more" pill + arrow. */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0e3a2c;
}

/* No-WebGL / blocked-canvas fallback: if the neural canvas never draws
   (unsupported, or blocked by a browser's fingerprinting protection,
   e.g. Brave Shields on localhost), this still reads as a deliberate
   background instead of a flat block. Sits behind the canvas; the
   canvas's own transparent pixels let a little of it show through even
   when the effect is working, which is fine, since it only ever gets
   more textured, not muddier. */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 15% 15%, rgba(14, 165, 233, 0.28), transparent 65%),
              radial-gradient(55% 70% at 85% 100%, rgba(166, 242, 209, 0.22), transparent 68%);
}

/* Blob-drift keyframes are still used by .footer-blob below, kept here. */
@keyframes hero-drift-1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(3vw, 2.5vw) scale(1.08); } }
@keyframes hero-drift-2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3.5vw, 1.5vw) scale(1.05); } }
@keyframes hero-drift-3 { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(2vw, -2vw) rotate(6deg); } }

/* ---------- Neural vortex canvas ----------
   Replaces the earlier blob-mesh + sine-glow combo in the hero. A single
   WebGL fractal noise field (rotated/summed sine layers, a well-known
   "neuro noise" shader technique) that reacts to the pointer in real
   time. Recolored from the original's purple/violet into forest-green
   and electric-cyan; brand guide bans purple outright. */
.neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(6, 15, 12, 0.62) 0%, rgba(6, 15, 12, 0.28) 32%, rgba(6, 15, 12, 0) 58%),
    linear-gradient(180deg, rgba(6, 15, 12, 0) 55%, rgba(6, 15, 12, 0.5) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding: 56px 56px 40px;
}

/* One-time staged entrance: eyebrow, then headline, then paragraph,
   then the CTA row, each rising/fading in with a slight stagger. The
   hero is visible on load (nothing to scroll past first), so this
   fires once on page load rather than on scroll-into-view like the
   .reveal sections further down the page. */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner .eyebrow {
    animation: hero-rise 0.7s var(--ease-out) both;
  }
  .hero-inner h1 {
    animation: hero-rise 0.8s 0.16s var(--ease-out) both;
  }
  .hero-inner .hero-sub {
    animation: hero-rise 0.8s 0.32s var(--ease-out) both;
  }
  .hero-cta-row {
    animation: hero-rise 0.7s 0.46s var(--ease-out) both;
  }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow-on-dark {
  color: rgba(255, 255, 255, 0.85);
}

.eyebrow-on-dark::before {
  background: #a6f2d1;
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  margin: 18px 0 20px;
  letter-spacing: -0.035em;
  color: #ffffff;
  /* The scrim below only guarantees contrast up to ~58% of the card's
     width; the neural canvas's bright core drifts and, on narrower
     cards where the headline wraps wider relative to the card, can pass
     directly behind the text past that point. A soft shadow keeps the
     headline readable regardless of where the glow sits. */
  text-shadow: 0 2px 20px rgba(6, 15, 12, 0.55), 0 1px 3px rgba(6, 15, 12, 0.5);
}

.hero h1 .grad {
  color: #eafff5;
}

.hero-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  text-shadow: 0 1px 12px rgba(6, 15, 12, 0.45);
}

.hero-cta-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 0 40px 40px;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: #f3fbf7;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-in-out), background 0.2s ease;
}

.btn-dark:hover {
  background: #0d2a20;
  transform: translateY(-2px);
}

.btn-dark:active {
  transform: scale(0.97);
}

.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #a6f2d1;
  color: var(--ink);
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-in-out);
}

.btn-circle:hover {
  transform: translateY(-2px) rotate(45deg);
}

.btn-circle:active {
  transform: scale(0.94) rotate(45deg);
}

@media (max-width: 720px) {
  .hero-card { min-height: 520px; border-radius: var(--radius-md); }
  .hero-inner { padding: 36px 28px 24px; }
  .hero-cta-row { padding: 0 28px 28px; }
}

/* ---------- Cards / grids ---------- */

.grid {
  display: grid;
  gap: 20px;
}

.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; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s var(--ease-in-out), box-shadow 0.2s ease;
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.card p {
  color: var(--text-dim);
  font-size: 15px;
}

/* ---------- Stacked expertise list (Shape-style) ---------- */

.stack-list {
  border-top: 1px solid var(--border);
}

.stack-item {
  position: relative;
  border-bottom: 1px solid var(--border);
  padding: 34px 46px 34px 20px;
  margin: 0 -20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
  cursor: pointer;
}

.stack-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--emerald-wash);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}

.stack-item:hover::before {
  transform: scaleX(1);
}

.stack-item h3 {
  font-size: clamp(26px, 4vw, 42px);
  transition: color 0.3s ease;
}

.stack-item:hover h3 {
  color: var(--primary);
}

.stack-item p {
  color: var(--text-dim);
  max-width: 420px;
  font-size: 15px;
}

.stack-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(-10px, -50%);
  font-size: 22px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.stack-item:hover .stack-arrow {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Staggered entrance: items cascade in one after another rather than
   appearing as a single block. */
.stack-item.reveal:nth-child(1) { transition-delay: 0s; }
.stack-item.reveal:nth-child(2) { transition-delay: 0.08s; }
.stack-item.reveal:nth-child(3) { transition-delay: 0.16s; }
.stack-item.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Section headings ---------- */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  max-width: 620px;
}

.section-head p {
  color: var(--text-dim);
  max-width: 380px;
  font-size: 15px;
}

/* ---------- Process / how-we-work steps ----------
   Four-up icon pipeline: no connecting rail - each card carries a small
   custom line icon plus a "01"-style tag, since the icon is doing the
   "at a glance" work a numeral alone can't. An <ol>/<li> with a CSS
   counter drives that tag rather than hardcoded text, so screen readers
   get the real step count and the numbering can't drift out of sync if
   a step is ever added, removed, or reordered. Falls back to a single
   column at the same 900px breakpoint .grid-4 already uses elsewhere on
   the site. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

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

.step {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.step-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
  display: block;
  margin-bottom: 18px;
}

.step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.step-num {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.step-num::before {
  content: counter(step, decimal-leading-zero);
}

.step-head h3 {
  font-size: 17px;
  margin: 0;
}

.step > p {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}

/* ---------- FAQ ---------- */

.faq-item {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

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

.faq-item h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.faq-item p {
  color: var(--text-dim);
  font-size: 15px;
}

/* ---------- CTA band ----------
   Dark-on-brand section (forest-black, not neutral black) so the
   chromatic glow canvas below has the contrast it needs to read as
   a glow. The radial-gradient ::before is the no-WebGL / reduced-
   motion fallback wash; it stays under the canvas at all times and
   is the only thing that shows if WebGL init fails. */

.cta-band {
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(65% 100% at 20% 100%, rgba(16, 185, 129, 0.22), transparent 70%),
              radial-gradient(55% 90% at 90% 0%, rgba(14, 165, 233, 0.16), transparent 72%);
  pointer-events: none;
}

.glow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.cta-band h2 {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  color: #f3fbf7;
}

.cta-band p {
  color: rgba(238, 247, 242, 0.72);
  max-width: 520px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
}

.cta-band .hero-actions {
  justify-content: center;
  position: relative;
  z-index: 1;
}

.cta-band .btn-ghost {
  color: #f3fbf7;
  border-color: rgba(255, 255, 255, 0.28);
}

.cta-band .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.44);
}

/* ---------- Footer ---------- */

/* ---------- Footer ----------
   Same construction as the hero card: a dark base with blurred,
   slow-drifting brand-color blobs behind a scrim, so the footer reads
   as a continuation of the hero's visual language rather than a flat
   black bar. Unlike the hero card this is a true full-bleed section
   (no rounded corners, no side inset) with the company name set huge
   and edge-to-edge at the bottom, per the reference site. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: #0e3a2c;
  padding: 56px 0 28px;
  margin-top: 40px;
}

.footer-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(7vw);
  will-change: transform;
}

.footer-blob.b1 { width: 46vw; height: 46vw; left: -14vw; top: -22vw; background: var(--primary); animation: hero-drift-1 26s ease-in-out infinite alternate; }
.footer-blob.b2 { width: 40vw; height: 40vw; right: -12vw; top: 10%; background: var(--electric); animation: hero-drift-2 30s ease-in-out infinite alternate; }
.footer-blob.b3 { width: 34vw; height: 34vw; left: 38%; bottom: -16vw; background: #a6f2d1; opacity: 0.75; animation: hero-drift-3 34s ease-in-out infinite alternate; }

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

.footer-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 15, 12, 0.1) 0%, rgba(6, 15, 12, 0.55) 65%, rgba(6, 15, 12, 0.88) 100%);
}

.footer-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  flex: 1;
}

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

.footer-col h4 {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.footer-col ul {
  display: grid;
  gap: 10px;
}

.footer-col a, .footer-col p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
}

.footer-col a {
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: #a6f2d1;
}

.back-to-top {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #f3fbf7;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-in-out);
}

.back-to-top:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: scale(0.92);
}

.footer-wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(64px, 13vw, 200px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  white-space: nowrap;
  color: #ffffff;
  margin: 28px 0 0;
  padding-left: 24px;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  padding: 10px 24px 0;
}

@media (max-width: 720px) {
  .footer-wordmark { font-size: clamp(38px, 15vw, 72px); padding-left: 20px; }
  .back-to-top { width: 40px; height: 40px; }
  .footer-top { align-items: flex-start; }
}

/* ---------- Floating badge (Shape-style rotating "let's talk") ---------- */

.floating-badge {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 112px;
  height: 112px;
  z-index: 90;
}

.floating-badge svg {
  width: 100%;
  height: 100%;
  animation: spin 14s linear infinite;
}

.floating-badge text {
  fill: var(--text-dim);
}

.floating-badge .badge-core {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-in-out), background 0.2s ease;
}

.floating-badge .badge-core:hover {
  background: var(--primary-hover);
}

.floating-badge .badge-core:active {
  transform: scale(0.9);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .floating-badge { display: none; }
}

/* ---------- Custom cursor ---------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--text);
}

/* Fires on hover in/out of every link, button, and card - a "tens of
   times a day" interaction, so the grow-on-hover has to be cheap. Sized
   to the larger (hovering) state and scaled down by default, so the
   size change animates via transform instead of width/height - GPU
   compositing only, no layout/paint on every hover. */
.cursor-ring {
  width: 60px;
  height: 60px;
}

.cursor-ring-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  transform: scale(0.6);
  transition: transform 0.2s var(--ease-in-out), border-color 0.2s ease, background 0.2s ease;
}

body.cursor-active .cursor-ring.hovering .cursor-ring-inner {
  transform: scale(1);
  border-color: var(--electric);
  background: var(--electric-wash);
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Page header (inner pages) ---------- */

.page-header {
  padding: 64px 0 20px;
}

.page-header .eyebrow {
  margin-bottom: 16px;
}

.page-header h1 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 780px;
}

.page-header .lede {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 640px;
  margin-top: 20px;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
  font-size: 13.5px;
  color: var(--text-faint);
  padding-top: 20px;
}

.breadcrumbs a {
  transition: color 0.15s ease;
}

.breadcrumbs a:hover {
  color: var(--primary);
}

/* ---------- Form ---------- */

.form-grid {
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

label {
  display: block;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}

input, textarea, select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--electric);
  box-shadow: 0 0 0 3px var(--electric-wash);
}

.field-error {
  color: var(--error);
  font-size: 13px;
  margin-top: 6px;
  display: none;
}

.field.invalid .field-error {
  display: block;
}

.field.invalid input,
.field.invalid textarea {
  border-color: var(--error);
}

.form-status {
  margin-top: 18px;
  font-size: 15px;
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
}

.form-status.show {
  display: block;
}

.form-status.success {
  background: var(--emerald-wash);
  color: var(--primary);
  border: 1px solid rgba(6, 95, 70, 0.25);
}

.form-status.error {
  background: var(--error-container);
  color: var(--on-error-container);
  border: 1px solid rgba(186, 26, 26, 0.25);
}

/* ---------- Custom-build intake (services.html #custom-build) ----------
   A two-stage card: the problem-description form, then (on a successful
   SheetDB submit) Calendly's inline widget, lazy-loaded only once it's
   actually needed - see the "Custom-build intake form" block in main.js.
   Not built as a .card since the card underneath isn't itself clickable;
   .card's hover-lift would be a false affordance here.

   Sized and proportioned like .cta-band below (same --ink shell, same
   full-container width, one even padding value) rather than a narrow
   centered box, so it sits at the same scale as every other full-bleed
   dark component on this page. The neural canvas is the form's actual
   background now - no inset glass panel sitting on top of it - so
   .custom-build-scrim exists purely to keep the labels/placeholder text
   readable over the busiest part of the shader; the fields themselves
   carry their own translucent fill for local contrast. */
.custom-build-card {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(6, 15, 12, 0.4);
  padding: 72px;
}
@media (max-width: 720px) { .custom-build-card { padding: 32px 20px; } }

.custom-build-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 8%, rgba(6, 15, 12, 0.18), rgba(6, 15, 12, 0.6) 75%);
  pointer-events: none;
}

.custom-build-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.custom-build-panel label {
  color: rgba(255, 255, 255, 0.82);
}

.custom-build-panel input,
.custom-build-panel textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f3fbf7;
}

.custom-build-panel input::placeholder,
.custom-build-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.custom-build-panel input:focus,
.custom-build-panel textarea:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.28);
}

.custom-build-panel .field-error {
  color: #ff9c9c;
}

.custom-build-panel .field.invalid input,
.custom-build-panel .field.invalid textarea {
  border-color: #ff9c9c;
}

.custom-build-panel .btn-primary {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px -10px rgba(6, 95, 70, 0.55);
}

.custom-build-stage[hidden] { display: none; }
.custom-build-stage { animation: custom-build-rise 0.4s var(--ease-out) both; }
@keyframes custom-build-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .custom-build-stage { animation: custom-build-fade 0.2s ease both; }
  @keyframes custom-build-fade { from { opacity: 0; } to { opacity: 1; } }
}

.custom-build-confirm { font-size: 15px; color: rgba(255, 255, 255, 0.82); margin: 0 0 20px; }
.custom-build-confirm span { color: #f3fbf7; font-weight: 600; }

.calendly-inline-widget { min-width: 280px; height: 700px; }

/* ---------- Blog ---------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

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

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-in-out), border-color 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.post-card:active {
  transform: scale(0.98);
}

.post-meta {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-card h3 {
  font-size: 22px;
}

.post-card p {
  color: var(--text-dim);
  font-size: 15px;
}

.post-card .btn-ghost {
  align-self: flex-start;
}

.post-body {
  max-width: 720px;
  margin: 0 auto;
}

.post-body h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  margin: 48px 0 18px;
}

.post-body h3 {
  font-size: clamp(19px, 2.6vw, 23px);
  margin: 32px 0 14px;
}

.post-body p {
  color: var(--text-dim);
  font-size: 17px;
  margin-bottom: 20px;
}

.post-body ul, .post-body ol {
  color: var(--text-dim);
  font-size: 17px;
  margin: 0 0 20px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.post-body li {
  list-style: disc;
}

.post-body ol li {
  list-style: decimal;
}

.post-body a {
  color: var(--electric);
  text-decoration: underline;
}

.post-body blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 20px;
  color: var(--text);
  font-size: 18px;
  margin: 28px 0;
}

.post-hero {
  text-align: left;
}

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 14.5px;
  margin-top: 24px;
}

.byline .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}

.post-sources {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-faint);
}

.post-sources a {
  color: var(--electric);
}

/* ---------- CRM demo (services.html #crm) ----------
   Interactive walkthrough of a sample CRM build: tabs across the top,
   a sidebar, a content pane that swaps per step. "Northline Supply"
   and every figure inside are a fictional illustration, disclosed in
   .crm-demo-caption below the widget - never a real client's data.
   Reuses the shared --ink/--ink-border/--primary/--electric/--radius-*
   tokens, plus the site's own .eyebrow-on-dark and .hero-scrim
   components directly rather than redefining them. */

.crm-demo {
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --on-dark: #f3fbf7;
  --on-dark-dim: rgba(238, 247, 242, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.5);
  margin-top: 48px;
}

.crm-demo-shell {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(6, 15, 12, 0.4);
}

.crm-demo-intro {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-start;
  padding: 28px 32px;
}

.crm-demo-intro-content { position: relative; z-index: 1; max-width: 480px; }

.crm-demo-intro-content h3 {
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700;
  margin: 10px 0 10px;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.crm-demo-intro-content h3 .grad { color: #a6f2d1; }
.crm-demo-intro-content p { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 400px; }

.crm-demo-tabs {
  position: relative; z-index: 1;
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
  background: rgba(0, 0, 0, 0.16);
}
@media (max-width: 760px) { .crm-demo-tabs { overflow-x: auto; } }

.crm-demo-tabs-row { display: grid; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) { .crm-demo-tabs-row { grid-template-columns: repeat(5, minmax(108px, 1fr)); } }

/* Sliding underline: one persistent node repositioned via transform on
   every tab change (never recreated), so it can actually animate between
   positions - a fresh box-shadow on a fresh button, by contrast, has no
   "before" state to transition from. Transform+width-in-px only, no
   layout-triggering properties. */
.crm-demo-tab-indicator {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--electric);
  transform: translateX(0) scaleX(0);
  transform-origin: left top;
  transition: transform 0.28s var(--ease-in-out);
  pointer-events: none;
}

.crm-demo-tab {
  appearance: none; background: none; border: none;
  border-right: 1px solid var(--ink-border);
  text-align: left; padding: 14px 16px; cursor: pointer;
  transition: background 0.2s ease, transform 0.12s var(--ease-out);
}
.crm-demo-tabs-row .crm-demo-tab:last-child { border-right: none; }
.crm-demo-tab:hover { background: rgba(255, 255, 255, 0.03); }
.crm-demo-tab:active { transform: scale(0.97); }
.crm-demo-tab .n {
  display: block; font-family: var(--font-label); font-size: 12px; font-weight: 700;
  color: var(--on-dark-faint); font-variant-numeric: tabular-nums; margin-bottom: 5px;
}
.crm-demo-tab .n .tick { color: #a6f2d1; }
.crm-demo-tab .t { display: block; font-family: var(--font-label); font-size: 13.5px; font-weight: 600; color: var(--on-dark-dim); }
.crm-demo-tab.done { box-shadow: inset 0 -2px 0 #a6f2d1; }
.crm-demo-tab.done .t { color: var(--on-dark); }
.crm-demo-tab.active { background: rgba(14, 165, 233, 0.07); }
.crm-demo-tab.active .t { color: var(--on-dark); }
.crm-demo-tab.active .n { color: #7dd3fc; }

.crm-demo-body { position: relative; z-index: 1; display: grid; grid-template-columns: 190px 1fr; min-height: 380px; }
@media (max-width: 640px) { .crm-demo-body { grid-template-columns: 1fr; } .crm-demo-sidebar { display: none; } }

.crm-demo-sidebar { border-right: 1px solid var(--ink-border); padding: 18px 12px; }
.crm-demo-client { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.crm-demo-client .mono {
  width: 28px; height: 28px; border-radius: 8px; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px; color: #fff; flex-shrink: 0;
}
.crm-demo-client .name { font-family: var(--font-label); font-weight: 700; font-size: 14px; color: var(--on-dark); line-height: 1.2; }
.crm-demo-client .sub { font-size: 10.5px; color: var(--on-dark-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.crm-demo-nav { display: grid; gap: 2px; }
.crm-demo-nav a {
  display: block; padding: 9px 8px; border-radius: 8px; font-size: 13.5px;
  color: var(--on-dark-dim); text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s var(--ease-out);
}
.crm-demo-nav a.current { background: var(--panel-strong); color: var(--on-dark); }
.crm-demo-nav a:active { transform: scale(0.96); }

/* min-width: 0 overrides the grid item's default min-width: auto, which
   otherwise sizes this track to fit its widest un-shrinkable descendant
   (the kanban board) and forces the whole card wider than the viewport
   on mobile, where crm-demo-shell's overflow: hidden then silently
   clips a third of the panel off-screen instead of reflowing it. */
.crm-demo-panel { padding: 26px 28px 30px; min-width: 0; }
.crm-demo-panel h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--on-dark); letter-spacing: -0.01em; }
.crm-demo-sub { font-size: 13.5px; color: var(--on-dark-dim); margin: 0 0 18px; max-width: 460px; }
.crm-demo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.crm-demo-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-demo-search {
  flex: 1; min-width: 140px; max-width: 220px; background: var(--panel); border: 1px solid var(--ink-border);
  border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12.5px; color: var(--on-dark-faint);
}
.crm-demo-chip {
  background: var(--panel); border: 1px solid var(--ink-border); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; color: var(--on-dark-dim); font-family: var(--font-label); font-weight: 600;
  white-space: nowrap;
}
.crm-demo-spacer { flex: 1; }
.crm-demo-add {
  background: var(--primary); color: #fff; border: none; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: var(--font-label); white-space: nowrap;
}
.crm-demo-stat { font-size: 12.5px; color: var(--on-dark-dim); }
.crm-demo-stat b { color: var(--on-dark); }
.crm-demo-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-label);
  font-weight: 600; color: #a6f2d1; background: rgba(166, 242, 209, 0.12); border-radius: 999px; padding: 5px 11px;
}
.crm-demo-toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a6f2d1; }

.crm-demo-av {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: 9px; font-weight: 700; color: #04241a; flex-shrink: 0;
}
.crm-demo-av.c1 { background: #a6f2d1; }
.crm-demo-av.c2 { background: #5eead4; }
.crm-demo-av.c3 { background: #86efac; }

.crm-demo-screen { animation: crm-demo-rise 0.35s var(--ease-out) both; }
@keyframes crm-demo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.crm-demo-kanban-scroll { overflow-x: auto; padding-bottom: 4px; margin: 0 -2px; }
.crm-demo-kanban { display: grid; grid-template-columns: repeat(5, 168px); gap: 12px; }
.crm-demo-kcol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.crm-demo-kcol-head h4 { font-family: var(--font-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin: 0; }
.crm-demo-kcol-head .crm-demo-sum { font-size: 10.5px; color: var(--on-dark-faint); font-variant-numeric: tabular-nums; }
.crm-demo-kcard { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; animation: crm-demo-rise 0.4s var(--ease-out) both; }
.crm-demo-kcard .nm { font-size: 12.5px; font-weight: 600; color: var(--on-dark); margin-bottom: 4px; }
.crm-demo-kcard .row2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm-demo-kcard .val { font-size: 12px; color: var(--on-dark-dim); }
.crm-demo-kcard .meta3 { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.crm-demo-kcard .day { font-size: 10px; color: var(--on-dark-faint); }
.crm-demo-kcard .tag { display: inline-block; font-size: 10px; font-family: var(--font-label); font-weight: 600; padding: 2px 6px; border-radius: 999px; background: rgba(166, 242, 209, 0.16); color: #a6f2d1; }
.crm-demo-kcard.lost { opacity: 0.5; }
.crm-demo-kcard.lost .val { text-decoration: line-through; }
.crm-demo-kcard.lost .tag { background: rgba(255, 255, 255, 0.06); color: var(--on-dark-faint); }

.crm-demo-log { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--ink-border); border-radius: var(--radius-md); padding: 4px 0; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crm-demo-log-row { display: grid; grid-template-columns: 56px 20px 1fr 84px 88px 56px; gap: 8px; align-items: center; padding: 8px 16px; color: var(--on-dark-dim); animation: crm-demo-rise 0.4s var(--ease-out) both; border-top: 1px solid rgba(255, 255, 255, 0.04); min-width: 344px; }
.crm-demo-log-row:first-child { border-top: none; }
.crm-demo-log-row .t { color: var(--on-dark-faint); }
.crm-demo-log-row .who { color: var(--on-dark); font-family: var(--font); font-size: 12.5px; }
.crm-demo-log-row .who span { display: block; color: var(--on-dark-faint); font-size: 10.5px; font-family: var(--font); }
.crm-demo-log-row .src { color: #a6f2d1; font-size: 11px; }
.crm-demo-log-row .ok { text-align: right; }
.crm-demo-score { font-size: 9.5px; font-family: var(--font-label); font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.crm-demo-score.hot { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.crm-demo-score.warm { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.crm-demo-score.cold { background: rgba(255, 255, 255, 0.07); color: var(--on-dark-faint); }
.crm-demo-log-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--on-dark-faint); }
.crm-demo-mini-tiles { display: flex; gap: 12px; margin-top: 16px; }

.crm-demo-tile { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 14px 16px; flex: 1; }
.crm-demo-tile .label { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 6px; }
.crm-demo-tile .value { font-size: 20px; font-weight: 700; color: var(--on-dark); font-family: var(--font-label); }
.crm-demo-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .crm-demo-tiles-grid { grid-template-columns: 1fr; } }
.crm-demo-tile.big { grid-column: span 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
@media (max-width: 640px) { .crm-demo-tile.big { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 8px; } }
.crm-demo-tile.big .value { font-size: 30px; }
.crm-demo-tile.big .delta { color: #a6f2d1; font-size: 13.5px; font-weight: 600; }
.crm-demo-chart-wrap { text-align: right; }
.crm-demo-chart-labels { display: flex; justify-content: space-between; width: 132px; margin-top: 2px; }
.crm-demo-chart-labels span { font-size: 9px; color: var(--on-dark-faint); font-family: var(--font-label); }

.crm-demo-activity { margin-top: 14px; display: grid; gap: 0; border-top: 1px solid var(--ink-border); }
.crm-demo-activity-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 12.5px; animation: crm-demo-rise 0.4s var(--ease-out) both; }
.crm-demo-activity-row .dot4 { width: 5px; height: 5px; border-radius: 50%; background: #a6f2d1; margin-top: 5px; flex-shrink: 0; }
.crm-demo-activity-row .txt { color: var(--on-dark-dim); flex: 1; }
.crm-demo-activity-row .txt b { color: var(--on-dark); font-weight: 600; }
.crm-demo-activity-row .when { color: var(--on-dark-faint); font-size: 11.5px; white-space: nowrap; }

.crm-demo-seq { display: grid; gap: 8px; }
.crm-demo-seq-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 10px 13px; animation: crm-demo-rise 0.4s var(--ease-out) both; }
.crm-demo-seq-row .day { font-family: var(--font-label); font-size: 11px; font-weight: 700; color: var(--on-dark-faint); width: 42px; flex-shrink: 0; }
.crm-demo-seq-row .chan { font-size: 9.5px; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-faint); background: rgba(255, 255, 255, 0.06); border-radius: 5px; padding: 2px 5px; flex-shrink: 0; }
.crm-demo-seq-row .desc-wrap { flex: 1; }
.crm-demo-seq-row .desc { font-size: 12.5px; color: var(--on-dark); display: block; }
.crm-demo-seq-row .branch { font-size: 11px; color: var(--on-dark-faint); display: block; margin-top: 2px; }
.crm-demo-seq-row .status { font-family: var(--font-label); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.crm-demo-seq-row .status.sent { background: rgba(166, 242, 209, 0.16); color: #a6f2d1; }
.crm-demo-seq-row .status.due { background: rgba(14, 165, 233, 0.16); color: #7dd3fc; }
.crm-demo-seq-row .status.scheduled { background: rgba(255, 255, 255, 0.08); color: var(--on-dark-dim); }

.crm-demo-report-brief { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; }
.crm-demo-report-brief .tag { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a6f2d1; margin-bottom: 8px; }
.crm-demo-report-brief p { margin: 0; font-size: 13.5px; color: var(--on-dark); }

.crm-demo-breakdown { margin-top: 16px; }
.crm-demo-breakdown h4 { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin: 0 0 10px; }
.crm-demo-bk-row { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 8px; }
.crm-demo-bk-row .lbl { font-size: 12px; color: var(--on-dark-dim); font-family: var(--font-label); font-weight: 600; }
.crm-demo-bk-track { display: block; background: rgba(255, 255, 255, 0.06); border-radius: 999px; height: 8px; overflow: hidden; }
.crm-demo-bk-fill { display: block; height: 100%; background: #a6f2d1; border-radius: 999px; }
.crm-demo-bk-row .pct { font-size: 12px; color: var(--on-dark); text-align: right; font-variant-numeric: tabular-nums; }

.crm-demo-caption { text-align: center; font-size: 13px; color: var(--text-faint); margin-top: 18px; }

@media (max-width: 720px) {
  .crm-demo-intro { padding: 24px 22px; }
}

/* ---------- CMS demo (services.html #cms) ----------
   Same shell as the CRM demo above: tabs, sidebar, a swapping content
   pane. Same fictional "Northline Supply" illustration, disclosed via
   the shared .crm-demo-caption below the widget. Namespaced under its
   own .cms-demo-* prefix so it can sit on the same page as the CRM
   demo without colliding (each widget's JS binds to its own tab/nav/
   panel class, see main.js). Reuses --ink/--ink-border/--primary/
   --electric/--radius-* plus .eyebrow-on-dark and .hero-scrim. */

.cms-demo {
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --on-dark: #f3fbf7;
  --on-dark-dim: rgba(238, 247, 242, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.5);
  margin-top: 48px;
}

.cms-demo-shell {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(6, 15, 12, 0.4);
}

.cms-demo-intro {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-start;
  padding: 28px 32px;
}

.cms-demo-intro-content { position: relative; z-index: 1; max-width: 480px; }

.cms-demo-intro-content h3 {
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700;
  margin: 10px 0 10px;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cms-demo-intro-content h3 .grad { color: #a6f2d1; }
.cms-demo-intro-content p { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 400px; }

.cms-demo-tabs {
  position: relative; z-index: 1;
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
  background: rgba(0, 0, 0, 0.16);
}
@media (max-width: 760px) { .cms-demo-tabs { overflow-x: auto; } }

.cms-demo-tabs-row { display: grid; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) { .cms-demo-tabs-row { grid-template-columns: repeat(5, minmax(108px, 1fr)); } }

.cms-demo-tab-indicator {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--electric);
  transform: translateX(0) scaleX(0);
  transform-origin: left top;
  transition: transform 0.28s var(--ease-in-out);
  pointer-events: none;
}

.cms-demo-tab {
  appearance: none; background: none; border: none;
  border-right: 1px solid var(--ink-border);
  text-align: left; padding: 14px 16px; cursor: pointer;
  transition: background 0.2s ease, transform 0.12s var(--ease-out);
}
.cms-demo-tabs-row .cms-demo-tab:last-child { border-right: none; }
.cms-demo-tab:hover { background: rgba(255, 255, 255, 0.03); }
.cms-demo-tab:active { transform: scale(0.97); }
.cms-demo-tab .n {
  display: block; font-family: var(--font-label); font-size: 12px; font-weight: 700;
  color: var(--on-dark-faint); font-variant-numeric: tabular-nums; margin-bottom: 5px;
}
.cms-demo-tab .n .tick { color: #a6f2d1; }
.cms-demo-tab .t { display: block; font-family: var(--font-label); font-size: 13.5px; font-weight: 600; color: var(--on-dark-dim); }
.cms-demo-tab.done { box-shadow: inset 0 -2px 0 #a6f2d1; }
.cms-demo-tab.done .t { color: var(--on-dark); }
.cms-demo-tab.active { background: rgba(14, 165, 233, 0.07); }
.cms-demo-tab.active .t { color: var(--on-dark); }
.cms-demo-tab.active .n { color: #7dd3fc; }

.cms-demo-body { position: relative; z-index: 1; display: grid; grid-template-columns: 190px 1fr; min-height: 380px; }
@media (max-width: 640px) { .cms-demo-body { grid-template-columns: 1fr; } .cms-demo-sidebar { display: none; } }

.cms-demo-sidebar { border-right: 1px solid var(--ink-border); padding: 18px 12px; }
.cms-demo-client { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.cms-demo-client .mono {
  width: 28px; height: 28px; border-radius: 8px; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px; color: #fff; flex-shrink: 0;
}
.cms-demo-client .name { font-family: var(--font-label); font-weight: 700; font-size: 14px; color: var(--on-dark); line-height: 1.2; }
.cms-demo-client .sub { font-size: 10.5px; color: var(--on-dark-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.cms-demo-nav { display: grid; gap: 2px; }
.cms-demo-nav a {
  display: block; padding: 9px 8px; border-radius: 8px; font-size: 13.5px;
  color: var(--on-dark-dim); text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cms-demo-nav a.current { background: var(--panel-strong); color: var(--on-dark); }

.cms-demo-panel { padding: 26px 28px 30px; min-width: 0; }
.cms-demo-panel h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--on-dark); letter-spacing: -0.01em; }
.cms-demo-sub { font-size: 13.5px; color: var(--on-dark-dim); margin: 0 0 18px; max-width: 460px; }
.cms-demo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.cms-demo-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cms-demo-search {
  flex: 1; min-width: 140px; max-width: 220px; background: var(--panel); border: 1px solid var(--ink-border);
  border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12.5px; color: var(--on-dark-faint);
}
.cms-demo-chip {
  background: var(--panel); border: 1px solid var(--ink-border); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; color: var(--on-dark-dim); font-family: var(--font-label); font-weight: 600;
  white-space: nowrap;
}
.cms-demo-spacer { flex: 1; }
.cms-demo-add {
  background: var(--primary); color: #fff; border: none; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: var(--font-label); white-space: nowrap;
}
.cms-demo-stat { font-size: 12.5px; color: var(--on-dark-dim); }
.cms-demo-stat b { color: var(--on-dark); }
.cms-demo-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-label);
  font-weight: 600; color: #a6f2d1; background: rgba(166, 242, 209, 0.12); border-radius: 999px; padding: 5px 11px;
}
.cms-demo-toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #a6f2d1; }

.cms-demo-av {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: 9px; font-weight: 700; color: #04241a; flex-shrink: 0;
}
.cms-demo-av.c1 { background: #a6f2d1; }
.cms-demo-av.c2 { background: #5eead4; }
.cms-demo-av.c3 { background: #86efac; }

.cms-demo-screen { animation: cms-demo-rise 0.35s var(--ease-out) both; }
@keyframes cms-demo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.cms-demo-kanban-scroll { overflow-x: auto; padding-bottom: 4px; margin: 0 -2px; }
.cms-demo-kanban { display: grid; grid-template-columns: repeat(5, 168px); gap: 12px; }
.cms-demo-kcol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.cms-demo-kcol-head h4 { font-family: var(--font-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin: 0; }
.cms-demo-kcol-head .cms-demo-sum { font-size: 10.5px; color: var(--on-dark-faint); font-variant-numeric: tabular-nums; }
.cms-demo-kcard { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; animation: cms-demo-rise 0.4s var(--ease-out) both; }
.cms-demo-kcard .nm { font-size: 12.5px; font-weight: 600; color: var(--on-dark); margin-bottom: 4px; }
.cms-demo-kcard .row2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cms-demo-kcard .val { font-size: 12px; color: var(--on-dark-dim); }
.cms-demo-kcard .meta3 { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.cms-demo-kcard .day { font-size: 10px; color: var(--on-dark-faint); }
.cms-demo-kcard .tag { display: inline-block; font-size: 10px; font-family: var(--font-label); font-weight: 600; padding: 2px 6px; border-radius: 999px; background: rgba(166, 242, 209, 0.16); color: #a6f2d1; }
.cms-demo-kcard.lost { opacity: 0.5; }
.cms-demo-kcard.lost .val { text-decoration: line-through; }
.cms-demo-kcard.lost .tag { background: rgba(255, 255, 255, 0.06); color: var(--on-dark-faint); }

.cms-demo-editor { display: grid; grid-template-columns: 1fr 220px; gap: 20px; }
@media (max-width: 640px) { .cms-demo-editor { grid-template-columns: 1fr; } }
.cms-demo-blocks { display: grid; gap: 8px; }
.cms-demo-block-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 10px 13px; animation: cms-demo-rise 0.4s var(--ease-out) both; }
.cms-demo-block-row .handle { color: var(--on-dark-faint); font-size: 12px; flex-shrink: 0; }
.cms-demo-block-row .kind { font-size: 9.5px; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-faint); background: rgba(255, 255, 255, 0.06); border-radius: 5px; padding: 2px 6px; flex-shrink: 0; width: 74px; text-align: center; }
.cms-demo-block-row .prev { flex: 1; font-size: 12.5px; color: var(--on-dark-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cms-demo-seo { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-md); padding: 16px; align-self: start; }
.cms-demo-seo h4 { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin: 0 0 12px; }
.cms-demo-seo-field { margin-bottom: 12px; }
.cms-demo-seo-field label { display: block; font-size: 10.5px; color: var(--on-dark-faint); margin-bottom: 4px; }
.cms-demo-seo-field .val { font-size: 12px; color: var(--on-dark); line-height: 1.4; }
.cms-demo-seo-field .count { display: block; font-size: 10px; color: var(--on-dark-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cms-demo-seo-score { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ink-border); }
.cms-demo-ring {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; color: #a6f2d1; flex-shrink: 0;
  background: rgba(166, 242, 209, 0.16); border: 1px solid rgba(166, 242, 209, 0.35);
}
.cms-demo-seo-score .lbl { font-size: 12px; color: var(--on-dark-dim); }
.cms-demo-seo-score .lbl span { display: block; font-size: 11px; color: #a6f2d1; font-weight: 600; margin-top: 2px; }

.cms-demo-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px) { .cms-demo-media-grid { grid-template-columns: repeat(2, 1fr); } }
.cms-demo-media-card { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); overflow: hidden; animation: cms-demo-rise 0.4s var(--ease-out) both; }
.cms-demo-media-thumb { height: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #04241a; }
.cms-demo-media-thumb.c1 { background: #a6f2d1; }
.cms-demo-media-thumb.c2 { background: #5eead4; }
.cms-demo-media-thumb.c3 { background: #86efac; }
.cms-demo-media-thumb.c4 { background: #7dd3fc; }
.cms-demo-media-info { padding: 9px 11px; }
.cms-demo-media-info .nm { font-size: 11.5px; font-weight: 600; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.cms-demo-media-info .meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--on-dark-faint); }
.cms-demo-media-info .usage { display: block; margin-top: 5px; font-size: 10px; color: #a6f2d1; }

.cms-demo-tile { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 14px 16px; flex: 1; }
.cms-demo-tile .label { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 6px; }
.cms-demo-tile .value { font-size: 20px; font-weight: 700; color: var(--on-dark); font-family: var(--font-label); }
.cms-demo-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .cms-demo-tiles-grid { grid-template-columns: 1fr; } }
.cms-demo-tile.big { grid-column: span 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
@media (max-width: 640px) { .cms-demo-tile.big { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 8px; } }
.cms-demo-tile.big .value { font-size: 30px; }
.cms-demo-tile.big .delta { color: #a6f2d1; font-size: 13.5px; font-weight: 600; }
.cms-demo-chart-wrap { text-align: right; }
.cms-demo-chart-labels { display: flex; justify-content: space-between; width: 132px; margin-top: 2px; }
.cms-demo-chart-labels span { font-size: 9px; color: var(--on-dark-faint); font-family: var(--font-label); }

.cms-demo-activity { margin-top: 14px; display: grid; gap: 0; border-top: 1px solid var(--ink-border); }
.cms-demo-activity-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 12.5px; animation: cms-demo-rise 0.4s var(--ease-out) both; }
.cms-demo-activity-row .dot4 { width: 5px; height: 5px; border-radius: 50%; background: #a6f2d1; margin-top: 5px; flex-shrink: 0; }
.cms-demo-activity-row .txt { color: var(--on-dark-dim); flex: 1; }
.cms-demo-activity-row .txt b { color: var(--on-dark); font-weight: 600; }
.cms-demo-activity-row .when { color: var(--on-dark-faint); font-size: 11.5px; white-space: nowrap; }

.cms-demo-seq { display: grid; gap: 8px; }
.cms-demo-seq-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-sm); padding: 10px 13px; animation: cms-demo-rise 0.4s var(--ease-out) both; }
.cms-demo-seq-row .day { font-family: var(--font-label); font-size: 11px; font-weight: 700; color: var(--on-dark-faint); width: 42px; flex-shrink: 0; }
.cms-demo-seq-row .chan { font-size: 9.5px; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-faint); background: rgba(255, 255, 255, 0.06); border-radius: 5px; padding: 2px 5px; flex-shrink: 0; }
.cms-demo-seq-row .desc-wrap { flex: 1; }
.cms-demo-seq-row .desc { font-size: 12.5px; color: var(--on-dark); display: block; }
.cms-demo-seq-row .branch { font-size: 11px; color: var(--on-dark-faint); display: block; margin-top: 2px; }
.cms-demo-seq-row .status { font-family: var(--font-label); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cms-demo-seq-row .status.sent { background: rgba(166, 242, 209, 0.16); color: #a6f2d1; }
.cms-demo-seq-row .status.due { background: rgba(14, 165, 233, 0.16); color: #7dd3fc; }
.cms-demo-seq-row .status.scheduled { background: rgba(255, 255, 255, 0.08); color: var(--on-dark-dim); }

.cms-demo-report-brief { background: var(--panel); border: 1px solid var(--ink-border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; }
.cms-demo-report-brief .tag { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a6f2d1; margin-bottom: 8px; }
.cms-demo-report-brief p { margin: 0; font-size: 13.5px; color: var(--on-dark); }

.cms-demo-breakdown { margin-top: 16px; }
.cms-demo-breakdown h4 { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-faint); margin: 0 0 10px; }
.cms-demo-bk-row { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 8px; }
.cms-demo-bk-row .lbl { font-size: 12px; color: var(--on-dark-dim); font-family: var(--font-label); font-weight: 600; }
.cms-demo-bk-track { display: block; background: rgba(255, 255, 255, 0.06); border-radius: 999px; height: 8px; overflow: hidden; }
.cms-demo-bk-fill { display: block; height: 100%; background: #a6f2d1; border-radius: 999px; }
.cms-demo-bk-row .pct { font-size: 12px; color: var(--on-dark); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .cms-demo-intro { padding: 24px 22px; }
}

/* Stagger: every row-list in both demos enters with the same 40ms cascade
   (previously only the kanban/log/media rows had this - the seq and
   activity rows just appeared all at once with the panel). */
.crm-demo-seq-row:nth-child(1), .crm-demo-activity-row:nth-child(1),
.cms-demo-seq-row:nth-child(1), .cms-demo-activity-row:nth-child(1), .cms-demo-block-row:nth-child(1) { animation-delay: 0ms; }
.crm-demo-seq-row:nth-child(2), .crm-demo-activity-row:nth-child(2),
.cms-demo-seq-row:nth-child(2), .cms-demo-activity-row:nth-child(2), .cms-demo-block-row:nth-child(2) { animation-delay: 40ms; }
.crm-demo-seq-row:nth-child(3), .crm-demo-activity-row:nth-child(3),
.cms-demo-seq-row:nth-child(3), .cms-demo-activity-row:nth-child(3), .cms-demo-block-row:nth-child(3) { animation-delay: 80ms; }
.crm-demo-seq-row:nth-child(4), .crm-demo-activity-row:nth-child(4),
.cms-demo-seq-row:nth-child(4), .cms-demo-activity-row:nth-child(4), .cms-demo-block-row:nth-child(4) { animation-delay: 120ms; }
.crm-demo-seq-row:nth-child(5), .crm-demo-activity-row:nth-child(5),
.cms-demo-seq-row:nth-child(5), .cms-demo-activity-row:nth-child(5), .cms-demo-block-row:nth-child(5) { animation-delay: 160ms; }
.crm-demo-seq-row:nth-child(6), .crm-demo-activity-row:nth-child(6),
.cms-demo-seq-row:nth-child(6), .cms-demo-activity-row:nth-child(6), .cms-demo-block-row:nth-child(6) { animation-delay: 200ms; }

/* Reduced motion: keep the opacity fade (it aids comprehension when
   content swaps), drop every transform - the rise-in translateY, the
   press scales, and the sliding tab indicator's movement. */
@media (prefers-reduced-motion: reduce) {
  .crm-demo-screen, .crm-demo-kcard, .crm-demo-seq-row, .crm-demo-activity-row,
  .cms-demo-screen, .cms-demo-kcard, .cms-demo-seq-row, .cms-demo-activity-row,
  .cms-demo-block-row, .cms-demo-media-card {
    animation: none;
    opacity: 1;
  }
  .crm-demo-tab, .crm-demo-nav a, .cms-demo-tab, .cms-demo-nav a {
    transition: background 0.15s ease, color 0.15s ease;
  }
  .crm-demo-tab:active, .cms-demo-tab:active,
  .crm-demo-nav a:active, .cms-demo-nav a:active {
    transform: none;
  }
  .crm-demo-tab-indicator, .cms-demo-tab-indicator {
    transition: none;
  }
}

/* ---------- Utility ---------- */

.mt-0 { margin-top: 0; }
.center { text-align: center; }
.text-dim { color: var(--text-dim); }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}