/* ============================================
   Zenith Framework - Public Site Styles
   ============================================ */

/* Base Reset */
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* ============================================
   Space Theme - Subtle Cosmic Elements
   ============================================ */

/* Starfield background for dark sections */
.starfield {
  position: relative;
  background: linear-gradient(180deg, #0d1033 0%, #1a1a4e 50%, #2d1b4e 100%);
}

.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.starfield::before {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 10%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 95%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 5%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 65%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.5) 0%, transparent 100%);
  animation: twinkle 4s ease-in-out infinite alternate;
}

.starfield::after {
  background-image:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 68%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 42%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 88%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 52%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 8%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 92%, rgba(255,255,255,0.8) 0%, transparent 100%);
  animation: twinkle 5s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Subtle nebula glow overlay */
.nebula-glow {
  position: relative;
}

.nebula-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(65, 88, 208, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(200, 80, 192, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* Cosmic gradient for light sections */
.cosmic-light {
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f8f9ff 30%,
    #f0f4ff 70%,
    #e8eeff 100%
  );
  position: relative;
}

.cosmic-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(65, 88, 208, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(200, 80, 192, 0.02) 0%, transparent 40%);
  pointer-events: none;
}

/* Subtle star dots for light backgrounds */
.stars-subtle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(65, 88, 208, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(200, 80, 192, 0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, rgba(65, 88, 208, 0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 85%, rgba(200, 80, 192, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 45%, rgba(65, 88, 208, 0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 75%, rgba(200, 80, 192, 0.2) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.5;
}

/* Orbital ring decoration */
.orbit-ring {
  position: absolute;
  border: 1px solid rgba(65, 88, 208, 0.1);
  border-radius: 50%;
  animation: orbit-spin 30s linear infinite;
}

.orbit-ring::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #4158D0, #C850C0);
  border-radius: 50%;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(65, 88, 208, 0.5);
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Glowing accent for cards on hover */
.glow-hover {
  transition: all 0.3s ease;
}

.glow-hover:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(65, 88, 208, 0.1),
    0 0 40px rgba(200, 80, 192, 0.05);
}

/* Cosmic button style */
.btn-cosmic {
  background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
  border: none;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-cosmic::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-cosmic:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(65, 88, 208, 0.4);
  color: white;
}

.btn-cosmic:hover::before {
  left: 100%;
}

/* ============================================
   Black Hole / Event Horizon Theme
   ============================================ */

/* Event horizon glow - use on logo containers */
.event-horizon {
  position: relative;
  display: inline-block;
}

.event-horizon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(65, 88, 208, 0.15) 50%,
    rgba(200, 80, 192, 0.2) 60%,
    rgba(65, 88, 208, 0.1) 70%,
    transparent 80%
  );
  border-radius: 50%;
  animation: event-horizon-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes event-horizon-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Accretion disk effect */
.accretion-disk {
  position: relative;
}

.accretion-disk::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) rotateX(75deg);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(200, 80, 192, 0.3) 60deg,
    rgba(65, 88, 208, 0.4) 120deg,
    rgba(255, 204, 112, 0.2) 180deg,
    rgba(65, 88, 208, 0.4) 240deg,
    rgba(200, 80, 192, 0.3) 300deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: accretion-spin 20s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes accretion-spin {
  from { transform: translate(-50%, -50%) rotateX(75deg) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotateX(75deg) rotate(360deg); }
}

/* Gravitational vortex - subtle pull effect */
.gravity-well {
  position: relative;
}

.gravity-well::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(13, 16, 51, 0.02) 40%, transparent 60%),
    radial-gradient(ellipse at center, transparent 30%, rgba(65, 88, 208, 0.03) 50%, transparent 70%);
  pointer-events: none;
  animation: gravity-pulse 6s ease-in-out infinite;
}

@keyframes gravity-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); }
}

/* Singularity core - dark center with glow */
.singularity {
  position: relative;
  z-index: 1;
}

.singularity::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(13, 16, 51, 0.9) 0%,
    rgba(26, 26, 78, 0.6) 30%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.singularity::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(200, 80, 192, 0.1) 50%,
    rgba(65, 88, 208, 0.15) 60%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  animation: singularity-glow 3s ease-in-out infinite alternate;
}

@keyframes singularity-glow {
  0% { opacity: 0.5; filter: blur(10px); }
  100% { opacity: 1; filter: blur(15px); }
}

/* Photon ring - bright ring around elements */
.photon-ring {
  position: relative;
}

.photon-ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#0d1033, #0d1033) padding-box,
    linear-gradient(135deg, #4158D0, #C850C0, #FFCC70, #C850C0, #4158D0) border-box;
  opacity: 0.6;
  pointer-events: none;
  animation: photon-flicker 2s ease-in-out infinite alternate;
}

@keyframes photon-flicker {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* Hawking radiation - subtle particle emission */
.hawking-radiation {
  position: relative;
}

.hawking-radiation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(200, 80, 192, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 70%, rgba(65, 88, 208, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 204, 112, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(200, 80, 192, 0.5) 0%, transparent 100%);
  animation: radiation-drift 8s linear infinite;
  pointer-events: none;
}

@keyframes radiation-drift {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateY(-20px) rotate(5deg); opacity: 0.6; }
}

/* Logo container with event horizon effect */
.logo-container {
  position: relative;
  display: inline-block;
}

.logo-container .logo-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(200, 80, 192, 0.15) 0%,
    rgba(65, 88, 208, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(20px);
  animation: logo-glow 4s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* Warp effect for sections */
.space-warp {
  position: relative;
  overflow: hidden;
}

.space-warp::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(65, 88, 208, 0.03) 90deg,
    transparent 180deg,
    rgba(200, 80, 192, 0.03) 270deg,
    transparent 360deg
  );
  animation: warp-spin 60s linear infinite;
  pointer-events: none;
}

@keyframes warp-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   Typography Scale Overrides
   ============================================ */

/* Reduce Bootstrap display sizes for better proportion */
.display-1 { font-size: 3rem; line-height: 1.2; }
.display-2 { font-size: 2.75rem; line-height: 1.2; }
.display-3 { font-size: 2.5rem; line-height: 1.2; }
.display-4 { font-size: 2rem; line-height: 1.3; }
.display-5 { font-size: 1.75rem; line-height: 1.3; }
.display-6 { font-size: 1.5rem; line-height: 1.35; }

/* Better heading line-heights - override lh-1 when used */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* Fix cramped line-height utility */
.lh-1 { line-height: 1.2 !important; }

/* Lead text improvements */
.lead {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Responsive display sizes */
@media (max-width: 991.98px) {
  .display-1 { font-size: 2.5rem; }
  .display-2 { font-size: 2.25rem; }
  .display-3 { font-size: 2rem; }
  .display-4 { font-size: 1.75rem; }
  .display-5 { font-size: 1.5rem; }
  .display-6 { font-size: 1.35rem; }
}

@media (max-width: 767.98px) {
  .display-1 { font-size: 2rem; }
  .display-2 { font-size: 1.85rem; }
  .display-3 { font-size: 1.7rem; }
  .display-4 { font-size: 1.5rem; }
  .display-5 { font-size: 1.35rem; }
  .display-6 { font-size: 1.25rem; }

  .lead {
    font-size: 1rem;
  }
}

/* ============================================
   Typography
   ============================================ */

/* Gradient Text Effect - Cosmic */
.text-gradient {
  background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(65, 88, 208, 0.1);
}

/* Subtle glow text for dark backgrounds */
.text-glow {
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(65, 88, 208, 0.2),
    0 0 30px rgba(200, 80, 192, 0.1);
}

/* Code Font */
code, pre, .font-monospace {
  font-family: 'Fira Code', 'Consolas', monospace;
}

/* ============================================
   Hero Sections
   ============================================ */

.page-hero,
.hero-modern,
.about-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 40%, #f0f4ff 100%);
  position: relative;
  overflow: hidden;
}

.page-hero::before,
.hero-modern::before,
.about-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(65, 88, 208, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Subtle cosmic dust overlay on hero sections */
.page-hero::after,
.hero-modern::after,
.about-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(65, 88, 208, 0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 45%, rgba(200, 80, 192, 0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 25%, rgba(65, 88, 208, 0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 65%, rgba(200, 80, 192, 0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 35%, rgba(65, 88, 208, 0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 80%, rgba(200, 80, 192, 0.1) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 90%, rgba(65, 88, 208, 0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, rgba(200, 80, 192, 0.15) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================
   Badges
   ============================================ */

.hero-badge,
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(65, 88, 208, 0.1) 0%, rgba(200, 80, 192, 0.1) 100%);
  border: 1px solid rgba(65, 88, 208, 0.2);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4158D0;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .hero-badge,
  .section-badge {
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
  }
}

.hero-badge i,
.section-badge i {
  font-size: 1rem;
}

/* ============================================
   Cards
   ============================================ */

.feature-card,
.tech-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
}

@media (min-width: 768px) {
  .feature-card,
  .tech-card {
    padding: 2rem;
  }
}

.feature-card:hover,
.tech-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(65, 88, 208, 0.08),
    0 0 40px rgba(200, 80, 192, 0.04);
}

/* ============================================
   Icon Circles
   ============================================ */

.icon-circle,
.feature-icon,
.tech-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Icon color variants */
.icon-circle.primary,
.feature-icon.primary {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.icon-circle.success,
.feature-icon.success {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
}

.icon-circle.info,
.feature-icon.info {
  background: rgba(13, 202, 240, 0.1);
  color: #0dcaf0;
}

.icon-circle.warning,
.feature-icon.warning {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.icon-circle.danger,
.feature-icon.danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.icon-circle.purple,
.feature-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

/* ============================================
   Buttons
   ============================================ */

.btn-gradient {
  background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #3448b8 0%, #b040a8 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(65, 88, 208, 0.3);
}

.btn-gradient:active {
  transform: translateY(0);
}

/* Outline variant */
.btn-outline-gradient {
  background: transparent;
  border: 2px solid #4158D0;
  color: #4158D0;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.btn-outline-gradient:hover {
  background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
  border-color: transparent;
  color: #ffffff;
}

/* ============================================
   Navigation
   ============================================ */

.navbar {
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.navbar.scrolled {
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(65, 88, 208, 0.1);
}

.navbar .nav-link {
  font-weight: 500;
  color: #495057;
  transition: all 0.2s ease;
  position: relative;
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4158D0, #C850C0);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar .nav-link:hover {
  color: #4158D0;
}

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

.navbar .dropdown-menu {
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
  padding: 0.5rem;
}

.navbar .dropdown-item {
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  transition: all 0.2s ease;
}

.navbar .dropdown-item:hover {
  background: rgba(65, 88, 208, 0.1);
  color: #4158D0;
}

/* ============================================
   Footer
   ============================================ */

footer.starfield,
footer:not(.bg-light) {
  background: linear-gradient(180deg, #0d1033 0%, #1a1a4e 100%);
  position: relative;
  overflow: hidden;
}

footer.starfield::before,
footer:not(.bg-light)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 8% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 80%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 70%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 45%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 85%, rgba(255,255,255,0.3) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.6;
}

footer.starfield > *,
footer:not(.bg-light) > * {
  position: relative;
  z-index: 1;
}

footer.starfield a,
footer:not(.bg-light) a {
  text-decoration: none;
  transition: color 0.2s ease;
}

footer.starfield a:hover,
footer:not(.bg-light) a:hover {
  color: #C850C0 !important;
}

/* Subtle space dust for light sections */
.bg-light {
  position: relative;
}

.bg-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(65, 88, 208, 0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 58%, rgba(200, 80, 192, 0.1) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 32%, rgba(65, 88, 208, 0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 72%, rgba(200, 80, 192, 0.08) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.4;
}

.bg-light > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Forms
   ============================================ */

.form-control:focus,
.form-select:focus {
  border-color: #4158D0;
  box-shadow: 0 0 0 0.2rem rgba(65, 88, 208, 0.15);
}

.form-control-lg {
  border-radius: 0.5rem;
}

/* ============================================
   Code Blocks (for documentation)
   ============================================ */

pre[class*="language-"] {
  border-radius: 0.75rem;
  margin: 1rem 0;
}

code:not([class*="language-"]) {
  background: rgba(65, 88, 208, 0.1);
  color: #4158D0;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Subtle shadows */
.shadow-subtle {
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.shadow-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.shadow-hover:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* Section spacing */
.section-spacing {
  padding: 4rem 0;
}

@media (min-width: 768px) {
  .section-spacing {
    padding: 5rem 0;
  }
}

/* Hero content improvements */
.hero-content,
.about-hero-content {
  padding: 1.5rem 0;
}

@media (min-width: 992px) {
  .hero-content,
  .about-hero-content {
    padding: 2rem 0;
  }
}

/* Better paragraph spacing in content sections */
.hero-description,
.about-hero-content p.lead {
  margin-bottom: 1.5rem;
}

/* Divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(65, 88, 208, 0.2), transparent);
  margin: 3rem 0;
}

/* ============================================
   Hero Visual Elements
   ============================================ */

/* Hero Background */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Geometric Shapes */
.geometric-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #4158D0, #C850C0);
  top: -100px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}

.shape-2 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #C850C0, #FFCC70);
  bottom: -50px;
  left: -50px;
  animation: float 10s ease-in-out infinite reverse;
}

.shape-3 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #4158D0, #FFCC70);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 6s ease-in-out infinite;
}

/* Logo Showcase */
.logo-showcase {
  position: relative;
  display: inline-block;
}

.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(65, 88, 208, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: glow 3s ease-in-out infinite;
}

.logo-container {
  position: relative;
  z-index: 1;
}

.main-logo {
  filter: drop-shadow(0 10px 30px rgba(65, 88, 208, 0.3));
  animation: logoFloat 4s ease-in-out infinite;
}

/* Floating Cards */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.floating-card {
  background: white;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #4158D0;
  white-space: nowrap;
  z-index: 10;
}

.floating-card i {
  font-size: 1rem;
}

@media (min-width: 1200px) {
  .floating-card {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    gap: 0.5rem;
  }
  .floating-card i {
    font-size: 1.125rem;
  }
}

.floating-card.card-1 {
  top: 10%;
  left: -20px;
  animation: floatCard 5s ease-in-out infinite;
}

.floating-card.card-2 {
  top: 30%;
  right: -30px;
  animation: floatCard 6s ease-in-out infinite 0.5s;
}

.floating-card.card-3 {
  bottom: 30%;
  left: -10px;
  animation: floatCard 5.5s ease-in-out infinite 1s;
}

.floating-card.card-4 {
  bottom: 10%;
  right: -20px;
  animation: floatCard 7s ease-in-out infinite 1.5s;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.15;
  }
}

@keyframes glow {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatCard {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Staggered animation delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 991.98px) {
  .page-hero,
  .hero-modern,
  .about-hero {
    text-align: center;
  }

  .hero-badge,
  .section-badge {
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .feature-card,
  .tech-card {
    padding: 1.25rem;
  }

  .section-spacing {
    padding: 3rem 0;
  }

  /* Improve mobile typography */
  h5, .h5 {
    font-size: 1rem;
  }

  h6, .h6 {
    font-size: 0.9rem;
  }

  /* Better mobile card spacing */
  .card-body {
    padding: 1.25rem;
  }

  /* Improve paragraph legibility on mobile */
  p {
    line-height: 1.65;
  }

  /* Smaller icon circles on mobile */
  .icon-circle,
  .feature-icon,
  .tech-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
}

/* ============================================
   About/Contact Hero Visual Elements
   ============================================ */

.about-hero-visual {
  position: relative;
}

.logo-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(65, 88, 208, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: glow 4s ease-in-out infinite;
}

/* Orbit Elements */
.orbit-elements {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
}

.orbit {
  border: 1px dashed rgba(65, 88, 208, 0.2);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 {
  width: 150px;
  height: 150px;
  animation: orbitSpin 20s linear infinite;
}

.orbit-2 {
  width: 220px;
  height: 220px;
  animation: orbitSpin 30s linear infinite reverse;
}

.orbit-3 {
  width: 290px;
  height: 290px;
  animation: orbitSpin 40s linear infinite;
}

.orbit-dot {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #4158D0, #C850C0);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes orbitSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ============================================
   FAQ Accordion Styles
   ============================================ */

.faq-accordion .accordion-item {
  border: none;
  margin-bottom: 1rem;
  border-radius: 1rem !important;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.faq-accordion .accordion-button {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-radius: 1rem !important;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .faq-accordion .accordion-button {
    font-size: 1rem;
    padding: 1.25rem 1.5rem;
  }
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(65, 88, 208, 0.05) 0%, rgba(200, 80, 192, 0.05) 100%);
  color: #4158D0;
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(65, 88, 208, 0.2);
}

.faq-accordion .accordion-button::after {
  background-size: 1rem;
}

.faq-accordion .accordion-body {
  padding: 0 1.25rem 1rem;
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .faq-accordion .accordion-body {
    padding: 0 1.5rem 1.25rem;
  }
}

/* ============================================
   Timeline Styles (for Changelog/About)
   ============================================ */

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #4158D0, #C850C0);
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #4158D0, #C850C0);
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(65, 88, 208, 0.2);
  transform: translateX(-6px);
}

/* ============================================
   Stats Section
   ============================================ */

.stat-item {
  padding: 1rem 1.25rem;
}

.stat-number {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.stat-label {
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .stat-number {
    font-size: 1.25rem;
  }
  .stat-label {
    font-size: 0.85rem;
  }
}

/* ============================================
   Link Styles
   ============================================ */

.text-gradient-link {
  background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.text-gradient-link:hover {
  opacity: 0.8;
}

/* ============================================
   Philosophy Section Visual
   ============================================ */

.philosophy-visual {
  position: relative;
}

.philosophy-graphic {
  position: relative;
  display: inline-block;
  padding: 3rem;
}

.graphic-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(65, 88, 208, 0.2);
}

.graphic-circle.circle-1 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin 15s linear infinite;
}

.graphic-circle.circle-2 {
  width: 280px;
  height: 280px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin 25s linear infinite reverse;
}

.graphic-circle.circle-3 {
  width: 360px;
  height: 360px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin 35s linear infinite;
}

.center-logo {
  position: relative;
  z-index: 1;
}

.philosophy-logo {
  filter: drop-shadow(0 10px 30px rgba(65, 88, 208, 0.2));
}

/* ============================================
   CTA Section
   ============================================ */

.cta-section {
  background: linear-gradient(135deg, #1a1a4e 0%, #2d1b4e 50%, #4158D0 100%);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 5% 15%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 25%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 40%, rgba(255,255,255,0.6) 0%, transparent 100%);
  pointer-events: none;
  animation: twinkle 4s ease-in-out infinite alternate;
}

.cta-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, rgba(200, 80, 192, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 80% 30%, rgba(65, 88, 208, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.cta-description {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .cta-title {
    font-size: 2rem;
  }
  .cta-description {
    font-size: 1.1rem;
  }
}

/* ============================================
   Feature Highlight Cards
   ============================================ */

.feature-highlight {
  transition: all 0.3s ease;
}

.feature-highlight:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Step Cards (Getting Started)
   ============================================ */

.step-card {
  transition: all 0.3s ease;
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.step-number {
  font-size: 1.25rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .step-number {
    font-size: 1.5rem;
  }
}

.code-snippet {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .code-snippet {
    font-size: 0.85rem;
  }
}

/* ============================================
   Logo Container Positioning
   ============================================ */

.logo-container {
  position: relative;
  z-index: 1;
}

.logo-container .orbit-elements {
  z-index: 0;
}

.logo-container .main-logo {
  position: relative;
  z-index: 2;
}