/* =========================================================
   TECHMART COLOR SYSTEM  (home + all pages)
   ========================================================= */

:root {
  --canvas: #07111f;
  --chrome: #091522;
  --surface: #0d1b2a;
  --surface-light: #122338;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;

  --border: #1e334a;
  --border-light: #29435d;

  --primary: #38bdf8;
  --primary-deep: #0284c7;

  --cta: #f59e0b;
  --cta-deep: #d97706;

  --gold: #fbbf24;
  --cyan: #38bdf8;
}

body {
  background-color: var(--canvas);
  color: var(--text-primary);
  font-family: "Inter", sans-serif;
}

.font-display {
  font-family: "Space Grotesk", sans-serif;
}

/* =========================================================
   TAILWIND COLOR COMPATIBILITY
   ========================================================= */

.bg-canvas {
  background-color: var(--canvas);
}

.bg-chrome {
  background-color: var(--chrome);
}

.bg-chrome\/95 {
  background-color: rgba(9, 21, 34, 0.95);
}

.bg-surface {
  background-color: var(--surface);
}

.bg-surface\/30 {
  background-color: rgba(13, 27, 42, 0.3);
}

.bg-surface\/40 {
  background-color: rgba(13, 27, 42, 0.4);
}

.bg-surface\/60 {
  background-color: rgba(13, 27, 42, 0.6);
}

.bg-surface\/80 {
  background-color: rgba(13, 27, 42, 0.8);
}

.bg-surface2 {
  background-color: #0a1828;
}

.text-text1 {
  color: var(--text-primary);
}

.text-text2 {
  color: var(--text-secondary);
}

.text-cyan {
  color: var(--cyan);
}

.text-cta {
  color: var(--cta);
}

.text-gold {
  color: var(--gold);
}

.bg-cta {
  background-color: var(--cta);
}

.bg-cta\/10 {
  background-color: rgba(245, 158, 11, 0.1);
}

.bg-cta\/20 {
  background-color: rgba(245, 158, 11, 0.2);
}

.bg-cta\/25 {
  background-color: rgba(245, 158, 11, 0.25);
}

.bg-cta\/30 {
  background-color: rgba(245, 158, 11, 0.3);
}

.bg-cta\/90 {
  background-color: rgba(245, 158, 11, 0.9);
}

.bg-cyan\/15 {
  background-color: rgba(56, 189, 248, 0.15);
}

.bg-cyan\/20 {
  background-color: rgba(56, 189, 248, 0.2);
}

.bg-gold\/10 {
  background-color: rgba(251, 191, 36, 0.1);
}

.border-border {
  border-color: var(--border);
}

.border-cyan\/40 {
  border-color: rgba(56, 189, 248, 0.4);
}

.border-cyan\/50 {
  border-color: rgba(56, 189, 248, 0.5);
}

.border-cyan\/60 {
  border-color: rgba(56, 189, 248, 0.6);
}

.border-cyan\/60:hover,
.hover\:border-cyan\/60:hover {
  border-color: rgba(56, 189, 248, 0.6);
}

.border-cta\/40 {
  border-color: rgba(245, 158, 11, 0.4);
}

.border-cta\/50 {
  border-color: rgba(245, 158, 11, 0.5);
}

.border-cta\/60 {
  border-color: rgba(245, 158, 11, 0.6);
}

.border-gold\/40 {
  border-color: rgba(251, 191, 36, 0.4);
}

.border-gold\/50 {
  border-color: rgba(251, 191, 36, 0.5);
}

.hover\:text-cyan:hover {
  color: var(--cyan);
}

.hover\:bg-surface:hover {
  background-color: var(--surface);
}

.hover\:text-text1:hover {
  color: var(--text-primary);
}

.hover\:bg-cta:hover {
  background-color: var(--cta);
}

.hover\:bg-ctaDeep:hover {
  background-color: var(--cta-deep);
}

.hover\:border-cta\/60:hover {
  border-color: rgba(245, 158, 11, 0.6);
}

.focus\:border-cyan\/60:focus {
  border-color: rgba(56, 189, 248, 0.6);
}

.placeholder\:text-text2::placeholder {
  color: var(--text-secondary);
}

/* =========================================================
   HERO / AURORA
   ========================================================= */

.aurora-bg {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(56, 189, 248, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 35%,
      rgba(245, 158, 11, 0.08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #07111f 0%,
      #0b1929 35%,
      #0a1727 65%,
      #07111f 100%
    );

  background-size: 200% 200%;
}

.grid-overlay {
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(148, 163, 184, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.055) 1px,
      transparent 1px
    );

  background-size: 44px 44px;
}

.radial-orb {
  border-radius: 9999px;
  filter: blur(70px);
}

/* =========================================================
   GLOW EFFECTS
   ========================================================= */

.shadow-glowCta {
  box-shadow:
    0 0 18px rgba(245, 158, 11, 0.35),
    0 0 40px rgba(245, 158, 11, 0.12);
}

.shadow-glowCyan {
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.35),
    0 0 40px rgba(56, 189, 248, 0.12);
}

.hover\:shadow-glowCta:hover {
  box-shadow:
    0 0 18px rgba(245, 158, 11, 0.35),
    0 0 40px rgba(245, 158, 11, 0.12);
}

.hover\:shadow-glowCyan:hover {
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.35),
    0 0 40px rgba(56, 189, 248, 0.12);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

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

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

@keyframes gridDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, 22px, 0);
  }

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

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

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

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

  50% {
    transform: translateY(24px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

.animate-aurora {
  animation: aurora 16s ease-in-out infinite;
}

.animate-gridDrift {
  animation: gridDrift 14s ease-in-out infinite;
}

.animate-floatSlow {
  animation: floatSlow 7s ease-in-out infinite;
}

.animate-floatSlower {
  animation: floatSlower 10s ease-in-out infinite;
}

.animate-pulseGlow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

::selection {
  background: rgba(56, 189, 248, 0.25);
  color: #ffffff;
}

a,
button {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Mobile nav: stack links as a real panel (Tailwind `hidden` + `flex-col`
   without `flex` leaves <a> inline, so taps open the wrong page). */
.mobile-nav-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav-panel a {
  display: block;
}


/* Hide Scrollbar */
html,
body {
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 22px;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}