/* =========================
       General Reset
    ========================= */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body{
        font-family: "Space Mono", monospace, sans-serif;
        line-height: 1.6;
        background-color: #082F39;
        color: #ecf0f1;
        overflow-x: hidden;
        min-height: 100vh;
    }

    /* =========================
       Header / Navigation
    ========================= */
    .Isynseori{
        position: sticky;
        top: 0;
        z-index: 1000;
        height: auto;
        padding: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.10);
        background: linear-gradient(
            45deg,
            #2c3e50,
            #8e44ad,
            #27ae60,
            #f3f3f3,
            #2c3e50
        );
        background-size: 400% 400%;
        animation: gradientAnimation 15s ease infinite;
    }

    .Isynseori nav{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    nav a{
        text-decoration: none;
        color: #F9C9A1;
        background-color: #082F39;
        padding: 10px 16px;
        border-radius: 7px;
        font-size: 0.95rem;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    nav a:hover{
        background-color: #16544A;
        transform: scale(1.03);
    }

    /* ---------------------------------
       Soft dotted gradient border under header
    --------------------------------- */
    .Isynseori::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;              /* Adjust distance from header */
        height: 10px;              /* Thickness of border zone */
        pointer-events: none;
        /* Layer 1: dark grey dotted circles
           Layer 2: left-to-right gradient from dark grey to black */
        background-image:
            radial-gradient(circle, #666666 2px, transparent 2px),
            linear-gradient(to right, #555555, #000000);
        background-size:
            10px 10px,             /* dot spacing */
            100% 100%;             /* gradient covers whole width */
        background-repeat:
            repeat-x,
            no-repeat;
        background-position:
            0 50%,
            0 0;
        background-blend-mode: normal;
    }

    /* =========================
       Hero Banner
    ========================= */
    .syncus-hero{
        display: flex;
        justify-content: center;
        padding: 18px 0 6px;
    }

    .syncus-hero img{
        width: 65vw;
        max-width: 980px;
        height: auto;
        display: block;
    }

    /* =========================
       Main Image Stack / Content
    ========================= */
    .main-content{
        max-width: 100%;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 18px 0 60px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }

    .main-content .home-seq{
        width: 65vw;
        max-width: 980px;
        height: auto;
        display: block;
    }

    /* =========================
       Sticky Side Banners
       (image defines ratio, no background frame)
    ========================= */
    .left-sticky-banner,
    .right-sticky-banner{
        position: fixed;
        width: 15vw;               /* desktop horizontal scale driver */
        max-width: 768px;
        min-width: 52px;
        height: auto;              /* height follows image ratio */
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
        z-index: 10;
    }

    .left-sticky-banner{
        left: 0;
        bottom: 0%;
    }

    .right-sticky-banner{
        right: 0;
        top: 15%;
    }

    .left-sticky-banner img,
    .right-sticky-banner img{
        width: 100%;
        height: auto;
        display: block;
    }

    /* =========================
       Footer
       (image + buttons aligned to bottom)
    ========================= */
    .footer-banner{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;   /* pin contents to bottom */
        align-items: center;
        gap: 6px;
        padding: 20px;
        color: #fff;
        background: linear-gradient(
            45deg,
            #2c3e50,
            #8e44ad,
            #27ae60,
            #f3f3f3,
            #2c3e50
        );
        background-size: 400% 400%;
        animation: gradientAnimation 15s ease infinite;
    }

    .footer-banner img{
        max-width: 100px;
        height: auto;
        margin: 0;
    }

    .footer-buttons{
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .footer-buttons .button-link{
        text-decoration: none;
        color: #fff;
        background-color: #3498db;
        padding: 10px 18px;
        border-radius: 7px;
    }

    .footer-buttons .button-link:hover{
        background-color: #2980b9;
    }

    /* ---------------------------------
       Soft dotted gradient border above footer
    --------------------------------- */
    .footer-banner::before{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -6px;                 /* distance above footer */
        height: 10px;              /* thickness of border zone */
        pointer-events: none;
        /* Layer 1: dark grey dotted circles
           Layer 2: left-to-right gradient from dark grey to black */
        background-image:
            radial-gradient(circle, #666666 2px, transparent 2px),
            linear-gradient(to right, #555555, #000000);
        background-size:
            10px 10px,             /* dot spacing */
            100% 100%;             /* gradient covers whole width */
        background-repeat:
            repeat-x,
            no-repeat;
        background-position:
            0 50%,
            0 0;
        background-blend-mode: normal;
    }

    /* =========================
       Animations
    ========================= */
    @keyframes gradientAnimation{
        0%{
            background-position: 0% 50%;
        }
        50%{
            background-position: 100% 50%;
        }
        100%{
            background-position: 0% 50%;
        }
    }

    /* =========================
       Mobile Scaling (banners stay ON, header not sticky)
    ========================= */
    @media (max-width: 768px){
        /* Header: no longer sticky, but still positioned
           so the ::after pseudo-element can anchor to it */
        .Isynseori{
            position: relative;     /* not sticky, but non-static */
            top: auto;
        }

        .syncus-hero img,
        .main-content .home-seq{
            width: 92vw;
            max-width: 92vw;
        }

        /* Side banners: ~20% smaller than desktop (15vw → 12vw),
           both visible and fixed */
        .left-sticky-banner,
        .right-sticky-banner{
            width: 12vw;            /* 20% smaller than 15vw */
            max-width: 72px;
            min-width: 44px;
            display: block;
        }

        .left-sticky-banner{
            left: 0;
            bottom: 0%;
        }

        .right-sticky-banner{
            right: 0;
            top: 15%;               /* adjust if needed for very small screens */
        }

        nav a{
            font-size: 0.9rem;
            padding: 9px 14px;
        }
    }