/* ============================================
   OneMedAI - Main Stylesheet
   Modern Glass Morphism Medical AI Platform
   ============================================ */

/* ========== CSS Variables ========== */
:root {
    /* Colors */
    --color-bg-primary: #0a0e1a;
    --color-bg-secondary: #0f1829;
    --color-bg-tertiary: #141d2e;

    --color-cyan: #00d4ff;
    --color-cyan-glow: rgba(0, 212, 255, 0.5);
    --color-blue: #667eea;
    --color-pink: #ff006e;
    --color-purple: #9d4edd;

    --color-text-primary: #ffffff;
    --color-text-secondary: #a0aec0;
    --color-text-muted: #718096;

    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(0, 212, 255, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ========== Global Styles ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== Navigation ========== */
/* ========== Navigation ========== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
}

.navbar.scrolled {
    background: rgba(10, 14, 26, 0.95);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between; /* This ensures proper spacing */
    gap: 2rem; /* Add gap between elements */
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent logo from shrinking */
    z-index: 1001;
}

.logo-img {
    height: 40px;
    width: auto;
    transition: transform var(--transition-normal);
}

.logo-img:hover {
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl); /* Increase from var(--spacing-lg) to var(--spacing-xl) */
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: color var(--transition-fast);
    padding: 0.5rem 0.75rem; /* Add horizontal padding: change from "0.5rem 0" to "0.5rem 0.75rem" */
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-blue));
    transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.cta-button {
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 16px var(--color-cyan-glow);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: var(--spacing-md); /* Add this line */
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--color-cyan-glow);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1001;
    flex-shrink: 0; /* Prevent from shrinking */
}

.mobile-menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-text-primary);
    transition: all var(--transition-normal);
    border-radius: 2px;
}
/* ========== Hero Section ========== */
.hero-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    overflow: hidden;
    padding-top: 150px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url('../images/hero-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 14, 26, 0.8), rgba(15, 24, 41, 0.6));
    z-index: 1;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-container {
    max-width: 1400px;
    width: 100%;
    z-index: 10;
    position: relative;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.5rem 1.25rem;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    animation: float 3s ease-in-out infinite;
}

.badge-icon {
    font-size: 1.2rem;
}

/* Hero Title */
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue), var(--color-purple));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s ease infinite;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl);
    line-height: 1.7;
}

/* Highlighted text in hero subtitle */
.hero-subtitle .highlight {
    display: inline-block;
    color: var(--color-text-primary);
    font-weight: 600;
    background: rgba(0, 212, 255, 0.2);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border-left: 4px solid var(--color-cyan);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* Department Cards */
.department-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.dept-card {
    background: var(--glass-bg);
    backdrop-filter: blur(3px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out backwards;
}

.dept-card:nth-child(1) {
    animation-delay: 0.1s;
}

.dept-card:nth-child(2) {
    animation-delay: 0.2s;
}

.dept-card:nth-child(3) {
    animation-delay: 0.3s;
}

.dept-card:nth-child(4) {
    animation-delay: 0.4s;
}

.dept-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, var(--color-cyan-glow), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.dept-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-cyan);
    box-shadow: 0 12px 40px var(--color-cyan-glow);
}

.dept-card:hover::before {
    opacity: 0.15;
}

.dept-icon {
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-md);
    position: relative;
}

.dept-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px var(--color-cyan-glow));
    transition: transform var(--transition-normal);
}

.dept-card:hover .dept-icon img {
    transform: scale(1.1);
}

/* Icon positioning for 2x2 grid cropping */
.icon-pathology {
    object-position: 25% 25%;
}

.icon-radiology {
    object-position: 75% 25%;
}

.icon-oncology {
    object-position: 25% 75%;
}

.icon-cardiology {
    object-position: 75% 75%;
}

.dept-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
}

.dept-card p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Value Props */
.value-props {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-2xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.value-prop {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    animation: fadeInUp 1s ease-out backwards;
}

.value-prop:nth-child(1) {
    animation-delay: 0.5s;
}

.value-prop:nth-child(2) {
    animation-delay: 0.6s;
}

.value-prop:nth-child(3) {
    animation-delay: 0.7s;
}

.value-prop:hover {
    transform: translateY(-4px);
    border-color: var(--color-cyan);
    box-shadow: 0 8px 24px var(--color-cyan-glow);
}

.prop-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 8px var(--color-cyan-glow));
}

.prop-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.prop-content p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Hero CTAs */
.hero-ctas {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    animation: fadeInUp 1.2s ease-out backwards;
    animation-delay: 0.8s;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    box-shadow: 0 8px 24px var(--color-cyan-glow);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px var(--color-cyan-glow);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 2px solid var(--glass-border);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background: var(--glass-bg);
    border-color: var(--color-cyan);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

/* Trust Badge */
.trust-badge {
    text-align: center;
    animation: fadeInUp 1.4s ease-out backwards;
    animation-delay: 1s;
}

.trust-badge p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.compliance-badges {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.badge {
    padding: 0.4rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    animation: float 2s ease-in-out infinite;
    z-index: 10;
}

.scroll-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid var(--color-cyan);
    border-radius: 20px;
    position: relative;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: var(--color-cyan);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
}

.scroll-indicator p {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ========== Animations ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {

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

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

@keyframes gradientShift {

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

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

@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
}

/* ========== Responsive Design ========== */
@media (max-width: 1024px) {
    .nav-menu {
        gap: var(--spacing-lg);
    }

    .department-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-xl);
        transition: right var(--transition-normal);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
    }

    .nav-menu.active {
        right: 0;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .cta-button {
        display: none;
    }

    .hero-section {
        padding: var(--spacing-2xl) var(--spacing-md);
        padding-top: 120px;
    }

    .department-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .value-props {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .hero-ctas {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 1rem;
    }

    .logo-img {
        height: 32px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .dept-icon {
        width: 150px;
        height: 150px;
    }
}

/* ========== Print Styles ========== */
@media print {

    .navbar,
    .scroll-indicator {
        display: none;
    }
}

/* Reassurance Message */
.reassurance-message {
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
    animation: fadeInUp 1.1s ease-out backwards;
    animation-delay: 0.75s;
}

.reassurance-message p {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.highlight-inline {
    color: var(--color-cyan);
    font-weight: 1000;
    background: rgba(0, 212, 255, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* ========================================
   Explainer Video Section - PREMIUM REWRITE
   ======================================== */

.explainer-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: linear-gradient(180deg,
            var(--color-bg-primary) 0%,
            rgba(15, 24, 41, 0.98) 40%,
            var(--color-bg-secondary) 70%,
            var(--color-bg-primary) 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* ============================================
   UNIFIED CRYSTAL BACKGROUND SYSTEM
   ============================================ */

/* Background Container */
.crystal-background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Main Crystal Image */
.crystal-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/crystal-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.9;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: organicBreathing 45s ease-in-out infinite;
}

/* Breathing Animation */
@keyframes organicBreathing {

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

    50% {
        transform: scale(1.03) translate(-1%, -1%);
        opacity: 0.95;
    }
}

/* Dark Gradient Overlay */
.crystal-background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(10, 14, 26, 0.3) 0%,
            rgba(15, 24, 41, 0.5) 30%,
            rgba(20, 29, 46, 0.4) 50%,
            rgba(15, 24, 41, 0.5) 70%,
            rgba(10, 14, 26, 0.6) 100%);
    z-index: 1;
}

/* Vignette Effect */
.crystal-background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 40%,
            rgba(10, 14, 26, 0.3) 100%);
    z-index: 2;
}

/* Make Sections Transparent */
.explainer-section,
.departments-showcase {
    background: transparent !important;
}

/* Subtle Section Tints */
.explainer-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center,
            rgba(0, 212, 255, 0.04) 0%,
            transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.departments-showcase::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 70%;
    background: radial-gradient(ellipse at center,
            rgba(157, 78, 221, 0.04) 0%,
            transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .crystal-background-image {
        animation: none;
        background-attachment: scroll;
        opacity: 0.85;
    }

    .crystal-background-image::before {
        background: linear-gradient(180deg,
                rgba(10, 14, 26, 0.5) 0%,
                rgba(15, 24, 41, 0.6) 50%,
                rgba(10, 14, 26, 0.7) 100%);
    }
}

@media (max-width: 480px) {
    .crystal-background-image {
        background-position: 30% center;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .crystal-background-image {
        animation: none;
    }
}

/* ========== Container & Layout ========== */

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

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

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 2;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all var(--transition-normal);
}

.section-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow:
        0 8px 24px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.section-title {
    font-size: clamp(2.2rem, 5.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0, 212, 255, 0.2);
}

.section-subtitle {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    color: var(--color-text-secondary);
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ========== Video Wrapper - PREMIUM ========== */

.video-wrapper {
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 2;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 950px;
    margin: 0 auto var(--spacing-xl);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 212, 255, 0.25);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 120px rgba(0, 212, 255, 0.2),
        0 16px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 0 60px rgba(0, 212, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-container:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(0, 212, 255, 0.45);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 150px rgba(0, 212, 255, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 80px rgba(0, 212, 255, 0.08);
}

/* Shimmer Effect on Video Container */
.video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(0, 212, 255, 0.15),
            transparent);
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 200%;
    }
}

/* Video Element */
.explainer-video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    z-index: 1;
}

/* ========== Video Overlay ========== */

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 5;
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    filter: drop-shadow(0 12px 32px rgba(0, 212, 255, 0.5));
    position: relative;
}

.video-play-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: playBtnPulse 2s ease-out infinite;
    z-index: -1;
}

@keyframes playBtnPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.video-play-btn:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 16px 40px rgba(0, 212, 255, 0.7));
}

.video-play-btn:active {
    transform: scale(1.05);
}

.video-play-btn svg circle {
    transition: all var(--transition-normal);
}

.video-play-btn:hover svg circle {
    fill: rgba(0, 255, 200, 1);
}

/* ========== Video Stats ========== */

.video-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: var(--radius-lg);
    max-width: 950px;
    margin: 0 auto;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.video-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: transform var(--transition-normal);
}

.video-stat:hover {
    transform: scale(1.05);
}

.stat-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 12px var(--color-cyan-glow));
}

.stat-content h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

.stat-content p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* ========== Video Topics ========== */

.video-topics {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-2xl) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.topics-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-2xl);
    color: var(--color-text-primary);
    text-shadow: 0 2px 16px rgba(0, 212, 255, 0.25);
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.topic-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(0, 212, 255, 0.45);
    transform: translateX(10px);
    box-shadow:
        0 12px 32px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.topic-icon {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 10px var(--color-cyan-glow));
}

.topic-item p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ========== Section CTA ========== */

.section-cta {
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-pretext {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    font-weight: 600;
}

.cta-note {
    margin-top: var(--spacing-md);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

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

@media (max-width: 1024px) {
    .crystal-bg-1 {
        width: 700px;
        height: 700px;
        filter: blur(70px);
    }

    .crystal-bg-2 {
        width: 850px;
        height: 850px;
        filter: blur(75px);
    }

    .crystal-bg-3 {
        width: 750px;
        height: 750px;
        filter: blur(72px);
    }
}

@media (max-width: 768px) {
    .explainer-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .video-stats {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .video-stat {
        width: 100%;
        justify-content: center;
    }

    .video-play-btn svg {
        width: 60px;
        height: 60px;
    }

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

    .crystal-bg {
        filter: blur(60px);
        opacity: 0.7;
    }

    .crystal-bg-1 {
        width: 500px;
        height: 500px;
    }

    .crystal-bg-2 {
        width: 600px;
        height: 600px;
    }

    .crystal-bg-3 {
        width: 550px;
        height: 550px;
    }
}

@media (max-width: 480px) {
    .topics-title {
        font-size: 1.5rem;
    }

    .video-topics {
        padding: var(--spacing-lg);
    }

    .section-title {
        font-size: 2rem;
    }

    .crystal-bg {
        filter: blur(50px);
        opacity: 0.6;
    }
}

/* ========================================
   DEPARTMENTS SHOWCASE SECTION
   ======================================== */

.departments-showcase {
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: linear-gradient(180deg,
            var(--color-bg-primary) 0%,
            rgba(20, 29, 46, 0.98) 30%,
            var(--color-bg-secondary) 60%,
            var(--color-bg-primary) 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

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

.showcase-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

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

.showcase-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    position: relative;
    z-index: 2;
}

/* ========== Departments Grid ========== */

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
    position: relative;
    z-index: 2;
}

/* ========== Showcase Cards ========== */

.showcase-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: showcaseCardFadeIn 0.6s ease-out backwards;
}

/* Staggered animation delays */
.showcase-card:nth-child(1) {
    animation-delay: 0.05s;
}

.showcase-card:nth-child(2) {
    animation-delay: 0.1s;
}

.showcase-card:nth-child(3) {
    animation-delay: 0.15s;
}

.showcase-card:nth-child(4) {
    animation-delay: 0.2s;
}

.showcase-card:nth-child(5) {
    animation-delay: 0.25s;
}

.showcase-card:nth-child(6) {
    animation-delay: 0.3s;
}

.showcase-card:nth-child(7) {
    animation-delay: 0.35s;
}

.showcase-card:nth-child(8) {
    animation-delay: 0.4s;
}

.showcase-card:nth-child(9) {
    animation-delay: 0.45s;
}

.showcase-card:nth-child(10) {
    animation-delay: 0.5s;
}

.showcase-card:nth-child(11) {
    animation-delay: 0.55s;
}

.showcase-card:nth-child(12) {
    animation-delay: 0.6s;
}

@keyframes showcaseCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Card Shimmer Effect */
.showcase-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(0, 212, 255, 0.08) 0%,
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.showcase-card:hover::before {
    opacity: 1;
    animation: showcaseShimmer 2s ease-in-out infinite;
}

@keyframes showcaseShimmer {

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

    50% {
        transform: translate(20px, -20px);
    }
}

/* Available Cards (Tier 1) */
.showcase-card.available {
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.showcase-card.available:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow:
        0 20px 60px rgba(0, 212, 255, 0.25),
        0 0 80px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Coming Soon Cards (Tier 2) */
.showcase-card.coming-soon {
    border-color: rgba(157, 78, 221, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.showcase-card.coming-soon:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(157, 78, 221, 0.5);
    box-shadow:
        0 16px 48px rgba(157, 78, 221, 0.2),
        0 0 60px rgba(157, 78, 221, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ========== Card Status Badge ========== */

.card-status {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 5;
}

.status-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.available-badge {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.4);
    animation: availablePulse 2s ease-in-out infinite;
}

@keyframes availablePulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(0, 255, 136, 0.5);
    }
}

.coming-badge {
    background: rgba(157, 78, 221, 0.2);
    color: #c49dff;
    border: 1px solid rgba(157, 78, 221, 0.4);
}

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

.card-icon-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--spacing-lg);
}

.card-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 212, 255, 0.4));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-card:hover .card-icon img {
    transform: scale(1.12) rotate(3deg);
    filter: drop-shadow(0 12px 24px rgba(0, 212, 255, 0.6));
}

/* Placeholder Icons (for coming soon departments) */
.icon-placeholder {
    font-size: 4.5rem;
    filter: drop-shadow(0 8px 16px rgba(157, 78, 221, 0.4));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

.showcase-card.coming-soon:hover .icon-placeholder {
    transform: scale(1.12) rotate(3deg);
    filter: drop-shadow(0 12px 24px rgba(157, 78, 221, 0.6));
    opacity: 1;
}

/* Icon Glow Effect */
.icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.showcase-card.available .icon-glow {
    background: radial-gradient(circle,
            rgba(0, 212, 255, 0.3) 0%,
            rgba(0, 212, 255, 0.1) 40%,
            transparent 70%);
}

.showcase-card.coming-soon .icon-glow {
    background: radial-gradient(circle,
            rgba(157, 78, 221, 0.25) 0%,
            rgba(157, 78, 221, 0.08) 40%,
            transparent 70%);
}

.showcase-card:hover .icon-glow {
    opacity: 1;
    animation: iconGlowPulse 2s ease-in-out infinite;
}

@keyframes iconGlowPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* ========== Card Content ========== */

.card-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
    text-shadow: 0 2px 12px rgba(0, 212, 255, 0.2);
    transition: color 0.3s ease;
}

.showcase-card:hover .card-title {
    color: var(--color-cyan);
}

.card-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

/* ========== Feature Tags ========== */

.card-features {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.feature-tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.showcase-card.available .feature-tag {
    border-color: rgba(0, 212, 255, 0.3);
}

.showcase-card.coming-soon .feature-tag {
    border-color: rgba(157, 78, 221, 0.25);
}

.showcase-card:hover .feature-tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-cyan);
    transform: translateY(-2px);
}

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

.showcase-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-lg);
    max-width: 700px;
    margin: 0 auto;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.legend-item span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.available-dot {
    background: #00ff88;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.6);
    animation: availableDotPulse 2s ease-in-out infinite;
}

@keyframes availableDotPulse {

    0%,
    100% {
        box-shadow: 0 0 16px rgba(0, 255, 136, 0.6);
    }

    50% {
        box-shadow: 0 0 24px rgba(0, 255, 136, 0.9);
    }
}

.coming-dot {
    background: #c49dff;
    box-shadow: 0 0 12px rgba(157, 78, 221, 0.5);
}

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

@media (max-width: 1024px) {
    .showcase-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .departments-showcase {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .showcase-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--spacing-md);
    }

    .showcase-card {
        padding: var(--spacing-lg);
    }

    .card-icon-wrapper {
        width: 120px;
        height: 120px;
    }

    .icon-placeholder {
        font-size: 3.5rem;
    }

    .showcase-legend {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .showcase-crystal {
        filter: blur(60px);
        opacity: 0.7;
    }

    .showcase-crystal-1 {
        width: 600px;
        height: 600px;
    }

    .showcase-crystal-2 {
        width: 700px;
        height: 700px;
    }

    .showcase-crystal-3 {
        width: 550px;
        height: 550px;
    }
}

@media (max-width: 480px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .card-icon-wrapper {
        width: 100px;
        height: 100px;
    }

    .icon-placeholder {
        font-size: 3rem;
    }

    .card-title {
        font-size: 1.2rem;
    }

    .card-description {
        font-size: 0.85rem;
    }

    .showcase-crystal {
        filter: blur(50px);
        opacity: 0.6;
    }
}

/* ============================================
   ORGANIC CRYSTAL BACKGROUND SYSTEM
   Option 2: Bioluminescent Medical Aesthetic
   ============================================ */

/* ========== Global Background Container ========== */
.crystal-background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.crystal-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/crystal-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Parallax on desktop */
    opacity: 0.9;
    will-change: transform;
    transform: translateZ(0);
    /* Hardware acceleration */
    backface-visibility: hidden;
}

/* Subtle breathing animation for organic feel */
@keyframes organicBreathing {

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

    50% {
        transform: scale(1.03) translate(-1%, -1%);
        opacity: 0.95;
    }
}

.crystal-background-image {
    animation: organicBreathing 45s ease-in-out infinite;
}

/* Gradient overlay for depth and readability */
.crystal-background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(10, 14, 26, 0.3) 0%,
            /* Lighter at top */
            rgba(15, 24, 41, 0.5) 30%,
            rgba(20, 29, 46, 0.4) 50%,
            /* Transparent middle */
            rgba(15, 24, 41, 0.5) 70%,
            rgba(10, 14, 26, 0.6) 100%
            /* Darker at bottom */
        );
    z-index: 1;
}

/* Optional: Radial vignette for focus */
.crystal-background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 40%,
            rgba(10, 14, 26, 0.3) 100%);
    z-index: 2;
}

/* ========== Remove Old Crystal Orbs ========== */
/* Hide all CSS-generated crystal elements */
.crystal-bg,
.crystal-bg-1,
.crystal-bg-2,
.crystal-bg-3,
.showcase-crystal,
.showcase-crystal-1,
.showcase-crystal-2,
.showcase-crystal-3,
.explainer-section::before,
.explainer-section::after,
.explainer-section .section-container::before,
.explainer-section .section-container::after {
    display: none !important;
}

/* ========== Section Background Updates ========== */
/* Make sections transparent to show unified background */
.explainer-section,
.departments-showcase {
    background: transparent !important;
    position: relative;
}

/* Optional: Subtle section-specific tints for variety */
.explainer-section {
    position: relative;
}

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

/* Subtle cyan tint for explainer section */
.explainer-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center,
            rgba(0, 212, 255, 0.04) 0%,
            transparent 60%);
    pointer-events: none;
    z-index: 1;
    display: block !important;
    /* Override the display: none above */
}

/* Subtle purple tint for departments section */
.departments-showcase::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 70%;
    background: radial-gradient(ellipse at center,
            rgba(157, 78, 221, 0.04) 0%,
            transparent 65%);
    pointer-events: none;
    z-index: 1;
    display: block !important;
    /* Override the display: none above */
}

/* ========== Hero Section Separation ========== */
/* Keep hero with its own background */
.hero-section {
    position: relative;
    z-index: 1;
}

.hero-background {
    /* Keep existing hero background styles */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 1024px) {
    .crystal-background-image {
        /* Reduce animation intensity on tablets */
        animation-duration: 60s;
    }
}

@media (max-width: 768px) {
    .crystal-background-image {
        /* Disable animation on mobile for performance */
        animation: none;
        background-attachment: scroll;
        /* Better mobile performance */
        opacity: 0.85;
        /* Slightly more transparent for readability */
    }

    /* Stronger gradient on mobile for text readability */
    .crystal-background-image::before {
        background: linear-gradient(180deg,
                rgba(10, 14, 26, 0.5) 0%,
                rgba(15, 24, 41, 0.6) 50%,
                rgba(10, 14, 26, 0.7) 100%);
    }
}

@media (max-width: 480px) {
    .crystal-background-image {
        background-position: 30% center;
        /* Adjust crop on small screens */
    }
}

/* ========== Performance Optimization ========== */
@media (prefers-reduced-motion: reduce) {
    .crystal-background-image {
        animation: none;
    }
}

/* ========== Print Styles ========== */
@media print {
    .crystal-background-wrapper {
        display: none;
    }
}

/* ========== Loading State ========== */
.crystal-background-image {
    transition: opacity 0.8s ease-in;
}

body.loading .crystal-background-image {
    opacity: 0;
}

body.loaded .crystal-background-image {
    opacity: 0.9;
}

/* Optimize for performance */
.crystal-background-image {
    will-change: transform;
    transform: translateZ(0);
    /* Hardware acceleration */
    backface-visibility: hidden;
}

/* Optional: Disable animation on mobile for performance */
@media (max-width: 768px) {
    .crystal-background-image {
        animation: none;
        background-attachment: scroll;
    }
}

/* ========================================
   TRUST SECTION - AI That Assists, Not Replaces
   ======================================== */

.trust-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

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

.comparison-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    align-items: start;
    position: relative;
    z-index: 2;
}

/* ========== Comparison Cards ========== */

.comparison-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.comparison-card.without-ai {
    border-color: rgba(255, 100, 100, 0.3);
}

.comparison-card.with-ai {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow:
        0 20px 60px rgba(0, 255, 136, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.comparison-card:hover {
    transform: translateY(-8px);
}

/* Card Header */
.card-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    filter: drop-shadow(0 4px 12px rgba(0, 212, 255, 0.4));
}

.card-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.status-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.traditional {
    background: rgba(255, 100, 100, 0.2);
    color: #ff9999;
    border: 1px solid rgba(255, 100, 100, 0.3);
}

.status-badge.ai-powered {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.4);
    animation: aiPowerPulse 2s ease-in-out infinite;
}

@keyframes aiPowerPulse {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    }
}

/* Workflow Steps */
.home-workflow-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.home-workflow-step {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border-left: 3px solid rgba(255, 100, 100, 0.5);
    transition: all 0.3s ease;
}

.home-workflow-step.enhanced {
    border-left-color: rgba(0, 255, 136, 0.6);
}

.home-workflow-step:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(8px);
}

.home-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.2);
    border: 2px solid rgba(0, 212, 255, 0.4);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-cyan);
}

.home-step-content h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
}

.home-step-content p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.time-indicator {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.home-time-indicator.high {
    background: rgba(255, 100, 100, 0.2);
    color: #ff9999;
}

.home-time-indicator.low {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

/* Card Stats */
.home-card-stats {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.home-stat-item {
    text-align: center;
}

.home-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.3rem;
}

.home-stat-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.home-enhanced-stats .home-stat-value {
    color: var(--color-cyan);
}

.home-stat-improvement {
    font-size: 0.75rem;
    color: #00ff88;
    font-weight: 600;
    margin-top: 0.3rem;
}

/* VS Divider */
.vs-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vs-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.5);
    z-index: 2;
    animation: vsRotate 8s linear infinite;
}

@keyframes vsRotate {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}

.divider-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            var(--color-cyan) 20%,
            var(--color-purple) 50%,
            var(--color-cyan) 80%,
            transparent 100%);
    z-index: 1;
}

/* ========== Trust Message ========== */

.home-trust-message {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
    padding: var(--spacing-2xl);
    background: rgba(0, 212, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-3xl);
    box-shadow:
        0 16px 48px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 2;
}

.home-message-icon {
    font-size: 3rem;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 16px rgba(0, 212, 255, 0.5));
}

.home-message-content h3 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.home-message-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* ========== Testimonial Card ========== */

.testimonial-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 212, 255, 0.25);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--color-cyan);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

.testimonial-info h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
}

.testimonial-info p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.beta-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: rgba(157, 78, 221, 0.2);
    border: 1px solid rgba(157, 78, 221, 0.4);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c49dff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.testimonial-quote {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    font-style: italic;
    margin-bottom: var(--spacing-xl);
    padding-left: var(--spacing-lg);
    border-left: 4px solid var(--color-cyan);
}

.testimonial-stats {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.testi-stat {
    text-align: center;
}

.testi-stat .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-cyan);
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 12px rgba(0, 212, 255, 0.4);
}

.testi-stat .stat-text {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

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

@media (max-width: 1200px) {
    .comparison-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .vs-divider {
        flex-direction: row;
        height: auto;
        width: 100%;
        margin: var(--spacing-lg) 0;
    }

    .divider-line {
        width: 100%;
        height: 2px;
    }

    .scale-chart {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .trust-section,
    .scale-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .home-workflow-steps {
        gap: var(--spacing-md);
    }

    .home-card-stats,
    .testimonial-stats,
    .banner-stats {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .home-trust-message {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-header {
        flex-direction: column;
        text-align: center;
    }

    .scale-chart {
        grid-template-columns: 1fr;
    }

    .perf-cards {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 480px) {
    .comparison-card {
        padding: var(--spacing-lg);
    }

    .testimonial-quote {
        font-size: 1rem;
    }

    .banner-stat .stat-number {
        font-size: 2rem;
    }
}

.header-icon .custom-icon {
    width: 150px;
    height: 150px;
    filter: drop-shadow(0 4px 16px rgba(0, 212, 255, 0.6));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-card:hover .header-icon .custom-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 24px rgba(0, 212, 255, 0.8));
}

/* ========================================
   AI RESULTS SHOWCASE SECTION
   ======================================== */

.results-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

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

.results-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
    z-index: 2;
}

/* ========== Image Panel ========== */

.image-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.image-wrapper {
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 2px solid rgba(0, 212, 255, 0.3);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.image-wrapper:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 120px rgba(0, 212, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.medical-image {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.95;
}

/* Scanning Animation */
.scan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 212, 255, 0.8) 50%,
            transparent 100%);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    animation: scanAnimation 3s ease-in-out infinite;
}

@keyframes scanAnimation {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* ROI Markers */
.roi-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}

.marker-dot {
    width: 12px;
    height: 12px;
    background: rgba(0, 212, 255, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.8);
}

.marker-dot.warning {
    background: rgba(255, 100, 100, 0.9);
    box-shadow: 0 0 16px rgba(255, 100, 100, 0.8);
}

.marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 212, 255, 0.8);
    border-radius: 50%;
    animation: markerPulse 2s ease-out infinite;
}

.marker-pulse.warning {
    border-color: rgba(255, 100, 100, 0.8);
}

@keyframes markerPulse {
    0% {
        width: 12px;
        height: 12px;
        opacity: 1;
    }

    100% {
        width: 40px;
        height: 40px;
        opacity: 0;
    }
}

/* Image Metadata */
.image-metadata {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.meta-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meta-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-cyan);
    text-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

/* ========== Analysis Panel ========== */

.analysis-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    max-height: 900px;
    overflow-y: auto;
}

/* Custom Scrollbar */
.analysis-panel::-webkit-scrollbar {
    width: 8px;
}

.analysis-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.analysis-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 4px;
}

.analysis-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.5);
}

/* Analysis Status */
.analysis-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(100, 100, 100, 0.5);
}

.status-dot.active {
    background: #00ff88;
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.9);
    }
}

.urgency-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.urgency-badge.urgent {
    background: rgba(255, 100, 100, 0.2);
    color: #ff6464;
    border: 1px solid rgba(255, 100, 100, 0.4);
}

/* Findings Section */
.findings-section,
.diagnosis-section,
.recommendations-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.findings-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.title-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.4));
}

/* Finding Cards */
.finding-card {
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.finding-card.critical {
    border-left-color: #ff6464;
    background: rgba(255, 100, 100, 0.08);
}

.finding-card.warning {
    border-left-color: #ffa500;
    background: rgba(255, 165, 0, 0.08);
}

.finding-card.normal {
    border-left-color: #00ff88;
    background: rgba(0, 255, 136, 0.06);
}

.finding-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}

.finding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.finding-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.finding-badge.critical {
    background: rgba(255, 100, 100, 0.3);
    color: #ff9999;
}

.finding-badge.warning {
    background: rgba(255, 165, 0, 0.3);
    color: #ffb347;
}

.finding-badge.normal {
    background: rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

.confidence-score {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-cyan);
}

.finding-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.finding-details {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.finding-details li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.finding-details li::before {
    content: '•';
    color: var(--color-cyan);
    font-weight: 700;
    flex-shrink: 0;
}

/* Diagnosis List */
.diagnosis-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.diagnosis-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 212, 255, 0.15);
    transition: all 0.3s ease;
}

.diagnosis-item.primary {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.4);
}

.diagnosis-item:hover {
    transform: translateX(8px);
    border-color: var(--color-cyan);
}

.diagnosis-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.2);
    border: 2px solid rgba(0, 212, 255, 0.4);
    border-radius: 50%;
    font-weight: 700;
    color: var(--color-cyan);
    flex-shrink: 0;
}

.diagnosis-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.diagnosis-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.diagnosis-probability {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Recommendation Cards */
.recommendation-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.rec-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 212, 255, 0.15);
    transition: all 0.3s ease;
}

.rec-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-cyan);
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.2);
}

.rec-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.4));
    flex-shrink: 0;
}

.rec-content h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
}

.rec-content p {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Export Actions */
.export-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.export-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
}

.export-btn.primary {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    box-shadow: 0 4px 16px var(--color-cyan-glow);
}

.export-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--color-cyan-glow);
}

.export-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    border: 2px solid rgba(0, 212, 255, 0.3);
}

.export-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-cyan);
    transform: translateY(-2px);
}

/* Results Stats Banner */
.results-stats-banner {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.results-stats-banner .stat-item {
    text-align: center;
}

.results-stats-banner .stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-cyan);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 16px rgba(0, 212, 255, 0.4);
}

.results-stats-banner .stat-label {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

@media (max-width: 1200px) {
    .results-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .recommendation-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .results-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .image-metadata {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .analysis-panel {
        padding: var(--spacing-lg);
    }

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

    .results-stats-banner {
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .results-stats-banner .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {

    .finding-card,
    .diagnosis-item,
    .rec-card {
        padding: var(--spacing-md);
    }

    .findings-title {
        font-size: 1rem;
    }
}

/* ========================================
   TEAM SECTION - REDESIGNED
   ======================================== */

.team-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* ========== Team Filters ========== */

.team-filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-3xl);
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: 50px;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: capitalize;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.4);
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 16px var(--color-cyan-glow);
}

/* ========== Main Team Grid (Photos) ========== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-xl);
    max-width: 1400px;
    margin: 0 auto var(--spacing-3xl);
}

/* ========== Team Cards with Images ========== */

.team-card.has-image {
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: teamCardFadeIn 0.6s ease-out backwards;
}

.team-card.has-image.hidden {
    display: none;
}

@keyframes teamCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Staggered animation delays */
.team-card:nth-child(1) {
    animation-delay: 0.05s;
}

.team-card:nth-child(2) {
    animation-delay: 0.1s;
}

.team-card:nth-child(3) {
    animation-delay: 0.15s;
}

.team-card:nth-child(4) {
    animation-delay: 0.2s;
}

.team-card:nth-child(5) {
    animation-delay: 0.25s;
}

.team-card:nth-child(6) {
    animation-delay: 0.3s;
}

.team-card:nth-child(7) {
    animation-delay: 0.35s;
}

.card-inner {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Color-specific borders */
.team-card[data-color="cyan"] .card-inner {
    border-color: rgba(0, 212, 255, 0.3);
}

.team-card[data-color="blue"] .card-inner {
    border-color: rgba(102, 126, 234, 0.3);
}

.team-card[data-color="purple"] .card-inner {
    border-color: rgba(157, 78, 221, 0.3);
}

.card-inner:hover {
    transform: translateY(-12px);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.team-card[data-color="cyan"] .card-inner:hover {
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow:
        0 24px 60px rgba(0, 212, 255, 0.3),
        0 0 80px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.team-card[data-color="blue"] .card-inner:hover {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow:
        0 24px 60px rgba(102, 126, 234, 0.3),
        0 0 80px rgba(102, 126, 234, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.team-card[data-color="purple"] .card-inner:hover {
    border-color: rgba(157, 78, 221, 0.6);
    box-shadow:
        0 24px 60px rgba(157, 78, 221, 0.3),
        0 0 80px rgba(157, 78, 221, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ========== Team Image ========== */

.team-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(102, 126, 234, 0.1));
}

.team-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-inner:hover .team-image {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.7) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.card-inner:hover .image-overlay {
    opacity: 1;
}

/* ========== Team Info ========== */

.team-info {
    text-align: center;
    padding-top: var(--spacing-sm);
}

.team-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
    transition: color var(--transition-normal);
}

.card-inner:hover .team-name {
    color: var(--color-cyan);
}

.team-role {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

/* ========================================
   DEVELOPMENT TEAM SECTION (COMPACT)
   ======================================== */

.development-team-section {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-3xl);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
}

.dev-team-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: var(--spacing-2xl);
    color: var(--color-text-primary);
    text-shadow: 0 2px 16px rgba(0, 212, 255, 0.2);
}

.dev-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* ========== Development Cards (Compact Style) ========== */

.dev-card {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: devCardFadeIn 0.5s ease-out backwards;
}

.dev-card:nth-child(1) {
    animation-delay: 0.1s;
}

.dev-card:nth-child(2) {
    animation-delay: 0.2s;
}

.dev-card:nth-child(3) {
    animation-delay: 0.3s;
}

.dev-card:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes devCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dev-card-inner {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Color-specific borders for dev cards */
.dev-card[data-color="cyan"] .dev-card-inner {
    border-color: rgba(0, 212, 255, 0.2);
}

.dev-card[data-color="blue"] .dev-card-inner {
    border-color: rgba(102, 126, 234, 0.2);
}

.dev-card[data-color="purple"] .dev-card-inner {
    border-color: rgba(157, 78, 221, 0.2);
}

.dev-card-inner:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
}

.dev-card[data-color="cyan"] .dev-card-inner:hover {
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow:
        0 12px 32px rgba(0, 212, 255, 0.2),
        0 0 60px rgba(0, 212, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dev-card[data-color="blue"] .dev-card-inner:hover {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow:
        0 12px 32px rgba(102, 126, 234, 0.2),
        0 0 60px rgba(102, 126, 234, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dev-card[data-color="purple"] .dev-card-inner:hover {
    border-color: rgba(157, 78, 221, 0.5);
    box-shadow:
        0 12px 32px rgba(157, 78, 221, 0.2),
        0 0 60px rgba(157, 78, 221, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Development card text */
.dev-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--color-text-primary);
    transition: all var(--transition-normal);
}

.dev-role {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    line-height: 1.4;
    transition: color var(--transition-normal);
}

.dev-card[data-color="cyan"] .dev-card-inner:hover .dev-name {
    color: var(--color-cyan);
    text-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
}

.dev-card[data-color="blue"] .dev-card-inner:hover .dev-name {
    color: var(--color-blue);
    text-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.dev-card[data-color="purple"] .dev-card-inner:hover .dev-name {
    color: var(--color-purple);
    text-shadow: 0 2px 8px rgba(157, 78, 221, 0.4);
}

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

@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--spacing-lg);
    }

    .dev-team-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .team-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .team-filters {
        gap: var(--spacing-sm);
    }

    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .dev-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .development-team-section {
        margin-top: var(--spacing-2xl);
        padding-top: var(--spacing-2xl);
    }

    .dev-team-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .dev-team-grid {
        grid-template-columns: 1fr;
    }

    .team-name {
        font-size: 1.1rem;
    }

    .team-role {
        font-size: 0.85rem;
    }

    .dev-name {
        font-size: 1.05rem;
    }

    .dev-role {
        font-size: 0.85rem;
    }
}

/* ========================================
   CASE STUDIES SECTION
   ======================================== */

.case-studies-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* ========== Case Studies Grid ========== */

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
    z-index: 2;
}

/* ========== Case Study Cards ========== */

.case-study-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: caseCardFadeIn 0.6s ease-out backwards;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Staggered animations */
.case-study-card:nth-child(1) {
    animation-delay: 0.1s;
}

.case-study-card:nth-child(2) {
    animation-delay: 0.2s;
}

.case-study-card:nth-child(3) {
    animation-delay: 0.3s;
}

.case-study-card:nth-child(4) {
    animation-delay: 0.4s;
}

.case-study-card:nth-child(5) {
    animation-delay: 0.5s;
}

.case-study-card:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes caseCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.case-study-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right,
            rgba(0, 212, 255, 0.08) 0%,
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.case-study-card:hover {
    transform: translateY(-12px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow:
        0 24px 60px rgba(0, 212, 255, 0.25),
        0 0 80px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.case-study-card:hover::before {
    opacity: 1;
}

/* ========== Case Number ========== */

.case-number {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-cyan);
    background: rgba(0, 212, 255, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* ========== Case Specialty ========== */

.case-specialty {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--spacing-sm);
}

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

.case-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.case-study-card:hover .case-title {
    color: var(--color-cyan);
}

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

.case-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    flex: 1;
}

/* ========== Case Meta Tags ========== */

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: auto;
}

.meta-tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}

.case-study-card:hover .meta-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateY(-2px);
}

/* ========== Case Study Button ========== */

.case-study-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.9rem 1.5rem;
    background: rgba(0, 212, 255, 0.1);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-cyan);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.case-study-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.case-study-btn:hover::before {
    left: 100%;
}

.case-study-btn:hover {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    border-color: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

.case-study-btn svg {
    transition: transform 0.3s ease;
}

.case-study-btn:hover svg {
    transform: translateX(4px);
}

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

@media (max-width: 1024px) {
    .case-studies-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .case-studies-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .case-study-card {
        padding: var(--spacing-lg);
    }

    .case-title {
        font-size: 1.2rem;
    }

    .case-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .case-study-card {
        padding: var(--spacing-md);
    }

    .case-title {
        font-size: 1.1rem;
    }

    .case-description {
        font-size: 0.85rem;
    }

    .case-study-btn {
        width: 100%;
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   CTA SECTION - Ready to Get Started
   ======================================== */

.cta-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== CTA Header ========== */

.cta-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    position: relative;
    z-index: 2;
}

.cta-main-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    text-shadow: 0 2px 20px rgba(0, 212, 255, 0.2);
}

.cta-subtitle {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ========== CTA Cards Wrapper ========== */

.cta-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    max-width: 1200px;
    margin: 0 auto var(--spacing-2xl);
    position: relative;
    z-index: 2;
}

/* ========== CTA Cards ========== */

.cta-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top,
            rgba(0, 212, 255, 0.1) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.cta-card:hover {
    transform: translateY(-12px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow:
        0 24px 60px rgba(0, 212, 255, 0.25),
        0 0 80px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cta-card:hover::before {
    opacity: 1;
}

/* Featured Card */
.cta-card-featured {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow:
        0 12px 40px rgba(0, 212, 255, 0.2),
        0 0 60px rgba(0, 212, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cta-card-featured:hover {
    border-color: rgba(0, 212, 255, 0.7);
    box-shadow:
        0 32px 80px rgba(0, 212, 255, 0.35),
        0 0 100px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Featured Badge */
.featured-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
    animation: featuredPulse 2s ease-in-out infinite;
}

@keyframes featuredPulse {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
    }

    50% {
        box-shadow: 0 4px 24px rgba(0, 212, 255, 0.6);
    }
}

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

.cta-icon-wrapper {
    margin-bottom: var(--spacing-lg);
}

.cta-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.15);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-cyan);
    transition: all 0.3s ease;
}

.cta-card:hover .cta-icon {
    background: rgba(0, 212, 255, 0.25);
    border-color: rgba(0, 212, 255, 0.5);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
}

/* ========== CTA Content ========== */

.cta-card-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.cta-card:hover .cta-card-title {
    color: var(--color-cyan);
}

.cta-card-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-cyan);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
}

.cta-card-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* ========== Features List ========== */

.cta-features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex: 1;
}

.cta-features-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}

.cta-features-list li:hover {
    color: var(--color-text-primary);
    transform: translateX(8px);
}

.cta-features-list li svg {
    flex-shrink: 0;
}

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

.cta-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 1.1rem 2rem;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

.cta-primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.cta-primary-btn:hover::before {
    left: 100%;
}

.cta-primary-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.5);
}

.cta-primary-btn svg {
    transition: transform 0.3s ease;
}

.cta-primary-btn:hover svg {
    transform: translateX(4px);
}

.cta-featured-btn {
    background: linear-gradient(135deg, #00ff88, var(--color-cyan));
    box-shadow: 0 8px 24px rgba(0, 255, 136, 0.4);
}

.cta-featured-btn:hover {
    box-shadow: 0 12px 32px rgba(0, 255, 136, 0.5);
}

/* ========== CTA Footer Note ========== */

.cta-footer-note {
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-footer-note p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 50px;
    display: inline-block;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
    background: linear-gradient(180deg,
            rgba(10, 14, 26, 0.95) 0%,
            rgba(15, 24, 41, 1) 50%,
            rgba(10, 14, 26, 1) 100%);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-xl);
    position: relative;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ========== Footer Top ========== */

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

/* ========== Footer Brand ========== */

.footer-brand {
    max-width: 350px;
}

.footer-logo {
    height: 40px;
    width: 200px;
    margin-bottom: var(--spacing-md);
}

.footer-tagline {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* ========== Social Links ========== */

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}

.social-link:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 212, 255, 0.3);
}

/* ========== Footer Columns ========== */

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links li a {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: var(--color-cyan);
    transform: translateX(5px);
}

/* ========== Footer Bottom ========== */

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-copyright {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ========== Compliance Badges ========== */

.footer-compliance-badges {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.compliance-badge {
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.compliance-badge:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

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

@media (max-width: 1024px) {
    .cta-cards-wrapper {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

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

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .cta-card {
        padding: var(--spacing-xl);
    }

    .cta-main-title {
        font-size: 2rem;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .cta-card {
        padding: var(--spacing-lg);
    }

    .cta-card-title {
        font-size: 1.5rem;
    }

    .cta-primary-btn {
        width: 100%;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-compliance-badges {
        justify-content: center;
    }
}

/* ================== ABOUT HERO SECTION ================== */
.about-hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    padding-top: 120px;
    position: relative;
    overflow: hidden;
}

.about-hero-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out;
}

.about-hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
}

.about-hero-subtitle {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    color: var(--color-text-secondary);
    max-width: 900px;
    margin: 0 auto var(--spacing-3xl);
    line-height: 1.7;
}

.about-hero-image {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: var(--spacing-lg);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(0, 212, 255, 0.15);
    animation: fadeInUp 1.2s ease-out 0.3s backwards;
}

.about-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

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

.mission-vision-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
}

.mission-card,
.vision-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.mission-card::before,
.vision-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(0, 212, 255, 0.08) 0%,
            transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mission-card:hover::before,
.vision-card:hover::before {
    opacity: 1;
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow:
        0 20px 60px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.card-icon-wrapper {
    margin-bottom: var(--spacing-lg);
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(0, 212, 255, 0.1);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    font-size: 2.5rem;
    position: relative;
}

.card-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.3), transparent);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

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

    50% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.card-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

.card-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* Mission Highlights */
.mission-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.highlight-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border-left: 3px solid rgba(0, 212, 255, 0.5);
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(8px);
}

.highlight-icon {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.4));
}

.highlight-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
}

.highlight-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

/* Vision Goals */
.vision-goals {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.goal-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.goal-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(8px);
}

.goal-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.1rem;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
}

.goal-content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
}

.goal-content p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* ========================================
   WHO WE SERVE SECTION
   ======================================== */

.who-we-serve-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
}

.serve-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
    margin-top: var(--spacing-2xl);
}

.serve-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.serve-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow:
        0 20px 60px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.serve-icon {
    width: 100%;
    height: 200px;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.serve-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 212, 255, 0.4));
    transition: transform 0.4s ease;
}

.serve-card:hover .serve-icon img {
    transform: scale(1.1);
}

.serve-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

.serve-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.serve-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.feature-icon {
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: #0dc8fc;
    font-weight: 700;
    font-size: 3rem;
    filter: drop-shadow(0 4px 12px rgba(0, 212, 255, 0.4));
}


/* ========================================
   HOW IT WORKS SECTION
   ======================================== */

.how-it-works-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
}

.workflow-timeline {
    max-width: 1000px;
    margin: 0 auto;
    margin-top: var(--spacing-3xl);
    position: relative;
}

.workflow-step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.workflow-step:last-child {
    margin-bottom: 0;
}

.step-number {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.5);
    position: relative;
    z-index: 2;
}

.step-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all 0.3s ease;
}

.step-content:hover {
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateX(8px);
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2);
}

.step-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.step-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.step-visual {
    width: 100%;
    height: 200px;
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.step-visual img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 212, 255, 0.3));
}

.step-stats {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.step-stats .stat {
    padding: 0.4rem 0.9rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cyan);
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */

.final-cta-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 212, 255, 0.03) 50%,
            transparent 100%);
}

.final-cta-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: var(--spacing-3xl);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(30px) saturate(180%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-xl);
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.5),
        0 0 120px rgba(0, 212, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.final-cta-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue), var(--color-purple));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s ease infinite;
}

.final-cta-subtitle {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl);
}

.final-cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

.final-cta-trust {
    padding-top: var(--spacing-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.trust-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.trust-stat {
    text-align: center;
}

.trust-stat .stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-cyan);
    margin-bottom: 0.3rem;
    text-shadow: 0 4px 16px rgba(0, 212, 255, 0.5);
}

.trust-stat .stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

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

@media (max-width: 1200px) {

    .mission-vision-grid,
    .serve-grid,
    .differentiators-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .roadmap-vision {
        grid-column: span 1;
    }
}

@media (max-width: 1024px) {
    .join-us-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .join-us-visual {
        height: 400px;
    }
}

@media (max-width: 768px) {

    .about-hero-section,
    .mission-vision-section,
    .who-we-serve-section,
    .differentiators-section,
    .core-features-section,
    .how-it-works-section,
    .security-section,
    .journey-section,
    .looking-ahead-section,
    .join-us-section,
    .final-cta-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .about-hero-section {
        padding-top: 100px;
    }

    .about-hero-image {
        padding: var(--spacing-md);
    }

    .card-title {
        font-size: 1.8rem;
    }

    .serve-icon,
    .diff-icon {
        height: 150px;
    }

    .core-features-grid {
        grid-template-columns: 1fr;
    }

    .workflow-step {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .step-number {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }

    .step-visual {
        height: 160px;
    }

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

    .compliance-badges {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-item {
        gap: var(--spacing-md);
    }

    .timeline-visual {
        height: 150px;
    }

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

    .join-us-visual {
        height: 300px;
    }

    .final-cta-content {
        padding: var(--spacing-xl);
    }

    .final-cta-buttons {
        flex-direction: column;
    }

    .btn-large {
        width: 100%;
    }

    .trust-stats {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .about-hero-title {
        font-size: 2rem;
    }

    .about-hero-subtitle {
        font-size: 1rem;
    }

    .card-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .diff-stats {
        grid-template-columns: 1fr;
    }

    .diff-compliance {
        grid-template-columns: 1fr;
    }

    .compliance-badges {
        grid-template-columns: 1fr;
    }

    .step-title {
        font-size: 1.2rem;
    }

    .timeline-title {
        font-size: 1.3rem;
    }

    .roadmap-title {
        font-size: 1.2rem;
    }

    .roadmap-icon {
        height: 120px;
    }

    .join-us-title {
        font-size: 1.8rem;
    }

    .final-cta-title {
        font-size: 1.8rem;
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {

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

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

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    .navbar,
    .footer {
        display: none;
    }

    .about-hero-section,
    .mission-vision-section,
    .who-we-serve-section,
    .differentiators-section,
    .core-features-section,
    .how-it-works-section,
    .security-section,
    .journey-section,
    .looking-ahead-section,
    .join-us-section,
    .final-cta-section {
        page-break-inside: avoid;
        padding: var(--spacing-lg);
    }

    .crystal-background-wrapper {
        display: none;
    }
}

/* ========================================
   CORE FEATURES SECTION
   ======================================== */

.core-features-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    position: relative;
}

.core-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
    margin-top: var(--spacing-2xl);
}

.feature-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2);
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.feature-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ========================================
   HOW IT WORKS - ICON-BASED VISUALS
   ======================================== */

.step-visual.icon-visual {
    width: 100%;
    min-height: 180px;
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.step-visual.icon-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center,
            rgba(0, 212, 255, 0.1) 0%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.step-content:hover .step-visual.icon-visual::before {
    opacity: 1;
}

/* Visual Icon */
.visual-icon {
    font-size: 4rem;
    filter: drop-shadow(0 8px 24px rgba(0, 212, 255, 0.4));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

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

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

/* Format Tags */
.visual-labels {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.format-tag {
    padding: 0.4rem 0.9rem;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-cyan);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.step-content:hover .format-tag {
    background: rgba(0, 212, 255, 0.25);
    border-color: rgba(0, 212, 255, 0.5);
    transform: translateY(-2px);
}

/* Processing Animation */
.processing-animation {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    height: 60px;
}

.processing-bar {
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-cyan), var(--color-blue));
    border-radius: 4px;
    animation: processingPulse 1.5s ease-in-out infinite;
}

.processing-bar:nth-child(1) {
    animation-delay: 0s;
}

.processing-bar:nth-child(2) {
    animation-delay: 0.3s;
}

.processing-bar:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes processingPulse {

    0%,
    100% {
        transform: scaleY(0.3);
        opacity: 0.5;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Review Indicators */
.review-indicators {
    display: flex;
    gap: var(--spacing-xl);
}

.indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.indicator-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.indicator-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-cyan);
    text-shadow: 0 2px 12px rgba(0, 212, 255, 0.4);
}

/* Share Options */
.share-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 280px;
}

.share-tag {
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    transition: all 0.3s ease;
}

.step-content:hover .share-tag {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.4);
    color: var(--color-cyan);
    transform: translateX(8px);
}

/* Responsive */
@media (max-width: 768px) {
    .step-visual.icon-visual {
        min-height: 160px;
        padding: var(--spacing-lg);
    }

    .visual-icon {
        font-size: 3rem;
    }

    .processing-animation {
        height: 50px;
    }

    .indicator-value {
        font-size: 1.5rem;
    }

    .review-indicators {
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .visual-icon {
        font-size: 2.5rem;
    }

    .visual-labels {
        gap: 0.3rem;
    }

    .format-tag {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
    }

    .processing-animation {
        height: 40px;
        gap: 0.3rem;
    }

    .processing-bar {
        width: 6px;
    }

    .share-options {
        gap: 0.4rem;
    }

    .share-tag {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* ================== ABOUT HERO SECTION END ================== */

/* ================== PRIVACY POLICY PAGE ================== */
.privacy-hero-section {
    padding: 100px 1rem 60px;
    position: relative;
    z-index: 1;
}

.privacy-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #00d4ff;
}

.privacy-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 1.5rem 0 2rem;
    color: #ffffff;
    word-wrap: break-word;
}

.privacy-hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
}

.privacy-meta {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 3rem);
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.privacy-meta .meta-item {
    text-align: center;
    min-width: 120px;
}

.privacy-meta .meta-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.privacy-meta .meta-value {
    display: block;
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: 600;
    color: #00d4ff;
}

.localization-badge-container {
    margin-top: 2rem;
}

.localization-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    margin: 0 auto;
    max-width: 600px;
}

.localization-badge .badge-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.localization-badge h4 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.localization-badge p {
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Privacy Navigation Section */
.privacy-nav-section {
    padding: 40px 1rem;
    background: rgba(10, 15, 30, 0.5);
    backdrop-filter: blur(10px);
}

.privacy-nav-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.privacy-nav-wrapper .nav-title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
}

.privacy-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1rem;
}

.privacy-nav-grid .nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.privacy-nav-grid .nav-card:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

.privacy-nav-grid .nav-icon {
    font-size: 1.5rem;
}

.privacy-nav-grid .nav-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.4;
}

/* Privacy Content Layout */
.privacy-content-section {
    padding: 60px 1rem 80px;
}

.privacy-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Sidebar Navigation - Hidden on mobile by default */
.privacy-sidebar {
    display: none;
}

/* Main Content */
.privacy-main-content {
    max-width: 100%;
    width: 100%;
}

.privacy-section {
    margin-bottom: 3rem;
    scroll-margin-top: 100px;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3);
    word-wrap: break-word;
}

.heading-icon {
    font-size: clamp(1.5rem, 4vw, 2rem);
    flex-shrink: 0;
}

.section-content {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.section-content p {
    margin-bottom: 1.5rem;
    word-wrap: break-word;
}

.subsection-title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    color: #ffffff;
    margin: 2rem 0 1rem;
    word-wrap: break-word;
}

.content-list {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.content-list li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 1rem;
    line-height: 1.8;
    word-wrap: break-word;
}

.content-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #00d4ff;
    font-weight: bold;
}

.content-list li strong {
    color: #ffffff;
    font-weight: 600;
}

/* Info Boxes */
.info-box,
.warning-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.info-box {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.warning-box {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.info-icon,
.warning-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-box p,
.warning-box p {
    margin: 0;
    line-height: 1.6;
    word-wrap: break-word;
}

.info-box strong,
.warning-box strong {
    color: #ffffff;
}

.info-box a {
    color: #00d4ff;
    text-decoration: underline;
    word-break: break-word;
}

/* Data Category Grid */
.data-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.data-category-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.data-category-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
}

.data-category-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #00d4ff;
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

.data-category-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.data-category-card li {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.data-category-card li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #00d4ff;
}

.spdi-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    color: #ff6b6b;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    margin-top: 1rem;
    text-transform: uppercase;
}

/* Usage Purpose Cards */
.usage-purpose-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.usage-purpose-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

.usage-purpose-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usage-purpose-card li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    word-wrap: break-word;
}

.usage-purpose-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00ff88;
    font-weight: bold;
}

/* Security Measures Grid */
.security-measures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.security-card {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(138, 43, 226, 0.05));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.security-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.2);
}

.security-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.security-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

.security-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.security-card li {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9rem;
    word-wrap: break-word;
}

.security-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00ff88;
}

/* Compliance Grid */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.compliance-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.compliance-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.compliance-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #00d4ff, #8a2be2);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.compliance-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    word-wrap: break-word;
}

.compliance-card>p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
    line-height: 1.6;
    word-wrap: break-word;
}

.compliance-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compliance-card li {
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding-left: 2rem;
    word-wrap: break-word;
}

.compliance-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #00ff88;
    font-weight: bold;
}

/* Rights Grid */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.right-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.right-card:hover {
    background: rgba(0, 212, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
}

.right-card h4 {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    word-wrap: break-word;
}

.right-card p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
    line-height: 1.6;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.right-action-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.right-action-btn:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
}

/* Sharing Scenario Cards */
.sharing-scenario-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
}

.sharing-scenario-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    word-wrap: break-word;
}

.sharing-scenario-card>p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

.sharing-scenario-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sharing-scenario-card li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    word-wrap: break-word;
}

.sharing-scenario-card li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #00d4ff;
    font-weight: bold;
}

.sharing-scenario-card li strong {
    color: #ffffff;
    font-weight: 600;
}

.sharing-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(0, 212, 255, 0.2);
    color: #00d4ff;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 20px;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Retention Table */
.retention-table {
    margin: 2rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.retention-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.retention-row:last-child {
    border-bottom: none;
}

.retention-header {
    background: rgba(0, 212, 255, 0.1);
    font-weight: 700;
    color: #ffffff;
}

.retention-row:not(.retention-header) {
    background: rgba(255, 255, 255, 0.02);
}

.retention-cell {
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: flex-start;
    word-wrap: break-word;
    padding: 0.25rem 0;
}

.retention-header .retention-cell {
    color: #00d4ff;
}

.retention-cell strong {
    color: #ffffff;
}

/* Localization Commitment Card */
.localization-commitment-card {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.commitment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.commitment-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.commitment-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.commitment-item h4 {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.commitment-item p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Server Locations Card */
.server-locations-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.location-india-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.location-india-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.location-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.location-details h4 {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.location-details p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.cert-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    margin-top: 0.5rem;
}

/* AI Provision Cards */
.ai-provision-card {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.05), rgba(0, 212, 255, 0.05));
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.ai-provision-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

.ai-provision-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-provision-card li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    word-wrap: break-word;
}

.ai-provision-card li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #8a2be2;
    font-weight: bold;
}

.ai-provision-card li strong {
    color: #ffffff;
    font-weight: 600;
}

/* Children's Policy Card */
.children-policy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.children-policy-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.children-policy-card>p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
}

.children-policy-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.children-policy-card li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    word-wrap: break-word;
}

.children-policy-card li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #00d4ff;
}

.children-policy-card li strong {
    color: #ffffff;
}

/* Grievance Officer Card */
.grievance-officer-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.officer-details {
    margin-top: 1.5rem;
}

.officer-info h4 {
    color: #00d4ff;
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    margin-bottom: 1rem;
}

.officer-info p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0.5rem 0;
    line-height: 1.6;
}

.officer-info strong {
    color: #ffffff;
}

.officer-info a {
    color: #00d4ff;
    text-decoration: none;
    word-break: break-word;
}

/* Grievance Process Card */
.grievance-process-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.process-step {
    display: flex;
    gap: 1rem;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #00d4ff, #8a2be2);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.step-content h4 {
    color: #ffffff;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    margin-bottom: 0.5rem;
}

.step-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Escalation Card */
.escalation-card {
    background: rgba(255, 193, 7, 0.05);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.escalation-card h3 {
    color: #ffffff;
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    margin-bottom: 1rem;
}

.escalation-card>p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.25rem;
}

.authority-contact h4 {
    color: #ffc107;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    margin-bottom: 1rem;
}

.authority-contact p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0.5rem 0;
}

.authority-contact strong {
    color: #ffffff;
}

.authority-contact a {
    color: #00d4ff;
    text-decoration: none;
    word-break: break-word;
}

/* Cookie Category Grid */
.cookie-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.cookie-category-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
}

.cookie-category-card h4 {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    word-wrap: break-word;
}

.cookie-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 12px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cookie-badge.required {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.cookie-badge.optional {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.cookie-category-card p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.cookie-category-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cookie-category-card li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    word-wrap: break-word;
}

.cookie-category-card li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #00d4ff;
}

.cookie-controls {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    text-align: center;
}

.cookie-controls h4 {
    color: #ffffff;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    margin-bottom: 1.25rem;
}

.cookie-settings-btn {
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #00d4ff, #8a2be2);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 300px;
}

.cookie-settings-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.3);
}

.cookie-controls p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
}

/* Changes Policy Card */
.changes-policy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.changes-policy-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

.changes-policy-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.changes-policy-card li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    word-wrap: break-word;
}

.changes-policy-card li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #00d4ff;
}

.changes-policy-card li strong {
    color: #ffffff;
}

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.contact-card {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(138, 43, 226, 0.05));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 212, 255, 0.2);
}

.contact-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    font-weight: 600;
    color: #00d4ff;
    margin-bottom: 1.25rem;
    word-wrap: break-word;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    gap: 0.75rem;
}

.contact-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.contact-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-word;
}

.contact-item a:hover {
    color: #00d4ff;
}

.contact-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    word-wrap: break-word;
}

.contact-item strong {
    color: #ffffff;
}

/* Footer */
.footer {
    background: rgba(10, 15, 30, 0.8);
    backdrop-filter: blur(10px);
    padding: 40px 1rem 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    color: #00d4ff;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 0.75rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #00d4ff;
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

/* Tablet Styles (768px - 1024px) */
@media (min-width: 768px) {
    .privacy-hero-section {
        padding: 120px 2rem 80px;
    }

    .privacy-nav-section {
        padding: 60px 2rem;
    }

    .privacy-content-section {
        padding: 80px 2rem 100px;
    }

    .privacy-nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .privacy-nav-grid .nav-card {
        flex-direction: row;
        text-align: left;
    }

    .retention-row {
        grid-template-columns: 2fr 1.5fr 2fr;
    }

    .info-box,
    .warning-box {
        flex-direction: row;
    }
}

/* Desktop Styles (1024px+) */
@media (min-width: 1024px) {
    .privacy-hero-section {
        padding: 140px 0 80px;
    }

    .privacy-content-section {
        padding: 80px 2rem 120px;
    }

    .privacy-layout {
        grid-template-columns: 250px 1fr;
        gap: 4rem;
    }

    .privacy-sidebar {
        display: block;
        position: relative;
    }

    .sidebar-sticky {
        position: sticky;
        top: 120px;
    }

    .sidebar-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 1.5rem;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .sidebar-link {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        border-left: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .sidebar-link:hover {
        color: #00d4ff;
        background: rgba(0, 212, 255, 0.05);
        border-left-color: #00d4ff;
    }

    .sidebar-link.active {
        color: #00d4ff;
        background: rgba(0, 212, 255, 0.1);
        border-left-color: #00d4ff;
        font-weight: 600;
    }

    .privacy-main-content {
        max-width: 900px;
    }

    .cookie-settings-btn {
        width: auto;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .section-container {
        padding: 0 4rem;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Styles for Keyboard Navigation */
a:focus,
button:focus {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    .privacy-hero-title,
    .section-heading,
    .subsection-title {
        color: #ffffff;
    }

    .info-box,
    .warning-box,
    .data-category-card,
    .compliance-card,
    .right-card {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {

    .navbar,
    .privacy-nav-section,
    .privacy-sidebar,
    .right-action-btn,
    .cookie-settings-btn,
    .footer {
        display: none;
    }

    .privacy-hero-section,
    .privacy-content-section {
        padding: 20px;
    }

    .privacy-section {
        page-break-inside: avoid;
    }

    body {
        background: white;
        color: black;
    }

    .privacy-hero-title,
    .section-heading,
    .subsection-title,
    h4 {
        color: black;
    }

    .section-content,
    p,
    li {
        color: black;
    }
}

/* Small Mobile Adjustments (320px - 480px) */
@media (max-width: 480px) {
    .privacy-hero-section {
        padding: 100px 1rem 40px;
    }

    .privacy-nav-section {
        padding: 30px 1rem;
    }

    .privacy-content-section {
        padding: 40px 1rem 60px;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .privacy-meta {
        gap: 1rem;
    }

    .localization-badge {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .privacy-nav-grid .nav-card {
        padding: 1rem 0.75rem;
    }

    .section-heading {
        gap: 0.5rem;
    }

    .data-category-card,
    .security-card,
    .compliance-card,
    .right-card,
    .sharing-scenario-card,
    .ai-provision-card,
    .cookie-category-card,
    .contact-card {
        padding: 1.25rem;
    }

    .process-step {
        flex-direction: column;
        align-items: flex-start;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .location-india-item {
        flex-direction: column;
        text-align: center;
    }

    .contact-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-content {
        gap: 1.5rem;
    }
}

/* Landscape Mode on Mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .privacy-hero-section {
        padding: 100px 1rem 60px;
    }

    .privacy-hero-title {
        font-size: 2rem;
    }

    .section-heading {
        font-size: 1.5rem;
    }
}

/* ================== PRIVACY POLICY PAGE END ================== */
/* Pathology Clickable */
.showcase-card-link {
    text-decoration: none;
    display: block;
}

.showcase-card-link .showcase-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-card-link .showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
}
/* ============================================
   JOB DETAILS PAGE STYLES
   ============================================ */

/* ========================================
   JOB HERO SECTION
   ======================================== */

.job-hero-section {
    padding: 100px 1rem 60px;
    position: relative;
    z-index: 1;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.job-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--color-cyan);
}

.breadcrumb .separator {
    color: var(--color-text-muted);
}

.breadcrumb .current {
    color: var(--color-text-primary);
    font-weight: 500;
}

.job-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: start;
}

.job-title-wrapper {
    flex: 1;
}

.job-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-cyan);
    margin-bottom: 1.5rem;
    animation: float 3s ease-in-out infinite;
}

.job-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
    word-wrap: break-word;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1.5rem;
}

.job-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.job-meta .meta-item svg {
    color: var(--color-cyan);
    flex-shrink: 0;
}

.job-apply-sticky {
    position: sticky;
    top: 100px;
}

.btn-apply-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 2rem;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
    white-space: nowrap;
}

.btn-apply-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-apply-primary:hover::before {
    left: 100%;
}

.btn-apply-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.5);
}

.btn-apply-primary svg {
    transition: transform 0.3s ease;
}

.btn-apply-primary:hover svg {
    transform: translateX(4px);
}

/* ========================================
   JOB CONTENT SECTION
   ======================================== */

.job-content-section {
    padding: 60px 1rem 80px;
}

.job-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.job-main-content {
    max-width: 100%;
}

.job-section {
    margin-bottom: 3rem;
    scroll-margin-top: 100px;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 212, 255, 0.3);
}

.heading-icon {
    font-size: clamp(1.5rem, 3vw, 2rem);
    flex-shrink: 0;
}

.section-content {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    font-size: 1.05rem;
}

.section-content p {
    margin-bottom: 1.5rem;
}

.section-content strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ========================================
   RESPONSIBILITY GRID
   ======================================== */

.responsibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.responsibility-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.responsibility-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}

.resp-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.4));
}

.responsibility-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.responsibility-card p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   REQUIREMENTS LIST
   ======================================== */

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.req-item {
    display: flex;
    gap: 1rem;
    align-items: start;
}

.req-bullet {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 2px;
}

.must-have .req-bullet {
    background: rgba(0, 212, 255, 0.2);
    border: 2px solid rgba(0, 212, 255, 0.5);
}

.must-have .req-bullet::after {
    content: '✓';
    color: var(--color-cyan);
    font-weight: bold;
    font-size: 0.75rem;
}

.nice-have .req-bullet {
    background: rgba(157, 78, 221, 0.2);
    border: 2px solid rgba(157, 78, 221, 0.5);
}

.nice-have .req-bullet.nice::after {
    content: '★';
    color: var(--color-purple);
    font-size: 0.75rem;
}

.req-content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.req-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

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

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.benefit-card {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(138, 43, 226, 0.05));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 8px rgba(0, 212, 255, 0.4));
}

.benefit-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.benefit-card p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   APPLY CTA BOX
   ======================================== */

.apply-section {
    margin-top: 4rem;
}

.apply-cta-box {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(102, 126, 234, 0.1));
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
}

.apply-cta-box h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.apply-cta-box p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-apply-large {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4);
}

.btn-apply-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-apply-large:hover::before {
    left: 100%;
}

.btn-apply-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.5);
}

/* ========================================
   SIDEBAR
   ======================================== */

.job-sidebar {
    position: relative;
}

.sidebar-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.sidebar-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

/* Apply Card */
.apply-card p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.btn-sidebar-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
}

.btn-sidebar-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

/* Info Card */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Tech Stack Card */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cyan);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: var(--color-cyan);
    transform: translateY(-2px);
}

/* Share Card */
.share-buttons {
    display: flex;
    gap: 0.75rem;
}

.share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn.linkedin {
    color: #0077b5;
}

.share-btn.twitter {
    color: #1da1f2;
}

.share-btn.whatsapp {
    color: #25d366;
}

.share-btn.email {
    color: var(--color-cyan);
}

.share-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: currentColor;
}

/* ========================================
   APPLICATION MODAL
   ======================================== */

.application-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.application-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: rgba(15, 24, 41, 0.98);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-xl);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.5rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-text-secondary);
}

.modal-close:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.4);
    color: #ff6b6b;
}

.modal-header {
    margin-bottom: 2rem;
}

.modal-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.modal-header p {
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* ========================================
   APPLICATION FORM
   ======================================== */

.application-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: #939292;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* File Upload */
.file-upload {
    position: relative;
}

.file-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 212, 255, 0.1);
    border: 2px dashed rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--color-cyan);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-label:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--color-cyan);
}

.file-name {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Checkbox */
.checkbox-group {
    margin-top: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    border-color: var(--color-cyan);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
}

.checkbox-text {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Submit Button */
.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.1rem 2rem;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 212, 255, 0.5);
}

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

@media (max-width: 1024px) {
    .job-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .job-sidebar {
        order: -1;
    }

    .sidebar-sticky {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .job-header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .job-apply-sticky {
        position: static;
    }
}

@media (max-width: 768px) {
    .job-hero-section {
        padding: 100px 1rem 40px;
    }

    .job-content-section {
        padding: 40px 1rem 60px;
    }

    .job-title {
        font-size: 2rem;
    }

    .job-meta {
        flex-direction: column;
        gap: 1rem;
    }

    .responsibility-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: 2rem 1.5rem;
    }

    .share-buttons {
        flex-wrap: wrap;
    }

    .share-btn {
        flex: 1 1 calc(50% - 0.375rem);
    }

    .sidebar-sticky {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .job-title {
        font-size: 1.75rem;
    }

    .btn-apply-primary,
    .btn-apply-large {
        width: 100%;
        justify-content: center;
    }

    .apply-cta-box {
        padding: 2rem 1.5rem;
    }

    .modal-content {
        padding: 1.5rem;
        max-height: 95vh;
    }

    .modal-header h2 {
        font-size: 1.5rem;
    }
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.5);
}

/* ========== Mobile Menu Enhancements ========== */

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Desktop CTA visible only on desktop */
.desktop-cta {
    display: block;
}

/* Mobile CTA hidden by default */
.mobile-cta {
    display: none;
}

/* Mobile Menu Improvements */
@media (max-width: 768px) {
    .desktop-cta {
        display: none;
    }
    
    .mobile-cta {
        display: block;
        padding: var(--spacing-md) 0;
    }
    
    .mobile-cta .cta-button {
        width: 100%;
        display: block;
        text-align: center;
        margin-left: 0;
    }
    
    /* Enhanced mobile menu */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 100px;
        gap: 0;
        transition: right var(--transition-normal);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
        z-index: 999;
        overflow-y: auto;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .nav-link {
        display: block;
        padding: 1.25rem 2rem;
        width: 100%;
        text-align: left;
        font-size: 1.1rem;
        transition: all var(--transition-fast);
    }
    
    .nav-link:hover {
        background: rgba(0, 212, 255, 0.1);
        padding-left: 2.5rem;
    }
    
    .nav-link.active {
        background: rgba(0, 212, 255, 0.15);
        border-left: 4px solid var(--color-cyan);
    }
    
    /* Hamburger animation improvements */
    .mobile-menu-toggle {
        display: flex;
        position: relative;
        z-index: 1001;
        padding: 8px;
        cursor: pointer;
        transition: transform var(--transition-normal);
    }
    
    .mobile-menu-toggle:hover {
        transform: scale(1.1);
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .mobile-menu-toggle span {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(9px, 9px);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px);
    }
    
    /* Overlay for mobile menu */
    .nav-menu.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

/* ========== Additional Mobile Menu Styles ========== */
@media (max-width: 480px) {
    .nav-menu {
        width: 85%;
        max-width: 100%;
    }
    
    .nav-link {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
}
/* Add to the existing badge styles */
.dept-badge.research {
    background: rgba(157, 78, 221, 0.15);
    color: #9d4edd;
    border: 1px solid rgba(157, 78, 221, 0.3);
}

.type-badge.internship {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}