/* Alterside Interactive - Deep Space Futuristic Theme */
:root {
  --bg-deep: #05070f;
  --bg-space: #0a0c1a;
  --bg-card: #0f1224;
  --purple: #a855f7;
  --purple-dark: #6b21a8;
  --cyan: #22d3ee;
  --cyan-bright: #67e8f9;
  --text-primary: #e0e7ff;
  --text-muted: #94a3b8;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.5);
  --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.5);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--purple) var(--bg-deep);
}

body {
  font-family: 'Inter', system_ui, -apple-system, sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* Futuristic Typography */
h1, h2, h3 {
  font-family: 'Inter', system_ui, sans-serif;
  letter-spacing: -0.025em;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}

.glass-strong {
  background: rgba(15, 18, 36, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
}

/* Frosted glass navbar */
.nav-glass {
  background: rgba(5, 7, 15, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(to right, var(--purple), var(--cyan));
  transition: width 0.3s ease;
}

.nav-link:hover:after {
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-purple);
}

.btn-primary:active {
  transform: scale(0.985);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--glass-border);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-ghost:hover {
  background: var(--glass);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.btn-cyan {
  background: linear-gradient(135deg, var(--cyan) 0%, #0e7490 100%);
  color: #05070f;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-cyan:hover {
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}

/* Section Reveals */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.23, 1.0, 0.32, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Glassmorphic Cards */
.service-card, .spec-card, .use-case-card {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.3s ease;
  position: relative;
}

.service-card:hover, .use-case-card:hover {
  transform: translateY(-8px);
  border-color: var(--purple);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}

.spec-card:hover {
  border-color: var(--cyan);
}

/* Holographic / Glow Effects */
.holo-glow {
  position: relative;
}

.holo-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(45deg, var(--purple), var(--cyan), var(--purple));
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.15;
  animation: holo-shift 4s linear infinite;
  filter: blur(12px);
}

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

/* Scroll Progress */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(to right, var(--purple), var(--cyan));
  z-index: 9999;
  transition: width 0.05s ease-out;
}

/* Particle / Canvas Hero */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Model Viewer Styling for Spatia (natural placement, no container) */
model-viewer {
  --poster-color: transparent;
  --progress-bar-color: #67e8f9;
  --progress-bar-height: 2px;
  background: transparent;
}

/* Feature list styling */
.feature-list li {
  position: relative;
  padding-left: 1.75rem;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
}

/* Stats */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* Responsive nav */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-menu.open {
  max-height: 420px;
}

/* Futuristic grid / lines */
.tech-grid {
  background-image: 
    linear-gradient(rgba(168,85,247,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Smooth section dividers */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--glass-border), transparent);
}

/* Spec table like */
.spec-row {
  border-bottom: 1px solid var(--glass-border);
}

.spec-row:last-child {
  border-bottom: none;
}

/* Logo styling */
.logo {
  filter: brightness(0) invert(1);
}

/* Interactive 3D hint */
.interact-hint {
  animation: hint-float 2s ease-in-out infinite;
}

@keyframes hint-float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* === HERO CANVAS FIXES & ENHANCEMENTS === */
#hero-canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  display: block;
  mix-blend-mode: screen;
  pointer-events: none; /* mouse handled on parent for better UX */
}

/* Make the hero container reliably full size for canvas */
header[style*="min-height"] ,
header.min-h-\[100dvh\] {
  min-height: 100dvh;
}