<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selldro - Create Your Digital Store</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #000000;
            color: #070606;
            position: relative;
            overflow-x: hidden;
            font-weight: 500;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .hero-title, .faq-title, .footer-brand {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .hero-description, .feature-description, .pricing-card .description, .faq-answer {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            letter-spacing: -0.01em;
        }

        .feature-title, .pricing-card h3, .faq-question {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .nav-link, .nav-button, .button, .footer-link {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            letter-spacing: -0.01em;
        }

        .footer-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        .footer-newsletter-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .footer-newsletter-description {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            letter-spacing: -0.01em;
        }

        .footer-copyright, .footer-legal-link {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            letter-spacing: -0.01em;
        }
        .gradient-text {
            background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }
        .hero-gradient {
            background: transparent;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 40px; /* Reduced from 80px */
        }
        .hero-content {
            position: relative;
            z-index: 1;
        }
        .hero-title {
            font-size: 64px;
            line-height: 1.1;
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 24px;
            background: linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0.7));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding-top: 40px; /* Add padding to push content down */
        }

        .hero-title .static-text {
            display: inline-block;
        }

        .hero-title .words {
            display: inline-block;
            position: relative;
            height: 1.5em; /* Increased from 1.2em to 1.5em */
            overflow: hidden;
            vertical-align: top;
            width: 600px;
        }

        .hero-title .word {
            display: block;
            position: absolute;
            width: 100%;
            opacity: 0;
            transform: translateY(100%);
            transition: all 0.5s ease;
            background: linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0.7));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            white-space: nowrap;
            line-height: 1.5; /* Added line-height */
            padding-bottom: 10px; /* Added padding to ensure no cutoff */
        }

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

        .hero-title .word:nth-child(1) { --word-index: 0; }
        .hero-title .word:nth-child(2) { --word-index: 1; }
        .hero-title .word:nth-child(3) { --word-index: 2; }

        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(100%);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero-description {
            font-size: 20px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 32px;
            max-width: 600px;
        }
        .hero-buttons {
            display: flex;
            gap: 16px;
            margin-bottom: 48px;
        }
        .hero-stats {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 18px 20px;
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 90%;
        }

        .payment-icons {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .payment-icon {
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
            object-fit: contain;
        }

        .hero-stats .text {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .hero-stats {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 20px;
                width: 100%;
                max-width: 320px;
                margin: 0 auto;
            }

            .payment-icons {
                justify-content: center;
                margin-bottom: 12px;
                flex-wrap: wrap;
                gap: 16px;
            }

            .hero-stats .text {
                text-align: center;
                font-size: 15px;
                line-height: 1.5;
            }

            .payment-icon {
                width: 28px;
                height: 28px;
            }
        }
        .hero-image {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            -webkit-mask-image: linear-gradient(to bottom, 
                transparent 0%,
                black 10%,
                black 90%,
                transparent 100%
            );
            mask-image: linear-gradient(to bottom, 
                transparent 0%,
                black 10%,
                black 90%,
                transparent 100%
            );
        }
        .cards-container {
            position: relative;
            width: 340px;
            height: 800px;
            overflow: hidden;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, 
                transparent 0%,
                black 5%,
                black 95%,
                transparent 100%
            );
            mask-image: linear-gradient(to bottom, 
                transparent 0%,
                black 5%,
                black 95%,
                transparent 100%
            );
        }
        .hero-card {
            position: absolute;
            width: 340px;
            height: 380px;
            padding: 32px;
            color: white;
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            left: 0;
            right: 0;
            pointer-events: none;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .hero-card .content {
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: relative;
            z-index: 1;
        }
        .hero-card .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .hero-card .title {
            font-size: 24px;
            font-weight: 600;
            color: white;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-card .description {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.6;
        }
        .hero-card .stats {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .hero-card .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .hero-card .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }
        .hero-card .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }
        .hero-card .badge {
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
        }
        .hero-card .badge-success {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }
        .hero-card .badge-warning {
            background: rgba(234, 179, 8, 0.1);
            color: #eab308;
        }
        .hero-card .badge-purple {
            background: rgba(168, 85, 247, 0.1);
            color: #a855f7;
        }
        .hero-card .background-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.05;
            pointer-events: none;
            overflow: hidden;
        }
        .hero-card .background-pattern svg {
            width: 100%;
            height: 100%;
        }
        @keyframes conveyor {
            0% {
                transform: translateY(-380px);
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                transform: translateY(800px);
                opacity: 0;
            }
        }
        .hero-card:nth-child(1) {
            animation: conveyor 15s infinite linear;
        }
        .hero-card:nth-child(2) {
            animation: conveyor 15s infinite linear;
            animation-delay: -5s;
        }
        .hero-card:nth-child(3) {
            animation: conveyor 15s infinite linear;
            animation-delay: -10s;
        }
        .glass-background {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 0;
        }
        .gradient-sphere {
            position: fixed;
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 1;
            opacity: 0.15;
            mix-blend-mode: screen;
        }
        .sphere-1 {
            right: -400px;
            top: -200px;
            background: radial-gradient(circle at center, rgba(147, 51, 234, 0.4) 0%, rgba(88, 28, 135, 0.1) 50%, transparent 70%);
            animation: spherePulse 8s ease-in-out infinite;
        }
        .sphere-2 {
            left: -400px;
            top: 30%;
            background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(67, 56, 202, 0.1) 50%, transparent 70%);
            animation: spherePulse 8s ease-in-out infinite reverse;
        }
        .sphere-3 {
            right: -300px;
            top: 60%;
            background: radial-gradient(circle at center, rgba(168, 85, 247, 0.4) 0%, rgba(126, 34, 206, 0.1) 50%, transparent 70%);
            animation: spherePulse 8s ease-in-out infinite;
        }
        .sphere-4 {
            left: -200px;
            top: 80%;
            background: radial-gradient(circle at center, rgba(147, 51, 234, 0.4) 0%, rgba(88, 28, 135, 0.1) 50%, transparent 70%);
            animation: spherePulse 8s ease-in-out infinite reverse;
        }
        @keyframes spherePulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.4; }
        }
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 1rem 0;
            background: transparent;
            border-bottom: none;
            transition: all 0.3s ease;
        }

        .navbar.scrolled {
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 0.75rem 0;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .navbar .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .navbar-brand {
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .brand-text {
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.5px;
        }

        .navbar-links {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            transition: all 0.3s ease;
            position: relative;
            padding: 0.5rem 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        .nav-link:hover {
            color: white;
            transform: translateY(-1px);
        }

        .nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        .nav-button {
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .nav-button:not(.primary) {
            color: rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .nav-button:not(.primary):hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .nav-button.primary {
            color: white;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border: none;
            box-shadow: 0 4px 15px -3px rgba(99, 102, 241, 0.4);
        }

        .nav-button.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -5px rgba(99, 102, 241, 0.5);
        }

        .nav-button--primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .nav-button--primary:hover::before {
            opacity: 1;
        }

        .nav-button--primary > * {
            position: relative;
            z-index: 1;
        }

        .nav-button--secondary {
            background: rgba(225, 225, 225, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .nav-button--secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .mobile-menu-button {
            display: none;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .mobile-menu-button:hover {
            color: white;
            background: rgba(255, 255, 255, 0.05);
        }

        .mobile-menu-button svg {
            width: 24px;
            height: 24px;
        }

        @media (max-width: 768px) {
            .navbar-links {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 100vh;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                padding: 80px 24px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 32px;
                z-index: 999;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-20px);
                transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .navbar-links.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            .nav-link {
                font-size: 24px;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
                transition-delay: calc(var(--link-index) * 0.1s);
            }

            .navbar-links.active .nav-link {
                opacity: 1;
                transform: translateY(0);
            }

            .nav-button {
                width: 100%;
                justify-content: center;
                padding: 16px;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
                transition-delay: calc((var(--link-index) + 2) * 0.1s);
            }

            .navbar-links.active .nav-button {
                opacity: 1;
                transform: translateY(0);
            }

            .mobile-menu-button {
                z-index: 1000;
                width: 48px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                transition: all 0.3s ease;
            }

            .mobile-menu-button:hover {
                background: rgba(255, 255, 255, 0.15);
            }

            .mobile-menu-button svg {
                width: 24px;
                height: 24px;
                transition: transform 0.3s ease;
            }

            .mobile-menu-button.active svg {
                transform: rotate(90deg);
            }

            /* Hero Section Mobile */
            .hero-title {
                font-size: 40px;
                text-align: center;
                margin-bottom: 20px;
                padding-top: 20px; /* Reduced from 40px */
            }

            .hero-description {
                font-size: 18px;
                text-align: center;
                margin-bottom: 32px;
            }

            .hero-buttons {
                flex-direction: column;
                gap: 16px;
                width: 100%;
            }

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

            .hero-stats {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 20px;
                width: 100%;
                max-width: 320px; /* Limit width on mobile */
                margin: 0 auto; /* Center horizontally */
            }

            .payment-icons {
                justify-content: center;
                margin-bottom: 12px;
                flex-wrap: wrap; /* Allow icons to wrap if needed */
                gap: 16px; /* Increase gap between icons */
            }

            .hero-stats .text {
                text-align: center;
                font-size: 15px;
                line-height: 1.5;
            }

            .payment-icon {
                width: 28px; /* Slightly larger icons on mobile */
                height: 28px;
            }

            /* Cards Container Mobile */
            .cards-container {
                width: 100%;
                max-width: 340px;
                margin: 0 auto;
            }

            .hero-card {
                width: 100%;
            }

            /* Features Section Mobile */
            .feature-card {
                padding: 24px;
            }

            .feature-title {
                font-size: 22px;
            }

            .feature-description {
                font-size: 15px;
            }

            .feature-stats {
                flex-direction: row;
                justify-content: space-between;
            }

            /* Pricing Section Mobile */
            .pricing-card {
                padding: 24px;
            }

            .pricing-card .price {
                font-size: 36px;
            }

            .pricing-card .features {
                margin: 24px 0;
            }

            .pricing-card .feature-item {
                font-size: 14px;
            }

            /* FAQ Section Mobile */
            .faq-title {
                font-size: 28px;
                margin-bottom: 40px;
            }

            .faq-question {
                font-size: 16px;
            }

            .faq-answer {
                font-size: 14px;
            }

            /* Footer Mobile */
            .footer {
                padding: 60px 0 32px;
            }

            .footer-brand {
                text-align: center;
            }

            .footer-description {
                text-align: center;
                margin: 0 auto 24px;
            }

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

            .footer-title {
                text-align: center;
                margin-top: 32px;
            }

            .footer-links {
                align-items: center;
                text-align: center;
            }

            .footer-newsletter {
                padding: 20px;
                margin-top: 32px;
            }

            .footer-newsletter-form {
                flex-direction: column;
                gap: 16px;
            }

            .footer-newsletter-button {
                width: 100%;
            }

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

            .footer-legal {
                justify-content: center;
                flex-wrap: wrap;
                gap: 16px;
            }

            .hero-gradient {
                padding-top: 60px; /* Reduced from 100px */
                min-height: auto;
            }

            .hero-content {
                padding-top: 10px; /* Reduced from 20px */
            }

            .hero-title .words {
                width: 100%;
                height: 1.5em;
                text-align: center;
            }

            .hero-title .word {
                width: 100%;
                text-align: center;
            }

            .min-h-\[90vh\] {
                min-height: auto !important;
                padding: 20px 0; /* Reduced from 40px */
            }
        }

        /* Add mobile menu functionality */
        .navbar-links.show {
            display: flex;
        }

        .feature-card, .pricing-card {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .feature-card:hover, .pricing-card:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }
        .section-wrapper {
            position: relative;
            z-index: 1;
            width: 100%;
        }
        .contact-form {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
        }
        .contact-form label {
            color: rgba(255, 255, 255, 0.8);
        }
        .contact-form input,
        .contact-form textarea {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            transition: all 0.3s ease;
        }
        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.05);
            outline: none;
        }
        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }
        .card {
            position: absolute;
            width: 340px;
            height: 380px;
            padding: 32px;
            color: white;
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            left: 0;
            right: 0;
            pointer-events: none;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .card .content {
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .card .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .card .title {
            font-size: 20px;
            font-weight: 600;
            color: white;
            margin-bottom: 8px;
        }

        .card .description {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.5;
        }

        .card .stats {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: auto;
        }

        .card .value {
            font-size: 24px;
            font-weight: 600;
            color: white;
        }

        .card .period {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

        .card .price {
            background: rgba(239, 68, 68, 0.1);
            color: #EF4444;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 600;
        }

        .card .timestamp {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
        }

        .card .status {
            font-size: 16px;
            font-weight: 600;
            color: white;
            margin-top: 4px;
        }

        .card .grid-background {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.1;
        }

        .card .grid-background svg {
            width: 100%;
            height: 100%;
        }

        .card .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .card .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-size: cover;
        }

        .card .chat-info {
            display: flex;
            flex-direction: column;
        }

        .card .chat-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .card .chat-subtitle {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

        .card .menu-items {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .card .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            color: rgba(255, 255, 255, 0.8);
        }

        .card .menu-value {
            margin-left: auto;
            font-weight: 600;
        }

        .security-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .security-icon {
            width: 32px;
            height: 32px;
        }

        .price-tag {
            background: rgba(239, 68, 68, 0.1);
            color: #EF4444;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 600;
        }

        .security-info {
            margin-top: auto;
        }

        .timestamp {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
        }

        .status {
            font-size: 16px;
            font-weight: 600;
            color: white;
            margin-top: 4px;
        }

        .security-grid {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.1;
        }

        .security-grid-svg {
            width: 100%;
            height: 100%;
        }

        .feature-card {
            backdrop-filter: blur(20px);
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            padding: 2.5rem;
            border-radius: 24px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                800px circle at var(--mouse-x, 0) var(--mouse-y, 0),
                rgba(255, 255, 255, 0.08),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.4s;
        }

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

        .feature-card:hover {
            transform: translateY(-8px) scale(1.02);
            background: rgba(23, 23, 23, 0.8);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 
                0 20px 60px -20px rgba(0, 0, 0, 0.5),
                0 4px 30px -10px rgba(0, 0, 0, 0.3);
        }

        .feature-icon-wrapper {
            width: 64px;
            height: 64px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .feature-card:hover .feature-icon-wrapper {
            background: rgba(99, 102, 241, 0.15);
            border-color: rgba(99, 102, 241, 0.3);
            transform: scale(1.1) rotate(5deg);
        }

        .feature-icon {
            font-size: 28px;
            color: #818cf8;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1);
            color: #6366f1;
        }

        .feature-title {
            font-size: 26px;
            font-weight: 700;
            color: white;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.02em;
        }

        .feature-description {
            font-size: 16px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 28px;
            font-weight: 400;
            letter-spacing: -0.01em;
        }

        .feature-link {
            font-size: 15px;
            font-weight: 600;
            color: #818cf8;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            letter-spacing: -0.01em;
            padding: 12px 0;
        }

        .feature-link:hover {
            color: #6366f1;
            gap: 12px;
        }

        .feature-link i {
            font-size: 14px;
            transition: transform 0.3s ease;
        }

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

        .feature-stats {
            display: flex;
            gap: 24px;
            margin-top: auto;
            padding-top: 28px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .feature-stat {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .feature-stat-value {
            font-size: 20px;
            font-weight: 700;
            color: white;
            letter-spacing: -0.02em;
        }

        .feature-stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: -0.01em;
        }

        @media (max-width: 768px) {
            .feature-card {
                padding: 2rem;
            }
            
            .feature-icon-wrapper {
                width: 56px;
                height: 56px;
                margin-bottom: 24px;
            }
            
            .feature-icon {
                font-size: 24px;
            }
            
            .feature-title {
                font-size: 22px;
                margin-bottom: 16px;
            }
            
            .feature-description {
                font-size: 15px;
                margin-bottom: 24px;
            }
            
            .feature-stats {
                gap: 20px;
                padding-top: 24px;
            }
            
            .feature-stat-value {
                font-size: 18px;
            }
            
            .feature-stat-label {
                font-size: 13px;
            }
        }

        .footer {
            position: relative;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 80px 0 40px;
            overflow: hidden;
        }

        .footer::before {
            display: none;
        }

        .footer-brand {
            font-size: 24px;
            font-weight: 800;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 24px;
        }

        .footer-description {
            color: rgba(255, 255, 255, 0.7);
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 32px;
            max-width: 320px;
        }

        .footer-social {
            display: flex;
            gap: 16px;
            margin-bottom: 40px;
        }

        .footer-social-link {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.03);
            border: none;
            border-radius: 12px;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }

        .footer-social-link:hover {
            background: rgba(255, 255, 255, 0.05);
            color: white;
            transform: translateY(-2px);
        }

        .footer-title {
            font-size: 16px;
            font-weight: 700;
            color: white;
            margin-bottom: 24px;
            position: relative;
            padding-bottom: 12px;
        }

        .footer-title::after {
            display: none;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-link {
            color: rgba(255, 255, 255, 0.7);
            font-size: 15px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .footer-link:hover {
            color: white;
            transform: translateX(4px);
        }

        .footer-link i {
            font-size: 12px;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .footer-link:hover i {
            opacity: 1;
        }

        .footer-bottom {
            margin-top: 60px;
            padding-top: 40px;
            border-top: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-copyright {
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
        }

        .footer-legal {
            display: flex;
            gap: 24px;
        }

        .footer-legal-link {
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .footer-legal-link:hover {
            color: white;
        }

        .footer-newsletter {
            background: rgba(255, 255, 255, 0.02);
            border: none;
            border-radius: 12px;
            padding: 24px;
            margin-top: 40px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .footer-newsletter-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
            margin-bottom: 12px;
        }

        .footer-newsletter-description {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            margin-bottom: 20px;
        }

        .footer-newsletter-form {
            display: flex;
            gap: 12px;
        }

        .footer-newsletter-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 12px 16px;
            color: white;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .footer-newsletter-input:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
        }

        .footer-newsletter-button {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .footer-newsletter-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        .payment-methods-section {
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .payment-method-card {
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: all 0.3s ease;
            position: relative;
        }

        .payment-method-card:hover {
            transform: translateY(-4px);
            background: rgba(23, 23, 23, 0.8);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .payment-method-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .payment-method-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .payment-method-content {
            flex: 1;
        }

        .payment-method-title {
            font-size: 20px;
            font-weight: 600;
            color: white;
            margin-bottom: 4px;
        }

        .payment-method-description {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

        .floating-coin {
            position: absolute;
            width: 48px;
            height: 48px;
            pointer-events: none;
            right: 24px;
        }

        .floating-coin img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .floating-coin.coin-1 {
            animation: floatCoin 8s ease-in-out infinite;
        }

        .floating-coin.coin-2 {
            animation: floatCoin 8s ease-in-out infinite reverse;
        }

        .floating-coin.coin-3 {
            animation: floatCoin 8s ease-in-out infinite;
            animation-delay: -4s;
        }

        @keyframes floatCoin {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
            }
        }

        .button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 28px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .button svg {
            width: 20px;
            height: 20px;
        }

        .button-span {
            font-size: 14px;
            opacity: 0.8;
            font-weight: 500;
        }

        .button--primary {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            border: none;
        }

        .button--primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.5);
        }

        .button--primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .button--primary:hover::before {
            opacity: 1;
        }

        .button--primary > * {
            position: relative;
            z-index: 1;
        }

        .button--secondary {
            background: rgba(225, 225, 225, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

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

        .pricing-card {
            backdrop-filter: blur(20px);
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            padding: 2.5rem;
            border-radius: 24px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .pricing-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                800px circle at var(--mouse-x, 0) var(--mouse-y, 0),
                rgba(255, 255, 255, 0.06),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.4s;
        }

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

        .pricing-card:hover {
            transform: translateY(-8px);
            background: rgba(23, 23, 23, 0.8);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 
                0 10px 40px -10px rgba(0, 0, 0, 0.5),
                0 2px 20px -10px rgba(0, 0, 0, 0.2);
        }

        .pricing-card.popular {
            border: 2px solid rgba(99, 102, 241, 0.5);
            background: rgba(17, 17, 17, 0.8);
        }

        .pricing-card.popular::after {
            content: 'Most Popular';
            position: absolute;
            top: 16px;
            right: -30px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            padding: 4px 40px;
            font-size: 12px;
            font-weight: 600;
            transform: rotate(45deg);
            box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
        }

        .pricing-card .price {
            font-size: 48px;
            font-weight: 800;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 16px;
            letter-spacing: -0.02em;
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .pricing-card .price span.period {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
            letter-spacing: -0.01em;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
        }

        .monthly-price, .annual-price {
            font-weight: 800;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: opacity 0.3s ease;
            display: inline-block;
        }

        .monthly-price.hidden, .annual-price.hidden {
            display: none;
        }

        .pricing-card .features {
            margin: 32px 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .pricing-card .feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: -0.01em;
            transition: all 0.3s ease;
        }

        .pricing-card:hover .feature-item {
            color: rgba(255, 255, 255, 0.9);
            transform: translateX(4px);
        }

        .pricing-card .feature-item svg {
            width: 20px;
            height: 20px;
            color: #6366f1;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .pricing-card:hover .feature-item svg {
            transform: scale(1.1);
            color: #818cf8;
        }

        .pricing-card .cta-button {
            width: 100%;
            padding: 16px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            letter-spacing: -0.01em;
        }

        .pricing-card .cta-button::before {
            display: none;
        }

        .pricing-card .cta-button.primary {
            background: #6366f1;
            color: white;
            border: none;
        }

        .pricing-card .cta-button.primary:hover {
            transform: translateY(-2px);
            background: #4f46e5;
            box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.5);
        }

        .pricing-card .cta-button.secondary {
            background: rgba(255, 255, 255, 0.05);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .pricing-card .cta-button.secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .pricing-card .description {
            font-size: 15px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 24px;
            font-weight: 500;
            letter-spacing: -0.01em;
        }

        .faq-section {
            margin-top: 100px;
            text-align: center;
            position: relative;
        }

        .faq-section::before {
            content: '';
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.1) 50%, 
                transparent 100%
            );
        }

        .faq-title {
            font-size: 36px;
            font-weight: 800;
            color: white;
            margin-bottom: 64px;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.02em;
            position: relative;
            display: inline-block;
        }

        .faq-title::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            border-radius: 2px;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .faq-item {
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 24px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(20px);
            cursor: pointer;
        }

        .faq-item:hover {
            transform: translateY(-4px);
            background: rgba(23, 23, 23, 0.8);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 
                0 20px 60px -20px rgba(0, 0, 0, 0.5),
                0 4px 30px -10px rgba(0, 0, 0, 0.3);
        }

        .faq-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                800px circle at var(--mouse-x, 0) var(--mouse-y, 0),
                rgba(255, 255, 255, 0.08),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.4s;
        }

        .faq-item:hover::before {
            opacity: 1;
        }

        .faq-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
        }

        .faq-question {
            font-size: 18px;
            font-weight: 700;
            color: white;
            letter-spacing: -0.01em;
            transition: all 0.3s ease;
            flex: 1;
            text-align: left;
        }

        .faq-icon {
            width: 40px;
            height: 40px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6366f1;
            font-size: 18px;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .faq-item:hover .faq-icon {
            background: rgba(99, 102, 241, 0.2);
            border-color: rgba(99, 102, 241, 0.3);
            transform: scale(1.1) rotate(5deg);
        }

        .faq-answer {
            font-size: 15px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 500;
            letter-spacing: -0.01em;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(-10px);
        }

        .faq-item.active .faq-answer {
            max-height: 200px;
            opacity: 1;
            transform: translateY(0);
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .faq-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.1) 50%, 
                transparent 100%
            );
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .faq-item:hover::after {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .faq-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 0 16px;
            }
            
            .faq-item {
                padding: 20px;
            }
            
            .faq-question {
                font-size: 16px;
            }
            
            .faq-answer {
                font-size: 14px;
            }

            .faq-title {
                font-size: 28px;
                margin-bottom: 48px;
            }
        }

        /* Mobile Menu Styles */
        .navbar-links {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        @media (max-width: 768px) {
            .navbar-links {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                padding: 6rem 2rem 2rem;
                z-index: 40;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-20px);
                transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
                flex-direction: column;
                align-items: center;
            }

            .navbar-links.show {
                display: flex;
            }

            .navbar-links.active {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            .navbar-links .nav-link,
            .navbar-links .nav-button {
                opacity: 0;
                transform: translateY(10px);
                transition: opacity 0.3s ease, transform 0.3s ease;
                transition-delay: calc(var(--link-index) * 0.1s);
                font-size: 1.25rem;
                text-align: center;
                width: 100%;
            }

            .navbar-links.active .nav-link,
            .navbar-links.active .nav-button {
                opacity: 1;
                transform: translateY(0);
            }

            .nav-button {
                margin: 0;
                padding: 1rem 2rem;
            }

            .mobile-menu-button {
                display: flex;
                z-index: 1000;
                width: 48px;
                height: 48px;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                transition: all 0.3s ease;
            }
        }

        @media (min-width: 769px) {
            .navbar-links {
                position: static;
                height: auto;
                padding: 0;
                background: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                opacity: 1;
                visibility: visible;
                transform: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 2rem;
            }

            .mobile-menu-button {
                display: none;
            }

            .nav-link,
            .nav-button {
                opacity: 1;
                transform: none;
                width: auto;
            }
        }

        .pricing-toggle-label {
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .pricing-toggle-label[data-period="monthly"] {
            opacity: 1;
        }

        .pricing-toggle-label[data-period="annual"] {
            opacity: 0.5;
        }

        .monthly-price, .annual-price {
            font-weight: 800;
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: opacity 0.3s ease;
            display: inline-block;
        }

        .monthly-price.hidden, .annual-price.hidden {
            display: none;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

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

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            border: 2px solid rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.2);
        }

        /* Hide scrollbar for mobile devices while maintaining functionality */
        @media (max-width: 768px) {
            ::-webkit-scrollbar {
                width: 4px;
            }
            
            ::-webkit-scrollbar-thumb {
                border-width: 1px;
            }
        }

        /* Add these new styles */
        .store-creation-form {
            background: rgba(17, 17, 17, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 32px;
            max-width: 600px;
            margin: 0 auto;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .store-creation-form h2 {
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-bottom: 24px;
            text-align: center;
        }

        .store-creation-form .form-group {
            margin-bottom: 24px;
        }

        .store-creation-form label {
            display: block;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            margin-bottom: 8px;
        }

        .store-creation-form input {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 12px 16px;
            color: white;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .store-creation-form input:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.05);
        }

        .store-creation-form .domain-preview {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
        }

        .store-creation-form .domain-preview .domain {
            color: #6366f1;
            font-weight: 500;
        }

        .store-creation-form .submit-button {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .store-creation-form .submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.5);
        }

        .store-creation-form .error-message {
            color: #ef4444;
            font-size: 14px;
            margin-top: 8px;
            display: none;
        }

        .store-creation-form .success-message {
            color: #22c55e;
            font-size: 14px;
            margin-top: 8px;
            display: none;
        }
    </style>
</head>
<div class="glass-background"></div>
<div class="gradient-sphere sphere-1"></div>
<div class="gradient-sphere sphere-2"></div>
<div class="gradient-sphere sphere-3"></div>
<div class="gradient-sphere sphere-4"></div>

<body class="bg-black">
    <!-- Gradient Spheres -->
 
    <!-- Navigation -->
    <nav class="navbar">
        <div class="container">
            <a href="/" class="navbar-brand">
                <span class="brand-text">Selldro</span>
            </a>
            <div class="navbar-links">
                <a href="#features" class="nav-link">Features</a>
                <a href="#pricing" class="nav-link">Pricing</a>
                <a href="#about" class="nav-link">About</a>
                <a href="#contact" class="nav-link">Contact</a>
                <a href="login.html" class="nav-button">Sign in</a>
                <a href="signup.html" class="nav-button ">Get Started</a>
            </div>
            <button class="mobile-menu-button">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="hero-gradient text-white relative section-wrapper">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
                <div class="hero-content">
                    <h1 class="hero-title">
                        <div class="words">
                            <span class="word">Everything you need</span>
                            <span class="word">All In one place</span>
                            <span class="word">Coming Soon!</span>
                        </div>
                    </h1>
                    <p class="hero-description">
                        Accept payments, manage and custody your assets with ease, enjoy seamless on/off-ramping between cryptocurrencies and fiat, and explore integrated eCommerce solutions.
                    </p>
                    <div class="hero-buttons">
                        <button class="button button--secondary">
                            <svg viewBox="0 0 16 16" class="bi bi-lightning-charge-fill" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"></path>
                            </svg>
                            Get Started Today
                            <span class="button-span">─ No credit card</span>
                        </button>
                        <button class="button button--secondary">
                            <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
                            </svg>
                            Preview
                        </button>
                    </div>
                    <div class="hero-stats">
                        <div class="payment-icons">
                            <!-- Stripe -->
                            <img src="images/stripe.png" alt="Stripe" class="payment-icon">
                            <!-- PayPal -->
                            <img src="images/paypal.png" alt="PayPal" class="payment-icon">
                            <!-- Bitcoin -->
                            <img src="images/crypto.png" alt="Bitcoin" class="payment-icon">
                            <!-- Cash App -->
                            <img src="images/cashapp.png" alt="Cash App" class="payment-icon">
                            <!-- Stripe -->
                        </div>
                        <div class="text">
                           We integrated all major payment methods!
                        </div>
                    </div>
                </div>
                <div class="hero-image">
                    <div class="cards-container">
                        <!-- Sales Performance Card -->
                        <div class="hero-card">
                            <div class="content">
                                <div class="header">
                                    <div>
                                        <div class="title">Sales Performance</div>
                                        <div class="description">Weekly revenue overview</div>
                                    </div>
                                    <div class="badge badge-success">+24.5%</div>
                                </div>
                                <div class="stats">
                                    <div class="stat-row">
                                        <div class="stat-label">Total Revenue</div>
                                        <div class="stat-value">$48,295.62</div>
                                    </div>
                                    <div class="stat-row">
                                        <div class="stat-label">Orders</div>
                                        <div class="stat-value">1,245</div>
                                    </div>
                                    <div class="stat-row">
                                        <div class="stat-label">Customers</div>
                                        <div class="stat-value">892</div>
                                    </div>
                                </div>
                            </div>
                            <div class="background-pattern">
                                <svg width="100%" height="100%" viewBox="0 0 400 400">
                                    <defs>
                                        <pattern id="grid1" width="40" height="40" patternUnits="userSpaceOnUse">
                                            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" stroke-width="1"/>
                                        </pattern>
                                    </defs>
                                    <rect width="100%" height="100%" fill="url(#grid1)"/>
                                </svg>
                            </div>
                        </div>

                        <!-- Customer Activity Card -->
                        <div class="hero-card">
                            <div class="content">
                                <div class="header">
                                    <div>
                                        <div class="title">Customer Activity</div>
                                        <div class="description">Real-time monitoring</div>
                                    </div>
                                    <div class="badge badge-warning">Active Now</div>
                                </div>
                                <div class="stats">
                                    <div class="stat-row">
                                        <div class="stat-label">Active Users</div>
                                        <div class="stat-value">2,845</div>
                                    </div>
                                    <div class="stat-row">
                                        <div class="stat-label">Page Views</div>
                                        <div class="stat-value">12.4K</div>
                                    </div>
                                    <div class="stat-row">
                                        <div class="stat-label">Conversion Rate</div>
                                        <div class="stat-value">3.2%</div>
                                    </div>
                                </div>
                            </div>
                            <div class="background-pattern">
                                <svg width="100%" height="100%" viewBox="0 0 400 400">
                                    <defs>
                                        <pattern id="dots1" width="20" height="20" patternUnits="userSpaceOnUse">
                                            <circle cx="10" cy="10" r="2" fill="currentColor"/>
                                        </pattern>
                                    </defs>
                                    <rect width="100%" height="100%" fill="url(#dots1)"/>
                                </svg>
                            </div>
                        </div>

                        <!-- Security Status Card -->
                        <div class="hero-card">
                            <div class="content">
                                <div class="header">
                                    <div>
                                        <div class="title">Security Status</div>
                                        <div class="description">System protection</div>
                                    </div>
                                    <div class="badge badge-purple">Protected</div>
                                </div>
                                <div class="stats">
                                    <div class="stat-row">
                                        <div class="stat-label">Threats Blocked</div>
                                        <div class="stat-value">1,482</div>
                                    </div>
                                    <div class="stat-row">
                                        <div class="stat-label">Security Score</div>
                                        <div class="stat-value">98/100</div>
                                    </div>
                                    <div class="stat-row">
                                        <div class="stat-label">Last Scan</div>
                                        <div class="stat-value">2m ago</div>
                                    </div>
                                </div>
                            </div>
                            <div class="background-pattern">
                                <svg width="100%" height="100%" viewBox="0 0 400 400">
                                    <defs>
                                        <pattern id="diagonal1" width="20" height="20" patternUnits="userSpaceOnUse">
                                            <path d="M-5,5 l10,-10 M0,20 l20,-20 M15,25 l10,-10" stroke="currentColor" stroke-width="1" fill="none"/>
                                        </pattern>
                                    </defs>
                                    <rect width="100%" height="100%" fill="url(#diagonal1)"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <section id="features" class="py-24 bg-transparent section-border section-wrapper">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-20">
                <h2 class="text-4xl font-extrabold text-white mb-4">Everything You Need to Succeed</h2>
                <p class="text-xl text-gray-400 max-w-2xl mx-auto font-medium">Powerful features to help you build and grow your online business</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Store Creation Card -->
                <div class="feature-card">
                    <div class="feature-icon-wrapper">
                        <i class="fas fa-robot feature-icon"></i>
                    </div>
                    <h3 class="feature-title">AI Store Assistant</h3>
                    <p class="feature-description">Build and improve your store with our AI assistant, it will help you create a store that is optimized based on your business goals, with our AI assistant improvements can be made in seconds.</p>
                    <div class="feature-stats">
                        <div class="feature-stat">
                            <div class="feature-stat-value">5min</div>
                            <div class="feature-stat-label">Setup Time</div>
                        </div>
                        <div class="feature-stat">
                            <div class="feature-stat-value">Real-time</div>
                            <div class="feature-stat-label">Eccommerce Assistant</div>
                        </div>
                    </div>
                    <a href="#" class="feature-link mt-6">
                        Create Your Store! <i class="fas fa-arrow-right"></i>
                    </a>
                </div>

                <!-- Product Management Card -->
                <div class="feature-card">
                    <div class="feature-icon-wrapper">
                        <i class="fab fa-tiktok feature-icon"></i>
                    </div>
                    <h3 class="feature-title">Viral Product Database</h3>
                    <p class="feature-description">Effortlessly find and analyze thousands of the worlds most viral tiktok products, with real time sales data and analytics, this is the perfect tool for dropshipping success.</p>
                    <div class="feature-stats">
                        <div class="feature-stat">
                            <div class="feature-stat-value">∞</div>
                            <div class="feature-stat-label">Products</div>
                        </div>
                        <div class="feature-stat">
                            <div class="feature-stat-value">24/7</div>
                            <div class="feature-stat-label">Tracking</div>
                        </div>
                    </div>
                    <a href="#" class="feature-link mt-6">
                        View Database <i class="fas fa-arrow-right"></i>
                    </a>
                </div>

                <!-- Analytics Card -->
                <div class="feature-card">
                    <div class="feature-icon-wrapper">
                        <i class="fas fa-chart-line feature-icon"></i>
                    </div>
                    <h3 class="feature-title">Advanced Analytics</h3>
                    <p class="feature-description">Gain valuable insights on your store with real-time analytics. Track advanced metrics, customer behavior, sales trends, and optimize your personal business strategy.</p>
                    <div class="feature-stats">
                        <div class="feature-stat">
                            <div class="feature-stat-value">50+</div>
                            <div class="feature-stat-label">Metrics</div>
                        </div>
                        <div class="feature-stat">
                            <div class="feature-stat-value">Live</div>
                            <div class="feature-stat-label">Updates</div>
                        </div>
                    </div>
                    <a href="#" class="feature-link mt-6">
                        View analytics <i class="fas fa-arrow-right"></i>
                    </a>
                </div>

                <!-- Mobile Card -->
                <div class="feature-card">
                    <div class="feature-icon-wrapper">
                        <i class="fas fa-mobile-alt feature-icon"></i>
                    </div>
                    <h3 class="feature-title">Mobile-First Design</h3>
                    <p class="feature-description">Fully responsive stores that look stunning on all devices. Includes native-like mobile experience and fast loading times.</p>
                    <div class="feature-stats">
                        <div class="feature-stat">
                            <div class="feature-stat-value">99%</div>
                            <div class="feature-stat-label">Mobile Score</div>
                        </div>
                        <div class="feature-stat">
                            <div class="feature-stat-value">0.8s</div>
                            <div class="feature-stat-label">Load Time</div>
                        </div>
                    </div>
                    <a href="#" class="feature-link mt-6">
                        Test your store <i class="fas fa-arrow-right"></i>
                    </a>
                </div>

                <!-- Payments Card -->
                <div class="feature-card">
                    <div class="feature-icon-wrapper">
                        <i class="fas fa-shield-alt feature-icon"></i>
                    </div>
                    <h3 class="feature-title">Secure Payments</h3>
                    <p class="feature-description">Accept payments globally with top-tier security. Support for all major credit cards, digital wallets, and cryptocurrency.</p>
                    <div class="feature-stats">
                        <div class="feature-stat">
                            <div class="feature-stat-value">150+</div>
                            <div class="feature-stat-label">Countries</div>
                        </div>
                        <div class="feature-stat">
                            <div class="feature-stat-value">20+</div>
                            <div class="feature-stat-label">Methods</div>
                        </div>
                    </div>
                    <a href="#" class="feature-link mt-6">
                        View payment options <i class="fas fa-arrow-right"></i>
                    </a>
                </div>

                <!-- Support Card -->
                <div class="feature-card">
                    <div class="feature-icon-wrapper">
                        <i class="fas fa-headset feature-icon"></i>
                    </div>
                    <h3 class="feature-title">24/7 Expert Support</h3>
                    <p class="feature-description">Get help whenever you need with our highly trained support team. Access guides, tutorials, and live chat assistance.</p>
                    <div class="feature-stats">
                        <div class="feature-stat">
                            <div class="feature-stat-value">&lt;2min</div>
                            <div class="feature-stat-label">Response</div>
                        </div>
                        <div class="feature-stat">
                            <div class="feature-stat-value">24/7</div>
                            <div class="feature-stat-label">Available</div>
                        </div>
                    </div>
                    <a href="#" class="feature-link mt-6">
                        Contact support <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
     
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="py-24 bg-transparent section-wrapper">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-20">
                <h2 class="text-4xl font-extrabold text-white mb-4">Simple, Transparent Pricing</h2>
                <p class="text-xl text-gray-400 max-w-2xl mx-auto font-medium">Choose the perfect plan for your business needs</p>
            </div>
            
            <!-- Pricing Toggle -->
            <div class="flex justify-center items-center gap-4 mb-12">
                <span class="text-gray-400 pricing-toggle-label" data-period="monthly">Monthly</span>
                <button id="pricingToggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                    <span class="sr-only">Toggle pricing period</span>
                    <span class="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200"></span>
                </button>
                <span class="text-gray-400 pricing-toggle-label" data-period="annual">Annual <span class="text-indigo-400">Save 20%</span></span>
            </div>

            <!-- Pricing Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Starter Plan -->
                <div class="pricing-card p-8 rounded-2xl">
                    <div class="relative">
                        <h3 class="text-2xl font-bold text-white mb-4">Starter</h3>
                        <div class="price">
                            <span class="monthly-price">$29</span>
                            <span class="annual-price hidden">$23</span>
                            <span class="period">/month</span>
                        </div>
                        <p class="description">Perfect for small businesses just getting started</p>
                        <div class="features">
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Up to 100 products
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Basic analytics
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Email support
                            </div>
                        </div>
                        <button class="cta-button secondary">
                            Get Started
                        </button>
                    </div>
                </div>

                <!-- Pro Plan -->
                <div class="pricing-card p-8 rounded-2xl popular">
                    <div class="relative">
                        <h3 class="text-2xl font-bold text-white mb-4">Pro</h3>
                        <div class="price">
                            <span class="monthly-price">$79</span>
                            <span class="annual-price hidden">$63</span>
                            <span class="period">/month</span>
                        </div>
                        <p class="description">Ideal for growing businesses with advanced needs</p>
                        <div class="features">
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Unlimited products
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Advanced analytics
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Priority support
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Custom domain
                            </div>
                        </div>
                        <button class="cta-button primary">
                            Get Started
                        </button>
                    </div>
                </div>

                <!-- Enterprise Plan -->
                <div class="pricing-card p-8 rounded-2xl">
                    <div class="relative">
                        <h3 class="text-2xl font-bold text-white mb-4">Enterprise</h3>
                        <div class="price">
                            <span>Custom</span>
                            <span class="period">/month</span>
                        </div>
                        <p class="description">For large organizations with custom requirements</p>
                        <div class="features">
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Everything in Pro
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Custom integrations
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                24/7 dedicated support
                            </div>
                            <div class="feature-item">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                SLA guarantee
                            </div>
                        </div>
                        <button class="cta-button secondary">
                            Contact Sales
                        </button>
                    </div>
                </div>
            </div>

            <!-- FAQ Section -->
            <div class="faq-section">
                <h3 class="faq-title">Frequently Asked Questions</h3>
                <div class="faq-grid">
                    <div class="faq-item">
                        <div class="faq-header">
                            <h4 class="faq-question">Can I change plans later?</h4>
                            <div class="faq-icon">
                                <i class="fas fa-question-circle"></i>
                            </div>
                        </div>
                        <p class="faq-answer">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle. Our flexible pricing ensures you only pay for what you need.</p>
                    </div>
                    <div class="faq-item">
                        <div class="faq-header">
                            <h4 class="faq-question">What payment methods do you accept?</h4>
                            <div class="faq-icon">
                                <i class="fas fa-credit-card"></i>
                            </div>
                        </div>
                        <p class="faq-answer">We accept all major credit cards, PayPal, and bank transfers for annual plans. We also support cryptocurrency payments through our secure payment gateway.</p>
                    </div>
                    <div class="faq-item">
                        <div class="faq-header">
                            <h4 class="faq-question">Is there a free trial?</h4>
                            <div class="faq-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                        </div>
                        <p class="faq-answer">Yes, all plans come with a 14-day free trial. No credit card required. You can explore all features and decide if our platform is right for your business.</p>
                    </div>
                    <div class="faq-item">
                        <div class="faq-header">
                            <h4 class="faq-question">Do you offer refunds?</h4>
                            <div class="faq-icon">
                                <i class="fas fa-undo"></i>
                            </div>
                        </div>
                        <p class="faq-answer">Yes, we offer a 30-day money-back guarantee if you're not satisfied with our service. Your satisfaction is our top priority, and we're committed to providing value.</p>
                    </div>
                    <div class="faq-item">
                        <div class="faq-header">
                            <h4 class="faq-question">How secure is my data?</h4>
                            <div class="faq-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                        </div>
                        <p class="faq-answer">We use industry-standard encryption and security measures to protect your data. All information is stored in secure, encrypted databases with regular security audits and updates.</p>
                    </div>
                    <div class="faq-item">
                        <div class="faq-header">
                            <h4 class="faq-question">What kind of support do you offer?</h4>
                            <div class="faq-icon">
                                <i class="fas fa-headset"></i>
                            </div>
                        </div>
                        <p class="faq-answer">We provide 24/7 customer support through live chat, email, and phone. Enterprise plans include dedicated support representatives and priority response times.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Payment Methods Section -->


    <!-- Contact Section -->
  

    <!-- Footer -->
    <footer class="footer">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
                <!-- Brand Column -->
                <div>
                    <div class="footer-brand">Selldro</div>
                    <p class="footer-description">Create your digital store with ease. Join thousands of successful entrepreneurs.</p>
                    <div class="footer-social">
                        <a href="https://www.tiktok.com/@selldro" class="footer-social-link">
                            <i class="fab fa-tiktok"></i>
                        </a>
                      
                        <a href="https://www.instagram.com/selldro/?hl=en" class="footer-social-link">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="https://discord.gg/selldro" class="footer-social-link">
                            <i class="fab fa-discord"></i>
                        </a>
                    </div>
                </div>

                <!-- Product Column -->
                <div>
                    <h4 class="footer-title">Product</h4>
                    <div class="footer-links">
                        <a href="#features" class="footer-link">Features <i class="fas fa-chevron-right"></i></a>
                        <a href="#pricing" class="footer-link">Pricing <i class="fas fa-chevron-right"></i></a>
                        <a href="#" class="footer-link">Documentation <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- Company Column -->
                <div>
                    <h4 class="footer-title">Company</h4>
                    <div class="footer-links">
                        <a href="#" class="footer-link">About Us <i class="fas fa-chevron-right"></i></a>
                        <a href="#" class="footer-link">Blog <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>

                <!-- Legal Column -->
                <div>
                    <h4 class="footer-title">Legal</h4>
                    <div class="footer-links">
                        <a href="#" class="footer-link">Privacy Policy <i class="fas fa-chevron-right"></i></a>
                        <a href="#" class="footer-link">Terms of Service <i class="fas fa-chevron-right"></i></a>
                        <a href="#" class="footer-link">Security <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>

            <!-- Newsletter Section -->
            <div class="footer-newsletter">
                <h3 class="footer-newsletter-title">Stay Updated</h3>
                <p class="footer-newsletter-description">Subscribe to our newsletter for the latest updates and exclusive offers.</p>
                <form class="footer-newsletter-form">
                    <input type="email" placeholder="Enter your email" class="footer-newsletter-input">
                    <button type="submit" class="button button--secondary">Subscribe to our newsletter</button>
                </form>
            </div>

            <!-- Footer Bottom -->
            <div class="footer-bottom">
                <div class="footer-copyright">
                    &copy; 2025 Selldro. All rights reserved.
                </div>
                <div class="footer-legal">
                    <a href="#" class="footer-legal-link">Privacy Policy</a>
                    <a href="#" class="footer-legal-link">Terms of Service</a>
                    <a href="#" class="footer-legal-link">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Add this section where you want the store creation form to appear -->
    <section class="store-creation-section py-24 bg-transparent section-wrapper">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="store-creation-form">
                <h2>Create Your Store</h2>
                <form id="storeCreationForm">
                    <div class="form-group">
                        <label for="storeName">Store Name</label>
                        <input type="text" id="storeName" name="storeName" placeholder="Enter your store name" required>
                    </div>
                    <div class="form-group">
                        <label for="storeSubdomain">Store Subdomain</label>
                        <input type="text" id="storeSubdomain" name="storeSubdomain" placeholder="your-store" required>
                        <div class="domain-preview">
                            <span>Preview:</span>
                            <span class="domain">https://<span id="subdomainPreview">your-store</span>.selldro.com</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="storeDescription">Store Description</label>
                        <input type="text" id="storeDescription" name="storeDescription" placeholder="Brief description of your store" required>
                    </div>
                    <button type="submit" class="submit-button">Create Store</button>
                    <div class="error-message" id="errorMessage"></div>
                    <div class="success-message" id="successMessage"></div>
                </form>
            </div>
        </div>
    </section>

    <script>
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Enhanced Navbar scroll effect and animation
        let lastScroll = 0;
        let scrollTimeout;
        const nav = document.querySelector('nav');
        
        // Initial animation
        setTimeout(() => {
            nav.classList.add('nav-animate');
            nav.classList.remove('nav-hidden');
        }, 100);

        window.addEventListener('scroll', function() {
            const currentScroll = window.pageYOffset;
            
            // Clear the timeout
            clearTimeout(scrollTimeout);
            
            // Add shadow and background when scrolling
            if (currentScroll > 50) {
                nav.classList.add('nav-scroll');
            } else {
                nav.classList.remove('nav-scroll');
            }

            // Hide/show navbar based on scroll direction with debounce
            scrollTimeout = setTimeout(() => {
                if (currentScroll > lastScroll && currentScroll > 100) {
                    nav.classList.add('nav-hidden');
                    nav.classList.remove('nav-visible');
                } else {
                    nav.classList.remove('nav-hidden');
                    nav.classList.add('nav-visible');
                }
            }, 50); // Small delay for smoother transition

            lastScroll = currentScroll;
        });

        // Show navbar when mouse is near the top of the page
        document.addEventListener('mousemove', function(e) {
            if (e.clientY < 100) {
                nav.classList.remove('nav-hidden');
                nav.classList.add('nav-visible');
            }
        });

        // Add scroll effect to navbar
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 0) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Add mouse movement effect to feature cards
        document.addEventListener('DOMContentLoaded', () => {
            const cards = document.querySelectorAll('.feature-card');
            
            cards.forEach(card => {
                card.addEventListener('mousemove', e => {
                    const rect = card.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    card.style.setProperty('--mouse-x', `${x}px`);
                    card.style.setProperty('--mouse-y', `${y}px`);
                });
            });
        });

        // Add mouse movement effect to pricing cards
        document.addEventListener('DOMContentLoaded', () => {
            const cards = document.querySelectorAll('.pricing-card');
            
            cards.forEach(card => {
                card.addEventListener('mousemove', e => {
                    const rect = card.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    card.style.setProperty('--mouse-x', `${x}px`);
                    card.style.setProperty('--mouse-y', `${y}px`);
                });
            });
        });

        // Add mouse movement effect to FAQ items with enhanced animation
        document.addEventListener('DOMContentLoaded', () => {
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                item.addEventListener('mousemove', e => {
                    const rect = item.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    item.style.setProperty('--mouse-x', `${x}px`);
                    item.style.setProperty('--mouse-y', `${y}px`);
                });

                // Add click animation
                item.addEventListener('click', () => {
                    item.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        item.style.transform = '';
                    }, 200);
                });
            });
        });

        // Add word cycling animation
        document.addEventListener('DOMContentLoaded', () => {
            const words = document.querySelectorAll('.hero-title .word');
            let currentIndex = 0;

            function cycleWords() {
                // Remove active class from all words
                words.forEach(word => word.classList.remove('active'));
                
                // Add active class to current word
                words[currentIndex].classList.add('active');
                
                // Move to next word
                currentIndex = (currentIndex + 1) % words.length;
            }

            // Show first word immediately
            words[0].classList.add('active');

            // Cycle words every 2 seconds
            setInterval(cycleWords, 2000);
        });

        // Remove previous mobile menu code
        document.addEventListener('DOMContentLoaded', () => {
            // Mobile menu elements
            const mobileMenuBtn = document.querySelector('.mobile-menu-button');
            const navbarLinksContainer = document.querySelector('.navbar-links');
            const navLinks = document.querySelectorAll('.nav-link, .nav-button');
            let menuOpen = false;

            // Update navbar scroll effect
            window.addEventListener('scroll', function() {
                const navbar = document.querySelector('.navbar');
                if (window.scrollY > 20) { // Reduced threshold to 20px
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });

            // Add index to each link for staggered animation
            navLinks.forEach((link, index) => {
                link.style.setProperty('--link-index', index);
            });

            // Mobile menu toggle
            mobileMenuBtn.addEventListener('click', () => {
                menuOpen = !menuOpen;
                if (menuOpen) {
                    navbarLinksContainer.classList.add('show', 'active');
                    mobileMenuBtn.classList.add('active');
                    mobileMenuBtn.innerHTML = `
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    `;
                    document.body.style.overflow = 'hidden';
                } else {
                    navbarLinksContainer.classList.remove('active');
                    mobileMenuBtn.classList.remove('active');
                    mobileMenuBtn.innerHTML = `
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    `;
                    // Wait for animation to complete before hiding menu
                    setTimeout(() => {
                        navbarLinksContainer.classList.remove('show');
                        document.body.style.overflow = '';
                    }, 400);
                }
            });

            // Close menu when clicking a link
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (menuOpen) {
                        mobileMenuBtn.click();
                    }
                });
            });

            // Add touch support for mobile devices
            let xDown = null;
            let yDown = null;

            document.addEventListener('touchstart', handleTouchStart, false);
            document.addEventListener('touchmove', handleTouchMove, false);

            function handleTouchStart(evt) {
                xDown = evt.touches[0].clientX;
                yDown = evt.touches[0].clientY;
            }

            function handleTouchMove(evt) {
                if (!xDown || !yDown) {
                    return;
                }

                const xUp = evt.touches[0].clientX;
                const yUp = evt.touches[0].clientY;

                const xDiff = xDown - xUp;
                const yDiff = yDown - yUp;

                if (Math.abs(xDiff) > Math.abs(yDiff)) {
                    if (xDiff > 0 && menuOpen) {
                        mobileMenuBtn.click();
                    }
                }

                xDown = null;
                yDown = null;
            }
        });

        // Pricing toggle functionality
        document.addEventListener('DOMContentLoaded', () => {
            const toggle = document.getElementById('pricingToggle');
            const toggleButton = toggle.querySelector('span:not(.sr-only)');
            const monthlyPrices = document.querySelectorAll('.monthly-price');
            const annualPrices = document.querySelectorAll('.annual-price');
            const labels = document.querySelectorAll('.pricing-toggle-label');
            let isAnnual = false;

            function updateToggle() {
                // Update toggle button position
                toggleButton.style.transform = isAnnual ? 'translateX(20px)' : 'translateX(1px)';
                
                // Update prices visibility
                monthlyPrices.forEach(price => price.classList.toggle('hidden', isAnnual));
                annualPrices.forEach(price => price.classList.toggle('hidden', !isAnnual));
                
                // Update labels
                labels.forEach(label => {
                    if (label.dataset.period === 'monthly') {
                        label.style.opacity = isAnnual ? '0.5' : '1';
                    } else {
                        label.style.opacity = isAnnual ? '1' : '0.5';
                    }
                });
            }

            toggle.addEventListener('click', () => {
                isAnnual = !isAnnual;
                updateToggle();
            });

            // Initialize toggle state
            updateToggle();
        });

        // Add this to your existing JavaScript
        document.addEventListener('DOMContentLoaded', () => {
            const storeSubdomain = document.getElementById('storeSubdomain');
            const subdomainPreview = document.getElementById('subdomainPreview');
            const storeCreationForm = document.getElementById('storeCreationForm');
            const errorMessage = document.getElementById('errorMessage');
            const successMessage = document.getElementById('successMessage');

            // Update subdomain preview in real-time
            storeSubdomain.addEventListener('input', (e) => {
                const value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
                e.target.value = value;
                subdomainPreview.textContent = value;
            });

            // Handle form submission
            storeCreationForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                
                const storeName = document.getElementById('storeName').value;
                const subdomain = storeSubdomain.value;
                const description = document.getElementById('storeDescription').value;

                try {
                    // Here you would make an API call to your backend
                    const response = await fetch('/api/stores', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            name: storeName,
                            subdomain: subdomain,
                            description: description
                        })
                    });

                    if (!response.ok) {
                        throw new Error('Failed to create store');
                    }

                    const data = await response.json();
                    
                    // Show success message
                    successMessage.textContent = 'Store created successfully! Redirecting...';
                    successMessage.style.display = 'block';
                    errorMessage.style.display = 'none';

                    // Redirect to the new store
                    setTimeout(() => {
                        window.location.href = `https://${subdomain}.selldro.com`;
                    }, 2000);

                } catch (error) {
                    errorMessage.textContent = error.message;
                    errorMessage.style.display = 'block';
                    successMessage.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>