/* ---------- Tokens ---------- */
:root {
  --bg-0: #07080d;
  --bg-1: #0b0d16;
  --bg-2: #111421;
  --panel: rgba(18, 21, 34, 0.65);
  --panel-strong: rgba(22, 26, 42, 0.85);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #e7e9f2;
  --text-dim: #a3a7bd;
  --text-mute: #6b7088;

  --accent: #8ab4ff;
  --accent-2: #7c5cff;
  --accent-3: #22d3ee;

  --grad-1: linear-gradient(135deg, #8ab4ff 0%, #7c5cff 55%, #b980ff 100%);
  --grad-2: linear-gradient(135deg, rgba(138,180,255,.16), rgba(124,92,255,.16));

  --shadow-lg: 0 30px 80px -30px rgba(80, 60, 200, .55),
               0 10px 40px -15px rgba(0,0,0,.6);

  --radius: 14px;
  --radius-lg: 22px;

  --container: 1200px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (max-width: 720px) { html { scroll-padding-top: 76px; } }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  /* Transparent so the fixed .bg-video can show through. html carries the fallback color. */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
}
html { background: var(--bg-0); }

/* Decorative glows (.home-section-head::before, .ais-section-head::before,
   .orb) deliberately extend past their own boxes. On phones and tablets that
   made the page wider than the screen, so the browser widened the viewport and
   pushed fixed elements such as the Alex chat widget off the right edge.
   `clip` cuts only the sideways overflow: unlike `hidden` it creates no scroll
   container, so vertical glow and sticky positioning are untouched. Nothing
   inside <main> sits outside the page width on desktop, so this changes
   nothing there. */
main { overflow-x: clip; }

/* Fixed full-viewport background video. Zero document height, never intercepts input. */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  outline: none;
  -webkit-user-select: none;
  background: var(--bg-0);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Global keyboard focus — dark-theme accent ring, layout-neutral */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-color .15s var(--ease);
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.brand:focus-visible,
.nav-links a:focus-visible,
.mobile-menu a:focus-visible,
.footer-nav a:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(138,180,255,.18);
  border-radius: 10px;
}
.btn:focus-visible { border-radius: 14px; }
.brand:focus-visible { border-radius: 12px; }

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

/* ---------- Background field ---------- */
.bg-field {
  position: fixed; inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #05060b 0%, #07080d 40%, #06070c 100%);
}
.bg-field .grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 78%);
  opacity: .55;
}
.bg-field .glow {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: float 18s ease-in-out infinite;
}
.glow-a { width: 480px; height: 480px; left: -120px; top: -80px; background: #4a2cff; opacity: .32;}
.glow-b { width: 520px; height: 520px; right: -140px; top: 20%; background: #2a7bff; opacity: .28; animation-delay: -6s;}
.glow-c { width: 420px; height: 420px; left: 40%; bottom: -180px; background: #22d3ee; opacity: .18; animation-delay: -12s;}
.noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.7'/></svg>");
}

@keyframes float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(30px,-20px,0) scale(1.05); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,8,13,.85), rgba(7,8,13,.55));
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled {
  background: rgba(7,8,13,.92);
  border-bottom-color: rgba(255,255,255,.09);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: .04em;
}
.brand-mark {
  width: 36px; height: 36px;
  /* FAJR Z logo. The PNG is transparent, so no white chip / border / crop:
     `contain` preserves the logo's aspect ratio inside the box, and the
     background stays transparent so the dark theme shows through. */
  background: url('assets/images/fajrz-logo.png') center / contain no-repeat, transparent;
  flex-shrink: 0;
}
/* Suppress the old inline placeholder SVG left in the markup */
.brand-mark > svg { display: none; }
.brand-name { font-size: 14px; letter-spacing: .18em; }

.nav-links {
  display: flex; align-items: center; gap: 6px;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px; color: var(--text-dim);
  border-radius: 8px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: #ffffff;
}

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

/* --- CTA hierarchy: 'Try Demo' = primary, 'Get in Touch' = secondary ---
   Higher specificity than .btn-ghost so it wins the cascade without !important.
   White/dark-text primary treatment — the approved FAJR Z system, site-wide. */
.btn.nav-cta-demo {
  color: #0a0b12;
  background: #f0f1f6;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14);
  text-shadow: none;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn.nav-cta-demo:hover {
  color: #0a0b12;
  background: #ffffff;
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.2);
}
.btn.nav-cta-demo:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.55), 0 0 0 5px rgba(255,255,255,.20);
}

/* Mobile menu — same hierarchy: elevate 'Try Demo' as a primary pill button */
.mobile-menu a[href="demo-chatbot.html"] {
  color: #ffffff;
  background: var(--grad-1);
  border-radius: 10px;
  border-bottom: 0;
  margin-top: 10px;
  padding: 12px 14px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  box-shadow:
    0 8px 20px -8px rgba(124,92,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.14);
}
.mobile-menu a[href="demo-chatbot.html"]:hover {
  color: #ffffff;
  transform: translateY(-1px);
}
.mobile-menu a[href="demo-chatbot.html"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* 'Get in Touch' — brighter secondary CTA. Still subordinate to 'Try Demo'.
   Applies only inside .nav-cta (desktop nav). Mobile menu doesn't include
   'Get in Touch' as a separate button — mobile users tap the Contact link. */
.nav-cta .btn.btn-ghost:not(.nav-cta-demo) {
  color: var(--text-dim);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  transition: transform .18s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.nav-cta .btn.btn-ghost:not(.nav-cta-demo):hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
  box-shadow: none;
}
.nav-cta .btn.btn-ghost:not(.nav-cta-demo):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.16);
}
.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 9px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform .25s var(--ease), opacity .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-menu {
  padding: 10px 24px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,8,13,.95);
}
@media (min-width: 1025px) {
  .mobile-menu { display: none !important; }
}
.mobile-menu a {
  display: block; padding: 12px 8px;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.mobile-menu a:last-child { border-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
/* Ensure the HTML `hidden` attribute wins over `.btn { display: inline-flex; }`.
   Without this, JS setting `submitBtn.hidden = true` still leaves the button
   visible because a class-selector display: value overrides the browser
   default `[hidden] { display: none; }`. */
.btn[hidden] { display: none !important; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; }

.btn-primary {
  color: #0a0b12;
  background: var(--grad-1);
  box-shadow: 0 10px 30px -8px rgba(124,92,255,.55), inset 0 0 0 1px rgba(255,255,255,.2);
}
.btn-primary:hover {
  box-shadow: 0 16px 40px -8px rgba(124,92,255,.7), inset 0 0 0 1px rgba(255,255,255,.3);
}
.btn-secondary {
  color: var(--text);
  background: rgba(10,13,23,.55);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(8,11,20,.96);
  border-color: rgba(255,255,255,.22);
}
.btn-ghost {
  color: var(--text-dim);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.03);}

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34,211,238,.6);
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 60px 0 120px;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  display: flex; align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  color: var(--text-dim);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  animation: fadeUp .8s var(--ease) both;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 12px rgba(34,211,238,.9);
}

.headline {
  margin: 20px 0 22px;
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  animation: fadeUp .9s .05s var(--ease) both;
}
.accent {
  background: var(--grad-1);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lede {
  color: var(--text-dim);
  font-size: clamp(15px, 1.25vw, 18px);
  max-width: 560px;
  margin: 0 0 32px;
  animation: fadeUp 1s .12s var(--ease) both;
}

.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  animation: fadeUp 1s .2s var(--ease) both;
}

.mini-badges {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  animation: fadeUp 1s .3s var(--ease) both;
}
.mini-badges li {
  padding: 7px 12px;
  font-size: 12.5px; color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
}

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

/* ---------- Workflow visual ---------- */
.hero-visual {
  position: relative;
  animation: fadeUp 1s .25s var(--ease) both;
}
.workflow-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(11,13,22,.88), rgba(9,11,18,.92)) padding-box,
    linear-gradient(135deg, rgba(138,180,255,.28), rgba(124,92,255,.18), rgba(34,211,238,.18)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.dots { display: flex; gap: 6px; }
.dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.dots span:nth-child(1) { background: #ff5f57cc; }
.dots span:nth-child(2) { background: #febc2ecc; }
.dots span:nth-child(3) { background: #28c840cc; }
.card-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--text-dim);
}
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #28c840;
  box-shadow: 0 0 10px #28c84088;
  animation: pulseDot 2s ease-out infinite;
}

.workflow {
  position: relative;
  padding: 26px 6px;
}
.wf-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.wf-path {
  fill: none;
  stroke: rgba(255,255,255,.12);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}

.nodes {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(9, auto);
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.node {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 10px 10px;
  min-width: 92px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  animation: nodePop .6s var(--ease) both;
  animation-delay: calc(0.15s * var(--i));
}
.node-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
}
.node-label {
  font-size: 12.5px; color: var(--text-dim); font-weight: 500;
  white-space: nowrap;
}
.accent-node {
  border-color: rgba(138,180,255,.35);
  background: linear-gradient(180deg, rgba(138,180,255,.10), rgba(124,92,255,.08));
  box-shadow: 0 0 0 4px rgba(124,92,255,.06), 0 20px 40px -20px rgba(124,92,255,.6);
}
.accent-node .node-ico {
  background: rgba(124,92,255,.15);
  border-color: rgba(124,92,255,.4);
  color: #c9b8ff;
}
.node.pulsing {
  border-color: rgba(138,180,255,.55);
  box-shadow: 0 0 0 4px rgba(138,180,255,.08), 0 24px 50px -20px rgba(138,180,255,.55);
}
.node.pulsing .node-ico {
  background: rgba(138,180,255,.2);
  color: #dbe7ff;
}

.arrow {
  position: relative;
  width: 52px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-radius: 2px;
  overflow: hidden;
}
.arrow .pulse {
  position: absolute; top: -3px; left: -20%;
  width: 40%; height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, transparent, #8ab4ff 40%, #b78bff 60%, transparent);
  filter: blur(3px);
  animation: dash 2.6s linear infinite;
}
.arrow:nth-of-type(4) .pulse { animation-delay: .65s; }
.arrow:nth-of-type(6) .pulse { animation-delay: 1.3s; }
.arrow:nth-of-type(8) .pulse { animation-delay: 1.95s; }

@keyframes dash {
  0%   { left: -30%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

@keyframes nodePop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 6px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--text-dim);
}
.tick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(40,200,64,.10);
  color: #7bd992;
  border: 1px solid rgba(40,200,64,.25);
}
.check {
  width: 14px; height: 14px; border-radius: 50%;
  background: #28c840; color: #062010;
  display: inline-grid; place-items: center; font-size: 10px; font-weight: 800;
}
.metric { display: inline-flex; align-items: center; gap: 6px; }
.metric b { color: var(--text); font-weight: 600; }

/* Decorative orbs */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(40px); z-index: -1; pointer-events: none;
}
.orb-1 { width: 220px; height: 220px; top: -40px; right: -30px; background: rgba(124,92,255,.10); }
.orb-2 { width: 260px; height: 260px; bottom: -60px; left: -40px; background: rgba(34,211,238,.06); }

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  display: grid; place-items: start center; padding-top: 6px;
  opacity: .7;
}
.scroll-hint span {
  display: block; width: 3px; height: 8px; border-radius: 3px;
  background: var(--text-dim);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(10px); opacity: 1; }
}

/* ---------- Services ---------- */
.services {
  position: relative;
  padding: 80px 0 120px;
}
.services::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 18px; }
.section-title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 16px;
}
.section-lede {
  color: var(--text-dim);
  font-size: clamp(15px, 1.15vw, 17px);
  margin: 0 auto;
  max-width: 620px;
}

.service-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.service-grid > li:nth-child(4),
.service-grid > li:nth-child(5) {
  grid-column: span 1;
}

.service-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              background .35s var(--ease),
              box-shadow .35s var(--ease);
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(0.08s * var(--i));
}
.service-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.55), rgba(124,92,255,.35), rgba(34,211,238,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.service-card::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -80px; top: -80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124,92,255,.35), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.service-card > * { position: relative; z-index: 2; }

/* Full-card click overlay — sits above decorative content so clicks
   anywhere on the card (title, copy, empty space, arrow) follow the link.
   The arrow, icon and text stay visually unchanged. */
.service-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  text-decoration: none;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}
.service-card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

.service-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(22,28,48,.97), rgba(14,18,32,.98));
  box-shadow: 0 24px 60px -30px rgba(124,92,255,.6),
              0 8px 24px -12px rgba(0,0,0,.55);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { opacity: .9; }
.service-card:hover .service-ico {
  color: #dbe7ff;
  border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.15);
  transform: translateY(-1px);
}
.service-card:hover .service-arrow {
  color: var(--text);
  transform: translate(4px, -4px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.service-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.service-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.service-copy {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}
.service-arrow {
  position: absolute;
  top: 22px; right: 22px;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--text-mute);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  transition: transform .35s var(--ease), color .35s var(--ease),
              background .35s var(--ease), border-color .35s var(--ease);
}

/* ---------- Inquiry ---------- */
.inquiry {
  position: relative;
  padding: 40px 0 140px;
}
.inquiry::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

.inquiry-card {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 34px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.inquiry-card::after {
  content: "";
  position: absolute; width: 300px; height: 300px;
  right: -100px; top: -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124,92,255,.10), transparent 70%);
  filter: blur(20px); pointer-events: none;
}

/* Stepper */
.stepper {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
  isolation: isolate;
}
.step-node {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-mute);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.step-index {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text-mute);
  position: relative;
  transition: all .3s var(--ease);
}
.step-index .step-check { position: absolute; opacity: 0; color: #0a0b12; transition: opacity .2s var(--ease); }
.step-node .step-label {
  font-size: 13px; letter-spacing: .02em; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-node.is-active { color: var(--text); background: rgba(138,180,255,.06); }
.step-node.is-active .step-index {
  color: #0a0b12;
  background: var(--grad-1);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(138,180,255,.10), 0 8px 20px -8px rgba(124,92,255,.6);
}
.step-node.is-complete { color: var(--text-dim); }
.step-node.is-complete .step-index {
  background: rgba(138,180,255,.15);
  border-color: rgba(138,180,255,.35);
  color: transparent;
}
.step-node.is-complete .step-index .step-num { opacity: 0; }
.step-node.is-complete .step-index .step-check { opacity: 1; color: var(--accent); }

/* Form */
.inquiry-form { position: relative; }
.step {
  border: 0; padding: 0; margin: 0;
  display: none;
  animation: stepIn .4s var(--ease) both;
}
.step.is-active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-heading {
  padding: 0; margin: 0 0 22px;
  display: block;
}
.step-eyebrow {
  display: inline-block;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(138,180,255,.08);
  border: 1px solid rgba(138,180,255,.2);
  margin-bottom: 10px;
}
.step-heading h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.step-hint { color: var(--text-dim); font-size: 14px; margin: 0; }

/* Option cards (Step 1) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.option-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  text-align: left;
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), box-shadow .25s var(--ease);
}
.option-card:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(8,11,20,.96);
  transform: translateY(-1px);
}
.option-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138,180,255,.35);
}
.option-card .option-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: all .25s var(--ease);
}
.option-card .option-title {
  font-size: 14.5px; font-weight: 600;
}
.option-card.is-selected {
  border-color: rgba(138,180,255,.55);
  background: linear-gradient(180deg, rgba(138,180,255,.10), rgba(124,92,255,.06));
  box-shadow: 0 12px 30px -18px rgba(124,92,255,.6);
}
.option-card.is-selected .option-ico {
  background: rgba(124,92,255,.18);
  border-color: rgba(124,92,255,.4);
  color: #dbe7ff;
}

/* Option list (Step 2) */
.option-list {
  display: grid; gap: 10px;
}
.option-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  text-align: left; width: 100%;
  transition: all .25s var(--ease);
  font-size: 14.5px;
}
.option-row:hover {
  background: rgba(8,11,20,.96);
  border-color: rgba(255,255,255,.18);
}
.option-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138,180,255,.35);
}
.option-row .radio-mark {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.24);
  position: relative; flex-shrink: 0;
  transition: all .25s var(--ease);
}
.option-row.is-selected {
  border-color: rgba(138,180,255,.55);
  background: linear-gradient(180deg, rgba(138,180,255,.10), rgba(124,92,255,.06));
}
.option-row.is-selected .radio-mark {
  border-color: transparent;
  background: var(--grad-1);
  box-shadow: 0 0 0 4px rgba(138,180,255,.12);
}
.option-row.is-selected .radio-mark::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; background: #0a0b12;
}

/* Fields */
.field { margin-top: 18px; }
.field > label {
  display: block;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font: inherit; font-size: 16px;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); }
.field input:hover,
.field textarea:hover { border-color: rgba(255,255,255,.16); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(138,180,255,.55);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 4px rgba(138,180,255,.12);
}
.field.has-error input,
.field.has-error textarea {
  border-color: rgba(255,120,120,.55);
  box-shadow: 0 0 0 4px rgba(255,120,120,.10);
}
.field-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: #ff9a9a;
}

/* Contact toggle */
.contact-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  margin-bottom: 8px;
}
.contact-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 500;
  color: var(--text-dim);
  transition: all .25s var(--ease);
  border: 1px solid transparent;
}
.contact-choice:hover { color: var(--text); }
.contact-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138,180,255,.35);
}
.contact-choice.is-active {
  color: #0a0b12;
  background: var(--grad-1);
  box-shadow: 0 8px 20px -10px rgba(124,92,255,.6);
}

/* Actions */
.form-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.form-actions #nextBtn,
.form-actions #submitBtn { margin-left: auto; }

/* Success */
.step-success {
  text-align: center;
  padding: 20px 8px 8px;
}
.success-badge {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-grid; place-items: center;
  color: #0a0b12;
  background: var(--grad-1);
  box-shadow: 0 20px 40px -14px rgba(124,92,255,.6);
  margin-bottom: 18px;
  animation: successPop .5s var(--ease) both;
}
@keyframes successPop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.success-title {
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.success-copy {
  color: var(--text-dim); font-size: 15px;
  max-width: 460px; margin: 0 auto 22px;
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  padding: 60px 0 120px;
}
.final-cta::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.cta-inner {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 76px 40px 68px;
  text-align: center;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(138,180,255,.06), transparent 70%),
    radial-gradient(500px 260px at 50% 120%, rgba(124,92,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55);
}
.cta-inner::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.30), rgba(124,92,255,.22), rgba(34,211,238,.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .30;
  pointer-events: none;
  z-index: 1;
}
.cta-inner > * { position: relative; z-index: 2; }

.cta-glow {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  animation: float 22s ease-in-out infinite;
}
.cta-glow-a { width: 320px; height: 320px; left: -80px; top: -80px; background: rgba(124,92,255,.18); }
.cta-glow-b { width: 380px; height: 380px; right: -100px; bottom: -120px; background: rgba(34,211,238,.10); animation-delay: -8s; }

.cta-rings {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; z-index: 0;
  opacity: .35;
}
.cta-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
}
.cta-rings span:nth-child(1) { width: 320px; height: 320px; }
.cta-rings span:nth-child(2) { width: 500px; height: 500px; border-color: rgba(255,255,255,.06); }
.cta-rings span:nth-child(3) { width: 700px; height: 700px; border-color: rgba(255,255,255,.04); }

.cta-title {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 18px;
}
.cta-lede {
  color: var(--text-dim);
  font-size: clamp(15px, 1.2vw, 17.5px);
  max-width: 640px;
  margin: 0 auto 32px;
}
.cta-row-final {
  justify-content: center;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: 44px 0 28px;
  border-top: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(7,8,13,.72), rgba(7,8,13,.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.footer-brand .brand { margin-bottom: 10px; }
.footer-tag {
  margin: 0;
  color: var(--text-mute);
  font-size: 13px;
  letter-spacing: .02em;
}
.footer-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-dim);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.footer-nav a:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  color: var(--text-mute);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.footer-mini { opacity: .8; }

/* ---------- About page ---------- */
.about-hero { padding: 40px 0 80px; min-height: unset; }
/* Photo/portrait card removed - hero copy is now centered as a single
   column instead of the two-column grid other hero sections use. */
.about-hero .hero-grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.about-hero .hero-copy {
  max-width: 720px;
  margin: 0 auto;
}
.about-hero .lede { margin-left: auto; margin-right: auto; }
.about-hero .cta-row { justify-content: center; }

/* Shared keyframes (still used by services.html's .shv-ring / .shv-chip
   hero-visual animation, even though the about-page portrait that also
   used to reference these was removed) - not about-page-exclusive. */
@keyframes portraitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* Shared base style (also used by ai-solutions.html's .ais-hv-chip .chip-dot,
   which only overrides size/color and relies on this for the glow). */
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34,211,238,.8);
}

/* Story */
.story {
  position: relative;
  padding: 60px 0 120px;
}
.story::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.story-head { text-align: left; margin: 0 auto 44px; max-width: 1200px; }
.story-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
.story-timeline {
  list-style: none; padding: 0; margin: 0;
  position: relative;
  padding-left: 22px;
  border-left: 1px solid var(--border);
}
.tl-item {
  position: relative;
  padding: 6px 0 30px;
  display: flex; flex-direction: column; gap: 4px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -28px; top: 10px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad-1);
  box-shadow: 0 0 0 4px rgba(138,180,255,.10),
              0 0 16px rgba(138,180,255,.55);
}
.tl-item:first-child .tl-dot {
  background: rgba(255,255,255,.15);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.tl-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}
.tl-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}
.story-body {
  max-width: 720px;
}
.story-body p {
  color: var(--text-dim);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  margin: 0 0 20px;
}
.story-body p:first-child::first-letter {
  font-size: 2.6em;
  font-weight: 700;
  float: left;
  line-height: 0.95;
  padding: 6px 12px 0 0;
  background: var(--grad-1);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.story-tags {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.story-tags li {
  padding: 7px 12px;
  font-size: 12.5px; color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.story-tags li:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255,255,255,.04);
}

/* ---------- Trust ---------- */
.trust {
  position: relative;
  padding: 40px 0 120px;
}
.trust::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.trust-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin-left: auto; margin-right: auto;
}
.trust-card {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              background .35s var(--ease),
              box-shadow .35s var(--ease);
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(0.08s * var(--i));
}
.trust-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.55), rgba(124,92,255,.35), rgba(34,211,238,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.trust-card::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  left: -60px; bottom: -80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138,180,255,.28), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.trust-card > * { position: relative; z-index: 2; }
.trust-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(22,28,48,.97), rgba(14,18,32,.98));
  box-shadow: 0 20px 50px -28px rgba(124,92,255,.55),
              0 6px 20px -12px rgba(0,0,0,.55);
}
.trust-card:hover::before { opacity: 1; }
.trust-card:hover::after  { opacity: .9; }
.trust-card:hover .trust-ico {
  color: #dbe7ff;
  border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.15);
  transform: translateY(-1px);
}
.trust-ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.trust-title {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.trust-copy {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

/* ---------- Process ---------- */
.process {
  position: relative;
  padding: 40px 0 140px;
}
.process::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

.process-track {
  list-style: none; padding: 0; margin: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  counter-reset: pstep;
}
.process-rail {
  position: absolute;
  top: 30px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.14) 12%,
    rgba(255,255,255,.14) 88%,
    rgba(255,255,255,.04) 100%);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.process-rail-fill {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(138,180,255,.9) 45%,
    rgba(124,92,255,.9) 60%,
    transparent);
  transform: translateX(-100%);
  animation: railSweep 6s linear infinite;
}
@keyframes railSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.process-step {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-top: 0;
  z-index: 1;
  animation: fadeUp .7s var(--ease) both;
  animation-delay: calc(0.1s * var(--i));
}
.process-num {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px; font-weight: 600;
  color: var(--text);
  background:
    radial-gradient(closest-side, rgba(15,18,30,1), rgba(15,18,30,1)) padding-box,
    linear-gradient(135deg, rgba(138,180,255,.7), rgba(124,92,255,.5), rgba(34,211,238,.5)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 6px rgba(7,8,13,1),
              0 10px 24px -10px rgba(124,92,255,.55);
  transition: transform .3s var(--ease), box-shadow .35s var(--ease);
  margin-bottom: 20px;
}
.process-num span {
  background: var(--grad-1);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: .02em;
}
.process-step:hover .process-num {
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(7,8,13,1),
              0 0 0 10px rgba(138,180,255,.12),
              0 18px 40px -14px rgba(124,92,255,.7);
}

.process-body { max-width: 220px; }
.process-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--text);
}
.process-ico {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
}
.process-copy {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Services page ---------- */
.services-hero { padding: 40px 0 80px; min-height: unset; }
.services-hero-grid { align-items: center; }

.services-hero-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.shv-orb {
  position: absolute; inset: 20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(138,180,255,.5), transparent 55%),
    radial-gradient(circle at 65% 65%, rgba(124,92,255,.5), transparent 55%);
  filter: blur(28px);
  opacity: .85;
}
.shv-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
  animation: portraitSpin 46s linear infinite;
}
.shv-ring-1 { width: 44%; height: 44%; border-color: rgba(138,180,255,.35); }
.shv-ring-2 {
  width: 68%; height: 68%;
  border-style: dashed;
  border-color: rgba(255,255,255,.10);
  animation-direction: reverse;
  animation-duration: 70s;
}
.shv-ring-3 {
  width: 96%; height: 96%;
  border-color: rgba(124,92,255,.20);
  animation-duration: 90s;
}
/* .shv-core originally wrapped a tiny 26px robot SVG inside a small squircle
   plaque (gradient border + inner glow + heavy shadow). That plaque was the
   "small box" trapping the new FZ artwork. Strip the plaque so the FZ image
   itself is the center visual — larger, transparent surround, aspect ratio
   preserved by .shv-logo below. The subtle scale animation is retained. */
.shv-core {
  position: relative;
  width: 46%; aspect-ratio: 1/1;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid; place-items: center;
  z-index: 1;
  animation: shvBreathe 5.5s ease-in-out infinite;
}
.shv-core-inner {
  width: 100%; height: 100%;
  border-radius: 0;
  background: transparent;
  display: grid; place-items: center;
}
@keyframes shvBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.shv-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  background: rgba(15, 18, 30, 0.88);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
  animation: chipFloat 6s ease-in-out infinite;
  z-index: 2;
  white-space: nowrap;
}
.shv-chip svg { color: var(--accent); flex-shrink: 0; }
/* 6 chips in a 3-row / 2-column ring around the FZ artwork:
   Top row  : chip-1 (top-left)         chip-2 (top-right)
   Middle   : chip-6 (far left)         chip-5 (far right)
   Bottom   : chip-3 (bottom-left)      chip-4 (bottom-right)
   All positions keep clear of the ~211px-wide FZ center (46% of a 460px visual). */
.shv-chip-1 { top: 4%;    left: 8%;   animation-delay: -0.5s; }  /* AI Customer Support */
.shv-chip-2 { top: 4%;    right: 6%;  animation-delay: -1.8s; }  /* Lead Qualification */
.shv-chip-6 { top: 46%;   left: -4%;  animation-delay: -0.9s; }  /* AI Automation */
.shv-chip-5 { top: 46%;   right: -4%; animation-delay: -2.5s; }  /* Custom Software */
.shv-chip-3 { bottom: 4%; left: 6%;   animation-delay: -3.1s; }  /* AI Voice Agents */
.shv-chip-4 { bottom: 4%; right: 4%;  animation-delay: -4.4s; }  /* Full-Stack Web Development */

/* Overview */
.services-overview {
  position: relative;
  padding: 60px 0 120px;
}
.services-overview::before {
  content: "";
  position: absolute; left: 50%; top: -1px;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.overview-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.overview-grid > li:nth-child(4),
.overview-grid > li:nth-child(5) { grid-column: span 1; }

.overview-card {
  position: relative;
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(0.08s * var(--i));
}
.overview-link {
  position: relative;
  display: block;
  padding: 26px 24px 24px;
  height: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              background .35s var(--ease),
              box-shadow .35s var(--ease);
}
.overview-link::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.55), rgba(124,92,255,.35), rgba(34,211,238,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.overview-link::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -80px; top: -80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124,92,255,.32), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.overview-link > * { position: relative; z-index: 2; }

.overview-link:hover,
.overview-link:focus-visible {
  outline: none;
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(22,28,48,.97), rgba(14,18,32,.98));
  box-shadow: 0 24px 60px -30px rgba(124,92,255,.6),
              0 8px 24px -12px rgba(0,0,0,.55);
}
.overview-link:hover::before,
.overview-link:focus-visible::before { opacity: 1; }
.overview-link:hover::after,
.overview-link:focus-visible::after { opacity: .9; }
.overview-link:hover .overview-ico,
.overview-link:focus-visible .overview-ico {
  color: #dbe7ff;
  border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.15);
}
.overview-link:hover .overview-more,
.overview-link:focus-visible .overview-more {
  color: var(--text);
}
.overview-link:hover .overview-more svg,
.overview-link:focus-visible .overview-more svg {
  transform: translateX(4px);
}

.overview-index {
  position: absolute;
  top: 22px; right: 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .08em;
  color: var(--text-mute);
  opacity: .75;
}
.overview-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.overview-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.overview-copy {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.overview-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .25s var(--ease);
}
.overview-more svg {
  transition: transform .25s var(--ease);
}

/* ---------- Service Detail sections ---------- */
.service-detail {
  position: relative;
  padding: 90px 0;
}
.service-detail + .service-detail { padding-top: 60px; }
.service-detail::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: min(560px, 60%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
.sd-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.service-detail-reverse .sd-grid > .sd-copy   { order: 2; }
.service-detail-reverse .sd-grid > .sd-visual { order: 1; }

.sd-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  color: var(--text-dim);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 18px;
}
.sd-index {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #0a0b12;
  background: var(--grad-1);
}

.sd-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 16px;
}
.sd-desc {
  color: var(--text-dim);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.65;
  margin: 0 0 26px;
  max-width: 560px;
}

.sd-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.sd-list {
  padding: 20px 20px 18px;
  border-radius: 14px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.09);
}
.sd-list-solutions {
  background: linear-gradient(180deg, rgba(138,180,255,.05), rgba(8,11,20,.98));
  border-color: rgba(138,180,255,.22);
}
.sd-list-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 12px;
  font-weight: 500;
}
.sd-list-title svg { color: var(--accent); }
.sd-list-solutions .sd-list-title svg { color: #7bd992; }
.sd-list ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sd-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.sd-list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.sd-list-solutions li::before {
  background: var(--grad-1);
  box-shadow: 0 0 8px rgba(138,180,255,.5);
}

.sd-cta { margin-top: 4px; }

/* Shared visual card frame */
.sd-visual { position: relative; }
.sd-visual-card,
.sd-chat-panel,
.sd-browser,
.sd-app,
.sd-visual-photo {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 18px;
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Real-photo service visual (Lead Qualification / Web Development / Custom Software) */
.sd-visual-photo { padding: 14px; }
.sd-visual-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.sd-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 4px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ---- 1. Automation flow ---- */
.sd-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 20px 8px 22px;
}
.sd-flow-node {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  text-align: center;
}
.sd-flow-node.accent {
  background: linear-gradient(180deg, rgba(138,180,255,.10), rgba(124,92,255,.06));
  border-color: rgba(138,180,255,.35);
  box-shadow: 0 12px 30px -18px rgba(124,92,255,.55);
}
.sd-node-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
.sd-node-label {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.sd-flow-line {
  position: relative;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-radius: 2px;
  overflow: hidden;
}
.sd-flow-pulse {
  position: absolute; top: -3px; left: -20%;
  width: 40%; height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, transparent, #8ab4ff 40%, #b78bff 60%, transparent);
  filter: blur(3px);
  animation: dash 2.6s linear infinite;
}
.sd-flow-legend {
  display: flex; justify-content: center; gap: 14px;
  padding-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--text-mute);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8ab4ff;
}
.legend-dot-p { background: #b78bff; }
.legend-dot-g { background: #7bd992; }

/* ---- 2. Agent stage ---- */
.sd-visual-agent {
  display: grid; place-items: center;
}
.sd-agent-stage {
  position: relative;
  width: 100%; max-width: 420px;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.sd-agent-core {
  position: relative;
  width: 26%; aspect-ratio: 1/1;
  border-radius: 26%;
  display: grid; place-items: center;
  padding: 10px;
  color: #cfdcff;
  background:
    linear-gradient(180deg, rgba(15,18,30,.9), rgba(11,13,22,.9)) padding-box,
    linear-gradient(135deg, rgba(138,180,255,.45), rgba(124,92,255,.32), rgba(34,211,238,.28)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 20px 50px -22px rgba(0,0,0,.75);
  z-index: 2;
  animation: shvBreathe 5s ease-in-out infinite;
}
.sd-agent-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.10);
  pointer-events: none;
}
.sd-agent-orbit-1 { width: 60%; aspect-ratio: 1/1; border-color: rgba(138,180,255,.22); }
.sd-agent-orbit-2 { width: 92%; aspect-ratio: 1/1; border-color: rgba(255,255,255,.07); }
.sd-agent-tool {
  position: absolute;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(15,18,30,.88);
  border: 1px solid var(--border-strong);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
  animation: chipFloat 6s ease-in-out infinite;
  z-index: 3;
}
.sd-agent-tool-1 { top: 8%;  left: 50%; transform: translateX(-50%); animation-delay: -0.2s; }
.sd-agent-tool-2 { top: 50%; right: 4%; transform: translateY(-50%); animation-delay: -2s; }
.sd-agent-tool-3 { bottom: 8%; left: 50%; transform: translateX(-50%); animation-delay: -3.5s; }
.sd-agent-tool-4 { top: 50%; left: 4%; transform: translateY(-50%); animation-delay: -1s; }

/* ---- 3. Chat panel ---- */
.sd-chat-stream {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 6px 8px;
}
.sd-msg {
  display: flex; gap: 8px;
  max-width: 88%;
  animation: fadeUp .5s var(--ease) both;
}
.sd-msg:nth-child(1) { animation-delay: .05s; }
.sd-msg:nth-child(2) { animation-delay: .25s; }
.sd-msg:nth-child(3) { animation-delay: .45s; }
.sd-msg:nth-child(4) { animation-delay: .65s; }
.sd-msg-in .sd-msg-body {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text);
  border-top-left-radius: 4px;
}
.sd-msg-out {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.sd-msg-out .sd-msg-body {
  background: linear-gradient(180deg, rgba(138,180,255,.16), rgba(124,92,255,.10));
  border: 1px solid rgba(138,180,255,.32);
  color: var(--text);
  border-top-right-radius: 4px;
}
.sd-msg-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.sd-msg-body {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.sd-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 4px;
}
.sd-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(138,180,255,.7);
  animation: typing 1.2s ease-in-out infinite;
}
.sd-typing i:nth-child(2) { animation-delay: .15s; }
.sd-typing i:nth-child(3) { animation-delay: .30s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* ---- 4. Browser mock ---- */
.sd-browser-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 2px 4px 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sd-url {
  flex: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-mute);
}
.sd-url-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28c840;
}
.sd-browser-body {
  padding: 6px;
  display: flex; flex-direction: column; gap: 16px;
}
.sd-block-hero {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 16px;
  border-radius: 12px;
  background:
    radial-gradient(400px 200px at 20% 0%, rgba(138,180,255,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
}
.sd-line {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.10);
}
.sd-line-lg { width: 78%; height: 14px; background: linear-gradient(90deg, rgba(138,180,255,.5), rgba(124,92,255,.4)); }
.sd-line-md { width: 55%; }
.sd-line-sm { width: 34%; height: 8px; opacity: .7; }
.sd-pill {
  align-self: flex-start;
  margin-top: 6px;
  width: 108px; height: 26px;
  border-radius: 8px;
  background: var(--grad-1);
  box-shadow: 0 8px 20px -8px rgba(124,92,255,.5);
}
.sd-block-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sd-tile {
  height: 74px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.sd-tile::after {
  content: "";
  position: absolute; inset: 12px auto auto 12px;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(138,180,255,.18);
  border: 1px solid rgba(138,180,255,.28);
}

/* ---- 5. App mock ---- */
.sd-app {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  padding: 16px;
}
.sd-app-side {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  align-items: center;
}
.sd-side-item {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
}
.sd-side-item.is-active {
  background: var(--grad-1);
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(124,92,255,.6);
}
.sd-app-main {
  display: flex; flex-direction: column; gap: 12px;
}
.sd-app-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sd-app-tile {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.sd-app-chart {
  height: 120px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  display: flex; align-items: flex-end; gap: 8px;
}
.sd-app-chart span {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(138,180,255,.65), rgba(124,92,255,.35));
  animation: barGrow .8s var(--ease) both;
}
.sd-app-chart span:nth-child(1) { animation-delay: .05s; }
.sd-app-chart span:nth-child(2) { animation-delay: .10s; }
.sd-app-chart span:nth-child(3) { animation-delay: .15s; }
.sd-app-chart span:nth-child(4) { animation-delay: .20s; }
.sd-app-chart span:nth-child(5) { animation-delay: .25s; }
.sd-app-chart span:nth-child(6) { animation-delay: .30s; }
.sd-app-chart span:nth-child(7) { animation-delay: .35s; }
@keyframes barGrow {
  from { transform: scaleY(.2); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ---------- Contact page ---------- */
.contact-hero {
  padding: 60px 0 30px;
}
.contact-head { margin-bottom: 0; max-width: 760px; }
.contact-title { margin: 12px 0 14px; }

.contact-methods {
  position: relative;
  padding: 40px 0 140px;
}

.method-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin-left: auto; margin-right: auto;
}

.method-card {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              background .35s var(--ease),
              box-shadow .35s var(--ease);
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(0.08s * var(--i));
}
.method-card::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -80px; top: -80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138,180,255,.25), transparent 70%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.method-card > * { position: relative; z-index: 2; }
.method-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(22,28,48,.97), rgba(14,18,32,.98));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 22px 60px -28px rgba(124,92,255,.55),
              0 6px 24px -14px rgba(0,0,0,.55);
}
.method-card:hover::after { opacity: .9; }
.method-card:hover .method-ico {
  color: #dbe7ff;
  border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.15);
}

.method-primary {
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(138,180,255,.28);
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.75);
}
.method-primary::after {
  opacity: .18;
  right: -60px; top: -60px;
  background: radial-gradient(closest-side, rgba(124,92,255,.18), transparent 70%);
}
.method-primary:hover::after { opacity: .9; }

.method-flag {
  position: absolute;
  top: 14px; right: 14px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #0a0b12;
  background: var(--grad-1);
  border-radius: 999px;
  z-index: 3;
}

.method-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.method-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.method-copy {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.method-value {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.09);
}
.method-value-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}
.method-value-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
}

.method-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.method-cta[disabled] {
  cursor: not-allowed;
  opacity: .6;
}
.method-cta[disabled]:hover { transform: none; }

.method-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 40px 0 80px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .hero-visual { order: 2; }

  .services { padding: 60px 0 90px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid > li:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - 10px); justify-self: center; width: 100%; }

  .inquiry { padding: 20px 0 100px; }
  .inquiry-card { padding: 28px 26px 24px; }

  .about-hero { padding: 24px 0 60px; }
  .trust { padding: 30px 0 90px; }
  .process { padding: 30px 0 100px; }

  .services-hero { padding: 24px 0 60px; }
  .services-hero-visual { max-width: 400px; }

  .contact-hero { padding: 40px 0 20px; }
  .contact-methods { padding: 30px 0 100px; }
  .method-grid { grid-template-columns: 1fr; max-width: 620px; gap: 16px; }

  .service-detail { padding: 60px 0; }
  .service-detail + .service-detail { padding-top: 40px; }
  .sd-grid { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-reverse .sd-grid > .sd-copy   { order: 1; }
  .service-detail-reverse .sd-grid > .sd-visual { order: 2; }
  .sd-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .services-overview { padding: 40px 0 90px; }
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid > li:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - 10px); justify-self: center; width: 100%; }
  .process-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .process-body { max-width: 180px; }
  .process-copy { font-size: 13.5px; }
  .story { padding: 40px 0 90px; }
  .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .story-timeline { display: flex; padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--border); gap: 32px; }
  .tl-item { padding: 0; }
  .tl-dot { left: 0; top: -28px; }

  .final-cta { padding: 40px 0 90px; }
  .cta-inner { padding: 60px 28px 54px; }
  .cta-rings span:nth-child(3) { width: 560px; height: 560px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .step-node .step-label { display: none; }
  .stepper { grid-template-columns: repeat(4, auto); justify-content: center; gap: 22px; position: relative; }
  .stepper::before {
    content: ""; position: absolute; top: 50%; left: 40px; right: 40px;
    height: 1px; background: var(--border); z-index: -1;
  }
  .step-node { padding: 6px; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav { height: 64px; }
  .brand-name { font-size: 12.5px; }
  .headline { font-size: clamp(34px, 8vw, 46px); }
  .cta-row .btn { flex: 1 1 auto; justify-content: center; }

  .service-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-grid > li:nth-child(5) { max-width: none; }
  .service-card { padding: 22px 20px; }
  .service-arrow { top: 18px; right: 18px; width: 30px; height: 30px; }

  .inquiry-card { padding: 22px 18px 20px; border-radius: 18px; }
  .option-grid { grid-template-columns: 1fr; }
  .contact-toggle { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; gap: 10px; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-actions #nextBtn,
  .form-actions #submitBtn { margin-left: 0; }

  .trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .trust-card { padding: 22px 20px; }

  .services-hero-visual { max-width: 320px; }
  .shv-chip { font-size: 11.5px; padding: 6px 10px; }

  .contact-methods { padding: 20px 0 80px; }
  .method-card { padding: 24px 20px 22px; }
  .method-flag { top: 12px; right: 12px; }

  .service-detail { padding: 44px 0; }
  .sd-columns { grid-template-columns: 1fr; gap: 12px; }
  .sd-list { padding: 16px 16px 14px; }
  .sd-flow {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 4px;
  }
  .sd-flow-line {
    width: 2px; height: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
    justify-self: center;
  }
  .sd-flow-pulse {
    top: -10%; left: -3px;
    width: 8px; height: 30%;
    background: linear-gradient(180deg, transparent, #8ab4ff 40%, #b78bff 60%, transparent);
    animation: dashV 2.6s linear infinite;
  }
  .sd-flow-node { padding: 12px; }
  .sd-agent-stage { max-width: 320px; }
  .sd-cta { width: 100%; justify-content: center; }
  .sd-tile { height: 60px; }
  .sd-app { grid-template-columns: 44px 1fr; }
  .sd-side-item { width: 26px; height: 26px; }
  .sd-app-tiles { grid-template-columns: repeat(2, 1fr); }
  .sd-app-tiles > .sd-app-tile:nth-child(3) { display: none; }
  /* Tighter chip positions at ≤720px so all 6 stay clear of the FZ artwork. */
  .shv-chip-1 { top: 2%;    left: 4%; }
  .shv-chip-2 { top: 2%;    right: 4%; }
  .shv-chip-6 { top: 48%;   left: -2%; }
  .shv-chip-5 { top: 48%;   right: -2%; }
  .shv-chip-3 { bottom: 2%; left: 4%; }
  .shv-chip-4 { bottom: 2%; right: 4%; }
  /* Let the long Full-Stack Web Development chip wrap to 2 lines on narrow screens */
  .shv-chip-4 { max-width: 46%; white-space: normal; line-height: 1.2; text-align: left; }
  .overview-grid { grid-template-columns: 1fr; gap: 14px; }
  .overview-grid > li:nth-child(5) { max-width: none; }
  .overview-link { padding: 22px 20px; }
  .overview-index { top: 18px; right: 18px; }

  .cta-inner { padding: 44px 20px 40px; border-radius: 20px; }
  .cta-rings span:nth-child(2) { width: 380px; height: 380px; }
  .cta-rings span:nth-child(3) { width: 460px; height: 460px; }
  .cta-row-final .btn { flex: 1 1 auto; justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .workflow { padding: 18px 4px; }
  .nodes { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  .arrow {
    width: 2px; height: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
  }
  .arrow .pulse {
    top: -20%; left: -3px;
    width: 8px; height: 40%;
    background: linear-gradient(180deg, transparent, #8ab4ff 40%, #b78bff 60%, transparent);
    animation: dashV 2.6s linear infinite;
  }
  @keyframes dashV {
    0%   { top: -30%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 105%; opacity: 0; }
  }
  .wf-lines { display: none; }
  .card-foot { justify-content: space-between; }
  .scroll-hint { display: none; }
}

/* Process timeline flips vertical earlier — 5 columns are cramped below 900px */
@media (max-width: 900px) {
  .process { padding: 30px 0 90px; }
  .process-track {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 4px;
  }
  .process-rail {
    top: 30px;
    bottom: 30px;
    left: 30px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.14) 8%,
      rgba(255,255,255,.14) 92%,
      rgba(255,255,255,.04));
  }
  .process-rail-fill {
    background: linear-gradient(180deg,
      transparent,
      rgba(138,180,255,.9) 45%,
      rgba(124,92,255,.9) 60%,
      transparent);
    transform: translateY(-100%);
    animation: railSweepV 6s linear infinite;
  }
  @keyframes railSweepV {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }
  .process-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    padding: 6px 0 22px;
  }
  .process-num {
    width: 60px; height: 60px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .process-body { max-width: none; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Demo Hub (demos.html) ---------- */
.demos-hub { padding: 60px 0 100px; }
.demos-hub-head { max-width: 720px; margin: 0 auto 44px; }
.demos-hub-head .eyebrow { margin-bottom: 18px; }

.hub-grid {
  list-style: none; padding: 0; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1080px;
}
.hub-grid > li:nth-child(4),
.hub-grid > li:nth-child(5) { grid-column: span 1; }

.hub-card {
  position: relative;
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(0.08s * var(--i, 0));
}
.hub-link {
  position: relative;
  display: block;
  padding: 26px 24px 24px;
  height: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              background .35s var(--ease),
              box-shadow .35s var(--ease);
}
.hub-link::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.55), rgba(124,92,255,.35), rgba(34,211,238,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.hub-link > * { position: relative; z-index: 2; }

/* Live cards — interactive hover; Coming-Soon cards — dimmed, non-interactive */
.hub-card-live .hub-link:hover,
.hub-card-live .hub-link:focus-visible {
  outline: none;
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(22,28,48,.97), rgba(14,18,32,.98));
  box-shadow: 0 24px 60px -30px rgba(124,92,255,.6),
              0 8px 24px -12px rgba(0,0,0,.55);
}
.hub-card-live .hub-link:hover::before,
.hub-card-live .hub-link:focus-visible::before { opacity: 1; }
.hub-card-live .hub-link:hover .hub-ico,
.hub-card-live .hub-link:focus-visible .hub-ico {
  color: #dbe7ff;
  border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.15);
}
.hub-card-live .hub-link:hover .hub-more svg,
.hub-card-live .hub-link:focus-visible .hub-more svg {
  transform: translateX(4px);
}

.hub-card-soon .hub-link {
  cursor: not-allowed;
  opacity: .78;
  filter: saturate(.85);
}

.hub-ico {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.hub-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.hub-copy {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.hub-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid;
}
.hub-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.hub-status-live {
  color: #7bd992;
  background: rgba(40,200,64,.08);
  border-color: rgba(40,200,64,.30);
}
.hub-status-live .hub-status-dot {
  background: #28c840;
  box-shadow: 0 0 6px rgba(40,200,64,.75);
}
.hub-status-progress {
  color: #8ab4ff;
  background: rgba(138,180,255,.08);
  border-color: rgba(138,180,255,.32);
}
.hub-status-progress .hub-status-dot {
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34,211,238,.75);
}
.hub-status-soon {
  color: var(--text-mute);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.hub-status-soon .hub-status-dot {
  background: #6b7088;
}

.hub-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .25s var(--ease);
}
.hub-more svg { transition: transform .25s var(--ease); }

/* Responsive */
@media (max-width: 1024px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid > li:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - 9px); justify-self: center; width: 100%; }
}
@media (max-width: 720px) {
  .demos-hub { padding: 40px 0 80px; }
  .hub-grid { grid-template-columns: 1fr; gap: 14px; }
  .hub-grid > li:nth-child(5) { max-width: none; }
  .hub-link { padding: 22px 20px; }
}

/* ---------- Voice Agent Demo ---------- */
.voice-page {
  --level: 0;                  /* mirrored from .voice-orb; declared here so mobile queries can reference */
  padding: 60px 0 100px;
}
/* Hero wrapper: wide enough that titles fit on one line at desktop but the
   badge/title/description column stays visually tight. Change Business is
   absolutely positioned so it hugs the wrapper's left edge WITHOUT pushing
   the centred content off its axis. */
.voice-head {
  max-width: 980px;
  margin: 0 auto 26px;
  padding-top: 44px;
  position: relative;
  text-align: center;
}
.voice-head .demo-back {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  margin: 0;
}
.voice-head .eyebrow { margin-bottom: 14px; }
.voice-call-title {
  max-width: 900px;
  margin: 14px auto 12px;
  text-wrap: balance;
}
/* Keep "— Demo" attached to the preceding word so it never orphans. */
.voice-call-title .voice-title-tail { white-space: nowrap; }
/* Desktop: hero wrapper has room for every preset title on one line. */
@media (min-width: 1000px) {
  .voice-call-title { white-space: nowrap; }
}
.voice-head .section-lede {
  margin: 0 auto;
  max-width: 620px;
}

.voice-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 32px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}

.voice-stage {
  position: relative;
  height: 300px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

/* Central orb — reactive scale/glow via CSS custom property --level (0..1) */
.voice-orb {
  --level: 0;
  position: relative;
  width: 190px; height: 190px;
  display: grid; place-items: center;
  transform: translateZ(0);
}
.voice-orb-core {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.22), transparent 45%),
    radial-gradient(circle at 55% 60%, rgba(34,211,238,.28), transparent 55%),
    linear-gradient(135deg, #6a80ff 0%, #7c5cff 55%, #a06bff 100%);
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.10),
    inset 0 -30px 60px rgba(10,13,30,.55),
    0 0 calc(28px + 60px * var(--level)) rgba(124,92,255, calc(.35 + .5 * var(--level))),
    0 0 calc(48px + 100px * var(--level)) rgba(138,180,255, calc(.15 + .35 * var(--level)));
  transform: scale(calc(1 + var(--level) * 0.14));
  transition: transform .08s linear, box-shadow .12s linear;
  animation: voiceBreath 5.5s ease-in-out infinite;
}
.voice-orb-glow {
  position: absolute; inset: -30%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(138,180,255, calc(.15 + .35 * var(--level))),
    transparent 60%);
  filter: blur(30px);
  transform: scale(calc(1 + var(--level) * 0.25));
  transition: transform .1s linear;
}
.voice-orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(138,180,255,.22);
  pointer-events: none;
}
.voice-orb-ring-mid {
  inset: -16%;
  border-color: rgba(138,180,255, calc(.20 + .35 * var(--level)));
  transform: scale(calc(1 + var(--level) * 0.10));
  transition: transform .1s linear, border-color .12s linear;
}
.voice-orb-ring-outer {
  inset: -34%;
  border-style: dashed;
  border-color: rgba(124,92,255, calc(.14 + .25 * var(--level)));
  transform: scale(calc(1 + var(--level) * 0.16));
  transition: transform .1s linear, border-color .12s linear;
  animation: voiceRingSpin 40s linear infinite;
}
/* Muted state — orb calmer and dimmer */
.voice-orb[data-active="true"] .voice-orb-core { opacity: 1; }
.voice-orb .voice-orb-core { opacity: .85; }
@keyframes voiceBreath {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}
@keyframes voiceRingSpin {
  from { transform: rotate(0deg) scale(calc(1 + var(--level) * 0.16)); }
  to   { transform: rotate(360deg) scale(calc(1 + var(--level) * 0.16)); }
}

/* Status + timer row */
.voice-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 4px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 20px;
}
.voice-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.voice-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6b7088;
  box-shadow: 0 0 0 3px rgba(107,112,136,.15);
}
.voice-status-dot[data-state="ready"]      { background: #6b7088; box-shadow: 0 0 0 3px rgba(107,112,136,.15); }
.voice-status-dot[data-state="requesting"] { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,.7); animation: voicePulse 1.2s ease-out infinite; }
.voice-status-dot[data-state="listening"]  { background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.85); }
.voice-status-dot[data-state="processing"] { background: #f7c744; box-shadow: 0 0 6px rgba(247,199,68,.7); animation: voicePulse 1.2s ease-out infinite; }
.voice-status-dot[data-state="speaking"]   { background: #7c5cff; box-shadow: 0 0 8px rgba(124,92,255,.85); animation: voicePulse 1.2s ease-out infinite; }
.voice-status-dot[data-state="muted"]      { background: #b7692c; box-shadow: 0 0 6px rgba(183,105,44,.6); }
.voice-status-dot[data-state="error"]      { background: #ff6a6a; box-shadow: 0 0 6px rgba(255,106,106,.6); }
@keyframes voicePulse {
  0% { transform: scale(1); opacity: .95; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.voice-timer {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--text-dim);
}

/* Controls */
.voice-controls {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.voice-btn-start { min-width: 180px; justify-content: center; }
.voice-btn-mute {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600; font-size: 14px;
  color: var(--text);
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.voice-btn-mute:hover  { color: #fff; background: rgba(10,13,23,.75); border-color: rgba(255,255,255,.22); }
.voice-btn-mute[aria-pressed="true"] {
  color: #ffd7a3;
  background: rgba(183,105,44,.10);
  border-color: rgba(183,105,44,.45);
}
.voice-btn-mute:focus-visible,
.voice-btn-start:focus-visible,
.voice-btn-end:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.voice-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
  background: rgba(255,106,106,.06);
  border: 1px dashed rgba(255,106,106,.28);
  text-align: left;
}
.voice-typed {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(138,180,255,.05);
  border: 1px solid rgba(138,180,255,.22);
}
.voice-typed[hidden] { display: none !important; }
.voice-typed-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 8px;
}
.voice-typed-row { display: flex; gap: 8px; }
.voice-typed-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font: inherit;
}
.voice-typed-row input:focus { outline: none; border-color: rgba(138,180,255,.55); }

.voice-transcript {
  margin-top: 22px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.08);
  text-align: left;
}
.voice-transcript summary {
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px 0;
  outline: none;
}
.voice-transcript summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.voice-transcript-body {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.voice-transcript-placeholder { margin: 0; font-style: italic; color: var(--text-mute); }
.voice-msg {
  margin: 0 0 8px;
  padding: 0;
  color: var(--text);
}
.voice-msg:last-child { margin-bottom: 0; }
.voice-msg-role { font-weight: 600; color: var(--accent); margin-right: 4px; }
.voice-msg-interim { color: var(--text-mute); font-style: italic; }
.voice-msg-interim .voice-msg-role { opacity: .7; }
.voice-msg-agent .voice-msg-role { color: var(--accent-3, var(--accent)); }
.voice-msg-pending .voice-msg-body { color: var(--text-mute); font-style: italic; }
.voice-msg-notice .voice-msg-body { color: var(--text-mute); }

/* Mobile */
@media (max-width: 720px) {
  .voice-page { padding: 40px 0 80px; }
  .voice-panel { padding: 32px 20px 22px; border-radius: 18px; }
  .voice-stage { height: 240px; margin-bottom: 16px; }
  .voice-orb { width: 150px; height: 150px; }
  .voice-controls .btn { flex: 1 1 auto; justify-content: center; }
  .voice-btn-start { min-width: 0; width: 100%; }
}

/* Reduced motion — freeze breathing + ring spin + orb scaling.
   Mic capture still works; the orb just doesn't animate. */
@media (prefers-reduced-motion: reduce) {
  .voice-orb-core { animation: none; transform: none; }
  .voice-orb-glow { transform: none; }
  .voice-orb-ring-outer, .voice-orb-ring-mid { animation: none; transform: none; }
}

/* Small alternate CTA row on chatbot-demo page → voice demo */
.demo-alt-cta { text-align: center; margin-top: 18px; }
.demo-alt-cta-btn { padding: 10px 16px; font-size: 13.5px; }

/* ---------- Demo "Powered by FAJR Z" caption ---------- */
.demo-powered-by {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 22px auto 0;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: .04em;
}
.demo-select .container,
.demo-chat .demo-chat-container { text-align: center; }
.demo-select .biz-grid,
.demo-select .biz-custom,
.demo-select .biz-actions,
.demo-select .demo-disclaimer,
.demo-select .demo-head,
.demo-chat .demo-chat-panel { text-align: initial; }
.demo-powered-logo {
  width: 24px; height: 24px;
  /* Transparent FAJR Z logo; `contain` preserves aspect ratio. */
  background: url('assets/images/fajrz-logo.png') center / contain no-repeat, transparent;
  flex-shrink: 0;
}
.demo-powered-text strong { color: var(--text); font-weight: 700; }

/* ---------- Live AI Demo ---------- */
.demo-select {
  padding: 60px 0 100px;
}
.demo-head { max-width: 720px; margin: 0 auto 40px; }
.demo-head .eyebrow { margin-bottom: 18px; }

.biz-grid {
  list-style: none; padding: 0; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
}
.biz-card {
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 20px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), box-shadow .25s var(--ease);
  animation: fadeUp .7s var(--ease) both;
}
.biz-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
}
.biz-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.biz-card.is-selected {
  border-color: rgba(138,180,255,.55);
  background: linear-gradient(180deg, rgba(138,180,255,.08), rgba(8,11,20,.96));
  box-shadow: 0 12px 30px -18px rgba(124,92,255,.5);
}
.biz-ico {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid rgba(138,180,255,.20);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.biz-card.is-selected .biz-ico {
  color: #dbe7ff;
  background: rgba(138,180,255,.16);
  border-color: rgba(138,180,255,.45);
}
.biz-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--text);
}
.biz-hint {
  font-size: 13px; color: var(--text-mute);
}

.biz-custom {
  max-width: 620px;
  margin: 22px auto 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(138,180,255,.22);
  animation: fadeUp .35s var(--ease) both;
}
.biz-custom label {
  display: block;
  font-size: 13.5px; font-weight: 500; color: var(--text-dim);
  margin-bottom: 8px;
}
.biz-custom label:not(:first-child) { margin-top: 16px; }
.voice-req-optional { color: var(--text-mute); font-weight: 400; }
.biz-custom input,
.biz-custom select,
.biz-custom textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font: inherit; font-size: 16px;
}
.biz-custom textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.biz-custom input:focus,
.biz-custom select:focus,
.biz-custom textarea:focus {
  outline: none;
  border-color: rgba(138,180,255,.55);
  box-shadow: 0 0 0 3px rgba(138,180,255,.14);
}

.biz-actions {
  display: flex; justify-content: center;
  margin-top: 32px;
}

/* Voice Agent demo — send-method choice (shown in place of the form after
   the visitor submits; see .biz-custom above for the form itself, and
   .ca-send-sub/.ca-choice-* for the reused send-choice styling). */
.voice-request-confirm {
  max-width: 620px;
  margin: 22px auto 0;
  padding: 24px 20px;
  border-radius: 14px;
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(138,180,255,.22);
  text-align: center;
  animation: fadeUp .35s var(--ease) both;
}

.demo-disclaimer {
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
  margin: 26px auto 0;
  max-width: 560px;
}

/* ----- Demo chat view ----- */
.demo-chat {
  padding: 40px 0 80px;
}
.demo-chat-container { max-width: 880px; }
.demo-chat-panel {
  display: flex; flex-direction: column;
  height: min(680px, calc(100vh - 220px));
  height: min(680px, calc(100dvh - 220px));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  animation: fadeUp .35s var(--ease) both;
}
.demo-chat-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.demo-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.demo-back:hover { color: var(--text); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.demo-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.demo-chat-title-wrap {
  display: inline-flex; align-items: center; gap: 12px;
  justify-self: center;
  min-width: 0;
}
.demo-chat-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.10);
  border: 1px solid rgba(138,180,255,.22);
  flex-shrink: 0;
}
.demo-chat-title {
  font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-chat-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}

.demo-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 18px 10px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.demo-chat-log::-webkit-scrollbar { width: 6px; }
.demo-chat-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.demo-msg { max-width: 86%; display: flex; gap: 8px; animation: fadeUp .2s var(--ease) both; }
.demo-msg-body {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.demo-msg-assistant .demo-msg-body {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  border-top-left-radius: 4px;
}
.demo-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.demo-msg-user .demo-msg-body {
  background: linear-gradient(180deg, rgba(138,180,255,.18), rgba(124,92,255,.12));
  border: 1px solid rgba(138,180,255,.32);
  color: var(--text);
  border-top-right-radius: 4px;
}
.demo-msg-notice .demo-msg-body {
  background: rgba(34,211,238,.08);
  border: 1px dashed rgba(34,211,238,.28);
  color: var(--text-dim);
  font-style: italic;
}

.demo-chat-form {
  flex: 0 0 auto;
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.demo-chat-input {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 120px;
  padding: 11px 14px;
  border-radius: 10px;
  font: inherit; font-size: 16px;
  color: var(--text);
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  resize: none;
  line-height: 1.4;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.demo-chat-input::placeholder { color: var(--text-mute); }
.demo-chat-input:focus {
  outline: none;
  border-color: rgba(138,180,255,.55);
  background: rgba(10,13,23,.75);
  box-shadow: 0 0 0 3px rgba(138,180,255,.14);
}
.demo-chat-send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #0a0b12;
  background: var(--grad-1);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.demo-chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.demo-chat-send:disabled { opacity: .35; cursor: not-allowed; }
.demo-chat-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1024px) {
  .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .demo-select { padding: 40px 0 70px; }
  .biz-grid { grid-template-columns: 1fr; gap: 12px; }
  .biz-custom { padding: 14px 16px; }
  .demo-chat { padding: 20px 0 60px; }
  .demo-chat-panel {
    height: calc(100vh - 160px);
    height: calc(100dvh - 160px);
    border-radius: 16px;
  }
  .demo-chat-head { grid-template-columns: auto 1fr; padding: 12px 12px; }
  .demo-chat-head > span:last-of-type { display: none; }
  .demo-chat-title-wrap { justify-self: end; }
  .demo-chat-title { font-size: 13.5px; }
}

/* ---------- Chatbot (demo assistant) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.chatbot-launcher {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #0a0b12;
  background: var(--grad-1);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 14px 30px -10px rgba(124,92,255,.55),
    0 6px 16px -8px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.15);
  cursor: pointer;
  z-index: 60;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.chatbot-launcher:hover  { transform: translateY(-2px); }
.chatbot-launcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.chatbot-launcher[aria-expanded="true"] { transform: scale(.92); opacity: .55; }
.chatbot-launcher-ico { display: grid; place-items: center; }
.chatbot-launcher-dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34,211,238,.9);
}

.chatbot-panel {
  position: fixed;
  right: 22px; bottom: 90px;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: 560px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  display: flex; flex-direction: column;
  z-index: 60;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,13,23,.90), rgba(7,9,16,.94));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.75),
    0 10px 30px -12px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  color: var(--text);
  animation: chatbotIn .22s var(--ease) both;
}
/* Author display:flex above otherwise wins over the browser's built-in
   [hidden]{display:none}, so the hidden attribute wouldn't visually close. */
.chatbot-panel[hidden] { display: none !important; }
@keyframes chatbotIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chatbot-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.chatbot-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.chatbot-avatar {
  width: 34px; height: 34px;
  /* Transparent FAJR Z logo; `contain` preserves aspect ratio. */
  background: url('assets/images/fajrz-logo.png') center / contain no-repeat, transparent;
  flex-shrink: 0;
}
.chatbot-avatar > svg { display: none; }
.chatbot-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chatbot-title {
  font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  margin: 0; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chatbot-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}
.chatbot-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34,211,238,.9);
}
.chatbot-close {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid rgba(255,255,255,.09);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.chatbot-close:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
}

.chatbot-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.chatbot-log::-webkit-scrollbar { width: 6px; }
.chatbot-log::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 3px;
}

.chatbot-msg {
  max-width: 86%;
  display: flex; gap: 8px;
  animation: chatbotMsgIn .25s var(--ease) both;
}
@keyframes chatbotMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chatbot-msg-body {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chatbot-msg-assistant .chatbot-msg-body {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  border-top-left-radius: 4px;
}
.chatbot-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chatbot-msg-user .chatbot-msg-body {
  background: linear-gradient(180deg, rgba(138,180,255,.18), rgba(124,92,255,.12));
  border: 1px solid rgba(138,180,255,.32);
  color: var(--text);
  border-top-right-radius: 4px;
}
.chatbot-msg-notice .chatbot-msg-body {
  background: rgba(34,211,238,.08);
  border: 1px dashed rgba(34,211,238,.28);
  color: var(--text-dim);
  font-style: italic;
}

.chatbot-form {
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; gap: 8px; align-items: flex-end;
}
.chatbot-notice {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 12px 10px;
  text-align: center;
  color: var(--text-mute);
  font-size: 11px;
}
.chatbot-input {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 12px;
  border-radius: 10px;
  font: inherit; font-size: 14px;
  color: var(--text);
  background: rgba(10,13,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  resize: none;
  line-height: 1.4;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.chatbot-input::placeholder { color: var(--text-mute); }
.chatbot-input:focus {
  outline: none;
  border-color: rgba(138,180,255,.5);
  background: rgba(10,13,23,.75);
  box-shadow: 0 0 0 3px rgba(138,180,255,.14);
}
.chatbot-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #0a0b12;
  background: var(--grad-1);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.chatbot-send:hover:not(:disabled) { transform: translateY(-1px); }
.chatbot-send:disabled { opacity: .35; cursor: not-allowed; }
.chatbot-send:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .chatbot-launcher { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .chatbot-panel {
    right: 10px; left: 10px; bottom: 76px;
    width: auto; max-width: none;
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-panel,
  .chatbot-msg { animation: none !important; }
}

/* ---------------------------------------------------------------
   Demos hub — six-solution layout (overrides for 6 cards)
   The base .hub-grid was tuned for 5 cards and centers the 5th card
   at 1024px. With 6 cards we want a clean 3x2 → 2x3 → 1x6 stack.
--------------------------------------------------------------- */
.hub-grid-6 { max-width: 1160px; }
.hub-grid-6 > li:nth-child(5),
.hub-grid-6 > li:nth-child(6) { grid-column: auto; max-width: none; justify-self: auto; width: auto; }
@media (max-width: 1024px) {
  .hub-grid-6 > li:nth-child(5) { grid-column: auto; max-width: none; justify-self: auto; width: auto; }
}

/* 5-card grid: 3 across top row, 2 centered on second row.
   The existing 3-col grid handles the top row; nth-child(4) & (5) get
   centered under it so the layout looks intentional, not lopsided. */
.hub-grid-5 { max-width: 1080px; }
.hub-grid-5 > li:nth-child(4) { grid-column: 1 / span 1; justify-self: end;   width: 100%; max-width: calc((1080px - 36px) / 3); }
.hub-grid-5 > li:nth-child(5) { grid-column: 2 / span 1; justify-self: start; width: 100%; max-width: calc((1080px - 36px) / 3); }
@media (max-width: 1024px) {
  .hub-grid-5 > li:nth-child(4),
  .hub-grid-5 > li:nth-child(5) { grid-column: auto; justify-self: auto; max-width: none; width: auto; }
  .hub-grid-5 > li:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - 9px); justify-self: center; width: 100%; }
}
@media (max-width: 720px) {
  .hub-grid-5 > li:nth-child(5) { max-width: none; }
}
.hub-sub {
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  opacity: .9;
}

/* ---------------------------------------------------------------
   Shared workflow-demo styling (used by AI Agent & AI Automation)
--------------------------------------------------------------- */
.workflow-page { padding: 96px 0 120px; }
.workflow-panel {
  margin: 24px auto 0;
  max-width: 1080px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10,13,23,.75), rgba(7,9,16,.78));
  border: 1px solid rgba(255,255,255,.09);
}
.workflow-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.workflow-step {
  position: relative;
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(138,180,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.workflow-step[data-state="active"] {
  background: rgba(138,180,255,.14);
  border-color: rgba(138,180,255,.5);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(124,92,255,.7);
}
.workflow-step[data-state="done"] {
  background: rgba(40,200,64,.08);
  border-color: rgba(40,200,64,.35);
}
.workflow-step-index {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.workflow-step[data-state="active"] .workflow-step-index {
  background: rgba(138,180,255,.22);
  border-color: rgba(138,180,255,.5);
  color: #dbe7ff;
}
.workflow-step[data-state="done"] .workflow-step-index {
  background: rgba(40,200,64,.16);
  border-color: rgba(40,200,64,.45);
  color: #7bd992;
}
.workflow-step-title {
  font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: var(--text);
}
.workflow-step-copy {
  font-size: 12.5px; line-height: 1.5; margin: 0; color: var(--text-dim);
}
.workflow-cta {
  margin-top: 22px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.workflow-log {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.workflow-log p { margin: 0 0 6px; }
.workflow-log .wf-tick { color: #7bd992; }
.workflow-log .wf-info { color: #8ab4ff; }
.workflow-log .wf-warn { color: #f7c744; }
@media (max-width: 900px) {
  .workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .workflow-steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Custom Software demo — fictional dashboard
--------------------------------------------------------------- */
.software-page { padding: 96px 0 120px; }
.software-shell {
  max-width: 1120px; margin: 24px auto 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10,13,23,.75), rgba(7,9,16,.78));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}
.software-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.software-brand-mock {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: .01em; font-size: 14px;
}
.software-brand-mock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(138,180,255,.7); }
.software-user {
  font-size: 12px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 8px;
}
.software-user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #8ab4ff, #7c5cff);
}
.software-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  padding: 20px;
}
.software-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 18px;
}
.software-kpi {
  padding: 14px;
  border-radius: 12px;
  background: rgba(138,180,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.software-kpi-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 6px;
}
.software-kpi-value { font-size: 20px; font-weight: 700; color: var(--text); }
.software-kpi-delta { font-size: 11.5px; color: #7bd992; margin-top: 2px; }
.software-table-wrap {
  border-radius: 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.software-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px; font-weight: 700;
}
.software-actions { display: flex; gap: 8px; }
.software-btn {
  font-size: 12px; padding: 6px 10px; border-radius: 8px;
  background: rgba(138,180,255,.1); border: 1px solid rgba(138,180,255,.28);
  color: #dbe7ff; cursor: pointer; transition: background .2s var(--ease);
}
.software-btn:hover { background: rgba(138,180,255,.2); }
.software-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.software-table th, .software-table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.software-table th { color: var(--text-mute); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.software-table tr:last-child td { border-bottom: none; }
.software-badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid;
}
.software-badge-open   { color: #f7c744; background: rgba(247,199,68,.08); border-color: rgba(247,199,68,.32); }
.software-badge-done   { color: #7bd992; background: rgba(40,200,64,.08); border-color: rgba(40,200,64,.32); }
.software-badge-review { color: #8ab4ff; background: rgba(138,180,255,.08); border-color: rgba(138,180,255,.32); }
.software-side {
  padding: 16px;
  border-radius: 12px;
  background: rgba(138,180,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 10px;
}
.software-side h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: -0.005em; }
.software-side p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.software-ai-log {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.55;
  color: var(--text-dim);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 10px;
  min-height: 60px;
}
@media (max-width: 900px) {
  .software-body { grid-template-columns: 1fr; }
  .software-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------
   Website Development demo — mini fictional business site preview
--------------------------------------------------------------- */
.web-page { padding: 96px 0 120px; }
.web-frame {
  max-width: 1100px; margin: 24px auto 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10,13,23,.75), rgba(7,9,16,.78));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
}
.web-browserbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.web-browserbar-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15); }
.web-browserbar-url {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-mute);
}
.web-site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.web-site-brand { font-weight: 800; letter-spacing: .02em; font-size: 15px; }
.web-site-brand span { color: var(--accent); }
.web-site-navlinks { display: flex; gap: 18px; font-size: 13px; color: var(--text-dim); }
.web-site-hero {
  padding: 40px 28px 30px;
  text-align: center;
}
.web-site-hero h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 10px; letter-spacing: -0.02em; }
.web-site-hero p  { color: var(--text-dim); font-size: 14.5px; margin: 0 auto 20px; max-width: 560px; }
.web-site-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 0 24px 24px;
}
.web-feature {
  padding: 16px;
  border-radius: 12px;
  background: rgba(138,180,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.web-feature h3 { margin: 0 0 6px; font-size: 14px; }
.web-feature p  { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
.web-site-cta {
  padding: 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(138,180,255,.04);
}
.web-site-cta input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font: inherit;
}
.web-site-cta input:focus { outline: none; border-color: rgba(138,180,255,.5); }
.web-cta-note { grid-column: 1 / -1; font-size: 12px; color: var(--text-mute); margin: 0; }
.web-fab {
  position: absolute; right: 22px; bottom: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #8ab4ff, #7c5cff);
  border: none; color: white; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px -8px rgba(124,92,255,.6);
}
.web-frame { position: relative; }
@media (max-width: 700px) {
  .web-site-features { grid-template-columns: 1fr; }
  .web-site-navlinks { display: none; }
  .web-site-cta { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Demo start gate — every non-conversational demo waits for the
   visitor to click Start before revealing its sample content.
--------------------------------------------------------------- */
.demo-gate {
  margin: 24px auto 0;
  max-width: 620px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10,13,23,.75), rgba(7,9,16,.78));
  border: 1px solid rgba(255,255,255,.09);
  text-align: center;
}
.demo-gate[hidden] { display: none !important; }
.demo-gate-lede {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Voice-agent booking confirmation card */
.voice-booking-card {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(40,200,64,.06);
  border: 1px solid rgba(40,200,64,.35);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.voice-booking-head {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7bd992; margin-bottom: 8px; font-weight: 700;
}
.voice-booking-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px;
  font-size: 12.5px; line-height: 1.55;
}
.voice-booking-k { color: var(--text-mute); }
.voice-booking-v { color: var(--text); word-break: break-word; }
.voice-booking-foot {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,.06);
  font-size: 11px; color: var(--text-mute);
}

/* ---------------------------------------------------------------
   AI Lead Qualification demo (demo-ai-agent.html)
   Scoped under .leadq* so no other demo shares these rules.
--------------------------------------------------------------- */
.leadq { margin: 20px auto 0; max-width: 1240px; }

.leadq-progress {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.leadq-progress-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  min-width: 0;
}
.leadq-progress-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.18); flex-shrink: 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.leadq-progress-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leadq-progress-step[data-state="active"] {
  color: #dbe7ff; border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.06);
}
.leadq-progress-step[data-state="active"] .leadq-progress-dot {
  background: #8ab4ff; box-shadow: 0 0 8px rgba(138,180,255,.85);
}
.leadq-progress-step[data-state="done"] {
  color: #7bd992; border-color: rgba(40,200,64,.35);
}
.leadq-progress-step[data-state="done"] .leadq-progress-dot {
  background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,.6);
}
@media (max-width: 780px) {
  .leadq-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.leadq-controls { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 16px; flex-wrap: wrap; }

.leadq-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 1.05fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1080px) { .leadq-grid { grid-template-columns: 1fr; } }

.leadq-col {
  min-height: 480px;
  padding: 20px 20px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.leadq-col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.leadq-col-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

.leadq-chat-user { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); min-width: 0; }
.leadq-chat-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #8ab4ff, #7c5cff);
  color: #0b0d16; font-size: 12px; font-weight: 800;
}
.leadq-chat-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.leadq-chat-name small { font-size: 10.5px; color: var(--text-mute); }
.leadq-chat-log {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  overflow-y: auto;
  min-height: 380px; max-height: 480px;
  display: flex; flex-direction: column; gap: 10px;
}
.leadq-chat-placeholder { color: var(--text-mute); font-size: 13px; margin: auto; text-align: center; }
.leadq-msg { display: flex; }
.leadq-msg-agent { justify-content: flex-start; }
.leadq-msg-customer { justify-content: flex-end; }
.leadq-msg-body {
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.55;
  animation: leadqIn .28s var(--ease) both;
}
.leadq-msg-agent .leadq-msg-body {
  background: rgba(138,180,255,.10);
  border: 1px solid rgba(138,180,255,.28);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.leadq-msg-customer .leadq-msg-body {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.leadq-msg-typing .leadq-msg-body { padding: 12px 14px; }
.leadq-dots { display: inline-flex; gap: 4px; }
.leadq-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  animation: leadqDots 1.15s ease-in-out infinite;
}
.leadq-dots i:nth-child(2) { animation-delay: .15s; }
.leadq-dots i:nth-child(3) { animation-delay: .3s;  }
@keyframes leadqDots { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes leadqIn   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.leadq-qual-status {
  font-size: 11.5px; color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.leadq-crit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.leadq-crit {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label note" "value note";
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(138,180,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.leadq-crit[data-state="ok"] {
  background: rgba(40,200,64,.06);
  border-color: rgba(40,200,64,.32);
  animation: leadqPop .35s var(--ease) both;
}
@keyframes leadqPop { from { transform: translateY(3px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.leadq-crit-label {
  grid-area: label;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
}
.leadq-crit-value {
  grid-area: value;
  font-size: 13px; color: var(--text); font-weight: 600;
}
.leadq-crit-note {
  grid-area: note;
  align-self: center;
  font-size: 11.5px; color: #7bd992;
}

.leadq-result-status {
  font-size: 11.5px; color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.leadq-hot {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40,200,64,.06), rgba(138,180,255,.05));
  border: 1px solid rgba(40,200,64,.35);
  position: relative;
  animation: leadqRise .5s var(--ease) both;
}
.leadq-hot[hidden] { display: none !important; animation: none; }
.leadq-hot[data-tier="qualified"] { border-color: rgba(138,180,255,.45); background: linear-gradient(180deg, rgba(138,180,255,.10), rgba(138,180,255,.03)); }
.leadq-hot[data-tier="lowpri"]    { border-color: rgba(247,199,68,.4);   background: linear-gradient(180deg, rgba(247,199,68,.06),  rgba(255,255,255,.02)); }
.leadq-hot[data-tier="unqualified"] { border-color: rgba(255,106,106,.4); background: linear-gradient(180deg, rgba(255,106,106,.06), rgba(255,255,255,.02)); }
@keyframes leadqRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.leadq-hot-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.leadq-hot-flame { font-size: 28px; line-height: 1; filter: drop-shadow(0 0 12px rgba(247,120,68,.55)); }
.leadq-hot-tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #7bd992; margin-bottom: 4px;
}
.leadq-hot-score { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.leadq-hot-score-max { font-size: 15px; color: var(--text-mute); font-weight: 500; margin-left: 6px; }
.leadq-hot-ring { position: absolute; top: 14px; right: 14px; opacity: .95; }
.leadq-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.leadq-ring-fg { fill: none; stroke: #7bd992; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .7s cubic-bezier(.4,.0,.2,1); filter: drop-shadow(0 0 6px rgba(40,200,64,.5)); }
.leadq-hot[data-tier="qualified"] .leadq-ring-fg { stroke: #8ab4ff; filter: drop-shadow(0 0 6px rgba(138,180,255,.6)); }
.leadq-hot[data-tier="lowpri"]    .leadq-ring-fg { stroke: #f7c744; }
.leadq-hot[data-tier="unqualified"] .leadq-ring-fg { stroke: #ff6a6a; }
.leadq-hot-details {
  margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
.leadq-hot-details > div { display: flex; flex-direction: column; }
.leadq-hot-details dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); margin: 0;
}
.leadq-hot-details dd { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }
.leadq-hot-checks {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}
.leadq-check-tick { color: #7bd992; margin-right: 4px; }

.leadq-email {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  animation: leadqRise .5s var(--ease) both;
}
.leadq-email[hidden] { display: none !important; animation: none; }
.leadq-email-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.14);
}
.leadq-email-head { border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 8px; margin-bottom: 8px; }
.leadq-email-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 12px; padding: 2px 0; }
.leadq-email-k { color: var(--text-mute); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; align-self: center; }
.leadq-email-v { color: var(--text); word-break: break-word; }
.leadq-email-body {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.55;
  color: var(--text-dim);
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------
   Lead Qualification demo — v2 result panel.
   Adds the new hero score, highlight row, secondary details grid,
   and compact sales-handoff card. Original .leadq-hot / .leadq-email
   surrounding shell rules still apply for the outer panel look.
--------------------------------------------------------------- */

/* Hero: 🔥 · HOT LEAD · 91/100 · Highly Qualified — centered and dominant. */
.leadq-hot-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 4px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 14px;
}
.leadq-hot-hero .leadq-hot-flame {
  font-size: 30px; line-height: 1; margin-bottom: 4px;
  filter: drop-shadow(0 0 10px rgba(247,120,68,.55));
}
.leadq-hot-hero .leadq-hot-tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: #7bd992; margin-bottom: 8px;
}
.leadq-hot[data-tier="qualified"] .leadq-hot-hero .leadq-hot-tier { color: #8ab4ff; }
.leadq-hot[data-tier="lowpri"]    .leadq-hot-hero .leadq-hot-tier { color: #f7c744; }
.leadq-hot[data-tier="unqualified"] .leadq-hot-hero .leadq-hot-tier { color: #ff6a6a; }

.leadq-hot-score {
  font-size: 56px; font-weight: 800; letter-spacing: -.03em;
  color: var(--text); line-height: 1;
}
.leadq-hot-score-max {
  font-size: 20px; color: var(--text-mute); font-weight: 500;
  margin-left: 4px;
}
.leadq-hot-verdict {
  margin-top: 6px;
  font-size: 13.5px; color: var(--text-dim);
  letter-spacing: .04em;
}

/* Highlight row: Budget · Timeline · Intent · Status — sales-critical facts. */
.leadq-hot-hilite {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.leadq-hot-hilite li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(138,180,255,.06);
  border: 1px solid rgba(255,255,255,.07);
}
.leadq-hilite-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute);
}
.leadq-hilite-v {
  font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.leadq-hilite-v-ok { color: #7bd992; }

/* Secondary details — small, easy-scan two-column list. */
.leadq-hot-details {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
}
.leadq-hot-details > div { display: flex; flex-direction: column; }
.leadq-hot-details-wide { grid-column: 1 / -1; }
.leadq-hot-details dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 2px;
}
.leadq-hot-details dd { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }

/* Sales-handoff — compact business card. Never a debug view. */
.leadq-handoff {
  margin-top: 14px;
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,200,64,.05), rgba(8,11,20,.98));
  border: 1px solid rgba(40,200,64,.32);
}
.leadq-handoff[hidden] { display: none !important; }
.leadq-handoff-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.leadq-handoff-tick {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(40,200,64,.18);
  color: #7bd992; font-size: 12px; font-weight: 700;
}
.leadq-handoff-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #7bd992;
}
.leadq-handoff-name {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.leadq-handoff-tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute); margin: 2px 0 10px;
}
.leadq-handoff-facts {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
}
.leadq-handoff-facts li { display: flex; flex-direction: column; }
.leadq-handoff-facts span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
.leadq-handoff-facts b {
  font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.leadq-handoff-next {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(138,180,255,.05);
  border: 1px solid rgba(138,180,255,.22);
}
.leadq-handoff-next-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
.leadq-handoff-next-v {
  font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.leadq-handoff-note {
  margin-top: 10px;
  font-size: 10.5px; color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  text-align: center;
}
.leadq-handoff-more {
  margin-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 8px;
}
.leadq-handoff-more summary {
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
  list-style: none;
}
.leadq-handoff-more summary::-webkit-details-marker { display: none; }
.leadq-handoff-more[open] summary { color: var(--text-dim); }
.leadq-handoff-payload {
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
}
.leadq-handoff-payload-row {
  display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 12px; padding: 2px 0;
}
.leadq-handoff-payload-row span:first-child {
  color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: 10px; align-self: center;
}
.leadq-handoff-payload-row span:last-child { color: var(--text); word-break: break-word; }
.leadq-handoff-payload-body {
  margin: 8px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim);
  white-space: pre-wrap;
}

/* Responsive — narrower panels stay clean. */
@media (max-width: 620px) {
  .leadq-hot-score { font-size: 46px; }
  .leadq-hot-hilite,
  .leadq-hot-details,
  .leadq-handoff-facts { grid-template-columns: 1fr; }
  .leadq-hot-details-wide { grid-column: auto; }
}

/* Handoff subline — small confirmation directly under the SENT TO SALES TEAM head. */
.leadq-handoff-sub {
  margin: -4px 0 12px;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Email-notification info box — visually equivalent to the Recommended Next
   Step box, placed directly beneath it. Green accent signals successful
   delivery; the smaller disclose line keeps the "no live email" fact obvious. */
.leadq-handoff-email {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(40,200,64,.06);
  border: 1px solid rgba(40,200,64,.32);
}
.leadq-handoff-email-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
.leadq-handoff-email-v {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -.005em;
  line-height: 1.35;
}
.leadq-handoff-email-v strong { font-weight: 800; color: var(--text); }
.leadq-handoff-email-tick {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(40,200,64,.22);
  color: #7bd992; font-size: 11px; font-weight: 800;
}
.leadq-handoff-email-disclose {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .01em;
}

/* Live version of the lead-qualification demo: the chat input row inside the
   chat column, the AI-error bubble, and the send buttons stacked in the
   narrow result column. Everything else reuses the classes above. */
.leadq-controls { justify-content: space-between; align-items: center; }
.leadq-chat-form { padding: 12px 0 0; border-top: 0; }
.leadq-msg-agent.leadq-msg-notice .leadq-msg-body {
  background: rgba(255,106,106,.08);
  border-color: rgba(255,106,106,.35);
}
.leadq-send .ca-send-choices { grid-template-columns: 1fr; }

/* ---------------------------------------------------------------
   AI Sales & Follow-Up Agent demo (demo-sales-followup.html)
   Scoped under .salesfu* so no other demo shares these rules.
--------------------------------------------------------------- */
.salesfu { margin: 20px auto 0; max-width: 1280px; }

.salesfu-progress {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.salesfu-progress-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(8,11,20,.96);
  border: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  min-width: 0;
}
.salesfu-progress-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.18); flex-shrink: 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.salesfu-progress-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.salesfu-progress-step[data-state="active"] {
  color: #dbe7ff; border-color: rgba(138,180,255,.45);
  background: rgba(138,180,255,.06);
}
.salesfu-progress-step[data-state="active"] .salesfu-progress-dot {
  background: #8ab4ff; box-shadow: 0 0 8px rgba(138,180,255,.85);
}
.salesfu-progress-step[data-state="done"] {
  color: #7bd992; border-color: rgba(40,200,64,.35);
}
.salesfu-progress-step[data-state="done"] .salesfu-progress-dot {
  background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,.6);
}
@media (max-width: 780px) {
  .salesfu-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.salesfu-controls { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 16px; flex-wrap: wrap; }

.salesfu-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1080px) { .salesfu-grid { grid-template-columns: 1fr; } }

.salesfu-col {
  min-height: 500px;
  padding: 20px 20px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.salesfu-col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.salesfu-col-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}

/* --- Column 1: existing CRM --------------------------- */
.salesfu-crm-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #f7c744;
  background: rgba(247,199,68,.10);
  border: 1px solid rgba(247,199,68,.35);
  transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.salesfu-crm-badge[data-state="ok"] {
  color: #7bd992;
  background: rgba(40,200,64,.10);
  border-color: rgba(40,200,64,.35);
}
.salesfu-crm-card {
  padding: 16px;
  border-radius: 12px;
  background: rgba(138,180,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  flex: 1;
  display: flex; flex-direction: column;
}
.salesfu-crm-name {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.salesfu-crm-company {
  font-size: 12.5px; color: var(--text-dim);
  margin: 2px 0 14px;
}
.salesfu-crm-details {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.salesfu-crm-details > div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
}
.salesfu-crm-details dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); align-self: center;
}
.salesfu-crm-details dd {
  margin: 0; font-size: 12.5px; color: var(--text); font-weight: 600;
  text-align: right;
}
.salesfu-crm-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  border: 1px dashed rgba(255,255,255,.10);
  font-size: 11.5px; color: var(--text-mute);
  line-height: 1.5;
}

/* --- Column 2: chat ---------------------------------- */
.salesfu-chat-meta { font-size: 12px; color: var(--text-mute); }
.salesfu-chat-log {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  overflow-y: auto;
  min-height: 400px; max-height: 520px;
  display: flex; flex-direction: column; gap: 10px;
}
.salesfu-chat-placeholder { color: var(--text-mute); font-size: 13px; margin: auto; text-align: center; }
.salesfu-msg { display: flex; }
.salesfu-msg-agent { justify-content: flex-start; }
.salesfu-msg-customer { justify-content: flex-end; }
.salesfu-msg-body {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.55;
  animation: salesfuIn .28s var(--ease) both;
}
.salesfu-msg-agent .salesfu-msg-body {
  background: rgba(138,180,255,.10);
  border: 1px solid rgba(138,180,255,.28);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.salesfu-msg-customer .salesfu-msg-body {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.salesfu-msg-typing .salesfu-msg-body { padding: 12px 14px; }
/* Live version: the visitor's reply box sits under the log, and an AI error
   comes back as a red-tinted agent bubble. Everything else is unchanged. */
.salesfu-chat-form { padding: 12px 0 0; border-top: 0; }
.salesfu-msg-agent.salesfu-msg-notice .salesfu-msg-body {
  background: rgba(255,106,106,.08);
  border-color: rgba(255,106,106,.35);
}
.salesfu-dots { display: inline-flex; gap: 4px; }
.salesfu-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  animation: salesfuDots 1.15s ease-in-out infinite;
}
.salesfu-dots i:nth-child(2) { animation-delay: .15s; }
.salesfu-dots i:nth-child(3) { animation-delay: .3s;  }
@keyframes salesfuDots { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes salesfuIn   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* --- Column 3: outcome & notification --------------- */
.salesfu-result-status {
  font-size: 11.5px; color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
}
.salesfu-signals {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.salesfu-signal {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(138,180,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.salesfu-signal-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
}
.salesfu-signal-v {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  text-align: right; align-self: center;
}
.salesfu-signal[data-state="ok"] {
  background: rgba(40,200,64,.06);
  border-color: rgba(40,200,64,.32);
  animation: salesfuPop .35s var(--ease) both;
}
.salesfu-signal[data-state="ok"] .salesfu-signal-v { color: #7bd992; }
.salesfu-signal[data-state="warn"] {
  background: rgba(247,199,68,.06);
  border-color: rgba(247,199,68,.34);
  animation: salesfuPop .35s var(--ease) both;
}
.salesfu-signal[data-state="warn"] .salesfu-signal-v { color: #f7c744; }
@keyframes salesfuPop { from { transform: translateY(3px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Interim outcome banner */
.salesfu-outcome {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,200,64,.06), rgba(8,11,20,.98));
  border: 1px solid rgba(40,200,64,.32);
  animation: salesfuRise .5s var(--ease) both;
  margin-bottom: 12px;
}
.salesfu-outcome[hidden] { display: none !important; animation: none; }
.salesfu-outcome-head { display: flex; align-items: center; gap: 8px; }
.salesfu-outcome-tick {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(40,200,64,.22);
  color: #7bd992; font-size: 12px; font-weight: 800;
}
.salesfu-outcome-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #7bd992;
}
.salesfu-outcome-sub {
  margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim);
}
@keyframes salesfuRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Sales-team notification card */
.salesfu-notify {
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(138,180,255,.06), rgba(8,11,20,.98));
  border: 1px solid rgba(138,180,255,.32);
  animation: salesfuRise .5s var(--ease) both;
}
.salesfu-notify[hidden] { display: none !important; animation: none; }
.salesfu-notify-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.salesfu-notify-tick {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(138,180,255,.22);
  color: #dbe7ff; font-size: 12px; font-weight: 800;
}
.salesfu-notify-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #8ab4ff;
}
.salesfu-notify-sub {
  margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim);
}
.salesfu-notify-details {
  margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
}
.salesfu-notify-details > div { display: flex; flex-direction: column; }
.salesfu-notify-wide { grid-column: 1 / -1; }
.salesfu-notify-details dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 2px;
}
.salesfu-notify-details dd { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.45; }

.salesfu-notify-disclosure {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  border: 1px dashed rgba(255,255,255,.14);
  font-size: 11.5px; color: var(--text-mute);
}
.salesfu-notify-tag {
  padding: 2px 8px; border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.05);
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 620px) {
  .salesfu-notify-details { grid-template-columns: 1fr; }
  .salesfu-notify-wide { grid-column: auto; }
}

/* ---------------------------------------------------------------
   Homepage services custom-solution CTA panel (index.html)
--------------------------------------------------------------- */
.services-custom-cta {
  margin: 22px 0 0;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(138,180,255,.28);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 22px;
  align-items: center;
  position: relative;
}
.services-custom-cta-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.services-custom-cta-title {
  margin: 0 0 6px;
  font-size: 20px; letter-spacing: -.01em; color: var(--text);
}
.services-custom-cta-copy {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--text-dim);
  max-width: 640px;
}
.services-custom-cta-btn { align-self: center; }
@media (max-width: 720px) {
  .services-custom-cta { grid-template-columns: 1fr; }
}

/* Sales & Follow-Up demo v2 — new right-column fields + Sales Team Email card. */

/* Previous-note tile inside the CRM card. */
.salesfu-crm-prevnote {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(138,180,255,.05);
  border: 1px solid rgba(138,180,255,.22);
  display: flex; flex-direction: column; gap: 3px;
}
.salesfu-crm-prevnote-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
.salesfu-crm-prevnote-v {
  font-size: 12.5px; color: var(--text); line-height: 1.5;
}

/* Wide signal row spans full width (Concerns Discussed, Recommended Action). */
.salesfu-signal.salesfu-signal-wide,
.salesfu-signal.salesfu-signal-multi {
  grid-template-columns: 1fr;
  gap: 6px;
}
.salesfu-signal.salesfu-signal-wide .salesfu-signal-v,
.salesfu-signal.salesfu-signal-multi .salesfu-signal-v { text-align: left; }
.salesfu-signal-v-hidden { display: none; }

.salesfu-concern-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.salesfu-concern {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(247,199,68,.10);
  border: 1px solid rgba(247,199,68,.35);
  font-size: 12px; color: #f7c744;
  animation: salesfuPop .35s var(--ease) both;
}

/* Sales Team Email card — visually equivalent to the other outcome blocks. */
.salesfu-email {
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,200,64,.06), rgba(8,11,20,.98));
  border: 1px solid rgba(40,200,64,.35);
  animation: salesfuRise .5s var(--ease) both;
}
.salesfu-email[hidden] { display: none !important; animation: none; }
.salesfu-email-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.salesfu-email-icon {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(40,200,64,.18);
  color: #7bd992;
}
.salesfu-email-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #7bd992;
}
.salesfu-email-headline {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(40,200,64,.06);
  border: 1px solid rgba(40,200,64,.28);
  font-size: 13.5px; color: var(--text); line-height: 1.45;
  margin-bottom: 12px;
}
.salesfu-email-headline strong { font-weight: 800; }
.salesfu-email-tick {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(40,200,64,.22);
  color: #7bd992; font-size: 12px; font-weight: 800;
}
.salesfu-email-summary {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}
.salesfu-email-name {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.salesfu-email-tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute); margin: 2px 0 10px;
}
.salesfu-email-facts {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.salesfu-email-facts > div { display: flex; flex-direction: column; }
.salesfu-email-facts dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 2px;
}
.salesfu-email-facts dd {
  margin: 0; font-size: 13px; color: var(--text); line-height: 1.5;
}
.salesfu-email-disclosure {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  border: 1px dashed rgba(255,255,255,.14);
  font-size: 11.5px; color: var(--text-mute);
}

/* ---------------------------------------------------------------
   Custom AI Agent modal + host CSS.
   Scoped under .ca-* / .ca-root so nothing here can bleed into
   the four existing agent demos or shared components.
--------------------------------------------------------------- */
.ca-root {
  position: fixed; inset: 0;
  display: none;
  z-index: 9990;
}
.ca-root.is-open { display: block; }
.ca-body-lock { overflow: hidden; }
.ca-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,4,10,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: caFade .18s var(--ease) both;
}
.ca-dialog {
  position: relative;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: 20px auto;
  padding: 26px 24px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.98), rgba(6,8,14,1));
  border: 1px solid rgba(138,180,255,.28);
  box-shadow: 0 30px 80px -30px rgba(124,92,255,.65),
              0 10px 30px -12px rgba(0,0,0,.6);
  color: var(--text);
  animation: caRise .22s var(--ease) both;
  z-index: 1;
}
@keyframes caFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes caRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ca-dialog:focus { outline: none; }

.ca-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-dim);
  border-radius: 10px;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ca-close:hover { color: var(--text); background: rgba(255,255,255,.08); }
.ca-close:focus-visible { outline: 2px solid rgba(138,180,255,.65); outline-offset: 2px; }

.ca-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.ca-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(138,180,255,.85);
}
.ca-title {
  margin: 0 0 8px;
  font-size: 22px; letter-spacing: -.01em; color: var(--text);
  padding-right: 40px;
}
.ca-sub {
  margin: 0 0 18px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
}

.ca-form { display: flex; flex-direction: column; gap: 14px; }
.ca-field { display: flex; flex-direction: column; gap: 6px; }
.ca-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
}
.ca-req  { color: #ff6a6a; margin-left: 2px; }
.ca-hint { color: var(--text-mute); text-transform: none; letter-spacing: .04em; font-family: inherit; margin-left: 4px; }

.ca-form input,
.ca-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  min-width: 0;
}
.ca-form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.ca-form input:focus,
.ca-form textarea:focus {
  outline: none;
  border-color: rgba(138,180,255,.55);
  background: rgba(0,0,0,.55);
}
.ca-form input.is-invalid,
.ca-form textarea.is-invalid {
  border-color: rgba(255,106,106,.55);
  background: rgba(255,106,106,.04);
}
.ca-error {
  display: none;
  font-size: 12px;
  color: #ff9a9a;
}
.ca-error.is-visible { display: block; }

.ca-reassure {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.ca-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.ca-submit { min-width: 160px; }

/* -- Send-method choice screen -- */
.ca-send { display: flex; flex-direction: column; gap: 14px; }
.ca-send[hidden] { display: none; }
.ca-send-head { display: flex; }
.ca-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-dim);
  font: inherit; font-size: 12px;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ca-back:hover { color: var(--text); background: rgba(255,255,255,.05); }
.ca-send-title {
  margin: 4px 0 8px;
  font-size: 17px; letter-spacing: -.005em; color: var(--text);
}
.ca-send-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ca-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(138,180,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.ca-choice:hover,
.ca-choice:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background: rgba(138,180,255,.09);
  border-color: rgba(138,180,255,.45);
}
.ca-choice-wa    { background: rgba(37,211,102,.05); border-color: rgba(37,211,102,.28); }
.ca-choice-wa:hover,
.ca-choice-wa:focus-visible { background: rgba(37,211,102,.10); border-color: rgba(37,211,102,.55); }
.ca-choice-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  color: var(--accent);
  flex-shrink: 0;
}
.ca-choice-wa .ca-choice-icon { color: #25d366; background: rgba(37,211,102,.10); }
.ca-choice-body { display: flex; flex-direction: column; min-width: 0; }
.ca-choice-label {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.ca-choice-hint {
  font-size: 12px; color: var(--text-mute); margin-top: 2px;
}
.ca-send-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-mute);
  line-height: 1.5;
}

/* -- Responsive tweaks -- */
@media (max-width: 520px) {
  .ca-dialog { padding: 22px 18px 18px; margin: 12px auto; }
  .ca-title { font-size: 19px; padding-right: 34px; }
  .ca-send-choices { grid-template-columns: 1fr; }
  .ca-close { top: 10px; right: 10px; }
  .ca-actions { justify-content: stretch; }
  .ca-submit { width: 100%; }
}

/* ---------------------------------------------------------------
   Hub grid — 7-card layout (used on demos.html after adding
   Custom AI Agent). Centers the 7th card cleanly on the last row.
--------------------------------------------------------------- */
.hub-grid-7 { max-width: 1160px; }
.hub-grid-7 > li:nth-child(5),
.hub-grid-7 > li:nth-child(6),
.hub-grid-7 > li:nth-child(7) { grid-column: auto; max-width: none; justify-self: auto; width: auto; }
.hub-grid-7 > li:nth-child(7) { grid-column: 2 / span 1; justify-self: stretch; }
@media (max-width: 1024px) {
  .hub-grid-7 > li:nth-child(7) { grid-column: 1 / -1; justify-self: center; max-width: calc(50% - 9px); width: 100%; }
}
@media (max-width: 720px) {
  .hub-grid-7 > li:nth-child(7) { max-width: none; }
}

/* ---------------------------------------------------------------
   Homepage services grid neutralizer — when a 6th service card is
   present (Custom AI Agent), disable the "center the 5th" rule so
   the grid reads cleanly as 3+3.
--------------------------------------------------------------- */
@supports (selector(:has(*))) {
  .service-grid:has(> li:nth-child(6)) > li:nth-child(5) {
    grid-column: auto;
    max-width: none;
    justify-self: auto;
    width: auto;
  }
}

/* Secondary "Describe Your Software" chip attached to the Custom Software
   card on demos.html and index.html. Sits inside the card as a sibling of
   the main link — cursor:pointer + z-index so it wins over the .hub-link
   overlay for its own tap area. */
.hub-secondary {
  position: absolute;
  bottom: 22px; right: 22px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(138,180,255,.08);
  border: 1px solid rgba(138,180,255,.35);
  color: #dbe7ff;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hub-secondary:hover,
.hub-secondary:focus-visible {
  outline: none;
  color: #fff;
  background: rgba(138,180,255,.15);
  border-color: rgba(138,180,255,.6);
  transform: translateY(-1px);
}
.hub-card { position: relative; }

.service-secondary {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(138,180,255,.08);
  border: 1px solid rgba(138,180,255,.35);
  color: #dbe7ff;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.service-secondary:hover,
.service-secondary:focus-visible {
  outline: none;
  color: #fff;
  background: rgba(138,180,255,.15);
  border-color: rgba(138,180,255,.6);
}

/* "Discuss Your Software" panel inside the Custom Software demo page.
   Same visual weight as .services-custom-cta so it reads as a first-class
   inquiry option, without competing with the dashboard proof above it. */
.software-discuss {
  margin: 22px auto 0;
  max-width: 1120px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(138,180,255,.28);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 22px;
  align-items: center;
}
.software-discuss-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.software-discuss-title {
  margin: 0 0 6px;
  font-size: 20px; letter-spacing: -.01em; color: var(--text);
}
.software-discuss-copy {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--text-dim);
  max-width: 640px;
}
.software-discuss-btn { align-self: center; }
@media (max-width: 720px) {
  .software-discuss { grid-template-columns: 1fr; }
}

/* Compact CTA row inside deep service sections — pairs the primary CTA
   with a secondary inquiry button (Discuss a Custom AI Agent / Discuss
   Your Software) without changing button styling. */
.sd-cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------
   Portfolio / Selected Work section (homepage #portfolio).
   Scoped under .portfolio-* — no cross-demo bleed.
--------------------------------------------------------------- */
.portfolio { padding: 90px 0; position: relative; }
.portfolio .section-head { margin-bottom: 28px; }

.portfolio-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(138,180,255,.05);
  border: 1px solid rgba(138,180,255,.28);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}
.portfolio-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(138,180,255,.85);
}

/* Grid — 2 columns; the first two cards span wider = 1fr each, remaining are 1fr each */
.portfolio-grid {
  list-style: none; padding: 0; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
}
.portfolio-card {
  grid-column: span 2;
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  isolation: isolate;
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(0.08s * var(--i, 0));
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column;
}
.portfolio-card-wide { grid-column: span 3; }

/* Full-card overlay link (identical pattern to service-card / hub-card) */
.portfolio-card-link {
  position: absolute; inset: 0; z-index: 2;
  text-indent: -9999px; overflow: hidden;
}
.portfolio-card-link:focus-visible {
  outline: 2px solid rgba(138,180,255,.55); outline-offset: -3px; border-radius: var(--radius-lg);
}

/* Gradient border on hover, matching existing card system */
.portfolio-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.55), rgba(124,92,255,.35), rgba(34,211,238,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none; z-index: 1;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -30px rgba(124,92,255,.55),
              0 8px 24px -12px rgba(0,0,0,.55);
}
.portfolio-card:hover::before,
.portfolio-card:focus-within::before { opacity: 1; }
.portfolio-card > * { position: relative; z-index: 2; }

/* Visual header — each card has its own themed preview strip */
.portfolio-visual {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(138,180,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(138,180,255,.03), rgba(0,0,0,.35));
}

/* -- AI Agents visual (chat bubbles) -- */
.portfolio-visual-agents .portfolio-visual-inner {
  position: absolute; inset: 20px 26px;
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-end;
}
.portfolio-msg {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px; line-height: 1.4;
  max-width: 78%;
}
.portfolio-msg-in {
  align-self: flex-start;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim);
  border-bottom-left-radius: 4px;
}
.portfolio-msg-out {
  align-self: flex-end;
  background: rgba(138,180,255,.12);
  border: 1px solid rgba(138,180,255,.30);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.portfolio-msg-typing { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; }
.portfolio-msg-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-dim);
  animation: pfDots 1.15s ease-in-out infinite;
}
.portfolio-msg-typing span:nth-child(2) { animation-delay: .15s; }
.portfolio-msg-typing span:nth-child(3) { animation-delay: .3s;  }
@keyframes pfDots { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* -- Voice orb visual -- */
.portfolio-visual-voice {
  display: grid; place-items: center;
  background:
    radial-gradient(80% 80% at 50% 45%, rgba(124,92,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(138,180,255,.04), rgba(0,0,0,.35));
}
.portfolio-voice-orb {
  position: relative; width: 118px; height: 118px;
  display: grid; place-items: center;
}
.portfolio-voice-core {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  color: #dbe7ff;
  background: radial-gradient(circle at 30% 30%, rgba(138,180,255,.85), rgba(124,92,255,.55));
  box-shadow: 0 0 30px rgba(124,92,255,.55), inset 0 0 20px rgba(255,255,255,.15);
  z-index: 2;
}
.portfolio-voice-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(138,180,255,.35);
  animation: pfPulse 2.2s ease-out infinite;
}
.portfolio-voice-ring-mid   { inset: 10px; animation-delay: .35s; border-color: rgba(138,180,255,.28); }
.portfolio-voice-ring-outer { inset: -6px; animation-delay: .7s;  border-color: rgba(138,180,255,.20); }
@keyframes pfPulse {
  0%   { transform: scale(.85); opacity: .65; }
  60%  { transform: scale(1.10); opacity: .10; }
  100% { transform: scale(1.20); opacity: 0;   }
}
.portfolio-voice-caption {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute);
}

/* -- Automation flow visual -- */
.portfolio-visual-flow { display: grid; place-items: center; padding: 0 22px; }
.portfolio-flow { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; width: 100%; justify-content: center; }
.portfolio-flow-node {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(138,180,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.portfolio-flow-node-accent {
  color: #dbe7ff;
  background: rgba(138,180,255,.14);
  border-color: rgba(138,180,255,.45);
}
.portfolio-flow-line {
  flex: 1;
  min-width: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(138,180,255,.5), rgba(124,92,255,.4));
  border-radius: 999px;
}

/* -- Dashboard mock visual -- */
.portfolio-visual-dash { padding: 18px 22px; }
.portfolio-dash {
  height: 100%;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.portfolio-dash-topbar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.portfolio-dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(138,180,255,.75); }
.portfolio-dash-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.portfolio-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.portfolio-dash-kpi { height: 26px; border-radius: 6px; background: rgba(138,180,255,.10); border: 1px solid rgba(255,255,255,.06); }
.portfolio-dash-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.portfolio-dash-row { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); }
.portfolio-dash-row-short { width: 65%; }

/* -- Web browser mock visual -- */
.portfolio-visual-web { padding: 14px 18px; }
.portfolio-browser {
  height: 100%;
  border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
}
.portfolio-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.portfolio-browser-bar > span:not(.portfolio-browser-url) {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.portfolio-browser-url {
  margin-left: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--text-mute);
}
.portfolio-browser-body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.portfolio-browser-hero { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(138,180,255,.35), rgba(124,92,255,.25)); }
.portfolio-browser-hero-sub { width: 70%; height: 8px; opacity: .6; }
.portfolio-browser-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.portfolio-browser-tiles > span { height: 32px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }

/* Body / copy */
.portfolio-body { padding: 22px 24px 20px; flex: 1; display: flex; flex-direction: column; }
.portfolio-cat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.portfolio-title {
  margin: 0 0 8px;
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.portfolio-copy {
  margin: 0 0 12px;
  font-size: 14px; line-height: 1.6; color: var(--text-dim);
}
.portfolio-tags {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.portfolio-tags li {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(138,180,255,.06);
  border: 1px solid rgba(138,180,255,.24);
  font-size: 11px; color: var(--text-dim);
  letter-spacing: .01em;
}
.portfolio-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.06);
}
.portfolio-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #7bd992;
}
.portfolio-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,.75);
}
.portfolio-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #dbe7ff;
  transition: transform .25s var(--ease);
}
.portfolio-more svg { transition: transform .25s var(--ease); }
.portfolio-card:hover .portfolio-more svg { transform: translateX(4px); }

/* Bottom CTA panel */
.portfolio-cta-panel {
  margin: 24px auto 0;
  max-width: 1080px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(138,180,255,.28);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 22px;
  align-items: center;
}
.portfolio-cta-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.portfolio-cta-title {
  margin: 0 0 6px;
  font-size: 20px; letter-spacing: -0.01em; color: var(--text);
}
.portfolio-cta-copy {
  margin: 0;
  font-size: 14px; line-height: 1.55; color: var(--text-dim);
  max-width: 640px;
}
.portfolio-cta-btn { align-self: center; }

/* Responsive */
@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-card,
  .portfolio-card-wide { grid-column: span 1; }
  .portfolio-visual { height: 170px; }
}
@media (max-width: 720px) {
  .portfolio { padding: 60px 0; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 14px; }
  .portfolio-visual { height: 150px; }
  .portfolio-body { padding: 20px 20px 18px; }
  .portfolio-cta-panel { grid-template-columns: 1fr; }
}

/* FZ symbol inside the Services hero central core.
   `.shv-core-inner` is a squircle. The symbol is landscape (~1.59:1), so we
   let it use most of the container width while `object-fit: contain` keeps
   its aspect ratio and prevents any cropping. The glowing ring around the
   core stays visible and the surrounding orbiting service chips (anchored
   to the outer visual, not the core) are never overlapped. */
.shv-logo {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 30px rgba(138,180,255,.45))
          drop-shadow(0 0 22px rgba(124,92,255,.35));
  pointer-events: none;
  user-select: none;
}

/* Fallback panel shown after the visitor clicks Email — provides a copy path
   for browsers that don't have a mailto handler configured. Scoped .ca-*. */
.ca-fallback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(138,180,255,.05);
  border: 1px dashed rgba(138,180,255,.35);
  display: flex; flex-direction: column; gap: 8px;
}
.ca-fallback[hidden] { display: none !important; }
.ca-fallback-lead {
  margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
}
.ca-fallback-address { color: #dbe7ff; text-decoration: underline; }
.ca-fallback-row {
  display: grid; grid-template-columns: 62px 1fr; gap: 8px;
  font-size: 12px;
}
.ca-fallback-k {
  color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: 10px; align-self: center;
}
.ca-fallback-v { color: var(--text); word-break: break-word; }
.ca-fallback-body {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 130px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ca-fallback-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ca-copied {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7bd992;
}
.ca-copied[hidden] { display: none !important; }

/* Send-method screen supporting copy + fallback heading */
.ca-send-sub {
  margin: -4px 0 4px;
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
}
.ca-fallback-title {
  margin: 0;
  font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.005em;
}

/* ---------------------------------------------------------------
   Project Request — ready-to-send screen (replaces the old success
   dead-end). Scoped .pr-* so nothing here bleeds into other flows.
--------------------------------------------------------------- */
.pr-send-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 12px;
}
.pr-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(138,180,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pr-choice:hover,
.pr-choice:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background: rgba(138,180,255,.09);
  border-color: rgba(138,180,255,.45);
}
.pr-choice-wa { background: rgba(37,211,102,.05); border-color: rgba(37,211,102,.28); }
.pr-choice-wa:hover,
.pr-choice-wa:focus-visible { background: rgba(37,211,102,.10); border-color: rgba(37,211,102,.55); }
.pr-choice-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  color: var(--accent);
  flex-shrink: 0;
}
.pr-choice-wa .pr-choice-icon { color: #25d366; background: rgba(37,211,102,.10); }
.pr-choice-body { display: flex; flex-direction: column; min-width: 0; }
.pr-choice-label {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.005em;
}
.pr-choice-hint {
  font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.4;
}

.pr-fallback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(138,180,255,.05);
  border: 1px dashed rgba(138,180,255,.35);
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.pr-fallback[hidden] { display: none !important; }
.pr-fallback-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.pr-fallback-lead  { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.pr-fallback-address { color: #dbe7ff; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.pr-fallback-row {
  display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 12px;
}
.pr-fallback-k {
  color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; font-size: 10px; align-self: center;
}
.pr-fallback-v { color: var(--text); word-break: break-word; }
.pr-fallback-body {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  font: inherit; font-size: 12.5px; line-height: 1.5;
  resize: vertical; min-height: 160px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pr-fallback-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-copied {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7bd992;
}
.pr-copied[hidden] { display: none !important; }
.pr-success-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .pr-send-choices { grid-template-columns: 1fr; }
}

/* Contact page — click-to-copy on the visible email address */
.method-copy-btn {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(138,180,255,.5);
  text-underline-offset: 4px;
}
.method-copy-btn:hover,
.method-copy-btn:focus-visible {
  outline: none;
  color: #dbe7ff;
  text-decoration-color: rgba(138,180,255,.9);
}
.method-copied {
  margin-left: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7bd992;
}
.method-copied[hidden] { display: none !important; }

/* =========================================================================
   AI Solutions page (ai-solutions.html) — scoped .ais-* rules
   ========================================================================= */

/* ---- Background scrim (this page only — subdues the bg-video's bright
   network-line footage behind headings/copy without flattening it to black) */
.ais-bg-scrim {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(124,92,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.52) 0%, rgba(5,6,11,.58) 45%, rgba(5,6,11,.64) 100%);
}

/* Section-head readability vignette (this page only) — a soft, edge-fading
   dark halo directly behind the eyebrow/title/lede of each remaining
   section header, so the network mesh can't cross the text while still
   staying visible around it. Not a box: no border, no hard edge. */
.ais-section-head { position: relative; }
.ais-section-head::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 132%; height: 190%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(5,6,11,.82) 0%, rgba(5,6,11,.6) 45%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.ais-sec-index {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .3em;
  color: var(--text-dim);
  opacity: .8;
  margin-bottom: 14px;
}
.ais-sec-index::before { content: "SECTION / "; opacity: .6; }

/* ---- Hero -------------------------------------------------------------- */
.ais-hero { padding-top: 96px; padding-bottom: 40px; }
.ais-hero-grid { align-items: center; }

/* Secondary hero CTA needed a stronger fill to stay legible over the busy
   background — scoped to this page's hero only, .btn-secondary itself
   (used site-wide) is untouched. */
.ais-hero .btn-secondary {
  background: rgba(6,8,14,.82);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
}
.ais-hero .btn-secondary:hover {
  background: rgba(6,8,14,.96);
  border-color: rgba(255,255,255,.3);
}

.ais-hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  width: 100%;
  margin-left: auto;
}
.ais-hv-frame {
  position: absolute; inset: 6% 6% 6% 6%;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 80px -40px rgba(124,92,255,.55),
              0 8px 24px -16px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ais-hv-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.45), rgba(124,92,255,.30), rgba(34,211,238,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ais-hv-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ais-hv-head .dots { display: inline-flex; gap: 5px; }
.ais-hv-head .dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.ais-hv-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.ais-hv-graph {
  position: relative; flex: 1;
  display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center;
  padding: 18px 16px; gap: 8px;
}
.ais-hv-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ais-hv-col { position: relative; display: flex; flex-direction: column; gap: 10px; z-index: 1; }
.ais-hv-col-in { align-items: flex-start; }
.ais-hv-col-out { align-items: flex-end; }
.ais-hv-col-core { align-items: center; justify-content: center; }

.ais-hv-node {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(138,180,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  animation: fadeUp .6s var(--ease) both;
  animation-delay: calc(.1s * var(--i));
}
.ais-hv-node svg { color: var(--accent); flex-shrink: 0; }

.ais-hv-core {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(138,180,255,.16), rgba(124,92,255,.10));
  border: 1px solid rgba(138,180,255,.35);
  color: var(--text);
  box-shadow: 0 10px 32px -14px rgba(138,180,255,.55);
}
.ais-hv-core svg { color: var(--accent); }
.ais-hv-core span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.ais-hv-core-tag {
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}

.ais-hv-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
.ais-hv-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7bd992;
  box-shadow: 0 0 0 0 rgba(123,217,146,.55);
  animation: aisPulse 2s var(--ease) infinite;
}
@keyframes aisPulse {
  0%   { box-shadow: 0 0 0 0 rgba(123,217,146,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(123,217,146,0); }
  100% { box-shadow: 0 0 0 0 rgba(123,217,146,0); }
}

.ais-hv-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,13,24,.85);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  z-index: 2;
}
.ais-hv-chip .chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.ais-hv-chip svg { color: var(--accent); }
.ais-hv-chip-a { top: 4%; left: -6%; }
.ais-hv-chip-b { bottom: 4%; right: -6%; }

/* ---- Core solutions grid ----------------------------------------------
   Numeral-forward composition. All three cards share identical anatomy,
   padding, and elevation — "Advanced" is a label only, never a size or
   weight difference, so the three offerings read as equally important. */
.ais-core-section { padding: 88px 0 32px; }
.ais-core-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ais-core-card {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  animation: fadeUp .8s var(--ease) both;
  animation-delay: calc(.08s * var(--i));
  box-shadow: 0 16px 36px -26px rgba(0,0,0,.6);
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease), box-shadow .3s var(--ease);
}
.ais-core-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.5), rgba(124,92,255,.32), rgba(34,211,238,.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 1;
}
.ais-core-card > * { position: relative; z-index: 2; }
.ais-core-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,.7);
}
.ais-core-card:hover::before { opacity: 1; }

/* Top accent line — one flat color per card, drawn from existing tokens.
   Purely systematic (position order), not tied to which card is "special". */
.ais-core-card::after {
  content: "";
  position: absolute; top: 0; left: 28px; right: 28px;
  height: 2px;
  background: var(--accent);
  opacity: .55;
  transition: opacity .3s var(--ease);
  z-index: 2;
}
.ais-core-grid > li:nth-child(2)::after { background: var(--accent-2); }
.ais-core-grid > li:nth-child(3)::after { background: var(--accent-3); }
.ais-core-card:hover::after { opacity: 1; }

.ais-core-flag {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(138,180,255,.15);
  border: 1px solid rgba(138,180,255,.35);
  color: #cfe0ff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  z-index: 3;
}

.ais-core-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.ais-core-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 30px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--grad-1);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: .85;
}
.ais-core-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ais-core-title {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 10px; color: var(--text);
}
.ais-core-copy {
  font-size: 14.5px; line-height: 1.65; color: var(--text-dim);
  margin: 0 0 18px;
}

/* ---- Core card proof visuals -------------------------------------------
   Small, real-feeling interface mockups per card, echoing the hero's
   system-panel language and services.html's product mockups — this is
   what fills the "we say it, but don't show it" gap. No fake data, no
   numeric claims, purely structural/illustrative. */
.ais-core-proof {
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  margin: 0 0 20px;
  overflow: hidden;
}

/* -- Chat mockup (AI Agents) -- */
.ais-core-proof-chat {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.ais-proof-msg {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 11.5px; line-height: 1.4;
  color: var(--text-dim);
}
.ais-proof-msg-in {
  align-self: flex-start;
  background: rgba(255,255,255,.05);
  border-bottom-left-radius: 3px;
}
.ais-proof-msg-out {
  align-self: flex-end;
  background: rgba(138,180,255,.14);
  color: #d7e4ff;
  border-bottom-right-radius: 3px;
}
.ais-proof-msg-typing {
  align-self: flex-end;
  display: flex; gap: 3px;
  padding: 9px 12px;
  background: rgba(138,180,255,.1);
  border-bottom-right-radius: 3px;
}
.ais-proof-msg-typing span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-dim);
  animation: aisTypingDot 1.3s ease-in-out infinite;
}
.ais-proof-msg-typing span:nth-child(2) { animation-delay: .15s; }
.ais-proof-msg-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aisTypingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* -- Pipeline mockup (Agentic AI Systems) -- */
.ais-core-proof-pipeline {
  padding: 18px 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ais-proof-node {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .04em;
  color: var(--text-dim);
  white-space: nowrap;
}
.ais-proof-node-core {
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.4);
  color: #dcd3ff;
  font-weight: 600;
}
.ais-proof-node-group { display: flex; flex-direction: column; gap: 4px; }
.ais-proof-node-sm { padding: 3px 8px; font-size: 9px; }
.ais-proof-pipe {
  width: 16px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.06));
  flex-shrink: 0;
}

/* -- Dashboard mockup (AI-Powered Custom Software) -- */
.ais-core-proof-dash {
  padding: 14px;
  display: flex; align-items: flex-end; gap: 8px;
  height: 74px;
}
.ais-proof-tile {
  flex: 1; height: 100%;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.ais-proof-tile-bar {
  width: 100%; height: var(--h);
  background: linear-gradient(180deg, rgba(138,180,255,.5), rgba(124,92,255,.28));
}
.ais-proof-tile-ai {
  display: grid; place-items: center;
  background: rgba(34,211,238,.1);
  border-color: rgba(34,211,238,.3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: #8fe9f5;
}

.ais-core-tags { margin: 0 0 22px; }
.ais-core-tags-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 9px;
}
.ais-core-tag-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.ais-core-tag-list li {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.03);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .01em;
  color: var(--text-dim);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.ais-core-card:hover .ais-core-tag-list li {
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}

.ais-core-cta { margin-top: auto; align-self: flex-start; }
.ais-core-cta svg { transition: transform .2s var(--ease); }
.ais-core-card:hover .ais-core-cta svg { transform: translateX(2px); }

/* ---- Outcomes -----------------------------------------------------------
   Editorial row/list instead of a wall of identical boxed tiles — no
   per-item background or border-radius, just a hairline divider and an
   accent rule that appears on hover. */
.ais-outcomes { padding: 72px 0 32px; }
.ais-outcome-panel {
  background: linear-gradient(180deg, rgba(7,9,16,.97), rgba(5,7,13,.99));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 8px 28px;
}
.ais-outcome-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}
.ais-outcome {
  position: relative;
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px;
  padding: 20px 4px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  animation: fadeUp .6s var(--ease) both;
  animation-delay: calc(.04s * var(--i));
  transition: border-color .3s var(--ease);
}
.ais-outcome::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--accent);
  opacity: .22;
  transition: opacity .3s var(--ease);
}
.ais-outcome:hover { border-color: rgba(255,255,255,.14); }
.ais-outcome:hover::before { opacity: .85; }
/* Accent cycles through the brand's three tokens so the list reads as
   one system with variety, not seven identical rows. */
.ais-outcome-grid > li:nth-child(3n+2)::before,
.ais-outcome-grid > li:nth-child(3n+2) .ais-outcome-ico { color: var(--accent-2); }
.ais-outcome-grid > li:nth-child(3n+2)::before { background: var(--accent-2); }
.ais-outcome-grid > li:nth-child(3n+2) .ais-outcome-ico { background: rgba(124,92,255,.1); border-color: rgba(124,92,255,.3); }
.ais-outcome-grid > li:nth-child(3n+3)::before,
.ais-outcome-grid > li:nth-child(3n+3) .ais-outcome-ico { color: var(--accent-3); }
.ais-outcome-grid > li:nth-child(3n+3)::before { background: var(--accent-3); }
.ais-outcome-grid > li:nth-child(3n+3) .ais-outcome-ico { background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.3); }
.ais-outcome-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
}
.ais-outcome-body { flex: 1; min-width: 0; }
.ais-outcome-title {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
  margin: 0 0 4px; color: var(--text);
}
.ais-outcome-copy {
  font-size: 13px; line-height: 1.6; color: var(--text-dim); margin: 0;
}

/* ---- Supporting capabilities -------------------------------------------
   Deliberately lighter tier: no card box, column dividers instead of
   gaps+borders, smaller inline icon+title. Clearly secondary to Core,
   but still deliberate (not "unfinished"). */
.ais-supporting { padding: 72px 0 32px; }
.ais-sup-panel {
  background: linear-gradient(180deg, rgba(7,9,16,.97), rgba(5,7,13,.99));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 28px 28px 20px;
  max-width: 1016px; margin: 0 auto;
}
.ais-sup-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 960px; margin-left: auto; margin-right: auto;
}
.ais-sup-card {
  padding: 4px 28px;
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  animation: fadeUp .6s var(--ease) both;
  animation-delay: calc(.05s * var(--i));
}
.ais-sup-card:first-child { border-left: none; padding-left: 0; }
.ais-sup-mod {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
  opacity: .75;
  margin-bottom: 10px;
}
.ais-sup-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.ais-sup-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ais-sup-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  margin: 0; color: var(--text);
}
.ais-sup-copy {
  font-size: 13.5px; line-height: 1.6; color: var(--text-dim);
  margin: 0 0 12px;
}
.ais-sup-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.ais-sup-link:hover { color: #dbe7ff; transform: translateX(2px); }

/* ---- Process panel -----------------------------------------------------
   Opaque backdrop behind the "How We Build" steps on THIS page only — a
   new wrapper div in ai-solutions.html, not a change to the shared
   .process-* rules (those still power about.html untouched). */
.ais-process-panel {
  background: linear-gradient(180deg, rgba(7,9,16,.97), rgba(5,7,13,.99));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 36px 28px 8px;
}

/* ---- Final CTA -------------------------------------------------------- */
.ais-cta { padding: 72px 0 100px; }
.ais-cta-card {
  position: relative;
  padding: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(14,18,34,.96), rgba(8,10,20,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden; isolation: isolate;
}
/* Terminal-style head bar — bookends the page with the hero's system-panel
   language (.dots is the shared macOS-style dot set used site-wide). */
.ais-cta-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.015);
}
.ais-cta-head-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
}
.ais-cta-head-pulse {
  margin-left: auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: #7bd992;
  box-shadow: 0 0 0 0 rgba(123,217,146,.55);
  animation: aisPulse 2s var(--ease) infinite;
}
.ais-cta-body {
  display: grid; grid-template-columns: 1.4fr auto; align-items: center;
  gap: 28px;
  padding: 32px 36px;
}
.ais-cta-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.55), rgba(124,92,255,.35), rgba(34,211,238,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .6; pointer-events: none;
}
.ais-cta-card::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  right: -100px; top: -140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138,180,255,.22), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.ais-cta-card > * { position: relative; z-index: 2; }
.ais-cta-title { margin: 6px 0 12px; }
.ais-cta-lede {
  font-size: 15px; line-height: 1.65; color: var(--text-dim);
  max-width: 620px; margin: 0;
}
.ais-cta-actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
  .ais-core-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 18px; }
  .ais-outcome-grid { column-gap: 32px; }
}
@media (max-width: 780px) {
  .ais-hero-visual { max-width: 380px; margin: 24px auto 0; }
  .ais-sup-panel { max-width: 520px; padding: 24px 24px 16px; }
  .ais-sup-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .ais-sup-card {
    border-left: none; padding: 20px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .ais-sup-card:first-child { border-top: none; padding-top: 0; }
  .ais-cta-body { grid-template-columns: 1fr; padding: 28px 24px; }
  .ais-cta-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .ais-core-section, .ais-outcomes, .ais-supporting, .ais-cta { padding-left: 0; padding-right: 0; }
  .ais-outcome-grid { grid-template-columns: 1fr; }
  .ais-hv-chip-a, .ais-hv-chip-b { display: none; }
  .ais-hv-graph { padding: 14px 10px; }
  .ais-core-card { padding: 24px 20px 22px; }
}

/* =========================================================================
   Custom Software case page — Free Fire Tournament Dashboard (.ff-*)
   ========================================================================= */
.ff-showcase {
  display: flex; flex-direction: column; gap: 28px;
  margin: 0 auto 48px;
  max-width: 1080px;
}

/* ---- Video placeholder ------------------------------------------------ */
.ff-video { display: flex; flex-direction: column; gap: 18px; }
.ff-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(138,180,255,.14), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(124,92,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 32px 24px;
  text-align: center;
}
.ff-video-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(138,180,255,.45), rgba(124,92,255,.30), rgba(34,211,238,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.ff-video-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none; z-index: 0;
}
.ff-video-frame > * { position: relative; z-index: 1; }

/* Real embedded demo video (demo-custom-software.html only) - fills the
   existing .ff-video-frame card edge-to-edge. Frame is already
   aspect-ratio:16/9 with overflow:hidden and rounded corners, so this just
   needs to fill it without letterboxing or distortion. */
.ff-video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  display: block;
  object-fit: cover;
  background: #000;
}

.ff-video-play {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.10);
  border: 1px solid rgba(138,180,255,.35);
  box-shadow: 0 12px 34px -14px rgba(138,180,255,.55);
}
.ff-video-copy { max-width: 620px; }
.ff-video-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 8px; color: var(--text);
}
.ff-video-lede {
  font-size: 14.5px; line-height: 1.65; color: var(--text-dim); margin: 0;
}
.ff-video-tag {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10,13,24,.85);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  z-index: 2;
}
.ff-video-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f0b95c;
  box-shadow: 0 0 0 0 rgba(240,185,92,.55);
  animation: ffPulse 2s var(--ease) infinite;
}
@keyframes ffPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,185,92,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(240,185,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,185,92,0); }
}

.ff-video-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
}
.ff-video-actions .btn[disabled] {
  opacity: .6; cursor: not-allowed;
}

/* ---- Feature grid ----------------------------------------------------- */
.ff-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ff-info-card {
  padding: 20px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,13,24,.78), rgba(8,10,20,.9));
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ff-info-card:hover {
  transform: translateY(-2px);
  border-color: rgba(138,180,255,.28);
  background: linear-gradient(180deg, rgba(16,20,36,.85), rgba(10,12,22,.92));
}
.ff-info-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--accent);
  background: rgba(138,180,255,.08);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.ff-info-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  margin: 0 0 6px; color: var(--text);
}
.ff-info-copy {
  font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin: 0;
}

/* ---- Clarifying note -------------------------------------------------- */
.ff-note {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(10,13,24,.6);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em;
  align-self: flex-start;
}
.ff-note svg { color: var(--accent); flex-shrink: 0; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .ff-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ff-info-grid { grid-template-columns: 1fr; }
  .ff-video-frame { padding: 24px 16px; }
  .ff-video-title { font-size: 18px; }
  .ff-video-play { width: 60px; height: 60px; }
  .ff-video-actions .btn { width: 100%; justify-content: center; }
}

/* Portfolio card visual — real image (fills existing 190px box, no size change) */
.portfolio-visual-image { padding: 0; background: #05070d; }
.portfolio-visual-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* =========================================================================
   Homepage (index.html) — scoped .home-* rules
   ========================================================================= */

/* ---- Background scrim — same proven recipe as the AI Solutions page.
   Subdues the bg-video's bright network-line footage behind headings and
   copy without flattening it to black; homepage-only, does not affect
   any other page. */
.home-bg-scrim {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(124,92,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.52) 0%, rgba(5,6,11,.58) 45%, rgba(5,6,11,.64) 100%);
}

/* Section-head readability vignette — soft, edge-fading dark halo behind
   the eyebrow/title/lede of Services, Portfolio, and Project Inquiry
   headers. Not a box: no border, no hard edge. */
.home-section-head { position: relative; }
.home-section-head::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 132%; height: 190%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(5,6,11,.82) 0%, rgba(5,6,11,.6) 45%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* ---- Service card numeral index — matches the numeral language already
   used on services.html (.overview-index) and the AI Solutions core
   cards (.ais-core-num), so the homepage's service teaser cards no
   longer look like an older, unrelated card style. */
.service-index {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-dim);
  opacity: .75;
  margin-bottom: 10px;
}

/* Homepage headings — solid white instead of gradient-clip text, on every
   heading accent across the page (hero, Services, Portfolio, Project
   Inquiry, Final CTA). Scoped via ids that only exist on index.html
   (#home, #services, #portfolio, #contact, #finalCtaTitle) — color only,
   no layout/spacing/font properties touched. Other pages' .accent text
   (AI Solutions, Services, About, Contact, demos) is untouched. */
#home .accent,
#services .accent,
#portfolio .accent,
#contact .accent,
#finalCtaTitle .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* =========================================================================
   Professional refinement pass (homepage only).
   No composition change: every rule below restyles existing, already-
   homepage-exclusive selectors (or id-scopes a selector shared with one
   other page) — nothing is added, removed, reordered or reworded.
   ========================================================================= */

/* 1. Background restraint — the network-line mesh video/grid read as the
   dominant visual element. Deepen the existing homepage scrim so it reads
   as quiet texture behind the content instead of competing with it. */
.home-bg-scrim {
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.74) 0%, rgba(5,6,11,.8) 45%, rgba(5,6,11,.86) 100%);
}

/* 2. Decorative glow restraint — hero orbs, final-CTA glow blobs and rings
   were layered on top of each other at full strength. Pull them back so
   they read as ambient depth, not neon. (.orb-1/.orb-2 are shared with
   about.html, so scope to #home only; every other selector here is
   already homepage-exclusive.) */
#home .orb-1 { opacity: .55; }
#home .orb-2 { opacity: .45; }

.cta-glow-a { background: rgba(124,92,255,.11); filter: blur(90px); }
.cta-glow-b { background: rgba(34,211,238,.06); filter: blur(90px); }
.cta-rings { opacity: .18; }
.cta-inner::before { opacity: .18; }

/* 3. Card radius — 22–28px corners read as generic SaaS-template rounding.
   Tighten to a more engineered, product-UI radius across the homepage's
   card system (hero workflow card, service cards, portfolio cards,
   inquiry card, final CTA panel). */
.workflow-card,
.service-card,
.portfolio-card,
.inquiry-card {
  border-radius: 16px;
}
.cta-inner { border-radius: 20px; }

/* 4. Card border language — the rainbow gradient hover-border (blue → violet
   → cyan at near-full opacity) is a stock "AI SaaS" tell. Replace with a
   single restrained accent tone so hover states read as one consistent,
   understated system rather than a decorative light show. */
.service-card::before,
.portfolio-card::before {
  background: linear-gradient(135deg, rgba(138,180,255,.32), rgba(124,92,255,.18));
}
.service-card:hover::before,
.portfolio-card:hover::before,
.portfolio-card:focus-within::before {
  opacity: .7;
}
.service-card::after {
  background: radial-gradient(closest-side, rgba(124,92,255,.20), transparent 70%);
}
.service-card:hover::after { opacity: .6; }
.inquiry-card::after {
  background: radial-gradient(closest-side, rgba(124,92,255,.07), transparent 70%);
}

/* 5. Pills/badges — quiet the capability list and portfolio descriptor so
   they read as small meta labels, not a row of loud SaaS chips. Content
   and count are unchanged. */
.mini-badges li {
  border-color: rgba(255,255,255,.07);
  background: transparent;
  color: var(--text-mute);
}
.portfolio-badge {
  background: transparent;
  border-color: rgba(255,255,255,.10);
  color: var(--text-mute);
}
.portfolio-badge-dot { box-shadow: 0 0 4px rgba(138,180,255,.6); }

/* 6. Workflow node glow — the active/pulsing node's spread shadow read as
   neon emphasis rather than a technical "active state" cue. Tighten it. */
.accent-node {
  box-shadow: 0 0 0 3px rgba(124,92,255,.05), 0 12px 24px -16px rgba(124,92,255,.45);
}
.node.pulsing {
  box-shadow: 0 0 0 3px rgba(138,180,255,.06), 0 14px 28px -16px rgba(138,180,255,.4);
}

/* =========================================================================
   Project Inquiry — neutral color system (homepage only).
   Replaces the blue/purple gradient treatment on the form's interactive
   states with white/light-neutral surfaces and neutral shadows. Structure,
   copy, icons, steps, spacing and functionality are unchanged — color only.
   All selectors are scoped under #contact, which exists only on index.html.
   ========================================================================= */

/* 1. Continue / Submit button (superseded by the site-wide primary-button
   rule in the black/white color system block further below, which covers
   every .btn-primary on the homepage including these). */

/* 2. Selected service card (Step 1 cards + Step 2 rows share the same
   selected-state pattern, so both are neutralized together for a
   consistent selected treatment within the form). */
#contact .option-card.is-selected {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.7);
}
#contact .option-card.is-selected .option-ico {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.32);
  color: var(--text);
}
#contact .option-row.is-selected {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
}
#contact .option-row.is-selected .radio-mark {
  background: #f0f1f6;
  box-shadow: none;
}

/* 3. Active stepper — white/light-neutral circle, dark number, no glow.
   Inactive/complete steps are untouched (already subtle gray/dim). */
#contact .step-node.is-active { background: rgba(255,255,255,.05); }
#contact .step-node.is-active .step-index {
  color: #0a0b12;
  background: #f0f1f6;
  border-color: transparent;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.5);
}

/* 4. Icons / small accents — quiet the step-label pill and the email/phone
   contact toggle's active state to the same neutral language; keep
   keyboard-focus rings visible but neutral instead of blue. */
#contact .step-eyebrow {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
#contact .contact-choice.is-active {
  color: #0a0b12;
  background: #f0f1f6;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
}
#contact .option-card:focus-visible,
#contact .option-row:focus-visible,
#contact .contact-choice:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}
#contact .field input:focus,
#contact .field textarea:focus {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

/* =========================================================================
   Homepage black + white color system.
   Removes every remaining blue/purple tint, gradient, glow and blue-tinted
   surface across the homepage (nav, hero, services, portfolio card
   thumbnails, Project Inquiry, final CTA, chatbot widget) and replaces it
   with true-black/charcoal surfaces, white/gray text and icons, and a
   white-on-dark primary button. Structure, copy, links, layout, spacing,
   icons themselves, steps and functionality are untouched — color only.
   Functional status color (green = live/active/complete, red = error) is
   kept, restrained, as it communicates real state, not decoration.
   Scoping: #home / #services / #portfolio / #contact / .final-cta are ids
   and a class that exist only on index.html; everything else selected
   below (.service-card, .portfolio-*, .workflow-card, .chatbot-*, etc.) is
   already homepage-exclusive markup (verified against every other page).
   (The shared nav-button/active-underline rules are fixed site-wide at
   their base definition near the top of this file, not scoped per page.)
   ========================================================================= */

/* ---- One primary CTA button across the whole homepage ---- */
#home .btn-primary,
#services .btn-primary,
#portfolio .btn-primary,
#contact .btn-primary,
.final-cta .btn-primary {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
#home .btn-primary:hover,
#services .btn-primary:hover,
#portfolio .btn-primary:hover,
#contact .btn-primary:hover,
.final-cta .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Hero ---- */
#home .eyebrow .dot,
#services .eyebrow .dot,
#portfolio .eyebrow .dot,
#contact .eyebrow .dot { background: #d8d9e0; box-shadow: none; }
#home .orb-1 { background: rgba(255,255,255,.05); }
#home .orb-2 { background: rgba(255,255,255,.04); }
.workflow-card {
  background:
    linear-gradient(180deg, rgba(11,13,22,.88), rgba(9,11,18,.92)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) border-box;
}
.node-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
.accent-node {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}
.accent-node .node-ico {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.3);
  color: var(--text);
}
.node.pulsing {
  border-color: rgba(255,255,255,.3);
}
.node.pulsing .node-ico {
  background: rgba(255,255,255,.14);
  color: var(--text);
}
.arrow .pulse {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 50%, transparent);
}

/* ---- Services ---- */
.service-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}
.service-card::after {
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
}
.service-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
.service-card:hover .service-ico {
  color: var(--text);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
}
.service-secondary {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.2);
  color: var(--text);
}
.service-secondary:hover,
.service-secondary:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.35);
}
.services-custom-cta { border-color: rgba(255,255,255,.14); }
.services-custom-cta-eyebrow { color: var(--text-dim); }

/* ---- Portfolio cards + thumbnail visuals ---- */
.portfolio-visual {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.35));
}
.portfolio-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}
.portfolio-cat {
  color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.portfolio-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-dim);
  flex-shrink: 0;
}
.portfolio-mark svg { width: 13px; height: 13px; }
.portfolio-more { color: var(--text); }
.portfolio-tags li {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}
.portfolio-badge-dot { background: #d8d9e0; box-shadow: none; }

/* Chat bubbles (AI Agents card) */
.portfolio-msg-out {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

/* Voice orb (AI Voice Agents card) */
.portfolio-visual-voice {
  background:
    radial-gradient(80% 80% at 50% 45%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.35));
}
.portfolio-voice-core {
  color: #0a0b12;
  background: radial-gradient(circle at 30% 30%, #f5f6fa, #c7c9d3);
  box-shadow: 0 0 26px rgba(255,255,255,.20), inset 0 0 18px rgba(255,255,255,.25);
}
.portfolio-voice-ring { border-color: rgba(255,255,255,.28); }
.portfolio-voice-ring-mid { border-color: rgba(255,255,255,.22); }
.portfolio-voice-ring-outer { border-color: rgba(255,255,255,.16); }

/* Automation flow (AI Automation card) */
.portfolio-flow-node { background: rgba(255,255,255,.04); }
.portfolio-flow-node-accent {
  color: var(--text);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.32);
}
.portfolio-flow-line {
  background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.15));
}

/* Dashboard mock (Custom Software card) */
.portfolio-dash-dot { background: #9a9cab; box-shadow: none; }
.portfolio-dash-kpi { background: rgba(255,255,255,.06); }

/* Browser mock (Web Development card) */
.portfolio-browser-hero { background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.14)); }

.portfolio-cta-panel { border-color: rgba(255,255,255,.14); }
.portfolio-cta-eyebrow { color: var(--text-dim); }

/* ---- Project Inquiry — remaining icon/step-state color ---- */
#contact .option-card .option-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
#contact .step-node.is-complete .step-index {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.26);
}
#contact .step-node.is-complete .step-index .step-check { color: var(--text); }
#contact .success-badge {
  color: #0a0b12;
  background: #f0f1f6;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
}
#contact .pr-choice:not(.pr-choice-wa) {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
#contact .pr-choice:not(.pr-choice-wa):hover,
#contact .pr-choice:not(.pr-choice-wa):focus-visible {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24);
}
#contact .pr-choice-icon { color: var(--text-dim); }
#contact .pr-fallback {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.18);
}
#contact .pr-fallback-address { color: var(--text); }

/* ---- Final CTA panel ---- */
.cta-inner {
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(500px 260px at 50% 120%, rgba(255,255,255,.03), transparent 70%),
    linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
}
.cta-inner::before {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
}
.cta-glow-a,
.cta-glow-b { background: rgba(255,255,255,.05); }

/* ---- Chatbot widget ---- */
.chatbot-launcher {
  color: #0a0b12;
  background: #f0f1f6;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.6), 0 6px 16px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.15);
}
.chatbot-launcher-dot { background: #d8d9e0; box-shadow: none; }
.chatbot-panel .chatbot-status-dot { background: #d8d9e0; box-shadow: none; }
.chatbot-msg-user .chatbot-msg-body {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.chatbot-msg-notice .chatbot-msg-body {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
}
.chatbot-input:focus {
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
.chatbot-send {
  color: #0a0b12;
  background: #f0f1f6;
}
.pulse-dot {
  background: #d8d9e0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.35);
}
/* The Custom Software portfolio card uses a real screenshot (not a CSS
   mockup), so its blue/purple UI can't be recolored property-by-property —
   desaturating it is the only way to bring it into the black/white system. */
.portfolio-visual-img { filter: grayscale(1) contrast(1.05); }
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.30); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* =========================================================================
   AI Solutions page black + white color system (ai-solutions.html only).
   Same direction as the approved homepage: neutral black/charcoal surfaces,
   white/gray text and icons, one white primary button, restrained accent
   kept only where it communicates real status (the green "running" pulses).
   Structure, copy, layout, links and functionality are untouched — color
   only. All selectors below are either already ai-solutions-exclusive
   (.ais-*) or scoped under this page's unique section ids (#ai-hero,
   #ais-core, #ais-outcomes, #ais-supporting, #ais-process, #ais-cta) so the
   shared .process-* rules keep powering about.html unchanged, and no other
   page is affected.
   ========================================================================= */

/* ---- Headings: solid white accent text, matching the homepage ---- */
#ai-hero .accent,
#ais-core .accent,
#ais-outcomes .accent,
#ais-supporting .accent,
#ais-process .accent,
#ais-cta .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ---- Background scrim readability wash (this page's own overlay, not
   the shared bg-video/bg-field, which stay untouched) ---- */
.ais-bg-scrim {
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.52) 0%, rgba(5,6,11,.58) 45%, rgba(5,6,11,.64) 100%);
}

/* ---- One primary CTA button across this page ---- */
#ai-hero .btn-primary,
.ais-core-cta,
#ais-cta .btn-primary {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
#ai-hero .btn-primary:hover,
.ais-core-cta:hover,
#ais-cta .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Hero workflow visual ---- */
.ais-hv-frame {
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.7), 0 8px 24px -16px rgba(0,0,0,.55);
}
.ais-hv-frame::before {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
.ais-hv-node { background: rgba(255,255,255,.04); }
.ais-hv-node svg { color: var(--text-dim); }
/* The Agent core stays neutral and understated — not a glowing accent
   object — matching the rest of the panel. */
.ais-hv-core {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  box-shadow: none;
}
.ais-hv-core svg { color: var(--text); }
.ais-hv-chip .chip-dot { background: #d8d9e0; }
.ais-hv-chip svg { color: var(--text-dim); }
/* .ais-hv-pulse stays green — genuine "system running" status, not decoration. */

/* ---- Core Focus cards ---- */
.ais-core-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
/* One neutral top-accent line instead of a blue/purple/cyan cycle. */
.ais-core-card::after,
.ais-core-grid > li:nth-child(2)::after,
.ais-core-grid > li:nth-child(3)::after {
  background: rgba(255,255,255,.4);
}
.ais-core-flag {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  color: var(--text);
}
.ais-core-num {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text-dim);
}
.ais-core-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}

/* ---- Proof visuals inside the Core Focus cards ---- */
/* Chat mockup (AI Agents) */
.ais-proof-msg-out {
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.ais-proof-msg-typing { background: rgba(255,255,255,.06); }

/* Pipeline mockup (Agentic AI Systems) — the Agent node stays neutral,
   not a glowing purple object. */
.ais-proof-node-core {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color: var(--text);
}

/* Dashboard mockup (AI-Powered Custom Software) */
.ais-proof-tile-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.2));
}
.ais-proof-tile-ai {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  color: var(--text);
}

/* ---- Business Outcomes — one neutral treatment instead of the
   blue/purple/cyan cycle across rows, per the explicit note that this
   cycling reads as generic AI UI. ---- */
.ais-outcome::before,
.ais-outcome-grid > li:nth-child(3n+2)::before,
.ais-outcome-grid > li:nth-child(3n+3)::before {
  background: rgba(255,255,255,.4);
}
.ais-outcome-ico,
.ais-outcome-grid > li:nth-child(3n+2) .ais-outcome-ico,
.ais-outcome-grid > li:nth-child(3n+3) .ais-outcome-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border-color: var(--border);
}

/* ---- Supporting Capabilities ---- */
.ais-sup-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
.ais-sup-link { color: var(--text-dim); }
.ais-sup-link:hover { color: var(--text); }

/* ---- How We Build — page-scoped override of the shared .process-*
   rules so about.html's identical component is left untouched. ---- */
#ais-process .process-rail-fill {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 50%, transparent);
}
#ais-process .process-num {
  background:
    radial-gradient(closest-side, rgba(15,18,30,1), rgba(15,18,30,1)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.14)) border-box;
  box-shadow: 0 0 0 6px rgba(7,8,13,1), 0 10px 24px -10px rgba(0,0,0,.55);
}
#ais-process .process-num span {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
#ais-process .process-step:hover .process-num {
  box-shadow: 0 0 0 6px rgba(7,8,13,1), 0 0 0 10px rgba(255,255,255,.08), 0 18px 40px -14px rgba(0,0,0,.6);
}
#ais-process .process-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}

/* ---- Final CTA ---- */
.ais-cta-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
.ais-cta-card::after {
  background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%);
}
/* .ais-cta-head-pulse stays green — genuine status indicator, not decoration. */

/* ---- Hero SVG connector-line gradient (inline linearGradient uses
   #8ab4ff stops; the SVG lives in ai-solutions.html and is neutralized
   there directly since gradient stop-color can't be set from CSS). ---- */

/* =========================================================================
   Services page black + white color system (services.html only).
   Same direction as the approved homepage and AI Solutions page: neutral
   black/charcoal surfaces, white/gray text and icons, one white primary
   button. Structure, copy, layout, links and functionality are untouched —
   color only. All selectors below are already services-page-exclusive
   (.shv-*, .overview-*, .sd-*) — verified against every other page — or
   scoped under this page's unique section ids for the shared .accent /
   .btn-primary rules, so no other page is affected.
   ========================================================================= */

/* ---- Background scrim — the exact same recipe as the homepage's
   .home-bg-scrim, reused here so both pages share one visual background
   system. Services-page-only; does not affect index.html or any other page. */
.services-bg-scrim {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.74) 0%, rgba(5,6,11,.8) 45%, rgba(5,6,11,.86) 100%);
}

/* ---- Headings: solid white accent text ---- */
#services-hero .accent,
#overview .accent,
#lead-qualification .accent,
#ai-automation .accent,
#voice-agents .accent,
#ai-support .accent,
#web-dev .accent,
#custom-software .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ---- One primary CTA button across this page ---- */
#services-hero .btn-primary,
.sd-cta {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
#services-hero .btn-primary:hover,
.sd-cta:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Hero: FZ orbital visual ---- */
.shv-orb {
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 65% 65%, rgba(255,255,255,.10), transparent 55%);
}
.shv-ring-1 { border-color: rgba(255,255,255,.22); }
.shv-ring-3 { border-color: rgba(255,255,255,.14); }
.shv-chip svg { color: var(--text-dim); }
/* The FZ center artwork is a real image with a heavy neon blue/purple
   treatment baked into its pixels — same situation as the homepage
   dashboard screenshot. Desaturating is the only way to bring it into the
   black/white system while keeping the same artwork. */
.shv-logo { filter: grayscale(1) contrast(1.1); }

/* ---- Overview cards ---- */
.overview-link::before {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}
.overview-link::after {
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
}
.overview-link:hover,
.overview-link:focus-visible {
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 8px 24px -12px rgba(0,0,0,.55);
}
.overview-link:hover .overview-ico,
.overview-link:focus-visible .overview-ico {
  color: var(--text);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
}
.overview-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}

/* ---- Service Detail sections ---- */
.sd-index {
  color: #0a0b12;
  background: #e9eaf0;
}
.sd-list-solutions {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(8,11,20,.98));
  border-color: rgba(255,255,255,.16);
}
.sd-list-title svg { color: var(--text-dim); }
.sd-list-solutions li::before {
  background: #d8d9e0;
  box-shadow: none;
}

/* Agent stage (AI Automation / AI Voice Agents visuals) — the core stays
   neutral, not a glowing accent object. */
.sd-agent-core {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(15,18,30,.9), rgba(11,13,22,.9)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) border-box;
}
.sd-agent-orbit-1 { border-color: rgba(255,255,255,.16); }
.sd-agent-tool { color: var(--text-dim); }

/* Chat panel (AI Agents visual) */
.sd-msg-out .sd-msg-body {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.sd-typing i { background: rgba(255,255,255,.55); }

/* Browser mock (Web Development visual) */
.sd-block-hero {
  background:
    radial-gradient(400px 200px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.sd-line-lg { background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.2)); }
.sd-pill {
  background: #e9eaf0;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.45);
}
.sd-tile::after {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.2);
}

/* App mock (Custom Software visual) — the active sidebar item uses the
   same white "active state" language as the rest of the site. */
.sd-side-item.is-active {
  background: #e9eaf0;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.45);
}
.sd-app-chart span {
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.22));
}

/* =========================================================================
   About page black + white color system (about.html only).
   Same direction as the approved homepage, AI Solutions, and Services
   pages: neutral black/charcoal surfaces, white/gray text and icons, one
   white primary button. Structure, copy, layout, links and functionality
   are untouched — color only. All selectors below are either already
   about-page-exclusive (.portrait-*, .story-*, .tl-*, .trust-*) — verified
   against every other page — or scoped under this page's unique section
   ids (#about-hero, #story, #trust, #process) so the .process-* rules
   shared with ai-solutions.html's #ais-process, and .orb-1/.orb-2 shared
   with the homepage's #home, are left untouched.
   ========================================================================= */

/* ---- Headings: solid white accent text ---- */
#about-hero .accent,
#story .accent,
#trust .accent,
#process .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ---- Eyebrow dot, matching the other three pages ---- */
#about-hero .eyebrow .dot,
#story .eyebrow .dot,
#trust .eyebrow .dot,
#process .eyebrow .dot {
  background: #d8d9e0;
  box-shadow: none;
}

/* ---- One primary CTA button ---- */
#about-hero .btn-primary {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
#about-hero .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Story timeline ---- */
.tl-dot {
  background: #e9eaf0;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.story-body p:first-child::first-letter {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ---- Trust cards ---- */
.trust-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
.trust-card::after {
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
}
.trust-card:hover {
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.7), 0 6px 20px -12px rgba(0,0,0,.55);
}
.trust-card:hover .trust-ico {
  color: var(--text);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
}
.trust-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}

/* ---- Process — page-scoped override of the shared .process-* rules so
   ai-solutions.html's #ais-process is left untouched. ---- */
#process .process-rail-fill {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 50%, transparent);
}
#process .process-num {
  background:
    radial-gradient(closest-side, rgba(15,18,30,1), rgba(15,18,30,1)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.14)) border-box;
  box-shadow: 0 0 0 6px rgba(7,8,13,1), 0 10px 24px -10px rgba(0,0,0,.55);
}
#process .process-num span {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
#process .process-step:hover .process-num {
  box-shadow: 0 0 0 6px rgba(7,8,13,1), 0 0 0 10px rgba(255,255,255,.08), 0 18px 40px -14px rgba(0,0,0,.6);
}
#process .process-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}

/* ---- Background scrim — the exact same recipe as the homepage's
   .home-bg-scrim (after its own darkening pass), reused here so both
   pages share one visual background system. About-page-only; does not
   affect index.html or any other page. */
.about-bg-scrim {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.74) 0%, rgba(5,6,11,.8) 45%, rgba(5,6,11,.86) 100%);
}

/* ---- My Story readability card — one dense neutral-black panel behind
   the eyebrow/heading/timeline/copy/tags so the background network lines
   can't cross the text. Same recipe as the AI Solutions page's
   .ais-outcome-panel / .ais-sup-panel. */
.story-panel {
  background: linear-gradient(180deg, rgba(7,9,16,.97), rgba(5,7,13,.99));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
}
@media (max-width: 780px) {
  .story-panel { padding: 32px 28px; }
}
@media (max-width: 480px) {
  .story-panel { padding: 26px 18px; }
}

/* =========================================================================
   Contact page black + white color system (contact.html only).
   Same direction as the approved homepage, AI Solutions, Services, and
   About pages: neutral black/charcoal surfaces, white/gray text and
   icons, one white primary button. Structure, copy, layout, links,
   business logic (copy-to-clipboard, WhatsApp link) are untouched — color
   only. All selectors below are already contact-page-exclusive
   (.method-*, .contact-*) — verified against every other page — or
   scoped under #contact-hero / #methods for the shared .accent /
   .btn-primary rules.
   ========================================================================= */

/* ---- Background scrim — the exact same recipe as the homepage's
   .home-bg-scrim, reused here so both pages share one visual background
   system. Contact-page-only; does not affect index.html or any other page. */
.contact-bg-scrim {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.74) 0%, rgba(5,6,11,.8) 45%, rgba(5,6,11,.86) 100%);
}

/* ---- Eyebrow dot, matching the other four pages ---- */
#contact-hero .eyebrow .dot {
  background: #d8d9e0;
  box-shadow: none;
}

/* ---- Heading: solid white accent text ---- */
#contact-hero .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ---- One primary CTA button across all three contact method cards ---- */
#methods .btn-primary {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
#methods .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Method cards ---- */
.method-card::after {
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
}
.method-card:hover {
  box-shadow: 0 22px 60px -28px rgba(0,0,0,.7), 0 6px 24px -14px rgba(0,0,0,.55);
}
.method-card:hover .method-ico {
  color: var(--text);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
}
.method-primary {
  border-color: rgba(255,255,255,.16);
}
.method-primary::after {
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
}
.method-flag {
  color: #0a0b12;
  background: #e9eaf0;
}
.method-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
.method-copy-btn {
  text-decoration-color: rgba(255,255,255,.3);
}
.method-copy-btn:hover,
.method-copy-btn:focus-visible {
  color: var(--text);
  text-decoration-color: rgba(255,255,255,.6);
}

/* =========================================================================
   Try Demo / Demos Hub page black + white color system (demos.html only).
   Same direction as the approved homepage, AI Solutions, Services, About,
   and Contact pages: neutral black/charcoal surfaces, white/gray text and
   icons. Structure, copy, layout, links, card order and functionality are
   untouched — color only. All selectors below are already demos.html-
   exclusive (.hub-*, .demos-hub) — verified against every other page.
   (The shared nav-button/active-underline rules are fixed site-wide at
   their base definition near the top of this file, not scoped per page.)
   ========================================================================= */

/* ---- Background scrim — the exact same recipe as the homepage's
   .home-bg-scrim, reused here so both pages share one visual background
   system. Demos-page-only; does not affect index.html or any other page. */
.demos-bg-scrim {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 78% -8%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(5,6,11,.74) 0%, rgba(5,6,11,.8) 45%, rgba(5,6,11,.86) 100%);
}

/* ---- Heading + eyebrow ---- */
.demos-hub .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
.demos-hub-head .eyebrow .dot {
  background: #d8d9e0;
  box-shadow: none;
}

/* ---- Demo cards ---- */
.hub-link::before {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
.hub-card-live .hub-link:hover,
.hub-card-live .hub-link:focus-visible {
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 8px 24px -12px rgba(0,0,0,.55);
}
.hub-card-live .hub-link:hover .hub-ico,
.hub-card-live .hub-link:focus-visible .hub-ico {
  color: var(--text);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
}
.hub-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
/* .hub-status-live stays green — genuine Live Demo / Custom Request
   status, not decoration. */
.hub-sub { color: var(--text-dim); }

/* =========================================================================
   Internal demo UI black + white color system.
   Applies the same FAJR Z direction to every existing demo experience
   reachable from the Demo Hub: demo-chatbot.html, demo-voice-agent.html
   (business/scenario selector + active interface), demo-ai-agent.html,
   demo-sales-followup.html, demo-automation.html (shared workflow/gate
   shell), demo-custom-software.html + demo-website.html (shared .ff-*
   showcase), and the Custom AI Agent modal (.ca-*, shared via
   custom-agent.js). All selectors below are already demo-exclusive
   (verified against every already-approved page) or scoped under a
   demo-only parent class. Structure, copy, business logic, scoring,
   qualification tiers, AI/voice functionality and all data are untouched
   — color only.

   FUNCTIONAL colors intentionally left UNCHANGED (do not "fix" these):
   - .voice-status-dot[data-state=...] — real call/connection state
   - .voice-btn-mute[aria-pressed="true"] — real mute state (orange)
   - .voice-note, .ca-req/.ca-error — real warning/error (red)
   - .leadq-hot[data-tier=...] + its ring/flame/score/verdict colors —
     the qualification-tier system (qualified/low-priority/unqualified)
   - .leadq-crit[data-state="ok"], .leadq-progress-step[data-state="done"],
     .workflow-step[data-state="done"], .wf-tick, .wf-warn,
     .salesfu-crm-badge / .salesfu-signal[data-state=...],
     .salesfu-outcome, .salesfu-email*, .leadq-handoff*,
     .leadq-handoff-email*, .voice-booking-card — real success/progress
     states (green) and warnings (yellow)
   - .ca-choice-wa — WhatsApp's own brand green
   ========================================================================= */

/* ---- Business/scenario selector cards (demo-chatbot.html,
   demo-voice-agent.html) — Restaurant / Dental / Real Estate /
   E-commerce / Service Business / Other. ---- */
.biz-card:focus-visible { outline-color: #ffffff; }
.biz-card.is-selected {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.6);
}
.biz-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.biz-card.is-selected .biz-ico {
  color: var(--text);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.3);
}
.biz-custom { border-color: rgba(255,255,255,.16); }
.biz-custom input:focus,
.biz-custom select:focus,
.biz-custom textarea:focus {
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

/* ---- AI Customer Support chat demo (demo-chatbot.html) ---- */
.demo-back:focus-visible,
.demo-chat-send:focus-visible { outline-color: #ffffff; }
.demo-chat-avatar {
  color: var(--text-dim);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.demo-msg-user .demo-msg-body {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
}
.demo-msg-notice .demo-msg-body {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
}
.demo-chat-input:focus {
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
.demo-chat-send {
  color: #0a0b12;
  background: #f0f1f6;
}
/* The status dot in this demo's own chat header is decorative "online"
   flair (static, not the real .voice-status-dot state system). */
.demo-chat-status .chatbot-status-dot { background: #d8d9e0; box-shadow: none; }

/* ---- AI Voice Agent demo (demo-voice-agent.html) ---- */
.voice-btn-mute:focus-visible,
.voice-btn-start:focus-visible,
.voice-btn-end:focus-visible,
.voice-transcript summary:focus-visible { outline-color: #ffffff; }
/* Central orb — same reactive brightness/scale tied to --level (mic
   input), just recolored from blue/purple/cyan to neutral white. */
.voice-orb-core {
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.32), transparent 45%),
    radial-gradient(circle at 55% 60%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(circle at 30% 30%, #eef0f5, #b9bbc4);
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.15),
    inset 0 -30px 60px rgba(10,13,30,.5),
    0 0 calc(28px + 60px * var(--level)) rgba(255,255,255, calc(.20 + .35 * var(--level))),
    0 0 calc(48px + 100px * var(--level)) rgba(255,255,255, calc(.10 + .25 * var(--level)));
}
.voice-orb-glow {
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255, calc(.12 + .3 * var(--level))),
    transparent 60%);
}
.voice-orb-ring { border-color: rgba(255,255,255,.2); }
.voice-orb-ring-mid { border-color: rgba(255,255,255, calc(.18 + .3 * var(--level))); }
.voice-orb-ring-outer { border-color: rgba(255,255,255, calc(.12 + .22 * var(--level))); }
.voice-typed {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
}
.voice-typed-row input:focus { border-color: rgba(255,255,255,.4); }
.voice-msg-role { color: var(--text); }
.voice-msg-agent .voice-msg-role { color: var(--text-dim); }

/* ---- Shared workflow/gate shell (demo-ai-agent.html,
   demo-sales-followup.html, demo-automation.html) ---- */
.workflow-step { background: rgba(255,255,255,.03); }
.workflow-step[data-state="active"] {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.6);
}
.workflow-step[data-state="active"] .workflow-step-index {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
  color: var(--text);
}
.workflow-log .wf-info { color: var(--text-dim); }

/* ---- AI Lead Qualification & Follow-Up demo (demo-ai-agent.html) ----
   The qualified/low-priority/unqualified tier system (.leadq-hot and its
   ring/flame/score/verdict colors) is left untouched — it's the real
   qualification-score differentiation, not decoration. */
.leadq-progress-step[data-state="active"] {
  color: var(--text);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}
.leadq-progress-step[data-state="active"] .leadq-progress-dot {
  background: #e9eaf0;
  box-shadow: none;
}
.leadq-col-eyebrow { color: var(--text-dim); }
.leadq-chat-avatar {
  background: #e9eaf0;
  color: #0a0b12;
}
.leadq-crit { background: rgba(255,255,255,.03); }
.leadq-msg-agent .leadq-msg-body {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.leadq-handoff-next {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

/* ---- AI Sales & Follow-Up Agent demo (demo-sales-followup.html) ---- */
.salesfu-crm-card { background: rgba(255,255,255,.03); }
.salesfu-msg-agent .salesfu-msg-body {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.salesfu-signal { background: rgba(255,255,255,.03); }
.salesfu-notify {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(8,11,20,.98));
  border-color: rgba(255,255,255,.16);
}
.salesfu-notify-tick {
  background: rgba(255,255,255,.10);
  color: var(--text);
}
.salesfu-notify-title { color: var(--text-dim); }
.salesfu-crm-prevnote {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

/* ---- Custom Software + Website demos (demo-custom-software.html,
   demo-website.html) — shared .ff-* video showcase ---- */
.ff-video-frame {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(8,11,20,.96), rgba(6,8,14,.98));
}
.ff-video-frame::before {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
.ff-video-play {
  color: var(--text-dim);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
  box-shadow: none;
}
.ff-info-card:hover { border-color: rgba(255,255,255,.22); }
.ff-info-ico {
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
}
.ff-note svg { color: var(--text-dim); }

/* ---- Custom AI Agent modal (.ca-*, shared via custom-agent.js —
   appears on demos.html and services.html). WhatsApp's own choice
   (.ca-choice-wa) keeps its brand green untouched. ---- */
.ca-dialog {
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 10px 30px -12px rgba(0,0,0,.6);
}
.ca-close:focus-visible { outline-color: rgba(255,255,255,.65); }
.ca-eyebrow { color: var(--text-dim); }
.ca-eyebrow-dot { background: #d8d9e0; box-shadow: none; }
.ca-form input:focus,
.ca-form textarea:focus { border-color: rgba(255,255,255,.35); }
.ca-choice {
  background: rgba(255,255,255,.03);
}
.ca-choice:hover,
.ca-choice:focus-visible {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24);
}
.ca-choice-icon { color: var(--text-dim); }
.ca-dialog .btn-primary {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
.ca-dialog .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* ---- Demo headings: solid white accent text (was gradient) across every
   demo page — scoped to each demo's own exclusive wrapper class so no
   already-approved page is affected. ---- */
.workflow-page .accent,
.software-page .accent,
#demoSelect .accent,
.demo-chat .accent,
#voiceSelect .accent,
.voice-page .accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* ---- Demo primary buttons: same white-bg/black-text system as the rest
   of the site, for every "Start Demo" / "Run" / "Discuss" action inside
   the demos. Scoped to each demo-exclusive wrapper. ---- */
.biz-actions .btn-primary,
.demo-gate .btn-primary,
.workflow-page [data-run].btn-primary,
.ff-video-actions .btn-primary,
.software-discuss-btn,
.voice-btn-start,
.voice-typed-form .btn-primary {
  background: #f0f1f6;
  color: #0a0b12;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.04);
}
.biz-actions .btn-primary:hover,
.demo-gate .btn-primary:hover,
.workflow-page [data-run].btn-primary:hover,
.ff-video-actions .btn-primary:hover,
.software-discuss-btn:hover,
.voice-btn-start:hover,
.voice-typed-form .btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.04);
}
.ff-video-actions .btn-primary[disabled] {
  background: rgba(255,255,255,.6);
}