/* =========================================================================
   ARTICLE SHARED STYLES
   Used across all SEO & Content Pages inside /RescueLeap
   ========================================================================= */

:root {
  --cyan: #00E5FF;
  --indigo: #6366f1;
  --red: #ef4444;
  --green: #10b981;
  --amber: #f59e0b;
  --bg: #04080f;
  --bg2: #070d1a;
  --bg3: #060c1e;
  --text: #c8d3e6;
  --muted: rgba(200,211,230,0.45);
  --border-c: rgba(0,229,255,0.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { 
  font-family: 'Inter', sans-serif; 
  background: var(--bg); 
  color: var(--text); 
  overflow-x: hidden; 
  line-height: 1.7; 
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }

/* PROGRESS BAR */
#progress { 
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; 
  background: linear-gradient(90deg, var(--cyan), var(--indigo)); 
  z-index: 999; 
  transition: width 0.1s;
}

/* NAVIGATION */
nav { 
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; 
  display: flex; align-items: center; justify-content: space-between; 
  padding: 1.1rem 2rem; transition: all 0.3s; 
}
nav.on { 
  background: rgba(4,8,15,0.97); backdrop-filter: blur(20px); 
  border-bottom: 1px solid rgba(0,229,255,0.1); 
}
.n-brand, .nb { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.n-brand img, .nb img { height: 32px; }
.n-brand span, .nb span { 
  font-weight: 800; font-size: 1rem; 
  background: linear-gradient(135deg, var(--cyan), var(--indigo)); 
  -webkit-background-clip: text; background-clip: text; 
  -webkit-text-fill-color: transparent; 
}
.n-cta, .nc { 
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 20px; 
  border-radius: 100px; background: linear-gradient(135deg, var(--cyan), var(--indigo)); 
  color: #fff; font-weight: 700; font-size: 0.82rem; text-decoration: none; 
  transition: opacity 0.2s, transform 0.2s; 
}
.n-cta:hover, .nc:hover { opacity: 0.88; transform: translateY(-1px); }

/* FOOTER */
footer { 
  background: #030609; border-top: 1px solid rgba(255,255,255,0.04); 
  padding: 32px 40px; text-align: center; 
}
footer p { color: rgba(255,255,255,0.2); font-size: 0.82rem; }
footer a { color: var(--cyan); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.25); border-radius: 4px; }