* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #753b7d;
    --secondary: #548682;
    --primary-light: #8f5a95;
    --secondary-light: #6ba5a0;
    --cream: #f0f5f4;
    --charcoal: #2c2c2c;
    --white: #ffffff;
    --text: #555;
    /* Legacy support - map old colors to new */
    --rose: #753b7d;
    --gold: #548682;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1;
    color: var(--charcoal);
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Multi-layered Creative Background */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            135deg,
            rgba(245, 230, 211, 0.35) 0%,
            rgba(250, 248, 245, 0.25) 100%
        ),
        url("../assets/Logo.png") center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, contain;
    background-position: center, center;
    background-attachment: fixed;
    z-index: -4;
    animation: bgPan 40s ease-in-out infinite alternate;
}

@keyframes bgPan {
    0% {
        transform: scale(1) translateX(0) translateY(0);
        filter: brightness(0.85) hue-rotate(0deg) saturate(1.1);
    }
    50% {
        transform: scale(1.12) translateX(-25px) translateY(-15px);
        filter: brightness(0.95) hue-rotate(3deg) saturate(1.2);
    }
    100% {
        transform: scale(1.08) translateX(20px) translateY(10px);
        filter: brightness(0.9) hue-rotate(-2deg) saturate(1.15);
    }
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
            ellipse 1200px 1000px at 15% 25%,
            rgba(117, 59, 125, 0.18) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 1400px 1100px at 85% 75%,
            rgba(84, 134, 130, 0.15) 0%,
            transparent 65%
        ),
        radial-gradient(
            circle 1500px at 50% 50%,
            rgba(245, 230, 211, 0.08) 0%,
            transparent 75%
        ),
        linear-gradient(
            135deg,
            rgba(250, 248, 245, 0.45) 0%,
            rgba(245, 230, 211, 0.35) 100%
        );
    z-index: -3;
    animation: overlayFlow 25s ease-in-out infinite;
}

@keyframes overlayFlow {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.92;
        transform: scale(1.02);
    }
}

/* Creative Repeating Background for All Sections Below Hero */
.sections-wrapper {
    position: relative;
    min-height: 100vh;
}

.sections-wrapper::before {
    content: "";
    position: fixed;
    top: 100vh;
    left: 0;
    width: 100%;
    height: calc(100vh * 6);
    pointer-events: none;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 100px,
            rgba(117, 59, 125, 0.08) 100px,
            rgba(117, 59, 125, 0.08) 200px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 100px,
            rgba(84, 134, 130, 0.06) 100px,
            rgba(84, 134, 130, 0.06) 200px
        ),
        linear-gradient(
            135deg,
            rgba(245, 230, 211, 0.4) 0%,
            rgba(250, 248, 245, 0.3) 100%
        );
    background-size: 600px 600px, 550px 550px, 500px 500px, 400px 400px,
        400px 400px, cover;
    background-position: 0 0, 300px 300px, 600px 600px, 0 0, 200px 200px, center;
    background-repeat: repeat;
    background-attachment: fixed;
    opacity: 0.5;
    z-index: -2;
    animation: repeatingBgMove 150s linear infinite;
    filter: blur(1px) brightness(0.85) saturate(1.2);
    pointer-events: none;
}

@keyframes repeatingBgMove {
    0% {
        background-position: 0 0, 300px 300px, 600px 600px, 0 0, 200px 200px,
            center;
    }
    100% {
        background-position: 600px 600px, 900px 900px, 1200px 1200px,
            400px 400px, 600px 600px, center;
    }
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
    /* Fix scroll issues on mobile - remove background-attachment: fixed */
    body::before {
        background-attachment: scroll !important;
    }

    .sections-wrapper::before {
        background-attachment: scroll !important;
    }

    /* Fix scroll containers that block page scrolling on mobile */
    .about-text {
        overflow: visible !important;
    }

    /* Ensure no nested scroll containers block page scroll */
    section,
    .container,
    .sections-wrapper {
        overflow: visible !important;
        touch-action: pan-y !important;
    }

    /* Ensure body and html allow scrolling */
    body,
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
}

/* Ensure all sections respect viewport width */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    section {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow-x: hidden;
    }
}