:root {
  --bg: #050505;
  --surface: rgba(10, 10, 10, 0.8);
  --edge: rgba(255, 255, 255, 0.1);
  --edge-strong: rgba(255, 255, 255, 0.2);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.72);
  --brand: #66a3ff;
  --brand-soft: rgba(102, 163, 255, 0.2);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
html { scroll-behavior: smooth; }
body {
  color: var(--text);
  background: radial-gradient(circle at 15% 10%, rgba(102, 163, 255, 0.22), transparent 30%),
              radial-gradient(circle at 85% 8%, rgba(255,255,255,0.08), transparent 22%),
              radial-gradient(circle at 50% 100%, rgba(34, 139, 230, 0.16), transparent 34%),
              var(--bg);
}
.glass {
  background: var(--surface);
  border: 1px solid var(--edge);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass:hover { border-color: var(--edge-strong); }
.nav-link { transition: color .3s var(--ease), opacity .3s var(--ease); }
.nav-link:hover { color: #fff; opacity: 1; }
.btn-primary {
  background: linear-gradient(135deg, #1f6cff, #58a6ff);
  border: 1px solid rgba(255,255,255,.2);
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active, .btn-ghost:active { transform: scale(.95); }
.btn-ghost {
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.06);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.btn-ghost:hover { border-color: var(--edge-strong); }
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(8px);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.hero-img {
  min-height: 420px;
  border: 1px solid var(--edge);
  background-size: cover;
  background-position: center;
  transform-style: preserve-3d;
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.hero-img:hover { border-color: var(--edge-strong); }
.section-title { letter-spacing: -0.02em; }
.stat { border: 1px solid var(--edge); background: rgba(255,255,255,0.04); }
.card { border: 1px solid var(--edge); background: rgba(255,255,255,0.03); }
.muted { color: var(--muted); }