*{margin:0;padding:0;box-sizing:border-box}:root{--color-orange:#ff3008;--color-blue:#014a81;--color-orange-dark:#cc2606;--bg-primary:#1a1d24;--bg-secondary:#252932;--bg-tertiary:#2f3440;--text-primary:#f5f5f5;--text-secondary:#d0d0d0;--text-tertiary:#a0a0a0;--border-color:#3a3f4a;--shadow-color:rgba(0, 0, 0, 0.3)} .light-theme{--bg-primary:#ffffff;--bg-secondary:#f5f5f5;--bg-tertiary:#e8e8e8;--text-primary:#1a1a1a;--text-secondary:#2a2a2a;--text-tertiary:#666666;--border-color:#e0e0e0;--shadow-color:rgba(0, 0, 0, 0.1)} html{font-size:16px;scroll-behavior:smooth} body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;font-size:1.125rem;line-height:1.7;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;transition:background-color 0.3s ease, color 0.3s ease} h1, h2, h3, h4, h5, h6{font-weight:600;line-height:1.2;margin-bottom:1rem;color:var(--text-primary)} h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.5rem} p{margin-bottom:1.5rem;color:var(--text-secondary)} a{color:var(--color-orange);text-decoration:none;transition:color 0.3s ease-in-out} a:hover{color:var(--color-orange-dark)} ul, ol{margin-bottom:1.5rem;padding-left:2rem} li{margin-bottom:0.5rem} img{max-width:100%;height:auto;display:block}:focus{outline:2px solid var(--color-orange);outline-offset:2px}::selection{background-color:var(--color-orange);color:var(--text-primary)} .theme-toggle{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;color:var(--text-primary);margin-left:1rem;position:relative;overflow:hidden} .theme-toggle:hover{background:var(--bg-tertiary);border-color:var(--color-orange);transform:scale(1.05);box-shadow:0 4px 12px rgba(255, 48, 8, 0.2)} .theme-icon{width:20px;height:20px;transition:transform 0.3s ease;position:absolute} .theme-icon-text{font-size:1.25rem;transition:transform 0.3s ease;position:absolute} .theme-toggle:hover .theme-icon, .theme-toggle:hover .theme-icon-text{transform:rotate(15deg) scale(1.1)} .light-theme .theme-toggle{background:#ffffff;border-color:#e0e0e0;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)} .light-theme .theme-toggle:hover{border-color:var(--color-orange);box-shadow:0 4px 12px rgba(255, 48, 8, 0.2)} .container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1} .section{padding:6rem 0;position:relative;background:linear-gradient(135deg, #ffffff 0%, #F8F9FA 30%, #ffffff 100%)} .section-alt{background:linear-gradient(135deg, #f8f9fa 0%, #E8F0F5 50%, #ffffff 100%);position:relative} .section-alt::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, #ff3008 0%, #014a81 50%, #ff3008 100%)} .section-title{font-size:2rem;font-weight:600;margin-bottom:3rem;text-align:center;color:#1a1a1a} .section-content{max-width:800px;margin:0 auto} .two-column{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem} .three-column{display:grid;grid-template-columns:repeat(3, 1fr);gap:3rem;margin-top:3rem} .feature-card{padding:2.5rem;background:#ffffff;border-radius:20px;border:1px solid rgba(255, 48, 8, 0.15);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 12px rgba(0, 0, 0, 0.04);height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden} .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, #ff3008 0%, #A00E24 100%);transform:scaleX(0);transition:transform 0.4s ease} .feature-card:hover::before{transform:scaleX(1)} .feature-card:hover{transform:translateY(-8px);box-shadow:0 12px 32px rgba(255, 48, 8, 0.25);border-color:rgba(255, 48, 8, 0.3)} .feature-card h3{color:#1a1a1a;font-weight:700;margin-bottom:1rem;font-size:1.625rem;letter-spacing:-0.01em} .feature-card p{color:#4a4a4a;line-height:1.7;flex-grow:1;font-size:1rem} @media (max-width:1024px){.two-column{grid-template-columns:1fr;gap:2.5rem} .three-column{grid-template-columns:repeat(2, 1fr);gap:2rem} .section{padding:5rem 0} } @media (max-width:768px){.section{padding:4rem 0} .section-title{font-size:1.75rem;margin-bottom:2rem} .container{padding:0 1.5rem} h1{font-size:2rem} h2{font-size:1.75rem} h3{font-size:1.25rem} .three-column{grid-template-columns:1fr;gap:1.5rem} .feature-card{padding:2rem} .highlight-box{padding:2rem} } .hero{min-height:95vh;display:flex;align-items:center;justify-content:center;padding:12rem 0 8rem;background:linear-gradient(135deg, #ffffff 0%, #F8F8F8 30%, #E8F0F5 60%, #ffffff 100%);position:relative;overflow:hidden;border-bottom:3px solid;border-image:linear-gradient(90deg, #ff3008 0%, #014a81 50%, #ff3008 100%) 1} .hero-background-pattern{position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 30%, rgba(255, 48, 8, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(1, 74, 129, 0.08) 0%, transparent 50%), linear-gradient(45deg, rgba(255, 48, 8, 0.03) 25%, transparent 25%, transparent 75%, rgba(1, 74, 129, 0.03) 75%, rgba(1, 74, 129, 0.03)), linear-gradient(45deg, rgba(1, 74, 129, 0.03) 25%, transparent 25%, transparent 75%, rgba(255, 48, 8, 0.03) 75%, rgba(255, 48, 8, 0.03));background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px;background-position:0 0, 0 0, 0 0, 20px 20px;pointer-events:none;z-index:0;opacity:0.5} .hero::before{content:'';position:absolute;top:-30%;right:-15%;width:600px;height:600px;background:radial-gradient(circle, rgba(255, 48, 8, 0.08) 0%, transparent 70%);border-radius:50%;z-index:0} .hero::after{content:'';position:absolute;bottom:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle, rgba(1, 74, 129, 0.06) 0%, transparent 70%);border-radius:50%;z-index:0} .hero-content{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:1200px;margin:0 auto} .hero-text-content{text-align:left;position:relative;z-index:1} .hero-image-content{position:relative;z-index:1} .hero-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.5rem;background:linear-gradient(135deg, rgba(255, 48, 8, 0.08) 0%, rgba(255, 48, 8, 0.03) 100%);border:1.5px solid rgba(255, 48, 8, 0.15);border-radius:50px;font-size:0.875rem;font-weight:600;color:#ff3008;margin-bottom:2rem;animation:fadeInUp 0.6s ease-out;backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(255, 48, 8, 0.08)} .badge-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:#ff3008;color:#ffffff;border-radius:50%;font-size:0.75rem;font-weight:700} .hero-image-wrapper{position:relative;width:100%;max-width:600px;margin:0 auto} .hero-image-decoration{position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:linear-gradient(135deg, #ff3008 0%, #014a81 50%, #ff3008 100%);border-radius:50%;opacity:0.1;z-index:-1;animation:pulse 3s ease-in-out infinite} .hero-image-glow{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:110%;height:110%;background:radial-gradient(circle, rgba(255, 48, 8, 0.2) 0%, rgba(1, 74, 129, 0.1) 50%, transparent 70%);border-radius:24px;z-index:-1;filter:blur(20px);animation:glow 3s ease-in-out infinite} @keyframes glow{0%, 100%{opacity:0.5} 50%{opacity:0.8} } @keyframes pulse{0%, 100%{transform:scale(1);opacity:0.1} 50%{transform:scale(1.1);opacity:0.15} } @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .highlight-text{color:#ff3008;background:linear-gradient(135deg, #ff3008 0%, #cc2606 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-stats{display:flex;gap:3rem;margin-top:2rem;flex-wrap:wrap;padding-top:2rem;border-top:1px solid rgba(255, 48, 8, 0.1);animation:fadeInUp 0.8s ease-out 0.7s both} .stat-item{text-align:left;flex:1;min-width:120px} .stat-number{font-size:2.75rem;font-weight:700;color:#ff3008;line-height:1;margin-bottom:0.5rem;background:linear-gradient(135deg, #ff3008 0%, #014a81 50%, #ff3008 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .stat-label{font-size:0.875rem;color:#666666;font-weight:500;text-transform:uppercase;letter-spacing:0.05em} .hero h1{font-size:4rem;font-weight:800;margin-bottom:1.5rem;line-height:1.15;color:#1a1a1a;letter-spacing:-0.03em;animation:fadeInUp 0.8s ease-out 0.2s both} .hero-tagline{font-size:1.625rem;color:#666666;margin-bottom:2rem;font-weight:400;animation:fadeInUp 0.8s ease-out 0.3s both;letter-spacing:-0.01em} .hero-description{font-size:1.125rem;color:#4a4a4a;line-height:1.8;margin-bottom:2rem;animation:fadeInUp 0.8s ease-out 0.4s both} .hero-main-image{width:100%;height:auto;border-radius:28px;box-shadow:0 25px 70px rgba(255, 48, 8, 0.25);object-fit:cover;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;animation:fadeInUp 1s ease-out 0.5s both;position:relative;z-index:2;border:3px solid rgba(255, 255, 255, 0.8)} .hero-main-image:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 40px 100px rgba(255, 48, 8, 0.35)} .hero-cta{display:flex;gap:1rem;margin-bottom:3rem;animation:fadeInUp 0.8s ease-out 0.6s both} .btn{padding:0.875rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border:none;cursor:pointer;position:relative;overflow:hidden} .btn-large{padding:1rem 2.5rem;font-size:1.125rem} .btn svg{transition:transform 0.3s ease} .btn-primary{background:linear-gradient(135deg, #ff3008 0%, #014a81 50%, #ff3008 100%);color:#ffffff !important;box-shadow:0 4px 12px rgba(255, 48, 8, 0.2);background-size:200% 200%;animation:gradientShift 3s ease infinite} .btn-primary span, .btn-primary svg{color:#ffffff !important} .btn-primary svg path{stroke:#ffffff !important} @keyframes gradientShift{0%, 100%{background-position:0% 50%} 50%{background-position:100% 50%} } .btn-primary:hover{background:linear-gradient(135deg, #cc2606 0%, #ff3008 100%);color:#ffffff !important;transform:translateY(-3px);box-shadow:0 6px 20px rgba(255, 48, 8, 0.4)} .btn-primary:hover *{color:#ffffff !important} .btn-primary:hover span{color:#ffffff !important} .btn-primary:hover svg{color:#ffffff !important;transform:translateX(4px)} .btn-primary:hover svg path{stroke:#ffffff !important;fill:#ffffff !important} .btn-secondary{background-color:transparent;color:#ff3008;border:2px solid #ff3008} .btn-secondary:hover{background-color:#ff3008;color:#ffffff;transform:translateY(-2px)} .nav{position:fixed;top:0;left:0;right:0;background-color:rgba(var(--bg-primary-rgb, 10, 10, 10), 0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);z-index:1000;padding:1rem 0;transition:all 0.3s ease;box-shadow:0 1px 3px var(--shadow-color)} .light-theme .nav{background-color:rgba(255, 255, 255, 0.98)} .nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;position:relative} .nav-logo{font-size:1.75rem;font-weight:700;color:#ff3008;background:linear-gradient(135deg, #ff3008 0%, #cc2606 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.02em;text-decoration:none;display:block;transition:opacity 0.3s ease} .nav-logo:hover{opacity:0.8} .logo-img{height:60px;width:auto;max-width:200px;object-fit:contain;display:block;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);filter:drop-shadow(0 2px 4px rgba(255, 48, 8, 0.1))} .nav-logo{display:flex;align-items:center} .nav-logo:hover .logo-img{transform:scale(1.08);filter:drop-shadow(0 4px 8px rgba(255, 48, 8, 0.2))} .nav-links{display:flex;gap:2rem;list-style:none;padding:0;margin:0;transition:all 0.3s ease} .nav-links li{margin:0} .nav-links a{color:var(--text-secondary);font-size:1rem;transition:color 0.3s ease-in-out;position:relative} .nav-links a:hover, .nav-links a.active{color:var(--color-orange)} .nav-links a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background-color:#ff3008;transition:width 0.3s ease} .nav-links a:hover::after{width:100%} .section-intro{text-align:center;margin-bottom:3rem} .section-intro h2{font-size:2.75rem;margin-bottom:1.5rem;color:#1a1a1a;font-weight:700;letter-spacing:-0.02em} .section-header-content h2{font-size:2.75rem;margin-bottom:1rem;color:#1a1a1a;font-weight:700;letter-spacing:-0.02em} .section-intro p{font-size:1.25rem;color:#666666;max-width:700px;margin:0 auto} .value-list{list-style:none;padding:0;margin:2rem 0} .value-list li{padding:1rem 0;padding-left:2rem;position:relative;border-bottom:1px solid #e0e0e0} .value-list li:last-child{border-bottom:none} .value-list li::before{content:"✓";position:absolute;left:0;color:#ff3008;font-weight:bold;font-size:1.25rem} .highlight-box{background:linear-gradient(135deg, #FFF5F5 0%, #ffffff 100%);padding:3rem;border-radius:16px;margin:3rem 0;border-left:5px solid #ff3008;box-shadow:0 4px 16px rgba(255, 48, 8, 0.12);position:relative;overflow:hidden} .highlight-box::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg, #ff3008 0%, #014a81 50%, #ff3008 100%)} .highlight-box h3{margin-top:0;color:#1a1a1a} .emphasis{font-size:1.25rem;font-weight:500;color:#1a1a1a;margin:1.5rem 0} .bold-statement{font-size:1.25rem;font-weight:600;color:#1a1a1a;line-height:1.6;margin:1rem 0} .bold-statement-large{font-size:1.5rem;font-weight:600;color:#1a1a1a;line-height:1.7;margin:1.5rem 0} .bold-statement strong{color:#ff3008;font-weight:700} .cta-section{margin:3rem 0 2rem;text-align:center} .cta-inline{margin:2rem 0} .partners-section{padding:4rem 0;background:linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);border-top:1px solid rgba(255, 48, 8, 0.1);border-bottom:1px solid rgba(255, 48, 8, 0.1)} .partners-intro{text-align:center;margin-bottom:3rem} .partners-label{font-size:0.95rem;color:#666666;text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin:0} .partners-grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:2rem;align-items:center;justify-items:center;max-width:1000px;margin:0 auto} .partner-logo{width:100%;max-width:150px;opacity:0.7;transition:all 0.3s ease} .partner-logo:hover{opacity:1;transform:scale(1.05)} .logo-placeholder{width:100%;height:auto;display:flex;align-items:center;justify-content:center;filter:grayscale(100%);transition:filter 0.3s ease} .partner-logo:hover .logo-placeholder{filter:grayscale(0%)} .partner-logo text{fill:#ff3008} .footer{background:linear-gradient(135deg, #014a81 0%, #1a1a1a 50%, #014a81 100%);color:#ffffff;padding:4rem 0 2rem;position:relative;overflow:hidden} .footer::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, #ff3008 0%, #014a81 50%, #ff3008 100%)} .footer::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px );pointer-events:none;opacity:0.3} .footer-content{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:4rem;margin-bottom:3rem;position:relative;z-index:1} .footer-section{display:flex;flex-direction:column} .footer-brand{max-width:400px} .footer-logo{display:inline-block;margin-bottom:1.5rem;transition:transform 0.3s ease;background:#ffffff;padding:12px 16px;border-radius:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)} .footer-logo:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0, 0, 0, 0.2)} .footer-logo-img{height:100px;width:auto;max-width:200px;object-fit:contain;display:block} .footer-tagline{font-size:1.25rem;font-weight:600;color:#ffffff;margin-bottom:1rem;background:linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .footer-description{color:rgba(255, 255, 255, 0.8);font-size:0.9375rem;line-height:1.6;margin:0} .footer-heading{font-size:1.125rem;font-weight:700;color:#ffffff;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:0.05em} .footer-nav{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.875rem} .footer-nav a{color:rgba(255, 255, 255, 0.8);text-decoration:none;font-size:0.9375rem;transition:all 0.3s ease;display:inline-block;position:relative;padding-left:0} .footer-nav a::before{content:'→';position:absolute;left:-20px;opacity:0;transition:all 0.3s ease;color:#ff3008} .footer-nav a:hover{color:#ffffff;padding-left:20px;transform:translateX(5px)} .footer-nav a:hover::before{opacity:1;left:0} .footer-contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.25rem} .footer-contact li{display:flex;align-items:center;gap:0.875rem;color:rgba(255, 255, 255, 0.8);font-size:0.9375rem;transition:color 0.3s ease} .footer-contact li:hover{color:#ffffff} .footer-contact li svg{flex-shrink:0;color:#ff3008;transition:transform 0.3s ease} .footer-contact li:hover svg{transform:scale(1.1)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(255, 255, 255, 0.1);position:relative;z-index:1} .footer-copyright p{color:rgba(255, 255, 255, 0.7);font-size:0.875rem;margin:0} .footer-legal{display:flex;align-items:center;gap:1rem} .footer-legal a{color:rgba(255, 255, 255, 0.7);text-decoration:none;font-size:0.875rem;transition:color 0.3s ease} .footer-legal a:hover{color:#ffffff} .footer-separator{color:rgba(255, 255, 255, 0.3);font-size:0.875rem} .page-hero{padding:10rem 0 5rem;text-align:center;background:linear-gradient(135deg, #F5F5F5 0%, #ffffff 100%);position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;top:-20%;right:-10%;width:400px;height:400px;background:radial-gradient(circle, rgba(255, 48, 8, 0.08) 0%, transparent 70%);border-radius:50%;z-index:0} .page-hero .container{position:relative;z-index:1} .page-hero h1{font-size:3rem;margin-bottom:1rem;color:#1a1a1a} .page-hero-subtitle{font-size:1.5rem;color:#666666;max-width:600px;margin:0 auto} .page-hero-modern{padding:12rem 0 6rem;text-align:center;background:linear-gradient(135deg, #ffffff 0%, #F8F8F8 30%, #E8F0F5 60%, #ffffff 100%);position:relative;overflow:hidden;border-bottom:3px solid;border-image:linear-gradient(90deg, #ff3008 0%, #014a81 50%, #ff3008 100%) 1} .page-hero-modern::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 30%, rgba(255, 48, 8, 0.06) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(1, 74, 129, 0.06) 0%, transparent 50%);pointer-events:none;z-index:0} .page-hero-content{position:relative;z-index:1} .page-hero-modern h1{font-size:3.5rem;font-weight:700;color:#1a1a1a;margin-bottom:1.5rem;letter-spacing:-0.02em;background:linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .page-hero-modern .page-hero-subtitle{font-size:1.5rem;color:#666666;max-width:800px;margin:0 auto 3rem;line-height:1.6} .image-container{width:100%;height:300px;border-radius:16px;overflow:hidden;background:#f8f9fa;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transition:transform 0.3s ease, box-shadow 0.3s ease;position:relative} .how-it-works-content{display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:center;margin-top:4rem} .how-it-works-image{height:450px} .image-container:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(255, 48, 8, 0.2)} .section-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease} .image-container:hover .section-image{transform:scale(1.05)} .placeholder-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center} .image-text-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin:3rem 0} .image-text-grid.reverse{direction:rtl} .image-text-grid.reverse > *{direction:ltr} .text-content h2, .text-content h3{margin-top:0} .feature-icon{margin-bottom:1.5rem;display:inline-block;transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);filter:drop-shadow(0 2px 8px rgba(255, 48, 8, 0.15))} .feature-card:hover .feature-icon{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 4px 12px rgba(255, 48, 8, 0.25))} .contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;margin-top:2rem} .contact-form-container h2{margin-bottom:2rem} .contact-form{display:flex;flex-direction:column;gap:1.5rem} .form-group{display:flex;flex-direction:column} .form-group label{margin-bottom:0.5rem;font-weight:600;color:#1a1a1a} .form-group input, .form-group select, .form-group textarea{padding:1rem;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;font-family:inherit;transition:all 0.3s ease;background:#ffffff} .form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none;border-color:#ff3008;box-shadow:0 0 0 3px rgba(255, 48, 8, 0.1)} .form-group input:hover, .form-group select:hover, .form-group textarea:hover{border-color:#ff3008} .contact-info{display:flex;flex-direction:column;gap:2rem} .contact-card{background:#ffffff;padding:2.5rem;border-radius:16px;border-left:5px solid #ff3008;box-shadow:0 4px 16px rgba(255, 48, 8, 0.12);transition:all 0.3s ease} .contact-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(255, 48, 8, 0.2)} .contact-icon{margin-bottom:1rem} .contact-card h3{margin-top:0;margin-bottom:1rem;color:#1a1a1a} .contact-card p{margin-bottom:0.5rem;color:#4a4a4a} .contact-image-container{width:100%;height:200px;border-radius:12px;overflow:hidden;margin-top:1rem;box-shadow:0 4px 12px rgba(255, 48, 8, 0.1);transition:transform 0.3s ease} .contact-image-container:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(255, 48, 8, 0.2)} .contact-image{width:100%;height:100%;object-fit:cover;display:block} .premium-section{position:relative;padding:8rem 0;background:linear-gradient(135deg, #ffffff 0%, #F8F9FA 50%, #ffffff 100%)} .premium-list{list-style:none;padding:0;margin:1.5rem 0} .premium-list li{position:relative;padding-left:2.5rem;margin-bottom:1rem;color:#4a4a4a;line-height:1.7} .premium-list li::before{content:"✓";position:absolute;left:0;top:0.25rem;width:24px;height:24px;background:linear-gradient(135deg, #ff3008 0%, #014a81 50%, #ff3008 100%);color:#ffffff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:700} .coming-soon-section{padding:4rem 0;background:linear-gradient(135deg, #014a81 0%, #ff3008 30%, #014a81 60%, #ff3008 100%);background-size:200% 200%;animation:britishGradient 8s ease infinite;position:relative;overflow:hidden} @keyframes britishGradient{0%, 100%{background-position:0% 50%} 50%{background-position:100% 50%} } .coming-soon-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px );pointer-events:none} .coming-soon-grid{display:grid;grid-template-columns:auto 1fr;gap:4rem;align-items:center;max-width:1000px;margin:0 auto;position:relative;z-index:1} .coming-soon-icon{display:flex;justify-content:center;align-items:center} .coming-soon-content{text-align:left;position:relative;z-index:1} .app-logo{width:120px;height:120px;border-radius:28px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);background:#ffffff;padding:20px;object-fit:contain;animation:float 3s ease-in-out infinite} .app-logo-large{width:160px;height:160px;border-radius:35px;box-shadow:0 25px 70px rgba(0, 0, 0, 0.35);background:#ffffff;padding:15px;object-fit:contain;animation:float 3s ease-in-out infinite} @keyframes float{0%, 100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } .coming-soon-content h2{color:#ffffff;font-size:2.25rem;margin-bottom:1rem;font-weight:700;text-align:left} .coming-soon-description{color:rgba(255, 255, 255, 0.9);font-size:1.125rem;margin-bottom:2.5rem;line-height:1.6;max-width:600px;margin-left:auto;margin-right:auto} .app-store-badges{display:flex;gap:1.5rem;justify-content:flex-start;margin-bottom:2rem;flex-wrap:wrap} .app-badge{display:flex;flex-direction:column;align-items:center;gap:0.75rem;opacity:0.7;transition:opacity 0.3s ease} .app-badge:hover{opacity:1} .badge-label{font-size:0.875rem;color:rgba(255, 255, 255, 0.95) !important;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;text-shadow:0 1px 3px rgba(0, 0, 0, 0.3)} .coming-soon-cta{margin-top:1.5rem} .section-header-modern{text-align:center;margin-bottom:4rem} .section-header-modern h2{font-size:2.75rem;margin-bottom:1rem;color:#1a1a1a;font-weight:700;letter-spacing:-0.02em} .section-subtitle{font-size:1.375rem;color:#666666;max-width:800px;margin:0 auto;line-height:1.6} .how-it-works-modern{display:grid;grid-template-columns:1.2fr 1fr;gap:5rem;align-items:center;margin-top:3rem} .how-it-works-steps{display:flex;flex-direction:column;gap:2.5rem} .step-card{display:flex;gap:2rem;align-items:flex-start;padding:2rem;background:#ffffff;border-radius:20px;box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);position:relative;border:2px solid transparent} .step-card:hover{transform:translateX(10px);box-shadow:0 8px 30px rgba(255, 48, 8, 0.15);border-color:rgba(255, 48, 8, 0.2)} .step-number{position:absolute;top:-15px;left:2rem;width:50px;height:50px;background:linear-gradient(135deg, #ff3008 0%, #014a81 50%, #ff3008 100%);color:#ffffff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;box-shadow:0 4px 15px rgba(255, 48, 8, 0.3);z-index:1} .step-content{flex:1;margin-top:1rem} .step-content h3{font-size:1.75rem;margin-bottom:0.75rem;color:#1a1a1a;font-weight:700} .step-content p{color:#666666;line-height:1.7;font-size:1.0625rem} .step-connector{width:3px;height:40px;background:linear-gradient(180deg, #ff3008 0%, #014a81 50%, #ff3008 100%);margin-left:2.5rem;border-radius:2px;opacity:0.4} .how-it-works-image-modern{height:500px;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0, 0, 0, 0.15);position:relative} .how-it-works-image-modern .section-image{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease} .how-it-works-image-modern:hover .section-image{transform:scale(1.05)} .customers-modern-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center;margin-top:3rem} .customers-image-wrapper, .vendors-image-wrapper{position:relative} .customers-image-wrapper .image-container, .vendors-image-wrapper .image-container{height:450px;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0, 0, 0, 0.12);transition:all 0.4s ease} .customers-image-wrapper .image-container:hover, .vendors-image-wrapper .image-container:hover{transform:translateY(-8px);box-shadow:0 25px 70px rgba(255, 48, 8, 0.2)} .customers-content-wrapper, .vendors-content-wrapper{display:flex;align-items:center} .customers-content-wrapper .content-block, .vendors-content-wrapper .content-block{width:100%} .vendors-modern-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:center;margin-top:3rem} .benefits-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:1.5rem;margin:2.5rem 0;width:100%} .benefit-item{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg, rgba(255, 48, 8, 0.05) 0%, rgba(1, 74, 129, 0.05) 100%);border-radius:12px;border:1.5px solid rgba(255, 48, 8, 0.1);transition:all 0.3s ease;margin:0;width:100%;box-sizing:border-box} .benefit-item:hover{background:linear-gradient(135deg, rgba(255, 48, 8, 0.1) 0%, rgba(1, 74, 129, 0.1) 100%);border-color:rgba(255, 48, 8, 0.3);transform:translateX(5px)} .benefit-icon{width:32px;height:32px;background:linear-gradient(135deg, #ff3008 0%, #014a81 50%, #ff3008 100%);color:#ffffff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0} .benefit-item span{color:#4a4a4a;font-weight:500;font-size:1rem} .mobile-menu-toggle{display:none;background:none;border:none;font-size:1.75rem;color:#1a1a1a;cursor:pointer;padding:0.5rem;transition:color 0.3s ease;z-index:1001;line-height:1} .mobile-menu-toggle:hover{color:#ff3008} @media (max-width:768px){.nav-container{position:relative} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(255, 255, 255, 0.98);backdrop-filter:blur(10px);padding:1.5rem 2rem;box-shadow:0 4px 20px rgba(255, 48, 8, 0.15);border-top:1px solid rgba(255, 48, 8, 0.1);gap:0;z-index:1000} .nav-links.mobile-open{display:flex} .nav-links li{width:100%;border-bottom:1px solid rgba(255, 48, 8, 0.1)} .nav-links li:last-child{border-bottom:none} .nav-links a{display:block;padding:1rem 0;width:100%;font-size:1.125rem} .nav-links a::after{display:none} .mobile-menu-toggle{display:block} .hero h1{font-size:2.5rem} .hero-image-wrapper{max-width:100%} .hero-image-decoration{display:none} .hero-tagline{font-size:1.25rem} .hero-description{font-size:1.125rem} .hero-cta{flex-direction:column;align-items:center} .btn{width:100%;max-width:300px} .section-intro h2{font-size:2rem} .section-intro p{font-size:1.125rem} .image-text-grid{grid-template-columns:1fr;gap:2rem} .image-text-grid.reverse{direction:ltr} .contact-grid{grid-template-columns:1fr;gap:2rem} .page-hero h1{font-size:2rem} .page-hero-modern{padding:10rem 0 4rem} .page-hero-modern h1{font-size:2.25rem} .page-hero-modern .page-hero-subtitle{font-size:1.125rem} .page-hero-subtitle{font-size:1.25rem} .hero-stats{gap:2rem} .stat-number{font-size:2rem} .stat-label{font-size:0.85rem} .hero-image{max-width:100%;margin-bottom:2rem} .hero-main-image{max-width:100%} .image-container{height:250px} .logo-img{height:50px;max-width:160px} .coming-soon-content h2{font-size:2rem} .coming-soon-description{font-size:1.125rem} .app-store-badges{flex-direction:column;align-items:center} .app-logo{width:100px;height:100px} .app-logo-large{width:140px;height:140px} .section-header-modern h2{font-size:2rem} .section-subtitle{font-size:1.125rem} .how-it-works-modern{grid-template-columns:1fr;gap:3rem} .how-it-works-image-modern{height:350px;order:-1} .how-it-works-steps{gap:2rem} .step-card{padding:1.5rem;flex-direction:column;gap:1rem} .step-number{position:relative;top:0;left:0;margin-bottom:0.5rem} .step-connector{display:none} .customers-modern-grid, .vendors-modern-grid{grid-template-columns:1fr;gap:3rem} .customers-image-wrapper .image-container, .vendors-image-wrapper .image-container{height:300px} .benefits-grid{grid-template-columns:1fr;gap:1rem} .benefit-item{padding:0.875rem 1rem} .benefit-icon{width:28px;height:28px;font-size:0.875rem} .benefit-item span{font-size:0.9375rem} .content-block h3{font-size:1.5rem} .bold-statement-large{font-size:1.125rem} .coming-soon-section{padding:4rem 0} .coming-soon-grid{grid-template-columns:1fr;gap:2rem;text-align:center} .coming-soon-icon{justify-content:center} .coming-soon-content{text-align:center} .coming-soon-content h2{text-align:center} .app-store-badges{justify-content:center} .premium-cta-section{padding:4rem 0} .premium-cta-content{text-align:center} .hero{padding:10rem 0 6rem;min-height:auto} .hero-grid{grid-template-columns:1fr;gap:3rem;text-align:center} .hero-text-content{text-align:center} .hero-image-content{order:-1} .hero-image-wrapper{max-width:100%} .hero-main-image{width:100%;height:auto} .hero-stats{flex-direction:column;justify-content:center;gap:1.5rem;align-items:center} .stat-item{text-align:center;min-width:auto;width:100%;max-width:200px} .stat-number{font-size:2.25rem} .stat-label{font-size:0.875rem} .hero-cta{flex-direction:column;justify-content:center;gap:1rem} .hero-badge{font-size:0.8rem;padding:0.5rem 1.25rem} .how-it-works-content{grid-template-columns:1fr;gap:2rem} .how-it-works-image{height:300px} .partners-grid{grid-template-columns:repeat(3, 1fr);gap:1.5rem} .bold-statement{font-size:1.125rem} .bold-statement-large{font-size:1.25rem} .section-header{flex-direction:column;gap:1rem;text-align:center;margin-bottom:3rem} .section-number{font-size:3rem;min-width:auto} .premium-grid{gap:3rem} .premium-image{height:300px} .premium-cta-text h2{font-size:2rem} .premium-cta-buttons{flex-direction:column;align-items:center} .premium-cta-buttons .btn{width:100%;max-width:300px} .premium-section{padding:5rem 0} .footer-content{grid-template-columns:1fr;gap:3rem;text-align:center} .footer-brand{max-width:100%;align-items:center} .footer-logo-img{height:70px} .footer-tagline{font-size:1.125rem} .footer-description{font-size:0.875rem} .footer-heading{font-size:1rem} .footer-nav{align-items:center} .footer-contact{align-items:center} .footer-contact li{justify-content:center} .footer-bottom{flex-direction:column;gap:1rem;text-align:center} .footer-legal{justify-content:center} } @media (max-width:480px){.hero h1{font-size:2rem} .hero-tagline{font-size:1.125rem} .hero-description{font-size:1rem} .section-header-modern h2{font-size:1.75rem} .section-subtitle{font-size:1rem} .stat-number{font-size:1.875rem} .stat-label{font-size:0.8rem} .step-content h3{font-size:1.5rem} .content-block h3{font-size:1.375rem} .logo-img{height:45px;max-width:140px} .coming-soon-content h2{font-size:1.75rem} .coming-soon-description{font-size:1rem} .app-logo-large{width:120px;height:120px} .footer{padding:3rem 0 1.5rem} .footer-content{gap:2.5rem} .footer-logo-img{height:70px} .footer-tagline{font-size:1rem} .footer-description{font-size:0.8125rem} .footer-bottom{flex-direction:column;gap:0.75rem} .footer-legal{flex-wrap:wrap;justify-content:center} } @media (min-width:769px) and (max-width:1024px){.nav-links{gap:1.5rem} .nav-links a{font-size:0.95rem} .hero h1{font-size:3rem} .container{padding:0 2rem} .two-column{gap:3rem} .three-column{grid-template-columns:repeat(2, 1fr);gap:2rem} .partners-grid{grid-template-columns:repeat(4, 1fr);gap:2rem} .hero-stats{gap:3rem} .hero-grid{gap:3rem} .how-it-works-content{grid-template-columns:1fr;gap:3rem} .how-it-works-modern{grid-template-columns:1fr;gap:3rem} .how-it-works-image-modern{height:400px} .customers-modern-grid, .vendors-modern-grid{grid-template-columns:1fr;gap:3rem} .customers-image-wrapper .image-container, .vendors-image-wrapper .image-container{height:400px} .benefits-grid{grid-template-columns:1fr 1fr;gap:1rem} .how-it-works-image{height:350px} .section-header{gap:1.5rem} .section-header-modern h2{font-size:2.25rem} .section-number{font-size:3.5rem} .logo-img{max-width:180px} .footer-content{grid-template-columns:1.5fr 1fr 1.5fr;gap:3rem} .footer-logo-img{height:70px} .premium-grid{gap:4rem} .premium-image{height:400px} .premium-cta-text h2{font-size:2.5rem} } .dark-theme .section{background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 30%, var(--bg-primary) 100%) !important} .dark-theme .section-alt{background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%) !important} .dark-theme .hero{background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 30%, var(--bg-tertiary) 60%, var(--bg-primary) 100%) !important} .dark-theme .page-hero-modern{background:var(--bg-secondary) !important} .dark-theme .page-hero-content h1, .dark-theme .page-hero-subtitle{color:var(--text-primary) !important} .dark-theme .feature-card, .dark-theme .card, .dark-theme .premium-cta-content{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)} .dark-theme .feature-card h3, .dark-theme .card h3{color:var(--text-primary)} .dark-theme .feature-card p, .dark-theme .card p{color:var(--text-secondary)} .dark-theme .section-title, .dark-theme h1, .dark-theme h2, .dark-theme h3{color:var(--text-primary)} .dark-theme .hero-tagline, .dark-theme .hero-description, .dark-theme p{color:var(--text-secondary)} .dark-theme .footer{background:var(--bg-secondary);border-top-color:var(--border-color)} .dark-theme .footer-heading{color:var(--text-primary)} .dark-theme .footer-nav a, .dark-theme .footer-contact span{color:var(--text-secondary)} .dark-theme .footer-nav a:hover{color:var(--color-orange)} .dark-theme .footer-tagline, .dark-theme .footer-description{color:var(--text-secondary)} .dark-theme .btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color)} .dark-theme .btn-secondary:hover{background:var(--bg-secondary)} .dark-theme .coming-soon-section{background:linear-gradient(135deg, #014a81 0%, #ff3008 30%, #014a81 60%, #ff3008 100%) !important;background-size:200% 200% !important;animation:britishGradient 8s ease infinite !important} .dark-theme .coming-soon-section h2, .dark-theme .coming-soon-title{color:#ffffff !important} .dark-theme .coming-soon-description{color:rgba(255, 255, 255, 0.9) !important} .light-theme .coming-soon-section{background:linear-gradient(135deg, #014a81 0%, #ff3008 30%, #014a81 60%, #ff3008 100%) !important;background-size:200% 200% !important;animation:britishGradient 8s ease infinite !important} .light-theme .coming-soon-section h2, .light-theme .coming-soon-title{color:#ffffff !important} .light-theme .coming-soon-description{color:rgba(255, 255, 255, 0.9) !important} .dark-theme .stat-number{color:var(--text-primary)} .dark-theme .stat-label{color:var(--text-tertiary)} .dark-theme input, .dark-theme textarea, .dark-theme select{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-primary)} .dark-theme input::placeholder, .dark-theme textarea::placeholder{color:var(--text-tertiary)} .dark-theme .nav-links a.active{color:var(--color-orange)} .dark-theme .contact-info-card{background:var(--bg-secondary);border-color:var(--border-color)} .dark-theme .contact-info-card h3{color:var(--text-primary)} .dark-theme .contact-info-card p{color:var(--text-secondary)} .dark-theme .bold-statement, .dark-theme .bold-statement-large, .dark-theme .emphasis{color:var(--text-primary) !important} .dark-theme .section-subtitle{color:var(--text-secondary) !important} .dark-theme .hero-badge{background:linear-gradient(135deg, rgba(255, 48, 8, 0.15) 0%, rgba(255, 48, 8, 0.08) 100%) !important;border-color:rgba(255, 48, 8, 0.3) !important;color:var(--color-orange) !important} .dark-theme .feature-item h3, .dark-theme .value-item h3{color:var(--text-primary) !important} .dark-theme .feature-item p, .dark-theme .value-item p{color:var(--text-secondary) !important} .dark-theme .premium-cta-section{background:var(--bg-secondary) !important} .dark-theme .premium-cta-text h2, .dark-theme .premium-cta-text p{color:var(--text-primary) !important} .dark-theme .coming-soon-section h2{color:var(--text-primary) !important} .dark-theme .hero-stats{border-color:var(--border-color) !important} .dark-theme .value-proposition h3, .dark-theme .value-proposition .bold-statement-large{color:var(--text-primary) !important} .dark-theme .value-proposition p{color:var(--text-secondary) !important} .dark-theme .vendor-onboarding{background:var(--bg-secondary) !important} .dark-theme .vendor-onboarding h2, .dark-theme .vendor-onboarding p{color:var(--text-primary) !important} .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6{color:var(--text-primary) !important} .dark-theme p, .dark-theme li, .dark-theme span:not(.badge-icon){color:var(--text-secondary) !important} .dark-theme .hero h1{color:var(--text-primary) !important} .dark-theme .hero-tagline{color:var(--text-secondary) !important} .dark-theme .hero-description{color:var(--text-secondary) !important} .dark-theme a:not(.btn):not(.nav-links a){color:var(--color-orange) !important} .dark-theme a:not(.btn):not(.nav-links a):hover{color:var(--color-orange-dark) !important} .dark-theme .highlight-text{color:var(--color-orange) !important} .dark-theme .section-title{color:var(--text-primary) !important} .dark-theme .section-subtitle{color:var(--text-secondary) !important} .dark-theme .premium-section{background:var(--bg-secondary) !important} .dark-theme .two-column, .dark-theme .three-column{color:var(--text-primary)} .dark-theme .value-section h2, .dark-theme .value-section h3{color:var(--text-primary) !important} .dark-theme .value-section p{color:var(--text-secondary) !important} .hero-headline{font-size:4.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-0.03em;animation:fadeInUp 0.8s ease-out 0.2s both} .hero-headline .highlight-text{background:linear-gradient(135deg, var(--color-orange) 0%, var(--color-blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;position:relative} .pulse-badge{animation:pulseBadge 2s ease-in-out infinite} @keyframes pulseBadge{0%, 100%{transform:scale(1);box-shadow:0 2px 8px rgba(255, 48, 8, 0.2)} 50%{transform:scale(1.02);box-shadow:0 4px 16px rgba(255, 48, 8, 0.3)} } .hero-cta-primary{position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .hero-cta-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition:left 0.5s} .hero-cta-primary:hover::before{left:100%} .hero-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255, 48, 8, 0.4)} .hero-cta-secondary{transition:all 0.3s ease} .hero-cta-secondary:hover{transform:translateX(4px);background:var(--bg-tertiary)} .stat-item-animated{transition:transform 0.3s ease} .stat-item-animated:hover{transform:translateY(-4px)} .stat-number{transition:all 0.3s ease} .app-badge-interactive{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;position:relative;overflow:hidden} .app-badge-interactive::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);transition:left 0.5s} .app-badge-interactive:hover::before{left:100%} .app-badge-interactive:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(0, 0, 0, 0.15)} .app-badge-content{display:flex;align-items:center;padding:1rem 1.5rem} .app-badge-label{font-size:0.75rem;opacity:0.8;margin-bottom:0.25rem} .app-badge-name{font-size:1.25rem;font-weight:600} .btn-arrow{display:inline-flex;align-items:center;gap:0.5rem;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .btn-arrow svg{transition:transform 0.3s ease} .btn-arrow:hover svg{transform:translateX(4px)} .btn-arrow:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255, 48, 8, 0.3)} .btn-pulse{position:relative;animation:pulseButton 2s ease-in-out infinite} @keyframes pulseButton{0%, 100%{box-shadow:0 4px 16px rgba(255, 48, 8, 0.3)} 50%{box-shadow:0 4px 24px rgba(255, 48, 8, 0.5)} } .step-card{transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);position:relative} .step-card:hover{transform:translateY(-8px)} .step-card::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:20px;padding:2px;background:linear-gradient(135deg, var(--color-orange), var(--color-blue));-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.3s ease} .step-card:hover::after{opacity:1} .btn-white{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .btn-white:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(255, 255, 255, 0.3);background:rgba(255, 255, 255, 0.95) !important} .btn-outline-white{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .btn-outline-white:hover{background:rgba(255, 255, 255, 0.1) !important;border-color:#ffffff !important;transform:translateY(-3px)} .section-header-modern h2{position:relative;display:inline-block} .section-header-modern h2::after{content:'';position:absolute;bottom:-0.5rem;left:0;width:60px;height:4px;background:linear-gradient(90deg, var(--color-orange), var(--color-blue));border-radius:2px;animation:expandLine 0.8s ease-out 0.3s both} @keyframes expandLine{from{width:0} to{width:60px} } .premium-image{transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden} .premium-image:hover{transform:scale(1.05)} .premium-image img{transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)} .premium-image:hover img{transform:scale(1.1)} .vendor-onboarding{position:relative;overflow:hidden} .vendor-onboarding::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);animation:rotateGradient 20s linear infinite;pointer-events:none} @keyframes rotateGradient{from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @media (max-width:768px){.hero-headline{font-size:2.5rem} .app-badge-content{padding:0.75rem 1rem} .app-badge-name{font-size:1rem} } html{scroll-behavior:smooth} .btn:focus-visible, a:focus-visible{outline:3px solid var(--color-orange);outline-offset:2px} .btn.loading{pointer-events:none;opacity:0.7} .btn.loading::after{content:'';position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid currentColor;border-radius:50%;border-top-color:transparent;animation:spin 0.6s linear infinite} @keyframes spin{to{transform:rotate(360deg)} }:root{--color-orange:#ff3008;--color-orange-light:#ff5c3a;--color-orange-dark:#cc2606;--color-blue:#014a81;--color-blue-light:#0165b3;--color-blue-dark:#003a5c;--gradient-primary:linear-gradient(135deg, #ff3008 0%, #ff5c3a 50%, #014a81 100%);--gradient-hero:linear-gradient(135deg, #ff3008 0%, #ff5c3a 25%, #014a81 75%, #0165b3 100%);--gradient-button:linear-gradient(135deg, #ff3008 0%, #ff5c3a 100%);--gradient-button-hover:linear-gradient(135deg, #ff5c3a 0%, #ff3008 100%);--gradient-text:linear-gradient(135deg, #ff3008 0%, #014a81 100%);--gradient-bg:linear-gradient(135deg, rgba(255, 48, 8, 0.1) 0%, rgba(1, 74, 129, 0.1) 100%);--shadow-sm:0 2px 8px rgba(255, 48, 8, 0.15);--shadow-md:0 4px 16px rgba(255, 48, 8, 0.2);--shadow-lg:0 8px 32px rgba(255, 48, 8, 0.25);--shadow-xl:0 16px 64px rgba(255, 48, 8, 0.3);--shadow-glow:0 0 30px rgba(255, 48, 8, 0.4);--shadow-blue:0 8px 32px rgba(1, 74, 129, 0.25)} .hero{background:linear-gradient(135deg, #ffffff 0%, #fff5f2 20%, #f0f7ff 50%, #fff5f2 80%, #ffffff 100%);position:relative} .hero::before{background:radial-gradient(circle, rgba(255, 48, 8, 0.15) 0%, transparent 70%);animation:float 6s ease-in-out infinite} .hero::after{background:radial-gradient(circle, rgba(1, 74, 129, 0.12) 0%, transparent 70%);animation:float 8s ease-in-out infinite reverse} @keyframes float{0%, 100%{transform:translate(0, 0) scale(1)} 50%{transform:translate(20px, -20px) scale(1.1)} } .hero-background-pattern{opacity:0.6;background-image:radial-gradient(circle at 20% 30%, rgba(255, 48, 8, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(1, 74, 129, 0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 92, 58, 0.08) 0%, transparent 60%)} .hero-badge{background:linear-gradient(135deg, rgba(255, 48, 8, 0.15) 0%, rgba(255, 92, 58, 0.1) 100%) !important;border:2px solid rgba(255, 48, 8, 0.25) !important;box-shadow:var(--shadow-sm), 0 0 20px rgba(255, 48, 8, 0.1) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--color-orange) !important;font-weight:700 !important} .badge-icon{background:var(--gradient-button);box-shadow:0 2px 8px rgba(255, 48, 8, 0.3);animation:badgePulse 2s ease-in-out infinite} @keyframes badgePulse{0%, 100%{transform:scale(1);box-shadow:0 2px 8px rgba(255, 48, 8, 0.3)} 50%{transform:scale(1.1);box-shadow:0 4px 16px rgba(255, 48, 8, 0.5)} } .hero-headline{background:linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 20px rgba(255, 48, 8, 0.1)} .hero-headline .highlight-text{background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 10px rgba(255, 48, 8, 0.3));position:relative} .hero-tagline{color:#4a4a4a;font-weight:500;text-shadow:0 1px 3px rgba(0, 0, 0, 0.05)} .hero-description{color:#555555;font-weight:400;line-height:1.9} .btn-primary{background:var(--gradient-button) !important;background-size:200% 200% !important;color:#ffffff !important;border:none !important;box-shadow:var(--shadow-md), 0 0 20px rgba(255, 48, 8, 0.2) !important;position:relative;overflow:hidden;animation:gradientShift 3s ease infinite !important} .btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition:left 0.5s} .btn-primary:hover{background:var(--gradient-button-hover) !important;background-size:200% 200% !important;box-shadow:var(--shadow-lg), 0 0 30px rgba(255, 48, 8, 0.4) !important;transform:translateY(-3px) !important} @keyframes gradientShift{0%, 100%{background-position:0% 50%} 50%{background-position:100% 50%} } .btn-primary:hover::before{left:100%} .btn-primary:active{transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn-secondary{background:#ffffff;color:var(--color-orange);border:2px solid var(--color-orange);box-shadow:var(--shadow-sm);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .btn-secondary:hover{background:var(--color-orange);color:#ffffff;border-color:var(--color-orange);box-shadow:var(--shadow-md);transform:translateY(-2px)} .stat-number{background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(255, 48, 8, 0.2));font-weight:800;letter-spacing:-0.02em} .stat-label{color:#666666;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;font-size:0.8125rem} .hero-stats{border-top:2px solid;border-image:var(--gradient-primary) 1;padding-top:2.5rem} .section-header-modern h2{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;letter-spacing:-0.02em;position:relative;display:inline-block} .section-header-modern h2::after{background:var(--gradient-primary);height:5px;border-radius:3px;box-shadow:0 2px 8px rgba(255, 48, 8, 0.3)} .section-subtitle{color:#555555;font-weight:500;font-size:1.25rem} .feature-card, .step-card{background:#ffffff;border:2px solid rgba(255, 48, 8, 0.1);box-shadow:var(--shadow-sm);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden} .feature-card::before, .step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);transform:scaleX(0);transition:transform 0.4s ease} .feature-card:hover::before, .step-card:hover::before{transform:scaleX(1)} .feature-card:hover, .step-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg), 0 0 30px rgba(255, 48, 8, 0.15);border-color:rgba(255, 48, 8, 0.3)} .hero-main-image{box-shadow:var(--shadow-xl), 0 0 60px rgba(255, 48, 8, 0.2);border:4px solid rgba(255, 255, 255, 0.9);filter:brightness(1.02) contrast(1.05)} .hero-main-image:hover{box-shadow:var(--shadow-xl), var(--shadow-glow);filter:brightness(1.05) contrast(1.08)} .hero-image-glow{background:radial-gradient(circle, rgba(255, 48, 8, 0.3) 0%, rgba(255, 92, 58, 0.2) 30%, rgba(1, 74, 129, 0.15) 60%, transparent 80%);filter:blur(30px);animation:glowPulse 4s ease-in-out infinite} @keyframes glowPulse{0%, 100%{opacity:0.6;transform:translate(-50%, -50%) scale(1)} 50%{opacity:0.9;transform:translate(-50%, -50%) scale(1.05)} } .benefits-grid{display:grid !important;grid-template-columns:repeat(2, 1fr) !important;gap:1.5rem !important;margin:2.5rem 0 !important;width:100% !important} .benefit-item-hover{background:linear-gradient(135deg, rgba(255, 48, 8, 0.05) 0%, rgba(1, 74, 129, 0.05) 100%);border:1.5px solid rgba(255, 48, 8, 0.15);border-radius:12px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);margin:0 !important;padding:1.25rem 1.5rem !important;width:100% !important;box-sizing:border-box !important;display:flex !important;align-items:center !important;gap:1rem !important} .benefit-item-hover:hover{background:linear-gradient(135deg, rgba(255, 48, 8, 0.12) 0%, rgba(1, 74, 129, 0.12) 100%);border-color:rgba(255, 48, 8, 0.4);box-shadow:var(--shadow-md);transform:translateX(8px) translateY(-2px)} .benefit-item-hover .benefit-icon{font-size:1.75rem;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));transition:transform 0.3s ease;flex-shrink:0} .benefit-item-hover:hover .benefit-icon{transform:scale(1.2) rotate(5deg)} .benefit-item-hover span{color:#4a4a4a;font-weight:600;font-size:1rem;flex:1} .app-badge-interactive{background:linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);border:2px solid rgba(255, 255, 255, 0.1);box-shadow:var(--shadow-md);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);border-radius:16px} .app-badge-interactive:hover{background:linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);border-color:rgba(255, 48, 8, 0.5);box-shadow:var(--shadow-lg), 0 0 30px rgba(255, 48, 8, 0.2);transform:translateY(-6px) scale(1.03)} .app-badge-name{color:#ffffff;font-weight:700;text-shadow:0 2px 4px rgba(0, 0, 0, 0.3)} .app-badge-label{color:rgba(255, 255, 255, 0.9)} .app-badge-content{color:#ffffff} .light-theme .app-badge-interactive{background:rgba(255, 255, 255, 0.95) !important;border:2px solid rgba(255, 255, 255, 0.3) !important;box-shadow:0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .light-theme .app-badge-interactive:hover{background:rgba(255, 255, 255, 1) !important;border-color:rgba(255, 255, 255, 0.5) !important;box-shadow:0 12px 48px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 48, 8, 0.3) !important;transform:translateY(-6px) scale(1.03)} .light-theme .app-badge-name{color:#1a1a1a !important;text-shadow:none !important;font-weight:700} .light-theme .app-badge-label{color:rgba(26, 26, 26, 0.7) !important} .light-theme .app-badge-content{color:#1a1a1a !important} .light-theme .app-badge-content svg{color:#1a1a1a !important} .light-theme .badge-label{color:rgba(255, 255, 255, 0.95) !important;text-shadow:0 1px 3px rgba(0, 0, 0, 0.3) !important} .dark-theme .badge-label{color:rgba(255, 255, 255, 0.95) !important;text-shadow:0 1px 3px rgba(0, 0, 0, 0.3) !important} .vendor-onboarding{background:var(--gradient-hero) !important;position:relative;overflow:hidden} .vendor-onboarding::before{background:radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);animation:rotateGradient 15s linear infinite} .vendor-onboarding::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);pointer-events:none} .btn-white{background:#ffffff !important;color:var(--color-blue) !important;box-shadow:0 8px 32px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);font-weight:700;border:2px solid #ffffff} .btn-white:hover{background:rgba(255, 255, 255, 0.95) !important;box-shadow:0 12px 48px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.3);transform:translateY(-4px) scale(1.02)} .btn-outline-white{border:2px solid rgba(255, 255, 255, 0.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .btn-outline-white:hover{background:rgba(255, 255, 255, 0.15) !important;border-color:#ffffff !important;box-shadow:0 8px 32px rgba(255, 255, 255, 0.2)} .bold-statement-large{color:#1a1a1a;font-weight:800;line-height:1.4;font-size:1.5rem;letter-spacing:-0.01em;text-shadow:0 1px 3px rgba(0, 0, 0, 0.05)} .bold-statement{color:#2a2a2a;font-weight:600;font-size:1.125rem;line-height:1.7} h3{color:#1a1a1a;font-weight:700;letter-spacing:-0.01em} p{color:#4a4a4a;font-weight:400;line-height:1.8} .emphasis{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .section{background:linear-gradient(135deg, #ffffff 0%, #fafafa 20%, #f5f5f5 40%, #fafafa 60%, #ffffff 80%, #fafafa 100%) !important;position:relative} .section-alt{background:linear-gradient(135deg, #f8f9fa 0%, #f0f4f8 30%, #e8f0f5 50%, #f0f4f8 70%, #f8f9fa 100%) !important;position:relative} .section-alt::before{background:var(--gradient-primary);height:5px;box-shadow:0 2px 8px rgba(255, 48, 8, 0.3)} .coming-soon-section{} .coming-soon-title{color:#ffffff !important;font-weight:800} .coming-soon-description{color:rgba(255, 255, 255, 0.9) !important;font-weight:500} .step-number{background:var(--gradient-button);color:#ffffff;box-shadow:var(--shadow-md);font-weight:800;border:3px solid rgba(255, 255, 255, 0.9)} .feature-icon{background:linear-gradient(135deg, rgba(255, 48, 8, 0.15) 0%, rgba(1, 74, 129, 0.15) 100%);border:2px solid rgba(255, 48, 8, 0.2);box-shadow:var(--shadow-sm)} a:not(.btn){color:var(--color-orange);font-weight:600;position:relative;transition:all 0.3s ease} a:not(.btn)::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--gradient-primary);transition:width 0.3s ease} a:not(.btn):hover::after{width:100%} a:not(.btn):hover{color:var(--color-blue)} .footer{background:linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);border-top:3px solid;border-image:var(--gradient-primary) 1} @media (max-width:768px){.hero-headline{font-size:2.75rem} .stat-number{font-size:2.25rem} .btn-large{padding:0.875rem 2rem;font-size:1rem} } .dark-theme .hero-headline{background:linear-gradient(135deg, #f5f5f5 0%, #ffffff 50%, #f5f5f5 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .dark-theme .hero-tagline, .dark-theme .hero-description{color:var(--text-secondary)} .dark-theme .section-header-modern h2{background:linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .dark-theme .bold-statement-large{color:var(--text-primary)} .dark-theme .bold-statement{color:var(--text-secondary)} .dark-theme .section-subtitle{color:var(--text-secondary)} .premium-cta-section{background:linear-gradient(135deg, #ffffff 0%, #f8f9fa 25%, #f0f4f8 50%, #f8f9fa 75%, #ffffff 100%) !important;position:relative;overflow:hidden} .premium-cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%, rgba(255, 48, 8, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(1, 74, 129, 0.05) 0%, transparent 50%);pointer-events:none} .content-block h3{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;font-size:2rem;margin-bottom:1.5rem} .content-block p{color:#4a4a4a;font-size:1.125rem;line-height:1.9;margin-bottom:1.5rem} .step-content h3{color:#1a1a1a;font-weight:700;font-size:1.75rem;margin-bottom:1rem} .step-content p{color:#555555;font-size:1rem;line-height:1.8} .vendor-onboarding > .container > div > div[style*="background"]{background:rgba(255, 255, 255, 0.2) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border:2px solid rgba(255, 255, 255, 0.3) !important;box-shadow:0 8px 32px rgba(0, 0, 0, 0.1) !important;transition:all 0.3s ease !important} .vendor-onboarding > .container > div > div[style*="background"]:hover{background:rgba(255, 255, 255, 0.25) !important;transform:translateY(-4px) !important;box-shadow:0 12px 48px rgba(0, 0, 0, 0.15) !important} .image-overlay{background:linear-gradient(135deg, rgba(255, 48, 8, 0.1) 0%, rgba(1, 74, 129, 0.1) 100%);opacity:0.6;transition:opacity 0.3s ease} .premium-image:hover .image-overlay{opacity:0.4} .section{border-top:1px solid rgba(255, 48, 8, 0.1);border-bottom:1px solid rgba(1, 74, 129, 0.1)} h1{font-size:3.5rem;font-weight:900;letter-spacing:-0.04em} h2{font-size:2.75rem;font-weight:800;letter-spacing:-0.03em} h3{font-size:2rem;font-weight:700;letter-spacing:-0.02em} a:not(.btn):not(.nav-links a){color:var(--color-orange);font-weight:600;transition:all 0.3s ease} a:not(.btn):not(.nav-links a):hover{color:var(--color-blue);text-shadow:0 1px 3px rgba(255, 48, 8, 0.2)} .how-it-works-redesigned{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-top:4rem} .how-it-works-grid{display:flex;flex-direction:column;gap:3rem} .step-card-redesigned{position:relative;padding:2.5rem;background:#ffffff;border-radius:24px;border:2px solid rgba(255, 48, 8, 0.1);box-shadow:0 4px 20px rgba(0, 0, 0, 0.06);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden} .step-card-redesigned::before{content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(180deg, #ff3008 0%, #014a81 100%);transform:scaleY(0);transition:transform 0.4s ease} .step-card-redesigned:hover::before{transform:scaleY(1)} .step-card-redesigned:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(255, 48, 8, 0.2);border-color:rgba(255, 48, 8, 0.3)} .step-number-redesigned{position:absolute;top:1.5rem;right:1.5rem;font-size:4rem;font-weight:900;background:linear-gradient(135deg, #ff3008 0%, #014a81 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0.1;line-height:1;z-index:0} .step-icon-wrapper{position:relative;z-index:1;margin-bottom:1.5rem} .step-icon-circle{width:80px;height:80px;background:linear-gradient(135deg, rgba(255, 48, 8, 0.1) 0%, rgba(1, 74, 129, 0.1) 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;color:#ff3008;border:2px solid rgba(255, 48, 8, 0.2);transition:all 0.3s ease} .step-card-redesigned:hover .step-icon-circle{background:linear-gradient(135deg, #ff3008 0%, #014a81 100%);color:#ffffff;transform:scale(1.1) rotate(5deg);box-shadow:0 8px 24px rgba(255, 48, 8, 0.3)} .step-content-redesigned{position:relative;z-index:1} .step-content-redesigned h3{font-size:1.75rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.02em} .step-content-redesigned p{color:#555555;font-size:1.0625rem;line-height:1.8;font-weight:400} .how-it-works-image-redesigned{position:relative;height:600px;border-radius:28px;overflow:hidden} .image-wrapper-premium{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(255, 48, 8, 0.2)} .image-wrapper-premium .section-image{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)} .image-wrapper-premium:hover .section-image{transform:scale(1.08)} .image-gradient-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255, 48, 8, 0.1) 0%, rgba(1, 74, 129, 0.1) 50%, transparent 100%);pointer-events:none} .floating-badge{position:absolute;bottom:2rem;left:2rem;background:rgba(255, 255, 255, 0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:1rem 1.5rem;border-radius:16px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.15);border:2px solid rgba(255, 48, 8, 0.2);font-weight:700;color:#ff3008;font-size:1rem;animation:floatBadge 3s ease-in-out infinite} @keyframes floatBadge{0%, 100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @media (max-width:1024px){.how-it-works-redesigned{grid-template-columns:1fr;gap:3rem} .how-it-works-image-redesigned{height:400px;order:-1} .how-it-works-grid{gap:2rem} } .dark-theme .step-card-redesigned{background:var(--bg-secondary) !important;border-color:var(--border-color) !important;box-shadow:0 4px 20px rgba(0, 0, 0, 0.3) !important} .dark-theme .step-card-redesigned:hover{box-shadow:0 12px 40px rgba(255, 48, 8, 0.3) !important;border-color:rgba(255, 48, 8, 0.4) !important} .dark-theme .step-content-redesigned h3{background:linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important} .dark-theme .step-content-redesigned p{color:var(--text-secondary) !important} .dark-theme .step-number-redesigned{background:linear-gradient(135deg, #ff3008 0%, #014a81 100%) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;opacity:0.15 !important} .dark-theme .step-icon-circle{background:linear-gradient(135deg, rgba(255, 48, 8, 0.2) 0%, rgba(1, 74, 129, 0.2) 100%) !important;border-color:rgba(255, 48, 8, 0.3) !important} .dark-theme .floating-badge{background:rgba(26, 29, 36, 0.95) !important;color:var(--color-orange) !important;border-color:rgba(255, 48, 8, 0.3) !important} @media (max-width:768px){.step-card-redesigned{padding:2rem} .step-number-redesigned{font-size:3rem} .step-icon-circle{width:64px;height:64px} .step-content-redesigned h3{font-size:1.5rem} } .vendor-onboarding-section{background:linear-gradient(135deg, #014a81 0%, #ff3008 100%) !important;color:#ffffff;padding:6rem 0;position:relative;overflow:hidden} .vendor-onboarding-section::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);animation:rotateGradient 20s linear infinite;pointer-events:none} .vendor-onboarding-section::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);pointer-events:none} @keyframes rotateGradient{from{transform:rotate(0deg)} to{transform:rotate(360deg)} } .vendor-onboarding-header{text-align:center;margin-bottom:3rem;position:relative;z-index:1} .vendor-onboarding-title{color:#ffffff !important;font-size:3rem;font-weight:800;margin-bottom:1.5rem;text-shadow:0 2px 10px rgba(0, 0, 0, 0.2);letter-spacing:-0.02em} .vendor-onboarding-subtitle{color:rgba(255, 255, 255, 0.95) !important;font-size:1.5rem;max-width:900px;margin:0 auto;font-weight:400;line-height:1.6} .vendor-onboarding-content{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1} .vendor-stats-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:2rem;margin-bottom:3rem} .vendor-stat-card{background:rgba(255, 255, 255, 0.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:2rem;border-radius:16px;border:2px solid rgba(255, 255, 255, 0.25);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 8px 32px rgba(0, 0, 0, 0.1)} .vendor-stat-card:hover{background:rgba(255, 255, 255, 0.2);border-color:rgba(255, 255, 255, 0.4);transform:translateY(-4px);box-shadow:0 12px 48px rgba(0, 0, 0, 0.15)} .vendor-stat-number{font-size:2.5rem;font-weight:700;margin-bottom:0.5rem;color:#ffffff;text-shadow:0 2px 8px rgba(0, 0, 0, 0.2)} .vendor-stat-label{font-size:1rem;color:rgba(255, 255, 255, 0.9);font-weight:500} .vendor-onboarding-cta{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem} .vendor-onboarding-footer{margin-top:2rem;color:rgba(255, 255, 255, 0.85) !important;font-size:1rem;font-weight:400} .vendor-onboarding-section .btn-white{background:#ffffff !important;color:#014a81 !important;border:2px solid #ffffff !important;font-weight:700;padding:1.25rem 3rem;box-shadow:0 8px 32px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2) !important;background-size:100% 100% !important;animation:none !important} .vendor-onboarding-section .btn-white span, .vendor-onboarding-section .btn-white svg{color:#014a81 !important} .vendor-onboarding-section .btn-white svg path{stroke:#014a81 !important;fill:none !important} .vendor-onboarding-section .btn-white:hover{background:rgba(255, 255, 255, 0.95) !important;color:#014a81 !important;transform:translateY(-2px);box-shadow:0 12px 48px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 255, 255, 0.3) !important} .vendor-onboarding-section .btn-white:hover span, .vendor-onboarding-section .btn-white:hover svg{color:#014a81 !important} .vendor-onboarding-section .btn-white:hover svg path{stroke:#014a81 !important} .vendor-onboarding-section .btn-outline-white{background:transparent !important;color:#ffffff !important;border:2px solid rgba(255, 255, 255, 0.8) !important;padding:1.25rem 3rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .vendor-onboarding-section .btn-outline-white span, .vendor-onboarding-section .btn-outline-white svg{color:#ffffff !important} .vendor-onboarding-section .btn-outline-white svg path{stroke:#ffffff !important;fill:#ffffff !important} .vendor-onboarding-section .btn-outline-white:hover{background:rgba(255, 255, 255, 0.1) !important;border-color:#ffffff !important;color:#ffffff !important;transform:translateY(-2px);box-shadow:0 8px 32px rgba(255, 255, 255, 0.2) !important} .vendor-onboarding-section .btn-outline-white:hover span, .vendor-onboarding-section .btn-outline-white:hover svg{color:#ffffff !important} .vendor-onboarding-section .btn-outline-white:hover svg path{stroke:#ffffff !important;fill:#ffffff !important} .dark-theme .vendor-onboarding-section{background:linear-gradient(135deg, #014a81 0%, #ff3008 100%) !important} .dark-theme .vendor-onboarding-title, .dark-theme .vendor-onboarding-subtitle, .dark-theme .vendor-stat-number, .dark-theme .vendor-stat-label, .dark-theme .vendor-onboarding-footer{color:#ffffff !important} .dark-theme .vendor-onboarding-section .btn-white{background:#ffffff !important;color:#014a81 !important;border:2px solid #ffffff !important} .dark-theme .vendor-onboarding-section .btn-white span, .dark-theme .vendor-onboarding-section .btn-white svg{color:#014a81 !important} .dark-theme .vendor-onboarding-section .btn-white svg path{stroke:#014a81 !important} .light-theme .vendor-onboarding-section .btn-white{background:#ffffff !important;color:#014a81 !important;border:2px solid #ffffff !important} .light-theme .vendor-onboarding-section .btn-white span, .light-theme .vendor-onboarding-section .btn-white svg{color:#014a81 !important} .light-theme .vendor-onboarding-section .btn-white svg path{stroke:#014a81 !important} .dark-theme .vendor-onboarding-section .btn-outline-white, .light-theme .vendor-onboarding-section .btn-outline-white{background:transparent !important;color:#ffffff !important;border:2px solid rgba(255, 255, 255, 0.8) !important} .dark-theme .vendor-onboarding-section .btn-outline-white span, .dark-theme .vendor-onboarding-section .btn-outline-white svg, .light-theme .vendor-onboarding-section .btn-outline-white span, .light-theme .vendor-onboarding-section .btn-outline-white svg{color:#ffffff !important} .dark-theme .vendor-onboarding-section .btn-outline-white svg path, .light-theme .vendor-onboarding-section .btn-outline-white svg path{stroke:#ffffff !important;fill:#ffffff !important} @media (max-width:768px){.vendor-onboarding-title{font-size:2.25rem} .vendor-onboarding-subtitle{font-size:1.25rem} .vendor-stats-grid{grid-template-columns:1fr;gap:1.5rem} .vendor-onboarding-cta{flex-direction:column;align-items:stretch} .vendor-onboarding-cta .btn{width:100%;justify-content:center} } .coming-soon-section{padding:5rem 0;background:linear-gradient(135deg, #014a81 0%, #ff3008 30%, #014a81 60%, #ff3008 100%);background-size:200% 200%;animation:britishGradient 8s ease infinite;position:relative;overflow:hidden} @keyframes britishGradient{0%, 100%{background-position:0% 50%} 50%{background-position:100% 50%} } .coming-soon-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px );pointer-events:none;z-index:0} .coming-soon-wrapper{display:grid;grid-template-columns:200px 1fr;gap:4rem;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:1} .coming-soon-icon-wrapper{display:flex;justify-content:center;align-items:center} .app-logo-large{width:160px;height:160px;border-radius:35px;box-shadow:0 25px 70px rgba(0, 0, 0, 0.4);background:#ffffff;padding:15px;object-fit:contain;animation:float 3s ease-in-out infinite} @keyframes float{0%, 100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } .coming-soon-content-wrapper{position:relative;z-index:1} .coming-soon-title{color:#ffffff !important;font-size:2.5rem;font-weight:800;margin-bottom:1.25rem;margin-top:0;text-shadow:0 2px 10px rgba(0, 0, 0, 0.2);letter-spacing:-0.02em;line-height:1.2} .coming-soon-description{color:rgba(255, 255, 255, 0.95) !important;font-size:1.125rem;margin-bottom:2.5rem;margin-top:0;line-height:1.6;font-weight:400;max-width:none} .app-store-badges-wrapper{display:flex;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap} .app-badge-wrapper{display:flex;flex-direction:column;align-items:flex-start} .app-badge{display:flex;flex-direction:column;gap:0.75rem;position:relative} .app-badge-content{display:flex;align-items:center;gap:0.75rem;padding:1rem 1.5rem;background:rgba(255, 255, 255, 0.15) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid rgba(255, 255, 255, 0.25) !important;border-radius:16px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 8px 32px rgba(0, 0, 0, 0.15)} .app-badge-content svg{width:24px;height:24px;color:#ffffff;flex-shrink:0} .app-badge-text{display:flex;flex-direction:column} .app-badge-label{font-size:0.75rem;color:rgba(255, 255, 255, 0.85) !important;margin-bottom:0.25rem;font-weight:500;line-height:1.2} .app-badge-name{font-size:1.25rem;font-weight:700;color:#ffffff !important;line-height:1.2} .app-badge:hover .app-badge-content{background:rgba(255, 255, 255, 0.25) !important;border-color:rgba(255, 255, 255, 0.4) !important;transform:translateY(-2px);box-shadow:0 12px 48px rgba(0, 0, 0, 0.2)} .badge-label{font-size:0.75rem;color:#ffffff !important;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;text-shadow:0 2px 8px rgba(0, 0, 0, 0.4);margin-top:0.5rem;text-align:center;padding:0.25rem 0.75rem;background:rgba(255, 255, 255, 0.15);border-radius:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.2)} .coming-soon-cta{margin-top:1.5rem} @media (max-width:1024px){.coming-soon-wrapper{grid-template-columns:180px 1fr;gap:3rem} .app-logo-large{width:140px;height:140px} } @media (max-width:768px){.coming-soon-section{padding:4rem 0} .coming-soon-wrapper{grid-template-columns:1fr;gap:2.5rem;text-align:center} .coming-soon-icon-wrapper{justify-content:center} .coming-soon-content-wrapper{text-align:center} .coming-soon-title{font-size:2rem;text-align:center} .coming-soon-description{text-align:center;font-size:1rem} .app-store-badges-wrapper{justify-content:center} .app-badge-wrapper{align-items:center} .app-logo-large{width:120px;height:120px} } .dark-theme .coming-soon-section, .light-theme .coming-soon-section{background:linear-gradient(135deg, #014a81 0%, #ff3008 30%, #014a81 60%, #ff3008 100%) !important;background-size:200% 200% !important;animation:britishGradient 8s ease infinite !important} .dark-theme .coming-soon-title, .light-theme .coming-soon-title{color:#ffffff !important} .dark-theme .coming-soon-description, .light-theme .coming-soon-description{color:rgba(255, 255, 255, 0.95) !important} .coming-soon-section .app-badge-interactive{background:transparent !important;border:none !important;box-shadow:none !important} .coming-soon-section .app-badge-interactive .app-badge-content{background:rgba(255, 255, 255, 0.15) !important;border:2px solid rgba(255, 255, 255, 0.25) !important;box-shadow:0 8px 32px rgba(0, 0, 0, 0.15) !important} .light-theme .coming-soon-section .app-badge-interactive .app-badge-content{background:rgba(255, 255, 255, 0.15) !important;border:2px solid rgba(255, 255, 255, 0.25) !important;box-shadow:0 8px 32px rgba(0, 0, 0, 0.15) !important} .dark-theme .coming-soon-section .app-badge-interactive .app-badge-content{background:rgba(255, 255, 255, 0.15) !important;border:2px solid rgba(255, 255, 255, 0.25) !important;box-shadow:0 8px 32px rgba(0, 0, 0, 0.15) !important} .coming-soon-section .app-badge-interactive:hover .app-badge-content{background:rgba(255, 255, 255, 0.25) !important;border-color:rgba(255, 255, 255, 0.4) !important;transform:translateY(-2px) !important;box-shadow:0 12px 48px rgba(0, 0, 0, 0.2) !important} .dark-theme .app-badge-label, .light-theme .app-badge-label{color:rgba(255, 255, 255, 0.85) !important} .dark-theme .app-badge-name, .light-theme .app-badge-name{color:#ffffff !important} .dark-theme .app-badge-content svg, .light-theme .app-badge-content svg{color:#ffffff !important} .dark-theme .badge-label, .light-theme .badge-label{color:#ffffff !important}