:root { 
            --brand-blue: #004A99; 
            --light-blue: #F0F7FF; 
            --accent-cyan: #2ABDCB;
        }
        body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; background: #fff; }
        
        .hero { background: linear-gradient(135deg, var(--light-blue) 0%, #ffffff 100%); padding: 100px 20px; text-align: center; }
        .hero img { max-width: 320px; margin-bottom: 40px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1)); }
        .hero h1 { color: var(--brand-blue); font-size: 3rem; margin-bottom: 20px; font-weight: 800; }
        .hero p { font-size: 1.25rem; max-width: 800px; margin: 0 auto 40px; color: #555; }

        .container { max-width: 1100px; margin: auto; padding: 60px 20px; }
        
        .benefit-box { 
            background: var(--brand-blue); 
            color: white; 
            padding: 40px; 
            border-radius: 20px; 
            display: flex; 
            align-items: center; 
            justify-content: space-around; 
            flex-wrap: wrap;
            margin-bottom: 80px;
            box-shadow: 0 20px 40px rgba(0,74,153,0.2);
        }
        .benefit-item { text-align: center; padding: 20px; }
        .benefit-item span { display: block; font-size: 2.5rem; font-weight: bold; color: var(--accent-cyan); }

        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
        .feature-card { border: none; padding: 40px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; position: relative; overflow: hidden; }
        .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
        .feature-card h3 { color: var(--brand-blue); font-size: 1.5rem; margin-top: 0; }
        
        .cta-section { text-align: center; padding: 80px 20px; background: var(--light-blue); border-radius: 30px; margin: 60px 0; }
        .btn-primary { 
            background: var(--brand-blue); 
            color: #fff; 
            padding: 20px 45px; 
            text-decoration: none; 
            font-weight: bold; 
            border-radius: 50px; 
            display: inline-block; 
            font-size: 1.2rem;
            transition: 0.3s;
            box-shadow: 0 10px 20px rgba(0,74,153,0.3);
        }
        .btn-primary:hover { background: #003366; transform: scale(1.05); }

        footer { background: #1a1a1a; color: #999; padding: 60px 20px; text-align: center; }
        footer a { color: #fff; text-decoration: none; margin: 0 15px; font-weight: 500; }
        footer a:hover { color: var(--accent-cyan); }