/* ===== CSS Custom Properties ===== */
    :root {
        --plum-700: #5B2C6F;
        --plum-800: #4a235a;
        --plum-900: #3b1748;
        --plum-950: #2a0f35;
        --amber-400: #F59E0B;
        --amber-300: #fcd34d;
    }

    /* ===== Base Reset & Typography ===== */
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        line-height: 1.6;
        color: #1a0a2e;
        background-color: #faf5ff;
    }

    h1, h2, h3, h4 {
        font-family: 'Playfair Display', Georgia, serif;
        line-height: 1.2;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
    }

    /* ===== Geometric Background Shapes ===== */
    .geo-shape {
        position: absolute;
        opacity: 0.08;
        pointer-events: none;
    }

    .shape-circle-1 {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: var(--amber-400);
        top: -100px;
        right: -100px;
        animation: float-slow 20s ease-in-out infinite;
    }

    .shape-circle-2 {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: var(--amber-300);
        bottom: 10%;
        left: 5%;
        animation: float-slow 15s ease-in-out infinite reverse;
    }

    .shape-circle-3 {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #fff;
        top: 30%;
        right: 15%;
        animation: float-slow 12s ease-in-out infinite;
    }

    .shape-triangle {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 173px solid var(--amber-400);
        top: 20%;
        left: -50px;
        opacity: 0.06;
        animation: spin-slow 30s linear infinite;
    }

    .shape-diamond {
        width: 120px;
        height: 120px;
        background: var(--amber-400);
        top: 60%;
        right: 8%;
        transform: rotate(45deg);
        opacity: 0.07;
        animation: float-slow 18s ease-in-out infinite;
    }

    .shape-ring {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 30px solid #fff;
        bottom: -50px;
        right: 20%;
        opacity: 0.05;
        animation: spin-slow 25s linear infinite reverse;
    }

    @keyframes float-slow {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        33% { transform: translateY(-20px) rotate(2deg); }
        66% { transform: translateY(10px) rotate(-1deg); }
    }

    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* ===== Floating Stat Cards ===== */
    .floating-card {
        animation: float-card 4s ease-in-out infinite;
    }

    .card-float-1 {
        animation-delay: 0s;
    }

    .card-float-2 {
        animation-delay: 1.3s;
    }

    .card-float-3 {
        animation-delay: 2.6s;
    }

    @keyframes float-card {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-12px); }
    }

    /* ===== Scroll Reveal ===== */
    .scroll-reveal {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    @media (prefers-reduced-motion: no-preference) {
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
        }
        
        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ===== Navbar ===== */
    #navbar {
        background: transparent;
        transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
    }

    #navbar.scrolled {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        box-shadow: 0 4px 30px rgba(91, 44, 111, 0.08);
    }

    #navbar.scrolled .font-display {
        color: var(--plum-800) !important;
    }

    #navbar.scrolled a:not(.bg-amber-400) {
        color: var(--plum-700) !important;
    }

    /* ===== Mobile Menu ===== */
    #mobile-menu {
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ===== Focus Styles ===== */
    a:focus-visible, button:focus-visible {
        outline: 3px solid var(--amber-400);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ===== Selection ===== */
    ::selection {
        background: var(--amber-400);
        color: var(--plum-950);
    }

    /* ===== Scrollbar ===== */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--plum-50);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--plum-300);
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--plum-500);
    }