/* =========================================
   BahaTell
   Coming Soon Page
   ========================================= */


/* -----------------------------------------
   Variables
   ----------------------------------------- */

:root {

    --navy: #123a68;

    --green: #079447;

    --text: #122033;

    --muted: #64748b;

    --light-border: rgba(18, 58, 104, 0.10);

}


/* -----------------------------------------
   Reset
   ----------------------------------------- */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* -----------------------------------------
   HTML
   ----------------------------------------- */

html {

    min-height: 100%;

}


/* -----------------------------------------
   Body
   ----------------------------------------- */

body {

    min-height: 100vh;

    font-family:

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Tahoma,

        Arial,

        sans-serif;

    color: var(--text);

    background:

        radial-gradient(

            circle at 50% 0%,

            rgba(7, 148, 71, 0.07),

            transparent 34%

        ),

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f7fafc 100%

        );

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


/* -----------------------------------------
   Main Page
   ----------------------------------------- */

.page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 32px 18px;

}


/* -----------------------------------------
   Main Card
   ----------------------------------------- */

.hero {

    width: min(820px, 100%);

    text-align: center;

    padding: 34px 28px 46px;

    background: rgba(255, 255, 255, 0.94);

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

    border-radius: 28px;

    box-shadow:

        0 24px 70px

        rgba(18, 58, 104, 0.10);

    animation: fadeIn 0.7s ease-out;

}


/* -----------------------------------------
   Logo
   ----------------------------------------- */

.logo-container {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 12px;

}


.logo {

    width: min(560px, 92vw);

    height: auto;

    display: block;

    object-fit: contain;

}


/* -----------------------------------------
   Status
   ----------------------------------------- */

.status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin: 6px 0 24px;

    border-radius: 999px;

    background: rgba(7, 148, 71, 0.08);

    border: 1px solid rgba(7, 148, 71, 0.16);

    color: #08753c;

    font-size: 14px;

    font-weight: 700;

}


/* Green Status Dot */

.status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:

        0 0 0 5px

        rgba(7, 148, 71, 0.10);

    animation: pulse 1.8s infinite;

}


/* -----------------------------------------
   Main Heading
   ----------------------------------------- */

h1 {

    color: var(--navy);

    font-size: clamp(27px, 5vw, 43px);

    line-height: 1.6;

    font-weight: 800;

    letter-spacing: -0.6px;

    margin-bottom: 22px;

}


/* -----------------------------------------
   Description
   ----------------------------------------- */

.description {

    max-width: 650px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 17px;

    line-height: 2;

}


/* -----------------------------------------
   Manager
   ----------------------------------------- */

.manager {

    margin-top: 25px;

    color: #475569;

    font-size: 15px;

}


.manager strong {

    color: var(--navy);

    font-weight: 700;

}


/* -----------------------------------------
   Divider
   ----------------------------------------- */

.divider {

    width: 64px;

    height: 2px;

    margin: 30px auto 22px;

    border-radius: 10px;

    background: var(--green);

}


/* -----------------------------------------
   Coming Soon
   ----------------------------------------- */

.coming-soon {

    color: #8290a3;

    font-size: 14px;

    font-weight: 600;

}


/* -----------------------------------------
   Fade In Animation
   ----------------------------------------- */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(14px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* -----------------------------------------
   Status Animation
   ----------------------------------------- */

@keyframes pulse {

    0%,
    100% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.55;

        transform: scale(0.85);

    }

}


/* -----------------------------------------
   Mobile
   ----------------------------------------- */

@media (max-width: 600px) {

    .page {

        padding: 14px;

    }


    .hero {

        padding: 24px 16px 34px;

        border-radius: 22px;

    }


    .logo {

        width: 100%;

    }


    h1 {

        font-size: 26px;

        line-height: 1.65;

    }


    .description {

        font-size: 15px;

        line-height: 1.9;

    }


    .manager {

        font-size: 14px;

    }

}