[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.hero-canvas { width: 100%; height: 360px; display: block; }

.stat-counter { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------------
   "How xSERVA Works" flow diagram (index.php)
--------------------------------------------------------------------- */
.flow-diagram-wrap { margin-top: var(--space-4); }
.flow-diagram { width: 100%; max-width: 900px; height: auto; display: block; margin: 0 auto; overflow: visible; }

.flow-line {
  fill: none;
  stroke: var(--glass-border);
  stroke-width: 2;
}

.flow-node circle {
  fill: var(--glass);
  stroke: var(--glass-border);
  stroke-width: 1.5;
}
.flow-node.flow-hub circle {
  fill: var(--glass);
  stroke: var(--accent-cyan);
  stroke-width: 2;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-cyan) 35%, transparent));
}
.flow-node-icon { color: var(--accent-cyan); width: 32px; height: 32px; }
.flow-node-icon svg { width: 100%; height: 100%; display: block; }

.flow-label {
  text-anchor: middle;
  font-family: var(--font-sans);
  font-size: 14px;
  fill: var(--text-secondary);
}
.flow-hub-label {
  fill: var(--text-primary);
  font-weight: 700;
  font-size: 15px;
}

.flow-dot {
  fill: var(--accent-cyan);
  filter: drop-shadow(0 0 4px var(--accent-cyan));
  offset-rotate: 0deg;
  animation: flow-dot-move 3.5s linear infinite;
}
.flow-dot-in1 { offset-path: path('M90,70 C270,70 300,150 450,205'); }
.flow-dot-in2 { offset-path: path('M90,160 C250,160 320,180 450,205'); }
.flow-dot-in3 { offset-path: path('M90,250 C250,250 320,230 450,205'); }
.flow-dot-in4 { offset-path: path('M90,340 C270,340 300,260 450,205'); }
.flow-dot-out1 { offset-path: path('M450,205 C600,205 650,120 810,100'); }
.flow-dot-out2 { offset-path: path('M450,205 C600,205 650,205 810,205'); }
.flow-dot-out3 { offset-path: path('M450,205 C600,205 650,290 810,310'); }

@keyframes flow-dot-move {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-dots { display: none; }
  .flow-dot { animation: none; }
}

/* ---------------------------------------------------------------------
   features.php mini-diagrams: Rule Engine + Real-Time Monitoring cards
--------------------------------------------------------------------- */
.mini-diagram { width: 100%; max-width: 200px; height: auto; max-height: 60px; display: block; margin-top: var(--space-2); overflow: visible; }

/* Override generic .feature-card svg 32px sizing for mini-diagrams (specificity: 0,2,2 vs 0,2,1) */
.feature-card svg.mini-diagram {
  width: 100%;
  height: auto;
  max-width: 200px;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Rule Engine: trigger -> condition -> action pulse sequence */
.rule-flow-line { stroke: var(--glass-border); stroke-width: 2; }
.rule-flow-node circle { fill: var(--glass); stroke: var(--glass-border); stroke-width: 1.5; }
.rule-flow-node text { fill: var(--text-secondary); font-family: var(--font-sans); font-size: 9px; text-anchor: middle; }

.rule-flow-node.pulse-trigger circle { animation: pulse-sequence 2.4s ease-in-out infinite; }
.rule-flow-node.pulse-condition circle { animation: pulse-sequence 2.4s ease-in-out infinite; animation-delay: 0.6s; }
.rule-flow-node.pulse-action circle { animation: pulse-sequence 2.4s ease-in-out infinite; animation-delay: 1.2s; }

@keyframes pulse-sequence {
  0%, 75%, 100% { stroke: var(--glass-border); filter: none; }
  8% { stroke: var(--accent-cyan); filter: drop-shadow(0 0 6px var(--accent-cyan)); }
  25% { stroke: var(--glass-border); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rule-flow-node circle { animation: none !important; }
}

/* Real-Time Monitoring: live trend line draw + pulsing "live" dot */
.chart-mini-line {
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: chart-line-draw 2.4s ease-in-out infinite;
}

@keyframes chart-line-draw {
  0% { stroke-dashoffset: 220; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

.chart-live-dot {
  fill: var(--accent-cyan);
  animation: chart-live-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes chart-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .chart-mini-line { animation: none; stroke-dashoffset: 0; }
  .chart-live-dot { animation: none; opacity: 1; transform: none; }
}