:root{

    /* Brand */

    --blue-900:#12326B;
    --blue-800:#164C96;
    --blue-700:#1E63C4;
    --blue-600:#2B74DA;
    --blue-500:#3B82F6;
    --blue-100:#EAF3FF;

    --yellow:#F4C542;
    --yellow-dark:#E0B536;

    /* Neutral */

    --white:#ffffff;

    --gray-25:#FCFDFE;
    --gray-50:#F8FAFC;
    --gray-100:#F1F5F9;
    --gray-200:#E2E8F0;
    --gray-300:#CBD5E1;
    --gray-400:#94A3B8;
    --gray-500:#64748B;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1E293B;
    --gray-900:#0F172A;

    --success:#16A34A;
    --danger:#DC2626;

    /* Typography */

    --font:
    Inter,
    "Plus Jakarta Sans",
    "Segoe UI",
    sans-serif;

    --display:4.2rem;
    --h1:3rem;
    --h2:2.2rem;
    --h3:1.5rem;

    --body:17px;
    --small:14px;

    /* Radius */

    --radius-xs:8px;
    --radius-sm:12px;
    --radius:18px;
    --radius-lg:24px;
    --radius-xl:30px;

    /* Spacing */

    --space-1:6px;
    --space-2:12px;
    --space-3:18px;
    --space-4:24px;
    --space-5:32px;
    --space-6:48px;
    --space-7:72px;
    --space-8:96px;

    /* Shadow */

    --shadow-sm:
    0 1px 3px rgba(15,23,42,.05);

    --shadow:
    0 10px 30px rgba(15,23,42,.06);

    --shadow-lg:
    0 30px 80px rgba(15,23,42,.08);

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

}

/*===============================
        RESET
================================*/

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

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font);

    background:var(--gray-50);

    color:var(--gray-900);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

button,
input,
textarea{

    font:inherit;

}

a{

    text-decoration:none;

    color:inherit;

}




/*=========================================================
    HERO DASHBOARD SECTION
    SRS-MPSC PROFESSIONAL PLATFORM UI
=========================================================*/

.hero-dashboard-section{

    position:relative;
    padding:80px 0;
    overflow:hidden;

    background:
    radial-gradient(
        circle at top left,
        rgba(37,99,235,.12),
        transparent 35%
    ),
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );

}


.hero-dashboard-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-250px;
    right:-200px;

    border-radius:50%;

    background:
    rgba(37,99,235,.06);

}



.hero-dashboard-section::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    bottom:-150px;
    left:-150px;

    border-radius:50%;

    background:
    rgba(14,165,233,.05);

}



.section-container{

    width:min(1400px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}





/*=========================================================
    MAIN GRID
=========================================================*/


.hero-dashboard-wrapper{

    display:grid;

    grid-template-columns:
    minmax(0,1.35fr)
    minmax(360px,.85fr);

    gap:45px;

    align-items:start;

}





/*=========================================================
    LEFT CONTENT AREA
=========================================================*/


.hero-content-area{

    display:flex;

    flex-direction:column;

    gap:25px;

}



/*=========================================================
    PLATFORM BADGE
=========================================================*/


.platform-badge{

    display:flex;

    align-items:center;

    gap:15px;

    width:max-content;

    max-width:100%;

    padding:12px 20px;

    border-radius:18px;

    background:#ffffff;

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

    box-shadow:
    0 12px 30px rgba(15,23,42,.06);

}



.platform-badge-icon{

    width:48px;

    height:48px;

    border-radius:15px;

    display:grid;

    place-items:center;

    flex-shrink:0;

    color:white;

    font-size:22px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );

}



.platform-badge-content{

    display:flex;

    flex-direction:column;

    gap:3px;

}



.platform-badge-content span{

    font-size:14px;

    font-weight:800;

    color:#0f172a;

}



.platform-badge-content small{

    color:#64748b;

    font-size:12px;

    font-weight:600;

}





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


.hero-main-title{

    margin:0;

    max-width:850px;

    font-size:
    clamp(38px,5vw,68px);

    line-height:1.08;

    font-weight:900;

    letter-spacing:-2px;

    color:#0f172a;

}



.hero-main-title span{

    color:#2563eb;

}





/*=========================================================
    DESCRIPTION
=========================================================*/


.hero-description{

    max-width:720px;

    margin:0;

    font-size:18px;

    line-height:1.8;

    color:#64748b;

}





/*=========================================================
    ACTION BUTTONS
=========================================================*/


.hero-action-buttons{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.hero-btn-primary,
.hero-btn-secondary{

    height:52px;

    padding:0 25px;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}



.hero-btn-primary{

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    box-shadow:
    0 15px 30px rgba(37,99,235,.25);

}



.hero-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 40px rgba(37,99,235,.35);

}



.hero-btn-secondary{

    color:#2563eb;

    background:#ffffff;

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

}



.hero-btn-secondary:hover{

    background:#eff6ff;

    transform:translateY(-3px);

}



/*=========================================================
    COMMON SUMMARY GRID
=========================================================*/


.hero-summary-grid{

    display:grid;

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

    gap:18px;

}



.hero-summary-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:15px;

    padding:20px;

    background:#fff;

    border-radius:20px;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:
    0 10px 25px rgba(15,23,42,.05);

    transition:.3s ease;

    overflow:hidden;

}



.hero-summary-card::before{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    right:-35px;

    top:-35px;

    border-radius:50%;

    background:
    rgba(37,99,235,.06);

}



.hero-summary-card:hover{

    transform:translateY(-6px);

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

}



.hero-summary-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    border-radius:16px;

    color:#2563eb;

    background:#eff6ff;

    font-size:22px;

}



.hero-summary-card strong{

    display:block;

    font-size:26px;

    line-height:1;

    font-weight:900;

    color:#0f172a;

}



.hero-summary-card span{

    display:block;

    margin-top:7px;

    color:#64748b;

    font-size:13px;

    font-weight:600;

}


/*=========================================================
    BENEFITS FEATURE GRID
=========================================================*/

.feature-benefits-grid{

    display:grid;

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

    gap:16px;

    margin-top:10px;

}



.feature-benefit-card{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px;

    background:#ffffff;

    border-radius:18px;

    border:1px solid rgba(15,23,42,.08);

    transition:.35s ease;

}



.feature-benefit-card:hover{

    transform:translateY(-5px);

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

    box-shadow:
    0 15px 35px rgba(15,23,42,.08);

}



.feature-benefit-icon{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    border-radius:14px;

    color:#2563eb;

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

    font-size:20px;

}



.feature-benefit-card h4{

    margin:0 0 6px;

    font-size:15px;

    font-weight:800;

    color:#0f172a;

}



.feature-benefit-card p{

    margin:0;

    color:#64748b;

    font-size:13px;

    line-height:1.5;

}





/*=========================================================
    ANALYTICS DASHBOARD PANEL
=========================================================*/


.analytics-dashboard-panel{

    position:relative;

    background:#ffffff;

    border-radius:28px;

    padding:28px;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:
    0 25px 60px rgba(15,23,42,.08);

    overflow:hidden;

}



.analytics-dashboard-panel::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-100px;

    right:-100px;

    border-radius:50%;

    background:
    rgba(37,99,235,.05);

}



.analytics-dashboard-panel > *{

    position:relative;

    z-index:2;

}





/*=========================================================
    ANALYTICS HEADER
=========================================================*/


.analytics-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:22px;

    margin-bottom:25px;

    border-bottom:

    1px solid rgba(15,23,42,.08);

}



.analytics-panel-header h3{

    margin:0;

    font-size:22px;

    font-weight:900;

    color:#0f172a;

}



.analytics-panel-header p{

    margin:6px 0 0;

    color:#64748b;

    font-size:14px;

    font-weight:600;

}





/*=========================================================
    LIVE STATUS
=========================================================*/


.analytics-live-status{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:50px;

    background:#ecfdf5;

    color:#059669;

    font-size:13px;

    font-weight:800;

}



.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#10b981;

    box-shadow:

    0 0 0 5px rgba(16,185,129,.15);

    animation:
    livePulse 2s infinite;

}



@keyframes livePulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(16,185,129,.35);

    }


    70%{

        box-shadow:
        0 0 0 8px rgba(16,185,129,0);

    }


    100%{

        box-shadow:
        0 0 0 0 rgba(16,185,129,0);

    }

}





/*=========================================================
    ANALYTICS SUMMARY OVERRIDE
=========================================================*/


.analytics-dashboard-panel .hero-summary-grid{

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

    margin-bottom:30px;

}



.analytics-dashboard-panel 
.hero-summary-card{

    padding:16px;

    border-radius:18px;

}



.analytics-dashboard-panel 
.hero-summary-icon{

    width:44px;

    height:44px;

    font-size:18px;

}



.analytics-dashboard-panel 
.hero-summary-card strong{

    font-size:22px;

}





/*=========================================================
    DEPARTMENT PROGRESS LIST
=========================================================*/


.department-progress-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.department-progress-card{

    padding:18px;

    border-radius:18px;

    background:#f8fafc;

    border:1px solid rgba(15,23,42,.06);

    transition:.3s ease;

}



.department-progress-card:hover{

    background:#ffffff;

    box-shadow:
    0 12px 25px rgba(15,23,42,.08);

}



.department-progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:12px;

}



.department-name{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:800;

    color:#334155;

}



.department-name i{

    width:34px;

    height:34px;

    border-radius:10px;

    display:grid;

    place-items:center;

    color:#2563eb;

    background:#dbeafe;

}



.department-progress-header strong{

    font-size:15px;

    color:#2563eb;

}

/*=========================================================
  ANALYTICS DASHBOARD PANEL
=========================================================*/

.analytics-dashboard-panel{

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

    border:1px solid rgba(226,232,240,.8);

    border-radius:28px;

    padding:28px;

    box-shadow:
    0 25px 60px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.8);

    position:relative;

    overflow:hidden;

}


/* Decorative background */

.analytics-dashboard-panel::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-90px;

    top:-90px;

    background:
    radial-gradient(
    circle,
    rgba(59,130,246,.18),
    transparent 70%
    );

    pointer-events:none;

}





/*=========================================================
 PANEL HEADER
=========================================================*/


.analytics-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:24px;

    margin-bottom:24px;

    border-bottom:1px solid #e5e7eb;

}


.analytics-panel-header h3{

    margin:0;

    font-size:22px;

    font-weight:800;

    color:#0f172a;

}


.analytics-panel-header p{

    margin-top:5px;

    color:#64748b;

    font-size:14px;

}




.analytics-live-status{

    display:flex;

    align-items:center;

    gap:8px;

    background:#ecfdf5;

    color:#059669;

    padding:8px 14px;

    border-radius:50px;

    font-weight:700;

    font-size:13px;

}



.status-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#10b981;

    box-shadow:

    0 0 0 5px rgba(16,185,129,.15);

}






/*=========================================================
 SUMMARY MINI CARDS
=========================================================*/


.analytics-dashboard-panel 
.hero-summary-grid{

    display:grid;

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

    gap:14px;

    margin-bottom:30px;

}



.analytics-dashboard-panel 
.hero-summary-card{


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


    border:1px solid #e2e8f0;

    border-radius:18px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:14px;

    transition:.3s ease;


}



.analytics-dashboard-panel 
.hero-summary-card:hover{

    transform:translateY(-4px);

    border-color:#93c5fd;

    box-shadow:
    0 12px 30px rgba(37,99,235,.12);

}




.analytics-dashboard-panel 
.hero-summary-icon{


    width:42px;

    height:42px;

    border-radius:14px;

    display:grid;

    place-items:center;

    background:#eff6ff;

    color:#2563eb;

    font-size:18px;

}




.analytics-dashboard-panel 
.hero-summary-card strong{

    display:block;

    font-size:24px;

    font-weight:900;

    color:#0f172a;

}



.analytics-dashboard-panel 
.hero-summary-card span{

    display:block;

    margin-top:3px;

    font-size:13px;

    color:#64748b;

    font-weight:600;

}





/*=========================================================
 DEPARTMENT PARTICIPATION
=========================================================*/


.department-progress-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}




.department-progress-card{

    padding:16px 18px;

    background:#f8fafc;

    border-radius:18px;

    border:1px solid #e2e8f0;

    transition:.3s ease;

}



.department-progress-card:hover{

    background:white;

    transform:translateX(5px);

    box-shadow:

    0 10px 25px rgba(15,23,42,.08);

}





.department-progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}



.department-name{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:#334155;

}



.department-name i{

    width:32px;

    height:32px;

    display:grid;

    place-items:center;

    background:#dbeafe;

    color:#2563eb;

    border-radius:10px;

}



.department-progress-header strong{

    color:#2563eb;

    font-size:15px;

}





/* Progress */

.coverage-progress-track{


    height:10px;

    width:100%;

    background:#e2e8f0;

    border-radius:50px;

    overflow:hidden;


}



.coverage-progress-fill{


    height:100%;

    border-radius:50px;


    background:

    linear-gradient(
    90deg,
    #2563eb,
    #60a5fa
    );


    position:relative;

}



.coverage-progress-fill::after{


    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );

    animation:
    shine 2.5s infinite;


}



@keyframes shine{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}






/*=========================================================
 CHART TITLE
=========================================================*/


.chart-title{

    margin:32px 0 18px;

    font-size:17px;

    font-weight:800;

    color:#0f172a;

}






/*=========================================================
 DEPARTMENT BAR CHART
=========================================================*/


.department-bar-chart{


    height:240px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:15px;

    padding:20px;

    background:

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


    border-radius:22px;

    border:1px solid #e2e8f0;

}




.chart-item{


    flex:1;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:center;

    gap:10px;

}



.chart-value{


    font-size:12px;

    font-weight:800;

    color:#334155;

}



.chart-height-bar{


    width:100%;

    max-width:42px;

    min-height:8px;

    background:

    linear-gradient(
    180deg,
    #3b82f6,
    #1d4ed8
    );


    border-radius:

    14px 14px 5px 5px;


    transition:.4s ease;

}



.chart-item:nth-child(even)
.chart-height-bar{

    background:

    linear-gradient(
    180deg,
    #fbbf24,
    #d97706
    );

}



.chart-height-bar:hover{


    transform:

    translateY(-8px);


    box-shadow:

    0 15px 30px rgba(37,99,235,.25);


}



.chart-item span{


    font-size:12px;

    font-weight:700;

    color:#64748b;

}

/*=========================================================
  RESPONSIVE DESIGN SYSTEM
=========================================================*/


/*=========================================================
  LARGE TABLET / SMALL LAPTOP
=========================================================*/

@media(max-width:1280px){


.hero-dashboard-wrapper{


    grid-template-columns:

    1fr 420px;


    gap:40px;


}



.hero-main-title{


    font-size:54px;


}



.analytics-dashboard-panel{


    padding:24px;


}




.hero-summary-grid{


    gap:12px;


}



.hero-summary-card{


    padding:16px;


}



.feature-benefit-grid{


    gap:14px;

}



}





/*=========================================================
  TABLET MODE
=========================================================*/

@media(max-width:1024px){



.hero-dashboard-wrapper{


    grid-template-columns:1fr;


}



.hero-content-area{


    max-width:100%;


}



.hero-main-title{


    font-size:48px;


}



.hero-description{


    max-width:700px;


}




.analytics-dashboard-panel{


    margin-top:20px;


}




.analytics-dashboard-panel 
.hero-summary-grid{


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


}



.feature-benefits-grid{


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


}




.department-bar-chart{


    height:220px;


}



}





/*=========================================================
  MOBILE LANDSCAPE
=========================================================*/


@media(max-width:768px){



.hero-dashboard-section{


    padding:60px 0;


}



.hero-dashboard-wrapper{


    gap:35px;


}




.platform-badge{


    padding:12px 16px;


}



.platform-badge-icon{


    width:42px;

    height:42px;


}



.hero-main-title{


    font-size:38px;

    line-height:1.15;


}



.hero-description{


    font-size:15px;


}




.hero-action-buttons{


    flex-direction:column;


    width:100%;


}



.hero-action-buttons a{


    width:100%;

    justify-content:center;


}




.hero-summary-grid{


    grid-template-columns:1fr;


}



.hero-summary-card{


    padding:18px;


}





.feature-benefits-grid{


    grid-template-columns:1fr;


}



.feature-benefit-card{


    padding:18px;


}




.analytics-dashboard-panel{


    border-radius:22px;

    padding:18px;


}



.analytics-panel-header{


    align-items:flex-start;

    flex-direction:column;

    gap:15px;


}




.analytics-live-status{


    align-self:flex-start;


}




.analytics-dashboard-panel 
.hero-summary-grid{


    grid-template-columns:1fr;


}





.department-progress-card{


    padding:14px;


}




.department-bar-chart{


    height:190px;

    padding:15px;

    gap:10px;


}



.chart-height-bar{


    max-width:28px;


}



.chart-value{


    font-size:11px;


}



.chart-item span{


    font-size:10px;


}


}





/*=========================================================
  SMALL PHONE
=========================================================*/


@media(max-width:480px){



.hero-dashboard-section{


    padding:40px 0;


}




.section-container{


    padding-left:16px;

    padding-right:16px;


}



.platform-badge{


    border-radius:18px;


}



.platform-badge-content span{


    font-size:13px;


}



.platform-badge-content small{


    font-size:11px;


}





.hero-main-title{


    font-size:32px;


}



.hero-description{


    font-size:14px;


    line-height:1.7;


}





.hero-summary-card{


    border-radius:16px;


}



.hero-summary-icon{


    width:38px;

    height:38px;


}



.hero-summary-card strong{


    font-size:22px;


}





.feature-benefit-card{


    display:flex;

    gap:12px;


}



.feature-benefit-icon{


    width:40px;

    height:40px;


}





.analytics-dashboard-panel{


    padding:14px;

    border-radius:18px;


}





.analytics-panel-header h3{


    font-size:19px;


}




.analytics-panel-header p{


    font-size:13px;


}




.department-progress-header{


    font-size:13px;


}




.coverage-progress-track{


    height:8px;


}



.chart-title{


    font-size:15px;


}



.department-bar-chart{


    overflow-x:auto;

    justify-content:flex-start;


}



.chart-item{


    min-width:45px;


}


}





/*=========================================================
  EXTRA SMALL DEVICES
=========================================================*/


@media(max-width:360px){



.hero-main-title{


    font-size:28px;


}



.hero-description{


    font-size:13px;


}




.hero-summary-card{


    flex-direction:column;

    align-items:flex-start;


}



.analytics-live-status{


    font-size:12px;


}



.department-progress-header strong{


    font-size:13px;


}



.department-bar-chart{


    height:170px;


}


}


/* =========================================
   CERTIFICATE SECTION - PREMIUM DESIGN
========================================= */

.certificate-section {
    position: relative;
    padding: var(--space-8) 0;
    
    overflow: hidden;
}


.section-container {
    width: min(1200px, 92%);
    margin-inline: auto;
}


/* =========================================
   MAIN CARD
========================================= */

.certificate-card {

    display: grid;
    grid-template-columns:
        auto
        1fr
        330px;

    gap: var(--space-6);

    align-items: center;

    position: relative;

    padding: clamp(28px,4vw,60px);

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

    border:
        var(--border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-lg);

    backdrop-filter:
        blur(18px);

    isolation: isolate;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.certificate-card::before {

    content:"";

    position:absolute;

    inset:0;

   

    z-index:-1;

}


.certificate-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 40px 90px rgba(15,23,42,.12);
}



/* =========================================
   ICON
========================================= */


.certificate-icon {

    width:90px;
    height:90px;

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

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            var(--blue-700),
            var(--blue-500)
        );

    color:
        var(--white);

    font-size:
        42px;

    box-shadow:
        0 15px 35px rgba(30,99,196,.35);

    flex-shrink:0;

    animation:
        floatIcon 4s ease-in-out infinite;

}


@keyframes floatIcon {

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

}



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


.certificate-content {

    max-width:650px;

}


.eyebrow {

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:
        var(--space-3);

    padding:
        8px 16px;

    border-radius:
        999px;

    background:
        var(--blue-100);

    color:
        var(--blue-700);

    font-size:
        var(--small);

    font-weight:
        700;

    letter-spacing:
        .02em;

}


.eyebrow i {

    color:
        var(--success);

}



.certificate-content h2 {

    margin:0 0 var(--space-3);

    font-family:
        var(--font);

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

    line-height:
        1.15;

    color:
        var(--gray-900);

    font-weight:
        800;

}



.certificate-content p {

    margin-bottom:
        var(--space-4);

    color:
        var(--gray-600);

    font-size:
        var(--body);

    line-height:
        1.8;

}



/* =========================================
   FEATURES
========================================= */


.certificate-features {

    display:
        grid;

    gap:
        14px;

    margin-bottom:
        var(--space-5);

}


.certificate-features div {

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--gray-700);

    font-size:
        15px;

    font-weight:
        600;

}


.certificate-features i {

    color:
        var(--success);

    font-size:
        20px;

}



/* =========================================
   BUTTON
========================================= */


.btn-gold {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        15px 32px;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            var(--yellow),
            var(--yellow-dark)
        );

    color:
        var(--gray-900);

    font-weight:
        800;

    text-decoration:none;

    box-shadow:
        0 12px 30px rgba(244,197,66,.35);

    transition:
        all .3s ease;

}



.btn-gold:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px rgba(244,197,66,.45);

}



/* =========================================
   CERTIFICATE PREVIEW
========================================= */


.certificate-preview {

    display:flex;

    justify-content:center;

}



.certificate-paper {

    position:relative;

    width:
        270px;

    min-height:
        350px;


    padding:
        35px 25px;


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;


    background:
        var(--white);


    border:
        10px solid var(--blue-100);


    border-radius:
        var(--radius-lg);


    box-shadow:
        0 25px 60px rgba(15,23,42,.15);


    transform:
        rotate(3deg);


    transition:
        transform .35s ease;

}



.certificate-paper:hover {

    transform:
        rotate(0deg)
        translateY(-8px);

}



.certificate-paper::before {

    content:"";

    position:absolute;

    inset:
        12px;

    border:
        2px dashed var(--gray-300);

    border-radius:
        var(--radius);

}



.certificate-paper i {

    position:relative;

    font-size:
        60px;

    color:
        var(--yellow);

    margin-bottom:
        20px;

}



.certificate-paper h3 {

    position:relative;

    margin:
        0 0 12px;

    color:
        var(--blue-900);

    font-size:
        28px;

    font-weight:
        900;

}



.certificate-paper p {

    position:relative;

    color:
        var(--gray-600);

    line-height:
        1.6;

    font-size:
        14px;

}



.certificate-paper span {

    position:relative;

    margin-top:
        20px;

    font-weight:
        800;

    color:
        var(--blue-700);

}



/* =========================================
   TABLET
========================================= */


@media(max-width:1050px){


.certificate-card {

    grid-template-columns:
        90px
        1fr;

}


.certificate-preview {

    grid-column:
        1 / -1;

    margin-top:
        var(--space-4);

}



}



/* =========================================
   MOBILE
========================================= */


@media(max-width:700px){


.certificate-section {

    padding:
        var(--space-7) 0;

}



.certificate-card {

    display:flex;

    flex-direction:column;

    text-align:center;

    padding:
        30px 22px;

    gap:
        var(--space-4);

}



.certificate-icon {

    width:75px;

    height:75px;

    font-size:
        34px;

}



.eyebrow {

    font-size:
        12px;

}



.certificate-content p {

    font-size:
        15px;

}



.certificate-features {

    text-align:left;

}



.btn-gold {

    width:100%;

}



.certificate-paper {

    width:
        240px;

    min-height:
        320px;

}



}



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


@media(max-width:400px){


.certificate-content h2 {

    font-size:
        1.7rem;

}


.certificate-paper {

    width:
        210px;

}



}


/* ---------------------------------------------------------------------
   9. RESOURCE LIBRARY
--------------------------------------------------------------------- */



/* ---------------------------------------------------------------------
   1. TOKENS
--------------------------------------------------------------------- */

:root{

  /* ==========================================
     Brand (Primary: #0065BD)
  ========================================== */

  --navy-900:#003A70;
  --navy-800:#00498A;
  --navy-700:#0057A3;
  --navy-600:#0065BD;   /* Primary */
  --navy-500:#2C82D9;
  --navy-400:#5CA2E6;
  --navy-300:#8BC0F0;
  --navy-200:#BEDCF8;
  --navy-100:#E8F1FC;
  --navy-50:#F4F8FE;

  --primary:#0065BD;
  --primary-hover:#0057A3;
  --primary-dark:#00498A;
  --primary-light:#E8F1FC;

  /* ==========================================
     Accent (Achievement / Certificates)
  ========================================== */

  --gold:#EFB223;
  --gold-dark:#C4880E;
  --gold-100:#FEF3D9;

  /* ==========================================
     Neutral
  ========================================== */
 
  --ink-900:#19263b;
  --ink-800:#1E293B;
  --ink-700:#334155;
  --ink-600:#475569;
  --ink-500:#64748B;
  --ink-400:#94A3B8;
  --ink-300:#CBD5E1;
  --ink-200:#E2E8F0;
  --ink-100:#F1F5F9;
  --ink-50:#F8FAFC;
  --white:#FFFFFF;

  /* ==========================================
     Status
  ========================================== */

  --success:#16A34A;
  --success-100:#DCFCE7;

  --warning:#D97706;
  --warning-100:#FEF3C7;

  --danger:#DC2626;
  --danger-100:#FEE2E2;

  /* ==========================================
     Typography
  ========================================== */

  --font-display:"Newsreader","Iowan Old Style",Georgia,serif;
  --font-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;

  --step-display:clamp(2.4rem,4.4vw,4.2rem);
  --step-h1:clamp(2rem,3.4vw,3rem);
  --step-h2:clamp(1.6rem,2.6vw,2.2rem);
  --step-h3:1.25rem;
  --step-body:1.0625rem;
  --step-small:.875rem;
  --step-tiny:.75rem;

  /* ==========================================
     Spacing
  ========================================== */

  --sp-1:.4rem;
  --sp-2:.8rem;
  --sp-3:1.2rem;
  --sp-4:1.6rem;
  --sp-5:2.4rem;
  --sp-6:3.6rem;
  --sp-7:5.6rem;
  --sp-8:8rem;

  /* ==========================================
     Radius
  ========================================== */

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  /* ==========================================
     Shadow
  ========================================== */

  --sh-1:0 1px 3px rgba(0,101,189,.08);
  --sh-2:0 8px 24px rgba(0,101,189,.10);
  --sh-3:0 20px 48px rgba(0,101,189,.14);

  /* ==========================================
     Borders & Layout
  ========================================== */

  --line:1px solid var(--ink-200);

  --container:1280px;
  --container-narrow:920px;

  --ease:cubic-bezier(.22,.8,.28,1);

}

/* ---------------------------------------------------------------------
   2. RESET
--------------------------------------------------------------------- */

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink-800);
  background:var(--white);
  line-height:1.6;
  font-size:var(--step-body);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--ink-900); line-height:1.15; }

/* Tabular numerals for every stat/score on the page */
.num, .stat-card strong, .rank-stat-item strong, .chart__value,
.rank-score__value, .exam-score, .readiness-number, .performance-score strong{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

:focus-visible{ outline:3px solid rgba(43,116,214,.45); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--navy-700); color:#fff; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------------------------------------------------------------------
   3. LAYOUT
--------------------------------------------------------------------- */

.container{ width:92%; max-width:var(--container); margin-inline:auto; }
.container--narrow{ width:92%; max-width:var(--container-narrow); margin-inline:auto; }

.section{ padding:var(--sp-7) 0; }
.section--tight{ padding:var(--sp-6) 0; }
.section--alt{ background:var(--ink-50); }

.section__head{ max-width:680px; margin:0 auto var(--sp-6); text-align:center; }
.section__head p{ color:var(--ink-500); font-size:1.05rem; line-height:1.8; margin-top:var(--sp-2); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1.1rem; border-radius:var(--r-pill);
  background:var(--navy-100); color:var(--navy-700);
  font-size:var(--step-tiny); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.eyebrow--gold{ background:var(--gold-100); color:var(--warning); }
.eyebrow i{ color:var(--gold-dark); }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0;
}

/* ---------------------------------------------------------------------
   4. BUTTONS
--------------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  height:52px; padding:0 1.8rem; border-radius:var(--r-pill);
  font-weight:700; font-size:.95rem; border:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:active{ transform:scale(.97); }

.btn--primary{ background:var(--navy-700); color:#fff; box-shadow:var(--sh-2); }
.btn--primary:hover{ background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--sh-3); }

.btn--ghost{ background:#fff; border:var(--line); color:var(--ink-700); }
.btn--ghost:hover{ border-color:var(--navy-500); color:var(--navy-700); transform:translateY(-2px); }

.btn--gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--ink-800); box-shadow:0 14px 30px rgba(196,136,14,.28);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 20px 40px rgba(196,136,14,.36); }

.btn--outline-invert{ background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(10px); }
.btn--outline-invert:hover{ background:#fff; color:var(--navy-900); }

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

/* ---------------------------------------------------------------------
   5. CARD PRIMITIVE — one base, reused everywhere
--------------------------------------------------------------------- */

.card{
  position:relative;
  background:var(--white);
  border:var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card--hover:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--navy-100); }

/* thin ledger rule — the recurring "official record" motif */
.card--ledger{ border-top:3px solid var(--navy-700); }
.card--ledger.card--gold{ border-top-color:var(--gold); }

/* ---------------------------------------------------------------------
   6. HERO
--------------------------------------------------------------------- */

.hero{
  position:relative;
  padding:var(--sp-7) 0;
  overflow:hidden;
  background:
    radial-gradient(600px 420px at 88% -10%, rgba(43,116,214,.10), transparent 60%),
    radial-gradient(480px 380px at -5% 110%, rgba(239,178,35,.10), transparent 60%),
    var(--white);
}

.hero__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--sp-6);
  align-items:center;
}

.hero__badge{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding:.9rem 1.2rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.8); border:var(--line); box-shadow:var(--sh-1);
  margin-bottom:var(--sp-4); backdrop-filter:blur(10px);
}
.hero__badge-icon{
  width:46px; height:46px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.2rem;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500)); color:#fff;
}
.hero__badge b{ display:block; font-size:.9rem; color:var(--ink-800); }
.hero__badge small{ display:block; margin-top:2px; color:var(--ink-500); font-size:.78rem; }

.hero__title{ font-size:var(--step-display); letter-spacing:-.02em; margin-bottom:var(--sp-3); }
.hero__desc{ max-width:56ch; color:var(--ink-600); font-size:1.05rem; line-height:1.85; margin-bottom:var(--sp-5); }
.hero__actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }

/* Stat row */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-bottom:var(--sp-6); }
.stat-card{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--white); border:var(--line); box-shadow:var(--sh-1);
}
.stat-card__icon{
  flex-shrink:0; width:48px; height:48px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.1rem;
  background:var(--navy-100); color:var(--navy-700);
}
.stat-card strong{ display:block; font-size:1.55rem; color:var(--ink-800); font-weight:700; }
.stat-card span{ display:block; font-size:var(--step-tiny); font-weight:600; color:var(--ink-500); margin-top:2px; }

/* Benefit grid */
.benefit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
.benefit-card{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--ink-50); border:var(--line);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.benefit-card:hover{ transform:translateX(4px); background:var(--navy-50); }
.benefit-card__icon{
  flex-shrink:0; width:44px; height:44px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--navy-100); color:var(--navy-700);
}
.benefit-card h4{ font-size:.98rem; font-weight:700; margin-bottom:.3rem; font-family:var(--font-body); }
.benefit-card p{ font-size:.86rem; color:var(--ink-500); line-height:1.6; }

/* ---------------------------------------------------------------------
   7. ANALYTICS PANEL (hero sidebar)
--------------------------------------------------------------------- */

.panel{
  background:rgba(255,255,255,.9); backdrop-filter:blur(20px);
  border:var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2);
  padding:var(--sp-5);
}
.panel__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.panel__head h3{ font-size:1.3rem; }
.panel__head p{ color:var(--ink-500); font-size:.85rem; margin-top:.3rem; }

.live-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:var(--r-pill);
  background:var(--success-100); color:var(--success); font-weight:700; font-size:.8rem;
  white-space:nowrap;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); position:relative; }
.live-dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:rgba(21,140,86,.3); animation:pulse 2s infinite;
}
@keyframes pulse{ 0%{ transform:scale(.8); opacity:1; } 100%{ transform:scale(2); opacity:0; } }

.panel .stat-row{ grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-bottom:var(--sp-5); }
.panel .stat-card{ flex-direction:column; text-align:center; gap:.6rem; padding:var(--sp-2); }
.panel .stat-card strong{ font-size:1.3rem; }

.dept-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.dept-item{ padding:var(--sp-3); border-radius:var(--r-md); background:var(--ink-50); border:var(--line); transition:.3s; }
.dept-item:hover{ background:var(--white); box-shadow:var(--sh-1); }
.dept-item__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; font-size:.9rem; }
.dept-item__name{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink-700); }
.dept-item__name i{ color:var(--navy-600); }
.dept-item__pct{ font-weight:700; color:var(--navy-700); }
.dept-bar{ height:8px; border-radius:var(--r-pill); background:var(--ink-200); overflow:hidden; }
.dept-bar__fill{ height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--navy-600),var(--navy-500)); }

.chart-title{ font-size:.85rem; font-weight:700; color:var(--ink-600); margin:var(--sp-5) 0 var(--sp-3); }
.chart{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-2); height:180px; padding-top:var(--sp-2); border-top:var(--line); }
.chart__item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:.5rem; }
.chart__value{ font-size:.72rem; font-weight:700; color:var(--ink-600); }
.chart__bar{ width:100%; max-width:34px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--navy-500),var(--navy-700)); transform-origin:bottom; }
.chart__item span{ font-size:.68rem; font-weight:700; color:var(--ink-400); text-transform:uppercase; }

/* ---------------------------------------------------------------------
   8. CERTIFICATE
--------------------------------------------------------------------- */

.certificate{ background:var(--navy-50); }
.certificate__card{
  display:grid; grid-template-columns:auto 1fr 320px; gap:var(--sp-6); align-items:center;
  background:var(--white); border:var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); padding:clamp(1.8rem,4vw,3.6rem);
}
.certificate__icon{
  width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; font-size:2rem; color:#fff; flex-shrink:0;
  background:linear-gradient(145deg,var(--navy-700),var(--navy-500));
  box-shadow:0 14px 34px rgba(21,70,140,.3);
}
.certificate__content h2{ font-size:var(--step-h2); margin:var(--sp-3) 0; }
.certificate__content p{ color:var(--ink-600); line-height:1.85; margin-bottom:var(--sp-4); }
.certificate__features{ display:grid; gap:.7rem; margin-bottom:var(--sp-4); }
.certificate__features div{ display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:.92rem; color:var(--ink-700); }
.certificate__features i{ color:var(--success); }

.certificate__paper{
  position:relative; width:100%; min-height:320px; padding:2.2rem 1.6rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:var(--white); border:8px solid var(--navy-100); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); transform:rotate(2.5deg); transition:transform .4s var(--ease);
}
.certificate__paper:hover{ transform:rotate(0) translateY(-6px); }
.certificate__paper::before{ content:""; position:absolute; inset:10px; border:2px dashed var(--ink-300); border-radius:var(--r-md); }
.certificate__paper i{ font-size:3.2rem; color:var(--gold); margin-bottom:1rem; }
.certificate__paper h3{ color:var(--navy-900); font-size:1.7rem; margin-bottom:.6rem; }
.certificate__paper p{ color:var(--ink-500); font-size:.88rem; line-height:1.6; }
.certificate__paper span{ margin-top:1rem; font-weight:800; color:var(--navy-700); letter-spacing:.05em; }

/* ---------------------------------------------------------------------
   9. RESOURCE LIBRARY
--------------------------------------------------------------------- */

.library-hero{ text-align:center; padding-bottom:0; }
.library-hero__title{ font-size:var(--step-h1); margin:var(--sp-3) 0; color:var(--ink-800);}
.library-hero__desc{ max-width:60ch; margin:0 auto var(--sp-5); color:var(--ink-600); font-size:1.05rem; }

.toolbar{
  background:var(--white); border:var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:var(--sp-3); margin-bottom:var(--sp-4);
}
.toolbar__form{ display:grid; grid-template-columns:1fr 240px auto; gap:var(--sp-2); }
.field{
  height:52px; display:flex; align-items:center; gap:.7rem;
  padding:0 var(--sp-3); background:var(--ink-50); border:var(--line); border-radius:var(--r-md);
}
.field i{ color:var(--navy-600); flex-shrink:0; }
.field input,.field select{ width:100%; border:none; background:transparent; outline:none; font-size:.95rem; }

.category-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--sp-4); }
.pill{
  padding:.55rem 1.1rem; border-radius:var(--r-pill); background:var(--white);
  border:var(--line); color:var(--ink-600); font-size:.85rem; font-weight:700; transition:.25s;
}
.pill:hover,.pill.is-active{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }

.results-bar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5);
  background:var(--white); border:var(--line); border-radius:var(--r-md); color:var(--ink-600); font-size:.9rem;
}
.results-bar i{ color:var(--navy-600); margin-right:.5rem; }

.res-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4); }

.res-card{ overflow:hidden; }
.res-card__thumb{ position:relative; height:150px; display:flex; align-items:center; justify-content:center; background:var(--navy-50); overflow:hidden; }
.res-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.res-card:hover .res-card__thumb img{ transform:scale(1.06); }
.res-card__thumb-icon i{ font-size:2.6rem; }
.res-card__thumb-icon span{ display:block; margin-top:.4rem; font-size:.78rem; font-weight:700; }
.res-card__badge{
  position:absolute; top:.7rem; left:.7rem; padding:.35rem .8rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); font-size:.7rem; font-weight:800; color:var(--navy-700);
}
.res-card__body{ padding:var(--sp-3); }
.res-card__title{ font-size:1rem; font-weight:700; color:var(--ink-800); line-height:1.35; margin-bottom:.5rem; font-family:var(--font-body); }
.res-card__author{ display:flex; align-items:center; gap:.4rem; color:var(--ink-500); font-size:.82rem; margin-bottom:.7rem; }
.res-card__desc{ color:var(--ink-500); font-size:.82rem; line-height:1.6; margin-bottom:.8rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.res-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--sp-3); }
.tag{ padding:.35rem .65rem; border-radius:var(--r-pill); background:var(--navy-100); color:var(--navy-800); font-size:.7rem; font-weight:800; }
.tag--date{ background:var(--gold-100); color:var(--warning); }
.res-card__action{
  height:42px; display:flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--r-sm); background:var(--navy-700); color:#fff; font-weight:700; font-size:.85rem;
}
.res-card__action:hover{ background:var(--navy-800); }

.empty{
  grid-column:1/-1; text-align:center; padding:var(--sp-7) var(--sp-4);
  background:var(--white); border:var(--line); border-radius:var(--r-lg);
}
.empty i{ font-size:3.4rem; color:var(--ink-300); margin-bottom:var(--sp-3); }
.empty h3{ font-size:1.2rem; margin-bottom:.4rem; }
.empty p{ color:var(--ink-500); }

.pagination{ display:flex; justify-content:center; gap:.5rem; margin-top:var(--sp-6); flex-wrap:wrap; }
.page-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--white); border:var(--line); font-weight:700; color:var(--ink-700);
}
.page-btn:hover,.page-btn.is-active{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.page-dots{ display:grid; place-items:center; color:var(--ink-400); font-weight:700; padding:0 .3rem; }

/* ---------------------------------------------------------------------
   10. TOP RESOURCES (download / view leaderboards)
--------------------------------------------------------------------- */

.top-resources{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
.resource-panel{ padding:var(--sp-4); }

.top-resources__title{ font-size:var(--step-h1); margin:var(--sp-3) 0; color:var(--ink-800);}

.resource-panel__head{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.resource-panel__icon{
  width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center;
  font-size:1.15rem; background:var(--navy-100); color:var(--navy-700); flex-shrink:0;
}
.resource-panel__head h3{ font-size:1.1rem; }
.resource-panel__head p{ color:var(--ink-500); font-size:.82rem; margin-top:.15rem; }

.res-row{ position:relative; display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2); border-radius:var(--r-md); margin-bottom:.7rem; transition:.25s; }
.res-row:hover{ background:var(--ink-50); }
.res-row__cover{ width:58px; height:70px; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; background:var(--navy-50); display:grid; place-items:center; color:var(--navy-600); }
.res-row__cover img{ width:100%; height:100%; object-fit:cover; }
.res-row__info{ min-width:0; flex:1; }
.res-row__info h4{ font-size:.92rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-body); }
.res-row__info p{ color:var(--ink-500); font-size:.78rem; margin:.3rem 0 .5rem; }
.res-row__stats{ display:flex; gap:.9rem; font-size:.76rem; color:var(--ink-600); font-weight:700; }
.res-row__stats i{ color:var(--navy-600); margin-right:.25rem; }
.res-row__rank{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--navy-700); color:#fff; font-size:.72rem; font-weight:800;
}

/* ---------------------------------------------------------------------
   11. LEADERBOARD
--------------------------------------------------------------------- */

.score-formula{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-bottom:var(--sp-6); }
.score-formula div{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:var(--sp-3); border-radius:var(--r-md); background:var(--white); border:var(--line);
  font-weight:700; color:var(--ink-600); font-size:.9rem;
}
.score-formula i{ color:var(--navy-600); }
.score-formula strong{ color:var(--ink-800); }

.ranking-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.ranking-card{
  display:grid; grid-template-columns:60px 76px 1fr 170px; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4); border-radius:var(--r-lg); width:100%; max-width:100%; overflow:hidden;
}
.ranking-card.is-top{ border:2px solid var(--gold); background:linear-gradient(135deg,#fff,var(--gold-100)); }

.rank-num{ font-family:var(--font-mono); font-size:1.6rem; font-weight:700; color:var(--ink-300); text-align:center; }
.is-top .rank-num{ color:var(--gold-dark); }
.is-top .rank-num i{ display:block; font-size:1.3rem; margin-bottom:.2rem; }

.rank-photo{
  width:72px; height:72px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-size:1.5rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
}
.rank-photo img{ width:100%; height:100%; object-fit:cover; }

.rank-profile h3{ font-size:1.15rem; margin-bottom:.4rem; }
.rank-profile__cat{ display:flex; align-items:center; gap:.5rem; color:var(--ink-500); font-size:.85rem; }

.rank-stats{ display:flex; gap:.7rem; margin-top:var(--sp-3); flex-wrap:wrap; }
.rank-stat-item{ min-width:88px; padding:.7rem; border-radius:var(--r-sm); background:var(--ink-50); text-align:center; }
.rank-stat-item i{ color:var(--navy-600); font-size:.85rem; }
.rank-stat-item label{ display:block; margin-top:.3rem; font-size:.68rem; color:var(--ink-500); }
.rank-stat-item strong{ display:block; margin-top:.2rem; font-size:.95rem; color:var(--ink-900); }

.rank-score{
  padding:var(--sp-3); border-radius:var(--r-md); text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
}
.rank-score span{ display:block; font-size:.72rem; opacity:.85; }
.rank-score strong{ display:block; margin-top:.4rem; font-size:1.7rem; font-weight:700; }

/* ---------------------------------------------------------------------
   12. CTA
--------------------------------------------------------------------- */

.cta{
  position:relative; padding:var(--sp-8) 0; overflow:hidden;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
}
.cta::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
}
.cta__content{ position:relative; z-index:2; max-width:820px; margin:auto; text-align:center; }
.cta__badge{
  display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.3rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff;
  font-size:.85rem; font-weight:700; margin-bottom:var(--sp-4); backdrop-filter:blur(10px);
}
.cta__badge i{ color:var(--gold); }
.cta h2{ color:#fff; font-size:var(--step-display); letter-spacing:-.02em; margin-bottom:var(--sp-3); }
.cta p{ color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.85; margin-bottom:var(--sp-5); }
.cta__actions{ display:flex; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.cta__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.cta__stats div{ padding:var(--sp-3); border-radius:var(--r-md); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.cta__stats strong{ display:block; font-family:var(--font-mono); font-size:1.7rem; color:var(--gold); font-weight:700; }
.cta__stats span{ color:rgba(255,255,255,.75); font-size:.85rem; }

/* ---------------------------------------------------------------------
   13. FACULTY
--------------------------------------------------------------------- */

.faculty__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-5); max-width:720px; margin-inline:auto; }
.faculty__stats .card{ padding:var(--sp-4); text-align:center; }
.faculty__stats i{ font-size:1.4rem; color:var(--navy-600); margin-bottom:.6rem; display:block; }
.faculty__stats h3{ font-size:1.9rem; }
.faculty__stats span{ color:var(--ink-500); font-size:.85rem; }

.marquee{ width:100%; overflow:hidden; position:relative; mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent); }
.marquee__track{ display:flex; width:max-content; gap:var(--sp-4); padding:var(--sp-3) 0; animation:scroll-x 48s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (hover:none){ .marquee{ overflow-x:auto; } .marquee__track{ animation:none; } }

.faculty-card{ width:260px; flex-shrink:0; padding:var(--sp-4); text-align:center; }
.faculty-card__image{ position:relative; display:flex; justify-content:center; margin-bottom:var(--sp-3); }
.faculty-card__ring{
  width:110px; height:110px; padding:4px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--navy-500));
}
.faculty-card__ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:4px solid #fff; }
.faculty-card__status{ position:absolute; bottom:6px; right:calc(50% - 52px); width:16px; height:16px; border-radius:50%; background:var(--success); border:3px solid #fff; }
.faculty-card h3{ font-size:1.05rem; margin-bottom:.6rem; font-family:var(--font-body); }
.faculty-card h3 i{ color:var(--navy-600); font-size:.85rem; margin-left:.3rem; }
.faculty-card__role,.faculty-card__dept{ display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.85rem; color:var(--ink-500); margin-top:.5rem; }
.faculty-card__role i,.faculty-card__dept i{ color:var(--navy-600); }
.faculty-card__tag{ display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--sp-3); padding:.45rem .9rem; border-radius:var(--r-pill); background:var(--navy-100); color:var(--navy-700); font-size:.68rem; font-weight:800; text-transform:uppercase; }

/* ---------------------------------------------------------------------
   14. TESTIMONIALS
--------------------------------------------------------------------- */

.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.testimonial-card{ padding:var(--sp-4); }
.testimonial-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.testimonial-card__quote{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy-700); color:#fff; font-size:1.3rem;
}
.testimonial-card__stars{ display:flex; gap:.2rem; color:var(--gold); }
.testimonial-card__msg{ color:var(--ink-600); font-size:.94rem; line-height:1.8; margin-bottom:var(--sp-3); }
.read-more{ display:inline-block; margin-top:.5rem; background:none; border:none; color:var(--navy-600); font-weight:700; font-size:.82rem; cursor:pointer; }
.read-more:hover{ color:var(--navy-900); }
.testimonial-card__user{ display:flex; align-items:center; gap:var(--sp-3); padding-top:var(--sp-3); border-top:var(--line); }
.testimonial-card__avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.testimonial-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.testimonial-card__user h5{ font-size:.95rem; margin-bottom:.3rem; font-family:var(--font-body); }
.testimonial-card__user span{ display:flex; align-items:center; gap:.4rem; color:var(--ink-500); font-size:.8rem; }

.empty-feedback{ grid-column:1/-1; text-align:center; padding:var(--sp-7) var(--sp-4); }
.empty-feedback i{ font-size:3rem; color:var(--ink-300); margin-bottom:var(--sp-3); }
.empty-feedback h3{ font-size:1.2rem; margin-bottom:.4rem; }
.empty-feedback p{ color:var(--ink-500); }

/* ---------------------------------------------------------------------
   15. SCROLL-REVEAL (progressive enhancement, JS toggles .is-visible)
--------------------------------------------------------------------- */

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------------------------------------------------------------------
   16. RESPONSIVE — mobile-first breakpoints, consolidated once
--------------------------------------------------------------------- */

@media (max-width:1100px){
  .hero__grid{ grid-template-columns:1fr; }
  .certificate__card{ grid-template-columns:80px 1fr; }
  .certificate__preview{ grid-column:1/-1; margin-top:var(--sp-4); }
  .top-resources{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .stat-row{ grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr; }
  .toolbar__form{ grid-template-columns:1fr; }
  .testimonial-grid{ grid-template-columns:1fr 1fr; }
  .ranking-card{ grid-template-columns:50px 66px 1fr; }
  .rank-score{ grid-column:1/-1; }
}

@media (max-width:760px){
  .section{ padding:var(--sp-6) 0; }
  .cta{ padding:var(--sp-7) 0; }
  .certificate__card{ display:flex; flex-direction:column; text-align:center; padding:var(--sp-4); }
  .certificate__features{ text-align:left; }
  .btn--block-mobile{ width:100%; }
  .hero__actions,.cta__actions{ flex-direction:column; }
  .hero__actions .btn,.cta__actions .btn{ width:100%; }
  .res-grid{ grid-template-columns:1fr; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .cta__stats{ grid-template-columns:1fr; }
  .faculty__stats{ grid-template-columns:1fr; }
  .score-formula{ grid-template-columns:1fr; }
  .ranking-card{ display:flex; flex-direction:column; text-align:center; }
  .rank-profile__cat{ justify-content:center; }
  .rank-stats{ justify-content:center; }
  .panel{ padding:var(--sp-4); }
  .panel__head{ flex-direction:column; }
}

@media (max-width:480px){
  .hero__title,.cta h2{ font-size:2rem; }
  .certificate__paper{ min-height:280px; }
  .stat-card strong{ font-size:1.3rem; }
}

/* ---------------------------------------------------------------------
   17. PRINT
--------------------------------------------------------------------- */

@media print{
  .cta,.marquee,.hero__actions,.toolbar,.pagination{ display:none; }
  .card,.panel{ box-shadow:none; border:1px solid #ccc; }
}




/*==================================================
    RESULTS SECTION
==================================================*/

.results-section{
    position:relative;
    padding:var(--space-8) 0;
    background:
    radial-gradient(circle at top right,var(--blue-100),transparent 40%),
    radial-gradient(circle at bottom left,#ffffff,transparent 45%),
    linear-gradient(180deg,var(--gray-25),var(--white));
    overflow:hidden;
}

.results-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(59,130,246,.06);
    border-radius:50%;
    top:-180px;
    right:-120px;
    filter:blur(20px);
}

.results-section::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(244,197,66,.08);
    border-radius:50%;
    bottom:-160px;
    left:-100px;
    filter:blur(25px);
}

.section-container{
    width:min(1300px,92%);
    margin:auto;
    position:relative;
    z-index:2;
}


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

.results-header{
    text-align:center;
    margin-bottom:55px;
}

.results-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    background:var(--blue-100);
    color:var(--blue-700);
    border-radius:100px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.results-header h2{
    margin:22px 0 15px;
    font-size:clamp(2.2rem,4vw,var(--display));
    color:var(--gray-900);
    font-weight:800;
    letter-spacing:-1px;
}

.results-header p{
    max-width:760px;
    margin:auto;
    color:var(--gray-500);
    font-size:var(--body);
    line-height:1.8;
}


/*==================================================
    PERFORMANCE RULE
==================================================*/

.performance-rule{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:55px;
}

.performance-rule div{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(18px);
    border:var(--border);
    border-radius:var(--radius-lg);
    padding:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    color:var(--gray-700);
    font-weight:700;
    box-shadow:var(--shadow);
    transition:.35s;
}

.performance-rule div:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
}

.performance-rule strong{
    color:var(--blue-700);
}


/*==================================================
    CARDS
==================================================*/

.performer-list{
    display:grid;
    gap:28px;
}

.performer-card{
    position:relative;
    display:grid;
    grid-template-columns:90px 90px 1fr auto;
    gap:28px;
    align-items:center;

    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px);

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

    border-radius:28px;
    padding:28px;

    box-shadow:var(--shadow);

    transition:.45s;
    overflow:hidden;
}

.performer-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.25),
    transparent);
    transform:translateX(-120%);
    transition:1s;
}

.performer-card:hover::before{
    transform:translateX(120%);
}

.performer-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}


/*==================================================
    WINNER CARD
==================================================*/

.performer-card.winner{

    background:
    linear-gradient(135deg,#fffdf4,#fff8de);

    border:2px solid rgba(244,197,66,.45);

    box-shadow:
    0 18px 55px rgba(224,181,54,.18);

}

.performer-card.winner::after{
    content:"TOP PERFORMER";
    position:absolute;
    top:20px;
    right:-45px;

    background:linear-gradient(135deg,var(--yellow),var(--yellow-dark));
    color:#fff;

    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;

    padding:8px 60px;
    transform:rotate(40deg);
}


/*==================================================
    RANK
==================================================*/

.student-rank{
    width:72px;
    height:72px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
    color:#fff;

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

    font-size:20px;
    font-weight:800;

    box-shadow:
    0 10px 30px rgba(30,99,196,.25);
}

.student-rank i{
    color:var(--yellow);
    font-size:18px;
    margin-bottom:3px;
}


/*==================================================
    AVATAR
==================================================*/

.student-avatar{
    width:90px;
    height:90px;
    border-radius:50%;
    overflow:hidden;

    background:
    linear-gradient(135deg,var(--blue-700),var(--blue-500));

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

    color:#fff;
    font-size:32px;
    font-weight:800;

    border:4px solid #fff;

    box-shadow:var(--shadow);
}

.student-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/*==================================================
    INFO
==================================================*/

.student-info h3{
    margin:0;
    color:var(--gray-900);
    font-size:1.45rem;
}

.category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:8px;

    color:var(--gray-500);
    font-size:15px;
}


/*==================================================
    STATS
==================================================*/

.student-stats{

    display:grid;

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

    gap:18px;

    margin-top:26px;
}

.stat{

    background:linear-gradient(180deg,#fff,var(--gray-50));

    border:var(--border);

    border-radius:18px;

    padding:18px;

    text-align:center;

    transition:.35s;
}

.stat:hover{

    transform:translateY(-4px);

    border-color:var(--blue-500);

}

.stat i{

    color:var(--blue-600);

    font-size:20px;

    margin-bottom:10px;

    display:block;
}

.stat label{

    display:block;

    color:var(--gray-500);

    font-size:13px;

    margin-bottom:8px;
}

.stat strong{

    display:block;

    color:var(--gray-900);

    font-size:22px;

    font-weight:800;
}


/*==================================================
    PERFORMANCE SCORE
==================================================*/

.performance-score{

    min-width:170px;

    text-align:center;

    background:
    linear-gradient(135deg,var(--blue-700),var(--blue-500));

    color:#fff;

    padding:22px;

    border-radius:22px;

    box-shadow:
    0 15px 35px rgba(30,99,196,.28);
}

.performance-score span{

    display:block;

    font-size:13px;

    opacity:.9;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:10px;
}

.performance-score strong{

    font-size:34px;

    font-weight:800;

    letter-spacing:-1px;
}


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

@media(max-width:992px){

.performance-rule{
grid-template-columns:1fr;
}

.performer-card{

grid-template-columns:1fr;

text-align:center;

justify-items:center;

}

.student-info{
width:100%;
}

.student-stats{

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

}

.performance-score{
width:100%;
}

}


@media(max-width:768px){

.results-section{
padding:70px 0;
}

.results-header h2{
font-size:2.3rem;
}

.student-stats{

grid-template-columns:1fr;

}

.student-avatar{

width:85px;
height:85px;

}

.student-rank{

width:68px;
height:68px;

}

.performance-score strong{

font-size:28px;

}

}


@media(max-width:480px){

.section-container{
width:94%;
}

.performer-card{

padding:20px;

border-radius:22px;

}

.results-header p{

font-size:15px;

}

.performance-rule div{

padding:18px;

font-size:14px;

}

.stat{

padding:16px;

}

.performance-score{

padding:18px;

}

}






/*=========================================
    ROSTER STRIP
=========================================*/

.roster-strip{
    position:relative;
    padding:var(--space-7) 0;
    background:
        radial-gradient(circle at top left,var(--blue-100),transparent 35%),
        linear-gradient(180deg,var(--gray-25),var(--white));
    overflow:hidden;
}

.roster-strip::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(59,130,246,.06);
    top:-180px;
    right:-140px;
    filter:blur(30px);
}

.roster-strip::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(244,197,66,.08);
    bottom:-170px;
    left:-120px;
    filter:blur(30px);
}


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

.section-head.center{
    text-align:center;
    margin-bottom:50px;
    position:relative;
    z-index:2;
}

.section-head .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:var(--blue-100);
    color:var(--blue-700);
    border-radius:100px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.section-head h2{
    margin-top:18px;
    font-size:clamp(2rem,4vw,var(--display));
    color:var(--gray-900);
    font-weight:800;
    letter-spacing:-1px;
}


/*=========================================
    SCROLL AREA
=========================================*/

.roster-scroll{
    width:100%;
    overflow:hidden;
    position:relative;
}

.roster-scroll::before,
.roster-scroll::after{
    content:"";
    position:absolute;
    top:0;
    width:140px;
    height:100%;
    z-index:3;
    pointer-events:none;
}

.roster-scroll::before{
    left:0;
    background:linear-gradient(to right,var(--gray-25),transparent);
}

.roster-scroll::after{
    right:0;
    background:linear-gradient(to left,var(--gray-25),transparent);
}


/*=========================================
    AUTO SLIDER
=========================================*/

.roster-track{
    display:flex;
    align-items:center;
    gap:28px;
    width:max-content;
    animation:rosterSlide 45s linear infinite;
    padding:10px 0;
}

.roster-scroll:hover .roster-track{
    animation-play-state:paused;
}

@keyframes rosterSlide{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


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

.roster-card{

    width:240px;
    flex-shrink:0;

    background:rgba(255,255,255,.82);
    backdrop-filter:blur(16px);

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

    border-radius:var(--radius-lg);

    padding:28px 22px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.roster-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        130deg,
        transparent,
        rgba(255,255,255,.35),
        transparent);

    transform:translateX(-120%);

    transition:1s;

}

.roster-card:hover::before{

    transform:translateX(120%);

}

.roster-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

    border-color:rgba(59,130,246,.25);

}


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

.roster-card img{

    width:105px;
    height:105px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid white;

    box-shadow:
        0 12px 30px rgba(15,23,42,.12);

    transition:.4s;

    background:var(--gray-100);

}

.roster-card:hover img{

    transform:scale(1.08);

}


/*=========================================
    NAME
=========================================*/

.roster-card h4{

    margin:20px 0 8px;

    font-size:1.2rem;

    color:var(--gray-900);

    font-weight:800;

}

.roster-card .sub{

    color:var(--gray-500);

    font-size:15px;

    margin-bottom:18px;

}


/*=========================================
    CATEGORY BADGE
=========================================*/

.roster-card .tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:100px;

    background:
        linear-gradient(
        135deg,
        var(--blue-700),
        var(--blue-500));

    color:white;

    font-size:13px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    box-shadow:
        0 10px 25px rgba(30,99,196,.25);

}


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

@media(max-width:992px){

.roster-card{

width:210px;

padding:24px 18px;

}

.roster-track{

gap:22px;

animation-duration:38s;

}

}


@media(max-width:768px){

.roster-strip{

padding:65px 0;

}

.section-head h2{

font-size:2.2rem;

}

.roster-card{

width:190px;

}

.roster-card img{

width:90px;
height:90px;

}

.roster-track{

animation-duration:30s;

}

}


@media(max-width:480px){

.roster-card{

width:170px;

padding:18px;

}

.roster-card h4{

font-size:1rem;

}

.roster-card .sub{

font-size:14px;

}

.roster-card .tag{

font-size:12px;

padding:8px 15px;

}

.roster-scroll::before,
.roster-scroll::after{

width:55px;

}

}

.roster-card{

    position:relative;

    width:280px;
    flex-shrink:0;

    padding:34px 24px 28px;

    border-radius:32px;

    overflow:hidden;

    background:
        linear-gradient(
        145deg,
        rgba(255,255,255,.96),
        rgba(248,250,252,.92));

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

    backdrop-filter:blur(30px);

    box-shadow:

    0 20px 60px rgba(15,23,42,.08),
    inset 0 1px rgba(255,255,255,.8);

    transition:
    transform .45s,
    box-shadow .45s;

}

.roster-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:inherit;

background:
linear-gradient(
90deg,

var(--blue-600),

var(--yellow),

var(--blue-500),

var(--blue-700),

var(--yellow)

);

background-size:300%;

animation:borderMove 6s linear infinite;

z-index:-2;

}

.roster-card::after{

content:"";

position:absolute;

inset:2px;

background:white;

border-radius:30px;

z-index:-1;

}

@keyframes borderMove{

0%{background-position:0%;}

100%{background-position:300%;}

}

.roster-card:hover{

transform:
translateY(-15px)
scale(1.03);

box-shadow:

0 35px 90px rgba(30,99,196,.15),

0 0 80px rgba(59,130,246,.18);

}

.roster-card img{

width:120px;
height:120px;

border-radius:50%;

padding:5px;

background:
linear-gradient(
135deg,
var(--yellow),
var(--blue-500));

object-fit:cover;

transition:.45s;

}

.roster-card:hover img{

transform:
scale(1.08)
rotate(4deg);

}

.roster-card img{

position:relative;

}

.roster-card::marker{}

.roster-card::before{

...
}

.roster-card .status{

position:absolute;

top:108px;

right:78px;

width:18px;

height:18px;

background:var(--success);

border:4px solid white;

border-radius:50%;

}

.tag{

display:inline-flex;

padding:10px 22px;

border-radius:50px;

background:

rgba(59,130,246,.08);

color:var(--blue-700);

font-weight:700;

backdrop-filter:blur(20px);

border:1px solid rgba(59,130,246,.15);

}

.roster-strip{

background:

radial-gradient(circle at 20% 20%,#EAF3FF,transparent 30%),

radial-gradient(circle at 90% 80%,rgba(244,197,66,.12),transparent 30%),

linear-gradient(
180deg,
#ffffff,
#F8FAFC);

}

.roster-strip::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:

radial-gradient(circle,
rgba(59,130,246,.08),
transparent);

top:-250px;

left:-120px;

filter:blur(50px);

}

.roster-card h4{

font-size:1.35rem;

font-weight:800;

letter-spacing:-.4px;

margin-top:24px;

color:var(--gray-900);

}

.sub{

font-size:15px;

font-weight:500;

color:var(--gray-500);

}

.roster-track{

display:flex;

gap:32px;

width:max-content;

animation:marquee 55s linear infinite;

will-change:transform;

}

.roster-scroll:hover .roster-track{

animation-play-state:paused;

}

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.roster-card .shine{

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,.55),
transparent 80%);

transform:translateX(-150%);

}

.roster-card:hover .shine{

animation:shine .9s;

}

@keyframes shine{

100%{

transform:translateX(150%);

}

}


/*====================================================
    PREMIUM CTA SECTION
====================================================*/

.cta{
    position:relative;
    padding:120px 0;
    overflow:hidden;

    background:
        linear-gradient(135deg,
        var(--blue-900),
        var(--blue-700));

    isolation:isolate;
}

/*------------------------------------
Background Effects
------------------------------------*/

.cta::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
        120deg,
        rgba(255,255,255,.05),
        transparent 35%,
        rgba(255,255,255,.04));

    pointer-events:none;
}

.cta::after{
    content:"";
    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

    background-size:55px 55px;

    opacity:.25;

    mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
}

/*------------------------------------
Floating Blurs
------------------------------------*/

.cta-blur{

    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
    z-index:0;

}

.cta-blur-1{

    width:420px;
    height:420px;

    background:rgba(244,197,66,.18);

    top:-180px;
    left:-120px;

}

.cta-blur-2{

    width:380px;
    height:380px;

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

    bottom:-160px;
    right:-140px;

}

/*------------------------------------
Content
------------------------------------*/

.cta-content{

    position:relative;
    z-index:5;

    max-width:920px;

    margin:auto;

    text-align:center;

}

/*------------------------------------
Badge
------------------------------------*/

.cta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);

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

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:30px;

}

.cta-badge i{

    color:var(--yellow);

}

/*------------------------------------
Heading
------------------------------------*/

.cta h2{

    color:#fff;

    font-size:clamp(2.8rem,5vw,4.6rem);

    line-height:1.1;

    font-weight:900;

    letter-spacing:-2px;

    margin-bottom:24px;

}

/*------------------------------------
Paragraph
------------------------------------*/

.cta p{

    max-width:760px;

    margin:0 auto 45px;

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

    font-size:1.1rem;

    line-height:1.9;

}

/*====================================================
Buttons
====================================================*/

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

/*------------------------------------*/

.cta .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:210px;

    padding:17px 34px;

    border-radius:999px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.35s;

}

/*------------------------------------*/

.cta .btn-primary{

    background:linear-gradient(
        135deg,
        var(--yellow),
        var(--yellow-dark));

    color:var(--gray-900);

    box-shadow:
        0 20px 45px rgba(244,197,66,.35);

}

.cta .btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 30px 60px rgba(244,197,66,.45);

}

/*------------------------------------*/

.cta .btn-outline{

    color:#fff;

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

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

    backdrop-filter:blur(15px);

}

.cta .btn-outline:hover{

    background:#fff;

    color:var(--blue-900);

    transform:translateY(-5px);

}

/*====================================================
Statistics
====================================================*/

.cta-stats{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.cta-stats div{

    padding:26px;

    border-radius:22px;

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

    backdrop-filter:blur(20px);

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

    transition:.35s;

}

.cta-stats div:hover{

    transform:translateY(-8px);

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

}

.cta-stats strong{

    display:block;

    font-size:2rem;

    color:var(--yellow);

    font-weight:800;

    margin-bottom:10px;

}

.cta-stats span{

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

    font-size:15px;

}

/*====================================================
Animation
====================================================*/

@keyframes floatGlow{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

.cta-blur-1{

    animation:floatGlow 10s ease-in-out infinite;

}

.cta-blur-2{

    animation:floatGlow 14s ease-in-out infinite reverse;

}

/*====================================================
Responsive
====================================================*/

@media (max-width:992px){

.cta{

padding:90px 0;

}

.cta-stats{

grid-template-columns:1fr;

gap:18px;

}

}

@media (max-width:768px){

.cta h2{

font-size:2.5rem;

}

.cta p{

font-size:1rem;

}

.cta-buttons{

flex-direction:column;

}

.cta .btn{

width:100%;

max-width:340px;

}

}

@media (max-width:480px){

.cta{

padding:70px 0;

}

.cta-badge{

font-size:12px;

padding:10px 18px;

}

.cta h2{

font-size:2rem;

}

.cta p{

font-size:15px;

line-height:1.8;

}

.cta-stats strong{

font-size:1.6rem;

}

.cta-stats div{

padding:20px;

}

}

/*=========================================================
    FACULTY SECTION
=========================================================*/

.faculty-section{
    position:relative;
    padding:120px 0;
    overflow:hidden;

    background:
        linear-gradient(
        180deg,
        var(--gray-25),
        #ffffff);

    isolation:isolate;
}

/*==============================================
Background Decorations
==============================================*/

.faculty-bg{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;

    z-index:0;

}

.faculty-bg-1{

    width:520px;
    height:520px;

    top:-240px;
    left:-180px;

    background:
    rgba(59,130,246,.08);

    animation:bgFloatOne 18s ease-in-out infinite;

}

.faculty-bg-2{

    width:420px;
    height:420px;

    bottom:-180px;
    right:-120px;

    background:
    rgba(244,197,66,.12);

    animation:bgFloatTwo 22s ease-in-out infinite;

}

@keyframes bgFloatOne{

0%,100%{

transform:
translateY(0)
translateX(0);

}

50%{

transform:
translateY(30px)
translateX(20px);

}

}

@keyframes bgFloatTwo{

0%,100%{

transform:
translateY(0)
translateX(0);

}

50%{

transform:
translateY(-25px)
translateX(-20px);

}

}

/*==============================================
Container
==============================================*/

.faculty-section .section-container{

    position:relative;

    z-index:2;

}

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

.faculty-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

/*==============================================
Section Badge
==============================================*/

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:999px;

    background:

    rgba(59,130,246,.08);

    border:1px solid rgba(59,130,246,.15);

    color:var(--blue-700);

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    backdrop-filter:blur(20px);

    box-shadow:
    0 10px 30px rgba(15,23,42,.05);

    margin-bottom:28px;

}

.section-badge i{

    font-size:16px;

    color:var(--yellow-dark);

}

/*==============================================
Heading
==============================================*/

.faculty-header h2{

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

    font-weight:900;

    color:var(--gray-900);

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:24px;

}

.faculty-header h2 span{

    color:var(--blue-600);

    position:relative;

}

.faculty-header h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:10px;

    border-radius:10px;

    background:

    rgba(59,130,246,.12);

}

/*==============================================
Description
==============================================*/

.faculty-header p{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:var(--gray-500);

}

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

.faculty-stats{

    display:grid;

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

    gap:24px;

    margin-top:60px;

}

/*==============================================
Stat Card
==============================================*/

.stat-box{

    position:relative;

    padding:34px 28px;

    border-radius:26px;

    background:

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

    backdrop-filter:blur(20px);

    border:

    1px solid rgba(255,255,255,.8);

    box-shadow:

    var(--shadow);

    transition:

    transform .35s,

    box-shadow .35s;

    overflow:hidden;

}

/* Animated Light */

.stat-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );

    transform:translateX(-130%);

    transition:1s;

}

.stat-box:hover::before{

    transform:translateX(130%);

}

/* Hover */

.stat-box:hover{

    transform:

    translateY(-8px);

    box-shadow:

    var(--shadow-lg);

}

/*==============================================
Icon
==============================================*/

.stat-box i{

    width:62px;

    height:62px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 18px;

    background:

    linear-gradient(
    135deg,
    var(--blue-700),
    var(--blue-500));

    color:white;

    font-size:24px;

    box-shadow:

    0 12px 30px rgba(30,99,196,.22);

}

/*==============================================
Numbers
==============================================*/

.stat-box h3{

    margin:0;

    font-size:2.5rem;

    font-weight:900;

    color:var(--gray-900);

}

.stat-box span{

    display:block;

    margin-top:12px;

    color:var(--gray-500);

    font-size:15px;

    font-weight:600;

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:992px){

.faculty-section{

padding:90px 0;

}

.faculty-stats{

grid-template-columns:1fr;

gap:20px;

}

}

@media(max-width:768px){

.faculty-header h2{

font-size:2.4rem;

}

.faculty-header p{

font-size:16px;

line-height:1.8;

}

.section-badge{

font-size:12px;

padding:10px 18px;

}

}

@media(max-width:480px){

.faculty-section{

padding:70px 0;

}

.stat-box{

padding:28px 20px;

}

.stat-box h3{

font-size:2rem;

}

}

/*=========================================================
    FACULTY CAROUSEL AREA
=========================================================*/

.faculty-scroll{

    width:100%;

    overflow:hidden;

    position:relative;

    padding:25px 0;

}


/* Fade edges */

.faculty-scroll::before,
.faculty-scroll::after{

    content:"";

    position:absolute;

    top:0;

    width:150px;

    height:100%;

    z-index:5;

    pointer-events:none;

}


.faculty-scroll::before{

    left:0;

    background:
    linear-gradient(
    to right,
    var(--gray-25),
    transparent);

}


.faculty-scroll::after{

    right:0;

    background:
    linear-gradient(
    to left,
    var(--gray-25),
    transparent);

}


/*=========================================================
    TRACK
=========================================================*/

.faculty-track{

    display:flex;

    width:max-content;

    gap:32px;

    padding:20px 0;

}


/*=========================================================
    FACULTY CARD
=========================================================*/

.faculty-card{

    position:relative;

    width:310px;

    flex-shrink:0;

    padding:30px 25px;

    border-radius:32px;

    background:

    rgba(255,255,255,.82);

    backdrop-filter:

    blur(25px);

    border:

    1px solid rgba(255,255,255,.8);


    box-shadow:

    0 20px 60px rgba(15,23,42,.08);


    overflow:hidden;


    transition:

    transform .45s ease,

    box-shadow .45s ease;

}


/*==============================================
Animated Gradient Border
==============================================*/


.faculty-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;


    background:

    linear-gradient(

    120deg,

    var(--blue-600),

    var(--yellow),

    var(--blue-500),

    var(--blue-700)

    );


    background-size:300% 300%;


    animation:

    cardBorder 8s linear infinite;


    z-index:-2;

}


@keyframes cardBorder{

0%{

background-position:

0% 50%;

}

50%{

background-position:

100% 50%;

}

100%{

background-position:

0% 50%;

}

}



/* Inner glass layer */

.faculty-card::after{

    content:"";

    position:absolute;

    inset:2px;

    border-radius:30px;

    background:

    rgba(255,255,255,.92);

    z-index:-1;

}



/*==============================================
Hover
==============================================*/


.faculty-card:hover{

    transform:

    translateY(-15px);


    box-shadow:

    0 35px 90px rgba(30,99,196,.18);

}


/* Light effect */

.card-light{

    position:absolute;

    inset:0;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.65),

    transparent

    );


    transform:

    translateX(-140%);


    transition:1s;

}


.faculty-card:hover .card-light{

    transform:

    translateX(140%);

}


/*=========================================================
    IMAGE AREA
=========================================================*/

.faculty-image{

    position:relative;

    display:flex;

    justify-content:center;

    margin-bottom:28px;

}



.image-ring{

    position:relative;

    width:145px;

    height:145px;

    padding:6px;


    border-radius:50%;


    background:

    linear-gradient(

    135deg,

    var(--yellow),

    var(--blue-500)

    );


    box-shadow:

    0 20px 45px rgba(30,99,196,.22);


    transition:.45s;

}



.faculty-card:hover .image-ring{

    transform:

    rotate(6deg)

    scale(1.05);

}


.image-ring img{

    width:100%;

    height:100%;


    border-radius:50%;


    object-fit:cover;


    border:

    5px solid white;

}


/*=========================================================
    Status Indicator
=========================================================*/


.status-dot{

    position:absolute;


    bottom:12px;


    right:calc(50% - 70px);


    width:22px;

    height:22px;


    border-radius:50%;


    background:

    var(--success);


    border:

    5px solid white;


    box-shadow:

    0 0 0 5px rgba(22,163,74,.15);


    animation:

    pulseStatus 2s infinite;

}



@keyframes pulseStatus{

0%{

box-shadow:

0 0 0 0 rgba(22,163,74,.35);

}


70%{

box-shadow:

0 0 0 12px rgba(22,163,74,0);

}


100%{

box-shadow:

0 0 0 0 rgba(22,163,74,0);

}

}



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


.faculty-content{

    text-align:center;

}


.faculty-content h3{

    margin:0 0 15px;


    font-size:1.35rem;


    font-weight:850;


    color:

    var(--gray-900);


    letter-spacing:-.4px;

}



.verified{

    color:

    var(--blue-600);

    font-size:15px;

    margin-left:5px;

}


/*=========================================================
    ROLE
=========================================================*/


.faculty-role,
.faculty-department{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    color:

    var(--gray-600);


    font-size:15px;


    margin-top:12px;


}


.faculty-role i,
.faculty-department i{

    color:

    var(--blue-600);

}


/*=========================================================
    Footer Badge
=========================================================*/


.faculty-footer{

    margin-top:25px;

}



.faculty-tag{

    display:inline-flex;


    align-items:center;


    gap:8px;


    padding:10px 18px;


    border-radius:999px;


    background:

    rgba(59,130,246,.08);


    color:

    var(--blue-700);


    border:

    1px solid rgba(59,130,246,.15);


    font-size:12px;


    font-weight:800;


    text-transform:uppercase;


    letter-spacing:.08em;

}


.faculty-tag i{

    color:

    var(--yellow-dark);

}



/*=========================================================
Responsive
=========================================================*/


@media(max-width:768px){


.faculty-card{

    width:270px;

    padding:25px 20px;

}


.image-ring{

    width:125px;

    height:125px;

}


.faculty-scroll::before,
.faculty-scroll::after{

    width:60px;

}


}



@media(max-width:480px){


.faculty-card{

    width:245px;

}


.faculty-content h3{

    font-size:1.15rem;

}


.faculty-role,
.faculty-department{

    font-size:14px;

}


}


/*=========================================================
    FACULTY INFINITE MARQUEE
=========================================================*/

.faculty-track{

    animation:
    facultyMove 55s linear infinite;

    will-change:transform;

}


/* Pause when user interacts */

.faculty-scroll:hover .faculty-track{

    animation-play-state:paused;

}



/* Infinite movement */

@keyframes facultyMove{


from{

    transform:translateX(0);

}


to{

    transform:translateX(-50%);

}


}



/*=========================================================
    CARD ENTRANCE ANIMATION
=========================================================*/


.reveal{

    opacity:0;

    transform:

    translateY(40px);


    transition:

    opacity .8s ease,

    transform .8s ease;

}


.reveal.active{

    opacity:1;


    transform:

    translateY(0);

}



/*=========================================================
    STAGGER CARD ANIMATION
=========================================================*/


.faculty-card:nth-child(1){

    animation-delay:.1s;

}


.faculty-card:nth-child(2){

    animation-delay:.2s;

}


.faculty-card:nth-child(3){

    animation-delay:.3s;

}


.faculty-card:nth-child(4){

    animation-delay:.4s;

}



@keyframes cardAppear{


from{

opacity:0;

transform:

translateY(50px)

scale(.95);

}


to{

opacity:1;

transform:

translateY(0)

scale(1);

}


}



/*=========================================================
    PREMIUM IMAGE FLOAT EFFECT
=========================================================*/


.faculty-image img{


animation:

imageFloat 6s ease-in-out infinite;


}


@keyframes imageFloat{


0%,100%{

transform:

translateY(0);

}


50%{

transform:

translateY(-8px);

}


}



/*=========================================================
    SHINE EFFECT
=========================================================*/


.faculty-card:hover::before{


animation-duration:

3s;


}



/*=========================================================
    TOUCH DEVICE OPTIMIZATION
=========================================================*/


@media (hover:none){


.faculty-card:hover{

transform:none;

}


.faculty-scroll{

overflow-x:auto;

scroll-behavior:smooth;

scrollbar-width:none;

}


.faculty-scroll::-webkit-scrollbar{

display:none;

}


.faculty-track{

animation:none;

}



}



/*=========================================================
    REDUCED MOTION ACCESSIBILITY
=========================================================*/


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


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

animation-duration:.01ms!important;

animation-iteration-count:1!important;

transition-duration:.01ms!important;

}


}



/*=========================================================
    EXTRA PREMIUM EFFECTS
=========================================================*/


.faculty-card:hover .faculty-role i,
.faculty-card:hover .faculty-department i{

transform:

scale(1.15);

}


.faculty-role i,
.faculty-department i{

transition:.3s;

}



/*=========================================================
    DESKTOP LARGE OPTIMIZATION
=========================================================*/


@media(min-width:1400px){


.faculty-card{

width:330px;

}


.faculty-track{

gap:38px;

}


}


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


@media(max-width:380px){


.faculty-card{

width:230px;

}


.image-ring{

width:115px;

height:115px;

}


.faculty-tag{

font-size:11px;

padding:8px 14px;

}


}


/*=========================================================
    ADVANCED FACULTY PREMIUM EFFECTS
=========================================================*/


/*----------------------------------------------
3D CARD INTERACTION
----------------------------------------------*/

.faculty-card{

    transform-style:preserve-3d;

    perspective:1200px;

}


.faculty-card > *{

    transform:translateZ(20px);

}



/*----------------------------------------------
Premium Hover Glow
----------------------------------------------*/

.faculty-card:hover{

    box-shadow:

    0 40px 100px rgba(15,23,42,.15),

    0 0 40px rgba(59,130,246,.12);

}



/*----------------------------------------------
Image Depth Effect
----------------------------------------------*/

.faculty-card:hover .image-ring{

    box-shadow:

    0 25px 60px rgba(59,130,246,.35),

    0 0 40px rgba(244,197,66,.25);

}



/*=========================================================
    FLOATING PARTICLE DECORATION
=========================================================*/


.faculty-section .section-container::before{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;


    background:

    var(--yellow);


    top:160px;

    left:5%;


    box-shadow:

    180px 80px 0 rgba(59,130,246,.5),

    500px -50px 0 rgba(244,197,66,.4),

    900px 120px 0 rgba(59,130,246,.35);


    animation:

    particleFloat 12s ease-in-out infinite;


    opacity:.6;

}



@keyframes particleFloat{


0%,100%{

transform:

translateY(0);

}


50%{

transform:

translateY(-25px);

}


}



/*=========================================================
    PREMIUM SCROLL MASK
=========================================================*/


.faculty-scroll{

    mask-image:

    linear-gradient(

    to right,

    transparent,

    black 8%,

    black 92%,

    transparent

    );


}



/*=========================================================
    CARD ACTIVE STATE
=========================================================*/


.faculty-card:active{

    transform:

    scale(.97);

}



/*=========================================================
    VERIFIED BADGE ANIMATION
=========================================================*/


.verified{

    animation:

    verifiedPulse 3s infinite;

}



@keyframes verifiedPulse{


0%,100%{

opacity:1;

}


50%{

opacity:.55;

}


}



/*=========================================================
    STATUS DOT PREMIUM EFFECT
=========================================================*/


.status-dot::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;


    background:

    rgba(22,163,74,.25);


    animation:

    statusRing 2s infinite;


}


@keyframes statusRing{


0%{

transform:scale(.8);

opacity:1;

}


100%{

transform:scale(1.8);

opacity:0;

}


}



/*=========================================================
    HEADER MICRO ANIMATION
=========================================================*/


.section-badge:hover{

    transform:

    translateY(-3px);


    box-shadow:

    0 20px 40px rgba(30,99,196,.15);

}



.section-badge{

    transition:.35s;

}



/*=========================================================
    BUTTON-LIKE INTERACTION
=========================================================*/


.faculty-tag{

    transition:.35s;

}


.faculty-tag:hover{

    background:

    var(--blue-600);

    color:white;

    transform:

    translateY(-3px);

}



/*=========================================================
    CARD CONTENT REFINEMENT
=========================================================*/


.faculty-content h3{

    transition:.35s;

}


.faculty-card:hover .faculty-content h3{

    color:

    var(--blue-700);

}



/*=========================================================
    HIGH DPI DISPLAY OPTIMIZATION
=========================================================*/


@media(min-resolution:2dppx){

.faculty-card{

    backdrop-filter:

    blur(30px);

}

}



/*=========================================================
    DARK IMAGE PLACEHOLDER SUPPORT
=========================================================*/


.image-ring img[src*="homes.png"]{

    object-position:center;

    background:

    linear-gradient(

    135deg,

    var(--blue-100),

    var(--gray-100)

    );

}



/*=========================================================
    PRINT VERSION
=========================================================*/


@media print{


.faculty-section{

    background:white!important;

}


.faculty-bg,
.card-light,
.faculty-track{

    animation:none!important;

}


.faculty-card{

    box-shadow:none;

    border:

    1px solid #ddd;

}


}


/*=========================================================
    MODERN TESTIMONIAL SECTION
=========================================================*/

.modern-testimonials{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:

    linear-gradient(
    180deg,
    var(--white),
    var(--gray-25));

    isolation:isolate;

}


/*==============================================
Background Decorative Blurs
==============================================*/


.modern-testimonials::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;


    background:

    rgba(59,130,246,.08);


    top:-250px;

    right:-180px;


    filter:blur(80px);


    z-index:-1;

}


.modern-testimonials::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;


    background:

    rgba(244,197,66,.10);


    bottom:-200px;

    left:-150px;


    filter:blur(80px);


    z-index:-1;

}


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


.testimonial-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}



/*==============================================
Eyebrow
==============================================*/


.testimonial-header .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;


    padding:12px 22px;


    border-radius:999px;


    background:

    rgba(59,130,246,.08);


    border:

    1px solid rgba(59,130,246,.15);


    color:

    var(--blue-700);


    font-size:13px;


    font-weight:800;


    letter-spacing:.12em;


    text-transform:uppercase;


    backdrop-filter:blur(20px);


    margin-bottom:28px;

}


.testimonial-header .eyebrow i{

    color:

    var(--yellow-dark);

}


/*==============================================
Title
==============================================*/


.testimonial-header h2{


    font-size:

    clamp(2.5rem,5vw,4.3rem);


    line-height:1.12;


    letter-spacing:-1.8px;


    font-weight:900;


    color:

    var(--gray-900);


    margin-bottom:24px;


}



/*==============================================
Description
==============================================*/


.testimonial-header p{


    max-width:760px;


    margin:auto;


    color:

    var(--gray-500);


    font-size:18px;


    line-height:1.9;


}



/*=========================================================
    TESTIMONIAL GRID
=========================================================*/


.testimonial-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:32px;


    align-items:start;


}



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


@media(max-width:1100px){


.testimonial-grid{


grid-template-columns:

repeat(2,1fr);


}


}



@media(max-width:768px){


.modern-testimonials{


padding:80px 0;


}


.testimonial-header h2{


font-size:2.4rem;


}


.testimonial-header p{


font-size:16px;


}


.testimonial-grid{


grid-template-columns:1fr;


gap:24px;


}



}


@media(max-width:480px){


.modern-testimonials{


padding:65px 0;


}


.testimonial-header .eyebrow{


font-size:11px;


padding:10px 16px;


}


.testimonial-header h2{


font-size:2rem;


}


}

/*=========================================================
    TESTIMONIAL CARD
=========================================================*/


.modern-testimonial-card{

    position:relative;

    padding:32px;


    border-radius:

    var(--radius-lg);


    background:

    rgba(255,255,255,.82);


    backdrop-filter:

    blur(25px);


    border:

    1px solid rgba(255,255,255,.8);


    box-shadow:

    var(--shadow);


    overflow:hidden;


    transition:

    transform .45s ease,

    box-shadow .45s ease;


}



/*=========================================================
    Animated Border
=========================================================*/


.modern-testimonial-card::before{


    content:"";


    position:absolute;


    inset:-2px;


    border-radius:inherit;


    background:


    linear-gradient(

    120deg,

    var(--blue-600),

    var(--yellow),

    var(--blue-500),

    var(--blue-700)

    );


    background-size:

    300% 300%;


    animation:

    testimonialBorder 8s linear infinite;


    z-index:-2;


}



@keyframes testimonialBorder{


0%{

background-position:

0% 50%;

}


50%{

background-position:

100% 50%;

}


100%{

background-position:

0% 50%;

}


}



/* Inner layer */

.modern-testimonial-card::after{


    content:"";


    position:absolute;


    inset:2px;


    border-radius:inherit;


    background:

    rgba(255,255,255,.94);


    z-index:-1;


}



/*=========================================================
    Hover Effect
=========================================================*/


.modern-testimonial-card:hover{


    transform:

    translateY(-12px);


    box-shadow:


    0 35px 90px rgba(15,23,42,.14),


    0 0 40px rgba(59,130,246,.12);


}



/* Shine */

.modern-testimonial-card::marker{}



.modern-testimonial-card:hover{

    transition:.45s;

}



/*=========================================================
    TOP AREA
=========================================================*/


.testimonial-top{


    display:flex;


    align-items:center;


    justify-content:space-between;


    margin-bottom:25px;


}



/*=========================================================
    QUOTE ICON
=========================================================*/


.quote-circle{


    width:58px;


    height:58px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:


    linear-gradient(

    135deg,

    var(--blue-700),

    var(--blue-500)

    );


    color:white;


    font-size:28px;


    box-shadow:


    0 15px 35px rgba(30,99,196,.25);


    transition:.35s;


}



.modern-testimonial-card:hover .quote-circle{


    transform:

    rotate(-8deg)

    scale(1.08);


}



/*=========================================================
    STARS
=========================================================*/


.testimonial-stars{


    display:flex;


    gap:5px;


}



.testimonial-stars i{


    font-size:18px;


    color:

    var(--yellow);


    filter:

    drop-shadow(
    0 4px 8px rgba(244,197,66,.35));


}



/*=========================================================
    MESSAGE
=========================================================*/


.testimonial-message{


    position:relative;


    color:

    var(--gray-600);


    font-size:16px;


    line-height:1.85;


    margin-bottom:30px;


}



.short-text,
.full-text{


    display:inline;


}



/*=========================================================
    READ MORE BUTTON
=========================================================*/


.read-more{


    display:block;


    margin-top:15px;


    border:none;


    background:


    transparent;


    color:

    var(--blue-600);


    font-weight:700;


    font-size:14px;


    cursor:pointer;


    padding:0;


    transition:.3s;


}



.read-more:hover{


    color:

    var(--blue-900);


    transform:

    translateX(5px);


}



/*=========================================================
    USER PROFILE
=========================================================*/


.testimonial-user{


    display:flex;


    align-items:center;


    gap:16px;


    padding-top:25px;


    border-top:

    1px solid var(--gray-200);


}



/*=========================================================
    STUDENT AVATAR
=========================================================*/


.student-avatar{


    width:68px;


    height:68px;


    flex-shrink:0;


    padding:3px;


    border-radius:50%;


    background:


    linear-gradient(

    135deg,

    var(--yellow),

    var(--blue-500)

    );


}



.student-avatar img{


    width:100%;


    height:100%;


    border-radius:50%;


    object-fit:cover;


    border:

    3px solid white;


}



/*=========================================================
    USER INFO
=========================================================*/


.testimonial-user h5{


    margin:0 0 7px;


    color:

    var(--gray-900);


    font-size:1.05rem;


    font-weight:800;


}



.testimonial-user span{


    display:flex;


    align-items:center;


    gap:7px;


    color:

    var(--gray-500);


    font-size:14px;


}



.testimonial-user span i{


    color:

    var(--blue-600);


}



/*=========================================================
    EMPTY STATE
=========================================================*/


.empty-feedback{


    grid-column:

    1/-1;


    text-align:center;


    padding:60px 30px;


    border-radius:

    var(--radius-lg);


    background:

    rgba(255,255,255,.8);


    border:

    var(--border);


    box-shadow:

    var(--shadow);


}



.empty-feedback i{


    font-size:55px;


    color:

    var(--blue-500);


    margin-bottom:20px;


}



.empty-feedback h3{


    color:

    var(--gray-900);


    font-size:1.5rem;


    margin-bottom:10px;


}



.empty-feedback p{


    color:

    var(--gray-500);


}



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


@media(max-width:768px){


.modern-testimonial-card{


    padding:25px;


}



.quote-circle{


    width:52px;


    height:52px;


    font-size:24px;


}



.testimonial-stars i{


    font-size:16px;


}



}



@media(max-width:480px){


.modern-testimonial-card{


    padding:22px;


    border-radius:22px;


}



.testimonial-top{


    margin-bottom:20px;


}



.testimonial-user h5{


    font-size:1rem;


}



.student-avatar{


    width:58px;


    height:58px;


}



}

/*=========================================================
    TESTIMONIAL REVEAL ANIMATION
=========================================================*/


.modern-testimonial-card.reveal{

    opacity:0;

    transform:

    translateY(45px)

    scale(.96);


    transition:

    opacity .8s ease,

    transform .8s ease;


}


.modern-testimonial-card.reveal.active{


    opacity:1;


    transform:

    translateY(0)

    scale(1);


}



/*=========================================================
    STAGGER EFFECT
=========================================================*/


.modern-testimonial-card:nth-child(1){

    transition-delay:.1s;

}


.modern-testimonial-card:nth-child(2){

    transition-delay:.2s;

}


.modern-testimonial-card:nth-child(3){

    transition-delay:.3s;

}


.modern-testimonial-card:nth-child(4){

    transition-delay:.4s;

}


.modern-testimonial-card:nth-child(5){

    transition-delay:.5s;

}


/*=========================================================
    CARD FLOATING LIGHT
=========================================================*/


.modern-testimonial-card:hover::before{


    animation-duration:

    3s;


}



/*=========================================================
    PREMIUM SHINE OVERLAY
=========================================================*/


.modern-testimonial-card .shine{


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.65),

    transparent

    );


    transform:

    translateX(-150%);


}



.modern-testimonial-card:hover .shine{


    animation:

    testimonialShine .9s ease;


}



@keyframes testimonialShine{


100%{

transform:

translateX(150%);

}


}



/*=========================================================
    QUOTE FLOAT ANIMATION
=========================================================*/


.quote-circle{


    animation:

    quoteFloat 5s ease-in-out infinite;


}



@keyframes quoteFloat{


0%,100%{

transform:

translateY(0);

}


50%{

transform:

translateY(-6px);


}


}



/*=========================================================
    STAR MICRO ANIMATION
=========================================================*/


.testimonial-stars i{


    transition:.3s;


}



.modern-testimonial-card:hover 
.testimonial-stars i{


    transform:

    translateY(-3px);


}



.testimonial-stars i:nth-child(2){

transition-delay:.05s;

}


.testimonial-stars i:nth-child(3){

transition-delay:.1s;

}


.testimonial-stars i:nth-child(4){

transition-delay:.15s;

}


.testimonial-stars i:nth-child(5){

transition-delay:.2s;

}



/*=========================================================
    READ MORE EXPAND SUPPORT
=========================================================*/


.full-text{


    animation:

    textExpand .35s ease;


}



@keyframes textExpand{


from{

opacity:0;

transform:

translateY(-5px);


}


to{

opacity:1;

transform:

translateY(0);


}


}



/*=========================================================
    PROFILE HOVER EFFECT
=========================================================*/


.testimonial-user{


    transition:.35s;


}



.modern-testimonial-card:hover 
.testimonial-user{


    transform:

    translateY(-3px);


}



.student-avatar{


    transition:.45s;


}



.modern-testimonial-card:hover 
.student-avatar{


    transform:

    scale(1.08)

    rotate(5deg);


}



/*=========================================================
    SECTION FLOATING PARTICLES
=========================================================*/


.modern-testimonials 
.section-container::before{


    content:"";


    position:absolute;


    width:10px;


    height:10px;


    border-radius:50%;


    background:

    var(--yellow);


    top:120px;


    left:8%;


    opacity:.5;


    box-shadow:


    200px 80px 0 rgba(59,130,246,.4),

    700px 40px 0 rgba(244,197,66,.4),

    900px 150px 0 rgba(59,130,246,.3);


    animation:

    feedbackParticles 12s infinite ease-in-out;


}



@keyframes feedbackParticles{


0%,100%{

transform:

translateY(0);

}


50%{

transform:

translateY(-25px);


}


}



/*=========================================================
    MOBILE TOUCH OPTIMIZATION
=========================================================*/


@media(hover:none){


.modern-testimonial-card:hover{


transform:none;


box-shadow:

var(--shadow);


}


.modern-testimonial-card::before{


animation:none;


}


}



/*=========================================================
    REDUCED MOTION SUPPORT
=========================================================*/


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


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


animation-duration:.01ms!important;


animation-iteration-count:1!important;


transition-duration:.01ms!important;


}



}



/*=========================================================
    LARGE SCREEN REFINEMENT
=========================================================*/


@media(min-width:1400px){


.testimonial-grid{


gap:40px;


}


.modern-testimonial-card{


padding:38px;


}



}



/*=========================================================
    SMALL MOBILE POLISH
=========================================================*/


@media(max-width:400px){


.testimonial-message{


font-size:15px;


}



.testimonial-top{


flex-direction:column;


align-items:flex-start;


gap:15px;


}



}



/*====================================================
 PREMIUM RESULTS SECTION
====================================================*/


.academic-results-section{

position:relative;

padding:120px 0;

overflow:hidden;

background:

linear-gradient(
180deg,
var(--gray-25),
var(--white));

}



/* Background Glow */

.academic-results-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:

rgba(59,130,246,.08);

top:-200px;

right:-150px;

filter:blur(80px);

}



.academic-results-section::after{

content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;

background:

rgba(244,197,66,.12);

bottom:-150px;

left:-120px;

filter:blur(80px);

}



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


.results-title-area{

position:relative;

text-align:center;

max-width:850px;

margin:auto;

}



.results-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:50px;

background:

rgba(244,197,66,.12);

border:

1px solid rgba(244,197,66,.25);

color:

var(--blue-900);

font-size:14px;

font-weight:800;

text-transform:uppercase;

letter-spacing:.08em;

}



.results-badge i{

color:

var(--yellow-dark);

}



.results-title-area h2{

margin-top:25px;

font-size:

clamp(2.6rem,5vw,4rem);

font-weight:900;

letter-spacing:-2px;

color:

var(--gray-900);

}



.results-title-area p{

margin-top:20px;

font-size:18px;

line-height:1.8;

color:

var(--gray-500);

}



/*====================================================
 FORMULA
====================================================*/


.ranking-formula{

margin:60px auto;

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:20px;

}



.ranking-formula div{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:22px;

border-radius:22px;

background:white;

box-shadow:

var(--shadow);

border:

var(--border);

font-weight:600;

color:

var(--gray-600);

}



.ranking-formula i{

font-size:22px;

color:

var(--blue-600);

}



.ranking-formula strong{

color:

var(--blue-900);

}



/*====================================================
 STUDENT CARDS
====================================================*/


.top-performer-list{

display:flex;

flex-direction:column;

gap:25px;

}



.ranked-student-card{

position:relative;

display:grid;

grid-template-columns:

90px 100px 1fr 180px;

align-items:center;

gap:30px;


padding:30px;

border-radius:30px;


background:

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

backdrop-filter:

blur(20px);


border:

1px solid var(--gray-200);


box-shadow:

var(--shadow);


transition:.4s;

}



.ranked-student-card:hover{

transform:

translateY(-8px);

box-shadow:

var(--shadow-lg);

}



/* Champion */

.ranked-student-card.champion{

border:

2px solid var(--yellow);

background:

linear-gradient(
135deg,
#fff,
#fff8df);

}



/*====================================================
 RANK
====================================================*/


.rank-position{

font-size:30px;

font-weight:900;

color:

var(--gray-400);

text-align:center;

}


.champion .rank-position i{

display:block;

color:

var(--yellow-dark);

font-size:28px;

margin-bottom:5px;

}



/*====================================================
 AVATAR
====================================================*/


.rank-avatar{

width:90px;

height:90px;

border-radius:50%;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

font-weight:900;

color:white;


background:

linear-gradient(
135deg,
var(--blue-700),
var(--blue-500));

}



.rank-avatar img{

width:100%;

height:100%;

object-fit:cover;

}



/*====================================================
 PROFILE
====================================================*/


.rank-profile h3{

font-size:22px;

margin-bottom:8px;

color:

var(--gray-900);

}



.rank-profile span{

color:

var(--gray-500);

}



/*====================================================
 METRICS
====================================================*/


.rank-metrics{

display:flex;

gap:15px;

margin-top:20px;

}



.metric-item{

padding:15px;

border-radius:18px;

background:

var(--gray-50);

text-align:center;

min-width:110px;

}



.metric-item i{

color:

var(--blue-600);

}



.metric-item label{

display:block;

font-size:12px;

color:

var(--gray-500);

}



.metric-item strong{

font-size:18px;

color:

var(--gray-900);

}



/*====================================================
 PERFORMANCE SCORE
====================================================*/


.final-performance{

text-align:center;

padding:25px;

border-radius:25px;


background:

linear-gradient(
135deg,
var(--blue-700),
var(--blue-500));


color:white;

}



.final-performance span{

display:block;

opacity:.8;

font-size:14px;

}



.final-performance strong{

display:block;

font-size:35px;

font-weight:900;

margin-top:8px;

}



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


@media(max-width:992px){

.ranked-student-card{

grid-template-columns:70px 80px 1fr;

}


.final-performance{

grid-column:

1/-1;

}


.ranking-formula{

grid-template-columns:1fr;

}

}



@media(max-width:700px){

.ranked-student-card{

display:flex;

flex-direction:column;

text-align:center;

}


.rank-metrics{

flex-direction:column;

width:100%;

}


.metric-item{

width:100%;

}


}


/*==================================================
    LEADERBOARD SECTION
==================================================*/

.leaderboard-section{
    position:relative;
    padding:90px 0;
    background:
        radial-gradient(circle at top right,#eff6ff 0,#f8fbff 35%,#ffffff 100%);
    overflow:hidden;
}

.leaderboard-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(59,130,246,.05);
}

.leaderboard-section::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-120px;
    bottom:-120px;
    border-radius:50%;
    background:rgba(245,158,11,.05);
}

.leaderboard-section .section-container{
    position:relative;
    z-index:2;
}

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

.leaderboard-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 55px;
}

.leaderboard-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 22px;
    border-radius:100px;
    background:#eef5ff;
    color:var(--blue-700);
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
    border:1px solid rgba(59,130,246,.15);
}

.leaderboard-badge i{
    color:#f59e0b;
    font-size:18px;
}

.leaderboard-heading h2{
    font-size:clamp(34px,5vw,52px);
    font-weight:800;
    color:var(--gray-900);
    line-height:1.15;
    margin-bottom:15px;
}

.leaderboard-heading p{
    font-size:17px;
    line-height:1.8;
    color:var(--gray-500);
}

.leaderboard-heading strong{
    color:var(--blue-700);
    font-weight:700;
}

/*==================================================
    SCORE FORMULA
==================================================*/

.score-formula{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:55px;
}

.score-formula>div{
    position:relative;
    background:#fff;
    border:var(--border);
    border-radius:22px;
    padding:26px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
    transition:.35s;
    overflow:hidden;
}

.score-formula>div::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,
                rgba(59,130,246,.03),
                rgba(255,255,255,0));
}

.score-formula>div:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(15,23,42,.10);
}

.score-formula i{
    width:60px;
    height:60px;
    border-radius:18px;
    display:grid;
    place-items:center;
    font-size:24px;
    color:#fff;
    flex-shrink:0;
}

.score-formula>div:nth-child(1) i{
    background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.score-formula>div:nth-child(2) i{
    background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}

.score-formula>div:nth-child(3) i{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
}

.score-formula strong{
    margin-left:auto;
    font-size:26px;
    color:var(--blue-700);
    font-weight:800;
}

.score-formula div{
    font-weight:700;
    color:var(--gray-800);
}

/*==================================================
    RANKING LIST
==================================================*/

.ranking-list{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/*==================================================
    RANKING CARD
==================================================*/

.ranking-card{
    position:relative;
    display:grid;
    grid-template-columns:90px 90px 1fr 180px;
    align-items:center;
    gap:28px;
    padding:30px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:28px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.ranking-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg,#2563eb,#60a5fa);
}

.ranking-card::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-90px;
    top:-90px;
    border-radius:50%;
    background:rgba(37,99,235,.04);
}

.ranking-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(15,23,42,.12);
    border-color:rgba(37,99,235,.20);
}

/*==================================================
    TOP WINNER
==================================================*/

.top-ranked{
    background:linear-gradient(135deg,#fffdf4,#ffffff);
    border:2px solid rgba(245,158,11,.35);
    box-shadow:0 25px 55px rgba(245,158,11,.16);
}

.top-ranked::before{
    background:linear-gradient(180deg,#f59e0b,#ffd54a);
}

.top-ranked::after{
    background:rgba(245,158,11,.08);
}

.top-ranked:hover{
    box-shadow:0 30px 65px rgba(245,158,11,.22);
}

/*==================================================
    RANK NUMBER
==================================================*/

.rank-number{
    width:72px;
    height:72px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    color:#fff;
    font-size:26px;
    font-weight:800;
    position:relative;
}

.rank-number i{
    position:absolute;
    top:-13px;
    font-size:22px;
    color:#facc15;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}

.top-ranked .rank-number{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
}

/*==================================================
    PHOTO
==================================================*/

.rank-photo{
    width:82px;
    height:82px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    color:#fff;
    font-size:30px;
    font-weight:800;
    border:5px solid #fff;
    box-shadow:0 10px 24px rgba(37,99,235,.18);
}

.rank-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*==================================================
    PROFILE INFO
==================================================*/

.rank-profile-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.rank-profile-info h3{
    font-size:24px;
    font-weight:800;
    color:var(--gray-900);
    margin:0;
}

.rank-category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:8px 14px;
    border-radius:100px;
    background:#eef5ff;
    color:var(--blue-700);
    font-size:14px;
    font-weight:700;
}

.rank-category i{
    font-size:15px;
}

/*==================================================
    STATISTICS GRID
==================================================*/

.rank-stat-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(120px,1fr));
    gap:16px;
    margin-top:6px;
}

.rank-stat-item{
    background:#f8fbff;
    border:1px solid rgba(37,99,235,.08);
    border-radius:18px;
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    transition:.3s ease;
}

.rank-stat-item:hover{
    background:#ffffff;
    transform:translateY(-4px);
    box-shadow:0 10px 22px rgba(37,99,235,.08);
}

.rank-stat-item i{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:18px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
}

.rank-stat-item:nth-child(2) i{
    background:linear-gradient(135deg,#0ea5e9,#38bdf8);
}

.rank-stat-item:nth-child(3) i{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
}

.rank-stat-item label{
    font-size:13px;
    color:var(--gray-500);
    font-weight:600;
}

.rank-stat-item strong{
    font-size:22px;
    color:var(--gray-900);
    font-weight:800;
    line-height:1;
}

/*==================================================
    PERFORMANCE SCORE
==================================================*/

.rank-score-box{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:10px;
    min-height:150px;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    color:#fff;
    overflow:hidden;
}

.rank-score-box::before{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    right:-65px;
    top:-65px;
    background:rgba(255,255,255,.12);
}

.rank-score-box span{
    position:relative;
    z-index:2;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    opacity:.9;
}

.rank-score-box strong{
    position:relative;
    z-index:2;
    font-size:40px;
    font-weight:900;
    line-height:1;
}

.top-ranked .rank-score-box{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
    color:#fff;
}

.top-ranked .rank-score-box strong{
    color:#fff;
}

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

@media (max-width:1200px){

    .ranking-card{
        grid-template-columns:70px 75px 1fr 160px;
        gap:20px;
        padding:24px;
    }

    .rank-photo{
        width:72px;
        height:72px;
        font-size:26px;
    }

    .rank-number{
        width:64px;
        height:64px;
        font-size:22px;
    }

    .rank-profile-info h3{
        font-size:21px;
    }

    .rank-score-box strong{
        font-size:34px;
    }

    .score-formula{
        gap:18px;
    }

}

@media (max-width:992px){

    .score-formula{
        grid-template-columns:1fr;
    }

    .ranking-card{
        grid-template-columns:80px 1fr;
        grid-template-areas:
            "rank photo"
            "profile profile"
            "score score";
        row-gap:20px;
    }

    .rank-number{
        grid-area:rank;
        justify-self:start;
    }

    .rank-photo{
        grid-area:photo;
        justify-self:end;
    }

    .rank-profile-info{
        grid-area:profile;
    }

    .rank-score-box{
        grid-area:score;
        min-height:120px;
        width:100%;
    }

    .rank-stat-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:768px){

    .leaderboard-section{
        padding:70px 0;
    }

    .leaderboard-heading{
        margin-bottom:40px;
    }

    .leaderboard-heading h2{
        font-size:34px;
    }

    .leaderboard-heading p{
        font-size:15px;
    }

    .leaderboard-badge{
        font-size:13px;
        padding:8px 18px;
    }

    .ranking-card{
        padding:20px;
        border-radius:22px;
    }

    .rank-profile-info h3{
        font-size:20px;
    }

    .rank-category{
        font-size:13px;
    }

    .rank-stat-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .rank-stat-item{
        flex-direction:row;
        align-items:center;
        gap:14px;
    }

    .rank-stat-item label{
        display:block;
        margin-bottom:4px;
    }

    .rank-score-box strong{
        font-size:32px;
    }

}

@media (max-width:480px){

    .leaderboard-section{
        padding:60px 0;
    }

    .leaderboard-heading h2{
        font-size:28px;
    }

    .ranking-card{
        grid-template-columns:1fr;
        grid-template-areas:
            "rank"
            "photo"
            "profile"
            "score";
        text-align:center;
    }

    .rank-number,
    .rank-photo{
        justify-self:center;
    }

    .rank-profile-info{
        align-items:center;
    }

    .rank-category{
        margin:auto;
    }

    .rank-stat-item{
        justify-content:flex-start;
        text-align:left;
    }

    .rank-score-box{
        padding:20px;
        min-height:110px;
    }

    .rank-score-box strong{
        font-size:30px;
    }

}

/*==================================================
    ANIMATIONS
==================================================*/

@keyframes floatCard{

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

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

}

.top-ranked{
    animation:floatCard 5s ease-in-out infinite;
}

.ranking-card:hover .rank-photo{
    transform:scale(1.08) rotate(3deg);
    transition:.35s;
}

.ranking-card:hover .rank-number{
    transform:scale(1.05);
    transition:.35s;
}

.ranking-card:hover .rank-score-box{
    transform:scale(1.02);
    transition:.35s;
}




/*=========================================
    BANNER
=========================================*/

.srsmpsc-banner{

    position:relative;
    overflow:hidden;

    padding:35px 30px;

    background:
    linear-gradient(
        120deg,
        #0f4c81,
        #2563eb,
        #0ea5e9,
        #1e40af
    );

    background-size:300% 300%;

    animation:gradientMove 12s ease infinite;

    color:#fff;

    text-align:center;

    margin:0;

    isolation:isolate;

}


/* Animated gradient */

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}



/* Light sweep */

.srsmpsc-banner::after{

    content:"";

    position:absolute;

    top:-50%;
    left:-80%;

    width:60%;
    height:200%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:rotate(25deg);

    animation:shine 7s infinite;

}


@keyframes shine{

    0%{
        left:-80%;
    }

    40%,
    100%{
        left:140%;
    }

}




/* Floating circles */

.srsmpsc-banner::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.25),
        transparent 70%
    );

    top:-150px;
    left:-80px;

    animation:
    floatCircle 8s ease-in-out infinite;

}



@keyframes floatCircle{

    0%,
    100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(40px,30px);
    }

}





.srsmpsc-banner > *{

    position:relative;

    z-index:3;

}



/* Extra floating bubbles */

.srsmpsc-particle{

    position:absolute;

    width:12px;
    height:12px;

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

    border-radius:50%;

    animation:
    particleMove 8s linear infinite;

}


.srsmpsc-particle:nth-child(1){

    left:15%;
    bottom:20%;

}


.srsmpsc-particle:nth-child(2){

    right:20%;
    top:25%;

    animation-delay:2s;

}



@keyframes particleMove{


    0%{

        transform:
        translateY(40px)
        scale(.8);

        opacity:0;

    }


    50%{

        opacity:1;

    }


    100%{

        transform:
        translateY(-120px)
        scale(1.4);

        opacity:0;

    }

}





/* Badge */


.srsmpsc-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;


    font-size:12px;

    font-weight:700;


    padding:7px 18px;

    margin-bottom:12px;


    border-radius:50px;


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


    border:

    1px solid rgba(255,255,255,.35);


    backdrop-filter:blur(12px);


    animation:

    badgePulse 3s ease infinite;


}




@keyframes badgePulse{


    0%,
    100%{

        box-shadow:
        0 0 0 0 rgba(255,255,255,.3);

    }


    50%{

        box-shadow:
        0 0 0 12px rgba(255,255,255,0);

    }

}



.srsmpsc-badge i{

    color:#fde68a;

    font-size:17px;

    animation:

    iconBounce 2s infinite;

}



@keyframes iconBounce{

    50%{

        transform:
        translateY(-4px);

    }

}




/* Heading */


.srsmpsc-banner h1{

    margin:0;


    font-size:
    clamp(24px,4vw,42px);


    font-weight:950;


    letter-spacing:.5px;


    text-transform:uppercase;


    line-height:1.25;


    animation:

    slideUp .9s ease forwards;


}





.srsmpsc-banner p{


    margin:10px 0 0;


    font-size:
    clamp(12px,2vw,17px);


    font-weight:600;


    letter-spacing:3px;


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


    text-transform:uppercase;


    animation:

    fadeIn 1.4s ease forwards;


}




/* Text animations */


@keyframes slideUp{

    from{

        opacity:0;

        transform:
        translateY(35px);

    }


    to{

        opacity:1;

        transform:
        translateY(0);

    }

}



@keyframes fadeIn{

    from{

        opacity:0;

    }


    to{

        opacity:1;

    }

}





/* Hover depth */

.srsmpsc-banner:hover h1{

    transform:
    perspective(500px)
    translateZ(20px);


    transition:.5s;

}





/* Responsive */


@media(max-width:768px){


.srsmpsc-banner{

    padding:25px 15px;

}


.srsmpsc-banner p{

    letter-spacing:1.5px;

}



}




@media(max-width:480px){


.srsmpsc-banner h1{

    font-size:21px;

}


.srsmpsc-badge{

    font-size:11px;

    padding:6px 14px;

}


}




/* Accessibility */


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


.srsmpsc-banner,
.srsmpsc-banner::before,
.srsmpsc-banner::after,
.srsmpsc-badge,
.srsmpsc-banner h1,
.srsmpsc-banner p,
.srsmpsc-badge i{

    animation:none!important;

    transition:none!important;

}


}

/* =====================================
   ADVANCED srsmpsc EFFECTS
===================================== */


/* Animated grid background */

.srsmpsc-banner{

    --mouse-x:50%;
    --mouse-y:50%;

}


.srsmpsc-banner .srsmpsc-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,.06) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.06) 1px,
        transparent 1px
    );


    background-size:45px 45px;

    mask-image:
    radial-gradient(
        circle at center,
        black,
        transparent 75%
    );


    animation:gridMove 15s linear infinite;

    opacity:.4;

}



@keyframes gridMove{

    from{

        background-position:
        0 0;

    }


    to{

        background-position:
        45px 45px;

    }

}





/* Aurora glow */


.srsmpsc-banner .aurora{


    position:absolute;

    width:500px;

    height:500px;


    background:

    radial-gradient(

    circle,

    rgba(56,189,248,.45),

    transparent 70%

    );


    filter:blur(50px);


    top:50%;

    left:50%;


    transform:
    translate(-50%,-50%);


    animation:

    auroraMove 10s infinite alternate;


}



@keyframes auroraMove{


    0%{

        transform:
        translate(-60%,-40%)
        scale(1);

    }


    100%{

        transform:
        translate(-40%,-60%)
        scale(1.4);

    }

}




/* Animated border */


.srsmpsc-banner{

    border:1px solid transparent;

    background-clip:
    padding-box;


}



.srsmpsc-banner::marker{

    display:none;

}




.srsmpsc-banner:hover{

    box-shadow:

    0 20px 60px

    rgba(0,0,0,.25);


    transition:.5s;

}




/* Neon floating rings */


.srsmpsc-ring{


    position:absolute;


    border-radius:50%;


    border:

    2px solid

    rgba(255,255,255,.25);



    animation:ringFloat 12s infinite;

}



.srsmpsc-ring.one{

    width:180px;

    height:180px;

    right:10%;

    top:20%;

}



.srsmpsc-ring.two{

    width:280px;

    height:280px;

    left:5%;

    bottom:-100px;

    animation-delay:3s;

}




@keyframes ringFloat{


    0%,
    100%{

        transform:
        translateY(0)
        rotate(0);

        opacity:.4;

    }


    50%{

        transform:
        translateY(-40px)
        rotate(180deg);

        opacity:1;

    }

}





/* Glass reflection */


.srsmpsc-banner .glass-reflection{


    position:absolute;

    inset:0;


    background:

    linear-gradient(

    120deg,

    transparent 20%,

    rgba(255,255,255,.15),

    transparent 60%

    );


    transform:
    translateX(-100%);


    animation:

    reflection 8s infinite;


}



@keyframes reflection{


    0%{

        transform:
        translateX(-100%);

    }


    35%,
    100%{

        transform:
        translateX(100%);

    }

}





/* Floating feature icons */


.srsmpsc-icon{


    position:absolute;


    width:45px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.15);


    backdrop-filter:
    blur(10px);


    font-size:20px;


    animation:

    iconFloat 6s infinite ease-in-out;

}




.srsmpsc-icon.one{

    left:12%;

    top:35%;

}



.srsmpsc-icon.two{

    right:15%;

    bottom:30%;

    animation-delay:2s;

}



.srsmpsc-icon.three{

    right:30%;

    top:15%;

    animation-delay:4s;

}




@keyframes iconFloat{


    0%,
    100%{

        transform:
        translateY(0);

    }


    50%{

        transform:
        translateY(-25px);

    }

}





/* Title gradient animation */


.srsmpsc-banner h1{


    background:

    linear-gradient(

    90deg,

    #fff,

    #bfdbfe,

    #fff

    );


    background-size:

    200% auto;


    -webkit-background-clip:text;


    -webkit-text-fill-color:

    transparent;


    animation:

    textShine 5s linear infinite;

}




@keyframes textShine{


    to{

        background-position:

        200% center;

    }

}





/* Button support */

.srsmpsc-btn{


    margin-top:20px;


    display:inline-flex;


    padding:

    12px 30px;


    border-radius:50px;


    background:white;


    color:#2563eb;


    font-weight:800;


    text-decoration:none;


    position:relative;


    overflow:hidden;


    transition:.4s;


}



.srsmpsc-btn:hover{


    transform:

    translateY(-5px);


    box-shadow:

    0 15px 35px

    rgba(0,0,0,.25);


}



.srsmpsc-btn::before{


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.8),

    transparent

    );


    transform:
    translateX(-100%);


}


.srsmpsc-btn:hover::before{


    animation:

    buttonShine .8s;

}



@keyframes buttonShine{


    100%{

        transform:

        translateX(100%);

    }

}









.srsmpsc-banner{


position:relative;

overflow:hidden;


min-height:380px;


display:flex;

align-items:center;

justify-content:center;


text-align:center;


background:


radial-gradient(
circle at top,
rgba(56,189,248,.35),
transparent 40%
),


linear-gradient(
135deg,
#062b55,
#2563eb,
#0f172a
);



color:white;


isolation:isolate;


}





/* CONTENT */

.srsmpsc-content{

position:relative;

z-index:10;

animation:

srsmpscEnter 1.2s ease;


}



@keyframes srsmpscEnter{


from{

opacity:0;

transform:
translateY(50px);

}


to{

opacity:1;

transform:
translateY(0);

}


}





/* GRID */

.srsmpsc-grid{


position:absolute;

inset:0;


background-image:


linear-gradient(
rgba(255,255,255,.08) 1px,
transparent 1px
),


linear-gradient(
90deg,
rgba(255,255,255,.08) 1px,
transparent 1px
);



background-size:

45px 45px;


animation:

gridMove 12s linear infinite;


opacity:.35;


}




@keyframes gridMove{


to{

background-position:

45px 45px;

}


}





/* LIGHT SWEEP */


.light-beam{


position:absolute;


width:180px;

height:600px;


background:

linear-gradient(
transparent,
rgba(255,255,255,.25),
transparent
);


transform:

rotate(35deg);


left:-300px;


animation:

beamMove 8s infinite;


}



@keyframes beamMove{


100%{

left:120%;

}


}





/* BADGE */


.srsmpsc-badge{


display:inline-flex;


align-items:center;


gap:10px;


padding:

10px 25px;


border-radius:50px;


background:

rgba(255,255,255,.15);


border:

1px solid rgba(255,255,255,.35);


backdrop-filter:

blur(15px);



font-weight:800;


color:#fbe481;


animation:

badgeGlow 3s infinite;


}



@keyframes badgeGlow{


50%{

box-shadow:

0 0 35px rgba(251,228,129,.5);

}


}





.srsmpsc-badge i{


font-size:20px;


animation:

capMove 2s infinite;


}



@keyframes capMove{


50%{

transform:

translateY(-5px)
rotate(-10deg);

}


}





/* TITLE */


.srsmpsc-banner h1{


margin:20px 0 10px;


font-size:

clamp(25px,5vw,52px);


font-weight:950;


letter-spacing:.5px;


text-transform:uppercase;



background:

linear-gradient(

90deg,

#fff,

#bae6fd,

#fff

);


background-size:

200%;


-webkit-background-clip:text;


color:transparent;


animation:

textFlow 6s infinite;


}




@keyframes textFlow{


to{

background-position:

200%;

}


}





/* SUBTITLE */


.srsmpsc-banner p{


font-size:

18px;


letter-spacing:

3px;


font-weight:600;


color:

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


}





/* PARTICLES */


.srsmpsc-particle{


position:absolute;


width:8px;

height:8px;


background:#fff;


border-radius:50%;


box-shadow:

0 0 20px #38bdf8;


animation:

particleFloat 10s infinite;


}




.srsmpsc-particle:nth-child(1){

left:15%;

bottom:20%;

}



.srsmpsc-particle:nth-child(2){

right:20%;

top:25%;

animation-delay:2s;

}



.srsmpsc-particle:nth-child(3){

left:50%;

top:15%;

animation-delay:4s;

}


.srsmpsc-particle:nth-child(4){

right:40%;

bottom:15%;

animation-delay:6s;

}



@keyframes particleFloat{


0%{

transform:
translateY(50px);

opacity:0;

}


50%{

opacity:1;

}


100%{

transform:
translateY(-150px);

opacity:0;

}


}





/* EDUCATION ICONS */


.edu-icon{


position:absolute;


font-size:45px;


opacity:.35;


animation:

floatEdu 6s infinite;

color :#fdeca6;
}



.icon-1{

left:8%;

top:30%;


}


.icon-2{

right:10%;

top:20%;

animation-delay:2s;

}



.icon-3{

right:25%;

bottom:20%;

animation-delay:4s;

}





@keyframes floatEdu{


50%{

transform:

translateY(-30px)
rotate(10deg);

}


}





/* STATS */


.srsmpsc-stats{


display:flex;


gap:25px;


justify-content:center;


margin-top:30px;


}



.srsmpsc-stats div{


padding:

12px 25px;


border-radius:18px;


background:

rgba(255,255,255,.12);


border:

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


backdrop-filter:

blur(10px);



}



.srsmpsc-stats strong{


display:block;


font-size:25px;


color:#fbe481;


}



.srsmpsc-stats span{


font-size:12px;


}





@media(max-width:700px){


.srsmpsc-banner{

padding:30px 15px;

}



.srsmpsc-stats{

flex-wrap:wrap;

}


.srsmpsc-banner p{

letter-spacing:1px;

font-size:13px;

}



}

.edu-icon{

    position:absolute;

    width:70px;
    height:70px;

    display:flex;

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


    border-radius:50%;


    background:

    rgba(255,255,255,.12);


    border:

    1px solid rgba(255,255,255,.3);


    backdrop-filter:blur(15px);


    color:#bae6fd;


    font-size:32px;


    box-shadow:

    0 0 30px rgba(56,189,248,.4);


    animation:

    floatEdu 6s ease-in-out infinite;

}



.edu-icon i{

    animation:

    iconRotate 5s linear infinite;

}




.icon-1{

    left:8%;

    top:25%;

}



.icon-2{

    right:12%;

    top:22%;

    animation-delay:2s;

}



.icon-3{

    left:15%;

    bottom:20%;

    animation-delay:3s;

}



.icon-4{

    right:20%;

    bottom:25%;

    animation-delay:4s;

}



.icon-5{

    left:45%;

    top:15%;

    animation-delay:5s;

}





@keyframes floatEdu{


    0%,
    100%{

        transform:

        translateY(0);

    }


    50%{

        transform:

        translateY(-35px);

    }

}





@keyframes iconRotate{


    50%{

        transform:

        rotateY(180deg);

    }

}





/* Statistics icons */


.srsmpsc-stats i{

    display:block;

    font-size:25px;

    color:#fbe481;

    margin-bottom:8px;


}


.srsmpsc-stats div:hover{


    transform:

    translateY(-10px)
    scale(1.05);


    background:

    rgba(255,255,255,.22);


    transition:.4s;


}




.card-title{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

}


.icon-box{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563eb,#0ea5e9);

    color:#fff;

    font-size:28px;

    box-shadow:
    0 10px 25px rgba(37,99,235,.25);

}


.title-content h2{

    margin:0;

    font-size:28px;

    font-weight:800;

    color:#0f172a;

}


.subtitle{

    margin-top:6px;

    color:#64748b;

    font-size:15px;

}


.performance-summary{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

    margin:30px 0;

}


.summary-item{

    display:flex;

    gap:18px;

    padding:22px;

    border-radius:18px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    transition:.3s;

}


.summary-item:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 30px rgba(0,0,0,.08);

}


.summary-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}


.score{

    background:linear-gradient(135deg,#10b981,#059669);

}


.participation{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

}


.coverage{

    background:linear-gradient(135deg,#f59e0b,#d97706);

}


.summary-item h4{

    margin:0;

    font-size:26px;

    font-weight:800;

    color:#111827;

}


.summary-item span{

    display:block;

    margin-top:4px;

    font-weight:700;

    color:#1e293b;

}


.summary-item small{

    display:block;

    margin-top:8px;

    color:#64748b;

    line-height:1.6;

    font-size:13px;

}


.performance-note{

    display:flex;

    gap:15px;

    align-items:flex-start;

    padding:22px;

    border-left:5px solid #2563eb;

    background:#eff6ff;

    border-radius:16px;

}


.performance-note i{

    color:#2563eb;

    font-size:24px;

    margin-top:3px;

}


.performance-note p{

    margin:0;

    color:#334155;

    line-height:1.8;

    font-size:14px;

}


@media(max-width:768px){

.performance-summary{

grid-template-columns:1fr;

}

.card-title{

flex-direction:column;

text-align:center;

}

.performance-note{

flex-direction:column;

}

}

.chart-area{

height:360px;

padding:20px;

background:#fff;

border-radius:28px;

box-shadow:
0 10px 40px rgba(15,23,42,.08);

}


.chart-area canvas{

width:100%!important;

height:100%!important;

}


/* ===============================
   Department Performance Section
================================ */

.dept_performanc-section {
    width: 100%;
    padding: 30px;
    background: #f5f7fb;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}



/* Main Card */

.department-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 30px;

    box-shadow:
        0 10px 30px rgba(31, 45, 61, 0.08);

    border: 1px solid #edf0f6;

}



/* ===============================
   Header Section
================================ */

.card-title {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 30px;

}



.icon-box {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #2f6bff,
        #5c8dff
    );

    color: white;

    font-size: 28px;

    box-shadow:
        0 8px 20px rgba(47,107,255,.25);

}



.title-content h2 {

    margin: 0;

    color: #1f2937;

    font-size: 24px;

    font-weight: 700;

}



.subtitle {

    margin-top: 8px;

    color: #6b7280;

    font-size: 14px;

}



/* ===============================
   Summary Cards
================================ */

.performance-summary {

    display: grid;

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

    gap: 22px;

    margin-bottom: 25px;

}



.summary-item {

    display: flex;

    gap: 16px;

    align-items: flex-start;

    padding: 22px;

    border-radius: 18px;

    background: #fafbff;

    border: 1px solid #edf1f8;

    transition: .3s ease;

}



.summary-item:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.08);

}



.summary-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius: 15px;

    font-size: 22px;

}



/* Different icon colors */

.summary-icon.score {

    background:#e8f0ff;

    color:#2f6bff;

}



.summary-icon.participation {

    background:#fff5df;

    color:#f9b115;

}



.summary-icon.coverage {

    background:#e8fff4;

    color:#16a34a;

}



.summary-item h4 {

    margin:0;

    font-size:26px;

    font-weight:800;

    color:#1e293b;

}



.summary-item span {

    display:block;

    margin-top:3px;

    color:#374151;

    font-weight:600;

    font-size:14px;

}



.summary-item small {

    display:block;

    margin-top:8px;

    line-height:1.5;

    color:#718096;

    font-size:12px;

}



/* ===============================
   Information Note
================================ */

.performance-note {

    display:flex;

    gap:15px;

    align-items:flex-start;

    padding:20px;

    border-radius:18px;

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

    border-left:5px solid #2f6bff;

}



.performance-note i {

    color:#2f6bff;

    font-size:22px;

    margin-top:3px;

}



.performance-note p {

    margin:0;

    color:#475569;

    line-height:1.7;

    font-size:14px;

}



/* ===============================
   Chart Area
================================ */

.chart-area {

    margin-top:30px;

    background:#ffffff;

    border-radius:24px;

    padding:30px;

    min-height:420px;

    border:1px solid #edf0f6;

    box-shadow:
        0 10px 30px rgba(31,45,61,.08);

}



.chart-area canvas {

    width:100% !important;

    height:360px !important;

}



/* ===============================
   Responsive Design
================================ */


@media(max-width:1100px){


.performance-summary{

    grid-template-columns:1fr;

}


}



@media(max-width:768px){


.dept_performanc-section{

    padding:15px;

}



.department-card{

    padding:20px;

}



.card-title{

    align-items:flex-start;

}



.title-content h2{

    font-size:20px;

}



.performance-note{

    flex-direction:column;

}



.chart-area{

    padding:15px;

}



.chart-area canvas{

    height:300px !important;

}



}


.dept-performance{ background:var(--white); }
 
  .dept-performance__card{
    padding:clamp(1.6rem,3vw,var(--sp-6));
  }
 
  .dept-performance__head{
    display:flex;
    align-items:flex-start;
    gap:var(--sp-4);
    margin-bottom:var(--sp-5);
  }
 
  .dept-performance__icon{
    flex-shrink:0;
    width:64px; height:64px;
    display:grid; place-items:center;
    border-radius:var(--r-md);
    font-size:1.5rem; color:#fff;
    background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
    box-shadow:0 14px 30px rgba(21,70,140,.25);
  }
 
  .dept-performance__head h2{ font-size:var(--step-h2); margin-bottom:.4rem; }
  .dept-performance__head .subtitle{ color:var(--ink-500); font-size:1rem; line-height:1.7; max-width:60ch; }
 
  /* Methodology summary — mirrors the .score-formula legend pattern
     used in the leaderboard section, one color per weighted factor */
  .dept-performance__summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--sp-3);
    margin-bottom:var(--sp-4);
  }
 
  .dept-summary-item{
    display:flex;
    align-items:flex-start;
    gap:var(--sp-3);
    padding:var(--sp-3);
    border-radius:var(--r-md);
    background:var(--ink-50);
    border:var(--line);
  }
 
  .dept-summary-item__icon{
    flex-shrink:0;
    width:46px; height:46px;
    display:grid; place-items:center;
    border-radius:var(--r-sm);
    font-size:1.05rem;
  }
  .dept-summary-item__icon.score{ background:var(--navy-100); color:var(--navy-700); }
  .dept-summary-item__icon.participation{ background:var(--success-100); color:var(--success); }
  .dept-summary-item__icon.coverage{ background:var(--warning-100); color:var(--warning); }
 
  .dept-summary-item h4{ font-family:var(--font-mono); font-size:1.4rem; font-weight:700; color:var(--ink-900); line-height:1; margin-bottom:.35rem; }
  .dept-summary-item span{ display:block; font-weight:700; font-size:.86rem; color:var(--ink-800); margin-bottom:.3rem; }
  .dept-summary-item small{ display:block; color:var(--ink-500); font-size:.78rem; line-height:1.6; }
 
  .dept-performance__note{
    display:flex;
    gap:var(--sp-3);
    align-items:flex-start;
    padding:var(--sp-3) var(--sp-4);
    border-radius:var(--r-md);
    background:var(--navy-50);
    border:1px solid var(--navy-100);
    margin-bottom:var(--sp-5);
  }
  .dept-performance__note i{ color:var(--navy-600); font-size:1.1rem; margin-top:.15rem; flex-shrink:0; }
  .dept-performance__note p{ color:var(--ink-600); font-size:.9rem; line-height:1.8; }
 
  .dept-performance__chart{
    position:relative;
    width:100%;
    height:clamp(280px,38vw,420px);
    padding:var(--sp-4) var(--sp-3) var(--sp-2);
    border-radius:var(--r-md);
    background:var(--ink-50);
    border:var(--line);
  }
 
  .dept-performance__chart canvas{ width:100% !important; height:100% !important; }
 
  /* Screen-reader-only data table — canvas charts carry no semantics,
     this gives the same numbers to assistive tech */
  .dept-performance__table-wrap{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0;
  }
 
  /* ===============================
   Responsive Design
================================ */

/* Tablet */
@media (max-width: 900px) {

    .dept-performance__summary {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    .dept-performance__head {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    .dept-performance__card {

        padding: 22px;

    }


    .dept-performance__chart {

        height: 350px;

    }


}



/* Mobile */
@media (max-width: 600px) {


    .dept-performance-section {

        padding: 15px;

    }


    .dept-performance__card {

        padding: 18px;

        border-radius: 18px;

    }


    .dept-performance__head h2 {

        font-size: 20px;

    }


    .dept-performance__head p {

        font-size: 13px;

        line-height: 1.5;

    }


    .dept-performance__summary {

        gap: 14px;

    }


    .dept-performance__item {

        padding: 16px;

        flex-direction: column;

        text-align: center;

        align-items: center;

    }


    .dept-performance__icon {

        width: 50px;

        height: 50px;

        font-size: 20px;

    }


    .dept-performance__value {

        font-size: 24px;

    }


    .dept-performance__note {

        flex-direction: column;

        padding: 16px;

        font-size: 13px;

    }


    .dept-performance__chart {

        height: 280px;

        padding: 10px;

    }


}



/* Small Mobile */
@media (max-width: 400px) {


    .dept-performance__head h2 {

        font-size: 18px;

    }


    .dept-performance__item span {

        font-size: 12px;

    }


    .dept-performance__chart {

        height: 240px;

    }


}