/* =============================================
       ABOUT PAGE – Specific CSS
       ============================================= */


/* ── Section base ── */


.about-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    padding: 100px 0 80px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

/* pill badge shared */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.35);
    color: var(--accent-green);
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
}

body.light-mode .pill-badge {
    background: rgba(2,163,81,0.08);
    border-color: rgba(2,163,81,0.35);
    color: #02a351;
}

/* section titles */
.section-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 16px;
    transition: color var(--transition);
}

    .section-title .green {
        color: var(--accent-green);
    }

.section-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 50px;
    line-height: 1.7;
    transition: color var(--transition);
}

/* ── HERO SECTION ── */
#about-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: #010413;
    padding: 120px 0 80px;
    position: relative;
    /* .hero-glow-1 is parked at right:-100px; without this the page scrolls
       sideways by 100px at every width above 480px. */
    overflow: hidden;
    background-image: url('../images/about/about-sec-01-main.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}
body.light-mode #about-hero {
    background: linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.95) 35%, rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 100% ), url('../images/about/about-sec-01-main.png');
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: left top, right center;
    background-size: 100% 100%, contain;
}
#about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(74,222,128,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.hero-text-col,
.hero-img-col {
    position: relative;
    z-index: 2;
}


@media(max-width:991px) {
    #about-hero {
        background-position: center bottom;
        background-size: 95% auto;
        padding-bottom: 430px;
    }
}

@media(max-width:576px) {
    #about-hero {
        background-size: 120% auto;
        padding-bottom: 360px;
    }
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.hero-glow-1 {
    width: 500px;
    height: 500px;
    background: rgba(74,222,128,0.06);
    top: -100px;
    right: -100px;
}

.hero-glow-2 {
    width: 300px;
    height: 300px;
    background: rgba(74,174,255,0.05);
    bottom: 0;
    left: -80px;
}

.hero-text-col {
    position: relative;
    z-index: 2;
}

.hero-main-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 24px;
    transition: color var(--transition);
}

    .hero-main-title .green {
        color: var(--accent-green);
    }

.hero-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.75;
    max-width: 560px;
    margin-bottom: 40px;
    transition: color var(--transition);
}

/* stat cards in hero */
.hero-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 440px;
}

.hero-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: background var(--transition), border-color var(--transition), transform 0.3s;
    backdrop-filter: blur(12px);
}

    .hero-stat-card:hover {
        border-color: rgba(74,222,128,0.4);
        background: var(--bg-card-hover);
        transform: translateY(-4px);
    }

.hero-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-green);
}

.hero-stat-num {
    font-family: 'Sora', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-green);
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
    transition: color var(--transition);
}

/* right image side */
.hero-img-col {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ── OUR STORY SECTION ── */
#about-story {
    background: var(--bg-secondary);
    /*padding: 110px 0;*/
    position: relative;
    padding: 120px 0 80px;
    overflow: hidden;
    background-image: url('../images/about/about-sec-02-main.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

    #about-story::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 80% 50%, rgba(74,222,128,0.04) 0%, transparent 60%);
        pointer-events: none;
    }

.story-img-frame {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(74,222,128,0.2);
    box-shadow: 0 0 40px rgba(74,222,128,0.08), 0 20px 60px rgba(0,0,0,0.4);
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition);
}

body.light-mode .story-img-frame {
    box-shadow: 0 0 30px rgba(2,163,81,0.1), 0 20px 60px rgba(0,0,0,0.1);
}

.story-img-frame img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

.story-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(74,222,128,0.05) 0%, transparent 60%);
    border-radius: 20px;
    pointer-events: none;
}

.story-text-col {
    padding-left: 20px;
}

.story-body {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 20px;
    transition: color var(--transition);
}

.story-highlight {
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-green);
    margin: 24px 0;
    transition: color var(--transition);
}

.story-quote {
    background: var(--bg-card);
    border: 1px solid rgba(74,222,128,0.25);
    border-radius: 14px;
    padding: 24px 28px;
    margin-top: 32px;
    position: relative;
    backdrop-filter: blur(10px);
    transition: background var(--transition), border-color var(--transition);
}

body.light-mode .story-quote {
    background: rgba(2,163,81,0.04);
    border-color: rgba(2,163,81,0.2);
}

.story-quote-mark {
    font-size: 3rem;
    line-height: 1;
    color: var(--accent-green);
    font-family: Georgia, serif;
    opacity: .7;
    position: absolute;
    top: 12px;
    left: 22px;
}

.story-quote-text {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    padding-left: 32px;
    transition: color var(--transition);
}

/* ── OUR VALUES SECTION ── */
#about-values {
    background: var(--bg-primary);
    padding: 110px 160px;
    position: relative;
}

    #about-values::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(ellipse at 20% 20%, rgba(74,174,255,0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(74,222,128,0.04) 0%, transparent 50%);
        pointer-events: none;
    }

/* hex decorations */
.hex-deco {
    position: absolute;
    opacity: .04;
    pointer-events: none;
    transition: opacity var(--transition);
}

body.light-mode .hex-deco {
    opacity: .06;
}

.hex-deco-1 {
    top: -30px;
    left: -60px;
    font-size: 280px;
    color: var(--accent-green);
}

.hex-deco-2 {
    bottom: -30px;
    right: -60px;
    font-size: 280px;
    color: var(--accent-green);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

.value-card {
    min-height: 430px; /* increase card height */
    padding: 55px 34px 36px;
    border-radius: 24px;
    display: grid;
    grid-template-rows: 180px 42px 18px 1fr;
    align-items: start;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; /* image fits full card */
    overflow: hidden;
}


    .value-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( to top, rgba(3,10,20,.92) 15%, rgba(3,10,20,.45) 50%, transparent 100% );
        z-index: 1;
        pointer-events: none;
    }

    .value-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        /*background: linear-gradient(90deg, transparent, rgba(74,222,128,0.6), transparent);*/
        border-radius: 2px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .value-card:hover {
        /*border-color: rgba(74,222,128,0.45);
        background: var(--bg-card-hover);
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 30px rgba(74,222,128,0.08);*/

        transform:translateY(-8px);
        background-repeat:no-repeat;
        background-position:center top;
        background-size:108% auto;   /* zoom image, not disappear */
    }

body.light-mode .value-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 20px rgba(2,163,81,0.08);
    transform: translateY(-8px) scale(1.02);
}

.value-card:hover::after {
    opacity: 1;
}

.value-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background var(--transition), border-color var(--transition), transform 0.3s;
    color: var(--accent-green);
}

.value-card:hover .value-icon-wrap {
    background: rgba(74,222,128,0.14);
    transform: scale(1.1);
}

.value-name {
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    /*margin-bottom: 10px;*/
    /*transition: color var(--transition);*/
    padding-top: 50px;
    margin: 0;
    align-self: center;
}
.value-divider {
    width: 42px;
    height: 2px;
    background: var(--accent-green);
    border-radius: 2px;
    margin: 0 auto;
}

.value-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    transition: color var(--transition);*/
    margin: 0;
}
body.light-mode .value-name {
    color: #ffffff;
}
body.light-mode .value-desc {
    color: rgba(255,255,255,0.65);
}

.value-card {
    position: relative;
    min-height: 350px;
    padding: 30px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* bigger image */
    background-color: #08111d;
    transition: transform .35s ease, background-size .35s ease;
}


.value-name,
.value-divider,
.value-desc {
    position: relative;
    top: 20px; /* move text downward */
    z-index: 2;
}

/* Individual card images */
.value-card-1 {
    background-image: url('../images/about/about-sec-03-card-01.png');
}

.value-card-2 {
    background-image: url('../images/about/about-sec-03-card-02.png');
}

.value-card-3 {
    background-image: url('../images/about/about-sec-03-card-03.png');
}

.value-card-4 {
    background-image: url('../images/about/about-sec-03-card-04.png');
}

@media(max-width:992px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:576px) {
    .values-grid {
        grid-template-columns: 1fr;
    }

    .value-card {
        min-height: 400px;
    }
}

/* ── OUR IMPACT SECTION ── */
#about-impact {
    background: var(--bg-secondary);
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}

/* globe arc behind the section */
.impact-arc {
    position: absolute;
    width: 900px;
    height: 450px;
    border-radius: 50% 50% 0 0;
    border: 1px solid rgba(74,174,255,0.08);
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 -20px 80px rgba(74,174,255,0.05);
}

.impact-arc-inner {
    position: absolute;
    width: 600px;
    height: 300px;
    border-radius: 50% 50% 0 0;
    border: 1px solid rgba(74,222,128,0.08);
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }
}

.impact-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 18px;
    padding: 32px 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: background var(--transition), border-color var(--transition), transform 0.35s, box-shadow 0.35s;
    backdrop-filter: blur(10px);
}

    .impact-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 55%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(74,222,128,0.7), transparent);
        border-radius: 2px;
    }

    .impact-card:hover {
        border-color: rgba(74,174,255,0.35);
        background: var(--bg-card-hover);
        transform: translateY(-6px);
        box-shadow: 0 18px 48px rgba(0,0,0,0.3), 0 0 24px rgba(74,174,255,0.06);
    }

body.light-mode .impact-card:hover {
    box-shadow: 0 18px 48px rgba(0,0,0,0.1);
}

.impact-icon-wrap {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--accent-green);
    transition: background var(--transition), transform 0.3s;
}

    .impact-icon-wrap svg {
        width: 62px;
        height: 62px;
        stroke: currentColor;
        stroke-width:2px;
        filter: drop-shadow(0 0 8px rgba(74,222,128,.6));
    }

        .impact-icon-wrap svg path,
        .impact-icon-wrap svg circle,
        .impact-icon-wrap svg line,
        .impact-icon-wrap svg ellipse {
            stroke-width: 2px; /* thinner lines */
            stroke-linecap: round;
            stroke-linejoin: round;
        }

.impact-card:hover .impact-icon-wrap {
    transform: scale(1.08);
    background: rgba(74,222,128,0.14);
}

.impact-number {
    font-family: 'Sora', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent-green);
    line-height: 1;
    margin-bottom: 6px;
    transition: color var(--transition);
}

.impact-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color var(--transition);
}

.impact-divider {
    width: 40px;
    height: 2px;
    background: var(--accent-green);
    border-radius: 2px;
    margin: 14px auto 0;
}

/* ── LEADERSHIP SECTION ── */
#about-leadership {
    background: var(--bg-primary);
    padding: 110px 0;
    position: relative;
}

    #about-leadership::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(74,222,128,0.04) 0%, transparent 55%);
        pointer-events: none;
    }

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.team-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-card);
    position: relative;
    transition: border-color var(--transition), transform 0.35s, box-shadow 0.35s;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

    .team-card:hover {
        border-color: rgba(74,222,128,0.5);
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 30px rgba(74,222,128,0.1);
    }

body.light-mode .team-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.team-img-wrap {
    position: relative;
    overflow: hidden;
    height: 400px;
}

    .team-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 0.5s ease;
        display: block;
    }

.team-card:hover .team-img-wrap img {
    transform: scale(1.06);
}

.team-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5,15,30,0.85) 100%);
    pointer-events: none;
}

body.light-mode .team-img-overlay {
    background: linear-gradient(180deg, transparent 50%, rgba(255,255,255,0.7) 100%);
}

.team-info {
    padding: 18px 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.team-name {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color var(--transition);
    line-height: 1.2;
}

.team-role {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
    transition: color var(--transition);
}

.team-li-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(74,222,128,0.1);
    border: 1px solid rgba(74,222,128,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--transition), transform 0.2s;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
}

    .team-li-btn:hover {
        background: rgba(74,222,128,0.2);
        transform: scale(1.12);
    }

/* placeholder photos with initials */
.team-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(74,174,255,0.1));
    color: var(--accent-green);
    letter-spacing: .05em;
}

/* ── CTA SECTION ── */


#about-cta {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 120px 0 90px;
    background-color: #020713;
    background-image: url('../images/about/about-sec-06-main.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}

body.light-mode #about-cta {
    background-color: #f7fbff;
    background-image: linear-gradient(90deg, rgba(247,251,255,.96) 0%, rgba(247,251,255,.82) 42%, rgba(247,251,255,.18) 70%), url('../images/about/about-sec-06-main.png');
}

.about-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #020713 0%, rgba(2,7,19,.94) 34%, rgba(2,7,19,.45) 62%, rgba(2,7,19,.08) 100%), radial-gradient(circle at 76% 42%, rgba(34, 255, 151, .12), transparent 36%);
    pointer-events: none;
}

body.light-mode .about-cta-overlay {
    background: linear-gradient(90deg, rgba(247,251,255,.98) 0%, rgba(247,251,255,.86) 38%, rgba(247,251,255,.26) 74%), radial-gradient(circle at 76% 42%, rgba(34, 197, 94, .14), transparent 36%);
}

.about-cta-container {
    position: relative;
    z-index: 2;
    min-height: 720px;
    display: flex;
    align-items: center;
}

.cta-content {
    width: 46%;
    max-width: 560px;
}

.cta-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(3rem, 5.7vw, 4.7rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 26px;
}

    .cta-title span {
        color: #22f07e;
    }

body.light-mode .cta-title {
    color: #071527;
}

.cta-desc {
    max-width: 520px;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    line-height: 1.65;
    color: rgba(255,255,255,.78);
    margin-bottom: 38px;
}

body.light-mode .cta-desc {
    color: rgba(7,21,39,.72);
}

.cta-btns {
    display: flex;
    flex-direction: column;    
    max-width: 420px;
}

.btn-cta-primary,
.btn-cta-outline {
    min-height: 78px;
    padding: 0 34px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: 'Sora', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.btn-cta-primary {
    background: linear-gradient(135deg, #22f07e, #19db72);
    color: #02110a;
    box-shadow: 0 0 32px rgba(34,240,126,.38);
}

.btn-cta-outline {
    width: 78%;
    color: #fff;
    border: 1px solid rgba(0,221,255,.75);
    background: rgba(2,11,26,.55);
    backdrop-filter: blur(10px);
}

body.light-mode .btn-cta-outline {
    color: #071527;
    background: rgba(255,255,255,.72);
}

.btn-cta-primary:hover,
.btn-cta-outline:hover {
    transform: translateY(-4px);
}

.btn-cta-primary .fa-arrow-right,
.btn-cta-outline .fa-arrow-right {
    margin-left: auto;
}

.cta-trust {
    margin-top: 58px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    color: #fff;
}

    .cta-trust > i {
        font-size: 44px;
        color: #22f07e;
    }


    .cta-trust span {
        color: #22f07e;
        font-weight: 800;
        display: inline; /* keep on same line */
        white-space: nowrap; /* prevent line break */
    }
        .cta-trust span::before,
        .cta-trust span::after {
            content: none !important;
        }
.cta-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#about-cta .cta-trust strong {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

    #about-cta .cta-trust strong span {
        color: #22f07e;
        font-weight: 800;
        white-space: nowrap;
    }

    .cta-trust small {
        display: block;
        margin-top: 12px;
        color: rgba(255,255,255,.65);
    }

body.light-mode .cta-trust,
body.light-mode .cta-trust small {
    color: #071527;
}

.cta-image-area {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cta-float-card {
    position: absolute;
    width: 200px;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(3,18,34,.78);
    border: 1px solid rgba(0,221,255,.55);
    box-shadow: 0 0 28px rgba(0,221,255,.16);
    backdrop-filter: blur(14px);
    color: #fff;
    animation: ctaFloat 4s ease-in-out infinite;
}

    .cta-float-card strong {
        display: block;
        font-family: 'Sora', sans-serif;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .cta-float-card p {
        margin: 18px 0 6px;
        color: rgba(255,255,255,.78);
        font-size: .88rem;
    }

    .cta-float-card span {
        color: #22f07e;
        font-size: .78rem;
    }

.cta-fc-threat {
    top: 22%;
    left: 56%;
}

.cta-fc-data {
    top: 45%;
    left: 56%;
    animation-delay: .6s;
}

.cta-fc-health {
    top: 31%;
    right: 0%;
    animation-delay: .3s;
}

.cta-fc-risk {
    top: 53%;
    right: 3%;
    width: 165px;
    animation-delay: .9s;
}

.risk-circle {
    width: 72px;
    height: 72px;
    margin: 14px auto 10px;
    border-radius: 50%;
    border: 12px solid #22f07e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

@keyframes ctaFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 1199px) {
    #about-cta {
        background-size: auto 92%;
        background-position: 58vw center;
    }

    .cta-float-card {
        transform: scale(.9);
    }

    .cta-fc-health,
    .cta-fc-risk {
        right: 1%;
    }
}

@media (max-width: 991px) {
    #about-cta {
        min-height: auto;
        padding: 90px 0 520px;
        background-size: 760px auto;
        background-position: center bottom;
    }

    .about-cta-overlay {
        background: linear-gradient(180deg, #020713 0%, rgba(2,7,19,.96) 45%, rgba(2,7,19,.25) 100%);
    }

    .about-cta-container {
        min-height: auto;
    }

    .cta-content {
        width: 100%;
        max-width: 680px;
    }

    .cta-fc-threat {
        top: auto;
        bottom: 330px;
        left: 8%;
    }

    .cta-fc-data {
        top: auto;
        bottom: 190px;
        left: 8%;
    }

    .cta-fc-health {
        top: auto;
        bottom: 300px;
        right: 8%;
    }

    .cta-fc-risk {
        top: auto;
        bottom: 155px;
        right: 8%;
    }
}

@media (max-width: 576px) {
    #about-cta {
        padding: 70px 0 430px;
        background-size: 620px auto;
        background-position: 58% bottom;
    }

    .cta-title {
        font-size: 2.75rem;
    }

    .btn-cta-primary,
    .btn-cta-outline {
        width: 100%;
        min-height: 64px;
        padding: 0 20px;
        font-size: .95rem;
    }

    .cta-float-card {
        width: 145px;
        padding: 12px;
    }

    .cta-fc-threat {
        bottom: 260px;
        left: 4%;
    }

    .cta-fc-data {
        bottom: 135px;
        left: 4%;
    }

    .cta-fc-health {
        bottom: 250px;
        right: 4%;
    }

    .cta-fc-risk {
        bottom: 115px;
        right: 4%;
    }
}
/*#about-cta {
    background: var(--bg-primary);
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    background-image: url('../images/about/about-sec-06-main.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    width:100%;
}

    #about-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 20% 50%, rgba(74,174,255,0.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 50%, rgba(74,222,128,0.06) 0%, transparent 55%);
        pointer-events: none;
    }*/

/* LEFT col */
/*.cta-left {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 18px;
    line-height: 1.1;
    transition: color var(--transition);
}

    .cta-title .green {
        color: var(--accent-green);
    }

.cta-desc {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 480px;
    margin-bottom: 36px;
    line-height: 1.75;
    transition: color var(--transition);
}

.cta-btns {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 360px;
}

.btn-cta-primary {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--accent-green);
    color: #071a0e;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.97rem;
    padding: 16px 26px;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

    .btn-cta-primary:hover {
        background: #3dcc72;
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(74,222,128,0.35);
        color: #071a0e;
    }

    .btn-cta-primary .btn-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(7,26,14,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.btn-cta-outline {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: var(--text-primary);
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.97rem;
    padding: 16px 26px;
    border-radius: 12px;
    border: 1px solid var(--border-card);
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s, background 0.2s, color 0.2s;
    cursor: pointer;
}

    .btn-cta-outline:hover {
        border-color: rgba(74,222,128,0.45);
        background: rgba(74,222,128,0.05);
        transform: translateY(-2px);
        color: var(--text-primary);
    }

    .btn-cta-outline .btn-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background var(--transition), border-color var(--transition);
    }

.cta-trust {
    margin-top: 36px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.84rem;
    color: var(--text-muted);
    transition: color var(--transition);
    max-width: 380px;
}

.cta-trust-icon {
    color: var(--accent-green);
    flex-shrink: 0;
    margin-top: 1px;
}

.cta-trust-text strong {
    color: var(--accent-green);
}

.cta-trust-sub {
    font-size: 0.78rem;
    color: var(--text-dim);
    display: block;
    margin-top: 2px;
    transition: color var(--transition);
}*/

/* RIGHT col – person + shield scene */
/*.cta-right {
    position: relative;
    z-index: 2;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-scene {
    position: relative;
    width: 100%;
    max-width: 580px;
}*/

/* big glowing shield behind */
/*.cta-shield-bg {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 320px;
    height: 360px;
    pointer-events: none;
    z-index: 1;
    animation: ctaShieldGlow 4s ease-in-out infinite;
}

@keyframes ctaShieldGlow {
    0%,100% {
        filter: drop-shadow(0 0 30px rgba(74,222,128,0.45)) drop-shadow(0 0 60px rgba(74,174,255,0.2));
    }

    50% {
        filter: drop-shadow(0 0 50px rgba(74,222,128,0.65)) drop-shadow(0 0 90px rgba(74,174,255,0.35));
    }
}*/

/* person silhouette / illustration area */
/*.cta-person-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}*/

/* Floating status cards */
/*.cta-float-card {
    position: absolute;
    background: rgba(5,18,35,0.88);
    border: 1px solid rgba(74,222,128,0.28);
    border-radius: 12px;
    padding: 12px 16px;
    backdrop-filter: blur(14px);
    z-index: 10;
    min-width: 140px;
    transition: background var(--transition), border-color var(--transition);
}

body.light-mode .cta-float-card {
    background: rgba(255,255,255,0.92);
    border-color: rgba(2,163,81,0.28);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.cta-float-card-label {
    font-family: 'Sora', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
}

body.light-mode .cta-float-card-label {
    color: rgba(10,22,40,0.5);
}

.cta-float-card-label .fc-icon {
    color: var(--accent-green);
}

.cta-float-card-val {
    font-family: 'Sora', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition);
}

.cta-float-card-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--accent-green);
    margin-top: 3px;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
}

.fc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 6px var(--accent-green);
    flex-shrink: 0;
}*/

/* risk card has a donut */
/*.cta-float-risk {
    min-width: 130px;
}*/

/* card positions */
/*.cta-fc-threat {
    top: 8%;
    left: 2%;
    animation: fcFloat 4s ease-in-out infinite;
}

.cta-fc-data {
    top: 48%;
    left: 0%;
    animation: fcFloat 4s ease-in-out .8s infinite;
}

.cta-fc-health {
    top: 10%;
    right: 0%;
    animation: fcFloat 4s ease-in-out .4s infinite;
}

.cta-fc-risk {
    top: 52%;
    right: 0%;
    animation: fcFloat 4s ease-in-out 1.2s infinite;
}

@keyframes fcFloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}*/

/* responsive */
/*@media (max-width: 991px) {
    .cta-btns {
        max-width: 100%;
    }

    .cta-trust {
        max-width: 100%;
    }

    .cta-right {
        margin-top: 50px;
    }

    .cta-shield-bg {
        right: 50%;
        transform: translate(50%,-50%);
    }

    .cta-fc-threat {
        left: 0;
    }

    .cta-fc-data {
        left: 0;
    }

    .cta-fc-health {
        right: 0;
    }

    .cta-fc-risk {
        right: 0;
    }
}

@media (max-width: 576px) {
    .cta-float-card {
        padding: 8px 12px;
        min-width: 110px;
    }

    .cta-float-card-val {
        font-size: 0.75rem;
    }
}*/

/* ── Shared animated bg particles ── */
/*.particles-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(74,222,128,0.25);
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: .7;
    }

    100% {
        transform: translateY(-120px) scale(0.3);
        opacity: 0;
    }
}*/

/* ── Responsive tweaks ── */
@media (max-width: 768px) {
    .about-section {
        padding: 70px 0;
    }

    .story-text-col {
        /* back to the grid's own gutter — 0 put the text on the screen edge */
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-top: 30px;
    }

    .shield-wrapper {
        width: 280px;
        height: 320px;
    }

    .cta-box {
        padding: 50px 24px;
    }

    .hero-stat-grid {
        max-width: 100%;
    }
}

/* Navbar active link underline */
.nav-link.active-page::after {
    width: 100%;
}

/* Counter number animation */
.count-up {
    display: inline-block;
    transition: color var(--transition);
}

/* ══════════════════════════════════════════════════
   MOBILE CORRECTIONS
   ══════════════════════════════════════════════════ */
/* #about-values carries a desktop-sized 160px inline padding, which left
   70px of usable width on a phone and squeezed the value cards to 70px. */
@media (max-width: 991px) {
    #about-values {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 576px) {
    /* Below 576px .container is full width, so .container supplies the one
       gutter for every section and #about-values drops its own. */
    #about-values {
        padding-left: 0;
        padding-right: 0;
    }

    /* The bundled bootstrap build ships .container with --bs-gutter-x:0rem
       while .row keeps negative inline margins (-12px, or -24px with .g-5).
       Above 576px .container is max-width constrained so that lands in the
       surrounding whitespace; below it the container is full width and the
       row hangs off both edges. 24px of padding absorbs the widest case. */
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Two stat cards need ~492px together; one column each below this. */
    .hero-stat-grid {
        grid-template-columns: 1fr;
    }

    /* #about-hero is overflow:visible, so this 500px glow hanging 100px
       past the right edge was widening the whole page. .hex-deco-2 is
       clipped by its own section but bleeds for no benefit at 4% opacity. */
    .hero-glow-1,
    .hex-deco-2 {
        right: 0;
    }
}


/* ── "How it all began" — stacked layout ──
   #about-story paints its artwork as a section background behind an empty
   left column. That works while the columns sit side by side, but below the
   lg breakpoint they stack and the copy landed straight on top of the photo.
   Below 992px the artwork becomes its own block above the text instead. */
@media (max-width: 991.98px) {
    #about-story {
        background-image: none;
        min-height: 0;
        padding: 70px 0 64px;
    }

    /* g-5 gives the row -24px margins while .container only pads 12px, so the
       columns hung over both edges. */
    #about-story > .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    #about-story .row {
        --bs-gutter-x: 1.5rem;
    }

    /* The PNG carries its own framed mockup, so no border or shadow here —
       that would read as a frame inside a frame. */
    #about-story .story-art {
        aspect-ratio: 3 / 2;
        background: url('../images/about/about-sec-02-main.png') center / contain no-repeat;
    }
}