/* =========================================
   MODERN 20 MICRONS WEBSITE STYLES
   Color Theme: #7FA69B (Sage Green)
   Light/White Mode Design
   ========================================= */

/* ===== ROOT VARIABLES ===== */
:root {
    /* Premium Color Palette - White & Sage Green */
    --color-white: #ffffff;
    --color-sage: #7FA69B;
    --color-sage-dark: #6B9186;
    --color-sage-light: #99BFB3;
    --color-sage-ultra-light: #B8D4CB;
    --color-sage-glass: rgba(127, 166, 155, 0.1);
    --color-sage-border: rgba(127, 166, 155, 0.2);
    
    /* Legacy/Alias Variables */
    --primary-color: #7FA69B;
    --primary-light: #99BFB3;
    --primary-dark: #6B9186;
    --accent-color: #B8D4CB;
    --background: #FFFFFF;
    --surface: #F8FAF9;
    --surface-light: #FAFCFB;
    --text-primary: #2C3E3A;
    --text-secondary: #5C6E6A;
    --text-light: #8A9C98;
    --border-color: rgba(127, 166, 155, 0.15);
    
    /* Spacing System (8px base unit) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;
    --space-16: 128px;
    --container-max-width: 1280px;
    
    /* Premium Shadows with Sage Green */
    --shadow-sm: 0 2px 8px rgba(127, 166, 155, 0.08);
    --shadow-md: 0 4px 16px rgba(127, 166, 155, 0.12);
    --shadow-lg: 0 8px 32px rgba(127, 166, 155, 0.16);
    --shadow-xl: 0 16px 48px rgba(127, 166, 155, 0.2);
    --shadow-glow: 0 0 20px rgba(127, 166, 155, 0.3);
    
    /* Modern Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elastic: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Blur Effects for Glassmorphism */
    --blur-sm: blur(8px);
    --blur-md: blur(12px);
    --blur-lg: blur(20px);
    
    /* Typography */
    --font-primary: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--background);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* Enhanced Typography for Professional Look */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

p {
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 300;
}

strong, b {
    font-weight: 300;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

ul {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ===== COUNTER ANIMATIONS ===== */
.count {
    display: inline-block !important;
    font-weight: 300 !important;
    font-size: inherit;
    color: #7fa69b !important;
    font-family: inherit;
    letter-spacing: inherit;
    transition: transform 0.3s ease;
    visibility: visible !important;
    opacity: 1 !important;
}

.count.counted {
    animation: countPulse 0.4s ease-out;
}

@keyframes countPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Ensure counters align properly with + symbols */
.stat-number .count,
.stat-value .count,
.metric-value .count {
    display: inline !important;
    color: #7fa69b !important;
    font-weight: 300 !important;
}

/* ===== PAGE LOADER ===== */
/* ===== CONTAINER ===== */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===== NAVIGATION ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-sage-border);
    z-index: 1000;
    transition: var(--transition-base);
    box-shadow: 0 2px 8px rgba(127, 166, 155, 0.05);
}

.navbar.scrolled {
    padding: 0.85rem 0;
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.95);
}

.navbar.scrolled ~ * .mega-menu {
    top: calc(70px + 1.5rem);
}

.nav-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 300;
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
}

.nav-logo .logo-image {
    height: 45px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: var(--transition-base);
}

.nav-logo:hover .logo-image {
    transform: scale(1.02);
}

.logo-number {
    color: var(--primary-color);
}

.logo-text {
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.logo-text2 {
    color: #ffffff;
    letter-spacing: 0.05em;
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.nav-link {
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: var(--transition-base);
    position: relative;
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
    background: var(--color-sage);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-sage);
    background: var(--color-sage-glass);
}

.nav-actions {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
}

.btn-nav {
    padding: 0.75rem 1.75rem;
    background: var(--color-sage);
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.btn-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-sage-dark);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    z-index: 0;
}

.btn-nav:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-nav:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.4), var(--shadow-glow);
    color: white;
}

.btn-nav:active {
    transform: translateY(0) scale(0.98);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--text-primary);
    transition: var(--transition-base);
    border-radius: 2px;
}

/* ===== MEGA MENU STYLES ===== */
.nav-item-mega {
    position: relative;
    display: flex;
    align-items: center;
    list-style: none;
}

.nav-item-mega .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-item-mega .nav-link i {
    font-size: 0.7rem;
    transition: var(--transition-base);
}

.nav-item-mega:hover .nav-link i {
    transform: rotate(180deg);
}

/* ================================================================
   MEGA MENU - ULTRA CREATIVE PREMIUM DESIGN
   World-Class Glassmorphic Design with 3D Effects
   ================================================================ */
.mega-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,249,0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 24px 24px;
    box-shadow: 
        0 25px 80px rgba(127, 166, 155, 0.18),
        0 10px 40px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(127, 166, 155, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(-20px) scale(0.98);
    z-index: 9999;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #7FA69B 0%, #5C6E6A 50%, #7FA69B 100%) 1;
    overflow: hidden;
}

/* Animated Background Pattern */
.mega-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(127, 166, 155, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(92, 110, 106, 0.04) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237FA69B' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Floating Glow Effect */
.mega-menu::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(127, 166, 155, 0.08) 0%, transparent 60%);
    animation: megaGlowFloat 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes megaGlowFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(5%, 3%) rotate(2deg); }
    66% { transform: translate(-3%, -2%) rotate(-1deg); }
}

.nav-item-mega:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

.mega-menu-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 2.5rem 2.5rem;
    z-index: 1;
}

.mega-menu-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 340px;
    gap: 2rem;
    align-items: start;
}

/* ===== MEGA MENU SECTIONS - CREATIVE CARDS ===== */
.mega-menu-section {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,250,249,0.8) 100%);
    border-radius: 16px;
    border: 1px solid rgba(127, 166, 155, 0.12);
    box-shadow: 
        0 4px 20px rgba(127, 166, 155, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

.mega-menu-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7FA69B, #5C6E6A, #7FA69B);
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.mega-menu-section:hover::before {
    transform: scaleX(1);
    animation: gradientShift 3s linear infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.mega-menu-section:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 40px rgba(127, 166, 155, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.04);
    border-color: rgba(127, 166, 155, 0.25);
}

.mega-menu-section:last-of-type {
    border-right: none;
}

/* ===== MEGA MENU TITLE - CREATIVE HEADER ===== */
.mega-menu-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #5C6E6A;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 0.75rem;
}

.mega-menu-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #7FA69B, transparent);
    border-radius: 2px;
}

.mega-menu-title i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7FA69B 0%, #5C6E6A 100%);
    color: white;
    font-size: 0.85rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(127, 166, 155, 0.3);
    transition: all 0.3s ease;
}

.mega-menu-section:hover .mega-menu-title i {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 20px rgba(127, 166, 155, 0.4);
}

/* ===== MEGA MENU LIST - CREATIVE LINKS ===== */
.mega-menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mega-menu-list li {
    margin: 0;
}

.mega-menu-list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    color: #4a5568;
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.mega-menu-list a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1) 0%, rgba(92, 110, 106, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
}

.mega-menu-list a i {
    font-size: 0.5rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 166, 155, 0.1);
    color: #7FA69B;
    border-radius: 50%;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    flex-shrink: 0;
}

.mega-menu-list a:hover {
    color: #5C6E6A;
    transform: translateX(6px);
    padding-left: 1rem;
}

.mega-menu-list a:hover::before {
    opacity: 1;
}

.mega-menu-list a:hover i {
    background: linear-gradient(135deg, #7FA69B, #5C6E6A);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(127, 166, 155, 0.35);
}

/* ===== FEATURED CARD - ULTRA CREATIVE ===== */
.mega-menu-featured {
    position: relative;
    padding: 0;
    border-left: none;
}

.mega-menu-card {
    position: relative;
    background: linear-gradient(145deg, #ffffff 0%, #f8faf9 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(127, 166, 155, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(127, 166, 155, 0.15);
}

.mega-menu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.03) 0%, transparent 50%);
    z-index: 0;
    transition: opacity 0.5s ease;
}

.mega-menu-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.15) 0%, transparent 40%);
    opacity: 0;
    transition: all 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.mega-menu-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(127, 166, 155, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(127, 166, 155, 0.3);
}

.mega-menu-card:hover::after {
    opacity: 1;
    transform: translate(25%, 25%);
}

/* Image Container with Creative Effects */
.mega-menu-card img {
    position: relative;
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

.mega-menu-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.05) saturate(1.1);
}

/* Image Overlay Effect */
.mega-menu-card > a {
    position: relative;
    display: block;
    overflow: hidden;
}

.mega-menu-card > a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(92, 110, 106, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.mega-menu-card:hover > a::after {
    opacity: 1;
}

.mega-menu-card-content {
    position: relative;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
}

.mega-menu-card-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mega-menu-card-content h4::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #7FA69B, #5C6E6A);
    border-radius: 4px;
    flex-shrink: 0;
}

.mega-menu-card:hover .mega-menu-card-content h4 {
    color: #5C6E6A;
}

.mega-menu-card-content p {
    font-size: 0.85rem;
    color: #718096;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* Creative CTA Button */
.mega-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #7FA69B 0%, #5C6E6A 100%);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    margin-top: 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(127, 166, 155, 0.3);
    letter-spacing: 0.03em;
}

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

.mega-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(127, 166, 155, 0.4);
    gap: 0.85rem;
}

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

.mega-menu-btn i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

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

/* Mega Menu Animation */
@keyframes megaMenuSlideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile Responsive Mega Menu - Creative */
@media (max-width: 1200px) {
    .mega-menu {
        width: 100%;
        border-radius: 0 0 20px 20px;
    }
    
    .mega-menu-container {
        padding: 1.75rem 1.5rem;
    }
    
    .mega-menu-content {
        grid-template-columns: repeat(2, 1fr) 280px;
        gap: 1.5rem;
    }
    
    .mega-menu-section {
        padding: 1.25rem;
    }
    
    .mega-menu-section:nth-child(3) {
        grid-column: 1 / 3;
        border-right: none;
    }
    
    .mega-menu-featured {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

@media (max-width: 992px) {
    .mega-menu {
        width: 100%;
        left: 0;
        right: 0;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 0 0 16px 16px;
    }
    
    .nav-item-mega:hover .mega-menu {
        transform: translateY(0) scale(1);
    }
    
    .mega-menu-container {
        padding: 1.5rem;
    }
    
    .mega-menu-content {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .mega-menu-section {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .mega-menu-section:nth-child(3) {
        grid-column: 1;
    }
    
    .mega-menu-featured {
        grid-column: 1;
        grid-row: auto;
    }
    
    .mega-menu-card {
        max-width: 100%;
    }
    
    .mega-menu-card img {
        height: 140px;
    }
}

/* Hide mega menu on mobile when hamburger is active */
@media (max-width: 768px) {
    .nav-item-mega .mega-menu {
        display: none;
    }
    
    .nav-item-mega .nav-link i {
        display: none;
    }
}

/* ===== HERO SECTION - PROFESSIONAL CENTERED DESIGN ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0f0d;
    overflow: hidden;
    perspective: 1000px;
}

/* Background Video Layer */
.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: #0a0f0d;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
    opacity: 0.75;
    pointer-events: none;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(10, 15, 13, 0.3) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Canvas Background */
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Animated Grid Background - Disabled for performance */
.hero-grid {
    display: none;
}

.hero-grid .grid-line {
    position: absolute;
    background: rgba(127, 166, 155, 0.06);
}

.hero-grid .grid-line.horizontal {
    width: 100%;
    height: 1px;
}

.hero-grid .grid-line.horizontal:nth-child(1) { top: 25%; }
.hero-grid .grid-line.horizontal:nth-child(2) { top: 50%; }
.hero-grid .grid-line.horizontal:nth-child(3) { top: 75%; }

.hero-grid .grid-line.vertical {
    width: 1px;
    height: 100%;
}

.hero-grid .grid-line.vertical:nth-child(4) { left: 25%; }
.hero-grid .grid-line.vertical:nth-child(5) { left: 50%; }
.hero-grid .grid-line.vertical:nth-child(6) { left: 75%; }

/* Ambient Glow Effects */
.hero-ambient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
    will-change: transform;
}

.glow-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.25) 0%, rgba(127, 166, 155, 0.1) 40%, transparent 70%);
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    animation: glowPulse 8s ease-in-out infinite;
}

.glow-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(90, 140, 127, 0.4) 0%, transparent 70%);
    bottom: -10%;
    left: 10%;
    animation: glowPulse 10s ease-in-out infinite 2s;
}

.glow-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.35) 0%, transparent 70%);
    bottom: 20%;
    right: 5%;
    animation: glowPulse 12s ease-in-out infinite 4s;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.3; }
}

.glow-2, .glow-3 {
    animation-name: glowPulse2;
}

@keyframes glowPulse2 {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.15); }
}

/* Hero Container - Centered */
.hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 0 2rem;
    text-align: center;
}

.hero-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    gap: 0;
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    background: rgba(127, 166, 155, 0.15);
    border: 1px solid rgba(127, 166, 155, 0.4);
    border-radius: 100px;
    margin-bottom: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(127, 166, 155, 0.8);
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.badge-text {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.03em;
    position: relative;
    z-index: 2;
}

.hero-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, 
        rgba(127, 166, 155, 0.5), 
        rgba(184, 212, 203, 0.3), 
        rgba(127, 166, 155, 0.5));
    border-radius: 100px;
    z-index: -1;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.5s ease;
    animation: borderGlow 3s ease-in-out infinite;
}

.hero-badge:hover::before {
    opacity: 1;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Title - 2 Lines Layout */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5), 0 4px 60px rgba(0, 0, 0, 0.3);
}

.title-line {
    display: block;
}

.title-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    animation: titleWordReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    margin: 0 0.15em;
    position: relative;
    cursor: default;
    transition: all 0.3s ease;
}

.title-word:hover {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.3));
}

.title-word[data-delay="0"] { animation-delay: 0.4s; }
.title-word[data-delay="1"] { animation-delay: 0.55s; }
.title-word[data-delay="2"] { animation-delay: 0.7s; }

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

.title-word.accent {
    color: var(--primary-color);
    background: linear-gradient(135deg, #7FA69B 0%, #B8D4CB 50%, #7FA69B 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleWordReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.7s, 
               gradientFlow 4s ease-in-out infinite 1.7s;
    filter: drop-shadow(0 2px 20px rgba(127, 166, 155, 0.8)) drop-shadow(0 0 60px rgba(127, 166, 155, 0.4));
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

/* Subtitle with Lines */
.hero-subtitle {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 0.8s ease forwards 0.9s;
}

.hero-subtitle p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 4px 40px rgba(0, 0, 0, 0.4);
    font-weight: 400;
}

.subtitle-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.subtitle-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

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

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

/* CTA Buttons */
.hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 35px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 0.8s ease forwards;
    cursor: pointer;
    will-change: transform, box-shadow;
}

.cta-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-btn:active::after {
    width: 300px;
    height: 300px;
}

.cta-btn:nth-child(1) { animation-delay: 1s; }
.cta-btn:nth-child(2) { animation-delay: 1.15s; }

.cta-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-btn:active::after {
    width: 300px;
    height: 300px;
}

.cta-btn.primary {
    background: var(--color-sage);
    color: #fff;
    box-shadow: 0 4px 30px rgba(127, 166, 155, 0.4);
    border: none;
}

.cta-btn.primary .btn-bg {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

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

.cta-btn.primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 40px rgba(127, 166, 155, 0.6), var(--shadow-glow);
    background: var(--color-sage-dark);
}

.cta-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cta-btn.secondary .btn-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: rgba(127, 166, 155, 0.25);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
    pointer-events: none;
}

.cta-btn.secondary:hover .btn-border {
    transform: scaleX(1);
}

.cta-btn.secondary:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    background: rgba(127, 166, 155, 0.15);
    box-shadow: 0 8px 32px rgba(127, 166, 155, 0.3);
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.btn-arrow, .btn-circle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.cta-btn:hover .btn-arrow {
    transform: translateX(5px);
}

.cta-btn:hover .btn-circle {
    transform: scale(1.1);
}

.btn-arrow svg, .btn-circle svg {
    width: 100%;
    height: 100%;
}

/* Hero Stats Section */
.hero-stats {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideUp 0.8s ease forwards 1.3s;
}

.hero-stats .stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px;
    background: rgba(8, 18, 28, 0.72) !important;
    border: 1px solid rgba(127, 166, 155, 0.42) !important;
    border-radius: 16px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.50),
        0 1px 0 rgba(127, 166, 155, 0.18) inset,
        0 0 0 0.5px rgba(255, 255, 255, 0.06) inset !important;
    position: relative;
    overflow: hidden;
}
.hero-stats .stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127,166,155,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.hero-stats .stat-card:hover {
    background: rgba(10, 24, 38, 0.85) !important;
    border-color: rgba(127, 166, 155, 0.70) !important;
    transform: translateY(-5px) scale(1.03);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.55),
        0 0 38px rgba(127, 166, 155, 0.22),
        0 1px 0 rgba(127, 166, 155, 0.25) inset !important;
}

.hero-stats .stat-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 166, 155, 0.18) !important;
    border: 1px solid rgba(127, 166, 155, 0.30);
    border-radius: 11px !important;
    color: #a8cdc5;
    flex-shrink: 0;
}

.hero-stats .stat-icon svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 6px rgba(127,166,155,0.5));
}

.hero-stats .stat-info {
    text-align: left;
}

.hero-stats .stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    text-shadow: 0 0 20px rgba(127,166,155,0.6), 0 2px 8px rgba(0,0,0,0.4);
}

.hero-stats .stat-value .count {
    color: #ffffff !important;
    font-weight: 700;
}

.hero-stats .stat-suffix {
    font-size: 1.15rem;
    color: #a8cdc5;
    margin-left: 2px;
    font-weight: 600;
}

.hero-stats .stat-title {
    font-size: 0.68rem;
    color: rgba(168, 205, 197, 0.90);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    text-shadow: none;
}

.hero-stats .stat-divider {
    width: 1px;
    height: 45px;
    background: linear-gradient(to bottom, transparent, rgba(127, 166, 155, 0.4), transparent);
    margin: 0 6px;
}

/* Floating Visual Elements */
.hero-visuals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.floating-hex {
    position: absolute;
    color: rgba(127, 166, 155, 0.2);
    opacity: 0;
    animation: hexFloat 1s ease forwards;
    filter: drop-shadow(0 0 20px rgba(127, 166, 155, 0.4));
}

.floating-hex svg {
    width: 100%;
    height: 100%;
    stroke-width: 0.5;
}

.floating-hex.hex-1 {
    width: 200px;
    height: 200px;
    top: 15%;
    right: 10%;
    animation-delay: 0.5s;
    animation: hexFloat 1s ease forwards 0.5s, hexSpin 35s linear infinite 1.5s;
}

.floating-hex.hex-2 {
    width: 120px;
    height: 120px;
    bottom: 20%;
    left: 8%;
    color: rgba(127, 166, 155, 0.15);
    animation-delay: 0.8s;
    animation: hexFloat 1s ease forwards 0.8s, hexSpinReverse 40s linear infinite 1.8s;
}

@keyframes hexFloat {
    from { opacity: 0; transform: scale(0.5) rotate(-30deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hexSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hexSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0;
    animation: circleFloat 1s ease forwards;
    box-shadow: 0 0 30px rgba(127, 166, 155, 0.8), 
                0 0 60px rgba(127, 166, 155, 0.4),
                inset 0 0 20px rgba(255, 255, 255, 0.5);
}

.floating-circle.circle-1 {
    width: 12px;
    height: 12px;
    top: 25%;
    left: 15%;
    box-shadow: 0 0 20px rgba(127, 166, 155, 0.6);
    animation: circleFloat 1s ease forwards 0.6s, circleMove 8s ease-in-out infinite 1.6s;
}

.floating-circle.circle-2 {
    width: 8px;
    height: 8px;
    bottom: 30%;
    right: 20%;
    background: rgba(127, 166, 155, 0.7);
    animation: circleFloat 1s ease forwards 0.9s, circleMove 10s ease-in-out infinite reverse 1.9s;
}

.floating-circle.circle-3 {
    width: 6px;
    height: 6px;
    top: 60%;
    left: 25%;
    background: rgba(127, 166, 155, 0.5);
    animation: circleFloat 1s ease forwards 1.1s, circleMove 7s ease-in-out infinite 2.1s;
}

@keyframes circleFloat {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes circleMove {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -20px); }
    50% { transform: translate(-10px, -10px); }
    75% { transform: translate(20px, 15px); }
}

/* Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 20;
    opacity: 0;
    animation: fadeSlideUp 0.8s ease forwards 1.6s;
}

.scroll-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(127, 166, 155, 0.4);
    border-radius: 13px;
    position: relative;
    transition: border-color 0.3s ease;
}

.scroll-mouse:hover {
    border-color: var(--primary-color);
}

.scroll-wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 2px;
    animation: scrollWheel 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(127, 166, 155, 0.5);
}

@keyframes scrollWheel {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(14px); opacity: 0.3; }
}

.scroll-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Corner Accents */
.hero-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    animation: cornerReveal 1s ease forwards 1.8s;
}

@keyframes cornerReveal {
    to { opacity: 1; }
}

.hero-corner.top-left {
    top: 30px;
    left: 30px;
    border-left: 2px solid rgba(127, 166, 155, 0.2);
    border-top: 2px solid rgba(127, 166, 155, 0.2);
}

.hero-corner.top-right {
    top: 30px;
    right: 30px;
    border-right: 2px solid rgba(127, 166, 155, 0.15);
    border-top: 2px solid rgba(127, 166, 155, 0.15);
}

.hero-corner.bottom-left {
    bottom: 30px;
    left: 30px;
    border-left: 2px solid rgba(127, 166, 155, 0.15);
    border-bottom: 2px solid rgba(127, 166, 155, 0.15);
}

.hero-corner.bottom-right {
    bottom: 30px;
    right: 30px;
    border-right: 2px solid rgba(127, 166, 155, 0.2);
    border-bottom: 2px solid rgba(127, 166, 155, 0.2);
}

/* ===== CREATIVE ANIMATED FRAME ===== */
.hero-creative-frame {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    pointer-events: none;
    z-index: 15;
}

.frame-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(127, 166, 155, 0.6), transparent);
    animation: frameGlow 3s ease-in-out infinite;
}

.frame-line.frame-top {
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    animation-delay: 0s;
}

.frame-line.frame-right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.6), transparent);
    animation-delay: 0.75s;
}

.frame-line.frame-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    animation-delay: 1.5s;
}

.frame-line.frame-left {
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.6), transparent);
    animation-delay: 2.25s;
}

@keyframes frameGlow {
    0%, 100% { opacity: 0.3; filter: blur(1px); }
    50% { opacity: 1; filter: blur(0); }
}

/* ===== HOLOGRAPHIC ORBS ===== */
.holographic-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.holo-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(184, 212, 203, 0.3), 
        rgba(127, 166, 155, 0.2), 
        transparent 60%);
    filter: blur(30px);
    mix-blend-mode: screen;
    animation: holoFloat 20s ease-in-out infinite;
    will-change: transform;
}

.holo-orb.orb-1 {
    width: 500px;
    height: 500px;
    top: -10%;
    right: -5%;
    animation-duration: 18s;
    animation-delay: 0s;
}

.holo-orb.orb-2 {
    width: 400px;
    height: 400px;
    bottom: -5%;
    left: -5%;
    animation-duration: 22s;
    animation-delay: 5s;
}

.holo-orb.orb-3 {
    width: 350px;
    height: 350px;
    top: 40%;
    left: 50%;
    animation-duration: 25s;
    animation-delay: 10s;
}

.holo-orb.orb-4 {
    width: 300px;
    height: 300px;
    top: 20%;
    left: 20%;
    animation-duration: 20s;
    animation-delay: 15s;
}

@keyframes holoFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% { 
        transform: translate(100px, -80px) scale(1.1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50px, 100px) scale(0.9);
        opacity: 0.5;
    }
    75% { 
        transform: translate(80px, 50px) scale(1.05);
        opacity: 0.7;
    }
}

/* ===== ENERGY RINGS ===== */
.energy-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 8;
}

.energy-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite;
}

.energy-ring.ring-1 {
    width: 300px;
    height: 300px;
    animation-delay: 0s;
    box-shadow: 0 0 40px rgba(127, 166, 155, 0.3), inset 0 0 40px rgba(127, 166, 155, 0.2);
}

.energy-ring.ring-2 {
    width: 500px;
    height: 500px;
    animation-delay: 1.3s;
    box-shadow: 0 0 30px rgba(127, 166, 155, 0.25), inset 0 0 30px rgba(127, 166, 155, 0.15);
}

.energy-ring.ring-3 {
    width: 700px;
    height: 700px;
    animation-delay: 2.6s;
    box-shadow: 0 0 20px rgba(127, 166, 155, 0.2), inset 0 0 20px rgba(127, 166, 155, 0.1);
}

@keyframes ringPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-width: 1px;
    }
    10% {
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.3;
        border-width: 2px;
    }
    90% {
        opacity: 0.1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-title {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }
    
    .stat-card {
        padding: 16px 24px;
    }
    
    .floating-hex.hex-1 {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 992px) {
    .hero-content-center {
        padding-top: 100px;
    }
    
    .hero-subtitle {
        flex-direction: column;
        gap: 15px;
    }
    
    .subtitle-line {
        width: 80px;
    }
    
    .stat-divider {
        display: none;
    }
    
    .hero-stats {
        gap: 15px;
    }
    
    .floating-hex {
        display: none;
    }
    
    .hero-corner {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 100vh;
    }
    
    .hero-container {
        padding: 0 1.5rem;
    }
    
    .hero-content-center {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
    .hero-badge {
        padding: 12px 20px;
        gap: 10px;
    }
    
    .badge-text {
        font-size: 0.8rem;
    }
    
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        margin-bottom: 24px;
    }
    
    .title-word {
        margin: 0 0.1em;
    }
    
    .hero-subtitle p {
        font-size: 1rem;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        gap: 15px;
    }
    
    .cta-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 28px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 12px;
    }
    
    .stat-card {
        width: 100%;
        max-width: 280px;
        justify-content: flex-start;
    }
    
    .hero-corner {
        width: 40px;
        height: 40px;
    }
    
    .hero-corner.top-left,
    .hero-corner.top-right {
        top: 20px;
    }
    
    .hero-corner.bottom-left,
    .hero-corner.bottom-right {
        bottom: 20px;
    }
    
    .hero-corner.top-left,
    .hero-corner.bottom-left {
        left: 15px;
    }
    
    .hero-corner.top-right,
    .hero-corner.bottom-right {
        right: 15px;
    }
    
    .floating-circle {
        display: none;
    }
}

/* ===== SECTION STYLES ===== */
section {
    padding: 7rem 0;
    position: relative;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 6rem;
    position: relative;
}

.section-header::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.6s ease 0.3s, width 0.6s ease 0.3s;
}

.section-header.aos-animate::before {
    opacity: 1;
    width: 100px;
}

.section-badge {
    display: inline-block;
    padding: 0.65rem 1.75rem;
    background: rgba(127, 166, 155, 0.06);
    border: 1.5px solid rgba(127, 166, 155, 0.15);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--primary-color);
    margin-bottom: 1.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.4s ease;
    animation: badgePulse 3s ease-in-out infinite;
    font-family: var(--font-primary);
}

.section-badge:hover {
    background: rgba(127, 166, 155, 0.1);
    border-color: rgba(127, 166, 155, 0.25);
    transform: translateY(-2px);
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(127, 166, 155, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(127, 166, 155, 0.15);
    }
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
    letter-spacing: 0.02em;
}

.section-title .highlight {
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    padding-bottom: 0.25rem;
    font-weight: 300;
}

.section-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    border-radius: 2px;
    transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
    box-shadow: 0 2px 8px rgba(127, 166, 155, 0.3);
}

.section-header.aos-animate .section-title .highlight::after {
    width: 100%;
    animation: underlineShimmer 2.5s ease-in-out infinite 1.3s;
}

@keyframes underlineShimmer {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(127, 166, 155, 0.3);
    }
    50% {
        box-shadow: 0 2px 12px rgba(127, 166, 155, 0.5);
    }
}

.section-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 300;
    max-width: 720px;
    margin: 0 auto;
    opacity: 0.92;
    letter-spacing: 0.01em;
}

/* ===== UNIFIED SECTION HEADER - CREATIVE DESIGN ===== */
/* Matches Upcoming Events, Global Presence, Contact section headers */

.section-header-creative {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.header-icon-creative {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

.icon-sphere-creative {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-sage, #7FA69B) 0%, #5d8a7d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(127,166,155,0.3),
        inset 0 -4px 12px rgba(0,0,0,0.1);
    animation: iconSphereFloat 4s ease-in-out infinite;
}

.icon-sphere-creative i {
    font-size: 1.4rem;
    color: white;
}

.icon-highlight {
    position: absolute;
    top: 10px;
    left: 14px;
    width: 12px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
}

.icon-orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-sage, #7FA69B);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 8px rgba(127,166,155,0.5);
    animation: iconOrbitDot 4s linear infinite;
}

@keyframes iconSphereFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes iconOrbitDot {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(38px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(38px) rotate(-360deg); }
}

/* Icon variants */
.icon-sphere-creative.company-icon {
    border-radius: 50%;
}

.icon-sphere-creative.products-icon {
    border-radius: 50%;
}

.icon-sphere-creative.industries-icon {
    border-radius: 50%;
}

.icon-sphere-creative.innovation-icon {
    border-radius: 50%;
}

.icon-sphere-creative.innovation-icon i {
    color: #ffffff;
}

.header-badge-creative {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(127,166,155,0.08);
    border: 1px solid rgba(127,166,155,0.15);
    border-radius: 50px;
    margin-bottom: 16px;
}

.badge-dot-creative {
    width: 6px;
    height: 6px;
    background: var(--color-sage, #7FA69B);
    border-radius: 50%;
    animation: badgeDotPulse 2s ease-in-out infinite;
}

.badge-text-creative {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-sage, #7FA69B);
    text-transform: uppercase;
}

@keyframes badgeDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.section-title-creative {
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--color-charcoal, #2c3e50);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.title-highlight-creative {
    font-weight: 600;
    color: var(--color-sage, #7FA69B);
    position: relative;
}

.title-highlight-creative::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sage, #7FA69B), rgba(127,166,155,0.3));
    border-radius: 2px;
}

.section-subtitle-creative {
    font-size: 1rem;
    color: #666;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Industries header specific styles */
.section-header-creative.industries-header {
    margin-bottom: 30px;
}

.section-header-creative.industries-header .section-title-creative {
    font-size: 2.4rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .section-title-creative {
        font-size: 2.4rem;
    }
    
    .section-header-creative.industries-header .section-title-creative {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .section-header-creative {
        margin-bottom: 30px;
    }
    
    .section-title-creative {
        font-size: 2rem;
    }
    
    .section-header-creative.industries-header .section-title-creative {
        font-size: 1.75rem;
    }
    
    .header-icon-creative {
        width: 50px;
        height: 50px;
        margin-bottom: 16px;
    }
    
    .icon-sphere-creative {
        width: 50px;
        height: 50px;
    }
    
    .icon-sphere-creative i {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .section-title-creative {
        font-size: 1.75rem;
    }
    
    .section-header-creative.industries-header .section-title-creative {
        font-size: 1.5rem;
    }
    
    .header-badge-creative {
        padding: 8px 18px;
        gap: 10px;
    }
    
    .badge-text-creative {
        font-size: 0.7rem;
        letter-spacing: 1.2px;
    }
    
    .section-subtitle-creative {
        font-size: 0.9rem;
    }
}

/* ===== ABOUT SECTION ===== */
/* ===== ABOUT SECTION - ULTRA CREATIVE PREMIUM REDESIGN ===== */
.about-section {
    background: linear-gradient(180deg, #f8faf9 0%, #ffffff 40%, #ffffff 60%, #f5f8f7 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 0 5rem;
}

/* ===== CINEMATIC BACKGROUND EFFECTS ===== */
.about-cinematic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Morphing Gradient Blobs */
.morph-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    mix-blend-mode: multiply;
}

.morph-blob.blob-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.35) 0%, transparent 70%);
    top: -100px;
    right: 10%;
    animation: morphFloat 18s ease-in-out infinite;
}

.morph-blob.blob-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(90, 140, 127, 0.3) 0%, transparent 70%);
    bottom: 5%;
    left: -50px;
    animation: morphFloat 22s ease-in-out infinite reverse;
}

.morph-blob.blob-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.25) 0%, transparent 70%);
    top: 40%;
    right: -50px;
    animation: morphFloat 15s ease-in-out infinite 2s;
}

@keyframes morphFloat {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%; }
    25% { transform: translate(20px, -20px) scale(1.05) rotate(5deg); border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
    50% { transform: translate(-10px, 20px) scale(0.95) rotate(-3deg); border-radius: 50% 60% 50% 40% / 30% 60% 40% 70%; }
    75% { transform: translate(15px, 10px) scale(1.02) rotate(2deg); border-radius: 70% 30% 60% 40% / 50% 60% 30% 60%; }
}

/* Geometric Grid */
.about-geo-grid {
    position: absolute;
    inset: 0;
    opacity: 0.6;
}

.about-geo-grid .geo-pattern {
    width: 100%;
    height: 100%;
}

/* Crystal Shapes */
.crystal-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.crystal {
    position: absolute;
    opacity: 0.6;
}

.crystal svg {
    width: 100%;
    height: 100%;
}

.crystal-1 {
    width: 180px;
    height: 180px;
    top: 8%;
    left: 5%;
    animation: crystalFloat 20s ease-in-out infinite;
}

.crystal-2 {
    width: 120px;
    height: 120px;
    bottom: 15%;
    right: 8%;
    animation: crystalFloat 16s ease-in-out infinite reverse;
}

.crystal-3 {
    width: 100px;
    height: 100px;
    top: 50%;
    right: 15%;
    animation: crystalFloat 14s ease-in-out infinite 1s;
}

@keyframes crystalFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
}

/* Glowing Lines */
.glow-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.glow-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(127, 166, 155, 0.15), transparent);
}

.glow-line.line-h-1 {
    width: 100%;
    height: 1px;
    top: 25%;
    animation: lineGlow 8s ease-in-out infinite;
}

.glow-line.line-h-2 {
    width: 100%;
    height: 1px;
    bottom: 30%;
    animation: lineGlow 8s ease-in-out infinite 2s;
}

.glow-line.line-v-1 {
    width: 1px;
    height: 100%;
    left: 20%;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.1), transparent);
    animation: lineGlow 10s ease-in-out infinite 1s;
}

.glow-line.line-v-2 {
    width: 1px;
    height: 100%;
    right: 25%;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.1), transparent);
    animation: lineGlow 10s ease-in-out infinite 3s;
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ===== CREATIVE HEADER ===== */
.about-header-creative {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* Orbit Badge */
.about-orbit-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 0.6rem 2rem;
}

.orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(127, 166, 155, 0.25);
    border-radius: 50px;
    animation: orbitPulse 3s ease-in-out infinite;
}

.orbit-ring-2 {
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    top: -6px;
    left: -6px;
    border: 1px dashed rgba(127, 166, 155, 0.15);
    animation: orbitSpin 20s linear infinite;
}

.orbit-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(127, 166, 155, 0.6);
    animation: orbitDot 4s linear infinite;
}

.orbit-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
}

@keyframes orbitPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.7; }
}

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes orbitDot {
    0% { transform: translateX(-50%) rotate(0deg) translateY(-20px) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg) translateY(-20px) rotate(-360deg); }
}

/* Split Title */
.about-split-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0 0 1.25rem;
}

.split-line {
    display: block;
}

.split-word {
    display: inline-block;
    position: relative;
    margin: 0 0.15em;
    transition: all 0.3s ease;
}

.split-word:hover {
    transform: translateY(-3px);
}

.split-word::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background: linear-gradient(135deg, var(--primary-color), #5a8c7f);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.split-word:hover::after {
    opacity: 1;
}

.highlight-line {
    margin-top: 0.15em;
}

.split-word.accent {
    color: var(--primary-color);
    font-weight: 500;
}

.split-ampersand {
    display: inline-block;
    font-size: 0.85em;
    color: rgba(127, 166, 155, 0.5);
    margin: 0 0.1em;
    font-weight: 300;
}

/* Tagline */
.about-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.tagline-decorator {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
}

.about-tagline p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ===== MEGA CREATIVE GRID ===== */
.about-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

/* ===== MEGA CARDS BASE ===== */
.mega-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    border: 1px solid rgba(127, 166, 155, 0.12);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mega-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(127, 166, 155, 0.15);
    border-color: rgba(127, 166, 155, 0.25);
}

/* ===== SHOWCASE CARD ===== */
.mega-showcase {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 0;
}

.showcase-visual {
    position: relative;
    height: 55%;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.showcase-img-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.showcase-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mega-showcase:hover .showcase-img-wrap img {
    transform: scale(1.08);
}

.img-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.15) 50%, transparent 75%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.mega-showcase:hover .img-shine {
    transform: translateX(100%);
}

.showcase-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(26, 36, 32, 0.75) 100%);
}

/* Tech Badges */
.tech-badges {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

.tech-badge {
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s ease;
}

.mega-showcase:hover .tech-badge {
    opacity: 1;
    transform: translateX(0);
}

.tech-badge.tb-1 { transition-delay: 0.1s; }
.tech-badge.tb-2 { transition-delay: 0.2s; }
.tech-badge.tb-3 { transition-delay: 0.3s; }

.tech-badge i {
    font-size: 0.65rem;
}

/* Showcase Info */
.showcase-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.showcase-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(127, 166, 155, 0.1);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    width: fit-content;
    margin-bottom: 0.85rem;
}

.showcase-label-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.showcase-label-overlay:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.label-icon {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--primary-color), #5a8c7f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-icon i {
    font-size: 0.55rem;
    color: #fff;
}

.showcase-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.showcase-heading span {
    color: var(--primary-color);
}

.showcase-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem;
    flex: 1;
}

.showcase-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.showcase-cta:hover {
    gap: 1rem;
}

.cta-arrow {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), #5a8c7f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.cta-arrow i {
    font-size: 0.75rem;
    color: #fff;
}

.showcase-cta:hover .cta-arrow {
    transform: translateX(3px);
}

/* Card Corners */
.card-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.card-corner::before,
.card-corner::after {
    content: '';
    position: absolute;
    background: rgba(127, 166, 155, 0.3);
    transition: all 0.3s ease;
}

.cc-tl { top: 0; left: 0; }
.cc-tl::before { width: 2px; height: 20px; top: 0; left: 0; }
.cc-tl::after { width: 20px; height: 2px; top: 0; left: 0; }

.cc-br { bottom: 0; right: 0; }
.cc-br::before { width: 2px; height: 20px; bottom: 0; right: 0; }
.cc-br::after { width: 20px; height: 2px; bottom: 0; right: 0; }

.mega-showcase:hover .card-corner::before,
.mega-showcase:hover .card-corner::after {
    background: var(--primary-color);
}

/* ===== FEATURE CARDS STACK ===== */
.mega-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mega-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    position: relative;
}

.feature-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(127, 166, 155, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mega-feature:hover .feature-glow {
    opacity: 1;
}

/* Feature Icon Box */
.feature-icon-box {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.feature-icon-box .icon-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.15), rgba(127, 166, 155, 0.05));
    border-radius: 14px;
    border: 1px solid rgba(127, 166, 155, 0.2);
    transition: all 0.3s ease;
}

.mega-feature:hover .icon-bg {
    background: linear-gradient(135deg, var(--primary-color), #5a8c7f);
    transform: rotate(5deg);
}

.feature-icon-box svg {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.mega-feature:hover .feature-icon-box svg {
    color: #fff;
}

.icon-ring {
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(127, 166, 155, 0.2);
    border-radius: 18px;
    opacity: 0;
    transition: all 0.4s ease;
}

.mega-feature:hover .icon-ring {
    opacity: 1;
    animation: iconRingSpin 8s linear infinite;
}

@keyframes iconRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Feature Data */
.feature-data {
    flex: 1;
}

.feature-data h4 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 0.15rem;
    line-height: 1;
}

.feature-data p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Feature Tag */
.feature-tag {
    position: absolute;
    top: 0.75rem;
    right: 3rem;
    font-size: 0.65rem;
    color: rgba(127, 166, 155, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.mega-feature:hover .feature-tag {
    opacity: 1;
    transform: translateY(0);
}

/* Feature Link */
.feature-link {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.feature-link:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

/* ===== MEGA STATS BAR ===== */
.mega-stats-bar {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    position: relative;
}

.stats-glow-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(127, 166, 155, 0.05), transparent 70%);
}

.stat-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.stat-icon-wrap {
    position: relative;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1), rgba(127, 166, 155, 0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.stat-icon-wrap i {
    font-size: 1.1rem;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.stat-cell:hover .stat-icon-wrap {
    background: var(--primary-color);
}

.stat-cell:hover .stat-icon-wrap i {
    color: #fff;
}

.stat-pulse {
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(127, 166, 155, 0.3);
    border-radius: 14px;
    opacity: 0;
    animation: statPulse 2s ease-in-out infinite;
}

@keyframes statPulse {
    0%, 100% { transform: scale(1); opacity: 0; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.stat-cell:hover .stat-pulse {
    animation: statPulse 1.5s ease-in-out infinite;
}

.stat-content {
    text-align: left;
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.2rem;
}

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

.stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.2), transparent);
}

/* Stats Border Animation */
.stats-border-anim {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
}

.stats-border-anim::before {
    content: '';
    position: absolute;
    inset: -2px;
    /* background: conic-gradient(from 0deg, transparent, var(--primary-color), transparent 30%); */
    opacity: 0;
    /* animation: borderSpin 4s linear infinite; */
    transition: opacity 0.3s ease;
}

.mega-stats-bar:hover .stats-border-anim::before {
    opacity: 0.5;
}

/* @keyframes borderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
} */

/* ===== CORNER DECORATIONS ===== */
.about-corner-decor {
    position: absolute;
    width: 100px;
    height: 100px;
    pointer-events: none;
    opacity: 0.5;
}

.about-corner-decor svg {
    width: 100%;
    height: 100%;
}

.corner-tl {
    top: 2rem;
    left: 2rem;
}

.corner-br {
    bottom: 2rem;
    right: 2rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .about-section { padding: 5rem 0 4rem; }
    .about-mega-grid { grid-template-columns: 1fr; gap: 1rem; }
    .mega-showcase { grid-row: span 1; min-height: 380px; }
    .mega-stats-bar { grid-column: span 1; flex-wrap: wrap; gap: 1.5rem; justify-content: center; padding: 1.5rem 1rem; }
    .stat-divider { display: none; }
    .stat-cell { flex: 0 0 45%; justify-content: center; }
    .about-split-title { font-size: clamp(1.75rem, 4vw, 2.5rem); }
    .crystal { display: none; }
}

@media (max-width: 768px) {
    .about-section { padding: 4rem 0 3rem; }
    .about-header-creative { margin-bottom: 2rem; }
    .about-tagline { flex-direction: column; gap: 1rem; }
    .tagline-decorator { width: 40px; }
    .mega-showcase { min-height: 340px; }
    .showcase-visual { height: 50%; }
    .showcase-info { padding: 1.25rem; }
    .showcase-heading { font-size: 1.3rem; }
    .mega-feature { padding: 1rem; }
    .feature-icon-box { width: 48px; height: 48px; }
    .feature-data h4 { font-size: 1.4rem; }
    .stat-cell { flex: 0 0 100%; }
    .stat-num { font-size: 1.3rem; }
    .about-corner-decor { display: none; }
    .morph-blob.blob-1 { width: 250px; height: 250px; }
    .morph-blob.blob-2 { width: 200px; height: 200px; }
    .morph-blob.blob-3 { display: none; }
}

@media (max-width: 480px) {
    .about-section { padding: 3rem 0 2.5rem; }
    .about-split-title { font-size: 1.5rem; }
    .about-tagline p { font-size: 0.9rem; }
    .mega-showcase { min-height: 300px; }
    .showcase-heading { font-size: 1.15rem; }
    .showcase-desc { font-size: 0.85rem; }
    .mega-feature { gap: 0.75rem; }
    .feature-icon-box { width: 44px; height: 44px; }
    .feature-data h4 { font-size: 1.25rem; }
    .feature-tag { display: none; }
    .stat-icon-wrap { width: 40px; height: 40px; }
    .stat-icon-wrap i { font-size: 1rem; }
}

/* ===== KEEP OLD CLASSES FOR COMPATIBILITY ===== */

.feature-card {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 166, 155, 0.1);
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
    border-radius: 0 4px 4px 0;
    transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-card:hover {
    transform: translateX(10px);
    box-shadow: 
        0 20px 60px rgba(127, 166, 155, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.05);
    border-color: rgba(127, 166, 155, 0.25);
}

.feature-card:hover::before {
    height: 100%;
}

.feature-hover-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.03) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.feature-card:hover .feature-hover-bg {
    opacity: 1;
}

.feature-icon-wrap {
    position: relative;
    flex-shrink: 0;
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1) 0%, rgba(127, 166, 155, 0.05) 100%);
    border: 1px solid rgba(127, 166, 155, 0.15);
    border-radius: 16px;
    color: var(--primary-color);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-icon svg {
    width: 26px;
    height: 26px;
}

.feature-icon-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.5s ease;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(127, 166, 155, 0.35);
}

.feature-card:hover .feature-icon-glow {
    opacity: 1;
}

.feature-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

.feature-number {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--primary-color);
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.feature-content h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    transition: color 0.3s ease;
}

.feature-card:hover .feature-content h3 {
    color: var(--primary-dark);
}

.feature-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding-bottom: 2px;
}

.feature-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.feature-link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.feature-link:hover {
    gap: 0.75rem;
    color: var(--primary-dark);
}

.feature-link:hover::after {
    width: 100%;
}

.feature-link:hover svg {
    transform: translateX(4px);
}

/* Showcase Card */
.about-showcase {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.showcase-card {
    position: relative;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 30px 80px rgba(127, 166, 155, 0.2),
        0 15px 40px rgba(0, 0, 0, 0.08);
}

.showcase-image {
    position: absolute;
    inset: 0;
}

.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.showcase-card:hover .showcase-image img {
    transform: scale(1.1);
}

.showcase-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(26, 36, 32, 0.85) 0%, 
        rgba(40, 55, 48, 0.75) 50%, 
        rgba(26, 36, 32, 0.9) 100%);
}

/* Floating Elements */
.showcase-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.float-element {
    position: absolute;
    color: rgba(127, 166, 155, 0.25);
}

.float-element svg {
    width: 100%;
    height: 100%;
    stroke-width: 0.5;
}

.float-element.float-1 {
    width: 150px;
    height: 150px;
    top: -30px;
    right: -30px;
    animation: floatRotate 30s linear infinite;
}

.float-element.float-2 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: -20px;
    animation: floatRotate 25s linear infinite reverse;
}

@keyframes floatRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.float-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.5;
    animation: floatDot 8s ease-in-out infinite;
}

.float-dot.dot-1 {
    width: 8px;
    height: 8px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.float-dot.dot-2 {
    width: 6px;
    height: 6px;
    top: 60%;
    right: 20%;
    animation-delay: -2s;
}

.float-dot.dot-3 {
    width: 5px;
    height: 5px;
    bottom: 30%;
    left: 30%;
    animation-delay: -4s;
}

@keyframes floatDot {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    50% { transform: translate(15px, -20px); opacity: 0.8; }
}

/* Showcase Content */
.showcase-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    color: white;
}

.showcase-badge {
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.showcase-title {
    font-size: 1.35rem;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 0.75rem;
}

.showcase-words {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-word {
    position: absolute;
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--primary-color);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    text-shadow: 0 0 30px rgba(127, 166, 155, 0.5);
}

.showcase-word.active {
    opacity: 1;
    transform: translateY(0);
}

/* Showcase Corners */
.showcase-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    z-index: 3;
    transition: all 0.5s ease;
}

.showcase-corner.tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    border-radius: 12px 0 0 0;
}

.showcase-corner.tr {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 12px 0 0;
}

.showcase-corner.bl {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 12px;
}

.showcase-corner.br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 12px 0;
}

.showcase-card:hover .showcase-corner {
    width: 80px;
    height: 80px;
    border-color: rgba(127, 166, 155, 0.4);
}

/* Stats Bar */
.about-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(127, 166, 155, 0.1);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(127, 166, 155, 0.1);
}

.about-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    flex: 1;
    justify-content: center;
}

.stat-icon-small {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1) 0%, rgba(127, 166, 155, 0.05) 100%);
    border-radius: 12px;
    color: var(--primary-color);
}

.stat-icon-small svg {
    width: 22px;
    height: 22px;
}

.stat-data {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-color);
    line-height: 1;
}

.stat-num .count {
    color: var(--primary-color) !important;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.stat-divider-v {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(127, 166, 155, 0.2), transparent);
}

/* ===== SCROLL ANIMATIONS & INTERACTIONS ===== */

/* Scroll Reveal Base */
[data-scroll-reveal] {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-scroll-reveal].revealed {
    opacity: 1;
}

/* Fade Up Animation */
[data-scroll-reveal="fade-up"] {
    transform: translateY(40px);
}

[data-scroll-reveal="fade-up"].revealed {
    transform: translateY(0);
}

/* Slide Left Animation */
[data-scroll-reveal="slide-left"] {
    transform: translateX(-60px);
}

[data-scroll-reveal="slide-left"].revealed {
    transform: translateX(0);
}

/* Slide Right Animation */
[data-scroll-reveal="slide-right"] {
    transform: translateX(60px);
}

[data-scroll-reveal="slide-right"].revealed {
    transform: translateX(0);
}

/* Staggered Delays */
[data-scroll-delay="100"].revealed {
    transition-delay: 0.1s;
}

[data-scroll-delay="200"].revealed {
    transition-delay: 0.2s;
}

[data-scroll-delay="300"].revealed {
    transition-delay: 0.3s;
}

[data-scroll-delay="400"].revealed {
    transition-delay: 0.4s;
}

/* Enhanced Badge Line Animation */
.badge-line-animate {
    transform-origin: center;
    animation: badgeLineGrow 1.5s ease-out forwards;
    animation-delay: 0.5s;
    transform: scaleX(0);
}

@keyframes badgeLineGrow {
    to { transform: scaleX(1); }
}

/* SVG Underline Draw Animation */
.highlight-underline path {
    animation: drawUnderline 2s ease-out forwards;
    animation-delay: 1s;
}

@keyframes drawUnderline {
    to { stroke-dashoffset: 0; }
}

/* Floating Particles in About Background */
.about-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.about-particles .particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.4;
}

.about-particles .particle:nth-child(1) {
    top: 15%;
    left: 10%;
    animation: floatParticle 20s ease-in-out infinite;
}

.about-particles .particle:nth-child(2) {
    top: 40%;
    left: 80%;
    animation: floatParticle 25s ease-in-out infinite;
    animation-delay: -5s;
}

.about-particles .particle:nth-child(3) {
    top: 70%;
    left: 20%;
    animation: floatParticle 30s ease-in-out infinite;
    animation-delay: -10s;
}

.about-particles .particle:nth-child(4) {
    top: 25%;
    left: 60%;
    animation: floatParticle 22s ease-in-out infinite;
    animation-delay: -15s;
}

.about-particles .particle:nth-child(5) {
    top: 85%;
    left: 70%;
    animation: floatParticle 28s ease-in-out infinite;
    animation-delay: -20s;
}

@keyframes floatParticle {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.2;
    }
    25% { 
        transform: translate(30px, -40px) scale(1.2);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-20px, -80px) scale(0.8);
        opacity: 0.4;
    }
    75% { 
        transform: translate(-40px, -50px) scale(1.1);
        opacity: 0.5;
    }
}

/* Feature Card Particles on Hover */
.feature-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover .feature-particles {
    opacity: 1;
}

.feature-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
}

.feature-particles span:nth-child(1) {
    top: 20%;
    left: 10%;
    animation: particleBurst 1s ease-out forwards;
}

.feature-particles span:nth-child(2) {
    top: 60%;
    right: 15%;
    animation: particleBurst 1s ease-out 0.1s forwards;
}

.feature-particles span:nth-child(3) {
    bottom: 25%;
    left: 70%;
    animation: particleBurst 1s ease-out 0.2s forwards;
}

@keyframes particleBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 20px), var(--ty, -20px)) scale(2);
        opacity: 0;
    }
}

/* Showcase Scan Line Effect */
.showcase-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(127, 166, 155, 0.8) 50%, 
        transparent 100%
    );
    animation: scanLine 3s ease-in-out infinite;
    opacity: 0.6;
    z-index: 2;
}

@keyframes scanLine {
    0%, 100% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translateY(420px);
        opacity: 0.6;
    }
    90% {
        opacity: 0;
    }
}

/* Additional Floating Shapes in Showcase */
.float-shape {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(127, 166, 155, 0.3);
    border-radius: 50%;
    pointer-events: none;
}

.float-shape.shape-1 {
    top: 10%;
    right: 15%;
    animation: floatShape 8s ease-in-out infinite;
}

.float-shape.shape-2 {
    bottom: 15%;
    left: 10%;
    width: 30px;
    height: 30px;
    animation: floatShape 10s ease-in-out infinite reverse;
}

@keyframes floatShape {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(15px, -20px) rotate(120deg);
    }
    66% {
        transform: translate(-10px, 15px) rotate(240deg);
    }
}

/* 3D Tilt Effect for Showcase Card */
.showcase-card[data-tilt] {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
}

.showcase-card[data-tilt]:hover {
    transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

/* Scroll Progress Indicator */
.about-scroll-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(127, 166, 155, 0.1);
    overflow: hidden;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, 
        var(--primary-color) 0%, 
        #5a8c7f 50%, 
        var(--primary-color) 100%
    );
    width: 0;
    transition: width 0.2s ease;
    box-shadow: 0 0 10px rgba(127, 166, 155, 0.5);
}

/* Enhanced Hover Effects for Feature Icons */
.feature-icon-wrap:hover .feature-icon {
    animation: iconPulse 0.6s ease-in-out;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
}

/* Parallax Layers */
[data-parallax-speed] {
    will-change: transform;
}

/* Enhanced Stat Counter Animation */
.stat-data {
    counter-reset: number var(--counter-value, 0);
}

.count {
    display: inline-block;
    transition: all 0.5s ease;
}

.count.counting {
    animation: countUp 2s ease-out;
}

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

@media (max-width: 768px) {
    .about-section {
        padding: 5rem 0;
    }
    
    .about-main-title {
        font-size: 1.75rem;
    }
    
    .feature-card {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
    }
    
    .feature-icon-wrap {
        display: flex;
        justify-content: center;
    }
    
    .showcase-card {
        height: 350px;
    }
    
    .about-stats-bar {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .about-stat-item {
        padding: 0.75rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(127, 166, 155, 0.1);
    }
    
    .about-stat-item:last-child {
        border-bottom: none;
    }
    
    .stat-divider-v {
        display: none;
    }
}

/* Floating Particles */
.visual-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: floatParticle 15s ease-in-out infinite;
}

.particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.particle:nth-child(2) {
    top: 60%;
    left: 20%;
    width: 4px;
    height: 4px;
    animation-delay: -3s;
    animation-duration: 18s;
}

.particle:nth-child(3) {
    top: 30%;
    right: 15%;
    width: 8px;
    height: 8px;
    animation-delay: -6s;
    animation-duration: 14s;
}

.particle:nth-child(4) {
    bottom: 25%;
    right: 25%;
    width: 5px;
    height: 5px;
    animation-delay: -9s;
    animation-duration: 16s;
}

.particle:nth-child(5) {
    top: 70%;
    left: 60%;
    width: 3px;
    height: 3px;
    animation-delay: -12s;
    animation-duration: 20s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate(20px, -30px) scale(1.2);
        opacity: 0.7;
    }
    50% {
        transform: translate(-10px, -50px) scale(0.8);
        opacity: 0.5;
    }
    75% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.6;
    }
}

/* Corner Accents */
.corner-accent {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.corner-accent.top-left {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    border-radius: 16px 0 0 0;
}

.corner-accent.top-right {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 16px 0 0;
}

.corner-accent.bottom-left {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 16px;
}

.corner-accent.bottom-right {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 16px 0;
}

.about-visual:hover .corner-accent {
    width: 100px;
    height: 100px;
    border-color: rgba(255, 255, 255, 0.25);
}

@keyframes patternMove {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.05) rotate(1deg); }
}

.visual-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
    width: 100%;
    max-width: 800px;
}

.visual-label {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.visual-label:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.visual-text h3 {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 0.75rem;
    opacity: 0.92;
    letter-spacing: 0.02em;
}

/* Visual Divider */
.visual-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0;
    width: 100%;
    max-width: 400px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.divider-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.visual-stats {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.stat-separator {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.visual-stat {
    text-align: center;
    padding: 0 1rem;
}

.stat-value {
    display: block;
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, #7fa69b 0%, #7fa69b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Override for stat-value counters */
.visual-stat .stat-value .count {
    color: #7fa69b !important;
    display: inline !important;
    font-weight: 300 !important;
    background: linear-gradient(180deg, #7fa69b 0%, #7fa69b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.visual-stat .stat-value span {
    color: #7fa69b !important;
    background: linear-gradient(180deg, #7fa69b 0%, #7fa69b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-text {
    font-size: 0.9rem;
    opacity: 0.85;
    font-weight: 300;
    letter-spacing: 0.05em;
}

.animated-words {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;
    height: 80px;
    position: relative;
}

.about-visual .word {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: wordBlurFadeWhite 8s ease-in-out infinite;
    color: white;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: white;
    background-clip: unset;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.word {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: wordBlurFade 8s ease-in-out infinite;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.word.active {
    opacity: 1;
}

.word:nth-child(1) { animation-delay: 0s; }
.word:nth-child(2) { animation-delay: 2s; }
.word:nth-child(3) { animation-delay: 4s; }
.word:nth-child(4) { animation-delay: 6s; }

@keyframes wordBlurFadeWhite {
    0%, 22%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px) scale(0.95);
        filter: blur(10px);
    }
    2%, 20% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes wordBlurFade {
    0%, 22%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px) scale(0.95);
        filter: blur(10px);
    }
    2%, 20% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ===== PRODUCTS SECTION ===== */
/* ===== PRODUCTS SECTION - PREMIUM CREATIVE DESIGN ===== */
.products-section {
    background: linear-gradient(180deg, white 0%, var(--surface-light) 50%, white 100%);
    position: relative;
    overflow: hidden;
    padding: 8rem 0;
}

/* Decorative Background Elements */
.products-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
}

.product-float-shape {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.12), transparent 70%);
    animation: floatShape 25s ease-in-out infinite;
}

.product-float-shape.shape-1 {
    width: 500px;
    height: 500px;
    top: -100px;
    right: -150px;
    animation-delay: 0s;
}

.product-float-shape.shape-2 {
    width: 350px;
    height: 350px;
    bottom: -80px;
    left: -100px;
    animation-delay: -10s;
}

.product-gradient-orb {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orbFloat 20s ease-in-out infinite;
}

.product-gradient-orb.orb-1 {
    background: radial-gradient(circle, rgba(127, 166, 155, 0.4), transparent);
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.product-gradient-orb.orb-2 {
    background: radial-gradient(circle, rgba(155, 191, 179, 0.3), transparent);
    bottom: 30%;
    right: 15%;
    animation-delay: -8s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -80px) scale(1.1);
    }
    66% {
        transform: translate(-30px, -50px) scale(0.9);
    }
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 3.5rem;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

/* Premium Product Card */
.product-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    /* padding: 3.5rem; */
    border-radius: 32px;
    border: 1px solid rgba(127, 166, 155, 0.15);
    box-shadow: 
        0 10px 40px rgba(127, 166, 155, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Gradient Background Effect */
.product-gradient-bg {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
    animation: gradientPulse 6s ease-in-out infinite;
}

@keyframes gradientPulse {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-20px, 20px) scale(1.1);
    }
}

.product-card:hover .product-gradient-bg {
    opacity: 1;
}

/* Corner Accents */
.product-corner-accent {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(127, 166, 155, 0.2);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.product-corner-accent.top-left {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    border-radius: 16px 0 0 0;
}

.product-corner-accent.bottom-right {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 16px 0;
}

.product-card:hover .product-corner-accent {
    border-color: var(--primary-color);
    width: 80px;
    height: 80px;
}

/* Card Top Border Animation */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(127, 166, 155, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.product-card:hover::before {
    transform: scaleX(1);
}

.product-card:hover::after {
    opacity: 1;
}

/* Card Hover Effects */
.product-card:hover {
    transform: translateY(-16px) scale(1.02);
    box-shadow: 
        0 30px 80px rgba(127, 166, 155, 0.2),
        0 15px 40px rgba(127, 166, 155, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: rgba(127, 166, 155, 0.3);
}

/* Product Header */
.product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

/* Icon Wrapper */
.product-icon-wrapper {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.12), rgba(155, 191, 179, 0.08));
    border-radius: 20px;
    border: 2px solid rgba(127, 166, 155, 0.15);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.product-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-card:hover .product-icon-wrapper {
    transform: rotate(10deg) scale(1.1);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(127, 166, 155, 0.3);
}

.product-card:hover .product-icon-wrapper::before {
    opacity: 0.15;
}

.product-icon {
    width: 36px;
    height: 36px;
    color: var(--primary-color);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.product-card:hover .product-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 8px rgba(127, 166, 155, 0.4));
}

/* Product Tag */
.product-tag {
    padding: 0.65rem 1.5rem;
    background: rgba(127, 166, 155, 0.08);
    border: 1.5px solid rgba(127, 166, 155, 0.2);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: all 0.4s ease;
    white-space: nowrap;
}

.product-tag.innovation {
    background: rgba(127, 166, 155, 0.1);
    border-color: rgba(127, 166, 155, 0.25);
}

.product-card:hover .product-tag {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(127, 166, 155, 0.3);
}

/* Card Title */
.product-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.product-card:hover h3 {
    color: var(--primary-dark);
    transform: translateX(8px);
}

/* Card Description */
.product-card > p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
    opacity: 0.9;
}

/* Product Features List */
.product-features {
    list-style: none;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

.product-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    border-bottom: 1px solid rgba(127, 166, 155, 0.1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-features li:last-child {
    border-bottom: none;
}

.product-features li:hover {
    color: var(--text-primary);
    padding-left: 0.75rem;
    background: rgba(127, 166, 155, 0.03);
    border-radius: 8px;
}

/* Feature Icons */
.feature-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-features li:hover .feature-icon {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 2px 6px rgba(127, 166, 155, 0.4));
}

/* Product Link Button */
.product-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--primary-color);
    color: white;
    font-weight: 300;
    font-size: 1rem;
    border-radius: 50px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 2px solid var(--primary-color);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.product-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-link span,
.product-link svg {
    position: relative;
    z-index: 1;
}

.product-link svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-link:hover {
    background: transparent;
    color: var(--primary-color);
    gap: 1.25rem;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.3);
}

.product-link:hover::before {
    opacity: 0;
}

.product-link:hover svg {
    transform: translateX(6px) rotate(0deg);
}

/* 3D Tilt Effect on Mouse Movement */
.product-card {
    will-change: transform;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .product-card {
        /* padding: 3rem 2.5rem; */
    }
}

@media (max-width: 768px) {
    .products-section {
        padding: 6rem 0;
    }
    
    .product-card {
        /* padding: 2.5rem 2rem; */
    }
    
    .product-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .product-icon {
        width: 30px;
        height: 30px;
    }
    
    .product-card h3 {
        font-size: 1.625rem;
    }
    
    .product-card:hover {
        transform: translateY(-10px) scale(1.01);
    }
}

@media (max-width: 480px) {
    .product-card {
        /* padding: 2rem 1.5rem; */
        border-radius: 24px;
    }
    
    .product-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .product-icon-wrapper {
        width: 56px;
        height: 56px;
    }
    
    .product-card h3 {
        font-size: 1.5rem;
    }
    
    .product-features li {
        font-size: 0.9375rem;
        padding: 0.875rem 0;
    }
}

/* ===== INDUSTRIES SECTION - PREMIUM HORIZONTAL SLIDER ===== */
.industries-section {
    margin-top: 5rem;
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.03) 0%, rgba(155, 191, 179, 0.02) 100%);
    border-radius: 32px;
    position: relative;
    overflow: hidden;
}

.industries-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.5;
}

.industries-header {
    display: block;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    margin-bottom: 3rem;
}

.industries-title {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 300;
    animation: hintPulse 2s ease-in-out infinite;
}

.scroll-hint svg {
    width: 20px;
    height: 20px;
    animation: arrowSlide 1.5s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes arrowSlide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* Slider Wrapper */
.industries-slider-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 3rem 2rem;
    cursor: grab;
    scroll-snap-type: x proximity;
}

.industries-slider-wrapper:active {
    cursor: grabbing;
    scroll-behavior: auto;
}

.industries-slider-wrapper::-webkit-scrollbar {
    display: none;
}

/* Custom Scrollbar Track */
.industries-slider-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3rem;
    right: 3rem;
    height: 3px;
    background: rgba(127, 166, 155, 0.1);
    border-radius: 2px;
}

/* Industries Slider */
.industries-slider {
    display: flex;
    gap: 2rem;
    padding-bottom: 1rem;
    width: max-content;
}

/* Industry Item Card */
.industry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-width: 200px;
    height: 240px;
    padding: 2.5rem 2rem;
    background: white;
    border-radius: 24px;
    border: 2px solid rgba(127, 166, 155, 0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: center;
    flex-shrink: 0;
}

/* Background Gradient Effect */
.industry-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.industry-item:hover::before {
    opacity: 1;
    transform: translate(10%, 10%);
}

/* Icon Wrapper */
.industry-icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1), rgba(155, 191, 179, 0.05));
    border-radius: 20px;
    border: 2px solid rgba(127, 166, 155, 0.15);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.industry-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.industry-icon {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

/* Hover Effects */
.industry-item:hover {
    transform: translateY(-12px) scale(1.05);
    border-color: var(--primary-color);
    box-shadow: 
        0 20px 50px rgba(127, 166, 155, 0.25),
        0 10px 25px rgba(127, 166, 155, 0.15);
}

.industry-item:hover .industry-icon-wrapper {
    transform: rotate(10deg) scale(1.1);
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.3);
}

.industry-item:hover .industry-icon-wrapper::before {
    opacity: 0.2;
}

.industry-item:hover .industry-icon {
    transform: scale(1.15) rotate(-10deg);
    filter: drop-shadow(0 4px 8px rgba(127, 166, 155, 0.4));
}

/* Industry Name */
.industry-item span {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.4;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.industry-item:hover span {
    color: var(--primary-dark);
    transform: translateY(2px);
}

/* Parallax Effect Classes */
.industry-item[data-parallax] {
    will-change: transform;
}

/* Navigation Buttons */
.slider-nav {
    opacity: 0;
    transition: all 0.3s ease;
}

.slider-nav:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive Design */
@media (max-width: 768px) {
    .industries-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 0 2rem;
    }
    
    .industries-title {
        font-size: 1.75rem;
    }
    
    .industries-slider-wrapper {
        padding: 0 2rem 2rem;
    }
    
    .industries-slider {
        gap: 1.5rem;
    }
    
    .industry-item {
        min-width: 170px;
        height: 220px;
        padding: 2rem 1.5rem;
    }
    
    .industry-icon-wrapper {
        width: 70px;
        height: 70px;
    }
    
    .industry-icon {
        width: 35px;
        height: 35px;
    }
    
    .industry-item span {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .industries-section {
        margin-top: 4rem;
        padding: 3rem 0;
    }
    
    .industries-title {
        font-size: 1.5rem;
    }
    
    .scroll-hint {
        font-size: 0.8125rem;
    }
    
    .industry-item {
        min-width: 150px;
        height: 200px;
        padding: 1.75rem 1.25rem;
    }
    
    .industry-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .industry-icon {
        width: 30px;
        height: 30px;
    }
}

/* ===== VALUES SECTION ===== */
/* ===== VALUES SECTION - PREMIUM HORIZONTAL CARDS ===== */
.values-section {
    background: linear-gradient(180deg, white 0%, var(--surface-light) 50%, white 100%);
    position: relative;
    overflow: visible;
    padding: 8rem 0 4rem 0;
}

.values-section .section-header {
    position: relative;
    z-index: 15;
    margin-bottom: 8rem;
}

.values-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Value Item Container - Each section needs enough height for sticky effect */
.value-item {
    position: relative;
    min-height: 100vh;
    padding-top: 0;
}

.value-item:last-child {
    min-height: 100vh;
}

/* Sticky Heading - Sticks and stacks on top of each other */
.value-item h3 {
    position: sticky;
    top: 90px;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin: 0 0 3rem 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border-bottom: 2px solid transparent;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transform-origin: top center;
    letter-spacing: -0.02em;
}

/* Z-index layering - higher items stack on top */
.value-item:nth-child(1) h3 {
    z-index: 8;
}

.value-item:nth-child(2) h3 {
    z-index: 9;
}

.value-item:nth-child(3) h3 {
    z-index: 10;
}

/* Active state - heading is currently showing content */
.value-item.active h3 {
    color: var(--primary-color);
    background: rgba(127, 166, 155, 0.05);
    border-bottom: 2px solid var(--primary-color);
    box-shadow: 0 8px 32px rgba(127, 166, 155, 0.12);
    transform: scale(1);
}

/* Passed state - heading has been scrolled past (pushed up/scaled) */
.value-item.passed h3 {
    transform: scale(0.96) translateY(-8px);
    opacity: 0.6;
    filter: blur(0.3px);
}

/* Content Grid: Hidden by default, revealed when active */
.value-content-grid {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: stretch;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    padding: 0 2rem 2rem 2rem;
}

/* Show content when item is active */
.value-item.active .value-content-grid {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Left Side: Description Content - Flexible width */
.value-description {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 1;
    min-height: 100%;
}

.value-item:hover .value-description {
    box-shadow: 0 12px 48px rgba(127, 166, 155, 0.12);
    transform: translateY(-4px);
}

/* Icon Wrapper - Fixed positioning to prevent overlap */
.value-icon-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--surface-light) 0%, rgba(127, 166, 155, 0.1) 100%);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 2rem 0;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    box-shadow: 0 4px 16px rgba(127, 166, 155, 0.08);
}

.value-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--primary-color), rgba(127, 166, 155, 0.6));
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.value-item:hover .value-icon-wrapper::before {
    opacity: 1;
}

.value-item:hover .value-icon-wrapper {
    background: var(--primary-color);
    transform: rotate(8deg) scale(1.08);
    box-shadow: 0 12px 32px rgba(127, 166, 155, 0.3);
}

.value-icon-wrapper svg {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.value-item:hover .value-icon-wrapper svg {
    color: white;
    transform: scale(1.1);
}

/* Description Text - Clear spacing from icon */
.value-description p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    font-weight: 400;
    clear: both;
}

/* Feature List */
.value-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.value-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: var(--surface-light);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid transparent;
}

.value-features li:hover {
    background: rgba(127, 166, 155, 0.08);
    color: var(--primary-color);
    transform: translateX(8px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(127, 166, 155, 0.12);
}

.value-features li svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.value-features li:hover svg {
    transform: scale(1.2) rotate(5deg);
}

/* Right Side: Image - Matches left content height */
.value-image-wrapper {
    flex: 1;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(127, 166, 155, 0.15);
    min-height: 100%;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(127, 166, 155, 0.1);
}

.value-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.value-item:hover .value-image-wrapper::before {
    opacity: 1;
}

.value-image-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 80px rgba(127, 166, 155, 0.25);
    border-color: var(--primary-color);
}

.value-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.value-image-wrapper:hover img {
    transform: scale(1.08);
}

.value-image-wrapper .value-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0.4;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.value-image-wrapper:hover .value-overlay {
    opacity: 0.2;
}

/* Corner Decorations */
.value-image-wrapper::before,
.value-image-wrapper::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid white;
    z-index: 2;
    transition: all 0.5s ease;
}

.value-image-wrapper::before {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
    border-radius: 12px 0 0 0;
}

.value-image-wrapper::after {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 12px 0;
}

.value-image-wrapper:hover::before,
.value-image-wrapper:hover::after {
    width: 80px;
    height: 80px;
    border-color: var(--primary-color);
}

/* Corner Accents */
.value-corner-accent {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(127, 166, 155, 0.15);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 2;
}

.value-corner-accent.top-left {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
    border-radius: 12px 0 0 0;
}

.value-corner-accent.bottom-right {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 12px 0;
}

.value-card:hover .value-corner-accent {
    border-color: var(--primary-color);
    width: 70px;
    height: 70px;
}

/* Gradient Background Effect */
.value-gradient-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.06) 0%, transparent 70%);
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
}

.value-card:hover .value-gradient-bg {
    opacity: 1;
    transform: translate(20%, 20%);
}

/* Icon Section */
.value-icon-section {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Icon Wrapper */
.value-icon-wrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 2px solid rgba(127, 166, 155, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.value-card:hover .value-icon-wrapper {
    transform: rotate(10deg) scale(1.15);
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 12px 32px rgba(127, 166, 155, 0.4);
}

.value-icon {
    width: 32px;
    height: 32px;
    color: var(--primary-color);
    transition: all 0.5s ease;
}

.value-card:hover .value-icon {
    color: white;
    transform: scale(1.1);
}

/* Value Image */
.value-image {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.value-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.value-card:hover .value-image img {
    transform: scale(1.1);
}

.value-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.5) 0%, rgba(92, 110, 106, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.value-card:hover .value-overlay {
    opacity: 1;
}

/* Value Content */
.value-content {
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.value-content h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.4s ease;
}

.value-card:hover .value-content h3 {
    color: var(--primary-dark);
    transform: translateX(8px);
}

.value-content p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* Value Features List */
.value-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.value-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 300;
    transition: all 0.3s ease;
}

.value-features li svg {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.value-features li:hover {
    color: var(--primary-dark);
    transform: translateX(5px);
}

.value-features li:hover svg {
    transform: scale(1.2);
    filter: drop-shadow(0 2px 6px rgba(127, 166, 155, 0.4));
}

/* Hover Effects */
.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 60px rgba(127, 166, 155, 0.2),
        0 10px 30px rgba(127, 166, 155, 0.12);
    border-color: rgba(127, 166, 155, 0.25);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .value-item {
        min-height: auto;
    }
    
    .value-item h3 {
        font-size: 2.2rem;
        padding: 2rem 2.5rem;
    }
    
    .value-content-grid {
        gap: 3rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
    
    .value-description {
        padding: 2.5rem;
    }
    
    .value-image-wrapper {
        min-height: 450px;
    }
}

@media (max-width: 768px) {
    .values-section {
        padding: 5rem 0 4rem 0;
    }
    
    .values-section .section-header {
        margin-bottom: 4rem;
    }
    
    .value-item {
        min-height: auto;
        padding-bottom: 3rem;
    }
    
    .value-item h3 {
        position: relative !important;
        top: 0 !important;
        font-size: 1.875rem;
        padding: 1.75rem 2rem;
        margin-bottom: 2rem;
    }
    
    .value-content-grid {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: all !important;
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem 1rem 1rem;
    }
    
    .value-description {
        padding: 2rem 1.5rem;
    }
    
    .value-icon-wrapper {
        width: 70px;
        height: 70px;
    }
    
    .value-icon-wrapper svg {
        width: 35px;
        height: 35px;
    }
    
    .value-description p {
        font-size: 1rem;
    }
    
    .value-features li {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
    }
    
    .value-image-wrapper {
        min-height: 320px;
        height: auto;
    }
}

@media (max-width: 480px) {
    .value-icon-section {
        height: 200px;
    }
    
    .value-icon-wrapper {
        width: 56px;
        height: 56px;
        top: 15px;
        left: 15px;
    }
    
    .value-icon {
        width: 28px;
        height: 28px;
    }
    
    .value-content {
        padding: 1.75rem 1.5rem;
    }
    
    .value-content h3 {
        font-size: 1.25rem;
    }
    
    .value-features li {
        font-size: 0.875rem;
    }
}

/* ===== INNOVATION SECTION ===== */
/* ========== INNOVATION & TECHNOLOGY - PREMIUM BENTO REDESIGN ========== */

.innovation-section-premium {
    background: linear-gradient(135deg, #f8faf9 0%, #ffffff 50%, #f5f7f6 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

/* Bento Grid Layout */
.innovation-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
    position: relative;
}

/* Hero Card - Left Side - Spans 7 columns, both rows */
.innovation-hero-card {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    padding: 48px;
    border: 1px solid rgba(127, 166, 155, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.innovation-hero-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(127, 166, 155, 0.04) 0%, transparent 60%);
    animation: rotateGradientSlow 25s linear infinite;
    pointer-events: none;
}

@keyframes rotateGradientSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.innovation-hero-card:hover {
    border-color: rgba(127, 166, 155, 0.25);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

/* Badge */
.innovation-badge-container {
    display: flex;
    align-items: center;
}

.innovation-badge-premium {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: rgba(127, 166, 155, 0.08);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-sage);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.innovation-hero-card:hover .innovation-badge-premium {
    background: rgba(127, 166, 155, 0.12);
    border-color: rgba(127, 166, 155, 0.3);
}

/* Hero Title */
.innovation-hero-title {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-charcoal);
    margin: 0;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
}

.innovation-hero-highlight {
    font-weight: 700;
    color: var(--color-sage);
    background: linear-gradient(135deg, var(--color-sage), rgba(127, 166, 155, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Hero Description */
.innovation-hero-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* Feature Stack */
.innovation-features-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.innovation-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(127, 166, 155, 0.1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.innovation-feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.innovation-feature-item:hover {
    transform: translateX(8px);
    border-color: rgba(127, 166, 155, 0.25);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.9);
}

.innovation-feature-item:hover::before {
    opacity: 1;
}

/* Feature Icon */
.innovation-feature-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: linear-gradient(135deg, var(--color-sage), rgba(127, 166, 155, 0.85));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(127, 166, 155, 0.25);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.innovation-feature-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    transition: transform 0.35s ease;
}

.innovation-feature-item:hover .innovation-feature-icon {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 6px 20px rgba(127, 166, 155, 0.35);
}

.innovation-feature-item:hover .innovation-feature-icon svg {
    transform: scale(1.1) rotate(-5deg);
}

/* Feature Content */
.innovation-feature-content {
    flex: 1;
}

.innovation-feature-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 6px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.innovation-feature-item:hover .innovation-feature-title {
    color: var(--color-sage);
}

.innovation-feature-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    margin: 0;
    opacity: 0.85;
}

/* Image Card - Top Right - Spans 5 columns */
.innovation-image-card {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 400px;
}

.innovation-image-card:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.innovation-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.innovation-image-card:hover .innovation-image-wrapper img {
    transform: scale(1.08);
}

.innovation-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.15) 0%, rgba(127, 166, 155, 0.05) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Stats Cards - Bottom Right */
.innovation-stat-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 36px 28px;
    border: 1px solid rgba(127, 166, 155, 0.15);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 220px;
}

.innovation-stat-card::before {
    content: '';
    position: absolute;
    inset: -100%;
    background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(127, 166, 155, 0.08) 180deg, transparent 360deg);
    animation: rotateStatGradient 8s linear infinite;
}

@keyframes rotateStatGradient {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.innovation-stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(127, 166, 155, 0.3);
}

/* Stat Card 1 - Patents */
.stat-card-1 {
    grid-column: 8 / 10;
    grid-row: 2 / 3;
}

/* Stat Card 2 - R&D Projects */
.stat-card-2 {
    grid-column: 10 / 13;
    grid-row: 2 / 3;
}

/* Stat Icon */
.innovation-stat-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.innovation-stat-icon svg {
    width: 100%;
    height: 100%;
    color: var(--color-sage);
    filter: drop-shadow(0 4px 12px rgba(127, 166, 155, 0.3));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.innovation-stat-card:hover .innovation-stat-icon svg {
    transform: scale(1.15) rotate(8deg);
}

/* Stat Value */
.innovation-stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.innovation-stat-number,
.innovation-stat-plus {
    font-size: 3.5rem;
    font-weight: 300;
    background: linear-gradient(135deg, var(--color-sage) 0%, rgba(127, 166, 155, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.innovation-stat-card:hover .innovation-stat-number,
.innovation-stat-card:hover .innovation-stat-plus {
    transform: scale(1.08);
}

/* Stat Label */
.innovation-stat-label {
    font-size: 1rem;
    font-weight: 500;
    color: #666;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

/* Responsive Design - Perfect Symmetry Maintained */
@media (max-width: 1400px) {
    .innovation-hero-card {
        padding: 40px;
        gap: 28px;
    }
    
    .innovation-hero-title {
        font-size: 2.5rem;
    }
    
    .innovation-image-card {
        min-height: 350px;
    }
    
    .innovation-stat-card {
        min-height: 200px;
        padding: 32px 24px;
    }
    
    .innovation-stat-number,
    .innovation-stat-plus {
        font-size: 3rem;
    }
}

@media (max-width: 1200px) {
    .innovation-bento-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    
    .innovation-hero-card {
        grid-column: 1 / 7;
        grid-row: 1 / 2;
        padding: 36px;
    }
    
    .innovation-hero-title {
        font-size: 2.2rem;
    }
    
    .innovation-image-card {
        grid-column: 1 / 7;
        grid-row: 2 / 3;
        min-height: 320px;
    }
    
    .stat-card-1 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }
    
    .stat-card-2 {
        grid-column: 4 / 7;
        grid-row: 3 / 4;
    }
}

@media (max-width: 768px) {
    .innovation-section-premium {
        padding: 60px 0;
    }
    
    .innovation-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .innovation-hero-card {
        grid-column: 1;
        grid-row: auto;
        padding: 32px 24px;
        gap: 24px;
    }
    
    .innovation-hero-title {
        font-size: 1.85rem;
    }
    
    .innovation-hero-description {
        font-size: 1rem;
    }
    
    .innovation-feature-item {
        padding: 16px;
        gap: 16px;
    }
    
    .innovation-feature-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }
    
    .innovation-feature-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .innovation-feature-title {
        font-size: 1.05rem;
    }
    
    .innovation-feature-description {
        font-size: 0.85rem;
    }
    
    .innovation-image-card {
        grid-column: 1;
        grid-row: auto;
        min-height: 280px;
    }
    
    .stat-card-1,
    .stat-card-2 {
        grid-column: 1;
        grid-row: auto;
        min-height: 180px;
    }
    
    .innovation-stat-number,
    .innovation-stat-plus {
        font-size: 2.5rem;
    }
}

/* OLD STYLES - KEPT FOR BACKWARD COMPATIBILITY */
.innovation-section {
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 50%, #f5f5f5 100%);
    position: relative;
    overflow: hidden;
}
.point-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.9), rgba(127, 166, 155, 0.7));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.25);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.point-icon svg {
    width: 32px;
    height: 32px;
    color: white;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 2;
    will-change: transform;
}

.point-item:hover .point-icon {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 12px 32px rgba(127, 166, 155, 0.35);
}

.point-item:hover .point-icon svg {
    transform: scale(1.1) rotate(-5deg);
}

.point-corner-accent {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.point-corner-accent.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-radius: 16px 0 0 0;
}

.point-corner-accent.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 16px 0;
}

.point-item:hover .point-corner-accent {
    width: 28px;
    height: 28px;
    border-color: rgba(255, 255, 255, 0.9);
}

.point-content h4 {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.point-item:hover .point-content h4 {
    color: var(--primary-color);
}

.point-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    opacity: 0.85;
}

.visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.25rem;
    height: 560px;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.visual-item.large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    position: relative;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.visual-item.large:hover {
    transform: scale(1.02);
}

.visual-item.large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.visual-item.large:hover img {
    transform: scale(1.08);
}

.visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.15) 0%, transparent 50%);
    z-index: 2;
    pointer-events: none;
}

.visual-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.visual-item.large:hover .visual-gradient {
    opacity: 1;
}

.visual-item.small {
    border-radius: 20px;
    position: relative;
}

.metric-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2.25rem 1.75rem;
    border-radius: 20px;
    color: var(--text-primary);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 40px rgba(127, 166, 155, 0.15);
    border: 1px solid rgba(127, 166, 155, 0.15);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.08) 0%, transparent 70%);
    animation: rotateGradient 8s linear infinite;
    will-change: transform;
}

@keyframes rotateGradient {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.metric-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 60px rgba(127, 166, 155, 0.25);
    border-color: rgba(127, 166, 155, 0.3);
}

.metric-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.metric-icon svg {
    width: 100%;
    height: 100%;
    color: var(--primary-color);
    filter: drop-shadow(0 4px 12px rgba(127, 166, 155, 0.3));
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.metric-card:hover .metric-icon svg {
    transform: scale(1.15) rotate(10deg);
}

.metric-value {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #7fa69b 0%, #9BBFB3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.metric-value .count {
    color: #7fa69b !important;
    display: inline !important;
    font-weight: 300 !important;
    background: linear-gradient(135deg, #7fa69b 0%, #9BBFB3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metric-value span {
    color: #7fa69b !important;
    background: linear-gradient(135deg, #7fa69b 0%, #9BBFB3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.metric-card:hover .metric-value {
    transform: scale(1.08);
}

.metric-label {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-secondary);
    opacity: 0.85;
    position: relative;
    z-index: 2;
}

.metric-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.metric-card:hover .metric-gradient {
    opacity: 1;
}

/* ===== NETWORK SECTION - ULTRA CREATIVE REDESIGN ===== */
.network-section-creative {
    background: linear-gradient(180deg, #f8faf9 0%, #ffffff 50%, #f8faf9 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
}

/* Animated Background Elements */
.global-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.globe-grid-lines {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(127,166,155,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,166,155,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridFloat 20s linear infinite;
}

@keyframes gridFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.orbit-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(127,166,155,0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-ring.orbit-1 {
    width: 400px;
    height: 400px;
    animation: orbitPulse 8s ease-in-out infinite;
}

.orbit-ring.orbit-2 {
    width: 600px;
    height: 600px;
    animation: orbitPulse 10s ease-in-out infinite 1s;
}

.orbit-ring.orbit-3 {
    width: 800px;
    height: 800px;
    animation: orbitPulse 12s ease-in-out infinite 2s;
}

@keyframes orbitPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.02); }
}

/* Creative Header */
.global-header-creative {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.header-globe-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

.globe-sphere {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #5d8a7d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(127,166,155,0.3),
        inset 0 -4px 12px rgba(0,0,0,0.1);
    animation: globeFloat 4s ease-in-out infinite;
}

.globe-sphere i {
    font-size: 1.5rem;
    color: white;
}

.globe-highlight {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 16px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.globe-orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: orbitDot 3s linear infinite;
}

@keyframes globeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes orbitDot {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(38px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(38px) rotate(-360deg); }
}

.header-badge-creative {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(127,166,155,0.08);
    border: 1px solid rgba(127,166,155,0.15);
    border-radius: 50px;
    margin-bottom: 16px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

.badge-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    text-transform: uppercase;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.global-title-creative {
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.2;
}

.title-highlight-creative {
    font-weight: 600;
    color: var(--primary-color);
    position: relative;
}

.title-highlight-creative::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    border-radius: 2px;
}

.global-desc-creative {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Bento Grid Layout - Symmetric 3-Column */
.global-bento-grid {
    display: grid;
    grid-template-columns: 160px 1fr 180px;
    gap: 20px;
    position: relative;
    z-index: 2;
}

/* Left Column - Stats Tower */
.global-stats-tower {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-tower-card {
    background: white;
    border-radius: 16px;
    padding: 9px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(127,166,155,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-tower-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(127,166,155,0.15);
    border-color: var(--primary-color);
}

.stat-tower-card:hover .stat-tower-glow {
    opacity: 1;
}

.stat-tower-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(127,166,155,0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-tower-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    background: linear-gradient(135deg, rgba(127,166,155,0.15), rgba(127,166,155,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-tower-icon i {
    font-size: 1rem;
    color: var(--primary-color);
}

.stat-tower-value {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.stat-tower-value .count {
    color: var(--primary-color);
}

.stat-plus {
    font-size: 1rem;
    font-weight: 400;
}

.stat-tower-label {
    font-size: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Center - World Map Card */
.global-map-card {
    background: white;
    border-radius: 24px;
    padding: 16px;
    padding-bottom: 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 40px rgba(0,0,0,0.06),
        0 0 0 1px rgba(127,166,155,0.08);
}

.map-card-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,250,249,0.95));
    pointer-events: none;
}

.map-card-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(127,166,155,0.2), transparent, rgba(127,166,155,0.1)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.world-map-wrapper-creative {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #f0f5f3 0%, #e8f0ed 100%);
    line-height: 0;
}

.world-map-wrapper-creative .world-map-svg {
    position: relative;
    z-index: 1;
    line-height: 0;
}

.world-map-wrapper-creative .world-map-svg img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.05));
}

/* Zoom Controls */
.map-zoom-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 30;
}

.zoom-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: white;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.zoom-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.zoom-btn:active {
    transform: scale(0.95);
}

/* Zoomable Map Container */
.world-map-zoomable {
    width: 100%;
    position: relative;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    line-height: 0;
}

.world-map-zoomable:active {
    cursor: grabbing;
}

.world-map-zoomable.zoomed {
    cursor: move;
}

/* Location Markers - Smaller default size */
.world-map-wrapper-creative .location-marker {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.world-map-wrapper-creative .marker-pin {
    width: 20px;
    height: 20px;
}

.world-map-wrapper-creative .marker-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 2px 6px rgba(0,0,0,0.15);
}

.world-map-wrapper-creative .marker-pulse {
    width: 20px;
    height: 20px;
}

.map-title-badge {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.95);
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(127,166,155,0.1);
    z-index: 30;
}

.map-title-badge i {
    font-size: 0.85rem;
    color: var(--primary-color);
}

.map-title-badge span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.map-title-badge .zoom-hint {
    font-size: 0.65rem;
    color: var(--primary-color);
    padding-left: 8px;
    border-left: 1px solid rgba(127,166,155,0.2);
}

/* Right Column - Legend Cards */
.global-legend-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legend-card-creative {
    background: white;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(127,166,155,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    cursor: pointer;
}

.legend-card-creative:hover {
    transform: translateX(-4px);
    border-color: rgba(127,166,155,0.2);
    box-shadow: 0 6px 24px rgba(127,166,155,0.12);
}

/* Legend Card Active State */
.legend-card-creative.active {
    transform: translateX(-6px);
    border-color: #7FA69B !important;
    box-shadow: 
        0 8px 32px rgba(127,166,155,0.25),
        0 0 0 2px rgba(127,166,155,0.15);
    background: linear-gradient(135deg, rgba(127,166,155,0.08) 0%, white 50%);
}

.legend-card-creative.active .legend-card-marker {
    transform: scale(1.15);
    transition: transform 0.3s ease;
}

.legend-card-creative.active .legend-card-label {
    color: #3a5a50;
    font-weight: 600;
}

.legend-card-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.legend-marker-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.9);
}

/* Legend Color Variants */
.hq-color {
    background: rgba(255,215,0,0.15);
}
.hq-color .legend-marker-inner {
    background: linear-gradient(135deg, #FFD700, #FFA500);
}

.corporate-color {
    background: rgba(74,144,226,0.15);
}
.corporate-color .legend-marker-inner {
    background: linear-gradient(135deg, #4A90E2, #357ABD);
}

.manufacturing-color {
    background: rgba(231,76,60,0.15);
}
.manufacturing-color .legend-marker-inner {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
}

.warehouse-color {
    background: rgba(127,166,155,0.15);
}
.warehouse-color .legend-marker-inner {
    background: linear-gradient(135deg, #7FA69B, #5d8a7d);
}

.sourcing-color {
    background: rgba(155,89,182,0.15);
}
.sourcing-color .legend-marker-inner {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
}

.legend-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.legend-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legend-card-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.legend-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(127,166,155,0.05);
    border-radius: 10px;
    margin-top: auto;
}

.legend-footer-note i {
    font-size: 0.75rem;
    color: var(--primary-color);
}

.legend-footer-note span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .global-bento-grid {
        grid-template-columns: 140px 1fr 160px;
        gap: 16px;
    }
    
    .stat-tower-value {
        font-size: 1.4rem;
    }
}

@media (max-width: 992px) {
    .global-bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .global-stats-tower {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        order: 2;
    }
    
    .stat-tower-card {
        flex: 1 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }
    
    .global-map-card {
        order: 1;
    }
    
    .global-legend-column {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        order: 3;
        gap: 10px;
    }
    
    .legend-card-creative {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: 200px;
    }
    
    .legend-footer-note {
        width: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
    .network-section-creative {
        padding: 60px 0 40px;
    }
    
    .global-title-creative {
        font-size: 2rem;
    }
    
    .global-desc-creative {
        font-size: 0.9rem;
    }
    
    .stat-tower-card {
        flex: 1 1 calc(50% - 6px);
    }
    
    .legend-card-creative {
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .global-title-creative {
        font-size: 1.75rem;
    }
    
    .stat-tower-card {
        padding: 14px 12px;
    }
    
    .stat-tower-value {
        font-size: 1.3rem;
    }
    
    .legend-card-creative {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ===== EVENTS SECTION - CREATIVE REDESIGN ===== */
/* ========== UPCOMING EVENTS - BENTO CREATIVE DESIGN ========== */

.events-section-creative {
    background: linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
}

/* Animated Background Elements */
.events-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.events-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(127,166,155,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,166,155,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: eventsGridFloat 25s linear infinite;
}

@keyframes eventsGridFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.floating-calendar {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 80px;
    height: 80px;
    background: rgba(127,166,155,0.06);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatCalendar 6s ease-in-out infinite;
}

.floating-calendar i {
    font-size: 2rem;
    color: rgba(127,166,155,0.15);
}

.floating-location {
    position: absolute;
    bottom: 20%;
    left: 8%;
    width: 60px;
    height: 60px;
    background: rgba(127,166,155,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatLocation 5s ease-in-out infinite 1s;
}

.floating-location i {
    font-size: 1.5rem;
    color: rgba(127,166,155,0.12);
}

@keyframes floatCalendar {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes floatLocation {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(127,166,155,0.1) 20%, rgba(127,166,155,0.1) 80%, transparent 100%);
}

/* Creative Header */
.events-header-creative {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.header-calendar-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

.calendar-sphere {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(127,166,155,0.3),
        inset 0 -4px 12px rgba(0,0,0,0.1);
    animation: calendarFloat 4s ease-in-out infinite;
}

.calendar-sphere i {
    font-size: 1.4rem;
    color: white;
}

.calendar-highlight {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 14px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
}

.calendar-orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-sage);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 8px rgba(127,166,155,0.5);
    animation: calendarOrbit 4s linear infinite;
}

@keyframes calendarFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes calendarOrbit {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(40px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(40px) rotate(-360deg); }
}

.header-badge-events {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(127,166,155,0.08);
    border: 1px solid rgba(127,166,155,0.15);
    border-radius: 50px;
    margin-bottom: 16px;
}

.badge-dot-events {
    width: 6px;
    height: 6px;
    background: var(--color-sage);
    border-radius: 50%;
    animation: dotPulseEvents 2s ease-in-out infinite;
}

.badge-text-events {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-sage);
    text-transform: uppercase;
}

@keyframes dotPulseEvents {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.events-title-creative {
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--color-charcoal);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.title-highlight-events {
    font-weight: 600;
    color: var(--color-sage);
    position: relative;
}

.title-highlight-events::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sage), rgba(127,166,155,0.3));
    border-radius: 2px;
}

.events-subtitle-creative {
    font-size: 1rem;
    color: #666;
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ===== BENTO GRID LAYOUT ===== */
.events-bento-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Featured Event - Large Card */
.event-card-featured {
    grid-row: 1 / 3;
    background: linear-gradient(145deg, #ffffff 0%, #f8faf9 100%);
    border-radius: 24px;
    border: 1px solid rgba(127,166,155,0.12);
    padding: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(127,166,155,0.15);
    border-color: rgba(127,166,155,0.25);
}

.featured-glow {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(127,166,155,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.event-ribbon {
    position: absolute;
    top: 20px;
    right: -32px;
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    color: white;
    padding: 6px 40px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    transform: rotate(45deg);
    box-shadow: 0 4px 12px rgba(127,166,155,0.3);
}

.featured-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-date-creative.featured-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.date-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(127,166,155,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-icon-wrapper i {
    font-size: 1.1rem;
    color: var(--color-sage);
}

.date-info {
    display: flex;
    flex-direction: column;
}

.date-range {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1;
}

.date-month {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-sage);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.event-name-featured {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0 0 16px;
    line-height: 1.2;
}

.event-meta-featured {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 0.9rem;
}

.meta-item i {
    color: var(--color-sage);
    font-size: 0.85rem;
    width: 16px;
}

.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.event-tag {
    padding: 5px 12px;
    background: rgba(127,166,155,0.08);
    border: 1px solid rgba(127,166,155,0.15);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-sage);
    letter-spacing: 0.3px;
}

.event-btn-featured {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    color: white;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: auto;
    width: fit-content;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(127,166,155,0.25);
}

.event-btn-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(127,166,155,0.35);
}

.event-btn-featured i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.event-btn-featured:hover i {
    transform: translateX(4px);
}

.featured-visual {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 120px;
    height: 120px;
    opacity: 0.6;
}

.visual-globe {
    position: relative;
    width: 100%;
    height: 100%;
}

.globe-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(127,166,155,0.08);
    border-radius: 50%;
    border: 2px dashed rgba(127,166,155,0.2);
}

.globe-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(127,166,155,0.1);
    border-radius: 50%;
}

.globe-ring.ring-1 {
    width: 80px;
    height: 80px;
    animation: ringPulse 3s ease-in-out infinite;
}

.globe-ring.ring-2 {
    width: 100px;
    height: 100px;
    animation: ringPulse 3s ease-in-out infinite 0.5s;
}

@keyframes ringPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}

.location-ping {
    position: absolute;
    top: 35%;
    left: 45%;
    width: 10px;
    height: 10px;
    background: var(--color-sage);
    border-radius: 50%;
    animation: locationPing 2s ease-in-out infinite;
}

@keyframes locationPing {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(127,166,155,0.4); }
    50% { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(127,166,155,0); }
}

/* Regular Event Cards */
.event-card-creative {
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(127,166,155,0.1);
    padding: 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card-creative:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(127,166,155,0.12);
    border-color: rgba(127,166,155,0.2);
}

.card-corner-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent 50%, rgba(127,166,155,0.06) 50%);
}

.event-countdown {
    position: absolute;
    top: 12px;
    right: 12px;
}

.countdown-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-sage);
    background: rgba(127,166,155,0.1);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.event-date-creative .date-circle {
    width: 70px;
    height: 70px;
    background: linear-gradient(145deg, var(--color-sage), #5d8a7d);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 6px 20px rgba(127,166,155,0.25);
    position: relative;
}

.date-circle .date-day {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.date-circle .date-sep {
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    margin: 4px 0;
}

.date-circle .date-mon {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.5px;
}

.event-content-creative {
    flex: 1;
}

.event-name-creative {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 12px;
    line-height: 1.3;
}

.event-location-creative {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #666;
}

.location-dot {
    width: 6px;
    height: 6px;
    background: var(--color-sage);
    border-radius: 50%;
}

.event-booth {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #888;
}

.event-booth i {
    font-size: 0.75rem;
    color: var(--color-sage);
}

.event-link-creative {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(127,166,155,0.06);
    border-radius: 12px;
    margin-top: 14px;
    color: var(--color-sage);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.event-link-creative:hover {
    background: var(--color-sage);
    color: white;
}

.link-arrow {
    width: 24px;
    height: 24px;
    background: rgba(127,166,155,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.link-arrow i {
    font-size: 0.7rem;
}

.event-link-creative:hover .link-arrow {
    background: rgba(255,255,255,0.2);
    transform: translateX(3px);
}

/* Stats Mini Cards Row */
.events-stats-row {
    grid-column: 2 / 4;
    display: flex;
    gap: 16px;
}

.event-stat-mini {
    flex: 1;
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(127,166,155,0.1);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.event-stat-mini:hover {
    border-color: rgba(127,166,155,0.2);
    box-shadow: 0 8px 24px rgba(127,166,155,0.08);
}

.stat-icon-mini {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(127,166,155,0.1), rgba(127,166,155,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-mini i {
    font-size: 1rem;
    color: var(--color-sage);
}

.stat-content-mini {
    display: flex;
    flex-direction: column;
}

.stat-number-mini {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1;
}

.stat-label-mini {
    font-size: 0.7rem;
    color: #888;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* CTA Button */
.events-cta-creative {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.events-view-all-creative {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: white;
    border: 2px solid var(--color-sage);
    color: var(--color-sage);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.35s ease;
    box-shadow: 0 4px 16px rgba(127,166,155,0.1);
}

.events-view-all-creative:hover {
    background: var(--color-sage);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(127,166,155,0.25);
}

.events-view-all-creative .btn-icon {
    width: 32px;
    height: 32px;
    background: rgba(127,166,155,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.events-view-all-creative:hover .btn-icon {
    background: rgba(255,255,255,0.2);
}

.events-view-all-creative .btn-icon i {
    font-size: 0.85rem;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .events-bento-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 18px;
    }
    
    .event-card-featured {
        padding: 24px;
    }
    
    .event-name-featured {
        font-size: 1.6rem;
    }
}

@media (max-width: 1024px) {
    .events-section-creative {
        padding: 60px 0 50px;
    }
    
    .events-title-creative {
        font-size: 2.4rem;
    }
    
    .events-bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .event-card-featured {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
        min-height: auto;
    }
    
    .events-stats-row {
        grid-column: 1 / 3;
    }
    
    .featured-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .events-header-creative {
        margin-bottom: 30px;
    }
    
    .events-title-creative {
        font-size: 2rem;
    }
    
    .events-bento-grid {
        grid-template-columns: 1fr;
    }
    
    .event-card-featured {
        grid-column: 1;
        padding: 20px;
    }
    
    .event-name-featured {
        font-size: 1.4rem;
    }
    
    .events-stats-row {
        grid-column: 1;
        flex-direction: column;
        gap: 12px;
    }
    
    .event-card-creative {
        padding: 18px;
    }
    
    .floating-calendar,
    .floating-location {
        display: none;
    }
}

@media (max-width: 480px) {
    .events-section-creative {
        padding: 50px 0 40px;
    }
    
    .events-title-creative {
        font-size: 1.75rem;
    }
    
    .header-badge-events {
        padding: 8px 18px;
    }
    
    .event-card-featured {
        padding: 18px;
    }
    
    .event-ribbon {
        font-size: 0.55rem;
        padding: 5px 35px;
        right: -35px;
        top: 15px;
    }
    
    .event-btn-featured {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .events-view-all-creative {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* Keep old premium styles for backward compatibility (hidden) */
.events-section-premium {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

/* Premium Header */
.events-header-premium {
    text-align: center;
    margin-bottom: 64px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.events-badge-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.events-badge-premium {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: rgba(127, 166, 155, 0.08);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: var(--color-sage);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.events-badge-premium:hover {
    background: rgba(127, 166, 155, 0.12);
    border-color: rgba(127, 166, 155, 0.3);
}

/* Premium Title */
.events-title-premium {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-charcoal);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.events-title-highlight {
    font-weight: 600;
    color: var(--color-sage);
    position: relative;
    display: inline-block;
}

.events-title-highlight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-sage);
}

/* Subtitle */
.events-subtitle-premium {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
    opacity: 0.9;
}

/* Events Grid - Perfect 3-Column Symmetry */
.events-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 56px;
}

/* Event Card - Premium Design */
.event-card-premium {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(127, 166, 155, 0.12);
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.event-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.2), transparent, rgba(127, 166, 155, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    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;
}

.event-card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(127, 166, 155, 0.25);
}

.event-card-premium:hover::before {
    opacity: 1;
}

/* Date Badge - Top Left Positioned */
.event-date-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: linear-gradient(135deg, var(--color-sage), rgba(127, 166, 155, 0.85));
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(127, 166, 155, 0.3);
    z-index: 2;
    min-width: 88px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card-premium:hover .event-date-badge {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(127, 166, 155, 0.4);
}

.event-date-day {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}

.event-date-month {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1;
    opacity: 0.95;
}

/* Card Body */
.event-card-body {
    padding: 100px 32px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card Title */
.event-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.event-card-premium:hover .event-card-title {
    color: var(--color-sage);
}

/* Card Details */
.event-card-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.event-detail-bullet {
    color: var(--color-sage);
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.event-detail-text {
    color: #666;
    line-height: 1.5;
}

/* Card Link Button */
.event-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 32px 32px;
    padding: 14px 32px;
    background: transparent;
    border: 1.5px solid rgba(127, 166, 155, 0.3);
    border-radius: 50px;
    color: var(--color-sage);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.event-card-link span {
    transition: transform 0.35s ease;
}

.event-card-link:hover {
    background: var(--color-sage);
    border-color: var(--color-sage);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(127, 166, 155, 0.3);
}

.event-card-premium:hover .event-card-link {
    border-color: var(--color-sage);
}

/* View All Events Button - Premium */
.events-cta-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}

.events-view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    background: var(--color-sage);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    border: 2px solid var(--color-sage);
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 220px;
}

.events-view-all-btn:hover {
    background: rgba(127, 166, 155, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(127, 166, 155, 0.35);
}

.events-view-all-btn:active {
    transform: translateY(-1px);
}

/* Responsive Design - Perfect Symmetry Maintained */
@media (max-width: 1200px) {
    .events-title-premium {
        font-size: 2.5rem;
    }
    
    .events-grid-premium {
        gap: 28px;
    }
    
    .event-card-body {
        padding: 90px 28px 20px;
    }
    
    .event-card-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 1024px) {
    .events-section-premium {
        padding: 80px 0;
    }
    
    .events-header-premium {
        margin-bottom: 56px;
    }
    
    .events-title-premium {
        font-size: 2.2rem;
    }
    
    .events-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .events-section-premium {
        padding: 60px 0;
    }
    
    .events-header-premium {
        margin-bottom: 48px;
    }
    
    .events-title-premium {
        font-size: 1.85rem;
    }
    
    .events-subtitle-premium {
        font-size: 1rem;
    }
    
    .events-grid-premium {
        gap: 20px;
    }
    
    .event-date-badge {
        top: 20px;
        left: 20px;
        padding: 10px 16px;
        min-width: 76px;
    }
    
    .event-date-day {
        font-size: 1.5rem;
    }
    
    .event-date-month {
        font-size: 0.7rem;
    }
    
    .event-card-body {
        padding: 85px 24px 20px;
    }
    
    .event-card-title {
        font-size: 1.25rem;
        margin-bottom: 16px;
    }
    
    .event-detail-item {
        font-size: 0.9rem;
        gap: 10px;
    }
    
    .event-card-link {
        margin: 20px 24px 28px;
        padding: 12px 28px;
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .events-grid-premium {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .events-view-all-btn {
        min-width: 200px;
        padding: 14px 40px;
    }
}

/* OLD STYLES - KEPT FOR BACKWARD COMPATIBILITY */
.events-section {
    background: white;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.event-card {
    background: white;
    padding: 2.5rem;
    border-radius: 24px;
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(127, 166, 155, 0.08);
    transition: var(--transition-base);
    position: relative;
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-base);
}

.event-card:hover::before {
    transform: scaleX(1);
}

.event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 48px rgba(127, 166, 155, 0.15);
    border-color: var(--border-color);
}

.event-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.date-day {
    font-size: 1.75rem;
    font-weight: 300;
}

.date-month {
    font-size: 0.875rem;
    font-weight: 300;
    text-transform: uppercase;
}

.event-content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.event-location,
.event-booth {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-weight: 300;
    padding-left: 1.25rem;
    position: relative;
}

.event-location::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
}

.event-booth::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 4px;
    background: var(--text-light);
    border-radius: 50%;
}

.event-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.75rem;
    background: white;
    color: var(--primary-color);
    font-weight: 300;
    font-size: 0.9rem;
    border-radius: 50px;
    border: 2px solid var(--primary-color);
    transition: var(--transition-base);
}

.event-link:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(127, 166, 155, 0.25);
}

.events-cta {
    text-align: center;
    margin-top: 3rem;
}

.events-cta .btn {
    min-width: 200px;
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
}

/* ===== CONTACT SECTION - CREATIVE REDESIGN ===== */
/* ========== GET IN TOUCH - BENTO CREATIVE DESIGN ========== */

.contact-section-creative {
    background: linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0 60px;
}

/* Animated Background Elements */
.contact-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.contact-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(127,166,155,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,166,155,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: contactGridFloat 25s linear infinite;
}

@keyframes contactGridFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.floating-envelope {
    position: absolute;
    top: 18%;
    left: 8%;
    width: 70px;
    height: 70px;
    background: rgba(127,166,155,0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatEnvelope 6s ease-in-out infinite;
}

.floating-envelope i {
    font-size: 1.6rem;
    color: rgba(127,166,155,0.15);
}

.floating-phone {
    position: absolute;
    bottom: 25%;
    right: 6%;
    width: 55px;
    height: 55px;
    background: rgba(127,166,155,0.05);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatPhone 5s ease-in-out infinite 1s;
}

.floating-phone i {
    font-size: 1.3rem;
    color: rgba(127,166,155,0.12);
}

@keyframes floatEnvelope {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(-5deg); }
}

@keyframes floatPhone {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

.connection-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.conn-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.08), transparent);
    height: 1px;
}

.conn-line.line-1 {
    top: 30%;
    left: 0;
    width: 100%;
    animation: lineMove 8s linear infinite;
}

.conn-line.line-2 {
    top: 50%;
    left: 0;
    width: 100%;
    animation: lineMove 10s linear infinite 2s;
}

.conn-line.line-3 {
    top: 70%;
    left: 0;
    width: 100%;
    animation: lineMove 12s linear infinite 4s;
}

@keyframes lineMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Creative Header */
.contact-header-creative {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.header-message-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

.message-sphere {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(127,166,155,0.3),
        inset 0 -4px 12px rgba(0,0,0,0.1);
    animation: messageFloat 4s ease-in-out infinite;
}

.message-sphere i {
    font-size: 1.3rem;
    color: white;
    transform: rotate(-15deg);
}

.message-highlight {
    position: absolute;
    top: 10px;
    left: 14px;
    width: 12px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
}

.message-orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-sage);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 8px rgba(127,166,155,0.5);
    animation: messageOrbit 4s linear infinite;
}

@keyframes messageFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes messageOrbit {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(38px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(38px) rotate(-360deg); }
}

.header-badge-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    background: rgba(127,166,155,0.08);
    border: 1px solid rgba(127,166,155,0.15);
    border-radius: 50px;
    margin-bottom: 16px;
}

.badge-dot-contact {
    width: 6px;
    height: 6px;
    background: var(--color-sage);
    border-radius: 50%;
    animation: dotPulseContact 2s ease-in-out infinite;
}

.badge-text-contact {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--color-sage);
    text-transform: uppercase;
}

@keyframes dotPulseContact {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.contact-title-creative {
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--color-charcoal);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.title-highlight-contact {
    font-weight: 600;
    color: var(--color-sage);
    position: relative;
}

.title-highlight-contact::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-sage), rgba(127,166,155,0.3));
    border-radius: 2px;
}

.contact-subtitle-creative {
    font-size: 1rem;
    color: #666;
    margin: 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* ===== BENTO GRID LAYOUT ===== */
.contact-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Left Column - Info Cards */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Quick Connect Card */
.contact-quick-card {
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    border-radius: 20px;
    padding: 20px;
    color: white;
}

.quick-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.quick-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-icon i {
    font-size: 0.9rem;
    color: white;
}

.quick-card-header span {
    font-size: 1rem;
    font-weight: 600;
}

.quick-actions {
    display: flex;
    gap: 12px;
}

.quick-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.quick-action-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.quick-action-btn i {
    font-size: 0.9rem;
}

/* Office Cards Grid */
.office-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.office-card-creative {
    background: white;
    border-radius: 18px;
    border: 1px solid rgba(127,166,155,0.1);
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.office-card-creative:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(127,166,155,0.12);
    border-color: rgba(127,166,155,0.2);
}

.office-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-sage), rgba(127,166,155,0.3));
    border-radius: 4px 0 0 4px;
}

.office-icon-wrapper {
    position: relative;
    margin-bottom: 12px;
}

.office-icon-bg {
    width: 40px;
    height: 40px;
    background: rgba(127,166,155,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.office-icon-bg i {
    font-size: 1rem;
    color: var(--color-sage);
}

.office-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-sage);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.office-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 8px;
}

.office-content p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.office-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(127,166,155,0.15);
}

.indicator-dot {
    width: 6px;
    height: 6px;
    background: #4CAF50;
    border-radius: 50%;
    animation: indicatorPulse 2s ease-in-out infinite;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.office-indicator span {
    font-size: 0.7rem;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Email Card */
.email-card-creative {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(127,166,155,0.1);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s ease;
}

.email-card-creative:hover {
    border-color: rgba(127,166,155,0.2);
    box-shadow: 0 8px 24px rgba(127,166,155,0.08);
}

.email-icon-creative {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(127,166,155,0.15), rgba(127,166,155,0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.email-icon-creative i {
    font-size: 1.1rem;
    color: var(--color-sage);
}

.email-content-creative {
    flex: 1;
}

.email-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 4px;
}

.email-link-creative {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-sage);
    transition: all 0.3s ease;
}

.email-link-creative i {
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.email-link-creative:hover {
    color: #5d8a7d;
}

.email-link-creative:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* Social Links Card */
.social-card-creative {
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(127,166,155,0.1);
    padding: 18px;
}

.social-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.social-card-header span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-charcoal);
}

.social-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(127,166,155,0.2), transparent);
}

.social-links-creative {
    display: flex;
    gap: 10px;
}

.social-link-creative {
    width: 42px;
    height: 42px;
    background: rgba(127,166,155,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sage);
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.social-link-creative:hover {
    background: var(--color-sage);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(127,166,155,0.25);
}

.social-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--color-charcoal);
    color: white;
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.social-link-creative:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-6px);
}

/* ===== RIGHT COLUMN - STICKY FORM ===== */
.contact-form-column {
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.contact-form-creative {
    background: white;
    border-radius: 24px;
    border: 1px solid rgba(127,166,155,0.12);
    padding: 28px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.06);
}

.form-header-creative {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(127,166,155,0.1);
}

.form-icon-creative {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-icon-creative i {
    font-size: 1.2rem;
    color: white;
}

.form-title-creative h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0 0 4px;
}

.form-title-creative p {
    font-size: 0.8rem;
    color: #888;
    margin: 0;
}

.form-body-creative {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row-creative {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-field-creative {
    position: relative;
}

.form-field-creative.full-width {
    grid-column: 1 / -1;
}

.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.field-icon i {
    font-size: 0.85rem;
    color: #aaa;
    transition: color 0.3s ease;
}

.form-field-creative.textarea-field .field-icon {
    top: 18px;
    transform: none;
}

.form-field-creative input,
.form-field-creative select,
.form-field-creative textarea {
    width: 100%;
    padding: 14px 14px 14px 42px;
    border: 1.5px solid rgba(127,166,155,0.15);
    border-radius: 12px;
    background: #fafbfa;
    font-family: inherit;
    font-size: 0.9rem;
    color: #333333;
    transition: all 0.3s ease;
    outline: none;
}

/* ============================================
   PLACEHOLDER STYLES - ULTIMATE FIX
   Force display in #AAAAAA across ALL browsers
   ============================================ */

/* Standard (Modern Browsers) */
.form-field-creative input::placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #AAAAAA !important;
}

.form-field-creative textarea::placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #AAAAAA !important;
}

/* WebKit (Chrome, Safari, Edge Chromium) */
.form-field-creative input::-webkit-input-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #AAAAAA !important;
}

.form-field-creative textarea::-webkit-input-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #AAAAAA !important;
}

/* Mozilla Firefox */
.form-field-creative input::-moz-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
}

.form-field-creative textarea::-moz-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
}

/* Internet Explorer 10-11 */
.form-field-creative input:-ms-input-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
}

.form-field-creative textarea:-ms-input-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
}

/* Microsoft Edge (Legacy) */
.form-field-creative input::-ms-input-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
}

.form-field-creative textarea::-ms-input-placeholder {
    color: #AAAAAA !important;
    opacity: 1 !important;
}

/* Select Dropdown - Valid state */
.form-field-creative select {
    color: #333333;
}

/* Select Dropdown - Placeholder state (invalid) */
.form-field-creative select:required:invalid {
    color: #AAAAAA !important;
}

/* Dropdown Options */
.form-field-creative select option {
    color: #333333;
}

/* The first 'placeholder' option in the list */
.form-field-creative select option[value=""][disabled] {
    color: #AAAAAA;
}

.form-field-creative input:focus,
.form-field-creative select:focus,
.form-field-creative textarea:focus {
    border-color: var(--color-sage);
    background: white;
    box-shadow: 0 0 0 3px rgba(127,166,155,0.1);
}

.form-field-creative input:focus + .field-icon i,
.form-field-creative:focus-within .field-icon i {
    color: var(--color-sage);
}

.form-field-creative textarea {
    resize: vertical;
    min-height: 100px;
}

.form-field-creative.select-field {
    position: relative;
}

.form-field-creative select {
    appearance: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.select-arrow i {
    font-size: 0.75rem;
    color: #888;
}

/* Submit Button */
.submit-btn-creative {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--color-sage) 0%, #5d8a7d 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    transition: all 0.35s ease;
}

.submit-btn-creative:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(127,166,155,0.3);
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    color: white;
    font-size: 1rem;
    font-weight: 500;
}

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

.submit-btn-creative:hover .btn-content i {
    transform: translateX(4px) rotate(-15deg);
}

.btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #5d8a7d 0%, var(--color-sage) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.submit-btn-creative:hover .btn-bg {
    opacity: 1;
}

/* Form Footer */
.form-footer-creative {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(127,166,155,0.15);
}

.response-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #888;
}

.response-time i {
    font-size: 0.85rem;
    color: var(--color-sage);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .contact-bento-grid {
        gap: 24px;
    }
    
    .office-cards-grid {
        gap: 12px;
    }
}

@media (max-width: 1024px) {
    .contact-section-creative {
        padding: 60px 0 50px;
    }
    
    .contact-title-creative {
        font-size: 2.4rem;
    }
    
    .contact-bento-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .contact-form-column {
        position: relative;
        top: 0;
    }
    
    .office-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .contact-header-creative {
        margin-bottom: 30px;
    }
    
    .contact-title-creative {
        font-size: 2rem;
    }
    
    .form-row-creative {
        grid-template-columns: 1fr;
    }
    
    .office-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .floating-envelope,
    .floating-phone {
        display: none;
    }
    
    .contact-form-creative {
        padding: 22px;
    }
}

@media (max-width: 480px) {
    .contact-section-creative {
        padding: 50px 0 40px;
    }
    
    .contact-title-creative {
        font-size: 1.75rem;
    }
    
    .header-badge-contact {
        padding: 8px 18px;
    }
    
    .social-links-creative {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .contact-form-creative {
        padding: 18px;
        border-radius: 20px;
    }
    
    .form-header-creative {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* Keep old contact styles for backward compatibility */
.contact-section {
    background: var(--surface-light);
    position: relative;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
    position: relative;
}

.contact-description {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.contact-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(127, 166, 155, 0.15);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.08) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(127, 166, 155, 0.3);
    transform: translateX(8px) translateY(-4px);
    box-shadow: 0 12px 40px rgba(127, 166, 155, 0.15);
}

.contact-item:hover::before {
    opacity: 1;
}

.contact-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.15) 0%, rgba(127, 166, 155, 0.08) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(127, 166, 155, 0.2);
}

.contact-icon::before {
    display: none;
}

.contact-icon i {
    display: block;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.contact-item:hover .contact-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.3);
}

.contact-item:hover .contact-icon i {
    color: white;
    transform: scale(1.1);
}

.contact-content h4 {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.contact-item:hover .contact-content h4 {
    color: var(--primary-color);
}

.contact-content p,
.contact-content a {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.contact-content a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 300;
    color: var(--primary-color);
    transition: all 0.3s ease;
    position: relative;
}

.contact-content a::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.contact-content a:hover {
    color: var(--primary-dark);
    transform: translateX(3px);
}

.contact-content a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.25rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(127, 166, 155, 0.2);
    position: relative;
    overflow: hidden;
}

.social-links a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.social-links a i {
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.social-links a:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 24px rgba(127, 166, 155, 0.3);
}

.social-links a:hover::before {
    width: 100%;
    height: 100%;
}

.social-links a:hover i {
    color: white;
    transform: scale(1.1) rotate(5deg);
}

.contact-form-wrapper {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 100px;
    align-self: flex-start;
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transition: box-shadow 0.3s ease;
    scroll-behavior: smooth;
}

/* Add subtle animation when form becomes sticky */
@media (min-width: 1025px) {
    .contact-form-wrapper {
        will-change: transform;
    }
    
    .contact-form-wrapper:hover {
        transform: translateZ(0) translateY(-2px);
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Prevent layout shifts */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    position: relative;
    /* Prevent rendering glitches in form fields */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1.125rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: white;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    transition: var(--transition-base);
    outline: none;
}

.form-group label {
    position: absolute;
    left: 1.25rem;
    top: 1.125rem;
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 300;
    pointer-events: none;
    transition: var(--transition-base);
    background: white;
    padding: 0 0.5rem;
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label,
.form-group select:focus ~ label,
.form-group select:not([value=""]) ~ label {
    top: -0.625rem;
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 300;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(127, 166, 155, 0.12);
}

.form-line {
    display: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 20px rgba(127, 166, 155, 0.3);
}

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

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(127, 166, 155, 0.4);
}

.btn-primary span {
    position: relative;
    z-index: 1;
}

.btn-secondary {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 16px rgba(127, 166, 155, 0.15);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(127, 166, 155, 0.3);
}

.btn-submit {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
}

/* ===== FOOTER ===== */
/* ========== FOOTER - INDUSTRY & CORPORATE LEVEL DESIGN ========== */

.footer-premium {
    background: linear-gradient(180deg, #496960 0%, #01120d 100%);
    color: #f8fafc;
    position: relative;
    padding: 120px 0 0;
    margin-top: -1px;
    overflow: hidden;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.footer-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(56, 189, 248, 0.8),
        rgba(99, 102, 241, 0.8),
        transparent
    );
    animation: topBorderSweep 6s linear infinite;
}

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

/* ===== ADVANCED ANIMATED BACKGROUND ===== */

/* 1. Dynamic Data Grid Background */
.footer-background-animation {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.footer-background-animation::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(56, 189, 248, 0.05),
        transparent
    );
    animation: shimmerSweep 8s linear infinite;
}

@keyframes shimmerSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.footer-background-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(56, 189, 248, 0.02) 0px,
        transparent 2px,
        transparent 4px
    );
    animation: scanLines 4s linear infinite;
}

@keyframes scanLines {
    0% { transform: translateY(0); }
    100% { transform: translateY(8px); }
}

.footer-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, black 40%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
    animation: gridShift 30s linear infinite;
}

@keyframes gridShift {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* 2. Floating Cyber Particles */
.footer-particles {
    position: absolute;
    inset: 0;
}

.footer-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(127, 166, 155, 0.4);
    box-shadow: 0 0 4px rgba(127, 166, 155, 0.8);
    border-radius: 50%;
    animation: rise 20s infinite linear;
}

@keyframes rise {
    0% { 
        transform: translateY(100vh) translateX(0) scale(0); 
        opacity: 0; 
    }
    10% {
        opacity: 1;
    }
    50% { 
        opacity: 1;
        transform: translateY(50vh) translateX(20px) scale(1);
    }
    90% {
        opacity: 0.5;
    }
    100% { 
        transform: translateY(-10vh) translateX(-10px) scale(1.5); 
        opacity: 0; 
    }
}

@keyframes riseSwirl {
    0% { 
        transform: translateY(100vh) rotate(0deg) translateX(0) scale(0); 
        opacity: 0; 
    }
    10% {
        opacity: 1;
    }
    50% { 
        opacity: 1;
        transform: translateY(50vh) rotate(180deg) translateX(30px) scale(1.2);
    }
    90% {
        opacity: 0.5;
    }
    100% { 
        transform: translateY(-10vh) rotate(360deg) translateX(0) scale(1.5); 
        opacity: 0; 
    }
}

/* Generate multiple particles via simple CSS classes for efficiency */
.fp-1 { 
    left: 10%; 
    animation: rise 25s infinite linear; 
    animation-delay: 0s; 
}
.fp-2 { 
    left: 20%; 
    animation: riseSwirl 35s infinite linear; 
    animation-delay: 2s; 
    width: 3px; 
    height: 3px; 
}
.fp-3 { 
    left: 35%; 
    animation: rise 22s infinite linear; 
    animation-delay: 4s; 
}
.fp-4 { 
    left: 50%; 
    animation: riseSwirl 30s infinite linear; 
    animation-delay: 1s; 
    width: 4px; 
    height: 4px; 
    background: rgba(99, 102, 241, 0.4); 
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.8);
}
.fp-5 { 
    left: 65%; 
    animation: rise 28s infinite linear; 
    animation-delay: 3s; 
}
.fp-6 { 
    left: 80%; 
    animation: riseSwirl 32s infinite linear; 
    animation-delay: 5s; 
    width: 3px; 
    height: 3px; 
}
.fp-7 { 
    left: 90%; 
    animation: rise 24s infinite linear; 
    animation-delay: 2s; 
}

/* Twinkling Stars Effect */
.footer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.footer-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.fs-1 { top: 15%; left: 12%; animation-delay: 0s; animation-duration: 2.5s; }
.fs-2 { top: 25%; left: 28%; animation-delay: 0.5s; animation-duration: 3s; }
.fs-3 { top: 35%; left: 45%; animation-delay: 1s; animation-duration: 2.8s; }
.fs-4 { top: 42%; left: 68%; animation-delay: 1.5s; animation-duration: 3.2s; }
.fs-5 { top: 55%; left: 85%; animation-delay: 0.8s; animation-duration: 2.7s; }
.fs-6 { top: 65%; left: 22%; animation-delay: 1.2s; animation-duration: 3.1s; }
.fs-7 { top: 72%; left: 52%; animation-delay: 0.3s; animation-duration: 2.9s; }
.fs-8 { top: 18%; left: 78%; animation-delay: 1.8s; animation-duration: 3.3s; }
.fs-9 { top: 48%; left: 8%; animation-delay: 0.6s; animation-duration: 2.6s; }
.fs-10 { top: 82%; left: 92%; animation-delay: 1.4s; animation-duration: 3.4s; }

/* 3. Ambient Glow Orbs */
.footer-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    z-index: 0;
}

.fg-1 {
    top: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 70%);
    animation: pulseGlow 15s infinite alternate, floatOrb1 25s infinite ease-in-out;
}

.fg-2 {
    bottom: -20%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
    animation: pulseGlow 20s infinite alternate-reverse, floatOrb2 30s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.5; }
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(20px, 10px) scale(1.1); }
    75% { transform: translate(-20px, -15px) scale(1.05); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-25px, 15px) scale(1.05); }
    50% { transform: translate(-35px, -20px) scale(1.1); }
    75% { transform: translate(15px, 20px) scale(1.05); }
}

/* 4. Top Wave Separator - Clean Geometric */
.footer-wave-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff; /* Match previous section bg */
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' style='fill:black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' style='fill:black'/%3E%3C/svg%3E");
    mask-size: cover;
    -webkit-mask-size: cover;
    z-index: 10;
}

/* ===== FOOTER CONTENT LAYOUT ===== */
.footer-grid-premium {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
    gap: 50px;
}

/* Brand Column */
.footer-brand-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-logo-img {
    height: 48px;
    width: auto;
    filter: brightness(0) invert(1); /* Pure white logo */
    opacity: 0.9;
    transition: all 0.4s ease;
    position: relative;
}

.footer-brand-logo {
    position: relative;
    display: inline-block;
}

.footer-brand-logo::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, #7fa69b, transparent 70%);
    opacity: 0;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.6;
    }
}

.footer-logo-img:hover {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px #7fa69b);
    transform: scale(1.05);
}

.footer-brand-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #94a3b8; /* Slate 400 */
    max-width: 380px;
}

/* Social Icons - Glassmorphism */
.footer-social-premium {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

/* Offices Column */
.footer-offices-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-office-block {
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.footer-office-block::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(
        45deg,
        rgba(56, 189, 248, 0.3),
        rgba(99, 102, 241, 0.3),
        rgba(56, 189, 248, 0.3)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    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;
    animation: borderPulse 3s ease-in-out infinite;
}

.footer-office-block:hover::before {
    opacity: 1;
}

.footer-office-block:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(56, 189, 248, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.15);
}

@keyframes borderPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.footer-office-title {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: #e2e8f0;
    text-transform: uppercase;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
}

.footer-office-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7fa69b, #0c8562);
}

.footer-office-address {
    margin: 0;
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.55;
}

.footer-social-link {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    position: relative;
}

.footer-social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.5), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-social-link i {
    position: relative;
    z-index: 1;
}

.footer-social-link:hover::before {
    opacity: 1;
    animation: socialPulse 1.5s ease-in-out infinite;
}

.footer-social-link:hover {
    background: rgba(127, 166, 155, 0.15);
    border-color: rgba(127, 166, 155, 0.4);
    color: #7fa69b;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 20px -5px rgba(127, 166, 155, 0.3);
}

@keyframes socialPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Links Columns */
.footer-column-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
    animation: titleGlow 3s ease-in-out infinite;
}

.footer-column-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #7fa69b, #0c8562);
    box-shadow: 0 0 8px rgba(127, 166, 155, 0.6);
    transition: width 0.4s ease;
    animation: lineGlow 2s ease-in-out infinite;
}

.footer-links-column:hover .footer-column-title::after,
.footer-offices-column:hover .footer-column-title::after {
    width: 100%;
}

@keyframes titleGlow {
    0%, 100% { 
        text-shadow: 0 0 10px rgba(127, 166, 155, 0.3);
    }
    50% { 
        text-shadow: 0 0 20px rgba(127, 166, 155, 0.5), 0 0 30px rgba(99, 102, 241, 0.3);
    }   
}

@keyframes lineGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(127, 166, 155, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(127, 166, 155, 0.8), 0 0 25px rgba(99, 102, 241, 0.5);
    }
}

.footer-column-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 32px;
    height: 3px;
    background: #7fa69b;
    border-radius: 2px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 4px 0;
}

.footer-links-list a::before {
    content: '›';
    color: #7fa69b;
    font-weight: bold;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.footer-links-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
        background: linear-gradient(90deg, rgba(127, 166, 155, 0.8), transparent);
    transition: width 0.4s ease;
    box-shadow: 0 0 8px rgba(127, 166, 155, 0.5);
}

.footer-links-list a:hover::after {
    width: 100%;
}

.footer-links-list a:hover {
    color: #e2e8f0;
    transform: translateX(8px);
    text-shadow: 0 0 10px rgba(127, 166, 155, 0.3);
}

.footer-links-list a:hover::before {
    opacity: 1;
    transform: translateX(0);
    animation: arrowBounce 0.6s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);
    }
}

/* Newsletter / Contact Column (If used in future, layout ready) */
.footer-contact-info {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
}

/* ===== FOOTER BOTTOM BAR ===== */
.footer-bottom-premium {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(127, 166, 155, 0.08); /* Subtle separator */
    background: rgba(1, 18, 13, 0.5); /* Darker backdrop */
    padding: 24px 0;
}

.footer-bottom-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright p,
.footer-credit p {
    margin: 0;
    color: #64748b; /* Slate 500 */
    font-size: 0.9rem;
}

.footer-credit a {
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
}

.footer-credit a:hover {
    color: #7fa69b;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1400px) {
    .footer-grid-premium {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
        gap: 35px;
    }
}

@media (max-width: 1024px) {
    .footer-premium {
        padding-top: 100px;
    }
    
    .footer-grid-premium {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
    }
    
    .footer-brand-column {
        grid-column: 1 / -1;
    }
    
    .footer-offices-column {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .footer-grid-premium {
        grid-template-columns: 1fr;
        padding-bottom: 40px;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    
    .footer-column-title {
        font-size: 1rem;
    }

    .footer-logo-img {
        max-width: 180px;
    }
}

/* Performance Optimization */
@media (prefers-reduced-motion: reduce) {
    .footer-mesh-gradient,
    .footer-glow,
    .footer-particle,
    .footer-wave-divider svg,
    .footer-grid-line {
        animation: none;
    }
}

/* OLD FOOTER STYLES - KEPT FOR BACKWARD COMPATIBILITY */
.footer {
    background: var(--text-primary);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 300;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.footer-logo .footer-logo-image {
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: var(--transition-base);
}

.footer-logo:hover .footer-logo-image {
    opacity: 0.85;
    transform: scale(1.02);
}

.footer-logo .logo-number {
    color: var(--primary-light);
}

.footer-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition-base);
}

.footer-social a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

.footer-column h3 {
    font-size: 1.125rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    transition: var(--transition-base);
}

.footer-links a:hover {
    color: var(--primary-light);
    padding-left: 0.5rem;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
    color: var(--primary-light);
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* ===== SCROLL TO TOP ===== */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 999;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--primary-dark);
    transform: translateY(-5px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .hero .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-image {
        order: -1;
    }
    
    .innovation-content,
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    /* Disable sticky on tablet and below */
    .contact-form-wrapper {
        position: relative;
        top: auto;
        max-height: none;
        overflow-y: visible;
    }
    
    .innovation-visual {
        order: -1;
    }
    
    .visual-grid {
        height: 480px;
    }
    
    .point-icon-wrapper .point-icon {
        width: 56px;
        height: 56px;
    }
    
    .point-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: var(--shadow-lg);
        transition: var(--transition-base);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    /* Responsive Logo Styles for Tablet */
    .nav-logo .logo-image {
        height: 38px;
        max-width: 150px;
    }
    
    .footer-logo .footer-logo-image {
        height: 42px;
        max-width: 170px;
    }
    
    .btn-nav {
        display: none;
    }
    
    .hero {
        padding: 6rem 0 3rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        flex-wrap: wrap;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .about-grid,
    .values-grid,
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    .about-visual {
        padding: 3rem 2rem;
    }
    
    .visual-stats {
        flex-direction: column;
        gap: 2rem;
    }
    
    .animated-words {
        font-size: 2rem;
        height: 60px;
    }
    
    .floating-card {
        display: none;
    }
    
    .floating-shape {
        display: none;
    }
    
    .innovation-points {
        gap: 1.25rem;
    }
    
    .point-item {
        padding: 1rem;
        gap: 1rem;
    }
    
    .metric-value {
        font-size: 2.75rem;
    }
}

@media (max-width: 576px) {
    :root {
        font-size: 14px;
    }
    
    .container {
        padding: 0 1.5rem;
    }
    
    section {
        padding: 4rem 0;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .visual-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 280px auto auto;
        height: auto;
    }
    
    .visual-item.large {
        grid-column: 1;
        grid-row: 1;
    }
    
    .point-icon-wrapper .point-icon {
        width: 52px;
        height: 52px;
    }
    
    .point-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .metric-card {
        padding: 1.75rem 1.5rem;
    }
    
    .metric-value {
        font-size: 2.5rem;
    }
    
    .visual-item.large {
        grid-column: 1;
        grid-row: auto;
    }
    
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== SMOOTH SCROLLING & ANIMATIONS ===== */
[data-aos] {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos="fade-up"] {
    transform: translateY(40px);
    filter: blur(8px);
}

[data-aos="fade-left"] {
    transform: translateX(40px);
    filter: blur(8px);
}

[data-aos="fade-right"] {
    transform: translateX(-40px);
    filter: blur(8px);
}

[data-aos="fade-down"] {
    transform: translateY(-40px);
    filter: blur(8px);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
    filter: blur(10px);
}

[data-aos="zoom-out"] {
    transform: scale(1.1);
    filter: blur(10px);
}

[data-aos="blur-in"] {
    filter: blur(15px);
    transform: scale(1.02);
}

[data-aos="slide-up"] {
    transform: translateY(60px);
    filter: blur(5px);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0) scale(1);
    filter: blur(0);
}

/* Word-by-word reveal animation */
.reveal-text {
    overflow: hidden;
}

.reveal-text .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Character-by-character reveal */
.reveal-chars .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotateX(-40deg);
    filter: blur(4px);
    transition: opacity 0.4s ease,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.4s ease;
}

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

/* Staggered card animations */
.stagger-item {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Smooth fade mask for scroll */
.scroll-fade-mask {
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Progressive blur on scroll (applied via JS) */
.scroll-blur {
    transition: filter 0.3s ease;
}

/* Smooth parallax text */
.parallax-text {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Section reveal animations */
.section-reveal {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(6px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Image reveal with blur */
.image-reveal {
    overflow: hidden;
    position: relative;
}

.image-reveal img {
    transform: scale(1.1);
    filter: blur(10px);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s ease;
}

.image-reveal.revealed img {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}

/* Smooth line reveal */
.line-reveal {
    position: relative;
    overflow: hidden;
}

.line-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background);
    transform: translateX(-101%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.line-reveal.revealed::after {
    transform: translateX(101%);
}

/* Gradient text reveal */
.gradient-reveal {
    background: linear-gradient(90deg, var(--text-primary) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.gradient-reveal.revealed {
    background-position: 0% 0;
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* ===== RESPONSIVE ABOUT SECTION ===== */
@media (max-width: 1024px) {
    .about-card {
        padding: 2.5rem 2rem;
    }
    
    .card-number {
        font-size: 4rem;
        margin-bottom: -1.5rem;
    }
    
    .about-card h3 {
        font-size: 1.5rem;
    }
    
    .about-card p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 6rem 0;
    }
    
    .section-header {
        margin-bottom: 4rem;
    }
    
    .about-card {
        padding: 2rem 1.75rem;
    }
    
    .about-card:hover {
        transform: translateY(-8px) scale(1.01);
    }
    
    .card-number {
        font-size: 3.5rem;
        margin-bottom: -1.25rem;
    }
    
    .about-card h3 {
        font-size: 1.375rem;
    }
    
    .about-card p {
        font-size: 0.9375rem;
        line-height: 1.75;
    }
    
    .card-link {
        font-size: 0.9375rem;
    }
    
    .about-visual {
        padding: 4rem 2rem;
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .about-card {
        padding: 1.75rem 1.5rem;
    }
    
    .card-number {
        font-size: 3rem;
        margin-bottom: -1rem;
    }
    
    .about-card h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .about-card p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
}
.mt-4 { margin-top: 2rem; }

/* ===== ABSOLUTE COUNTER DISPLAY OVERRIDE ===== */
/* Force all counter elements to display in #7fa69b color */
span.count,
.count,
[data-target] {
    color: #7fa69b !important;
    display: inline-block !important;
    font-weight: 300 !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 1ch;
}

/* Hero STATS counters — override global count color so numbers are bright white on dark glass cards */
.hero-stats .stat-value .count,
.hero-stats .stat-value [data-target] {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(127,166,155,0.55), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* Hero section counters */
.hero-stats .stat-number .count,
.hero-stats .stat-number span {
    color: #7fa69b !important;
}

/* About section counters */
.about-visual .stat-value .count,
.about-visual .stat-value span {
    color: #7fa69b !important;
    background: linear-gradient(180deg, #7fa69b 0%, #7fa69b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Network section counters */
.network-stats .stat-value .count,
.network-stats .stat-value span {
    color: #7fa69b !important;
}

/* Innovation section counters */
.innovation-section .metric-value .count,
.innovation-section .metric-value span {
    color: #7fa69b !important;
    background: linear-gradient(135deg, #7fa69b 0%, #9BBFB3 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== COMPREHENSIVE MOBILE RESPONSIVE STYLES ===== */

/* Tablet & Below - 1024px */
@media (max-width: 1024px) {
    /* Navigation Tablet */
    .nav-container {
        padding: 0 1.5rem;
    }
    
    .nav-logo .logo-image {
        height: 40px;
        max-width: 160px;
    }
    
    .nav-link {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }
    
    .btn-nav {
        padding: 0.65rem 1.5rem;
        font-size: 0.85rem;
    }
    
    /* Hero Section Tablet */
    .hero {
        min-height: 650px;
        height: auto;
        padding: 100px 0 80px;
    }
    
    .hero-video-wrapper {
        top: -5%;
        left: 0%;
        width: 110%;
        height: 110%;
    }
    
    .hero-title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
    }
    
    .hero-subtitle p {
        font-size: 1.15rem;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .stat-card {
        flex: 1 1 calc(50% - 20px);
        min-width: 200px;
    }
    
    /* About Section Tablet */
    .about-section {
        padding: 5rem 0;
    }
    
    .about-main-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .about-header {
        margin-bottom: 3rem;
    }
    
    .about-main-title {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }
    
    .about-subtitle {
        font-size: 1rem;
    }
    
    .feature-card {
        padding: 1.5rem;
        gap: 1.25rem;
    }
    
    .showcase-card {
        height: 380px;
    }
    
    .showcase-title {
        font-size: 1.2rem;
    }
    
    .showcase-word {
        font-size: 1.8rem;
    }
}

/* Mobile Large - 768px */
@media (max-width: 768px) {
    /* Navigation Mobile */
    .nav-container {
        padding: 0 1.25rem;
    }
    
    .nav-logo .logo-image {
        height: 38px;
        max-width: 150px;
    }
    
    .nav-menu {
        position: fixed;
        top: 57px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 1.5rem;
        gap: 0.5rem;
        box-shadow: var(--shadow-xl);
        border-bottom: 1px solid var(--border-color);
        transform: translateY(-120%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-link {
        width: 100%;
        padding: 0.85rem 1rem;
        border-radius: 10px;
        text-align: left;
    }
    
    .nav-link::after {
        display: none;
    }
    
    .nav-link:hover,
    .nav-link.active {
        background: rgba(127, 166, 155, 0.08);
    }
    
    .nav-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem;
        border-top: 1px solid var(--border-color);
    }
    
    .btn-nav {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.5rem;
    }
    
    .nav-toggle {
        display: flex;
        z-index: 1001;
    }
    
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
    
    /* Hero Section Mobile */
    .hero {
        min-height: 100vh;
        height: auto;
        padding: 120px 0 60px;
    }
    
    .hero-container {
        padding: 0 1.5rem;
    }
    
    .hero-content-center {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .hero-badge {
        padding: 10px 18px;
        gap: 8px;
        font-size: 0.75rem;
    }
    
    .badge-icon {
        width: 14px;
        height: 14px;
    }
    
    .hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
        margin-bottom: 20px;
        line-height: 1.25;
    }
    
    .title-word {
        margin: 0 0.05em;
    }
    
    .hero-subtitle {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
    }
    
    .hero-subtitle p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .subtitle-line {
        width: 60px;
        height: 1px;
    }
    
    .hero-cta {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        gap: 12px;
    }
    
    .cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
    }
    
    .stat-card {
        width: 100%;
        max-width: 320px;
        padding: 14px 20px;
    }
    
    .stat-divider {
        display: none;
    }
    
    /* About Section Mobile */
    .about-section {
        padding: 4rem 0;
    }
    
    .about-header {
        margin-bottom: 2.5rem;
    }
    
    .about-header-badge {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    
    .about-header-badge .badge-line {
        width: 30px;
    }
    
    .about-header-badge .badge-text {
        font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }
    
    .about-main-title {
        font-size: clamp(1.6rem, 6vw, 2rem);
        margin-bottom: 1.25rem;
    }
    
    .about-subtitle {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .about-features {
        gap: 1.25rem;
    }
    
    .feature-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        text-align: center;
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
    }
    
    .feature-icon-wrap {
        display: flex;
        justify-content: center;
        align-self: center;
    }
    
    .feature-icon {
        width: 50px;
        height: 50px;
    }
    
    .feature-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .feature-content h3 {
        font-size: 1.1rem;
    }
    
    .feature-content p {
        font-size: 0.9rem;
    }
    
    .showcase-card {
        height: 350px;
    }
    
    .showcase-content {
        padding: 1.5rem;
    }
    
    .showcase-badge {
       Navigation Small Mobile */
    .nav-container {
        padding: 0 1rem;
    }
    
    .navbar {
        padding: 1.25rem 0;
    }
    
    .navbar.scrolled {
        padding: 0.85rem 0;
    }
    
    .nav-logo .logo-image {
        height: 36px;
        max-width: 140px;
    }
    
    .nav-menu {
        top: 70px;
        padding: 1.25rem;
    }
    
    .nav-link {
        padding: 0.75rem 0.85rem;
        font-size: 0.85rem;
    }
    
    .btn-nav {
        padding: 0.75rem 1.25rem;
        font-size: 0.85rem;
    }
    
    /*  font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }
    
    .showcase-title {
        font-size: 1.1rem;
    }
    
    .showcase-words {
        height: 45px;
    }
    
    .showcase-word {
        font-size: 1.6rem;
    }
    
    .showcase-corner {
        width: 50px;
        height: 50px;
    }
    
    .float-element.float-1 {
        width: 100px;
        height: 100px;
        top: -20px;
        right: -20px;
    }
    
    .float-element.float-2 {
        width: 70px;
        height: 70px;
        bottom: 15%;
        left: -15px;
    }
    
    .about-stats-bar {
        flex-direction: column;
        gap: 0;
        padding: 1.5rem;
    }
    
    .about-stat-item {
        padding: 1rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(127, 166, 155, 0.1);
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .about-stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .about-stat-item:first-child {
        padding-top: 0;
    }
    
    .stat-divider-v {
        display: none;
    }
    
    .stat-icon-small {
        width: 40px;
        height: 40px;
    }
    
    .stat-icon-small svg {
        width: 20px;
        height: 20px;
    }
    
    .stat-num {
        font-size: 1.35rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
}

/* Mobile Medium - 576px */
@media (max-width: 576px) {
    /* Hero Section Small Mobile */
    .hero {
        padding: 100px 0 50px;
    }
    
    .hero-container {
        padding: 0 1.25rem;
    }
    
    .hero-content-center {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .hero-badge {
        padding: 8px 16px;
        font-size: 0.7rem;
    }
    
    .hero-title {
        font-size: clamp(1.75rem, 10vw, 2.25rem);
        margin-bottom: 16px;
    }
    
    .hero-subtitle p {
        font-size: 0.95rem;
    }
    
    .hero-cta {
        max-width: 280px;
        gap: 10px;
    }
    
    .cta-btn {
        padding: 11px 20px;
        font-size: 0.85rem;
    }
    
    .cta-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .hero-stats {
        margin-top: 35px;
        gap: 12px;
    }
    
    .stat-card {
        max-width: 280px;
        padding: 12px 16px;
    }
    
    .stat-icon {
        width: 36px;
        height: 36px;
    }
    
    .stat-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-text {
        font-size: 0.75rem;
    }
    
    /* About Section Small Mobile */
    .about-section {
        padding: 3.5rem 0;
    }
    
    .about-header {
        margin-bottom: 2rem;
    }
    
    .about-header-badge .badge-line {
        width: 25px;
    }
    
    .about-header-badge .badge-text {
        font-size: 0.65rem;
        padding: 0.35rem 0.85rem;
    }
    
    .about-main-title {
        font-size: clamp(1.5rem, 7vw, 1.85rem);
        margin-bottom: 1rem;
    }
    
    .about-subtitle {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }
    
    .about-features {
        gap: 1rem;
    }
    
    .feature-card {
        padding: 1.25rem;
        gap: 0.85rem;
    }
    
    .feature-icon {
        width: 46px;
        height: 46px;
    }
    
    .feature-number {
        font-size: 0.65rem;
    }
    
    .feature-content h3 {
        font-size: 1.05rem;
    }
    
    .feature-content p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
    
    .feature-link {
        font-size: 0.85rem;
    }
    
    .feature-link svg {
        width: 16px;
        height: 16px;
    }
    
    .showcase-card {
        height: 320px;
        border-radius: 20px;
    }
    
    .showcase-content {
        padding: 1.25rem;
    }
    
    .showcase-badge {
        font-size: 0.65rem;
        padding: 0.35rem 0.85rem;
    }
    
    .showcase-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .showcase-words {
        height: 40px;
    }
    
    .showcase-word {
        font-size: 1.4rem;
    }
    
    .showcase-corner {
        width: 40px;
        height: 40px;
    }
    
    .showcase-corner.tl,
    .showcase-corner.tr {
        top: 15px;
    }
    
    .showcase-corner.bl,
    .showcase-corner.br {
        bottom: 15px;
    }
    
    .showcase-corner.tl,
    .showcase-corner.bl {
        left: 15px;
    }
    
    .showcase-corner.tr,
    .showcase-corner.br {
        right: 15px;
    }
    
    .showcase-card:hover .showcase-corner {
        width: 60px;
        height: 60px;
    }
    
    .float-element.float-1 {
        width: 80px;
        height: 80px;
        top: -15px;
        right: -15px;
    }
    
    .float-element.float-2 {
        width: 60px;
        height: 60px;
    }
    
    .flNavigation Extra Small */
    .navbar {
        padding: 1rem 0;
    }
    
    .navbar.scrolled {
        padding: 0.75rem 0;
    }
    
    .nav-container {
        padding: 0 0.85rem;
    }
    
    .nav-logo .logo-image {
        height: 34px;
        max-width: 130px;
    }
    
    .nav-menu {
        top: 66px;
        padding: 1rem;
    }
    
    .nav-link {
        padding: 0.7rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .nav-toggle {
        gap: 4px;
    }
    
    .nav-toggle span {
        width: 22px;
        height: 2px;
    }
    
    /* oat-dot {
        display: none;
    }
    
    .about-stats-bar {
        padding: 1.25rem;
    }
    
    .about-stat-item {
        padding: 0.85rem 0;
    }
    
    .stat-icon-small {
        width: 36px;
        height: 36px;
    }
    
    .stat-icon-small svg {
        width: 18px;
        height: 18px;
    }
    
    .stat-num {
        font-size: 1.25rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
}

/* Mobile Extra Small - 480px */
@media (max-width: 480px) {
    /* Hero Section Extra Small */
    .hero {
        padding: 90px 0 40px;
    }
    
    .hero-container {
        padding: 0 1rem;
    }
    
    .hero-content-center {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .hero-badge {
        padding: 7px 14px;
        font-size: 0.65rem;
    }
    
    .badge-icon {
        width: 12px;
        height: 12px;
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 11vw, 2rem);
        margin-bottom: 14px;
    }
    
    .hero-subtitle p {
        font-size: 0.9rem;
        line-height: 1.55;
    }
    
    .subtitle-line {
        width: 50px;
    }
    
    .hero-cta {
        max-width: 260px;
    }
    
    .cta-btn {
        padding: 10px 18px;
        font-size: 0.8rem;
    }
    
    .hero-stats {
        margin-top: 30px;
    }
    
    .stat-card {
        max-width: 260px;
        padding: 10px 14px;
    }
    
    .stat-icon {
        width: 32px;
        height: 32px;
    }
    
    .stat-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .stat-number {
        font-size: 1.35rem;
    }
    
    .stat-text {
        font-size: 0.7rem;
    }
    
    /* About Section Extra Small */
    .about-section {
        padding: 3rem 0;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .about-header {
        margin-bottom: 1.75rem;
    }
    
    .about-header-badge {
        gap: 0.5rem;
    }
    
    .about-header-badge .badge-line {
        width: 20px;
    }
    
    .about-header-badge .badge-text {
        font-size: 0.6rem;
        padding: 0.3rem 0.75rem;
    }
    
    .about-main-title {
        font-size: clamp(1.35rem, 8vw, 1.7rem);
        margin-bottom: 0.85rem;
        line-height: 1.25;
    }
    
    .about-subtitle {
        font-size: 0.85rem;
        line-height: 1.65;
    }
    
    .about-main-grid {
        gap: 2rem;
    }
    
    .about-features {
        gap: 0.85rem;
    }
    
    .feature-card {
        padding: 1.1rem;
        gap: 0.75rem;
        border-radius: 16px;
    }
    
    .feature-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
    
    .feature-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .feature-number {
        font-size: 0.6rem;
        margin-bottom: 0.4rem;
    }
    
    .feature-content h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-content p {
        font-size: 0.8rem;
        line-height: 1.55;
        margin-bottom: 0.85rem;
    }
    
    .feature-link {
        font-size: 0.8rem;
    }
    
    .showcase-card {
        height: 280px;
        border-radius: 18px;
    }
    
    .showcase-content {
        padding: 1rem;
    }
    
    .showcase-badge {
        font-size: 0.6rem;
        padding: 0.3rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .showcase-title {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }
    
    .showcase-words {
        height: 35px;
    }
    
    .showcase-word {
        font-size: 1.25rem;
    }
    
    .showcase-corner {
        width: 35px;
        height: 35px;
        border-width: 1.5px;
    }
    
    .showcase-corner.tl,
    .showcase-corner.tr {
        top: 12px;
    }
    
    .showcase-corner.bl,
    .showcase-corner.br {
        bottom: 12px;
    }
    
    .showcase-corner.tl,
    .showcase-corner.bl {
        left: 12px;
    }
    
    .showcase-corner.tr,
    .showcase-corner.br {
        right: 12px;
    }
    
    .showcase-card:hover .showcase-corner {
        width: 50px;
        height: 50px;
    }
    
    .float-element.float-1 {
        width: 70px;
        height: 70px;
        top: -12px;
        right: -12px;
    }
    
    .float-element.float-2 {
        width: 50px;
        height: 50px;
        bottom: 10%;
        left: -10px;
    }
    
    .about-stats-bar {
        padding: 1rem;
        border-radius: 14px;
    }
    
    .about-stat-item {
        padding: 0.75rem 0;
        gap: 0.6rem;
    }
    
    .stat-icon-small {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
    
    .stat-icon-small svg {
        width: 16px;
        height: 16px;
    }
    
    .stat-num {
        font-size: 1.15rem;
    }
    
    .stat-label {
        font-size: 0.6rem;
    }
}

/* Landscape Mobile Optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        height: auto;
        padding: 80px 0 40px;
    }
    
    .hero-content-center {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    
    .hero-subtitle {
        margin-bottom: 20px;
    }
    
    .hero-subtitle p {
        font-size: 0.9rem;
    }
    
    .hero-stats {
        margin-top: 25px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .stat-card {
        flex: 0 0 auto;
        min-width: 150px;
    }
}

/* Ultra Small Devices - 360px */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.4rem;
    }
    
    .hero-subtitle p {
        font-size: 0.85rem;
    }
    
    .cta-btn {
        padding: 9px 16px;
        font-size: 0.75rem;
    }
    
    .about-main-title {
        font-size: 1.3rem;
    }
    
    .feature-card {
        padding: 1rem;
    }
    
    .feature-icon {
        width: 38px;
        height: 38px;
    }
    
    .feature-content h3 {
        font-size: 0.95rem;
    }
    
    .feature-content p {
        font-size: 0.75rem;
    }
    
    .showcase-card {
        height: 260px;
    }
    
    .showcase-word {
        font-size: 1.1rem;
    }
}
}
    font-size: 0.65rem;
        padding: 0.3rem 0.75rem;
    }
    
    .showcase-title {
        font-size: 0.9rem;
    }
    
    .showcase-words {
        height: 30px;
    }
    
    .showcase-word {
        font-size: 1.2rem;
    }
    
    .showcase-corner {
        width: 30px;
        height: 30px;
        border-width: 1.5px;
    }
    
    .showcase-corner.tl,
    .showcase-corner.tr {
        top: 10px;
    }
    
    .showcase-corner.bl,
    .showcase-corner.br {
        bottom: 10px;
    }
    
    .showcase-corner.tl,
    .showcase-corner.bl {
        left: 10px;
    }
    
    .showcase-corner.tr,
    .showcase-corner.br {
        right: 10px;
    }
    
    .showcase-card:hover .showcase-corner {
        width: 45px;
        height: 45px;
    }
    
    .float-element.float-1 {
        width: 60px;
        height: 60px;
        top: -10px;
        right: -10px;
    }
    
    .float-element.float-2 {
        width: 40px;
        height: 40px;
        bottom: 8%;
        left: -8px;
    }
    
    .about-stats-bar {
        padding: 1rem;
    }
    
    .about-stat-item {
        padding: 0.7rem 0;
    }
    
    .stat-icon-small {
        width: 30px;
        height: 30px;
    }
    
    .stat-icon-small svg {
        width: 15px;
        height: 15px;
    }
    
    .stat-num {
        font-size: 1.1rem;
    }
    
    .stat-label {
        font-size: 0.55rem;
    }
}

/* =========================================
   PREMIUM MODERN ENHANCEMENTS
   2024-2025 Cutting-Edge Design
   ========================================= */

/* ===== SCROLL PROGRESS INDICATOR ===== */
.scroll-progress-bar-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, var(--color-sage), var(--color-sage-light));
    z-index: 10000;
    transition: width 0.1s ease-out;
    box-shadow: 0 2px 4px rgba(127, 166, 155, 0.3);
}

/* ===== SMOOTH SCROLL ENHANCEMENT ===== */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ===== GLASSMORPHISM UTILITY CLASSES ===== */
.glass {
    background: rgba(127, 166, 155, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(127, 166, 155, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-white {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(127, 166, 155, 0.1);
}

/* ===== GRADIENT MESH BACKGROUND ===== */
.gradient-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #B8D4CB 50%, #7FA69B 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    z-index: -1;
    opacity: 0.3;
    pointer-events: none;
}

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

/* ===== MAGNETIC BUTTON EFFECT ===== */
.btn-magnetic {
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    will-change: transform;
}

.btn-magnetic:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-glow);
}

/* ===== SHIMMER/SHINE EFFECT ===== */
.btn-shine {
    position: relative;
    overflow: hidden;
}

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

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

/* ===== LIQUID UNDERLINE FOR LINKS ===== */
.link-liquid {
    position: relative;
    text-decoration: none;
    color: var(--text-primary);
    transition: color var(--transition-base);
}

.link-liquid::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-sage);
    transition: width 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.link-liquid:hover {
    color: var(--color-sage);
}

.link-liquid:hover::after {
    width: 100%;
}

/* ===== MORPHING BORDER EFFECT ===== */
.btn-morph {
    position: relative;
    overflow: hidden;
}

.btn-morph::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--color-sage), var(--color-sage-light), var(--color-white), var(--color-sage));
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    animation: borderRotate 3s linear infinite;
    transition: opacity var(--transition-base);
}

.btn-morph:hover::before {
    opacity: 1;
}

@keyframes borderRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== RIPPLE EXPANSION EFFECT ===== */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(127, 166, 155, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}

.btn-ripple:hover::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* ===== CARD ELEVATION & GLOW ===== */
.card-premium {
    position: relative;
    background: white;
    border-radius: 16px;
    /* padding: var(--space-4); */
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 1px solid var(--color-sage-border);
}

.card-premium:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl), 0 0 40px rgba(127, 166, 155, 0.2);
    border-color: var(--color-sage);
}

/* ===== REVEAL OVERLAY EFFECT ===== */
.card-reveal {
    position: relative;
    overflow: hidden;
}

.card-reveal::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(to top, rgba(127, 166, 155, 0.9), transparent);
    transition: height var(--transition-slow);
    z-index: 1;
}

.card-reveal:hover::before {
    height: 100%;
}

.card-reveal .card-content-overlay {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    padding: var(--space-4);
    color: white;
    z-index: 2;
    transition: bottom var(--transition-slow);
}

.card-reveal:hover .card-content-overlay {
    bottom: 0;
}

/* ===== BORDER TRACE ANIMATION ===== */
.border-trace {
    position: relative;
    border-radius: 12px;
}

.border-trace::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, var(--color-sage), var(--color-sage-light), var(--color-white), var(--color-sage));
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderTrace 3s linear infinite;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.border-trace:hover::before {
    opacity: 1;
}

@keyframes borderTrace {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

/* ===== TEXT GRADIENT UTILITY ===== */
.text-gradient {
    background: linear-gradient(to right, var(--color-sage), var(--color-sage-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-animate {
    background: linear-gradient(90deg, var(--color-sage), var(--color-sage-light), var(--color-sage-ultra-light), var(--color-sage-light), var(--color-sage));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradientFlow 3s ease infinite;
}

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

/* ===== IMAGE KEN BURNS EFFECT ===== */
.img-ken-burns {
    overflow: hidden;
    border-radius: 12px;
}

.img-ken-burns img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.5s ease;
}

.img-ken-burns:hover img {
    transform: scale(1.1) translate(2%, 2%);
}

.img-ken-burns::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0), rgba(127, 166, 155, 0.3));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.img-ken-burns:hover::after {
    opacity: 1;
}

/* ===== FLOATING LABEL FORM INPUTS ===== */
.form-group-floating {
    position: relative;
    margin-bottom: var(--space-3);
}

.form-group-floating input,
.form-group-floating textarea {
    width: 100%;
    padding: var(--space-2);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    background: white;
}

.form-group-floating input:focus,
.form-group-floating textarea:focus {
    outline: none;
    border-color: var(--color-sage);
    box-shadow: 0 0 0 3px var(--color-sage-glass);
}

.form-group-floating label {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    transition: all var(--transition-base);
    pointer-events: none;
    background: white;
    padding: 0 4px;
}

.form-group-floating input:focus + label,
.form-group-floating input:not(:placeholder-shown) + label,
.form-group-floating textarea:focus + label,
.form-group-floating textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 0.875rem;
    color: var(--color-sage);
}

/* ===== ENHANCED NAVIGATION WITH BLUR ===== */
.navbar.glass-nav {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-sage-border);
}

/* ===== PARALLAX TEXT SECTIONS ===== */
.parallax-text {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
*:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-sage);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .parallax-text {
        transform: none !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Remove will-change after animation */
.animated {
    animation-fill-mode: forwards;
}

.animated.finished {
    will-change: auto;
}

/* ===== RESPONSIVE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .scroll-progress-bar-top {
        height: 2px;
    }
    
    .btn-magnetic:hover {
        transform: scale(1.01);
    }
    
    .card-premium:hover {
        transform: translateY(-4px);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .navbar,
    .scroll-progress-bar-top,
    .scroll-top {
        display: none;
    }
    
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* =========================================
   PRODUCTS: IMAGE TILE CATALOG (MINIMAL)
   ========================================= */

.products-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0 12px;
}

.products-toolbar-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(127, 166, 155, 0.22);
    color: var(--color-charcoal);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.products-toolbar-link:hover {
    background: var(--color-sage);
    color: #fff;
    border-color: var(--color-sage);
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(127,166,155,0.25);
}

/* 4x4 Grid Layout */
.products-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}

/* Product Card - Exact Match to Reference Image */
.product-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 250px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}

.product-card-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    height: 100%;
    min-height: 250px;
}

/* Card Image - Full Background */
.product-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

.product-card:hover .product-card-image img {
    transform: scale(1.08);
}

/* Gradient Overlay - Matching Reference */
.product-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.15) 0%, 
        rgba(0,0,0,0.3) 30%, 
        rgba(0,0,0,0.65) 70%, 
        rgba(0,0,0,0.85) 100%);
    z-index: 1;
    transition: all 0.5s ease;
}

.product-card:hover .product-card-overlay {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.25) 0%, 
        rgba(0,0,0,0.45) 30%, 
        rgba(0,0,0,0.75) 70%, 
        rgba(0,0,0,0.92) 100%);
}

/* Badge - Top Left (Matching "Innovation Hub" Style) */
.product-card-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 8px 18px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.95);
    background: rgba(40, 50, 60, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 3;
    transition: all 0.3s ease;
}

.product-card:hover .product-card-badge {
    background: rgba(40, 50, 60, 0.85);
    transform: translateY(-2px);
}

/* Card Content - Center-Bottom Positioning */
.product-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 32px 36px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Title - Large Bold (Matching "Leading Through Excellence") */
.product-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.product-card:hover .product-card-title {
    transform: translateY(-3px);
    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Description - Subtitle Style with 2-Line Ellipsis */
.product-card-description {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin: 0;
    max-width: 95%;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Text Ellipsis for 2 Lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow Icon */
.product-card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(127,166,155,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-arrow svg {
    width: 16px;
    height: 16px;
    color: var(--color-sage);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-card-arrow {
    background: var(--color-sage);
    transform: rotate(45deg);
}

.product-card:hover .product-card-arrow svg {
    color: #fff;
    transform: rotate(-45deg);
}

/* Responsive Breakpoints */
@media (max-width: 1400px) {
    .products-catalog-grid {
        gap: 20px;
    }
}

@media (max-width: 1200px) {
    .products-catalog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .products-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .products-catalog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .product-card-image {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 1024px) {
    .product-tile { grid-column: span 6; }
}

@media (max-width: 640px) {
    .products-toolbar { justify-content: flex-start; }
    .product-tile { grid-column: span 12; }
}

/* ===== SECTION REDESIGNS: ABOUT / INDUSTRIES / INNOVATION / NETWORK / EVENTS / CONTACT / FOOTER ===== */

/* Sticky panel helper */
.sticky-panel {
    position: sticky;
    top: 110px; /* leaves space for navbar */
    align-self: start;
}

/* ABOUT section refinements */
.about-main-grid {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 32px;
    align-items: start;
}

.about-features .feature-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,250,0.6));
    border: 1px solid rgba(127,166,155,0.12);
    padding: 18px;
    border-radius: 14px;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.about-features .feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }

.about-showcase .showcase-card { border-radius: 14px; overflow: hidden; }

/* ========== INDUSTRIES WE SERVE - PREMIUM REDESIGN ========== */

/* Industries Section Header */
.industries-header-premium {
    text-align: center;
    margin-bottom: 56px;
}

.industries-header-content {
    max-width: 720px;
    margin: 0 auto;
}

.industries-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.industries-badge .badge-line {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-sage), transparent);
}

.industries-badge .badge-text {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-sage);
}

.industries-title-premium {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.industries-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* Industries Grid - Perfect Symmetry */
.industries-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

/* Industry Card - Premium Design */
.industry-card {
    position: relative;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(127, 166, 155, 0.12);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.industry-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.2), transparent, rgba(127, 166, 155, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    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;
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: rgba(127, 166, 155, 0.3);
    background: rgba(255, 255, 255, 0.95);
}

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

/* Card Inner Content */
.industry-card-inner {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    min-height: 220px;
    justify-content: center;
}

/* Icon Premium Styling */
.industry-icon-premium {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.08), rgba(127, 166, 155, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-icon-premium::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-sage), rgba(127, 166, 155, 0.5));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.industry-card:hover .industry-icon-premium {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--color-sage), rgba(127, 166, 155, 0.9));
}

.industry-card:hover .industry-icon-premium::before {
    opacity: 0.2;
    animation: iconPulse 2s ease-in-out infinite;
}

.industry-icon-premium svg {
    width: 36px;
    height: 36px;
    color: var(--color-sage);
    transition: all 0.4s ease;
}

.industry-card:hover .industry-icon-premium svg {
    color: #fff;
    transform: scale(1.1);
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.15); opacity: 0.3; }
}

/* Card Title */
.industry-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-charcoal);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.industry-card:hover .industry-card-title {
    color: var(--color-sage);
}

/* Card Description */
.industry-card-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    margin: 0;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.industry-card:hover .industry-card-description {
    opacity: 1;
    color: #555;
}

/* Responsive Design - Perfect Symmetry Maintained */
@media (max-width: 1400px) {
    .industries-grid-premium {
        gap: 20px;
    }
    
    .industry-card-inner {
        padding: 28px 20px;
        min-height: 200px;
    }
}

@media (max-width: 1200px) {
    .industries-title-premium {
        font-size: 2.2rem;
    }
    
    .industries-grid-premium {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
    
    .industry-icon-premium {
        width: 64px;
        height: 64px;
    }
    
    .industry-icon-premium svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 1024px) {
    .industries-title-premium {
        font-size: 2rem;
    }
    
    .industries-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .industries-header-premium {
        margin-bottom: 40px;
    }
    
    .industries-title-premium {
        font-size: 1.75rem;
    }
    
    .industries-subtitle {
        font-size: 1rem;
    }
    
    .industries-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .industry-card-inner {
        padding: 24px 18px;
        min-height: 180px;
        gap: 12px;
    }
    
    .industry-icon-premium {
        width: 56px;
        height: 56px;
    }
    
    .industry-icon-premium svg {
        width: 28px;
        height: 28px;
    }
    
    .industry-card-title {
        font-size: 1.05rem;
    }
    
    .industry-card-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {
    .industries-grid-premium {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .industry-card-inner {
        min-height: auto;
    }
}

/* OLD STYLES - KEPT FOR BACKWARD COMPATIBILITY */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.industry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(127,166,155,0.1);
    transition: all 0.28s ease;
}

.industry-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    border-color: rgba(127,166,155,0.25);
    background: rgba(255,255,255,0.9);
}

.industry-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(127,166,155,0.12), rgba(127,166,155,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.industry-item:hover .industry-icon-wrapper {
    background: linear-gradient(135deg, var(--color-sage), rgba(127,166,155,0.85));
    transform: scale(1.1) rotate(8deg);
}

.industry-icon {
    width: 28px;
    height: 28px;
    color: var(--color-sage);
    transition: color 0.3s ease;
}

.industry-item:hover .industry-icon {
    color: #fff;
}

.industry-item span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-charcoal);
    line-height: 1.4;
}

@media (max-width: 1024px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .industries-grid { grid-template-columns: 1fr; } }

/* INNOVATION layout */
.innovation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}

.innovation-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.innovation-points .point-item {
    background: rgba(255,255,255,0.75);
    padding: 22px;
    border-radius: 16px;
    border: 1px solid rgba(127,166,155,0.1);
    transition: all 0.28s ease;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.innovation-points .point-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    border-color: rgba(127,166,155,0.25);
}

@media (max-width: 1024px) {
    .innovation-content { grid-template-columns: 1fr; gap: 28px; }
}

/* NETWORK layout */
.network-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.network-map {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.network-map img {
    width: 100%;
    height: auto;
    display: block;
}

.network-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #555;
}

.legend-item img {
    width: 24px;
    height: 24px;
}

.network-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.network-stats .stat-card {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(127,166,155,0.1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.28s ease;
}

.network-stats .stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    border-color: rgba(127,166,155,0.25);
}

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

/* EVENTS cards */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.event-card {
    background: rgba(255,255,255,0.75);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(127,166,155,0.1);
    transition: all 0.28s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 55px rgba(0,0,0,0.1);
    border-color: rgba(127,166,155,0.25);
}

.event-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-sage), rgba(127,166,155,0.85));
    color: #fff;
    border-radius: 12px;
    align-self: flex-start;
}

.date-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.date-month {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 4px;
}

.event-content h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--color-charcoal);
}

.event-location,
.event-booth {
    font-size: 0.9rem;
    color: #666;
}

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

/* CONTACT layout */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}

.contact-info {
    padding: 32px;
    border-radius: 18px;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(127,166,155,0.1);
}

.contact-form-wrapper {
    background: rgba(255,255,255,0.9);
    padding: 32px;
    border-radius: 18px;
    border: 1px solid rgba(127,166,155,0.1);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea,
.form-group select {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(127,166,155,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    width: 100%;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-sage);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 3px rgba(127,166,155,0.1);
}

@media (max-width: 1024px) {
    .contact-wrapper { grid-template-columns: 1fr; gap: 28px; }
}

/* FOOTER polish */
.footer {
    background: linear-gradient(180deg, #f8faf9, #f2f5f4);
    padding: 56px 0 28px;
    border-top: 1px solid rgba(127,166,155,0.08);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 32px;
}

.footer-column h3 {
    font-size: 1.05rem;
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--color-charcoal);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-sage);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(127,166,155,0.08);
    color: #777;
    font-size: 0.9rem;
}

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

@media (max-width: 640px) {
    .footer-content { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* subtle global hover micro-interaction */
a { transition: color 0.18s ease, transform 0.12s ease; }
a:hover { transform: translateY(-1px); }

/* Parallax helper (for image transforms) */
[data-parallax-speed] { will-change: transform; }
/* ============================== */
/* PRODUCTS SECTION - ULTRA CREATIVE PREMIUM REDESIGN */
/* ============================== */

.products-section-creative {
    background: linear-gradient(180deg, #fdfffe 0%, #f5f9f7 35%, #f8fcfa 70%, #ffffff 100%);
    position: relative;
    padding: 5rem 0 6rem;
    overflow: hidden;
}

/* Cinematic Background Effects */
.products-cinematic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Morphing Gradient Blobs */
.prod-morph-blob {
    position: absolute;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter: blur(60px);
    opacity: 0.4;
    animation: prodBlobMorph 18s ease-in-out infinite;
}

.prod-blob-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at 30% 30%, rgba(127, 166, 155, 0.35), rgba(155, 191, 179, 0.15) 60%, transparent);
    top: -10%;
    right: 5%;
    animation-delay: 0s;
}

.prod-blob-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle at 70% 70%, rgba(167, 196, 188, 0.3), rgba(127, 166, 155, 0.1) 60%, transparent);
    bottom: 10%;
    left: -5%;
    animation-delay: -6s;
}

.prod-blob-3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle at 50% 50%, rgba(127, 166, 155, 0.25), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -12s;
}

@keyframes prodBlobMorph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg) scale(1);
    }
    33% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: rotate(120deg) scale(1.1);
    }
    66% {
        border-radius: 40% 60% 60% 40% / 40% 50% 60% 50%;
        transform: rotate(240deg) scale(0.95);
    }
}

/* Geometric Grid Pattern */
.products-geo-grid {
    position: absolute;
    inset: 0;
    opacity: 0.8;
}

.prod-geo-pattern {
    width: 100%;
    height: 100%;
}

/* Floating Molecular Shapes */
.molecular-shapes {
    position: absolute;
    inset: 0;
}

.molecule {
    position: absolute;
    animation: moleculeFloat 25s linear infinite;
}

.molecule svg {
    width: 100%;
    height: 100%;
}

.molecule-1 {
    width: 180px;
    height: 180px;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.molecule-2 {
    width: 140px;
    height: 140px;
    bottom: 20%;
    right: 10%;
    animation-delay: -12s;
}

@keyframes moleculeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.9;
    }
}

/* Glowing Lines */
.prod-glow-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.prod-glow-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(127, 166, 155, 0.25), transparent);
}

.prod-line-h-1 {
    width: 100%;
    height: 1px;
    top: 30%;
    animation: lineGlow 8s ease-in-out infinite;
}

.prod-line-v-1 {
    width: 1px;
    height: 100%;
    left: 75%;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.2), transparent);
    animation: lineGlow 10s ease-in-out infinite reverse;
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}

/* ===== CREATIVE HEADER SECTION ===== */
.products-header-creative {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 5;
}

/* Orbit Badge Animation */
.products-orbit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.5rem;
    width: 160px;
    height: 48px;
}

.prod-orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(127, 166, 155, 0.25);
    border-radius: 50px;
    animation: prodOrbitPulse 3s ease-in-out infinite;
}

.prod-orbit-ring-2 {
    width: 120%;
    height: 150%;
    border-color: rgba(127, 166, 155, 0.12);
    animation-delay: -1.5s;
}

@keyframes prodOrbitPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.5;
    }
}

.prod-orbit-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: prodOrbitDot 6s linear infinite;
    box-shadow: 0 0 10px var(--primary-color);
}

@keyframes prodOrbitDot {
    0% { left: 0; opacity: 1; }
    25% { left: 50%; opacity: 0.5; }
    50% { left: 100%; opacity: 1; }
    75% { left: 50%; opacity: 0.5; }
    100% { left: 0; opacity: 1; }
}

.prod-orbit-text {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    position: relative;
    z-index: 2;
}

/* Split Title with Reveal Effect */
.products-split-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.prod-split-line {
    display: block;
}

.prod-split-word {
    display: inline-block;
    position: relative;
    margin: 0 0.3em;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.prod-split-word:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

.prod-split-word::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.prod-split-word:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.prod-highlight-line {
    margin-top: 0.2em;
}

.prod-split-word.prod-accent {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tagline with Decorators */
.products-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.prod-tagline-decorator {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
}

.products-tagline p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    font-weight: 300;
}

/* ===== CATALOG LINK ===== */
.products-catalog-link {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 5;
}

.catalog-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 2rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(127, 166, 155, 0.3);
    border-radius: 50px;
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 20px rgba(127, 166, 155, 0.1);
}

.catalog-cta:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(127, 166, 155, 0.3);
}

.cta-icon {
    font-size: 0.9rem;
    opacity: 0.7;
}

.cta-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(127, 166, 155, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.catalog-cta:hover .cta-arrow-wrap {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(3px);
}

.cta-arrow-wrap i {
    font-size: 0.7rem;
}

/* ============================== */
/* MEGA PRODUCTS GRID */
/* ============================== */

.products-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 5;
    margin-bottom: 3rem;
}

/* ===== MEGA PRODUCT CARD ===== */
.product-mega-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.04),
        0 1px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-mega-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 10;
}

.product-mega-card:hover::before {
    transform: scaleX(1);
}

.product-mega-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 50px rgba(127, 166, 155, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.mega-product-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
    min-height: 260px;
    position: relative;
}

/* Visual Box - Image Container */
.product-visual-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
}

/* Image Reveal Effect */
.product-img-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    z-index: 6;
}

.product-img-reveal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.1);
    transition: transform 0.8s ease;
}

.product-mega-card:hover .product-img-reveal {
    transform: translateY(0);
}

.product-mega-card:hover .product-img-reveal img {
    transform: scale(1);
}

/* Shine Effect */
.product-img-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    z-index: 3;
    transition: left 0.8s ease;
}

.product-mega-card:hover .product-img-shine {
    left: 150%;
}

/* Visual Overlay */
.product-visual-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, white 30%, transparent);
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.product-mega-card:hover .product-visual-overlay {
    opacity: 0;
}

/* Info Box */
.product-info-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 1;
    background: linear-gradient(to top, white 60%, rgba(255,255,255,0.95) 80%, transparent);
}

.product-mega-card:hover .product-info-box {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* Tag Badge */
.product-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    background: rgba(127, 166, 155, 0.1);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 30px;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

.product-tag-badge i {
    font-size: 0.55rem;
}

.product-mega-card:hover .product-tag-badge {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Product Title */
.product-mega-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.product-mega-card:hover .product-mega-title {
    color: var(--primary-color);
}

/* Product Description */
.product-mega-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    opacity: 0.8;
    margin-bottom: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

/* Hover Arrow */
.product-hover-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(127, 166, 155, 0.08);
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-mega-card:hover .product-hover-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Card Glow Effect */
.card-glow-effect {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    box-shadow: inset 0 0 30px rgba(127, 166, 155, 0.1);
}

.product-mega-card:hover .card-glow-effect {
    opacity: 1;
}

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

@media (max-width: 1400px) {
    .products-mega-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

@media (max-width: 1200px) {
    .products-mega-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .products-split-title {
        font-size: clamp(2rem, 4.5vw, 3rem);
    }
}

@media (max-width: 900px) {
    .products-section-creative {
        padding: 4rem 0 5rem;
    }
    
    .products-mega-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    
    .mega-product-link {
        min-height: 240px;
    }
    
    .prod-morph-blob {
        display: none;
    }
}

@media (max-width: 600px) {
    .products-section-creative {
        padding: 3rem 0 4rem;
    }
    
    .products-mega-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .mega-product-link {
        min-height: 220px;
    }
    
    .products-split-title {
        font-size: 1.8rem;
    }
    
    .products-tagline {
        flex-direction: column;
        gap: 1rem;
    }
    
    .prod-tagline-decorator {
        width: 30px;
    }
    
    .molecular-shapes,
    .products-geo-grid {
        display: none;
    }
}

/* ============================================== */
/* INDUSTRIES SECTION - ULTRA CREATIVE PARALLAX */
/* ============================================== */

.industries-creative-section {
    margin-top: 4rem;
    padding: 3rem 0;
    position: relative;
    background: linear-gradient(135deg, rgba(247, 250, 249, 1) 0%, rgba(240, 246, 244, 1) 50%, rgba(247, 250, 249, 1) 100%);
    border-radius: 32px;
    overflow: hidden;
}

/* Cinematic Background */
.ind-cinematic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ind-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.ind-orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.4), transparent);
    top: -50px;
    right: 10%;
    animation: indOrbFloat 15s ease-in-out infinite;
}

.ind-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(155, 191, 179, 0.35), transparent);
    bottom: 0;
    left: 5%;
    animation: indOrbFloat 18s ease-in-out infinite reverse;
}

@keyframes indOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.1); }
}

.ind-geo-lines {
    position: absolute;
    inset: 0;
}

.ind-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(127, 166, 155, 0.15), transparent);
}

.ind-line-1 {
    width: 100%;
    height: 1px;
    top: 25%;
}

.ind-line-2 {
    width: 1px;
    height: 100%;
    left: 80%;
    background: linear-gradient(180deg, transparent, rgba(127, 166, 155, 0.12), transparent);
}

/* ===== CREATIVE HEADER ===== */
.industries-header-ultra {
    text-align: center;
    padding: 0 2rem 2rem;
    position: relative;
    z-index: 5;
}

/* Orbit Badge */
.ind-orbit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.2rem;
    width: 140px;
    height: 44px;
}

.ind-orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(127, 166, 155, 0.3);
    border-radius: 50px;
    animation: indOrbitPulse 3s ease-in-out infinite;
}

.ind-orbit-ring-2 {
    width: 115%;
    height: 140%;
    border-color: rgba(127, 166, 155, 0.15);
    animation-delay: -1.5s;
}

@keyframes indOrbitPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.5; }
}

.ind-orbit-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: indOrbitDot 5s linear infinite;
    box-shadow: 0 0 8px var(--primary-color);
}

@keyframes indOrbitDot {
    0% { left: 0; opacity: 1; }
    25% { left: 50%; opacity: 0.6; }
    50% { left: 100%; opacity: 1; }
    75% { left: 50%; opacity: 0.6; }
    100% { left: 0; opacity: 1; }
}

.ind-orbit-text {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.45rem 1.3rem;
    border-radius: 50px;
    position: relative;
    z-index: 2;
}

/* Split Title */
.ind-split-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.ind-split-line {
    display: block;
}

.ind-split-word {
    display: inline-block;
    position: relative;
    margin: 0 0.25em;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.ind-split-word:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.ind-split-word::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.35s ease;
}

.ind-split-word:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.ind-highlight-line {
    margin-top: 0.15em;
}

.ind-split-word.ind-accent {
    color: var(--primary-color);
    font-weight: 400;
}

/* Tagline */
.ind-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.ind-tagline-deco {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
}

.ind-tagline p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 300;
}

/* Scroll Hint */
.ind-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.2rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 30px;
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.ind-scroll-arrows {
    display: flex;
    gap: 0.15rem;
}

.ind-scroll-arrows i {
    font-size: 0.6rem;
    animation: scrollArrow 1.5s ease-in-out infinite;
}

.ind-scroll-arrows i:nth-child(2) {
    animation-delay: 0.2s;
}

@keyframes scrollArrow {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}

/* ===== PARALLAX SLIDER ===== */
.ind-parallax-container {
    position: relative;
    z-index: 5;
    padding: 0 1.5rem;
}

.ind-parallax-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0.5rem 2rem;
    scrollbar-width: none;
    cursor: grab;
}

.ind-parallax-track::-webkit-scrollbar {
    display: none;
}

.ind-parallax-track:active {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Card Wrapper */
.ind-card-wrapper {
    flex: 0 0 280px;
    scroll-snap-align: center;
    perspective: 1000px;
}

/* ===== MEGA INDUSTRY CARD ===== */
.ind-mega-card {
    position: relative;
    height: auto;
    border-radius: 24px;
    background: white;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.04),
        0 1px 4px rgba(0, 0, 0, 0.02);
}

.ind-mega-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 10;
}

.ind-mega-card:hover::before {
    transform: scaleX(1);
    animation: gradientSlide 2s linear infinite;
}

@keyframes gradientSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.ind-mega-card:hover {
    transform: translateY(-12px) rotateX(2deg);
    box-shadow: 
        0 25px 60px rgba(127, 166, 155, 0.2),
        0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Card Background */
.ind-card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ind-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(247, 250, 249, 0) 0%, 
        rgba(127, 166, 155, 0.03) 50%, 
        rgba(127, 166, 155, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ind-mega-card:hover .ind-card-gradient {
    opacity: 1;
}

.ind-card-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(127, 166, 155, 0.04) 1px, transparent 0);
    background-size: 20px 20px;
}

/* Card Content */
.ind-card-content {
    position: relative;
    z-index: 5;
    height: 100%;
    padding: 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Card Icon */
.ind-card-icon {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1), rgba(127, 166, 155, 0.05));
    border-radius: 20px;
    border: 1.5px solid rgba(127, 166, 155, 0.15);
    margin-bottom: 1rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.ind-icon-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.3), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ind-mega-card:hover .ind-icon-glow {
    opacity: 1;
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.ind-card-icon svg {
    width: 32px;
    height: 32px;
    color: var(--primary-color);
    transition: all 0.4s ease;
}

.ind-mega-card:hover .ind-card-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-color: var(--primary-color);
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 8px 25px rgba(127, 166, 155, 0.35);
}

.ind-mega-card:hover .ind-card-icon svg {
    color: white;
    transform: scale(1.1);
}

/* Card Number */
.ind-card-num {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(127, 166, 155, 0.25);
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.ind-mega-card:hover .ind-card-num {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* Card Title */
.ind-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.6rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.ind-mega-card:hover .ind-card-title {
    color: var(--primary-color);
}

/* Card Description */
.ind-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    opacity: 0.85;
}

/* Card Tags */
.ind-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.ind-card-tags span {
    padding: 0.3rem 0.7rem;
    background: rgba(127, 166, 155, 0.08);
    border: 1px solid rgba(127, 166, 155, 0.12);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.ind-mega-card:hover .ind-card-tags span {
    background: rgba(127, 166, 155, 0.15);
    border-color: rgba(127, 166, 155, 0.25);
}

/* Card Shine Effect */
.ind-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    z-index: 8;
    transition: left 0.6s ease;
    pointer-events: none;
}

.ind-mega-card:hover .ind-card-shine {
    left: 150%;
}

/* ===== PROGRESS INDICATOR ===== */
.ind-progress-wrap {
    padding: 1.5rem 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ind-progress-bar {
    width: 100%;
    max-width: 400px;
    height: 3px;
    background: rgba(127, 166, 155, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.ind-progress-fill {
    width: 12.5%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ind-progress-dots {
    display: flex;
    gap: 8px;
}

.ind-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(127, 166, 155, 0.2);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ind-dot:hover {
    background: rgba(127, 166, 155, 0.4);
}

.ind-dot.active {
    background: var(--primary-color);
    border-color: rgba(127, 166, 155, 0.3);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(127, 166, 155, 0.4);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .ind-card-wrapper {
        flex: 0 0 260px;
    }
    
    .ind-mega-card {
        height: 320px;
    }
}

@media (max-width: 900px) {
    .industries-creative-section {
        margin-top: 3rem;
        padding: 2.5rem 0;
    }
    
    .ind-card-wrapper {
        flex: 0 0 240px;
    }
    
    .ind-mega-card {
        height: 300px;
    }
    
    .ind-split-title {
        font-size: 1.6rem;
    }
    
    .ind-gradient-orb {
        display: none;
    }
}

@media (max-width: 600px) {
    .industries-creative-section {
        margin-top: 2rem;
        padding: 2rem 0;
        border-radius: 24px;
    }
    
    .industries-header-ultra {
        padding: 0 1rem 1.5rem;
    }
    
    .ind-parallax-container {
        padding: 0 1rem;
    }
    
    .ind-parallax-track {
        gap: 12px;
    }
    
    .ind-card-wrapper {
        flex: 0 0 220px;
    }
    
    .ind-mega-card {
        height: 280px;
        border-radius: 20px;
    }
    
    .ind-card-content {
        padding: 1.5rem 1.2rem;
    }
    
    .ind-card-icon {
        width: 60px;
        height: 60px;
    }
    
    .ind-card-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .ind-split-title {
        font-size: 1.5rem;
    }
    
    .ind-tagline {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .ind-tagline-deco {
        width: 30px;
    }
    
    .ind-progress-dots {
        gap: 6px;
    }
    
    .ind-dot {
        width: 6px;
        height: 6px;
    }
}

/* ============================================== */
/* INNOVATION SECTION - ULTRA CREATIVE REDESIGN */
/* ============================================== */

.innovation-section-ultra {
    background: linear-gradient(180deg, #ffffff 0%, #f7faf9 30%, #f0f6f4 70%, #f8fbfa 100%);
    position: relative;
    padding: 5rem 0 6rem;
    overflow: hidden;
}

/* Cinematic Background */
.innov-cinematic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Gradient Spheres */
.innov-gradient-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.innov-sphere-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.35), transparent);
    top: -100px;
    left: 10%;
    animation: innovSphereFloat 20s ease-in-out infinite;
}

.innov-sphere-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(155, 191, 179, 0.3), transparent);
    bottom: 10%;
    right: 5%;
    animation: innovSphereFloat 25s ease-in-out infinite reverse;
}

.innov-sphere-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.25), transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: innovSphereFloat 18s ease-in-out infinite;
}

@keyframes innovSphereFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

/* Hexagon Grid Pattern */
.innov-hex-grid {
    position: absolute;
    inset: 0;
    opacity: 0.8;
}

.innov-hex-pattern {
    width: 100%;
    height: 100%;
}

/* Floating Particles */
.innov-floating-particles {
    position: absolute;
    inset: 0;
}

.innov-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.3;
    animation: innovParticleFloat 15s linear infinite;
}

.innov-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.innov-particle:nth-child(2) { left: 80%; top: 30%; animation-delay: -3s; }
.innov-particle:nth-child(3) { left: 30%; top: 70%; animation-delay: -6s; }
.innov-particle:nth-child(4) { left: 70%; top: 60%; animation-delay: -9s; }
.innov-particle:nth-child(5) { left: 50%; top: 40%; animation-delay: -12s; }

@keyframes innovParticleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    50% { transform: translateY(-50px) rotate(180deg); opacity: 0.5; }
}

/* ===== CREATIVE HEADER ===== */
.innov-header-ultra {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 5;
}

/* Orbit Badge */
.innov-orbit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.2rem;
    width: 140px;
    height: 44px;
}

.innov-orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(127, 166, 155, 0.3);
    border-radius: 50px;
    animation: innovOrbitPulse 3s ease-in-out infinite;
}

.innov-orbit-ring-2 {
    width: 115%;
    height: 140%;
    border-color: rgba(127, 166, 155, 0.15);
    animation-delay: -1.5s;
}

@keyframes innovOrbitPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.5; }
}

.innov-orbit-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: innovOrbitDot 5s linear infinite;
    box-shadow: 0 0 8px var(--primary-color);
}

@keyframes innovOrbitDot {
    0% { left: 0; opacity: 1; }
    25% { left: 50%; opacity: 0.6; }
    50% { left: 100%; opacity: 1; }
    75% { left: 50%; opacity: 0.6; }
    100% { left: 0; opacity: 1; }
}

.innov-orbit-text {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.45rem 1.3rem;
    border-radius: 50px;
    position: relative;
    z-index: 2;
}

/* Split Title */
.innov-split-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.innov-split-line {
    display: block;
}

.innov-split-word {
    display: inline-block;
    position: relative;
    margin: 0 0.2em;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.innov-split-word:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.innov-split-word::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.35s ease;
}

.innov-split-word:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.innov-highlight-line {
    margin-top: 0.1em;
}

.innov-split-word.innov-accent {
    color: var(--primary-color);
    font-weight: 500;
}

/* Tagline */
.innov-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    max-width: 650px;
    margin: 0 auto;
}

.innov-tagline-deco {
    width: 45px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
}

.innov-tagline p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 300;
}

/* ===== BENTO GRID LAYOUT ===== */
.innov-bento-ultra {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    position: relative;
    z-index: 5;
}

/* ===== HERO MEGA CARD ===== */
.innov-hero-mega {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(127, 166, 155, 0.1);
    display: flex;
    gap: 2rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.innov-hero-mega::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.innov-hero-mega:hover::before {
    transform: scaleX(1);
}

.innov-hero-mega:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(127, 166, 155, 0.15);
}

.innov-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.innov-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.03) 0%, transparent 60%);
}

.innov-hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 3px 3px, rgba(127, 166, 155, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
}

.innov-hero-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.innov-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(127, 166, 155, 0.1);
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.2rem;
}

.innov-hero-badge i {
    font-size: 0.75rem;
}

.innov-hero-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0 0 1rem;
}

.innov-hero-title span {
    color: var(--primary-color);
    font-weight: 600;
}

.innov-hero-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.innov-hero-cta {
    margin-top: auto;
}

.innov-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.innov-cta-btn:hover {
    background: var(--primary-dark);
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(127, 166, 155, 0.3);
}

.innov-cta-btn i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.innov-cta-btn:hover i {
    transform: translateX(4px);
}

/* Hero Visual */
.innov-hero-visual {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innov-visual-ring {
    position: absolute;
    border: 1px solid rgba(127, 166, 155, 0.2);
    border-radius: 50%;
    animation: innovRingPulse 4s ease-in-out infinite;
}

.innov-visual-ring {
    width: 100%;
    height: 100%;
}

.innov-visual-ring.innov-ring-2 {
    width: 75%;
    height: 75%;
    animation-delay: -1.3s;
}

.innov-visual-ring.innov-ring-3 {
    width: 50%;
    height: 50%;
    animation-delay: -2.6s;
}

@keyframes innovRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}

.innov-visual-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(127, 166, 155, 0.4);
    animation: innovIconFloat 3s ease-in-out infinite;
}

.innov-visual-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

@keyframes innovIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== IMAGE MEGA CARD ===== */
.innov-image-mega {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 380px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.innov-image-mega:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.innov-image-wrapper {
    position: absolute;
    inset: 0;
}

.innov-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.innov-image-mega:hover .innov-image-wrapper img {
    transform: scale(1.08);
}

.innov-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
}

.innov-image-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg);
    z-index: 3;
    transition: left 0.6s ease;
}

.innov-image-mega:hover .innov-image-shine {
    left: 150%;
}

.innov-image-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    z-index: 5;
    transition: all 0.3s ease;
}

.innov-image-badge i {
    font-size: 0.8rem;
}

.innov-image-mega:hover .innov-image-badge {
    background: var(--primary-color);
    color: white;
}

/* ===== STATS ROW ===== */
.innov-stats-row {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Stat Mega Card */
.innov-stat-mega {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(127, 166, 155, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.innov-stat-mega:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(127, 166, 155, 0.15);
    border-color: rgba(127, 166, 155, 0.25);
}

.innov-stat-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.02), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.innov-stat-mega:hover .innov-stat-bg {
    opacity: 1;
}

.innov-stat-icon-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
}

.innov-stat-glow {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.25), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.innov-stat-mega:hover .innov-stat-glow {
    opacity: 1;
    animation: statGlowPulse 2s ease-in-out infinite;
}

@keyframes statGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.innov-stat-icon-wrap svg {
    width: 100%;
    height: 100%;
    color: var(--primary-color);
    transition: transform 0.4s ease;
}

.innov-stat-mega:hover .innov-stat-icon-wrap svg {
    transform: scale(1.1) rotate(5deg);
}

.innov-stat-content {
    position: relative;
    z-index: 2;
}

.innov-stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 0.3rem;
}

.innov-stat-num,
.innov-stat-plus {
    font-size: 2.2rem;
    font-weight: 300;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.innov-stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

.innov-stat-bar {
    width: 100%;
    height: 3px;
    background: rgba(127, 166, 155, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: auto;
}

.innov-stat-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 3px;
    transition: width 1s ease;
}

.innov-stat-mega:hover .innov-stat-fill {
    width: var(--fill-width, 80%);
}

/* ===== FEATURES ROW ===== */
.innov-features-row {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Feature Mega Card */
.innov-feature-mega {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(127, 166, 155, 0.1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.innov-feature-mega:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(127, 166, 155, 0.12);
    border-color: rgba(127, 166, 155, 0.25);
}

.innov-feature-icon-box {
    position: relative;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(127, 166, 155, 0.1), rgba(127, 166, 155, 0.05));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.4s ease;
}

.innov-feature-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(127, 166, 155, 0.2), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.innov-feature-mega:hover .innov-feature-glow {
    opacity: 1;
}

.innov-feature-mega:hover .innov-feature-icon-box {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 8px 25px rgba(127, 166, 155, 0.3);
}

.innov-feature-icon-box svg {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
    transition: all 0.4s ease;
}

.innov-feature-mega:hover .innov-feature-icon-box svg {
    color: white;
    transform: scale(1.1);
}

.innov-feature-content {
    position: relative;
    z-index: 2;
}

.innov-feature-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    transition: color 0.3s ease;
}

.innov-feature-mega:hover .innov-feature-title {
    color: var(--primary-color);
}

.innov-feature-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.innov-feature-hover-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.innov-feature-mega:hover .innov-feature-hover-line {
    transform: scaleX(1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .innov-bento-ultra {
        grid-template-columns: 1fr 1fr;
    }
    
    .innov-hero-mega {
        grid-column: 1 / 3;
    }
    
    .innov-image-mega {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        min-height: 300px;
    }
    
    .innov-stats-row {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .innov-features-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .innovation-section-ultra {
        padding: 4rem 0 5rem;
    }
    
    .innov-bento-ultra {
        grid-template-columns: 1fr;
    }
    
    .innov-hero-mega {
        grid-column: 1;
        flex-direction: column;
        text-align: center;
    }
    
    .innov-hero-visual {
        width: 140px;
        height: 140px;
        margin: 0 auto 1rem;
    }
    
    .innov-image-mega {
        grid-column: 1;
        grid-row: auto;
        min-height: 250px;
    }
    
    .innov-stats-row {
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .innov-features-row {
        grid-column: 1;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .innov-gradient-sphere {
        display: none;
    }
}

@media (max-width: 600px) {
    .innovation-section-ultra {
        padding: 3rem 0 4rem;
    }
    
    .innov-header-ultra {
        margin-bottom: 2rem;
    }
    
    .innov-split-title {
        font-size: 1.8rem;
    }
    
    .innov-tagline {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .innov-tagline-deco {
        width: 30px;
    }
    
    .innov-hero-mega {
        padding: 1.5rem;
    }
    
    .innov-hero-title {
        font-size: 1.5rem;
    }
    
    .innov-stats-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .innov-stat-mega {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }
    
    .innov-stat-icon-wrap {
        margin-bottom: 0;
    }
    
    .innov-stat-bar {
        display: none;
    }
    
    .innov-features-row {
        grid-template-columns: 1fr;
    }
    
    .innov-feature-mega {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .innov-feature-icon-box {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

/* ============================================== */
/* OUR COMPANY SECTION - HYPER CREATIVE 3D DESIGN */
/* ============================================== */

.about-section-hyper {
    background: linear-gradient(180deg, #f8faf9 0%, #ffffff 40%, #f5f8f7 100%);
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

/* Cosmic Background */
.about-cosmic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Aurora Effect */
.aurora-container {
    position: absolute;
    inset: 0;
    opacity: 0.6;
}

.aurora {
    position: absolute;
    width: 150%;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
}

.aurora-1 {
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.2), transparent);
    top: 10%;
    left: -25%;
    animation: auroraFloat 15s ease-in-out infinite;
}

.aurora-2 {
    background: linear-gradient(90deg, transparent, rgba(155,191,179,0.15), transparent);
    top: 40%;
    right: -25%;
    animation: auroraFloat 20s ease-in-out infinite reverse;
}

.aurora-3 {
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.1), transparent);
    bottom: 20%;
    left: -25%;
    animation: auroraFloat 18s ease-in-out infinite 2s;
}

@keyframes auroraFloat {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(50px) scaleY(1.2); }
}

/* DNA Strand */
.dna-strand {
    position: absolute;
    right: 5%;
    top: 20%;
    height: 60%;
    width: 40px;
    opacity: 0.3;
}

.dna-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.dna-node.dn-1 { top: 0; animation: dnaWave 3s ease-in-out infinite; }
.dna-node.dn-2 { top: 16%; animation: dnaWave 3s ease-in-out infinite 0.5s; }
.dna-node.dn-3 { top: 32%; animation: dnaWave 3s ease-in-out infinite 1s; }
.dna-node.dn-4 { top: 48%; animation: dnaWave 3s ease-in-out infinite 1.5s; }
.dna-node.dn-5 { top: 64%; animation: dnaWave 3s ease-in-out infinite 2s; }
.dna-node.dn-6 { top: 80%; animation: dnaWave 3s ease-in-out infinite 2.5s; }

@keyframes dnaWave {
    0%, 100% { transform: translateX(-50%) translateX(-15px); }
    50% { transform: translateX(-50%) translateX(15px); }
}

/* 3D Floating Cubes */
.cube-field {
    position: absolute;
    inset: 0;
    perspective: 1000px;
}

.float-cube {
    position: absolute;
    width: 50px;
    height: 50px;
    transform-style: preserve-3d;
}

.cube-1 { top: 15%; left: 8%; animation: cubeFloat 12s ease-in-out infinite; }
.cube-2 { top: 60%; left: 3%; animation: cubeFloat 15s ease-in-out infinite 2s; }
.cube-3 { bottom: 25%; right: 10%; animation: cubeFloat 10s ease-in-out infinite 4s; }

@keyframes cubeFloat {
    0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateY(0); }
    25% { transform: rotateX(90deg) rotateY(45deg) translateY(-20px); }
    50% { transform: rotateX(180deg) rotateY(90deg) translateY(0); }
    75% { transform: rotateX(270deg) rotateY(135deg) translateY(20px); }
}

.cube-face {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(127,166,155,0.15);
    background: rgba(127,166,155,0.03);
}

.face-front { transform: translateZ(25px); }
.face-back { transform: rotateY(180deg) translateZ(25px); }
.face-left { transform: rotateY(-90deg) translateZ(25px); }
.face-right { transform: rotateY(90deg) translateZ(25px); }
.face-top { transform: rotateX(90deg) translateZ(25px); }
.face-bottom { transform: rotateX(-90deg) translateZ(25px); }

/* Constellation Stars */
.constellation {
    position: absolute;
    inset: 0;
}

.star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.4;
    animation: starTwinkle 3s ease-in-out infinite;
}

.s1 { top: 10%; left: 20%; animation-delay: 0s; }
.s2 { top: 25%; left: 70%; animation-delay: 0.5s; }
.s3 { top: 40%; left: 15%; animation-delay: 1s; }
.s4 { top: 55%; left: 85%; animation-delay: 1.5s; }
.s5 { top: 70%; left: 40%; animation-delay: 2s; }
.s6 { top: 80%; left: 60%; animation-delay: 2.5s; }
.s7 { top: 15%; left: 90%; animation-delay: 0.3s; }
.s8 { top: 90%; left: 25%; animation-delay: 1.3s; }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
}

/* Geometric Mesh */
.geo-mesh {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    opacity: 0.8;
}

/* Futuristic Header */
.about-header-futuristic {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 5;
}

/* Holographic Badge */
.holo-badge-wrap {
    margin-bottom: 1.5rem;
}

.holo-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 50px;
}

.holo-ring {
    position: absolute;
    border-radius: 50px;
    border: 1px solid rgba(127,166,155,0.3);
}

.holo-r1 {
    width: 100%;
    height: 100%;
    animation: holoRingPulse 3s ease-in-out infinite;
}

.holo-r2 {
    width: 120%;
    height: 140%;
    border-style: dashed;
    border-color: rgba(127,166,155,0.2);
    animation: holoRingSpin 20s linear infinite;
}

.holo-r3 {
    width: 140%;
    height: 180%;
    border-color: rgba(127,166,155,0.1);
    animation: holoRingPulse 3s ease-in-out infinite reverse;
}

@keyframes holoRingPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.6; }
}

@keyframes holoRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.holo-core {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,0.95);
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

.holo-text {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.holo-particles {
    position: absolute;
    inset: 0;
}

.holo-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: holoParticle 4s linear infinite;
}

.holo-particles span:nth-child(1) { top: 0; left: 25%; animation-delay: 0s; }
.holo-particles span:nth-child(2) { top: 50%; right: 0; animation-delay: 1s; }
.holo-particles span:nth-child(3) { bottom: 0; left: 75%; animation-delay: 2s; }
.holo-particles span:nth-child(4) { top: 50%; left: 0; animation-delay: 3s; }

@keyframes holoParticle {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* 3D Title */
.about-title-3d {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.title-line {
    display: block;
}

.word-3d {
    display: inline-block;
    position: relative;
    margin: 0 0.15em;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.word-3d:hover {
    transform: translateY(-3px) rotateX(10deg);
    color: var(--primary-color);
}

.word-3d.word-accent {
    font-weight: 500;
}

.word-3d.word-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

/* Tagline */
.about-tagline-ultra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.tagline-beam {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    position: relative;
    flex-shrink: 0;
}

.tagline-beam::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    animation: beamGlow 2s ease-in-out infinite;
}

.left-beam::after { left: 0; }
.right-beam::after { right: 0; }

@keyframes beamGlow {
    0%, 100% { box-shadow: 0 0 5px var(--primary-color); opacity: 0.5; }
    50% { box-shadow: 0 0 15px var(--primary-color); opacity: 1; }
}

.tagline-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 3D Showcase */
.about-showcase-3d {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 2rem;
}

/* 3D Panel */
.showcase-panel-3d {
    grid-column: 1 / 2;
    position: relative;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

.panel-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
    backdrop-filter: blur(20px);
}

.panel-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    animation: glowSlide 3s linear infinite;
}

@keyframes glowSlide {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.panel-content {
    position: relative;
    z-index: 2;
    display: flex;
    padding: 2rem;
    gap: 2rem;
}

.panel-visual {
    position: relative;
    width: 45%;
    flex-shrink: 0;
}

.visual-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    z-index: 3;
}

.fc-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.fc-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.fc-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.fc-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.visual-frame img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
}

.visual-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: scanMove 3s linear infinite;
}

@keyframes scanMove {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.visual-tags {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 4;
}

.v-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    animation: tagFloat 3s ease-in-out infinite;
}

.vt-1 { animation-delay: 0s; }
.vt-2 { animation-delay: 0.5s; }
.vt-3 { animation-delay: 1s; }

@keyframes tagFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.panel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(127,166,155,0.1);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
    width: fit-content;
}

.panel-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 0.8rem;
}

.panel-title span {
    color: var(--primary-color);
    font-weight: 600;
}

.panel-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
}

.panel-cta:hover {
    background: var(--primary-dark);
    transform: translateX(5px);
}

.cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.panel-cta:hover .cta-icon {
    transform: translateX(3px);
}

.panel-border-anim {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1px solid transparent;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.showcase-panel-3d:hover .panel-border-anim {
    opacity: 1;
}

/* Orbit Stats Container */
.orbit-stats-container {
    grid-column: 2 / 3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Central Nucleus */
.stats-nucleus {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.nucleus-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(127,166,155,0.3), transparent);
    border-radius: 50%;
    animation: nucleusGlow 3s ease-in-out infinite;
}

@keyframes nucleusGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.nucleus-core {
    position: relative;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(127,166,155,0.4);
    z-index: 2;
}

.nucleus-num {
    font-size: 1.8rem;
    font-weight: 300;
    color: white;
    line-height: 1;
}

.nucleus-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.9);
    text-align: center;
    margin-top: 4px;
}

.nucleus-ring {
    position: absolute;
    inset: -10px;
    border: 1px dashed rgba(127,166,155,0.4);
    border-radius: 50%;
    animation: nucleusRingSpin 30s linear infinite;
}

@keyframes nucleusRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Orbit Paths */
.orbit-path {
    position: absolute;
    border: 1px dashed rgba(127,166,155,0.2);
    border-radius: 50%;
}

.orbit-1 {
    width: 280px;
    height: 280px;
    animation: orbitRotate 25s linear infinite;
}

.orbit-2 {
    width: 350px;
    height: 350px;
    animation: orbitRotate 35s linear infinite reverse;
}

.orbit-3 {
    width: 420px;
    height: 420px;
    animation: orbitRotate 45s linear infinite;
}

@keyframes orbitRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Orbit Cards */
.orbit-card {
    position: absolute;
    width: 110px;
    padding: 12px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
    animation: orbitCardCounter 25s linear infinite;
}

.oc-1 { top: -55px; left: 50%; transform: translateX(-50%); }
.oc-2 { top: 50%; right: -55px; transform: translateY(-50%); animation-duration: 35s; animation-direction: reverse; }
.oc-3 { bottom: -55px; left: 50%; transform: translateX(-50%); animation-duration: 45s; }

@keyframes orbitCardCounter {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(-360deg); }
}

.oc-icon {
    margin-bottom: 8px;
}

.oc-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
}

.oc-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}

.oc-num {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--primary-color);
}

.oc-plus {
    font-size: 1rem;
    color: var(--primary-color);
}

.oc-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.oc-tag {
    display: block;
    font-size: 0.6rem;
    color: var(--text-secondary);
}

/* Stats Bar Futuristic */
.stats-bar-futuristic {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    z-index: 5;
}

.stats-bar-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bar-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127,166,155,0.03), transparent);
}

.bar-scan {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.05), transparent);
    animation: barScanMove 4s linear infinite;
}

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

.stat-module {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.module-icon {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(127,166,155,0.1), rgba(127,166,155,0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.icon-pulse {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid var(--primary-color);
    opacity: 0;
    animation: iconPulse 2s ease-out infinite;
}

@keyframes iconPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0; }
}

.module-data {
    flex: 1;
}

.module-num {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1;
}

.module-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.module-bar {
    width: 100%;
    height: 3px;
    background: rgba(127,166,155,0.1);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 3px;
    transition: width 1.5s ease;
}

.stats-bar-futuristic:hover .bar-fill {
    width: var(--fill);
}

.stat-divider-v {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgba(127,166,155,0.2), transparent);
}

/* Bar Corners */
.bar-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--primary-color);
    z-index: 3;
    opacity: 0.5;
}

.bc-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.bc-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.bc-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.bc-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* ================================================================
   GROUP COMPANIES INFINITE LOGO SLIDER - HYPER CREATIVE DESIGN
   Premium Marquee with 3D Glassmorphism & Floating Effects
   ================================================================ */

.group-companies-showcase {
    margin-top: 4rem;
    position: relative;
    padding: 3rem 0;
}

/* Section Mini Header */
.showcase-header-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.header-line-left,
.header-line-right {
    flex: 1;
    max-width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.4), rgba(127,166,155,0.6));
    border-radius: 2px;
    position: relative;
}

.header-line-right {
    background: linear-gradient(90deg, rgba(127,166,155,0.6), rgba(127,166,155,0.4), transparent);
}

.header-line-left::after,
.header-line-right::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, var(--color-sage), transparent);
    animation: lineGlow 2s ease-in-out infinite;
}

.header-line-left::after {
    right: 0;
    animation-direction: reverse;
}

.header-line-right::before {
    left: 0;
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
    50% { opacity: 1; transform: scaleX(1); }
}

.header-content-mini {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.floating-diamond {
    width: 12px;
    height: 12px;
    position: relative;
    animation: diamondFloat 3s ease-in-out infinite;
}

.diamond-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(127,166,155,0.5);
}

.floating-diamond:last-child {
    animation-delay: -1.5s;
}

@keyframes diamondFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.1); }
}

.header-label-mini {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-sage-dark);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-sage-dark), var(--color-sage));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Creative Slider Container */
.logo-slider-creative {
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
    background: linear-gradient(180deg, 
        rgba(127,166,155,0.02) 0%,
        rgba(127,166,155,0.05) 50%,
        rgba(127,166,155,0.02) 100%);
    border-radius: 24px;
    border: 1px solid rgba(127,166,155,0.1);
}

/* Gradient Fade Overlays for Seamless Edges */
.slider-fade-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 10;
    pointer-events: none;
}

.slider-fade-overlay.fade-left {
    left: 0;
    background: linear-gradient(90deg, 
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.8) 30%,
        rgba(255,255,255,0) 100%);
}

.slider-fade-overlay.fade-right {
    right: 0;
    background: linear-gradient(270deg, 
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.8) 30%,
        rgba(255,255,255,0) 100%);
}

/* Decorative Orbs */
.slider-deco-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.slider-deco-orb.orb-1 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--color-sage-light) 0%, transparent 70%);
    top: -50px;
    left: 10%;
    animation: orbFloat1 8s ease-in-out infinite;
}

.slider-deco-orb.orb-2 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--color-sage) 0%, transparent 70%);
    bottom: -30px;
    right: 15%;
    animation: orbFloat2 10s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, 20px) scale(1.1); }
    66% { transform: translate(-20px, 10px) scale(0.95); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, -20px) scale(1.15); }
}

/* Glowing Line */
.slider-glow-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(127,166,155,0.3) 20%,
        var(--color-sage) 50%,
        rgba(127,166,155,0.3) 80%,
        transparent 100%);
    border-radius: 2px;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; width: 50%; }
    50% { opacity: 1; width: 70%; }
}

/* Slider Track - Infinite Animation */
.slider-track {
    display: flex;
    width: max-content;
    position: relative;
    z-index: 2;
}

.slider-content {
    display: flex;
    gap: 2.5rem;
    padding: 1rem 0;
    animation: slideInfinite 30s linear infinite;
}

@keyframes slideInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.logo-slider-creative:hover .slider-content {
    animation-play-state: paused;
}

/* Logo Card - Creative Glassmorphism Design */
.logo-card-creative {
    position: relative;
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.logo-card-creative:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 5;
}

/* Glass Background */
.card-glass-bg {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    transition: all 0.4s ease;
}

.logo-card-creative:hover .card-glass-bg {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(127,166,155,0.3);
    box-shadow: 
        0 20px 40px rgba(127,166,155,0.15),
        0 10px 20px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Border Glow Effect */
.card-border-glow {
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, 
        transparent 0%,
        rgba(127,166,155,0.3) 25%,
        transparent 50%,
        rgba(127,166,155,0.3) 75%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.logo-card-creative:hover .card-border-glow {
    opacity: 1;
    animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Logo Wrapper */
.logo-wrapper {
    position: relative;
    z-index: 2;
    width: 140px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    transition: all 0.4s ease;
}

.logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(30%) opacity(0.85);
    transition: all 0.5s ease;
}

.logo-card-creative:hover .logo-wrapper img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.08);
}

/* Shine Effect */
.card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    z-index: 3;
}

.logo-card-creative:hover .card-shine {
    left: 150%;
}

/* Hover Particles */
.hover-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-card-creative:hover .hover-particles {
    opacity: 1;
}

.hover-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-sage);
    border-radius: 50%;
    animation: particleFloat 1.5s ease-in-out infinite;
}

.hover-particles span:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.hover-particles span:nth-child(2) {
    top: 20%;
    right: 15%;
    animation-delay: 0.3s;
}

.hover-particles span:nth-child(3) {
    bottom: 15%;
    left: 20%;
    animation-delay: 0.6s;
}

@keyframes particleFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: translate(5px, -10px) scale(1.3);
        opacity: 1;
    }
}

/* Connection Dots */
.connection-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.conn-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-sage);
    border-radius: 50%;
    opacity: 0.4;
    animation: dotPulse 4s ease-in-out infinite;
}

.conn-dot.cd-1 { top: 30%; left: 15%; animation-delay: 0s; }
.conn-dot.cd-2 { top: 60%; left: 30%; animation-delay: 0.8s; }
.conn-dot.cd-3 { top: 25%; right: 25%; animation-delay: 1.6s; }
.conn-dot.cd-4 { top: 70%; right: 40%; animation-delay: 2.4s; }
.conn-dot.cd-5 { bottom: 20%; left: 50%; animation-delay: 3.2s; }

@keyframes dotPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.3;
        box-shadow: 0 0 0 0 rgba(127,166,155,0.4);
    }
    50% { 
        transform: scale(1.5);
        opacity: 0.8;
        box-shadow: 0 0 15px 5px rgba(127,166,155,0.3);
    }
}

/* Bottom Accent */
.showcase-bottom-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.accent-line-animated {
    flex: 1;
    max-width: 150px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.4));
    position: relative;
    overflow: hidden;
}

.accent-line-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-sage), transparent);
    animation: accentSlide 3s linear infinite;
}

.accent-line-animated:last-child {
    background: linear-gradient(270deg, transparent, rgba(127,166,155,0.4));
}

.accent-line-animated:last-child::after {
    animation-direction: reverse;
}

@keyframes accentSlide {
    0% { left: -100%; }
    100% { left: 200%; }
}

.accent-center-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, rgba(127,166,155,0.08), rgba(127,166,155,0.15));
    border: 1px solid rgba(127,166,155,0.2);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.accent-center-badge:hover {
    background: linear-gradient(135deg, rgba(127,166,155,0.15), rgba(127,166,155,0.25));
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(127,166,155,0.2);
}

.accent-center-badge i {
    font-size: 0.85rem;
    color: var(--color-sage);
}

.accent-center-badge span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-sage-dark);
    letter-spacing: 0.5px;
}

/* Responsive Design for Logo Slider */
@media (max-width: 1024px) {
    .logo-card-creative {
        width: 180px;
        height: 110px;
    }
    
    .logo-wrapper {
        width: 120px;
        height: 70px;
    }
    
    .slider-fade-overlay {
        width: 100px;
    }
}

@media (max-width: 768px) {
    .group-companies-showcase {
        margin-top: 3rem;
        padding: 2rem 0;
    }
    
    .showcase-header-mini {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .header-line-left,
    .header-line-right {
        max-width: 80px;
    }
    
    .header-label-mini {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }
    
    .logo-card-creative {
        width: 150px;
        height: 90px;
    }
    
    .logo-wrapper {
        width: 100px;
        height: 60px;
    }
    
    .slider-content {
        gap: 1.5rem;
    }
    
    .slider-fade-overlay {
        width: 60px;
    }
    
    .slider-deco-orb.orb-1,
    .slider-deco-orb.orb-2 {
        display: none;
    }
    
    .showcase-bottom-accent {
        gap: 1rem;
    }
    
    .accent-line-animated {
        max-width: 60px;
    }
    
    .accent-center-badge {
        padding: 0.5rem 1rem;
    }
    
    .accent-center-badge span {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .logo-card-creative {
        width: 130px;
        height: 80px;
    }
    
    .logo-wrapper {
        width: 90px;
        height: 50px;
    }
    
    .slider-content {
        gap: 1rem;
        animation-duration: 20s;
    }
    
    .floating-diamond {
        display: none;
    }
}

/* ================================================================
   OUR COMPANY SECTION — MOBILE RESPONSIVE FIXES
   Breakpoints: 992 · 768 · 580 · 420px
   ================================================================ */

/* ── 992px: Switch showcase to single column ── */
@media (max-width: 992px) {
    .about-section-hyper {
        padding: 3.5rem 0;
    }

    .about-showcase-3d {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .showcase-panel-3d {
        grid-column: 1 / 2;
    }

    /* Orbit container: shrink orbits to fit */
    .orbit-stats-container {
        grid-column: 1 / 2;
        min-height: 360px;
    }

    .orbit-1 {
        width: 240px;
        height: 240px;
    }

    .orbit-2 {
        width: 300px;
        height: 300px;
    }

    .orbit-3 {
        width: 360px;
        height: 360px;
    }

    .oc-1 { top: -55px; }
    .oc-2 { right: -55px; }
    .oc-3 { bottom: -55px; }
}

/* ── 768px: Stack panel-visual/info, compress stats bar ── */
@media (max-width: 768px) {
    .about-section-hyper {
        padding: 3rem 0;
    }

    /* Section header */
    .section-header-creative {
        padding: 0 1rem;
    }

    .section-title-creative {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    /* Main showcase panel: stack image + info vertically */
    .panel-content {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .panel-visual {
        width: 100%;
        flex-shrink: unset;
    }

    .visual-frame img {
        height: 200px;
    }

    /* Visual tags: smaller + wrap */
    .visual-tags {
        position: static;
        transform: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .v-tag {
        font-size: 0.65rem;
        padding: 5px 10px;
    }

    /* Panel info */
    .panel-title {
        font-size: 1.35rem;
    }

    .panel-desc {
        font-size: 0.85rem;
    }

    /* Orbit stats: shrink further */
    .orbit-stats-container {
        min-height: 300px;
        overflow: hidden;
    }

    .stats-nucleus {
        width: 110px;
        height: 110px;
    }

    .nucleus-core {
        width: 96px;
        height: 96px;
    }

    .nucleus-num {
        font-size: 1.5rem;
    }

    .orbit-1 {
        width: 200px;
        height: 200px;
    }

    .orbit-2 {
        width: 256px;
        height: 256px;
    }

    .orbit-3 {
        width: 310px;
        height: 310px;
    }

    .orbit-card {
        width: 90px;
        padding: 9px;
    }

    .oc-num {
        font-size: 1.15rem;
    }

    .oc-label {
        font-size: 0.65rem;
    }

    .oc-tag {
        font-size: 0.55rem;
    }

    /* Stats bar: 2×2 grid */
    .stats-bar-futuristic {
        flex-wrap: wrap;
        padding: 1.2rem 1.5rem;
        gap: 1rem;
        border-radius: 16px;
    }

    .stat-module {
        flex: 1 1 calc(50% - 1rem);
        min-width: 130px;
    }

    .stat-divider-v {
        display: none;
    }
}

/* ── 580px: Compact orbit to static grid, compress more ── */
@media (max-width: 580px) {
    .about-section-hyper {
        padding: 2.5rem 0;
    }

    .panel-content {
        padding: 1.2rem;
        gap: 1.2rem;
    }

    .visual-frame img {
        height: 170px;
    }

    /* Replace orbital layout with static 3-column stat grid */
    .orbit-stats-container {
        min-height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        padding: 1.5rem 0.5rem;
        overflow: visible;
    }

    /* Hide the animated orbit paths on very small screens */
    .orbit-path {
        position: static;
        width: auto !important;
        height: auto !important;
        border: none;
        animation: none;
        display: contents;
    }

    .stats-nucleus {
        order: -1;
        flex-shrink: 0;
        position: relative;
        width: 100px;
        height: 100px;
    }

    .nucleus-core {
        width: 90px;
        height: 90px;
    }

    .nucleus-glow,
    .nucleus-ring {
        display: none;
    }

    .orbit-card {
        position: static !important;
        transform: none !important;
        animation: none !important;
        width: 110px;
        flex-shrink: 0;
    }

    .oc-1, .oc-2, .oc-3 {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    /* Stats bar: 1 column stack */
    .stats-bar-futuristic {
        flex-direction: column;
        gap: 0.9rem;
        padding: 1.2rem 1.2rem;
    }

    .stat-module {
        flex: 1 1 100%;
        width: 100%;
    }

    .module-num {
        font-size: 1.2rem;
    }

    .module-label {
        font-size: 0.7rem;
    }

    /* Header adjustments */
    .section-title-creative {
        font-size: 1.25rem;
    }

    .section-subtitle-creative {
        font-size: 0.82rem;
    }

    /* DNA/cubes/stars: tone down on small screens for performance */
    .dna-strand,
    .cube-field,
    .constellation {
        display: none;
    }
}

/* ── 420px: Ultra-compact ── */
@media (max-width: 420px) {
    .about-section-hyper {
        padding: 2rem 0;
    }

    .panel-content {
        padding: 1rem;
    }

    .visual-frame img {
        height: 150px;
    }

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

    .panel-desc {
        font-size: 0.8rem;
    }

    .panel-cta {
        font-size: 0.78rem;
        padding: 8px 16px;
    }

    .orbit-stats-container {
        gap: 0.75rem;
        padding: 1rem 0.25rem;
    }

    .stats-nucleus {
        width: 85px;
        height: 85px;
    }

    .nucleus-core {
        width: 76px;
        height: 76px;
    }

    .nucleus-num {
        font-size: 1.2rem;
    }

    .nucleus-label {
        font-size: 0.55rem;
    }

    .orbit-card {
        width: 95px;
        padding: 8px;
    }

    .oc-num {
        font-size: 1rem;
    }

    .stats-bar-futuristic {
        padding: 1rem;
        border-radius: 14px;
    }

    .module-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .bar-corner {
        display: none;
    }

    /* Aurora: simplified on smallest screens */
    .aurora-container {
        opacity: 0.3;
    }
}

/* ================================================================
   COMPANY MILESTONES SECTION - HYPER CREATIVE STATISTICS DESIGN
   Premium Counters with 3D Glassmorphism, Animations & Effects
   ================================================================ */

.company-milestones-section {
    margin-top: 3rem;
    padding: 2rem 0;
    position: relative;
}

/* Header Styles - Same as Events Section */
.milestones-header-creative {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.header-milestone-icon {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;
}

.milestone-sphere {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-sage-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 10px 30px rgba(127, 166, 155, 0.3),
        0 5px 15px rgba(127, 166, 155, 0.2),
        inset 0 -3px 10px rgba(0,0,0,0.1);
    animation: spherePulse 3s ease-in-out infinite;
}

.milestone-sphere i {
    font-size: 1.5rem;
    color: white;
    position: relative;
    z-index: 2;
}

.milestone-highlight {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 20px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(2px);
}

.milestone-orbit-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-sage-light);
    border-radius: 50%;
    top: 5px;
    right: -5px;
    box-shadow: 0 0 10px rgba(127, 166, 155, 0.5);
    animation: orbitDot 4s linear infinite;
}

@keyframes spherePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(127, 166, 155, 0.3), 0 5px 15px rgba(127, 166, 155, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(127, 166, 155, 0.4), 0 8px 20px rgba(127, 166, 155, 0.3); }
}

@keyframes orbitDot {
    0% { transform: rotate(0deg) translateX(35px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(35px) rotate(-360deg); }
}

.header-badge-milestones {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(127,166,155,0.1), rgba(127,166,155,0.05));
    border: 1px solid rgba(127,166,155,0.2);
    border-radius: 30px;
    margin-bottom: 1rem;
}

.badge-dot-milestones {
    width: 6px;
    height: 6px;
    background: var(--color-sage);
    border-radius: 50%;
    animation: badgeDotPulse 2s ease-in-out infinite;
}

.badge-dot-milestones:last-child {
    animation-delay: 1s;
}

@keyframes badgeDotPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.badge-text-milestones {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-sage-dark);
    text-transform: uppercase;
}

.milestones-title-creative {
    font-size: 2.25rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.title-highlight-milestones {
    color: var(--color-sage);
    font-weight: 500;
    position: relative;
}

.title-highlight-milestones::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(127,166,155,0.2);
    border-radius: 3px;
    z-index: -1;
}

.milestones-subtitle-creative {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
    max-width: 500px;
    margin: 0 auto;
}

/* Milestones Bento Grid */
.milestones-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Milestone Card Base */
.milestone-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,249,0.9));
    border: 1px solid rgba(127,166,155,0.12);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 160px;
    justify-content: center;
}

.milestone-card:hover {
    transform: translateY(-8px);
    border-color: rgba(127,166,155,0.3);
    box-shadow: 
        0 20px 40px rgba(127,166,155,0.15),
        0 10px 20px rgba(0,0,0,0.05);
}

/* Featured Card Variant */
.milestone-card.featured-card {
    background: linear-gradient(135deg, #1a3a4a 0%, #0d2633 100%);
    border-color: rgba(255,165,0,0.3);
}

.milestone-card.featured-card .card-label,
.milestone-card.featured-card .card-sub,
.milestone-card.featured-card .value-prefix,
.milestone-card.featured-card .value-suffix {
    color: rgba(255,255,255,0.8);
}

.milestone-card.featured-card .value-number {
    color: #FFA500;
    text-shadow: 0 0 20px rgba(255,165,0,0.3);
}

.milestone-card.featured-card:hover {
    box-shadow: 
        0 20px 40px rgba(26,58,74,0.3),
        0 0 30px rgba(255,165,0,0.15);
}

/* Glow Effect */
.card-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-sage), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.milestone-card:hover .card-glow-effect {
    opacity: 1;
}

.milestone-card.featured-card .card-glow-effect {
    background: linear-gradient(90deg, transparent, #FFA500, transparent);
}

/* Icon Hexagon */
.card-icon-wrap {
    margin-bottom: 0.75rem;
}

.icon-hexagon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(127,166,155,0.15), rgba(127,166,155,0.08));
    border: 1px solid rgba(127,166,155,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transform: rotate(0deg);
}

.icon-hexagon i {
    font-size: 1.2rem;
    color: var(--color-sage);
    transition: all 0.3s ease;
}

.milestone-card:hover .icon-hexagon {
    transform: rotate(5deg) scale(1.1);
    background: linear-gradient(135deg, var(--color-sage), var(--color-sage-dark));
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(127,166,155,0.3);
}

.milestone-card:hover .icon-hexagon i {
    color: white;
}

.milestone-card.featured-card .icon-hexagon {
    background: linear-gradient(135deg, rgba(255,165,0,0.2), rgba(255,165,0,0.1));
    border-color: rgba(255,165,0,0.3);
}

.milestone-card.featured-card .icon-hexagon i {
    color: #FFA500;
}

.milestone-card.featured-card:hover .icon-hexagon {
    background: linear-gradient(135deg, #FFA500, #e69500);
}

.milestone-card.featured-card:hover .icon-hexagon i {
    color: white;
}

/* Card Content */
.card-content {
    position: relative;
    z-index: 2;
}

.card-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.card-label-top {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-sage-dark);
    margin-bottom: 0.25rem;
}

.card-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
}

.value-prefix {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.value-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-sage-dark);
    line-height: 1;
    letter-spacing: -1px;
}

.value-suffix {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.card-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

/* Card Decoration */
.card-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    pointer-events: none;
}

.deco-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(127,166,155,0.1);
    border-radius: 50%;
}

.milestone-card.featured-card .deco-circle {
    border-color: rgba(255,165,0,0.15);
}

.deco-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.15));
    transform: rotate(-45deg);
}

.milestone-card.featured-card .deco-line {
    background: linear-gradient(90deg, transparent, rgba(255,165,0,0.2));
}

/* Subsidiaries Card Special Layout */
.subsidiaries-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sub-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
}

.sub-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-sage-dark);
    min-width: 25px;
}

.sub-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* Bottom Decoration */
.milestones-bottom-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.deco-pulse-line {
    flex: 1;
    max-width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.4));
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.deco-pulse-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--color-sage), transparent);
    animation: pulseSlide 2.5s linear infinite;
}

.deco-pulse-line:last-child {
    background: linear-gradient(270deg, transparent, rgba(127,166,155,0.4));
}

.deco-pulse-line:last-child::after {
    animation-direction: reverse;
}

@keyframes pulseSlide {
    0% { left: -100%; }
    100% { left: 200%; }
}

.deco-center-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-sage), var(--color-sage-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(127,166,155,0.3);
    animation: iconPulse 2s ease-in-out infinite;
}

.deco-center-icon i {
    font-size: 0.85rem;
    color: white;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Responsive Milestones */
@media (max-width: 1100px) {
    .milestones-bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .milestone-card.card-subsidiaries {
        grid-column: span 1;
    }
}

@media (max-width: 900px) {
    .milestones-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .milestone-card {
        min-height: 150px;
    }
    
    .milestones-title-creative {
        font-size: 1.875rem;
    }
}

@media (max-width: 600px) {
    .company-milestones-section {
        margin-top: 2rem;
        padding: 1.5rem 0;
    }
    
    .milestones-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .milestone-card {
        padding: 1rem;
        min-height: 130px;
        border-radius: 16px;
    }
    
    .icon-hexagon {
        width: 40px;
        height: 40px;
    }
    
    .icon-hexagon i {
        font-size: 1rem;
    }
    
    .value-number {
        font-size: 1.75rem;
    }
    
    .card-label {
        font-size: 0.7rem;
    }
    
    .header-milestone-icon {
        width: 60px;
        height: 60px;
    }
    
    .milestone-sphere i {
        font-size: 1.25rem;
    }
    
    .milestones-title-creative {
        font-size: 1.5rem;
    }
    
    .milestones-subtitle-creative {
        font-size: 0.875rem;
    }
    
    .sub-num {
        font-size: 1rem;
    }
    
    .sub-label {
        font-size: 0.6rem;
    }
}

@media (max-width: 400px) {
    .milestones-bento-grid {
        grid-template-columns: 1fr;
    }
    
    .milestone-card {
        min-height: auto;
        padding: 1.25rem;
    }
    
    .milestone-card.card-subsidiaries .subsidiaries-content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }
    
    .sub-item {
        flex-direction: column;
        text-align: center;
        gap: 0.15rem;
    }
}

/* ========================================================================
   DEFINING MOMENTS — CHRONO-OBSERVATORY EDITION
   World-Class Horizontal Parallax · Split-panel · 3D Prism Icons
   Scan-line Reveals · Corner Reticles · Constellation Canvas
   ======================================================================== */

/* ── Custom Properties ── */
.dm3-wrap {
    --dm3-accent: #7FA69B;
    --dm3-accent-dim: rgba(127,166,155,0.18);
    --dm3-accent-mid: rgba(127,166,155,0.45);
    --dm3-accent-strong: rgba(127,166,155,0.75);
    --dm3-white: #ffffff;
    --dm3-text-dim: rgba(255,255,255,0.55);
    --dm3-text-mid: rgba(255,255,255,0.75);
    --dm3-dark: #030b16;
    --dm3-deep: #071422;
}

/* ── Section Wrapper ── */
.dm3-wrap {
    position: relative;
    background: var(--dm3-dark);
}

.dm3-scroller {
    position: relative;
}

/* ── Stage (Swiper Layout) ── */
.dm3-stage {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #030b16 0%, #071422 30%, #0c1d35 60%, #071422 85%, #030b16 100%);
}

/* ════════════════════════════════════════════
   ATMOSPHERIC BACKGROUND
   ════════════════════════════════════════════ */
.dm3-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.dm3-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.45;
}

.dm3-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
}

.dm3-orb1 {
    width: 55vw;
    height: 55vw;
    max-width: 700px;
    max-height: 700px;
    top: -25%;
    left: -15%;
    background: radial-gradient(circle, rgba(127,166,155,0.08) 0%, transparent 70%);
    animation: dm3OrbFloat 30s ease-in-out infinite;
}

.dm3-orb2 {
    width: 45vw;
    height: 45vw;
    max-width: 600px;
    max-height: 600px;
    bottom: -20%;
    right: -10%;
    background: radial-gradient(circle, rgba(78,205,196,0.06) 0%, transparent 70%);
    animation: dm3OrbFloat 25s ease-in-out infinite reverse;
}

@keyframes dm3OrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(3%, -4%) scale(1.04); }
    50%  { transform: translate(5%, 3%) scale(1.08); }
    75%  { transform: translate(-2%, 5%) scale(1.03); }
}

/* Perspective grid floor */
.dm3-grid-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-image:
        linear-gradient(rgba(127,166,155,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,166,155,0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(400px) rotateX(55deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
}

/* Film grain noise texture */
.dm3-film-grain {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
    animation: dm3Grain 0.5s steps(2) infinite;
}

@keyframes dm3Grain {
    0%  { background-position: 0 0; }
    50% { background-position: 30px 20px; }
    100%{ background-position: -20px 40px; }
}

/* Thin horizontal ambient lines */
.dm3-h-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--dm3-accent-dim) 30%, var(--dm3-accent-dim) 70%, transparent 100%);
}

.dm3-hl1 { top: 30%; animation: dm3LineFade 8s ease-in-out infinite; }
.dm3-hl2 { bottom: 25%; animation: dm3LineFade 8s ease-in-out infinite 4s; }

@keyframes dm3LineFade {
    0%, 100% { opacity: 0; }
    30%, 70%  { opacity: 1; }
}

/* ════════════════════════════════════════════
   TOP PROGRESS RAIL
   ════════════════════════════════════════════ */
.dm3-progress-rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: rgba(127,166,155,0.08);
    z-index: 100;
    overflow: visible;
}

.dm3-rail-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7FA69B 0%, #4ecdc4 50%, #7FA69B 100%);
    border-radius: 0 2px 2px 0;
    transition: width 0.12s linear;
    position: relative;
}

.dm3-rail-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #7FA69B;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(127,166,155,0.9), 0 0 25px rgba(127,166,155,0.5);
}

.dm3-rail-orb {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 14px;
    height: 14px;
    background: transparent;
    pointer-events: none;
}

/* ════════════════════════════════════════════
   HEADER ROW
   ════════════════════════════════════════════ */
.dm3-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 2.5rem 0.8rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(127,166,155,0.06);
}

.dm3-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dm3-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dm3-ew-line {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--dm3-accent);
    opacity: 0.5;
}

.dm3-ew-dot {
    display: block;
    width: 4px;
    height: 4px;
    background: var(--dm3-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--dm3-accent);
    animation: dm3DotBlink 2s ease-in-out infinite;
}

@keyframes dm3DotBlink {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.3); }
}

.dm3-ew-text {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--dm3-accent);
    text-transform: uppercase;
}

.dm3-main-heading {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.dm3-main-heading em {
    font-style: normal;
    color: var(--dm3-accent);
    text-shadow: 0 0 30px rgba(127,166,155,0.4);
}

.dm3-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.dm3-count-display {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: 'Courier New', monospace;
}

.dm3-cnt-n {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--dm3-accent);
    text-shadow: 0 0 25px rgba(127,166,155,0.4);
    line-height: 1;
    min-width: 3rem;
    text-align: right;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dm3-cnt-slash {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.2);
}

.dm3-cnt-tot {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}

.dm3-era-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(127,166,155,0.08);
    border: 1px solid rgba(127,166,155,0.18);
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s ease;
}

.dm3-era-dot {
    width: 5px;
    height: 5px;
    background: var(--dm3-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--dm3-accent);
    animation: dm3DotBlink 1.5s ease-in-out infinite;
}

.dm3-era-text {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--dm3-accent);
    text-transform: uppercase;
    transition: all 0.4s ease;
}

/* ════════════════════════════════════════════
   HORIZONTAL TRACK VIEWPORT
   ════════════════════════════════════════════ */
.dm3-viewport {
    flex: 1;
    position: relative;
    z-index: 5;
    overflow: hidden;
    min-height: 0;
}

.dm3-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.08s linear;
}

/* ════ SWIPER INSTANCE + CHEVRON NAV ════ */
.dm3-swiper.swiper {
    height: 100%;
    width: 100%;
}
.dm3-swiper .swiper-wrapper {
    height: 100%;
    align-items: stretch;
}
.dm3-nav-btn {
    position: absolute;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid rgba(127,166,155,0.35);
    background: rgba(3,11,22,0.85);
    color: #7FA69B;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    outline: none;
    border-style: solid;
}
.dm3-nav-btn:hover {
    border-color: rgba(127,166,155,0.7);
    background: rgba(127,166,155,0.15);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(127,166,155,0.25), 0 4px 20px rgba(0,0,0,0.3);
    transform: translateY(-50%) scale(1.1);
}
.dm3-nav-btn.swiper-button-disabled {
    opacity: 0.2;
    pointer-events: none;
}
.dm3-nav-prev { left: 1.5rem; }
.dm3-nav-next { right: 1.5rem; }

/* ════════════════════════════════════════════
   SPLIT-SCREEN PANEL LAYOUT
   ════════════════════════════════════════════ */
.dm3-panel {
    min-width: 100vw;
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}

/* Year Side — 42% */
.dm3-year-col {
    width: 42%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    overflow: hidden;
}

/* Card Side — 58% */
.dm3-card-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 3.5rem 1.5rem 1rem;
    position: relative;
    z-index: 2;
}

/* ════════════════════════════════════════════
   YEAR RING SYSTEM (3D ORBITAL RINGS)
   ════════════════════════════════════════════ */
.dm3-year-ring-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(280px, 35vw);
    height: min(280px, 35vw);
    pointer-events: none;
}

.dm3-yr-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid;
    transform: translate(-50%, -50%);
}

.dm3-yr-ring-outer {
    width: 100%;
    height: 100%;
    border-color: rgba(127,166,155,0.07);
    border-style: solid;
    animation: dm3RingRotate 45s linear infinite;
}

.dm3-yr-ring-mid {
    width: 72%;
    height: 72%;
    border-color: rgba(127,166,155,0.10);
    border-style: dashed;
    animation: dm3RingRotate 30s linear infinite reverse;
}

.dm3-yr-ring-inner {
    width: 46%;
    height: 46%;
    border-color: rgba(127,166,155,0.15);
    border-style: dashed;
    animation: dm3RingRotate 18s linear infinite;
}

.dm3-yr-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--dm3-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(127,166,155,0.7), 0 0 30px rgba(127,166,155,0.3);
}

.dm3-yr-dot-pulse {
    animation: dm3DotPulse 1.5s ease-out infinite;
}

@keyframes dm3DotPulse {
    0% { box-shadow: 0 0 15px rgba(127,166,155,0.7), 0 0 30px rgba(127,166,155,0.3); }
    50% { box-shadow: 0 0 25px rgba(127,166,155,1), 0 0 60px rgba(127,166,155,0.5); }
    100% { box-shadow: 0 0 15px rgba(127,166,155,0.7), 0 0 30px rgba(127,166,155,0.3); }
}

@keyframes dm3RingRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ════════════════════════════════════════════
   YEAR DISPLAY (TYPOGRAPHY)
   ════════════════════════════════════════════ */
.dm3-year-display {
    position: relative;
    z-index: 3;
    text-align: left;
    margin-bottom: 0.8rem;
}

.dm3-year-text {
    font-size: clamp(4.5rem, 9vw, 9rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow:
        0 0 60px rgba(127,166,155,0.2),
        2px 2px 0 rgba(0,0,0,0.5);
    transition: color 0.6s ease;
    will-change: transform, opacity;
}

.dm3-year-ghost {
    font-size: clamp(4.5rem, 9vw, 9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    position: absolute;
    bottom: -0.15em;
    left: 0.1em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(127,166,155,0.12);
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
}

.dm3-year-now {
    background: linear-gradient(135deg, #ffffff 0%, #7FA69B 50%, #4ecdc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Era Stamp */
.dm3-era-stamp {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 3;
}

.dm3-stamp-num {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--dm3-accent);
    font-family: 'Courier New', monospace;
}

.dm3-stamp-dash {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--dm3-accent);
    opacity: 0.4;
}

.dm3-stamp-era {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
}

.dm3-era-now .dm3-stamp-era {
    color: var(--dm3-accent);
}

/* Geometric Ornament */
.dm3-geo-ornament {
    position: absolute;
    inset: 0;
    color: rgba(127,166,155,0.12);
    pointer-events: none;
    z-index: 0;
}

.dm3-geo-ornament svg {
    width: 100%;
    height: 100%;
}

/* ════════════════════════════════════════════
   PREMIUM GLASSMORPHISM CARD
   ════════════════════════════════════════════ */
.dm3-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    background:
        linear-gradient(140deg,
            rgba(127,166,155,0.09) 0%,
            rgba(255,255,255,0.04) 20%,
            rgba(127,166,155,0.04) 50%,
            rgba(255,255,255,0.02) 80%,
            rgba(127,166,155,0.06) 100%);
    backdrop-filter: blur(32px) saturate(1.3);
    -webkit-backdrop-filter: blur(32px) saturate(1.3);
    border: 1px solid rgba(127,166,155,0.16);
    border-radius: 24px;
    overflow: hidden;
    /* Entry state */
    opacity: 0;
    transform: translateY(35px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}

.dm3-panel.active .dm3-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dm3-card:hover {
    border-color: rgba(127,166,155,0.4);
    box-shadow:
        0 24px 70px rgba(0,0,0,0.4),
        0 0 50px rgba(127,166,155,0.1);
    transform: translateY(-5px) scale(1.012) !important;
}

/* ── Corner Reticle Marks ── */
.dm3-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 8;
    opacity: 0;
    transition: opacity 0.4s ease 0.5s;
}

.dm3-panel.active .dm3-corner {
    opacity: 1;
}

.dm3-c-tl { top: 8px; left: 8px;
    border-top: 2px solid var(--dm3-accent);
    border-left: 2px solid var(--dm3-accent); }
.dm3-c-tr { top: 8px; right: 8px;
    border-top: 2px solid var(--dm3-accent);
    border-right: 2px solid var(--dm3-accent); }
.dm3-c-bl { bottom: 8px; left: 8px;
    border-bottom: 2px solid var(--dm3-accent);
    border-left: 2px solid var(--dm3-accent); }
.dm3-c-br { bottom: 8px; right: 8px;
    border-bottom: 2px solid var(--dm3-accent);
    border-right: 2px solid var(--dm3-accent); }

/* ── SVG Border Trace ── */
.dm3-border-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;
    overflow: visible;
}

.dm3-border-rect {
    fill: none;
    stroke: var(--dm3-accent);
    stroke-width: 1.5;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity 0.01s 0.3s;
}

.dm3-panel.active .dm3-border-rect {
    opacity: 1;
    animation: dm3BorderTrace 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes dm3BorderTrace {
    0%   { stroke-dasharray: 0 9999; stroke-dashoffset: 0; opacity: 0.6; }
    100% { stroke-dasharray: 9999 0; stroke-dashoffset: 0; opacity: 0.35; }
}

/* The "NOW" card gets a continuously animated spinning border */
.dm3-border-animated .dm3-border-rect {
    opacity: 1 !important;
    stroke-dasharray: 80 9999 !important;
    animation: dm3BorderSpin 3s linear infinite !important;
}

@keyframes dm3BorderSpin {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -9999; }
}

/* ── Scan Line Reveal Animation ── */
.dm3-card-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--dm3-accent) 50%, transparent 100%);
    top: -4px;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(127,166,155,0.6), 0 0 40px rgba(127,166,155,0.3);
}

.dm3-panel.active .dm3-card-scan {
    animation: dm3ScanDown 0.7s cubic-bezier(0.4, 0, 0.6, 1) 0.1s both;
}

@keyframes dm3ScanDown {
    0%   { top: 0; opacity: 1; }
    70%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ── Card Body Layout ── */
.dm3-card-body {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 1.8rem;
}

/* ════════════════════════════════════════════
   3D PRISM ICON
   ════════════════════════════════════════════ */
.dm3-icon-prism-wrap {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    perspective: 300px;
}

.dm3-prism {
    width: 72px;
    height: 72px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(15deg);
    animation: dm3PrismIdle 12s ease-in-out infinite;
}

.dm3-panel.active .dm3-prism {
    animation: dm3PrismEntry 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both,
               dm3PrismIdle 12s ease-in-out 1.5s infinite;
}

@keyframes dm3PrismEntry {
    0%   { transform: rotateX(-90deg) rotateY(0deg) scale(0.5); opacity: 0; }
    60%  { transform: rotateX(10deg) rotateY(20deg) scale(1.05); opacity: 1; }
    100% { transform: rotateX(-15deg) rotateY(15deg) scale(1); }
}

@keyframes dm3PrismIdle {
    0%, 100% { transform: rotateX(-15deg) rotateY(15deg); }
    25%      { transform: rotateX(-10deg) rotateY(25deg); }
    50%      { transform: rotateX(-20deg) rotateY(10deg); }
    75%      { transform: rotateX(-8deg) rotateY(20deg); }
}

.dm3-prism-face {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    border: 1px solid rgba(127,166,155,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    backface-visibility: hidden;
}

.dm3-pf-f {
    background: linear-gradient(145deg, rgba(127,166,155,0.35) 0%, rgba(74,124,111,0.55) 100%);
    transform: translateZ(36px);
    box-shadow: 0 0 30px rgba(127,166,155,0.25);
}

.dm3-pf-b {
    background: rgba(74,124,111,0.12);
    transform: translateZ(-36px) rotateY(180deg);
}

.dm3-pf-r {
    background: rgba(127,166,155,0.08);
    transform: rotateY(90deg) translateZ(36px);
    width: 72px;
}

.dm3-pf-l {
    background: rgba(127,166,155,0.06);
    transform: rotateY(-90deg) translateZ(36px);
    width: 72px;
}

.dm3-pf-t {
    background: linear-gradient(180deg, rgba(127,166,155,0.2) 0%, transparent 100%);
    transform: rotateX(90deg) translateZ(36px);
    height: 72px;
}

.dm3-prism-shadow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 15px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.dm3-prism-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(127,166,155,0.25) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
    animation: dm3GlowPulse 3s ease-in-out infinite;
}

.dm3-glow-intense {
    background: radial-gradient(circle, rgba(127,166,155,0.45) 0%, rgba(127,166,155,0.1) 50%, transparent 70%);
    inset: -28px;
}

@keyframes dm3GlowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.1); }
}

/* Now prism rotates faster */
.dm3-prism-now {
    animation: dm3PrismIdle 6s ease-in-out infinite !important;
}

/* Orbit bead (for NOW panel) */
.dm3-orbit-ring {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    animation: dm3OrbitSpin 3s linear infinite;
    pointer-events: none;
}

.dm3-orbit-bead {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #7FA69B, #4ecdc4);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(127,166,155,0.9), 0 0 25px rgba(127,166,155,0.4);
}

@keyframes dm3OrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════
   CARD CONTENT
   ════════════════════════════════════════════ */
.dm3-card-info {
    flex: 1;
    min-width: 0;
}

.dm3-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.dm3-ms-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(127,166,155,0.7);
    text-transform: uppercase;
    background: rgba(127,166,155,0.08);
    padding: 0.18rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(127,166,155,0.12);
}

.dm3-ms-tag-now {
    background: rgba(127,166,155,0.15);
    border-color: rgba(127,166,155,0.35);
    color: var(--dm3-accent);
}

.dm3-ms-year-tag {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    font-family: 'Courier New', monospace;
}

.dm3-title {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.55rem;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.dm3-divider {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0.7rem;
}

.dm3-divider span {
    display: block;
    height: 2px;
    border-radius: 2px;
}

.dm3-divider span:nth-child(1) {
    width: 28px;
    background: var(--dm3-accent);
}

.dm3-divider span:nth-child(2) {
    width: 8px;
    background: rgba(127,166,155,0.45);
}

.dm3-divider span:nth-child(3) {
    width: 4px;
    background: rgba(127,166,155,0.2);
}

.dm3-divider-glow span:nth-child(1) {
    box-shadow: 0 0 12px rgba(127,166,155,0.6);
}

.dm3-desc {
    font-size: 0.83rem;
    color: var(--dm3-text-mid);
    line-height: 1.75;
    margin: 0;
}

.dm3-desc strong {
    color: var(--dm3-accent);
    font-weight: 600;
}

/* Card shine sweep on hover */
.dm3-card-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255,255,255,0.01) 30%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.01) 70%,
        transparent 100%);
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 6;
    transition: left 1s ease;
}

.dm3-card:hover .dm3-card-shine {
    left: 150%;
}

/* ── NOW Card Special Styles ── */
.dm3-card-now {
    border-color: rgba(127,166,155,0.3);
    background:
        linear-gradient(140deg,
            rgba(127,166,155,0.12) 0%,
            rgba(255,255,255,0.05) 20%,
            rgba(127,166,155,0.08) 60%,
            rgba(78,205,196,0.05) 100%);
}

.dm3-now-badge {
    position: absolute;
    top: -14px;
    right: 22px;
    background: linear-gradient(135deg, #7FA69B 0%, #4a7c6f 100%);
    color: white;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    padding: 0.3rem 1rem;
    border-radius: 25px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 6px 20px rgba(127,166,155,0.45);
}

.dm3-now-badge-dot {
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    animation: dm3DotBlink 1s ease-in-out infinite;
}

.dm3-now-badge-echo {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(127,166,155,0.6);
    border-radius: 25px;
    animation: dm3BadgeEcho 2s ease-out infinite;
}

@keyframes dm3BadgeEcho {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.dm3-now-spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(127,166,155,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    animation: dm3SpotlightPulse 4s ease-in-out infinite;
}

@keyframes dm3SpotlightPulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* Panel entry animation for year side */
.dm3-year-display {
    opacity: 0;
    transform: translateX(-25px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.dm3-panel.active .dm3-year-display {
    opacity: 1;
    transform: translateX(0);
}

.dm3-era-stamp {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}

.dm3-panel.active .dm3-era-stamp {
    opacity: 1;
    transform: translateX(0);
}

/* ════════════════════════════════════════════
   STATS FINALE PANEL
   ════════════════════════════════════════════ */
.dm3-finale {
    align-items: center;
    justify-content: center;
}

.dm3-finale-wrap {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 1rem 2rem;
    max-width: 850px;
    width: 100%;
}

.dm3-finale-heading {
    margin-bottom: 2.5rem;
}

.dm3-finale-heading h3 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.dm3-finale-heading h3 span {
    color: var(--dm3-accent);
    text-shadow: 0 0 30px rgba(127,166,155,0.4);
}

.dm3-finale-heading p {
    font-size: 0.85rem;
    color: var(--dm3-text-dim);
    margin: 0;
}

.dm3-finale-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
}

.dm3-f-stat {
    background:
        linear-gradient(135deg,
            rgba(127,166,155,0.1) 0%,
            rgba(255,255,255,0.03) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(127,166,155,0.18);
    border-radius: 20px;
    padding: 1.6rem 1.2rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dm3-finale.active .dm3-f-stat {
    opacity: 1;
    transform: translateY(0);
}

.dm3-finale.active .dm3-f-stat:nth-child(1) { transition-delay: 0.1s; }
.dm3-finale.active .dm3-f-stat:nth-child(2) { transition-delay: 0.2s; }
.dm3-finale.active .dm3-f-stat:nth-child(3) { transition-delay: 0.3s; }
.dm3-finale.active .dm3-f-stat:nth-child(4) { transition-delay: 0.4s; }

.dm3-f-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(127,166,155,0.5), transparent);
}

.dm3-f-stat:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(127,166,155,0.45);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 25px rgba(127,166,155,0.1);
}

.dm3-f-stat-icon-wrap {
    width: 50px;
    height: 50px;
    margin: 0 auto 0.9rem;
}

.dm3-f-stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(145deg, #7FA69B, #4a7c6f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(127,166,155,0.35);
}

.dm3-f-stat-icon i {
    font-size: 1.1rem;
    color: white;
}

.dm3-f-stat-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.3rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(127,166,155,0.25);
}

.dm3-f-stat-lbl {
    font-size: 0.62rem;
    color: var(--dm3-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 0.7rem;
}

.dm3-f-stat-bar {
    width: 100%;
    height: 2px;
    background: rgba(127,166,155,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.dm3-f-stat-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #7FA69B, #4ecdc4);
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm3-finale.active .dm3-f-stat-bar span {
    width: var(--fw, 0%);
}

/* Finale heading entry */
.dm3-finale-heading {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dm3-finale.active .dm3-finale-heading {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════
   FILM-STRIP NAVIGATION
   ════════════════════════════════════════════ */
.dm3-filmstrip {
    position: relative;
    z-index: 10;
    padding: 0.4rem 2.5rem 0.8rem;
    flex-shrink: 0;
    border-top: 1px solid rgba(127,166,155,0.06);
}

.dm3-fs-line {
    position: relative;
    height: 2px;
    background: rgba(127,166,155,0.1);
    border-radius: 2px;
    margin-bottom: 0.5rem;
}

.dm3-fs-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7FA69B, #4ecdc4);
    border-radius: 2px;
    transition: width 0.15s ease-out;
    box-shadow: 0 0 10px rgba(127,166,155,0.5);
}

.dm3-fs-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.1rem;
}

.dm3-fs-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(127,166,155,0.18);
    background: rgba(3,11,22,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
    outline: none;
    font-family: 'Courier New', monospace;
    position: relative;
}

.dm3-fs-dot span {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.dm3-fs-dot.active {
    border-color: var(--dm3-accent);
    background: linear-gradient(145deg, #7FA69B, #4a7c6f);
    transform: scale(1.2);
    box-shadow:
        0 0 18px rgba(127,166,155,0.5),
        0 4px 14px rgba(127,166,155,0.3);
}

.dm3-fs-dot.active span {
    color: white;
    font-weight: 800;
}

.dm3-fs-dot.passed {
    border-color: rgba(127,166,155,0.4);
    background: rgba(127,166,155,0.1);
}

.dm3-fs-dot.passed span {
    color: rgba(127,166,155,0.8);
}

.dm3-fs-dot:hover:not(.active) {
    border-color: rgba(127,166,155,0.55);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(127,166,155,0.3);
}

.dm3-fs-dot:hover:not(.active) span {
    color: rgba(255,255,255,0.8);
}

/* ════════════════════════════════════════════
   SCROLL CUE
   ════════════════════════════════════════════ */
.dm3-scroll-cue {
    position: absolute;
    bottom: 5rem;
    right: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.2);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 10;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.dm3-cue-icon {
    display: flex;
    align-items: center;
}

.dm3-cue-icon i {
    font-size: 0.65rem;
    animation: dm3CuePulse 1.4s ease-in-out infinite;
}

@keyframes dm3CuePulse {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    50%       { transform: translateX(6px); opacity: 1; }
}

/* ════════════════════════════════════════════
   DEFINING MOMENTS — MOBILE RESPONSIVE
   Desktop ≥769px : horizontal parallax (unchanged)
   Mobile  ≤768px : full vertical flow — NO horizontal parallax
   Breakpoints: 768 · 480 · 380px
   ════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   768px AND BELOW — Disable horizontal parallax, switch to
   a natural vertical-scroll layout. !important beats JS inline styles.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Kill JS-injected scroller height */
    .dm3-scroller { height: auto !important; }

    /* Stage: no longer sticky, flows with document */
    .dm3-stage {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Background stays inside wrap */
    .dm3-bg { position: absolute; }
    .dm3-canvas { display: none !important; }
    .dm3-orb1, .dm3-orb2, .dm3-grid-floor,
    .dm3-film-grain, .dm3-h-line { display: none; }
    .dm3-progress-rail { display: none; }

    /* Header: sticky (navigation reference) */
    .dm3-header {
        position: sticky;
        top: 0;
        z-index: 200;
        background: rgba(3,11,22,0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 0.8rem 1.25rem 0.65rem;
        border-bottom: 1px solid rgba(127,166,155,0.12);
    }
    .dm3-main-heading { font-size: 1rem; }
    .dm3-cnt-n { font-size: 1.75rem; min-width: 2.2rem; }
    .dm3-era-pill { display: none; }
    .dm3-ew-text { font-size: 0.5rem; letter-spacing: 2px; }

    /* Viewport: revealed */
    .dm3-viewport {
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }

    /* Track: vertical column, kill JS translate */
    .dm3-track {
        flex-direction: column !important;
        height: auto !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* Panels: vertical stacked blocks */
    .dm3-panel {
        min-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        overflow: visible !important;
        padding: 1.5rem 0 2rem;
        border-bottom: 1px solid rgba(127,166,155,0.07);
    }

    /* Year col: horizontal strip */
    .dm3-year-col {
        width: 100%;
        height: auto;
        padding: 0.5rem 1.25rem 0.25rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        flex-shrink: 0;
        position: relative;
        overflow: visible;
    }

    .dm3-year-ring-system {
        width: 60px;
        height: 60px;
        position: relative;
        top: auto; left: auto;
        transform: none;
        flex-shrink: 0;
    }

    .dm3-geo-ornament { display: none; }

    /* Year display: always visible (no entry animation) */
    .dm3-year-display {
        text-align: left;
        margin-bottom: 0;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .dm3-year-text {
        font-size: clamp(2.8rem, 9vw, 4.5rem);
        line-height: 1;
    }
    .dm3-year-ghost { display: none; }

    /* Era stamp: always visible */
    .dm3-era-stamp {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Card col */
    .dm3-card-col {
        flex: none !important;
        height: auto !important;
        padding: 0.75rem 1.25rem 0.5rem;
        align-items: stretch;
        justify-content: flex-start;
        overflow: visible !important;
    }

    /* Cards: always fully visible */
    .dm3-card {
        max-width: 100% !important;
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    }

    .dm3-card-scan { display: none; }
    .dm3-border-rect {
        animation: none !important;
        stroke-dasharray: 9999 !important;
        opacity: 0.2 !important;
    }
    .dm3-corner { opacity: 1 !important; transition: none !important; }

    /* Card body */
    .dm3-card-body {
        padding: 1.25rem 1.1rem;
        flex-direction: row;
        gap: 1rem;
        align-items: flex-start;
    }

    /* Prism icon */
    .dm3-icon-prism-wrap { width: 58px; height: 58px; }
    .dm3-prism,
    .dm3-prism-face { width: 58px; height: 58px; }
    .dm3-pf-f { transform: translateZ(29px); font-size: 1.1rem; }
    .dm3-pf-b { transform: translateZ(-29px) rotateY(180deg); }
    .dm3-pf-r { transform: rotateY(90deg) translateZ(29px); }
    .dm3-pf-l { transform: rotateY(-90deg) translateZ(29px); }
    .dm3-pf-t { transform: rotateX(90deg) translateZ(29px); }
    .dm3-panel.active .dm3-prism { animation: dm3PrismIdle 12s ease-in-out infinite; }
    .dm3-prism-shadow { display: none; }

    /* Typography */
    .dm3-title { font-size: 1rem; }
    .dm3-desc  { font-size: 0.8rem; line-height: 1.7; }

    /* Filmstrip: sticky bottom navigation */
    .dm3-filmstrip {
        position: sticky;
        bottom: 0;
        z-index: 200;
        background: rgba(3,11,22,0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 0.5rem 1.25rem 0.65rem;
        border-top: 1px solid rgba(127,166,155,0.12);
    }
    .dm3-fs-dot { width: 24px; height: 24px; }
    .dm3-fs-dot span { font-size: 0.42rem; }

    /* Finale: always visible */
    .dm3-finale {
        min-width: 100% !important;
        width: 100% !important;
        border-bottom: none;
    }
    .dm3-finale-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    .dm3-finale-wrap { padding: 1rem 1.25rem; max-width: 100%; }
    .dm3-finale-heading h3 { font-size: 1.2rem; }
    .dm3-f-stat {
        opacity: 1 !important;
        transform: none !important;
    }
    .dm3-finale-heading {
        opacity: 1 !important;
        transform: none !important;
    }
    .dm3-finale.active .dm3-f-stat-bar span { width: var(--fw, 75%); }

    /* NOW badge: adjust for mobile */
    .dm3-now-badge { font-size: 0.5rem; padding: 0.22rem 0.7rem; top: -10px; }

    /* Scroll cue: hide */
    .dm3-scroll-cue { display: none; }
}

/* ── 480px: Fine-tune compact sizing on top of vertical layout ── */
@media (max-width: 480px) {
    .dm3-year-col { padding: 0.4rem 1rem 0.2rem; gap: 0.75rem; }
    .dm3-year-ring-system { width: 46px; height: 46px; }
    .dm3-yr-ring-outer { display: none; }
    .dm3-year-text { font-size: clamp(2.4rem, 8.5vw, 3.5rem); }
    .dm3-era-stamp { display: none; }
    .dm3-card-col { padding: 0.6rem 1rem 0.4rem; }
    .dm3-card-body { padding: 1rem 0.9rem; gap: 0.8rem; }
    .dm3-icon-prism-wrap { width: 48px; height: 48px; }
    .dm3-prism, .dm3-prism-face { width: 48px; height: 48px; }
    .dm3-pf-f { transform: translateZ(24px); font-size: 0.95rem; }
    .dm3-pf-b { transform: translateZ(-24px) rotateY(180deg); }
    .dm3-pf-r { transform: rotateY(90deg) translateZ(24px); }
    .dm3-pf-l { transform: rotateY(-90deg) translateZ(24px); }
    .dm3-pf-t { transform: rotateX(90deg) translateZ(24px); }
    .dm3-title { font-size: 0.92rem; }
    .dm3-desc  { font-size: 0.76rem; line-height: 1.65; }
    .dm3-header { padding: 0.65rem 1rem 0.55rem; }
    .dm3-main-heading { font-size: 0.85rem; }
    .dm3-cnt-n { font-size: 1.4rem; }
    .dm3-filmstrip { padding: 0.4rem 1rem 0.55rem; }
    .dm3-fs-dot { width: 20px; height: 20px; }
    .dm3-fs-dot span { font-size: 0.38rem; }
    .dm3-finale-stats { gap: 0.6rem; }
    .dm3-f-stat { padding: 0.9rem 0.7rem; }
    .dm3-f-stat-num { font-size: 1.4rem; }
}



/* ── 380px: Narrowest phones ── */
@media (max-width: 380px) {
    .dm3-year-col {
        padding: 0.45rem 0.65rem 0.3rem;
        gap: 0.5rem;
    }

    .dm3-year-ring-system {
        width: 36px;
        height: 36px;
    }

    .dm3-yr-ring-inner { display: none; }

    .dm3-year-text {
        font-size: clamp(1.4rem, 6vw, 2.2rem);
    }

    .dm3-card-body {
        padding: 0.75rem 0.7rem;
        gap: 0.55rem;
    }

    .dm3-title {
        font-size: 0.82rem;
    }

    .dm3-desc {
        font-size: 0.68rem;
        -webkit-line-clamp: 4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dm3-header {
        padding: 0.4rem 0.6rem 0.35rem;
    }

    .dm3-main-heading {
        font-size: 0.72rem;
    }

    .dm3-cnt-n {
        font-size: 1rem;
    }

    .dm3-filmstrip {
        padding: 0.2rem 0.4rem 0.35rem;
    }

    .dm3-fs-dot {
        width: 14px;
        height: 14px;
    }

    .dm3-fs-dot span {
        display: none;
    }

    .dm3-fs-dot.active::after {
        content: '';
        width: 5px;
        height: 5px;
        background: white;
        border-radius: 50%;
    }

    /* Finale: narrowest */
    .dm3-finale-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .dm3-f-stat { padding: 0.75rem 0.6rem; }
    .dm3-f-stat-num { font-size: 1.2rem; }
    .dm3-f-stat-lbl { font-size: 0.54rem; }
}

/* ════════════════════════════════════════
   DEFINING MOMENTS — SWIPER RESPONSIVE FIXES
   Overrides the existing dm3 mobile stacking rules
   ════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Stage: fixed height for Swiper container */
    .dm3-stage {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    /* Header: revert sticky so it sits in flex flow */
    .dm3-header {
        position: relative !important;
        top: auto !important;
    }
    /* Viewport: must be overflow:hidden for Swiper */
    .dm3-viewport {
        overflow: hidden !important;
        height: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
    }
    /* Track: Swiper needs horizontal flex */
    .dm3-track {
        flex-direction: row !important;
        height: 100% !important;
    }
    /* Panel: fill slide, allow vertical scroll for tall content */
    .dm3-panel {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-bottom: none !important;
    }
    /* Filmstrip: revert sticky inside overflow:hidden parent */
    .dm3-filmstrip {
        position: relative !important;
        bottom: auto !important;
    }
    /* Nav buttons: slightly smaller on mobile */
    .dm3-nav-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.85rem !important;
    }
}
@media (max-width: 480px) {
    .dm3-nav-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }
    .dm3-nav-prev { left: 0.5rem !important; }
    .dm3-nav-next { right: 0.5rem !important; }
}

/* INDUSTRIES SECTION - 3D IMMERSIVE CAROUSEL */
/* ============================================== */

.industries-section-immersive {
    position: relative;
    padding: 4rem 0 3rem;
    background: linear-gradient(180deg, #f5f8f7 0%, #ffffff 50%, #f8faf9 100%);
    overflow: hidden;
}

/* Immersive Background */
.ind-immersive-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Wave Animation */
.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.wave-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
}

.wave-path {
    animation: waveMove 8s linear infinite;
}

.wave-2 {
    animation-delay: -4s;
    animation-duration: 10s;
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Floating Hexagons */
.hex-field {
    position: absolute;
    inset: 0;
}

.float-hex {
    position: absolute;
    opacity: 0.6;
}

.float-hex svg {
    width: 100%;
    height: 100%;
}

.hex-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 5%;
    animation: hexFloat 15s ease-in-out infinite;
}

.hex-2 {
    width: 70px;
    height: 70px;
    top: 30%;
    right: 8%;
    animation: hexFloat 12s ease-in-out infinite reverse;
}

.hex-3 {
    width: 50px;
    height: 50px;
    bottom: 30%;
    left: 10%;
    animation: hexFloat 18s ease-in-out infinite 2s;
}

@keyframes hexFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(30deg); }
}

/* Glowing Orbs */
.glow-orbs {
    position: absolute;
    inset: 0;
}

.g-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(127,166,155,0.2), transparent);
    top: 20%;
    right: 10%;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(155,191,179,0.15), transparent);
    bottom: 20%;
    left: 15%;
    animation: orbFloat 15s ease-in-out infinite reverse;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

/* Immersive Header */
.ind-header-immersive {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 5;
}

/* Neon Badge */
.neon-badge-container {
    margin-bottom: 1.5rem;
}

.neon-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.8rem;
}

.neon-glow {
    position: absolute;
    inset: 0;
    background: rgba(127,166,155,0.1);
    border-radius: 30px;
    filter: blur(10px);
    animation: neonGlow 2s ease-in-out infinite;
}

@keyframes neonGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.neon-ring {
    position: absolute;
    border-radius: 30px;
    border: 1px solid rgba(127,166,155,0.3);
}

.nr-1 {
    inset: 0;
    animation: neonRingPulse 3s ease-in-out infinite;
}

.nr-2 {
    inset: -8px;
    border-style: dashed;
    border-color: rgba(127,166,155,0.15);
    animation: neonRingSpin 15s linear infinite;
}

@keyframes neonRingPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes neonRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.neon-text {
    position: relative;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255,255,255,0.95);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
}

/* Glitch Title */
.ind-title-glitch {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
}

.glitch-line {
    display: block;
}

.glitch-word {
    display: inline-block;
    position: relative;
    margin: 0 0.15em;
    transition: all 0.3s ease;
}

.glitch-word:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.glitch-word.glitch-accent {
    color: var(--primary-color);
    font-weight: 500;
}

/* Typing Tagline */
.ind-tagline-typing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.typing-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
}

.typing-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Scroll Hint */
.scroll-hint-3d {
    display: flex;
    margin-top: 1.5rem;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

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

.hint-arrows {
    display: flex;
    gap: 2px;
}

.arrow-bounce {
    display: flex;
    gap: 2px;
}

.arrow-bounce i {
    font-size: 0.6rem;
    color: var(--primary-color);
    animation: arrowBounce 1.5s ease-in-out infinite;
}

.arrow-bounce i:nth-child(2) { animation-delay: 0.2s; }
.arrow-bounce i:nth-child(3) { animation-delay: 0.4s; }

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    50% { transform: translateX(5px); opacity: 1; }
}

/* 3D Carousel */
.ind-carousel-3d {
    position: relative;
    z-index: 5;
    padding: 0 1rem;
}

.carousel-track-3d {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem 0 2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carousel-track-3d::-webkit-scrollbar {
    display: none;
}

.carousel-card-wrap {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* 3D Card */
.ind-card-3d {
    position: relative;
    height: 340px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    perspective: 1000px;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.ind-card-3d:hover {
    transform: translateY(-10px) scale(1.02) !important;
    opacity: 1 !important;
}

.carousel-track-3d {
    cursor: grab;
    user-select: none;
}

.carousel-track-3d:active {
    cursor: grabbing;
}

.card-3d-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-3d-front {
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 20px;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(127,166,155,0.1);
    z-index: 2;
}

.card-gradient-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127,166,155,0.05) 0%, transparent 60%);
    border-radius: 20px;
}

.card-mesh-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(127,166,155,0.03) 1px, transparent 0);
    background-size: 20px 20px;
    border-radius: 20px;
}

/* Card Icon */
.card-icon-3d {
    position: relative;
    margin-bottom: 1rem;
}

.icon-sphere {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(127,166,155,0.15), rgba(127,166,155,0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.icon-sphere svg {
    width: 26px;
    height: 26px;
    color: var(--primary-color);
    transition: all 0.4s ease;
}

.ind-card-3d:hover .icon-sphere {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 8px 25px rgba(127,166,155,0.4);
}

.ind-card-3d:hover .icon-sphere svg {
    color: white;
}

.icon-ring-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(127,166,155,0.2);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ind-card-3d:hover .icon-ring-glow {
    opacity: 1;
    animation: ringGlowPulse 1.5s ease-in-out infinite;
}

@keyframes ringGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0; }
}

.card-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2.5rem;
    font-weight: 200;
    color: rgba(127,166,155,0.15);
    line-height: 1;
}

.card-title-3d {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.6rem;
    transition: color 0.3s ease;
}

.ind-card-3d:hover .card-title-3d {
    color: var(--primary-color);
}

.card-desc-3d {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 auto;
}

.card-tags-3d {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.card-tags-3d span {
    padding: 4px 10px;
    background: rgba(127,166,155,0.1);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--primary-color);
}

/* Card Shine */
.card-shine-3d {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    z-index: 3;
    transition: left 0.6s ease;
}

.ind-card-3d:hover .card-shine-3d {
    left: 150%;
}

/* Card Bottom Glow */
.card-bottom-glow {
    position: absolute;
    bottom: -20px;
    left: 10%;
    right: 10%;
    height: 40px;
    background: radial-gradient(ellipse, rgba(127,166,155,0.2), transparent);
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ind-card-3d:hover .card-bottom-glow {
    opacity: 1;
}

/* Carousel Navigation */
.carousel-nav-3d {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

.nav-btn-3d {
    width: 44px;
    height: 44px;
    background: white;
    border: 1px solid rgba(127,166,155,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn-3d:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.carousel-progress-3d {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.progress-track {
    width: 200px;
    height: 3px;
    background: rgba(127,166,155,0.15);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 12.5%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-dots {
    display: flex;
    gap: 8px;
}

.p-dot {
    width: 8px;
    height: 8px;
    background: rgba(127,166,155,0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.p-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

.p-dot:hover {
    background: var(--primary-color);
}

/* Industries Responsive */
@media (max-width: 768px) {
    .industries-section-immersive {
        padding: 3rem 0 2rem;
    }
    
    .carousel-card-wrap {
        flex: 0 0 240px;
    }
    
    .ind-card-3d {
        height: 300px;
    }
    
    .ind-title-glitch {
        font-size: 1.6rem;
    }
    
    .ind-tagline-typing {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .carousel-nav-3d {
        gap: 1rem;
    }
    
    .progress-track {
        width: 120px;
    }
}

/* ============================================== */
/* INNOVATION SECTION - LABORATORY DESIGN */
/* ============================================== */

.innovation-section-lab {
    background: linear-gradient(180deg, #ffffff 0%, #f7faf9 30%, #f5f8f7 70%, #f8fbfa 100%);
    position: relative;
    padding: 5rem 0 4rem;
    overflow: hidden;
}

/* Laboratory Ambient Background */
.lab-ambient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Molecular Network */
.molecular-network {
    position: absolute;
    inset: 0;
    opacity: 0.8;
}

.mol-net-svg {
    width: 100%;
    height: 100%;
}

.mol-line {
    stroke: rgba(127,166,155,0.15);
    stroke-width: 1;
    stroke-dasharray: 5 5;
    animation: molLineFlow 3s linear infinite;
}

.ml-1 { animation-delay: 0s; }
.ml-2 { animation-delay: 0.3s; }
.ml-3 { animation-delay: 0.6s; }
.ml-4 { animation-delay: 0.9s; }
.ml-5 { animation-delay: 1.2s; }
.ml-6 { animation-delay: 1.5s; }
.ml-7 { animation-delay: 1.8s; }
.ml-8 { animation-delay: 2.1s; }

@keyframes molLineFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
}

.mol-node {
    animation: molNodePulse 3s ease-in-out infinite;
}

.mn-1 { animation-delay: 0s; }
.mn-2 { animation-delay: 0.3s; }
.mn-3 { animation-delay: 0.6s; }
.mn-4 { animation-delay: 0.9s; }
.mn-5 { animation-delay: 1.2s; }
.mn-6 { animation-delay: 1.5s; }
.mn-7 { animation-delay: 1.8s; }
.mn-8 { animation-delay: 2.1s; }
.mn-9 { animation-delay: 2.4s; }
.mn-10 { animation-delay: 2.7s; }

@keyframes molNodePulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* Lab Grid Pattern */
.lab-grid-pattern {
    position: absolute;
    inset: 0;
}

.lab-grid-svg {
    width: 100%;
    height: 100%;
}

/* Lab Bubbles */
.lab-bubbles {
    position: absolute;
    inset: 0;
}

.lab-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(127,166,155,0.1));
    animation: bubbleFloat 10s ease-in-out infinite;
}

.lb-1 { width: 20px; height: 20px; top: 15%; left: 10%; animation-delay: 0s; }
.lb-2 { width: 15px; height: 15px; top: 40%; left: 5%; animation-delay: 2s; }
.lb-3 { width: 25px; height: 25px; top: 60%; right: 8%; animation-delay: 4s; }
.lb-4 { width: 12px; height: 12px; top: 25%; right: 15%; animation-delay: 6s; }
.lb-5 { width: 18px; height: 18px; bottom: 30%; left: 12%; animation-delay: 8s; }

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-30px) scale(1.1); opacity: 0.6; }
}

/* DNA Decoration */
.dna-decor {
    position: absolute;
    top: 20%;
    height: 60%;
    width: 30px;
    opacity: 0.4;
}

.dna-left { left: 3%; }
.dna-right { right: 3%; }

.dna-strand-decor {
    position: relative;
    width: 100%;
    height: 100%;
}

.strand-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    left: 50%;
    animation: strandWave 4s ease-in-out infinite;
}

.strand-node.sn-1 { top: 0%; animation-delay: 0s; }
.strand-node.sn-2 { top: 33%; animation-delay: 1s; }
.strand-node.sn-3 { top: 66%; animation-delay: 2s; }
.strand-node.sn-4 { top: 100%; animation-delay: 3s; }

@keyframes strandWave {
    0%, 100% { transform: translateX(-50%) translateX(-10px); }
    50% { transform: translateX(-50%) translateX(10px); }
}

/* Lab Header */
.lab-header-futuristic {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 5;
}

/* Atom Badge */
.atom-badge-container {
    margin-bottom: 1.5rem;
}

.atom-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 60px;
}

.atom-nucleus {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 15px rgba(127,166,155,0.5);
}

.electron-orbit {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(127,166,155,0.3);
    border-radius: 50%;
}

.eo-1 {
    width: 30px;
    height: 30px;
    animation: orbitSpin 3s linear infinite;
}

.eo-2 {
    width: 40px;
    height: 20px;
    animation: orbitSpin 4s linear infinite reverse;
}

.eo-3 {
    width: 20px;
    height: 40px;
    animation: orbitSpin 5s linear infinite;
}

@keyframes orbitSpin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

.electron {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--primary-color);
}

.atom-text {
    position: relative;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(255,255,255,0.95);
    padding: 0.5rem 1.5rem 0.5rem 2.5rem;
    border-radius: 30px;
    margin-left: 20px;
}

/* Sci-Fi Title */
.lab-title-scifi {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.scifi-line {
    display: block;
}

.scifi-word {
    display: inline-block;
    position: relative;
    margin: 0 0.15em;
    transition: all 0.35s ease;
}

.scifi-word:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
    text-shadow: 0 0 20px rgba(127,166,155,0.3);
}

.scifi-word.scifi-accent {
    color: var(--primary-color);
    font-weight: 500;
}

/* Scan Tagline */
.lab-tagline-scan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    max-width: 650px;
    margin: 0 auto;
}

.scan-line-left,
.scan-line-right {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    flex-shrink: 0;
    position: relative;
}

.scan-line-left::after,
.scan-line-right::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    animation: scanDotPulse 2s ease-in-out infinite;
}

.scan-line-left::after { left: 0; }
.scan-line-right::after { right: 0; }

@keyframes scanDotPulse {
    0%, 100% { opacity: 0.3; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 10px var(--primary-color); }
}

.scan-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Lab Bento Grid */
.lab-bento-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    position: relative;
    z-index: 5;
}

/* Main Lab Card */
.lab-card-main {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    position: relative;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    border: 1px solid rgba(127,166,155,0.1);
    min-height: 180px;
}

.lab-card-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
    backdrop-filter: blur(10px);
}

.lab-card-circuit {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 150px;
    opacity: 0.5;
}

.circuit-svg {
    width: 100%;
    height: 100%;
}

/* New Vertical Layout for Main Card */
.lab-card-content-vertical {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.5rem 2rem;
    min-height: 180px;
    height: 100%;
}

/* Badge at Top */
.lab-badge-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.2rem;
}

.badge-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127,166,155,0.05);
    flex-shrink: 0;
}

.badge-icon-circle i {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.badge-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Heading */
.lab-card-title-vertical {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.lab-card-title-vertical .title-light {
    font-weight: 300;
    font-style: italic;
    color: var(--text-secondary);
}

.lab-card-title-vertical .title-accent {
    font-weight: 500;
    color: var(--primary-color);
    font-style: italic;
}

/* 2-Line Description with Ellipsis */
.lab-card-desc-vertical {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* CTA at Bottom */
.lab-cta-bottom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.8rem 1.5rem;
    background: var(--primary-color);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(127,166,155,0.25);
    margin-top: auto;
    align-self: flex-start;
}

.lab-cta-bottom:hover {
    background: var(--primary-dark);
    transform: translateX(5px);
    box-shadow: 0 6px 24px rgba(127,166,155,0.35);
}

.lab-cta-bottom .cta-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
}

.lab-cta-bottom .cta-arrow-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lab-cta-bottom .cta-arrow-circle i {
    font-size: 0.7rem;
    color: white;
}

.lab-cta-bottom:hover .cta-arrow-circle {
    background: rgba(255,255,255,0.3);
    transform: translateX(3px);
}

/* Hide old content styles not needed */
.lab-card-content {
    display: none;
}

.lab-badge-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(127,166,155,0.1);
    border: 1px solid rgba(127,166,155,0.2);
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.badge-glow {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: rgba(127,166,155,0.1);
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lab-card-main:hover .badge-glow {
    opacity: 1;
}

.lab-card-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.lab-card-title span {
    color: var(--primary-color);
    font-weight: 600;
}

.lab-card-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
    max-width: 450px;
}

.lab-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.lab-cta-btn:hover {
    background: var(--primary-dark);
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(127,166,155,0.35);
}

.btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.lab-cta-btn:hover .btn-arrow {
    transform: translateX(3px);
}

/* Lab Card Visual */
.lab-card-visual {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-beaker {
    position: relative;
    width: 60px;
    height: 80px;
    border: 2px solid rgba(127,166,155,0.3);
    border-radius: 0 0 10px 10px;
    border-top: none;
    overflow: hidden;
}

.visual-beaker::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -5px;
    right: -5px;
    height: 10px;
    border: 2px solid rgba(127,166,155,0.3);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.beaker-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(127,166,155,0.3), rgba(127,166,155,0.5));
    animation: liquidWave 3s ease-in-out infinite;
}

@keyframes liquidWave {
    0%, 100% { height: 60%; }
    50% { height: 65%; }
}

.beaker-bubbles {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.beaker-bubbles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: bubbleRise 2s ease-in-out infinite;
}

.beaker-bubbles span:nth-child(1) { left: -10px; animation-delay: 0s; }
.beaker-bubbles span:nth-child(2) { left: 0; animation-delay: 0.5s; }
.beaker-bubbles span:nth-child(3) { left: 10px; animation-delay: 1s; }

@keyframes bubbleRise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-50px) scale(0.5); opacity: 0; }
}

.visual-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v-ring {
    position: absolute;
    border: 1px solid rgba(127,166,155,0.2);
    border-radius: 50%;
    animation: vRingPulse 4s ease-in-out infinite;
}

.vr-1 { width: 100%; height: 100%; animation-delay: 0s; }
.vr-2 { width: 75%; height: 75%; animation-delay: 1.3s; }
.vr-3 { width: 50%; height: 50%; animation-delay: 2.6s; }

@keyframes vRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

.card-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: cardScan 4s linear infinite;
}

@keyframes cardScan {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Lab Image Card */
.lab-card-image {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 380px;
}

.lab-frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.frame-line {
    position: absolute;
    background: rgba(127,166,155,0.3);
}

.fl-top { top: 15px; left: 15px; right: 15px; height: 1px; }
.fl-bottom { bottom: 15px; left: 15px; right: 15px; height: 1px; }
.fl-left { top: 15px; bottom: 15px; left: 15px; width: 1px; }
.fl-right { top: 15px; bottom: 15px; right: 15px; width: 1px; }

.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
}

.fc-1 { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.fc-2 { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.fc-3 { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.fc-4 { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.lab-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.lab-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lab-card-image:hover .lab-image-wrap img {
    transform: scale(1.05);
}

.image-scan-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.3) 100%);
    z-index: 2;
}

.image-data-overlay {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.data-item {
    font-size: 0.65rem;
    font-family: monospace;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: dataFlicker 2s step-end infinite;
}

.data-item:nth-child(2) {
    animation-delay: 1s;
}

@keyframes dataFlicker {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0; }
}

.lab-image-badge {
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    z-index: 5;
}

.badge-pulse {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    border: 1px solid var(--primary-color);
    animation: badgePulse 2s ease-out infinite;
}

@keyframes badgePulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* Lab Meters Row */
.lab-meters-row {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.lab-meter-card {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.04);
    border: 1px solid rgba(127,166,155,0.1);
    overflow: hidden;
    transition: all 0.4s ease;
}

.lab-meter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(127,166,155,0.15);
}

.meter-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
}

.meter-display {
    position: relative;
    z-index: 2;
}

.meter-icon {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
}

.meter-icon svg {
    width: 100%;
    height: 100%;
    color: var(--primary-color);
}

.icon-glow-ring {
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(127,166,155,0.3);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lab-meter-card:hover .icon-glow-ring {
    opacity: 1;
    animation: iconGlowPulse 1.5s ease-in-out infinite;
}

@keyframes iconGlowPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.meter-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}

.meter-num {
    font-size: 2rem;
    font-weight: 300;
    color: var(--primary-color);
    line-height: 1;
}

.meter-plus {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.meter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.meter-gauge {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(127,166,155,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 4px;
    transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.lab-meter-card:hover .gauge-fill {
    width: var(--gauge-level);
}

.gauge-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
    transform: translateX(100%);
    transition: transform 1.5s ease;
}

.lab-meter-card:hover .gauge-glow {
    transform: translateX(0);
}

/* Lab Modules Row */
.lab-modules-row {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.lab-module {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.04);
    border: 1px solid rgba(127,166,155,0.1);
    overflow: hidden;
    transition: all 0.4s ease;
}

.lab-module:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(127,166,155,0.12);
}

.module-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
}

.module-icon-wrap {
    position: relative;
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
}

.module-icon-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(127,166,155,0.15), rgba(127,166,155,0.05));
    border-radius: 16px;
    transition: all 0.4s ease;
}

.lab-module:hover .module-icon-bg {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: rotate(10deg) scale(1.05);
    box-shadow: 0 8px 25px rgba(127,166,155,0.35);
}

.module-icon-wrap svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 12px;
    color: var(--primary-color);
    transition: color 0.4s ease;
}

.lab-module:hover .module-icon-wrap svg {
    color: white;
}

.module-icon-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(127,166,155,0.2), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lab-module:hover .module-icon-glow {
    opacity: 1;
}

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

.module-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    transition: color 0.3s ease;
}

.lab-module:hover .module-title {
    color: var(--primary-color);
}

.module-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.module-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #4CAF50;
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(76,175,80,0); }
}

.status-text {
    font-size: 0.7rem;
    color: #4CAF50;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.module-line-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.lab-module:hover .module-line-accent {
    transform: scaleX(1);
}

/* Innovation Responsive */
@media (max-width: 1100px) {
    .lab-bento-grid {
        grid-template-columns: 1fr;
    }
    
    .lab-card-main {
        grid-column: 1;
    }
    
    .lab-card-content-vertical {
        padding: 1.2rem 1.5rem;
    }
    
    .lab-card-title-vertical {
        font-size: 1.35rem;
    }
    
    .lab-card-image {
        grid-column: 1;
        grid-row: auto;
        min-height: 280px;
    }
    
    .lab-meters-row {
        grid-column: 1;
    }
    
    .lab-modules-row {
        grid-column: 1;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lab-card-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .innovation-section-lab {
        padding: 3rem 0;
    }
    
    .lab-card-content-vertical {
        padding: 1.2rem 1.5rem;
        gap: 0.7rem;
    }
    
    .lab-badge-top {
        gap: 8px;
    }
    
    .badge-icon-circle {
        width: 30px;
        height: 30px;
    }
    
    .badge-icon-circle i {
        font-size: 0.8rem;
    }
    
    .badge-label {
        font-size: 0.7rem;
    }
    
    .lab-card-title-vertical {
        font-size: 1.25rem;
    }
    
    .lab-card-desc-vertical {
        font-size: 0.8rem;
    }
    
    .lab-cta-bottom {
        padding: 0.7rem 1.3rem;
        gap: 8px;
    }
    
    .lab-cta-bottom .cta-text {
        font-size: 0.85rem;
    }
    
    .lab-meters-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .lab-meter-card {
        flex-direction: row;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .lab-meter-card .meter-display {
        flex: 1;
    }
    
    .lab-meter-card .meter-icon {
        margin: 0;
    }
    
    .lab-meter-card .meter-gauge {
        display: none;
    }
    
    .lab-modules-row {
        grid-template-columns: 1fr;
    }
    
    .lab-module {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .module-icon-wrap {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .lab-tagline-scan {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .scan-line-left,
    .scan-line-right {
        width: 40px;
    }
    
    .lab-title-scifi {
        font-size: 1.8rem;
    }
}