/* ==========================================
 * DevForge — Lower Sections Prototype Style
 * Hero untouched. Sections below hero only.
 * Alternating dark/white + larger typography.
 * ========================================== */

/* ---- Services: white bg, rounded top, larger titles ---- */
#services, #tjenester {
  background: #ffffff !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 2 !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
}
#services .section-tag, #tjenester .section-tag { color: rgba(12,12,12,0.5) !important; }
#services .section-title, #tjenester .section-title {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #0C0C0C !important;
}
#services .section-subtitle, #tjenester .section-subtitle { color: rgba(12,12,12,0.5) !important; }
#services .service-card, #tjenester .service-card {
  background: #ffffff !important;
  border: 1px solid rgba(12,12,12,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
#services .service-card h3, #tjenester .service-card h3 { color: #0C0C0C !important; }
#services .service-card p, #tjenester .service-card p { color: rgba(12,12,12,0.6) !important; }
#services a, #tjenester a { color: #6366f1 !important; }
#services .btn, #tjenester .btn { border-color: rgba(12,12,12,0.2) !important; color: #0C0C0C !important; }
#services .btn:hover, #tjenester .btn:hover { background: #0C0C0C !important; color: #fff !important; }

/* ---- Projects: dark bg, rounded top, larger ---- */
#projects {
  background: #0C0C0C !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 3 !important;
  padding-top: 80px !important;
}
#projects .section-title {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
#projects .section-subtitle { color: rgba(215,226,234,0.5) !important; }

/* ---- Why Us: white bg (alternates) ---- */
#why-us, #hvorfor-oss {
  background: #ffffff !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 4 !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
}
#why-us .section-tag, #hvorfor-oss .section-tag { color: rgba(12,12,12,0.5) !important; }
#why-us .section-title, #hvorfor-oss .section-title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #0C0C0C !important;
}
#why-us .section-subtitle, #hvorfor-oss .section-subtitle { color: rgba(12,12,12,0.5) !important; }
#why-us .service-card, #hvorfor-oss .service-card {
  background: #ffffff !important;
  border: 1px solid rgba(12,12,12,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
#why-us .service-card h3, #hvorfor-oss .service-card h3 { color: #0C0C0C !important; }
#why-us .service-card p, #hvorfor-oss .service-card p { color: rgba(12,12,12,0.6) !important; }
#why-us a, #hvorfor-oss a { color: #6366f1 !important; }
#why-us .btn, #hvorfor-oss .btn { border-color: rgba(12,12,12,0.2) !important; color: #0C0C0C !important; }
#why-us .btn:hover, #hvorfor-oss .btn:hover { background: #0C0C0C !important; color: #fff !important; }

/* ---- Process: dark bg ---- */
#process {
  background: #0C0C0C !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 5 !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
}
#process .section-tag { color: rgba(215,226,234,0.5) !important; }
#process .section-title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #D7E2EA !important;
}
#process .section-subtitle { color: rgba(215,226,234,0.5) !important; }
#process h3, #process .step-title, #process .step-card h3 { color: #D7E2EA !important; }
#process p, #process .step-desc, #process .step-card p { color: rgba(215,226,234,0.7) !important; }
#process a { color: #818cf8 !important; }
#process .step-number { color: #D7E2EA !important; }

/* ---- Pet Portraits: dark bg ---- */
#pet-portraits {
  background: #0C0C0C !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 6 !important;
  padding-top: 80px !important;
}
#pet-portraits .section-tag { color: rgba(215,226,234,0.5) !important; }
#pet-portraits .section-title, #pet-portraits .section-subtitle { color: #D7E2EA !important; }
#pet-portraits a, #pet-portraits .btn { color: #D7E2EA !important; }

/* ---- Blog: white bg, but blog cards dark ---- */
#blog {
  background: #ffffff !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 7 !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
}
#blog .section-tag { color: rgba(12,12,12,0.5) !important; }
#blog .section-title { color: #0C0C0C !important; }
#blog .section-subtitle { color: rgba(12,12,12,0.5) !important; }
#blog .blog-card {
  background: #0f172a !important;
  border-radius: 16px !important;
  padding: 24px !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
}
#blog .blog-card h3 { color: #ffffff !important; }
#blog .blog-card p { color: rgba(255,255,255,0.7) !important; }
#blog .blog-card-date { color: rgba(255,255,255,0.5) !important; }
#blog .blog-card-link { color: #818cf8 !important; }
#blog .blog-card-tag { background: rgba(99,102,241,0.2) !important; color: #a5b4fc !important; }
#blog .btn-secondary { background: transparent !important; color: #0C0C0C !important; border: 1px solid rgba(12,12,12,0.25) !important; }
#blog .btn-secondary:hover { background: #0C0C0C !important; color: #fff !important; }

/* ---- CTA: dark bg ---- */
#cta {
  background: #0C0C0C !important;
  border-radius: 40px 40px 0 0 !important;
  position: relative !important;
  z-index: 8 !important;
  padding-top: 80px !important;
  padding-bottom: 100px !important;
}
#cta h2 { color: #D7E2EA !important; }
#cta p { color: rgba(215,226,234,0.6) !important; }