.resources-hero,
.resources-categories,
.featured-resource,
.guides-section,
.resource-checklist-section,
.resources-faq,
.resources-cta {
    overflow: hidden;
}

.resources-hero *,
.resources-categories *,
.featured-resource *,
.guides-section *,
.resource-checklist-section *,
.resources-faq *,
.resources-cta * {
    box-sizing: border-box;
}

.resources-hero img {
    max-width: 100%;
}


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

.resources-hero {
    padding:
        30px 0 90px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(99, 91, 255, 0.14),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f8ff 100%
        );
}


.resources-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.9fr);

    gap:
        clamp(35px, 7vw, 90px);

    align-items: center;

}


.resources-hero-content {
    min-width: 0;
}


.resources-hero h1 {

    max-width: 800px;

    margin:
        12px 0 22px;

    color:
        #171a2b;

    font-size:
        clamp(2.5rem, 5.5vw, 5rem);

    line-height:
        1.02;

    letter-spacing:
        -0.055em;

}


.resources-hero-text {

    max-width: 720px;

    margin:
        0;

    color:
        #666d7b;

    font-size:
        clamp(0.9rem, 1.3vw, 1.05rem);

    line-height:
        1.8;

}


.resources-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap:
        12px;

    margin-top:
        30px;

}


.resources-hero-badges {

    display: flex;

    flex-wrap: wrap;

    gap:
        8px;

    margin-top:
        25px;

}


.resources-hero-badges span {

    padding:
        8px 12px;

    border:
        1px solid
        rgba(99, 91, 255, 0.13);

    border-radius:
        50px;

    background:
        rgba(99, 91, 255, 0.045);

    color:
        #625c9d;

    font-size:
        0.67rem;

    font-weight:
        750;

}


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

.resources-hero-visual {

    display:
        flex;

    justify-content:
        center;

    min-width:
        0;

}


.resource-dashboard {

    position:
        relative;

    width:
        min(100%, 500px);

    min-height:
        380px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(99, 91, 255, 0.13);

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            #181b31,
            #625bff
        );

    box-shadow:
        0 30px 80px
        rgba(40, 35, 100, 0.16);

}


.resource-dashboard::before {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    top:
        -110px;

    right:
        -100px;

    border-radius:
        50%;

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

}


.resource-dashboard::after {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    bottom:
        -130px;

    left:
        -90px;

    border-radius:
        50%;

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

}


.dashboard-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    gap:
        7px;

    padding:
        18px 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.1);

}


.dashboard-top span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

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

}


.dashboard-content {

    position:
        relative;

    z-index:
        2;

    padding:
        60px 45px;

    color:
        #ffffff;

}


.dashboard-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        22px;

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

    border-radius:
        15px;

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

    font-size:
        0.9rem;

    font-weight:
        900;

}


.dashboard-content p {

    margin:
        0 0 12px;

    color:
        rgba(255,255,255,0.62);

    font-size:
        0.58rem;

    font-weight:
        850;

    letter-spacing:
        0.15em;

}


.dashboard-content h2 {

    max-width:
        300px;

    margin:
        0;

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    line-height:
        1.02;

    letter-spacing:
        -0.04em;

}


.dashboard-lines {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin-top:
        35px;

}


.dashboard-lines span {

    display:
        block;

    height:
        7px;

    border-radius:
        20px;

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

}


.dashboard-lines span:nth-child(1) {
    width: 85%;
}

.dashboard-lines span:nth-child(2) {
    width: 65%;
}

.dashboard-lines span:nth-child(3) {
    width: 45%;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.resources-heading {

    max-width:
        800px;

    margin-bottom:
        45px;

}


.resources-heading h2 {

    margin:
        10px 0 14px;

}


.resources-heading .muted {

    max-width:
        700px;

    line-height:
        1.75;

}


/* =========================================================
   CATEGORIES
========================================================= */

.resource-category-grid {

    display:
        grid;

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

    gap:
        16px;

}


.resource-category-card {

    position:
        relative;

    min-width:
        0;

    padding:
        28px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(30,35,65,0.08);

    border-radius:
        21px;

    background:
        #ffffff;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.resource-category-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 50px
        rgba(30,35,65,0.08);

}


.category-number {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    color:
        #c2c5d0;

    font-size:
        0.58rem;

    font-weight:
        900;

}


.category-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    margin-bottom:
        22px;

    border-radius:
        13px;

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

    color:
        #635bff;

    font-size:
        0.62rem;

    font-weight:
        900;

}


.resource-category-card h3 {

    margin:
        0 0 9px;

    font-size:
        1.05rem;

}


.resource-category-card p {

    margin:
        0;

    color:
        #707684;

    font-size:
        0.72rem;

    line-height:
        1.7;

}


.category-link {

    display:
        inline-block;

    margin-top:
        20px;

    color:
        #635bff;

    font-size:
        0.68rem;

    font-weight:
        850;

}


/* =========================================================
   FEATURED RESOURCE
========================================================= */

.featured-resource {

    background:
        #f7f8fc;

}


.featured-resource-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

    padding:
        clamp(28px, 5vw, 55px);

    border:
        1px solid
        rgba(99,91,255,0.1);

    border-radius:
        27px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafaff
        );

}


.featured-resource-content {

    min-width:
        0;

}


.resource-label {

    color:
        #635bff;

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

}


.featured-resource-card h2 {

    max-width:
        700px;

    margin:
        12px 0 15px;

    font-size:
        clamp(1.8rem, 4vw, 3rem);

    line-height:
        1.08;

    letter-spacing:
        -0.04em;

}


.featured-resource-card p {

    max-width:
        680px;

    margin:
        0;

    color:
        #6e7481;

    line-height:
        1.75;

}


.featured-points {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        23px 0;

}


.featured-points span {

    padding:
        8px 11px;

    border-radius:
        50px;

    background:
        #f1f1ff;

    color:
        #625c9d;

    font-size:
        0.63rem;

    font-weight:
        750;

}


.featured-resource-number {

    flex:
        0 0 160px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        160px;

    height:
        160px;

    border:
        1px solid
        rgba(99,91,255,0.12);

    border-radius:
        25px;

    background:
        rgba(99,91,255,0.04);

    text-align:
        center;

}


.featured-resource-number strong {

    color:
        #635bff;

    font-size:
        3rem;

    line-height:
        1;

}


.featured-resource-number span {

    max-width:
        80px;

    margin-top:
        10px;

    color:
        #7a7f8b;

    font-size:
        0.58rem;

    font-weight:
        850;

    line-height:
        1.4;

}


/* =========================================================
   RESOURCE GRID
========================================================= */

.resources-grid {

    display:
        grid;

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

    gap:
        18px;

}


.resource-card {

    min-width:
        0;

    padding:
        clamp(21px, 2.5vw, 28px);

    border:
        1px solid
        rgba(30,35,65,0.08);

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 8px 30px
        rgba(30,35,65,0.025);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.resource-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 50px
        rgba(30,35,65,0.07);

}


.resource-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        22px;

}


.resource-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        35px;

    height:
        35px;

    flex:
        0 0 auto;

    border-radius:
        10px;

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

    color:
        #635bff;

    font-size:
        0.62rem;

    font-weight:
        900;

}


.resource-category {

    min-width:
        0;

    color:
        #858a96;

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-align:
        right;

}


.resource-card h3 {

    margin:
        0 0 11px;

    font-size:
        1.12rem;

    line-height:
        1.3;

}


.resource-card p {

    margin:
        0;

    color:
        #6d7380;

    font-size:
        0.73rem;

    line-height:
        1.72;

}


.resource-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        20px;

}


.resource-tags span {

    padding:
        6px 9px;

    border:
        1px solid
        rgba(30,35,65,0.07);

    border-radius:
        50px;

    background:
        #fafafe;

    color:
        #707582;

    font-size:
        0.55rem;

    font-weight:
        700;

}


.resource-read {

    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        22px;

    color:
        #635bff;

    font-size:
        0.68rem;

    font-weight:
        850;

    text-decoration:
        none;

}


/* =========================================================
   CHECKLIST
========================================================= */

.resource-checklist-section {

    background:
        #f7f8fc;

}


.resource-checklist {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap:
        clamp(30px, 7vw, 80px);

    align-items:
        start;

}


.checklist-content h2 {

    margin:
        10px 0 15px;

    font-size:
        clamp(1.8rem, 4vw, 2.7rem);

    line-height:
        1.1;

}


.checklist-content > p:last-child {

    max-width:
        500px;

    line-height:
        1.7;

}


.checklist-items {

    display:
        grid;

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

    gap:
        11px;

}


.checklist-items > div {

    min-width:
        0;

    padding:
        18px;

    border:
        1px solid
        rgba(30,35,65,0.08);

    border-radius:
        15px;

    background:
        #ffffff;

}


.checklist-items span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #635bff;

    font-size:
        0.58rem;

    font-weight:
        900;

}


.checklist-items strong {

    display:
        block;

    font-size:
        0.78rem;

}


.checklist-items p {

    margin:
        5px 0 0;

    color:
        #737987;

    font-size:
        0.66rem;

    line-height:
        1.5;

}


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

.resources-faq details {

    margin-bottom:
        10px;

    padding:
        19px 20px;

    border:
        1px solid
        rgba(30,35,65,0.08);

    border-radius:
        13px;

    background:
        #ffffff;

}


.resources-faq summary {

    cursor:
        pointer;

    list-style:
        none;

    font-size:
        0.82rem;

    font-weight:
        800;

}


.resources-faq summary::-webkit-details-marker {
    display:
        none;
}


.resources-faq summary::after {

    content:
        "+";

    float:
        right;

    color:
        #635bff;

    font-size:
        1rem;

}


.resources-faq details[open] summary::after {
    content:
        "−";
}


.resources-faq details p {

    max-width:
        800px;

    margin:
        14px 0 2px;

    color:
        #6d7380;

    font-size:
        0.72rem;

    line-height:
        1.7;

}


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

.resources-cta {

    padding:
        clamp(65px, 8vw, 95px) 0;

    background:
        linear-gradient(
            135deg,
            #171a2b,
            #292c4d
        );

    color:
        #ffffff;

}


.resources-cta-inner {

    max-width:
        850px;

    margin:
        auto;

    text-align:
        center;

}


.resources-cta-inner h2 {

    margin:
        10px 0 15px;

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height:
        1.06;

    letter-spacing:
        -0.04em;

}


.resources-cta-inner > p:not(.eyebrow) {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        #c9ccda;

    line-height:
        1.7;

}


.resources-cta-actions {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        28px;

}


/* =========================================================
   TABLET
   1024px
========================================================= */

@media (max-width: 1024px) {

    .resources-hero {

        padding:
            120px 0 75px;

    }


    .resource-category-grid {

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

    }


    .resources-grid {

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

    }


    .resource-checklist {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   TABLET
   900px
========================================================= */

@media (max-width: 900px) {

    .resources-hero-grid {

        grid-template-columns:
            1fr;

    }


    .resources-hero-content {

        max-width:
            800px;

    }


    .resources-hero-visual {

        justify-content:
            flex-start;

    }


    .resource-dashboard {

        width:
            min(100%, 600px);

    }


    .featured-resource-card {

        align-items:
            flex-start;

    }

}


/* =========================================================
   MOBILE
   600px
========================================================= */

@media (max-width: 600px) {

    .resources-hero {

        padding:
            90px 0 60px;

    }


    .resources-hero h1 {

        font-size:
            clamp(2.1rem, 10vw, 3rem);

        letter-spacing:
            -0.045em;

    }


    .resources-hero-text {

        font-size:
            0.86rem;

        line-height:
            1.7;

    }


    .resources-hero-actions {

        flex-direction:
            column;

    }


    .resources-hero-actions .btn {

        width:
            100%;

        text-align:
            center;

    }


    .resources-hero-badges {

        flex-direction:
            column;

    }


    .resources-hero-badges span {

        width:
            100%;

        text-align:
            center;

    }


    .resource-dashboard {

        min-height:
            320px;

        border-radius:
            22px;

    }


    .dashboard-content {

        padding:
            45px 28px;

    }


    .dashboard-content h2 {

        font-size:
            2.3rem;

    }


    .resource-category-grid {

        grid-template-columns:
            1fr;

    }


    .resources-grid {

        grid-template-columns:
            1fr;

    }


    .featured-resource-card {

        flex-direction:
            column;

        gap:
            30px;

        padding:
            25px 20px;

    }


    .featured-resource-number {

        width:
            100%;

        height:
            130px;

        flex:
            none;

    }


    .featured-resource-card h2 {

        font-size:
            1.85rem;

    }


    .checklist-items {

        grid-template-columns:
            1fr;

    }


    .resources-cta-actions {

        flex-direction:
            column;

    }


    .resources-cta-actions .btn {

        width:
            100%;

        text-align:
            center;

    }

}


/* =========================================================
   SMALL MOBILE
   480px
========================================================= */

@media (max-width: 480px) {

    .resources-hero {

        padding:
            78px 0 50px;

    }


    .resources-hero h1 {

        font-size:
            2.05rem;

    }


    .resources-heading h2 {

        font-size:
            1.65rem;

    }


    .resource-category-card {

        padding:
            22px;

    }


    .resource-card {

        padding:
            20px 18px;

    }


    .resource-category-card p,
    .resource-card p {

        font-size:
            0.7rem;

    }


    .resource-card-top {

        align-items:
            flex-start;

    }


    .resource-category {

        max-width:
            150px;

        line-height:
            1.4;

    }


    .dashboard-content {

        padding:
            40px 23px;

    }


    .dashboard-content h2 {

        font-size:
            2rem;

    }


    .featured-resource-card h2 {

        font-size:
            1.7rem;

    }

}


/* =========================================================
   VERY SMALL MOBILE
   360px
========================================================= */

@media (max-width: 360px) {

    .resources-hero h1 {

        font-size:
            1.85rem;

    }


    .resources-hero-text {

        font-size:
            0.82rem;

    }


    .resource-category-card {

        padding:
            19px;

    }


    .resource-card {

        padding:
            18px 15px;

    }


    .resource-dashboard {

        min-height:
            280px;

    }


    .dashboard-content {

        padding:
            35px 20px;

    }


    .dashboard-content h2 {

        font-size:
            1.75rem;

    }


    .featured-resource-number {

        height:
            110px;

    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .resource-category-card:hover,
    .resource-card:hover {

        transform:
            none;

        box-shadow:
            0 8px 30px
            rgba(30,35,65,0.025);

    }

}


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

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

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

        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;

    }

}