/* ============================================================
   EPDcore Design System — index.css
   Premium dark-mode engineering aesthetic
   ============================================================ */

/* ---- Fonts ---- */
.heading-font { font-family: 'Space Grotesk', sans-serif; }
.tail-container { font-family: 'Inter', system-ui, sans-serif; }

/* ---- Root tokens ---- */
:root {
  --bg-base:           #06090e;
  --bg-surface:        #0c111a;
  --bg-elevated:       #111924;
  --border:            rgba(255,255,255,0.06);
  --border-blue:       rgba(59,130,246,0.35);
  --border-green:      rgba(34,197,94,0.3);
  --primary:           #3b82f6;
  --primary-glow:      rgba(59,130,246,0.12);
  --accent:            #22c55e;
  --accent-glow:       rgba(34,197,94,0.1);
  --text-primary:      #f0f6fc;
  --text-secondary:    #8b949e;
  --text-muted:        #3d444d;
}

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--bg-base); }
::-webkit-scrollbar-thumb  { background: #1f2a37; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ---- Base body ---- */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

/* ---- Glassmorphic Navbar ---- */
.glass-nav {
  background: rgba(6,9,14,0.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.glass-nav-scrolled {
  background: rgba(6,9,14,0.92) !important;
  border-bottom: 1px solid rgba(59,130,246,0.18) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

/* ---- Mobile menu slide-in ---- */
#mobile-menu {
  transition: all 0.3s ease;
}

/* ---- Glass Cards ---- */
.glass-card {
  background: rgba(12,17,26,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.glass-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-blue);
  box-shadow: 0 12px 40px var(--primary-glow), 0 4px 24px rgba(0,0,0,0.3);
}

/* ---- Glass Modal ---- */
.glass-modal {
  background: rgba(10,15,22,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(59,130,246,0.28);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(59,130,246,0.06);
}

/* ---- Hero background grid ---- */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(31,42,55,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,42,55,0.18) 1px, transparent 1px);
  background-size: 40px 40px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ---- Tech grid overlay (CTA) ---- */
.tech-grid {
  background-image:
    linear-gradient(to right, rgba(31,42,55,0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,42,55,0.14) 1px, transparent 1px);
  background-size: 40px 40px;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- Glow orbs ---- */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.glow-orb-blue {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
}
.glow-orb-green {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);
}

/* ---- Section header accent ---- */
.section-header {
  position: relative;
}
.section-header::after {
  content: '';
  position: absolute;
  width: 48px; height: 2px;
  background: var(--primary);
  bottom: -10px; left: 0;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.section-header:hover::after { width: 80px; }

/* ---- Nav link underline animation ---- */
.nav-link {
  position: relative;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0; height: 2px;
  bottom: -4px; left: 0;
  background-color: var(--primary);
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover::after { width: 100%; }

/* ---- Standard cards (Standards section) ---- */
.standard-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.standard-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transition: left 0.6s ease;
}
.standard-card:hover::before { left: 100%; }
.standard-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px var(--primary-glow);
  transform: translateY(-4px);
}

/* ---- Workflow step cards ---- */
.workflow-step {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.workflow-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px var(--primary-glow), 0 4px 12px rgba(0,0,0,0.3);
}

/* ---- Certified stamp ---- */
.certified-stamp {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.certified-stamp::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, rgba(34,197,94,0.15), transparent);
  transform: rotate(45deg) translateX(-150%);
  transition: transform 0.5s ease;
}
.certified-stamp:hover::after { transform: rotate(45deg) translateX(150%); }

/* ---- Terminal cursor blink ---- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.terminal-cursor::after {
  content: '▌';
  margin-left: 2px;
  color: var(--accent);
  animation: blink 1.1s step-end infinite;
  font-size: 11px;
}

/* ---- Terminal line font ---- */
.terminal-line {
  font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---- Data fade-in animation ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease forwards; }

/* ---- Glowing badge pulse ---- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%       { box-shadow: 0 0 10px 4px rgba(34,197,94,0.15); }
}
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }

/* ---- Button hover lift ---- */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Form inputs focus ring ---- */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ---- Selection colour ---- */
::selection {
  background: var(--primary);
  color: #fff;
}