芝麻web文件管理V1.00

编辑当前文件:/home/unicorntechnolog/public_html/elevate/about.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elevate Strategies - About Us</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary-color: #1e62a8;
            --primary-dark: #1D4ED8;
            --primary-light: #EFF6FF;
            --secondary-color: #059669;
            --secondary-light: #D1FAE5;
            --accent-color: #2563EB;
            --accent-light: #EDE9FE;
            --light-bg: #FFFFFF;
            --section-bg: #F8FAFC;
            --text-dark: #0F172A;
            --text-medium: #334155;
            --text-light: #64748B;
            --border-color: #E2E8F0;
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            --hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
            --container-max-width: 1200px;
            --border-radius: 16px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

/* --- RESET & GLOBAL --- */
        body { 
            font-family: 'Mulish', sans-serif;
            color: #1a1a1a; 
            overflow-x: hidden;
            background: #403f3fff;
            scroll-behavior: smooth;
        }
        
        /* --- UTILITIES --- */
        .container { 
            max-width: 100%; 
            margin: 0 auto; 
            padding: 0 clamp(20px, 4vw, 40px); 
            width: 100%;
        }
        
        h1, h2, h3 { 
            text-transform: uppercase; 
            letter-spacing: -0.5px; 
        }
        
        p { 
            line-height: 1.6; 
            color: #555; 
            font-size: clamp(0.9rem, 1.5vw, 1rem); 
        }

/* Custom Animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

.fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

.blur-in {
            filter: blur(10px);
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

.blur-in.visible {
            filter: blur(0);
            opacity: 1;
            transform: scale(1);
        }

.slide-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

.slide-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

.slide-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

.slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

.scale-in {
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

.scale-in.visible {
            opacity: 1;
            transform: scale(1);
        }

/* Staggered animation delays */
        .stagger-delay-1 { transition-delay: 0.1s; }
        .stagger-delay-2 { transition-delay: 0.2s; }
        .stagger-delay-3 { transition-delay: 0.3s; }
        .stagger-delay-4 { transition-delay: 0.4s; }
        .stagger-delay-5 { transition-delay: 0.5s; }

/* Hover Effects */
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

.hover-scale {
            transition: transform 0.3s ease;
        }

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

.hover-glow {
            transition: box-shadow 0.3s ease;
        }

.hover-glow:hover {
            box-shadow: 0 0 30px rgba(30, 98, 168, 0.3);
        }

/* Gradient Text Animation */
        .gradient-text {
            background: linear-gradient(90deg, #1e62a8, #059669, #2563eb);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-shift 8s ease infinite;
        }

@keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

.float-animation {
            animation: float 6s ease-in-out infinite;
        }

/* Rotating Border */
        .rotating-border {
            position: relative;
            overflow: hidden;
        }

.rotating-border::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 2px solid transparent;
            border-radius: inherit;
            background: linear-gradient(90deg, #1e62a8, #059669, #2563eb) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            animation: rotate 3s linear infinite;
        }

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

/* Heading font style for leadership section */
        .heading-font {
            font-family: 'Mulish', sans-serif;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            line-height: 0.9;
        }

/* =========================================
           HERO SECTION - RESPONSIVE
           ========================================= */
        .hero {
            padding: clamp(80px, 10vw, 150px) 0 clamp(60px, 8vw, 80px);
            
            background:
                radial-gradient(
                    120% 100% at 50% 0%,
                    rgba(25, 25, 25, 0.45) 2%,
                    rgba(27, 27, 28, 0.49) 30%,
                    rgba(31, 79, 163, 0.1) 50%,
                    transparent 70%
                ),
                url("https://media.istockphoto.com/id/468784170/photo/start-up-team.jpg?s=612x612&w=0&k=20&c=KJa0CcpppIjDHgrZQ2IsXXxZc0VPYh-ajXwfAo8f7qk=");
            
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

position: relative;
            overflow: hidden;
        }

/* Hero Background Animation */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 20%, rgba(22, 22, 23, 0.76) 0%, #000000b0 50%),
                        radial-gradient(circle at 70% 80%, rgba(12, 12, 12, 0.69) 0%, transparent 50%);
            animation: pulse 8s ease-in-out infinite;
        }

@keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

.hero-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr 1fr;
            grid-template-rows: auto auto;
            gap: clamp(15px, 2vw, 20px);
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 clamp(20px, 4vw, 40px);
            position: relative;
            z-index: 1;
        }

/* Big Title "ABOUT" */
        .hero-big-title {
            grid-column: 1 / span 2;
            font-size: clamp(60px, 12vw, 180px);
            font-weight: 800;
            line-height: 0.8;
            letter-spacing: 0.1em;
            margin-bottom: -0.1em;
            text-transform: uppercase;
            background: linear-gradient(90deg, #ffffffff, #e2e1e1ff, #ddd7d7ff);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: text-shine 3s ease-in-out infinite alternate;
        }

@keyframes text-shine {
            to { background-position: 200% center; }
        }

/* "US" Text */
        .us-text {
            font-size: clamp(60px, 12vw, 180px);
            font-weight: 900;
            line-height: 0.8;
            letter-spacing: 0.1em;
            display: block;
            margin-bottom: clamp(20px, 3vw, 40px);
            text-transform: uppercase;
            background: linear-gradient(90deg, #ffffffff, #e2e1e1ff, #ddd7d7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* Left Content */
        .hero-left-content {
            grid-row: 2;
            grid-column: 1;
        }

.hero-tagline {
            font-size: clamp(12px, 1.5vw, 14px);
            font-weight: bold;
            margin-bottom: clamp(20px, 3vw, 30px);
            color: #ffffff;
        }

.hero-description {
            font-size: clamp(12px, 1.5vw, 14px);
            line-height: 1.4;
            max-width: min(250px, 100%);
            color: #eeeeee;
        }

/* Main Image Box */
        .hero-main-image-box {
            grid-row: 2;
            grid-column: 2;
            margin-top: clamp(10px, 2vw, 20px);
            position: relative;
        }

.hero-main-image-box::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to right, transparent, rgba(31, 79, 163, 0.1));
            pointer-events: none;
        }

.hero-main-image-box img {
            width: 100%;
            height: clamp(300px, 40vw, 480px);
            object-fit: cover;
            border-radius: 0;
            margin-left: clamp(-10px, -2vw, -30px);
            transition: transform 0.6s ease;
        }

.hero-main-image-box:hover img {
            transform: scale(1.02);
        }

/* Right Column */
        .hero-right-column {
            grid-row: 1 / span 2;
            padding-top: clamp(40px, 8vw, 100px);
        }

.hero-small-image-box {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
        }

.hero-small-image-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.hero-small-image-box:hover::before {
            opacity: 1;
        }

.hero-small-image-box img {
            width: 100%;
            height: clamp(150px, 20vw, 220px);
            object-fit: cover;
            margin-bottom: clamp(20px, 3vw, 30px);
            margin-top: clamp(20px, 5vw, 65px);
            transition: transform 0.6s ease;
        }

.hero-small-image-box:hover img {
            transform: scale(1.05);
        }

.philosophy-title {
            font-size: clamp(24px, 3vw, 38px);
            font-weight: 900;
            margin-bottom: clamp(15px, 2vw, 20px);
            letter-spacing: -0.5px;
            text-transform: uppercase;
            color: #ffffff;

}

.philosophy-text {
            font-size: clamp(12px, 1.5vw, 14px);
            line-height: 1.6;
            color: #eeeeee;
        }

/* Hero Mobile Responsive */
        @media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto auto;
                gap: clamp(20px, 3vw, 30px);
            }
            
            .hero-big-title {
                grid-column: 1;
                text-align: center;
                margin-bottom: 0;
                font-size: clamp(80px, 15vw, 150px);
            }
            
            .us-text {
                display: inline;
                margin-bottom: clamp(15px, 3vw, 20px);
                font-size: clamp(80px, 15vw, 150px);
            }
            
            .hero-left-content {
                grid-row: 2;
                grid-column: 1;
                text-align: center;
            }
            
            .hero-description {
                max-width: 100%;
                margin: 0 auto;
            }
            
            .hero-main-image-box {
                grid-row: 3;
                grid-column: 1;
                margin-top: 0;
            }
            
            .hero-main-image-box img {
                margin-left: 0;
                height: clamp(250px, 40vw, 400px);
            }
            
            .hero-right-column {
                grid-row: 4;
                grid-column: 1;
                padding-top: 0;
                text-align: center;
            }
            
            .hero-small-image-box img {
                margin-top: clamp(20px, 3vw, 30px);
                height: clamp(180px, 30vw, 250px);
            }
        }

@media (max-width: 640px) {
            .hero {
                padding: 100px 0 40px;
            }
            
            .hero-big-title {
                font-size: clamp(50px, 20vw, 80px);
                letter-spacing: -2px;
            }
            
            .us-text {
                font-size: clamp(50px, 20vw, 80px);
                letter-spacing: -2px;
            }
            
            .philosophy-title {
                font-size: clamp(22px, 6vw, 28px);
            }
        }

/* =========================================
           LEADERSHIP SECTION - RESPONSIVE
           ========================================= */
        .leadership-section {
            padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
            max-width: 1400px;
            margin: 0 auto;
        }

.leadership-container {
            max-width: 1200px;
            margin: 0 auto;
        }

.leadership-card {
            background: #EBEAE6;
            border-radius: clamp(30px, 4vw, 50px);
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            padding: 0 clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px);
            overflow: visible;
            height: clamp(300px, 40vw, 450px);
            width: 100%;
            transition: all 0.4s ease;
        }

.leadership-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }

.leader-image-container {
            width: 33.333%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            overflow: hidden;
        }

.leader-image-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.leader-image-container:hover::before {
            opacity: 1;
        }

.leader-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            filter: grayscale(100%);
            transition: all 0.6s ease;
        }

.leader-image-container:hover .leader-image {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

.leadership-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

.leadership-title-box {
            background: white;
            padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px);
            border-radius: 0 0 clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px);
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

.leadership-title-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

.leadership-title {
            font-family: 'Mulish', sans-serif;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            line-height: 0.9;
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 900;
            color: black;
        }

.team-strip {
            display: flex;
            gap: clamp(4px, 1vw, 8px);
            margin-top: clamp(20px, 3vw, 40px);
        }

.team-avatar {
            width: clamp(50px, 8vw, 80px);
            height: clamp(30px, 5vw, 44px);
            border-radius: 9999px;
            object-fit: cover;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.team-avatar:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

.leadership-tagline {
            max-width: min(280px, 90%);
            text-align: center;
            font-size: clamp(10px, 1.5vw, 11px);
            font-weight: 500;
            color: #374151;
            margin-top: clamp(16px, 3vw, 32px);
            line-height: 1.5;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

.leaders-info {
            display: flex;
            justify-content: space-between;
            margin-top: clamp(20px, 3vw, 32px);
            padding: 0 clamp(12px, 2vw, 16px);
            width: 100%;
        }

.leader-details {
            text-align: left;
            transition: transform 0.3s ease;
        }

.leader-details:hover {
            transform: translateY(-5px);
        }

.leader-details.right {
            text-align: right;
        }

.leader-name {
            font-family: 'Mulish', sans-serif;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            line-height: 0.9;
            font-size: clamp(1.25rem, 2.5vw, 1.875rem);
            font-weight: 900;
            color: black;
            position: relative;
            display: inline-block;
        }

.leader-name::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #1e62a8, #059669);
            transition: width 0.3s ease;
        }

.leader-details:hover .leader-name::after {
            width: 100%;
        }

.leader-role {
            font-size: clamp(10px, 1.5vw, 11px);
            color: #6b7280;
            font-weight: bold;
            letter-spacing: 0.2em;
            margin-top: clamp(2px, 1vw, 4px);
            transition: color 0.3s ease;
        }

.leader-details:hover .leader-role {
            color: #1e62a8;
        }

/* Mobile Responsive for Leadership Section */
        @media (max-width: 768px) {
            .leadership-section {
                padding: 40px 16px;
            }
            
            .leadership-card {
                height: auto;
                min-height: 350px;
                flex-direction: column;
                align-items: center;
                padding: 20px;
            }
            
            .leader-image-container {
                width: 100%;
                height: 200px;
                order: 3;
            }
            
            .leadership-center {
                position: relative;
                order: 1;
                margin-bottom: 20px;
            }
            
            .leadership-title-box {
                padding: 20px 30px;
                border-radius: 0 0 30px 30px;
            }
            
            .team-strip {
                margin-top: 20px;
            }
            
            .team-avatar {
                width: 60px;
                height: 33px;
            }
            
            .leadership-tagline {
                font-size: 10px;
                margin-top: 20px;
            }
            
            .leaders-info {
                flex-direction: column;
                gap: 20px;
                order: 2;
                margin-top: 30px;
                text-align: center !important;
            }
            
            .leader-details, .leader-details.right {
                text-align: center !important;
            }
        }

@media (max-width: 480px) {
            .leadership-card {
                height: auto;
                min-height: 300px;
                border-radius: 25px;
            }
            
            .leadership-title-box {
                padding: 16px 20px;
                border-radius: 0 0 20px 20px;
            }
            
            .leader-image-container {
                height: 150px;
            }
            
            .team-avatar {
                width: 40px;
                height: 25px;
            }
        }

/* =========================================
           VALUES SECTION - RESPONSIVE
           ========================================= */
        .values-section {
            padding: clamp(40px, 6vw, 80px) 0;
        }

.values-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 clamp(20px, 4vw, 40px);
            width: 100%;
        }

.values-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(30px, 5vw, 60px);
            align-items: start;
        }

.values-left {
            display: flex;
            flex-direction: column;
            gap: clamp(16px, 3vw, 24px);
        }

.values-left h1 {
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 900;
            line-height: 0.9;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            font-family: 'Mulish', sans-serif;
            background: linear-gradient(90deg, #1a1a1a, #333, #1a1a1a);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: text-shine 4s ease-in-out infinite alternate;
        }

.values-description {
            color: #666;
            font-size: clamp(14px, 1.8vw, 16px);
            line-height: 1.6;
            max-width: min(500px, 100%);
        }

.values-image-container {
            position: relative;
            margin-top: clamp(15px, 3vw, 20px);
            overflow: hidden;
            border-radius: clamp(40px, 8vw, 100px) clamp(15px, 2vw, 20px) clamp(15px, 2vw, 20px) clamp(15px, 2vw, 20px);
        }

.values-image-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(30, 98, 168, 0.1), rgba(5, 150, 105, 0.1));
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.values-image-container:hover::before {
            opacity: 1;
        }

.values-image-container img {
            width: 100%;
            height: clamp(250px, 40vw, 500px);
            object-fit: cover;
            transition: transform 0.6s ease;
        }

.values-image-container:hover img {
            transform: scale(1.05);
        }

.values-right {
            display: flex;
            flex-direction: column;
            gap: clamp(24px, 4vw, 48px);
            padding-top: clamp(20px, 4vw, 40px);
        }

.value-item {
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: clamp(20px, 3vw, 32px);
            position: relative;
            transition: all 0.3s ease;
        }

.value-item:hover {
            padding-left: 20px;
            border-color: #1e62a8;
        }

.value-item:hover::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, #1e62a8, #059669);
            border-radius: 2px;
        }

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

.value-item h2 {
            font-size: clamp(1.25rem, 3vw, 1.875rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            font-family: 'Mulish', sans-serif;
            margin-bottom: clamp(8px, 2vw, 12px);
            color: #1a1a1a;
            position: relative;
            display: inline-block;
        }

.value-item h2::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #1e62a8, #059669);
            transition: width 0.3s ease;
        }

.value-item:hover h2::after {
            width: 100%;
        }

.value-item p {
            color: #666;
            font-size: clamp(12px, 1.5vw, 14px);
            line-height: 1.6;
            max-width: min(500px, 100%);
        }

/* Mobile Responsive for Values Section */
        @media (max-width: 768px) {
            .values-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .values-left {
                text-align: center;
            }
            
            .values-description {
                max-width: 100%;
                margin: 0 auto;
            }
            
            .values-left h1 {
                font-size: clamp(2rem, 8vw, 3rem);
            }
            
            .values-image-container img {
                height: clamp(200px, 50vw, 350px);
            }
            
            .values-right {
                padding-top: 0;
            }
            
            .value-item {
                text-align: left;
            }
            
            .value-item:hover {
                padding-left: 15px;
            }
            
            .value-item p {
                max-width: 100%;
            }
        }

/* =========================================
           FOOTER - RESPONSIVE
           ========================================= */
        .footer-wrapper {
            position: relative;
            width: 100%;
            background-color: #fff;
            padding-top: clamp(40px, 6vw, 100px);
        }

.scatter-area {
            position: relative;
            height: clamp(150px, 25vw, 380px); 
            width: min(1060px, 80%);
            margin: 0 auto;
            z-index: 10;
        }

.pill {
            position: absolute;
            border: 2px solid #000;
            border-radius: 60px;
            padding: clamp(8px, 1vw, 14px) clamp(15px, 3vw, 60px);
            font-weight: 800;
            text-transform: uppercase;
            font-size: clamp(0.75rem, 1.2vw, 1.2rem);
            background: white;
            white-space: nowrap;
            box-shadow: 0px 5px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            z-index: 2;
        }

.pill:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            z-index: 20;
        }

.pill.black { 
            background: #1a1a1a; 
            color: #fff; 
            border: 2px solid #1a1a1a; 
        }

.pill.black:hover {
            background: #333;
            border-color: #333;
        }

.pill.white:hover {
            background: #f8f8f8;
        }

.consult-badge {
            position: absolute;
            width: clamp(80px, 12vw, 160px);
            height: clamp(80px, 12vw, 160px);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.consult-badge:hover {
            transform: scale(1.1);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }
        
        .consult-badge.black { 
            background: #1a1a1a; 
            color: #fff; 
        }
        
        .consult-badge.white { 
            background: #fff; 
            border: 2px solid #000; 
            color: #000; 
        }
        
        .badge-text { 
            width: 100%; 
            height: 100%; 
            animation: spin 20s linear infinite; 
        }

.consult-badge:hover .badge-text {
            animation-duration: 10s;
        }
        
        .badge-icon { 
            position: absolute; 
            font-size: clamp(14px, 2vw, 24px); 
            transition: transform 0.3s ease;
        }

.consult-badge:hover .badge-icon {
            transform: scale(1.2);
        }
        
        @keyframes spin { 
            100% { 
                transform: rotate(360deg); 
            } 
        }

/* Responsive Footer Positioning */
        .badge-left { 
            top: clamp(60px, 10vw, 120px); 
            left: 20px; 
            z-index: 5; 
        }
        
        .pill.vimeo { 
            top: clamp(20px, 8vw, 64px);
            left: clamp(40px, 26vw, 100px);
            transform: rotate(-25deg); 
            z-index: 10; 
        }
        
        .badge-mid { 
            top: clamp(20px, 4vw, 40px); 
            left: clamp(120px, 20vw, 240px); 
            z-index: 6; 
        }
        
        .pill.pinterest { 
            top: clamp(100px, 15vw, 205px); 
            left: clamp(90px, 15vw, 180px); 
            transform: rotate(-8deg); 
            z-index: 11; 
        }
        
        .pill.facebook { 
            top: clamp(60px, 10vw, 120px); 
            left: clamp(200px, 30vw, 400px); 
            transform: rotate(-18deg); 
            z-index: 7; 
        }
        
        .pill.twitter { 
            top: clamp(100px, 15vw, 205px); 
            left: clamp(200px, 30vw, 410px); 
            transform: rotate(5deg); 
            z-index: 8; 
        }
        
        .pill.instagram { 
            top: clamp(80px, 12vw, 155px); 
            left: clamp(290px, 45vw, 580px); 
            transform: rotate(-5deg); 
            z-index: 9; 
        }
        
        .pill.linkedin { 
            top: clamp(40px, 8vw, 80px); 
            left: clamp(380px, 60vw, 760px); 
            transform: rotate(-10deg); 
            z-index: 5; 
        }
        
        .pill.youtube { 
            top: clamp(100px, 15vw, 210px); 
            left: clamp(350px, 55vw, 700px); 
            transform: rotate(2deg); 
            z-index: 10; 
        }
        
        .badge-right { 
            top: clamp(60px, 10vw, 110px); 
            right: clamp(10px, 2vw, 20px); 
            z-index: 4; 
        }

.dark-footer {
            background-color: #1a1a1a;
            color: #fff;
            padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px);
            margin-top: clamp(-60px, -8vw, -120px);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.dark-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 80%, rgba(31, 79, 163, 0.1) 0%, transparent 50%);
        }

.footer-info-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            font-size: clamp(0.75rem, 1.5vw, 0.8rem);
            margin-bottom: clamp(30px, 5vw, 80px);
            color: #ccc;
            gap: 30px;
            position: relative;
            z-index: 1;
        }

.footer-links { 
            display: flex; 
            flex-wrap: wrap;
            gap: clamp(15px, 3vw, 40px); 
        }
        
        .footer-links-column h4 { 
            font-size: clamp(0.85rem, 1.8vw, 0.9rem); 
            margin-bottom: 15px; 
            color: #fff; 
        }
        
        .footer-links-column a { 
            display: block; 
            color: #ccc; 
            text-decoration: none; 
            margin-bottom: 8px; 
            font-size: clamp(0.8rem, 1.5vw, 0.85rem); 
            transition: all 0.3s ease;
            position: relative;
        }

.footer-links-column a::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, #1e62a8, #059669);
            transition: width 0.3s ease;
        }

.footer-links-column a:hover {
            color: #fff;
            transform: translateX(5px);
        }

.footer-links-column a:hover::before {
            width: 100%;
        }

.big-footer-title {
            font-size: clamp(40px, 8vw, 100px); 
            font-weight: 800;
            text-align: center;
            line-height: 0.8;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: clamp(15px, 3vw, 40px);
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

.star-icon { 
            font-size: clamp(1.5rem, 4vw, 5rem); 
            display: inline-block;
        }

/* Parallax Scrolling Effect */
        .parallax {
            transform-style: preserve-3d;
        }

.parallax-layer {
            transform: translateZ(var(--parallax-depth)) scale(calc(1 + var(--parallax-depth) / 10));
        }

/* =========================================
           RESPONSIVE BREAKPOINTS
           ========================================= */
        @media screen and (min-width: 1025px) and (max-width: 1200px) {
            .dark-footer {
                margin-top: -50px;
                padding: 60px 35px;
            }
            
        }
        @media (min-width: 1440px) {
            .dark-footer {
                margin-top: -95px;
            }
        }

/* Tablet (768px to 1024px) */
        @media (max-width: 1024px) {
            .scatter-area {
                transform: scale(0.9);
                margin-top: 20px;
            }
            
            .pill {
                padding: clamp(6px, 0.8vw, 10px) clamp(12px, 2vw, 30px);
                font-size: clamp(0.7rem, 1vw, 1rem);
            }
            .dark-footer {
                margin-top: -40px;
                padding: 50px 30px;
            }
        }
        
        /* Mobile (Up to 767px) */
        @media (max-width: 767px) {
            /* Hide complex footer elements on mobile */
            .scatter-area { 
                display: none; 
            }
            
            .dark-footer { 
                margin-top: 0; 
                padding-top: 60px;
            }
            
            .footer-info-row { 
                flex-direction: column; 
                text-align: center;
            }
            
            .footer-links { 
                justify-content: center; 
                text-align: center;
            }
            
            .big-footer-title { 
                flex-direction: column; 
                gap: 20px;
            }
            
            /* Show mobile social links */
            .mobile-social-links {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 40px;
                padding: 20px 20px 0 20px;
            }
            
            .mobile-social-links .pill {
                position: static;
                transform: none;
                padding: 10px 20px;
                font-size: 0.9rem;
                display: inline-block;
                white-space: nowrap;
                transition: all 0.3s ease;
            }

.mobile-social-links .pill:hover {
                transform: translateY(-5px);
            }
        }
        
        /* Small Mobile (Up to 480px) */
        @media (max-width: 480px) {
            .hero-grid,
            .values-container,
            .leadership-container {
                padding: 0 15px;
            }
            
            .big-footer-title { 
                font-size: clamp(2rem, 10vw, 3rem); 
                gap: 15px;
            }
            
            .star-icon { 
                font-size: clamp(1.5rem, 6vw, 2.5rem); 
            }
            
            .footer-links { 
                flex-direction: column; 
                align-items: center;
                gap: 20px;
            }
            
            .value-item h2 {
                font-size: clamp(1.1rem, 4vw, 1.3rem);
            }
        }
        
        /* Large Desktop (Above 1440px) */
        @media (min-width: 1440px) {
            .hero-grid,
            .values-container,
            .leadership-container {
                max-width: 1400px;
            }
        }

/* AOS Animation Overrides */
        [data-aos] {
            pointer-events: none;
        }
        
        [data-aos].aos-animate {
            pointer-events: auto;
        }

/* Scroll Progress Bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, #1e62a8, #059669, #2563eb);
            z-index: 1000;
            transition: width 0.1s ease;
        }

/* Smooth Scroll Button */
        .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #1e62a8;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            z-index: 100;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

.scroll-to-top.visible {
            opacity: 1;
            transform: translateY(0);
        }

.scroll-to-top:hover {
            background: #059669;
            transform: translateY(-5px);
        }
    </style>
</head>
<body>

<div class="scroll-progress"></div>

<div class="scroll-to-top" id="scrollToTop">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 15l-6-6-6 6"/>
        </svg>
    </div>

<?php include 'common/header.php'; ?>

<section class="hero">
        <div class="hero-grid">
            <h1 class="hero-big-title" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="200">ABOUT</h1>

<div class="hero-left-content">
                <span class="us-text" data-aos="fade-right" data-aos-duration="800" data-aos-delay="300">US</span>
                <p class="hero-tagline" data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">Digital Innovation & Technology Solutions</p>
                <p class="hero-description" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500">Driving business transformation through cutting-edge technology and strategic insights since 2010.</p>
            </div>

<div class="hero-right-column">
                <div class="hero-small-image-box" data-aos="fade-left" data-aos-duration="800" data-aos-delay="500">
                    <img src="https://static.vecteezy.com/system/resources/thumbnails/003/396/738/small/businessman-clicks-on-virtual-screen-mission-photo.jpg" alt="Technology Strategy">
                </div>
                <h2 class="philosophy-title" data-aos="fade-up" data-aos-duration="800" data-aos-delay="600">Our Mission</h2>
                <p class="philosophy-text" data-aos="fade-up" data-aos-duration="800" data-aos-delay="700">To empower businesses with innovative technology solutions that drive growth, efficiency, and sustainable competitive advantage in the digital age.</p>
            </div>
        </div>
    </section>

<div class="leadership-center" data-aos="zoom-in" data-aos-duration="800">
                    <div class="leadership-title-box">
                        <h2 class="leadership-title">
                            OUR<br>LEADERSHIP
                        </h2>
                    </div>
                    
                    <div class="team-strip">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=100&q=80" 
                             class="team-avatar" data-aos="zoom-in" data-aos-delay="100">
                        <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?auto=format&fit=crop&w=100&q=80" 
                             class="team-avatar" data-aos="zoom-in" data-aos-delay="200">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=100&q=80" 
                             class="team-avatar" style="width: 56px;" data-aos="zoom-in" data-aos-delay="300">
                    </div>

<p class="leadership-tagline" data-aos="fade-up" data-aos-delay="400">
                        Transforming businesses through innovative technology solutions.
                    </p>
                </div>

<div class="leader-image-container" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                    <img src="https://static.vecteezy.com/system/resources/thumbnails/026/136/046/small/business-man-illustration-ai-generative-png.png" 
                         alt="Sarah Chen" 
                         class="leader-image">
                </div>
            </div>

<div class="leaders-info">
                <div class="leader-details" data-aos="fade-right" data-aos-duration="800" data-aos-delay="300">
                    <h3 class="leader-name">Alex Johnson</h3>
                    <p class="leader-role">CEO & FOUNDER</p>
                </div>
                <div class="leader-details right" data-aos="fade-left" data-aos-duration="800" data-aos-delay="300">
                    <h3 class="leader-name">Sarah Chen</h3>
                    <p class="leader-role">CHIEF TECHNOLOGY OFFICER</p>
                </div>
            </div>
        </div>
    </section>

<section class="values-section">
        <div class="values-container">
            <div class="values-grid">
                <div class="values-left">
                    <h1 data-aos="fade-right" data-aos-duration="1000">OUR CORE VALUES</h1>
                    <p class="values-description" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
                        At Elevate Strategies, we believe in a set of fundamental principles that guide 
                        every decision we make and every solution we deliver. These values are the 
                        foundation of our commitment to excellence and innovation.
                    </p>
                    <div class="values-image-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="300">
                        <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Core Values">
                    </div>
                </div>
                
                <div class="values-right">
                    <div class="value-item" data-aos="fade-left" data-aos-duration="800" data-aos-delay="100">
                        <h2>Innovation</h2>
                        <p>
                            We constantly explore new technologies and approaches to deliver 
                            cutting-edge solutions that keep our clients ahead of the curve. Our 
                            team is dedicated to pushing boundaries and finding innovative ways 
                            to solve complex business challenges.
                        </p>
                    </div>
                    
                    <div class="value-item" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
                        <h2>Excellence</h2>
                        <p>
                            We maintain the highest standards of quality in every project and 
                            service we deliver, ensuring exceptional results every time. From 
                            initial consultation to final implementation, excellence is our 
                            benchmark for success.
                        </p>
                    </div>
                    
                    <div class="value-item" data-aos="fade-left" data-aos-duration="800" data-aos-delay="300">
                        <h2>Trust</h2>
                        <p>
                            We build lasting relationships based on transparency, reliability, 
                            and mutual respect with all our clients and partners. Trust is the 
                            cornerstone of every successful collaboration, and we work hard to 
                            earn and maintain it.
                        </p>
                    </div>
                    
                    <div class="value-item" data-aos="fade-left" data-aos-duration="800" data-aos-delay="400">
                        <h2>Collaboration</h2>
                        <p>
                            We work closely with our clients to understand their unique needs 
                            and deliver tailored solutions that drive real results. Through 
                            collaborative partnerships, we transform challenges into opportunities 
                            for growth and success.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="footer-wrapper">
        <div class="scatter-area">
            <div class="consult-badge black badge-left">
                <svg viewBox="0 0 100 100" class="badge-text">
                    <path id="c1" d="M 15,50 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0" fill="transparent" />
                    <text>
                        <textPath xlink:href="#c1" fill="white" font-size="9">
                            GET IN TOUCH • GET IN TOUCH • 
                        </textPath>
                    </text>
                </svg>
                <div class="badge-icon">📧</div>
            </div>

<div class="pill white vimeo">CLOUD</div>
            <div class="consult-badge white badge-mid">
                <svg viewBox="0 0 100 100" class="badge-text">
                    <path id="c2" d="M 15,50 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0" fill="transparent" />
                    <text>
                        <textPath xlink:href="#c2" fill="black" font-size="9">
                            DIGITAL TRANSFORM • DIGITAL TRANSFORM • 
                        </textPath>
                    </text>
                </svg>
                <div class="badge-icon">⚡</div>
            </div>

<div class="pill white pinterest">AI/ML</div>
            <div class="pill black facebook">SECURITY</div>
            <div class="pill white twitter">ANALYTICS</div>
            <div class="pill white instagram">CONSULTING</div>
            <div class="pill black youtube">SUPPORT</div>
            <div class="pill black linkedin">STRATEGY</div>

<div class="consult-badge black badge-right">
                <svg viewBox="0 0 100 100" class="badge-text">
                    <path id="c3" d="M 15,50 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0" fill="transparent" />
                    <text>
                        <textPath xlink:href="#c3" fill="white" font-size="9">
                            CONTACT US • CONTACT US • 
                        </textPath>
                    </text>
                </svg>
                <div class="badge-icon">📱</div>
            </div>
        </div>

<div class="mobile-social-links">
            <div class="pill black">CLOUD</div>
            <div class="pill white">SECURITY</div>
            <div class="pill black">AI/ML</div>
            <div class="pill white">CONTACT</div>
        </div>

<footer class="dark-footer">
            <div class="big-footer-title">
                ELEVATE <span class="star-icon">▲</span> STRATEGIES
            </div>
        </footer>
    </div>

<?php include 'common/footer.php'; ?>

// Scroll progress bar
        const scrollProgress = document.querySelector('.scroll-progress');
        const scrollToTop = document.getElementById('scrollToTop');
        
        window.addEventListener('scroll', () => {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            
            scrollProgress.style.width = scrolled + '%';
            
            // Show/hide scroll to top button
            if (winScroll > 300) {
                scrollToTop.classList.add('visible');
            } else {
                scrollToTop.classList.remove('visible');
            }
        });

// Scroll to top functionality
        scrollToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Custom scroll animations for blur effects
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe all animation elements
        document.querySelectorAll('.fade-in-up, .blur-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => {
            observer.observe(el);
        });

// Parallax effect on scroll
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const parallaxElements = document.querySelectorAll('.parallax-layer');
            
            parallaxElements.forEach(element => {
                const depth = element.getAttribute('data-depth') || 0.5;
                const movement = -(scrolled * depth);
                element.style.transform = `translateY(${movement}px)`;
            });
        });

// Handle mobile social links visibility
        document.addEventListener('DOMContentLoaded', function() {
            const mobileSocialLinks = document.querySelector('.mobile-social-links');
            
            function checkScreenSize() {
                if (window.innerWidth <= 767) {
                    mobileSocialLinks.style.display = 'flex';
                } else {
                    mobileSocialLinks.style.display = 'none';
                }
            }
            
            checkScreenSize();
            window.addEventListener('resize', checkScreenSize);
        });

// Add hover sound effect for interactive elements
        const interactiveElements = document.querySelectorAll('.pill, .consult-badge, .team-avatar, .value-item');
        
        interactiveElements.forEach(element => {
            element.addEventListener('mouseenter', () => {
                element.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
            });
            
            element.addEventListener('mouseleave', () => {
                element.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
            });
        });

// Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Add scroll-triggered class for special effects
        window.addEventListener('scroll', () => {
            const hero = document.querySelector('.hero');
            const scrollPosition = window.scrollY;
            
            if (hero) {
                const heroHeight = hero.offsetHeight;
                const opacity = 1 - (scrollPosition / heroHeight);
                hero.style.opacity = Math.max(opacity, 0.3);
            }
        });

// Stagger animation for value items on load
        document.addEventListener('DOMContentLoaded', () => {
            const valueItems = document.querySelectorAll('.value-item');
            valueItems.forEach((item, index) => {
                item.style.transitionDelay = `${index * 0.1}s`;
            });
        });
    </script>

</body>
</html>