* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Nunito',sans-serif;
    min-height: 100vh;
    background-image: url("../images/StarbabyBackground.png");
    background-size: 100%;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}



/* centered app frame */

.site-container {
    width: 95%;
    max-width: 1000px;
    min-height: 100vh;
    margin: auto;
    padding: 30px;
    border-radius: 40px;
    background: rgba(205,232,255,.0);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 35px rgba(248,165,27,.18), 0 0 90px rgba(0,0,0,.25);
}



/* logo */

.logo {
    width: 400px;
    display: block;
    margin: auto;
    filter: drop-shadow(0 0 18px rgba(255,210,90,.55)) drop-shadow(0 0 40px rgba(248,165,27,.45)) drop-shadow(0 0 75px rgba(248,165,27,.25));
}



/* navigation */

.nav-tabs {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}



    .nav-tabs a {
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: #1C3F82;
        font-family: 'Nunito',sans-serif;
        font-size: 18px;
        padding: 13px 24px;
        border-radius: 999px;
        font-weight: 700;
        background: linear-gradient( to bottom, #ffffff 0%, #fffaf0 38%, #f3dfbd 100% );
        box-shadow: inset 0 3px 5px rgba(255,255,255,.95), inset 0 -4px 8px rgba(151,105,35,.18), 0 5px 12px rgba(0,0,0,.16);
        transition: .25s;
    }



        .nav-tabs a::before {
            content: "";
            position: absolute;
            top: 4px;
            left: 12%;
            width: 76%;
            height: 38%;
            border-radius: 999px;
            background: linear-gradient( to bottom, rgba(255,255,255,.9), rgba(255,255,255,.18) );
            pointer-events: none;
        }



        .nav-tabs a:hover {
            transform: translateY(-2px);
            background: linear-gradient( to bottom, #ffd88a, #f8a51b );
            color: white;
        }



/* footer */

.site-footer {
    margin-top: 60px;
    padding: 20px;
    text-align: center;
    color: #f7f2e7;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    border-top: 1px solid rgba(255,255,255,.15);
}



/* homepage cards */

.home-card,
.why-card,
.gallery-card {
    background: rgba(6, 14, 48, 0.92);
    margin: 22px auto;
    width: 85%;
    padding: 25px;
    border-radius: 35px;
    text-align: center;
    border: 1px solid rgba(120,180,255,.18);
    box-shadow: 0 0 20px rgba(90,150,255,.12), 0 10px 30px rgba(0,0,0,.28), inset 0 0 18px rgba(120,180,255,.06);
}



/* foreground layer setup */

.home-card,
.why-card {
    position: relative;
    overflow: visible;
}



    /* slogan */

    .home-card h1 {
        color: #ffffff;
        font-size: 38px;
        margin-bottom: 25px;
    }



/* Starbaby foreground mascot */

.starbaby-float {
    position: absolute;
    width: 210px;
    right: -45px;
    bottom: -55px;
    z-index: 999;
    pointer-events: none;
    filter: drop-shadow(0 0 14px rgba(248,165,27,.45));
}



/* planet foreground cluster */

.planet-cluster {
    position: absolute;
    width: 185px;
    left: -55px;
    bottom: -55px;
    z-index: 999;
    pointer-events: none;
    filter: drop-shadow(0 0 14px rgba(168,216,255,.45));
}



/* contact */

.contact-button {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-family: 'Nunito',sans-serif;
    font-size: 18px;
    font-weight: 800;
    padding: 16px 38px;
    border-radius: 999px;
    background: linear-gradient( to bottom, #ffcb70, #f8a51b );
    box-shadow: 0 6px 16px rgba(248,165,27,.35);
    transition: .25s;
}



    .contact-button::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 12%;
        width: 76%;
        height: 38%;
        border-radius: 999px;
        background: linear-gradient( to bottom, rgba(255,255,255,.9), rgba(255,255,255,.18) );
        opacity: 0;
        transition: .25s;
        pointer-events: none;
    }



    .contact-button:hover {
        position: relative;
        overflow: hidden;
        transform: translateY(-3px) scale(1.03);
        background: linear-gradient( to bottom, #ffd77c 0%, #ffbe45 45%, #f8a51b 100% );
        box-shadow: inset 0 3px 5px rgba(255,255,255,.95), inset 0 -4px 8px rgba(180,100,0,.20), 0 6px 16px rgba(248,165,27,.45), 0 0 25px rgba(248,165,27,.25);
    }



        .contact-button:hover::before {
            opacity: 1;
        }



/* why */

.why-card h2 {
    color: #ffffff;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(168,216,255,.85), 0 0 18px rgba(168,216,255,.55), 0 0 30px rgba(120,190,255,.35);
}



.why-card p {
    color: #d6e7ff;
    line-height: 1.8;
    font-size: 22px;
}



/* gallery */

.gallery-card {
    position: relative;
    overflow: visible;
}

.gallery-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    color: #ffffff;
    transition: .25s;
}

    .gallery-link::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(.45);
        opacity: 0;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient( circle, rgba(255,238,145,.45) 0%, rgba(255,213,106,.32) 28%, rgba(248,165,27,.18) 52%, rgba(248,165,27,.08) 68%, transparent 82% );
        filter: blur(4px);
        transition: .3s ease;
    }

    .gallery-link:hover {
        color: #f8a51b;
        transform: scale(1.08);
        text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,213,106,.85), 0 0 28px rgba(248,165,27,.65);
    }

        .gallery-link:hover::before {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }



/* mobile */

@media(max-width:768px) {

    .starbaby-float {
        width: 145px;
        right: -20px;
        bottom: -35px;
    }

    .planet-cluster {
        width: 135px;
        left: -25px;
        bottom: -35px;
    }

    .home-card h1 {
        font-size: 30px;
    }
}

/* ==========================
   MOBILE HOMEPAGE POLISH
========================== */

@media(max-width:768px) {

    body {
        background-size: cover;
        background-position: center top;
        background-attachment: scroll;
        overflow-x: hidden;
    }


    .site-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 18px 14px 35px;
        border-radius: 0;
        box-sizing: border-box;
    }


    .logo {
        width: min(82vw, 330px);
    }


    .nav-tabs {
        width: 92%;
        margin: 20px auto 26px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }


        .nav-tabs a {
            width: 100%;
            box-sizing: border-box;
            padding: 15px 10px;
            font-size: 22px;
        }


    .home-card,
    .why-card,
    .gallery-card {
        width: 92%;
        padding: 30px 20px;
        border-radius: 34px;
        box-sizing: border-box;
        margin: 24px auto;
    }


        .home-card h1 {
            font-size: 42px;
            line-height: 1.35;
        }


        .home-card .contact-button {
            width: 82%;
            max-width: 360px;
            box-sizing: border-box;
            font-size: 22px;
            line-height: 1.35;
            padding: 18px 20px;
        }


    .starbaby-float {
        width: 115px;
        right: 4px;
        bottom: -22px;
    }


    .planet-cluster {
        width: 120px;
        left: -18px;
        bottom: -26px;
    }


    .why-card h2 {
        font-size: 38px;
        line-height: 1.25;
    }


    .why-card p {
        font-size: 19px;
        line-height: 1.75;
    }


    .gallery-link {
        font-size: 30px;
    }
}

/* ==========================
   MOBILE FINAL BACKGROUND + SPACING FIX
========================== */

@media(max-width:768px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }


    body {
        background-image: url("../images/StarbabyBackground.png");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color: #061030;
    }


    .site-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 16px 12px 35px;
        box-sizing: border-box;
        background: rgba(6, 14, 48, .30);
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .logo {
        width: min(76vw, 300px);
        margin-top: 10px;
        margin-bottom: 18px;
    }


    .nav-tabs {
        width: 88%;
        max-width: 330px;
        margin: 14px auto 24px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
    }


        .nav-tabs a {
            width: 100%;
            padding: 13px 8px;
            font-size: 19px;
            box-sizing: border-box;
        }


    .home-card,
    .why-card,
    .gallery-card {
        width: 88%;
        max-width: 340px;
        padding: 26px 18px;
        margin: 20px auto;
        border-radius: 30px;
        box-sizing: border-box;
    }


        .home-card h1 {
            font-size: 31px;
            line-height: 1.35;
        }


        .home-card .contact-button {
            width: 88%;
            max-width: 285px;
            padding: 16px 18px;
            font-size: 18px;
            line-height: 1.4;
            box-sizing: border-box;
        }


    .starbaby-float {
        width: 92px;
        right: 4px;
        bottom: -18px;
    }


    .planet-cluster {
        width: 105px;
        left: -12px;
        bottom: -22px;
    }


    .why-card h2 {
        font-size: 31px;
        line-height: 1.25;
    }


    .why-card p {
        font-size: 18px;
        line-height: 1.7;
    }


    .gallery-link {
        font-size: 27px;
    }
}