:root {
        /* Enhanced Spacing System */
        --space-px: 1px;
        --space-0-5: 0.125rem;
        /* 2px */
        --space-1: 0.25rem;
        /* 4px */
        --space-1-5: 0.375rem;
        /* 6px */
        --space-2: 0.5rem;
        /* 8px */
        --space-2-5: 0.625rem;
        /* 10px */
        --space-3: 0.75rem;
        /* 12px */
        --space-3-5: 0.875rem;
        /* 14px */
        --space-4: 1rem;
        /* 16px */
        --space-5: 1.25rem;
        /* 20px */
        --space-6: 1.5rem;
        /* 24px */
        --space-7: 1.75rem;
        /* 28px */
        --space-8: 2rem;
        /* 32px */
        --space-9: 2.25rem;
        /* 36px */
        --space-10: 2.5rem;
        /* 40px */
        --space-11: 2.75rem;
        /* 44px */
        --space-12: 3rem;
        /* 48px */
        --space-14: 3.5rem;
        /* 56px */
        --space-16: 4rem;
        /* 64px */
        --space-18: 4.5rem;
        /* 72px */
        --space-20: 5rem;
        /* 80px */
        --space-24: 6rem;
        /* 96px */
        --space-28: 7rem;
        /* 112px */
        --space-32: 8rem;
        /* 128px */
        --space-36: 9rem;
        /* 144px */
        --space-40: 10rem;
        /* 160px */

        /* Enhanced Typography Scale */
        --text-2xs: 0.625rem;
        /* 10px */
        --text-xs: 0.75rem;
        /* 12px */
        --text-sm: 0.875rem;
        /* 14px */
        --text-base: 1rem;
        /* 16px */
        --text-lg: 1.125rem;
        /* 18px */
        --text-xl: 1.25rem;
        /* 20px */
        --text-2xl: 1.5rem;
        /* 24px */
        --text-3xl: 1.875rem;
        /* 30px */
        --text-4xl: 2.25rem;
        /* 36px */
        --text-5xl: 3rem;
        /* 48px */
        --text-6xl: 3.75rem;
        /* 60px */
        --text-7xl: 4.5rem;
        /* 72px */
        --text-8xl: 6rem;
        /* 96px */
        --text-9xl: 8rem;
        /* 128px */

        /* Enhanced Color System */
        --color-white: #ffffff;
        --color-black: #000000;
        --color-gray-50: #f9fafb;
        --color-gray-100: #f3f4f6;
        --color-gray-200: #e5e7eb;
        --color-gray-300: #d1d5db;
        --color-gray-400: #9ca3af;
        --color-gray-500: #6b7280;
        --color-gray-600: #4b5563;
        --color-gray-700: #374151;
        --color-gray-800: #1f2937;
        --color-gray-900: #111827;

        /* Brand Colors */
        --color-primary-50: #eff6ff;
        --color-primary-100: #dbeafe;
        --color-primary-200: #bfdbfe;
        --color-primary-300: #93c5fd;
        --color-primary-400: #60a5fa;
        --color-primary-500: #3b82f6;
        --color-primary-600: #2563eb;
        --color-primary-700: #1d4ed8;
        --color-primary-800: #1e40af;
        --color-primary-900: #1e3a8a;

        /* Gradient System */
        --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --gradient-warm: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        --gradient-cool: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        --gradient-cosmic: linear-gradient(135deg, #667db6 0%, #0082c8 50%, #0082c8 51%, #667db6 100%);
        --gradient-aurora: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);

        /* Advanced Shadow System */
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
        --shadow-glow: 0 0 20px rgb(255 255 255 / 0.1);
        --shadow-colored: 0 25px 50px -12px rgb(99 102 241 / 0.25);

        /* Border Radius System */
        --radius-none: 0px;
        --radius-sm: 0.125rem;
        /* 2px */
        --radius-base: 0.25rem;
        /* 4px */
        --radius-md: 0.375rem;
        /* 6px */
        --radius-lg: 0.5rem;
        /* 8px */
        --radius-xl: 0.75rem;
        /* 12px */
        --radius-2xl: 1rem;
        /* 16px */
        --radius-3xl: 1.5rem;
        /* 24px */
        --radius-4xl: 2rem;
        /* 32px */
        --radius-full: 9999px;

        /* Z-index System */
        --z-hide: -1;
        --z-auto: auto;
        --z-base: 0;
        --z-docked: 10;
        --z-dropdown: 1000;
        --z-sticky: 1100;
        --z-banner: 1200;
        --z-overlay: 1300;
        --z-modal: 1400;
        --z-popover: 1500;
        --z-skipLink: 1600;
        --z-toast: 1700;
        --z-tooltip: 1800;

        /* Animation Timing */
        --duration-75: 75ms;
        --duration-100: 100ms;
        --duration-150: 150ms;
        --duration-200: 200ms;
        --duration-300: 300ms;
        --duration-500: 500ms;
        --duration-700: 700ms;
        --duration-1000: 1000ms;

        /* Easing Functions */
        --ease-linear: linear;
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --ease-elastic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Enhanced Base Styles */
    html {
        scroll-behavior: smooth;
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.5;
        color: var(--color-white);
        /* background: var(--color-black); */
        overflow-x: hidden;
        font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Hero Section */
    .hero {
        position: relative;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
         overflow: hidden; 
        /* background: radial-gradient(ellipse 150% 100% at 50% 40%, rgba(26, 26, 46, 0.9) 0%, var(--color-black) 100%); */
    }

    .main-body {
        background: radial-gradient(ellipse 150% 100% at 50% 40%, rgba(26, 26, 46, 0.9) 0%, var(--color-black) 100%);

    }

    /* Enhanced Background */
    .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: var(--z-hide);
    }

    .gradient-mesh {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .gradient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.4;
        animation: orbFloat 12s ease-in-out infinite;
    }

    .orb-primary {
        width: 600px;
        height: 600px;
        background: var(--gradient-primary);
        top: -300px;
        right: -300px;
        animation-delay: 0s;
    }

    .orb-secondary {
        width: 500px;
        height: 500px;
        background: var(--gradient-secondary);
        bottom: -250px;
        left: -250px;
        animation-delay: 4s;
    }

    .orb-accent {
        width: 400px;
        height: 400px;
        background: var(--gradient-accent);
        top: 20%;
        left: 60%;
        animation-delay: 8s;
    }

    .orb-warm {
        width: 350px;
        height: 350px;
        background: var(--gradient-warm);
        bottom: 30%;
        right: 70%;
        animation-delay: 6s;
    }

    .animated-grid {
        position: absolute;
        top: 0;
        left: 0;
        /* width: 100%; */
        height: 100%;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        animation: gridMove 20s linear infinite;
    }

    .light-rays {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 40% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
        opacity: 0.8;
        animation: raysShimmer 15s ease-in-out infinite;
    }

    /* Content Gallery */
    .content-gallery {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: var(--z-docked);
        pointer-events: none;
    }

    .floating-card {
        position: absolute;
        border-radius: var(--radius-3xl);
        overflow: hidden;
        backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: var(--shadow-2xl), var(--shadow-glow);
        transition: all var(--duration-700) var(--ease-spring);
        will-change: transform, opacity;
        opacity: 0;
        animation: cardSlideIn var(--duration-1000) var(--ease-spring) forwards;
    }

    .card-container {
        position: relative;
        width: 100%;
        height: 100%;
        /* overflow: hidden; */
        border-radius: inherit;
    }

    .card-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--duration-700) var(--ease-out);
        scale: 1.02;
    }

    .floating-card:hover {
        transform: scale(1.05) translateY(-8px) !important;
        box-shadow: var(--shadow-2xl), 0 40px 80px rgba(0, 0, 0, 0.3);
    }

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

    .card-overlays {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    /* Individual Card Styles - Desktop */
    .card-bags {
        width: 310px;
        height: 290px;
        top: 15%;
        left: 5%;
        transform: rotate(-8deg);
        animation-delay: 0.2s;
    }

    .card-landscape {
        width: 300px;
        height: 190px;
        bottom: 14%;
        left: 70%;
        transform: translateX(-50%) rotate(2deg);
        z-index: 2;
        animation-delay: 0.6s;
    }

    .card-profile {
        width: 300px;
        height: 320px;
        top: 55%;
        /* bottom: 10%; */
        left: 18%;
        transform: rotate(-15deg);
        animation-delay: 0.4s;
    }

    .card-portrait {
        width: 320px;
        height: 420px;
        top: 8%;
        right: 5%;
        transform: rotate(6deg);
        animation-delay: 0.5s;
    }

    .circular {
        border-radius: 50% !important;
    }

    /* Enhanced Card Overlays */
    .price-indicator {
        position: absolute;
        top: var(--space-4);
        left: var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(20px);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-white);
    }

    .price-dot {
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .product-grid {
        position: absolute;
        bottom: var(--space-4);
        left: var(--space-4);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-1);
    }

    .grid-item {
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: var(--radius-base);
        transition: all var(--duration-300);
    }

    .grid-item.active {
        background: var(--color-white);
        box-shadow: var(--shadow-glow);
    }

    .scene-info {
        position: absolute;
        bottom: var(--space-4);
        left: var(--space-4);
        right: var(--space-4);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .location-pin {
        display: flex;
        align-items: center;
        gap: var(--space-1-5);
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(20px);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        font-weight: 500;
        color: var(--color-white);
    }

    .camera-settings {
        display: flex;
        gap: var(--space-1);
    }

    .setting {
        background: rgba(255, 255, 255, 0.9);
        color: var(--color-gray-800);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-md);
        font-size: var(--text-2xs);
        font-weight: 600;
        font-family: 'Monaco', 'Menlo', monospace;
    }

    .audio-visualizer {
        position: absolute;
        bottom: var(--space-4);
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(20px);
        padding: var(--space-3);
        border-radius: var(--radius-2xl);
    }

    .sound-wave {
        display: flex;
        align-items: end;
        gap: var(--space-1);
        height: 30px;
    }

    .wave-bar {
        width: 3px;
        background: var(--gradient-primary);
        border-radius: var(--radius-full);
        animation: waveAnimation 1.5s ease-in-out infinite;
        animation-delay: var(--delay);
        height: calc(var(--height) * 30px);
    }

    .status-badge {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        display: flex;
        align-items: center;
        gap: var(--space-1-5);
        background: rgba(16, 185, 129, 0.9);
        backdrop-filter: blur(15px);
        padding: var(--space-1-5) var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-white);
    }

    .pulse-dot {
        width: 8px;
        height: 8px;
        background: var(--color-white);
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .color-palette-advanced {
        position: absolute;
        bottom: var(--space-4);
        right: var(--space-4);
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(25px);
        padding: var(--space-4);
        border-radius: var(--radius-2xl);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        min-width: 140px;
    }

    .palette-header {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: rgba(255, 255, 255, 0.8);
        font-size: var(--text-xs);
        font-weight: 500;
    }

    .color-samples {
        display: flex;
        gap: var(--space-2);
    }

    .color-sample {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all var(--duration-300);
        position: relative;
    }

    .color-sample:hover,
    .color-sample.active {
        border-color: var(--color-white);
        transform: scale(1.1);
    }

    .color-sample.active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background: var(--color-white);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }

    .active-color {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.1);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-lg);
    }

    .color-code {
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-white);
    }

    .copy-indicator {
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: color var(--duration-200);
    }

    .copy-indicator:hover {
        color: var(--color-white);
    }

    /* Floating Elements */
    .floating-elements {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .design-element {
        position: absolute;
        width: 56px;
        height: 56px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
        opacity: 0;
        animation: elementSlideIn var(--duration-700) var(--ease-spring) forwards, elementFloat 8s ease-in-out infinite;
    }

    .element-1 {
        top: 25%;
        left: 18%;
        animation-delay: 1.0s;
    }

    .element-2 {
        top: 55%;
        right: 22%;
        animation-delay: 1.2s;
    }

    .element-3 {
        bottom: 15%;
        left: 65%;
        animation-delay: 1.4s;
    }

    .element-4 {
        top: 35%;
        left: 75%;
        animation-delay: 1.6s;
    }

    /* Hero Content */
    .hero-container {
        position: relative;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 var(--space-8);
        z-index: var(--z-docked);
        align-self: flex-start;
        top: 20%;
        margin-top: 110px;
    }

    .hero-content {
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;
    }

    /* Content Sections */
    .announcement-container {
        margin-bottom: var(--space-12);
    }

    /* .announcement-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6);
    transition: all var(--duration-300) var(--ease-out);
    cursor: pointer;
    position: relative;
    overflow: hidden;
} */

    /* .announcement-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--duration-700);
} */

    /* .announcement-badge:hover::before {
    left: 100%;
} */

    /* .announcement-badge:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
} */

    .badge-icon {
        color: #fbbf24;
    }

    .badge-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: var(--text-sm);
        font-weight: 500;
    }

    .new-indicator {
        position: relative;
        background: var(--gradient-primary);
        padding: var(--space-1) var(--space-2-5);
        border-radius: var(--radius-md);
        font-size: var(--text-2xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-white);
    }

    .indicator-glow {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        border-radius: inherit;
        filter: blur(8px);
        opacity: 0.6;
        z-index: -1;
    }

    .heading-container {
        margin-bottom: var(--space-6);
    }

    .hero-title {
        font-size: clamp(var(--text-3xl), 3vw, var(--text-8xl));
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -0.04em;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .title-line {
        display: block;
    }

    .gradient-text {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .secondary-text {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 700;
    }

    .subtitle-container {
        margin-bottom: var(--space-6);
    }

    .hero-subtitle {
        /* font-size: var(--text-xl); */
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.6;
        max-width: 700px;
        margin: 0 auto;
        font-weight: 400;
    }

    .hero-subtitle strong {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 600;
    }

    .cta-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: var(--space-20);
    }

    .search-container {
        position: relative;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
        opacity: 0;
        animation: fadeInUp var(--duration-700) var(--ease-out) forwards;
    }

    .search-wrapper {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-full);
        padding: var(--space-2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all var(--duration-300);
    }

    .search-icon {
        width: 20px;
        height: 20px;
        color: rgba(255, 255, 255, 0.7);
    }

    .search-input {
        flex: 1;
        border: none;
        background: transparent;
        color: var(--color-white);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        outline: none;
    }

    .search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gradient-primary);
        color: var(--color-white);
        padding: var(--space-2) var(--space-4);
        border: none;
        border-radius: var(--radius-full);
        cursor: pointer;
        transition: all var(--duration-300);
        position: relative;
        overflow: hidden;
    }

    .search-btn .btn-icon {
        margin-left: var(--space-2);
    }

    .search-suggestions {
        margin-top: var(--space-2);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: center;
    }

    .suggestion-label {
        color: rgba(255, 255, 255, 0.8);
        font-size: var(--text-xs);
        font-weight: 500;
    }

    .suggestion-tag {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-white);
        padding: var(--space-1-5) var(--space-3);
        border-radius: var(--radius-full);
        font-size: var(--text-2xs);
        font-weight: 600;
        cursor: pointer;
        transition: all var(--duration-300);
    }

    .suggestion-tag:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Feature Pills - Existing Styles */
    .feature-pills {
        display: flex;
        gap: var(--space-4);
        justify-content: center;
        flex-wrap: wrap;
    }

    .pill {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.8);
        transition: all var(--duration-300);
    }

    .pill:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }

    .pill svg {
        color: #10b981;
    }

    .social-proof-container {
        margin-bottom: var(--space-8);
    }

    .social-proof {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-6);
        flex-wrap: wrap;
    }

    .user-avatars {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .avatar-stack {
        display: flex;
        align-items: center;
    }

    .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.3);
        margin-left: -12px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--duration-300);
        position: relative;
    }

    .avatar:first-child {
        margin-left: 0;
    }

    .avatar:hover {
        transform: translateY(-2px) scale(1.05);
        border-color: rgba(255, 255, 255, 0.6);
        z-index: 10;
    }

    .count-badge {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(15px);
        font-size: var(--text-xs);
        font-weight: 700;
        color: var(--color-white);
    }

    .social-text {
        color: rgba(255, 255, 255, 0.7);
        font-size: var(--text-sm);
        font-weight: 500;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .social-text strong {
        color: rgba(255, 255, 255, 0.9);
    }

    .rating-stars {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .stars {
        color: #fbbf24;
        font-size: var(--text-sm);
    }

    .rating-text {
        font-size: var(--text-xs);
        color: rgba(255, 255, 255, 0.6);
    }

    /* Scroll Indicator */
    .scroll-indicator {
        position: absolute;
        bottom: var(--space-12);
        /* left: 50%; */
        /* transform: translateX(-50%); */
        align-items: center;
        z-index: var(--z-docked);
    }

    .scroll-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-3);
        color: rgba(255, 255, 255, 0.5);
    }

    .scroll-text {
        font-size: var(--text-xs);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .scroll-animation {
        width: 24px;
        height: 40px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--radius-2xl);
        position: relative;
    }

    .scroll-dot {
        width: 4px;
        height: 8px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-full);
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        animation: scrollDot 2s infinite;
    }

    /* Text Animation */
    .animate-text {
        opacity: 0;
        transform: translateY(30px);
        animation: textSlideIn var(--duration-700) var(--ease-out) forwards;
    }

    .hero-heading {
        color: white;
        font-size: 68px;
    }

    /* Keyframe Animations */
    @keyframes orbFloat {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg) scale(1);
            opacity: 0.4;
        }

        33% {
            transform: translate(30px, -30px) rotate(120deg) scale(1.1);
            opacity: 0.6;
        }

        66% {
            transform: translate(-20px, 20px) rotate(240deg) scale(0.9);
            opacity: 0.3;
        }
    }

    @keyframes gridMove {
        0% {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(60px, 60px);
        }
    }

    @keyframes raysShimmer {

        0%,
        100% {
            opacity: 0.8;
        }

        50% {
            opacity: 0.4;
        }
    }

    @keyframes cardSlideIn {
        from {
            opacity: 0;
            transform: translateX(var(--slide-x, 0)) translateY(var(--slide-y, 0)) scale(0.8);
        }

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

    @keyframes elementSlideIn {
        from {
            opacity: 0;
            transform: translateX(var(--slide-x, 0)) translateY(var(--slide-y, 0)) scale(0.5);
        }

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

    @keyframes elementFloat {

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

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

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

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

    @keyframes waveAnimation {

        0%,
        100% {
            height: calc(var(--height) * 30px);
            opacity: 0.6;
        }

        50% {
            height: calc((var(--height) + 0.3) * 30px);
            opacity: 1;
        }
    }

    @keyframes pulse {

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

        50% {
            opacity: 0.7;
            transform: scale(1.2);
        }
    }

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

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

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

    /* Direction-based slide animations */
    .floating-card[data-direction="left"] {
        --slide-x: -100vw;
    }

    .floating-card[data-direction="right"] {
        --slide-x: 100vw;
    }

    .floating-card[data-direction="top"] {
        --slide-y: -100vh;
    }

    .floating-card[data-direction="bottom"] {
        --slide-y: 100vh;
    }

    .design-element[data-direction="left"] {
        --slide-x: -50vw;
    }

    .design-element[data-direction="right"] {
        --slide-x: 50vw;
    }

    .design-element[data-direction="top"] {
        --slide-y: -50vh;
    }

    .design-element[data-direction="bottom"] {
        --slide-y: 50vh;
    }

    /* Animation delays */
    .animate-text[data-delay="0.1"] {
        animation-delay: 0.1s;
    }

    .animate-text[data-delay="0.2"] {
        animation-delay: 0.2s;
    }

    .animate-text[data-delay="0.3"] {
        animation-delay: 0.3s;
    }

    .animate-text[data-delay="0.4"] {
        animation-delay: 0.4s;
    }

    .animate-text[data-delay="0.5"] {
        animation-delay: 0.5s;
    }

    .animate-text[data-delay="0.6"] {
        animation-delay: 0.6s;
    }

    .animate-text[data-delay="0.7"] {
        animation-delay: 0.7s;
    }

    /* .animate-text[data-delay="2.0"] { animation-delay: 2.0s; } */

    /* RESPONSIVE DESIGN - MOBILE FIRST APPROACH */

    /* Large Tablets and Small Desktops (1200px and down) */
    @media (max-width: 1200px) {
        .hero-container {
            padding: 0 var(--space-6);
        }

        .card-bags {
            width: 280px;
            height: 200px;
            left: 3%;
            opacity: 0.9;
        }

        .card-portrait {
            width: 260px;
            height: 340px;
            right: 3%;
            opacity: 0.9;
        }

        .card-landscape {
            width: 420px;
            height: 280px;
        }

        .card-profile {
            width: 180px;
            height: 180px;
            left: 6%;
        }

        .design-element {
            width: 48px;
            height: 48px;
            opacity: 0.8;
        }

        .hero-title {
            font-size: clamp(var(--text-3xl), 7vw, var(--text-6xl));
        }
    }

    /* Tablets (1024px and down) */
    @media (max-width: 1024px) {
        .hero-container {
            padding: 0 var(--space-5);
        }

        .announcement-container {
            margin-bottom: var(--space-10);
        }

        .heading-container {
            margin-bottom: var(--space-10);
        }

        .subtitle-container {
            margin-bottom: var(--space-12);
        }

        .cta-container {
            margin-bottom: var(--space-16);
        }

        .card-bags {
            width: 240px;
            height: 170px;
            top: 12%;
            left: 2%;
        }

        .card-portrait {
            width: 220px;
            height: 280px;
            top: 10%;
            right: 2%;
        }

        .card-landscape {
            width: 360px;
            height: 240px;
            bottom: 10%;
        }

        .card-profile {
            width: 150px;
            height: 150px;
            bottom: 30%;
            left: 4%;
        }

        .design-element {
            opacity: 0.6;
            scale: 0.9;
        }

        .element-1 {
            top: 20%;
            left: 15%;
        }

        .element-2 {
            top: 50%;
            right: 18%;
        }

        .element-3 {
            bottom: 20%;
            left: 60%;
        }

        .element-4 {
            top: 30%;
            left: 70%;
        }

        .cta-buttons {
            gap: var(--space-4);
        }

        .feature-pills {
            gap: var(--space-3);
        }
    }

    /* Large Mobile/Small Tablets (768px and down) */
    @media (max-width: 768px) {
        .hero {
            min-height: 100vh;
            min-height: 100svh;
            padding-top: var(--space-8);
            padding-bottom: var(--space-8);
        }

        .hero-container {
            padding: 0 var(--space-4);
            margin-top: 0px;
        }

        .search-wrapper {
            height: 60px !important;
        }

        .search-btn {
            padding: 5px;
        }

        .feature-pills {
            flex-direction: row !important;
            flex-wrap: wrap !important;
        }

        .search-container {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;

        }

        /* Hide complex cards on mobile, keep only essential ones */
        .card-bags,
        .card-portrait {
            opacity: 0.3;
            scale: 0.8;
            z-index: 1;
        }

        .card-landscape {
            width: 300px;
            height: 200px;
            bottom: 15%;
            opacity: 0.7;
        }

        .card-profile {
            width: 120px;
            height: 120px;
            bottom: 35%;
            left: 5%;
            opacity: 0.7;
        }

        /* Hide all floating elements on mobile */
        .design-element {
            display: none;
        }

        /* Reduce background effects */
        .gradient-orb {
            opacity: 0.2;
            filter: blur(80px);
        }

        .animated-grid {
            opacity: 0.5;
            background-size: 40px 40px;
        }

        /* Content adjustments */
        .announcement-container {
            margin-bottom: var(--space-8);
        }

        .heading-container {
            margin-bottom: var(--space-8);
        }

        .subtitle-container {
            margin-bottom: var(--space-10);
        }

        .cta-container {
            margin-bottom: var(--space-12);
        }

        .hero-title {
            font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
            gap: var(--space-2);
        }

        .hero-subtitle {
            font-size: var(--text-lg);
            max-width: 100%;
        }

        .cta-buttons {
            flex-direction: column;
            gap: var(--space-3);
            width: 100%;
        }

        .btn-primary,
        .btn-secondary {
            width: 100%;
            max-width: 320px;
            justify-content: center;
            padding: var(--space-4) var(--space-8);
        }

        .feature-pills {
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
        }

        .social-proof {
            flex-direction: column;
            gap: var(--space-3);
            text-align: center;
        }

        .user-avatars {
            flex-direction: column;
            gap: var(--space-3);
        }

        .avatar {
            width: 40px;
            height: 40px;
            margin-left: -8px;
        }

        .social-text {
            font-size: var(--text-sm);
            text-align: center;
        }

        .scroll-indicator {
            bottom: var(--space-8);
        }
    }

    /* Mobile (480px and down) */
    @media (max-width: 480px) {
        .content-gallery {
            display: none;
        }

        .hero {
            min-height: 80vh;
            padding-top: var(--space-6);
            padding-bottom: var(--space-6);
        }

        .hero-container {
            position: relative;
            align-self: center;
            padding: 0 var(--space-3);
        }

        /* Further hide cards for small mobile */
        .card-bags {
            /* display: none; */
            top: 270px;
        }

        .card-portrait {
            display: none;
        }

        .card-landscape {
            width: 250px;
            height: 160px;
            opacity: 0.4;
            bottom: 20%;
            left: 56% !important;
        }

        .card-profile {
            width: 100px;
            height: 100px;
            opacity: 0.4;
            bottom: 40%;
        }

        /* Reduce spacing for mobile */
        .announcement-container {
            margin-bottom: var(--space-6);
        }

        .heading-container {
            margin-bottom: var(--space-6);
        }

        .subtitle-container {
            margin-bottom: var(--space-8);
        }

        .cta-container {
            margin-bottom: var(--space-10);
        }

        .social-proof-container {
            margin-bottom: var(--space-6);
        }

        /* .announcement-badge {
        padding: var(--space-2) var(--space-4);
        gap: var(--space-2);
    }
     */
        .badge-text {
            font-size: var(--text-xs);
        }

        .new-indicator {
            padding: var(--space-0-5) var(--space-2);
            font-size: 0.5rem;
        }

        .hero-title {
            font-size: clamp(var(--text-xl), 10vw, var(--text-3xl));
            line-height: 1.1;
            gap: var(--space-1);
        }

        .hero-subtitle {
            font-size: var(--text-base);
            line-height: 1.5;
        }

        .btn-primary,
        .btn-secondary {
            font-size: var(--text-sm);
            padding: var(--space-3-5) var(--space-6);
            max-width: 280px;
        }

        .pill {
            font-size: 14px;
            padding: var(--space-1-5) var(--space-3);
        }

        .avatar {
            width: 36px;
            height: 36px;
            margin-left: -6px;
        }

        .count-badge {
            font-size: 0.625rem;
        }

        .social-text {
            font-size: var(--text-xs);
        }

        .scroll-indicator {
            bottom: var(--space-6);
            scale: 0.9;
        }

        /* Card overlays adjustments for small screens */
        .price-indicator {
            top: var(--space-2);
            left: var(--space-2);
            padding: var(--space-1) var(--space-2);
            font-size: var(--text-xs);
        }

        .scene-info {
            bottom: var(--space-2);
            left: var(--space-2);
            right: var(--space-2);
        }

        .location-pin {
            padding: var(--space-1) var(--space-2);
            font-size: 0.625rem;
        }

        .setting {
            font-size: 0.5rem;
            padding: 2px var(--space-1);
        }

        .audio-visualizer {
            bottom: var(--space-2);
            padding: var(--space-2);
        }

        .sound-wave {
            height: 20px;
            gap: 2px;
        }

        .wave-bar {
            width: 2px;
        }

        .hero-heading {
            font-size: 45px;
            color: white;
        }

        .status-badge {
            top: var(--space-2);
            right: var(--space-2);
            padding: var(--space-1) var(--space-2);
            font-size: 0.625rem;
        }

        .color-palette-advanced {
            bottom: var(--space-2);
            right: var(--space-2);
            padding: var(--space-2);
            min-width: 100px;
        }

        .color-sample {
            width: 20px;
            height: 20px;
        }

        .color-code {
            font-size: 0.625rem;
        }
    }

    /* Extra Small Mobile (360px and down) */
    @media (max-width: 360px) {

        /* .pill{
            font-size: 9px;
        } */
        .hero-heading {
            font-size: 34px;
        }

        .hero-container {
            padding: 0 var(--space-2);
        }

        .card-landscape,
        .card-profile {
            opacity: 0.2;
        }

        .hero-title {
            font-size: clamp(var(--text-lg), 12vw, var(--text-2xl));
        }

        .hero-subtitle {
            font-size: var(--text-sm);
        }

        .btn-primary,
        .btn-secondary {
            max-width: 240px;
            font-size: var(--text-xs);
            padding: var(--space-3) var(--space-5);
        }

        /* .announcement-badge {
        padding: var(--space-1-5) var(--space-3);
    }
     */
        .badge-text {
            font-size: 0.625rem;
        }
    }

    /* Landscape Mobile Orientation */
    @media (max-height: 500px) and (orientation: landscape) {
        .hero {
            min-height: 100vh;
            padding-top: var(--space-4);
            padding-bottom: var(--space-4);
        }

        .announcement-container,
        .heading-container,
        .subtitle-container,
        .cta-container {
            margin-bottom: var(--space-4);
        }

        .hero-title {
            font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
        }

        .card-landscape,
        .card-profile {
            opacity: 0.3;
            scale: 0.7;
        }

        .scroll-indicator {
            display: none;
        }
    }

    /* High DPI Displays */
    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
        .floating-card {
            backdrop-filter: blur(20px);
        }

        /* .announcement-badge {
        backdrop-filter: blur(25px);
    } */
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        .floating-card,
        .design-element {
            animation: none !important;
            opacity: 1 !important;
        }

        .animate-text {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* Focus States for Accessibility */
    .btn-primary:focus,
    .btn-secondary:focus,
    .announcement-badge:focus {
        outline: 2px solid var(--color-primary-400);
        outline-offset: 2px;
    }

    /* Dark Mode Support (if needed) */
    @media (prefers-color-scheme: dark) {
        :root {
            /* Already dark by default */
        }
    }

    /* Print Styles */
    @media print {

        .content-gallery,
        .hero-background,
        .scroll-indicator,
        .floating-elements {
            display: none;
        }

        .hero {
            background: white;
            color: black;
            min-height: auto;
        }

        .hero-title,
        .hero-subtitle,
        .badge-text,
        .social-text {
            color: black;
        }

        .gradient-text {
            -webkit-text-fill-color: black;
            background: none;
        }
    }

    /* Touch Device Optimizations */
    @media (hover: none) and (pointer: coarse) {
        .floating-card:hover {
            transform: none !important;
        }

        .btn-primary:hover,
        .btn-secondary:hover {
            transform: none;
        }

        .avatar:hover {
            transform: none;
        }

        .pill:hover {
            transform: none;
        }

        /* Increase touch targets for mobile */
        .btn-primary,
        .btn-secondary {
            min-height: 48px;
        }

        /* .announcement-badge {
        min-height: 44px;
    } */
    }

    header {
        background-color: transparent !important;
    }

    .header-bottom {
        background-color: transparent !important;
    }

    @media (max-width: 600px) {
        .menu_fixed {
            background-color: black !important;
        }


    }