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

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;

    color: #19334f;

    background: #ffffff;

    overflow-x: hidden;
}


a {
    text-decoration: none;
}


button {
    font-family: inherit;
}


.container {
    width: min(1180px, 92%);

    margin: 0 auto;
}


.section {
    padding: 100px 0;

    scroll-margin-top: 90px;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.section-header {
    max-width: 800px;

    margin-bottom: 60px;
}

.section-header.centered {
    text-align: center;

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

.section-label {
    display: inline-block;

    color: #0867b5;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 14px;
}

.section-header h2 {
    color: #19334f;

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

    line-height: 1.15;

    letter-spacing: -1.5px;

    margin-bottom: 18px;
}

.section-header h2 span {
    color: #1268b3;
}

.section-header p {
    color: #71849a;

    font-size: 14px;

    line-height: 1.8;
}


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

.hero {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #ffffff;
}


.hero-background {
    position: absolute;

    inset: 0;

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

    background-size: cover;

    background-position: center;

    transform: scale(1.02);
}


.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 41, 86, .91) 0%,
            rgba(11, 60, 116, .77) 45%,
            rgba(8, 48, 91, .55) 100%
        );
}


.hero-container {
    position: relative;

    z-index: 2;
}


.hero-content {
    max-width: 760px;

    padding: 80px 0;
}


.hero-label {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 17px;

    margin-bottom: 25px;

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

    border-radius: 30px;

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

    backdrop-filter: blur(8px);

    font-size: 12px;

    font-weight: 600;
}


.hero-label i {
    font-size: 17px;
}


.hero h1 {
    font-size: clamp(45px, 6vw, 72px);

    line-height: 1.02;

    letter-spacing: -3px;

    margin-bottom: 24px;
}


.hero h1 span {
    color: #b8ddff;
}


.hero-content > p {
    max-width: 680px;

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

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 32px;
}


.hero-buttons {
    display: flex;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;

    margin-bottom: 35px;
}


.hero-btn {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;

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

    gap: 9px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 700;

    transition: all .3s ease;
}


.hero-btn-primary {
    background: #ffffff;

    color: #123f7a;
}


.hero-btn-primary:hover {
    transform: translateY(-3px);

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


.hero-btn-secondary {
    color: #ffffff;

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

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


.hero-btn-secondary:hover {
    background:
        rgba(255,255,255,.18);

    transform:
        translateY(-3px);
}


.hero-btn i {
    font-size: 19px;
}


.hero-information {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;
}


.hero-info-item {
    display: flex;

    align-items: center;

    gap: 7px;

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

    font-size: 11px;
}


.hero-info-item i {
    color: #8ed2ff;

    font-size: 16px;
}


/* =====================================================
   ABOUT
===================================================== */

.about-section {
    background: #ffffff;
}


.about-grid {
    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap: 80px;

    align-items: center;
}


.about-content h3 {
    color: #19334f;

    font-size: 26px;

    margin-bottom: 18px;
}


.about-content > p {
    color: #71849a;

    font-size: 13px;

    line-height: 1.9;

    margin-bottom: 15px;
}


.about-features {
    display: grid;

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

    gap: 20px;

    margin-top: 35px;
}


.about-feature {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    opacity: 0;

    transform: translateY(25px);

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


.about-feature.visible {
    opacity: 1;

    transform: translateY(0);
}


.feature-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 11px;

    background: #eef6fd;

    color: #0068b7;

    font-size: 20px;
}


.about-feature h4 {
    color: #19334f;

    font-size: 13px;

    margin-bottom: 5px;
}


.about-feature p {
    color: #8493a5;

    font-size: 10px;

    line-height: 1.6;
}


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

.about-visual {
    padding: 30px;

    border-radius: 28px;

    background:
        #eef7fd;
}


.about-card {
    padding: 42px;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(24, 72, 112, .08);
}


.about-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;
}


.about-card-icon {
    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 15px;

    background: #eaf4fc;

    color: #0068b7;

    font-size: 28px;
}


.status-badge,
.analysis-complete {
    padding: 9px 14px;

    border-radius: 30px;

    background: #e9f8f0;

    color: #07864c;

    font-size: 10px;

    font-weight: 700;
}


.about-card h3 {
    color: #19334f;

    font-size: 25px;

    margin-bottom: 8px;
}


.about-card > p {
    color: #71849a;

    font-size: 12px;
}


.about-card-divider {
    width: 100%;

    height: 1px;

    background: #e6edf3;

    margin: 32px 0;
}


.about-stat-grid {
    display: grid;

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

    gap: 28px;
}


.about-stat-grid div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.about-stat-grid strong {
    color: #0068b7;

    font-size: 24px;
}


.about-stat-grid span {
    color: #8493a5;

    font-size: 10px;
}


/* =====================================================
   SERVICES
===================================================== */

.services-section {
    background: #f7faff;
}


.services-grid {
    display: grid;

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

    gap: 22px;
}


.service-card {
    position: relative;

    padding: 30px;

    min-height: 270px;

    background: #ffffff;

    border: 1px solid #e7edf5;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(23, 68, 110, .04);

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease,
        box-shadow .3s ease;
}


.service-card.visible {
    opacity: 1;

    transform: translateY(0);
}


.service-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px rgba(23,68,110,.10);
}


.service-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 13px;

    background: #eef6fd;

    color: #0068b7;

    font-size: 25px;

    margin-bottom: 22px;
}


.service-card h3 {
    color: #19334f;

    font-size: 16px;

    margin-bottom: 10px;
}


.service-card p {
    color: #71849a;

    font-size: 11px;

    line-height: 1.75;

    margin-bottom: 22px;
}


.service-card a {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #1268b3;

    font-size: 11px;

    font-weight: 700;
}


.service-card a i {
    font-size: 16px;

    transition:
        transform .2s ease;
}


.service-card:hover a i {
    transform:
        translateX(4px);
}


.service-featured {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f8ff
        );

    border-color:
        #cfe4f6;
}


/* =====================================================
   ELIGIBILITY
===================================================== */

.eligibility-section {
    background: #ffffff;
}


.eligibility-grid {
    display: grid;

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

    gap: 20px;
}


.eligibility-card {
    position: relative;

    padding: 30px;

    border:
        1px solid #e5edf5;

    border-radius: 17px;

    background: #ffffff;

    overflow: hidden;

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease,
        box-shadow .3s ease;
}


.eligibility-card.visible {
    opacity: 1;

    transform: translateY(0);
}


.eligibility-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px rgba(23,68,110,.08);
}


.eligibility-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color: #e6eef6;

    font-size: 28px;

    font-weight: 800;
}


.eligibility-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 22px;

    border-radius: 12px;

    background: #eef6fd;

    color: #0068b7;

    font-size: 23px;
}


.eligibility-card h3 {
    color: #19334f;

    font-size: 14px;

    margin-bottom: 9px;
}


.eligibility-card p {
    color: #71849a;

    font-size: 10px;

    line-height: 1.7;
}


.eligibility-notice {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 30px;

    padding: 18px 20px;

    border-radius: 12px;

    background: #f2f8fd;

    color: #71849a;

    font-size: 11px;

    line-height: 1.7;
}


.eligibility-notice i {
    color: #0068b7;

    font-size: 20px;
}


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

.how-section {
    position: relative;

    background: #f7faff;

    overflow: hidden;
}


.how-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

    background:
        rgba(28, 101, 183, .035);

    pointer-events: none;
}


.how-section::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -200px;
    right: -200px;

    border-radius: 50%;

    background:
        rgba(28, 101, 183, .035);

    pointer-events: none;
}


.how-section .section-header {
    position: relative;

    z-index: 2;

    margin-bottom: 65px;
}


.steps-wrapper {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 30px;

    max-width: 1120px;

    margin: 0 auto;
}


.step-card {
    position: relative;

    min-height: 245px;

    padding: 30px;

    background: #ffffff;

    border:
        1px solid #e7edf5;

    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(23, 68, 110, .055);

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .65s ease,
        transform .65s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.step-card.visible {
    opacity: 1;

    transform:
        translateY(0);
}


.step-card:nth-child(1) {
    transition-delay: .05s;
}


.step-card:nth-child(2) {
    transition-delay: .15s;
}


.step-card:nth-child(3) {
    transition-delay: .25s;
}


.step-card:nth-child(4) {
    transition-delay: .35s;
}


.step-card:nth-child(5) {
    transition-delay: .45s;
}


.step-card:nth-child(6) {
    transition-delay: .55s;
}


.step-card:hover {
    transform:
        translateY(-8px);

    border-color:
        #cfe2f6;

    box-shadow:
        0 18px 40px rgba(24, 83, 136, .12);
}


.step-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


.step-number {
    color: #dce8f4;

    font-size: 42px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;

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


.step-card:hover .step-number {
    color: #c9ddef;

    transform:
        translateX(3px);
}


.step-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 14px;

    background: #eef6fd;

    color: #0068b7;

    font-size: 26px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .35s ease;
}


.step-card:hover .step-icon {
    background: #1268b3;

    color: #ffffff;

    transform:
        translateY(-3px)
        rotate(-3deg);
}


.step-content h3 {
    margin: 0 0 10px;

    color: #19334f;

    font-size: 17px;

    font-weight: 700;
}


.step-content p {
    margin: 0;

    color: #71849a;

    font-size: 12px;

    line-height: 1.8;

    max-width: 290px;
}


.step-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;

    pointer-events: none;
}


.step-card:hover::before {
    left: 150%;
}


.step-card:nth-child(2) {
    border-color: #dcebf8;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f9fcff 100%
        );
}


.step-card:nth-child(2) .step-icon {
    background: #eef6fd;
    color: #0068b7;
}

.step-card:nth-child(2):hover .step-icon {
    background: #1268b3;
    color: #ffffff;
}


.step-card:nth-child(2):hover {
    border-color: #bcd9f2;

    box-shadow:
        0 20px 45px rgba(0,104,183,.13);
}


/* =====================================================
   IMAGE ANALYSIS
===================================================== */

.image-analysis-section {
    background: #ffffff;
}


.image-analysis-grid {
    display: grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap: 70px;

    align-items: center;
}


.image-analysis-content p {
    color: #71849a;

    font-size: 13px;

    line-height: 1.9;

    margin-bottom: 16px;
}


.technology-list {
    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 28px;
}


.technology-list div {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #19334f;

    font-size: 12px;

    font-weight: 600;
}


.technology-list i {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 10px;

    background: #eef6fd;

    color: #0068b7;

    font-size: 19px;
}


/* =====================================================
   IMAGE ANALYSIS WINDOW
===================================================== */

.analysis-visual {
    padding: 30px;

    border-radius: 28px;

    background:
        #eef7fd;
}


.analysis-window {
    padding: 30px;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(24,72,112,.08);
}


.analysis-window-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom:
        1px solid #e6edf3;
}


.analysis-window-title {
    display: flex;

    align-items: center;

    gap: 13px;
}


.analysis-window-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 12px;

    background: #eaf4fc;

    color: #0068b7;

    font-size: 23px;
}


.analysis-window-title > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.analysis-window-title strong {
    color: #19334f;

    font-size: 14px;
}


.analysis-window-title span {
    color: #8a9aae;

    font-size: 9px;
}


.analysis-body {
    display: flex;

    align-items: center;

    gap: 30px;

    padding: 35px 0;
}


.confidence-circle {
    width: 125px;
    height: 125px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

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

    border:
        8px solid #dceefa;

    border-radius: 50%;

    background: #f5faff;
}


.confidence-circle strong {
    color: #0068b7;

    font-size: 28px;
}


.confidence-circle span {
    color: #71849a;

    font-size: 9px;

    margin-top: 3px;
}


.analysis-result {
    display: flex;

    flex-direction: column;
}


.analysis-result > span {
    color: #8a9aae;

    font-size: 10px;

    margin-bottom: 7px;
}


.analysis-result strong {
    color: #19334f;

    font-size: 20px;

    margin-bottom: 8px;
}


.analysis-result p {
    color: #71849a;

    font-size: 10px;
}


.recommendation-box {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px;

    border-radius: 12px;

    background: #f4f9fd;
}


.recommendation-box > i {
    color: #0068b7;

    font-size: 24px;
}


.recommendation-box strong {
    display: block;

    color: #19334f;

    font-size: 11px;

    margin-bottom: 5px;
}


.recommendation-box p {
    color: #71849a;

    font-size: 9px;

    line-height: 1.6;
}


/* =====================================================
   FAQ
===================================================== */

.faq-section {
    background: #f7faff;
}


.faq-list {
    max-width: 900px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.faq-item {
    background: #ffffff;

    border:
        1px solid #e4ebf3;

    border-radius: 12px;

    overflow: hidden;
}


.faq-question {
    width: 100%;

    padding: 20px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: none;

    background: #ffffff;

    color: #19334f;

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.faq-question i {
    flex-shrink: 0;

    color: #0068b7;

    font-size: 21px;

    transition:
        transform .3s ease;
}


.faq-item.active
.faq-question i {
    transform:
        rotate(45deg);
}


.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height .35s ease;
}


.faq-answer p {
    padding:
        0 22px 20px;

    color: #71849a;

    font-size: 11px;

    line-height: 1.8;
}


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

.contact-section {
    background: #ffffff;
}


.contact-grid {
    display: grid;

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

    gap: 20px;
}


.contact-card {
    padding: 30px;

    border:
        1px solid #e4ebf3;

    border-radius: 17px;

    background: #ffffff;

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease,
        box-shadow .3s ease;
}


.contact-card.visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

    box-shadow:
        0 15px 35px rgba(23,68,110,.07);
}


.contact-card-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 20px;

    border-radius: 12px;

    background: #eef6fd;

    color: #0068b7;

    font-size: 22px;
}


.contact-card h3 {
    color: #19334f;

    font-size: 14px;

    margin-bottom: 10px;
}


.contact-card p {
    color: #71849a;

    font-size: 10px;

    line-height: 1.8;
}


/* =====================================================
   GENERAL REVEAL
===================================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(30px);

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


.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1000px) {

    .about-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


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


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


    .steps-wrapper {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 25px;
    }


    .image-analysis-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


@media (max-width: 700px) {

    .section {
        padding: 75px 0;
    }


    .hero {
        min-height: 600px;
    }


    .hero-content {
        padding: 70px 0;
    }


    .hero h1 {
        font-size: 43px;

        letter-spacing: -2px;
    }


    .hero-content > p {
        font-size: 14px;
    }


    .about-features {
        grid-template-columns: 1fr;
    }


    .services-grid,
    .eligibility-grid,
    .steps-wrapper,
    .contact-grid {
        grid-template-columns: 1fr;
    }


    .step-card {
        min-height: auto;

        padding: 25px;
    }


    .analysis-body {
        flex-direction: column;

        align-items: flex-start;
    }


    .analysis-window {
        padding: 22px;
    }


    .analysis-window-header {
        align-items: flex-start;

        gap: 15px;
    }


    .analysis-complete {
        font-size: 8px;
    }


    .about-card {
        padding: 30px;
    }

}


@media (max-width: 500px) {

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }


    .hero-btn {
        width: 100%;
    }


    .hero-information {
        flex-direction: column;

        gap: 10px;
    }


    .about-visual,
    .analysis-visual {
        padding: 15px;
    }


    .about-card {
        padding: 25px;
    }


    .about-card h3 {
        font-size: 21px;
    }


    .analysis-window {
        padding: 18px;
    }


    .confidence-circle {
        width: 110px;
        height: 110px;
    }

}
/* Homepage assistance program requirements */
.services-grid .service-card .service-requirements {
    list-style: disc;
    text-align: left;
    margin: 12px 0 0;
    padding-left: 22px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.8;
}

.services-grid .service-card .service-requirements li {
    margin: 3px 0;
}

.services-grid .service-card > p {
    margin-bottom: 8px;
}

@media (max-width: 700px) {
    .services-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .services-grid .service-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}