/* Custom properties for colors */
:root {
    --color-pink: #f297be;
    --color-purple: #8c7aea;
    --color-blue: #6699ff;
    --color-you: #ff69b4; /* Pink/Magenta */
    --color-partner: #00ffff; /* Cyan */
    --color-partners-partner: #ffcc00; /* Yellow/Orange */
    --font-family: 'Press Start 2P', monospace; /* A common pixel font for this look */

    /* NAVBAR STYLES */
    --primary-color: #6f00ff;
    --text-color: black;
    --background-color: #f4f4f4;
    --nav-height: 60px;
}

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

body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 40%, var(--color-pink) 100%);
    font-family: var(--font-family);
    line-height: 1.5;
    overflow-x: hidden;
    padding: 20px;
}

/* --- Star Background Effect (CSS only, updated) --- */
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.stars-container::before,
.stars-container::after,
.stars-container > div::before { 
    content: '';
    position: absolute;
    background: transparent;
    border-radius: 50%; 
}

/* Layer 1: Smallest, most dense stars */
.stars-container::before {
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    box-shadow:
        10px 10px white, 50px 80px white, 120px 30px white, 180px 100px white, 250px 20px white,
        300px 120px white, 380px 50px white, 450px 150px white, 520px 80px white, 600px 10px white,
        680px 130px white, 750px 60px white, 820px 160px white, 900px 90px white, 980px 30px white,
        1050px 140px white, 1120px 70px white, 1200px 170px white, 10px 200px white, 80px 250px white,
        150px 180px white, 220px 280px white, 290px 220px white, 360px 320px white, 430px 260px white,
        500px 350px white, 570px 290px white, 640px 390px white, 710px 330px white, 780px 420px white,
        850px 360px white, 920px 450px white, 990px 390px white, 1060px 480px white, 1130px 420px white,
        1200px 510px white, 20px 550px white, 90px 600px white, 160px 530px white, 230px 630px white,
        300px 570px white, 370px 670px white, 440px 610px white, 510px 700px white, 580px 640px white,
        650px 740px white, 720px 680px white, 790px 780px white, 860px 720px white, 930px 820px white,
        1000px 760px white, 1070px 850px white, 1140px 790px white, 1210px 880px white, 30px 900px white,
        100px 950px white, 170px 890px white, 240px 990px white, 310px 930px white, 380px 1030px white,
        450px 970px white, 520px 1060px white, 590px 1000px white, 660px 1100px white, 730px 1040px white,
        800px 1130px white, 870px 1070px white, 940px 1160px white, 1010px 1100px white, 1080px 1190px white,
        1150px 1130px white, 1220px 1220px white,
        10px 1250px white, 100px 1300px white, 200px 1280px white, 300px 1350px white, 400px 1320px white,
        500px 1400px white, 600px 1370px white, 700px 1450px white, 800px 1420px white, 900px 1500px white,
        1000px 1470px white, 1100px 1550px white, 1200px 1520px white, 50px 1600px white, 150px 1650px white,
        250px 1620px white, 350px 1700px white, 450px 1670px white, 550px 1750px white, 650px 1720px white,
        750px 1800px white, 850px 1770px white, 950px 1850px white, 1050px 1820px white, 1150px 1900px white,
        1250px 1870px white, 0px 100px white, 100px 0px white, 200px 200px white, 300px 100px white,
        400px 0px white, 500px 300px white, 600px 200px white, 700px 100px white, 800px 0px white,
        900px 400px white, 1000px 300px white, 1100px 200px white, 1200px 100px white, 1300px 0px white,
        1400px 500px white, 1500px 400px white, 1600px 300px white, 1700px 200px white, 1800px 100px white,
        1900px 0px white, 0px 1900px white, 100px 1800px white, 200px 1700px white, 300px 1600px white,
        400px 1500px white, 500px 1400px white, 600px 1300px white, 700px 1200px white, 800px 1100px white,
        900px 1000px white, 1000px 900px white, 1100px 800px white, 1200px 700px white, 1300px 600px white,
        1400px 500px white, 1500px 400px white, 1600px 300px white, 1700px 200px white, 1800px 100px white,
        1900px 0px white, 
        20px 10px white, 70px 40px white, 130px 70px white, 190px 110px white, 260px 140px white,
        320px 170px white, 390px 200px white, 460px 230px white, 530px 260px white, 610px 290px white,
        690px 320px white, 760px 350px white, 830px 380px white, 910px 410px white, 990px 440px white,
        1060px 470px white, 1130px 500px white, 1210px 530px white, 40px 560px white, 110px 590px white,
        180px 620px white, 250px 650px white, 320px 680px white, 390px 710px white, 460px 740px white,
        530px 770px white, 600px 800px white, 670px 830px white, 740px 860px white, 810px 890px white,
        880px 920px white, 950px 950px white, 1020px 980px white, 1090px 1010px white, 1160px 1040px white,
        1230px 1070px white;
    animation: twinkle 4s infinite alternate; 
}

/* Layer 2: Medium-sized stars, less dense */
.stars-container::after {
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    box-shadow:
        40px 100px white, 160px 220px white, 280px 340px white, 400px 460px white, 520px 580px white,
        640px 700px white, 760px 820px white, 880px 940px white, 1000px 1060px white, 1120px 1180px white,
        1240px 1300px white, 100px 0px white, 200px 120px white, 300px 240px white, 400px 360px white,
        500px 480px white, 600px 600px white, 700px 720px white, 800px 840px white, 900px 960px white,
        1000px 1080px white, 1100px 1200px white, 1200px 1320px white, 50px 1400px white, 150px 1520px white,
        250px 1640px white, 350px 1760px white, 450px 1880px white, 550px 1900px white, 650px 1800px white,
        750px 1700px white, 850px 1600px white, 950px 1500px white, 1050px 1400px white, 1150px 1300px white,
        1250px 1200px white;
    animation: twinkle 5s infinite alternate-reverse; 
}

/* Layer 3: Largest, least dense stars, for depth */
.stars-container > div {
    position: absolute;
    width: 100%;
    height: 100%;
}
.stars-container > div::before {
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    box-shadow:
        80px 40px white, 200px 180px white, 320px 320px white, 440px 460px white, 560px 600px white,
        680px 740px white, 800px 880px white, 920px 1020px white, 1040px 1160px white, 1160px 1300px white,
        1280px 1440px white, 120px 10px white, 240px 150px white, 360px 290px white, 480px 430px white,
        600px 570px white, 720px 710px white, 840px 850px white, 960px 990px white, 1080px 1130px white,
        1200px 1270px white, 60px 1350px white, 180px 1490px white, 300px 1630px white, 420px 1770px white,
        540px 1910px white, 660px 1850px white, 780px 1700px white, 900px 1550px white, 1020px 1400px white,
        1140px 1250px white;
    animation: twinkle 6s infinite ease-in-out; 
}

/* --- Header and Titles --- */
.header-section {
    text-align: center;
    padding: 10vh 0 5vh;
}

.stellar-trace-title {
    font-size: 4.5em; 
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 2rem;
    color: white;
}


/* -------------------- BANNER/NAVBAR STYLES -------------------- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(248, 255, 253, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    height: var(--nav-height);
    padding: 0 20px;
    width: 95%;          
    margin: 10px auto;   
    border-radius: 20px; 
    position: relative;    /* <-- CHANGE THIS FROM STATIC TO RELATIVE */
    top: 0;
    z-index: 100;
}

/* -------------------- HAMBURGER MENU (MOBILE DEFAULT) -------------------- */
.hamburger-menu {
    display: flex; 
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    padding: 5px;
    height: 30px; 
    z-index: 101;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


.logo {
    position: absolute;          /* Forces the logo out of the flex flow */
    left: 50%;                   /* Moves it to the middle */
    transform: translateX(-50%); /* Pulls it back perfectly to dead-center */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; 
    text-decoration: none;
}

/* Add this new block specifically for the image */
.logo img {
    max-height: 40px;          /* Prevents image from stretching the 60px nav */
    width: auto;               /* Maintains aspect ratio */
    max-width: 100%;           /* Ensures it shrinks on extremely small screens */
    object-fit: contain;       /* Keeps the image looking crisp */
}

.action-buttons {
    display: none; 
}


/* -------------------- ACTION BUTTONS -------------------- */
.action-buttons a {
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    margin-left: 10px;
    font-weight: bold;
    transition: background-color 0.3s;
    white-space: nowrap; 
}

.btn-signup {
    background-color: var(--primary-color);
    color: white;
}

.btn-login {
    background-color: var(--background-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-aboutUS, .btn-services, .btn-contact, .btn-plans {
    color: var(--primary-color)
}

/* -------------------- NEW: TEXT DROPDOWN BUTTON -------------------- */
.resource-btn {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;       
    color: var(--primary-color); 
    cursor: pointer;
    padding: 8px 15px;       
    margin-left: 10px;       
    white-space: nowrap;     
    display: flex;
    align-items: center;
    gap: 4px; 
}

.resource-btn + .dropdown-menu {
    top: 100%;
}

/* -------------------- MOBILE MENU OVERLAY (NAVIGATION) -------------------- */
.mobile-menu-overlay {
    position: fixed;
    top: var(--nav-height); 
    left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height)); 
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    padding: 20px;
    font-size: .5rem;
    
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.4s ease-in-out, opacity 0.4s;
    z-index: 99;
    overflow-y: auto; 
}

.mobile-menu-overlay.active {
    transform: translateX(0);
    opacity: 1;
}

.mobile-menu-overlay a {
    text-decoration: none;
    color: var(--text-color);
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    font-size: 3em;
}

.btn-mobile-action {
    background: none;
    color: var(--primary-color);
    font-weight: bold;
    border: none;
    text-align: left;
}


/* -------------------- DESKTOP MEDIA QUERY -------------------- */
@media (min-width: 1050px) {
    .hamburger-menu {
        display: none; 
    }

    .action-buttons {
        display: flex; 
        align-items: center;
    }

    .logo {
        position: static;        /* Puts the logo back into the normal flow */
        transform: none;         /* Removes the centering trick */
        flex-grow: 0;
        justify-content: flex-start; 
        margin-right: 20px; 
    }

    .mobile-menu-overlay {
        display: none !important;
    }
    
    .header-section {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar {
        padding: 0 50px;
    }
}


/* -------------------- MOBILE MEDIA QUERY -------------------- */
@media (max-width: 768px) {
    .content-body {
        grid-template-columns: 1fr; 
        padding-top: 30px;
    }

    .left-text {
        text-align: center;
        margin-bottom: 20px;
    }
}

/* --- USER MENU DROPDOWN STYLES --- */

.user-menu-container {
    position: relative;
    display: inline-block;
    margin-left: 15px;
}

/* The Person Icon Button */
.user-icon-btn {
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 50%; 
    color: var(--primary-color);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.user-icon-btn:hover, .user-icon-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 10px var(--color-pink);
}

/* The Dropdown Box */
.dropdown-menu {
    display: none; 
    position: absolute;
    right: 0;
    top: 120%; 
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    z-index: 200;
    border: 1px solid #eee;
}

.dropdown-menu.show {
    display: block;
}

/* Dropdown Links */
.dropdown-item {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: sans-serif; 
    font-size: 14px;
    transition: background 0.2s;
    text-align: left;
    margin-left: 0; 
}

.dropdown-item:hover {
    background-color: #f1f1f1;
    color: var(--primary-color);
}

.logout-text {
    color: #d9534f; 
    border-top: 1px solid #eee;
}

/* FOOTER STYLES */
.site_footer {
    background-color: rgba(38, 32, 62, 0.55);
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    margin-top: 60px;
    padding: 15px 30px;
    box-sizing: border-box;
    position: sticky;
    top: 100vh;
}

.footer_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.footer_logo {
    font-family: var(--font-family);
    font-size: 1em;
    color: white;
    letter-spacing: 1px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.footer_links {
    display: flex;
    gap: 20px;
}

.footer_links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}

.footer_links a:hover {
    color: var(--color-pink);
}

.footer_copyright {
    font-size: 0.8em;
    color: white;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .site_footer {
        padding: 10px 15px; 
    }

    .footer_content {
        flex-direction: row; 
        justify-content: space-between;
    }
    
    .footer_links {
        gap: 15px; 
    }

    .footer_logo {
        display: none;
    }

    .footer_copyright {
        font-size: 0.7em; 
    }
}