/* === PAN: Dark Navy + Blue + Orange + White Theme (Home only) === */
:root{
  --pan-bg-0:#0b1220;  /* deep navy */
  --pan-bg-1:#0e1a33;  /* dark blue */
  --pan-blue:#1d4ed8;  /* blue */
  --pan-blue-2:#3b82f6;/* light blue */
  --pan-orange:#f97316;/* orange */
  --pan-orange-2:#fb923c;
  --pan-white:#ffffff;
  --pan-text:#e6edf6;
  --pan-muted:#cbd5e1;
  --pan-overlay:rgba(6,12,24,.55);
  --pan-card:rgba(255,255,255,.05);
  --pan-border:rgba(255,255,255,.12);
}

/* Global background */
html, body{
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(29,78,216,0.22), transparent 60%),
    radial-gradient(900px 400px at 80% -10%, rgba(249,115,22,0.18), transparent 70%),
    linear-gradient(180deg, var(--pan-bg-0) 0%, var(--pan-bg-1) 100%);
  color: var(--pan-text);
  background-attachment: fixed;
}

/* Section containers */
section, .section, header, .hero, .banner, .cta, .features, .about, .contact, footer{
  position: relative;
  background:
    linear-gradient(135deg, rgba(29,78,216,.12), rgba(249,115,22,.10)) border-box,
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
  border:1px solid var(--pan-border);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

section::before, .section::before, .hero::before, header::before, .cta::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(700px 280px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(500px 220px at 80% 0%, rgba(249,115,22,.16), transparent 70%);
}

/* Neutralize any legacy image backgrounds */
*[style*="background-image"], .hero, .banner, header, .slider, .carousel, .parallax, .masthead{
  background-image: none !important;
}
/* Also neutralize shorthand background with url(...) */
*[style*="background: url"]{ background: none !important; }

/* Cards */
.card, .feature-box, .service, .course, .post, .widget{
  background: var(--pan-card);
  border:1px solid var(--pan-border);
  border-radius: 16px;
}

/* Buttons */
.btn, .button, button{
  border-radius: 9999px;
  border:1px solid var(--pan-border);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.btn-primary, .button-primary, .cta .btn, .cta button{
  background: linear-gradient(90deg, var(--pan-blue), var(--pan-blue-2));
  color: #0b1220;
}
.btn-accent, .button-accent{
  background: linear-gradient(90deg, var(--pan-orange), var(--pan-orange-2));
  color: #0b1220;
}

/* Typography */
h1,h2,h3,h4,h5,h6{ color: var(--pan-white); }
p, li, small, span{ color: var(--pan-text); }
a{ color: var(--pan-blue-2); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Dividers */
hr{ border-color: var(--pan-border); }