/* ============================================================
   DARFCLOUD MOBILE CSS
   Loaded AFTER index.css so mobile rules override desktop.
   ============================================================ */

@media screen and (max-width: 768px) {

    /* ========================================================
       PAGE
       ======================================================== */

    body {
        background: #000000;

        padding: 30px 15px;

        justify-content: flex-start;

        min-height: 100vh;
    }

    body::after {
        content: '';

        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        height: 60vh;

        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 45%,
                rgba(0, 0, 0, 0.35) 65%,
                rgba(0, 0, 0, 0.8) 85%,
                #000000 100%
            ),
            url('../images/background.png') center top / cover no-repeat;

        pointer-events: none;

        z-index: 0;
    }

    .container {
        width: 100%;
        max-width: 100%;
    }


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

    .logo-container {
        width: 100%;

        margin-bottom: 20px;
    }

    .brand-logo-img {
        max-width: 90%;
    }

    .tagline-bar {
        display: inline-block;

        font-size: 0.58rem;

        letter-spacing: 1.5px;

        margin-top: 8px;

        padding: 6px 10px;

        white-space: nowrap;

        background:
            rgba(5, 5, 15, 0.65);

        border-radius: 8px;
    }

    .tagline-bar span {
        margin: 0 4px;
    }


    /* ========================================================
       COMING SOON
       ======================================================== */

    .coming-soon-wrapper {
        margin: 30px 0;
    }

    .coming-soon-title {
        font-size: 1.15rem;

        letter-spacing: 4px;

        gap: 10px;
    }

    .coming-soon-title::before,
    .coming-soon-title::after {
        width: 30px;
    }


    /* ========================================================
       BUSINESS LINE CARDS
       ======================================================== */

    .business-lines {
        grid-template-columns: 1fr;

        gap: 18px;

        margin: 30px auto 35px;

        width: 92%;
    }

    .business-card {
        height: 270px;

        border-radius: 20px;
    }

    .business-card img {
        filter: brightness(0.7);
    }

    .business-card-title {
        left: 20px;
        right: 20px;

        bottom: 105px;

        font-size: 1.05rem;

        letter-spacing: 2.5px;
    }

    .business-card-description {
        left: 20px;
        right: 20px;

        bottom: 24px;

        font-size: 0.95rem;

        line-height: 1.35;

        opacity: 1;

        transform: none;
    }

    .business-card::after {
        left: 20px;
        right: 20px;

        bottom: 17px;

        opacity: 1;

        transform: scaleX(1);
    }


    /* ========================================================
       LAUNCH DATE
       ======================================================== */

    .target-date {
        font-size: 1rem;

        letter-spacing: 4px;
    }


    /* ========================================================
       INFO / LINKS
       ======================================================== */

    .info-text {
        font-size: 1.05rem;

        line-height: 1.5;

        margin-bottom: 18px;
    }


    /* ========================================================
       FROSMEAR BUTTON
       ======================================================== */

    .btn-gradient {
        font-size: 0.9rem;

        padding: 12px 24px;

        gap: 8px;

        margin-bottom: 35px;
    }

    .btn-gradient svg {
        width: 16px;
        height: 16px;
    }


    /* ========================================================
       EMAIL CONTACT
       ======================================================== */

    .contact-section {
        width: 80%;

        max-width: 80%;

        min-width: 0;

        margin: 0 auto 30px;

        padding: 18px 15px 20px;
    }

    .contact-title {
        font-size: 0.75rem;

        letter-spacing: 3px;
    }

    .contact-message {
        font-size: 0.9rem;

        margin-bottom: 11px;
    }

    .contact-email {
        font-size: 0.82rem;

        gap: 6px;
    }

    .email-icon {
        font-size: 0.82em;
    }


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

    .footer-notes {
        display: inline-block;

        font-size: 0.48rem;

        letter-spacing: 1px;

        padding: 6px 10px;

        white-space: nowrap;

        background:
            rgba(5, 5, 15, 0.65);

        border-radius: 8px;
    }

    .footer-notes span {
        margin: 0 4px;
    }


    /* ========================================================
       COPYRIGHT
       ======================================================== */

    .copyright {
        font-size: 0.45rem;

        letter-spacing: 1px;

        margin-top: 12px;
    }
}