/* =========================================================
   ABOUT PAGE
   CLICK2CLAIMHELP
========================================================= */

:root {
    --blue-dark: #071d41;
    --blue: #154fa3;
    --blue-light: #edf4ff;

    --red: #e52b35;
    --red-dark: #c91f29;

    --text: #172033;
    --muted: #5f6b7a;

    --white: #ffffff;

    --border: #e4e9f0;

    --shadow:
        0 18px 50px rgba(7, 29, 65, 0.10);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: #ffffff;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

h1,
h2,
h3 {
    font-family: "Manrope", sans-serif;
}

a {
    text-decoration: none;
}


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

.about-hero {
    position: relative;
    min-height: 600px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--blue-dark);
}

.about-hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        url("../images/about-hero.jpg");

    background-size: cover;
    background-position: center;

    transform: scale(1.02);
}

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 31, 72, .90) 0%,
            rgba(4, 31, 72, .78) 38%,
            rgba(4, 31, 72, .48) 65%,
            rgba(4, 31, 72, .20) 100%);
}

.about-hero-content {
    position: relative;
    z-index: 2;

    padding: 100px 0;
    max-width: 720px;
    margin-left: max(20px, calc((100vw - 1180px) / 2));
}

.about-eyebrow {
    display: inline-flex;

    padding: 8px 15px;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;

    background: rgba(255, 255, 255, .10);
}

.about-hero h1 {
    margin: 22px 0 18px;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -2px;
}

.about-hero h1 span {
    display: block;

    background:
        linear-gradient(90deg,
            #4d8cff,
            #e93640);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.about-hero p {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, .86);

    font-size: 18px;
    line-height: 1.75;
}

.about-hero-buttons {
    display: flex;
    gap: 14px;

    margin-top: 32px;

    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 10px;

    font-weight: 700;

    transition: .25s ease;
}

.btn-primary {
    color: #ffffff;

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

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

.btn-primary:hover {
    background:
        linear-gradient(135deg,
            #e52b35,
            #c91f29);

    transform: translateY(-2px);
}

.btn-secondary {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .45);
}

.btn-secondary:hover {
    background: #ffffff;
    color: var(--blue-dark);
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;

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

    font-size: 13px;
}

.hero-trust span {
    color: #55d8aa;
    font-weight: 800;
}


/* =========================================================
   INTRO
========================================================= */

.about-intro {
    padding: 100px 0;
}

.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr) minmax(300px, .8fr);

    gap: 70px;

    align-items: center;
}

.section-label {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.intro-content h2,
.section-heading h2,
.why-about-heading h2,
.cta-content h2 {
    margin: 0 0 20px;

    color: var(--blue-dark);

    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.15;

    letter-spacing: -1px;
}

.intro-content p {
    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;

    margin: 0 0 18px;
}

.intro-card {
    padding: 38px;

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

    background: #ffffff;

    box-shadow: var(--shadow);
}

.intro-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 22px;

    border-radius: 16px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 800;

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

.intro-card h3 {
    margin: 0 0 12px;

    color: var(--blue-dark);

    font-size: 23px;
}

.intro-card p {
    color: var(--muted);

    line-height: 1.7;
}

.intro-card a {
    display: inline-block;

    margin-top: 12px;

    color: var(--blue);

    font-weight: 700;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefit-overview {
    padding: 100px 0;

    background: #f7faff;
}

.section-heading {
    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;
}

.section-heading p,
.why-about-heading p {
    color: var(--muted);

    font-size: 17px;
    line-height: 1.7;
}

.benefit-grid {
    display: grid;

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

    gap: 20px;
}

.benefit-card {
    display: flex;
    gap: 20px;

    padding: 28px;

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

    background: #ffffff;

    transition: .25s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(7, 29, 65, .10);
}

.benefit-icon {
    flex: 0 0 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border-radius: 14px;

    color: #ffffff;

    font-weight: 800;

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

.benefit-card h3 {
    margin: 0 0 10px;

    color: var(--blue-dark);

    font-size: 20px;
}

.benefit-card p {
    margin: 0 0 15px;

    color: var(--muted);

    line-height: 1.65;
}

.benefit-card a {
    color: var(--blue);

    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   WHY
========================================================= */

.why-about {
    padding: 100px 0;
}

.why-about-heading {
    max-width: 680px;

    margin-bottom: 50px;
}

.why-grid {
    display: grid;

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

    gap: 20px;
}

.why-item {
    padding: 28px;

    border-top: 3px solid var(--blue);

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(7, 29, 65, .07);
}

.why-number {
    margin-bottom: 22px;

    color: #cbd8ef;

    font-size: 38px;
    font-weight: 800;
}

.why-item h3 {
    margin: 0 0 10px;

    color: var(--blue-dark);

    font-size: 20px;
}

.why-item p {
    margin: 0;

    color: var(--muted);

    line-height: 1.7;
}


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

.about-stats {
    padding: 65px 0;

    background:
        linear-gradient(110deg,
            #0a2c62,
            #164fa5,
            #273f91);
}

.stats-grid {
    display: grid;

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

    text-align: center;
}

.stat-item {
    padding: 15px;

    border-right:
        1px solid rgba(255, 255, 255, .18);
}

.stat-item:last-child {
    border-right: none;
}

.stat-item strong {
    display: block;

    color: #ffffff;

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

    font-size: 42px;

    line-height: 1;
}

.stat-item span {
    display: block;

    margin-top: 10px;

    color: rgba(255, 255, 255, .78);

    font-size: 14px;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {
    padding: 100px 0;
}

.steps-grid {
    display: grid;

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

    gap: 25px;
}

.step-card {
    position: relative;

    padding: 35px;

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

    background: #ffffff;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 25px;

    border-radius: 50%;

    color: #ffffff;

    font-weight: 800;

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

.step-card h3 {
    margin: 0 0 12px;

    color: var(--blue-dark);

    font-size: 21px;
}

.step-card p {
    margin: 0;

    color: var(--muted);

    line-height: 1.7;
}


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

.about-disclaimer {
    padding: 70px 0;

    background: #f5f7fa;
}

.disclaimer-box {
    padding: 35px;

    border-left: 4px solid var(--blue);

    background: #ffffff;
}

.disclaimer-box h2 {
    margin: 0 0 18px;

    color: var(--blue-dark);

    font-size: 25px;
}

.disclaimer-box p {
    color: #606b7a;

    font-size: 14px;
    line-height: 1.75;
}

.disclaimer-links {
    display: flex;
    gap: 20px;

    flex-wrap: wrap;

    margin-top: 20px;
}

.disclaimer-links a {
    color: var(--blue);

    font-size: 14px;
    font-weight: 700;
}


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

.about-cta {
    padding: 100px 0;

    background:
        linear-gradient(135deg,
            #061b3c,
            #103d7b);
}

.cta-content {
    max-width: 750px;

    margin: auto;

    text-align: center;
}

.cta-content h2 {
    color: #ffffff;
}

.cta-content p {
    max-width: 650px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, .78);

    font-size: 17px;
    line-height: 1.7;
}

.cta-content .section-label {
    color: #6ca2ff;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 54px;

    padding: 0 28px;

    border-radius: 10px;

    color: #ffffff;

    font-weight: 800;

    background:
        linear-gradient(135deg,
            #e52b35,
            #c91f29);

    box-shadow:
        0 12px 28px rgba(229, 43, 53, .25);

    transition: .25s ease;
}

.cta-button:hover {
    transform: translateY(-3px);

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


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .stat-item:nth-child(2) {
        border-right: none;
    }

    .stat-item {
        margin-bottom: 25px;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .container {
        width: min(100% - 28px, 1180px);
    }

    .about-hero {
        min-height: 650px;
    }

    .about-hero-content {
        padding: 80px 0;
        margin-left: 14px;
        margin-right: 14px;
    }

    .about-hero h1 {
        font-size: 42px;
    }

    .about-hero p {
        font-size: 16px;
    }

    .hero-trust {
        flex-wrap: wrap;
    }

    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-item {
        border-right: none;
        border-bottom:
            1px solid rgba(255, 255, 255, .15);
    }

    .stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .about-intro,
    .benefit-overview,
    .why-about,
    .how-section,
    .about-cta {
        padding: 70px 0;
    }

}


@media (max-width: 480px) {

    .about-hero h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .about-hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .benefit-card {
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-bottom:
            1px solid rgba(255, 255, 255, .15) !important;
    }

    .stat-item:last-child {
        border-bottom: none !important;
    }

}