{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); color: #ffffff; line-height: 1.6; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Hero Section */ .hero { min-height: 100vh; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23001122;stop-opacity:1" /><stop offset="50%" style="stop-color:%23003366;stop-opacity:1" /><stop offset="100%" style="stop-color:%23000011;stop-opacity:1" /></linearGradient></defs><rect width="1200" height="800" fill="url(%23bg)"/><circle cx="200" cy="150" r="2" fill="%2300ffff" opacity="0.8"><animate attributeName="opacity" values="0.8;0.2;0.8" dur="2s" repeatCount="indefinite"/></circle><circle cx="800" cy="300" r="1.5" fill="%2300ff88" opacity="0.6"><animate attributeName="opacity" values="0.6;0.1;0.6" dur="3s" repeatCount="indefinite"/></circle><circle cx="1000" cy="200" r="1" fill="%23ff0088" opacity="0.7"><animate attributeName="opacity" values="0.7;0.2;0.7" dur="2.5s" repeatCount="indefinite"/></circle><path d="M0,400 Q300,350 600,400 T1200,400" stroke="%2300ffff" stroke-width="1" fill="none" opacity="0.3"/><path d="M0,500 Q400,450 800,500 T1200,500" stroke="%2300ff88" stroke-width="1" fill="none" opacity="0.2"/></svg>'); background-size: cover; background-position: center; display: flex; align-items: center; position: relative; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%); pointer-events: none; } .hero-content { text-align: center; z-index: 2; position: relative; } .hero h1 { font-size: 3.5rem; font-weight: bold; margin-bottom: 20px; background: linear-gradient(45deg, #00ffff, #00ff88, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(0, 255, 255, 0.3); animation: glow 2s ease-in-out infinite alternate; } @keyframes glow { from { text-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } to { text-shadow: 0 0 40px rgba(0, 255, 255, 0.6); } } .hero h2 { font-size: 1.8rem; margin-bottom: 40px; color: #cccccc; font-weight: 300; } .cta-button { display: inline-block; background: linear-gradient(45deg, #00ff88, #00ffff); color: #000000; padding: 18px 40px; font-size: 1.3rem; font-weight: bold; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); text-transform: uppercase; letter-spacing: 1px; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 255, 136, 0.5); background: linear-gradient(45deg, #00ffff, #00ff88); } /* Section Styles */ .section { padding: 80px 0; position: relative; } .section-title { font-size: 2.5rem; text-align: center; margin-bottom: 50px; color: #00ffff; text-shadow: 0 0 20px rgba(0, 255, 255, 0.3); } /* Problem Section */ .problem { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } .problem-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .problem-text ul { list-style: none; padding: 0; } .problem-text li { font-size: 1.2rem; margin-bottom: 20px; padding-left: 30px; position: relative; color: #ff6b6b; } .problem-text li::before { content: '✗'; position: absolute; left: 0; color: #ff4757; font-weight: bold; font-size: 1.5rem; } .problem-image { text-align: center; } .problem-image img { max-width: 100%; border-radius: 15px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } /* Solution Section */ .solution { background: linear-gradient(135deg, #16213e 0%, #0f3460 100%); } .solution-text { text-align: center; max-width: 800px; margin: 0 auto; } .solution-text p { font-size: 1.3rem; margin-bottom: 30px; color: #cccccc; } /* Authority Section */ .authority { background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%); } .authority-content { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; max-width: 800px; margin: 0 auto; } .authority-image img { width: 200px; height: 200px; border-radius: 50%; border: 4px solid #00ffff; box-shadow: 0 0 30px rgba(0, 255, 255, 0.3); } .authority-text p { font-size: 1.2rem; color: #cccccc; } /* Benefits Section */ .benefits { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } .benefits-list { max-width: 800px; margin: 0 auto; } .benefits-list ul { list-style: none; padding: 0; } .benefits-list li { font-size: 1.3rem; margin-bottom: 25px; padding-left: 40px; position: relative; color: #ffffff; } .benefits-list li::before { content: '✓'; position: absolute; left: 0; color: #00ff88; font-weight: bold; font-size: 1.8rem; } /* Final CTA Section */ .final-cta { background: linear-gradient(135deg, #16213e 0%, #0a0a0a 100%); text-align: center; } .final-cta h2 { font-size: 2.8rem; margin-bottom: 20px; color: #ff6b6b; } .final-cta h3 { font-size: 1.5rem; margin-bottom: 40px; color: #cccccc; } .final-cta .cta-button { font-size: 1.5rem; padding: 25px 50px; } /* Responsive Design */ @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .hero h2 { font-size: 1.3rem; } .problem-content, .authority-content { grid-template-columns: 1fr; text-align: center; } .section-title { font-size: 2rem; } .cta-button { padding: 15px 30px; font-size: 1.1rem; } .final-cta .cta-button { font-size: 1.2rem; padding: 20px 40px; } } /* Floating particles animation */ .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; width: 2px; height: 2px; background: #00ffff; border-radius: 50%; animation: float 6s infinite linear; } @keyframes float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } }