/* ==========================================================================
   NextGen Coders — Design Tokens & Custom Styles
   Palette: deep navy/black base, electric blue accent, mono for IDs/code
   ========================================================================== */

:root {
  --bg-deep:      #0a0e17;
  --bg-surface:   #10151f;
  --bg-raised:    #151b28;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --text-primary: #f3f6fb;
  --text-muted:   #94a3b8;
  --text-faint:   #5b6780;
  --blue:         #16a34a;
  --blue-bright:  #4ade80;
  --blue-deep:    #14532d;
  --green:        #22c55e;
  --red:          #f04949;
  --amber:        #eab308;
  --glass-bg:     rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.09);
}

* { scroll-behavior: smooth; }

html, body {
  background: var(--bg-deep);
  color: var(--text-primary);
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
.font-mono-id { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Ambient grid backdrop */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 40%, transparent 100%);
}

.glow-blue {
  background: radial-gradient(circle, rgba(22,163,74,0.35) 0%, rgba(22,163,74,0) 70%);
}

/* Glassmorphism card */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-hover {
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.glass-hover:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  background: rgba(22,163,74,0.06);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(22,163,74,0.55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  border: 1px solid var(--line-strong);
  color: var(--text-primary);
  background: rgba(255,255,255,0.02);
  transition: border-color .2s ease, background .2s ease;
}
.btn-secondary:hover { border-color: var(--blue); background: rgba(22,163,74,0.08); }

/* Nav link underline */
.nav-link { position: relative; color: var(--text-muted); }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1px; background: var(--blue-bright);
  transition: width .2s ease;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { width: 100%; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* Terminal / typing hero widget */
.terminal {
  background: #0d1220;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 999px; }
.type-cursor::after {
  content: '▌';
  color: var(--blue-bright);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Certificate stamp card */
.cert-card {
  background: linear-gradient(160deg, #101729 0%, #0b101c 100%);
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.cert-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(22,163,74,0.04) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.cert-stamp {
  border: 2px solid var(--blue-bright);
  color: var(--blue-bright);
  transform: rotate(-6deg);
}

.status-verified { color: var(--green); }
.status-invalid { color: var(--red); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #1e2536; border-radius: 8px; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}