/* BACKGROUNDS */
.bg-dark,
.bg-dark-mesh,
.bg-light,
.bg-light-tr,
.bg-light-dots,
.bg-light-clean { position: relative; overflow: hidden; }

.bg-white-grid { background: #ffffff; position: relative; overflow: hidden; }
.bg-white-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; }
.bg-white-grid > .container { position: relative; z-index: 1; }

.bg-dark > .container,
.bg-dark-mesh > .container,
.bg-light > .container,
.bg-light-dots > .container,
.bg-light-clean > .container { position: relative; z-index: var(--z-base); }

.bg-dark { background: #020c1b; }
.bg-dark::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; z-index: 0; }
.bg-dark::after  { content: ''; position: absolute; top: -150px; left: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(30,58,138,0.5) 0%, transparent 65%); pointer-events: none; z-index: 0; }

.bg-dark-mesh { background: #000d1f; }
.bg-dark-mesh::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(96,165,250,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,0.04) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: 0; }
.bg-dark-mesh::after  { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 900px; height: 500px; background: radial-gradient(ellipse, rgba(30,58,138,0.45) 0%, rgba(14,116,144,0.15) 50%, transparent 75%); pointer-events: none; z-index: 0; }

.bg-light { background: #f8faff; }
.bg-light::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(59,130,246,0.1) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; z-index: 0; }
.bg-light::after  { content: ''; position: absolute; top: -150px; left: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, transparent 65%); pointer-events: none; z-index: 0; }

.bg-light-tr { background: #f8fafc; }
.bg-light-tr::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37,130,246,0.12) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 0; }
.bg-light-tr::after  { content: ''; position: absolute; top: -150px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(59,130,246,0.08) 40%, transparent 70%); pointer-events: none; z-index: 0; }

.bg-light-dots { background: #f8fafc; }
.bg-light-dots::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37,99,235,0.12) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 0; }
.bg-light-dots::after  { content: ''; position: absolute; top: -150px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(59,130,246,0.08) 40%, transparent 70%); pointer-events: none; z-index: 0; }

.bg-light-clean { background: #ffffff; }

.glow-br { position: absolute; bottom: -150px; right: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(14,116,144,0.25) 0%, transparent 65%); pointer-events: none; z-index: 0; }

.bg-light-blue { position: relative; overflow: hidden; background: linear-gradient(160deg, #e8ecf5 0%, #f2f4fb 60%, #e4e9f5 100%); }
.bg-light-blue > .container { position: relative; z-index: var(--z-base); }
.bg-light-blue::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(37,99,235,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.035) 1px, transparent 1px); background-size: 52px 52px; pointer-events: none; z-index: 0; }
.bg-light-blue::after { content: ''; position: absolute; top: 10%; left: -160px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 65%); pointer-events: none; z-index: 0; }
.glow-br-blue { position: absolute; bottom: 5%; right: -120px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(99,102,241,0.05) 0%, transparent 65%); pointer-events: none; z-index: 0; }

.bg-hero-dep { position: relative; overflow: hidden; background: linear-gradient(to top, #bfdbfe 0%, #dbeafe 20%, #eff6ff 50%, #ffffff 100%); }
.bg-hero-dep > .container { position: relative; z-index: 1; }
.bg-hero-dep::before { content: ''; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 1000px; height: 560px; background: radial-gradient(ellipse at center bottom, rgba(37,99,235,0.18) 0%, rgba(96,165,250,0.09) 45%, transparent 72%); pointer-events: none; z-index: 0; }
.bg-hero-dep::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(37,99,235,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; }

.bg-dots-blue { position: relative; overflow: hidden; background: #eef5fd; }
.bg-dots-blue > .container { position: relative; z-index: 1; }
.bg-dots-blue::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(30,58,138,0.07) 1.5px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; z-index: 0; }
.bg-dots-blue::after { content: ''; position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse at center, rgba(30,58,138,0.08) 0%, rgba(37,99,235,0.04) 50%, transparent 75%); pointer-events: none; z-index: 0; }

.bg-dark-pulse { background:#020c1b; position:relative; overflow:hidden; }
.bg-dark-pulse::before { content:''; position:absolute; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 70%); top:-200px; left:-200px; animation:pulseBg 6s ease-in-out infinite; pointer-events:none; z-index:0; }
.bg-dark-pulse::after { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(14,116,144,0.1) 0%, transparent 70%); bottom:-100px; right:-100px; animation:pulseBg 8s ease-in-out infinite reverse; pointer-events:none; z-index:0; }
@keyframes pulseBg { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.2); opacity:0.6; } }
.bg-dark-pulse .container { position:relative; z-index:1; }

.bg-mesh{position:relative;overflow:hidden;background:#020c1b;padding:80px 0 100px;}
.bg-mesh::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.055) 1px,transparent 1px);background-size:26px 26px;pointer-events:none;z-index:0;}
.bg-mesh::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(30,58,138,0.55) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 30%,rgba(148,163,184,0.08) 0%,transparent 55%),radial-gradient(ellipse 50% 50% at 50% 100%,rgba(71,85,105,0.12) 0%,transparent 60%),linear-gradient(160deg,rgba(15,23,42,0.95) 0%,rgba(2,12,27,1) 50%,rgba(15,23,42,0.9) 100%);pointer-events:none;z-index:0;}
.bg-mesh > *{position:relative;z-index:1;}

/* mid-navy base, diagonal gradient sweep that shifts slowly */
.bg-dark-gradient { background:#020c1b; position:relative; overflow:hidden; }
.bg-dark-gradient::before { content:''; position:absolute; inset:0; background:linear-gradient(125deg, rgba(37,99,235,0.15) 0%, transparent 40%, rgba(14,116,144,0.1) 60%, transparent 100%); animation:gradientShift 10s ease-in-out infinite alternate; pointer-events:none; z-index:0; }
@keyframes gradientShift { 0% { opacity:1; transform:translateX(0) translateY(0); } 100% { opacity:0.7; transform:translateX(40px) translateY(-30px); } }
.bg-dark-gradient .container { position:relative; z-index:1; }

/* deep steel — two radial ellipses, cool left / indigo right */
.bg-dark-slate { background:#0a0f1e; position:relative; overflow:hidden; }
.bg-dark-slate::before { content:''; position:absolute; inset:0; background-image:radial-gradient(ellipse 80% 50% at 20% 50%, rgba(37,99,235,0.08) 0%, transparent 100%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(99,102,241,0.06) 0%, transparent 100%); pointer-events:none; z-index:0; }
.bg-dark-slate .container { position:relative; z-index:1; }

/* electric top glow — lighter steel-blue band bleeds down from top */
.bg-dark-aurora { background:#04101f; position:relative; overflow:hidden; }
.bg-dark-aurora::before { content:''; position:absolute; top:-80px; left:-10%; right:-10%; height:340px; background:linear-gradient(180deg, rgba(56,130,255,0.22) 0%, rgba(14,116,144,0.08) 50%, transparent 100%); filter:blur(48px); pointer-events:none; z-index:0; animation:auroraMove 14s ease-in-out infinite alternate; }
.bg-dark-aurora::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,0.028) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; z-index:0; }
@keyframes auroraMove { 0% { transform:scaleX(1) translateX(0); opacity:1; } 100% { transform:scaleX(1.12) translateX(24px); opacity:0.65; } }
.bg-dark-aurora .container { position:relative; z-index:1; }

/* near-black grid with blue bloom rising from bottom center */
.bg-dark-charcoal { background:#080d18; position:relative; overflow:hidden; }
.bg-dark-charcoal::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; }
.bg-dark-charcoal::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; height:300px; background:radial-gradient(ellipse at center bottom, rgba(37,99,235,0.1) 0%, transparent 70%); pointer-events:none; z-index:0; }
.bg-dark-charcoal .container { position:relative; z-index:1; }

/* lighter-navy — same dark family but base lifted to #0d1e38, soft center glow */
.bg-dark-navy { background:#0d1e38; position:relative; overflow:hidden; }
.bg-dark-navy::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:900px; height:600px; background:radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, rgba(37,99,235,0.05) 40%, transparent 70%); pointer-events:none; z-index:0; }
.bg-dark-navy::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; z-index:0; }
.bg-dark-navy .container { position:relative; z-index:1; }

/* steel-blue tinted — #0f1c35 base, left-edge accent bar + diagonal teal wash */
.bg-dark-steel { background:#0f1c35; position:relative; overflow:hidden; }
.bg-dark-steel::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(180deg, transparent, rgba(59,130,246,0.5), rgba(14,116,144,0.3), transparent); pointer-events:none; z-index:0; }
@media(max-width:767px){ .bg-dark-steel::before { display:none; } }
.bg-dark-steel::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 85% 20%, rgba(14,116,144,0.1) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 15% 80%, rgba(37,99,235,0.08) 0%, transparent 65%); pointer-events:none; z-index:0; }
.bg-dark-steel .container { position:relative; z-index:1; }

/* ── LIGHT ── */

.bg-light-orbs { background:#f8faff; position:relative; overflow:hidden; }
.bg-light-orbs::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(37,99,235,0.06); filter:blur(80px); top:-100px; right:-100px; animation:orbFloat 8s ease-in-out infinite; pointer-events:none; z-index:0; }
.bg-light-orbs::after { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(14,116,144,0.05); filter:blur(60px); bottom:-80px; left:-80px; animation:orbFloat 10s ease-in-out infinite reverse; pointer-events:none; z-index:0; }
@keyframes orbFloat { 0%,100% { transform:translate(0,0); } 50% { transform:translate(30px,-20px); } }
.bg-light-orbs .container { position:relative; z-index:1; }

.bg-light-ice { background:linear-gradient(160deg, #f0f6ff 0%, #e8f2ff 50%, #f5f9ff 100%); position:relative; overflow:hidden; }
.bg-light-ice::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(37,99,235,0.04) 1px, transparent 1px); background-size:32px 32px; pointer-events:none; z-index:0; }
.bg-light-ice .container { position:relative; z-index:1; }

.bg-light-warm { background:#fdfcf8; position:relative; overflow:hidden; }
.bg-light-warm::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 10% 20%, rgba(250,204,21,0.04) 0%, transparent 100%), radial-gradient(ellipse 60% 50% at 90% 80%, rgba(37,99,235,0.04) 0%, transparent 100%); pointer-events:none; z-index:0; }
.bg-light-warm .container { position:relative; z-index:1; }

.bg-light-ruled { background:#ffffff; position:relative; overflow:hidden; }
.bg-light-ruled::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #2563eb, #0ea5e9, #2563eb, transparent); background-size:200% 100%; animation:ruleSweep 4s linear infinite; z-index:1; }
.bg-light-ruled::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 40% at 50% 0%, rgba(37,99,235,0.04) 0%, transparent 100%); pointer-events:none; z-index:0; }
@keyframes ruleSweep { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.bg-light-ruled .container { position:relative; z-index:1; }

.bg-light-frost { background:linear-gradient(135deg, #eef4ff 0%, #f8faff 60%, #e8f0fe 100%); position:relative; overflow:hidden; }
.bg-light-frost::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(37,99,235,0.07); filter:blur(100px); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:0; }
.bg-light-frost .container { position:relative; z-index:1; }