/* Prevent image layout shifts */
img,
video {
    max-width: 100%;
}

/* Browser-level rendering optimization */
[data-performance-section] {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-performance-animation] {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* Low-data mode: optional visual reductions */
[data-network-mode="low"] [data-optional-effect] {
    animation: none !important;
    backdrop-filter: none !important;
}

/* Keep image ratios stable */
img[width][height] {
    height: auto;
}









/* ======================================
       HAPROVEN HERO SECTION
======================================== */


#hero-section {

    &.hapro-hero {
        /* --hh-bg: var(--color-bg, #ffffff); */
        /* --hh-text: var(--color-text, #111827); */
        --hh-muted: var(--color-muted, #64748b);
        --hh-border: var(--color-border, #e5e7eb);
        --hh-primary: var(--color-primary, #2563eb);

        background: var(--hh-bg);
        color: var(--hh-text);
        padding: 85px 24px 65px;
    }

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

    .hero-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* INTRO */

    .hero-intro {
        max-width: 900px;
    }

    .hero-label {
        display: inline-block;
        margin-bottom: 22px;
        color: var(--hh-primary);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .hero-title {
        margin: 0 0 27px;
        color: var(--hh-text);
        font-size: clamp(60px, 9vw, 125px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -5px;
    }

    .hero-description {
        max-width: 780px;
        margin: 0;
        color: var(--hh-muted);
        font-size: clamp(16px, 1.6vw, 20px);
        line-height: 1.85;
    }

    .hero-description strong {
        color: var(--hh-text);
    }

    /* ACTIONS */

    .hero-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 28px;
        margin-top: 30px;
    }

    .hero-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 7px;
        border-bottom: 2px solid var(--hh-primary);
        color: var(--hh-text);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: .2s ease;
    }

    .hero-link:hover {
        color: var(--hh-primary);
        gap: 15px;
    }

    .hero-link i {
        color: var(--hh-primary);
    }

    /* DIVIDER */

    .hero-divider {
        height: 1px;
        margin: 65px 0 30px;
        background: var(--hh-border);
    }

    /* HIGHLIGHTS */

    .hero-highlights {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 30px;
    }

    .highlight-item {
        min-width: 0;
    }

    .highlight-name {
        display: block;
        margin-bottom: 18px;
        color: var(--hh-text);
        font-size: 16px;
        font-weight: 750;
    }

    .highlight-value {
        display: block;
        color: var(--hh-primary);
        font-size: clamp(28px, 3.5vw, 48px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -1.5px;
    }

    .highlight-description {
        max-width: 220px;
        margin: 12px 0 0;
        color: var(--hh-muted);
        font-size: 13px;
        line-height: 1.7;
    }

    /* RESPONSIVE */

    @media (max-width: 900px) {

        & {
            padding: 80px 22px 55px;
        }

        .hero-title {
            letter-spacing: -3px;
        }

        .hero-highlights {
            grid-template-columns: repeat(2, 1fr);
            gap: 35px;
        }
    }

    @media (max-width: 600px) {

        & {
            padding: 80px 18px 45px;
        }

        .hero-label {
            margin-bottom: 17px;
            font-size: 11px;
        }

        .hero-title {
            font-size: clamp(48px, 12vw, 70px);
            letter-spacing: -2.5px;
        }

        .hero-description {
            font-size: 15px;
            line-height: 1.8;
        }

        .hero-actions {
            gap: 20px;
        }

        .hero-divider {
            margin: 45px 0 27px;
        }

        .hero-highlights {
            gap: 30px 20px;
        }

        .highlight-name {
            font-size: 14px;
            margin-bottom: 12px;
        }

        .highlight-value {
            font-size: 30px;
        }

        .highlight-description {
            font-size: 12px;
        }
    }
}







/* =========================================================
  No-02  ,ABOUT HAPROVEN — SECTION STYLES
========================================================= */

#about-section {


    &.about-section {
        --ha-primary: #2563eb;
        --ha-primary-dark: #1d4ed8;
        --ha-purple: #7c3aed;
        --ha-cyan: #0891b2;

        --ha-text: #0f172a;
        --ha-muted: #64748b;
        --ha-bg: transparent;
        --ha-card: #ffffff;
        --ha-soft: #f8fafc;
        --ha-border: rgba(148, 163, 184, .22);
        --ha-shadow: 0 12px 40px rgba(15, 23, 42, .045);

        position: relative;
        width: 100%;
        padding: 100px 20px;
        background: var(--ha-bg);
        color: var(--ha-text);
        font-family: inherit;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    &[data-theme="dark"],
    &.dark {
        --ha-text: #f1f5f9;
        --ha-muted: #94a3b8;
        --ha-card: #111b2c;
        --ha-soft: #0d1626;
        --ha-border: rgba(148, 163, 184, .16);
        --ha-shadow: 0 12px 40px rgba(0, 0, 0, .12);
    }



    /* ==========================================
    04. CONTAINER
    ========================================== */

    .ha-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ==========================================
       05. SECTION HEADING
    ========================================== */

    .ha-heading {
        max-width: 780px;
        margin-bottom: 48px;
    }

    .ha-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;

        margin-bottom: 18px;
        padding: 7px 13px;

        border: 1px solid var(--ha-border);
        border-radius: 100px;

        background: var(--ha-card);
        color: var(--ha-primary);

        font-size: 12px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
    }

    .ha-eyebrow-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ha-primary);
    }

    .ha-heading h2 {
        margin: 0 0 18px;

        font-size: clamp(32px, 4.2vw, 52px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -1.6px;
        color: var(--ha-text);
    }

    .ha-heading h2 span {
        color: var(--ha-primary);
    }

    .ha-heading>p {
        margin: 0;
        max-width: 720px;

        color: var(--ha-muted);
        font-size: 16px;
        line-height: 1.85;
    }

    /* ==========================================
    06. MAIN LAYOUT
    ========================================== */

    .ha-layout {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 28px;
        align-items: stretch;
    }

    /* ==========================================
    07. INTRO CARD
    ========================================== */

    .ha-intro-card {
        position: relative;
        padding: 38px;

        background: var(--ha-card);
        border: 1px solid var(--ha-border);
        border-radius: 22px;

        box-shadow: var(--ha-shadow);
        overflow: hidden;
    }

    .ha-intro-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 38px;

        width: 90px;
        height: 3px;

        background: linear-gradient(90deg,
                var(--ha-primary),
                var(--ha-purple));

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

    .ha-small-label {
        display: inline-block;
        margin-bottom: 16px;

        font-size: 12px;
        font-weight: 750;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--ha-primary);
    }

    .ha-intro-card h3 {
        margin: 0 0 22px;

        color: var(--ha-text);
        font-size: clamp(25px, 3vw, 34px);
        font-weight: 800;
        letter-spacing: -.8px;
        line-height: 1.3;
    }

    .ha-intro-card h3 span {
        color: var(--ha-primary);
    }

    .ha-intro-card p {
        margin: 0 0 18px;

        color: var(--ha-muted);
        font-size: 15px;
        line-height: 1.9;
    }

    .ha-intro-card p strong {
        color: var(--ha-text);
        font-weight: 700;
    }

    /* ==========================================
       08. FOCUS TAGS
    ========================================== */

    .ha-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin: 28px 0;
    }

    .ha-tag {
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid var(--ha-border);

        background: var(--ha-soft);
        color: var(--ha-text);

        font-size: 12px;
        font-weight: 600;
    }

    /* ==========================================
       09. ACTION BUTTONS
    ========================================== */

    .ha-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
    }

    .ha-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        min-height: 45px;
        padding: 11px 18px;

        border-radius: 10px;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
        text-decoration: none;

        transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease,
            transform .2s ease;
    }

    .ha-btn:hover {
        transform: translateY(-2px);
    }

    .ha-btn-primary {
        color: #ffffff;
        background: var(--ha-primary);
        border: 1px solid var(--ha-primary);
    }

    .ha-btn-primary:hover {
        background: var(--ha-primary-dark);
    }

    .ha-btn-outline {
        color: var(--ha-text);
        background: var(--ha-card);
        border: 1px solid var(--ha-border);
    }

    .ha-btn-outline:hover {
        border-color: var(--ha-primary);
        color: var(--ha-primary);
    }

    /* ==========================================
    10. INFORMATION GRID
    ========================================== */

    .ha-info-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .ha-info-card {
        position: relative;
        display: flex;
        flex-direction: column;

        padding: 25px;

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

        background: var(--ha-card);
        box-shadow: var(--ha-shadow);

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

    .ha-info-card:hover {
        transform: translateY(-4px);
        border-color: rgba(37, 99, 235, .30);
        box-shadow: 0 16px 35px rgba(15, 23, 42, .07);
    }

    .ha-info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 47px;
        height: 47px;
        margin-bottom: 24px;

        border-radius: 13px;
        font-size: 23px;
    }

    .ha-info-card:nth-child(1) .ha-info-icon {
        color: #2563eb;
        background: rgba(37, 99, 235, .09);
    }

    .ha-info-card:nth-child(2) .ha-info-icon {
        color: #7c3aed;
        background: rgba(124, 58, 237, .09);
    }

    .ha-info-card:nth-child(3) .ha-info-icon {
        color: #0891b2;
        background: rgba(8, 145, 178, .09);
    }

    .ha-info-card:nth-child(4) .ha-info-icon {
        color: #16a34a;
        background: rgba(22, 163, 74, .09);
    }

    .ha-info-number {
        display: block;
        margin-bottom: 9px;

        color: var(--ha-muted);
        font-size: 11px;
        font-weight: 750;
        letter-spacing: 1.1px;
    }

    .ha-info-card h4 {
        margin: 0 0 11px;

        color: var(--ha-text);
        font-size: 18px;
        font-weight: 750;
    }

    .ha-info-card p {
        margin: 0;

        color: var(--ha-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    /* ==========================================
    11. PURPOSE STRIP
    ========================================== */

    .ha-purpose {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 28px;

        margin-top: 26px;
        padding: 29px 34px;

        border: 1px solid var(--ha-border);
        border-radius: 18px;
        background: var(--ha-card);
    }

    .ha-purpose-label {
        display: block;
        margin-bottom: 9px;

        color: var(--ha-primary);
        font-size: 11px;
        font-weight: 750;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .ha-purpose h3 {
        margin: 0 0 8px;

        font-size: 20px;
        font-weight: 750;
        color: var(--ha-text);
    }

    .ha-purpose p {
        margin: 0;
        max-width: 800px;

        color: var(--ha-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .ha-purpose-mark {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 62px;
        height: 62px;

        border-radius: 18px;
        background: rgba(37, 99, 235, .08);

        color: var(--ha-primary);
        font-size: 29px;
        font-weight: 800;
    }

    /* ==========================================
    12. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--ha-primary);
        outline-offset: 4px;
    }

    /* ==========================================
       13. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 992px) {

        & {
            padding: 80px 20px;
        }

        .ha-layout {
            grid-template-columns: 1fr;
        }

        .ha-info-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* ==========================================
       14. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 65px 16px;
        }

        .ha-heading {
            margin-bottom: 30px;
        }

        .ha-heading h2 {
            letter-spacing: -.9px;
        }

        .ha-heading>p {
            font-size: 14px;
        }

        .ha-intro-card {
            padding: 25px 21px;
            border-radius: 16px;
        }

        .ha-intro-card::before {
            left: 21px;
        }

        .ha-intro-card p {
            font-size: 14px;
        }

        .ha-info-grid {
            gap: 12px;
        }

        .ha-info-card {
            padding: 19px 15px;
            border-radius: 14px;
        }

        .ha-info-icon {
            width: 42px;
            height: 42px;
            margin-bottom: 19px;
        }

        .ha-info-card h4 {
            font-size: 16px;
        }

        .ha-info-card p {
            font-size: 12px;
        }

        .ha-purpose {
            grid-template-columns: 1fr;
            padding: 24px;
        }

        .ha-purpose-mark {
            display: none;
        }
    }

    /* ==========================================
    15. SMALL MOBILE
    ========================================== */

    @media (max-width: 360px) {

        .ha-info-grid {
            grid-template-columns: 1fr;
        }

        .ha-actions {
            flex-direction: column;
        }

        .ha-btn {
            width: 100%;
        }
    }

    /* ==========================================
       16. REDUCED MOTION
       ========================================== */

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

        .ha-info-card,
        .ha-btn {
            transition: none;
        }
    }

}






/* =========================================================
       -03  Community at a Glance
========================================================= */

#community-glance-section {


    --hc-primary: #2563eb;
    --hc-text: #0f172a;
    --hc-muted: #64748b;
    --hc-card: #ffffff;
    --hc-border: rgba(148, 163, 184, 0.22);

    width: 100%;
    padding: 75px 20px;
    color: var(--hc-text);
    background: transparent;
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    &[data-theme="dark"],
    &.dark {
        --hc-text: #f1f5f9;
        --hc-muted: #94a3b8;
        --hc-card: #111b2c;
        --hc-border: rgba(148, 163, 184, 0.16);
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .hc-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ==========================================
       05. SECTION HEADING
    ========================================== */

    .hc-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        margin-bottom: 34px;
    }

    .hc-heading {
        max-width: 740px;
    }

    .hc-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 7px 13px;
        margin-bottom: 16px;

        border: 1px solid var(--hc-border);
        border-radius: 50px;

        background: var(--hc-card);
        color: var(--hc-primary);

        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .hc-label-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--hc-primary);
    }

    .hc-heading h2 {
        margin: 0 0 14px;
        color: var(--hc-text);
        font-size: clamp(29px, 4vw, 45px);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .hc-heading h2 span {
        color: var(--hc-primary);
    }

    .hc-heading p {
        margin: 0;
        color: var(--hc-muted);
        font-size: 14px;
        line-height: 1.85;
    }

    .hc-header-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;

        color: var(--hc-primary);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .hc-header-link:hover {
        text-decoration: underline;
    }

    /* ==========================================
       06. COMMUNITY GRID
    ========================================== */

    .hc-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
    }

    /* ==========================================
       07. COMMUNITY CARDS
    ========================================== */

    .hc-card {
        --hc-accent: #2563eb;
        --hc-icon-bg: rgba(37, 99, 235, 0.09);

        position: relative;
        display: flex;
        flex-direction: column;

        min-width: 0;
        min-height: 205px;
        padding: 23px;

        background: var(--hc-card);
        border: 1px solid var(--hc-border);
        border-radius: 16px;

        overflow: hidden;

        transition:
            transform 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
    }

    .hc-card:hover {
        transform: translateY(-4px);
        border-color: var(--hc-accent);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    /* ==========================================
       08. CARD ACCENT COLORS
    ========================================== */

    .hc-card:nth-child(2) {
        --hc-accent: #7c3aed;
        --hc-icon-bg: rgba(124, 58, 237, 0.09);
    }

    .hc-card:nth-child(3) {
        --hc-accent: #0891b2;
        --hc-icon-bg: rgba(8, 145, 178, 0.09);
    }

    .hc-card:nth-child(4) {
        --hc-accent: #16a34a;
        --hc-icon-bg: rgba(22, 163, 74, 0.09);
    }

    .hc-card:nth-child(5) {
        --hc-accent: #ea580c;
        --hc-icon-bg: rgba(234, 88, 12, 0.09);
    }

    .hc-card:nth-child(6) {
        --hc-accent: #db2777;
        --hc-icon-bg: rgba(219, 39, 119, 0.09);
    }

    .hc-card:nth-child(7) {
        --hc-accent: #4f46e5;
        --hc-icon-bg: rgba(79, 70, 229, 0.09);
    }

    .hc-card:nth-child(8) {
        --hc-accent: #0d9488;
        --hc-icon-bg: rgba(13, 148, 136, 0.09);
    }

    /* ==========================================
       09. CARD TOP
    ========================================== */

    .hc-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 20px;
    }

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

        width: 44px;
        height: 44px;

        border-radius: 12px;
        background: var(--hc-icon-bg);
        color: var(--hc-accent);

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

    .hc-card-index {
        color: var(--hc-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    /* ==========================================
       10. CARD CONTENT
    ========================================== */

    /* Existing JS can update .hc-number */

    .hc-number {
        margin: 0 0 9px;
        color: var(--hc-accent);

        font-size: clamp(32px, 3.5vw, 43px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -1px;
        font-variant-numeric: tabular-nums;
    }

    .hc-card h4 {
        margin: 0 0 8px;
        color: var(--hc-text);
        font-size: 16px;
        font-weight: 750;
        line-height: 1.4;
    }

    .hc-card p {
        margin: 0;
        color: var(--hc-muted);
        font-size: 12px;
        line-height: 1.7;
    }

    /* Bottom accent */

    .hc-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 23px;

        width: 42px;
        height: 3px;

        background: var(--hc-accent);
        border-radius: 4px 4px 0 0;
    }

    /* ==========================================
       11. COMMUNITY FOOTER
    ========================================== */

    .hc-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        margin-top: 20px;
        padding: 25px 28px;

        background: var(--hc-card);
        border: 1px solid var(--hc-border);
        border-radius: 16px;
    }

    .hc-footer h3 {
        margin: 0 0 8px;
        color: var(--hc-text);
        font-size: 18px;
        font-weight: 750;
    }

    .hc-footer p {
        margin: 0;
        max-width: 750px;
        color: var(--hc-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .hc-footer-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-shrink: 0;

        min-height: 44px;
        padding: 12px 18px;

        color: #ffffff;
        background: var(--hc-primary);
        border-radius: 10px;

        font-size: 13px;
        font-weight: 700;
        text-decoration: none;

        transition: background 0.2s ease;
    }

    .hc-footer-action:hover {
        background: #1d4ed8;
    }

    /* ==========================================
       12. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--hc-primary);
        outline-offset: 4px;
    }

    /* ==========================================
       13. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 992px) {

        .hc-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* ==========================================
       14. SMALL TABLET
    ========================================== */

    @media (max-width: 700px) {

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

    /* ==========================================
       15. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 55px 15px;
        }

        .hc-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .hc-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 11px;
        }

        .hc-card {
            min-height: 185px;
            padding: 17px 14px;
        }

        .hc-card-top {
            margin-bottom: 15px;
        }

        .hc-icon {
            width: 38px;
            height: 38px;
            font-size: 18px;
        }

        .hc-number {
            font-size: 32px;
        }

        .hc-card h4 {
            font-size: 14px;
        }

        .hc-card p {
            font-size: 11px;
        }

        .hc-footer {
            flex-direction: column;
            align-items: flex-start;
            padding: 22px;
        }
    }

    /* ==========================================
       16. EXTRA SMALL MOBILE
    ========================================== */

    @media (max-width: 360px) {

        .hc-card {
            padding: 15px 10px;
        }

        .hc-card h4 {
            overflow-wrap: anywhere;
        }
    }

    /* ==========================================
       17. REDUCED MOTION
    ========================================== */

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

        .hc-card {
            transition: none;
        }
    }

}









/*  ==========================================================
               04. HAPROVEN — MISSION & VISION
==========================================================  */

#haproven-mission-vision {

    --haproven-mv-bg: transparent;
    --haproven-mv-surface: #ffffff;
    --haproven-mv-surface-soft: #f8fafc;
    --haproven-mv-text: #0f172a;
    --haproven-mv-muted: #64748b;
    --haproven-mv-border: rgba(148, 163, 184, .22);
    --haproven-mv-blue: #2563eb;
    --haproven-mv-blue-soft: #eff6ff;
    --haproven-mv-purple: #7c3aed;
    --haproven-mv-purple-soft: #f5f3ff;
    --haproven-mv-green: #059669;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 90px 20px;
    background: var(--haproven-mv-bg);
    color: var(--haproven-mv-text);
    overflow: hidden;
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {
        --haproven-mv-surface: #111b2c;
        --haproven-mv-surface-soft: #0d1626;
        --haproven-mv-text: #f1f5f9;
        --haproven-mv-muted: #94a3b8;
        --haproven-mv-border: rgba(148, 163, 184, .17);
        --haproven-mv-blue: #60a5fa;
        --haproven-mv-blue-soft: rgba(59, 130, 246, .12);
        --haproven-mv-purple: #a78bfa;
        --haproven-mv-purple-soft: rgba(139, 92, 246, .13);
        --haproven-mv-green: #34d399;
    }

    /* ==========================================
       03. CONTAINER
    ========================================== */

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

    .haproven-mv-container {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: auto;
    }

    /* ==========================================
       04. SECTION HEADING
    ========================================== */

    .haproven-mv-header {
        max-width: 1050px;
        margin: 0 auto 46px;
        text-align: center;
    }

    .haproven-mv-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 14px;
        margin-bottom: 20px;
        border: 1px solid var(--haproven-mv-border);
        border-radius: 50px;
        background: var(--haproven-mv-surface);
        color: var(--haproven-mv-blue);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .haproven-mv-eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        background: currentColor;
        border-radius: 50%;
    }

    .haproven-mv-header h2 {
        margin: 0 0 18px;
        color: var(--haproven-mv-text);
        font-size: clamp(32px, 4.5vw, 52px);
        font-weight: 850;
        line-height: 1.15;
        letter-spacing: -1.8px;
    }

    .haproven-mv-header h2 span {
        color: var(--haproven-mv-blue);
    }

    .haproven-mv-header>p {
        max-width: 1000px;
        margin: 0 auto;
        color: var(--haproven-mv-muted);
        font-size: 15px;
        line-height: 1.9;
    }

    /* ==========================================
       05. MAIN FEATURE CARDS
    ========================================== */

    .haproven-mv-feature-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .haproven-mv-feature-card {
        --haproven-mv-accent: var(--haproven-mv-blue);
        --haproven-mv-accent-soft: var(--haproven-mv-blue-soft);

        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 34px;
        border: 1px solid var(--haproven-mv-border);
        border-radius: 24px;
        background: var(--haproven-mv-surface);
        overflow: hidden;

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

    .haproven-mv-feature-card:hover {
        transform: translateY(-5px);
        border-color: var(--haproven-mv-accent);
        box-shadow: 0 18px 40px rgba(15, 23, 42, .07);
    }

    .haproven-mv-vision-card {
        --haproven-mv-accent: var(--haproven-mv-purple);
        --haproven-mv-accent-soft: var(--haproven-mv-purple-soft);
    }

    .haproven-mv-feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--haproven-mv-accent);
    }

    .haproven-mv-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 28px;
    }

    .haproven-mv-icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        flex-shrink: 0;
        border-radius: 17px;
        background: var(--haproven-mv-accent-soft);
        color: var(--haproven-mv-accent);
    }

    .haproven-mv-icon-box svg {
        width: 29px;
        height: 29px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .haproven-mv-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border-radius: 50px;
        background: var(--haproven-mv-accent-soft);
        color: var(--haproven-mv-accent);
        font-size: 11px;
        font-weight: 750;
    }

    .haproven-mv-card-kicker {
        display: block;
        margin-bottom: 8px;
        color: var(--haproven-mv-accent);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .haproven-mv-feature-card h3 {
        margin: 0 0 15px;
        color: var(--haproven-mv-text);
        font-size: clamp(25px, 3vw, 32px);
        font-weight: 800;
        letter-spacing: -.7px;
    }

    .haproven-mv-card-description {
        margin: 0 0 27px;
        color: var(--haproven-mv-muted);
        font-size: 14px;
        line-height: 1.9;
    }

    /* ==========================================
       06. CHECKLIST
    ========================================== */

    .haproven-mv-list {
        display: grid;
        gap: 15px;
        margin: auto 0 0;
        padding: 25px 0 0;
        border-top: 1px solid var(--haproven-mv-border);
        list-style: none;
    }

    .haproven-mv-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: var(--haproven-mv-text);
        font-size: 13px;
        line-height: 1.7;
    }

    .haproven-mv-list-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
        flex: 0 0 23px;
        margin-top: 1px;
        border-radius: 8px;
        background: var(--haproven-mv-accent-soft);
        color: var(--haproven-mv-accent);
        font-size: 12px;
        font-weight: 900;
    }

    /* ==========================================
       07. JOURNEY STRIP
    ========================================== */

    .haproven-mv-journey {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
        gap: 18px;
        margin-top: 20px;
        padding: 26px 30px;
        border: 1px solid var(--haproven-mv-border);
        border-radius: 19px;
        background: var(--haproven-mv-surface);
    }

    .haproven-mv-journey-step {
        min-width: 0;
        text-align: center;
    }

    .haproven-mv-journey-step strong {
        display: block;
        margin-bottom: 6px;
        color: var(--haproven-mv-text);
        font-size: 15px;
        font-weight: 800;
    }

    .haproven-mv-journey-step span {
        color: var(--haproven-mv-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .haproven-mv-journey-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--haproven-mv-blue-soft);
        color: var(--haproven-mv-blue);
        font-size: 18px;
    }

    /* ==========================================
       08. FOCUS AREAS
    ========================================== */

    .haproven-mv-focus {
        margin-top: 70px;
    }

    .haproven-mv-focus-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 27px;
    }

    .haproven-mv-focus-heading {
        max-width: 700px;
    }

    .haproven-mv-focus-kicker {
        display: block;
        margin-bottom: 10px;
        color: var(--haproven-mv-blue);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .haproven-mv-focus-heading h3 {
        margin: 0 0 11px;
        color: var(--haproven-mv-text);
        font-size: clamp(25px, 3vw, 34px);
        font-weight: 800;
        letter-spacing: -.8px;
    }

    .haproven-mv-focus-heading p {
        margin: 0;
        color: var(--haproven-mv-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .haproven-mv-focus-count {
        flex-shrink: 0;
        color: var(--haproven-mv-muted);
        font-size: 13px;
        font-weight: 650;
    }

    .haproven-mv-focus-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .haproven-mv-focus-card {
        --haproven-mv-focus-accent: #2563eb;
        --haproven-mv-focus-soft: rgba(37, 99, 235, .09);

        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 25px;
        border: 1px solid var(--haproven-mv-border);
        border-radius: 18px;
        background: var(--haproven-mv-surface);

        transition:
            transform .25s ease,
            border-color .25s ease;
    }

    .haproven-mv-focus-card:hover {
        transform: translateY(-4px);
        border-color: var(--haproven-mv-focus-accent);
    }

    /* Focus card accent colors */

    .haproven-mv-focus-card:nth-child(2) {
        --haproven-mv-focus-accent: #7c3aed;
        --haproven-mv-focus-soft: rgba(124, 58, 237, .09);
    }

    .haproven-mv-focus-card:nth-child(3) {
        --haproven-mv-focus-accent: #0891b2;
        --haproven-mv-focus-soft: rgba(8, 145, 178, .09);
    }

    .haproven-mv-focus-card:nth-child(4) {
        --haproven-mv-focus-accent: #059669;
        --haproven-mv-focus-soft: rgba(5, 150, 105, .09);
    }

    .haproven-mv-focus-card:nth-child(5) {
        --haproven-mv-focus-accent: #ea580c;
        --haproven-mv-focus-soft: rgba(234, 88, 12, .09);
    }

    .haproven-mv-focus-card:nth-child(6) {
        --haproven-mv-focus-accent: #db2777;
        --haproven-mv-focus-soft: rgba(219, 39, 119, .09);
    }

    .haproven-mv-focus-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 23px;
    }

    .haproven-mv-focus-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 13px;
        background: var(--haproven-mv-focus-soft);
        color: var(--haproven-mv-focus-accent);
    }

    .haproven-mv-focus-icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .haproven-mv-focus-number {
        color: var(--haproven-mv-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .haproven-mv-focus-card h4 {
        margin: 0 0 10px;
        color: var(--haproven-mv-text);
        font-size: 17px;
        font-weight: 800;
        line-height: 1.4;
    }

    .haproven-mv-focus-card p {
        margin: 0;
        color: var(--haproven-mv-muted);
        font-size: 12px;
        line-height: 1.85;
    }

    /* ==========================================
       09. BOTTOM CTA
    ========================================== */

    .haproven-mv-cta {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        margin-top: 25px;
        padding: 34px;
        border: 1px solid var(--haproven-mv-border);
        border-radius: 20px;
        background: var(--haproven-mv-surface);
        overflow: hidden;
    }

    .haproven-mv-cta::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #2563eb, #7c3aed);
    }

    .haproven-mv-cta-content {
        max-width: 780px;
    }

    .haproven-mv-cta-content>span {
        display: block;
        margin-bottom: 9px;
        color: var(--haproven-mv-blue);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .haproven-mv-cta h3 {
        margin: 0 0 11px;
        color: var(--haproven-mv-text);
        font-size: clamp(20px, 2.5vw, 26px);
        font-weight: 800;
        letter-spacing: -.5px;
    }

    .haproven-mv-cta p {
        margin: 0;
        color: var(--haproven-mv-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    .haproven-mv-cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-shrink: 0;
        min-height: 46px;
        padding: 13px 21px;
        border-radius: 11px;
        background: #2563eb;
        color: #ffffff;
        font-size: 13px;
        font-weight: 750;
        text-decoration: none;

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

    .haproven-mv-cta-button:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
    }

    /* ==========================================
       10. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--haproven-mv-blue);
        outline-offset: 4px;
    }

    /* ==========================================
       11. RESPONSIVE — TABLET
    ========================================== */

    @media (max-width: 992px) {

        & {
            padding: 75px 20px;
        }

        .haproven-mv-feature-card {
            padding: 27px;
        }

        .haproven-mv-focus-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* ==========================================
       12. RESPONSIVE — SMALL TABLET
    ========================================== */

    @media (max-width: 700px) {

        .haproven-mv-feature-grid {
            grid-template-columns: 1fr;
        }

        .haproven-mv-journey {
            gap: 9px;
            padding: 22px 14px;
        }

        .haproven-mv-journey-step strong {
            font-size: 13px;
        }

        .haproven-mv-journey-step span {
            font-size: 11px;
        }

        .haproven-mv-journey-arrow {
            width: 25px;
            height: 25px;
            font-size: 15px;
        }
    }

    /* ==========================================
       13. RESPONSIVE — MOBILE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 60px 16px;
        }

        .haproven-mv-header {
            margin-bottom: 30px;
        }

        .haproven-mv-header h2 {
            letter-spacing: -1px;
        }

        .haproven-mv-header>p {
            font-size: 14px;
        }

        .haproven-mv-feature-grid {
            gap: 15px;
        }

        .haproven-mv-feature-card {
            padding: 23px;
            border-radius: 18px;
        }

        .haproven-mv-icon-box {
            width: 49px;
            height: 49px;
        }

        .haproven-mv-card-badge {
            font-size: 10px;
        }

        .haproven-mv-card-description {
            font-size: 13px;
        }

        .haproven-mv-focus {
            margin-top: 52px;
        }

        .haproven-mv-focus-header {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
        }

        .haproven-mv-focus-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 11px;
        }

        .haproven-mv-focus-card {
            padding: 17px 14px;
            border-radius: 14px;
        }

        .haproven-mv-focus-top {
            margin-bottom: 16px;
        }

        .haproven-mv-focus-icon {
            width: 39px;
            height: 39px;
        }

        .haproven-mv-focus-card h4 {
            font-size: 14px;
        }

        .haproven-mv-focus-card p {
            font-size: 11px;
        }

        .haproven-mv-cta {
            flex-direction: column;
            align-items: flex-start;
            padding: 25px;
        }
    }

    /* ==========================================
       14. RESPONSIVE — EXTRA SMALL
    ========================================== */

    @media (max-width: 380px) {

        .haproven-mv-journey {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .haproven-mv-journey-arrow {
            margin: auto;
            transform: rotate(90deg);
        }

        .haproven-mv-focus-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================
       15. REDUCED MOTION
    ========================================== */

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

        .haproven-mv-feature-card,
        .haproven-mv-focus-card,
        .haproven-mv-cta-button {
            transition: none;
        }
    }

}








/*  ==========================================================
               05. HAPROVEN — WHAT WE DO
==========================================================  */

#haproven-what-we-do {

    /* ==========================================
       01. MAIN SECTION
    ========================================== */

    --haproven-wwd-primary: #2563eb;
    --haproven-wwd-text: #0f172a;
    --haproven-wwd-muted: #64748b;
    --haproven-wwd-card: #ffffff;
    --haproven-wwd-soft: #f8fafc;
    --haproven-wwd-border: rgba(148, 163, 184, .22);

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 90px 20px;
    color: var(--haproven-wwd-text);
    background: transparent;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {
        --haproven-wwd-primary: #60a5fa;
        --haproven-wwd-text: #f1f5f9;
        --haproven-wwd-muted: #94a3b8;
        --haproven-wwd-card: #111b2c;
        --haproven-wwd-soft: #0d1626;
        --haproven-wwd-border: rgba(148, 163, 184, .17);
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .haproven-wwd-container {
        max-width: 1200px;
        width: 100%;
        margin: auto;
    }

    /* ==========================================
       05. SECTION HEADER
    ========================================== */

    .haproven-wwd-header {
        max-width: 790px;
        margin: 0 auto 44px;
        text-align: center;
    }

    .haproven-wwd-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 18px;
        padding: 8px 15px;
        border: 1px solid var(--haproven-wwd-border);
        border-radius: 50px;
        background: var(--haproven-wwd-card);
        color: var(--haproven-wwd-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .haproven-wwd-label::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .haproven-wwd-header h2 {
        margin: 0 0 17px;
        color: var(--haproven-wwd-text);
        font-size: clamp(32px, 4.5vw, 50px);
        font-weight: 850;
        line-height: 1.16;
        letter-spacing: -1.5px;
    }

    .haproven-wwd-header h2 span {
        color: var(--haproven-wwd-primary);
    }

    .haproven-wwd-header p {
        margin: 0;
        color: var(--haproven-wwd-muted);
        font-size: 15px;
        line-height: 1.9;
    }

    /* ==========================================
       06. ACTIVITY GRID
    ========================================== */

    .haproven-wwd-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    /* ==========================================
       07. ACTIVITY CARDS
    ========================================== */

    .haproven-wwd-card {
        --haproven-wwd-accent: #2563eb;
        --haproven-wwd-accent-soft: rgba(37, 99, 235, .09);

        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 27px;
        background: var(--haproven-wwd-card);
        border: 1px solid var(--haproven-wwd-border);
        border-radius: 19px;
        overflow: hidden;

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

    .haproven-wwd-card:hover {
        transform: translateY(-5px);
        border-color: var(--haproven-wwd-accent);
        box-shadow: 0 15px 35px rgba(15, 23, 42, .07);
    }

    /* Card accent colors */

    .haproven-wwd-card:nth-child(2) {
        --haproven-wwd-accent: #7c3aed;
        --haproven-wwd-accent-soft: rgba(124, 58, 237, .09);
    }

    .haproven-wwd-card:nth-child(3) {
        --haproven-wwd-accent: #db2777;
        --haproven-wwd-accent-soft: rgba(219, 39, 119, .09);
    }

    .haproven-wwd-card:nth-child(4) {
        --haproven-wwd-accent: #059669;
        --haproven-wwd-accent-soft: rgba(5, 150, 105, .09);
    }

    .haproven-wwd-card:nth-child(5) {
        --haproven-wwd-accent: #0891b2;
        --haproven-wwd-accent-soft: rgba(8, 145, 178, .09);
    }

    .haproven-wwd-card:nth-child(6) {
        --haproven-wwd-accent: #ea580c;
        --haproven-wwd-accent-soft: rgba(234, 88, 12, .09);
    }

    .haproven-wwd-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--haproven-wwd-accent);
    }

    /* ==========================================
       08. CARD TOP
    ========================================== */

    .haproven-wwd-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 24px;
    }

    .haproven-wwd-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 15px;
        background: var(--haproven-wwd-accent-soft);
        color: var(--haproven-wwd-accent);
    }

    .haproven-wwd-icon svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .haproven-wwd-number {
        color: var(--haproven-wwd-muted);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .7px;
    }

    /* ==========================================
       09. CARD CONTENT
    ========================================== */

    .haproven-wwd-kicker {
        display: block;
        margin-bottom: 9px;
        color: var(--haproven-wwd-accent);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .7px;
    }

    .haproven-wwd-card h3 {
        margin: 0 0 13px;
        color: var(--haproven-wwd-text);
        font-size: 21px;
        font-weight: 800;
        line-height: 1.35;
    }

    .haproven-wwd-card p {
        margin: 0 0 23px;
        color: var(--haproven-wwd-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    /* ==========================================
       10. TAGS
    ========================================== */

    .haproven-wwd-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: auto 0 0;
        padding: 0;
        list-style: none;
    }

    .haproven-wwd-tags li {
        padding: 7px 10px;
        border: 1px solid var(--haproven-wwd-border);
        border-radius: 7px;
        color: var(--haproven-wwd-muted);
        font-size: 10px;
        font-weight: 650;
        line-height: 1.35;
    }

    /* ==========================================
       11. EVENTS EXPLAINER
    ========================================== */

    .haproven-wwd-event-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
        gap: 35px;
        margin-top: 22px;
        padding: 34px;
        border: 1px solid var(--haproven-wwd-border);
        border-radius: 20px;
        background: var(--haproven-wwd-card);
    }

    .haproven-wwd-event-label {
        display: inline-block;
        margin-bottom: 12px;
        color: var(--haproven-wwd-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .haproven-wwd-event-info h3 {
        margin: 0 0 13px;
        color: var(--haproven-wwd-text);
        font-size: clamp(21px, 2.6vw, 28px);
        font-weight: 800;
        line-height: 1.3;
    }

    .haproven-wwd-event-info p {
        margin: 0;
        color: var(--haproven-wwd-muted);
        font-size: 13px;
        line-height: 1.9;
    }

    .haproven-wwd-event-types {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .haproven-wwd-event-type {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        border: 1px solid var(--haproven-wwd-border);
        border-radius: 10px;
        background: var(--haproven-wwd-soft);
        color: var(--haproven-wwd-text);
        font-size: 12px;
        font-weight: 650;
    }

    .haproven-wwd-event-type span {
        font-size: 16px;
    }

    /* ==========================================
       12. BOTTOM CTA
    ========================================== */

    .haproven-wwd-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        margin-top: 22px;
        padding: 30px 32px;
        border: 1px solid var(--haproven-wwd-border);
        border-radius: 19px;
        background: var(--haproven-wwd-card);
    }

    .haproven-wwd-bottom h3 {
        margin: 0 0 9px;
        color: var(--haproven-wwd-text);
        font-size: 20px;
        font-weight: 800;
    }

    .haproven-wwd-bottom p {
        max-width: 790px;
        margin: 0;
        color: var(--haproven-wwd-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .haproven-wwd-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        flex-shrink: 0;
        min-height: 45px;
        padding: 12px 19px;
        border-radius: 10px;
        background: #2563eb;
        color: #ffffff;
        font-size: 13px;
        font-weight: 750;
        text-decoration: none;

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

    .haproven-wwd-button:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
    }

    /* ==========================================
       13. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--haproven-wwd-primary);
        outline-offset: 4px;
    }

    /* ==========================================
       14. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 992px) {

        & {
            padding: 75px 20px;
        }

        .haproven-wwd-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .haproven-wwd-event-box {
            grid-template-columns: 1fr;
            gap: 23px;
        }
    }

    /* ==========================================
       15. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 650px) {

        & {
            padding: 60px 16px;
        }

        .haproven-wwd-header {
            margin-bottom: 30px;
        }

        .haproven-wwd-header p {
            font-size: 14px;
        }

        .haproven-wwd-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .haproven-wwd-card {
            padding: 24px;
            border-radius: 17px;
        }

        .haproven-wwd-card h3 {
            font-size: 22px;
        }

        .haproven-wwd-event-box {
            padding: 24px;
            gap: 20px;
        }

        .haproven-wwd-bottom {
            flex-direction: column;
            align-items: flex-start;
            padding: 24px;
        }
    }

    /* ==========================================
       16. REDUCED MOTION
    ========================================== */

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

        .haproven-wwd-card,
        .haproven-wwd-button {
            transition: none;
        }
    }

}








/* ==========================================================
        06. HAPROVEN ECOSYSTEM
========================================================== */


#haproven-ecosystem {

    /* ==========================================
       01. MAIN SECTION
    ========================================== */

    --he-primary: #2563eb;
    --he-primary-soft: rgba(37, 99, 235, .09);

    --he-text: #0f172a;
    --he-muted: #64748b;
    --he-card: #ffffff;
    --he-soft: #f8fafc;
    --he-border: rgba(148, 163, 184, .22);

    --he-green: #059669;
    --he-green-soft: rgba(5, 150, 105, .09);

    --he-orange: #d97706;
    --he-orange-soft: rgba(217, 119, 6, .09);

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 90px 20px;
    color: var(--he-text);
    background: transparent;
    overflow: hidden;
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {

        --he-primary: #60a5fa;
        --he-primary-soft: rgba(96, 165, 250, .12);

        --he-text: #f1f5f9;
        --he-muted: #94a3b8;
        --he-card: #111b2c;
        --he-soft: #0d1626;
        --he-border: rgba(148, 163, 184, .17);

        --he-green: #34d399;
        --he-green-soft: rgba(52, 211, 153, .10);

        --he-orange: #fbbf24;
        --he-orange-soft: rgba(251, 191, 36, .10);
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .he-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ==========================================
       05. SECTION HEADER
    ========================================== */

    .he-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 25px;
        margin-bottom: 36px;
    }

    .he-heading {
        max-width: 780px;
    }

    .he-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;

        padding: 8px 14px;
        margin-bottom: 18px;

        border: 1px solid var(--he-border);
        border-radius: 50px;

        background: var(--he-card);
        color: var(--he-primary);

        font-size: 11px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .he-label::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .he-heading h2 {
        margin: 0 0 17px;
        color: var(--he-text);
        font-size: clamp(32px, 4.5vw, 50px);
        font-weight: 850;
        line-height: 1.15;
        letter-spacing: -1.5px;
    }

    .he-heading h2 span {
        color: var(--he-primary);
    }

    .he-heading p {
        margin: 0;
        color: var(--he-muted);
        font-size: 14px;
        line-height: 1.9;
    }

    .he-header-note {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        flex-shrink: 0;

        padding: 10px 14px;

        border: 1px solid var(--he-border);
        border-radius: 10px;

        background: var(--he-card);
        color: var(--he-muted);

        font-size: 12px;
        font-weight: 650;
    }

    .he-header-note svg {
        width: 17px;
        height: 17px;
        color: var(--he-primary);
    }

    /* ==========================================
       06. ECOSYSTEM GRID
    ========================================== */

    .he-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    /* ==========================================
       07. PRODUCT CARDS
    ========================================== */

    .he-card {
        --he-accent: #2563eb;
        --he-accent-soft: rgba(37, 99, 235, .09);

        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 27px;

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

        overflow: hidden;

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

    .he-card:hover {
        transform: translateY(-5px);
        border-color: var(--he-accent);
        box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
    }

    /* ==========================================
       08. CARD ACCENT COLORS
    ========================================== */

    .he-color-blue {
        --he-accent: #2563eb;
        --he-accent-soft: rgba(37, 99, 235, .09);
    }

    .he-color-purple {
        --he-accent: #7c3aed;
        --he-accent-soft: rgba(124, 58, 237, .09);
    }

    .he-color-cyan {
        --he-accent: #0891b2;
        --he-accent-soft: rgba(8, 145, 178, .09);
    }

    .he-color-green {
        --he-accent: #059669;
        --he-accent-soft: rgba(5, 150, 105, .09);
    }

    .he-color-orange {
        --he-accent: #ea580c;
        --he-accent-soft: rgba(234, 88, 12, .09);
    }

    .he-color-pink {
        --he-accent: #db2777;
        --he-accent-soft: rgba(219, 39, 119, .09);
    }

    /* ==========================================
       09. CARD TOP
    ========================================== */

    .he-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 24px;
    }

    .he-product-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 56px;
        height: 56px;
        flex-shrink: 0;

        border-radius: 16px;
        background: var(--he-accent-soft);
        color: var(--he-accent);
    }

    .he-product-icon svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ==========================================
       10. STATUS BADGES
    ========================================== */

    .he-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;

        padding: 7px 10px;
        border-radius: 50px;

        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
    }

    .he-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .he-status-live {
        color: var(--he-green);
        background: var(--he-green-soft);
    }

    .he-status-beta {
        color: var(--he-primary);
        background: var(--he-primary-soft);
    }

    .he-status-planned {
        color: var(--he-orange);
        background: var(--he-orange-soft);
    }

    /* ==========================================
       11. CARD CONTENT
    ========================================== */

    .he-category {
        display: block;
        margin-bottom: 9px;
        color: var(--he-accent);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .he-card h3 {
        margin: 0 0 13px;
        color: var(--he-text);
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.5px;
    }

    .he-description {
        margin: 0 0 24px;
        color: var(--he-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    /* ==========================================
       12. CARD FOOTER
    ========================================== */

    .he-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid var(--he-border);
    }

    .he-card-type {
        color: var(--he-muted);
        font-size: 11px;
        font-weight: 650;
    }

    .he-card-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--he-accent);
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    .he-card-link:hover {
        text-decoration: underline;
    }

    .he-coming-soon {
        color: var(--he-muted);
        font-size: 11px;
        font-weight: 700;
    }

    /* ==========================================
       13. FUTURE EXPANSION CARD
    ========================================== */

    .he-add-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        min-height: 270px;
        padding: 30px;

        border: 1.5px dashed var(--he-border);
        border-radius: 20px;
        background: var(--he-card);

        text-align: center;
    }

    .he-add-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 54px;
        height: 54px;
        margin-bottom: 18px;

        border-radius: 15px;
        background: var(--he-primary-soft);
        color: var(--he-primary);
    }

    .he-add-icon svg {
        width: 26px;
        height: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .he-add-card h3 {
        margin: 0 0 10px;
        color: var(--he-text);
        font-size: 19px;
        font-weight: 800;
    }

    .he-add-card p {
        max-width: 260px;
        margin: 0;
        color: var(--he-muted);
        font-size: 12px;
        line-height: 1.8;
    }

    /* ==========================================
       14. BOTTOM MESSAGE
    ========================================== */

    .he-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        margin-top: 23px;
        padding: 30px 32px;

        border: 1px solid var(--he-border);
        border-radius: 19px;
        background: var(--he-card);
    }

    .he-bottom h3 {
        margin: 0 0 9px;
        color: var(--he-text);
        font-size: 20px;
        font-weight: 800;
    }

    .he-bottom p {
        max-width: 790px;
        margin: 0;
        color: var(--he-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    .he-bottom-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        flex-shrink: 0;

        min-height: 45px;
        padding: 12px 19px;

        border-radius: 10px;
        background: #2563eb;
        color: #ffffff;

        font-size: 13px;
        font-weight: 750;
        text-decoration: none;

        transition: background .2s ease;
    }

    .he-bottom-button:hover {
        background: #1d4ed8;
    }

    /* ==========================================
       15. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--he-primary);
        outline-offset: 4px;
    }

    /* ==========================================
       16. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 992px) {

        & {
            padding: 75px 20px;
        }

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

    /* ==========================================
       17. SMALL TABLET
    ========================================== */

    @media (max-width: 700px) {

        .he-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .he-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    /* ==========================================
       18. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 60px 16px;
        }

        .he-header {
            margin-bottom: 28px;
        }

        .he-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .he-card {
            padding: 24px;
            border-radius: 17px;
        }

        .he-bottom {
            padding: 24px;
        }
    }

    /* ==========================================
       19. REDUCED MOTION
    ========================================== */

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

        .he-card,
        .he-bottom-button {
            transition: none;
        }
    }

}









/* ==========================================================
        07. HAPROVEN FEATURED PROJECTS
========================================================= */


#haproven-featured-projects {

    /* ==========================================
       01. SECTION ROOT
    ========================================== */

    --hfp-primary: #2563eb;
    --hfp-primary-soft: rgba(37, 99, 235, .09);
    --hfp-text: #0f172a;
    --hfp-muted: #64748b;
    --hfp-surface: #ffffff;
    --hfp-soft: #f8fafc;
    --hfp-border: rgba(148, 163, 184, .22);

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 90px 20px;
    background: transparent;
    color: var(--hfp-text);
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {
        --hfp-primary: #60a5fa;
        --hfp-primary-soft: rgba(96, 165, 250, .12);
        --hfp-text: #f1f5f9;
        --hfp-muted: #94a3b8;
        --hfp-surface: #111b2c;
        --hfp-soft: #0d1626;
        --hfp-border: rgba(148, 163, 184, .18);
    }

    /* ==========================================
       03. RESET
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .hfp-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ==========================================
       05. HEADING
    ========================================== */

    .hfp-section-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 25px;
        margin-bottom: 32px;
    }

    .hfp-heading {
        max-width: 760px;
    }

    .hfp-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 15px;
        margin-bottom: 17px;
        border: 1px solid var(--hfp-border);
        border-radius: 50px;
        background: var(--hfp-surface);
        color: var(--hfp-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .hfp-eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .hfp-heading h2 {
        margin: 0 0 16px;
        color: var(--hfp-text);
        font-size: clamp(32px, 4.5vw, 50px);
        font-weight: 850;
        line-height: 1.15;
        letter-spacing: -1.5px;
    }

    .hfp-heading h2 span {
        color: var(--hfp-primary);
    }

    .hfp-heading p {
        margin: 0;
        color: var(--hfp-muted);
        font-size: 14px;
        line-height: 1.9;
    }

    .hfp-heading-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        color: var(--hfp-primary);
        font-size: 13px;
        font-weight: 750;
        text-decoration: none;
    }

    .hfp-heading-link:hover {
        text-decoration: underline;
    }

    /* ==========================================
       06. FILTERS AND SEARCH
    ========================================== */

    .hfp-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        margin-bottom: 24px;
    }

    .hfp-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .hfp-filter {
        min-height: 40px;
        padding: 9px 15px;
        border: 1px solid var(--hfp-border);
        border-radius: 9px;
        background: var(--hfp-surface);
        color: var(--hfp-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 750;
        cursor: pointer;
        transition: .2s ease;
    }

    .hfp-filter:hover {
        border-color: var(--hfp-primary);
        color: var(--hfp-primary);
    }

    .hfp-filter.is-active {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }

    .hfp-search-wrap {
        position: relative;
        width: 245px;
        flex-shrink: 0;
    }

    .hfp-search {
        width: 100%;
        min-height: 43px;
        padding: 11px 37px 11px 14px;
        border: 1px solid var(--hfp-border);
        border-radius: 10px;
        outline: none;
        background: var(--hfp-surface);
        color: var(--hfp-text);
        font: inherit;
        font-size: 12px;
        transition: border-color .2s ease;
    }

    .hfp-search:focus {
        border-color: var(--hfp-primary);
    }

    .hfp-search::placeholder {
        color: var(--hfp-muted);
    }

    .hfp-clear {
        position: absolute;
        top: 50%;
        right: 9px;
        transform: translateY(-50%);
        width: 27px;
        height: 27px;
        padding: 0;
        border: none;
        border-radius: 7px;
        background: var(--hfp-soft);
        color: var(--hfp-muted);
        font-size: 17px;
        cursor: pointer;
    }

    /* ==========================================
       07. TOP PROJECT BOX
    ========================================== */

    .hfp-highlights {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .hfp-highlight,
    .hfp-card {
        --hfp-accent: #2563eb;
        --hfp-accent-soft: rgba(37, 99, 235, .10);
    }

    .hfp-highlight {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        min-width: 0;
        border: 1px solid var(--hfp-border);
        border-radius: 23px;
        background: var(--hfp-surface);
        overflow: hidden;
        transition: border-color .25s ease, box-shadow .25s ease;
    }

    .hfp-highlight:hover {
        border-color: var(--hfp-accent);
        box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    }

    /* ==========================================
       08. PROJECT COLORS
    ========================================== */

    .hfp-color-purple {
        --hfp-accent: #7c3aed;
        --hfp-accent-soft: rgba(124, 58, 237, .10);
    }

    .hfp-color-cyan {
        --hfp-accent: #0891b2;
        --hfp-accent-soft: rgba(8, 145, 178, .10);
    }

    .hfp-color-green {
        --hfp-accent: #059669;
        --hfp-accent-soft: rgba(5, 150, 105, .10);
    }

    .hfp-color-orange {
        --hfp-accent: #ea580c;
        --hfp-accent-soft: rgba(234, 88, 12, .10);
    }

    .hfp-color-pink {
        --hfp-accent: #db2777;
        --hfp-accent-soft: rgba(219, 39, 119, .10);
    }

    /* ==========================================
       09. TOP PROJECT VISUAL
    ========================================== */

    .hfp-highlight-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 325px;
        padding: 34px;
        background:
            radial-gradient(
                circle at 20% 20%,
                var(--hfp-accent-soft),
                transparent 55%
            ),
            linear-gradient(
                135deg,
                var(--hfp-accent-soft),
                rgba(124, 58, 237, .07)
            );
        border-right: 1px solid var(--hfp-border);
    }

    .hfp-preview {
        width: 100%;
        max-width: 420px;
        border: 1px solid var(--hfp-border);
        border-radius: 15px;
        background: var(--hfp-surface);
        box-shadow: 0 20px 45px rgba(15, 23, 42, .10);
        overflow: hidden;
    }

    .hfp-preview-top {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 13px;
        border-bottom: 1px solid var(--hfp-border);
    }

    .hfp-preview-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd5e1;
    }

    .hfp-preview-dot:first-child {
        background: #fb7185;
    }

    .hfp-preview-dot:nth-child(2) {
        background: #fbbf24;
    }

    .hfp-preview-dot:nth-child(3) {
        background: #34d399;
    }

    .hfp-preview-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        min-height: 220px;
        padding: 30px 20px;
        text-align: center;
    }

    .hfp-preview-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        border-radius: 20px;
        background: var(--hfp-accent-soft);
        color: var(--hfp-accent);
        font-size: 25px;
        font-weight: 850;
    }

    .hfp-preview-body strong {
        color: var(--hfp-text);
        font-size: 24px;
        font-weight: 850;
    }

    .hfp-preview-body p {
        max-width: 270px;
        margin: 0;
        color: var(--hfp-muted);
        font-size: 12px;
        line-height: 1.7;
    }

    .hfp-preview-bars {
        display: flex;
        gap: 8px;
        margin-top: 5px;
    }

    .hfp-preview-bars span {
        width: 47px;
        height: 7px;
        border-radius: 5px;
        background: var(--hfp-accent-soft);
    }

    /* ==========================================
       10. TOP PROJECT CONTENT
    ========================================== */

    .hfp-highlight-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 36px;
    }

    .hfp-highlight-top {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 20px;
    }

    .hfp-featured-badge {
        padding: 8px 12px;
        border-radius: 8px;
        background: var(--hfp-accent-soft);
        color: var(--hfp-accent);
        font-size: 11px;
        font-weight: 800;
    }

    .hfp-highlight h3 {
        margin: 0 0 15px;
        color: var(--hfp-text);
        font-size: clamp(25px, 3vw, 34px);
        font-weight: 850;
        letter-spacing: -.7px;
    }

    .hfp-highlight-description {
        margin: 0 0 19px;
        color: var(--hfp-muted);
        font-size: 14px;
        line-height: 1.85;
    }

    .hfp-highlight-purpose {
        margin-bottom: 19px;
        padding: 13px 15px;
        border-left: 3px solid var(--hfp-accent);
        border-radius: 0 9px 9px 0;
        background: var(--hfp-soft);
    }

    .hfp-highlight-purpose strong {
        display: block;
        margin-bottom: 5px;
        color: var(--hfp-text);
        font-size: 11px;
    }

    .hfp-highlight-purpose p {
        margin: 0;
        color: var(--hfp-muted);
        font-size: 12px;
        line-height: 1.7;
    }

    /* ==========================================
       11. PROJECT GRID
    ========================================== */

    .hfp-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .hfp-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 25px;
        border: 1px solid var(--hfp-border);
        border-radius: 19px;
        background: var(--hfp-surface);
        overflow: hidden;

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

    .hfp-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--hfp-accent);
    }

    .hfp-card:hover {
        transform: translateY(-5px);
        border-color: var(--hfp-accent);
        box-shadow: 0 15px 35px rgba(15, 23, 42, .07);
    }

    .hfp-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 23px;
    }

    .hfp-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        border-radius: 15px;
        background: var(--hfp-accent-soft);
        color: var(--hfp-accent);
        font-size: 19px;
        font-weight: 850;
    }

    /* ==========================================
       12. STATUS
    ========================================== */

    .hfp-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border-radius: 50px;
        background: rgba(5, 150, 105, .10);
        color: #059669;
        font-size: 10px;
        font-weight: 800;
    }

    .hfp-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .hfp-status-beta,
    .hfp-status-project {
        background: var(--hfp-primary-soft);
        color: var(--hfp-primary);
    }

    .hfp-status-development {
        background: rgba(217, 119, 6, .10);
        color: #d97706;
    }

    /* ==========================================
       13. CARD CONTENT
    ========================================== */

    .hfp-category {
        display: block;
        margin-bottom: 9px;
        color: var(--hfp-accent);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
    }

    .hfp-card h3 {
        margin: 0 0 13px;
        color: var(--hfp-text);
        font-size: 22px;
        font-weight: 800;
    }

    .hfp-description {
        margin: 0 0 19px;
        color: var(--hfp-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    .hfp-purpose {
        margin-bottom: 19px;
        padding: 13px 14px;
        border: 1px solid var(--hfp-border);
        border-radius: 10px;
        background: var(--hfp-soft);
    }

    .hfp-purpose strong {
        display: block;
        margin-bottom: 5px;
        color: var(--hfp-text);
        font-size: 11px;
        font-weight: 800;
    }

    .hfp-purpose p {
        margin: 0;
        color: var(--hfp-muted);
        font-size: 12px;
        line-height: 1.7;
    }

    /* ==========================================
       14. TAGS AND LINKS
    ========================================== */

    .hfp-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 21px;
    }

    .hfp-tags span {
        padding: 6px 9px;
        border: 1px solid var(--hfp-border);
        border-radius: 7px;
        color: var(--hfp-muted);
        font-size: 10px;
        font-weight: 650;
    }

    .hfp-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 9px;
        margin-top: auto;
    }

    .hfp-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 40px;
        padding: 10px 14px;
        border: 1px solid var(--hfp-border);
        border-radius: 9px;
        background: var(--hfp-surface);
        color: var(--hfp-text);
        font-size: 12px;
        font-weight: 750;
        text-decoration: none;
        transition: .2s ease;
    }

    .hfp-link:hover {
        border-color: var(--hfp-primary);
        color: var(--hfp-primary);
    }

    .hfp-link-primary {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }

    .hfp-link-primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
        outline: 3px solid var(--hfp-primary);
        outline-offset: 3px;
    }

    /* ==========================================
       15. EMPTY STATE / SHOW MORE
    ========================================== */

    .hfp-empty {
        padding: 35px;
        margin-top: 20px;
        border: 1px dashed var(--hfp-border);
        border-radius: 15px;
        color: var(--hfp-muted);
        text-align: center;
        font-size: 13px;
    }

    .hfp-actions {
        display: flex;
        justify-content: center;
        margin-top: 28px;
    }

    .hfp-more {
        min-height: 44px;
        padding: 12px 22px;
        border: 1px solid var(--hfp-border);
        border-radius: 10px;
        background: var(--hfp-surface);
        color: var(--hfp-text);
        font: inherit;
        font-size: 13px;
        font-weight: 750;
        cursor: pointer;
    }

    .hfp-more:hover {
        border-color: var(--hfp-primary);
        color: var(--hfp-primary);
    }

    [hidden] {
        display: none !important;
    }

    /* ==========================================
       16. BOTTOM CTA
    ========================================== */

    .hfp-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-top: 25px;
        padding: 30px;
        border: 1px solid var(--hfp-border);
        border-radius: 19px;
        background: var(--hfp-surface);
    }

    .hfp-bottom h3 {
        margin: 0 0 9px;
        color: var(--hfp-text);
        font-size: 20px;
        font-weight: 800;
    }

    .hfp-bottom p {
        max-width: 760px;
        margin: 0;
        color: var(--hfp-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    /* ==========================================
       17. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 992px) {

        & {
            padding: 75px 20px;
        }

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

    /* ==========================================
       18. SMALL TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 700px) {

        .hfp-section-top,
        .hfp-toolbar,
        .hfp-bottom {
            flex-direction: column;
            align-items: flex-start;
        }

        .hfp-highlight {
            grid-template-columns: 1fr;
        }

        .hfp-highlight-visual {
            min-height: 270px;
            border-right: 0;
            border-bottom: 1px solid var(--hfp-border);
        }

        .hfp-highlight-content {
            padding: 27px;
        }

        .hfp-search-wrap {
            width: 100%;
        }
    }

    /* ==========================================
       19. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 60px 16px;
        }

        .hfp-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .hfp-card {
            padding: 23px;
        }

        .hfp-highlight-visual {
            padding: 23px;
            min-height: 250px;
        }

        .hfp-filters {
            flex-wrap: nowrap;
            width: 100%;
            overflow-x: auto;
            padding-bottom: 6px;
            scrollbar-width: thin;
        }

        .hfp-filter {
            flex-shrink: 0;
        }

        .hfp-bottom {
            padding: 24px;
        }
    }

    /* ==========================================
       20. REDUCED MOTION
    ========================================== */

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

        .hfp-card,
        .hfp-highlight,
        .hfp-link {
            transition: none;
        }
    }

}












/* =====================================================
     SECTION 09 — PEOPLE BEHIND HAPROVEN
===================================================== */


#haproven-people {


    --hp-bg: #ffffff;
    --hp-soft: #f8fafc;
    --hp-text: #0f172a;
    --hp-muted: #64748b;
    --hp-border: #e2e8f0;
    --hp-blue: #2563eb;
    --hp-blue-soft: #eff6ff;

    width: 100%;
    padding: 85px 20px;
    color: var(--hp-text);
    background: transparent;
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {
        --hp-bg: #111b2c;
        --hp-soft: #0d1626;
        --hp-text: #f1f5f9;
        --hp-muted: #94a3b8;
        --hp-border: #263449;
        --hp-blue: #60a5fa;
        --hp-blue-soft: #172b49;
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .hp-container {
        max-width: 1200px;
        margin: auto;
    }

    /* ==========================================
       05. SECTION HEADING
    ========================================== */

    .hp-heading {
        max-width: 720px;
        margin-bottom: 30px;
    }

    .hp-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border: 1px solid var(--hp-border);
        border-radius: 30px;
        color: var(--hp-blue);
        background: var(--hp-bg);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .hp-label::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .hp-heading h2 {
        margin: 18px 0 15px;
        font-size: clamp(31px, 4.5vw, 48px);
        line-height: 1.15;
        letter-spacing: -1.5px;
        color: var(--hp-text);
    }

    .hp-heading h2 span {
        color: var(--hp-blue);
    }

    .hp-heading p {
        margin: 0;
        color: var(--hp-muted);
        font-size: 14px;
        line-height: 1.9;
    }

    /* ==========================================
       06. FOUNDER CARD
    ========================================== */

    .hp-founder {
        display: grid;
        grid-template-columns: 290px 1fr;
        gap: 0;
        border: 1px solid var(--hp-border);
        border-radius: 22px;
        overflow: hidden;
        background: var(--hp-bg);
        margin-bottom: 25px;
    }

    .hp-founder-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: 28px;

        background:
            radial-gradient(
                circle at 25% 20%,
                rgba(37, 99, 235, .13),
                transparent 65%
            ),
            var(--hp-soft);

        border-right: 1px solid var(--hp-border);
    }

    .hp-founder-avatar {
        width: 190px;
        height: 190px;
        border-radius: 28px;
        object-fit: cover;
        border: 5px solid var(--hp-bg);
        box-shadow: 0 15px 35px rgba(15, 23, 42, .12);
    }

    .hp-founder-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 35px;
    }

    .hp-role-label {
        color: var(--hp-blue);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .hp-founder h3 {
        margin: 12px 0 8px;
        color: var(--hp-text);
        font-size: clamp(25px, 3vw, 34px);
        letter-spacing: -.8px;
    }

    .hp-founder-title {
        margin: 0 0 15px;
        font-size: 13px;
        font-weight: 750;
        color: var(--hp-blue);
    }

    .hp-founder-description {
        max-width: 690px;
        margin: 0 0 20px;
        color: var(--hp-muted);
        font-size: 13px;
        line-height: 1.9;
    }

    /* ==========================================
       07. PROFILE LINKS
    ========================================== */

    .hp-links {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .hp-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px;
        min-height: 40px;
        border: 1px solid var(--hp-border);
        border-radius: 9px;
        background: var(--hp-bg);
        color: var(--hp-text);
        text-decoration: none;
        font-size: 12px;
        font-weight: 750;
        transition: .2s;
    }

    .hp-link:hover {
        color: var(--hp-blue);
        border-color: var(--hp-blue);
    }

    .hp-link-primary {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }

    .hp-link-primary:hover {
        background: #1d4ed8;
        color: #ffffff;
    }

    /* ==========================================
       08. TOOLBAR
    ========================================== */

    .hp-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        margin: 30px 0 20px;
    }

    .hp-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .hp-filter {
        padding: 10px 15px;
        border: 1px solid var(--hp-border);
        border-radius: 9px;
        background: var(--hp-bg);
        color: var(--hp-muted);
        font: inherit;
        font-size: 12px;
        font-weight: 750;
        cursor: pointer;
    }

    .hp-filter.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }

    .hp-search {
        width: 235px;
        max-width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--hp-border);
        border-radius: 9px;
        outline: none;
        background: var(--hp-bg);
        color: var(--hp-text);
        font: inherit;
        font-size: 12px;
    }

    .hp-search:focus {
        border-color: var(--hp-blue);
    }

    /* ==========================================
       09. TEAM GRID
    ========================================== */

    .hp-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    /* ==========================================
       10. TEAM CARDS
    ========================================== */

    .hp-card {
        display: flex;
        flex-direction: column;
        padding: 25px;
        min-width: 0;
        border: 1px solid var(--hp-border);
        border-radius: 18px;
        background: var(--hp-bg);

        transition:
            transform .25s,
            border-color .25s,
            box-shadow .25s;
    }

    .hp-card:hover {
        transform: translateY(-4px);
        border-color: var(--hp-blue);
        box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
    }

    .hp-card-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 18px;
    }

    .hp-avatar {
        width: 76px;
        height: 76px;
        border-radius: 19px;
        object-fit: cover;
        background: var(--hp-blue-soft);
        border: 1px solid var(--hp-border);
    }

    .hp-type {
        padding: 7px 10px;
        border-radius: 20px;
        background: var(--hp-blue-soft);
        color: var(--hp-blue);
        font-size: 10px;
        font-weight: 800;
    }

    .hp-card h3 {
        margin: 0 0 7px;
        font-size: 20px;
        color: var(--hp-text);
    }

    .hp-position {
        margin: 0 0 14px;
        font-size: 12px;
        font-weight: 750;
        color: var(--hp-blue);
    }

    .hp-description {
        margin: 0 0 20px;
        font-size: 12px;
        line-height: 1.85;
        color: var(--hp-muted);
    }

    .hp-card .hp-links {
        margin-top: auto;
    }

    /* ==========================================
       11. EMPTY STATE
    ========================================== */

    .hp-empty {
        margin: 20px 0;
        padding: 30px;
        border: 1px dashed var(--hp-border);
        border-radius: 14px;
        text-align: center;
        color: var(--hp-muted);
        font-size: 13px;
    }

    /* ==========================================
       12. BOTTOM CTA
    ========================================== */

    .hp-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-top: 25px;
        padding: 27px;
        border: 1px solid var(--hp-border);
        border-radius: 17px;
        background: var(--hp-soft);
    }

    .hp-bottom h3 {
        margin: 0 0 8px;
        color: var(--hp-text);
        font-size: 20px;
    }

    .hp-bottom p {
        margin: 0;
        color: var(--hp-muted);
        font-size: 12px;
        line-height: 1.8;
    }

    /* ==========================================
       13. HIDDEN ELEMENTS
    ========================================== */

    [hidden] {
        display: none !important;
    }

    /* ==========================================
       14. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 900px) {

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

    /* ==========================================
       15. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 680px) {

        & {
            padding: 60px 16px;
        }

        .hp-founder {
            grid-template-columns: 1fr;
        }

        .hp-founder-visual {
            min-height: 230px;
            border-right: none;
            border-bottom: 1px solid var(--hp-border);
        }

        .hp-founder-avatar {
            width: 155px;
            height: 155px;
        }

        .hp-founder-content {
            padding: 25px;
        }

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

        .hp-search {
            width: 100%;
        }

        .hp-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    /* ==========================================
       16. REDUCED MOTION
    ========================================== */

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

        .hp-card,
        .hp-link {
            transition: none;
        }
    }

}











 /* ==========================================================
     07. HAPROVEN — OUR JOURNEY 
========================================================== */


#haproven-our-journey {

    /* ==========================================
       01. SECTION ROOT
    ========================================== */

    --hj-primary: #2563eb;
    --hj-primary-soft: rgba(37, 99, 235, .09);
    --hj-text: #0f172a;
    --hj-muted: #64748b;
    --hj-surface: #ffffff;
    --hj-border: rgba(148, 163, 184, .22);
    --hj-line: #cbd5e1;
    --hj-green: #059669;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 90px 20px;
    background: transparent;
    color: var(--hj-text);
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {
        --hj-primary: #60a5fa;
        --hj-primary-soft: rgba(96, 165, 250, .12);
        --hj-text: #f1f5f9;
        --hj-muted: #94a3b8;
        --hj-surface: #111b2c;
        --hj-border: rgba(148, 163, 184, .18);
        --hj-line: #334155;
        --hj-green: #34d399;
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .hj-container {
        max-width: 1120px;
        margin: 0 auto;
    }

    /* ==========================================
       05. SECTION HEADER
    ========================================== */

    .hj-header {
        max-width: 760px;
        margin: 0 auto 60px;
        text-align: center;
    }

    .hj-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 15px;
        margin-bottom: 18px;
        border: 1px solid var(--hj-border);
        border-radius: 50px;
        background: var(--hj-surface);
        color: var(--hj-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .9px;
        text-transform: uppercase;
    }

    .hj-eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
    }

    .hj-header h2 {
        margin: 0 0 17px;
        color: var(--hj-text);
        font-size: clamp(32px, 4.5vw, 50px);
        font-weight: 850;
        line-height: 1.15;
        letter-spacing: -1.5px;
    }

    .hj-header h2 span {
        color: var(--hj-primary);
    }

    .hj-header p {
        margin: 0;
        color: var(--hj-muted);
        font-size: 15px;
        line-height: 1.9;
    }

    /* ==========================================
       06. TIMELINE
    ========================================== */

    .hj-timeline {
        position: relative;
        padding: 12px 0;
    }

    /* Center line */

    .hj-timeline::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: var(--hj-line);
    }

    /* ==========================================
       07. TIMELINE ITEM
    ========================================== */

    .hj-item {
        position: relative;
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            70px
            minmax(0, 1fr);
        align-items: center;
        margin-bottom: 28px;
    }

    .hj-item:last-child {
        margin-bottom: 0;
    }

    /* Alternate cards */

    .hj-item:nth-child(odd) .hj-card {
        grid-column: 1;
        grid-row: 1;
    }

    .hj-item:nth-child(even) .hj-card {
        grid-column: 3;
        grid-row: 1;
    }

    /* ==========================================
       08. TIMELINE DOT
    ========================================== */

    .hj-dot {
        position: relative;
        z-index: 2;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;

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

        width: 24px;
        height: 24px;
        border: 6px solid var(--hj-surface);
        border-radius: 50%;
        background: var(--hj-primary);
        box-shadow: 0 0 0 2px var(--hj-primary);
    }

    /* ==========================================
       09. TIMELINE CARD
    ========================================== */

    .hj-card {
        position: relative;
        min-width: 0;
        padding: 27px;
        border: 1px solid var(--hj-border);
        border-radius: 19px;
        background: var(--hj-surface);

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

    .hj-card:hover {
        transform: translateY(-4px);
        border-color: var(--hj-primary);
        box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
    }

    /* ==========================================
       10. CARD TOP
    ========================================== */

    .hj-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 17px;
    }

    .hj-date {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 11px;
        border-radius: 8px;
        background: var(--hj-primary-soft);
        color: var(--hj-primary);
        font-size: 11px;
        font-weight: 800;
    }

    .hj-category {
        color: var(--hj-muted);
        font-size: 11px;
        font-weight: 700;
    }

    /* ==========================================
       11. CARD CONTENT
    ========================================== */

    .hj-card h3 {
        margin: 0 0 12px;
        color: var(--hj-text);
        font-size: 20px;
        font-weight: 800;
        line-height: 1.4;
    }

    .hj-card p {
        margin: 0;
        color: var(--hj-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    /* ==========================================
       12. CARD LINK
    ========================================== */

    .hj-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 17px;
        color: var(--hj-primary);
        font-size: 12px;
        font-weight: 750;
        text-decoration: none;
    }

    .hj-link:hover {
        text-decoration: underline;
    }

    /* ==========================================
       13. START / END MARKERS
    ========================================== */

    .hj-marker {
        position: relative;
        z-index: 2;
        width: max-content;
        max-width: 100%;
        margin: 0 auto 35px;
        padding: 10px 18px;
        border: 1px solid var(--hj-border);
        border-radius: 50px;
        background: var(--hj-surface);
        color: var(--hj-primary);
        font-size: 12px;
        font-weight: 800;
        text-align: center;
    }

    .hj-marker-end {
        margin: 35px auto 0;
        color: var(--hj-green);
    }

    /* ==========================================
       14. BOTTOM MESSAGE
    ========================================== */

    .hj-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        margin-top: 45px;
        padding: 30px 32px;
        border: 1px solid var(--hj-border);
        border-radius: 19px;
        background: var(--hj-surface);
    }

    .hj-bottom h3 {
        margin: 0 0 10px;
        color: var(--hj-text);
        font-size: 21px;
        font-weight: 800;
    }

    .hj-bottom p {
        max-width: 760px;
        margin: 0;
        color: var(--hj-muted);
        font-size: 13px;
        line-height: 1.85;
    }

    .hj-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        flex-shrink: 0;
        min-height: 45px;
        padding: 12px 19px;
        border-radius: 10px;
        background: #2563eb;
        color: #ffffff;
        font-size: 13px;
        font-weight: 750;
        text-decoration: none;
        transition: background .2s ease;
    }

    .hj-button:hover {
        background: #1d4ed8;
    }

    /* ==========================================
       15. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--hj-primary);
        outline-offset: 4px;
    }

    /* ==========================================
       16. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 768px) {

        & {
            padding: 70px 18px;
        }

        .hj-header {
            margin-bottom: 40px;
        }

        .hj-timeline::before {
            left: 12px;
            transform: none;
        }

        .hj-item {
            grid-template-columns: 25px minmax(0, 1fr);
            gap: 18px;
            align-items: start;
            margin-bottom: 19px;
        }

        .hj-item:nth-child(odd) .hj-card,
        .hj-item:nth-child(even) .hj-card {
            grid-column: 2;
            grid-row: 1;
        }

        .hj-dot {
            grid-column: 1;
            grid-row: 1;
            width: 20px;
            height: 20px;
            margin-top: 26px;
            border-width: 5px;
        }

        .hj-marker {
            margin-left: 0;
        }

        .hj-marker-end {
            margin-top: 25px;
        }

        .hj-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    /* ==========================================
       17. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 500px) {

        & {
            padding: 60px 16px;
        }

        .hj-item {
            gap: 12px;
        }

        .hj-card {
            padding: 20px;
            border-radius: 15px;
        }

        .hj-card-top {
            flex-wrap: wrap;
        }

        .hj-card h3 {
            font-size: 18px;
        }

        .hj-bottom {
            padding: 24px;
        }
    }

    /* ==========================================
       18. REDUCED MOTION
    ========================================== */

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

        .hj-card,
        .hj-button {
            transition: none;
        }
    }

}

















 /* ==========================================================
     10. HAPROVEN FRAME SECTION
========================================================== */

#haprovenFrameSection {

    /* ==========================================
       01. LIGHT MODE VARIABLES
    ========================================== */

    --hf-bg: #ffffff;
    --hf-surface: #f8fafc;
    --hf-card: #ffffff;

    --hf-text: #0f172a;
    --hf-muted: #64748b;
    --hf-border: #e2e8f0;

    --hf-primary: #7c3aed;
    --hf-blue: #2563eb;
    --hf-green: #15803d;

    --hf-shadow: 0 12px 36px rgba(15, 23, 42, .055);

    /* Member Card Variables */

    --hf-member-bg: linear-gradient(
        145deg,
        #ffffff,
        #f8faff
    );

    --hf-member-border: #e2e8f0;
    --hf-member-text: #0f172a;
    --hf-member-muted: #64748b;
    --hf-member-username: #7c3aed;

    --hf-member-rank-bg: #f1edff;
    --hf-member-rank-text: #6d28d9;

    --hf-member-avatar-border: #e2e8f0;
    --hf-member-divider: #e2e8f0;

    --hf-member-github: #334155;
    --hf-member-contributions: #15803d;

    --hf-member-hover-shadow: rgba(15, 23, 42, .09);

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 0;

    color: var(--hf-text);
    font-family: inherit;
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE VARIABLES
    ========================================== */

    [data-theme="dark"] &,
    body[data-theme="dark"] &,
    .dark &,
    body.dark-mode &,
    body.dark &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {

        --hf-bg: #0b1220;
        --hf-surface: #111c2e;
        --hf-card: #142137;

        --hf-text: #f1f5f9;
        --hf-muted: #a0aec0;
        --hf-border: #293750;

        --hf-primary: #a78bfa;
        --hf-blue: #60a5fa;
        --hf-green: #4ade80;

        --hf-shadow: 0 15px 35px rgba(0, 0, 0, .16);

        --hf-member-bg: linear-gradient(
            145deg,
            #192539,
            #0c1728
        );

        --hf-member-border: rgba(148, 163, 184, .24);
        --hf-member-text: #ffffff;
        --hf-member-muted: #c1c7d2;
        --hf-member-username: #c4a5ff;

        --hf-member-rank-bg: rgba(255, 255, 255, .09);
        --hf-member-rank-text: #d8d5ff;

        --hf-member-avatar-border: rgba(255, 255, 255, .20);
        --hf-member-divider: rgba(255, 255, 255, .10);

        --hf-member-github: #ffffff;
        --hf-member-contributions: #55e58a;

        --hf-member-hover-shadow: rgba(0, 0, 0, .17);
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. SECTION INTRO
    ========================================== */

    .frame-intro {
        text-align: center;
        max-width: 900px;
        margin: 0 auto 38px;
    }

    .frame-label {
        display: inline-flex;
        padding: 9px 17px;

        border: 1px solid rgba(124, 58, 237, .22);
        background: rgba(124, 58, 237, .07);

        color: var(--hf-primary);
        border-radius: 50px;

        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.6px;
    }

    .frame-title {
        margin: 17px 0 12px;
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 850;
        line-height: 1.15;
        letter-spacing: -1.5px;
        color: var(--hf-text);
    }

    .frame-title span {
        background: linear-gradient(
            110deg,
            #8b5cf6,
            #2563eb
        );

        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .frame-description {
        margin: 0 auto;
        max-width: 760px;
        color: var(--hf-muted);
        font-size: 15px;
        line-height: 1.8;
    }

    /* ==========================================
       05. SECTION HEADINGS
    ========================================== */

    .frame-section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
        margin: 36px 0 19px;
        text-align: left;
    }

    .frame-section-heading h2 {
        margin: 0;
        color: var(--hf-text);
        font-size: clamp(19px, 2.4vw, 25px);
        font-weight: 800;
    }

    .frame-section-heading p {
        margin: 5px 0 0;
        font-size: 12px;
        color: var(--hf-muted);
    }

    .frame-section-note {
        font-size: 11px;
        color: var(--hf-muted);
        border: 1px solid var(--hf-border);
        border-radius: 30px;
        padding: 7px 12px;
    }

    /* ==========================================
       06. LATEST CONTRIBUTOR
    ========================================== */

    .frame-latest {
        position: relative;
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 26px;

        border: 1px solid rgba(124, 58, 237, .22);
        border-radius: 20px;

        background:
            radial-gradient(
                circle at 95% 0%,
                rgba(139, 92, 246, .12),
                transparent 40%
            ),
            var(--hf-card);

        box-shadow: var(--hf-shadow);
        overflow: hidden;
        text-align: left;
    }

    .frame-latest::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(
            #a855f7,
            #3b82f6
        );
    }

    .frame-latest-avatar {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(139, 92, 246, .15);
    }

    .frame-latest-content {
        flex: 1;
        min-width: 0;
    }

    .frame-latest-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 30px;
        background: rgba(34, 197, 94, .1);
        color: var(--hf-green);
        font-size: 11px;
        font-weight: 800;
    }

    .frame-latest-content h3 {
        margin: 11px 0 4px;
        font-size: 23px;
        color: var(--hf-text);
    }

    .frame-latest-content p {
        margin: 5px 0;
        color: var(--hf-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .frame-latest-meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 13px;
    }

    .frame-meta-pill {
        padding: 7px 11px;
        border: 1px solid var(--hf-border);
        border-radius: 30px;
        color: var(--hf-muted);
        font-size: 11px;
    }

    .frame-profile-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 12px;
        color: var(--hf-blue);
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .frame-profile-link:hover {
        text-decoration: underline;
    }

    /* ==========================================
       07. TOP 3 CONTRIBUTORS
    ========================================== */

    .frame-top-three {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .frame-top-card {
        position: relative;
        min-width: 0;
        padding: 25px 20px 22px;

        border: 1px solid var(--hf-border);
        border-radius: 19px;

        background: var(--hf-card);
        box-shadow: var(--hf-shadow);

        text-align: center;
        overflow: hidden;

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

    .frame-top-card:hover {
        transform: translateY(-5px);
        border-color: var(--hf-primary);
    }

    .frame-top-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--rank-color, #8b5cf6);
    }

    /* Rank Colors */

    .frame-top-card.rank-1 {
        --rank-color: #f59e0b;

        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(245, 158, 11, .10),
                transparent 60%
            ),
            var(--hf-card);
    }

    .frame-top-card.rank-2 {
        --rank-color: #94a3b8;
    }

    .frame-top-card.rank-3 {
        --rank-color: #c08457;
    }

    .frame-rank-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
    }

    .frame-rank-number {
        font-size: 12px;
        font-weight: 800;
        color: var(--hf-muted);
    }

    .frame-medal {
        font-size: 27px;
    }

    .frame-top-avatar {
        display: block;
        width: 94px;
        height: 94px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--hf-border);
        margin: 0 auto 14px;
    }

    .frame-top-card h3 {
        margin: 0 0 5px;
        font-size: 19px;
        color: var(--hf-text);
        overflow-wrap: anywhere;
    }

    .frame-username {
        font-size: 12px;
        color: var(--hf-primary);
        overflow-wrap: anywhere;
    }

    .frame-top-bio {
        margin: 13px auto;
        max-width: 270px;
        min-height: 40px;

        color: var(--hf-muted);
        font-size: 12px;
        line-height: 1.6;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .frame-top-count {
        display: block;
        margin-top: 15px;
        font-size: 21px;
        font-weight: 850;
        color: var(--hf-green);
    }

    .frame-top-count small {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        font-weight: 500;
        color: var(--hf-muted);
    }

    /* ==========================================
       08. SEARCH
    ========================================== */

    .frame-search {
        width: 100%;
        max-width: 700px;
        margin: 28px auto 20px;
    }

    .search-box {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-icon {
        position: absolute;
        left: 17px;
        color: var(--hf-muted);
        font-size: 20px;
        pointer-events: none;
    }

    #contributorSearch {
        width: 100%;
        height: 53px;
        padding: 0 50px;

        border: 1px solid var(--hf-border);
        border-radius: 13px;
        outline: none;

        background: var(--hf-card);
        color: var(--hf-text);
        font-size: 14px;

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

    #contributorSearch::placeholder {
        color: var(--hf-muted);
        opacity: 1;
    }

    #contributorSearch:focus {
        border-color: var(--hf-primary);
        box-shadow: 0 0 0 4px rgba(139, 92, 246, .08);
    }

    .clear-search {
        position: absolute;
        right: 10px;
        width: 32px;
        height: 32px;

        border: 0;
        border-radius: 8px;

        background: var(--hf-surface);
        color: var(--hf-muted);

        font-size: 22px;
        cursor: pointer;

        display: none;
        align-items: center;
        justify-content: center;
    }

    .search-result {
        margin: 9px 3px 0;
        color: var(--hf-muted);
        font-size: 12px;
        text-align: left;
    }

    /* ==========================================
       09. CONTRIBUTORS GRID
    ========================================== */

    .haproven-frame-grid {
        display: grid;
        grid-template-columns: repeat(
            auto-fill,
            minmax(220px, 1fr)
        );
        gap: 17px;
    }

    /* ==========================================
       10. MEMBER CARD
    ========================================== */

    .haproven-member {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        min-width: 0;
        min-height: 335px;
        padding: 26px 19px 19px;

        border: 1px solid var(--hf-member-border);
        border-radius: 16px;
        background: var(--hf-member-bg);

        text-decoration: none;
        color: var(--hf-member-text);
        overflow: hidden;

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

    .haproven-member::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
            90deg,
            #a65cff,
            #4ea1ff
        );
    }

    .haproven-member:hover {
        transform: translateY(-5px);
        border-color: #a78bfa;
        box-shadow: 0 18px 35px var(--hf-member-hover-shadow);
    }

    /* ==========================================
       11. MEMBER RANK
    ========================================== */

    .member-rank {
        position: absolute;
        top: 13px;
        left: 13px;

        padding: 5px 9px;
        border-radius: 7px;

        background: var(--hf-member-rank-bg);
        color: var(--hf-member-rank-text);

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

    /* ==========================================
       12. MEMBER AVATAR
    ========================================== */

    .member-avatar {
        width: 105px;
        height: 105px;
        margin: 12px 0 16px;

        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--hf-member-avatar-border);
    }

    /* ==========================================
       13. MEMBER NAME
    ========================================== */

    .member-name {
        width: 100%;
        font-size: 18px;
        font-weight: 800;
        color: var(--hf-member-text);
        text-align: center;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* ==========================================
       14. MEMBER USERNAME
    ========================================== */

    .member-username {
        margin-top: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--hf-member-username);
    }

    /* ==========================================
       15. MEMBER BIO
    ========================================== */

    .member-bio {
        margin: 14px 0 18px;
        color: var(--hf-member-muted);

        font-size: 12px;
        line-height: 1.65;
        min-height: 30px;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ==========================================
       16. MEMBER BOTTOM
    ========================================== */

    .member-bottom {
        width: 100%;
        margin-top: auto;
        padding-top: 14px;

        border-top: 1px solid var(--hf-member-divider);

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 7px;
    }

    .member-github {
        color: var(--hf-member-github);
        font-size: 12px;
        font-weight: 650;
    }

    .member-contributions {
        color: var(--hf-member-contributions);
        font-size: 11px;
        font-weight: 800;
        text-align: right;
    }

    /* ==========================================
       17. LOADING AND ERROR
    ========================================== */

    .frame-loading {
        grid-column: 1 / -1;
        padding: 45px 18px;
        text-align: center;

        color: var(--hf-muted);
        font-size: 13px;

        border: 1px dashed var(--hf-border);
        border-radius: 15px;
    }

    .frame-no-result {
        margin: 20px auto;
        padding: 35px 20px;

        border: 1px dashed var(--hf-border);
        border-radius: 15px;

        background: var(--hf-surface);
        text-align: center;
    }

    .frame-no-result[hidden] {
        display: none;
    }

    .frame-no-result h2 {
        font-size: 19px;
        color: var(--hf-text);
    }

    .frame-no-result p {
        color: var(--hf-muted);
        font-size: 13px;
    }

    .reset-search {
        padding: 11px 16px;
        border: 0;
        border-radius: 9px;

        background: #7c3aed;
        color: #ffffff;

        cursor: pointer;
        font-weight: 700;
    }

    .reset-search:hover {
        background: #6d28d9;
    }

    /* ==========================================
       18. SECTION FOOTER
    ========================================== */

    .frame-footer {
        margin-top: 42px;
        padding: 27px 15px;
        border-top: 1px solid var(--hf-border);
        text-align: center;
    }

    .frame-footer-text {
        max-width: 650px;
        margin: 0 auto 17px;
        color: var(--hf-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .frame-footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .frame-footer-links a {
        padding: 11px 16px;

        border: 1px solid var(--hf-border);
        border-radius: 9px;

        color: var(--hf-text);
        text-decoration: none;

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

        transition:
            border-color .2s ease,
            color .2s ease,
            background .2s ease;
    }

    .frame-footer-links a:hover {
        border-color: var(--hf-primary);
        color: var(--hf-primary);
        background: var(--hf-surface);
    }

    /* ==========================================
       19. ACCESSIBILITY
    ========================================== */

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
        outline: 2px solid var(--hf-primary);
        outline-offset: 3px;
    }

    /* ==========================================
       20. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 850px) {

        .frame-top-three {
            grid-template-columns: repeat(
                2,
                minmax(0, 1fr)
            );
        }

        .frame-top-card.rank-1 {
            grid-column: 1 / -1;
        }
    }

    /* ==========================================
       21. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 40px 15px 50px;
        }

        .frame-top-three {
            grid-template-columns: 1fr;
        }

        .frame-top-card.rank-1 {
            grid-column: auto;
        }

        .frame-latest {
            flex-direction: column;
            text-align: center;
            padding: 25px 17px;
            gap: 13px;
        }

        .frame-latest-meta {
            justify-content: center;
        }

        .haproven-frame-grid {
            grid-template-columns: repeat(
                2,
                minmax(0, 1fr)
            );
            gap: 10px;
        }

        .haproven-member {
            padding: 20px 10px 15px;
            min-height: 305px;
        }

        .member-avatar {
            width: 75px;
            height: 75px;
        }

        .member-name {
            font-size: 14px;
        }

        .member-bio {
            font-size: 11px;
        }

        .member-bottom {
            flex-direction: column;
            align-items: center;
        }
    }

    /* ==========================================
       22. EXTRA SMALL MOBILE
    ========================================== */

    @media (max-width: 370px) {

        .haproven-frame-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================
       23. REDUCED MOTION
    ========================================== */

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

        .haproven-member,
        .frame-top-card {
            transition: none;
        }

        .haproven-member:hover,
        .frame-top-card:hover {
            transform: none;
        }
    }

}












 /* ==========================================================
     11. HAPROVEN OPPORTUNITIES SECTION
========================================================== */


#opportunities-section {

    --op-bg: #ffffff;
    --op-card: #ffffff;
    --op-text: #0f172a;
    --op-muted: #64748b;
    --op-border: #e2e8f0;
    --op-soft: #f8fafc;
    --op-primary: #7155e8;
    --op-primary-soft: #f2efff;

    position: relative;
    width: 100%;
    padding: 85px 20px;
    background: var(--op-bg);
    color: var(--op-text);
    overflow: hidden;
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    body[data-theme="dark"] &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {

        --op-bg: #0b1220;
        --op-card: #142033;
        --op-text: #f1f5f9;
        --op-muted: #a1aec0;
        --op-border: #29394f;
        --op-soft: #101b2d;
        --op-primary: #b49aff;
        --op-primary-soft: #292144;
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .op-container {
        max-width: 1200px;
        margin: auto;
        position: relative;
        z-index: 1;
    }

    /* ==========================================
       05. SECTION HEADER
    ========================================== */

    .op-header {
        max-width: 740px;
        margin: 0 auto 43px;
        text-align: center;
    }

    .op-label {
        display: inline-block;
        padding: 8px 15px;
        border: 1px solid var(--op-border);
        border-radius: 30px;
        background: var(--op-soft);
        color: var(--op-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.3px;
        text-transform: uppercase;
    }

    .op-header h2 {
        margin: 18px 0 14px;
        color: var(--op-text);
        font-size: clamp(30px, 4.5vw, 44px);
        font-weight: 850;
        letter-spacing: -1px;
        line-height: 1.2;
    }

    .op-header h2 span {
        color: var(--op-primary);
    }

    .op-header p {
        margin: 0;
        color: var(--op-muted);
        font-size: 14px;
        line-height: 1.85;
    }

    /* ==========================================
       06. CARD GRID
    ========================================== */

    .op-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    /* ==========================================
       07. OPPORTUNITY CARD
    ========================================== */

    .op-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 26px 23px;
        border: 1px solid var(--op-border);
        border-radius: 17px;
        background: var(--op-card);

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

    .op-card:hover {
        transform: translateY(-5px);
        border-color: var(--op-primary);
        box-shadow: 0 15px 35px rgba(15, 23, 42, .06);
    }

    /* ==========================================
       08. CARD ICON
    ========================================== */

    .op-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-bottom: 23px;
        border-radius: 13px;
        background: var(--op-primary-soft);
        color: var(--op-primary);
    }

    .op-icon svg {
        width: 25px;
        height: 25px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ==========================================
       09. CARD CONTENT
    ========================================== */

    .op-card h3 {
        margin: 0 0 12px;
        color: var(--op-text);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.4;
    }

    .op-card p {
        margin: 0 0 24px;
        color: var(--op-muted);
        font-size: 12.5px;
        line-height: 1.8;
        flex-grow: 1;
    }

    /* ==========================================
       10. CARD LINK
    ========================================== */

    .op-card-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        color: var(--op-primary);
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
        transition: gap .2s ease;
    }

    .op-card-link:hover {
        gap: 13px;
    }

    .op-card-link svg {
        width: 16px;
        height: 16px;
    }

    /* ==========================================
       11. BOTTOM CTA
    ========================================== */

    .op-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        margin-top: 26px;
        padding: 26px 30px;
        background: var(--op-soft);
        border: 1px solid var(--op-border);
        border-radius: 16px;
    }

    .op-bottom-content h3 {
        margin: 0 0 7px;
        color: var(--op-text);
        font-size: 19px;
        font-weight: 800;
    }

    .op-bottom-content p {
        margin: 0;
        color: var(--op-muted);
        font-size: 12.5px;
        line-height: 1.7;
    }

    /* ==========================================
       12. MAIN BUTTON
    ========================================== */

    .op-main-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-shrink: 0;
        padding: 13px 19px;
        border-radius: 9px;
        background: #7155e8;
        color: #ffffff;
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
        transition: opacity .2s ease;
    }

    .op-main-btn:hover {
        opacity: .88;
    }

    /* ==========================================
       13. ACCESSIBILITY
    ========================================== */

    a:focus-visible {
        outline: 3px solid var(--op-primary);
        outline-offset: 4px;
    }

    /* ==========================================
       14. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 1000px) {

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

    /* ==========================================
       15. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 600px) {

        & {
            padding: 65px 15px;
        }

        .op-header {
            margin-bottom: 30px;
        }

        .op-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .op-card {
            padding: 24px;
        }

        .op-icon {
            margin-bottom: 17px;
        }

        .op-bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            padding: 24px;
        }

        .op-main-btn {
            width: 100%;
        }
    }

    /* ==========================================
       16. REDUCED MOTION
    ========================================== */

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

        .op-card,
        .op-card-link {
            transition: none;
        }

        .op-card:hover {
            transform: none;
        }
    }

}
















 /* ==========================================================
     12. HAPROVEN COMMUNITY IMPACT SECTION
========================================================== */

#community-impact-section {

    /* ==========================================
       01. LIGHT MODE VARIABLES
    ========================================== */

    /* --ci-bg: #ffffff; */

    --ci-card: #ffffff;
    --ci-soft: #f8fafc;
    --ci-text: #0f172a;
    --ci-muted: #64748b;
    --ci-border: #e2e8f0;
    --ci-primary: #7155e8;
    --ci-primary-soft: #f2efff;
    --ci-green: #16a36a;

    position: relative;
    padding: 85px 20px;
    background: var(--ci-bg, transparent);
    color: var(--ci-text);
    box-sizing: border-box;

    /* ==========================================
       02. DARK MODE VARIABLES
    ========================================== */

    [data-theme="dark"] &,
    body.dark &,
    body.dark-mode &,
    body[data-theme="dark"] &,
    &[data-theme="dark"],
    &.dark,
    &.dark-mode {

        /* --ci-bg: #0b1220; */

        --ci-card: #142033;
        --ci-soft: #101b2d;
        --ci-text: #f1f5f9;
        --ci-muted: #a1aec0;
        --ci-border: #29394f;
        --ci-primary: #b49aff;
        --ci-primary-soft: #292144;
        --ci-green: #70e3a9;
    }

    /* ==========================================
       03. BOX SIZING
    ========================================== */

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

    /* ==========================================
       04. CONTAINER
    ========================================== */

    .ci-container {
        max-width: 1200px;
        margin: auto;
    }

    /* ==========================================
       05. SECTION HEADER
    ========================================== */

    .ci-header {
        max-width: 780px;
        margin: 0 auto 42px;
        text-align: center;
    }

    .ci-label {
        display: inline-block;
        padding: 8px 15px;
        background: var(--ci-soft);
        border: 1px solid var(--ci-border);
        border-radius: 30px;
        color: var(--ci-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    .ci-header h2 {
        margin: 18px 0 14px;
        color: var(--ci-text);
        font-size: clamp(30px, 4.5vw, 45px);
        font-weight: 850;
        line-height: 1.2;
    }

    .ci-header h2 span {
        color: var(--ci-primary);
    }

    .ci-header p {
        margin: 0;
        color: var(--ci-muted);
        font-size: 14px;
        line-height: 1.85;
    }

    /* ==========================================
       06. STATISTICS GRID
    ========================================== */

    .ci-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    /* ==========================================
       07. STATISTICS CARD
    ========================================== */

    .ci-stat-card {
        min-width: 0;
        padding: 27px 18px;
        text-align: center;
        background: var(--ci-card);
        border: 1px solid var(--ci-border);
        border-radius: 16px;
        transition: transform .25s, border-color .25s;
    }

    .ci-stat-card:hover {
        transform: translateY(-4px);
        border-color: var(--ci-primary);
    }

    /* ==========================================
       08. STATISTICS ICON
    ========================================== */

    .ci-stat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 49px;
        height: 49px;
        margin: 0 auto 16px;
        border-radius: 13px;
        background: var(--ci-primary-soft);
        color: var(--ci-primary);
    }

    .ci-stat-icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ==========================================
       09. STATISTICS CONTENT
    ========================================== */

    .ci-stat-number {
        display: block;
        color: var(--ci-primary);
        font-size: clamp(28px, 3vw, 37px);
        font-weight: 850;
    }

    .ci-stat-name {
        display: block;
        margin-top: 7px;
        color: var(--ci-text);
        font-size: 13px;
        font-weight: 800;
    }

    .ci-stat-description {
        display: block;
        margin-top: 7px;
        color: var(--ci-muted);
        font-size: 11px;
        line-height: 1.65;
    }

    /* ==========================================
       10. ACHIEVEMENTS SECTION
    ========================================== */

    .ci-achievements {
        margin-top: 48px;
    }

    .ci-subheading {
        margin-bottom: 21px;
    }

    .ci-subheading h3 {
        margin: 0 0 8px;
        color: var(--ci-text);
        font-size: clamp(21px, 3vw, 27px);
        font-weight: 800;
    }

    .ci-subheading p {
        margin: 0;
        color: var(--ci-muted);
        font-size: 13px;
        line-height: 1.7;
    }

    /* ==========================================
       11. ACHIEVEMENTS GRID
    ========================================== */

    .ci-achievement-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    /* ==========================================
       12. ACHIEVEMENT CARD
    ========================================== */

    .ci-achievement-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 24px;
        background: var(--ci-card);
        border: 1px solid var(--ci-border);
        border-radius: 16px;
        transition: border-color .2s, transform .2s;
    }

    .ci-achievement-card:hover {
        border-color: var(--ci-primary);
        transform: translateY(-3px);
    }

    /* ==========================================
       13. ACHIEVEMENT ICON
    ========================================== */

    .ci-achievement-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        margin-bottom: 17px;
        background: var(--ci-primary-soft);
        border-radius: 12px;
        font-size: 21px;
    }

    /* ==========================================
       14. ACHIEVEMENT CONTENT
    ========================================== */

    .ci-achievement-content {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .ci-achievement-content h4 {
        margin: 0 0 10px;
        color: var(--ci-text);
        font-size: 16px;
        font-weight: 800;
    }

    .ci-achievement-content p {
        margin: 0 0 17px;
        color: var(--ci-muted);
        font-size: 12px;
        line-height: 1.8;
    }

    /* ==========================================
       15. ACHIEVEMENT LINK
    ========================================== */

    .ci-achievement-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        align-self: flex-start;
        margin-top: auto;
        color: var(--ci-primary);
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    .ci-achievement-link:hover {
        text-decoration: underline;
    }

    /* ==========================================
       16. IMPACT MESSAGE
    ========================================== */

    .ci-message {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        margin-top: 30px;
        padding: 30px 34px;
        background: var(--ci-soft);
        border: 1px solid var(--ci-border);
        border-radius: 17px;
    }

    .ci-message-content {
        max-width: 750px;
    }

    .ci-message h3 {
        margin: 0 0 10px;
        color: var(--ci-text);
        font-size: clamp(20px, 3vw, 26px);
        font-weight: 800;
    }

    .ci-message p {
        margin: 0;
        color: var(--ci-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    /* ==========================================
       17. IMPACT BUTTON
    ========================================== */

    .ci-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-shrink: 0;
        padding: 13px 20px;
        background: #7155e8;
        border-radius: 9px;
        color: #fff !important;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

    .ci-button:hover {
        opacity: .9;
    }

    /* ==========================================
       18. TABLET RESPONSIVE
    ========================================== */

    @media (max-width: 1000px) {

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

        .ci-achievement-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* ==========================================
       19. MOBILE RESPONSIVE
    ========================================== */

    @media (max-width: 650px) {

        & {
            padding: 65px 15px;
        }

        .ci-header {
            margin-bottom: 30px;
        }

        .ci-stats {
            gap: 10px;
        }

        .ci-stat-card {
            padding: 22px 10px;
        }

        .ci-stat-name {
            font-size: 12px;
        }

        .ci-achievements {
            margin-top: 38px;
        }

        .ci-achievement-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .ci-achievement-card {
            padding: 22px;
        }

        .ci-message {
            flex-direction: column;
            align-items: flex-start;
            padding: 25px 22px;
            gap: 20px;
        }

        .ci-button {
            width: 100%;
        }
    }

    /* ==========================================
       20. REDUCED MOTION
    ========================================== */

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

        .ci-stat-card,
        .ci-achievement-card {
            transition: none;
        }

        .ci-stat-card:hover,
        .ci-achievement-card:hover {
            transform: none;
        }
    }

}







































/*==============================================
/////////      hero-aside             /////////
===============================================*/





@media (min-width: 1281px) {


    .hero-aside div {
        position: fixed;
        top: 20%;
        right: 40px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: auto;


    }


    .hero-aside a {
        padding: 5px;
        border: 2px solid;

    }

    .hero-aside a:hover {
        border: 2px solid yellow;
    }

    .hero-aside i {
        border: 2px solid;
        padding: 5px;
        border-radius: 5px;
        font-size: large;
        text-shadow: 3px 3px 9px rgba(116, 115, 115, 0.657);

    }



}


@media (min-width: 1024px) and (max-width: 1580px) {

    .hero-aside div {
        position: absolute;
        position: fixed;

        top: 20%;
        right: 0px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: auto;
    }


    .hero-aside a {
        padding: 6px;
        background-color: var(--color-bg, #ffffff);
        border-radius: 5px;
    }
}




@media (min-width: 500px) and (max-width: 1023px) {

    .header {
        z-index: 99 !important;
    }

    .hd-box {
        gap: 50px;
        margin: 10%;
    }

    .Hero {
        flex-direction: column;
        text-align: start;
        margin-top: 20%;
    }

}

@media (min-width: 300px) and (max-width: 600px) {

    .header {
        z-index: 99 !important;
    }

    .Hero {

        padding: 0 18px;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 0;
        text-align: start;
    }
}

.header {
    z-index: 2;
}

/*==============================================
/////////       Hero sectio           /////////
===============================================*/

article {
    background-color: var(--hero-bg, );

}

.hero-section {
    position: relative;
    overflow: hidden;
    padding-bottom: 100px;
    max-width: 1350px;
    margin: auto;
}

.btns {
    background-color: #f4f5f7c9;
    color: #000;
}


.Hero {
    max-width: 1500px;
    margin: 10% auto 0;
    padding: 0 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.hero-L {
    flex: 1;
    animation: fadeInUp 1s ease;
}

.hero-L h1 {
    color: var(--main-tital);
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-L b {
    display: inline-block;
    margin: 20px -10px;
    padding: 8px 16px;
    border-radius: 20px;
    /* color: var(--bg-color); */

}

.hero-L p {
    max-width: 600px;
    line-height: 1.7;
    margin-bottom: 30px;
    /* color: var(--bg-color); */

}

.hero-L span {
    text-decoration: overline;
    font-size: larger;
    /* color: var(--text-color); */
}


.stat-label {
    color: var(--text-color, #000);
    /* font-size: large; */
}



.hero-R {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.h-box {
    height: 150px;
    display: grid;
    place-items: center;
    font-size: 50px;
    background: rgba(255, 255, 255, .1);
    border-radius: 20px;
    /* animation: float 6s ease-in-out infinite; */
}

.hd-box {
    max-width: 1500px;
    margin: 110px auto 0;
    padding: 0 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 1;
    position: relative;
}

.stat {
    min-width: 200px;
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    color: var(--bg-color, #fff);
    box-shadow: 0 0 2px var(--bg-color);
    box-shadow: 0px 8px 0px 10px;

}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--main-tital, #fff);
    text-shadow: none;

}



.wave-wrap {
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.wasf {
    width: 100%;
    height: 130px;
}


.parallax>use {
    animation: waveMove 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-duration: 18s
}

.parallax>use:nth-child(2) {
    animation-duration: 22s
}

.parallax>use:nth-child(3) {
    animation-duration: 26s
}

.parallax>use:nth-child(4) {
    animation-duration: 30s
}

@keyframes waveMove {
    from {
        transform: translateX(-90px)
    }

    to {
        transform: translateX(85px)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-15px)
    }
}

@media screen and (max-width:1279px) {

    .hero-L h1 {
        font-size: 2.5rem;
    }

    .stat {
        min-width: 150px;
        text-align: center;
        padding: 5px;
    }

}

@media(max-width:992px) {
    .Hero {
        flex-direction: column;
        text-align: center;
        margin-top: 20%;
    }

    .hero-R {
        display: none
    }
}

@media(max-width:768px) {



    .hero-section {
        padding-bottom: 170px
    }

    .hero-L h1 {
        font-size: 2.4rem
    }

    .stat {
        min-width: 45%
    }
}




@media (max-width: 768px) {

    .hd-box {
        gap: 30px;
        margin-top: 70px;
    }

    .stat {
        min-width: 140px;
        padding: 12px 10px;
        border-radius: 12px;
    }

    .stat-number {
        font-size: 2rem;
        margin-bottom: 6px;
    }




}

@media (max-width: 480px) {

    .Hero {
        margin: 27% auto 0 !important;
        text-align: start;
        padding: 0 15px;

    }

    .hero-L h1 {
        font-size: 1.5rem
    }



    .hero-actions {
        display: flex;

        a {
            margin: 3px;
        }
    }

    .stat {
        min-width: 100%
    }

    .wasf {
        height: 30vh;
    }

    .stat {
        min-width: 120px;
        padding: 10px 8px;
    }

    .stat-number {
        font-size: 1.7rem;
    }


}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

.h-box {
    height: 150px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    /* animation: float 6s ease-in-out infinite; */
    position: relative;
    overflow: hidden;
    background-color: #0A66C2;
    border: 1px solid;
    color: #f9f9f9;
}

.h-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: rotate(45deg);
    transition: transform 0.6s ease;
}

.h-box:hover::before {
    transform: rotate(45deg) translate(10%, 10%);
    top: 10%;
}



.h-box:nth-child(1) {
    background: #bb1be7e8;
}

.h-box:nth-child(2) {
    background: rgba(0, 140, 255, 0.718);
}

.h-box:nth-child(3) {
    background: rgba(137, 43, 226, 0.783);
}

.h-box:nth-child(4) {
    background: rgba(0, 255, 170, 0.607);
}

.h-box:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background-color: #1DA1F2;
}

.stat:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 0px 10px;
    box-shadow: 0 0 2px var(--bg-color);

}

.stat {
    transition: all 0.4s ease;
    animation: float 6s ease-in-out infinite;
    overflow: hidden;
}














/*==============================================
/////////       About section          /////////
===============================================*/

.haproven-about {
    margin-top: 0px;
    /* padding: 20px; */
    padding-top: 150px;
}

.about-l {
    max-width: 1300px;
    margin-bottom: 20px;
}

.about-senter {
    display: flex;
    align-items: center;
    gap: 30px;
}

.focus-section {
    flex: 1;
    padding: 25px;
    border-radius: 12px;
}

.focus-section ul {
    margin-top: 10px;
    padding-left: 20px;
}

.focus-section li {
    padding: 7px 0;
}

.video-section {
    flex: 1;
}

.video-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1050px) {
    .about-senter {
        gap: 20px;
    }
}

@media (max-width: 750px) {
    .about-senter {
        flex-direction: column;
    }

    .focus-section {
        text-align: center;
    }
}

@media (max-width: 450px) {

    .focus-section {
        text-align: start;
    }
}


















































/*==============================================
/////////       Upcoming Events        /////////
===============================================*/

.upcoming-events {
    margin: auto;
}

.events-grid {
    /* margin-top: 50px; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    height: 350px;
    grid-auto-flow: column;
    overflow-x: auto;
    /* scrollbar-width: none; */
    align-items: center;
    padding: 0 20px;

    scrollbar-width: thin;


}


.event-card {
    padding: 15px;
    border: 1px solid var(--rjba);
    border-radius: 18px;
    transition: .3s ease;
    min-width: 300px;
    height: 200px;
    overflow-x: auto;
    scrollbar-width: none;

}

.event-card:hover {
    transform: translateY(-8px);
    border-color: rgba(139, 92, 246, .4);
}

.event-date {
    display: inline-block;
    margin-bottom: 15px;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid;
}

.event-card h3 {
    margin-bottom: 10px;
    font-size: 1rem;
}

.event-card p {
    line-height: 1.7;
    font-size: 0.8rem;
}

@media(max-width:900px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {
    .events-grid {
        grid-template-columns: 1fr;
    }
}











/*==============================================
/////////      Haproven Ecosystem        /////////
===============================================*/

.ecosystem-section {
    padding: 10px 0%;
}

.ecosystem-header {
    text-align: center;
    margin: auto;
    max-width: 1000px;
    margin: auto;
}

.ecosystem-network {
    margin-top: 70px;
}

.ecosystem-network svg {
    width: 100%;
    height: auto;
}


.ecosystem-network line {
    stroke: #2563eb;
    stroke-width: 3;
    stroke-dasharray: 10;
    animation: wireMove 12s linear infinite;
}


.main-node {
    fill: #2563eb;
    filter: drop-shadow(0 0 20px rgba(37, 99, 235, .4));
}

.main-title,
.main-sub,
.child-title {
    text-anchor: middle;
}

.main-title {
    fill: white;
    font-size: 28px;
    font-weight: 700;
}

.main-sub {
    fill: rgba(255, 255, 255, .8);
    font-size: 14px;
}


.child-node {
    fill: white;
    stroke: #2563eb;
    stroke-width: 4;
    transition: .4s;
}

.child-title {
    fill: #0f172a;
    font-size: 15px;
    font-weight: 600;

    user-select: none;
    pointer-events: none;
}


.child-node:hover {
    fill: #2563eb;
    transform: scale(1.08);
    transform-origin: center;
}


@keyframes wireMove {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.main-node {
    animation: pulseCenter 4s infinite;
}

@keyframes pulseCenter {

    0%,
    100% {
        transform: scale(0.99);
    }

    50% {
        transform: scale(1.01);
    }
}

.child-node {
    animation: floatNode 5s ease-in-out infinite;
}

@keyframes floatNode {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}













/*==============================================
///////// Frequently Asked Questions   /////////
===============================================*/



.faqs-hero {
    background-attachment: fixed;
    position: relative;
}


.faq-section {
    /* max-width: 1500px; */
    margin: auto;
    /* padding: 60px 20px; */
}

.faq-title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}

.faq-subtitle {
    text-align: center;
    margin-bottom: 40px;
    color: #777;
    color: var(--a-color);
}

.faq-item {
    border-bottom: 1px solid #ddd;
}

.faq-question {
    width: 100%;
    padding: 18px;
    font-size: 18px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);

}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.4s;
    padding: 0 18px;
    color: #555;
    color: var(--text);
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding-bottom: 15px;
}