/* ==========================================================================
   Burnzoft — Landing Page Styles
   ========================================================================== */

:root {
  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #55617a;
  --border: #e2e8f0;
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --accent: #7c3aed;
  --ring: rgba(79, 70, 229, 0.35);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.1);
  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  /* The Burnzoft mark (#bz-mark): navy stem; light in dark mode. */
  --logo-ink: #0c1b4c;
  --logo-start: #0c1b4c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --bg-alt: #0f172a;
    --surface: #111a2e;
    --text: #e6ebf5;
    --text-muted: #96a3ba;
    --border: #1e293b;
    --ring: rgba(129, 140, 248, 0.35);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45);
    --logo-ink: #e0e7ff;
    --logo-start: #3d4fd6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

ul, ol { list-style: none; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }

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

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 8px 20px var(--ring);
}
.btn-primary:hover { box-shadow: 0 12px 28px var(--ring); }
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-white {
  background: #fff;
  color: var(--primary-dark);
}
.btn-block { width: 100%; justify-content: center; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
}
/* The Burnzoft mark: the "b" of the Burnzoft Pulse logo (navy stem,
   blue-to-violet bowl), without Pulse's pulse line. The artwork is the
   #bz-mark symbol at the top of each page (and favicon.svg); its navy turns
   light in dark mode (--logo-ink / --logo-start). It settles in on load and
   tilts on hover. */
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: brandmark-arrive 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.brand-mark--sm { width: 30px; height: 30px; }

@keyframes brandmark-arrive {
  from { opacity: 0; transform: translateY(4px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
}
.brand:focus-visible .brand-mark { transform: rotate(-6deg) scale(1.06); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle { color: var(--text); transition: background 0.15s ease, border-color 0.15s ease; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] { background: var(--bg-alt); border-color: var(--primary); }
.nav-toggle[aria-expanded="true"] .nav-toggle__menu { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
/* The menu's own sign-up button only shows inside the mobile menu. */
.nav-links__cta { display: none; }
/* Dims the page under the open mobile menu (added by main.js, outside the
   header, because the header's backdrop-filter would trap a fixed child). */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(2, 6, 23, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.25);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0.3s;
  }
  .nav-links.is-open {
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: visible;
  }
  .nav-links a:not(.btn) {
    padding: 15px 24px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):focus-visible { background: var(--bg-alt); color: var(--primary); }
  .nav-links .nav-links__cta { display: flex; justify-content: center; margin: 16px 24px 20px; color: #fff; font-weight: 600; }
  .nav-links .nav-links__cta:hover { color: #fff; }
  .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: flex; }
  /* Scroll lock goes on <html>: overflow on <body> would make the body the
     sticky header's scroll container, and the header (with the menu) would
     jump back to the top of the page when opened mid-scroll. */
  html.nav-open { overflow: hidden; }
  html.nav-open .chat-widget { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  background:
    radial-gradient(600px circle at 15% -10%, var(--ring), transparent 60%),
    radial-gradient(500px circle at 100% 0%, rgba(124, 58, 237, 0.18), transparent 55%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 56px;
}
.hero-copy {
  display: grid;
  gap: 20px;
  max-width: 620px;
}
.hero-copy .eyebrow { justify-self: start; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: none; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
}
.hero .gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 620px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }

/* ---------- Hero: Burnzoft Pulse's QA check ----------
   The same animation as Burnzoft Pulse's sign-in page: one 9-second QA check,
   looping. Four metrics pass in turn while the score ring fills and counts up
   to 100, the pill flips to "Passed", then it resets. Status chips drift and
   the glows breathe. Reduced motion shows the finished check, still (below). */
.pulse-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 30px 46px;
  border-radius: var(--radius-lg);
  background: #161950;
  box-shadow: var(--shadow-hover);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ps-glow {
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
}
.ps-glow--1 { left: -90px; top: -70px; background: rgba(70, 95, 255, 0.4); animation: ps-glow 12s ease-in-out infinite; }
.ps-glow--2 { right: -80px; bottom: -90px; background: rgba(124, 243, 184, 0.16); animation: ps-glow 14s ease-in-out -6s infinite; }

.ps-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.ps-brand__mark { width: 46px; height: 46px; }
.ps-brand__pulse {
  background: linear-gradient(90deg, #4d9bff, #c04fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ps-pulse-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ps-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
.ps-tagline { margin-top: 16px; font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); text-align: center; }
.ps-sub { margin-top: 4px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); text-align: center; }

.ps-stage { position: relative; width: 100%; margin-top: 38px; }
.ps-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.ps-chip svg { width: 12px; height: 12px; }
.ps-chip--1 { left: -14px; top: -18px; animation: ps-float 7s ease-in-out infinite; }
.ps-chip--2 { right: -14px; top: -18px; animation: ps-float 8s ease-in-out -2.5s infinite; }
.ps-chip--3 { left: 22px; bottom: -24px; animation: ps-float 9s ease-in-out -5s infinite; }
.ps-dot { width: 6px; height: 6px; border-radius: 50%; background: #7cf3b8; }

.ps-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}
.ps-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-card__head > div { min-width: 0; }
.ps-card__id { font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.ps-card__title { font-size: 0.88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-pill { position: relative; flex-shrink: 0; width: 92px; height: 24px; font-size: 0.72rem; font-weight: 700; }
.ps-pill > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; }
.ps-pill__checking { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); animation: ps-pill-checking 9s infinite; }
.ps-pill__passed { background: rgba(124, 243, 184, 0.15); color: #7cf3b8; opacity: 0; animation: ps-pill-passed 9s infinite; }
.ps-pill svg { width: 12px; height: 12px; }
.ps-spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); border-right-color: transparent; animation: ps-spin 0.9s linear infinite; }

.ps-card__body { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.ps-metrics { flex: 1; min-width: 0; display: grid; gap: 10px; }
.ps-metric { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }
.ps-metric > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-check { position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.ps-check > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ps-check svg { width: 12px; height: 12px; }
.ps-pending { border: 2px solid rgba(255, 255, 255, 0.2); }
.ps-pass { background: #7cf3b8; color: #0b1a33; opacity: 0; transform: scale(0.4); }
.ps-step-1 .ps-pass { animation: ps-pass-1 9s infinite; }
.ps-step-2 .ps-pass { animation: ps-pass-2 9s infinite; }
.ps-step-3 .ps-pass { animation: ps-pass-3 9s infinite; }
.ps-step-4 .ps-pass { animation: ps-pass-4 9s infinite; }
.ps-step-1 .ps-pending { animation: ps-pend-1 9s infinite; }
.ps-step-2 .ps-pending { animation: ps-pend-2 9s infinite; }
.ps-step-3 .ps-pending { animation: ps-pend-3 9s infinite; }
.ps-step-4 .ps-pending { animation: ps-pend-4 9s infinite; }

.ps-ring { position: relative; flex-shrink: 0; width: 88px; height: 88px; }
.ps-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-ring__fill { stroke-dasharray: 1; animation: ps-ring 9s ease-in-out infinite; }
.ps-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ps-ring__label small { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
@property --ps-score {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.ps-score {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  counter-reset: ps-score var(--ps-score);
  animation: ps-score 9s ease-in-out infinite;
}
.ps-score::after { content: counter(ps-score); }

@keyframes ps-draw { to { stroke-dashoffset: 0; } }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-score { 0%, 8% { --ps-score: 0; } 52%, 93% { --ps-score: 100; } 100% { --ps-score: 0; } }
@keyframes ps-ring { 0%, 8% { stroke-dashoffset: 1; } 52%, 93% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes ps-pass-1 { 0%, 14% { opacity: 0; transform: scale(0.4); } 17% { opacity: 1; transform: scale(1.15); } 19%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes ps-pass-2 { 0%, 26% { opacity: 0; transform: scale(0.4); } 29% { opacity: 1; transform: scale(1.15); } 31%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes ps-pass-3 { 0%, 38% { opacity: 0; transform: scale(0.4); } 41% { opacity: 1; transform: scale(1.15); } 43%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes ps-pass-4 { 0%, 50% { opacity: 0; transform: scale(0.4); } 53% { opacity: 1; transform: scale(1.15); } 55%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes ps-pend-1 { 0%, 14% { opacity: 1; } 17%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ps-pend-2 { 0%, 26% { opacity: 1; } 29%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ps-pend-3 { 0%, 38% { opacity: 1; } 41%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ps-pend-4 { 0%, 50% { opacity: 1; } 53%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ps-pill-checking { 0%, 54% { opacity: 1; } 57%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ps-pill-passed { 0%, 54% { opacity: 0; transform: scale(0.9); } 57%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes ps-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -10px); } }
@keyframes ps-glow { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; } 50% { transform: translate(30px, 20px) scale(1.15); opacity: 1; } }

/* Reduced motion: the site's global rule stops every animation at its first
   frame (an empty check), so show the finished, passed check instead. */
@media (prefers-reduced-motion: reduce) {
  .pulse-showcase *, .pulse-showcase *::after { animation: none !important; }
  .ps-pulse-line { stroke-dashoffset: 0; }
  .ps-pass { opacity: 1; transform: none; }
  .ps-pending, .ps-pill__checking { opacity: 0; }
  .ps-pill__passed { opacity: 1; }
  .ps-ring__fill { stroke-dashoffset: 0; }
  .ps-score { --ps-score: 100; }
}

@media (max-width: 480px) {
  .pulse-showcase { padding: 32px 20px 40px; }
  .ps-brand { font-size: 1.4rem; }
  .ps-brand__mark { width: 38px; height: 38px; }
  .ps-card__body { gap: 14px; }
  .ps-ring { width: 76px; height: 76px; }
  .ps-chip--1 { left: -6px; }
  .ps-chip--2 { right: -6px; }
}


.hero-visual__caption {
  max-width: 420px;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Glow-text animation: letters glow one by one in the same indigo as the
   "Explore the systems" button (var(--primary)); once the wave reaches the
   last letter, the whole phrase zooms in and turns into that button —
   var(--gradient) background, white text, pill border-radius, and the
   button's own glow shadow (var(--ring)) — so it also adapts automatically
   in dark mode. It holds there for 3s, then zooms back out (dropping the
   button look) and the sequence repeats. Both animations share one 6.56s
   period (no animation-delay on the loop itself) so the wave and the zoom
   never drift apart. .glow-letter uses color: inherit outside its own glow
   pulse so it picks up .glow-text's animated color (including the white
   button text) during the zoom/pause phase, and text-transform: uppercase
   inherits the same way. background is a gradient so it can't interpolate
   smoothly like a solid color — it's given a tight keyframe pair (e.g.
   40.54%/40.55%) right where the continuous properties (scale, color,
   shadow, radius) finish ramping, so it pops in/out exactly on beat instead
   of at CSS's default halfway-between-keyframes point. */
/* Room on each side for the pill it grows into, so it never covers the words around it. */
.hero-visual__caption .glow-text { margin-left: 0.7em; }
.glow-text {
  display: inline-block;
  padding: 0.15em 0.4em;
  border-radius: 12px;
  animation: glow-zoom 6.56s ease-in-out infinite;
}

.glow-letter {
  display: inline-block;
  color: var(--text-muted);
  animation: letter-glow 6.56s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.06s);
}

@keyframes letter-glow {
  0% {
    color: inherit;
    text-shadow: none;
  }
  3.81% {
    color: var(--primary);
    text-shadow:
      0 0 6px var(--ring),
      0 0 12px var(--ring),
      0 0 20px var(--ring);
  }
  7.62%, 100% {
    color: inherit;
    text-shadow: none;
  }
}

@keyframes glow-zoom {
  0%, 31.40% {
    transform: scale(1);
    color: var(--text-muted);
    text-transform: none;
    background: transparent;
    padding: 0.15em 0.4em;
    border-radius: 12px;
    box-shadow: none;
    text-shadow: none;
  }
  31.41% {
    text-transform: uppercase;
  }
  40.54% {
    background: transparent;
  }
  40.55% {
    transform: scale(1.15);
    color: #fff;
    background: var(--gradient);
    padding: 0.35em 0.9em;
    border-radius: 999px;
    box-shadow:
      0 8px 20px var(--ring),
      0 0 32px 4px var(--ring);
    text-shadow: none;
  }
  86.28% {
    transform: scale(1.15);
    color: #fff;
    background: var(--gradient);
    padding: 0.35em 0.9em;
    border-radius: 999px;
    box-shadow:
      0 8px 20px var(--ring),
      0 0 32px 4px var(--ring);
    text-shadow: none;
  }
  86.29% {
    text-transform: none;
    background: transparent;
  }
  95.43%, 100% {
    transform: scale(1);
    color: var(--text-muted);
    text-transform: none;
    background: transparent;
    padding: 0.15em 0.4em;
    border-radius: 12px;
    box-shadow: none;
    text-shadow: none;
  }
}

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-heading {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section-heading p { color: var(--text-muted); font-size: 1.05rem; }

/* ---------- System cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 32px;
}
.system-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.system-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 22px;
}
/* Burnzoft Pulse: the logo bowl's blue-to-violet. */
.card-image.image-pulse { background: linear-gradient(135deg, #0a7bff, #4a3fef 50%, #9b30ff); }
.card-image.image-vplot { background: linear-gradient(135deg, #0ea5e9, #4f46e5 55%, #7c3aed); }
/* Product cards: a "Flagship" tag, and a second action beside the main one. */
.product-flag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
/* The hidden SVG sprite with the logo artwork (top of each page). */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.card-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}

/* ==========================================================================
   Product card scenes: what each product does, as a small looping animation
   on the card's gradient. Pure CSS; reduced motion shows the finished scene.
   - .pulse-scene: Pulse's AI assistant setting up QA from a conversation.
   - .vplot-scene: VPlot's leave calendar, with its real colours
     (VL #0073b7, SL #c0392b, Awaiting Approval #f39c12), a request being
     approved, and "Hey Vio", its voice assistant.
   ========================================================================== */
.scene {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 100%;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #fff;
}
.scene__panel {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 14, 60, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(10, 14, 60, 0.3);
  padding: 12px 14px;
  overflow: hidden;
}

/* ---- Pulse: AI assistant (12s loop) ---- */
.pulse-scene .scene__panel { display: flex; flex-direction: column; gap: 7px; }
/* Room above the panel for the "Flagship" tag. */
.image-pulse .scene { height: calc(100% - 20px); margin-top: 20px; }
.ps-chat-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); }
.ps-chat-head svg { width: 13px; height: 13px; color: #c9b8ff; }
.ps-chat-head em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 0.62rem; padding: 1px 7px; border-radius: 999px; background: rgba(124, 243, 184, 0.18); color: #7cf3b8; }
.ps-msg { max-width: 86%; padding: 6px 10px; border-radius: 12px; opacity: 0; }
.ps-msg--user { align-self: flex-end; background: #fff; color: #1d2f98; font-weight: 600; border-bottom-right-radius: 4px; animation: sc-in-1 12s infinite; }
.ps-msg--ai { align-self: flex-start; background: rgba(255, 255, 255, 0.14); border-bottom-left-radius: 4px; }
.ps-typing { position: absolute; display: flex; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); opacity: 0; animation: sc-typing 12s infinite; }
.ps-typing i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: sc-dot 0.9s ease-in-out infinite; }
.ps-typing i:nth-child(2) { animation-delay: 0.15s; }
.ps-typing i:nth-child(3) { animation-delay: 0.3s; }
.ps-reply-wrap { position: relative; min-height: 26px; }
.ps-reply { animation: sc-in-2 12s infinite; }
.ps-actions { display: grid; gap: 4px; }
.ps-action { display: flex; align-items: center; gap: 6px; opacity: 0; color: rgba(255, 255, 255, 0.92); }
.ps-action svg { width: 13px; height: 13px; flex-shrink: 0; padding: 2px; border-radius: 50%; background: #7cf3b8; color: #0b1a33; }
.ps-action:nth-child(1) { animation: sc-in-3 12s infinite; }
.ps-action:nth-child(2) { animation: sc-in-4 12s infinite; }
.ps-action:nth-child(3) { animation: sc-in-5 12s infinite; }
.ps-ready { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #7cf3b8; color: #0b1a33; font-weight: 700; opacity: 0; animation: sc-in-6 12s infinite; }

@keyframes sc-in-1 { 0%, 3% { opacity: 0; transform: translateY(6px); } 6%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sc-typing { 0%, 9% { opacity: 0; } 11%, 17% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes sc-in-2 { 0%, 18% { opacity: 0; transform: translateY(6px); } 21%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sc-in-3 { 0%, 26% { opacity: 0; transform: translateX(-6px); } 29%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sc-in-4 { 0%, 33% { opacity: 0; transform: translateX(-6px); } 36%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sc-in-5 { 0%, 40% { opacity: 0; transform: translateX(-6px); } 43%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sc-in-6 { 0%, 50% { opacity: 0; transform: scale(0.8); } 53% { opacity: 1; transform: scale(1.08); } 55%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sc-dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ---- VPlot: leave calendar (12s loop) ---- */
.vp-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 0.72rem; }
.vp-legend { display: flex; gap: 8px; font-weight: 600; font-size: 0.58rem; color: rgba(255, 255, 255, 0.8); }
.vp-legend span { display: inline-flex; align-items: center; gap: 3px; }
.vp-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.vp-days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 6px; font-size: 0.55rem; font-weight: 600; text-align: center; color: rgba(255, 255, 255, 0.55); }
/* Five weeks of day cells, drawn as grid lines; the bars sit on top. */
.vp-grid {
  position: relative;
  height: calc(100% - 38px);
  margin-top: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 100% 20%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / calc(100% / 7) 100%;
}
.vp-bar {
  position: absolute;
  left: calc(100% / 7 * var(--col) + 2px);
  top: calc(20% * var(--row) + 4px);
  width: calc(100% / 7 * var(--span) - 4px);
  height: calc(20% - 8px);
  display: flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.56rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  background: var(--c);
  transform-origin: left center;
  transform: scaleX(0);
}
.vp-bar--vl { --c: #0073b7; animation: vp-grow-1 12s infinite; }
.vp-bar--sl { --c: #c0392b; animation: vp-grow-2 12s infinite; }
/* Filed (Awaiting Approval, orange), then approved (Vacation Leave, blue). */
.vp-bar--req { --c: #f39c12; animation: vp-grow-3 12s infinite; }
.vp-bar--req .vp-req-ok { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; padding: 0 5px; background: #0073b7; opacity: 0; animation: vp-approve 12s infinite; }
.vp-toast {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(10, 14, 60, 0.35);
  opacity: 0;
  animation: vp-toast 12s infinite;
}
.vp-toast b { color: #12b76a; }
.vp-vio {
  position: absolute;
  z-index: 2;
  top: -12px;
  right: -10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  font-weight: 700;
  font-size: 0.65rem;
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.35);
  animation: ps-float 8s ease-in-out infinite;
}
.vp-vio i { position: relative; display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.vp-vio i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: vp-ping 1.8s ease-out infinite; }
.vp-vio svg { width: 10px; height: 10px; }

@keyframes vp-grow-1 { 0%, 6% { transform: scaleX(0); } 14%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes vp-grow-2 { 0%, 18% { transform: scaleX(0); } 24%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes vp-grow-3 { 0%, 30% { transform: scaleX(0); } 37%, 93% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes vp-approve { 0%, 54% { opacity: 0; } 57%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes vp-toast { 0%, 57% { opacity: 0; transform: translateY(8px); } 61%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes vp-ping { 0% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::after { animation: none !important; }
  .ps-msg, .ps-reply, .ps-action, .ps-ready, .vp-toast, .vp-req-ok { opacity: 1 !important; transform: none !important; }
  .vp-bar { transform: none !important; }
  .ps-typing { opacity: 0 !important; }
}
@media (max-width: 420px) {
  .scene { font-size: 0.66rem; }
  .vp-legend { display: none; }
}

/* ==========================================================================
   Free software (GABAY): a labelled divider, then a wide card with the scene
   on the left and the copy on the right. Stacks like the others on narrow screens.
   ========================================================================== */
.free-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 64px 0 24px;
  scroll-margin-top: 96px;
}
.free-heading::after { content: ""; flex: 1 1 120px; height: 1px; background: var(--border); order: 3; }
.free-heading__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #067647;
  background: #dcfae6;
  border: 1px solid #abefc6;
}
.free-heading__tag svg { width: 15px; height: 15px; }
@media (prefers-color-scheme: dark) {
  .free-heading__tag { color: #75e0a7; background: rgba(18, 183, 106, 0.12); border-color: rgba(117, 224, 167, 0.3); }
}
.free-heading p { color: var(--text-muted); font-size: 0.95rem; order: 2; }

.system-card--wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.system-card--wide .card-image { aspect-ratio: auto; min-height: 340px; }
@media (max-width: 860px) {
  .system-card--wide { display: flex; }
  .system-card--wide .card-image { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 560px) {
  .system-card--wide .card-image { aspect-ratio: 1 / 1; }
}
.card-sub { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.feature-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px 18px; font-size: 0.93rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 9px; }
.feature-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--gradient); color: #fff; }

/* GABAY: the logo's cyan-to-violet hexagon. */
.card-image.image-gabay { background: linear-gradient(135deg, #06b6d4, #2563eb 50%, #7c3aed); }
.image-gabay .scene { height: calc(100% - 20px); margin-top: 20px; max-width: 420px; }

/* ---- GABAY: guarantee letters (12s loop) ---- */
.gabay-scene .scene__panel { display: flex; flex-direction: column; gap: 8px; }
.gb-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 0.74rem; }
.gb-head img { width: 18px; height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.gb-lang { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 0.6rem; font-weight: 600; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.gb-list { list-style: none; display: grid; gap: 6px; }
.gb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
}
.gb-row--1 { animation: sc-in-1 12s infinite; }
.gb-row--2 { animation: sc-in-2 12s infinite; }
.gb-row--3 { animation: sc-in-3 12s infinite; }
.gb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.gb-row__main { display: grid; min-width: 0; }
.gb-row__main b, .gb-row__main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-row__main small { font-size: 0.6rem; color: rgba(255, 255, 255, 0.7); }
.gb-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.gb-status { position: relative; overflow: hidden; padding: 2px 8px; border-radius: 999px; font-size: 0.6rem; font-weight: 700; white-space: nowrap; }
.gb-status--done { background: #7cf3b8; color: #0b1a33; }
.gb-status--valid { background: rgba(255, 255, 255, 0.9); color: #1d2f98; }
.gb-status--pending { background: #fbbf24; color: #3b2600; }
.gb-status__ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #7cf3b8; color: #0b1a33; opacity: 0; animation: vp-approve 12s infinite; }
.gb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; opacity: 0; animation: sc-in-4 12s infinite; }
.gb-stats span { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 0.58rem; color: rgba(255, 255, 255, 0.7); }
.gb-stats b { font-size: 0.82rem; color: #fff; font-variant-numeric: tabular-nums; }
.gb-toast {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(10, 14, 60, 0.35);
  opacity: 0;
  animation: vp-toast 12s infinite;
}
.gb-toast svg { width: 13px; height: 13px; color: #f59e0b; }
@media (prefers-reduced-motion: reduce) {
  .gb-row, .gb-stats, .gb-toast, .gb-status__ok { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 420px) {
  .gb-amt, .gb-stats { display: none; }
  .gb-row { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* ---------- Why Pulse: AI-ready, and how it compares ---------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 940px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }
.ai-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: #161950;
  color: #fff;
  box-shadow: var(--shadow-hover);
}
.ai-card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 48, 255, 0.45), transparent 70%);
  pointer-events: none;
}
.ai-card__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #c9b8ff; }
.ai-card__tag svg { width: 14px; height: 14px; }
.ai-card h3 { position: relative; margin-top: 16px; font-size: 1.45rem; }
.ai-card > p { position: relative; margin-top: 10px; color: rgba(255, 255, 255, 0.75); }
.ai-list { position: relative; display: grid; gap: 16px; margin-top: 22px; }
.ai-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.ai-list li > span { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 255, 255, 0.1); color: #7cf3b8; }
.ai-list li > span svg { width: 16px; height: 16px; }
.ai-list strong { display: block; font-size: 0.95rem; }
.ai-list p { margin-top: 2px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); }

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td:first-child { min-width: 210px; font-weight: 500; }
.compare-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-alt); }
.compare-table thead th.is-pulse { color: var(--primary); }
.compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; white-space: nowrap; }
.compare-table td.is-pulse { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cmp { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 0.82rem; }
.cmp svg { width: 16px; height: 16px; }
.cmp--yes { color: #12b76a; }
.cmp--part { color: #f79009; }
.cmp--no { color: var(--text-muted); }
.compare-note { margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); }


.card-body { padding: 32px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.badge {
  align-self: start;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
}
.system-card h3 { font-size: 1.4rem; }
.system-card > .card-body > p { color: var(--text-muted); }

.steps {
  display: grid;
  gap: 12px;
  counter-reset: step;
  margin: 4px 0;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.93rem;
}
.steps li::before {
  content: counter(step);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.steps li strong { display: block; color: var(--text); }
.steps li span.step-desc { display: block; margin-top: 2px; color: var(--text-muted); }

.card-body .btn { margin-top: 8px; align-self: start; }

.bg-alt { background: var(--bg-alt); }

/* ---------- Value props ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 28px;
}
.value-item {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.value-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.value-icon svg { width: 22px; height: 22px; }
.value-item h4 { font-size: 1.05rem; margin-bottom: 8px; }
.value-item p { color: var(--text-muted); font-size: 0.93rem; }

/* ---------- Clients ---------- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 32px;
}
.client-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
}
.client-card__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.client-card__body { display: flex; flex-direction: column; gap: 12px; }
.client-card__body h3 { font-size: 1.2rem; }
.client-card__body h3 a { color: var(--text); }
.client-card__body h3 a:hover { color: var(--primary); }
.client-card__body > p { color: var(--text-muted); }
.client-card__body .btn { align-self: start; margin-top: 4px; }

@media (max-width: 560px) {
  .client-card { flex-direction: column; }
}

/* ---------- Insights: sample report charts ---------- */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 28px 24px;
}
.chart-card__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.chart-card__head h3 { font-size: 1.15rem; }
.chart-card__caption {
  margin-top: 20px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Grid on the <ul> itself (not each <li>) so every row's label/track/value
   share the same three columns -- each <li> uses display:contents to hand
   its children straight to the shared grid instead of nesting its own. */
.stat-chart {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  row-gap: 16px;
  column-gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.stat-chart__row { display: contents; }

.stat-chart__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.stat-chart__bar-track {
  position: relative;
  height: 18px;
  width: var(--target, 0%);
  min-width: 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  overflow: hidden;
}
.stat-chart__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s ease;
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.chart-card--pulse .stat-chart__bar-fill { background: linear-gradient(90deg, #0a7bff, #4a3fef 60%, #9b30ff); }
.chart-card--vplot .stat-chart__bar-fill { background: linear-gradient(90deg, #0ea5e9, #4f46e5 60%, #7c3aed); }

.stat-chart[data-chart-reveal].is-visible .stat-chart__bar-fill { transform: scaleX(1); }

.stat-chart__value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.stat-chart__row:hover .stat-chart__bar-fill {
  filter: brightness(1.12);
}

/* ---------- Code compare tool ---------- */
.compare-tool {
  display: grid;
  gap: 20px;
}
.compare-tool__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.compare-tool__field {
  display: grid;
  gap: 8px;
}
.compare-tool__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.compare-tool__field-head label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.compare-tool__lang {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
}

/* Layered "editor": three stacked layers sharing identical box metrics so
   they all line up character-for-character.
     1. code-editor__diffbg   -- bottom. Invisible text, only paints diff
                                 backgrounds (line tint + word-level tint).
     2. code-editor__highlight -- middle. Visible, language syntax-colored
                                 text, transparent background.
     3. textarea (in-flow)    -- top. Invisible (transparent) real text and
                                 a visible caret; this is what the user
                                 actually types into.
   Backgrounds and foreground colors are kept on separate layers instead of
   merged into one, since merging hljs's token spans with diff-highlight
   spans on the same text would require re-splitting overlapping HTML tags;
   painting them as independent, perfectly-aligned layers avoids that. */
.code-editor {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.code-editor:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.code-editor__diffbg,
.code-editor__highlight,
.code-editor__textarea {
  margin: 0;
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.code-editor__diffbg,
.code-editor__highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
.code-editor__diffbg {
  color: transparent;
  z-index: 0;
}
.code-editor__diffbg code {
  display: block;
  width: max-content;
  min-width: 100%;
}
.code-editor__highlight {
  color: var(--text);
  z-index: 1;
}
.code-editor__highlight code.hljs {
  display: block;
  width: max-content;
  min-width: 100%;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible;
  color: inherit;
}
.code-editor__textarea {
  position: relative;
  z-index: 2;
  display: block;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  -webkit-text-fill-color: transparent;
}
.code-editor__textarea::placeholder {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  opacity: 1;
}
.code-editor__textarea:focus {
  outline: none;
}

/* Rows used only while both sides have content. "filler" rows are blank
   placeholders that keep the two panes vertically aligned when one side
   has extra inserted/deleted lines the other doesn't. */
.code-line {
  display: block;
  white-space: pre;
}
.code-line--add { background: rgba(34, 197, 94, 0.16); }
.code-line--remove { background: rgba(239, 68, 68, 0.16); }
.code-line--filler { background: var(--bg-alt); }

.compare-tool__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.compare-tool__summary {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.compare-legend {
  display: flex;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.compare-legend__item { display: flex; align-items: center; gap: 6px; }
.compare-legend__swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.compare-legend__swatch--add { background: #22c55e; }
.compare-legend__swatch--remove { background: #ef4444; }

/* These wrap invisible text in the diffbg layer -- only the background
   box matters, it shows through the syntax-colored text painted above it. */
.compare-diff__seg--add {
  background: rgba(34, 197, 94, 0.38);
  border-radius: 2px;
}
.compare-diff__seg--remove {
  background: rgba(239, 68, 68, 0.38);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .compare-tool__inputs { grid-template-columns: 1fr; }
}

/* ---------- Ad slots ---------- */
.ad-slot {
  margin: 0 auto;
  max-width: 970px;
  padding: 16px;
}
.ad-slot .ad-label {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ad-unit {
  min-height: 100px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px;
}
.ad-unit > .adsbygoogle {
  width: 100%;
}

/* ---------- CTA ---------- */
.cta-section {
  background: var(--gradient);
  border-radius: var(--radius-lg);
  margin: 0 24px;
  padding: 64px 40px;
  text-align: center;
  color: #fff;
  display: grid;
  gap: 20px;
  justify-items: center;
}
.cta-section h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.cta-section p { color: rgba(255, 255, 255, 0.88); max-width: 520px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand p { color: var(--text-muted); margin-top: 12px; max-width: 320px; font-size: 0.92rem; }
.footer-col h5 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--text); font-size: 0.93rem; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-section { margin: 0 16px; padding: 48px 24px; }
  section { padding: 64px 0; }
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Simple content page (privacy policy) ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: grid;
  gap: 24px;
}
.legal h1 { font-size: 2rem; }
.legal h2 { font-size: 1.25rem; margin-top: 12px; }
.legal p, .legal li { color: var(--text-muted); }
.legal ul { list-style: disc; padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--primary); text-decoration: underline; }

/* ==========================================================================
   Chat widget — conversational contact form (mailto handoff, no backend)
   ========================================================================== */

.chat-widget {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2147483647;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.chat-toggle {
  position: relative;
  width: 58px;
  height: 58px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--gradient);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 30px var(--ring), var(--shadow-hover);
  transition: transform 0.15s ease;
}
.chat-toggle:hover { transform: translateY(-2px) scale(1.03); }
.chat-toggle svg {
  width: 26px;
  height: 26px;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.chat-toggle__icon-close { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-45deg); }
.chat-toggle.is-active .chat-toggle__icon-open { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(45deg); }
.chat-toggle.is-active .chat-toggle__icon-close { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(340px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: min(480px, 78dvh);
  max-height: calc(100dvh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.chat-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gradient);
  color: #fff;
  flex-shrink: 0;
}
.chat-panel__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The mark on a tile in the page's surface colour, so its stem (navy, or
   light in dark mode) always stands out from the header behind it. */
.chat-panel__brand .brand-mark { box-sizing: content-box; padding: 5px; border-radius: 10px; background: var(--surface); }
.chat-panel__title { font-weight: 700; font-size: 0.92rem; }
.chat-panel__status { font-size: 0.74rem; color: rgba(255, 255, 255, 0.85); }
.chat-panel__close {
  background: none;
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-panel__close svg { width: 18px; height: 18px; }
.chat-panel__close:hover { background: rgba(255, 255, 255, 0.15); }

.chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-alt);
}

.chat-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-line;
  word-break: break-word;
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg--error {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
  padding: 0 4px;
}

.chat-msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chat-msg-actions button {
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.chat-msg-actions button:hover { background: var(--bg-alt); transform: translateY(-1px); }
.chat-msg-actions button.is-primary {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
  animation: chat-typing-bounce 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-panel__form {
  display: flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.chat-panel__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.chat-panel__input:focus { border-color: var(--primary); }
.chat-panel__input:disabled { opacity: 0.5; }
.chat-panel__send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-panel__send svg { width: 16px; height: 16px; }
.chat-panel__send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
  .chat-widget {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .chat-toggle {
    width: 58px;
    height: 58px;
  }
  .chat-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: min(86dvh, 640px);
    max-height: calc(100dvh - env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    transform-origin: bottom center;
    box-shadow: 0 -10px 34px rgba(15, 23, 42, 0.16);
  }
  .chat-panel__header {
    padding: 16px 18px;
  }
  .chat-panel__messages {
    padding: 18px 16px;
  }
  .chat-panel__form {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  }
}

@supports (-webkit-touch-callout: none) {
  .chat-toggle,
  .chat-panel__close,
  .chat-panel__send,
  .chat-msg-actions button {
    -webkit-tap-highlight-color: transparent;
  }

  .chat-panel__messages {
    -webkit-overflow-scrolling: touch;
  }
}