/* ==================== Reset & Base Styles ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Design Tokens */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --section-padding: 5rem;
    --card-padding: 1.5rem;
    --transition-base: 200ms ease-out;
    
    /* Dark Theme Colors */
    --bg: #070711;
    --bg2: #0E0E1A;
    --card: rgba(255, 255, 255, 0.05);
    --card2: #0E0E1A;
    --border: rgba(255, 255, 255, 0.1);
    --text: #F5F5F7;
    --muted: #94A3B8;
    --heading: #F5F5F7;
    --primary: #7C3AED;
    --primary2: #3B82F6;
    --btnText: #FFFFFF;
    --ring: rgba(124, 58, 237, 0.4);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 12px 40px rgba(124, 58, 237, 0.25);
    --overlay-bg: rgba(7, 7, 17, 0.92);
    --input-bg: rgba(14, 14, 26, 0.95);
    --input-placeholder: rgba(255, 255, 255, 0.4);
    
    /* Legacy aliases */
    --bg-main: #070711;
    --bg-surface: #0E0E1A;
    --bg-card: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-purple: rgba(124, 58, 237, 0.25);
    --border-blue: rgba(59, 130, 246, 0.2);
    --purple: #7C3AED;
    --blue: #3B82F6;
    --accent-purple: #7C3AED;
    --text-main: #F5F5F7;
    --text-secondary: #94A3B8;
    --text-muted: #94A3B8;
    --gradient-purple-blue: linear-gradient(135deg, #7C3AED, #3B82F6);
    --shadow-purple: 0 8px 32px rgba(124, 58, 237, 0.25);
    --shadow-blue: 0 8px 32px rgba(59, 130, 246, 0.2);
}

:root {
    /* Legacy colors for compatibility */
    --bg-dark: #070711;
    --bg-secondary: #0A0A14;
    --text-primary: #F5F5F7;
    --glow-purple: rgba(124, 58, 237, 0.4);
    --glow-blue: rgba(59, 130, 246, 0.4);
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --accent-color: #ec4899;
    --dark-bg: #0f172a;
    --light-bg: #f8fafc;
    --dark-text: #1e293b;
    --light-text: #94a3b8;
    --white: #ffffff;
    --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.7;
    color: var(--text);
    background-color: var(--bg);
    position: relative;
    overflow-x: hidden;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-base), color var(--transition-base);
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

img {
    max-width: 100%;
    height: auto;
}

/* Container Responsive Widths */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 1280px;
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2.5rem;
        max-width: 1280px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1400px;
        padding: 0 3rem;
    }
}

/* ==================== Global Animated Background ====================*/
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 60%);
    opacity: 0.6;
    z-index: -2;
    animation: globalBlobMove 40s ease-in-out infinite;
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

@keyframes globalBlobMove {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    33% { 
        transform: translate(30px, -30px) scale(1.05);
        opacity: 0.7;
    }
    66% { 
        transform: translate(-20px, 20px) scale(0.95);
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
}

/* ==================== Global Section Spacing ==================== */
section {
    padding-block: clamp(40px, 4.5vw, 56px);
}

/* ==================== Reveal Animation System ==================== */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.reveal-stagger {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ==================== Route Transition ==================== */
.page-transition {
    animation: pageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition {
        animation: none;
    }
}

.section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.125rem);
    position: relative;
    color: var(--dark-text);
    padding: 0 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 15vw, 80px);
    height: 4px;
    background: var(--gradient);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--light-text);
    margin-top: -30px;
    margin-bottom: clamp(2rem, 5vw, 3.125rem);
    padding: 0 1rem;
}

/* ==================== Navigation ==================== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(7, 7, 17, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-purple);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar,
.navbar * {
    pointer-events: auto;
}

[data-theme="light"] .navbar {
    background: rgba(247, 248, 251, 0.85);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--scroll-progress, 0%);
    height: 2px;
    background: var(--gradient-purple-blue);
    transition: width 0.1s linear;
    pointer-events: none;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

@media (min-width: 1024px) {
    .navbar .container {
        padding: 1rem 2rem;
    }
}

.nav-brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    letter-spacing: 0.02em;
}

.logo-dot {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.1em;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    font-size: 0.95rem;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 2px;
}

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

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

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background: var(--text-main);
    margin: 3px 0;
    transition: all 0.3s ease;
}

/* ==================== Responsive Navigation ==================== */
@media (max-width: 1023px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: rgba(14, 14, 26, 0.98);
        width: 100%;
        text-align: center;
        transition: left 0.3s ease;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.5);
        padding: 2rem 0;
        gap: 0;
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-purple);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nav-menu li {
        margin: 0;
        width: 100%;
    }

    .nav-menu li a {
        display: block;
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }

    .nav-menu.active {
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

@media (max-width: 640px) {
    .logo h2 {
        font-size: 1.15rem;
    }
    
    .navbar .container {
        padding: 0.875rem 1.25rem;
    }
    
    .nav-brand-group {
        gap: 10px;
    }
    
    .search-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ==================== Search Icon Toggle ==================== */
.search-toggle-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 50%;
    color: rgba(124, 58, 237, 0.9);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    flex-shrink: 0;
}

.search-toggle-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 0 0 4px var(--ring);
}

.search-toggle-btn i {
    pointer-events: none;
}

/* ==================== Search Overlay ==================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-overlay-content {
    width: 100%;
    max-width: 520px;
    padding: 0 20px;
}

.search-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.search-overlay-input {
    flex: 1;
    padding: 14px 20px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.search-overlay-input::placeholder {
    color: var(--input-placeholder);
}

.search-overlay-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring);
}

.search-overlay-input:focus {
    border-color: rgba(124, 58, 237, 0.7);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.search-close-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 10px;
    color: rgba(124, 58, 237, 0.9);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    flex-shrink: 0;
}

.search-close-btn:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.6);
}

.search-results-dropdown {
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-height: 420px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.search-results-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.focused {
    background: var(--card);
}

[data-theme="light"] .search-result-item:hover,
[data-theme="light"] .search-result-item.focused {
    background: rgba(124, 58, 237, 0.08);
}

.search-result-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    flex-shrink: 0;
}

.search-result-icon i {
    color: var(--purple);
    font-size: 0.95rem;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-type {
    font-size: 0.75rem;
    color: rgba(124, 58, 237, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.search-no-results {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.search-results-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-results-dropdown::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.search-results-dropdown::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 10px;
}

.search-results-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.7);
}

/* ==================== Home Section ==================== */
.home-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    padding-bottom: 0;
    overflow: hidden;
    background: var(--bg);
}

/* Animated spotlight glow behind hero text */
.home-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.08) 35%, transparent 70%);
    filter: blur(80px);
    opacity: 0.6;
    z-index: 0;
    animation: spotlight 8s ease-in-out infinite;
}

.home-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.4;
    z-index: 0;
    animation: spotlight 10s ease-in-out infinite reverse;
}

@keyframes spotlight {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0.8;
    }
}

.hero-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 48px;
    position: relative;
    z-index: 1;
    width: 100%;
}

@media (max-width: 768px) {
    .hero-container {
        padding: 0 24px;
    }
}

@media (max-width: 480px) {
    .hero-container {
        padding: 0 20px;
    }
}

.hero-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px;
    align-items: center;
    min-height: calc(100vh - 160px);
}

/* Left Side - Text Content (7 columns) */
.hero-mobile-header {
    display: none;
}

.hero-text {
    grid-column: 1 / 8;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s;
}

.hero-text .greeting,
.hero-text .hero-name,
.hero-text .hero-name-accent,
.hero-text .hero-subtitle {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .hero-text {
        opacity: 1;
        animation: none;
    }
}

.greeting {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
}

.hero-name {
    font-size: clamp(2.25rem, 8vw, 4.25rem);
    margin-bottom: 8px;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.1;
}

/* Thin gradient accent line under name */
.hero-name-accent {
    width: 150px;
    height: 3px;
    background: var(--gradient-purple-blue);
    border-radius: 10px;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-name-accent {
        opacity: 1;
        animation: none;
    }
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--text-main);
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.subtitle-text {
    position: relative;
}

.subtitle-separator {
    color: rgba(124, 58, 237, 0.6);
    font-weight: 400;
}

.hero-description {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 36px;
    line-height: 1.7;
    max-width: 540px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-buttons {
        opacity: 1;
        animation: none;
    }
}

.btn-primary-gradient,
.btn-outline {
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    height: 46px;
}

.btn-primary-gradient {
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    color: var(--btnText);
    border: 1px solid transparent;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.btn-primary-gradient i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.5);
}

.btn-primary-gradient:hover i {
    transform: translateX(3px);
}

.btn-primary-gradient:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}

.btn-outline {
    border: 2px solid var(--border);
    color: var(--text);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.btn-outline i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn-outline:hover {
    color: var(--btnText);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--card-hover-shadow);
}

.btn-outline:hover::before {
    width: 100%;
}

.btn-outline:hover i {
    transform: translateX(3px);
}

.btn-outline:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4);
}

.hero-social {
    display: flex;
    gap: 12px;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.7s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-social {
        opacity: 1;
        animation: none;
    }
}

.hero-social a {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid rgba(124, 58, 237, 0.3);
    color: rgba(124, 58, 237, 0.8);
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.hero-social a:hover {
    background: rgba(124, 58, 237, 0.12);
    color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
    border-color: rgba(124, 58, 237, 0.5);
}

/* Right Side - Image Card (5 columns) */
.hero-image-wrapper {
    grid-column: 8 / 13;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-image-wrapper {
        opacity: 1;
        animation: none;
    }
}

.hero-image-card {
    position: relative;
    border-radius: 28px;
    background: rgba(14, 14, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(124, 58, 237, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    max-width: 420px;
    width: 100%;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(59, 130, 246, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .hero-image-card:hover {
        transform: translateY(-8px);
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(124, 58, 237, 0.4),
            0 0 80px rgba(124, 58, 237, 0.25),
            0 0 120px rgba(124, 58, 237, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .hero-image-card:hover::before {
        opacity: 1;
    }
    
    .hero-image-card:hover .hero-image {
        transform: scale(1.02);
    }
    
    .hero-image-card:hover .hero-quote-badge {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-quote-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    max-width: calc(100% - 32px);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.hero-quote-badge::before {
    content: '"';
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 28px;
    font-weight: 700;
    color: rgba(124, 58, 237, 0.25);
    line-height: 1;
    font-family: Georgia, serif;
}

.hero-quote-text {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-quote-badge {
        display: none;
    }
}

.hero-image {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    display: block;
    object-fit: cover;
    aspect-ratio: 3/4;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image-mobile {
    display: block;
}

.hero-image-desktop {
    display: none;
}

@media (min-width: 640px) {
    .hero-image-mobile {
        display: none;
    }
    
    .hero-image-desktop {
        display: block;
    }
}

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

/* Hero Responsive */
@media (max-width: 1024px) {
    .hero-content {
        gap: 48px;
    }
    
    .hero-text {
        grid-column: 1 / 8;
    }
    
    .hero-image-wrapper {
        grid-column: 8 / 13;
    }
}

@media (max-width: 768px) {
    .home-section {
        padding-top: 80px;
        padding-bottom: 2rem;
        min-height: auto;
    }
    
    .hero-container {
        padding: 0 1rem;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: auto;
        padding: 1rem 0;
    }
    
    .hero-mobile-header {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 16px;
    }
    
    .hero-mobile-image {
        flex-shrink: 0;
        width: 100px;
        height: 100px;
    }
    
    .hero-mobile-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 18px;
        border: 2px solid rgba(124, 58, 237, 0.3);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    
    .hero-mobile-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .hero-mobile-info .greeting {
        font-size: 0.7rem;
        margin-bottom: 2px;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .hero-mobile-info .hero-name {
        font-size: 1.5rem;
        line-height: 1.15;
        margin-bottom: 2px;
        text-align: left;
        letter-spacing: -0.5px;
    }
    
    .hero-mobile-info .hero-name-accent {
        display: none;
    }
    
    .hero-mobile-info .hero-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        line-height: 1.3;
    }
    
    .hero-mobile-info .subtitle-separator {
        display: none;
    }
    
    .hero-text {
        grid-column: 1 / -1;
        text-align: center;
    }
    
    .hero-text .greeting,
    .hero-text .hero-name,
    .hero-text .hero-name-accent,
    .hero-text .hero-subtitle {
        display: none;
    }
    
    .hero-image-wrapper {
        display: none;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    
    .hero-buttons {
        justify-content: center;
        gap: 12px;
    }
    
    .hero-social {
        justify-content: center;
    }
    
    .hero-image-card {
        max-width: 340px;
    }
}

@media (max-width: 480px) {
    .greeting {
        font-size: 0.85rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        flex-direction: column;
        gap: 6px;
    }
    
    .subtitle-separator {
        display: none;
    }
    
    .hero-description {
        font-size: 0.9rem;
        max-width: 100%;
    }
    
    .btn-primary-gradient,
    .btn-outline {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-image-card {
        max-width: 280px;
    }
}

/* ==================== About Section ==================== */
.about-section {
    background: var(--bg);
    padding: clamp(3rem, 8vw, 6.25rem) 0;
}

.about-title-purple {
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .about-grid {
        gap: 1.875rem;
        margin-top: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .about-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.875rem;
    }
}

.about-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: clamp(1.75rem, 3vw, 2.15rem);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 220ms ease-out, background 220ms ease-out;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(8, 8, 18, 0.34);
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 28%, transparent 56%);
    opacity: 0.52;
    transition: opacity 220ms ease-out;
    pointer-events: none;
}

.about-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(59, 130, 246, 0.22));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 220ms ease-out;
    pointer-events: none;
}

.about-card:hover {
    transform: translateY(-7px);
    border-color: rgba(124, 58, 237, 0.38);
    box-shadow: 0 18px 38px rgba(8, 8, 20, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.16), 0 0 22px rgba(124, 58, 237, 0.18);
}

.about-card:hover::before,
.about-card:hover::after {
    opacity: 1;
}

.about-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.42);
    box-shadow: 0 12px 28px rgba(7, 10, 24, 0.4), 0 0 0 2px rgba(124, 58, 237, 0.28);
}

.about-card-title {
    font-size: clamp(1.18rem, 1.15rem + 0.35vw, 1.4rem);
    font-weight: 750;
    color: var(--heading);
    margin: 0;
    line-height: 1.42;
    letter-spacing: 0.012em;
}

.about-card-short {
    font-size: 0.98rem;
    color: rgba(236, 238, 250, 0.84);
    line-height: 1.72;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.btn-view-details {
    margin-top: auto;
    padding: 0.72rem 1.15rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.38);
    color: rgba(208, 186, 255, 0.98);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 220ms ease-out, border-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out, color 220ms ease-out;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 42px;
}

.btn-view-details::before {
    display: none;
}

.btn-view-details:hover {
    color: #f3ebff;
    background: rgba(124, 58, 237, 0.24);
    border-color: rgba(167, 139, 250, 0.62);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.26);
}

.btn-view-details:hover i {
    transform: translateX(3px);
}

.btn-view-details:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.28);
}

.btn-view-details i {
    transition: transform 220ms ease-out;
}

.btn-view-details:focus-visible {
    outline: 2px solid rgba(167, 139, 250, 0.8);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .about-card {
        padding: 1.35rem;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-container {
    max-width: 900px;
    width: 100%;
    margin: auto;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.3s ease-out;
}

.modal-content {
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(1.5rem, 5vw, 3rem);
    position: relative;
    box-shadow: var(--shadow-lg);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.modal-breadcrumb {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.breadcrumb-separator {
    color: var(--purple);
}

.modal-close {
    position: sticky;
    top: 1rem;
    right: 1rem;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

@media (min-width: 640px) {
    .modal-close {
        top: 1.5rem;
        right: 1.5rem;
    }
}

.modal-close:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    color: var(--btnText);
    border-color: transparent;
    transform: rotate(90deg) scale(1.1);
}

.modal-close:active {
    transform: translateY(0);
}

.modal-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 24px;
    line-height: 1.3;
    padding-right: 3rem;
}

.modal-details {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 32px;
}

.btn-back {
    padding: 12px 28px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-back::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    transition: width 0.25s ease;
    z-index: -1;
}

.btn-back:hover {
    color: #FFFFFF;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

.btn-back:hover::before {
    width: 100%;
}

.btn-back:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

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

@media (max-width: 640px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        padding: 32px 24px;
    }
    
    .modal-title {
        font-size: 1.5rem;
    }
}

/* Fiverr Details Layout */
.fiverr-details-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fiverr-quote-block {
    background: rgba(124, 58, 237, 0.08);
    border-left: 4px solid var(--purple);
    border-radius: 12px;
    padding: 24px 28px;
    position: relative;
}

.quote-icon {
    color: var(--purple);
    font-size: 1.5rem;
    opacity: 0.3;
    position: absolute;
    top: 20px;
    left: 28px;
}

.quote-text {
    font-size: 1.063rem;
    line-height: 1.7;
    color: var(--text-main);
    font-weight: 500;
    margin: 0;
    padding-left: 32px;
}

.fiverr-section {
    padding-top: 8px;
}

.fiverr-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.fiverr-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-purple-blue);
    border-radius: 2px;
}

.fiverr-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .fiverr-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fiverr-service-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.3s ease;
}

.fiverr-service-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-2px);
}

.service-item-icon {
    width: 48px;
    height: 48px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service-item-icon i {
    font-size: 1.5rem;
    color: var(--purple);
}

.service-item-content h4 {
    font-size: 1.063rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}

.service-item-content p {
    font-size: 0.938rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.7);
    margin: 0;
}

.fiverr-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .fiverr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fiverr-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.fiverr-stat-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(124, 58, 237, 0.3);
}

.stat-icon {
    font-size: 1.75rem;
    color: var(--purple);
    flex-shrink: 0;
}

.fiverr-stat-card p {
    font-size: 0.938rem;
    line-height: 1.5;
    color: rgba(237, 237, 237, 0.8);
    margin: 0;
}

.fiverr-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.8);
    margin: 0;
}

/* Spirit On Jersey Details Layout */
.spirit-details-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.spirit-header {
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    padding-bottom: 16px;
}

.spirit-subtext {
    font-size: 1.063rem;
    color: rgba(237, 237, 237, 0.7);
    font-style: italic;
    margin: 0;
}

.spirit-story {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spirit-story p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(237, 237, 237, 0.85);
    margin: 0;
}

.spirit-order-section {
    padding-top: 20px;
}

.spirit-order-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
}

.spirit-order-subtitle {
    font-size: 0.938rem;
    color: rgba(237, 237, 237, 0.6);
    margin: 0 0 24px;
}

.spirit-cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .spirit-cta-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.spirit-cta-card {
    background: #0E0E1A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.spirit-cta-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.25);
}

.spirit-cta-icon {
    width: 56px;
    height: 56px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.spirit-cta-icon i {
    font-size: 1.75rem;
    color: var(--purple);
}

.spirit-cta-card h4 {
    font-size: 1.063rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 10px;
}

.spirit-cta-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(237, 237, 237, 0.65);
    margin: 0 0 20px;
    flex: 1;
}

.spirit-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: var(--purple);
    color: white;
    border-radius: 10px;
    font-size: 0.938rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    width: 100%;
}

.spirit-cta-btn:hover {
    background: #6b21a8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.spirit-order-note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.6);
    background: rgba(124, 58, 237, 0.08);
    border-left: 3px solid var(--purple);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spirit-order-note i {
    color: var(--purple);
    font-size: 1rem;
    flex-shrink: 0;
}

/* GP Certified Details Layout */
.gp-details-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gp-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1024px) {
    .gp-content-grid {
        grid-template-columns: 380px 1fr;
        gap: 40px;
    }
}

.gp-media-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gp-text-column {
    display: flex;
    flex-direction: column;
}

.gp-media-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.gp-media-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.gp-media-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin-bottom: 12px;
}

.gp-media-label {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    margin: 0;
}

.gp-story {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
}

.gp-story p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(237, 237, 237, 0.85);
    margin: 0;
}

.gp-official-links {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(124, 58, 237, 0.15);
}

.gp-official-links h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 16px;
}

.gp-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gp-link-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 12px;
    color: rgba(237, 237, 237, 0.85);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.gp-link-item:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateY(-2px);
}

.gp-link-item i {
    font-size: 1rem;
    color: var(--purple);
}

/* GP Lightbox */
.gp-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.gp-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

.gp-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.gp-lightbox-img {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.gp-lightbox-label {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.gp-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.gp-lightbox-nav {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.gp-lightbox-prev,
.gp-lightbox-next {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gp-lightbox-prev:hover,
.gp-lightbox-next:hover {
    background: var(--purple);
    border-color: var(--purple);
    transform: scale(1.1);
}

/* ==================== Nebulae Page Styles ==================== */

/* Back Button & Breadcrumb */
.nebulae-back-container {
    background: var(--bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 0;
    position: sticky;
    top: 70px;
    z-index: 100;
}

.nebulae-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nebulae-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 30px;
    color: var(--text-main);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nebulae-back-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--purple);
    transform: translateX(-4px);
}

.nebulae-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: rgba(237, 237, 237, 0.6);
}

.nebulae-breadcrumb i {
    font-size: 0.75rem;
}

.nebulae-breadcrumb span:last-child {
    color: var(--text-main);
    font-weight: 600;
}

/* Hero Section */
.nebulae-hero {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
}

.nebulae-hero-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.nebulae-hero .container {
    position: relative;
    z-index: 1;
}

.nebulae-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 1024px) {
    .nebulae-hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 60px;
    }
}

.nebulae-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 20px;
}

.nebulae-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 20px;
}

@media (min-width: 768px) {
    .nebulae-hero-title {
        font-size: 3rem;
    }
}

.nebulae-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.75);
    margin: 0 0 32px;
    max-width: 600px;
}

.nebulae-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.nebulae-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.nebulae-stat-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
}

.nebulae-stat-card i {
    font-size: 1.75rem;
    color: var(--purple);
}

.nebulae-stat-card span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-main);
}

.nebulae-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.nebulae-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.938rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.nebulae-social-link:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.nebulae-social-link i {
    font-size: 1.125rem;
}

.nebulae-outcomes-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    height: fit-content;
}

.nebulae-outcomes-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 24px;
}

.nebulae-outcome-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nebulae-outcome-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.nebulae-outcome-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nebulae-outcome-icon i {
    font-size: 1.5rem;
    color: var(--purple);
}

.nebulae-outcome-text h4 {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 6px;
}

.nebulae-outcome-text p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.65);
    margin: 0;
}

/* What I Learned Section */
.nebulae-learned {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.nebulae-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin: 0 0 60px;
}

.nebulae-learned-grid {
    max-width: 900px;
    margin: 0 auto;
}

.nebulae-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nebulae-timeline-item {
    position: relative;
    padding: 0 0 0 48px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.nebulae-timeline-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.nebulae-timeline-item::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 32px;
    width: 2px;
    height: calc(100% + 40px);
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.5), transparent);
}

.nebulae-timeline-item:last-child::before {
    display: none;
}

.nebulae-timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: var(--purple);
    border: 4px solid var(--bg-main);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}

.nebulae-timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.nebulae-timeline-content:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateX(8px);
}

.nebulae-timeline-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px;
}

.nebulae-timeline-content p {
    font-size: 0.938rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.7);
    margin: 0;
}

/* Certificates Section */
.nebulae-certificates {
    padding: 80px 0;
}

.nebulae-certs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .nebulae-certs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.nebulae-cert-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.nebulae-cert-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.nebulae-cert-card:hover {
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.25);
}

.nebulae-cert-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin-bottom: 16px;
}

.nebulae-cert-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    margin: 0;
}

/* Experience Story Section */
.nebulae-story {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.nebulae-story-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nebulae-story-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(237, 237, 237, 0.85);
    margin: 0;
}

/* Bottom CTA Section */
.nebulae-cta {
    padding: 80px 0;
}

.nebulae-cta-card {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.nebulae-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.nebulae-cta-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 32px;
}

.nebulae-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.nebulae-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.nebulae-cta-primary {
    background: var(--purple);
    color: white;
    border: 1px solid var(--purple);
}

.nebulae-cta-primary:hover {
    background: #6b21a8;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.nebulae-cta-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nebulae-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Nebulae Lightbox */
.nebulae-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.nebulae-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nebulae-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
}

.nebulae-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.nebulae-lightbox-img {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.nebulae-lightbox-label {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.nebulae-lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nebulae-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.nebulae-lightbox-nav {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.nebulae-lightbox-prev,
.nebulae-lightbox-next {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nebulae-lightbox-prev:hover,
.nebulae-lightbox-next:hover {
    background: var(--purple);
    border-color: var(--purple);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .nebulae-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .nebulae-hero-title {
        font-size: 2rem;
    }
    
    .nebulae-quick-stats {
        grid-template-columns: 1fr;
    }
}

/* ==================== International Affairs Page Styles ==================== */

/* Back Button & Breadcrumb */
.intl-back-container {
    background: var(--bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 0;
    position: sticky;
    top: 70px;
    z-index: 100;
}

.intl-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.intl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(41, 98, 255, 0.1);
    border: 1px solid rgba(41, 98, 255, 0.3);
    border-radius: 30px;
    color: var(--text-main);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.intl-back-btn:hover {
    background: rgba(41, 98, 255, 0.2);
    border-color: #2962ff;
    transform: translateX(-4px);
}

.intl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: rgba(237, 237, 237, 0.6);
}

.intl-breadcrumb i {
    font-size: 0.75rem;
}

.intl-breadcrumb span:last-child {
    color: var(--text-main);
    font-weight: 600;
}

/* Hero Section */
.intl-hero {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
}

.intl-hero-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(41, 98, 255, 0.12) 0%, rgba(124, 58, 237, 0.08) 50%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.intl-hero .container {
    position: relative;
    z-index: 1;
}

.intl-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 1024px) {
    .intl-hero-grid {
        grid-template-columns: 1.3fr 0.7fr;
        gap: 60px;
    }
}

.intl-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(41, 98, 255, 0.15);
    border: 1px solid rgba(41, 98, 255, 0.3);
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #5e92ff;
    margin-bottom: 20px;
}

.intl-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 12px;
}

@media (min-width: 768px) {
    .intl-hero-title {
        font-size: 3rem;
    }
}

.intl-hero-org {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(41, 98, 255, 0.85);
    margin: 0 0 16px;
}

.intl-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.75);
    margin: 0 0 32px;
    max-width: 600px;
}

.intl-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.intl-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.intl-stat-card:hover {
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.3);
    transform: translateY(-4px);
}

.intl-stat-card i {
    font-size: 1.75rem;
    color: #5e92ff;
}

.intl-stat-card span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-main);
}

.intl-outcomes-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    height: fit-content;
}

.intl-outcomes-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 24px;
    text-align: center;
}

.intl-outcome-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.intl-outcome-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.intl-outcome-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(41, 98, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intl-outcome-icon i {
    font-size: 1.25rem;
    color: #5e92ff;
}

.intl-outcome-item span {
    font-size: 0.938rem;
    font-weight: 500;
    color: rgba(237, 237, 237, 0.85);
}

/* What This Experience Taught Me Section */
.intl-taught {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.intl-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin: 0 0 60px;
}

.intl-taught-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 1024px) {
    .intl-taught-grid {
        grid-template-columns: 1fr 0.9fr;
        gap: 60px;
    }
}

.intl-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.intl-timeline-item {
    position: relative;
    padding: 0 0 0 72px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.intl-timeline-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.intl-timeline-item::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 50px;
    width: 2px;
    height: calc(100% + 40px);
    background: linear-gradient(to bottom, rgba(41, 98, 255, 0.4), transparent);
}

.intl-timeline-item:last-child::before {
    display: none;
}

.intl-timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.2), rgba(124, 58, 237, 0.2));
    border: 2px solid rgba(41, 98, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(41, 98, 255, 0.3);
}

.intl-timeline-marker i {
    font-size: 1.5rem;
    color: #5e92ff;
}

.intl-timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.intl-timeline-content:hover {
    background: rgba(41, 98, 255, 0.05);
    border-color: rgba(41, 98, 255, 0.3);
    transform: translateX(8px);
}

.intl-timeline-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px;
}

.intl-timeline-content p {
    font-size: 0.938rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.7);
    margin: 0;
}

.intl-spotlight {
    display: flex;
    align-items: flex-start;
}

.intl-spotlight-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    position: sticky;
    top: 120px;
}

.intl-spotlight-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.intl-spotlight-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 24px;
}

.intl-spotlight-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intl-spotlight-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.intl-spotlight-item i {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: #5e92ff;
    margin-top: 2px;
}

.intl-spotlight-item p {
    font-size: 0.938rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.8);
    margin: 0;
}

.intl-spotlight-item strong {
    color: var(--text-main);
}

/* Experience Narrative Section */
.intl-narrative {
    padding: 80px 0;
}

.intl-narrative-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.intl-narrative-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(237, 237, 237, 0.85);
    margin: 0;
}

/* International Impact Section */
.intl-impact {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.intl-impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .intl-impact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.intl-impact-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.intl-impact-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.intl-impact-card:hover {
    background: rgba(41, 98, 255, 0.05);
    border-color: rgba(41, 98, 255, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(41, 98, 255, 0.2);
}

.intl-impact-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.15), rgba(124, 58, 237, 0.15));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.intl-impact-icon i {
    font-size: 2rem;
    color: #5e92ff;
}

.intl-impact-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px;
}

.intl-impact-card p {
    font-size: 0.938rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.7);
    margin: 0;
}

/* Bottom CTA Section */
.intl-cta {
    padding: 80px 0;
}

.intl-cta-card {
    max-width: 700px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.08), rgba(124, 58, 237, 0.08));
    border: 1px solid rgba(41, 98, 255, 0.3);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.intl-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.intl-cta-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 32px;
    line-height: 1.4;
}

.intl-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.intl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.intl-cta-primary {
    background: linear-gradient(135deg, #2962ff, #7c3aed);
    color: white;
    border: 1px solid transparent;
}

.intl-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(41, 98, 255, 0.4);
}

.intl-cta-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.intl-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .intl-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .intl-hero-title {
        font-size: 2rem;
    }
    
    .intl-quick-stats {
        grid-template-columns: 1fr;
    }
    
    .intl-taught-grid {
        grid-template-columns: 1fr;
    }
    
    .intl-spotlight-card {
        position: static;
    }
}

/* ==================== CS Club Page Styles ==================== */

/* Back Button & Breadcrumb */
.csclub-back-container {
    background: var(--bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 0;
    position: sticky;
    top: 70px;
    z-index: 100;
}

.csclub-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.csclub-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 30px;
    color: var(--text-main);
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.csclub-back-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--purple);
    transform: translateX(-4px);
}

.csclub-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: rgba(237, 237, 237, 0.6);
}

.csclub-breadcrumb i {
    font-size: 0.75rem;
}

.csclub-breadcrumb span:last-child {
    color: var(--text-main);
    font-weight: 600;
}

/* Hero Section */
.csclub-hero {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
}

.csclub-hero-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, rgba(79, 70, 229, 0.1) 50%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.csclub-hero .container {
    position: relative;
    z-index: 1;
}

.csclub-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 1024px) {
    .csclub-hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 60px;
    }
}

.csclub-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 20px;
}

.csclub-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 12px;
}

@media (min-width: 768px) {
    .csclub-hero-title {
        font-size: 3rem;
    }
}

.csclub-hero-org {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.85);
    margin: 0 0 16px;
}

.csclub-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.75);
    margin: 0 0 32px;
    max-width: 600px;
}

.csclub-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.csclub-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.938rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.csclub-social-link:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.csclub-social-link i {
    font-size: 1.125rem;
}

.csclub-impact-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .csclub-impact-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.csclub-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.csclub-stat-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
}

.csclub-stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--purple);
    line-height: 1;
    margin-bottom: 8px;
}

.csclub-stat-label {
    font-size: 0.938rem;
    font-weight: 500;
    color: rgba(237, 237, 237, 0.75);
}

/* Responsibilities Section */
.csclub-responsibilities {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.csclub-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin: 0 0 60px;
}

.csclub-resp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .csclub-resp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.csclub-resp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.csclub-resp-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.csclub-resp-card:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.3);
}

.csclub-resp-icon {
    width: 64px;
    height: 64px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.csclub-resp-icon i {
    font-size: 1.75rem;
    color: var(--purple);
}

.csclub-resp-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 20px;
}

.csclub-resp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.csclub-resp-list li {
    font-size: 0.938rem;
    color: rgba(237, 237, 237, 0.8);
    padding-left: 28px;
    position: relative;
}

.csclub-resp-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--purple);
    font-size: 1.5rem;
    line-height: 1;
}

/* Impact Section */
.csclub-impact {
    padding: 80px 0;
}

.csclub-impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

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

.csclub-impact-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.csclub-impact-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.csclub-impact-item:hover {
    background: rgba(124, 58, 237, 0.05);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
}

.csclub-impact-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csclub-impact-icon i {
    font-size: 1.5rem;
    color: var(--purple);
}

.csclub-impact-item p {
    font-size: 0.938rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.85);
    margin: 0;
}

/* Challenges & Solutions Section */
.csclub-challenges {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.csclub-challenges-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .csclub-challenges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.csclub-challenge-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.csclub-challenge-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.csclub-challenge-header,
.csclub-solution-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.csclub-challenge-header i {
    font-size: 1.25rem;
    color: #ef4444;
}

.csclub-solution-header i {
    font-size: 1.25rem;
    color: #10b981;
}

.csclub-challenge-header h3,
.csclub-solution-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.csclub-challenge-text {
    font-size: 0.938rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.8);
    margin: 0 0 24px;
    padding-left: 37px;
}

.csclub-solution-text {
    font-size: 0.938rem;
    line-height: 1.6;
    color: rgba(237, 237, 237, 0.8);
    margin: 0;
    padding-left: 37px;
}

/* Narrative Section */
.csclub-narrative {
    padding: 80px 0;
}

.csclub-narrative-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.csclub-narrative-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(237, 237, 237, 0.85);
    margin: 0;
}

/* Bottom CTA Section */
.csclub-cta {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.csclub-cta-card {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.csclub-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.csclub-cta-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 32px;
    line-height: 1.4;
}

.csclub-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.csclub-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.csclub-cta-primary {
    background: var(--purple);
    color: white;
    border: 1px solid var(--purple);
}

.csclub-cta-primary:hover {
    background: #6b21a8;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.csclub-cta-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.csclub-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .csclub-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .csclub-hero-title {
        font-size: 2rem;
    }
    
    .csclub-impact-stats {
        grid-template-columns: 1fr;
    }
}

/* ==================== IEEE PR Page Styles ==================== */
.ieee-back-container {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
    padding: 1.5rem 0;
    position: sticky;
    top: 70px;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.ieee-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.ieee-back-btn {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.ieee-back-btn:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
    transform: translateX(-3px);
}

.ieee-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
}

.ieee-breadcrumb i {
    font-size: 0.7rem;
}

.ieee-breadcrumb span:last-child {
    color: rgba(37, 99, 235, 0.9);
}

/* Hero Section */
.ieee-hero {
    background: rgba(0, 0, 0, 0.3);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.ieee-hero-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
    pointer-events: none;
}

.ieee-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}

.ieee-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(37, 99, 235, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.ieee-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.ieee-hero-org {
    font-size: 1.2rem;
    color: rgba(37, 99, 235, 0.85);
    margin-bottom: 1rem;
    font-weight: 600;
}

.ieee-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ieee-social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ieee-social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.ieee-social-link:hover {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
}

.ieee-social-link i {
    font-size: 1.1rem;
}

.ieee-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ieee-metric-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.ieee-metric-card:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.08));
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-3px);
}

.ieee-metric-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(37, 99, 235, 0.95);
    margin-bottom: 0.3rem;
}

.ieee-metric-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Role Scope Section */
.ieee-scope {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.ieee-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.5rem;
    text-align: center;
}

.ieee-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.ieee-scope-item {
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ieee-scope-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ieee-scope-item:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
    transform: translateY(-3px);
}

.ieee-scope-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.15);
    border-radius: 8px;
    color: rgba(37, 99, 235, 0.95);
    font-size: 1.3rem;
}

.ieee-scope-item p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Flagship Initiative Section */
.ieee-flagship {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.ieee-flagship-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.ieee-flagship-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ieee-flagship-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.ieee-flagship-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.2);
    border-radius: 12px;
    color: rgba(37, 99, 235, 0.95);
    font-size: 1.8rem;
}

.ieee-flagship-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.ieee-flagship-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.ieee-flagship-detail {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

.ieee-flagship-detail i {
    color: rgba(37, 99, 235, 0.8);
    font-size: 1.1rem;
}

.ieee-flagship-outcomes h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(37, 99, 235, 0.95);
    margin-bottom: 0.8rem;
}

.ieee-flagship-outcomes ul {
    list-style: none;
    padding: 0;
}

.ieee-flagship-outcomes li {
    padding-left: 1.5rem;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.ieee-flagship-outcomes li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: rgba(37, 99, 235, 0.9);
    font-weight: 700;
}

/* Execution & Operations Section */
.ieee-execution {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.ieee-execution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
}

.ieee-execution-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ieee-execution-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ieee-execution-item:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
}

.ieee-execution-item i {
    color: rgba(37, 99, 235, 0.9);
    font-size: 1.2rem;
}

/* Skills Developed Section */
.ieee-skills {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.ieee-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.ieee-skill-card {
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ieee-skill-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ieee-skill-card:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
    transform: translateY(-5px);
}

.ieee-skill-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    margin: 0 auto 1rem;
    color: rgba(37, 99, 235, 0.95);
    font-size: 1.5rem;
}

.ieee-skill-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Impact Section */
.ieee-impact {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.ieee-impact-content {
    max-width: 850px;
    margin: 0 auto;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    padding: 2rem;
}

.ieee-impact-content p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    font-size: 1.05rem;
}

/* Bottom CTA Section */
.ieee-cta {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.ieee-cta-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.ieee-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ieee-cta-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.ieee-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ieee-cta-btn {
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
}

.ieee-cta-primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(59, 130, 246, 0.8));
    color: #fff;
}

.ieee-cta-primary:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(59, 130, 246, 0.9));
    transform: translateY(-2px);
}

.ieee-cta-secondary {
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: #fff;
}

.ieee-cta-secondary:hover {
    background: rgba(37, 99, 235, 0.25);
    border-color: rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ieee-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .ieee-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ieee-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ieee-breadcrumb {
        flex-wrap: wrap;
    }
    
    .ieee-hero {
        padding: 3rem 0 2rem;
    }
    
    .ieee-hero-title {
        font-size: 2rem;
    }
    
    .ieee-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .ieee-flagship-card {
        padding: 1.8rem;
    }
    
    .ieee-flagship-icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
    
    .ieee-cta-card h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 640px) {
    .ieee-social-links {
        flex-direction: column;
    }
    
    .ieee-social-link {
        justify-content: center;
    }
    
    .ieee-scope-grid {
        grid-template-columns: 1fr;
    }
    
    .ieee-execution-grid {
        grid-template-columns: 1fr;
    }
    
    .ieee-skills-grid {
        grid-template-columns: 1fr;
    }
    
    .ieee-cta-buttons {
        flex-direction: column;
    }
    
    .ieee-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Creative IT Page Styles ==================== */
/* Theme aligned with global dark (purple-blue) palette */

.cit-back-container {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    padding: 1.5rem 0;
    position: sticky;
    top: 70px;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.cit-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cit-back-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.cit-back-btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateX(-3px);
}

.cit-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
}

.cit-breadcrumb i {
    font-size: 0.7rem;
}

.cit-breadcrumb span:last-child {
    color: rgba(124, 58, 237, 0.9);
}

/* Hero Section */
.cit-hero {
    background: rgba(0, 0, 0, 0.3);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.cit-hero-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
    pointer-events: none;
}

.cit-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}

.cit-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.cit-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.cit-hero-org {
    font-size: 1.2rem;
    color: rgba(124, 58, 237, 0.85);
    margin-bottom: 1rem;
    font-weight: 600;
}

.cit-hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.cit-social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cit-social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.cit-social-link:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.cit-social-link i {
    font-size: 1.1rem;
}

.cit-impact-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.cit-impact-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.cit-impact-card:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.08));
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-3px);
}

.cit-impact-card i {
    font-size: 1.8rem;
    color: rgba(124, 58, 237, 0.9);
}

.cit-impact-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* Role Scope Section */
.cit-scope {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.cit-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.5rem;
    text-align: center;
}

.cit-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.cit-scope-item {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.cit-scope-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.cit-scope-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-3px);
}

.cit-scope-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.3rem;
}

.cit-scope-item p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Community Impact Section */
.cit-impact {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.cit-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.cit-impact-block {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.8rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.cit-impact-block.revealed {
    opacity: 1;
    transform: translateY(0);
}

.cit-impact-block:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-3px);
}

.cit-impact-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.4rem;
}

.cit-impact-block p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* About Creative IT Institute Section */
.cit-about-institute {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.cit-about-content {
    max-width: 850px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 2rem;
}

.cit-about-content p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    font-size: 1.05rem;
}

/* Skills & Mindset Developed Section */
.cit-skills {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.cit-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.cit-skill-card {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.cit-skill-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.cit-skill-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-5px);
}

.cit-skill-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    margin: 0 auto 1rem;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.5rem;
}

.cit-skill-card h3 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Why This Experience Matters Section */
.cit-matters {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.cit-matters-content {
    max-width: 850px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 2rem;
}

.cit-matters-content p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    font-size: 1.05rem;
}

/* Bottom CTA Section */
.cit-cta {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.cit-cta-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.cit-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.cit-cta-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.cit-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cit-cta-btn {
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
}

.cit-cta-primary {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(139, 92, 246, 0.8));
    color: #fff;
}

.cit-cta-primary:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(139, 92, 246, 0.9));
    transform: translateY(-2px);
}

.cit-cta-secondary {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
}

.cit-cta-secondary:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cit-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .cit-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cit-breadcrumb {
        flex-wrap: wrap;
    }
    
    .cit-hero {
        padding: 3rem 0 2rem;
    }
    
    .cit-hero-title {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .cit-social-links {
        flex-direction: column;
    }
    
    .cit-social-link {
        justify-content: center;
    }
    
    .cit-scope-grid {
        grid-template-columns: 1fr;
    }
    
    .cit-impact-grid {
        grid-template-columns: 1fr;
    }
    
    .cit-skills-grid {
        grid-template-columns: 1fr;
    }
    
    .cit-cta-buttons {
        flex-direction: column;
    }
    
    .cit-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Programming Hero Page Styles ==================== */
/* Theme aligned with global dark (purple-blue) palette */

.ph-back-container {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    padding: 1.5rem 0;
    position: sticky;
    top: 70px;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.ph-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.ph-back-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.ph-back-btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateX(-3px);
}

.ph-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
}

.ph-breadcrumb i {
    font-size: 0.7rem;
}

.ph-breadcrumb span:last-child {
    color: rgba(124, 58, 237, 0.9);
}

/* Hero Section */
.ph-hero {
    background: rgba(0, 0, 0, 0.3);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.ph-hero-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
    pointer-events: none;
}

.ph-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}

.ph-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.ph-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.ph-hero-org {
    font-size: 1.2rem;
    color: rgba(124, 58, 237, 0.85);
    margin-bottom: 1rem;
    font-weight: 600;
}

.ph-hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ph-social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.ph-social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.ph-social-link:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.ph-social-link i {
    font-size: 1.1rem;
}

.ph-impact-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.ph-impact-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    padding: 1.3rem;
    text-align: center;
    transition: all 0.3s ease;
}

.ph-impact-card:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.08));
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-3px);
}

.ph-impact-value {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(124, 58, 237, 0.95);
    margin-bottom: 0.3rem;
}

.ph-impact-icon {
    font-size: 1.8rem;
    color: rgba(124, 58, 237, 0.9);
    margin-bottom: 0.3rem;
}

.ph-impact-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Role Scope Section */
.ph-scope {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.ph-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.5rem;
    text-align: center;
}

.ph-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.ph-scope-item {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ph-scope-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ph-scope-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-3px);
}

.ph-scope-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.3rem;
}

.ph-scope-item p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Network Execution Section */
.ph-network {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.ph-network-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.ph-network-step {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ph-network-step.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ph-network-step:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-5px);
}

.ph-network-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 50%;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(124, 58, 237, 0.95);
}

.ph-network-step h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.8rem;
}

.ph-network-step p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Outcomes Section */
.ph-outcomes {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.ph-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.ph-outcome-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ph-outcome-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ph-outcome-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
}

.ph-outcome-item i {
    color: rgba(124, 58, 237, 0.9);
    font-size: 1.2rem;
}

/* Skills Built Section */
.ph-skills {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.ph-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.ph-skill-card {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.ph-skill-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ph-skill-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-5px);
}

.ph-skill-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    margin: 0 auto 1rem;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.5rem;
}

.ph-skill-card h3 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Why This Matters Section */
.ph-matters {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.ph-matters-content {
    max-width: 850px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 2rem;
}

.ph-matters-content p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    font-size: 1.05rem;
}

/* Bottom CTA Section */
.ph-cta {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.ph-cta-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.ph-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ph-cta-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.ph-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ph-cta-btn {
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
}

.ph-cta-primary {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(139, 92, 246, 0.8));
    color: #fff;
}

.ph-cta-primary:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(139, 92, 246, 0.9));
    transform: translateY(-2px);
}

.ph-cta-secondary {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
}

.ph-cta-secondary:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ph-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .ph-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ph-breadcrumb {
        flex-wrap: wrap;
    }
    
    .ph-hero {
        padding: 3rem 0 2rem;
    }
    
    .ph-hero-title {
        font-size: 2rem;
    }
    
    .ph-impact-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ph-social-links {
        flex-direction: column;
    }
    
    .ph-social-link {
        justify-content: center;
    }
    
    .ph-scope-grid {
        grid-template-columns: 1fr;
    }
    
    .ph-network-grid {
        grid-template-columns: 1fr;
    }
    
    .ph-outcomes-grid {
        grid-template-columns: 1fr;
    }
    
    .ph-skills-grid {
        grid-template-columns: 1fr;
    }
    
    .ph-cta-buttons {
        flex-direction: column;
    }
    
    .ph-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== TBS EDGE Page Styles ==================== */
/* Theme aligned with global dark (purple-blue) palette + editorial newsroom vibe */

.tbs-back-container {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    padding: 1.5rem 0;
    position: sticky;
    top: 70px;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.tbs-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.tbs-back-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.tbs-back-btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateX(-3px);
}

.tbs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
}

.tbs-breadcrumb i {
    font-size: 0.7rem;
}

.tbs-breadcrumb span:last-child {
    color: rgba(124, 58, 237, 0.9);
}

/* Hero Section - Newsroom Style */
.tbs-hero {
    background: rgba(0, 0, 0, 0.3);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.tbs-hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: 0.3;
}

.tbs-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

.tbs-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.tbs-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.3rem;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.tbs-hero-org {
    font-size: 1.3rem;
    color: rgba(124, 58, 237, 0.85);
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.tbs-hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.tbs-links-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tbs-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid rgba(124, 58, 237, 0.25);
}

.tbs-link-active {
    background: rgba(124, 58, 237, 0.1);
    color: #fff;
    cursor: pointer;
}

.tbs-link-active:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.tbs-link-disabled {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.08);
}

.tbs-link i {
    font-size: 1.1rem;
}

/* Newsroom Panel */
.tbs-newsroom-panel {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    padding: 2rem;
}

.tbs-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.9);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.tbs-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tbs-metric-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.tbs-metric-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
}

.tbs-metric-card i {
    font-size: 1.3rem;
    color: rgba(124, 58, 237, 0.9);
}

.tbs-metric-card span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Section Header (Editorial Style) */
.tbs-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.tbs-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.8rem;
}

.tbs-section-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.6), transparent);
    margin: 0 auto;
}

/* What I Did Section */
.tbs-scope {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.tbs-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tbs-scope-item {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-left: 3px solid rgba(124, 58, 237, 0.4);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.tbs-scope-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.tbs-scope-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    border-left-color: rgba(124, 58, 237, 0.6);
    transform: translateY(-3px);
}

.tbs-scope-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.3rem;
}

.tbs-scope-item p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* What I Learned Section */
.tbs-learned {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.tbs-learned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.tbs-learned-card {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.tbs-learned-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.tbs-learned-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-5px);
}

.tbs-learned-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    margin: 0 auto 1rem;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.5rem;
}

.tbs-learned-card h3 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Experience Narrative Section */
.tbs-narrative {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.tbs-narrative-content {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.03);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-left: 3px solid rgba(124, 58, 237, 0.4);
    border-radius: 8px;
    padding: 2.5rem;
}

.tbs-narrative-content p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.tbs-narrative-content p:last-child {
    margin-bottom: 0;
}

/* Bottom CTA Section */
.tbs-cta {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.tbs-cta-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.tbs-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.tbs-cta-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.tbs-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tbs-cta-btn {
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
}

.tbs-cta-primary {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(139, 92, 246, 0.8));
    color: #fff;
}

.tbs-cta-primary:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(139, 92, 246, 0.9));
    transform: translateY(-2px);
}

.tbs-cta-secondary {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
}

.tbs-cta-secondary:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .tbs-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .tbs-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tbs-breadcrumb {
        flex-wrap: wrap;
    }
    
    .tbs-hero {
        padding: 3rem 0 2rem;
    }
    
    .tbs-hero-title {
        font-size: 2.2rem;
    }
    
    .tbs-newsroom-panel {
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .tbs-links-row {
        flex-direction: column;
    }
    
    .tbs-link {
        justify-content: center;
    }
    
    .tbs-scope-grid {
        grid-template-columns: 1fr;
    }
    
    .tbs-learned-grid {
        grid-template-columns: 1fr;
    }
    
    .tbs-narrative-content {
        padding: 1.8rem;
    }
    
    .tbs-cta-buttons {
        flex-direction: column;
    }
    
    .tbs-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Banglay IELTS Page Styles ==================== */
/* Theme aligned with global dark (purple-blue) palette */

.banglay-back-container {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    padding: 1.5rem 0;
    position: sticky;
    top: 70px;
    z-index: 99;
    backdrop-filter: blur(10px);
}

.banglay-back-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.banglay-back-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.banglay-back-btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateX(-3px);
}

.banglay-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
}

.banglay-breadcrumb i {
    font-size: 0.7rem;
}

.banglay-breadcrumb span:last-child {
    color: rgba(124, 58, 237, 0.9);
}

/* Hero Section */
.banglay-hero {
    background: rgba(0, 0, 0, 0.3);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.banglay-hero-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
    pointer-events: none;
}

.banglay-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}

.banglay-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.banglay-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.banglay-hero-org {
    font-size: 1.2rem;
    color: rgba(124, 58, 237, 0.85);
    margin-bottom: 1rem;
    font-weight: 600;
}

.banglay-hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.banglay-social-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.banglay-social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.banglay-social-link:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

.banglay-social-link i {
    font-size: 1.1rem;
}

/* Global Readiness Panel */
.banglay-global-panel {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    padding: 2rem;
}

.banglay-panel-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(124, 58, 237, 0.9);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.banglay-readiness-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.banglay-readiness-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.banglay-readiness-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
}

.banglay-readiness-card i {
    font-size: 1.3rem;
    color: rgba(124, 58, 237, 0.9);
}

.banglay-readiness-card span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Role Scope Section */
.banglay-scope {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.banglay-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2.5rem;
    text-align: center;
}

.banglay-scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.banglay-scope-item {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.banglay-scope-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.banglay-scope-item:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-3px);
}

.banglay-scope-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.3rem;
}

.banglay-scope-item p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* What I Learned Section */
.banglay-learned {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.banglay-learned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.banglay-learned-card {
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 1.8rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.banglay-learned-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.banglay-learned-card:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.25);
    transform: translateY(-5px);
}

.banglay-learned-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    margin: 0 auto 1rem;
    color: rgba(124, 58, 237, 0.95);
    font-size: 1.5rem;
}

.banglay-learned-card h3 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Why This Matters Section */
.banglay-matters {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.banglay-matters-content {
    max-width: 850px;
    margin: 0 auto;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    padding: 2rem;
}

.banglay-matters-content p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.9;
    font-size: 1.05rem;
}

/* Bottom CTA Section */
.banglay-cta {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.banglay-cta-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.banglay-cta-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.banglay-cta-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.banglay-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.banglay-cta-btn {
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
}

.banglay-cta-primary {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(139, 92, 246, 0.8));
    color: #fff;
}

.banglay-cta-primary:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 1), rgba(139, 92, 246, 0.9));
    transform: translateY(-2px);
}

.banglay-cta-secondary {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #fff;
}

.banglay-cta-secondary:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .banglay-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .banglay-back-container .container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .banglay-breadcrumb {
        flex-wrap: wrap;
    }
    
    .banglay-hero {
        padding: 3rem 0 2rem;
    }
    
    .banglay-hero-title {
        font-size: 2rem;
    }
    
    .banglay-global-panel {
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .banglay-social-links {
        flex-direction: column;
    }
    
    .banglay-social-link {
        justify-content: center;
    }
    
    .banglay-scope-grid {
        grid-template-columns: 1fr;
    }
    
    .banglay-learned-grid {
        grid-template-columns: 1fr;
    }
    
    .banglay-cta-buttons {
        flex-direction: column;
    }
    
    .banglay-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Education Section ==================== */
.education-section {
    background: var(--bg-main);
    padding: clamp(3rem, 8vw, 6.25rem) 0;
}

.section-title-purple {
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.education-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: clamp(2rem, 6vw, 3.75rem);
    margin-bottom: clamp(2rem, 6vw, 3.75rem);
    flex-wrap: wrap;
}

.education-intro {
    flex: 1;
    min-width: min(300px, 100%);
}

.education-degree-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.education-degree {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0;
    line-height: 1.3;
}

.education-timeline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.education-timeline i {
    font-size: 0.85rem;
    color: var(--purple);
}

.education-university {
    font-size: 1.4rem;
    font-weight: 600;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.education-tagline {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    font-style: italic;
}

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

.ranking-mobile-summary {
    display: none;
}

.ranking-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 32px 24px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.ranking-card:hover {
    transform: translateY(-5px);
    border-color: var(--purple);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3);
}

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

.ranking-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--border-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.25s ease;
}

.ranking-card:hover .ranking-icon {
    background: var(--gradient-purple-blue);
    border-color: transparent;
}

.ranking-icon i {
    font-size: 1.6rem;
    color: var(--purple);
    transition: color 0.25s ease;
}

.ranking-card:hover .ranking-icon i {
    color: var(--text-main);
}

.ranking-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
    line-height: 1.4;
}

.ranking-description {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

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

@media (max-width: 768px) {
    .education-section {
        padding: 80px 0;
    }
    
    .education-header {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .education-degree-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .education-degree {
        font-size: 1.6rem;
    }
    
    .education-university {
        font-size: 1.2rem;
    }
    
    .education-tagline {
        font-size: 1rem;
    }
    
    .btn-learn-more {
        width: 100%;
        justify-content: center;
    }
    
    .rankings-grid {
        display: none;
    }

    .ranking-mobile-summary {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border-purple);
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
        animation: rankingSummaryFadeIn 0.35s ease;
    }

    .ranking-mobile-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-main);
        margin: 0 0 12px;
    }

    .ranking-mobile-divider {
        height: 1px;
        width: 100%;
        margin-bottom: 18px;
        background: linear-gradient(90deg, rgba(124, 58, 237, 0), rgba(124, 58, 237, 0.65), rgba(59, 130, 246, 0.65), rgba(59, 130, 246, 0));
    }

    .ranking-mobile-item {
        margin-bottom: 18px;
    }

    .ranking-mobile-item:last-child {
        margin-bottom: 0;
    }

    .ranking-mobile-item h4 {
        margin: 0 0 8px;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-main);
        line-height: 1.5;
    }

    .ranking-mobile-item p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.65;
    }
}

@keyframes rankingSummaryFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--light-text);
    margin-bottom: 20px;
    line-height: 1.8;
}

.about-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 40px 0;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--light-bg);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.info-item i {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.info-item h4 {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 5px;
}

.info-item p {
    font-size: 1rem;
    color: var(--dark-text);
    margin: 0;
}

/* ==================== Publications Section ==================== */
.publications-section {
    background: var(--bg-main);
    padding: clamp(3rem, 8vw, 6.25rem) 0;
}

.section-subtitle {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--text-muted);
    margin-top: 16px;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.publications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .publications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.publication-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: clamp(1.5rem, 4vw, 2rem);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.publication-card:hover {
    transform: translateY(-4px);
    border-color: var(--purple);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.25);
}

.publication-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.publication-index {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
    transition: all 0.25s ease;
}

.publication-card:hover .publication-index {
    background: rgba(124, 58, 237, 0.15);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.publication-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.springer-badge {
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: var(--purple);
}

.publication-title {
    font-size: clamp(1.05rem, 2.5vw, 1.2rem);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    margin: 0;
    word-wrap: break-word;
}

.publication-conference {
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
    margin: 0;
    word-wrap: break-word;
}

.publication-desc {
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.btn-read-paper {
    padding: 12px 24px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid var(--border-purple);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: not-allowed;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    opacity: 0.6;
}

.btn-read-paper i {
    font-size: 0.9rem;
}

.btn-view-publication {
    padding: 12px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--purple), var(--purple-600));
    border: 2px solid transparent;
    color: var(--btnText);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    text-decoration: none;
}

.btn-view-publication:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.btn-view-publication i {
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .publications-grid {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .publications-section {
        padding: 80px 0;
    }
    
    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    
    .publications-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .publication-card {
        padding: 24px;
    }
    
    .publication-title {
        font-size: 1.1rem;
    }
    
    .btn-read-paper {
        width: 100%;
        justify-content: center;
    }

    .btn-view-publication {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Extracurricular Activities Section ==================== */
.activities-section {
    background: var(--bg-main);
    padding: clamp(3rem, 8vw, 6.25rem) 0;
    position: relative;
    overflow: visible;
}

.activities-background-blob {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: blobPulse 8s ease-in-out infinite;
}

@keyframes blobPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.3; }
}

.section-hint {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 8px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.section-hint i {
    color: var(--purple);
    animation: pointPulse 2s ease-in-out infinite;
}

@keyframes pointPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.filter-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
}

.filter-chip {
    padding: 10px 20px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border-purple);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.filter-chip:hover {
    border-color: var(--purple);
    color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.filter-chip.active {
    background: var(--gradient-purple-blue);
    color: var(--text-main);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.activities-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
    min-height: auto;
    height: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

.activities-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(3rem, 8vw, 5rem) 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.activities-empty-state i {
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--purple);
    opacity: 0.5;
}

.activities-empty-state p {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: var(--text-muted);
    margin: 0;
}

.btn-reset-filter {
    padding: 12px 24px;
    border-radius: 10px;
    background: var(--gradient-purple-blue);
    border: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-reset-filter:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

.btn-reset-filter:active {
    transform: translateY(0);
}

.activity-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-purple);
    border-radius: 20px;
    padding: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (hover: hover) {
    .activity-card:hover {
        transform: translateY(-6px);
        border-color: var(--purple);
        box-shadow: 0 16px 48px rgba(124, 58, 237, 0.3);
    }
    
    .activity-card:hover .activity-card-gradient {
        opacity: 1;
    }
}

.activity-card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(59, 130, 246, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@media (hover: none) {
    .activity-card:active {
        transform: scale(0.98);
    }
}

.activity-role {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.activity-org {
    font-size: 1rem;
    font-weight: 600;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.activity-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.activity-metric {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid var(--border-purple);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.25s ease;
}

.activity-card:hover .activity-metric {
    background: rgba(124, 58, 237, 0.12);
    border-color: var(--purple);
}

.metric-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 4px;
}

.metric-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-highlights-preview {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    position: relative;
    z-index: 1;
}

.activity-highlights-preview li {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.activity-highlights-preview li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--purple);
    font-weight: bold;
}

.activity-click-hint {
    font-size: 0.85rem;
    color: var(--purple);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.activity-click-hint i {
    transition: transform 0.25s ease;
}

.activity-card:hover .activity-click-hint i {
    transform: translateX(4px);
}

/* Activity Modal Styles */
.activity-modal-content {
    max-width: 900px;
}

.activity-modal-meta {
    margin-bottom: 24px;
}

.activity-modal-org {
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

.activity-modal-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.activity-metric-large {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--border-purple);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.metric-value-large {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--purple);
    margin-bottom: 8px;
}

.metric-label-large {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activity-modal-highlights h3,
.activity-modal-description h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
}

.activity-modal-highlights {
    margin-bottom: 32px;
}

.activity-modal-highlights ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-modal-highlights li {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    padding-left: 28px;
    position: relative;
    margin-bottom: 12px;
}

.activity-modal-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--purple);
    font-weight: bold;
    font-size: 1.2rem;
}

.activity-modal-description p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

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

@media (max-width: 768px) {
    .activities-section {
        padding: clamp(2.5rem, 6vw, 4rem) 0;
        overflow: visible !important;
    }
    
    .activities-background-blob {
        width: 600px;
        height: 600px;
    }
    
    .filter-chips {
        gap: 8px;
        margin-bottom: 40px;
    }
    
    .filter-chip {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .activities-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .activity-card {
        padding: 24px;
        min-height: auto;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .activity-role {
        font-size: 1.15rem;
    }
    
    .activity-modal-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .activities-empty-state {
        padding: 3rem 1.5rem;
    }
}

/* ==================== Skills & Certifications Section ==================== */
.skills-section {
    background: var(--bg-main);
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.view-toggle {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    flex-wrap: wrap;
}

.toggle-btn {
    padding: 12px 28px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid var(--border-purple);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.toggle-btn:hover {
    border-color: var(--purple);
    color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.toggle-btn.active {
    background: var(--gradient-purple-blue);
    color: var(--text-main);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.toggle-btn i {
    font-size: 1rem;
}

/* Compact View */
.skills-compact-container {
    width: 100%;
}

.skill-compact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 2vw, 18px);
}

@media (min-width: 640px) {
    .skill-compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .skill-compact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.skill-compact-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(16px, 2vw, 18px);
    padding: clamp(16px, 2.5vw, 20px);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 16px);
}

@media (min-width: 768px) {
    .skill-compact-card {
        padding: clamp(20px, 3vw, 24px);
    }
    
    .skill-compact-card:hover {
        transform: translateY(-4px);
        border-color: var(--purple);
        box-shadow: 0 12px 40px rgba(124, 58, 237, 0.3);
    }
}

.skill-compact-name {
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
    margin: 0;
}

.skill-compact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    font-size: 0.75rem;
    padding: 5px 10px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--border-purple);
    border-radius: 6px;
    color: var(--purple);
    font-weight: 600;
    white-space: nowrap;
}

.skill-tag-more {
    background: rgba(156, 163, 175, 0.1);
    border-color: rgba(156, 163, 175, 0.3);
    color: var(--text-muted);
    opacity: 0.7;
}

.skill-compact-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

@media (min-width: 640px) {
    .skill-compact-actions {
        flex-direction: row;
        gap: 10px;
    }
    
    .skill-compact-actions > button {
        flex: 1;
    }
}

.btn-skill-details,
.btn-skill-certificate {
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    white-space: nowrap;
}

.btn-skill-details {
    background: var(--gradient-purple-blue);
    color: var(--text-main);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.btn-skill-details:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

.btn-skill-details:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

.btn-skill-certificate {
    background: transparent;
    border: 2px solid var(--purple);
    color: var(--purple);
}

.btn-skill-certificate:hover:not(.btn-skill-certificate-disabled) {
    background: var(--gradient-purple-blue);
    color: var(--text-main);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

.btn-skill-certificate:active:not(.btn-skill-certificate-disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

.btn-skill-certificate-disabled {
    border-color: rgba(156, 163, 175, 0.3);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-skill-certificate-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Skill Details Modal */
.skill-modal-content {
    max-width: 1200px;
}

.skill-modal-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.skill-modal-main {
    min-width: 0;
}

.skill-modal-issuer {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    font-style: italic;
}

.skill-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.skill-meta-chip {
    padding: 8px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue);
}

.skill-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.skill-tag-large {
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--border-purple);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--purple);
}

.skill-modal-description h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
}

.skill-modal-description p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

.skill-modal-certificate-section {
    position: relative;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(124, 58, 237, 0.2);
}

.skill-certificate-container {
    background: rgba(14, 14, 26, 0.5);
    border: 1px solid var(--border-purple);
    border-radius: 16px;
    padding: 2rem;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.skill-cert-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.skill-cert-inline-container {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-cert-pdf-inline {
    position: relative;
    cursor: pointer;
    border: 2px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
}

.skill-cert-pdf-inline:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: scale(1.02);
}

.skill-cert-pdf-inline canvas {
    width: 100%;
    height: auto;
    display: block;
}

.skill-cert-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: all 0.3s ease;
}

.skill-cert-pdf-inline:hover .skill-cert-overlay,
.skill-certificate-preview:hover .skill-cert-overlay {
    opacity: 1;
}

.skill-certificate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.skill-certificate-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.skill-certificate-preview {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(124, 58, 237, 0.2);
    transition: all 0.3s ease;
}

.skill-certificate-preview:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: scale(1.02);
}

.skill-certificate-image {
    width: 100%;
    height: auto;
    display: block;
}

.skill-certificate-pdf {
    width: 100%;
    height: 500px;
    display: block;
    border: none;
}

@media (max-width: 768px) {
    .skill-certificate-pdf {
        height: 400px;
    }
}

.skill-certificate-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-muted);
    border: 2px dashed rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    min-height: 250px;
}

.skill-certificate-placeholder i {
    font-size: 4rem;
    color: var(--purple);
    opacity: 0.5;
    margin-bottom: 1.5rem;
}

.skill-certificate-placeholder p {
    font-size: 1rem;
    margin: 0;
    color: var(--text-muted);
}

.skill-modal-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Certificate Viewer Modal */
.certificate-viewer-modal {
    animation: fadeIn 0.25s ease;
    z-index: 99999 !important;
}

.certificate-viewer-container {
    max-width: 95vw;
    max-height: 95vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificate-viewer-content {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.certificate-viewer-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    padding: 0 20px;
}

.certificate-viewer-image-wrapper {
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificate-viewer-image,
.certificate-viewer-canvas {
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: zoomIn 0.3s ease;
}

.btn-open-new-tab {
    padding: 12px 28px;
    border-radius: 10px;
    background: var(--gradient-purple-blue);
    border: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-open-new-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

.pdf-viewer-container {
    width: 90vw;
    height: 90vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-viewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    background: var(--bg-surface);
}

/* Other Certificates Section */
.other-certificates-cta {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.btn-view-other-certificates {
    padding: 18px 48px;
    border-radius: 14px;
    background: var(--bg-surface);
    border: 2px solid;
    border-image: var(--gradient-purple-blue) 1;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
    text-decoration: none;
}

.btn-view-other-certificates::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--gradient-purple-blue);
    transition: width 0.3s ease;
    z-index: -1;
    border-radius: 14px;
}

.btn-view-other-certificates:hover,
.btn-view-other-certificates:focus,
.btn-view-other-certificates:active {
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4);
    border-color: transparent;
}

.btn-view-other-certificates:hover::before {
    width: 100%;
}

.btn-view-other-certificates .fa-arrow-right {
    transition: transform 0.3s ease;
}

.btn-view-other-certificates:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Certificates Page */
.certificates-page-section {
    min-height: 100vh;
    padding: 120px 0 80px;
    background: var(--bg-main);
}

.certificates-page-header {
    margin-bottom: 60px;
}

.btn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--purple);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    margin-bottom: 24px;
    transition: all 0.25s ease;
}

.btn-back-link:hover {
    transform: translateX(-4px);
    color: var(--blue);
}

.certificates-page-title {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.certificates-page-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.certificates-gallery-container {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--border-purple);
    animation: fadeIn 0.4s ease;
}

.certificates-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.certificate-gallery-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-purple);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.certificate-gallery-card:hover {
    transform: translateY(-4px);
    border-color: var(--purple);
    box-shadow: 0 12px 40px rgba(124, 58, 237, 0.3);
}

.certificate-gallery-preview {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(124, 58, 237, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.certificate-gallery-thumbnail,
.certificate-gallery-thumbnail-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.certificate-gallery-pdf-icon {
    font-size: 3rem;
    color: var(--purple);
}

.certificate-gallery-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.certificate-gallery-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.certificate-gallery-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.certificate-badge-pdf {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.certificate-badge-image {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.btn-certificate-open {
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--gradient-purple-blue);
    border: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-certificate-open:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

.btn-certificate-open:active {
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 1200px) {
    .certificates-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 768px) {
    .view-toggle {
        margin-bottom: 40px;
    }
    
    .toggle-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .skill-compact-grid {
        grid-template-columns: 1fr;
    }
    
    .btn-view-other-certificates {
        width: 100%;
        justify-content: center;
        padding: 16px 32px;
        font-size: 1rem;
        border-radius: 14px;
    }
    
    .certificates-page-title {
        font-size: 2rem;
    }
    
    .certificates-page-subtitle {
        font-size: 1rem;
    }
    
    .certificates-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .skill-modal-actions {
        flex-direction: column;
    }
    
    .btn-certificate,
    .btn-back {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== International Events Section ==================== */
.international-events-section {
    position: relative;
    min-height: 100vh;
    background: var(--bg-main);
    overflow: hidden;
    padding: clamp(3rem, 8vw, 6.25rem) 0;
}

.global-bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 60%);
    animation: globalPulse 20s ease-in-out infinite;
    pointer-events: none;
}

.global-bg-effect::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.3;
    animation: gridMove 60s linear infinite;
}

@keyframes globalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.section-subtitle-events {
    text-align: center;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-muted);
    margin-top: -20px;
    margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 500;
    padding: 0 1rem;
}

.events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.event-card {
    background: rgba(14, 14, 26, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(59, 130, 246, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3);
    background: rgba(14, 14, 26, 0.8);
}

.event-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(124, 58, 237, 0.1), transparent);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.event-card:hover::after {
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.event-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.event-institute {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.event-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.event-short {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.event-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.btn-event-certificate,
.btn-event-details {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    outline: none;
    position: relative;
    z-index: 10;
}

.btn-event-certificate {
    background: var(--gradient-purple-blue);
    color: var(--text-main);
}

.btn-event-certificate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.btn-event-details {
    background: rgba(124, 58, 237, 0.1);
    color: var(--purple);
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.btn-event-details:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.5);
}

/* Event Details Modal */
.event-details-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    pointer-events: none;
    padding: 1rem;
}

.event-details-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.event-details-panel {
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    background: var(--bg-surface);
    border-radius: 24px;
    padding: clamp(1.5rem, 5vw, 3rem);
    position: relative;
    overflow-y: auto;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.event-details-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.event-details-institute {
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.6;
}

.event-details-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    line-height: 1.3;
}

.event-details-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.event-details-description {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--text-muted);
    line-height: 1.8;
}

.event-details-description p {
    margin-bottom: 20px;
}

.event-details-description p:last-child {
    margin-bottom: 0;
}

.event-details-description strong {
    color: var(--text-main);
    font-weight: 600;
}

.event-highlights {
    background: rgba(124, 58, 237, 0.05);
    border-left: 4px solid var(--purple);
    border-radius: 8px;
    padding: 24px;
}

.event-highlights h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
}

.event-highlights ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-highlights li {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding-left: 28px;
    position: relative;
}

.event-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--purple);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Event Inline Highlights */
.event-inline-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 32px 0;
}

@media (min-width: 480px) {
    .event-inline-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .event-inline-highlights {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

.event-highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.event-highlight-item:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-2px);
}

.event-highlight-item i {
    font-size: 1.3rem;
    color: var(--purple);
    flex-shrink: 0;
}

.event-highlight-item span {
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    color: var(--text-muted);
    line-height: 1.5;
}

/* Event Certificate Display */
.event-certificate-display {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(124, 58, 237, 0.15);
}

.event-certificate-display h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    text-align: center;
}

.event-cert-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(124, 58, 237, 0.2);
    width: 100%;
    min-height: 220px;
    background: rgba(124, 58, 237, 0.06);
}

.event-cert-preview:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: scale(1.02);
}

.event-cert-preview img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.event-cert-fallback {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

.event-cert-fallback i {
    font-size: 2rem;
    color: var(--purple);
}

.event-cert-fallback p {
    font-size: 0.95rem;
}

.btn-event-cert-fallback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    background: var(--gradient-purple-blue);
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-event-cert-fallback:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.cert-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: all 0.3s ease;
}

.event-cert-preview:hover .cert-preview-overlay {
    opacity: 1;
}

.cert-preview-overlay i {
    font-size: 2.5rem;
    color: var(--purple);
}

.cert-preview-overlay span {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 600;
}

.event-cert-preview-pdf {
    cursor: pointer;
    padding: 40px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.event-cert-preview-pdf:hover {
    border-color: var(--accent-purple);
    transform: scale(1.02);
}

.event-cert-inline-container {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.event-cert-pdf-inline {
    position: relative;
    cursor: pointer;
    border: 2px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
}

.event-cert-pdf-inline:hover {
    border-color: rgba(124, 58, 237, 0.4);
    transform: scale(1.02);
}

.event-cert-pdf-inline canvas {
    width: 100%;
    height: auto;
    display: block;
}

.cert-label {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 12px;
    font-style: italic;
}

/* PDF Viewer */
.event-cert-pdf-viewer {
    position: relative;
    width: 100%;
    min-height: clamp(350px, 60vw, 600px);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(124, 58, 237, 0.2);
}

.event-cert-pdf-embed {
    width: 100%;
    height: clamp(350px, 60vw, 600px);
    border: none;
    display: block;
}

.pdf-fallback-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    pointer-events: none;
}

.pdf-fallback-text a {
    color: var(--purple);
    text-decoration: underline;
    pointer-events: auto;
}

/* Multi-Certificate Grid */
.event-multi-cert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .event-multi-cert-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

.event-cert-item {
    display: flex;
    flex-direction: column;
}

@media (max-width: 968px) {
    .event-multi-cert-grid {
        grid-template-columns: 1fr;
    }
    
    .search-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
        margin-left: 12px;
    }
    
    .search-overlay {
        padding-top: 80px;
    }
    
    .search-overlay-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .event-cert-preview {
        min-height: 180px;
    }

    .event-cert-fallback {
        min-height: 180px;
    }

    .event-cert-pdf-viewer {
        min-height: 400px;
    }
    
    .event-cert-pdf-embed {
        height: 400px;
    }
}

/* Certificate Lightbox */
.certificate-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: none;
    padding: 20px;
}

.certificate-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.lightbox-caption {
    font-size: 1.1rem;
    color: var(--text-main);
    text-align: center;
    font-weight: 600;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    background: rgba(124, 58, 237, 0.4);
    transform: rotate(90deg);
}

/* Floating Exit Button */
.floating-exit-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--purple), var(--blue));
    border: none;
    border-radius: 50px;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    transition: all 0.3s ease;
    z-index: 9998;
    outline: none;
}

.floating-exit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.6);
}

.floating-exit-btn:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 4px;
}

.floating-exit-btn i {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .floating-exit-btn {
        bottom: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    
    .floating-exit-btn:hover {
        transform: translateX(-50%) translateY(-2px);
    }
}

/* Certificate Carousel */
.certificate-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
    position: relative;
    z-index: 10;
}

.btn-carousel-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: var(--purple);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.btn-carousel-nav:hover {
    background: rgba(124, 58, 237, 0.4);
    transform: scale(1.1);
}

.certificate-counter {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    position: relative;
    z-index: 10;
}

/* Responsive */
@media (max-width: 968px) {
    .events-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .event-details-panel {
        padding: 32px 24px;
    }
    
    .event-details-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .section-subtitle-events {
        font-size: 1rem;
    }
    
    .event-card {
        padding: 24px;
    }
    
    .event-title {
        font-size: 1.3rem;
    }
    
    .event-actions {
        flex-direction: column;
    }
    
    .btn-event-certificate,
    .btn-event-details {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== Contact Section ==================== */
.contact-section {
    background: var(--bg-main);
    position: relative;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-title {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-purple-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.contact-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(14, 14, 26, 0.4);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.contact-method:hover {
    background: rgba(14, 14, 26, 0.6);
    border-color: rgba(124, 58, 237, 0.2);
}

.contact-method-icon {
    font-size: 1.2rem;
    color: var(--purple);
    width: 24px;
    text-align: center;
}

.contact-method-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-method-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.contact-method-value {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.contact-method-value:hover {
    color: var(--purple);
}

.btn-copy-email {
    padding: 8px 12px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 8px;
    color: var(--purple);
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.9rem;
}

.btn-copy-email:hover {
    background: rgba(124, 58, 237, 0.2);
    transform: translateY(-2px);
}

.btn-copy-email.copied {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.contact-right {
    position: relative;
}

.contact-form {
    background: var(--bg-surface);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 20px;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all 0.3s ease;
}

.contact-form:hover {
    border-color: rgba(124, 58, 237, 0.2);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1);
}

.form-group {
    position: relative;
}

.form-input {
    width: 100%;
    padding: 16px 16px 16px 16px;
    background: rgba(7, 7, 17, 0.6);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    color: var(--text-main);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.25s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    top: -10px;
    left: 12px;
    font-size: 0.75rem;
    color: var(--purple);
    background: var(--bg-surface);
    padding: 0 8px;
}

.form-label {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: all 0.25s ease;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-send-message {
    flex: 1;
    padding: 16px 32px;
    background: var(--gradient-purple-blue);
    border: none;
    border-radius: 12px;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-send-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.btn-send-message:active {
    transform: translateY(0);
}

.btn-copy-email-text {
    padding: 16px 24px;
    background: transparent;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    color: var(--purple);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-copy-email-text:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
}

.form-fallback {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.form-fallback a {
    color: var(--purple);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.25s ease;
}

.form-fallback a:hover {
    color: var(--blue);
}

.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--bg-surface);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toast i {
    color: var(--purple);
    font-size: 1.2rem;
}

@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .contact-title {
        font-size: 2.5rem;
    }
    
    .contact-form {
        padding: 32px 24px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-send-message,
    .btn-copy-email-text {
        width: 100%;
    }
}

@media (max-width: 768px) {
    section {
        padding-block: clamp(32px, 4vw, 40px);
    }
    
    .contact-title {
        font-size: 2rem;
    }
    
    .contact-subtitle {
        font-size: 1rem;
    }
    
    .toast {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
}

/* ==================== Footer ==================== */
.footer {
    background: var(--dark-bg);
    color: var(--light-text);
    text-align: center;
    padding: clamp(2.5rem, 5vw, 3.5rem) 1rem clamp(1.5rem, 4vw, 1.875rem);
}

.footer-subscribe {
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.footer-subscribe-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--light-text);
}

.footer-subscribe-text {
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.subscribe-form {
    width: 100%;
}

.subscribe-input-group {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
    margin: 0 auto;
}

.subscribe-input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--light-text);
    font-size: 0.9375rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.subscribe-input:focus {
    outline: none;
    border-color: var(--purple);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.subscribe-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.subscribe-btn {
    padding: 0.875rem 2rem;
    background: var(--purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.subscribe-btn:hover:not(:disabled) {
    background: var(--purple-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.subscribe-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.footer p {
    margin: 5px 0;
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.footer i {
    color: var(--accent-color);
}

.toast.toast-success i {
    color: #10b981;
}

.toast.toast-error {
    border-color: rgba(239, 68, 68, 0.3);
}

.toast.toast-error i {
    color: #ef4444;
}

@media (max-width: 768px) {
    .subscribe-input-group {
        flex-direction: column;
    }
    
    .subscribe-btn {
        width: 100%;
    }
}

/* ==================== Animations ==================== */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes fillBar {
    from {
        width: 0;
    }
}

/* ==================== Responsive Design ==================== */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: rgba(7, 7, 17, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow);
        padding: 20px 0;
        border-top: 1px solid rgba(124, 58, 237, 0.2);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nav-menu.active {
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero Section Mobile */
    .hero-container {
        padding: 0 24px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: auto;
        padding: 40px 0;
    }

    .hero-text {
        order: 2;
        text-align: center;
    }

    .hero-image-wrapper {
        order: 1;
        justify-content: center;
    }

    .hero-name {
        font-size: 2.5rem;
        white-space: normal;
    }

    .hero-subtitle {
        font-size: 1rem;
        white-space: normal;
        line-height: 1.6;
    }

    .hero-description {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .btn-primary-gradient,
    .btn-outline {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

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

    .hero-image-card {
        max-width: 320px;
    }

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

    .about-info {
        grid-template-columns: 1fr;
    }

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

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

    .contact-content {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .logo h2 {
        font-size: 1.05rem;
    }

    .hero-name {
        font-size: 2rem;
        white-space: normal;
    }

    .hero-image-card {
        max-width: 280px;
    }

    .btn-primary-gradient,
    .btn-outline {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* Desktop - Prevent subtitle wrap on larger screens */
@media (min-width: 1200px) {
    .hero-subtitle {
        white-space: nowrap;
    }
}

/* Tablet - Allow graceful wrap if needed */
@media (min-width: 769px) and (max-width: 1199px) {
    .hero-subtitle {
        white-space: normal;
        max-width: 100%;
    }
    
    .hero-name {
        font-size: 3.5rem;
    }
}

/* ==================== BuildSign Page Styles ==================== */
.buildsign-page {
    background: #070711;
    min-height: 100vh;
}

/* Back Button */
.buildsign-content-intro {
    margin-top: 100px;
    margin-bottom: 24px;
}

.buildsign-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: rgba(237, 237, 237, 0.82);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.buildsign-back-btn:hover {
    color: var(--text-main);
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.4);
}

.buildsign-back-btn i {
    font-size: 0.875rem;
}

/* Hero Section */
.buildsign-hero {
    padding-top: 0;
    padding-bottom: 64px;
    position: relative;
    overflow: hidden;
}

.buildsign-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(900px circle at 20% 10%, rgba(124, 58, 237, 0.15), transparent 60%),
        radial-gradient(700px circle at 80% 30%, rgba(59, 130, 246, 0.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.buildsign-hero .container {
    position: relative;
    z-index: 1;
}

.buildsign-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .buildsign-hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 64px;
    }
}

.buildsign-hero-left {
    max-width: 640px;
}

.buildsign-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 24px;
    color: var(--purple);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.buildsign-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
    margin-bottom: 20px;
}

.buildsign-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.7);
    margin-bottom: 32px;
    max-width: 560px;
}

.buildsign-hero-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.btn-buildsign-primary,
.btn-buildsign-secondary {
    height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-buildsign-primary {
    background: var(--purple);
    color: white;
}

.btn-buildsign-primary:hover {
    background: #6b21a8;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.btn-buildsign-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.buildsign-hero-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.buildsign-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(237, 237, 237, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.25s ease;
}

.buildsign-link:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.buildsign-hero-right {
    width: 100%;
}

.buildsign-stat-cluster {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.buildsign-stat-cluster::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(59, 130, 246, 0.2));
    border-radius: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.buildsign-stat-cluster:hover::before {
    opacity: 1;
}

.buildsign-stat-card {
    background: rgba(14, 14, 26, 0.4);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.buildsign-stat-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15);
    transform: translateY(-2px);
}

.stat-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 12px;
    color: var(--purple);
}

.stat-card-icon i {
    font-size: 1.5rem;
}

.stat-card-content {
    flex: 1;
}

.buildsign-stat-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
    line-height: 1.3;
}

.buildsign-stat-card p {
    font-size: 0.875rem;
    color: rgba(237, 237, 237, 0.6);
    margin: 0;
    line-height: 1.5;
}

.buildsign-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    color: rgba(237, 237, 237, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
}

.trust-pill i {
    color: var(--purple);
    font-size: 0.875rem;
}

/* Section Headers */
.buildsign-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.buildsign-section-header h2 {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0;
}

/* Services Section */
.buildsign-services {
    padding: 56px 0;
}

.buildsign-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.4vw, 28px);
}

@media (min-width: 768px) {
    .buildsign-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .buildsign-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.buildsign-service-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: clamp(22px, 3vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(3, 7, 18, 0.2);
}

.buildsign-service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%);
    opacity: 0.7;
}

.buildsign-service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at 10% 0%, rgba(124, 58, 237, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.buildsign-service-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(124, 58, 237, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.3);
}

.buildsign-service-card:hover::after {
    opacity: 1;
}

.service-card-title {
    font-size: clamp(1.08rem, 1.7vw, 1.2rem);
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.service-card-description {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.service-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(124, 58, 237, 0.16);
    color: var(--purple);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.service-card-action-label {
    transition: color 0.3s ease;
}

.service-card-action i {
    transition: transform 0.3s ease;
}

.buildsign-service-card:hover .service-card-action {
    border-color: rgba(124, 58, 237, 0.3);
}

.buildsign-service-card:hover .service-card-action-label {
    color: var(--text-main);
}

.buildsign-service-card:hover .service-card-action i {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .buildsign-service-card,
    .buildsign-service-card::after,
    .service-card-action,
    .service-card-action-label,
    .service-card-action i {
        transition: none;
    }

    .buildsign-service-card:hover {
        transform: none;
    }
}

/* Process Section */
.buildsign-process {
    padding: 56px 0;
    background: rgba(14, 14, 26, 0.5);
}

.buildsign-process-header {
    text-align: center;
    margin-bottom: 44px;
}

.buildsign-process-subtitle {
    margin: 10px 0 14px;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.buildsign-process-divider {
    width: 110px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0), rgba(124, 58, 237, 0.75), rgba(59, 130, 246, 0.75), rgba(59, 130, 246, 0));
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.35);
}

.buildsign-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .buildsign-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .buildsign-process-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.buildsign-process-card {
    position: relative;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 14px;
    padding: 24px;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.process-step-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(124, 58, 237, 0.95);
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 999px;
    padding: 6px 10px;
    position: relative;
    z-index: 2;
}

.buildsign-process-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.buildsign-process-card p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
    position: relative;
    z-index: 2;
}

.process-bg-number {
    position: absolute;
    right: 14px;
    bottom: 8px;
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(124, 58, 237, 0.09);
    pointer-events: none;
    transition: color 0.3s ease;
}

.buildsign-process-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.38);
    box-shadow: 0 14px 32px rgba(35, 26, 67, 0.35);
}

.buildsign-process-card:hover .process-bg-number {
    color: rgba(124, 58, 237, 0.16);
}

@media (max-width: 768px) {
    .buildsign-process-header {
        margin-bottom: 32px;
    }

    .buildsign-process-card {
        text-align: center;
        align-items: center;
        min-height: auto;
        padding: 22px;
    }

    .process-bg-number {
        font-size: 3.4rem;
        right: 10px;
        bottom: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buildsign-process-card,
    .process-bg-number {
        transition: none;
    }

    .buildsign-process-card:hover {
        transform: none;
    }
}

/* Why Section */
.buildsign-why {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.buildsign-why-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.buildsign-why-subtitle {
    margin: 10px auto 14px;
    font-size: clamp(0.9rem, 1.35vw, 0.98rem);
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 620px;
}

.buildsign-why-divider {
    width: 120px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0), rgba(124, 58, 237, 0.62), rgba(59, 130, 246, 0.62), rgba(59, 130, 246, 0));
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.24);
}

.buildsign-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 2.5vw, 30px);
}

@media (min-width: 768px) {
    .buildsign-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.buildsign-why-card {
    position: relative;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 32px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    box-shadow: 0 10px 28px rgba(3, 7, 18, 0.24);
    display: flex;
    flex-direction: column;
    gap: 14px;
    isolation: isolate;
}

.buildsign-why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 42%);
    opacity: 0.65;
}

.buildsign-why-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(360px circle at 0% 0%, rgba(124, 58, 237, 0.2), transparent 58%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.buildsign-why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(124, 58, 237, 0.48);
    box-shadow: 0 18px 38px rgba(35, 26, 67, 0.38);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.buildsign-why-card:hover::after {
    opacity: 1;
}

.why-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 44px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(124, 58, 237, 0.98);
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    position: relative;
    z-index: 2;
}

.buildsign-why-card h3 {
    font-size: clamp(1.12rem, 1.75vw, 1.28rem);
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.35;
    position: relative;
    z-index: 2;
}

.buildsign-why-card p {
    font-size: clamp(0.9rem, 1.2vw, 0.96rem);
    line-height: 1.78;
    color: var(--text-muted);
    margin: 0;
    position: relative;
    z-index: 2;
}

.why-bg-number {
    position: absolute;
    right: 10px;
    bottom: 2px;
    font-size: clamp(3.8rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(124, 58, 237, 0.08);
    pointer-events: none;
    transition: color 0.3s ease;
}

.buildsign-why-card:hover .why-bg-number {
    color: rgba(124, 58, 237, 0.15);
}

@media (max-width: 991px) {
    .buildsign-why-card {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .buildsign-why-header {
        margin-bottom: 32px;
    }

    .buildsign-why-card {
        text-align: center;
        align-items: center;
        padding: 22px;
        gap: 12px;
    }

    .why-bg-number {
        font-size: 3.1rem;
        right: 8px;
        bottom: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buildsign-why-card,
    .why-bg-number {
        transition: none;
    }

    .buildsign-why-card:hover {
        transform: none;
    }
}

/* FAQ Section */
.buildsign-faq {
    padding: 56px 0;
    background: rgba(14, 14, 26, 0.5);
}

.buildsign-faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.buildsign-faq-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.buildsign-faq-item:hover {
    border-color: rgba(124, 58, 237, 0.3);
}

.faq-question {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.faq-question h3 {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.faq-icon {
    flex-shrink: 0;
    color: var(--purple);
    font-size: 1.125rem;
    transition: transform 0.3s ease;
}

.buildsign-faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.buildsign-faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    padding: 0 24px 24px;
    font-size: 0.938rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.7);
    margin: 0;
}

/* Contact/CTA Section */
.buildsign-contact {
    padding: 56px 0;
}

.buildsign-cta-card {
    background: rgba(124, 58, 237, 0.1);
    border: 2px solid rgba(124, 58, 237, 0.3);
    border-radius: 24px;
    padding: 56px 40px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.buildsign-cta-card h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
}

.buildsign-cta-card > p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.7);
    margin-bottom: 32px;
}

.buildsign-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.buildsign-website-link {
    font-size: 0.938rem;
    color: rgba(237, 237, 237, 0.6);
    margin: 0;
}

.buildsign-website-link i {
    color: var(--purple);
}

.buildsign-website-link a {
    color: var(--purple);
    text-decoration: none;
    transition: color 0.25s ease;
}

.buildsign-website-link a:hover {
    color: #9333ea;
}

/* Service Modal */
.buildsign-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    padding: 40px 20px;
    overflow-y: auto;
}

.buildsign-modal.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.buildsign-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.buildsign-modal-content {
    background: var(--surface-dark);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    padding: 40px;
    position: relative;
    animation: modalSlideIn 0.3s ease;
    margin-top: 40px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.buildsign-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    font-size: 1.125rem;
    transition: all 0.25s ease;
}

.buildsign-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.service-modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.service-modal-icon {
    width: 64px;
    height: 64px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    color: var(--purple);
    flex-shrink: 0;
}

.service-modal-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.service-timeline {
    font-size: 1rem;
    color: rgba(237, 237, 237, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.service-timeline i {
    color: var(--purple);
}

.service-modal-description {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(237, 237, 237, 0.7);
    margin-bottom: 28px;
}

.service-modal-section {
    margin-bottom: 28px;
}

.service-modal-section h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
}

.service-deliverables {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-deliverables li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    color: rgba(237, 237, 237, 0.7);
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-deliverables li:last-child {
    border-bottom: none;
}

.service-deliverables li i {
    color: var(--purple);
    font-size: 1rem;
}

.service-modal-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* BuildSign Responsive Styles */
@media (max-width: 768px) {
    .buildsign-content-intro {
        margin-top: 84px;
        margin-bottom: 18px;
    }
    
    .buildsign-hero {
        padding-top: 0;
        padding-bottom: 48px;
    }
    
    .buildsign-hero-title {
        font-size: 1.875rem;
    }
    
    .buildsign-hero-subtitle {
        font-size: 1rem;
    }
    
    .buildsign-hero-ctas {
        flex-direction: column;
    }
    
    .btn-buildsign-primary,
    .btn-buildsign-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .buildsign-cta-card {
        padding: 40px 24px;
    }
    
    .buildsign-cta-buttons {
        flex-direction: column;
    }
    
    .buildsign-cta-buttons .btn-primary-gradient,
    .buildsign-cta-buttons .btn-outline {
        width: 100%;
    }
    
    .buildsign-modal-content {
        padding: 32px 24px;
    }
    
    .service-modal-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .service-modal-actions {
        flex-direction: column;
    }
    
    .service-modal-actions .btn-primary-gradient,
    .service-modal-actions .btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== UI POLISH & PREMIUM ENHANCEMENTS ==================== */

/* Scroll Reveal Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.reveal.revealed {
    animation: fadeInUp 0.8s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        animation: none;
    }
}

/* Enhanced Card Styles */
.card-premium {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--border-purple);
}

@media (max-width: 768px) {
    .card-premium:hover {
        transform: none;
    }
}

/* Enhanced Hover States */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
}

@media (max-width: 768px) {
    .hover-lift:hover {
        transform: none;
    }
}

/* Typography Scale Enhancements */
h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.4;
    font-weight: 600;
}

/* Text Selection */
::selection {
    background: rgba(124, 58, 237, 0.3);
    color: white;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.7);
}

/* Focus Visible for Accessibility */
*:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Modal Animation */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Chip/Badge System */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.2s ease;
}

.chip:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
}

/* ==================== Mood Picker Feature ==================== */

/* Mood Picker Section */
.mood-picker-section {
    margin-bottom: 2rem;
    text-align: center;
}

/* Toggle Button */
.mood-toggle-btn {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    font-family: inherit;
}

.mood-toggle-btn:hover {
    text-decoration-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.mood-arrow {
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    font-size: 0.75rem;
}

.mood-toggle-btn.active .mood-arrow {
    transform: rotate(180deg);
}

/* Mood Panel */
.mood-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}

.mood-panel.active {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 1.5rem;
}

/* Mood Buttons Container */
.mood-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

/* Individual Mood Buttons */
.mood-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    border: 2px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.mood-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mood-btn:active {
    transform: translateY(-1px);
}

/* Mood Button Colors */
.mood-happy {
    background: linear-gradient(135deg, #FFC837 0%, #FF8008 100%);
    color: #1a1a1a;
}

.mood-happy:hover {
    box-shadow: 0 8px 25px rgba(255, 200, 55, 0.5);
}

.mood-chill {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.mood-chill:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.mood-love {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #ffffff;
}

.mood-love:hover {
    box-shadow: 0 8px 25px rgba(245, 87, 108, 0.5);
}

.mood-sad {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #1a1a1a;
}

.mood-sad:hover {
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.5);
}

.mood-angry {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #1a1a1a;
}

.mood-angry:hover {
    box-shadow: 0 8px 25px rgba(250, 112, 154, 0.5);
}

/* Particles Container */
.mood-particles-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Individual Particle */
.mood-particle {
    position: absolute;
    font-size: 2rem;
    pointer-events: none;
    animation: float-up 2s ease-out forwards;
    z-index: 10000;
}

@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-300px) translateX(var(--drift-x, 0px)) rotate(360deg);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .mood-buttons {
        gap: 0.5rem;
    }
    
    .mood-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .mood-toggle-btn {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .mood-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
    }
    
    .mood-particle {
        font-size: 1.5rem;
    }
}

/* ==================== Mood Pages Styling ==================== */

/* Mood Page Variables (overridden per page) */
:root {
    --mood-bg1: #0f0f23;
    --mood-bg2: #1a1a2e;
    --mood-accent: #7c3aed;
    --mood-card: rgba(255, 255, 255, 0.08);
    --mood-text: rgba(255, 255, 255, 0.9);
}

/* Mood Page Base */
.mood-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--mood-bg1) 0%, var(--mood-bg2) 100%);
    position: relative;
    overflow-x: hidden;
}

.mood-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, var(--mood-accent) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--mood-accent) 0%, transparent 50%);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* Container */
.mood-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* Hero Section */
.mood-hero {
    text-align: center;
    padding: 4rem 0 3rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s;
}

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

.mood-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--mood-card);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
    color: var(--mood-text);
}

.mood-badge-emoji {
    font-size: 1.25rem;
}

.mood-title {
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.mood-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.mood-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.btn-mood {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-primary-mood {
    background: linear-gradient(135deg, var(--mood-accent) 0%, rgba(124, 58, 237, 0.8) 100%);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.btn-primary-mood:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

.btn-secondary-mood {
    background: var(--mood-card);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    backdrop-filter: blur(20px);
}

.btn-secondary-mood:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Main Content Grid */
.mood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

/* Card Base */
.mood-card {
    background: var(--mood-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
}

.mood-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.mood-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
}

.mood-card-title i {
    font-size: 1.5rem;
    color: var(--mood-accent);
}

/* Mood Notes */
.mood-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mood-note-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border-left: 3px solid var(--mood-accent);
    transition: all 0.3s ease;
}

.mood-note-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.mood-note-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.mood-note-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

/* Video Card */
.mood-video-card {
    position: relative;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
}

/* Mood Theme Color Overrides */
.mood-happy {
    --mood-bg1: #1a0f0a;
    --mood-bg2: #2d1810;
    --mood-accent: #ff9a00;
}

.mood-chill {
    --mood-bg1: #0f0f23;
    --mood-bg2: #1a1a3e;
    --mood-accent: #667eea;
}

.mood-love {
    --mood-bg1: #1f0818;
    --mood-bg2: #2d1220;
    --mood-accent: #f5576c;
}

.mood-sad {
    --mood-bg1: #0a1420;
    --mood-bg2: #0f1f30;
    --mood-accent: #4facfe;
}

.mood-angry {
    --mood-bg1: #200a10;
    --mood-bg2: #301018;
    --mood-accent: #fa709a;
}

/* Responsive Design */
@media (max-width: 968px) {
    .mood-grid {
        grid-template-columns: 1fr;
    }
    
    .mood-card {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .mood-hero {
        padding: 3rem 0 2rem;
    }
    
    .mood-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    
    .mood-card {
        padding: 1.75rem;
    }
    
    .mood-card-title {
        font-size: 1.5rem;
    }
    
    .mood-note-text {
        font-size: 0.95rem;
    }
    
    .btn-mood {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .mood-container {
        padding: 1.5rem 1rem;
    }
    
    .mood-hero {
        padding: 2rem 0 1.5rem;
    }
    
    .mood-card {
        padding: 1.5rem;
    }
    
    .mood-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-mood {
        width: 100%;
        justify-content: center;
    }
    
    .mood-note-item {
        padding: 0.875rem 1rem;
    }
}