* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto', sans-serif; line-height:1.6; color:#333; background-color:#f4f0fa; }
nav { background:#6a0dad; color:#fff; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1000; }
nav a { color:#fff; text-decoration:none; margin-left:1.5rem; font-weight:500; }
nav a:hover { text-decoration:underline; }
.hero { background-size:cover; background-position:center; color:#fff; padding:120px 20px; text-align:center; position:relative; }
.hero::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(106,13,173,0.6); z-index:0; }
.hero .hero-content { position:relative; z-index:1; }
section { padding:60px 20px; max-width:1100px; margin:auto; }
.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; }
.service-card { background:#fff; padding:20px; border-radius:10px; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; }
.service-card:hover { transform:translateY(-10px); box-shadow:0 8px 25px rgba(0,0,0,0.2); }
.service-card h3 { margin-bottom:15px; color:#6a0dad; }
.contact-form { max-width:600px; margin:auto; }
.contact-form input, .contact-form textarea { width:100%; padding:12px; margin-bottom:15px; border-radius:5px; border:1px solid #ccc; }
.contact-form button { background:#9b59b6; color:#fff; padding:12px 20px; border:none; border-radius:5px; cursor:pointer; transition:background 0.3s; }
.contact-form button:hover { background:#6a0dad; }
footer { background:#6a0dad; color:#fff; text-align:center; padding:20px; margin-top:40px; }
.back-to-top { position:fixed; bottom:30px; right:30px; background:#6a0dad; color:#fff; padding:10px 15px; border-radius:50%; text-decoration:none; display:none; font-size:18px; transition: background 0.3s; }
.back-to-top:hover { background:#9b59b6; }
@media(max-width:768px){ nav { flex-direction:column; } nav a { margin:10px 0; } }