/* ============ RESET & VARIABLES ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 18px;
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root {
  --ink: #f6f7fb;
  --ink-raised: #ffffff;
  --panel: rgba(15, 23, 42, 0.05);
  --panel-strong: rgba(15, 23, 42, 0.085);
  --border: rgba(15, 23, 42, 0.14);
  --border-strong: rgba(15, 23, 42, 0.28);
  --paper: #12141c;
  --dim: #4b5266;
  --faint: #656c80;
  --signal: #4f8cff;
  --signal-cyan: #22d3ee;
  --grad: linear-gradient(115deg, #4f8cff 0%, #22d3ee 100%);
  --grad-btn: linear-gradient(90deg, #4f8cff 0%, #22d3ee 100%);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --container: 1240px;
  --font-display:
    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --accent-text: #1d4ed8;
  --nav-scrolled-bg: rgba(246, 247, 251, 0.86);
  --nav-base-bg: rgba(246, 247, 251, 0.5);
  --well: rgba(15, 23, 42, 0.045);
  --card-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="dark"] {
  --ink: #06070b;
  --ink-raised: #0d0f18;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --paper: #e8eaf2;
  --dim: #9ca5ba;
  --faint: #7b8296;
  --accent-text: #22d3ee;
  --nav-scrolled-bg: rgba(6, 7, 11, 0.78);
  --nav-base-bg: rgba(6, 7, 11, 0.42);
  --well: rgba(0, 0, 0, 0.15);
  --card-shadow: none;
}
.why-card,
.ai-card,
.workflow-card,
.industry-row,
.faq-row,
.roi-card,
.visualizer-shell {
  box-shadow: var(--card-shadow);
}
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition:
    background 0.35s ease,
    color 0.35s ease;
}
body * {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}
input,
textarea {
  font: inherit;
  color: inherit;
}
ul {
  list-style: none;
}
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) {
  .container {
    padding: 0 22px;
  }
}

/* ============ TYPOGRAPHY ============ */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1.08;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
/* Wide letter-spacing plus a small size reads as blurry on phones, so ease the
   spacing and hold the size steady rather than shrinking it further. */
@media (max-width: 600px) {
  .eyebrow {
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    gap: 8px;
  }
  .eyebrow::before {
    width: 12px;
  }
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--signal-cyan);
  opacity: 0.7;
}
.section-title {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  max-width: 680px;
}
.section-sub {
  color: var(--dim);
  font-size: 1.06rem;
  max-width: 580px;
  margin-top: 18px;
  line-height: 1.7;
}
.section-head {
  margin-bottom: 48px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .section-sub {
  margin-left: auto;
  margin-right: auto;
}
section {
  padding: 78px 0;
  position: relative;
  scroll-margin-top: 96px;
}
@media (max-width: 768px) {
  section {
    padding: 52px 0;
  }
  .section-head {
    margin-bottom: 32px;
  }
}
.mono {
  font-family: var(--font-mono);
}
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ============ UTILITIES ============ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--signal-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 1000;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  min-width: 165px;
  font-weight: 600;
  font-size: 0.94rem;
  font-family: var(--font-body);
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    background 0.25s,
    border-color 0.25s;
}
.btn-primary {
  background: var(--grad-btn);
  color: #04050a;
}
.btn-primary:hover {
  box-shadow: 0 10px 26px -8px rgba(79, 140, 255, 0.5);
  filter: brightness(1.06);
}
.btn-ghost {
  background: var(--panel);
  border-color: var(--border);
  color: var(--paper);
}
.btn-ghost:hover {
  background: var(--panel-strong);
  border-color: var(--border-strong);
}
.btn-sm {
  padding: 9px 16px;
  font-size: 0.85rem;
  min-width: 130px;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  transition:
    background 0.35s,
    border-color 0.35s,
    padding 0.35s;
  border-bottom: 1px solid transparent;
  background: var(--nav-base-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav.is-scrolled {
  background: var(--nav-scrolled-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  padding: 16px 40px;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
.nav-logo-icon {
  /* Was 26px -- too small to read as a brand mark. */
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Over half this logo's pixels are very dark, so on the dark theme it
   visually disappears. A brightness lift plus a subtle glow keeps the
   artwork's colour while making it legible against a near-black nav. */
[data-theme="dark"] .nav-logo-icon,
[data-theme="dark"] .footer-logo-icon{
  filter:brightness(1.55) saturate(1.15) drop-shadow(0 0 6px rgba(79,140,255,0.28));
}
.nav-logo-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin: 10px 0 14px;
}
.nav-links {
  display: flex;
  gap: 26px;
  font-size: 0.88rem;
  color: var(--dim);
  flex-wrap: nowrap;
  align-items: center;
}
.nav-links a {
  transition: color 0.2s;
  white-space: nowrap;
  position: relative;
  padding-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-links a:hover {
  color: var(--paper);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transition: right 0.25s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  right: 0;
}
.nav-dropdown-chevron {
  /* Was 6px at 0.55 opacity -- effectively invisible against the nav.
     Larger, thicker and fully opaque so it reads as an affordance. */
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.9;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-dropdown {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: -16px;
}
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
  transform: rotate(225deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 210px;
  padding: 8px;
  border-radius: 12px;
  background: var(--ink-raised);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s,
    transform 0.18s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}
.nav-dropdown:not(.nav-dropdown--mega):hover .nav-dropdown-menu,
.nav-dropdown:not(.nav-dropdown--mega):focus-within .nav-dropdown-menu,
.nav-dropdown:not(.nav-dropdown--mega).is-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a:not(.btn) {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--dim);
  white-space: nowrap;
  display: block;
}
.nav-dropdown-menu a::after {
  display: none;
}
.nav-dropdown-menu a:hover {
  background: var(--panel-strong);
  color: var(--paper);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.nav-right .btn {
  min-width: 0;
}
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-links {
    gap: 16px;
    font-size: 0.82rem;
  }
  .nav {
    padding-left: 26px;
    padding-right: 26px;
  }
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  margin: 0 auto;
  transition:
    transform 0.25s var(--ease),
    opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 80vw);
  z-index: 199;
  background: var(--ink-raised);
  border-left: 1px solid var(--border);
  padding: 100px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  overflow-y: auto;
}
.mobile-nav .btn {
  min-width: 0;
  width: 100%;
}
.mobile-nav.is-open {
  transform: translateX(0);
}
.mobile-nav a {
  padding: 14px 4px;
  font-size: 1rem;
  color: var(--paper);
  border-bottom: 1px solid var(--border);
}
.mobile-nav .btn {
  margin-top: 20px;
}
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(4, 5, 9, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 901px) {
  .mobile-nav,
  .mobile-nav-backdrop {
    display: none;
  }
}
.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  transition:
    border-color 0.2s,
    color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--paper);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
}
.theme-toggle .icon-sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}
.cta-short {
  display: none;
}
@media (max-width: 900px) {
  .nav {
    padding: 16px 22px;
  }
  .nav.is-scrolled {
    padding: 13px 22px;
  }
  .nav-links {
    display: none;
  }
  .nav-right .btn-ghost {
    padding: 10px 16px;
    font-size: 0.82rem;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-logo {
    font-size: 0.95rem;
    letter-spacing: 0;
  }
}
@media (max-width: 420px) {
  .cta-full {
    display: none;
  }
  .nav {
    padding: 14px 16px;
  }
  .nav-logo {
    font-size: 0.84rem;
    gap: 6px;
    letter-spacing: 0;
  }
  .nav-logo-icon {
    width: 32px;
    height: 32px;
  }
  .nav-right {
    gap: 10px;
  }
  .cta-short {
    display: inline;
  }
  .nav-right {
    gap: 10px;
  }
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 110px;
  padding-bottom: 110px;
}
.hero-bg-glow {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      circle at 22% 24%,
      rgba(79, 140, 255, 0.16),
      transparent 46%
    ),
    radial-gradient(
      circle at 78% 66%,
      rgba(34, 211, 238, 0.11),
      transparent 46%
    );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 62%,
    transparent 92%
  );
  mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 92%);
}
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 70%,
    transparent 96%
  );
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 96%);
}
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
}
.hero .eyebrow {
  justify-content: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  max-width: 1020px;
  margin: 0 auto 26px;
}
.hero h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero p.lead {
  font-size: 1.12rem;
  color: var(--dim);
  max-width: 600px;
  margin: 0 auto 28px;
}
.hero-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 34px;
  position: relative;
  z-index: 3;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}
.hero-services span:not([aria-hidden]) {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel-strong);
  color: var(--paper);
}
.hero-services span[aria-hidden] {
  color: var(--faint);
}
@media (max-width: 600px) {
  .hero-services {
    font-size: 0.76rem;
    gap: 8px;
  }
  .hero-services span:not([aria-hidden]) {
    padding: 5px 11px;
  }
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}
.hero-trust-note {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: 28px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .hero-trust-note {
    font-size: 0.78rem;
    max-width: 340px;
  }
}
.hero-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(9, 11, 18, 0.96);
  border: 1px solid var(--border-strong);
  padding: 9px 13px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: #e8eaf2;
  white-space: nowrap;
  transform: translate(-50%, -145%);
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 5;
}
.hero-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(9, 11, 18, 0.96);
}
.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.scroll-cue-line {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--faint), transparent);
  animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue {
  0% {
    opacity: 0;
    transform: scaleY(0.4);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}
@media (max-width: 768px) {
  .hero {
    padding-top: 90px;
  }
  #heroCanvas {
    opacity: 0.6;
  }
}

/* ============ WHY US ============ */
.why-section {
  padding-top: 76px;
}
.why-lead-wrap {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.why-card {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.3s;
}
.why-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
  transform: translateY(-3px);
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 8px;
}
.why-card p {
  font-size: 0.95rem;
  color: var(--dim);
  line-height: 1.65;
}
@media (max-width: 768px) {
  .why-section {
    padding-top: 52px;
  }
}

/* ============ VISUALIZER (signature section) ============ */
.visualizer-section {
  padding: 100px 0;
}
.visualizer-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}
.visualizer-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}
.module-palette {
  border-right: 1px solid var(--border);
  padding: 26px 20px;
  background: var(--well);
}
.palette-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
.palette-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.palette-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: grab;
  font-size: 0.82rem;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.palette-chip:hover {
  background: var(--panel-strong);
  border-color: var(--border-strong);
  transform: translateX(2px);
}
.palette-chip:active {
  cursor: grabbing;
}
.palette-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.canvas-wrap {
  position: relative;
  min-height: 520px;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(79, 140, 255, 0.08),
      transparent 55%
    ),
    var(--ink-raised);
  overflow: hidden;
}
.canvas-wrap.is-dragover {
  outline: 2px dashed var(--signal-cyan);
  outline-offset: -2px;
}
.canvas-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
#connSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#nodesLayer {
  position: absolute;
  inset: 0;
}
.wf-node {
  position: absolute;
  width: 172px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink-raised);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.wf-node:hover {
  border-color: var(--border-strong);
}
.wf-node.is-selected {
  border-color: var(--signal-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.wf-node:active {
  cursor: grabbing;
}
.wf-node-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-strong);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.wf-node-label {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.25;
}
.wf-node-handle {
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-raised);
  border: 2px solid var(--signal);
  cursor: crosshair;
  transition:
    transform 0.2s,
    background 0.2s;
}
.wf-node-handle:hover {
  transform: translateY(-50%) scale(1.3);
  background: var(--signal);
}
.canvas-hint {
  position: absolute;
  left: 20px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--faint);
  max-width: 300px;
  line-height: 1.5;
  pointer-events: none;
}
.canvas-toolbar {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  gap: 8px;
}
.canvas-toolbar .btn {
  min-width: 0;
}
.node-info-panel {
  border-left: 1px solid var(--border);
  padding: 26px 22px;
  background: var(--well);
}
.info-empty {
  color: var(--faint);
  font-size: 0.92rem;
  line-height: 1.6;
}
.info-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-strong);
  border: 1px solid var(--border-strong);
  margin-bottom: 14px;
}
.node-info-panel h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.node-info-panel p {
  font-size: 0.94rem;
  color: var(--dim);
  line-height: 1.7;
}
@media (max-width: 1100px) {
  .visualizer-shell {
    grid-template-columns: 1fr;
  }
  .module-palette {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .palette-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .node-info-panel {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .canvas-wrap {
    min-height: 420px;
  }
}

/* ============ INDUSTRIES ============ */
.industries-section {
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  position: relative;
}
.industries-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, transparent 0%, var(--ink) 72%),
    radial-gradient(ellipse 60% 45% at 50% 100%, transparent 0%, var(--ink) 72%);
  pointer-events: none;
}
.industries-section > .container {
  position: relative;
  z-index: 1;
}
.industries-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.industry-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.25s;
}
.industry-row.is-open {
  border-color: var(--border-strong);
}
.industry-row-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  text-align: left;
}
.industry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.industry-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
}
.industry-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim);
  transform: rotate(-45deg);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.industry-row.is-open .industry-chevron {
  transform: rotate(45deg);
}
/* Same reasoning as the FAQ accordion below: max-height instead of the
   grid 0fr->1fr technique, so this reliably opens in every browser. */
.industry-body-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease);
}
.industry-row.is-open .industry-body-wrap {
  max-height: 3000px;   /* see note on the FAQ accordion below */
}
.industry-body {
  overflow: hidden;
  min-height: 0;
}
.industry-body-inner {
  padding: 0 22px 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.industry-problem {
  color: var(--dim);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.industry-opps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.industry-opps li {
  font-size: 0.95rem;
  color: var(--paper);
  padding-left: 16px;
  position: relative;
}
.industry-opps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1.5px;
  background: var(--signal-cyan);
}
.industry-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.stat-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
}
.stat-chip-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 2px;
}
.stat-chip-value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--paper);
  font-weight: 500;
}
.industry-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--dim);
}
@media (max-width: 640px) {
  .industry-row-head {
    padding: 15px;
  }
  .industry-name {
    font-size: 0.92rem;
  }
}

/* ============ WORKFLOW LIBRARY ============ */
.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  align-items: center;
}
.filter-chip {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--dim);
  transition: all 0.2s;
}
.filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--paper);
}
.filter-chip.is-active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.library-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--faint);
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.workflow-card {
  text-align: left;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s,
    background 0.3s;
  cursor: pointer;
}
.workflow-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--panel-strong);
}
.wf-card-dept {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 12px;
}
.wf-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 8px;
}
.wf-card-desc {
  font-size: 0.93rem;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 16px;
}
.wf-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.library-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 60px 20px;
  color: var(--dim);
}
.library-empty .btn {
  margin-top: 16px;
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 5, 9, 0.78);
  backdrop-filter: blur(6px);
  padding: 24px;
}
.modal-overlay.is-open {
  display: flex;
}
.modal {
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 36px;
  background: var(--ink-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--panel-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--dim);
}
.modal-close:hover {
  background: var(--border-strong);
  color: var(--paper);
}
.modal-eyebrow {
  margin-bottom: 14px;
}
.modal h3 {
  font-size: 1.4rem;
  margin-bottom: 22px;
  padding-right: 30px;
}
.modal-block {
  margin-bottom: 20px;
}
.modal-block-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.modal-block p {
  font-size: 0.97rem;
  color: var(--dim);
  line-height: 1.7;
}
.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.modal-stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.modal-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bar-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--faint);
  width: 48px;
  flex-shrink: 0;
}
.bar-track {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--panel-strong);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 4px;
  width: 0%;
  transition: width 0.9s var(--ease);
}
.bar-before {
  background: var(--faint);
  opacity: 0.55;
}
.bar-after {
  background: var(--grad);
}
.bar-value {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--accent-text);
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* ============ ECOSYSTEM ============ */
.ecosystem-section {
  padding: 68px 0;
}
.ecosystem-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}
.logo-chip {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--faint);
  transition:
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.logo-chip:hover {
  color: var(--paper);
  border-color: rgba(79, 140, 255, 0.5);
  box-shadow: 0 0 22px -6px rgba(79, 140, 255, 0.4);
}

/* ============ AI CAPABILITIES ============ */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.ai-card {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  transition:
    border-color 0.3s,
    background 0.3s;
}
.ai-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}
.ai-visual {
  height: 76px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--well);
  border: 1px solid var(--border);
}
.ai-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 8px;
}
.ai-card p {
  font-size: 0.94rem;
  color: var(--dim);
  line-height: 1.65;
}
.viz-bars {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  justify-content: center;
}
.viz-bars span {
  display: block;
  width: 8px;
  background: var(--grad);
  border-radius: 3px;
  animation: barpulse 1.4s ease-in-out infinite;
}
.viz-bars span:nth-child(1) {
  height: 40%;
  animation-delay: 0s;
}
.viz-bars span:nth-child(2) {
  height: 80%;
  animation-delay: 0.15s;
}
.viz-bars span:nth-child(3) {
  height: 55%;
  animation-delay: 0.3s;
}
.viz-bars span:nth-child(4) {
  height: 100%;
  animation-delay: 0.45s;
}
.viz-bars span:nth-child(5) {
  height: 65%;
  animation-delay: 0.6s;
}
.viz-bars span:nth-child(6) {
  height: 35%;
  animation-delay: 0.75s;
}
@keyframes barpulse {
  0%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.viz-scan {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(79, 140, 255, 0.08), transparent);
}
.viz-scan::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent 9px
  );
}
.viz-scan::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--signal-cyan);
  box-shadow: 0 0 14px 3px rgba(34, 211, 238, 0.8);
  animation: scanline 2.2s linear infinite;
}
@keyframes scanline {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}
.viz-pulse {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.viz-pulse span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--signal);
  animation: pulsedot 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px 2px rgba(79, 140, 255, 0.4);
}
.viz-pulse span:nth-child(2) {
  animation-delay: 0.2s;
  background: var(--signal-cyan);
}
.viz-pulse span:nth-child(3) {
  animation-delay: 0.4s;
}
.viz-pulse span:nth-child(4) {
  animation-delay: 0.6s;
  background: var(--signal-cyan);
}
@keyframes pulsedot {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
.viz-flow {
  position: relative;
  width: 100%;
  height: 100%;
}
.viz-flow-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.viz-flow span {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal-cyan);
  transform: translateY(-50%);
  animation: flowmove 2.4s linear infinite;
  box-shadow: 0 0 14px 3px rgba(34, 211, 238, 0.8);
}
.viz-flow span:nth-child(2) {
  animation-delay: 0.8s;
}
.viz-flow span:nth-child(3) {
  animation-delay: 1.6s;
}
@keyframes flowmove {
  0% {
    left: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.subtle-note {
  font-size: 0.85rem;
  color: var(--faint);
  margin-top: 10px;
}

/* ============ TRUST ============ */
/* Grid, not flex-wrap: with flex the final row leaves empty space that
   exposes the container's background as a grey block. A grid with equal
   columns and real gaps means partial rows simply end, with nothing behind
   them to show through. */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
}
.trust-card {
  background: var(--panel);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
:root[data-theme="light"] .trust-card {
  background: var(--ink-raised);
}
.trust-icon {
  margin-bottom: 14px;
}
.trust-card h3 {
  font-size: 1.04rem;
  font-weight: 600;
  margin-bottom: 7px;
  font-family: var(--font-display);
}
.trust-card p {
  font-size: 0.96rem;
  color: var(--dim);
  line-height: 1.6;
}

/* ============ TECH STACK ============ */
.techstack-section {
  padding: 56px 0;
  position: relative;
}
.techstack-section::before,
.techstack-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border) 20%,
    var(--border) 80%,
    transparent 100%
  );
}
.techstack-section::before {
  top: 0;
}
.techstack-section::after {
  bottom: 0;
}
.techstack-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 20px;
  text-align: center;
}
.techstack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}
.tech-chip {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--dim);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: 8px;
}

/* ============ ROI CALCULATOR ============ */
.roi-card {
  max-width: 1040px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--panel);
}
.roi-form {
  padding: 36px;
  border-right: 1px solid var(--border);
}
.roi-field {
  margin-bottom: 22px;
}
.roi-field label {
  display: block;
  font-size: 0.84rem;
  color: var(--dim);
  margin-bottom: 9px;
}
.roi-field-value {
  font-family: var(--font-mono);
  color: var(--accent-text);
  float: right;
}
.roi-field input[type="range"] {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  appearance: none;
  -webkit-appearance: none;
}
.roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.25);
}
.roi-field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.25);
}
.roi-results {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  background: rgba(79, 140, 255, 0.05);
}
.roi-result-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}
.roi-result-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.roi-result-label {
  font-size: 0.8rem;
  color: var(--dim);
  margin-bottom: 6px;
}
.roi-result-value {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.roi-disclaimer {
  font-size: 0.8rem;
  color: var(--faint);
  margin-top: 6px;
  line-height: 1.55;
}
@media (max-width: 800px) {
  .roi-card {
    grid-template-columns: 1fr;
  }
  .roi-form {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 560px) {
  .roi-form,
  .roi-results {
    padding: 26px;
  }
  .modal {
    padding: 24px;
    max-height: 88vh;
  }
  .modal h3 {
    font-size: 1.2rem;
  }
  .modal-close {
    top: 14px;
    right: 14px;
  }
}

/* ============ BOOKING ============ */
/* ============ PROCESS (how we work) ============ */
.process-section {
  padding-top: 0;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.process-step {
  background: var(--ink);
  padding: 28px 24px;
  position: relative;
}
.process-num {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-text);
  margin-bottom: 14px;
  display: block;
}
.process-step h3 {
  font-size: 0.96rem;
  margin-bottom: 8px;
}
.process-step p {
  font-size: 0.92rem;
  color: var(--dim);
  line-height: 1.65;
}
@media (max-width: 900px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ FAQ ============ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.25s;
}
.faq-row.is-open {
  border-color: var(--border-strong);
}
.faq-row-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  text-align: left;
}
.faq-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  flex: 1;
}
.faq-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim);
  transform: rotate(-45deg);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.faq-row.is-open .faq-chevron {
  transform: rotate(45deg);
}
/* Expand/collapse uses max-height rather than the newer grid-template-rows
   0fr->1fr trick. The grid version animates more precisely, but it silently
   fails to open at all on older browsers -- and an FAQ that doesn't open is
   far worse than one that animates slightly less smoothly. max-height works
   everywhere. The value just needs to exceed the tallest answer. */
.faq-body-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-row.is-open .faq-body-wrap {
  /* Generous ceiling: on mobile a project card's bullets, stats and tech
     stack all stack vertically and easily exceed 900px, which silently
     clipped the bottom of the card. This only needs to exceed the tallest
     panel -- it does not affect the closed state or the animation feel. */
  max-height: 3000px;
}
.faq-body {
  min-height: 0;
}
.faq-body-inner {
  padding: 0 22px 22px;
  color: var(--dim);
  font-size: 0.96rem;
  line-height: 1.72;
}
.trust-footnote {
  text-align: center;
  color: var(--faint);
  font-size: 0.86rem;
  margin-top: 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ============ FOOTER ============ */
footer {
  padding: 68px 0 30px;
  border-top: 1px solid var(--border);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.footer-brand {
  max-width: 280px;
}
.footer-brand p {
  color: var(--dim);
  font-size: 0.92rem;
  margin-top: 14px;
  line-height: 1.65;
}
.footer-coverage {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--faint);
  margin-top: 20px;
  letter-spacing: 0.02em;
}
.footer-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.footer-col-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.92rem;
  color: var(--dim);
  margin-bottom: 12px;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--paper);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.footer-copy {
  font-size: 0.85rem;
  color: var(--faint);
}
.social-links {
  display: flex;
  gap: 14px;
}
.social-links a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  transition: all 0.2s;
}
.social-links a:hover {
  color: var(--paper);
  border-color: var(--border-strong);
}
@media (max-width: 768px) {
  .footer-top {
    gap: 40px;
  }
  .footer-cols {
    gap: 36px;
  }
}
/* ============ NAV ACTIVE STATE ============ */
.nav-links a[aria-current="page"] {
  color: var(--paper);
}
.mobile-nav a[aria-current="page"] {
  color: var(--accent-text);
}

/* ============ SUB-PAGE HERO (Solutions/Industries/Use Cases/About/Contact) ============ */
.page-hero {
  padding: 150px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(79, 140, 255, 0.1),
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 60%,
      rgba(34, 211, 238, 0.08),
      transparent 42%
    );
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero .eyebrow {
  justify-content: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  max-width: 760px;
  margin: 0 auto 20px;
}
.page-hero p.lead {
  font-size: 1.08rem;
  color: var(--dim);
  max-width: 620px;
  margin: 0 auto;
}
.page-hero-crumb {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--faint);
  margin-bottom: 18px;
}
.page-hero-crumb a {
  color: var(--faint);
}
.page-hero-crumb a:hover {
  color: var(--paper);
}
@media (max-width: 768px) {
  .page-hero {
    padding: 120px 0 60px;
  }
}

/* ============ STAT BAND ============ */
.stat-band {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-band-item .stat-band-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--paper);
}
.stat-band-item .stat-band-label {
  font-size: 0.86rem;
  color: var(--dim);
  margin-top: 6px;
}
.stat-band-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--faint);
  margin-top: 20px;
}
@media (max-width: 800px) {
  .stat-band-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
}

/* ============ CHALLENGE CARDS ============ */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.challenge-card {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
}
.challenge-card h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.challenge-card p {
  font-size: 0.94rem;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 14px;
}
.challenge-impact {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-text);
  letter-spacing: 0.02em;
}
.challenge-impact::before {
  content: "Impact — ";
  color: var(--faint);
}

/* ============ SOLUTION CARDS (feature bullets + ROI tag) ============ */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.solution-card {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.solution-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.solution-card > p {
  font-size: 0.94rem;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 16px;
}
.solution-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  flex: 1;
}
.solution-features li {
  font-size: 0.88rem;
  color: var(--paper);
  padding-left: 18px;
  position: relative;
}
.solution-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 1.5px;
  background: var(--signal-cyan);
}
.solution-roi {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  color: var(--accent-text);
  align-self: flex-start;
}

/* ============ COMPLETE SUITE GRID ============ */
.suite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.suite-card {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
}
.suite-card h3 {
  font-size: 0.96rem;
  margin-bottom: 14px;
}
.suite-card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.suite-card li {
  font-size: 0.88rem;
  color: var(--dim);
  padding-left: 16px;
  position: relative;
}
.suite-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1.5px;
  background: var(--signal);
}

/* ============ TESTIMONIALS ============ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.testimonial-card {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
}
.testimonial-quote {
  font-size: 0.96rem;
  color: var(--paper);
  line-height: 1.65;
  margin-bottom: 20px;
}

.testimonial-quote::before {
  content: "\201C"; /* “ */
  color: var(--accent-text);
  font-size: 1.4rem;
  line-height: 0;
  position: relative;
  top: 6px;
  margin-right: 2px;
}

.testimonial-quote::after {
  content: "\201D"; /* ” */
  color: var(--accent-text);
  font-size: 1.4rem;
  line-height: 0;
  position: relative;
  top: 6px;
  margin-left: 2px;
}
.testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: #04050a;
  flex-shrink: 0;
}
.testimonial-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--paper);
}
.testimonial-role {
  font-size: 0.78rem;
  color: var(--faint);
}

/* ============ CTA BANNER ============ */
.cta-banner {
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(79, 140, 255, 0.12),
      transparent 55%
    ),
    radial-gradient(
      circle at 75% 70%,
      rgba(34, 211, 238, 0.09),
      transparent 55%
    );
  pointer-events: none;
}
.cta-banner-inner {
  position: relative;
  z-index: 1;
}
.cta-banner h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 600px;
  margin: 0 auto 14px;
}
.cta-banner p {
  color: var(--dim);
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 1rem;
}
.cta-banner-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .cta-banner {
    padding: 40px 26px;
  }
}

/* ============ USE-CASE STORY CARDS (Challenge/Solution/Result) ============ */
.story-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  background: var(--panel);
  margin-bottom: 20px;
}
.story-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
@media (max-width: 800px) {
  .story-blocks {
    grid-template-columns: 1fr;
  }
  .story-card {
    padding: 28px;
  }
}

/* ============ FOOTER LEGAL LINKS ============ */
.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ============ CARD ICON (unified graphic header for all card types) ============ */
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(79, 140, 255, 0.55);
}
.card-icon svg {
  width: 24px;
  height: 24px;
  stroke: #04050a;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.industry-icon.card-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 0;
}
.industry-icon.card-icon svg {
  width: 19px;
  height: 19px;
}
.trust-icon.card-icon {
  width: 40px;
  height: 40px;
}
.trust-icon.card-icon svg {
  width: 21px;
  height: 21px;
}

/* ============ SECTION BANDS (alternate background for visual rhythm) ============ */
.band {
  background: var(--panel-strong);
}

/* ============ CTA TRUST BADGES ============ */
.cta-badges {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
}

/* ============ BLOG ============ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.blog-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.blog-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.blog-card-body {
  padding: 24px;
}
.blog-card-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--faint);
  margin-bottom: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.blog-card-tag {
  color: var(--accent-text);
}
.blog-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  line-height: 1.3;
}
.blog-card p {
  font-size: 0.92rem;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 14px;
}
.blog-card-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-text);
}
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 20px;
}
.blog-featured-visual {
  background: var(--grad);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-featured-visual svg {
  width: 64px;
  height: 64px;
  stroke: #04050a;
  fill: none;
  stroke-width: 1.4;
}
.blog-featured-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 800px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured-visual {
    min-height: 140px;
  }
  .blog-featured-body {
    padding: 28px;
  }
}

/* ============ ARTICLE ============ */
.article-header {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.article-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--faint);
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.article-meta .blog-card-tag {
  color: var(--accent-text);
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--dim);
}
.article-body h2 {
  color: var(--paper);
  font-size: 1.5rem;
  margin: 40px 0 16px;
}
.article-body h3 {
  color: var(--paper);
  font-size: 1.2rem;
  margin: 32px 0 14px;
}
.article-body p {
  margin-bottom: 22px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-body li {
  padding-left: 4px;
}
.article-body strong {
  color: var(--paper);
  font-weight: 600;
}
.article-pullquote {
  border-left: 3px solid var(--signal-cyan);
  padding: 6px 0 6px 22px;
  margin: 32px 0;
  font-size: 1.15rem;
  color: var(--paper);
  font-style: italic;
}
.article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 40px;
  max-width: 720px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.article-related {
  max-width: 720px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.article-related h3 {
  font-size: 0.9rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  margin-bottom: 16px;
  font-weight: 600;
}
.article-related-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-related-links a {
  color: var(--paper);
  font-size: 0.98rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.article-related-links a:hover {
  color: var(--accent-text);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* ============ NUMBERED SOLUTION BREAKDOWN (Flowlyn-style full-funnel layout) ============ */
.solution-numbered-list {
  max-width: 840px;
}
.solution-numbered {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.solution-numbered:first-child {
  padding-top: 0;
}
.solution-numbered:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.solution-num-big {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent-text);
  opacity: 0.32;
  line-height: 1;
}
.solution-numbered-body h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.solution-numbered-body > p {
  color: var(--dim);
  margin-bottom: 20px;
  max-width: 660px;
  line-height: 1.7;
}
.solution-numbered-body ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
}
.solution-numbered-body li {
  color: var(--dim);
  line-height: 1.65;
  padding-left: 0;
}
.solution-numbered-body li::before {
  display: none;
}
.solution-numbered-body li strong {
  color: var(--paper);
  font-weight: 600;
}
.solution-numbered-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .solution-numbered {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .solution-num-big {
    font-size: 1.6rem;
    opacity: 0.5;
  }
}

/* ============ NAV MEGA MENU (Services) ============ */
.nav-dropdown--mega .nav-dropdown-menu {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: min(980px, 94vw);
  min-width: 0;
  padding: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.nav-dropdown--mega.is-open .nav-dropdown-menu,
.nav-dropdown--mega:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 28px 8px;
}
.nav-mega-col {
  padding: 0 14px;
  border-right: 1px solid var(--border);
}
.nav-mega-col:last-child {
  border-right: none;
}
.nav-mega-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.nav-mega-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-mega-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-mega-col-title {
  font-size: 0.92rem;
  color: var(--paper);
  font-weight: 600;
  font-family: var(--font-display);
}
.nav-mega-item {
  display: block;
  padding: 9px 8px;
  border-radius: 8px;
  margin: 0 -8px;
}
.nav-mega-item:hover {
  background: var(--panel-strong);
}
.nav-mega-item-title {
  display: block;
  font-size: 0.88rem;
  color: var(--paper);
  font-weight: 500;
  white-space: normal;
}
.nav-mega-item-desc {
  display: block;
  font-size: 0.76rem;
  color: var(--faint);
  margin-top: 2px;
  white-space: normal;
}
.nav-mega-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 28px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  border-radius: 0 0 16px 16px;
}
.nav-mega-footer strong {
  font-size: 0.9rem;
  color: var(--paper);
  display: block;
  margin-bottom: 3px;
}
.nav-mega-footer p {
  font-size: 0.8rem;
  color: var(--faint);
}
.nav-mega-footer .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .nav-mega-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav-mega-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .nav-dropdown--mega .nav-dropdown-menu {
    width: 94vw;
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* ============ WHY-CARD STAT LINE (proof line under each reason) ============ */
.why-card-stat {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-text);
}

/* ============ STAR RATING ============ */
.star-rating {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
}
.star-rating svg {
  width: 15px;
  height: 15px;
  fill: #f5b400;
  stroke: none;
}

/* ============ FEATURED CARD (expanded "flagship" highlight, Flowlyn-style) ============ */
.featured-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 40px;
  margin-top: 24px;
}
.featured-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.featured-card-head h3 {
  font-size: 1.3rem;
}
.featured-tagline {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-text);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
}
.featured-card > p {
  color: var(--dim);
  max-width: 640px;
  margin-bottom: 28px;
  line-height: 1.7;
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
.featured-features h4,
.featured-stats h4 {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 14px;
}
.featured-features ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.featured-features li {
  font-size: 0.92rem;
  color: var(--paper);
  padding-left: 18px;
  position: relative;
}
.featured-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 1.5px;
  background: var(--signal-cyan);
}
.featured-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.featured-stat {
  border-left: 2px solid var(--signal-cyan);
  padding-left: 12px;
}
.featured-stat-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--paper);
}
.featured-stat-label {
  font-size: 0.78rem;
  color: var(--faint);
}
.featured-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  margin-bottom: 22px;
}
.featured-tools-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--faint);
  margin-right: 4px;
}
@media (max-width: 800px) {
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .featured-card {
    padding: 28px;
  }
}

/* ============ FAQ PREVIEW (condensed, non-accordion teaser) ============ */
.faq-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  max-width: 920px;
}
.faq-preview-item h3 {
  font-size: 0.98rem;
  margin-bottom: 8px;
}
.faq-preview-item p {
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.6;
}
@media (max-width: 700px) {
  .faq-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ LEAD CAPTURE BENEFITS LIST (final CTA enhancement) ============ */
.cta-benefits {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 32px;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto 24px;
  text-align: left;
}
.cta-benefits li {
  font-size: 0.9rem;
  color: var(--paper);
  padding-left: 20px;
  position: relative;
}
.cta-benefits li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--signal-cyan);
  font-weight: 700;
}
@media (max-width: 560px) {
  .cta-benefits {
    grid-template-columns: 1fr;
  }
}

/* ============ PROCESS 6-STEP LAYOUT + COMMITMENT STRIP ============ */
.process-grid-6 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .process-grid-6 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .process-grid-6 {
    grid-template-columns: 1fr;
  }
}
.process-meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.process-duration {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--accent-text);
}
.process-delivers {
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.5;
}
.process-delivers strong {
  color: var(--dim);
}
.process-commitment {
  margin-top: 32px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--border);
  text-align: center;
}
.process-commitment h4 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.process-commitment > p {
  color: var(--dim);
  max-width: 560px;
  margin: 0 auto 24px;
  font-size: 0.94rem;
}
.process-commitment-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.palette-hint {
  font-size: 0.74rem;
  color: var(--faint);
  margin: 6px 0 14px;
  line-height: 1.5;
}

/* ============ CALENDLY EMBED ============ */
/* Fixed light card, intentionally not theme-dependent -- Calendly's free
   plan always renders its own light UI (no way to reskin it), so this frame
   is styled to always look intentional next to it, in both site themes. */
/* The Calendly widget renders its own white card with its own internal
   padding, so this wrapper adds NO padding of its own -- padding here was
   producing a visible white gutter around an already-white card. It only
   supplies the rounded corner, the shadow, and the clipping. */
.calendly-embed-card {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
}

/* ============ CONTACT CARDS ============ */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* ============ LEGAL PAGES ============ */
.legal-body {
  max-width: 760px;
  margin: 0 auto;
}
.legal-body h2 {
  font-size: 1.25rem;
  margin: 38px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.legal-body h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.legal-body h3 {
  font-size: 1rem;
  margin: 24px 0 8px;
  color: var(--paper);
}
.legal-body p {
  color: var(--dim);
  line-height: 1.75;
  margin-bottom: 14px;
  font-size: 0.96rem;
}
.legal-body ul {
  margin: 0 0 18px 0;
  padding-left: 0;
  list-style: none;
}
.legal-body li {
  color: var(--dim);
  line-height: 1.7;
  font-size: 0.94rem;
  padding-left: 18px;
  position: relative;
  margin-bottom: 7px;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1.5px;
  background: var(--signal-cyan);
}
.legal-body strong {
  color: var(--paper);
  font-weight: 600;
}
.legal-body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 460px;
}
.legal-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  color: var(--dim);
}
.legal-table tr:first-child td {
  background: var(--panel-strong);
  color: var(--paper);
  font-weight: 600;
}

/* ============ FOOTER ADDRESS BLOCK ============ */
.footer-address {
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.7;
  margin: 14px 0;
}
.footer-address a {
  color: var(--accent-text);
}

/* ============ TESTIMONIAL CREDIBILITY LAYER ============ */
.testimonial-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.testimonial-meta-top .star-rating {
  margin-bottom: 0;
}
.testimonial-verified {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--panel-strong);
  white-space: nowrap;
}
.testimonial-project {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 10px;
}
/* ============ TESTIMONIAL CAROUSEL ============ */
.testimonial-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.testimonial-head-row .section-head {
  margin-bottom: 0;
}
.testimonial-arrows {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.testimonial-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    opacity 0.25s var(--ease),
    transform 0.15s var(--ease);
}
.testimonial-arrow-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.testimonial-arrow-btn:hover {
  background: var(--panel-strong);
  border-color: var(--border-strong);
}
.testimonial-arrow-btn:active {
  transform: scale(0.93);
}
.testimonial-arrow-btn.is-disabled {
  opacity: 0.35;
}
.testimonial-carousel {
  position: relative;
}
.testimonial-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 14px;
  margin: -2px -2px -10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-track::-webkit-scrollbar {
  display: none;
}
.testimonial-track .testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
}
@media (max-width: 900px) {
  .testimonial-track .testimonial-card {
    flex: 0 0 calc((100% - 18px) / 2);
  }
}
@media (max-width: 640px) {
  .testimonial-track .testimonial-card {
    flex: 0 0 86%;
  }
  .testimonial-head-row {
    align-items: center;
  }
  .testimonial-arrow-btn {
    width: 38px;
    height: 38px;
  }
  .testimonial-arrow-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ============ FOUNDER / TEAM CARD ============ */
.founder-card {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--border);
}
.founder-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--grad-btn);
  color: #04050a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
}
.founder-body h3 {
  font-size: 1.15rem;
  margin-bottom: 2px;
}
.founder-role {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.founder-body p {
  color: var(--dim);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.founder-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
@media (max-width: 640px) {
  .founder-card {
    flex-direction: column;
    gap: 18px;
    padding: 26px;
  }
  .founder-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
  }
}
.founder-avatar-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* ============ LOGO MARQUEE (infinite scroll) ============ */
.logo-marquee-section {
  padding-top: 0;
}
.marquee {
  padding: 14px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Fade the strip out at both edges so logos don't hard-clip at the sides */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12%,
    black 88%,
    transparent 100%
  );
}
.marquee-track {
  display: flex;
  width: max-content;
  /* Duration must scale with track length, or a longer track just scrolls
     faster. One group is ~3200px, so ~45s gives a calm ~70px/second. */
  animation: marquee-scroll 45s linear infinite;
}
/* Each group holds one full set of logos. Two identical groups sit side by
   side and the track scrolls exactly one group's width, so the moment it
   resets the second group is already where the first was -- no visible jump. */
.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Negative translateX shifts the track leftward, so logos enter from the
   RIGHT edge and travel to the LEFT. To reverse the direction, swap the
   two transform values. */
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Pause on hover so someone can actually read a logo they spotted */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Client logo wall. No boxes -- boxed logos read as buttons and make a
   short roster look like a toolbar. Logos sit directly on the page with
   generous breathing room, which is how established agencies present
   client lists. */
.marquee-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 46px;
  flex-shrink: 0;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity .25s;
}
.marquee-item:hover { opacity: 1; }
.marquee-item img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 12px;
}
/* Dark logos can disappear against a dark background, so lift them slightly.
   Colour is preserved -- this only raises brightness. */
[data-theme="dark"] .marquee-item img {
  filter: brightness(1.12);
}
.marquee-item span {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.015em;
}

@media (max-width: 600px) {
  .marquee-item {
    padding: 0 26px;
    gap: 13px;
  }
  .marquee-item img {
    width: 50px;
    height: 50px;
  }
  .marquee-item span {
    font-size: 1.06rem;
  }
  .marquee-track {
    animation-duration: 34s;
  }
}

/* Respect reduced-motion: stop the scroll and let the strip wrap normally
   instead of animating, rather than leaving it frozen mid-scroll. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-group[aria-hidden="true"] {
    display: none;
  }
}

/* ============ VIDEO TESTIMONIALS (video left / text right) ============ */
.video-testimonials-section{padding:88px 0;}
.vt-head{text-align:center;max-width:820px;margin:0 auto 48px;}
.vt-eyebrow{
  font-family:var(--font-mono);font-size:0.82rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:16px;
}
.vt-title{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.15;letter-spacing:-0.02em;}
/* Second line picks up the brand accent -- same role the purple plays in the
   reference, but using this site's own colour so it stays on-brand. */
.vt-title-accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.vt-viewport{position:relative;max-width:1120px;margin:0 auto;}
.vt-track{display:flex;transition:transform .45s var(--ease);}
.vt-card{
  flex:0 0 100%;min-width:100%;
  display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1fr);
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
}
.vt-media{position:relative;background:#000;min-height:420px;}
.vt-media video{width:100%;height:100%;object-fit:cover;display:block;}
.vt-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;padding:0;border:none;background:none;cursor:pointer;
  transition:transform .25s,opacity .25s;
}
.vt-play svg{width:76px;height:76px;}
.vt-play circle{fill:var(--signal);}
.vt-play path{fill:#fff;}
.vt-play:hover{transform:translate(-50%,-50%) scale(1.07);}
.vt-media.is-playing .vt-play{opacity:0;pointer-events:none;}
.vt-media.is-playing .vt-person{opacity:0;transition:opacity .25s;}

.vt-body{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;}
.vt-quote{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.25;letter-spacing:-0.015em;margin-bottom:20px;}
.vt-text{color:var(--dim);font-size:1rem;line-height:1.75;}

.vt-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border);background:var(--ink-raised);color:var(--paper);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;
}
.vt-arrow:hover{border-color:var(--signal-cyan);background:var(--panel-strong);}
.vt-arrow svg{width:18px;height:18px;}
.vt-arrow-prev{left:-23px;}
.vt-arrow-next{right:-23px;}
.vt-arrow[hidden]{display:none;}

@media (max-width:900px){
  .vt-card{grid-template-columns:1fr;}
  .vt-media{min-height:320px;}
  .vt-body{padding:36px 28px;}
  .vt-arrow-prev{left:8px;}
  .vt-arrow-next{right:8px;}
}
@media (prefers-reduced-motion:reduce){ .vt-track{transition:none;} }

/* ============ CASE STUDY PAGE ============ */
.cs-nda{
  font-family:var(--font-mono);font-size:0.78rem;color:var(--faint);
  margin-top:18px;letter-spacing:0.02em;
}
.cs-prose{max-width:760px;}
.cs-prose p{color:var(--dim);line-height:1.75;margin-bottom:16px;}
.cs-prose .solution-features{margin:18px 0;}

.cs-ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto;}
.cs-ba-col{border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;background:var(--panel);}
.cs-ba-after{border-color:var(--signal-cyan);}
.cs-ba-label{
  font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:18px;
}
.cs-ba-after .cs-ba-label{color:var(--accent-text);}
.cs-flow{list-style:none;counter-reset:flow;padding:0;margin:0;}
.cs-flow li{
  position:relative;padding-left:26px;padding-bottom:14px;
  font-size:0.94rem;color:var(--dim);line-height:1.5;
}
.cs-flow li::before{
  content:'';position:absolute;left:6px;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--border-strong);
}
.cs-ba-after .cs-flow li::before{background:var(--signal-cyan);}
/* Connecting line between steps, so it reads as a flow not a list */
.cs-flow li:not(:last-child)::after{
  content:'';position:absolute;left:9px;top:16px;bottom:2px;width:1px;background:var(--border);
}
.cs-summary{
  text-align:center;max-width:640px;margin:32px auto 0;
  color:var(--dim);font-size:1.02rem;line-height:1.8;
}
.cs-summary strong{color:var(--paper);}

.cs-accordion{max-width:840px;margin:0 auto;}
.cs-num{
  font-family:var(--font-mono);font-size:0.78rem;color:var(--accent-text);
  margin-right:14px;letter-spacing:0.05em;
}
.cs-delivered{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 24px;
  max-width:860px;list-style:none;padding:0;
}
.cs-delivered li{
  position:relative;padding-left:26px;color:var(--dim);font-size:0.95rem;line-height:1.6;
}
.cs-delivered li::before{
  content:'\2713';position:absolute;left:0;top:0;color:var(--signal-cyan);font-weight:700;
}
@media (max-width:760px){
  .cs-ba{grid-template-columns:1fr;}
}

/* ============ CONTACT: RESPONSE PROMISE / NEXT STEPS / PRICING ============ */
.contact-promise{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:10px 18px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);
  font-size:0.88rem;color:var(--dim);line-height:1.5;text-align:left;
  max-width:640px;
}
:root[data-theme="light"] .next-step{background:var(--ink-raised);}
.pricing-note-body .subtle-note{margin-top:20px;}

/* ============ STATIC CLIENT LOGO ROW ============ */
/* With a small client roster, a static centred row reads as confident.
   A scrolling loop of the same few logos reads as padding. */
.logo-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:24px 64px;max-width:1000px;margin:0 auto;padding:8px 0;
}
.logo-row .marquee-item{padding:0;opacity:0.9;}
.logo-row .marquee-item:hover{opacity:1;}
@media (max-width:640px){ .logo-row{gap:20px 32px;} }
.footer-response{font-size:0.88rem;color:var(--accent-text);margin:12px 0;line-height:1.6;}

/* ============ CALENDLY EMBED SIZING ============ */
/* Height is set here rather than inline so it can respond to screen size.
   Too short and Calendly adds its own inner scrollbar; too tall and you get
   dead white space under the widget. These values fit the 30-min booking
   view without either. */
.calendly-embed-card{max-width:1000px;margin:0 auto;}
/* Height must exceed Calendly's own content height, or Calendly renders an
   internal scrollbar inside the iframe. overflow:hidden does NOT fix that --
   it only hides the bottom of the widget. Taller is the actual fix. */
.calendly-inline-widget{
  height:1000px;
  min-width:320px;
  border-radius:var(--radius-lg);
}
@media (max-width:820px){ .calendly-inline-widget{height:1080px;} }
@media (max-width:520px){ .calendly-inline-widget{height:1180px;} }

/* ============ LOGO STRIP: ALWAYS-WHITE BAND ============ */
/* Client logos are supplied on white/transparent backgrounds, so the strip
   keeps a white band in dark mode too -- otherwise dark logos disappear.
   Edge fades are drawn as overlays rather than a CSS mask, because a mask
   would also fade the white band and expose the dark page behind it. */
.marquee{
  background:#ffffff;
  border-radius:var(--radius);
  -webkit-mask-image:none;
  mask-image:none;
}
.marquee::before,
.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0));}
.marquee::after{right:0;background:linear-gradient(to left,#fff,rgba(255,255,255,0));}
/* Company names sit on the white band, so they must stay dark in both themes */
.marquee-item span{color:#12141c;}
[data-theme="dark"] .marquee-item img{filter:none;}
@media (max-width:600px){
  .marquee::before,.marquee::after{width:44px;}
}

/* ============ VERIFIED REVIEW BADGE (links to Fiverr profile) ============ */
/* These are the only independently checkable proof on the site, so the badge
   is deliberately styled as an obvious link rather than a passive label. */
a.testimonial-verified{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
a.testimonial-verified:hover{
  border-color:var(--signal-cyan);
  color:var(--accent-text);
  background:var(--panel-strong);
}
a.testimonial-verified svg{width:11px;height:11px;flex-shrink:0;opacity:0.8;}

.reviews-proof-link{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:11px 20px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);
  font-size:0.9rem;color:var(--paper);text-decoration:none;
  transition:border-color .2s,background .2s;
}
.reviews-proof-link:hover{border-color:var(--signal-cyan);background:var(--panel-strong);}
.reviews-proof-link svg{width:15px;height:15px;color:var(--accent-text);}

/* ============ INDUSTRY PAGES: TIME DRAINS + FIRST BUILDS ============ */
.drain-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.drain-item{display:flex;gap:18px;padding:26px;background:var(--ink);}
:root[data-theme="light"] .drain-item{background:var(--ink-raised);}
.drain-num{font-size:0.78rem;color:var(--accent-text);letter-spacing:0.08em;flex-shrink:0;padding-top:3px;}
.drain-item h3{font-size:1rem;margin-bottom:7px;}
.drain-item p{font-size:0.93rem;color:var(--dim);line-height:1.65;}

.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.flow-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:26px;}
.flow-card h3{font-size:1.04rem;margin-bottom:18px;}
.flow-steps{display:flex;flex-direction:column;gap:14px;}
.flow-step{position:relative;padding-left:16px;border-left:2px solid var(--border);}
.flow-step-result{border-left-color:var(--signal-cyan);}
.flow-label{display:block;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px;}
.flow-step-result .flow-label{color:var(--accent-text);}
.flow-step p{font-size:0.9rem;color:var(--dim);line-height:1.6;}
.flow-step-result p{color:var(--paper);}

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

/* ============ HERO CURSOR SPOTLIGHT ============ */
/* A soft light that follows the cursor across the hero. Sits above the
   background glow but below the particle canvas and text, so it lights the
   area without washing out anything readable. Position is driven by two CSS
   variables updated from JS, which keeps the work on the compositor. */
.hero-spotlight{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
  background:radial-gradient(
    520px circle at var(--spot-x, 50%) var(--spot-y, 40%),
    rgba(79,140,255,0.16),
    rgba(34,211,238,0.07) 40%,
    transparent 68%
  );
}
.hero-spotlight.is-active{opacity:1;}
:root[data-theme="light"] .hero-spotlight{
  background:radial-gradient(
    520px circle at var(--spot-x, 50%) var(--spot-y, 40%),
    rgba(79,140,255,0.13),
    rgba(34,211,238,0.06) 40%,
    transparent 68%
  );
}
/* Pointer-driven decoration is meaningless on touch, and motion-sensitive
   visitors shouldn't get a light chasing their cursor. */
@media (hover:none){ .hero-spotlight{display:none;} }
@media (prefers-reduced-motion:reduce){ .hero-spotlight{display:none;} }

/* ============ VIDEO TESTIMONIAL: STARS + ATTRIBUTION ============ */
.vt-stars{display:flex;gap:3px;margin-bottom:20px;}
.vt-stars svg{width:17px;height:17px;fill:#F5B400;stroke:none;}
.vt-attrib{
  display:flex;align-items:center;gap:14px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--border);
}
.vt-attrib-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:var(--grad-btn);color:#04050A;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
}
.vt-attrib-name{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--paper);}
.vt-attrib-role{font-size:0.87rem;color:var(--dim);margin-top:2px;}

/* ============ STATIC INDUSTRY INDEX ============ */
.industry-index{display:flex;flex-wrap:wrap;gap:10px;}
.industry-index-link{
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel);
  font-size:0.92rem;color:var(--paper);
  transition:border-color .2s,background .2s,transform .2s;
}
.industry-index-link:hover{border-color:var(--signal-cyan);background:var(--panel-strong);transform:translateY(-2px);}

/* ============ REAL PROJECTS (expandable cards) ============ */
/* Reuses the FAQ accordion mechanism so there is one expand/collapse
   implementation on the site rather than two that can drift apart. */
.proj-list{display:flex;flex-direction:column;gap:14px;}
.proj-row{border-radius:var(--radius);overflow:hidden;}
.proj-head{align-items:flex-start;gap:18px;padding:24px 26px;}
.proj-icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-strong);border:1px solid var(--border);color:var(--accent-text);
}
.proj-icon svg{width:22px;height:22px;}
.proj-headings{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;text-align:left;}
.proj-tag{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);}
.proj-title{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--paper);line-height:1.3;}
.proj-teaser{font-size:0.9rem;color:var(--dim);line-height:1.6;}
.proj-row .faq-chevron{margin-top:14px;}

.proj-body{padding-top:4px;}
.proj-desc{color:var(--dim);line-height:1.75;margin-bottom:20px;}
.proj-sub{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;
}
.proj-benefits{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;}
.proj-benefits li{position:relative;padding-left:20px;color:var(--dim);font-size:0.94rem;line-height:1.65;}
.proj-benefits li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:1.5px;background:var(--signal-cyan);}
.proj-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;
  padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:18px;
}
.proj-stat-val{font-size:1.5rem;font-weight:600;color:var(--paper);}
.proj-stat-lbl{font-size:0.8rem;color:var(--faint);margin-top:3px;line-height:1.4;}
.proj-stack{font-size:0.86rem;color:var(--dim);line-height:1.7;}
.proj-stack-label{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px;}

@media (max-width:640px){
  .proj-head{padding:20px 18px;gap:14px;}
  .proj-icon{width:38px;height:38px;}
  .proj-icon svg{width:18px;height:18px;}
  .proj-title{font-size:1rem;}
}

/* ============ CASE STUDY: STATS & METHODOLOGY ============ */
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;max-width:1000px;margin:0 auto;}
.cs-stat{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:26px 22px;text-align:center;}
.cs-stat-val{font-size:2rem;font-weight:600;color:var(--paper);line-height:1.1;}
.cs-stat-lbl{font-size:0.86rem;color:var(--dim);margin-top:8px;line-height:1.45;}
/* Methodology note sits with the numbers on purpose. Publishing a 94% open
   rate without explaining pixel tracking invites disbelief; explaining it
   turns an implausible-looking figure into evidence of rigour. */
.cs-method{
  max-width:820px;margin:22px auto 0;padding:18px 22px;
  border-left:2px solid var(--signal-cyan);background:var(--panel);
  font-size:0.9rem;color:var(--dim);line-height:1.7;border-radius:0 var(--radius) var(--radius) 0;
}
.cs-method strong{color:var(--paper);}

/* ============ CASE STUDY: DASHBOARD GRID ============ */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.dash-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:24px;}
.dash-item h3{font-size:1rem;margin-bottom:8px;}
.dash-item p{font-size:0.92rem;color:var(--dim);line-height:1.65;}
/* 5-across glance bar for the outreach case study */
.cs-stats-5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));max-width:1120px;}
/* CTA at the foot of an expanded project card */
.proj-cta{margin-top:22px;}

/* ============ FLOATING WHATSAPP BUTTON ============ */
.wa-float{
  /* Sits above the fold-line rather than at the very bottom, so it never
     overlaps footer content or a form's submit button on short viewports. */
  position:fixed;right:22px;bottom:96px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;
  box-shadow:0 6px 22px -4px rgba(0,0,0,0.45);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float:hover{transform:scale(1.07);box-shadow:0 10px 28px -4px rgba(37,211,102,0.55);}
.wa-float:active{transform:scale(0.97);}
.wa-float:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:3px;}
.wa-float svg{width:34px;height:34px;fill:#fff;}
.wa-float .wa-glyph{fill:#25D366;}
/* Sits above the mobile nav backdrop but never over an open panel */
.nav-open .wa-float{opacity:0;pointer-events:none;}
@media (max-width:600px){
  .wa-float{right:16px;bottom:80px;width:52px;height:52px;}
  .wa-float svg{width:30px;height:30px;}
}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none;}
  .wa-float:hover{transform:none;}
}

/* ============ BOOK A CALL PAGE ============ */
.book-hero{padding-bottom:48px;}
.book-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;}
.book-assure-item{
  font-family:var(--font-mono);font-size:0.76rem;letter-spacing:0.03em;
  color:var(--dim);border:1px solid var(--border);background:var(--panel);
  border-radius:999px;padding:7px 15px;
}
.book-embed-section{padding-top:0;}

/* ============ ENQUIRY FORM ============ */
.enquiry-card{
  max-width:760px;margin:0 auto;padding:40px;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);
}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.enq-full{margin-bottom:18px;}
.enq-field label{
  display:block;font-size:0.86rem;font-weight:500;color:var(--paper);margin-bottom:8px;
}
.enq-req{color:var(--signal-cyan);}
.enq-opt{color:var(--faint);font-weight:400;font-size:0.8rem;}
.enq-field input,
.enq-field select,
.enq-field textarea{
  width:100%;padding:13px 15px;border-radius:10px;
  background:var(--ink-raised);border:1px solid var(--border);
  color:var(--paper);font-size:0.94rem;font-family:var(--font-body);
  transition:border-color .2s;
}
.enq-field textarea{resize:vertical;min-height:120px;line-height:1.6;}
.enq-field input::placeholder,
.enq-field textarea::placeholder{color:var(--faint);}
.enq-field input:focus,
.enq-field select:focus,
.enq-field textarea:focus{outline:none;border-color:var(--signal-cyan);}
.enq-field input.has-error,
.enq-field select.has-error,
.enq-field textarea.has-error{border-color:#F87171;}
/* Native select arrow is invisible on a dark background in some browsers */
.enq-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px;}

/* Honeypot: off-screen rather than display:none, since some bots skip hidden fields */
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.enq-error{font-size:0.88rem;color:#F87171;margin:4px 0 0;min-height:1.3em;line-height:1.6;}
.enq-error a{color:#F87171;text-decoration:underline;}
.enq-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;}
.enq-alt{font-size:0.88rem;color:var(--dim);}
.enq-alt a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;}
.enq-legal{font-size:0.8rem;color:var(--faint);margin-top:20px;line-height:1.6;}
.enq-legal a{color:var(--dim);text-decoration:underline;}

.enq-success{display:none;text-align:center;padding:20px 0;}
.enq-success.is-active{display:block;}
.enq-success-icon{
  width:56px;height:56px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,0.12);color:#22C55E;
}
.enq-success-icon svg{width:26px;height:26px;}
.enq-success h3{font-size:1.25rem;margin-bottom:10px;}
.enq-success p{color:var(--dim);line-height:1.7;margin-bottom:22px;max-width:440px;margin-left:auto;margin-right:auto;}

@media (max-width:640px){
  .enquiry-card{padding:26px 20px;}
  .enq-grid{grid-template-columns:1fr;gap:16px;}
}



/* ============ FOOTER ENQUIRY FORM ============ */
/* Sits inside .footer-top, between the brand block and the link columns,
   filling the space that used to be empty. Grows to take the slack while
   the brand and link columns keep their natural widths. */
.footer-enquiry-block{
  flex:1 1 380px;
  min-width:320px;
  max-width:520px;
  padding:30px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--panel-strong);
}
.footer-enq-head{margin-bottom:22px;}
.footer-enq-head h3{font-size:1.15rem;margin:8px 0 7px;letter-spacing:-0.015em;}
.footer-enq-head p{font-size:0.86rem;color:var(--dim);line-height:1.6;}
.footer-enq-head p span{color:var(--signal-cyan);}

/* Slightly tighter fields than the contact page, since this sits in a
   narrower column alongside other footer content. */
.footer-enquiry-block .enq-grid{gap:12px;margin-bottom:12px;}
.footer-enquiry-block .enq-full{margin-bottom:12px;}
.footer-enquiry-block .enq-field label{font-size:0.82rem;margin-bottom:6px;}
.footer-enquiry-block .enq-field input,
.footer-enquiry-block .enq-field select,
.footer-enquiry-block .enq-field textarea{padding:10px 13px;font-size:0.88rem;}
.footer-enquiry-block .enq-field textarea{min-height:88px;}
.footer-enquiry-block .enq-actions{margin-top:16px;gap:14px;}
.footer-enquiry-block .enq-alt{font-size:0.84rem;}

.footer-enq-msg{font-size:0.85rem;line-height:1.6;min-height:1.3em;margin:4px 0 0;}
.footer-enq-msg.is-error{color:#F87171;}
.footer-enq-msg.is-error a{color:#F87171;text-decoration:underline;}
/* Off-screen rather than display:none -- some bots skip hidden fields */
.footer-enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.footer-enq-success{display:none;text-align:center;padding:20px 0;}
.footer-enq-success.is-active{display:block;}
.footer-enq-success h3{font-size:1.1rem;margin-bottom:8px;}
.footer-enq-success p{color:var(--dim);line-height:1.65;font-size:0.9rem;}

@media (max-width:900px){
  /* order:3 pushed the form below the link columns on mobile, so it read as
     floating under the footer rather than being part of it. Keeping source
     order means: brand -> form -> links, which is the same as desktop. */
  .footer-enquiry-block{flex:1 1 100%;max-width:none;margin:4px 0 8px;}
}
@media (max-width:560px){
  .footer-enquiry-block{padding:24px 20px;}
  .footer-enquiry-block .enq-grid{grid-template-columns:1fr;}
}


/* ============ CONTACT PAGE (two-column) ============ */
.contact-page{padding-top:130px;padding-bottom:90px;}
.contact-layout{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
  gap:64px;align-items:start;max-width:1120px;margin:0 auto;
}
.contact-aside{position:sticky;top:110px;}
.contact-h1{font-size:clamp(2rem,3.6vw,2.7rem);line-height:1.15;letter-spacing:-0.02em;margin:6px 0 16px;}
.contact-lead{color:var(--dim);font-size:1.02rem;line-height:1.7;margin-bottom:38px;}

.contact-steps-title{
  display:block;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:18px;
}
.contact-steps ol{list-style:none;padding:0;margin:0 0 38px;display:flex;flex-direction:column;gap:18px;}
.contact-steps li{display:flex;gap:14px;align-items:flex-start;}
.contact-step-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-strong);border:1px solid var(--border);
  color:var(--accent-text);font-size:0.76rem;
}
.contact-steps li p{color:var(--dim);font-size:0.94rem;line-height:1.65;}

.contact-details{
  display:grid;grid-template-columns:1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
.contact-detail-label{
  display:block;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px;
}
/* word-break:break-word was snapping the email mid-address. */
.contact-detail a{color:var(--accent-text);white-space:nowrap;display:inline-block;}
@media (max-width:420px){ .contact-detail a{font-size:0.86rem;} }
.contact-detail a:hover{text-decoration:underline;}
.contact-detail span:not(.contact-detail-label){color:var(--dim);font-size:0.92rem;}
.contact-book{display:inline-flex;}

.contact-form-wrap{
  padding:40px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--panel);
}
.contact-form-wrap .enq-legal{margin:14px 0 0;}
.contact-form-wrap .enq-actions{margin-top:20px;}

@media (max-width:960px){
  .contact-layout{grid-template-columns:1fr;gap:44px;}
  .contact-aside{position:static;}
}
@media (max-width:560px){
  .contact-page{padding-top:110px;}
  .contact-form-wrap{padding:26px 20px;}
  .contact-details{grid-template-columns:1fr;gap:18px;}
}
/* Email must never wrap mid-address -- shrink slightly on narrow columns instead */
.footer-address a{white-space:nowrap;display:inline-block;}
@media (max-width:400px){ .footer-address a{font-size:0.86rem;} }

/* ============ CASE STUDIES NAV DROPDOWN ============ */
/* Deliberately inherits the Industries dropdown styling -- same padding,
   same font size, same hover. Only the width differs, because case study
   names are longer than industry names. */
.nav-dropdown--cases .nav-dropdown-menu{ min-width:260px; }

/* Section label inside the mobile nav stack */
.mobile-nav-label{
  display:block;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--faint);
  margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--border);
}

/* ============ CASE STUDIES INDEX GRID ============ */
.cs-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;}
.cs-card{
  display:flex;flex-direction:column;
  padding:30px;border-radius:var(--radius-lg);
  background:var(--panel);border:1px solid var(--border);
  transition:border-color .25s,transform .25s,background .25s;
}
.cs-card:hover{border-color:var(--signal-cyan);background:var(--panel-strong);transform:translateY(-3px);}
.cs-card-icon{
  width:44px;height:44px;border-radius:11px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-strong);border:1px solid var(--border);color:var(--accent-text);
}
.cs-card-tag{
  display:block;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px;
}
.cs-card-title{font-size:1.08rem;line-height:1.35;margin-bottom:10px;letter-spacing:-0.01em;}
.cs-card-desc{font-size:0.93rem;color:var(--dim);line-height:1.65;margin-bottom:20px;flex:1;}
.cs-card-stats{
  display:flex;flex-wrap:wrap;gap:18px;
  padding:16px 0;border-top:1px solid var(--border);margin-bottom:16px;
}
.cs-card-stat{display:flex;flex-direction:column;gap:2px;}
.cs-card-stat-val{font-size:1.05rem;font-weight:600;color:var(--paper);}
.cs-card-stat-lbl{font-size:0.74rem;color:var(--faint);}
.cs-card-link{font-size:0.88rem;color:var(--accent-text);font-weight:500;}
@media (max-width:560px){
  .cs-card{padding:24px 20px;}
  .cs-card-grid{grid-template-columns:1fr;}
}

/* ============ MOBILE HEADER ============ */
/* The full wordmark was being ellipsis-truncated to "AUTO CO…" on phones,
   which looks broken rather than deliberate. Below 560px we swap to a proper
   "ACS" monogram instead of clipping the real name. The full name stays in
   the DOM for screen readers and SEO; only one is ever visible. */
.nav-logo-abbr{display:none;}
.nav-logo-full{display:inline;}

@media (max-width:560px){
  .nav-logo-full{display:none;}
  .nav-logo-abbr{
    display:inline;
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:0.06em;
  }
  /* No truncation needed once the label is short */
  .nav-logo-text{overflow:visible;text-overflow:clip;}
  .nav-logo{font-size:1rem;gap:9px;flex-shrink:0;}
  .nav-logo-icon{width:34px;height:34px;}
  .nav{padding:12px 16px;}
  .nav.is-scrolled{padding:10px 16px;}
  /* Give the toggle and CTA room now that the logo is compact */
  .nav-right{gap:8px;}
  .nav-right .btn-ghost{padding:9px 14px;font-size:0.8rem;}
}
/* Very small phones: icon only, no text at all */
@media (max-width:360px){
  .nav-logo-text{display:none;}
  .nav-logo-icon{width:32px;height:32px;}
}
/* Section headers in the mobile nav are tappable, matching every other row */
a.mobile-nav-label-link{
  text-decoration:none;
  display:flex;align-items:center;justify-content:space-between;
}
a.mobile-nav-label-link:hover{color:var(--accent-text);}
a.mobile-nav-label-link::after{content:'\2192';opacity:0.5;font-size:0.9rem;}

/* ============ MOBILE NAV ACCORDIONS ============ */
/* Only sections with child pages use these; standalone links keep the
   existing .mobile-nav a styling untouched. Desktop is unaffected because
   the whole .mobile-nav panel is hidden above 900px. */
.mnav-group{border-bottom:1px solid var(--border);}
.mnav-toggle{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 4px;                 /* matches .mobile-nav a exactly */
  font-size:1rem;
  font-family:inherit;
  color:var(--paper);
  background:none;border:none;
  text-align:left;
  min-height:48px;                  /* comfortable touch target */
  cursor:pointer;
}
.mnav-toggle:hover{color:var(--accent-text);}
.mnav-chevron{
  width:8px;height:8px;flex-shrink:0;margin-right:4px;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:0.75;
  transition:transform .3s var(--ease),opacity .2s;
}
.mnav-group.is-open .mnav-chevron{
  transform:rotate(225deg) translateY(-2px);
  opacity:1;
}
.mnav-group.is-open > .mnav-toggle{color:var(--accent-text);}

/* max-height animation: works in every browser, unlike grid 0fr->1fr */
.mnav-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .32s var(--ease);
}
.mnav-group.is-open .mnav-panel{max-height:420px;}
.mnav-panel-inner{padding:2px 0 10px;}

/* Child links: indented, slightly smaller, no divider lines between them */
.mnav-panel-inner a{
  display:block;
  padding:11px 4px 11px 18px;
  font-size:0.94rem;
  color:var(--dim);
  border-bottom:none;
  min-height:44px;
  line-height:1.4;
  border-left:1px solid var(--border);
  margin-left:2px;
}
.mnav-panel-inner a:hover{color:var(--paper);border-left-color:var(--signal-cyan);}
.mnav-panel-inner a[aria-current="page"]{color:var(--accent-text);}
.mnav-panel-inner .mnav-all{
  color:var(--accent-text);
  font-size:0.9rem;
  margin-top:2px;
}
.mnav-panel-inner .mnav-all:hover{color:var(--accent-text);}

@media (prefers-reduced-motion:reduce){
  .mnav-panel{transition:none;}
  .mnav-chevron{transition:none;}
}

/* ============ CRM PLATFORM GROUPS ============ */
/* Deliberately minimal: the accordion, chevron, animation and spacing all
   come from the existing .faq-row styles. Only the chip grid is new. */
.crm-groups{max-width:900px;}
.crm-num{
  font-family:var(--font-mono);font-size:0.78rem;color:var(--accent-text);
  margin-right:14px;letter-spacing:0.05em;
}
.crm-count{
  font-size:0.72rem;color:var(--faint);
  border:1px solid var(--border);border-radius:999px;
  padding:2px 9px;margin-left:12px;
}
.crm-chips{display:flex;flex-wrap:wrap;gap:8px;}
.crm-chip{
  display:inline-block;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--panel-strong);
  font-size:0.86rem;color:var(--dim);
  white-space:nowrap;
}
@media (max-width:560px){
  .crm-chip{font-size:0.82rem;padding:7px 12px;}
  .crm-count{display:none;}   /* keep the header line short on small screens */
}

/* ============ WORKFLOW VISUALIZER CONNECTORS ============ */
/* These three classes are applied from JavaScript via setAttribute, not
   written in the HTML, so an automated "unused class" sweep will not see
   them. Do not delete them on that basis. Without these rules the SVG
   paths fall back to the browser default (black fill, no stroke) and
   render as solid black wedges instead of thin curves. */
.wf-conn-path{
  fill:none;
  stroke:var(--signal);
  stroke-width:2;
  stroke-linecap:round;
  opacity:0.55;
}
.wf-temp-path{
  fill:none;
  stroke:var(--signal-cyan);
  stroke-width:2;
  stroke-dasharray:5 5;
  stroke-linecap:round;
  opacity:0.8;
}
.wf-particle{
  fill:var(--signal-cyan);
  filter:drop-shadow(0 0 4px rgba(34,211,238,0.9));
}

/* Applied via a template literal in main.js (`tag${w.ai?' tag-ai':''}`), so
   automated class scans cannot see it. Marks AI-powered workflow cards. */
.tag-ai{
  color:var(--accent-text);
  border-color:rgba(34,211,238,0.35);
  background:rgba(34,211,238,0.08);
}

/* ============ TRIGGER -> ACTION FLOW ============ */
/* Structured, scannable summary near the top of each service page. Built to
   be extractable by AI overviews as well as readable by people. */
.ta-section{padding-top:0;}
.ta-flow{
  display:flex;flex-direction:column;gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;max-width:960px;
}
.ta-row{
  display:grid;
  grid-template-columns:1fr 28px 1fr auto;
  align-items:center;gap:18px;
  padding:20px 24px;background:var(--ink);
}
:root[data-theme="light"] .ta-row{background:var(--ink-raised);}
.ta-label{
  display:block;font-size:0.66rem;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px;
}
.ta-action .ta-label{color:var(--accent-text);}
.ta-cell p{font-size:0.94rem;line-height:1.55;color:var(--dim);}
.ta-action p{color:var(--paper);}
.ta-arrow{color:var(--signal-cyan);font-size:1.1rem;text-align:center;opacity:0.7;}
.ta-stage{justify-self:end;}
.ta-stage-tag{
  font-size:0.68rem;letter-spacing:0.05em;color:var(--faint);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;
  white-space:nowrap;
}
@media (max-width:860px){
  .ta-row{grid-template-columns:1fr;gap:12px;padding:18px;}
  .ta-arrow{display:none;}
  .ta-stage{justify-self:start;}
}