.section{position:relative}
/* ============================================== */
/* GLOBAL ANIMATED PARALLAX BACKGROUND            */
/* ============================================== */

/* 1. Ensure the body doesn't block the background */
body {
    background-color: transparent !important;
}

/* 2. The Fixed Background Container */
.global-animated-bg {
    position: fixed; /* Keeps it locked in place for parallax */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -999; /* Sends it to the very back behind all content */
    overflow: hidden;
    background: linear-gradient(135deg, #f8f3eb, #fffbe6); /* Ivory Silk to Golden Pearl */
}

/* 3. The Rotating Glow Layers (Using Brand Colors) */
.global-animated-bg::before,
.global-animated-bg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vw; 
    height: 150vh;
    
    /* DHANVESTTOR BRAND COLOR GRADIENT */
    background: conic-gradient(
        from 0deg,
        #f8f3eb, /* Ivory Silk */
        #bbcfa5, /* Willow Moss */
        #fffbe6, /* Golden Pearl */
        #c1a78e, /* Khaki */
        #b0c4b1, /* Sage Green */
        #f8f3eb  /* Ivory Silk */
    );
    transform: translate(-50%, -50%);
    animation: rotateBg 15s linear infinite; /* Slowed to 15s for a premium, subtle feel */
    filter: blur(80px); /* Deep blur for a soft aura */
    opacity: 0.6;
}

/* Secondary rotating layer for depth */
.global-animated-bg::after {
    width: 120vw;
    height: 120vh;
    animation: rotateBgReverse 20s linear infinite;
    opacity: 0.4;
    /* Slightly different color mix for deep blending */
    background: conic-gradient(
        from 0deg,
        #fffbe6, 
        #c9886a, /* Antique Brass */
        #f8f3eb,
        #bbcfa5,
        #fffbe6
    );
}

/* 4. The Infinite Rotation Keyframes */
@keyframes rotateBg {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateBgReverse {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 5. Force sections to be transparent so the animation shows through */
.section, .split-section, .hero, .visual-diary-section, .get-in-touch-section, .founder-section, .philosophy-section {
    background-color: transparent !important;
    background: transparent !important;
}

/* ============================================== */
/* TEXT READABILITY & GLASSMORPHISM FIXES         */
/* ============================================== */

/* 1. Soften the background animation so it doesn't overpower the text */
.global-animated-bg::before {
    opacity: 0.35 !important; /* Reduced from 0.6 for a softer aura */
}
.global-animated-bg::after {
    opacity: 0.2 !important; /* Reduced from 0.4 */
}

/* 2. Add a protective text-glow to standalone headings and paragraphs */


/* 3. Apply Premium Frosted Glass to forms and open text areas */
.git-form-side, .copy {
    background: rgba(255, 255, 255, 0.6) !important; /* Semi-transparent white */
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 4. Ensure Philosophy Cards remain totally solid and readable */
.philosophy-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}