@import url('base/reset.css');
@import url('base/typography.css');
@import url('layout/header.css');
@import url('layout/footer.css');
@import url('layout/sections.css');
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/dashboard.css');
@import url('components/ecosystem.css');
@import url('components/dataflow.css');

:root {
  --bg-deep: #04080f;
  --bg-card: rgba(8,20,38,0.7);
  --cyan: #00d4ff;
  --cyan-dim: rgba(0,212,255,0.15);
  --cyan-glow: rgba(0,212,255,0.4);
  --blue: #0066ff;
  --blue-bright: #0088ff;
  --silver: #c8d6e5;
  --white: #e8f0f8;
  --text-dim: rgba(200,214,229,0.6);
  --accent: #00d4ff;
  --accent2: #a855f7;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 68px; 
}
body {
  background: var(--bg-deep);
  color: var(--silver);
  font-family: 'Exo 2', sans-serif;
  overflow-x: hidden;
}
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all .7s cubic-bezier(.25,.8,.25,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}