/* =========================================================
   FUTURESPROPWATCH
   COMPLETE WEBSITE CSS
   ========================================================= */


:root {

    --blue: #146ef5;

    --blue-dark: #0d5edb;

    --text: #111827;

    --muted: #60718a;

    --border: #e1e6ed;

    --light-blue: #f4f8ff;

    --white: #ffffff;

}


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

* {

    box-sizing: border-box;

}


html {

    margin: 0;

    padding: 0;

}


body {

    margin: 0;

    padding: 0;

    background: #ffffff;

    color: var(--text);

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

    -webkit-font-smoothing: antialiased;

}


a {

    color: inherit;

}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

    background: #ffffff;

    border-bottom:
        1px solid #e5e8ed;

    box-shadow:
        0 3px 15px
        rgba(15, 23, 42, 0.06);

}


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

.navbar-container {

    width: 100%;

    height: 86px;

    padding:
        0 30px;

    display: flex;

    align-items: center;

}


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

.navbar-logo {

    width: 330px;

    height: 86px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding-right: 24px;

    border-right:
        1px solid #e4e7ec;

    text-decoration: none;

}


.navbar-logo img {

    width: 290px;

    height: 90px;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar-navigation {

    height: 86px;

    display: flex;

    align-items: stretch;

    flex-shrink: 0;

    margin-left: 25px;

}


/* =========================================================
   NAV ITEM
   ========================================================= */

.navbar-item {

    position: relative;

    height: 86px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: var(--text);

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color .2s ease,
        background .2s ease;

}


.navbar-item:hover {

    color: var(--blue);

    background:
        var(--light-blue);

}


.navbar-item.active {

    color: var(--blue);

}


.navbar-item.active::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 17px;

    right: 17px;

    height: 3px;

    border-radius:
        3px 3px 0 0;

    background:
        var(--blue);

}


/* =========================================================
   NAV ICON
   ========================================================= */

.navbar-item svg {

    width: 22px;

    height: 22px;

    flex-shrink: 0;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   SEARCH
   ========================================================= */

.navbar-search {

    position: relative;

    width: 350px;

    height: 50px;

    flex-shrink: 0;

    margin-left: auto;

    display: flex;

    align-items: center;

    border:
        1px solid #d9dfe7;

    border-radius: 9px;

    background: #ffffff;

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

}


.navbar-search:focus-within {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(20,110,245,.09);

}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.search-icon {

    width: 21px;

    height: 21px;

    margin-left: 14px;

    flex-shrink: 0;

    fill: none;

    stroke: #7d8795;

    stroke-width: 2;

    stroke-linecap: round;

}


/* =========================================================
   INPUT
   ========================================================= */

.navbar-search input {

    width: 100%;

    height: 100%;

    min-width: 0;

    padding:
        0 40px 0 10px;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 14px;

}


.navbar-search input::placeholder {

    color: #8993a2;

}


/* =========================================================
   CLEAR
   ========================================================= */

.clear-search {

    position: absolute;

    right: 9px;

    top: 50%;

    width: 27px;

    height: 27px;

    transform:
        translateY(-50%);

    display: none;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #7b8594;

    font-size: 21px;

    cursor: pointer;

}


.clear-search:hover {

    background: #f0f2f5;

}


/* =========================================================
   SEARCH DROPDOWN
   ========================================================= */

.search-dropdown {

    position: absolute;

    top:
        calc(100% + 8px);

    left: 0;

    right: 0;

    display: none;

    overflow: hidden;

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

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 15px 40px
        rgba(15,23,42,.14);

}


.search-dropdown.show {

    display: block;

}


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

.search-header {

    height: 42px;

    padding:
        0 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid #edf0f3;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .4px;

}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.search-results {

    max-height: 340px;

    overflow-y: auto;

}


.search-result {

    min-height: 63px;

    padding:
        10px 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-bottom:
        1px solid #f0f2f5;

    color: var(--text);

    text-decoration: none;

}


.search-result:last-child {

    border-bottom: 0;

}


.search-result:hover {

    background:
        var(--light-blue);

}


/* =========================================================
   RESULT LOGO
   ========================================================= */

.result-logo {

    width: 39px;

    height: 39px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #e0e5eb;

    border-radius: 8px;

    color: var(--blue);

    background: #ffffff;

    font-size: 12px;

    font-weight: 800;

}


/* =========================================================
   RESULT INFO
   ========================================================= */

.result-info {

    min-width: 0;

}


.result-info strong {

    display: block;

    margin-bottom: 3px;

    font-size: 14px;

}


.result-info small {

    display: block;

    color: var(--muted);

    font-size: 12px;

}


/* =========================================================
   NO RESULTS
   ========================================================= */

.no-results {

    padding:
        22px 14px;

    color: var(--muted);

    text-align: center;

    font-size: 13px;

}


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

.mobile-menu-button {

    display: none;

}


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

.mobile-navigation {

    display: none;

}


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

.hero {

    width: 100%;

    padding:
        105px 0 72px;

}


.hero-container {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

}


.hero h1 {

    max-width: 1080px;

    margin:
        0 0 20px;

    color:
        var(--text);

    font-size:
        clamp(45px, 5.4vw, 72px);

    line-height:
        1.02;

    letter-spacing:
        -2.8px;

    font-weight:
        750;

}


.hero h1 span {

    color:
        var(--blue);

}


.hero p {

    max-width: 900px;

    margin: 0;

    color:
        var(--muted);

    font-size: 19px;

    line-height: 1.65;

}


/* =========================================================
   FEATURE SECTION
   ========================================================= */

.features {

    width: 100%;

    padding:
        0 0 100px;

}


.feature-grid {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

    display:
        grid;

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

    gap: 20px;

}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.feature-card {

    min-height: 160px;

    padding:
        28px;

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

    border-radius:
        15px;

    background:
        #ffffff;

    text-decoration:
        none;

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

}


.feature-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #d3dae4;

    box-shadow:
        0 12px 28px
        rgba(15,23,42,.07);

}


.feature-card h2 {

    margin:
        0 0 10px;

    color:
        var(--text);

    font-size:
        19px;

    line-height:
        1.3;

}


.feature-card p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.6;

}


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

@media (
    max-width: 1250px
) {

    .navbar-container {

        padding:
            0 18px;

    }


    .navbar-logo {

        width:
            275px;

    }


    .navbar-logo img {

        width:
            250px;

    }


    .navbar-navigation {

        margin-left:
            12px;

    }


    .navbar-item {

        padding:
            0 11px;

    }


    .navbar-search {

        width:
            290px;

    }

}


/* =========================================================
   SMALL DESKTOP
   ========================================================= */

@media (
    max-width: 1100px
) {

    .navbar-logo {

        width:
            235px;

    }


    .navbar-logo img {

        width:
            215px;

    }


    .navbar-navigation {

        margin-left:
            5px;

    }


    .navbar-item {

        padding:
            0 8px;

        gap:
            6px;

        font-size:
            14px;

    }


    .navbar-item svg {

        width:
            19px;

        height:
            19px;

    }


    .navbar-search {

        width:
            245px;

    }

}


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

@media (
    max-width: 900px
) {

    .navbar-container {

        height:
            72px;

        padding:
            0 15px;

    }


    .navbar-logo {

        width:
            auto;

        height:
            82px;

        flex:
            1;

        padding:
            0;

        border:
            0;

    }


    .navbar-logo img {

        width:
            235px;

        height:
            110px;

        max-width:
            72vw;

    }


    .navbar-navigation,
    .navbar-search {

        display:
            none;

    }


    .mobile-menu-button {

        width:
            42px;

        height:
            42px;

        flex-shrink:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid #dfe3e8;

        border-radius:
            8px;

        background:
            #ffffff;

        cursor:
            pointer;

    }


    .mobile-menu-button span {

        width:
            19px;

        height:
            2px;

        border-radius:
            2px;

        background:
            var(--text);

    }


    .mobile-navigation.show {

        display:
            flex;

        flex-direction:
            column;

        gap:
            3px;

        padding:
            8px 14px 14px;

        border-top:
            1px solid #edf0f3;

    }


    .mobile-navigation a {

        padding:
            13px 14px;

        border-radius:
            8px;

        color:
            var(--text);

        text-decoration:
            none;

        font-size:
            15px;

        font-weight:
            600;

    }


    .mobile-navigation a:hover {

        color:
            var(--blue);

        background:
            var(--light-blue);

    }


    .hero {

        padding:
            60px 0 50px;

    }


    .hero h1 {

        font-size:
            clamp(40px, 9vw, 58px);

        letter-spacing:
            -1.8px;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }

}/* =========================================================
   FUTURESPROPWATCH — HERO V4
========================================================= */

.fpw-hero-v4 {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(42, 119, 255, 0.15) 0%,
            rgba(42, 119, 255, 0.06) 20%,
            transparent 42%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(71, 150, 255, 0.07) 0%,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f9fbff 48%,
            #eef5ff 100%
        );

}


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

.fpw-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(70px);

}


.fpw-bg-glow-one {

    width: 300px;

    height: 300px;

    top: 40px;

    right: 3%;

    background:
        rgba(38, 113, 245, 0.07);

}


.fpw-bg-glow-two {

    width: 220px;

    height: 220px;

    bottom: 60px;

    left: 8%;

    background:
        rgba(52, 137, 255, 0.045);

}


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

.fpw-hero-v4-container {

    position: relative;

    z-index: 2;

    width:
        min(1180px, calc(100% - 44px));

    min-height:
        610px;

    margin:
        auto;

    padding:
        82px 0 72px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr) minmax(390px, .75fr);

    align-items:
        center;

    gap:
        75px;

}


/* =========================================================
   LEFT SIDE
========================================================= */

.fpw-hero-v4-content {

    max-width:
        700px;

}


.fpw-v4-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        22px;

    color:
        #146ef5;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}


.fpw-v4-eyebrow-line {

    width:
        28px;

    height:
        2px;

    border-radius:
        5px;

    background:
        #146ef5;

}


/* =========================================================
   HEADLINE
========================================================= */

.fpw-hero-v4 h1 {

    max-width:
        700px;

    margin:
        0 0 24px;

    color:
        #101827;

    font-size:
        clamp(50px, 5.2vw, 72px);

    line-height:
        1.02;

    letter-spacing:
        -3.5px;

    font-weight:
        800;

}


.fpw-hero-v4 h1 span {

    display:
        block;

    background:
        linear-gradient(
            90deg,
            #146ef5 0%,
            #3183ff 55%,
            #1768e9 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.fpw-v4-description {

    max-width:
        650px;

    margin:
        0 0 31px;

    color:
        #60738d;

    font-size:
        17px;

    line-height:
        1.7;

}


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

.fpw-v4-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        24px;

}


.fpw-v4-btn {

    min-height:
        50px;

    padding:
        0 21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border-radius:
        8px;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .2s ease;

}


.fpw-v4-btn-primary {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #1671f7,
            #0d63e8
        );

    box-shadow:
        0 9px 25px
        rgba(20, 110, 245, .22);

}


.fpw-v4-btn-primary:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 30px
        rgba(20, 110, 245, .27);

}


.fpw-v4-btn-primary span {

    font-size:
        17px;

}


.fpw-v4-btn-secondary {

    color:
        #172033;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid #d7e0ea;

}


.fpw-v4-btn-secondary:hover {

    background:
        #ffffff;

    border-color:
        #bdc9d7;

}


/* =========================================================
   TRUST POINTS
========================================================= */

.fpw-v4-trust {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        17px;

    color:
        #718198;

    font-size:
        11px;

}


.fpw-v4-trust > div {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.fpw-v4-trust span {

    width:
        17px;

    height:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e9f8f0;

    color:
        #15945a;

    font-size:
        9px;

    font-weight:
        800;

}


/* =========================================================
   RIGHT SIDE
========================================================= */

.fpw-hero-v4-right {

    position:
        relative;

    min-height:
        470px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


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

.fpw-v4-panel {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        455px;

    padding:
        25px;

    border:
        1px solid rgba(211, 223, 237, .95);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 25px 70px
        rgba(35, 70, 120, .11);

    backdrop-filter:
        blur(10px);

}


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

.fpw-v4-panel-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    padding-bottom:
        19px;

    border-bottom:
        1px solid #e9eef4;

}


.fpw-v4-panel-label {

    margin-bottom:
        5px;

    color:
        #146ef5;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.fpw-v4-panel-top h2 {

    margin:
        0;

    color:
        #111827;

    font-size:
        19px;

    letter-spacing:
        -.4px;

}


.fpw-v4-live {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        6px 9px;

    border-radius:
        6px;

    background:
        #ecfaf3;

    color:
        #14864e;

    font-size:
        9px;

    font-weight:
        800;

}


.fpw-v4-live span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #18a362;

}


/* =========================================================
   ACCOUNT
========================================================= */

.fpw-v4-account {

    height:
        55px;

    margin:
        17px 0 13px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        1px solid #dfe7ef;

    border-radius:
        9px;

    background:
        #f8fafd;

}


.fpw-v4-account div {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.fpw-v4-account small {

    color:
        #8390a1;

    font-size:
        9px;

    font-weight:
        700;

}


.fpw-v4-account strong {

    color:
        #146ef5;

    font-size:
        14px;

}


.fpw-v4-account > span {

    color:
        #8996a7;

    font-size:
        9px;

}


/* =========================================================
   RULES
========================================================= */

.fpw-v4-rules {

    overflow:
        hidden;

    border:
        1px solid #e4eaf1;

    border-radius:
        10px;

    background:
        #ffffff;

}


.fpw-v4-rule {

    min-height:
        62px;

    padding:
        10px 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border-bottom:
        1px solid #edf1f5;

}


.fpw-v4-rule:last-child {

    border-bottom:
        0;

}


.fpw-v4-rule-icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        7px;

    background:
        linear-gradient(
            135deg,
            #edf4ff,
            #e5f0ff
        );

    color:
        #146ef5;

    font-size:
        11px;

    font-weight:
        800;

}


.fpw-v4-rule-text {

    min-width:
        0;

    flex:
        1;

}


.fpw-v4-rule-text strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #182233;

    font-size:
        11px;

}


.fpw-v4-rule-text small {

    color:
        #8996a7;

    font-size:
        9px;

}


.fpw-v4-rule > b {

    color:
        #146ef5;

    font-size:
        14px;

    font-weight:
        500;

}


/* =========================================================
   PANEL CTA
========================================================= */

.fpw-v4-panel-button {

    height:
        46px;

    margin-top:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        8px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #1671f7,
            #0d63e8
        );

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    box-shadow:
        0 7px 18px
        rgba(20,110,245,.16);

}


.fpw-v4-panel-button:hover {

    background:
        #0d5edb;

}


.fpw-v4-panel-note {

    margin-top:
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    color:
        #9aa5b3;

    font-size:
        8px;

}


.fpw-v4-panel-note span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #19a463;

}


/* =========================================================
   DISCOUNT FLOAT
========================================================= */

.fpw-v4-discount {

    position:
        absolute;

    z-index:
        5;

    right:
        -25px;

    bottom:
        22px;

    width:
        245px;

    padding:
        13px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border:
        1px solid #dce5ef;

    border-radius:
        11px;

    background:
        #ffffff;

    text-decoration:
        none;

    box-shadow:
        0 16px 38px
        rgba(15, 40, 80, .12);

    transition:
        .2s ease;

}


.fpw-v4-discount:hover {

    transform:
        translateY(-3px);

}


.fpw-v4-discount-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        #edf4ff;

    color:
        #146ef5;

    font-size:
        15px;

    font-weight:
        800;

}


.fpw-v4-discount small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #146ef5;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .6px;

}


.fpw-v4-discount strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #172033;

    font-size:
        10px;

}


.fpw-v4-discount span {

    color:
        #146ef5;

    font-size:
        9px;

    font-weight:
        700;

}

 /* =========================================================
   FUTURESPROPWATCH — RESPONSIVE FIX
   Paste this at the VERY END of style.css
========================================================= */


/* =========================================================
   GLOBAL MOBILE SAFETY
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   TABLET — 1100px AND BELOW
========================================================= */

@media (max-width: 1100px) {

    .fpw-hero-v4-container {

        width: min(
            92%,
            900px
        );

        min-height: auto;

        padding:
            70px 0 65px;

        display: grid;

        grid-template-columns:
            1fr;

        gap:
            55px;

        align-items:
            center;

    }


    /* LEFT CONTENT */

    .fpw-hero-v4-content {

        width: 100%;

        max-width: 760px;

        margin: 0 auto;

        text-align: center;

    }


    .fpw-v4-eyebrow {

        justify-content: center;

    }


    .fpw-hero-v4 h1 {

        max-width: 760px;

        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(48px, 7vw, 68px);

        line-height:
            1.02;

    }


    .fpw-v4-description {

        max-width: 650px;

        margin-left: auto;
        margin-right: auto;

    }


    .fpw-v4-buttons {

        justify-content:
            center;

    }


    .fpw-v4-trust {

        justify-content:
            center;

    }


    /* RIGHT SIDE */

    .fpw-hero-v4-right {

        width:
            100%;

        min-height:
            auto;

        padding:
            0 0 35px;

        display:
            flex;

        justify-content:
            center;

    }


    .fpw-v4-panel {

        width:
            min(100%, 520px);

        max-width:
            520px;

    }


    /* FLOATING DISCOUNT */

    .fpw-v4-discount {

        right:
            calc(50% - 310px);

        bottom:
            0;

    }


    /* HIDE OLD BOTTOM VALUE STRIP IF STILL PRESENT */

    .fpw-v4-value-strip {

        display:
            none;

    }

}


/* =========================================================
   TABLET PORTRAIT — 768px AND BELOW
========================================================= */

@media (max-width: 768px) {

    .fpw-hero-v4-container {

        width:
            calc(100% - 40px);

        padding:
            55px 0 45px;

        gap:
            40px;

    }


    .fpw-hero-v4-content {

        text-align:
            center;

    }


    .fpw-v4-eyebrow {

        margin-bottom:
            18px;

        font-size:
            9px;

    }


    .fpw-v4-eyebrow-line {

        width:
            20px;

    }


    .fpw-hero-v4 h1 {

        font-size:
            clamp(42px, 8vw, 58px);

        letter-spacing:
            -2.5px;

        line-height:
            1.02;

        margin-bottom:
            20px;

    }


    .fpw-v4-description {

        font-size:
            16px;

        line-height:
            1.65;

        margin-bottom:
            25px;

    }


    .fpw-v4-buttons {

        gap:
            10px;

    }


    .fpw-v4-btn {

        min-height:
            48px;

        padding:
            0 18px;

    }


    .fpw-v4-trust {

        gap:
            10px 15px;

        font-size:
            10px;

    }


    /* RIGHT CARD */

    .fpw-hero-v4-right {

        width:
            100%;

        min-height:
            auto;

        padding:
            0;

    }


    .fpw-v4-panel {

        width:
            100%;

        max-width:
            520px;

        padding:
            22px;

    }


    .fpw-v4-discount {

        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        width:
            min(100%, 270px);

        margin:
            -25px auto 0;

    }

}


/* =========================================================
   MOBILE — 600px AND BELOW
========================================================= */

@media (max-width: 600px) {

    /* HERO */

    .fpw-hero-v4 {

        width:
            100%;

        overflow:
            hidden;

    }


    .fpw-hero-v4-container {

        width:
            calc(100% - 28px);

        padding:
            42px 0 35px;

        display:
            flex;

        flex-direction:
            column;

        gap:
            32px;

    }


    /* =====================================================
       LEFT CONTENT
    ===================================================== */

    .fpw-hero-v4-content {

        width:
            100%;

        max-width:
            none;

        margin:
            0;

        text-align:
            left;

    }


    .fpw-v4-eyebrow {

        justify-content:
            flex-start;

        margin-bottom:
            16px;

        font-size:
            8px;

        letter-spacing:
            1px;

        line-height:
            1.3;

    }


    .fpw-v4-eyebrow-line {

        width:
            18px;

        flex:
            0 0 18px;

    }


    /* IMPORTANT:
       Override the desktop headline width */

    .fpw-hero-v4 h1 {

        width:
            100%;

        max-width:
            none;

        margin:
            0 0 18px;

        font-size:
            43px;

        line-height:
            1.03;

        letter-spacing:
            -2.3px;

        overflow-wrap:
            normal;

        word-break:
            normal;

    }


    .fpw-hero-v4 h1 span {

        display:
            block;

    }


    /* DESCRIPTION */

    .fpw-v4-description {

        width:
            100%;

        max-width:
            none;

        margin:
            0 0 23px;

        font-size:
            15px;

        line-height:
            1.65;

    }


    /* BUTTONS */

    .fpw-v4-buttons {

        width:
            100%;

        margin:
            0 0 20px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            9px;

    }


    .fpw-v4-btn {

        width:
            100%;

        min-height:
            49px;

        padding:
            0 18px;

        font-size:
            12px;

    }


    /* TRUST */

    .fpw-v4-trust {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            9px;

        justify-content:
            flex-start;

        font-size:
            10px;

    }


    .fpw-v4-trust > div {

        justify-content:
            flex-start;

    }


    /* =====================================================
       RIGHT SIDE
    ===================================================== */

    .fpw-hero-v4-right {

        width:
            100%;

        min-width:
            0;

        min-height:
            auto;

        padding:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

    }


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

    .fpw-v4-panel {

        width:
            100%;

        max-width:
            none;

        min-width:
            0;

        margin:
            0;

        padding:
            18px;

        border-radius:
            15px;

        box-shadow:
            0 15px 40px
            rgba(35,70,120,.09);

    }


    /* PANEL HEADER */

    .fpw-v4-panel-top {

        width:
            100%;

        padding-bottom:
            15px;

    }


    .fpw-v4-panel-label {

        font-size:
            8px;

    }


    .fpw-v4-panel-top h2 {

        font-size:
            17px;

        line-height:
            1.25;

    }


    .fpw-v4-live {

        padding:
            5px 7px;

        font-size:
            8px;

    }


    /* ACCOUNT */

    .fpw-v4-account {

        width:
            100%;

        height:
            49px;

        margin:
            13px 0 10px;

        padding:
            0 11px;

    }


    .fpw-v4-account div {

        gap:
            7px;

    }


    .fpw-v4-account small {

        font-size:
            8px;

    }


    .fpw-v4-account strong {

        font-size:
            13px;

    }


    .fpw-v4-account > span {

        max-width:
            90px;

        overflow:
            hidden;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;

        font-size:
            8px;

    }


    /* RULES */

    .fpw-v4-rules {

        width:
            100%;

        min-width:
            0;

    }


    .fpw-v4-rule {

        min-height:
            58px;

        padding:
            9px 10px;

        gap:
            9px;

    }


    .fpw-v4-rule-icon {

        width:
            30px;

        height:
            30px;

        flex:
            0 0 30px;

    }


    .fpw-v4-rule-text {

        min-width:
            0;

    }


    .fpw-v4-rule-text strong {

        font-size:
            10px;

    }


    .fpw-v4-rule-text small {

        display:
            block;

        max-width:
            190px;

        overflow:
            hidden;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;

        font-size:
            8px;

    }


    .fpw-v4-rule > b {

        font-size:
            13px;

    }


    /* CTA */

    .fpw-v4-panel-button {

        width:
            100%;

        height:
            45px;

        margin-top:
            12px;

        font-size:
            11px;

    }


    .fpw-v4-panel-note {

        font-size:
            7px;

        text-align:
            center;

    }


    /* =====================================================
       DISCOUNT CARD
    ===================================================== */

    .fpw-v4-discount {

        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        width:
            100%;

        max-width:
            none;

        margin:
            10px 0 0;

        padding:
            12px;

    }


    .fpw-v4-discount-icon {

        width:
            35px;

        height:
            35px;

        flex:
            0 0 35px;

    }


    .fpw-v4-discount small {

        font-size:
            6px;

    }


    .fpw-v4-discount strong {

        font-size:
            10px;

    }


    .fpw-v4-discount span {

        font-size:
            8px;

    }


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

    .fpw-bg-glow-one {

        width:
            180px;

        height:
            180px;

        top:
            20px;

        right:
            -80px;

        filter:
            blur(55px);

    }


    .fpw-bg-glow-two {

        width:
            150px;

        height:
            150px;

        left:
            -70px;

        bottom:
            150px;

        filter:
            blur(50px);

    }

}


/* =========================================================
   SMALL PHONES — 400px AND BELOW
========================================================= */

@media (max-width: 400px) {

    .fpw-hero-v4-container {

        width:
            calc(100% - 24px);

        padding-top:
            35px;

    }


    .fpw-hero-v4 h1 {

        font-size:
            38px;

        letter-spacing:
            -2px;

    }


    .fpw-v4-description {

        font-size:
            14px;

    }


    .fpw-v4-panel {

        padding:
            15px;

        border-radius:
            13px;

    }


    .fpw-v4-panel-top h2 {

        font-size:
            16px;

    }


    .fpw-v4-rule {

        min-height:
            55px;

    }


    .fpw-v4-rule-text strong {

        font-size:
            9px;

    }


    .fpw-v4-rule-text small {

        font-size:
            7px;

        max-width:
            145px;

    }


    .fpw-v4-account > span {

        display:
            none;

    }


    .fpw-v4-discount {

        padding:
            11px;

    }

}


/* =========================================================
   VERY SMALL PHONES — 350px AND BELOW
========================================================= */

@media (max-width: 350px) {

    .fpw-hero-v4 h1 {

        font-size:
            34px;

    }


    .fpw-v4-eyebrow {

        font-size:
            7px;

    }


    .fpw-v4-panel {

        padding:
            13px;

    }


    .fpw-v4-rule {

        gap:
            7px;

        padding:
            8px;

    }


    .fpw-v4-rule-icon {

        width:
            27px;

        height:
            27px;

        flex-basis:
            27px;

        font-size:
            9px;

    }

} 

.navbar-container {

  padding: 0px 60px;
} 

/* =========================================================
   FUTURESPROFWATCH
   MOBILE + TABLET NAVBAR
   Complete responsive CSS
========================================================= */


/* =========================================================
   TABLET
   901px and below
========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        position: relative;
        z-index: 9999;

        width: 100%;

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

        border-bottom: 1px solid #e4eaf1;

        box-shadow:
            0 4px 20px rgba(15, 35, 65, 0.07);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }


    /* -----------------------------------------------------
       MAIN NAVBAR
    ----------------------------------------------------- */

    .navbar {

        width: 100%;

        min-height: 72px;

        padding:
            0 20px;

        display: flex;

        align-items: center;

        gap: 18px;

        position: relative;
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .navbar-logo {

        height: 68px;

        display: flex;

        align-items: center;

        flex-shrink: 0;

        text-decoration: none !important;

        border: 0 !important;

        outline: none;
    }


    .navbar-logo img {

        width: 235px;

        height: 104px;

        max-width: 55vw;

        display: block;

        object-fit: contain;

        object-position: left center;

        transition:
            transform .25s ease,
            opacity .25s ease;
    }


    .navbar-logo:hover img {

        transform: scale(1.025);

        opacity: .94;
    }


    /* -----------------------------------------------------
       DESKTOP LINKS HIDDEN ON TABLET/MOBILE
    ----------------------------------------------------- */

    .navbar-links {
        display: none !important;
    }


    /* -----------------------------------------------------
       DESKTOP SEARCH HIDDEN
    ----------------------------------------------------- */

    .navbar > .navbar-search {
        display: none !important;
    }


    /* =====================================================
       MOBILE MENU BUTTON
    ===================================================== */

    .mobile-button {

        width: 46px;

        height: 46px;

        min-width: 46px;

        margin-left: auto;

        padding: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 5px;

        position: relative;

        z-index: 10001;

        border: 1px solid #d9e2ec;

        border-radius: 13px;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f5f8fc
            );

        box-shadow:
            0 5px 16px
            rgba(15, 35, 65, .08);

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

        transition:
            transform .22s ease,
            border-color .22s ease,
            box-shadow .22s ease,
            background .22s ease;
    }


    .mobile-button:hover {

        border-color: #bfd2e8;

        background: #f8fbff;

        box-shadow:
            0 8px 22px
            rgba(20, 110, 245, .11);

        transform:
            translateY(-1px);
    }


    .mobile-button:active {

        transform:
            scale(.93);
    }


    /* -----------------------------------------------------
       HAMBURGER LINES
    ----------------------------------------------------- */

    .mobile-button span {

        display: block;

        width: 21px;

        height: 2px;

        flex: 0 0 2px;

        border-radius: 20px;

        background: #25364b;

        opacity: 1;

        visibility: visible;

        transform-origin: center;

        transition:
            transform .32s
            cubic-bezier(.68,-.4,.27,1.4),

            opacity .18s ease,

            width .25s ease;
    }


    /* HAMBURGER → X */

    .mobile-button.active span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-button.active span:nth-child(2) {

        width: 0;

        opacity: 0;
    }


    .mobile-button.active span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* =====================================================
       MOBILE NAVIGATION PANEL
    ===================================================== */

    .mobile-navigation {

        position: absolute;

        top: calc(100% + 1px);

        left: 12px;

        right: 12px;

        width: auto;

        padding: 12px;

        display: flex;

        flex-direction: column;

        gap: 5px;

        background:
            rgba(255,255,255,.98);

        border:
            1px solid #dfe7ef;

        border-top: 0;

        border-radius:
            0 0 18px 18px;

        box-shadow:
            0 25px 55px
            rgba(15, 35, 65, .16),

            0 5px 15px
            rgba(15, 35, 65, .06);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-12px)
            scale(.985);

        transform-origin:
            top center;

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .32s
            cubic-bezier(.2,.8,.2,1);
    }


    /* OPEN */

    .mobile-navigation.show {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);
    }


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

    .mobile-nav-search {

        width: 100%;

        margin-bottom: 7px;

        padding-bottom: 11px;

        border-bottom:
            1px solid #edf1f5;
    }


    .mobile-search-box {

        width: 100%;

        height: 47px;

        display: flex;

        align-items: center;

        gap: 10px;

        padding:
            0 13px;

        background:
            #f7f9fc;

        border:
            1px solid #dfe6ee;

        border-radius: 12px;

        transition:
            background .22s ease,
            border-color .22s ease,
            box-shadow .22s ease;
    }


    .mobile-search-box:focus-within {

        background: #ffffff;

        border-color:
            #438cff;

        box-shadow:
            0 0 0 4px
            rgba(20,110,245,.08);
    }


    /* SEARCH ICON */

    .mobile-search-box svg {

        width: 19px;

        height: 19px;

        flex: 0 0 19px;

        display: block;

        fill: none;

        stroke:
            #718096;

        stroke-width: 1.8;

        stroke-linecap: round;

        stroke-linejoin: round;

        pointer-events: none;
    }


    .mobile-search-box input {

        width: 100%;

        min-width: 0;

        height: 100%;

        padding: 0;

        border: 0;

        outline: 0;

        background: transparent;

        color:
            #24364b;

        font-family: inherit;

        font-size: 14px;

        font-weight: 600;
    }


    .mobile-search-box input::placeholder {

        color:
            #8b99aa;

        opacity: 1;
    }


    /* =====================================================
       MOBILE NAV LINKS
    ===================================================== */

    .mobile-navigation > a {

        position: relative;

        width: 100%;

        min-height: 54px;

        padding:
            0 13px;

        display: flex;

        align-items: center;

        gap: 13px;

        box-sizing: border-box;

        color:
            #344054;

        background:
            transparent;

        border:
            1px solid transparent;

        border-radius: 12px;

        text-decoration: none !important;

        font-size: 15px;

        font-weight: 700;

        line-height: 1;

        -webkit-tap-highlight-color: transparent;

        transition:
            color .22s ease,
            background .22s ease,
            border-color .22s ease,
            transform .22s ease,
            box-shadow .22s ease;
    }


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

    .mobile-nav-icon {

        width: 36px;

        height: 36px;

        min-width: 36px;

        flex: 0 0 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;

        border-radius: 10px;

        color:
            #607089;

        background:
            #f0f4f8;

        border:
            1px solid #e4eaf0;

        transition:
            color .22s ease,
            background .22s ease,
            border-color .22s ease,
            transform .25s
            cubic-bezier(.2,.8,.2,1),

            box-shadow .22s ease;
    }


    /* =====================================================
       IMPORTANT:
       MAKE SVG ICONS VISIBLE
    ===================================================== */

    .mobile-nav-icon svg {

        width: 19px;

        height: 19px;

        min-width: 19px;

        min-height: 19px;

        display: block;

        overflow: visible;

        fill: none !important;

        stroke:
            currentColor !important;

        stroke-width:
            1.8 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;

        opacity: 1 !important;

        visibility: visible !important;

        color: inherit;

        pointer-events: none;
    }


    /* HOME SVG */

    .mobile-nav-icon svg path {

        vector-effect:
            non-scaling-stroke;
    }


    /* =====================================================
       LINK HOVER
    ===================================================== */

    .mobile-navigation > a:hover {

        color:
            #146ef5;

        background:
            linear-gradient(
                100deg,
                #f0f6ff,
                #f8fbff
            );

        border-color:
            #dbe8f8;

        transform:
            translateX(3px);

        box-shadow:
            0 5px 15px
            rgba(20,110,245,.055);
    }


    .mobile-navigation > a:hover
    .mobile-nav-icon {

        color:
            #146ef5;

        background:
            #e5efff;

        border-color:
            #d3e3fa;

        transform:
            scale(1.06);

        box-shadow:
            0 4px 10px
            rgba(20,110,245,.08);
    }


    .mobile-navigation > a:hover
    .mobile-nav-icon svg {

        transform:
            scale(1.05);
    }


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

    .mobile-navigation > a.active {

        color:
            #146ef5;

        background:
            linear-gradient(
                100deg,
                #edf5ff,
                #f8fbff
            );

        border-color:
            #d6e5f8;

        box-shadow:
            0 5px 15px
            rgba(20,110,245,.07);
    }


    .mobile-navigation > a.active
    .mobile-nav-icon {

        color:
            #146ef5;

        background:
            #deebff;

        border-color:
            #cfe0f8;

        box-shadow:
            0 4px 10px
            rgba(20,110,245,.07);
    }


    /* =====================================================
       ACTIVE BLUE INDICATOR
    ===================================================== */

    .mobile-navigation > a.active::after {

        content: "";

        position: absolute;

        left: -1px;

        top: 10px;

        bottom: 10px;

        width: 3px;

        border-radius:
            0 5px 5px 0;

        background:
            linear-gradient(
                180deg,
                #146ef5,
                #5c9dff
            );

        box-shadow:
            0 0 10px
            rgba(20,110,245,.25);
    }


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

    .mobile-nav-footer {

        margin-top: 6px;

        padding:
            13px 8px 4px;

        border-top:
            1px solid #edf1f5;

        display: flex;

        flex-direction: column;

        gap: 3px;
    }


    .mobile-nav-footer span:first-child {

        color:
            #344054;

        font-size:
            11px;

        font-weight:
            800;

        letter-spacing:
            .4px;
    }


    .mobile-nav-footer span:last-child {

        color:
            #94a3b8;

        font-size:
            10px;

        font-weight:
            500;
    }


    /* =====================================================
       MENU ITEM ANIMATION
    ===================================================== */

    .mobile-navigation.show > a {

        animation:
            fpwMobileNavItem
            .3s
            cubic-bezier(.2,.8,.2,1)
            both;
    }


    .mobile-navigation.show > a:nth-of-type(2) {
        animation-delay: .04s;
    }

    .mobile-navigation.show > a:nth-of-type(3) {
        animation-delay: .08s;
    }

    .mobile-navigation.show > a:nth-of-type(4) {
        animation-delay: .12s;
    }

    .mobile-navigation.show > a:nth-of-type(5) {
        animation-delay: .16s;
    }


    @keyframes fpwMobileNavItem {

        from {

            opacity: 0;

            transform:
                translateY(-8px);
        }

        to {

            opacity: 1;

            transform:
                translateY(0);
        }
    }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 600px) {

    .navbar {

        min-height: 68px;

        padding:
            0 13px;

        gap: 10px;
    }


    /* BIGGER LOGO */

    .navbar-logo {

        height: 75px;
    }


    .navbar-logo img {

        width: 250px;

        height: 100px;

        max-width: 68vw;
    }


    /* MENU BUTTON */

    .mobile-button {

        width: 44px;

        height: 44px;

        min-width: 44px;
    }


    /* MOBILE PANEL */

    .mobile-navigation {

        left: 7px;

        right: 7px;

        padding:
            10px;

        border-radius:
            0 0 16px 16px;
    }


    /* LINKS */

    .mobile-navigation > a {

        min-height: 52px;

        padding:
            0 12px;

        gap: 12px;

        font-size:
            14px;
    }


    /* ICON */

    .mobile-nav-icon {

        width: 34px;

        height: 34px;

        min-width: 34px;

        flex-basis: 34px;

        border-radius: 9px;
    }


    .mobile-nav-icon svg {

        width: 18px;

        height: 18px;

        min-width: 18px;

        min-height: 18px;
    }


    /* SEARCH */

    .mobile-search-box {

        height:
            45px;

        border-radius:
            11px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .navbar {

        padding:
            0 10px;
    }


    .navbar-logo img {

        width:
            200px;

        height:
            87px;

        max-width:
            65vw;
    }


    .mobile-button {

        width:
            42px;

        height:
            42px;

        min-width:
            42px;
    }


    .mobile-navigation > a {

        min-height:
            50px;

        font-size:
            14px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 330px) {

    .navbar-logo img {

        width:
            180px;

        max-width:
            63vw;
    }


    .mobile-button {

        width:
            40px;

        height:
            40px;

        min-width:
            40px;
    }
}


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

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

    .mobile-navigation,
    .mobile-navigation > a,
    .mobile-nav-icon,
    .mobile-nav-icon svg,
    .mobile-button,
    .mobile-button span,
    .navbar-logo img {

        animation: none !important;

        transition: none !important;
    }
}

.mobile-navigation a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-navigation a svg {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .2s ease,
        color .2s ease;
}

.mobile-navigation a:hover svg {
    transform: translateX(2px);
}