{} *{} /*endBaseStyles*/ #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; } :root { --primary-color: #2563eb; --accent-color: #10b981; --dark-bg: #0f172a; --text-light: #f8fafc; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; line-height: 1.6; color: #333; background-color: #fff; } .container { width: 90%; max-width: 1100px; margin: auto; padding: 20px; } /* Hero Section */ header { background: linear-gradient(135deg, var(--dark-bg) 0%, #1e293b 100%); color: var(--text-light); padding: 80px 0; text-align: center; } h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.2; } .subheadline { font-size: 1.4rem; color: #cbd5e1; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto; } /* CTA Button */ .cta-button { display: inline-block; background-color: var(--accent-color); color: white; padding: 20px 40px; font-size: 1.25rem; font-weight: bold; text-decoration: none; border-radius: 50px; transition: transform 0.3s ease; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); } .cta-button:hover { transform: scale(1.05); background-color: #059669; } /* Features Section */ .features { padding: 60px 0; background: #f1f5f9; text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; } .card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .card h3 { color: var(--primary-color); } /* Video/Image Placeholder */ .visual-box { margin: 40px auto; max-width: 700px; border: 8px solid #334155; border-radius: 15px; overflow: hidden; background: #000; } @media (max-width: 768px) { h1 { font-size: 2rem; } .subheadline { font-size: 1.1rem; } }