/* ===== COLORFUL CONTRAST - Bright accents everywhere ===== */
/* No dark sections, no warm tones - just bright color accents */

/* ============================================ */
/* 1. CAPABILITY CARDS - each gets a color      */
/* ============================================ */

.capability-card {
  background: #ffffff;
  border-left-width: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Card 1 - Blue */
.capability-card:nth-child(1) {
  border-left-color: #2563eb;
}
.capability-card:nth-child(1) .capability-icon {
  background: #dbeafe;
  color: #2563eb;
  border-color: #93c5fd;
}
.capability-card:nth-child(1):hover .capability-icon {
  background: #2563eb;
  color: white;
}

/* Card 2 - Indigo */
.capability-card:nth-child(2) {
  border-left-color: #4f46e5;
}
.capability-card:nth-child(2) .capability-icon {
  background: #e0e7ff;
  color: #4f46e5;
  border-color: #a5b4fc;
}
.capability-card:nth-child(2):hover .capability-icon {
  background: #4f46e5;
  color: white;
}

/* Card 3 - Rose */
.capability-card:nth-child(3) {
  border-left-color: #e11d48;
}
.capability-card:nth-child(3) .capability-icon {
  background: #ffe4e6;
  color: #e11d48;
  border-color: #fda4af;
}
.capability-card:nth-child(3):hover .capability-icon {
  background: #e11d48;
  color: white;
}

/* Card 4 - Emerald (gold variant) */
.capability-card.capability-gold:nth-child(4) {
  border-left-color: #059669;
  background: #f0fdf4;
}
.capability-card.capability-gold:nth-child(4) .capability-icon {
  background: #d1fae5;
  color: #059669;
  border-color: #6ee7b7;
}
.capability-card.capability-gold:nth-child(4):hover .capability-icon {
  background: #059669;
  color: white;
}

/* Card 5 - Amber (gold variant) */
.capability-card.capability-gold:nth-child(5) {
  border-left-color: #d97706;
  background: #fffbeb;
}
.capability-card.capability-gold:nth-child(5) .capability-icon {
  background: #fef3c7;
  color: #d97706;
  border-color: #fcd34d;
}
.capability-card.capability-gold:nth-child(5):hover .capability-icon {
  background: #d97706;
  color: white;
}

/* Card 6 - Violet */
.capability-card:nth-child(6) {
  border-left-color: #7c3aed;
}
.capability-card:nth-child(6) .capability-icon {
  background: #ede9fe;
  color: #7c3aed;
  border-color: #c4b5fd;
}
.capability-card:nth-child(6):hover .capability-icon {
  background: #7c3aed;
  color: white;
}

/* ============================================ */
/* 2. NEWS CARDS - colored left borders         */
/* ============================================ */

.news-featured {
  border-left: 6px solid #1e40af;
  box-shadow: 0 4px 15px rgba(30, 64, 175, 0.1);
}

.news-card {
  border-left: 6px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.news-card:nth-child(2) {
  border-left-color: #8b5cf6;
}
.news-card:nth-child(3) {
  border-left-color: #10b981;
}
.news-card:nth-child(4) {
  border-left-color: #f59e0b;
}

/* ============================================ */
/* 3. TEAM CARDS - colored top accents        */
/* ============================================ */

.team-card {
  position: relative;
  overflow: hidden;
}

.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-600);
}

.team-card:nth-child(2)::before {
  background: #2563eb;
}
.team-card:nth-child(3)::before {
  background: #059669;
}
.team-card:nth-child(4)::before {
  background: #d97706;
}
.team-card:nth-child(5)::before {
  background: #7c3aed;
}
.team-card:nth-child(6)::before {
  background: #e11d48;
}

/* ============================================ */
/* 4. ORG CARDS - colored numbers               */
/* ============================================ */

.org-number {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border: 1px solid #93c5fd;
  font-weight: 800;
  font-size: 14px;
}

.org-card:hover .org-number {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border-color: #2563eb;
}

/* ============================================ */
/* 5. CONTACT CARDS - colored icons             */
/* ============================================ */

.contact-card {
  border: 1px solid #e2e8f0;
}

.contact-card:nth-child(1) .contact-icon {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.contact-card:nth-child(2) .contact-icon {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.contact-card:nth-child(3) .contact-icon {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.contact-card:nth-child(4) .contact-icon {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* ============================================ */
/* 6. WELCOME CARD - warm accent                */
/* ============================================ */

.welcome-card {
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.welcome-corner {
  border-top: 5px solid #f59e0b;
  border-right: 5px solid #f59e0b;
}

.welcome-badge {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: #fbbf24;
}

/* ============================================ */
/* 7. VALUES BADGE - gold accent                */
/* ============================================ */

.values-badge {
  border: 2px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.values-badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, #f59e0b, #d97706);
}

.values-icon {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border: 1px solid #fbbf24;
}

/* ============================================ */
/* 8. BANNER CARDS - brighter variants           */
/* ============================================ */

.banner-card-primary {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.banner-card-secondary {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

.banner-card-emerald {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.banner-card-cyan {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

/* ============================================ */
/* 9. PARTNER CARDS - colored hover accents     */
/* ============================================ */

.partner-card:hover {
  border-color: #2563eb;
}

.partner-card:hover .partner-name {
  color: #2563eb;
}

/* ============================================ */
/* 10. STAT CARDS - brighter icons              */
/* ============================================ */

.stat-icon {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

/* ============================================ */
/* 11. SECTION HEADERS - colored accent line    */
/* ============================================ */

.section-header {
  position: relative;
}

.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #f59e0b);
  margin: 14px auto 0;
  border-radius: 2px;
}

.section-header-left::after {
  margin-left: 0;
}

/* ============================================ */
/* 12. HERO - brighter progress bar             */
/* ============================================ */

.hero-progress-bar {
  background: linear-gradient(90deg, #2563eb, #f59e0b);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

/* ============================================ */
/* 13. BUTTONS - brighter                       */
/* ============================================ */

.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.hero-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

/* ============================================ */
/* 14. TAGS - brighter backgrounds              */
/* ============================================ */

.tag-blue {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
  font-weight: 700;
}

/* ============================================ */
/* 15. HIGHLIGHTS - colored checkmarks          */
/* ============================================ */

.highlight-item svg {
  stroke: #2563eb;
  stroke-width: 2.5;
}

/* ============================================ */
/* 16. FORM - colored accents                   */
/* ============================================ */

.form-icon {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ============================================ */
/* 17. BACK TO TOP - brighter gold              */
/* ============================================ */

.back-to-top-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

/* ============================================ */
/* 18. MARQUEE - brighter items                 */
/* ============================================ */

.marquee-item {
  color: rgba(255,255,255,0.5);
}

.marquee-gray {
  color: #94a3b8;
}