:root {
  --deep: #0056D2;
  --sky: #007BFF;
  --cyan: #00C8FF;
  --dark: #111111;
}
.gradient-bg {
  background: linear-gradient(135deg, #0B0E1A 0%, var(--deep) 35%, var(--sky) 65%, var(--cyan) 100%);
}
.glass {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.neon-border { box-shadow: 0 0 0 1px rgba(0,200,255,0.35), 0 0 25px rgba(0,200,255,0.25); }
.hover-tilt { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.hover-tilt:hover { transform: translateY(-6px) rotate3d(1,1,0,3deg); box-shadow: 0 15px 40px rgba(0,0,0,0.35); }

.card-3d { perspective: 1000px; }
.card-3d-inner { transform-style: preserve-3d; transition: transform .5s ease; }
.card-3d:hover .card-3d-inner { transform: rotateY(180deg); }
.card-face { backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); }

.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0) } 50% { transform: translateY(-10px) } 100% { transform: translateY(0) } }
.parallax-layer { position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: cover; opacity: 0.25; }
.btn-cta { border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.3), 0 0 20px rgba(0,200,255,0.25); }
.footer-glow { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 -1px 0 rgba(255,255,255,0.06), 0 0 60px rgba(0,200,255,0.08); }

/* --- Enhanced Animations & Visuals --- */
.animated-gradient {
  background: linear-gradient(90deg, #00C8FF, #007BFF, #0056D2, #00C8FF);
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.shimmer-border { position: relative; }
.shimmer-border::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: conic-gradient(from 0deg, transparent, rgba(0,200,255,.35), transparent 25%);
  filter: blur(6px); animation: spin 5s linear infinite; pointer-events:none;
}
@keyframes spin { to { transform: rotate(360deg) } }

.reveal { opacity:0; transform: translateY(18px) scale(.98); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.visible { opacity:1; transform: translateY(0) scale(1); }
.reveal-stagger > * { opacity:0; transform: translateY(18px); }
.reveal-stagger.visible > * { animation: riseIn .7s ease forwards; }
.reveal-stagger.visible > *:nth-child(1){ animation-delay:.05s }
.reveal-stagger.visible > *:nth-child(2){ animation-delay:.15s }
.reveal-stagger.visible > *:nth-child(3){ animation-delay:.25s }
.reveal-stagger.visible > *:nth-child(4){ animation-delay:.35s }
.reveal-stagger.visible > *:nth-child(5){ animation-delay:.45s }
@keyframes riseIn { to { opacity:1; transform: translateY(0) } }

.glow-pulse { animation: glowPulse 2.4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 0 rgba(0,200,255,0)} 50%{box-shadow:0 0 30px rgba(0,200,255,0.35)} }

.magnet { transition: transform .15s ease; will-change: transform; }
.magnet-wrap { position: relative; display: inline-flex; gap: 1rem; flex-wrap: wrap; }

.depth-shadow { box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 12px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06); }

.shape { position:absolute; pointer-events:none; filter: drop-shadow(0 6px 20px rgba(0,200,255,.25)); opacity:.55; animation: bob 6s ease-in-out infinite; }
.shape.hex { width: 70px; height: 70px; background: rgba(0,200,255,.12); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.shape.circle { width: 60px; height: 60px; border-radius: 9999px; background: rgba(0,123,255,.12); }
.shape.square { width: 56px; height: 56px; background: rgba(0,86,210,.14); border-radius: 16px; }

.particles-holder { position:absolute; inset:0; z-index:0; }
.hero-content { position: relative; z-index: 1; }

.halo { position: relative; display:inline-block; }
.halo::before { content:""; position:absolute; inset:-6px; background: radial-gradient(400px 120px at 50% 50%, rgba(0,200,255,.15), transparent 60%); filter: blur(10px); border-radius:24px; pointer-events:none; }

.input-glow:focus { box-shadow: 0 0 0 2px rgba(0,200,255,.45); outline:none; }

.tilt { transform-style: preserve-3d; transition: transform .2s ease; will-change: transform; }
.tilt .tilt-child { transform: translateZ(30px); }
/* Add this to /assets/css/custom.css */
select,
select option {
  background-color: #111827; /* Dark background */
  color: white;              /* Light text */
}

select option:hover,
select option:focus {
  background-color: #00C8FF; /* Cyan highlight */
  color: black;              /* Readable hover text */
}