/* ========================================
   BUSMATE APK DOWNLOADER
   ======================================== */


/* ========================================
   GLOBAL
   ======================================== */

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


:root {

    --background: #0f1117;

    --card: #1a1d26;

    --card-soft: #151821;

    --text: #f5f5f5;

    --muted: #9da2ae;

    --accent: #d9ff00;

    --border: rgba(255, 255, 255, 0.08);

}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background: var(--background);

    color: var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;

    overflow-x: hidden;

}


body::before {

    content: "";

    position: fixed;

    left: 50%;

    top: var(--glow-position, 10%);

    width: 550px;

    height: 550px;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(217, 255, 0, 0.09) 0%,
            rgba(217, 255, 0, 0.045) 30%,
            transparent 70%
        );

    filter:
        blur(25px);

    pointer-events: none;

    z-index: -1;

    transition:
        top 0.25s ease-out;

}



/* ========================================
   HEADER
   ======================================== */

/* ========================================
   HEADER
   ======================================== */

.topbar {

    width: min(
        1100px,
        calc(100% - 32px)
    );

    margin: auto;

    padding: 24px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid var(--border);

}


.brand {

    font-size: 1.45rem;

    font-weight: 800;

    letter-spacing: -0.5px;

}


.download-label {

    color: var(--accent);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1.3px;

}



/* ========================================
   MAIN
   ======================================== */

main {

    width: min(
        900px,
        calc(100% - 32px)
    );

    margin: auto;

}



/* ========================================
   HERO
   ======================================== */

.hero {

    text-align: center;

    padding:
        55px 0
        45px;

}



/* BUSMATE LOGO */

.hero-logo {

    width: 220px;

    max-width: 70%;

    height: auto;

    display: block;

    margin:
        0 auto
        25px;

}



/* ========================================
   EYEBROW
   ======================================== */

.eyebrow {

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 10px;

}



/* ========================================
   HEADING
   ======================================== */

h1 {

    font-size:
        clamp(
            2.2rem,
            7vw,
            4.5rem
        );

    line-height: 1.05;

    letter-spacing: -2px;

}


h1 span {

    color: var(--accent);

}



/* ========================================
   SUBTITLE
   ======================================== */

.subtitle {

    max-width: 560px;

    margin:
        20px auto
        34px;

    color: var(--muted);

    font-size: 1.05rem;

}



/* ========================================
   DOWNLOAD CARD
   ======================================== */

.download-card {

    max-width: 650px;

    margin: 0 auto;

    padding: 24px;

    background: var(--card);

    border:
        1px solid var(--border);

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    text-align: left;

}



/* ========================================
   APP INFORMATION
   ======================================== */

.card-label {

    color: var(--accent);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.download-card h2 {

    margin-top: 3px;

    font-size: 1.35rem;

}


.meta {

    color: var(--muted);

    font-size: 0.86rem;

    margin-top: 2px;

}



/* ========================================
   DOWNLOAD BUTTON
   ======================================== */

.download-btn {

    flex-shrink: 0;

    padding:
        15px 22px;

    border-radius: 12px;

    background: var(--accent);

    color: var(--background);

    text-decoration: none;

    font-size: 0.78rem;

    font-weight: 900;

    letter-spacing: 0.8px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.download-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        rgba(217, 255, 0, 0.16);

}


.download-btn:active {

    transform:
        translateY(0);

}



/* ========================================
   NOTE
   ======================================== */

.note {

    margin-top: 15px;

    color: var(--muted);

    font-size: 0.78rem;

}



/* ========================================
   INSTALLATION
   ======================================== */

.install {

    padding:
        35px 0
        75px;

}


.install > h2 {

    margin-bottom: 18px;

    font-size: 1.45rem;

}



/* ========================================
   STEPS
   ======================================== */

.steps {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

}


.step {

    padding: 22px;

    background: var(--card-soft);

    border:
        1px solid var(--border);

    border-radius: 18px;

}


.step > span {

    display: inline-block;

    margin-bottom: 22px;

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 900;

}


.step h3 {

    font-size: 1rem;

    margin-bottom: 7px;

}


.step p {

    color: var(--muted);

    font-size: 0.84rem;

}



/* ========================================
   FOOTER
   ======================================== */

footer {

    border-top:
        1px solid var(--border);

    padding:
        22px 16px;

    text-align: center;

    color: var(--muted);

    font-size: 0.75rem;

}



/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 700px) {


    .topbar {

        padding:
            16px 0;

    }


    .brand img {

        width: 115px;

    }


    .download-label {

        font-size: 0.65rem;

    }


    .hero {

        padding:
            45px 0
            40px;

    }


    .hero-logo {

        width: 180px;

        margin-bottom: 22px;

    }


    .download-card {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

    }


    .download-btn {

        width: 100%;

        text-align: center;

    }


    .steps {

        grid-template-columns: 1fr;

    }


    .step {

        display: grid;

        grid-template-columns:
            42px 1fr;

        gap: 8px;

    }


    .step > span {

        margin: 0;

    }

}