/* StreamLogic CLARITY shared styles */
:root {
  --surface: #0e1322;
  --surface-container: #1a1f2f;
  --surface-container-low: #161b2b;
  --surface-container-high: #25293a;
  --surface-variant: #2f3445;
  --on-surface: #dee1f7;
  --on-surface-variant: #bac9cc;
  --primary: #c3f5ff;
  --primary-container: #00e5ff;
  --on-primary: #00363d;
  --secondary: #d0bcff;
  --secondary-container: #571bc1;
  --tertiary: #acfaff;
  --outline: #849396;
  --outline-variant: #3b494c;
  --neon-green: #00ff9c;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }
a { text-underline-offset: 4px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--primary-container);
  outline-offset: 4px;
}
img { max-width: 100%; height: auto; }

.glass-panel {
  background: rgba(47, 52, 69, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 73, 76, 0.2);
}
.neon-glow { box-shadow: 0 0 15px rgba(0, 229, 255, 0.15); }
.neon-stroke { border: 1px solid var(--primary); box-shadow: 0 0 8px var(--primary-container); }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.text-gradient-tech {
  background: linear-gradient(135deg, var(--neon-green) 0%, var(--primary-container) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.neon-border-blue { border-top: 4px solid #3b82f6; box-shadow: 0 -4px 15px -5px rgba(59,130,246,0.5); }
.neon-border-purple { border-top: 4px solid #a855f7; box-shadow: 0 -4px 15px -5px rgba(168,85,247,0.5); }
.neon-border-pink { border-top: 4px solid #ec4899; box-shadow: 0 -4px 15px -5px rgba(236,72,153,0.5); }
.neon-border-green { border-top: 4px solid var(--neon-green); box-shadow: 0 -4px 15px -5px rgba(0,255,156,0.5); }

/* Active navigation handled by js/site.js */
.site-nav-link { color: #94a3b8; transition: color .2s ease, border-color .2s ease; }
.site-nav-link:hover { color: #a5f3fc; }
.site-nav-link[aria-current="page"] {
  color: #22d3ee;
  border-bottom: 2px solid #22d3ee;
  padding-bottom: .25rem;
}

.legal-content { line-height: 1.75; color: var(--on-surface); }
.legal-content h1,
.legal-content h2,
.legal-content h3 { font-family: "Space Grotesk", sans-serif; color: #fff; font-weight: 700; }
.legal-content h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1.5rem; }
.legal-content h2 {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  color: var(--primary);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0, 229, 255, .15);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.15rem; margin-top: 1.75rem; margin-bottom: .5rem; }
.legal-content p { color: var(--on-surface-variant); line-height: 1.8; margin-bottom: 1rem; }
.legal-content ul, .legal-content ol { margin: 1rem 0 1.5rem 1.25rem; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { color: var(--on-surface-variant); margin-bottom: .6rem; padding-left: .25rem; }
.legal-content strong { color: #fff; font-weight: 700; }
.legal-content a { color: var(--primary); text-decoration: underline; }
.legal-content a:hover { color: var(--primary-container); }

.feature-list { list-style: disc; margin-left: 1.25rem; }
.feature-list li { margin-bottom: .5rem; }

/* Terminal animation */
.animate-typing-1 { animation: typing 1.2s steps(40, end) forwards; }
.animate-typing-2 { animation: opacity-delay 1.5s forwards, typing 1.2s steps(40, end) 1.5s forwards; }
.animate-fade-in-1 { animation: fade-up .5s ease-out 2.8s forwards; }
.animate-typing-3 { animation: opacity-delay 3.6s forwards, typing 1.2s steps(40, end) 3.6s forwards; border-right-color: transparent !important; }
.animate-fade-in-2 { animation: fade-up .5s ease-out 4.9s forwards; }
.animate-fade-in-3 { animation: fade-up .8s cubic-bezier(.16,1,.3,1) 5.8s forwards; }
.animate-cursor-blink { animation: blink 1s step-end infinite; }
@keyframes typing { from { width: 0; opacity: 1; border-right-color: var(--primary-container); } to { width: 100%; opacity: 1; border-right-color: transparent; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes opacity-delay { to { opacity: 1; } }
@keyframes blink { 0%,100% { border-right-color: transparent; } 50% { border-right-color: var(--primary-container); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}