/* =================================================================
   ROOT & FONT SETUP
   ================================================================= */

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   :root {
       --primary: #6366f1;
       --primary-dark: #4f46e5;
       --primary-light: #818cf8;
       --secondary: #0f172a;
       --secondary-light: #1e293b;
       --accent: #10b981;
       --text-dark: #0f172a;
       --text-light: #64748b;
       --bg-light: #f8fafc;
       --bg-lighter: #ffffff;
       --border: #e2e8f0;
   }

   body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       color: var(--text-dark);
       line-height: 1.6;
       overflow-x: hidden;
   }

   /* Enhanced Navbar */
   .navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background: rgba(26, 35, 50, 0.95);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid rgba(91, 143, 249, 0.2);
       z-index: 1000;
       transition: all 0.3s ease;
   }

   .navbar.scrolled {
       background: rgba(26, 35, 50, 0.98);
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }

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

   .logo-img {
       height: 50px;
       width: auto;
       transition: transform 0.3s;
   }

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

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

   .nav-link {
       color: #cbd5e1;
       text-decoration: none;
       font-size: 0.95rem;
       font-weight: 500;
       transition: color 0.3s;
       position: relative;
   }

   .nav-link::after {
       content: '';
       position: absolute;
       bottom: -4px;
       left: 0;
       width: 0;
       height: 2px;
       background: var(--primary);
       transition: width 0.3s;
   }

   .nav-link:hover {
       color: white;
   }

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

   .btn {
       padding: 0.75rem 1.5rem;
       border-radius: 8px;
       text-decoration: none;
       font-weight: 600;
       transition: all 0.3s;
       border: none;
       cursor: pointer;
       font-size: 0.95rem;
       display: inline-block;
   }

   .btn-primary {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
       box-shadow: 0 4px 15px rgba(91, 143, 249, 0.3);
   }

   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(91, 143, 249, 0.4);
   }

   .btn-secondary {
       background: transparent;
       color: white;
       border: 2px solid rgba(255, 255, 255, 0.3);
   }

   .btn-secondary:hover {
       border-color: var(--primary);
       background: rgba(91, 143, 249, 0.1);
   }

   /* Enhanced Hero Section */
   .hero {
       padding: 8rem 2rem 4rem;
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       position: relative;
       overflow: hidden;
   }

   .hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
   }

   @keyframes float {
       0%, 100% { transform: translate(0, 0) rotate(0deg); }
       50% { transform: translate(-50px, 50px) rotate(180deg); }
   }

   .hero-container {
       max-width: 1200px;
       margin: 0 auto;
       position: relative;
       z-index: 1;
   }

   .hero-content {
       text-align: center;
       margin-bottom: 3rem;
   }

   .hero-title {
       font-size: 3.5rem;
       font-weight: 700;
       background: linear-gradient(135deg, #ffffff 0%, #818cf8 50%, #10b981 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 1.5rem;
       line-height: 1.2;
   }

   .hero-subtitle {
       font-size: 1.25rem;
       color: #94a3b8;
       max-width: 700px;
       margin: 0 auto 2rem;
   }

   .hero-action {
       text-align: center;
       margin-top: 3rem;
   }

   .hero-cta {
       display: flex;
       gap: 1rem;
       justify-content: center;
       margin-bottom: 3rem;
   }

   .hero-visual {
       max-width: 900px;
       margin: 0 auto;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 1rem;
       border: 1px solid rgba(99, 102, 241, 0.2);
       padding: 1rem;
       position: relative;
       min-height: 500px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.3s;
   }

   .hero-visual::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(45deg, rgba(91, 143, 249, 0.1) 0%, transparent 100%);
       pointer-events: none;
   }

   .hero-visual video {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 12px;
   }

   /* Stats with improved styling */
   .stats {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 2rem;
       max-width: 900px;
       margin: 4rem auto 0;
       text-align: center;
   }

   /* .stat-item {
       background: rgba(255, 255, 255, 0.05);
       padding: 2rem;
       border-radius: 12px;
       border: 1px solid rgba(91, 143, 249, 0.2);
       transition: all 0.3s;
   }

   .stat-item:hover {
       transform: translateY(-5px);
       border-color: rgba(91, 143, 249, 0.5);
       background: rgba(255, 255, 255, 0.08);
   }

   .stat-number {
       font-size: 2.5rem;
       font-weight: 700;
       color: var(--primary-light);
       margin-bottom: 0.5rem;
   }

   .stat-label {
       font-size: 1rem;
       color: #cbd5e1;
   } */

   .stat-item {
       color: white;
   }

   .stat-number {
       font-size: 2rem;
       font-weight: 700;
       color: var(--primary-light);
       margin-bottom: 0.5rem;
   }

   .stat-label {
       font-size: 0.9rem;
       color: #94a3b8;
   }


   /* Section Base Styles */
   section {
       padding: 6rem 2rem;
   }

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

   .section-title {
       font-size: 2.75rem;
       font-weight: 700;
       text-align: center;
       margin-bottom: 1.5rem;
       color: var(--text-dark);
   }

   .section-subtitle {
       font-size: 1.15rem;
       color: var(--text-light);
       text-align: center;
       max-width: 700px;
       margin: 0 auto 3.5rem;
   }

   /* Light background sections */
   .bg-light {
       background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
   }

   .bg-lighter {
       background: #ffffff;
   }

   /* Enhanced Feature Cards with Screenshots */
   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 2rem;
   }

   .feature-card {
       background: white;
       padding: 0;
       border-radius: 16px;
       border: 1px solid var(--border);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }

   .feature-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 4px;
       background: linear-gradient(90deg, var(--primary), var(--accent));
       transform: scaleX(0);
       transition: transform 0.4s;
       z-index: 1;
   }

   .feature-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 40px rgba(91, 143, 249, 0.15);
       border-color: var(--primary);
   }

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

   /* Content padding for cards */
   .feature-content {
       padding: 1.5rem;
   }

   /* Card without screenshot needs padding */
   .feature-card > .feature-icon,
   .feature-card > .feature-title {
       margin-left: 1.5rem;
       margin-right: 1.5rem;
   }

   .feature-card > .feature-icon {
       margin-top: 1.5rem;
   }

   .feature-card > .feature-text {
       padding: 0 1.5rem 1.5rem 1.5rem;
   }

   /* Screenshot styling for feature cards */
   .feature-screenshot {
       width: 100%;
       height: 200px;
       object-fit: cover;
       border-radius: 6px 6px 0 0;
       display: block;
       border-bottom: 1px solid var(--border);
   }

   .feature-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       margin-bottom: 1rem;
       padding: 1.5rem 1.5rem 0 1.5rem;
   }

   .feature-icon {
       width: 48px;
       height: 48px;
       min-width: 48px;
       background: linear-gradient(135deg, var(--primary-light), var(--primary));
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
       color: white;
   }

   /* Icon only cards (no screenshot) */
   .feature-card > .feature-icon {
       width: 64px;
       height: 64px;
       font-size: 1.75rem;
       margin-bottom: 1.5rem;
   }

   /* Text content padding for cards with screenshots */
   .feature-header ~ .feature-text {
       padding: 0 1.5rem 1.5rem 1.5rem;
   }

   .feature-title {
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--text-dark);
       flex: 1;
   }

   /* Title without screenshot/header */
   .feature-card > .feature-title {
       font-size: 1.3rem;
       margin-bottom: 1rem;
   }

   .feature-text {
       color: var(--text-light);
       line-height: 1.7;
   }

   /* How It Works - horizontal layout */
   .steps-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 3rem;
       max-width: 1200px;
       margin: 0 auto;
       position: relative;
   }

   .step-card {
       text-align: center;
       position: relative;
   }

   .step-number {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, var(--primary), var(--primary-dark));
       color: white;
       border-radius: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
       font-weight: 700;
       box-shadow: 0 10px 30px rgba(91, 143, 249, 0.3);
       margin: 0 auto 1.5rem;
   }

   .step-arrow {
       position: absolute;
       right: -1.5rem;
       top: 40px;
       font-size: 2rem;
       color: var(--primary-light);
       opacity: 0.4;
   }

   .step-card:last-child .step-arrow {
       display: none;
   }

   .step-content {
       padding-top: 0;
   }

   .step-title {
       font-size: 1.5rem;
       font-weight: 600;
       margin-bottom: 1rem;
       color: var(--text-dark);
   }

   .step-text {
       color: var(--text-light);
       font-size: 1rem;
       line-height: 1.7;
   }

   /* Demo Section Enhancement */
   .demo-tabs {
       display: flex;
       justify-content: center;
       gap: 1rem;
       margin-bottom: 3rem;
       flex-wrap: wrap;
   }

   .demo-tab-btn {
       background: white;
       border: 2px solid var(--border);
       color: var(--text-light);
       padding: 0.875rem 1.75rem;
       border-radius: 50px;
       cursor: pointer;
       font-weight: 600;
       transition: all 0.3s ease;
       font-size: 0.95rem;
   }

   .demo-tab-btn:hover {
       border-color: var(--primary);
       color: var(--primary);
   }

   .demo-tab-btn.active {
       background: linear-gradient(135deg, var(--primary), var(--primary-dark));
       color: white;
       border-color: var(--primary);
       box-shadow: 0 4px 20px rgba(91, 143, 249, 0.3);
   }

   .demo-content {
       display: none;
       background: white;
       border: 1px solid var(--border);
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   }

   .demo-content.active {
       display: flex;
       flex-direction: column;
   }

   @media (min-width: 768px) {
       .demo-content.active {
           flex-direction: row;
       }
   }

   .demo-video-wrapper {
       flex: 2;
       background: #000;
       position: relative;
       aspect-ratio: 16/9;
   }

   .demo-video-wrapper video {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }

   .demo-details {
       flex: 1;
       padding: 2.5rem;
       display: flex;
       flex-direction: column;
       justify-content: center;
       background: #f8fafc;
   }

   .demo-details h3 {
       color: var(--text-dark);
       margin-bottom: 0.75rem;
       font-size: 1.75rem;
   }

   .demo-details p {
       color: var(--text-light);
       margin-bottom: 1.5rem;
   }

   .demo-details ul {
       list-style: none;
       padding: 0;
   }

   .demo-details li {
       position: relative;
       padding-left: 1.75rem;
       margin-bottom: 1rem;
       color: var(--text-light);
       line-height: 1.6;
   }

   .demo-details li::before {
       content: "✓";
       position: absolute;
       left: 0;
       color: var(--primary);
       font-weight: 700;
       font-size: 1.2rem;
   }

   /* Gallery Enhancement - supports horizontal and vertical videos */
   .gallery-container {
       overflow-x: auto;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: thin;
       scrollbar-color: var(--primary) var(--border);
   }
   
   .gallery-container::-webkit-scrollbar {
       height: 8px;
   }
   
   .gallery-container::-webkit-scrollbar-track {
       background: var(--border);
       border-radius: 4px;
   }
   
   .gallery-container::-webkit-scrollbar-thumb {
       background: var(--primary);
       border-radius: 4px;
   }
   
   .gallery-grid {
       display: flex;
       gap: 2rem;
       margin-top: 3rem;
       padding-bottom: 1rem;
       align-items: flex-start;
   }
   
   .gallery-card {
       flex: 0 0 auto;
       background: white;
       border: 1px solid var(--border);
       border-radius: 16px;
       overflow: hidden;
       transition: all 0.3s;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   }
   
   /* Container for stacked horizontal cards */
   .gallery-card-stack {
       flex: 0 0 auto;
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   /* Vertical video card (9:16) */
   .gallery-card.vertical {
       width: 280px;
   }
   
   .gallery-card.vertical .video-container {
       position: relative;
       padding-bottom: 177.77%; /* 9:16 ratio */
       background: #000;
   }
   
   /* Horizontal video card (16:9) - smaller to fit two vertically */
   .gallery-card.horizontal {
       width: 380px;
   }
   
   .gallery-card.horizontal .video-container {
       position: relative;
       padding-bottom: 56.25%; /* 16:9 ratio */
       background: #000;
   }
   
   .gallery-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 12px 30px rgba(91, 143, 249, 0.15);
   }
   
   .video-container video, .video-container iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .gallery-caption {
       padding: 1.25rem;
   }
   
   .gallery-caption h4 {
       color: var(--text-dark);
       margin-bottom: 0.5rem;
       font-size: 1.1rem;
   }
   
   .gallery-caption p {
       color: var(--text-light);
       font-size: 0.9rem;
   }

   /* CTA Section Enhancement */
   .cta-section {
       background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
       color: white;
       text-align: center;
       position: relative;
       overflow: hidden;
   }

   .cta-section::before {
       content: '';
       position: absolute;
       bottom: -50%;
       left: -20%;
       width: 600px;
       height: 600px;
       background: radial-gradient(circle, rgba(91, 143, 249, 0.2) 0%, transparent 70%);
   }

   .cta-section .section-title {
       color: white;
   }

   .cta-section .section-subtitle {
       color: #cbd5e1;
   }

   /* Footer Enhancement */
   .footer {
       background: var(--secondary);
       color: white;
       padding: 4rem 2rem 2rem;
       border-top: 1px solid rgba(91, 143, 249, 0.2);
   }

   .footer-grid {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 1fr;
       gap: 3rem;
       margin-bottom: 3rem;
   }

   .footer-logo img {
       height: 45px;
       width: auto;
   }

   .footer-tagline {
       color: #94a3b8;
       font-size: 0.95rem;
       margin-top: 1rem;
       line-height: 1.6;
   }

   .footer-section h4 {
       font-weight: 600;
       margin-bottom: 1.25rem;
       font-size: 1.1rem;
   }

   .footer-links {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 0.875rem;
   }

   .footer-links a {
       color: #94a3b8;
       text-decoration: none;
       transition: color 0.3s;
   }

   .footer-links a:hover {
       color: white;
   }

   .social-links {
       display: flex;
       gap: 1rem;
       margin-top: 1rem;
   }

   .social-link {
       width: 42px;
       height: 42px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       text-decoration: none;
       transition: all 0.3s;
   }

   .social-link:hover {
       background: var(--primary);
       transform: translateY(-3px);
   }

   .footer-bottom {
       text-align: center;
       padding-top: 2rem;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       color: #94a3b8;
   }

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

   /* Responsive */
   @media (max-width: 968px) {
       .hero-title {
           font-size: 2.75rem;
       }

       .steps-grid {
           grid-template-columns: 1fr;
           gap: 2.5rem;
       }

       .step-arrow {
           display: none;
       }

       .footer-grid {
           grid-template-columns: 1fr 1fr;
       }

       .nav-links {
           display: none;
       }

       .stats {
           grid-template-columns: 1fr;
           gap: 1rem;
       }

       .gallery-card.horizontal {
           width: 350px;
       }

       .gallery-card.vertical {
           width: 240px;
       }
   }

   @media (max-width: 640px) {
       .hero {
           padding: 7rem 1rem 4rem;
       }

       .hero-title {
           font-size: 2rem;
       }

       .hero-subtitle {
           font-size: 1.1rem;
       }

       .hero-cta {
           flex-direction: column;
       }

       .footer-grid {
           grid-template-columns: 1fr;
       }

       section {
           padding: 4rem 1rem;
       }

       .section-title {
           font-size: 2rem;
       }
   }