:root{
  --bg:#0a0a0a;
  --blue:#3b82f6;
  --purple:#8b5cf6;
  --cyan:#06b6d4;
  --green:#10b981;
}

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:rgba(255,255,255,.70); }

/* subtle grid */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  z-index:0;
}

.layer{ position:relative; z-index:1; }

/* helpers */
.glass{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.06);
}

.card{
  background:linear-gradient(135deg, rgba(26,26,26,.78) 0%, rgba(42,42,42,.48) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 28px rgba(0,0,0,.35);
}
.card:hover{
  border-color:rgba(255,255,255,.14);
}

.btn-primary{
  background:var(--blue);
  color:#fff;
}
.btn-primary:hover{ background:#2563eb; }

.btn-secondary{
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
}
.btn-secondary:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.22);
}

/* Animated flow line for stages */
@keyframes flowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes flowMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes dotFlow {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.flow-line {
  position: relative;
  overflow: hidden;
}

.flow-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #3b82f6 0%,
    #8b5cf6 33%,
    #06b6d4 66%,
    #10b981 100%
  );
  background-size: 200% 100%;
  animation: flowMove 3s linear infinite;
}

.flow-line::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,255,255,0.8), 0 0 24px rgba(59,130,246,0.6);
  animation: dotFlow 2.5s ease-in-out infinite;
}

.pulse-arrow {
  animation: flowPulse 2s ease-in-out infinite;
}

/* Animated arrows between stages */
@keyframes arrowPulse {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@keyframes arrowGlow {
  0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
  50% { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor); }
}

.animated-arrow {
  animation: arrowPulse 1.5s ease-in-out infinite, arrowGlow 1.5s ease-in-out infinite;
}

.arrow-blue { color: #3b82f6; }
.arrow-purple { color: #8b5cf6; }
.arrow-cyan { color: #06b6d4; }

/* Outcome section animations */
@keyframes pathDraw {
  0% { stroke-dashoffset: 500; }
  100% { stroke-dashoffset: 0; }
}

@keyframes nodeAppear {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.1; }
}

@keyframes checkDraw {
  0% { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}

@keyframes packetMove {
  0% { cx: 60; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 460; opacity: 0; }
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.outcome-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: pathDraw 2s ease-out forwards;
}

.outcome-node {
  opacity: 0;
  animation: nodeAppear 0.5s ease-out forwards;
}

.node-1 { animation-delay: 0.3s; }
.node-2 { animation-delay: 0.6s; }
.node-3 { animation-delay: 0.9s; }
.node-4 { animation-delay: 1.2s; }

.pulse-ring {
  transform-origin: 60px 70px;
  animation: pulseRing 2s ease-in-out infinite;
}

.outcome-check {
  opacity: 0;
  animation: nodeAppear 0.5s ease-out 1.5s forwards;
}

.check-mark {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw 0.5s ease-out 1.8s forwards;
}

.data-packet {
  opacity: 0;
}

.packet-1 {
  animation: packetMove 3s ease-in-out 2.5s infinite;
}

.packet-2 {
  animation: packetMove 3s ease-in-out 3.5s infinite;
}

.packet-3 {
  animation: packetMove 3s ease-in-out 4.5s infinite;
}

.outcome-badge-icon {
  animation: badgePulse 2s ease-in-out infinite;
}

/* Hero graphic animations */
@keyframes heroRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes heroPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes heroPulseRing {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.1; }
}

@keyframes heroDotPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3); filter: brightness(1.3); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .flow-line::before, .flow-line::after { animation: none; }
  .pulse-arrow { animation: none; }
  .hero-graphic * { animation: none !important; }
}

/* Modal visibility via aria-hidden */
#contactModal[aria-hidden="true"]{ display:none; }
#contactModal[aria-hidden="false"]{ display:flex; }