:root {
            --lavender: #EDE4FF;
            --violet: #836FFF;
            --deep-blue: #000D6B;
            --highlight: #FBF46D;
        }

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

        body {
            font-family: 'Cormorant Garamond', serif;
            background-color: var(--lavender);
            color: var(--violet);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Typography Defaults */
        h1, h2, h3, h4, h5 { font-weight: 300; line-height: 1.1; }
        p { font-size: 1.2rem; line-height: 1.8; font-weight: 300; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--lavender); }
        ::-webkit-scrollbar-thumb { background: var(--violet); }

        /* Animation System */
        .reveal { 
            opacity: 0; 
            transform: translateY(40px); 
            transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); 
        }
        .reveal.active { 
            opacity: 1; 
            transform: translateY(0); 
        }

        .mask-reveal {
            clip-path: inset(0 0 100% 0);
            transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .mask-reveal.active {
            clip-path: inset(0 0 0% 0);
        }

        .zoom-in {
            transform: scale(1.2);
            transition: transform 2.5s ease-out;
        }
        .zoom-in.active {
            transform: scale(1);
        }

/* Hero Star Container */
.hero-star {
    width: 180px;   /* Bigger size */
    height: 180px;
    animation: rotateStar 10s linear infinite;
}

/* Image inside star */
.hero-star img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Star shape */
    clip-path: polygon(
        50% 0%, 
        61% 35%, 
        98% 35%, 
        68% 57%, 
        79% 91%, 
        50% 70%, 
        21% 91%, 
        32% 57%, 
        2% 35%, 
        39% 35%
    );
}

/* Rotation animation */
@keyframes rotateStar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}        @keyframes rotateStar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* Navigation dropdown */
        .nav-item { position: relative; }
        .dropdown {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.4s ease;
            background: var(--lavender);
            border: 1px solid rgba(131, 111, 255, 0.1);
        }
        .nav-item:hover .dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .nav-link-effect {
            position: relative;
            padding-bottom: 2px;
        }
        .nav-link-effect::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 0; height: 1px;
            background: var(--violet);
            transition: width 0.4s ease;
        }
        .nav-link-effect:hover::after { width: 100%; }

        /* Fixed Background Parallax Logic */
        .fixed-bg-container {
            position: relative;
            width: 100%;
            height: 120vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bg-image-fixed {
            position: absolute;
            width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            z-index: 1;
        }
        .floating-card {
            position: relative;
            z-index: 10;
            background: var(--lavender);
            padding: 5rem;
            max-width: 650px;
            box-shadow: 0 40px 100px rgba(0,0,0,0.05);
        }

        /* Page Transitions */
        .page-section { display: none; }
        .page-section.active { display: block; }

        /* Split Section Overlap */
        .overlap-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 450px;
            z-index: 20;
            box-shadow: 0 50px 80px rgba(0,0,0,0.15);
        }

        .page-section {
    display: none;
}

.page-section.active {
    display: block;
}