/* ============================================================
   RAYMONDBROGAN.COM
   COMING SOON
   Version 1
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --black:
        #08090b;

    --background:
        #0b0c0e;

    --background-two:
        #101216;

    --surface:
        #16191e;

    --surface-two:
        #1c2026;

    --border:
        rgba(255,255,255,.08);

    --border-bright:
        rgba(255,255,255,.14);

    --text:
        #f1f2f3;

    --text-secondary:
        #a9adb3;

    --text-muted:
        #666b72;

    --orange:
        #e66a22;

    --orange-bright:
        #ff7b2f;

    --max-width:
        1080px;

}


/* ============================================================
   RESET
   ============================================================ */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

}


body {

    min-height:
        100vh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


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

.coming-soon-page {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    padding:
        40px 25px 25px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    overflow:
        hidden;

}


/* ============================================================
   BACKGROUND GRID
   ============================================================ */

.background-grid {

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        65px 65px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0,0,0,.5) 55%,
            transparent 100%
        );

    pointer-events:
        none;

}


/* ============================================================
   BACKGROUND GLOWS
   ============================================================ */

.background-glow {

    position:
        fixed;

    z-index:
        0;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(20px);

}


.background-glow-one {

    width:
        600px;

    height:
        600px;

    top:
        -300px;

    right:
        -200px;

    background:
        radial-gradient(
            circle,
            rgba(230,106,34,.12),
            transparent 68%
        );

}


.background-glow-two {

    width:
        500px;

    height:
        500px;

    bottom:
        -300px;

    left:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.035),
            transparent 68%
        );

}


/* ============================================================
   BRAND
   ============================================================ */

.brand {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        var(--max-width);

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.brand-mark {

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--surface);

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

    border-radius:
        7px;

    color:
        var(--orange-bright);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        -1px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}


.brand-name {

    color:
        var(--text);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.brand-name span {

    color:
        var(--text-muted);

}


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

.hero {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        900px;

    margin:
        125px auto 0;

    text-align:
        center;

}


.eyebrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.eyebrow-line {

    width:
        35px;

    height:
        1px;

    background:
        var(--orange);

    opacity:
        .7;

}


.hero h1 {

    margin-top:
        25px;

    font-size:
        clamp(
            3.2rem,
            9vw,
            7.5rem
        );

    line-height:
        .9;

    font-weight:
        800;

    letter-spacing:
        -6px;

}


.hero h1 .accent {

    display:
        block;

    color:
        var(--orange-bright);

    text-shadow:
        0 0 40px rgba(230,106,34,.12);

}


.intro {

    max-width:
        650px;

    margin:
        35px auto 0;

    color:
        var(--text-secondary);

    font-size:
        16px;

    line-height:
        1.8;

}


.statement {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        25px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.statement span:not(:last-child)::after {

    content:
        " /";

    margin-left:
        12px;

    color:
        var(--orange);

}


/* ============================================================
   COUNTDOWN
   ============================================================ */

.countdown-section {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        850px;

    margin:
        80px auto 0;

    padding:
        35px 25px;

    background:
        rgba(22,25,30,.72);

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

    border-radius:
        10px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);

    backdrop-filter:
        blur(12px);

}


.section-label {

    margin-bottom:
        25px;

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-align:
        center;

}


.countdown {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

}


.time-box {

    min-width:
        120px;

    text-align:
        center;

}


.time-value {

    color:
        var(--text);

    font-size:
        clamp(
            2.3rem,
            6vw,
            4rem
        );

    line-height:
        1;

    font-weight:
        300;

    letter-spacing:
        -2px;

    font-variant-numeric:
        tabular-nums;

}


.time-label {

    margin-top:
        10px;

    color:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.time-separator {

    margin-top:
        -15px;

    color:
        var(--orange);

    font-size:
        25px;

    opacity:
        .7;

}


.launch-message {

    margin-top:
        28px;

    color:
        var(--orange);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-align:
        center;

}


/* ============================================================
   SIGNUP
   ============================================================ */

.notify-section {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        850px;

    margin:
        20px auto 0;

}


.notify-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;

    padding:
        30px;

    background:
        var(--surface);

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

    border-radius:
        10px;

}


.notify-icon {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(230,106,34,.3);

    border-radius:
        7px;

    color:
        var(--orange-bright);

    font-size:
        22px;

}


.notify-content {

    flex:
        1;

}


.notify-label {

    color:
        var(--orange);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.notify-content h2 {

    margin-top:
        7px;

    font-size:
        25px;

    letter-spacing:
        -.5px;

}


.notify-content p {

    max-width:
        600px;

    margin-top:
        8px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.7;

}


.signup-form {

    display:
        flex;

    gap:
        8px;

    margin-top:
        20px;

}


.signup-form input {

    min-width:
        0;

    flex:
        1;

    height:
        48px;

    padding:
        0 15px;

    background:
        var(--background-two);

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

    border-radius:
        5px;

    outline:
        none;

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        13px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}


.signup-form input::placeholder {

    color:
        var(--text-muted);

}


.signup-form input:focus {

    border-color:
        var(--orange);

    box-shadow:
        0 0 0 3px rgba(230,106,34,.08);

}


.signup-form button {

    height:
        48px;

    padding:
        0 22px;

    border:
        0;

    border-radius:
        5px;

    background:
        var(--orange);

    color:
        #ffffff;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}


.signup-form button:hover {

    background:
        var(--orange-bright);

    box-shadow:
        0 8px 25px rgba(230,106,34,.18);

    transform:
        translateY(-1px);

}


.privacy-note {

    margin-top:
        12px;

    color:
        var(--text-muted);

    font-size:
        9px;

}


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

.contact-section {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        850px;

    margin:
        70px auto 0;

    padding:
        30px 0 0;

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

}


.contact-heading {

    color:
        var(--text);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.contact-heading span {

    margin-right:
        10px;

    color:
        var(--orange);

}


.contact-links {

    display:
        flex;

    gap:
        12px;

    margin-top:
        18px;

}


.contact-link {

    flex:
        1;

    padding:
        18px 20px;

    background:
        rgba(22,25,30,.65);

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

    border-radius:
        6px;

    transition:
        border-color .25s ease,
        transform .25s ease;

}


.contact-link:hover {

    border-color:
        rgba(230,106,34,.4);

    transform:
        translateY(-2px);

}


.contact-type {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--orange);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.contact-address {

    color:
        var(--text-secondary);

    font-size:
        12px;

}


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

.footer {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        850px;

    margin:
        60px auto 0;

    padding:
        25px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    color:
        var(--text-muted);

}


.footer-brand {

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

    white-space:
        nowrap;

}


.footer-brand span {

    color:
        #4f5359;

}


.footer-line {

    flex:
        1;

    height:
        1px;

    background:
        var(--border);

}


.footer-copy {

    font-size:
        8px;

    letter-spacing:
        .3px;

    text-align:
        right;

    color:
        var(--orange);

    font-weight:
        700;

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0,0,0,0);

    white-space:
        nowrap;

    border:
        0;

}


:focus-visible {

    outline:
        2px solid var(--orange-bright);

    outline-offset:
        4px;

}


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

@media (max-width: 700px) {


    .coming-soon-page {

        padding:
            28px 16px 20px;

    }


    .brand-name {

        font-size:
            11px;

        letter-spacing:
            2px;

    }


    .hero {

        margin-top:
            90px;

    }


    .hero h1 {

        font-size:
            clamp(
                3rem,
                16vw,
                5rem
            );

        letter-spacing:
            -3px;

    }


    .intro {

        font-size:
            14px;

    }


    .statement {

        flex-direction:
            column;

        gap:
            5px;

    }


    .statement span:not(:last-child)::after {

        display:
            none;

    }


    .countdown-section {

        margin-top:
            55px;

        padding:
            28px 10px;

    }


    .countdown {

        gap:
            5px;

    }


    .time-box {

        min-width:
            65px;

    }


    .time-value {

        font-size:
            2rem;

    }


    .time-label {

        font-size:
            7px;

        letter-spacing:
            1px;

    }


    .time-separator {

        font-size:
            18px;

    }


    .notify-card {

        flex-direction:
            column;

        padding:
            25px;

    }


    .notify-icon {

        width:
            42px;

        height:
            42px;

        flex-basis:
            42px;

    }


    .signup-form {

        flex-direction:
            column;

    }


    .signup-form input,
    .signup-form button {

        width:
            100%;

    }


    .contact-links {

        flex-direction:
            column;

    }


    .footer {

        flex-direction:
            column;

        align-items:
            stretch;

        text-align:
            center;

    }


    .footer-line {

        width:
            100%;

    }


    .footer-copy {

        text-align:
            center;

    }

}


/* ============================================================
   ALREADY ON THE LIST
   ============================================================ */

.already-icon {

    color:
        var(--orange-bright);

    border-color:
        rgba(230,106,34,.35);

    background:
        rgba(230,106,34,.08);

}


.signup-date {

    width:
        min(360px, 100%);

    margin:
        28px auto 5px;

    padding:
        18px 22px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        7px;

    background:
        var(--surface-two);

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

    border-left:
        3px solid var(--orange);

    border-radius:
        7px;

}


.date-label {

    color:
        var(--text-muted);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.date-value {

    color:
        var(--orange-bright);

    font-size:
        22px;

    font-weight:
        700;

    letter-spacing:
        1px;

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

    }

}