@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --primary: #ff5c35 !important;
  --secondary: #ff5c35 !important;
  --accent: #c7ff45 !important;
  --light: #f4f1ea !important;
  --dark: #050505 !important;
  --darker: #030303 !important;
  --text: #f4f1ea !important;
  --text-light: #a6a6a6 !important;
}
html { scroll-behavior: smooth; background: #050505; }
body { color: #f4f1ea !important; background: #050505 !important; font-family: "DM Sans",sans-serif !important; }
body.cosmic-theme {
  background:
    radial-gradient(ellipse at 12% 18%,rgba(16,88,91,.18),transparent 34rem),
    radial-gradient(ellipse at 88% 12%,rgba(255,92,53,.13),transparent 31rem),
    linear-gradient(135deg,#05070d,#070a12 48%,#050806) !important;
  background-attachment: fixed !important;
}
#cosmicField { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .82; }
.cosmic-aurora { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .13; mix-blend-mode: screen; }
.cosmic-aurora-one { width: 38vw; height: 38vw; left: -12vw; top: 18vh; background: #18b7ad; }
.cosmic-aurora-two { width: 34vw; height: 34vw; right: -10vw; top: 52vh; background: #ff5c35; }
body.cosmic-theme > :where(header,main,section,footer,.container) { position: relative; z-index: 1; }
body.cosmic-theme section { background-color: rgba(5,7,12,.72) !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4,.logo { font-family: "Manrope",sans-serif !important; letter-spacing: -.04em; }
header { background: rgba(5,5,5,.88) !important; border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: none !important; backdrop-filter: blur(18px); }
nav a { color: rgba(255,255,255,.75) !important; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
nav a:hover, .logo span { color: #ff5c35 !important; }
.hero { min-height: 72vh; display: flex; align-items: center; background: radial-gradient(circle at 80% 30%,rgba(255,92,53,.16),transparent 30rem),#070707 !important; }
.hero::before { opacity: .15 !important; }
.hero h1 { max-width: 1000px; color: #fff !important; font-size: clamp(3rem,7vw,6.5rem) !important; line-height: .96 !important; }
.hero p { max-width: 700px; color: #aaa !important; font-size: 1.15rem !important; }
.cta-button, .btn, button[type="submit"] { color: #080808 !important; background: #f4f1ea !important; border: 1px solid #f4f1ea !important; border-radius: 0 !important; box-shadow: none !important; transition: transform .3s,background .3s !important; }
.cta-button:hover, .btn:hover, button[type="submit"]:hover { background: #ff5c35 !important; border-color: #ff5c35 !important; transform: translateY(-3px); }
section { background-color: #050505 !important; }
.section-title, section h2 { color: #f4f1ea !important; }
.section-subtitle, section > .container > p { color: #a6a6a6 !important; }
.course-card,.feature-card,.module-card,.curriculum-item,.info-card,.benefit-card,.project-card,.testimonial-card,.pricing-card {
  color: #f4f1ea !important; background: #111 !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 0 !important; box-shadow: none !important; transition: transform .4s cubic-bezier(.2,.75,.25,1),border-color .4s !important;
}
.course-card:hover,.feature-card:hover,.module-card:hover,.info-card:hover,.benefit-card:hover,.project-card:hover {
  transform: translateY(-7px) !important; border-color: rgba(255,92,53,.7) !important;
}
.course-card p,.feature-card p,.module-card p,.info-card p,.benefit-card p,.project-card p,.testimonial-card p { color: #a6a6a6 !important; }
.icon,.feature-icon,.module-number { color: #ff5c35 !important; background: rgba(255,92,53,.1) !important; }
.highlight,.badge,.tag { color: #050505 !important; background: #c7ff45 !important; border-radius: 99px !important; }
footer { color: #aaa !important; background: #030303 !important; border-top: 1px solid rgba(255,255,255,.12); }
@media (prefers-reduced-motion:no-preference) {
  .hero h1 { animation: courseIn .85s cubic-bezier(.2,.75,.25,1) both; }
  .hero p,.hero .cta-button { animation: courseIn .85s .13s cubic-bezier(.2,.75,.25,1) both; }
}
@keyframes courseIn { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }

/* Keep the animated cosmic field continuous behind every course section */
body.cosmic-theme,
body.cosmic-theme main,
body.cosmic-theme section,
body.cosmic-theme footer {
  background-color: transparent !important;
  background-image: none !important;
}
body.cosmic-theme header {
  position: sticky !important;
  top: 0;
  z-index: 10000 !important;
  background: rgba(5,7,12,.72) !important;
  backdrop-filter: blur(18px);
}
body.cosmic-theme header a,
body.cosmic-theme header button,
body.cosmic-theme header nav { position: relative; z-index: 10001; pointer-events: auto !important; }
body.cosmic-theme #cosmicField,
body.cosmic-theme .cosmic-aurora,
body.cosmic-theme::before { pointer-events: none !important; }