/* ═══════════════════════════════════════════════════════
   24Tech Global Solutions — Shared Neon / Cyber-Tech Theme
   Mirrors the design system from ai-course.html
═══════════════════════════════════════════════════════ */

:root {
  --neon: #00e5ff;
  --neon2: #7c3aed;
  --dark: #03060f;
  --dark2: #0a0e1a;
  --dark3: #0d1526;
  --card: #0f1929;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark);
  color: #e2e8f0;
  overflow-x: hidden;
}

/* ── Typography ── */
.font-orbitron {
  font-family: 'Orbitron', monospace;
}

.neon-text {
  color: var(--neon);
  text-shadow: 0 0 10px rgba(0, 229, 255, .8), 0 0 30px rgba(0, 229, 255, .4);
}

.neon-text-purple {
  color: #a78bfa;
  text-shadow: 0 0 10px rgba(124, 58, 237, .8), 0 0 30px rgba(124, 58, 237, .4);
}

/* ── Cards ── */
.glow-card {
  background: var(--card);
  border: 1px solid rgba(0, 229, 255, .2);
  border-radius: 16px;
  transition: all .3s ease;
  position: relative;
}

.glow-card:hover {
  border-color: rgba(0, 229, 255, .6);
  box-shadow: 0 0 30px rgba(0, 229, 255, .15), inset 0 0 30px rgba(0, 229, 255, .03);
}

.glow-card-purple {
  background: var(--card);
  border: 1px solid rgba(124, 58, 237, .3);
  border-radius: 16px;
  transition: all .3s ease;
}

.glow-card-purple:hover {
  border-color: rgba(124, 58, 237, .7);
  box-shadow: 0 0 30px rgba(124, 58, 237, .2);
}

/* ── Buttons ── */
.btn-neon {
  background: linear-gradient(135deg, #00e5ff, #7c3aed);
  color: #03060f;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: all .3s;
  text-decoration: none;
  display: inline-block;
}

.btn-neon:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0, 229, 255, .4);
}

.btn-neon-sm {
  background: linear-gradient(135deg, #00e5ff, #7c3aed);
  color: #03060f;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  transition: all .3s;
  text-decoration: none;
  display: inline-block;
}

.btn-neon-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 229, 255, .4);
}

.btn-outline-neon {
  background: transparent;
  color: var(--neon);
  border: 2px solid var(--neon);
  padding: 14px 32px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all .3s;
  text-decoration: none;
  display: inline-block;
}

.btn-outline-neon:hover {
  background: rgba(0, 229, 255, .1);
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 229, 255, .3);
}

/* ── Background Patterns ── */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 229, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .04) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ── Stat Cards ── */
.stat-card {
  background: linear-gradient(135deg, rgba(0, 229, 255, .08), rgba(124, 58, 237, .08));
  border: 1px solid rgba(0, 229, 255, .2);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
}

/* ── Navigation ── */
header {
  background: rgba(3, 6, 15, .9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 229, 255, .1);
}

/* ── Navigation Active Indicator ── */
nav a {
  text-decoration: none;
  position: relative;
}

/* Futuristic animated active indicator */
.nav-active {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.nav-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  box-shadow: 0 0 8px var(--neon), 0 0 20px rgba(0, 229, 255, 0.4);
  animation: navScan 2s ease-in-out infinite;
}

@keyframes navScan {
  0% {
    opacity: 0.5;
    box-shadow: 0 0 6px var(--neon);
    background-position: -100% 0;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 18px var(--neon), 0 0 40px rgba(0, 229, 255, 0.5);
  }

  100% {
    opacity: 0.5;
    box-shadow: 0 0 6px var(--neon);
  }
}

/* ── Forms ── */
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(0, 229, 255, .25);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 1rem;
  transition: all .3s;
}

.form-input:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 15px rgba(0, 229, 255, .2);
}

.form-input::placeholder {
  color: #4a5568;
}

.form-label {
  display: block;
  color: #a0aec0;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Animations ── */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes heroGlow {

  0%,
  100% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }
}

@keyframes pulse-neon {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 229, 255, .3);
  }

  50% {
    box-shadow: 0 0 30px rgba(0, 229, 255, .8), 0 0 60px rgba(0, 229, 255, .3);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientShift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-pulse-neon {
  animation: pulse-neon 2s ease-in-out infinite;
}

/* ── Scroll Reveal ── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all .7s cubic-bezier(.23, 1, .32, 1);
}

.fade-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* scroll-reveal: visible by default, animates in when scrolled to */
.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: all .8s cubic-bezier(.23, 1, .32, 1);
}

/* when JS hasn't fired yet, apply a subtle entrance */
.scroll-reveal:not(.revealed) {
  animation: revealFade .6s ease both;
}

@keyframes revealFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Timeline ── */
.timeline-line {
  background: linear-gradient(to bottom, var(--neon), var(--neon2));
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--dark);
}

::-webkit-scrollbar-thumb {
  background: var(--neon);
  border-radius: 3px;
}

/* ── Circuit overlay ── */
.circuit-overlay {
  position: absolute;
  inset: 0;
  opacity: .08;
  pointer-events: none;
}

/* ── Loading dots ── */
.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {

  0%,
  20% {
    content: '';
  }

  40% {
    content: '.';
  }

  60% {
    content: '..';
  }

  80%,
  100% {
    content: '...';
  }
}

/* ── Footer ── */
footer {
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, .08);
}