/* 
================================================================================
    ALPHA DELVING - PREMIUM CAMPUS SHOWCASE EXPERIENCE
    High-End Light Theme (Aligned with Main Website)
================================================================================
*/

:root {
    /* Color Palette - Aligned with Alpha Delving Brand */
    --c-bg-main: #ffffff;
    --c-bg-alt: #f4f7fc;
    --c-bg-surface: #ffffff;

    --c-primary: #1a46b6;
    --c-primary-glow: rgba(26, 70, 182, 0.15);
    --c-secondary: #ee4a62;
    --c-secondary-glow: rgba(238, 74, 98, 0.15);

    --c-text-primary: #0b1c3a;
    --c-text-secondary: #5a6b8a;

    /* Layout & Spacing */
    --container-w: 1400px;
    --section-gap: 75px;
    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 40px;

    /* Typography */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ================== GLOBAL RESETS & UTILITIES ================== */
body.campus-showcase {
    background-color: var(--c-bg-main);
    color: var(--c-text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cs-container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 5vw;
}

.cs-section {
    padding: var(--section-gap) 0;
    position: relative;
}

.cs-text-gradient {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cs-text-gradient-primary {
    background: linear-gradient(135deg, var(--c-secondary) 0%, #ff8a9a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================== SECTION 1: DYNAMIC HERO (REDESIGNED) ================== */
.cs-hero {
    height: auto;
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: var(--c-bg-main);
    padding-top: 20px;
    padding-bottom: 40px;
    /* Tight gap between fraud alert banner and hero content */
}

/* Animated Grid Background */
.cs-hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: 50px 50px;
    background-image:
        linear-gradient(to right, rgba(26, 70, 182, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 70, 182, 0.03) 1px, transparent 1px);
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: gridMove 20s linear infinite;
    opacity: 0.7;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px) translateZ(-200px);
    }
}

.cs-hero-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--c-primary-glow) 0%, transparent 60%);
    top: 30%;
    right: -10%;
    filter: blur(100px);
    opacity: 0.8;
    z-index: 1;
}

.cs-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 5vw;
}

.cs-hero-left {
    flex: 0 0 55%;
    max-width: 700px;
}

.cs-hero-right {
    flex: 0 0 45%;
    position: relative;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 10px 24px;
    border-radius: 200px;
    background: rgba(26, 70, 182, 0.05);
    border: 1.5px solid rgba(26, 70, 182, 0.15);
    backdrop-filter: blur(10px);
    color: var(--c-primary);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
    transform: translateY(30px);
    opacity: 0;
}

.cs-hero-badge .dot {
    width: 12px;
    height: 12px;
    background: var(--c-secondary);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--c-secondary);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

.cs-hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    color: var(--c-text-primary);
}

.cs-hero-title .line {
    overflow: hidden;
    display: block;
}

.cs-hero-title .line span {
    display: block;
    transform: translateY(110%);
}

.cs-hero-subtitle {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: var(--c-text-secondary);
    max-width: 600px;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    margin-bottom: 40px;
}

.cs-hero-actions {
    display: flex;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
}

.cs-btn-primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, #1a7fb6 100%);
    color: #fff;
    padding: 16px 40px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(26, 70, 182, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.cs-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(26, 70, 182, 0.3);
    color: #fff;
}

/* Floating Interactive Graphics */
.cs-floating-composition {
    position: relative;
    width: 100%;
    height: 100%;
}

.cs-float-card {
    position: absolute;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* Gradient border using padding-box / border-box trick */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--c-primary) 0%, #7c3aed 50%, var(--c-secondary) 100%) border-box;
    border: 3px solid transparent;
    padding: 6px;
    box-shadow:
        0 30px 60px rgba(26, 70, 182, 0.18),
        0 0 0 1px rgba(26, 70, 182, 0.06);
    opacity: 0;
    transform: scale(0.8) translateY(50px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cs-float-card:hover {
    box-shadow:
        0 40px 80px rgba(26, 70, 182, 0.25),
        0 0 30px rgba(238, 74, 98, 0.15);
    transform: translateY(-6px) scale(1.02) !important;
}

.cs-float-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 6px);
    display: block;
}

.cs-float-1 {
    width: 300px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 2;
    opacity: 1;
    /* Reset by GSAP later */
}

.cs-float-2 {
    width: 200px;
    height: 250px;
    top: 10%;
    right: 0;
    z-index: 1;
}

.cs-float-3 {
    width: 250px;
    height: 180px;
    bottom: 15%;
    left: 0;
    z-index: 3;
}

.cs-floating-shape {
    position: absolute;
    background: linear-gradient(135deg, var(--c-secondary) 0%, #ff8a9a 100%);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.5;
    z-index: 0;
}

.cs-shape-1 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 20%;
    animation: floatShape 6s infinite alternate ease-in-out;
}

.cs-shape-2 {
    width: 200px;
    height: 200px;
    bottom: 10%;
    left: 10%;
    background: linear-gradient(135deg, var(--c-primary) 0%, #1a7fb6 100%);
    animation: floatShape 8s infinite alternate-reverse ease-in-out;
}

@keyframes floatShape {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-30px) scale(1.1);
    }
}

.cs-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    color: var(--c-text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1.6rem;
    z-index: 5;
}

.cs-scroll-line {
    width: 4px;
    height: 120px;
    background: rgba(26, 70, 182, 0.1);
    position: relative;
    overflow: hidden;
}

.cs-scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--c-secondary);
    animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

@media (max-width: 1024px) {
    .cs-hero-content {
        flex-direction: column;
        text-align: center;
        padding-top: 100px;
    }

    .cs-hero-left,
    .cs-hero-right {
        flex: 0 0 100%;
    }

    .cs-hero-actions {
        justify-content: center;
    }

    .cs-hero-badge {
        margin: 0 auto 30px;
    }

    .cs-scroll-indicator {
        display: none;
    }
}

/* ================== SECTION 2: SCALE OF IMPACT ================== */
.cs-impact {
    background: var(--c-bg-main);
    padding-top: calc(var(--section-gap) / 4);
    padding-bottom: calc(var(--section-gap) / 4);
    margin-top: 24px;
}

.cs-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 20px;
}

.cs-impact-card {
    background: #ffffff;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    border-radius: 24px;
    /* Gradient border using padding-box / border-box trick */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--c-primary) 0%, #7c3aed 50%, var(--c-secondary) 100%) border-box;
    border: 2px solid transparent;
    box-shadow: 0 10px 40px rgba(26, 70, 182, 0.06);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    z-index: 1;
}

.cs-impact-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(26, 70, 182, 0.14), 0 0 40px rgba(238, 74, 98, 0.08);
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--c-secondary) 0%, #7c3aed 50%, var(--c-primary) 100%) border-box;
}

.cs-impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(238, 74, 98, 0.04), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.cs-impact-card:hover::before {
    opacity: 1;
}

.cs-impact-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}

.cs-impact-card:hover::after {
    transform: scaleX(1);
}

.cs-impact-val {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.cs-impact-label {
    font-size: 1.1rem;
    color: var(--c-text-secondary);
    font-weight: 600;
}

/* ================== SECTION 3: IMMERSIVE SPOTLIGHT (HORIZONTAL SCROLL) ================== */
.cs-horizontal-wrap {
    overflow: hidden;
    background: var(--c-bg-alt);
    color: var(--c-text-primary);
    border-radius: var(--radius-lg);
    margin: 20px 2vw 50px 2vw;
    position: relative;
    border: 1px solid rgba(26, 70, 182, 0.08);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    /* Fit within viewport to prevent cutting off */
}

.cs-horizontal-sticky {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 0;
    /* Allows flex child to shrink if needed */
}

.cs-horizontal-track {
    display: flex;
    height: 70vh;
    max-height: 650px;
    gap: 4vw;
    padding: 0 6vw;
    align-items: stretch;
    /* Stretch to make all cards perfectly uniform in height */
}

.cs-horizontal-panel {
    flex: 0 0 74vw;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(26, 70, 182, 0.12);
    align-items: center;
    gap: 40px;
    padding: 24px;
    /* Applied gradient border to the entire card */
    border: 4px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%) border-box;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cs-horizontal-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px rgba(26, 70, 182, 0.18);
}

/* Removed border from image, letting it sit flush inside the panel padding */
.cs-horizontal-img-wrap {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 400px;
    border-radius: calc(var(--radius-lg) - 8px);
    box-shadow: 0 10px 30px rgba(26, 70, 182, 0.1);
}

.cs-horizontal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-horizontal-panel:hover .cs-horizontal-img-wrap img {
    transform: scale(1.05);
}

.cs-horizontal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 40px 20px 10px;
}

.cs-panel-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 99px;
    background: linear-gradient(135deg, rgba(26, 70, 182, 0.08) 0%, rgba(225, 29, 72, 0.05) 100%);
    border: 1px solid rgba(26, 70, 182, 0.1);
    color: var(--c-primary);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
    width: fit-content;
}

.cs-panel-title {
    font-size: clamp(3rem, 5vw, 5.2rem);
    font-family: var(--font-display);
    font-weight: 900;
    margin-bottom: 24px;
    line-height: 1.1;
    /* Subtle gradient to text for premium feel */
    background: linear-gradient(135deg, var(--c-text-primary) 0%, var(--c-primary) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Truncate text to prevent massive font sizes from breaking layout */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-panel-desc {
    font-size: 1.5rem;
    color: var(--c-text-secondary);
    line-height: 1.6;
    margin-bottom: 35px;
    /* Truncate text to prevent massive font sizes from breaking layout */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-panel-desc strong {
    color: var(--c-text-primary);
    font-weight: 700;
}

.cs-panel-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 24px;
    border-radius: 16px;
    background: var(--c-bg-alt);
    border: 1px solid rgba(26, 70, 182, 0.12);
    width: fit-content;
    margin-top: auto;
}

.cs-panel-stat-num {
    font-size: 1.8rem;
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--c-primary);
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cs-panel-stat-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 992px) {
    .cs-horizontal-panel {
        grid-template-columns: 1fr;
    }
}


/* ================== SECTION 4: INNOVATION ECOSYSTEM (BENTO GRID) ================== */
.cs-bento {
    background: var(--c-bg-main);
}

.cs-section-header {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cs-section-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 20px;
}

.cs-section-subtitle {
    font-size: 1.6rem;
    color: var(--c-text-secondary);
    max-width: 700px;
    text-align: center;
}

.cs-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 400px);
    gap: 24px;
}

.cs-bento-item {
    background: var(--c-bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid rgba(26, 70, 182, 0.1);
    box-shadow: 0 20px 40px rgba(26, 70, 182, 0.04);
    overflow: hidden;
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-bento-item:hover {
    border-color: rgba(26, 70, 182, 0.2);
    box-shadow: 0 30px 60px rgba(26, 70, 182, 0.1);
    transform: translateY(-5px);
}

.cs-bento-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cs-bento-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s;
}

.cs-bento-item:hover .cs-bento-bg img {
    transform: scale(1.05);
    opacity: 1;
}

.cs-bento-content {
    position: relative;
    z-index: 2;
}

.cs-bento-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.cs-bento-tag {
    position: absolute;
    top: 40px;
    left: 40px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--c-primary);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(26, 70, 182, 0.1);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 3;
}

.cs-bento-content h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--c-primary);
}

.cs-bento-item.large h3 {
    font-size: 3.5rem;
}

.cs-bento-content p {
    color: var(--c-text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 80%;
    font-weight: 500;
}

/* ================== SECTION 5: THE ALLIANCE (MOU) ================== */
.cs-alliance {
    background: var(--c-bg-alt);
    position: relative;
    overflow: hidden;
}

.cs-alliance-content {
    display: flex;
    align-items: center;
    gap: 8vw;
}

.cs-alliance-text {
    flex: 1;
}

.cs-alliance-text .cs-section-title,
.cs-alliance-text .cs-section-subtitle {
    text-align: left;
}

.cs-alliance-img {
    flex: 1;
    position: relative;
}

.cs-alliance-glass {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: 0 40px 80px rgba(26, 70, 182, 0.1);
}

.cs-alliance-glass img {
    width: 100%;
    border-radius: var(--radius-sm);
}

/* ================== SECTION 6: DYNAMIC GALLERY ================== */
.cs-gallery {
    background: var(--c-bg-main);
    color: var(--c-text-primary);
    border-radius: var(--radius-lg);
    margin: 0 2vw 20px 2vw;
    padding: 75px 0 30px 0;
    overflow: hidden;
}

.cs-masonry {
    display: flex;
    gap: 3vw;
    margin-top: 40px;
    padding: 0 5vw;
}

.cs-masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.cs-masonry-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.cs-masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.cs-masonry-item:hover img {
    transform: scale(1.03);
}

/* ================== SECTION 7: VALUE PROPOSITION ================== */
.cs-value {
    background: var(--c-bg-main);
    padding-top: 25px;
    overflow: hidden;
    /* Prevent GSAP translated cards from overlapping the next section */
}

/* Reduce gap between the header and the stacked cards */
.cs-value .cs-section-header {
    margin-bottom: 15px;
}

.cs-stacked-cards-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: 65vh;
}

.cs-stacked-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 800px;
    height: 60vh;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
    background: var(--c-bg-main);
}

.cs-stacked-card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cs-stacked-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--c-bg-main);
}

.cs-stacked-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(11, 28, 58, 0.95) 0%, rgba(11, 28, 58, 0.7) 40%, transparent 100%);
    z-index: 2;
}

.cs-stacked-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px;
    z-index: 3;
    color: #fff;
}

.cs-value-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
}

.cs-stacked-content h3 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
}

.cs-stacked-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
    line-height: 1.6;
    max-width: 800px;
}

/* ================== SECTION 8: GRAND FINALE ================== */
.cs-finale {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    text-align: center;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.cs-finale::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom, rgba(255, 255, 255, 0.2), transparent 70%);
}

.cs-finale-content {
    position: relative;
    z-index: 2;
}

.cs-finale h2 {
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    line-height: 1;
    font-weight: 800;
    margin-bottom: 40px;
    color: #ffffff;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 1024px) {
    .cs-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .cs-bento-item.large {
        grid-column: span 1;
    }

    .cs-bento-item {
        min-height: 400px;
    }

    .cs-horizontal-track {
        padding: 0 5vw;
    }

    .cs-horizontal-panel {
        flex: 0 0 85vw;
        flex-direction: column;
    }

    .cs-horizontal-content {
        flex: 0 0 auto;
    }

    .cs-alliance-content {
        flex-direction: column;
    }

    .cs-sticky-layout {
        flex-direction: column;
    }

    .cs-sticky-left {
        position: static;
        flex: 0 0 auto;
        margin-bottom: 60px;
    }
}

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

    .cs-masonry {
        flex-direction: column;
    }
}

/* ================== INJECTED SLIDER STYLES ================== */
.partners-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(26, 70, 182, 0.09) 0%, rgba(238, 74, 98, 0.07) 100%);
    border: 1px solid rgba(26, 70, 182, 0.18);
    border-radius: 99px;
    padding: 6px 18px 6px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-primary);
    margin-bottom: 18px;
}

.partners-section-badge .badge-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    animation: cardGlowPulse 2.5s ease-in-out infinite;
}

/* ── Ticker Wrapper ─────────────────────────────────────────────────── */
.partners-ticker-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 48px 0 52px;
    position: relative;
    z-index: 1;
    padding: 32px 0;
    border-radius: 24px;
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(237, 244, 255, 0.82) 50%,
            rgba(255, 246, 248, 0.88) 100%);
    border: 1.5px solid rgba(26, 70, 182, 0.12);
    box-shadow:
        0 24px 60px rgba(26, 70, 182, 0.08),
        0 2px 0 rgba(255, 255, 255, 0.95) inset;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Inner top accent bar */
.partners-ticker-wrap .partners-ticker-accent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 72%);
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--color-primary) 20%,
            var(--color-secondary) 50%,
            var(--color-tertiary) 80%,
            transparent 100%);
    opacity: 0.85;
    animation: partnersPulseLine 3.5s ease-in-out infinite;
    z-index: 3;
}

/* Edge fade masks */
.partners-ticker-wrap::before,
.partners-ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 180px;
    z-index: 4;
    pointer-events: none;
}

.partners-ticker-wrap::before {
    left: 0;
    border-radius: 24px 0 0 24px;
    background: linear-gradient(90deg, #f0f4fe 0%, rgba(240, 244, 254, 0.75) 45%, transparent 100%);
}

.partners-ticker-wrap::after {
    right: 0;
    border-radius: 0 24px 24px 0;
    background: linear-gradient(-90deg, #fdf4f6 0%, rgba(253, 244, 246, 0.75) 45%, transparent 100%);
}

/* Row separator */
.partners-ticker-wrap .logo-slider-main+.logo-slider-main {
    border-top: 1px dashed rgba(26, 70, 182, 0.14);
    padding-top: 18px;
    margin-top: 4px;
}

.partners-ticker-wrap .logo-slider-main {
    background: transparent !important;
    box-shadow: none !important;
    width: 100%;
    overflow: hidden;
    display: flex;
    padding: 8px 0;
    position: relative;
}

.partners-ticker-wrap .logo-slider-main::before,
.partners-ticker-wrap .logo-slider-main::after {
    display: none;
}

.partners-ticker-wrap .logo-slide-track {
    display: flex;
    gap: 22px;
    width: max-content;
    will-change: transform;
    animation: none !important;
    -webkit-animation: none !important;
}

/* ── Partner Card Wrapper ─────────────────────────────────────────── */
.partners-ticker-wrap .partner-card-wrapper {
    padding: 7px;
    perspective: 1100px;
}

/* ── Premium Partner Card ─────────────────────────────────────────── */
.partners-ticker-wrap .partner-card {
    width: 320px;
    height: 170px;
    background: linear-gradient(150deg, #ffffff 0%, #f6f9ff 55%, #fff8f9 100%);
    border-radius: 18px;
    /* Solid outer border */
    border: 2px solid #000000;
    /* Layered shadows for depth */
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 0 rgba(26, 70, 182, 0.06) inset,
        0 8px 28px rgba(26, 70, 182, 0.09),
        0 2px 6px rgba(26, 70, 182, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

/* Corner accent marks */
.partners-ticker-wrap .partner-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(26, 70, 182, 0.06) 0%, transparent 40%),
        linear-gradient(-45deg, rgba(238, 74, 98, 0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* Top gradient accent bar */
.partners-ticker-wrap .partner-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg,
            var(--color-primary) 0%,
            var(--color-secondary) 55%,
            var(--color-tertiary) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 5;
}

/* Spotlight follow */
.partners-ticker-wrap .partner-card .card-spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 110px at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(26, 70, 182, 0.13) 0%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: 18px;
}

/* Shimmer sweep */
.partners-ticker-wrap .partner-card .card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, transparent 32%, rgba(255, 255, 255, 0.72) 50%, transparent 68%);
    transform: translateX(-130%) skewX(-14deg);
    pointer-events: none;
    z-index: 6;
}

/* ── Hover State ──────────────────────────────────────────────────── */
.partners-ticker-wrap .partner-card:hover {
    border-color: #000000;
    transform:
        translateY(-9px) translateZ(16px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.98) inset,
        0 24px 48px rgba(26, 70, 182, 0.16),
        0 8px 16px rgba(26, 70, 182, 0.08),
        0 0 0 1px rgba(238, 74, 98, 0.10),
        /* glow rings */
        0 0 30px rgba(26, 70, 182, 0.10);
    background: linear-gradient(150deg, #ffffff 0%, #eef3ff 55%, #fff5f6 100%);
}

.partners-ticker-wrap .partner-card:hover::after {
    opacity: 1;
}

.partners-ticker-wrap .partner-card:hover .card-spotlight {
    opacity: 1;
}

.partners-ticker-wrap .partner-card:hover .card-shine {
    animation: partnersShimmer 0.72s ease forwards;
}

/* ── Inner Logo Frame ─────────────────────────────────────────────── */
.partners-ticker-wrap .partner-logo-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background: #ffffff;
    /* Double border: solid outer + subtle inner ring */
    border: 2px solid #000000;
    border-radius: 12px;
    box-shadow:
        0 0 0 4px rgba(26, 70, 182, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 3px 10px rgba(26, 70, 182, 0.07);
    position: relative;
    z-index: 2;
    transition: border-color 0.38s ease, box-shadow 0.38s ease, background 0.38s ease;
    overflow: hidden;
}

/* Subtle inset dashed ring decoration */
.partners-ticker-wrap .partner-logo-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(26, 70, 182, 0.09);
    border-radius: 9px;
    pointer-events: none;
    z-index: 0;
}

/* Logo image */
.partners-ticker-wrap .partner-card img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.38s ease;
    pointer-events: none;
    filter: saturate(0.88) contrast(1.06);
    position: relative;
    z-index: 1;
}

/* Hover frame & image effects */
.partners-ticker-wrap .partner-card:hover .partner-logo-frame {
    border-color: #000000;
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
    box-shadow:
        0 0 0 5px rgba(26, 70, 182, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 6px 18px rgba(26, 70, 182, 0.12);
}

.partners-ticker-wrap .partner-card:hover img {
    transform: scale(1.07);
    filter: saturate(1.15) contrast(1.10) brightness(1.02);
}

/* ── Stats Dashboard ─────────────────────────────────────────────────── */
.partners-dashboard {
    background: linear-gradient(140deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(237, 244, 255, 0.90) 50%,
            rgba(255, 247, 249, 0.92) 100%);
    border-radius: 20px;
    border: 1.5px solid rgba(26, 70, 182, 0.15);
    box-shadow:
        0 16px 44px rgba(26, 70, 182, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.98) inset;
    padding: 32px 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.partners-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg,
            var(--color-primary) 0%,
            var(--color-secondary) 50%,
            var(--color-tertiary) 100%);
    opacity: 0.9;
    border-radius: 20px 20px 0 0;
}

/* Subtle decorative corner blob in dashboard */
.partners-dashboard::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 70, 182, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.partners-dashboard-right {
    display: flex;
    align-items: center;
    gap: 100px;
    justify-content: center;
}

/* ================= CAMPUS COLLABORATIONS SLIDER ================= */
.collab-showcase-section {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(26, 70, 182, 0.08);
    border-bottom: 1px solid rgba(26, 70, 182, 0.08);
}

.collab-ticker-wrap {
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
    position: relative;
    /* Optional edge fades */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.collab-slider-main {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.collab-slide-track {
    display: flex;
    width: max-content;
    will-change: transform;
    align-items: center;
    padding: 20px 0;
}

.collab-card-wrapper {
    flex: 0 0 auto;
    padding: 0 25px;
    /* Spacing between circles */
}

.collab-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
}

.collab-card:hover {
    transform: scale(1.1) translateY(-10px);
}

.collab-logo-frame {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    /* Gradient border */
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    padding: 5px;
    /* Width of the gradient border */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(26, 70, 182, 0.15);
    position: relative;
}

.collab-logo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    /* Inner background for the logo */
    padding: 24px;
    /* Padding inside the white circle around the logo */
}

@media (max-width: 768px) {
    .collab-logo-frame {
        width: 130px;
        height: 130px;
    }

    .collab-logo-frame img {
        padding: 16px;
    }

    .collab-card-wrapper {
        padding: 0 15px;
    }
}