/* ==========================================================================
   Sunlight Technology Solar — Premium Animation Layer
   Awwwards-level cinematic effects, zero layout changes
   All animations: CSS transforms + opacity only (GPU composited, 60fps)
   ========================================================================== */

/* ──────────────────────────────────────────────
   1. CURSOR: Custom glowing cursor + spotlight
   ────────────────────────────────────────────── */
.cursor-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, background .2s, opacity .3s;
  will-change: transform;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 182, 39, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .35s cubic-bezier(.16,.84,.44,1),
              height .35s cubic-bezier(.16,.84,.44,1),
              border-color .35s,
              opacity .3s;
  will-change: transform;
}
.cursor-ring.hovering {
  width: 60px;
  height: 60px;
  border-color: var(--amber);
  background: rgba(255,182,39,0.07);
}
.cursor-spotlight {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,182,39,0.07) 0%, rgba(255,122,26,0.03) 40%, transparent 70%);
  will-change: transform;
  transition: opacity .4s;
}
@media (hover: none) {
  .cursor-dot, .cursor-ring, .cursor-spotlight { display: none; }
}

/* ──────────────────────────────────────────────
   2. PAGE LOADER
   ────────────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  background: #060e1e;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}
.loader-logo {
  width: 80px;
  height: 80px;
  position: relative;
}
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold);
  border-right-color: var(--amber);
  animation: loaderSpin 1s linear infinite;
}
.loader-ring-2 {
  inset: 8px;
  border-top-color: var(--teal);
  animation: loaderSpin 1.5s linear infinite reverse;
}
.loader-ring-3 {
  inset: 16px;
  border-top-color: rgba(255,182,39,0.4);
  animation: loaderSpin 2s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.loader-sun {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold), var(--amber));
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 10px rgba(255,182,39,.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(255,182,39,.9); }
}
.loader-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  animation: loaderTextBlink 1.2s ease-in-out infinite;
}
@keyframes loaderTextBlink { 0%,100%{opacity:.4;} 50%{opacity:1;} }
.loader-bar-wrap {
  width: 160px;
  height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  border-radius: 2px;
  transition: width .05s linear;
  box-shadow: 0 0 8px rgba(255,182,39,.8);
}

/* ──────────────────────────────────────────────
   3. AMBIENT PARTICLE CANVAS (full-page)
   ────────────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
}

/* ──────────────────────────────────────────────
   4. MOUSE GRADIENT GLOW (follows cursor)
   ────────────────────────────────────────────── */
.mouse-glow {
  position: fixed;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    rgba(255,182,39,0.04) 0%,
    rgba(255,122,26,0.02) 40%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity .4s;
}

/* ──────────────────────────────────────────────
   5. AURORA / MESH GRADIENT BACKGROUND
   ────────────────────────────────────────────── */
.aurora-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: .35;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}
.aurora-blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,182,39,0.15), transparent 70%);
  top: -150px; left: -150px;
  animation: auroraDrift1 18s ease-in-out infinite;
}
.aurora-blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(21,183,158,0.12), transparent 70%);
  top: 40%; right: -120px;
  animation: auroraDrift2 22s ease-in-out infinite;
}
.aurora-blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,122,26,0.10), transparent 70%);
  bottom: -100px; left: 30%;
  animation: auroraDrift3 16s ease-in-out infinite;
}
@keyframes auroraDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes auroraDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  40% { transform: translate(-100px, 50px) scale(1.15); }
  70% { transform: translate(60px, -80px) scale(0.9); }
}
@keyframes auroraDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-60px, -90px) scale(1.2); }
}

/* ──────────────────────────────────────────────
   6. HEADER ENHANCEMENTS
   ────────────────────────────────────────────── */
.site-header {
  background: transparent !important;
  transition: background .4s cubic-bezier(.16,.84,.44,1),
              box-shadow .4s cubic-bezier(.16,.84,.44,1),
              backdrop-filter .4s !important;
}
.site-header.scrolled::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header.scrolled {
  box-shadow: none !important;
}
/* Active section nav pulse */
.main-nav a.active::after {
  animation: navLinePulse 2s ease-in-out infinite;
}
@keyframes navLinePulse {
  0%,100% { box-shadow: none; }
  50% { box-shadow: 0 2px 8px rgba(255,182,39,0.5); }
}
/* Scroll-progress enhanced */
.scroll-progress {
  height: 3px !important;
  box-shadow: 0 0 14px rgba(255,182,39,.8), 0 0 28px rgba(255,122,26,.4) !important;
}

/* ──────────────────────────────────────────────
   7. HERO CINEMATIC ENHANCEMENTS
   ────────────────────────────────────────────── */
/* Animated light rays in hero */
.hero-light-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-light-rays::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 220deg at 65% 30%,
    transparent 0deg,
    rgba(255,182,39,0.04) 8deg,
    transparent 16deg,
    rgba(255,182,39,0.02) 24deg,
    transparent 32deg,
    rgba(255,182,39,0.05) 40deg,
    transparent 48deg,
    rgba(255,122,26,0.03) 56deg,
    transparent 64deg,
    rgba(255,182,39,0.04) 72deg,
    transparent 80deg
  );
  animation: raysRotate 30s linear infinite;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }
/* Floating particles in hero section */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hero-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,182,39,0.6);
  box-shadow: 0 0 6px rgba(255,182,39,0.8);
  animation: heroParticleFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes heroParticleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-120px) translateX(var(--drift, 20px)); opacity: 0; }
}
/* Dynamic spotlight following cursor in hero */
.hero-cursor-spotlight {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,39,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity .3s;
}
/* CTA magnetic hover wrapper */
.btn-magnetic {
  display: inline-block;
  will-change: transform;
  transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
/* Glowing animated border on primary btn */
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--amber)) !important;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--gold), var(--amber), var(--teal), var(--gold));
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  animation: borderGlow 3s linear infinite;
  transition: opacity .3s;
}
.btn-primary:hover::after { opacity: 1; }
@keyframes borderGlow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Ripple click effect */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim .6s linear;
  pointer-events: none;
  z-index: 10;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}
/* Animated shine sweep on buttons (enhanced) */
.btn::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%) !important;
}

/* ──────────────────────────────────────────────
   8. CARD PREMIUM ENHANCEMENTS
   ────────────────────────────────────────────── */
.card {
  position: relative;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16,.84,.44,1),
              box-shadow .45s cubic-bezier(.16,.84,.44,1) !important;
}
/* Animated border glow on hover */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--gold), var(--teal), var(--amber), var(--gold));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
  animation: borderGlow 3s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
/* Soft inner glow on hover */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at var(--card-x,50%) var(--card-y,50%), rgba(255,182,39,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s;
}
.card:hover::after { opacity: 1; }
/* Lift + stronger shadow on hover */
.card:hover {
  transform: translateY(-12px) scale(1.01) !important;
  box-shadow: 0 32px 60px -20px rgba(11,30,61,.3), 0 0 0 1px rgba(255,182,39,.15) !important;
}

/* service-card glow */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,182,39,0.0) 0%, rgba(255,182,39,0.08) 100%);
  opacity: 0;
  transition: opacity .5s;
}
.service-card:hover::before { opacity: 1; }

/* Blog card image reveal mask on hover */
.blog-card .thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,182,39,0.12) 100%);
  opacity: 0;
  transition: opacity .5s;
}
.blog-card:hover .thumb::after { opacity: 1; }

/* ──────────────────────────────────────────────
   9. IMAGE PARALLAX + FLOATING
   ────────────────────────────────────────────── */
.about-media .img-main {
  will-change: transform;
  transition: transform .6s cubic-bezier(.16,.84,.44,1) !important;
}
.about-media .img-main:hover {
  transform: scale(1.02) !important;
}
.about-media .img-main img {
  will-change: transform;
}
/* Dynamic lighting overlay on images */
.img-light-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,182,39,0.12) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
  z-index: 1;
}
.about-media .img-main:hover .img-light-overlay { opacity: 1; }
/* Floating image animation */
.about-visual {
  animation: visualFloat 6s ease-in-out infinite;
}
@keyframes visualFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ──────────────────────────────────────────────
   10. TEXT ANIMATIONS
   ────────────────────────────────────────────── */
/* Gradient animated headings */
.section-head h2,
.about-split h2 {
  background: linear-gradient(120deg, var(--ink), var(--ink-3), var(--ink));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink);
  transition: color .3s;
}
/* Dark bg sections keep white */
.on-dark .section-head h2,
.bg-blue .section-head h2,
.bg-blue h2 {
  background: linear-gradient(120deg, #fff, rgba(255,255,255,.85), #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: textShimmer 6s linear infinite;
}
@keyframes textShimmer {
  to { background-position: -200% center; }
}
/* Letter reveal for h1 */
.letter-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotate(5deg);
  animation: charIn .6s cubic-bezier(.16,.84,.44,1) forwards;
  will-change: transform, opacity;
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
/* Typewriter cursor */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--amber);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink .8s step-end infinite;
}
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
/* Word stagger wrapper */
.word-stagger .word {
  display: inline-block;
  overflow: hidden;
}
.word-stagger .word-inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.16,.84,.44,1);
}
.word-stagger.in .word-inner { transform: translateY(0); }

/* ──────────────────────────────────────────────
   11. STATS BAR ENHANCED COUNTERS
   ────────────────────────────────────────────── */
.stat-item {
  position: relative;
  overflow: hidden;
}
.stat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,182,39,0.08), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.stat-item:hover::before { opacity: 1; }
/* Glow on numbers when revealed */
.stats-bar .stat-item b {
  transition: text-shadow .5s !important;
}
.stats-bar .stat-item.counted b {
  text-shadow: 0 0 30px rgba(255,182,39,0.4);
}

/* ──────────────────────────────────────────────
   12. PROGRESS BARS SHIMMER
   ────────────────────────────────────────────── */
.progress-fill {
  position: relative;
  overflow: hidden;
}
.progress-fill::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: progressShimmer 2s ease-in-out infinite 1s;
}
@keyframes progressShimmer {
  to { left: 100%; }
}

/* ──────────────────────────────────────────────
   13. FAQ SMOOTH ACCORDION
   ────────────────────────────────────────────── */
.faq-item {
  position: relative;
  overflow: hidden;
}
.faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  transform: scaleY(0);
  transition: transform .4s cubic-bezier(.16,.84,.44,1);
  transform-origin: top;
  border-radius: 3px;
}
.faq-item.open::before { transform: scaleY(1); }

/* ──────────────────────────────────────────────
   14. NAVIGATION ACTIVE INDICATOR
   ────────────────────────────────────────────── */
/* Floating dot that tracks active nav item */
.nav-active-dot {
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  transition: all .4s cubic-bezier(.16,.84,.44,1);
  box-shadow: 0 0 8px rgba(255,182,39,.6);
  pointer-events: none;
}
/* Mobile menu premium open */
.main-nav.open {
  background: #060e1e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ──────────────────────────────────────────────
   15. SECTION DECORATIVE FLOATING ELEMENTS
   ────────────────────────────────────────────── */
/* Floating geometric shapes */
.float-decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  animation: floatDecorDrift linear infinite;
  will-change: transform;
}
.float-decor-circle {
  border-radius: 50%;
  border: 2px solid var(--gold);
}
.float-decor-square {
  border: 2px solid var(--teal);
  transform: rotate(45deg);
}
@keyframes floatDecorDrift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
}
/* Hero floating icons */
.hero-float-icon {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  animation: heroIconFloat ease-in-out infinite;
  will-change: transform;
}
@keyframes heroIconFloat {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-20px) rotate(10deg) scale(1.05); }
}

/* ──────────────────────────────────────────────
   16. TESTIMONIAL ENHANCED SLIDE
   ────────────────────────────────────────────── */
.testi-wrap {
  position: relative;
}
.testi-wrap::before {
  content: '"';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 160px;
  color: rgba(255,182,39,0.08);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* ──────────────────────────────────────────────
   17. FOOTER AMBIENT PARTICLES
   ────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
}
.footer-glow {
  position: absolute;
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,182,39,0.04), transparent 70%);
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  animation: footerGlowPulse 8s ease-in-out infinite;
}
@keyframes footerGlowPulse {
  0%,100% { opacity: .6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

/* ──────────────────────────────────────────────
   18. SCROLL DEPTH EFFECTS
   ────────────────────────────────────────────── */
/* Parallax wrapper */
.parallax-element {
  will-change: transform;
  backface-visibility: hidden;
}

/* Depth scale-in animation */
.depth-reveal {
  opacity: 0;
  transform: scale(0.9) translateY(30px);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1),
              transform .8s cubic-bezier(.16,.84,.44,1);
}
.depth-reveal.in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ──────────────────────────────────────────────
   19. ICON BOUNCE ON HOVER
   ────────────────────────────────────────────── */
.fa-solid, .fa-brands, .fa-regular {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  display: inline-block;
}
.info-card:hover .ic .fa-solid,
.stat-item:hover .stat-icon .fa-solid {
  animation: iconBounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes iconBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.4) rotate(-10deg); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────────────
   20. INPUT FOCUS ANIMATION
   ────────────────────────────────────────────── */
.field input,
.field select,
.field textarea {
  background-image: linear-gradient(to right, transparent 50%, rgba(255,182,39,0.03) 50%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-position .4s, border-color .3s, box-shadow .3s, transform .3s !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background-position: -100% 0%;
}

/* ──────────────────────────────────────────────
   21. LOADING SKELETON SHIMMER
   ────────────────────────────────────────────── */
@keyframes skeletonShimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(11,30,61,.05) 25%, rgba(11,30,61,.1) 50%, rgba(11,30,61,.05) 75%);
  background-size: 600px 100%;
  animation: skeletonShimmer 1.8s infinite;
}

/* ──────────────────────────────────────────────
   22. NEON ACCENT GLOWS (subtle)
   ────────────────────────────────────────────── */
/* Teal neon on gauge */
.gauge-fill {
  filter: drop-shadow(0 0 6px rgba(255,182,39,0.5)) !important;
}
/* Gold neon on stat numbers */
.hero-stats .stat b {
  text-shadow: 0 0 20px rgba(255,182,39,0.4);
}
/* Soft neon on power flow */
.power-flow-path--core {
  filter: drop-shadow(0 0 8px rgba(255,182,39,1)) drop-shadow(0 0 16px rgba(255,182,39,.5)) !important;
}
/* Animated neon border on CTA banner */
.cta-banner {
  position: relative;
}
.cta-banner::before {
  animation: orbDrift 10s ease-in-out infinite !important;
  filter: blur(40px);
}

/* ──────────────────────────────────────────────
   23. GLASSMORPHISM ENHANCEMENTS
   ────────────────────────────────────────────── */
.hero-panel-badge {
  background: rgba(10,20,38,0.6) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
/* Glass effect on scroll when scrolled down */
.site-header.scrolled {
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────
   24. FLOATING SHADOWS
   ────────────────────────────────────────────── */
.card:hover,
.blog-card:hover,
.info-card:hover {
  box-shadow:
    0 30px 60px -20px rgba(11,30,61,.3),
    0 0 0 1px rgba(255,182,39,.1),
    0 -4px 0 0 rgba(255,182,39,.2) !important;
}

/* ──────────────────────────────────────────────
   25. WHATSAPP FLOAT GLOW
   ────────────────────────────────────────────── */
.whatsapp-float {
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.4) !important;
  animation: floatBounce 3s ease-in-out infinite, waPulseRing 2.5s ease-out infinite !important;
}
@keyframes waPulseRing {
  0% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.4); }
  70% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0); }
}

/* ──────────────────────────────────────────────
   26. HORIZONTAL SCROLL SECTION HINT
   ────────────────────────────────────────────── */
.clients-track {
  will-change: transform;
}

/* ──────────────────────────────────────────────
   27. SECTION TRANSITIONS SMOOTH
   ────────────────────────────────────────────── */
.section {
  transition: opacity .1s;
}
/* Staggered reveal refinement */
.reveal {
  transition:
    opacity 1.1s cubic-bezier(.16,.84,.44,1),
    transform 1.1s cubic-bezier(.16,.84,.44,1) !important;
}
.reveal.in { opacity: 1 !important; transform: none !important; }
.reveal-delay-1 { transition-delay: .15s !important; }
.reveal-delay-2 { transition-delay: .3s !important; }
.reveal-delay-3 { transition-delay: .45s !important; }

/* ──────────────────────────────────────────────
   28. REDUCE MOTION SAFETY NET
   ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring, .cursor-spotlight,
  .mouse-glow, .aurora-layer, #particle-canvas,
  .hero-light-rays, .hero-particles, .hero-cursor-spotlight,
  .page-loader,
  .float-decor, .hero-float-icon {
    display: none !important;
    animation: none !important;
  }
  .reveal,
  .card::before,
  .card::after,
  .btn-primary::after {
    transition: none !important;
    animation: none !important;
  }
}