/**
 * PST Main Custom Styles (Tailwind + overrides)
 * =============================================
 * 
 * - Aerospace theme: Deep navy (#0a1428), steel blue (#1e3a5f), silver/metallic accents
 * - MITT theme: Deep black/charcoal with neon cyan (#67f6ff), magenta (#ff4dd2), violet
 * - Reusable components: .pst-card, .neon-glow, .section-header, plume effects, HUD elements
 * - All major layout is handled via Tailwind utility classes in HTML for rapid iteration.
 * - Only put things here that are hard/impossible with Tailwind or repeated complex styles.
 */

:root {
  /* Aerospace (default) */
  --pst-navy: #0a1428;
  --pst-navy-light: #111f3a;
  --pst-steel: #1e3a5f;
  --pst-silver: #c5d1e0;
  --pst-accent: #4da3ff;
  --pst-gold: #c5a26f;

  /* MITT Cyberpunk / Neon */
  --mitt-bg: #05070f;
  --mitt-surface: #0b0f1f;
  --mitt-neon-cyan: #67f6ff;
  --mitt-neon-pink: #ff4dd2;
  --mitt-neon-violet: #a78bfa;
  --mitt-text: #e0e7ff;
  --mitt-muted: #64748b;
}

/* Base polish */
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Sticky professional nav */
.pst-nav {
  background: rgba(10, 20, 40, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(197, 209, 224, 0.15);
  transition: all 0.2s ease;
}

.pst-nav.scrolled {
  background: rgba(10, 20, 40, 0.98);
  box-shadow: 0 4px 20px -2px rgb(0 0 0 / 0.4);
}

.pst-nav a {
  transition: color 0.1s ease, border-color 0.1s ease;
}

.pst-nav a:hover {
  color: var(--pst-accent);
}

.pst-nav .nav-active {
  color: white;
  border-bottom: 2px solid var(--pst-accent);
  padding-bottom: 2px;
}

/* MITT variant nav (neon) */
.mitt-nav {
  background: rgba(5, 7, 15, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(103, 246, 255, 0.15);
}

.mitt-nav a:hover {
  color: var(--mitt-neon-cyan);
  text-shadow: 0 0 8px var(--mitt-neon-cyan);
}

.mitt-nav .nav-active {
  color: var(--mitt-neon-cyan);
  border-bottom: 2px solid var(--mitt-neon-cyan);
  text-shadow: 0 0 10px var(--mitt-neon-cyan);
}

/* Card styles - Aerospace */
.pst-card {
  background: var(--pst-navy-light);
  border: 1px solid rgba(197, 209, 224, 0.15);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0.0, 0.2, 1),
              border-color 0.2s ease;
}

.pst-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border-color: var(--pst-accent);
}

/* MITT glowing cards */
.mitt-card {
  background: var(--mitt-surface);
  border: 1px solid rgba(103, 246, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mitt-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 40%;
  height: 300%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(103, 246, 255, 0.15),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.6s;
}

.mitt-card:hover::before {
  left: 150%;
}

.mitt-card:hover {
  border-color: var(--mitt-neon-cyan);
  box-shadow: 0 0 0 1px rgba(103, 246, 255, 0.3),
              0 10px 15px -3px rgb(0 0 0 / 0.5),
              0 0 25px -5px var(--mitt-neon-cyan);
  transform: translateY(-3px);
}

/* Neon / HUD typography */
.neon-cyan {
  color: var(--mitt-neon-cyan);
  text-shadow: 0 0 8px var(--mitt-neon-cyan),
               0 0 20px rgba(103, 246, 255, 0.5);
}

.neon-pink {
  color: var(--mitt-neon-pink);
  text-shadow: 0 0 8px var(--mitt-neon-pink);
}

.neon-violet {
  color: var(--mitt-neon-violet);
  text-shadow: 0 0 8px var(--mitt-neon-violet);
}

.hud-border {
  border-image: linear-gradient(to right, var(--mitt-neon-cyan), var(--mitt-neon-violet)) 1;
}

/* Section headers */
.section-header {
  position: relative;
  display: inline-block;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60%;
  height: 2px;
  background: linear-gradient(to right, var(--pst-accent), transparent);
}

.mitt-section-header::after {
  background: linear-gradient(to right, var(--mitt-neon-cyan), transparent);
}

/* Subtle rocket plume / technical accents */
.plume-bg {
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(77, 163, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(197, 162, 111, 0.06) 0%, transparent 60%);
}

/* Cyberpunk grid / circuit background for MITT */
.mitt-grid {
  background-image: 
    linear-gradient(rgba(103, 246, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 246, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Terminal / code aesthetic */
.terminal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #0a0c14;
  border: 1px solid rgba(103, 246, 255, 0.25);
}

.terminal-header {
  background: #11141f;
  border-bottom: 1px solid rgba(103, 246, 255, 0.2);
}

/* Feature list with glowing bullets for MITT */
.mitt-feature {
  position: relative;
  padding-left: 1.75rem;
}

.mitt-feature::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--mitt-neon-cyan);
  text-shadow: 0 0 6px var(--mitt-neon-cyan);
}

/* Buttons */
.pst-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.pst-btn-primary {
  background: var(--pst-accent);
  color: white;
  box-shadow: 0 0 0 1px rgba(77, 163, 255, 0.4);
}

.pst-btn-primary:hover {
  background: #3b8be6;
  box-shadow: 0 0 0 1px var(--pst-accent), 0 10px 15px -3px rgb(77 163 255 / 0.3);
}

.pst-btn-outline {
  border: 1px solid var(--pst-silver);
  color: var(--pst-silver);
}

.pst-btn-outline:hover {
  background: rgba(197, 209, 224, 0.1);
  color: white;
  border-color: white;
}

/* MITT neon buttons */
.mitt-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mitt-btn-primary {
  background: transparent;
  color: var(--mitt-neon-cyan);
  border: 1px solid var(--mitt-neon-cyan);
  box-shadow: 0 0 12px -2px var(--mitt-neon-cyan);
}

.mitt-btn-primary:hover {
  background: rgba(103, 246, 255, 0.1);
  box-shadow: 0 0 20px -1px var(--mitt-neon-cyan), 0 0 30px -5px var(--mitt-neon-cyan);
  color: white;
}

.mitt-btn-secondary {
  background: rgba(255, 77, 210, 0.1);
  color: var(--mitt-neon-pink);
  border: 1px solid var(--mitt-neon-pink);
}

.mitt-btn-secondary:hover {
  background: rgba(255, 77, 210, 0.2);
  box-shadow: 0 0 15px -2px var(--mitt-neon-pink);
}

/* Client badges */
.client-badge {
  background: rgba(30, 58, 95, 0.6);
  border: 1px solid rgba(197, 209, 224, 0.2);
  transition: all 0.1s ease;
  font-size: 0.875rem;
}

.client-badge:hover {
  border-color: var(--pst-accent);
  background: rgba(30, 58, 95, 0.9);
  transform: translateY(-1px);
}

/* Form styles */
.pst-input {
  background: var(--pst-navy);
  border: 1px solid rgba(197, 209, 224, 0.25);
  color: white;
  transition: border-color 0.15s ease;
}

.pst-input:focus {
  border-color: var(--pst-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.mitt-input {
  background: #0a0c14;
  border: 1px solid rgba(103, 246, 255, 0.25);
  color: var(--mitt-text);
}

.mitt-input:focus {
  border-color: var(--mitt-neon-cyan);
  box-shadow: 0 0 0 3px rgba(103, 246, 255, 0.15);
  outline: none;
}

/* Fade in utility for JS or CSS */
.fade-in {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

/* Mobile nav */
.mobile-nav {
  background: var(--pst-navy);
}

/* Accessibility & reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pst-card, .mitt-card, .fade-in {
    transition: none;
    animation: none;
  }
}

/* Print friendly */
@media print {
  .pst-nav, .mitt-nav, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}