/* =========================================================
   CLICK2CLAIMHELP
   HERO SECTION
   BLUE + RED BRAND SYSTEM
========================================================= */


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

.hero-section {

    position: relative;

    min-height: calc(100vh - 78px);

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        85px 0 90px;

    background:
        radial-gradient(circle at 12% 15%,
            rgba(29, 78, 216, 0.08),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(239, 68, 68, 0.07),
            transparent 30%),
        #f8fafc;

}


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

.hero-bg-shape {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(1px);

}


.hero-bg-shape-one {

    width: 420px;

    height: 420px;

    top: -220px;

    left: -180px;

    background:
        radial-gradient(circle,
            rgba(29, 78, 216, 0.10),
            transparent 70%);

}


.hero-bg-shape-two {

    width: 480px;

    height: 480px;

    right: -240px;

    bottom: -260px;

    background:
        radial-gradient(circle,
            rgba(239, 68, 68, 0.09),
            transparent 70%);

}


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

.hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr) minmax(380px, 0.82fr);

    align-items: center;

    gap: 80px;

}


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

.hero-content {

    max-width: 720px;

}


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

.hero-badge {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 23px;

    padding:
        7px 13px;

    border:
        1px solid rgba(29, 78, 216, 0.14);

    border-radius: 999px;

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

    color: #475569;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 20px rgba(15, 23, 42, 0.04);

}


.hero-badge-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #1d4ed8,
            #ef4444);

    box-shadow:
        0 0 0 4px rgba(29, 78, 216, 0.08);

}


/* =========================================================
   H1
========================================================= */

.hero-content h1 {

    max-width: 760px;

    margin-bottom: 25px;

    color: #0f172a;

    font-family:
        "Manrope",
        sans-serif;

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

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -0.055em;

}


/* =========================================================
   GRADIENT TEXT
========================================================= */

.hero-gradient-text {

    display: block;

    background:
        linear-gradient(135deg,
            #1d4ed8 0%,
            #4338ca 55%,
            #b91c1c 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


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

.hero-description {

    max-width: 650px;

    margin-bottom: 30px;

    color: #526174;

    font-size: 18px;

    line-height: 1.75;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 29px;

}


/* =========================================================
   PRIMARY CTA
========================================================= */

.hero-primary-btn {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0 22px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
            #1d4ed8,
            #4338ca);

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(29, 78, 216, 0.22);

    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        background 200ms ease;

}


.hero-primary-btn:hover {

    background:
        linear-gradient(135deg,
            #ef4444,
            #b91c1c);

    box-shadow:
        0 12px 28px rgba(185, 28, 28, 0.24);

    transform:
        translateY(-2px);

}


.hero-primary-btn svg {

    transition:
        transform 200ms ease;

}


.hero-primary-btn:hover svg {

    transform:
        translateX(4px);

}


/* =========================================================
   SECONDARY CTA
========================================================= */

.hero-secondary-btn {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0 21px;

    border:
        1px solid #d6dee8;

    border-radius: 999px;

    background: #ffffff;

    color: #334155;

    font-size: 14px;

    font-weight: 700;

    transition:
        border-color 200ms ease,
        color 200ms ease,
        transform 200ms ease;

}


.hero-secondary-btn:hover {

    border-color:
        rgba(29, 78, 216, 0.45);

    color: #1d4ed8;

    transform:
        translateY(-2px);

}


/* =========================================================
   TRUST ROW
========================================================= */

.hero-trust {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 18px;

}


.hero-trust-item {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #64748b;

    font-size: 11px;

    font-weight: 600;

}


.hero-trust-item svg {

    color: #1d4ed8;

}


.hero-trust-divider {

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #cbd5e1;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.hero-disclaimer {

    max-width: 630px;

    color: #94a3b8;

    font-size: 10px;

    line-height: 1.6;

}


/* =========================================================
   HERO CARD WRAPPER
========================================================= */

.hero-card-wrapper {

    position: relative;

}


.hero-card-glow {

    position: absolute;

    width: 280px;

    height: 280px;

    right: -50px;

    top: -50px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(29, 78, 216, 0.13),
            transparent 70%);

    filter: blur(15px);

    pointer-events: none;

}


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

.hero-card {

    position: relative;

    padding: 25px;

    border:
        1px solid rgba(226, 232, 240, 0.95);

    border-radius: 22px;

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

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.11);

    backdrop-filter: blur(16px);

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

}


/* =========================================================
   CARD TOP BORDER
========================================================= */

.hero-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 28px;

    right: 28px;

    height: 3px;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(90deg,
            #1d4ed8,
            #4338ca,
            #ef4444);

}


/* =========================================================
   CARD HEADER
========================================================= */

.hero-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        4px 2px 21px;

    border-bottom:
        1px solid #edf1f5;

}


.hero-card-eyebrow {

    display: block;

    margin-bottom: 6px;

    color: #1d4ed8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.15em;

}


.hero-card-header h2 {

    color: #0f172a;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.03em;

}


.hero-card-icon {

    width: 44px;

    height: 44px;

    flex: 0 0 44px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            #eff6ff,
            #eef2ff);

    color: #1d4ed8;

}


/* =========================================================
   OPTIONS
========================================================= */

.hero-options {

    display: flex;

    flex-direction: column;

    gap: 9px;

    padding:
        18px 0;

}


.hero-option {

    min-height: 67px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        10px 12px;

    border:
        1px solid #e5eaf0;

    border-radius: 13px;

    background: #ffffff;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;

}


.hero-option:hover {

    border-color:
        rgba(29, 78, 216, 0.28);

    background:
        #f8fbff;

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

    transform:
        translateX(3px);

}


.hero-option-icon {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

}


.hero-option-icon.blue {

    background: #eff6ff;

    color: #1d4ed8;

}


.hero-option-icon.red {

    background: #fef2f2;

    color: #dc2626;

}


.hero-option-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

}


.hero-option-content strong {

    color: #1e293b;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.4;

}


.hero-option-content small {

    margin-top: 2px;

    color: #94a3b8;

    font-size: 13px;

}


.hero-option-arrow {

    color: #94a3b8;

    font-size: 18px;

    transition:
        color 180ms ease,
        transform 180ms ease;

}


.hero-option:hover .hero-option-arrow {

    color: #1d4ed8;

    transform:
        translateX(3px);

}


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

.hero-card-footer {

    padding-top: 5px;

}


.hero-card-btn {

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
            #ef4444,
            #b91c1c);

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(185, 28, 28, 0.18);

    transition:
        transform 200ms ease,
        box-shadow 200ms ease;

}


.hero-card-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 25px rgba(185, 28, 28, 0.25);

}


.hero-card-btn svg {

    transition:
        transform 180ms ease;

}


.hero-card-btn:hover svg {

    transform:
        translateX(3px);

}


.hero-card-footer p {

    margin-top: 9px;

    text-align: center;

    color: #94a3b8;

    font-size: 10px;

}


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

@media (max-width: 1050px) {

    .hero-grid {

        grid-template-columns:
            1fr minmax(0, 620px);

        gap: 55px;

    }


    .hero-content {

        max-width: 800px;

    }


    .hero-card-wrapper {

        width: 100%;

        max-width: 620px;

        margin-inline: auto;

    }

}


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

@media (max-width: 700px) {

    .hero-section {

        min-height: auto;

        padding:
            58px 0 65px;

    }


    .hero-grid {

        gap: 40px;

    }


    .hero-content h1 {

        margin-bottom: 20px;

        font-size:
            clamp(39px,
                11vw,
                53px);

        letter-spacing:
            -0.045em;

    }


    .hero-description {

        font-size: 16px;

        line-height: 1.65;

    }


    .hero-actions {

        align-items: stretch;

        flex-direction: column;

    }


    .hero-primary-btn,
    .hero-secondary-btn {

        width: 100%;

    }


    .hero-trust {

        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

    }


    .hero-trust-divider {

        display: none;

    }


    .hero-card {

        padding: 19px;

        border-radius: 18px;

    }


    .hero-card-header h2 {

        font-size: 18px;

    }


    .hero-option {

        min-height: 64px;

    }

}


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

@media (max-width: 420px) {

    .hero-section {

        padding-top: 45px;

    }


    .hero-badge {

        font-size: 10px;

    }


    .hero-content h1 {

        font-size: 38px;

    }


    .hero-description {

        font-size: 15px;

    }


    .hero-card {

        padding: 16px;

    }


    .hero-card-header {

        padding-bottom: 17px;

    }

}


/* =========================================================
   FINAL MOBILE HERO FIX
   CLICK2CLAIMHELP
========================================================= */

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


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 768px) {

    /* Hero itself */
    .hero-section {
        width: 100%;
        min-height: auto;
        padding: 48px 0 60px;
        overflow: hidden;
    }


    /* Container */
    .hero-section .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        margin: 0 auto;
    }


    /* =====================================================
       IMPORTANT:
       FORCE SINGLE COLUMN
    ====================================================== */

    .hero-grid {
        width: 100%;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 38px !important;

        grid-template-columns: none !important;

    }


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

    .hero-content {

        width: 100%;

        max-width: 100% !important;

        min-width: 0;

    }


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

    .hero-badge {

        max-width: 100%;

        margin-bottom: 20px;

        font-size: 10px;

        line-height: 1.4;

    }


    /* =====================================================
       H1
    ====================================================== */

    .hero-content h1 {

        width: 100%;

        max-width: 100%;

        margin-bottom: 19px;

        font-size: clamp(38px, 11vw, 52px);

        line-height: 1.02;

        letter-spacing: -0.045em;

        word-break: normal;

        overflow-wrap: normal;

    }


    .hero-gradient-text {

        display: inline;

    }


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

    .hero-description {

        width: 100%;

        max-width: 100%;

        margin-bottom: 25px;

        font-size: 15px;

        line-height: 1.7;

    }


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

    .hero-actions {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-bottom: 24px;

    }


    .hero-primary-btn,
    .hero-secondary-btn {

        width: 100%;

        min-height: 52px;

    }


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

    .hero-trust {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 9px;

    }


    .hero-trust-divider {

        display: none;

    }


    /* =====================================================
       DISCLAIMER
    ====================================================== */

    .hero-disclaimer {

        width: 100%;

        max-width: 100%;

        margin-top: 12px;

        font-size: 9px;

    }


    /* =====================================================
       RIGHT CARD
    ====================================================== */

    .hero-card-wrapper {

        position: relative;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        flex: none;

    }


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

    .hero-card {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding: 19px;

        border-radius: 18px;

        overflow: hidden;

    }


    /* =====================================================
       CARD HEADER
    ====================================================== */

    .hero-card-header {

        width: 100%;

        min-width: 0;

        padding-bottom: 17px;

    }


    .hero-card-header h2 {

        max-width: 220px;

        font-size: 18px;

        line-height: 1.2;

    }


    /* =====================================================
       OPTIONS
    ====================================================== */

    .hero-options {

        width: 100%;

        min-width: 0;

    }


    .hero-option {

        width: 100%;

        min-width: 0;

    }


    .hero-option-content {

        min-width: 0;

        overflow: hidden;

    }


    .hero-option-content strong {

        display: block;

        overflow-wrap: break-word;

    }


    .hero-option-content small {

        display: block;

    }


    /* =====================================================
       CARD BUTTON
    ====================================================== */

    .hero-card-btn {

        width: 100%;

        min-height: 49px;

        text-align: center;

    }

}


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

@media (max-width: 480px) {

    .hero-section {

        padding-top: 42px;

        padding-bottom: 50px;

    }


    .hero-section .container {

        padding-left: 16px;

        padding-right: 16px;

    }


    .hero-grid {

        gap: 32px !important;

    }


    .hero-content h1 {

        font-size: clamp(36px, 10.5vw, 46px);

        line-height: 1.03;

    }


    .hero-description {

        font-size: 14px;

        line-height: 1.7;

    }


    .hero-card {

        padding: 16px;

        border-radius: 17px;

    }


    .hero-card-header {

        gap: 12px;

    }


    .hero-card-header h2 {

        font-size: 17px;

    }


    .hero-card-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

    }


    .hero-option {

        min-height: 62px;

        padding: 9px;

    }


    .hero-option-icon {

        width: 36px;

        height: 36px;

        flex-basis: 36px;

    }


    .hero-option-content strong {

        font-size: 11px;

    }


    .hero-option-content small {

        font-size: 9px;

    }

}


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

@media (max-width: 360px) {

    .hero-section .container {

        padding-left: 13px;

        padding-right: 13px;

    }


    .hero-content h1 {

        font-size: 34px;

    }


    .hero-description {

        font-size: 13px;

    }


    .hero-card {

        padding: 13px;

    }


    .hero-option-content strong {

        font-size: 10px;

    }

}