/* ==========================================================================
   SynchroServe — Enhanced Visual Effects & Section Dividers
   effects.css  —  DO NOT modify content; pure visual enhancements only
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────
   0. GLITCH EFFECT FOR ALL IMAGES
───────────────────────────────────────────────────────────────────────────── */
img {
    display: block;
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    animation: globalImageGlitch 7s infinite steps(2, end);
    animation-delay: 0.8s;
}

img::before,
img::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

img::before {
    background: linear-gradient(90deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 40%, rgba(37,99,235,0.24) 100%);
    transform: translate(-2px, 0);
    animation: imageGlitchSlice 2.4s infinite steps(2, end);
}

img::after {
    background: linear-gradient(120deg, rgba(255,0,255,0.16), rgba(0,255,255,0.16), transparent);
    transform: translate(2px, 0);
    animation: imageGlitchSliceAlt 2.8s infinite steps(2, end);
}

@keyframes imageGlitchSlice {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.3; transform: translate(-3px, -1px); }
    40% { opacity: 0.2; transform: translate(2px, 1px); }
    60% { opacity: 0.25; transform: translate(-1px, 0); }
    80% { opacity: 0.18; transform: translate(3px, 2px); }
}

@keyframes imageGlitchSliceAlt {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    25% { opacity: 0.24; transform: translate(2px, -2px); }
    50% { opacity: 0.18; transform: translate(-3px, 1px); }
    75% { opacity: 0.16; transform: translate(1px, -1px); }
}

@keyframes globalImageGlitch {
    0%, 100% { transform: translate(0, 0) scale(1); filter: none; }
    20% { transform: translate(-1px, 0) scale(1.01); filter: hue-rotate(8deg) contrast(1.02); }
    40% { transform: translate(1px, -1px) scale(0.995); filter: hue-rotate(-8deg) contrast(1.04); }
    60% { transform: translate(-1px, 1px) scale(1.008); filter: saturate(1.15); }
    80% { transform: translate(1px, 0) scale(0.998); filter: contrast(1.06); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. ANIMATED FLOATING PARTICLE CANVAS (hero background)
───────────────────────────────────────────────────────────────────────────── */
#particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.hero-section {
    position: relative;
    overflow: hidden;
}
.hero-container {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. FLOATING GRADIENT ORBS — hero & sections
───────────────────────────────────────────────────────────────────────────── */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: orbFloat var(--dur, 12s) ease-in-out infinite alternate;
    opacity: 0.32;
}
.orb-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    top: -160px; left: -180px;
    --dur: 14s;
}
.orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    bottom: -120px; right: -120px;
    --dur: 11s;
}
.orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
    top: 40%; left: 50%;
    transform: translate(-50%,-50%);
    --dur: 16s;
    opacity: 0.18;
}

@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(40px, -30px) scale(1.06); }
    66%  { transform: translate(-30px, 20px) scale(0.96); }
    100% { transform: translate(20px, 40px) scale(1.03); }
}

/* About orbs */
.about-section { position: relative; overflow: hidden; }
.about-section .orb-a1 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    top: -80px; right: -100px;
    --dur: 13s;
    opacity: 0.2;
}
.about-section .orb-a2 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    bottom: -60px; left: 20%;
    --dur: 10s;
    opacity: 0.18;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. WAVE SECTION DIVIDERS — all variants
───────────────────────────────────────────────────────────────────────────── */
.wave-divider {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
    /* override the broken section-divider rule from animations.css */
    height: auto !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
}
.wave-divider.ss-visible {
    transform: none !important;
}
.wave-svg {
    display: block;
    width: 100%;
    height: 80px;
    /* subtle wave animation */
    animation: waveShift 8s ease-in-out infinite alternate;
}
@keyframes waveShift {
    0%   { d: path("M0,48 C320,120 640,0 960,64 C1180,120 1280,32 1440,48 L1440,120 L0,120 Z"); }
    100% { d: path("M0,60 C300,0 660,110 960,48 C1200,10 1320,90 1440,60 L1440,120 L0,120 Z"); }
}

/* ── Layered multi-wave dividers ── */
.wave-divider-multi {
    position: relative;
    height: 120px;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}
.wave-divider-multi svg {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.wave-divider-multi .wave-layer-1 {
    animation: wavePan1 6s ease-in-out infinite alternate;
    opacity: 0.6;
}
.wave-divider-multi .wave-layer-2 {
    animation: wavePan2 9s ease-in-out infinite alternate;
    opacity: 0.8;
}
.wave-divider-multi .wave-layer-3 {
    animation: none;
    opacity: 1;
}
@keyframes wavePan1 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(40px); }
}
@keyframes wavePan2 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-30px); }
}

/* ── Curve dividers ── */
.curve-divider {
    position: relative;
    height: 100px;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}
.curve-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Zigzag divider ── */
.zigzag-divider {
    position: relative;
    height: 40px;
    overflow: hidden;
    background: transparent;
}
.zigzag-divider::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background:
        linear-gradient(135deg, transparent 33.33%, #475569 33.33%) 0 0,
        linear-gradient(225deg, transparent 33.33%, #475569 33.33%) 0 0;
    background-size: 40px 40px;
    background-repeat: repeat-x;
    opacity: 0.9;
}

/* ── Triangle divider ── */
.triangle-divider {
    position: relative;
    height: 70px;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}
.triangle-divider svg {
    display: block;
    width: 100%;
    height: 70px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. GLOWING GRID / MESH BACKGROUND on select sections
───────────────────────────────────────────────────────────────────────────── */
.mesh-bg {
    position: relative;
}
.mesh-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37,99,235,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
    animation: meshPulse 6s ease-in-out infinite;
}
.mesh-bg > * { position: relative; z-index: 1; }

@keyframes meshPulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. SHIMMER EFFECT on section tags / badges
───────────────────────────────────────────────────────────────────────────── */
.section-tag {
    position: relative;
    overflow: hidden;
}
.section-tag::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.35) 50%,
        transparent 100%
    );
    animation: shimmerTag 4s ease-in-out infinite;
}
@keyframes shimmerTag {
    0%   { left: -100%; }
    40%  { left: 140%; }
    100% { left: 140%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CARD 3D TILT EFFECT (applied via JS, styled here)
───────────────────────────────────────────────────────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.tilt-card:hover {
    box-shadow: 0 30px 70px rgba(37,99,235,0.22);
}
.tilt-card .tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,0.12) 0%,
        transparent 60%);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tilt-card:hover .tilt-shine {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. GRADIENT TEXT ANIMATED GLOW (hero title)
───────────────────────────────────────────────────────────────────────────── */
.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200% auto;
    animation: gradientFlow 4s linear infinite;
}
@keyframes gradientFlow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. PULSE RING on stat-nums / badges (hero)
───────────────────────────────────────────────────────────────────────────── */
.pulse-ring {
    position: relative;
}
.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid rgba(37,99,235,0.4);
    animation: pulseRingAnim 2s ease-out infinite;
    pointer-events: none;
}
@keyframes pulseRingAnim {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. GLOWING BORDER on course cards (on hover)
───────────────────────────────────────────────────────────────────────────── */
.course-card {
    position: relative;
    overflow: hidden;
}
.course-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #2563eb, #7c3aed, #06b6d4, #2563eb);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: borderFlow 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.course-card:hover::before {
    opacity: 1;
}
@keyframes borderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. ICON SPIN-IN on why-cards and support-cards
───────────────────────────────────────────────────────────────────────────── */
.why-card:hover .why-card-img,
.support-card:hover .support-icon svg {
    animation: iconSpinBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes iconSpinBounce {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(15deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. MORPHING HERO BACKGROUND BLOB
───────────────────────────────────────────────────────────────────────────── */
.hero-blob {
    position: absolute;
    width: 700px;
    height: 700px;
    background: linear-gradient(135deg, rgba(37,99,235,0.18) 0%, rgba(124,58,237,0.12) 100%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blobMorph 12s ease-in-out infinite, blobDrift 20s ease-in-out infinite;
    top: -200px; right: -200px;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}
@keyframes blobMorph {
    0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50%     { border-radius: 50% 40% 60% 40% / 40% 70% 30% 60%; }
    75%     { border-radius: 40% 60% 40% 60% / 70% 30% 60% 40%; }
}
@keyframes blobDrift {
    0%,100% { transform: translate(0,0); }
    33%     { transform: translate(-60px, 40px); }
    66%     { transform: translate(40px, -50px); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. SCROLL-TRIGGERED COUNTER GLOW
───────────────────────────────────────────────────────────────────────────── */
.stat-item.ss-visible .stat-num {
    text-shadow: 0 0 20px rgba(37,99,235,0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. NEON GLOW on nav CTA button
───────────────────────────────────────────────────────────────────────────── */
.nav-btn:hover {
    box-shadow: 0 0 20px rgba(37,99,235,0.7), 0 0 40px rgba(37,99,235,0.3) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. FLOATING TECH ICONS (hero decorative elements)
───────────────────────────────────────────────────────────────────────────── */
.floating-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.float-icon {
    position: absolute;
    font-size: 1.4rem;
    opacity: 0.12;
    animation: floatIconDrift var(--fd, 8s) ease-in-out infinite alternate;
    filter: blur(0.5px);
}
.float-icon:nth-child(1)  { top: 15%; left: 8%;  --fd: 7s; animation-delay: 0s;    }
.float-icon:nth-child(2)  { top: 55%; left: 3%;  --fd: 9s; animation-delay: 1s;    }
.float-icon:nth-child(3)  { top: 80%; left: 15%; --fd: 6s; animation-delay: 2s;    }
.float-icon:nth-child(4)  { top: 10%; right: 6%; --fd: 11s; animation-delay: 0.5s; }
.float-icon:nth-child(5)  { top: 40%; right: 4%; --fd: 8s;  animation-delay: 1.5s; }
.float-icon:nth-child(6)  { top: 70%; right: 10%;--fd: 10s; animation-delay: 3s;   }
.float-icon:nth-child(7)  { top: 25%; left: 40%; --fd: 13s; animation-delay: 0.8s; }
.float-icon:nth-child(8)  { top: 65%; left: 55%; --fd: 9s;  animation-delay: 2.5s; }

@keyframes floatIconDrift {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-25px) rotate(10deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. SECTION ENTRY SPOTLIGHT (radial glow sweep)
───────────────────────────────────────────────────────────────────────────── */
.spotlight-section {
    position: relative;
    overflow: hidden;
}
.spotlight-section::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    z-index: 0;
    animation: spotlightPan 10s ease-in-out infinite alternate;
}
@keyframes spotlightPan {
    0%   { transform: translate(-70%,-50%); }
    100% { transform: translate(-30%,-50%); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. MARQUEE / TICKER LINE (between some sections)
───────────────────────────────────────────────────────────────────────────── */
.ticker-strip {
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(90deg, #1e40af 0%, #2563eb 50%, #1e40af 100%);
    padding: 10px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}
.ticker-inner {
    display: inline-flex;
    gap: 3rem;
    animation: tickerMove 28s linear infinite;
    will-change: transform;
}
.ticker-inner span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    opacity: 0.9;
}
.ticker-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    flex-shrink: 0;
}
@keyframes tickerMove {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. GLASSMORPHISM SHIMMER on cards
───────────────────────────────────────────────────────────────────────────── */
.glass-shimmer {
    position: relative;
    overflow: hidden;
}
.glass-shimmer::after {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.1) 50%,
        transparent 60%
    );
    transform: skewX(-10deg);
    animation: glassShimmer 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes glassShimmer {
    0%   { left: -75%; }
    60%  { left: 125%; }
    100% { left: 125%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. ENTRANCE WIPE OVERLAY on why-us section
───────────────────────────────────────────────────────────────────────────── */
.wipe-reveal {
    position: relative;
    overflow: hidden;
}
.wipe-reveal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
    transform: translateX(0);
    transform-origin: right;
    transition: transform 1s cubic-bezier(0.77,0,0.18,1);
    z-index: 9;
    pointer-events: none;
}
.wipe-reveal.wipe-done::before {
    transform: translateX(101%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. STAGGERED LINE DECORATORS between content
───────────────────────────────────────────────────────────────────────────── */
.line-decorator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}
.line-decorator .ld-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.4), transparent);
    animation: ldPulse 3s ease-in-out infinite;
}
.line-decorator .ld-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2563eb;
    animation: ldDotPulse 3s ease-in-out infinite;
}
@keyframes ldPulse {
    0%,100% { opacity: 0.4; }
    50%     { opacity: 1; }
}
@keyframes ldDotPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.5); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. ENHANCED HERO STATS CARDS
───────────────────────────────────────────────────────────────────────────── */
.stat-item {
    position: relative;
    overflow: hidden;
}
.stat-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
    border-radius: 2px;
}
.stat-item:hover::after {
    transform: scaleX(1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. REVIEW CARD STAR SHIMMER
───────────────────────────────────────────────────────────────────────────── */
.review-card:hover .review-stars {
    animation: starShine 0.6s ease forwards;
}
@keyframes starShine {
    0%,100% { filter: drop-shadow(0 0 0px #f59e0b); }
    50%     { filter: drop-shadow(0 0 8px #f59e0b); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   22. BACK-TO-TOP BUTTON ENHANCED
───────────────────────────────────────────────────────────────────────────── */
.back-to-top {
    animation: backTopFloat 2s ease-in-out infinite;
}
@keyframes backTopFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. PROGRAM STAT CARDS — rotating gradient border
───────────────────────────────────────────────────────────────────────────── */
.program-stat-card {
    position: relative;
}
.program-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--angle,0deg), #2563eb, #7c3aed, #06b6d4, #2563eb);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    animation: rotateBorderAngle 4s linear infinite;
}
.program-stat-card:hover::after { opacity: 1; }
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes rotateBorderAngle {
    to { --angle: 360deg; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   24. FOOTER GLOW EFFECT
───────────────────────────────────────────────────────────────────────────── */
.footer-section {
    position: relative;
    overflow: hidden;
}
.footer-section::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(37,99,235,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: footerGlowPulse 6s ease-in-out infinite;
}
.footer-grid, .footer-bottom {
    position: relative;
    z-index: 1;
}
@keyframes footerGlowPulse {
    0%,100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50%     { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. LOGO CAROUSEL FADE EDGES
───────────────────────────────────────────────────────────────────────────── */
.logos-carousel {
    position: relative;
}
.logos-carousel::before,
.logos-carousel::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.logos-carousel::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg, #f8fafc), transparent);
}
.logos-carousel::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg, #f8fafc), transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   26. INPUT FOCUS GLOW
───────────────────────────────────────────────────────────────────────────── */
.glass-form input:focus,
.glass-form select:focus,
.glass-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2), 0 0 15px rgba(37,99,235,0.1) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   27. SECTION HEADER DECORATIVE DOTS PATTERN
───────────────────────────────────────────────────────────────────────────── */
.section-header {
    position: relative;
}
.section-header::before {
    content: '';
    position: absolute;
    top: -30px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 120px;
    background-image: radial-gradient(circle, rgba(37,99,235,0.15) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    animation: dotPatternFade 4s ease-in-out infinite;
}
@keyframes dotPatternFade {
    0%,100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    50%     { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   28. HERO BADGE CARD FLOAT
───────────────────────────────────────────────────────────────────────────── */
.badge-card {
    animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%     { transform: translateY(-10px) rotate(1deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   29. MULTI-WAVE BETWEEN SECTIONS (new rich dividers)
───────────────────────────────────────────────────────────────────────────── */
.rich-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}
.rich-divider svg {
    display: block;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   30. REDUCED MOTION OVERRIDES
───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .orb, .hero-blob, .wave-svg, .ticker-inner,
    .float-icon, .gradient-text, .spotlight-section::after,
    .mesh-bg::before, .back-to-top, .badge-card,
    .section-tag::after, .glass-shimmer::after {
        animation: none !important;
    }
}