/* Reset & Basis */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; line-height:1.6; color:#333; background:#fafafa; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
a { color:#0066cc; text-decoration:none; }
a:hover { text-decoration:underline; }
ul { list-style:none; }

/* Header */
header { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.1); position:sticky; top:0; z-index:100; }
header .container { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 20px; }
header h1 { font-size:2rem; }
header h1 .highlight { color:#0066cc; }
header nav ul { display:flex; gap:2rem; }
header nav a { font-weight:600; }

/* Hero */
.hero { background:linear-gradient(135deg, #0066cc, #0044aa); color:#fff; text-align:center; padding:120px 20px; }
.hero h2 { font-size:3rem; margin-bottom:1rem; }
.hero p { font-size:1.3rem; max-width:700px; margin:0 auto 2rem; }
.hero.small { padding:80px 20px; }
.hero.small h2 { font-size:2.5rem; }

/* Buttons */
.btn { display:inline-block; background:#fff; color:#0066cc; padding:12px 30px; border-radius:50px; font-weight:600; margin-top:1rem; }
.btn:hover { background:#f0f0f0; text-decoration:none; }

/* Sections */
section { padding:80px 0; }
.services, .content { background:#fff; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
.card { background:#f8f9fa; padding:2rem; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.05); }

/* Security List */
.security-list { background:#f8f9fa; padding:2rem; border-radius:8px; margin:2rem 0; }
.security-list li { margin-bottom:1rem; padding-left:1rem; position:relative; }
.security-list li:before { content:"✓"; color:#0066cc; font-weight:bold; position:absolute; left:0; }

/* Footer & Contact */
footer, .contact { background:#333; color:#ccc; text-align:center; padding:3rem 0; }
footer a, .contact a { color:#fff; }
.center { text-align:center; }

/* Responsive */
@media (max-width:768px) {
    header .container { flex-direction:column; gap:1rem; }
    header nav ul { flex-wrap:wrap; justify-content:center; }
    .hero h2 { font-size:2.2rem; }

.feature-list {
    background:#f8f9fa;
    padding:2rem;
    border-radius:8px;
    margin:2rem 0;
}
.feature-list li {
    margin-bottom:1rem;
    padding-left:1.5rem;
    position:relative;
}
.feature-list li:before {
    content:"▹";
    color:#0066cc;
    position:absolute;
    left:0;
    font-weight:bold;
}
}