/* ==========================================================================
   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%);
  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);
    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;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;

  /* ---- animated logo: periodic glint sweep + quiet breathing ----
     Reduced motion is already handled globally by the site's "*" rule,
     which zeroes out animation/transition durations, so nothing extra
     is needed here for that case. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform-origin: 50% 50%;
  transition: filter 0.2s ease;
  will-change: transform;

  animation-name: brandmark-arrive, brandmark-breathe;
  animation-duration: 0.45s, 4.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-in-out;
  animation-delay: 0s, 0.45s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

@keyframes brandmark-arrive {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes brandmark-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 90px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 45%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.65) 55%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translate(-50%, -50%) translateX(-70px) rotate(20deg);
  animation: brandmark-shine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.4s;
}

@keyframes brandmark-shine {
  0%, 74% { transform: translate(-50%, -50%) translateX(-70px) rotate(20deg); }
  92%, 100% { transform: translate(-50%, -50%) translateX(70px) rotate(20deg); }
}

@keyframes brandmark-shine-hover {
  0%   { transform: translate(-50%, -50%) translateX(-70px) rotate(20deg); }
  100% { transform: translate(-50%, -50%) translateX(70px) rotate(20deg); }
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { filter: brightness(1.08); }
  .brand:hover .brand-mark::after {
    animation: brandmark-shine-hover 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1;
  }
}

.brand:focus-visible .brand-mark { filter: brightness(1.08); }
.brand:focus-visible .brand-mark::after {
  animation: brandmark-shine-hover 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1;
}
.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; }

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-links.is-open { max-height: 320px; }
  .nav-links a { padding: 16px 24px; border-bottom: 1px solid var(--border); }
  .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- 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;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 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 demo animation: input -> validate -> table -> analytics ---------- */
.hero-demo {
  --hero-cycle: 21s;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.hero-demo__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.hero-demo__chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.35;
}
.hero-demo__stage {
  position: relative;
  height: 250px;
}
.hero-scene {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  animation: hero-scene-cycle var(--hero-cycle) ease-in-out infinite;
  animation-delay: calc(var(--i) * (var(--hero-cycle) / 6));
}
.hero-demo__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}

@keyframes hero-scene-cycle {
  0%      { opacity: 0; transform: translateY(6px); }
  2.667%  { opacity: 1; transform: translateY(0); }
  14%     { opacity: 1; transform: translateY(0); }
  16.667% { opacity: 0; transform: translateY(-6px); }
  100%    { opacity: 0; }
}

/* Scene 1: input, typewriter effect */
.hero-demo__input {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: 0.85rem;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hero-demo__typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: hero-typing var(--hero-cycle) linear infinite;
}
.hero-demo__cursor {
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: var(--primary);
  animation: hero-cursor-blink 0.9s step-end infinite;
}
@keyframes hero-typing {
  0%, 3.333% { width: 0; animation-timing-function: steps(24, end); }
  10%, 100%  { width: 24ch; }
}
@keyframes hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Scene 2: validation checklist */
.hero-demo__checks { display: grid; gap: 8px; }
.hero-demo__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  animation: hero-item-in var(--hero-cycle) ease-out infinite;
  animation-delay: var(--delay);
}
.hero-demo__check svg {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  flex-shrink: 0;
}

/* Scene 3: table rows */
.hero-demo__table { display: grid; gap: 6px; font-size: 0.8rem; }
.hero-demo__row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.6fr;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
}
.hero-demo__row span:last-child { color: var(--primary); font-weight: 700; text-align: right; }
.hero-demo__row--head {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.hero-demo__row--head span:last-child { color: var(--text-muted); }
.hero-demo__table .hero-demo__row:not(.hero-demo__row--head) {
  background: var(--bg-alt);
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  animation: hero-item-in var(--hero-cycle) ease-out infinite;
  animation-delay: var(--delay);
}

@keyframes hero-item-in {
  0%, 2%      { opacity: 0; transform: translateY(8px); }
  6.667%, 100% { opacity: 1; transform: translateY(0); }
}

/* Shared "highlight" backdrop for the three analytics scenes (bar/pie/line) --
   a soft brand-gradient glow that breathes gently behind whichever chart is
   currently active, tying the charts back to the site's indigo/violet theme. */
.hero-demo__chart {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.hero-demo__chart--center { align-items: center; gap: 16px; }
.hero-demo__chart::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 20px;
  background: radial-gradient(60% 80% at 50% 100%, var(--ring), transparent 75%);
  opacity: 0;
  z-index: -1;
  animation: hero-chart-glow var(--hero-cycle) ease-in-out infinite;
  animation-delay: calc(var(--i) * (var(--hero-cycle) / 6));
}
@keyframes hero-chart-glow {
  0%, 3%      { opacity: 0; }
  8%, 12%     { opacity: 1; }
  16.667%, 100% { opacity: 0; }
}

/* Scene 4: analytics bars */
.hero-demo__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  height: 110px;
  width: 100%;
}
.hero-demo__bar {
  flex: 1;
  max-width: 56px;
  height: var(--h, 60%);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #6366f1, #4f46e5 55%, #7c3aed);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: hero-bar-grow var(--hero-cycle) cubic-bezier(0.16, 1, 0.3, 1) infinite;
  animation-delay: var(--delay);
}
@keyframes hero-bar-grow {
  0%, 2%       { transform: scaleY(0); }
  10.667%, 100% { transform: scaleY(1); }
}

/* Scene 5: pie chart */
.hero-demo__pie { width: 108px; height: 108px; flex-shrink: 0; }
.hero-demo__pie-track { fill: none; stroke: var(--border); stroke-width: 6; }
.hero-demo__pie-segments { transform: rotate(-90deg); transform-origin: 18px 18px; }
.hero-demo__pie-seg {
  fill: none;
  stroke-width: 6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(var(--start));
  transform-origin: 18px 18px;
  animation: hero-pie-reveal var(--hero-cycle) ease-out infinite;
  animation-delay: var(--delay);
}
.hero-demo__pie-seg:nth-of-type(1) { stroke: #4f46e5; }
.hero-demo__pie-seg:nth-of-type(2) { stroke: #8b5cf6; }
.hero-demo__pie-seg:nth-of-type(3) { stroke: #7c3aed; }
@keyframes hero-pie-reveal {
  0%, 1% { stroke-dashoffset: 1; }
  4%, 100% { stroke-dashoffset: calc(1 - var(--frac)); }
}

.hero-demo__legend {
  display: grid;
  gap: 6px;
  list-style: none;
  font-size: 0.78rem;
  color: var(--text);
}
.hero-demo__legend li { display: flex; align-items: center; gap: 8px; }
.hero-demo__legend li::before {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 3px;
  background: var(--sw);
}

/* Scene 6: line chart */
.hero-demo__linechart { width: 100%; height: 110px; overflow: visible; }
.hero-demo__line-area {
  fill: var(--primary);
  opacity: 0;
  animation: hero-area-fade var(--hero-cycle) ease-in infinite;
  animation-delay: var(--delay);
}
.hero-demo__line-path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-line-draw var(--hero-cycle) ease-in-out infinite;
  animation-delay: var(--delay);
}
.hero-demo__line-dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-dot-pop var(--hero-cycle) ease-out infinite;
  animation-delay: var(--delay);
}
@keyframes hero-area-fade {
  0%       { opacity: 0; }
  8.571%, 100% { opacity: 0.12; }
}
@keyframes hero-line-draw {
  0%           { stroke-dashoffset: 1; }
  8.571%, 100% { stroke-dashoffset: 0; }
}
@keyframes hero-dot-pop {
  0%, 1%  { opacity: 0; transform: scale(0); }
  6%, 100% { opacity: 1; transform: scale(1); }
}

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

@media (max-width: 480px) {
  .hero-demo__stage { height: 230px; }
  .hero-demo__pie { width: 88px; height: 88px; }
}

/* ---------- 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;
}
.card-image.image-qatool { background: linear-gradient(135deg, #4f46e5, #6366f1 45%, #7c3aed); }
.card-image.image-vplot { background: linear-gradient(135deg, #0ea5e9, #4f46e5 55%, #7c3aed); }
.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);
}

/* ==========================================================================
   .flow-diagram — "Pulse Relay": animated 3-node sequential flow diagram
   Pure CSS + inline SVG. No JS, no external assets, no canvas/WebGL.
   Self-contained: paints no background of its own, so the existing brand
   gradient on .image-qatool / .image-vplot above remains the visible
   backdrop. Reduced motion is already handled globally by the site's
   "*" rule -- no extra prefers-reduced-motion block needed here.
   ========================================================================== */

.flow-diagram {
  --flow-duration: 7.5s;   /* full loop: 2.5s dwell/travel per step.
                              6-8s reads calm/premium -- avoid going much
                              faster, it starts to feel like a spinner. */

  container-type: inline-size;  /* lets children scale via cqi with the
                                    card's actual rendered width */
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* static tonal vignette only -- keeps white icons/line legible against the
   lighter parts of either brand gradient. Adds depth, not motion. */
.flow-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 18%, rgba(255,255,255,.10), rgba(0,0,0,.12) 100%);
  pointer-events: none;
}

/* line, pulse-layer and nodes are stacked in the SAME grid cell so they
   share one identical, padding-adjusted coordinate box -- this is what
   keeps the line, the traveling dot, and the node centers in perfect
   alignment at any card width, with no JS measuring required. */
.flow-diagram__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  padding: 8cqi 4cqi 6cqi;
  box-sizing: border-box;
}
.flow-diagram__line,
.flow-diagram__pulse-layer,
.flow-diagram__nodes {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------
   connecting line: dim base track + two draw-in "fill" overlays
   --------------------------------------------------------------------- */
.flow-diagram__line { display: block; overflow: visible; }

.flow-diagram__line-base {
  stroke: rgba(255,255,255,.28);
  stroke-width: 1.6px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.flow-diagram__line-fill {
  stroke: #fff;
  stroke-width: 2px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.6));
}
.flow-diagram__line-fill--1 { animation: flow-seg1-fill var(--flow-duration) linear infinite; }
.flow-diagram__line-fill--2 { animation: flow-seg2-fill var(--flow-duration) linear infinite; }

/* ---------------------------------------------------------------------
   traveling pulse -- the single moving focal point
   --------------------------------------------------------------------- */
.flow-diagram__pulse-layer { position: relative; }

.flow-diagram__pulse {
  position: absolute;
  top: 50%;
  left: 16.67%;
  width: clamp(7px, 3.6cqi, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 75%);
  box-shadow: 0 0 10px 2px rgba(255,255,255,.85), 0 0 22px 6px rgba(255,255,255,.32);
  transform: translate(-50%, -50%);
  animation: flow-pulse-travel var(--flow-duration) ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   nodes
   --------------------------------------------------------------------- */
.flow-diagram__nodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

.flow-diagram__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 2cqi, 8px);
  --flow-delay: calc(var(--i) * var(--flow-duration) / 3);
}

.flow-diagram__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 14cqi, 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.36);
  animation: flow-node-glow var(--flow-duration) ease-in-out infinite;
  animation-delay: var(--flow-delay);
}
.flow-diagram__badge svg {
  width: 55%;
  height: 55%;
  stroke: currentColor;
  fill: none;
  display: block;
}

/* one-shot expanding "signal received" ring, timed with each node's peak */
.flow-diagram__badge::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  opacity: 0;
  transform: scale(.7);
  animation: flow-node-ping var(--flow-duration) ease-out infinite;
  animation-delay: var(--flow-delay);
}

.flow-diagram__label {
  font-size: clamp(9px, 3.2cqi, 12px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  animation: flow-label-emphasis var(--flow-duration) ease-in-out infinite;
  animation-delay: var(--flow-delay);
}

@container (max-width: 240px) {
  .flow-diagram__label { display: none; }
}

@keyframes flow-pulse-travel {
  0%   { left: 16.67%; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  3%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  9%   { left: 16.67%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  33%  { left: 50%;    opacity: 1; transform: translate(-50%, -50%) scale(1); }
  36%  { transform: translate(-50%, -50%) scale(1.25); }
  40%  { left: 50%;    opacity: 1; transform: translate(-50%, -50%) scale(1); }
  66%  { left: 83.33%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  69%  { transform: translate(-50%, -50%) scale(1.25); }
  88%  { left: 83.33%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  96%  { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  100% { left: 16.67%; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
}

@keyframes flow-seg1-fill {
  0%, 9%   { stroke-dashoffset: 1; }
  33%, 94% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 1; }
}

@keyframes flow-seg2-fill {
  0%, 40%  { stroke-dashoffset: 1; }
  66%, 94% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 1; }
}

@keyframes flow-node-glow {
  0%, 100% {
    transform: scale(1);
    border-color: rgba(255,255,255,.36);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.78);
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
  4% {
    transform: scale(1.12);
    border-color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.22);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(255,255,255,.10), 0 0 20px 2px rgba(255,255,255,.5);
  }
  14% {
    transform: scale(1);
    border-color: rgba(255,255,255,.36);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.78);
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
}

@keyframes flow-node-ping {
  0%, 100% { opacity: 0;   transform: scale(.7); }
  4%       { opacity: .5;  transform: scale(.7); }
  30%      { opacity: 0;   transform: scale(1.85); }
}

@keyframes flow-label-emphasis {
  0%, 100% { opacity: .82; }
  4%       { opacity: 1; }
  14%      { opacity: .82; }
}

.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--qatool .stat-chart__bar-fill { background: linear-gradient(90deg, #6366f1, #4f46e5 60%, #7c3aed); }
.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;
  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; }
.chat-panel__brand .brand-mark { background: rgba(255, 255, 255, 0.18); }
.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;
  }
}