:root{
  --bg: #071028; /* midnight blue */
  --surface: #0f1724; /* dark slate */
  --muted: #94a3b8; /* muted text */
  --text: #e6eef8; /* light text */
  --primary: #00b4d8; /* tech cyan */
  --primary-700: #0284c7;
  --accent-1: #7c3aed; /* violet accent */
  --accent-2: #00b4d8; /* cyan accent */
  --border: rgba(255,255,255,0.06);
}

/* header scrolled state */
#siteHeader.scrolled{
  background: rgba(7,12,25,0.95) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
}

/* sensible link defaults */
a{ color: var(--primary) }

.text-muted-foreground{ color: var(--muted) }
.text-gradient{ background: linear-gradient(90deg,#60a5fa,#7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent }

/* Hero-specific CTA styles */
.hero-cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem; border-radius:999px; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:#ffffff; font-weight:700; box-shadow:0 10px 30px rgba(124,58,237,0.18), 0 6px 18px rgba(0,180,216,0.12); transition:transform .18s ease, box-shadow .18s ease; }
.hero-cta:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(124,58,237,0.22), 0 8px 24px rgba(0,180,216,0.16); }
.hero-cta-outline{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border-radius:999px; border:1px solid rgba(124,58,237,0.18); color:var(--accent-1); background:transparent; font-weight:600; transition:background .12s, color .12s; }
.hero-cta-outline:hover{ background:rgba(124,58,237,0.06); color:var(--accent-2); border-color:rgba(0,180,216,0.18); }

/* adjust gradient text to new palette */
.text-gradient{ background: linear-gradient(90deg,var(--primary),#7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent }

.card-gradient{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); }

/* Reveal animations (used with data-reveal and data-reveal-delay) */
[data-reveal]{
  opacity: 0;
  transform: translateY(12px) scale(.995);
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
}
[data-reveal].is-revealed{
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-reveal-delay] {
  transition-delay: calc(var(--reveal-delay, 0ms));
}

/* Enhanced animations system */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

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

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.5s ease-out forwards;
}

.animate-slide-in-top {
  animation: slideInFromTop 0.7s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Staggered animations */
.animate-stagger-1 { animation-delay: 0.1s; }
.animate-stagger-2 { animation-delay: 0.2s; }
.animate-stagger-3 { animation-delay: 0.3s; }
.animate-stagger-4 { animation-delay: 0.4s; }
.animate-stagger-5 { animation-delay: 0.5s; }
.animate-stagger-6 { animation-delay: 0.6s; }

/* Hover animations */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

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

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Card animations */
.card-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.card-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Loading animations */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

.dark .loading-shimmer {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200px 100%;
}

/* Text animations */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: fadeInUp 0.6s ease forwards;
}

/* Image animations */
.img-fade-in {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.img-fade-in.loaded {
  opacity: 1;
  transform: scale(1);
}

/* Button animations */
.btn-animate {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-animate::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;
}

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

/* Page transition animations */
.page-enter {
  opacity: 0;
  transform: translateX(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-exit {
  opacity: 1;
  transform: translateX(0);
}

.page-exit-active {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* small pulsing accent for CTA to add life */
.hero-cta { position: relative; }
.hero-cta::after{ content:''; position:absolute; right:10px; top:10px; width:10px; height:10px; border-radius:999px; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); box-shadow:0 0 22px rgba(124,58,237,0.18), 0 0 28px rgba(0,180,216,0.12); opacity:0; transform:scale(.8); transition:opacity .28s, transform .28s; }
.hero-cta:hover::after{ opacity:1; transform:scale(1.05); }

/* Force mobile menu button visible and legible on small screens (fallback for pages with differing header includes) */
@media (max-width: 767px) {
  header #menuBtn { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
  header #menuBtn svg { color: var(--text); fill: currentColor; }
  header #menuBtn { background: rgba(255,255,255,0.02); border-radius: 8px; padding: .45rem; }
  /* Ensure header is above animated backgrounds */
  header { z-index: 60; }
  /* Force the mobile menu to show when JS removes the 'hidden' class.
     This overrides any other display or visibility rules that could keep it hidden. */
  header #mobileMenu { display: none; }
  header #mobileMenu:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 70 !important;
  }
  /* Stack mobile menu links vertically and make them full-width for easy tapping */
  header #mobileMenu { display: none; flex-direction: column; gap: .25rem; }
  header #mobileMenu a { display: block; width: 100%; padding-left: .75rem; padding-right: .75rem; border-radius: .5rem; }
  header #mobileMenu a + a { margin-top: .25rem; }
  /* Position the mobile menu as an overlay under the header to avoid clipping */
  header { position: relative; }
  header #mobileMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(7,12,25,0.98), rgba(7,12,25,0.95));
    padding: .75rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  /* Ensure link text is readable on dark background */
  header #mobileMenu a { color: var(--text) !important; }
  /* Make the menu scrollable on small screens when content exceeds viewport */
  header #mobileMenu:not(.hidden) {
    max-height: 65vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  header #mobileMenu a { padding-top: .7rem; padding-bottom: .7rem; }
}

/* Animated hamburger -> X */
.hamburger { display: inline-block; width: 22px; height: 18px; position: relative; }
.hamburger-line { display: block; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .24s ease, opacity .18s ease; }
.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 8px; }
.hamburger-line:nth-child(3) { bottom: 0; }

/* Open state on the button toggles the X */
#menuBtn.is-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menuBtn.is-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
#menuBtn.is-open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }