/* ============================================================
   QUICKRY — COMING SOON
   Premium Mobile-First Landing Page
   ============================================================ */


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

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background: #080808;

    color: #ffffff;

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body,
button,
input {
    font-family: inherit;
}


button,
input {
    border: 0;
    outline: none;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
    display: block;
}


::selection {
    background: rgba(255, 107, 0, 0.25);
    color: #ffffff;
}


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

:root {

    --orange: #ff6b00;

    --orange-light: #ff8a3d;

    --orange-dark: #e85d00;

    --black: #080808;

    --black-soft: #0d0d0d;

    --panel: #111111;

    --panel-soft: #141414;

    --white: #ffffff;

    --text: #eeeeee;

    --muted: #999999;

    --muted-dark: #666666;

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

    --border-orange:
        rgba(255, 107, 0, 0.25);

    --container:
        1120px;

    --radius:
        18px;

}


/* ============================================================
   CONTAINER
   ============================================================ */

.container {

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

    margin-inline:
        auto;

}


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

.background-grid {

    position: fixed;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    opacity: 0.32;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 75%
        );

}


.bg-glow {

    position: fixed;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter:
        blur(120px);

    pointer-events: none;

    z-index: -3;

    opacity: 0.11;

}


.glow-one {

    top: -250px;
    left: -220px;

    background:
        var(--orange);

}


.glow-two {

    right: -280px;
    bottom: -280px;

    background:
        #ff9b5d;

}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {

    position:
        relative;

    z-index:
        20;

    padding:
        18px 0;

}


.nav-inner {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    font-size:
        20px;

    font-weight:
        800;

    letter-spacing:
        -0.7px;

}


.logo-mark {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            #ff7900,
            #ff5b00
        );

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        800;

    box-shadow:
        0 8px 24px
        rgba(255, 107, 0, 0.18);

}


.logo-text {
    color:
        #ffffff;
}


.nav-btn {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 14px;

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

    border-radius:
        999px;

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

    color:
        #dddddd;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        180ms ease;

}


.nav-btn i {

    font-size:
        9px;

}


.nav-btn:hover {

    color:
        var(--orange);

    border-color:
        var(--border-orange);

    background:
        rgba(255, 107, 0, 0.06);

}


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

.hero {

    position:
        relative;

    min-height:
        calc(100svh - 84px);

    display:
        flex;

    align-items:
        center;

    padding:
        58px 0 70px;

}


.hero-container {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


/* ============================================================
   COMING BADGE
   ============================================================ */

.coming-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255, 107, 0, 0.22);

    border-radius:
        999px;

    background:
        rgba(255, 107, 0, 0.065);

    color:
        #ff9b59;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.4px;

    animation:
        fadeUp 0.7s ease both;

}


.coming-badge i {

    color:
        var(--orange);

    font-size:
        9px;

}


.pulse {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--orange);

    box-shadow:
        0 0 0 5px
        rgba(255,107,0,0.08);

    animation:
        pulse 1.8s infinite;

}


@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.82);
    }

}


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

.hero-title {

    max-width:
        920px;

    margin-top:
        24px;

    color:
        #ffffff;

    font-size:
        clamp(
            48px,
            12vw,
            88px
        );

    line-height:
        0.96;

    font-weight:
        800;

    letter-spacing:
        -4px;

    animation:
        fadeUp 0.8s 0.08s ease both;

}


.hero-title span {

    display:
        block;

    margin:
        5px 0;

    color:
        var(--orange);

}


.hero-description {

    max-width:
        650px;

    margin-top:
        25px;

    color:
        #858585;

    font-size:
        14px;

    line-height:
        1.75;

    animation:
        fadeUp 0.8s 0.16s ease both;

}


.hero-description strong {

    color:
        #bcbcbc;

    font-weight:
        600;

}


/* ============================================================
   LOCATION
   ============================================================ */

.location-pill {

    margin-top:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        999px;

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

    color:
        #b7b7b7;

    font-size:
        10px;

    font-weight:
        600;

    animation:
        fadeUp 0.8s 0.22s ease both;

}


.location-icon {

    width:
        21px;

    height:
        21px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(255,107,0,0.10);

    color:
        var(--orange);

}


.location-icon i {

    font-size:
        9px;

}


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

.hero-actions {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        29px;

    animation:
        fadeUp 0.8s 0.28s ease both;

}


.primary-btn,
.secondary-btn {

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border-radius:
        12px;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        180ms ease;

}


.primary-btn {

    padding:
        0 7px 0 18px;

    background:
        var(--orange);

    color:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgba(255,107,0,0.16);

}


.primary-btn:hover {

    background:
        var(--orange-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 35px
        rgba(255,107,0,0.22);

}


.btn-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

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

}


.btn-icon i {

    font-size:
        10px;

}


.secondary-btn {

    padding:
        0 17px;

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

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

    color:
        #dddddd;

}


.secondary-btn:hover {

    border-color:
        var(--border-orange);

    color:
        var(--orange);

    background:
        rgba(255,107,0,0.05);

    transform:
        translateY(-2px);

}


/* ============================================================
   MINI STATS
   ============================================================ */

.mini-stats {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        24px;

    margin-top:
        54px;

    animation:
        fadeUp 0.8s 0.34s ease both;

}


.stat {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    text-align:
        left;

}


.stat-icon {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        8px;

    background:
        #111111;

    color:
        #777777;

}


.stat-icon i {

    font-size:
        10px;

}


.stat div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.stat strong {

    color:
        #dddddd;

    font-size:
        10px;

    font-weight:
        700;

}


.stat span {

    color:
        #5e5e5e;

    font-size:
        8px;

}


.stat-divider {

    width:
        1px;

    height:
        25px;

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

}


/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.scroll-indicator {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        42px;

    color:
        #4e4e4e;

    font-size:
        9px;

    transition:
        180ms ease;

}


.scroll-indicator i {

    font-size:
        8px;

    animation:
        bounce 1.6s infinite;

}


.scroll-indicator:hover {

    color:
        #888888;

}


@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }

}


/* ============================================================
   NOTIFY SECTION
   ============================================================ */

.notify-section {

    position:
        relative;

    padding:
        20px 0 80px;

}


.notify-card {

    position:
        relative;

    max-width:
        850px;

    margin:
        0 auto;

    overflow:
        hidden;

    padding:
        32px;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #131313,
            #0e0e0e
        );

    box-shadow:
        0 20px 70px
        rgba(0,0,0,0.28);

}


.notify-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,107,0,0.55),
            transparent
        );

}


.notify-card-glow {

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    right:
        -130px;

    top:
        -150px;

    border-radius:
        50%;

    background:
        var(--orange);

    filter:
        blur(100px);

    opacity:
        0.07;

    pointer-events:
        none;

}


/* ============================================================
   NOTIFY CONTENT
   ============================================================ */

.notify-content {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        15px;

}


.notify-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(255,107,0,0.16);

    border-radius:
        12px;

    background:
        rgba(255,107,0,0.08);

    color:
        var(--orange);

    font-size:
        16px;

}


.small-label {

    color:
        var(--orange);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.1px;

}


.notify-copy h2 {

    margin-top:
        6px;

    color:
        #ffffff;

    font-size:
        clamp(
            20px,
            4vw,
            27px
        );

    line-height:
        1.2;

    letter-spacing:
        -0.8px;

}


.notify-copy h2 span {

    color:
        var(--orange);

}


.notify-copy p {

    max-width:
        600px;

    margin-top:
        8px;

    color:
        #6e6e6e;

    font-size:
        11px;

    line-height:
        1.65;

}


/* ============================================================
   FORM
   ============================================================ */

.notify-form {

    position:
        relative;

    display:
        flex;

    gap:
        9px;

    margin-top:
        24px;

}


.input-wrapper {

    min-width:
        0;

    flex:
        1;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius:
        11px;

    background:
        #090909;

    transition:
        180ms ease;

}


.input-wrapper:focus-within {

    border-color:
        rgba(255,107,0,0.45);

    box-shadow:
        0 0 0 3px
        rgba(255,107,0,0.05);

}


.input-icon {

    display:
        grid;

    place-items:
        center;

    color:
        #555555;

}


.input-icon i {

    font-size:
        12px;

}


.input-wrapper input {

    width:
        100%;

    min-width:
        0;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        12px;

}


.input-wrapper input::placeholder {

    color:
        #4f4f4f;

}


.notify-submit {

    min-width:
        125px;

    height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 16px;

    border-radius:
        11px;

    background:
        var(--orange);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        180ms ease;

}


.notify-submit:hover {

    background:
        var(--orange-dark);

    transform:
        translateY(-1px);

}


.notify-submit:disabled {

    opacity:
        0.65;

    cursor:
        not-allowed;

    transform:
        none;

}


/* ============================================================
   NEWSLETTER
   ============================================================ */

.newsletter-check {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        12px;

    color:
        #5d5d5d;

    font-size:
        9px;

    cursor:
        pointer;

}


.newsletter-check input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


.custom-checkbox {

    width:
        14px;

    height:
        14px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border:
        1px solid #3a3a3a;

    border-radius:
        4px;

    background:
        #0b0b0b;

}


.newsletter-check input:checked + .custom-checkbox {

    border-color:
        var(--orange);

    background:
        var(--orange);

}


.newsletter-check input:checked + .custom-checkbox::after {

    content:
        "✓";

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

}


.newsletter-text {

    line-height:
        1.4;

}


/* ============================================================
   FORM MESSAGE
   ============================================================ */

.form-message {

    min-height:
        18px;

    margin-top:
        12px;

    font-size:
        10px;

    font-weight:
        600;

}


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

footer {

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

    background:
        rgba(0,0,0,0.16);

}


.footer-inner {

    min-height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.footer-logo {

    font-size:
        15px;

}


.footer-logo .logo-mark {

    width:
        27px;

    height:
        27px;

    border-radius:
        8px;

    font-size:
        13px;

}


.footer-brand p {

    color:
        #4e4e4e;

    font-size:
        9px;

}


.footer-right {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    color:
        #4e4e4e;

    font-size:
        9px;

}


.footer-right a {

    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        8px;

    color:
        #666666;

    transition:
        180ms ease;

}


.footer-right a:hover {

    color:
        var(--orange);

    border-color:
        var(--border-orange);

    background:
        rgba(255,107,0,0.05);

}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(14px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 651px) {

    .container {

        width:
            min(
                calc(100% - 48px),
                var(--container)
            );

    }


    .navbar {

        padding:
            22px 0;

    }


    .hero {

        padding:
            70px 0 85px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .coming-badge {

        font-size:
            11px;

    }


    .notify-card {

        padding:
            38px;

    }

}


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

@media (max-width: 650px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .navbar {

        padding:
            15px 0;

    }


    .logo {

        font-size:
            18px;

    }


    .logo-mark {

        width:
            32px;

        height:
            32px;

        border-radius:
            9px;

        font-size:
            16px;

    }


    .nav-btn {

        min-height:
            36px;

        padding:
            0 12px;

        font-size:
            10px;

    }


    .nav-btn i {

        display:
            none;

    }


    .hero {

        min-height:
            auto;

        padding:
            55px 0 65px;

    }


    .hero-title {

        margin-top:
            21px;

        font-size:
            clamp(
                43px,
                13.5vw,
                62px
            );

        letter-spacing:
            -3px;

        line-height:
            0.97;

    }


    .hero-title span {

        margin:
            4px 0;

    }


    .hero-description {

        max-width:
            430px;

        margin-top:
            21px;

        font-size:
            12.5px;

        line-height:
            1.75;

    }


    .location-pill {

        margin-top:
            16px;

        font-size:
            9px;

    }


    .hero-actions {

        flex-direction:
            column;

        margin-top:
            25px;

        gap:
            9px;

    }


    .primary-btn,
    .secondary-btn {

        width:
            min(
                100%,
                300px
            );

        min-height:
            48px;

    }


    .mini-stats {

        width:
            100%;

        gap:
            8px;

        margin-top:
            43px;

    }


    .stat {

        flex:
            1;

        flex-direction:
            column;

        gap:
            6px;

        text-align:
            center;

    }


    .stat-icon {

        width:
            28px;

        height:
            28px;

        margin:
            0 auto;

    }


    .stat div:last-child {

        align-items:
            center;

    }


    .stat strong {

        font-size:
            9px;

    }


    .stat span {

        font-size:
            7px;

    }


    .stat-divider {

        height:
            35px;

    }


    .scroll-indicator {

        margin-top:
            35px;

    }


    .notify-section {

        padding:
            10px 0 60px;

    }


    .notify-card {

        padding:
            22px;

        border-radius:
            18px;

    }


    .notify-content {

        gap:
            11px;

    }


    .notify-icon {

        width:
            39px;

        height:
            39px;

        border-radius:
            10px;

        font-size:
            14px;

    }


    .small-label {

        font-size:
            7px;

    }


    .notify-copy h2 {

        font-size:
            19px;

        letter-spacing:
            -0.5px;

    }


    .notify-copy p {

        font-size:
            10px;

        line-height:
            1.6;

    }


    .notify-form {

        flex-direction:
            column;

        gap:
            9px;

        margin-top:
            20px;

    }


    .input-wrapper {

        height:
            50px;

    }


    .notify-submit {

        width:
            100%;

        height:
            48px;

    }


    .newsletter-check {

        align-items:
            flex-start;

        font-size:
            8px;

    }


    .footer-inner {

        min-height:
            auto;

        padding:
            22px 0;

        flex-direction:
            column;

        gap:
            16px;

        text-align:
            center;

    }


    .footer-brand {

        flex-direction:
            column;

        gap:
            7px;

    }


    .footer-right {

        flex-direction:
            column;

        gap:
            10px;

    }

}


/* ============================================================
   VERY SMALL DEVICES
   ============================================================ */

@media (max-width: 360px) {

    .container {

        width:
            calc(100% - 22px);

    }


    .hero {

        padding-top:
            45px;

    }


    .hero-title {

        font-size:
            41px;

        letter-spacing:
            -2.6px;

    }


    .hero-description {

        font-size:
            11.5px;

    }


    .mini-stats {

        gap:
            4px;

    }


    .stat-divider {

        height:
            30px;

    }


    .stat strong {

        font-size:
            8px;

    }


    .stat span {

        font-size:
            6.5px;

    }


    .notify-card {

        padding:
            18px;

    }

}


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

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

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

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}