/* =======================================================
   Verilog FPGA Agent System — Unified Styles
   Animation Demo + Full Documentation
   ======================================================= */

:root {
  --bg: #f5f7fb;
  --bg2: #edf0f7;
  --card: #ffffff;
  --card2: #f0f2f8;
  --accent: #6c5ce7;
  --accent2: #00b894;
  --accent3: #e84393;
  --accent4: #f39c12;
  --accent5: #00cec9;
  --text: #2d3436;
  --text-dim: #636e72;
  --border: #dfe6e9;
  --border2: #b2bec3;
  --radius: 14px;
  --glow: rgba(108,92,231,.2);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', 'Microsoft YaHei', -apple-system, sans-serif;
  background:
    /* Chip circuit grid — horizontal traces */
    linear-gradient(rgba(108,92,231,.045) 1px, transparent 1px),
    /* Chip circuit grid — vertical traces */
    linear-gradient(90deg, rgba(108,92,231,.045) 1px, transparent 1px),
    /* Chip pad dots at intersections */
    radial-gradient(circle 1.2px at center, rgba(108,92,231,.09) 0%, transparent 100%),
    /* Secondary finer grid (inner routing) */
    linear-gradient(rgba(0,184,148,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,148,.025) 1px, transparent 1px),
    var(--bg);
  background-size: 60px 60px, 60px 60px, 60px 60px, 20px 20px, 20px 20px, auto;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===================================================
   HERO
   =================================================== */
.hero {
  position: relative;
  text-align: center;
  padding: 80px 40px 60px;
  overflow: hidden;
  /* Vanta.js will set the background; keep a fallback */
  background: linear-gradient(135deg, #f5f7fb 0%, #e8ecf4 25%, #edf2fb 50%, #f5f7fb 100%);
}
.hero-bg {
  display: none; /* Replaced by Vanta.js */
}
/* Chip circuit pattern — hidden when Vanta.js active */
.hero::before {
  display: none;
}
.hero::after {
  display: none;
}
.hero-title {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6c5ce7, #00b894, #e84393, #f39c12);
  background-size: 300% 300%;
  animation: gradientText 6s ease infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}
.badge {
  display: inline-block;
  padding: 14px 40px;
  border-radius: 28px;
  background: rgba(108,92,231,.08);
  border: 1px solid rgba(108,92,231,.2);
  color: var(--accent);
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
}

/* ===================================================
   STATS BAR
   =================================================== */
.stats {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 30px 20px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-item { text-align: center; }
.stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  background-size: 200% 200%;
  animation: gradientText 4s ease infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-size: .82rem;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ===================================================
   SECTIONS (shared)
   =================================================== */
.section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 60px 30px;
}
.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  background-size: 200% 200%;
  animation: gradientText 5s ease infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-subtitle {
  text-align: center;
  color: var(--text-dim);
  font-size: .95rem;
  margin-bottom: 30px;
}

/* Scroll-in animation */
.animate-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   DEMO CONTAINER (Animation section)
   =================================================== */
.demo-container {
  display: flex;
  height: 680px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}

/* Architecture Canvas (left) */
.arch-canvas {
  flex: 1;
  position: relative;
  min-width: 0;
  background:
    radial-gradient(ellipse 600px 600px at center, rgba(108,92,231,.04) 0%, transparent 70%),
    var(--bg);
  overflow: hidden;
}
.arch-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Main circuit grid */
    linear-gradient(rgba(108,92,231,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,92,231,.06) 1px, transparent 1px),
    /* PCB via holes at intersections */
    radial-gradient(circle 2px at center, rgba(108,92,231,.08) 0%, transparent 100%);
  background-size: 50px 50px, 50px 50px, 50px 50px;
  mask-image: radial-gradient(ellipse 500px 500px at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 500px 500px at center, black 30%, transparent 70%);
}

/* SVG connection lines */
.conn-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.conn-line {
  stroke: var(--border2);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 6 4;
  opacity: .4;
  transition: stroke .5s, opacity .5s, stroke-width .5s;
}
.conn-line.active {
  stroke: var(--line-color, var(--accent));
  stroke-width: 2.5;
  stroke-dasharray: none;
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--line-color, var(--accent)));
}
.conn-line.glow {
  animation: lineGlow 1.5s ease infinite;
}

/* ===================================================
   ANIM NODES (radial layout)
   =================================================== */
.anim-node {
  position: absolute;
  z-index: 10;
  cursor: grab;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .3s;
}
.anim-node:hover { transform: scale(1.08) !important; }
.anim-node:active { cursor: grabbing; }

.anim-node-inner {
  background: var(--card);
  border: 2px solid var(--border2);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  min-width: 100px;
  position: relative;
  transition: border-color .4s, box-shadow .4s, background .4s;
}
.anim-node-icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
  transition: filter .3s, transform .3s;
}
.anim-node-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .3px;
}
.anim-node-sub {
  font-size: .65rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Status dot */
.status-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--card);
  z-index: 11;
  transition: background .3s, box-shadow .3s;
}
.status-dot.idle { background: #4a4e69; }
.status-dot.dispatching { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: dotPulse 1s infinite; }
.status-dot.working { background: var(--accent5); box-shadow: 0 0 8px var(--accent5); animation: dotPulse .8s infinite; }
.status-dot.done { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.status-dot.waiting { background: var(--accent4); box-shadow: 0 0 8px var(--accent4); animation: dotPulse 1.2s infinite; }

/* Architect node special */
.architect-node .anim-node-inner {
  background: linear-gradient(135deg, rgba(108,92,231,.08), rgba(0,184,148,.06));
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(108,92,231,.12);
  padding: 22px 28px;
}
.architect-node .anim-node-label { color: var(--accent); font-size: .85rem; }
.architect-node .anim-node-sub { color: var(--accent2); }

/* Pulse ring */
.pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: pulseRing 3s ease-out infinite;
  pointer-events: none;
}
.pulse-ring.delay { animation-delay: 1.5s; }

/* Child node states */
.child-node .anim-node-inner {
  opacity: .7;
  transform: scale(.95);
  transition: opacity .5s, transform .5s, border-color .4s, box-shadow .4s, background .4s;
}
.child-node.active .anim-node-inner {
  opacity: 1;
  transform: scale(1);
  border-color: var(--node-color, var(--accent));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--node-color, var(--accent)) 20%, transparent);
  background: color-mix(in srgb, var(--node-color, var(--accent)) 8%, var(--card));
}
.child-node.active .anim-node-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px var(--node-color, var(--accent)));
}
.child-node.completed .anim-node-inner {
  opacity: 1;
  transform: scale(1);
  border-color: #2ecc71;
  box-shadow: 0 4px 12px rgba(46,204,113,.15);
}

/* Particle layer */
.particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.fly-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  filter: blur(0.5px);
}
.fly-particle::after {
  content: '';
  position: absolute;
  width: 20px; height: 3px;
  border-radius: 2px;
  top: 50%; left: -16px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .6;
}
.sparkle-burst {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  animation: sparkle .6s ease-out forwards;
}

/* Gate banner (auto-dismiss inline) */
.gate-banner {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: rgba(22,26,46,.92);
  border: 1px solid var(--accent4);
  border-radius: 30px;
  backdrop-filter: blur(8px);
  animation: gateSlideIn .4s ease;
  box-shadow: 0 4px 20px rgba(243,156,18,.1);
}
.gate-icon-inline { font-size: 1.3rem; }
.gate-text { color: var(--accent4); font-size: .85rem; font-weight: 600; }
.gate-pass-badge {
  color: #2ecc71;
  font-size: .8rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .4s;
}
.gate-banner.passed .gate-pass-badge { opacity: 1; }
.gate-banner.passed .gate-text { color: #2ecc71; }

/* Agent Picker (Path E quick dispatch) */
.agent-picker {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(108,92,231,.15);
  animation: fadeIn .3s ease;
  min-width: 340px;
}
.picker-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s;
  color: var(--text);
  font-size: .75rem;
}
.picker-item:hover {
  border-color: var(--pc);
  background: color-mix(in srgb, var(--pc) 10%, var(--card));
  transform: translateY(-3px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pc) 25%, transparent);
}
.picker-icon { font-size: 1.5rem; }
.picker-name { font-weight: 600; }
.picker-cancel {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .8rem;
  transition: all .2s;
}
.picker-cancel:hover {
  border-color: var(--accent3);
  color: var(--accent3);
}

/* ===================================================
   SIDE PANEL (right panel in demo)
   =================================================== */
.side-panel {
  width: 360px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.panel-section {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-size: .9rem;
  color: var(--text);
  margin-bottom: 14px;
  font-weight: 600;
}

/* Workflow buttons */
.workflow-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: all .3s ease;
  font-size: .85rem;
}
.wf-btn:hover {
  border-color: var(--accent);
  background: var(--card2);
  transform: translateX(4px);
}
.wf-btn.active {
  border-color: var(--accent2);
  background: rgba(0,184,148,.06);
  box-shadow: 0 2px 12px rgba(0,184,148,.1);
}
.wf-btn.running {
  pointer-events: none;
  opacity: .5;
}
.wf-letter {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.wf-btn[data-path="A"] .wf-letter { background: rgba(85,239,196,.15); color: #55efc4; }
.wf-btn[data-path="B"] .wf-letter { background: rgba(225,112,85,.15); color: #e17055; }
.wf-btn[data-path="C"] .wf-letter { background: rgba(116,185,255,.15); color: #74b9ff; }
.wf-btn[data-path="D"] .wf-letter { background: rgba(253,203,110,.15); color: #fdcb6e; }
.wf-btn[data-path="E"] .wf-letter { background: rgba(162,155,254,.15); color: #a29bfe; }
.wf-name { flex: 1; text-align: left; }
.wf-stages {
  font-size: .72rem;
  color: var(--text-dim);
  padding: 2px 8px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}

/* Stage Timeline */
.stage-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.stage-placeholder, .plan-placeholder {
  color: var(--text-dim);
  font-size: .82rem;
  font-style: italic;
  padding: 10px;
  text-align: center;
}
.stage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .8rem;
  background: var(--card);
  border: 1px solid var(--border);
  transition: all .4s ease;
  opacity: 0;
  transform: translateX(-20px);
}
.stage-item.visible { opacity: 1; transform: translateX(0); }
.stage-item.current {
  border-color: var(--accent);
  background: rgba(108,92,231,.06);
  box-shadow: 0 2px 8px rgba(108,92,231,.1);
}
.stage-item.done {
  border-color: #2ecc71;
  background: rgba(46,204,113,.06);
}
.stage-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: var(--border2);
  color: var(--text);
  flex-shrink: 0;
  transition: background .3s, color .3s;
}
.stage-item.current .stage-num { background: var(--accent); color: #fff; }
.stage-item.done .stage-num { background: #2ecc71; color: #fff; }
.stage-text { flex: 1; color: var(--text-dim); }
.stage-item.current .stage-text { color: var(--text); }
.stage-check { font-size: .85rem; opacity: 0; transition: opacity .3s; }
.stage-item.done .stage-check { opacity: 1; }

/* Agent Status List */
.agent-status-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: .78rem;
  transition: background .3s;
}
.agent-status-item.highlight { background: rgba(108,92,231,.08); }
.agent-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agent-status-dot.idle { background: #4a4e69; }
.agent-status-dot.dispatching { background: var(--accent); animation: dotPulse 1s infinite; }
.agent-status-dot.working { background: var(--accent5); animation: dotPulse .8s infinite; }
.agent-status-dot.done { background: #2ecc71; }
.agent-status-dot.waiting { background: var(--accent4); animation: dotPulse 1.2s infinite; }
.agent-status-name { font-weight: 600; color: var(--text); min-width: 90px; }
.agent-status-text { color: var(--text-dim); flex: 1; text-align: right; }

/* Plan Viewer */
.plan-viewer {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: .72rem;
  line-height: 1.6;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text-dim);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  white-space: pre-wrap;
  word-break: break-all;
}
.plan-line { opacity: 0; animation: planLineIn .4s ease forwards; }
.plan-line.heading { color: var(--accent2); font-weight: 600; }
.plan-line.checkbox { color: var(--text); }
.plan-line.checkbox.checked { color: #2ecc71; }
.plan-line.comment { color: var(--text-dim); font-style: italic; }

/* Demo Legend */
.demo-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 20px;
  font-size: .78rem;
  color: var(--text-dim);
  margin-top: 16px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.legend-sep { color: var(--border2); }

/* ===================================================
   STATIC ARCHITECTURE DIAGRAM
   =================================================== */
.arch-diagram {
  overflow-x: auto;
  text-align: center;
  padding: 20px 0;
}
.arch-svg {
  max-width: 100%;
  height: auto;
}

/* ===================================================
   WORKFLOW OVERVIEW (5 paths)
   =================================================== */
.workflow-overview {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
}
.workflow-overview h3 {
  font-size: 1.1rem;
  margin-bottom: 24px;
  color: var(--text);
}

.flow-path {
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.flow-path:nth-child(3) { border-left-color: #e17055; }
.flow-path:nth-child(4) { border-left-color: #74b9ff; }
.flow-path:nth-child(5) { border-left-color: #fdcb6e; }
.flow-path:nth-child(6) { border-left-color: #a29bfe; }

.flow-path h4 {
  font-size: .95rem;
  margin-bottom: 12px;
  color: var(--text);
}
.flow-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.flow-node {
  padding: 6px 14px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--text);
  transition: all .3s;
}
.flow-node:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.flow-node.fp-active {
  border-color: var(--accent2);
  background: rgba(0,184,148,.06);
  color: var(--accent2);
}
.flow-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
}
.flow-trigger {
  font-size: .78rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ===================================================
   AGENT CARDS (9 cards grid)
   =================================================== */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.agent-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.agent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

/* Agent card color variants */
.ac-parent  { border-left: 4px solid #6c5ce7; }
.ac-search  { border-left: 4px solid #fdcb6e; }
.ac-design  { border-left: 4px solid #fd79a8; }
.ac-python  { border-left: 4px solid #55efc4; }
.ac-reverse { border-left: 4px solid #e17055; }
.ac-rtl     { border-left: 4px solid #74b9ff; }
.ac-cocotb  { border-left: 4px solid #ff7675; }
.ac-modelsim{ border-left: 4px solid #a29bfe; }
.ac-drawio  { border-left: 4px solid #fab1a0; }

.ac-parent:hover  { border-color: #6c5ce7; }
.ac-search:hover  { border-color: #fdcb6e; }
.ac-design:hover  { border-color: #fd79a8; }
.ac-python:hover  { border-color: #55efc4; }
.ac-reverse:hover { border-color: #e17055; }
.ac-rtl:hover     { border-color: #74b9ff; }
.ac-cocotb:hover  { border-color: #ff7675; }
.ac-modelsim:hover{ border-color: #a29bfe; }
.ac-drawio:hover  { border-color: #fab1a0; }

.agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.agent-icon { font-size: 2rem; }
.agent-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.agent-desc {
  font-size: .85rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 14px;
}
.agent-desc code {
  background: rgba(108,92,231,.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .8rem;
  color: var(--accent);
}
.agent-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.meta-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: .72rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  color: var(--text-dim);
}
.mt-model { color: var(--accent); border-color: rgba(108,92,231,.3); }
.mt-invoke { color: var(--accent2); border-color: rgba(0,184,148,.3); }

.wf-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.wf-steps {
  list-style: none;
  margin-bottom: 16px;
}
.wf-steps li {
  font-size: .8rem;
  color: var(--text-dim);
  padding: 4px 0 4px 20px;
  position: relative;
}
.wf-steps li::before {
  content: '\203A';
  position: absolute;
  left: 4px;
  color: var(--accent);
}
.wf-steps li code {
  background: rgba(108,92,231,.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .75rem;
  color: var(--accent);
}

.tools-section { margin-bottom: 14px; }
.tools-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-tag {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: .68rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.tt-exec  { color: #ff7675; border-color: rgba(255,118,117,.2); }
.tt-read  { color: #74b9ff; border-color: rgba(116,185,255,.2); }
.tt-edit  { color: #55efc4; border-color: rgba(85,239,196,.2); }
.tt-search{ color: #fdcb6e; border-color: rgba(253,203,110,.2); }
.tt-web   { color: #fd79a8; border-color: rgba(253,121,168,.2); }
.tt-drawio{ color: #fab1a0; border-color: rgba(250,177,160,.2); }
.tt-rag   { color: #a29bfe; border-color: rgba(162,155,254,.2); }
.tt-github{ color: #e0e0e0; border-color: rgba(224,224,224,.15); }

.deliverables { }
.deliv-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.deliv-item {
  font-size: .78rem;
  color: var(--text-dim);
  padding: 3px 0 3px 16px;
  position: relative;
}
.deliv-item::before {
  content: '📦';
  position: absolute;
  left: 0;
  font-size: .65rem;
}
.deliv-item code {
  background: rgba(108,92,231,.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .72rem;
  color: var(--accent);
}

/* ===================================================
   RULES GRID
   =================================================== */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.rule-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.rule-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(108,92,231,.08);
}
.rule-card h4 {
  font-size: .95rem;
  margin-bottom: 10px;
  color: var(--text);
}
.rule-card p {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.6;
}
.rule-card p code {
  background: rgba(108,92,231,.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .75rem;
  color: var(--accent);
}

/* ===================================================
   SCROLL PROGRESS + BACK TO TOP
   =================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  z-index: 1000;
  transition: width .1s;
  width: 0;
}
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--accent);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s, box-shadow .3s;
  z-index: 999;
}
.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover {
  box-shadow: 0 4px 16px rgba(108,92,231,.3);
  border-color: var(--accent);
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
  text-align: center;
  padding: 30px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  font-size: .82rem;
  color: var(--text-dim);
}
.footer code {
  background: rgba(108,92,231,.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .75rem;
  color: var(--accent);
}

/* ===================================================
   KEYFRAMES
   =================================================== */
@keyframes pulseRing {
  0%   { opacity: .6; width: 100px; height: 100px; }
  100% { opacity: 0;  width: 220px; height: 220px; }
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.3); }
}
@keyframes lineGlow {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; filter: drop-shadow(0 0 8px var(--line-color, var(--accent))); }
}
@keyframes planLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gateSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes nodeActivate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
@keyframes sparkle {
  0%   { opacity: 1; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1) rotate(180deg); }
  100% { opacity: 0; transform: scale(.5) rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroGradientShift {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.1) rotate(3deg); opacity: .8; }
}
@keyframes gradientText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 1000px) {
  .demo-container { flex-direction: column; height: auto; }
  .arch-canvas { min-height: 500px; }
  .side-panel { width: 100%; max-height: 500px; }
  .agent-grid { grid-template-columns: 1fr; }
  .stats { gap: 24px; flex-wrap: wrap; }
  .qq-sidebar { display: none; }
}
@media (max-width: 600px) {
  .hero { padding: 40px 20px 30px; }
  .hero-title { font-size: 1.8rem; }
  .stats { gap: 16px; }
  .stat-num { font-size: 1.5rem; }
  .section { padding: 30px 16px; }
  .section-title { font-size: 1.4rem; }
  .arch-canvas { min-height: 400px; }
  .demo-legend { flex-wrap: wrap; gap: 10px; }
  .rules-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   TSPARTICLES BACKGROUND
   =================================================== */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#tsparticles canvas {
  pointer-events: auto;
}

/* ===================================================
   VANILLA-TILT GLARE COMPATIBILITY
   =================================================== */
.agent-card {
  transform-style: preserve-3d;
}
.agent-card .js-tilt-glare {
  border-radius: 16px;
}

/* ===================================================
   LOTTIE HERO ANIMATION
   =================================================== */
#lottie-hero {
  position: absolute;
  top: 12px;
  right: 20px;
  width: 80px;
  height: 80px;
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}

/* ===================================================
   GSAP INITIAL STATES (prevent flash)
   =================================================== */
.hero-title,
.hero-subtitle,
.badge {
  will-change: transform, opacity;
}

/* ===================================================
   QQ GROUP SECTION
   =================================================== */
.qq-section {
  padding: 0;
}
.qq-sidebar {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  animation: fadeInRight 0.8s ease 1s both;
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateY(-50%) translateX(40px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.qq-card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(108, 92, 231, 0.15);
  border: 1.5px solid rgba(108, 92, 231, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 240px;
}
.qq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(108, 92, 231, 0.2);
}
.qq-info {
  flex: 1;
}
.qq-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
  text-align: center;
}
.qq-group-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
  text-align: center;
}
.qq-group-id {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 4px;
  text-align: center;
}
.qq-number {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 1px;
}
.qq-desc {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.qq-qr {
  flex-shrink: 0;
}
.qq-qr-img {
  width: 210px;
  height: 210px;
  border-radius: 12px;
  object-fit: contain;
  border: 2px solid rgba(108, 92, 231, 0.1);
}