/* =========================================================
   PMAI LAB — PREMIUM ABOUT PAGE
   Version 2.0
========================================================= */

/* ABOUT PAGE RESEARCH-LAB REFINEMENT */
.about-page { background: #fff; color: var(--home-ink, #10213d); }
.about-page section { scroll-margin-top: var(--pmai-navbar-height, 79px); }
.about-page .about-hero { min-height: 0; padding: 78px 24px 82px; justify-content: flex-start; text-align: left; background: linear-gradient(120deg, #f7fbff 0%, #fff 54%, #e9f7f6 100%); }
.about-page .about-hero::before { content: "∑     ∫     ∂     ∇     λ     π"; position: absolute; inset: 16% 4% auto; color: rgba(33,103,232,.07); font: 4rem Georgia, serif; letter-spacing: 1.4rem; white-space: pre; pointer-events: none; }
.about-page .about-hero-content { width: min(100%, 1200px); display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto auto auto auto; gap: 0 70px; align-items: center; text-align: left; }
.about-page .about-hero-badge { grid-column: 1; grid-row: 1; }.about-page .about-hero h1 { grid-column: 1; grid-row: 2; }.about-page .about-hero-content > p:not(.section-label) { grid-column: 1; grid-row: 3; }.about-page .about-hero-actions { grid-column: 1; grid-row: 4; }.about-page .about-hero-visual { grid-column: 2; grid-row: 1 / span 4; }
.about-page .about-hero-content::after { content: "ABOUT / PMAI LAB"; position: absolute; top: -34px; right: 0; color: #8998aa; font-size: .65rem; font-weight: 800; letter-spacing: .15em; }
.about-page .about-hero-badge { justify-content: flex-start; margin-bottom: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--home-blue, #2167e8); font-size: .72rem; letter-spacing: .14em; }
.about-page .about-hero-badge::before { content: ""; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--home-cyan, #18b9c7); box-shadow: 0 0 0 5px rgba(24,185,199,.12); }
.about-page .about-hero h1 { max-width: 670px; margin: 0 0 24px; color: var(--home-ink, #10213d); font: 400 clamp(3.2rem, 6vw, 5.8rem)/.95 Georgia, "Times New Roman", serif; letter-spacing: 0; }
.about-page .about-hero h1 span { color: var(--home-violet, #7957e8); }
.about-page .about-hero-content > p:not(.section-label) { max-width: 570px; margin: 0 0 30px; color: var(--home-muted, #65738a); font-size: 1.06rem; line-height: 1.8; }
.about-page .about-hero-actions { justify-content: flex-start; gap: 14px; }
.about-page .about-hero-actions .btn { border-radius: 5px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.about-page .about-hero-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(33,103,232,.16); }
.about-page .about-hero-actions .btn::after { content: "↗"; margin-left: 9px; transition: transform .25s ease; }.about-page .about-hero-actions .btn:hover::after { transform: translate(3px,-2px); }
.about-hero-content::before { content: ""; position: absolute; right: 0; width: min(42vw, 470px); height: min(42vw, 470px); border: 1px solid rgba(33,103,232,.2); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 42px, rgba(33,103,232,.08) 43px 44px); opacity: .8; pointer-events: none; }
.about-page .about-hero-content > * { position: relative; z-index: 1; }
.about-page .about-hero-visual::after { content: "MATHEMATICS  →  COMPUTATION  →  INTELLIGENCE"; position: absolute; right: 6%; bottom: -28px; color: rgba(16,33,61,.5); font-size: .58rem; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.about-page .about-hero-visual { min-height: 310px; border: 1px solid rgba(33,103,232,.2); background: rgba(255,255,255,.48); box-shadow: 18px 20px 0 rgba(33,103,232,.06); backdrop-filter: blur(8px); }
.about-page .about-hero-visual::before { content: "∇θ L(θ)     AᵀA     f(x)"; position: absolute; top: 26px; right: 28px; color: rgba(33,103,232,.55); font: .85rem Georgia, serif; letter-spacing: .1em; }
.about-page .about-hero-visual { display: grid; place-items: center; padding: 38px; animation: aboutVisualFloat 7s ease-in-out infinite; }
.about-page .about-hero-visual .hero-flow { display: grid; gap: 0; text-align: center; }
.about-page .about-hero-visual .hero-flow span { display: block; color: var(--home-muted, #65738a); font-size: .63rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.about-page .about-hero-visual .hero-flow strong { display: block; color: var(--home-ink, #10213d); font: 1.35rem Georgia, serif; }.about-page .about-hero-visual .hero-flow b { display: block; margin: 7px 0; color: var(--home-blue, #2167e8); font-size: 1.15rem; }
@keyframes aboutVisualFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.about-page .about-introduction, .about-page .mission-vision, .about-page .objectives-section, .about-page .about-academic-areas, .about-page .collaboration-section { padding: 92px 24px; }
.about-page .about-introduction { background: #fff; }.about-page .about-container, .about-page .mission-vision-grid, .about-page .objectives-grid, .about-page .about-area-grid, .about-page .philosophy-container, .about-page .collaboration-grid { max-width: 1200px; }
.about-page .about-text h2, .about-page .section-heading h2, .about-page .philosophy-content h2 { color: var(--home-ink, #10213d); font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
.about-page .about-text h2 { margin: 10px 0 25px; font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.02; }.about-page .about-text { max-width: 620px; }.about-page .about-text p { color: var(--home-muted, #65738a); }
.about-page .about-highlight { min-height: 340px; border-radius: 0; border: 1px solid rgba(151,225,223,.25); background: linear-gradient(145deg, #09172d, #173d5d); box-shadow: 18px 20px 0 rgba(33,103,232,.08); }.about-page .highlight-symbol { border-radius: 8px; background: rgba(255,255,255,.06); box-shadow: none; }.about-page .highlight-tag { border-radius: 3px; }.about-page .about-highlight h3 { font-family: Georgia, serif; }
.about-page .mission-vision { background: #f3f7fb; }.about-page .mission-card, .about-page .vision-card { border-radius: 0; box-shadow: none; }.about-page .mission-card:hover, .about-page .vision-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(16,33,61,.08); }
.about-page .objectives-section { background: #fff; }.about-page .objective-card, .about-page .about-area-card, .about-page .collaboration-grid article { border-radius: 0; box-shadow: none; }.about-page .objective-card:hover, .about-page .about-area-card:hover, .about-page .collaboration-grid article:hover { box-shadow: 0 16px 32px rgba(16,33,61,.08); }
.about-page .about-academic-areas { background: linear-gradient(180deg, #f3f7fb, #fff); }.about-page .academic-philosophy { padding: 105px 24px; color: #fff; background: var(--home-dark, #09172d); }.about-page .academic-philosophy h2 { color: #fff; font-family: Georgia, serif; letter-spacing: 0; }.about-page .philosophy-content p:not(.section-label) { color: #adbacb; }.about-page .path-item { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 0; }.about-page .path-arrow { color: #5ee1d5; }
.about-page .collaboration-section { background: #fff; }.about-page .collaboration-grid article { border-top: 2px solid var(--home-blue, #2167e8); }.about-page .about-cta { padding: 86px 24px; background: linear-gradient(110deg, #d9fbf3, #e8e2ff); }.about-page .about-cta::before, .about-page .about-cta::after { display: none; }.about-page .about-cta .section-heading h2 { color: var(--home-ink, #10213d); font-family: Georgia, serif; }.about-page .about-cta .btn { border-radius: 5px; }.about-page .about-cta .btn:hover { transform: translateY(-2px); }
.about-page .section-label { color: var(--home-blue, #2167e8); letter-spacing: .14em; }.about-page #site-footer { padding: 34px 24px; background: var(--home-dark, #09172d); color: #a5b6cb; }.about-page [class*="section"]:not(.about-hero) { scroll-margin-top: var(--pmai-navbar-height, 79px); }
.about-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.about-reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .about-page .about-hero-content { grid-template-columns: 1fr; grid-template-rows: none; gap: 42px; }.about-page .about-hero-content > * { grid-column: 1; grid-row: auto; }.about-page .about-hero-content::after { top: -22px; }.about-page .about-hero-visual { max-width: 560px; width: 100%; }.about-page .about-container { grid-template-columns: 1fr; gap: 45px; }.about-page .about-highlight { max-width: 620px; }.about-page .objectives-grid { grid-template-columns: repeat(2, 1fr); }.about-page .about-area-grid { grid-template-columns: repeat(2, 1fr); }.about-page .mission-vision-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .about-page .about-hero { padding: 54px 16px 58px; }.about-page .about-hero::before { font-size: 2rem; letter-spacing: .5rem; }.about-page .about-hero h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }.about-page .about-hero-visual { min-height: 300px; padding: 25px; }.about-page .about-hero-visual::after { right: auto; left: 12px; font-size: .46rem; letter-spacing: .07em; }.about-page .about-introduction, .about-page .mission-vision, .about-page .objectives-section, .about-page .about-academic-areas, .about-page .collaboration-section { padding: 70px 16px; }.about-page .objectives-grid, .about-page .about-area-grid { grid-template-columns: 1fr; }.about-page .about-mini-stats { grid-template-columns: 1fr; }.about-page .mission-card, .about-page .vision-card { grid-template-columns: 45px 1fr; padding: 24px; }.about-page .academic-philosophy, .about-page .about-cta { padding: 70px 16px; }.about-page .philosophy-container { display: block; }.about-page .learning-path { margin-top: 34px; }.about-page .about-cta .hero-buttons { align-items: stretch; }.about-page .about-cta .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .about-reveal { opacity: 1; transform: none; }.about-page .about-hero-visual { animation: none; } }


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

.about-hero {

    position: relative;

    min-height: 540px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 100px 20px;

    text-align: center;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37, 99, 235, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(124, 58, 237, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #ffffff 50%,
            #eff6ff 100%
        );

}


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

.about-hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

}


.about-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(5px);

    opacity: 0.7;

}


.glow-one {

    width: 260px;

    height: 260px;

    top: -100px;

    left: -80px;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.13),
            transparent 70%
        );

}


.glow-two {

    width: 320px;

    height: 320px;

    right: -120px;

    bottom: -140px;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.14),
            transparent 70%
        );

}


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

.about-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

}


.about-hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    padding: 8px 16px;

    border: 1px solid rgba(
        37,
        99,
        235,
        0.15
    );

    border-radius: 50px;

    background:
        rgba(
            219,
            234,
            254,
            0.75
        );

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.about-hero h1 {

    max-width: 900px;

    margin: 0 auto 28px;

    color: var(--primary);

    font-size:
        clamp(
            2.7rem,
            6vw,
            5rem
        );

    line-height: 1.04;

    letter-spacing: -2.5px;

}


.about-hero h1 span {

    color: var(--accent);

}


.about-hero-content > p:not(.section-label) {

    max-width: 760px;

    margin: 0 auto 35px;

    color: var(--text-light);

    font-size: 1.12rem;

    line-height: 1.8;

}


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

.about-hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

}


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

.about-introduction {

    padding:
        110px
        20px;

    background: var(--background);

}


.about-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 80px;

    align-items: center;

}


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

.about-text {

    max-width: 680px;

}


.about-text h2 {

    margin:
        10px
        0
        25px;

    color: var(--primary);

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

    line-height: 1.15;

    letter-spacing: -1px;

}


.about-text p {

    margin-bottom: 18px;

    color: var(--text-light);

    font-size: 1rem;

    line-height: 1.8;

}


/* =========================================================
   MINI STATISTICS
========================================================= */

.about-mini-stats {

    display: grid;

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

    gap: 15px;

    margin-top: 35px;

}


.about-mini-stats > div {

    padding:
        18px
        15px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

}


.about-mini-stats strong {

    display: block;

    margin-bottom: 4px;

    color: var(--accent);

    font-size: 1.65rem;

    font-weight: 800;

}


.about-mini-stats span {

    display: block;

    color: var(--text-light);

    font-size: 0.78rem;

    font-weight: 600;

}


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

.about-highlight {

    position: relative;

    min-height: 360px;

    padding: 42px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #0b1f3a,
            #132f55
        );

    color: white;

    box-shadow:
        0 30px 70px
        rgba(
            15,
            23,
            42,
            0.18
        );

}


.about-highlight::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    top: -100px;

    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                37,
                99,
                235,
                0.35
            ),
            transparent 70%
        );

}


.about-highlight::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    bottom: -100px;

    left: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                58,
                237,
                0.28
            ),
            transparent 70%
        );

}


.highlight-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 35px;

}


.highlight-symbol {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 15px 35px
        rgba(
            37,
            99,
            235,
            0.28
        );

}


.highlight-tag {

    padding:
        6px
        10px;

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

    border-radius: 30px;

    color: #bfdbfe;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.about-highlight h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 18px;

    font-size: 2rem;

    line-height: 1.2;

    letter-spacing: -0.5px;

}


.about-highlight p {

    position: relative;

    z-index: 2;

    margin-bottom: 30px;

    color: #cbd5e1;

    line-height: 1.8;

}


.highlight-line {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 1px;

    margin-bottom: 18px;

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

}


.highlight-bottom {

    position: relative;

    z-index: 2;

    color: #93c5fd;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.8px;

}


/* =========================================================
   MISSION & VISION
========================================================= */

.mission-vision {

    padding:
        100px
        20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        );

}


.mission-vision-grid {

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;

    display: grid;

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

    gap: 25px;

}


.mission-card,
.vision-card {

    position: relative;

    display: grid;

    grid-template-columns:
        58px 1fr;

    gap: 24px;

    padding: 38px;

    overflow: hidden;

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

    border-radius: 18px;

    background: white;

    box-shadow:
        0 12px 35px
        rgba(
            15,
            23,
            42,
            0.04
        );

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

}


.mission-card:hover,
.vision-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 22px 45px
        rgba(
            15,
            23,
            42,
            0.09
        );

}


.mission-card {

    border-top:
        4px solid
        var(--primary);

}


.vision-card {

    border-top:
        4px solid
        var(--accent);

}


.mv-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #e0e7ff
        );

    color: var(--accent);

    font-size: 1.05rem;

    font-weight: 800;

}


.mv-label {

    display: block;

    margin-bottom: 7px;

    color: var(--accent);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.mission-card h3,
.vision-card h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.45rem;

}


.mission-card p,
.vision-card p {

    color: var(--text-light);

    line-height: 1.75;

}


/* =========================================================
   OBJECTIVES
========================================================= */

.objectives-section {

    padding:
        105px
        20px;

    background: white;

}


.objectives-grid {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

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

    gap: 22px;

}


.objective-card {

    position: relative;

    min-height: 235px;

    padding: 30px;

    overflow: hidden;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

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

}


.objective-card::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    right: -45px;

    bottom: -45px;

    border-radius: 50%;

    background:
        rgba(
            37,
            99,
            235,
            0.05
        );

}


.objective-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(
            37,
            99,
            235,
            0.35
        );

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.08
        );

}


.objective-card > span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    margin-bottom: 20px;

    border-radius: 10px;

    background: #eff6ff;

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 800;

}


.objective-card h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.12rem;

    line-height: 1.4;

}


.objective-card p {

    color: var(--text-light);

    line-height: 1.7;

}


/* =========================================================
   ACADEMIC AREAS
========================================================= */

.about-academic-areas {

    padding:
        105px
        20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );

}


.about-area-grid {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

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

    gap: 20px;

}


.about-area-card {

    position: relative;

    min-height: 340px;

    padding: 30px;

    overflow: hidden;

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

    border-radius: 18px;

    background: white;

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

}


.about-area-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.3s ease;

}


.about-area-card:hover::before {

    transform:
        scaleX(1);

}


.about-area-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(
            37,
            99,
            235,
            0.25
        );

    box-shadow:
        0 22px 45px
        rgba(
            15,
            23,
            42,
            0.08
        );

}


.about-area-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #e0e7ff
        );

    color: var(--accent);

    font-size: 1rem;

    font-weight: 800;

}


.area-number {

    display: block;

    margin-bottom: 7px;

    color: #94a3b8;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 1px;

}


.about-area-card h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.25rem;

}


.about-area-card p {

    margin-bottom: 20px;

    color: var(--text-light);

    line-height: 1.7;

}


.about-area-card a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 700;

}


.about-area-card a span {

    transition:
        transform 0.25s ease;

}


.about-area-card:hover a span {

    transform:
        translateX(4px);

}


/* =========================================================
   ACADEMIC PHILOSOPHY
========================================================= */

.academic-philosophy {

    padding:
        110px
        20px;

    background: white;

}


.philosophy-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        0.85fr
        1.15fr;

    gap: 80px;

    align-items: center;

}


.philosophy-content {

    max-width: 560px;

}


.philosophy-content h2 {

    margin:
        10px
        0
        22px;

    color: var(--primary);

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

    line-height: 1.15;

    letter-spacing: -1px;

}


.philosophy-content p {

    margin-bottom: 17px;

    color: var(--text-light);

    line-height: 1.8;

}


/* =========================================================
   LEARNING PATH
========================================================= */

.learning-path {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    padding: 35px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #ffffff
        );

    box-shadow:
        0 20px 50px
        rgba(
            15,
            23,
            42,
            0.05
        );

}


.path-item {

    position: relative;

    min-width: 125px;

    padding:
        22px
        16px;

    text-align: center;

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

    border-radius: 14px;

    background: white;

    box-shadow:
        0 8px 20px
        rgba(
            15,
            23,
            42,
            0.04
        );

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;

}


.path-item:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(
            37,
            99,
            235,
            0.3
        );

}


.path-item strong {

    display: block;

    margin-bottom: 6px;

    color: var(--accent);

    font-size: 0.78rem;

    font-weight: 800;

}


.path-item span {

    color: var(--primary);

    font-size: 0.82rem;

    font-weight: 700;

}


.path-arrow {

    color: var(--accent);

    font-size: 1.5rem;

    font-weight: 800;

}


/* =========================================================
   COLLABORATION
========================================================= */

.collaboration-section {

    padding:
        105px
        20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f1f5f9
        );

}


.collaboration-grid {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

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

    gap: 20px;

}


.collaboration-grid article {

    position: relative;

    min-height: 220px;

    padding: 30px;

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

    border-radius: 16px;

    background: white;

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

}


.collaboration-grid article:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(
            15,
            23,
            42,
            0.07
        );

}


.collaboration-number {

    display: block;

    margin-bottom: 18px;

    color: var(--accent);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.collaboration-grid h3 {

    margin-bottom: 12px;

    color: var(--primary);

    font-size: 1.25rem;

}


.collaboration-grid p {

    color: var(--text-light);

    line-height: 1.7;

}


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

.about-cta {

    position: relative;

    padding:
        105px
        20px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0b1f3a,
            #132f55
        );

}


.about-cta::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    top: -200px;

    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                37,
                99,
                235,
                0.3
            ),
            transparent 70%
        );

}


.about-cta::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    bottom: -190px;

    left: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                124,
                58,
                237,
                0.22
            ),
            transparent 70%
        );

}


.about-cta .section-heading {

    position: relative;

    z-index: 2;

    max-width: 750px;

}


.about-cta .section-label {

    color: #93c5fd;

}


.about-cta .section-heading h2 {

    color: white;

}


.about-cta .section-heading > p:not(.section-label) {

    color: #cbd5e1;

}


.about-cta .hero-buttons {

    margin-top: 30px;

}


.about-cta .btn-secondary {

    border-color: white;

    background: white;

    color: var(--primary);

}


.about-cta .btn-secondary:hover {

    border-color: #dbeafe;

    background: #dbeafe;

    color: var(--primary);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {


    .about-container {

        grid-template-columns:
            1fr
            1fr;

        gap: 50px;

    }


    .about-area-grid {

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

    }


    .objectives-grid {

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

    }


    .collaboration-grid {

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

    }


    .philosophy-container {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .philosophy-content {

        max-width: 800px;

        margin: 0 auto;

        text-align: center;

    }


}


/* =========================================================
   RESPONSIVE — TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {


    .about-hero {

        min-height: 500px;

    }


    .about-hero h1 {

        font-size:
            clamp(
                2.6rem,
                7vw,
                4.2rem
            );

    }


    .about-container {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    .about-text {

        max-width: 800px;

        margin: 0 auto;

    }


    .about-highlight {

        max-width: 700px;

        width: 100%;

        margin: 0 auto;

    }


    .mission-vision-grid {

        grid-template-columns:
            1fr;

        max-width: 700px;

    }


}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {


    .about-hero {

        min-height: auto;

        padding:
            80px
            20px;

    }


    .about-hero-badge {

        margin-bottom: 20px;

        font-size: 0.68rem;

    }


    .about-hero h1 {

        margin-bottom: 22px;

        font-size: 2.5rem;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .about-hero-content > p:not(.section-label) {

        font-size: 1rem;

        line-height: 1.7;

    }


    .about-hero-actions {

        flex-direction: column;

        width: 100%;

    }


    .about-hero-actions .btn {

        width: 100%;

        max-width: 300px;

        text-align: center;

    }


    .about-introduction,
    .mission-vision,
    .objectives-section,
    .about-academic-areas,
    .academic-philosophy,
    .collaboration-section,
    .about-cta {

        padding:
            75px
            20px;

    }


    .about-text h2,
    .philosophy-content h2 {

        font-size: 2rem;

    }


    .about-mini-stats {

        grid-template-columns:
            1fr;

    }


    .about-highlight {

        min-height: auto;

        padding: 30px;

    }


    .highlight-top {

        align-items: flex-start;

    }


    .highlight-tag {

        display: none;

    }


    .about-highlight h3 {

        font-size: 1.7rem;

    }


    .mission-card,
    .vision-card {

        grid-template-columns:
            1fr;

        gap: 18px;

        padding: 30px;

    }


    .objectives-grid,
    .about-area-grid,
    .collaboration-grid {

        grid-template-columns:
            1fr;

    }


    .objective-card {

        min-height: auto;

    }


    .about-area-card {

        min-height: auto;

    }


    .learning-path {

        flex-direction: column;

        padding: 25px 18px;

    }


    .path-item {

        width: 100%;

        max-width: 250px;

    }


    .path-arrow {

        transform:
            rotate(90deg);

    }


}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


    .about-hero h1 {

        font-size: 2.15rem;

    }


    .about-highlight {

        padding: 25px;

    }


    .mission-card,
    .vision-card {

        padding: 25px;

    }


    .objective-card,
    .about-area-card,
    .collaboration-grid article {

        padding: 25px;

    }


}