:root {
    --primary-color: #660691;
    --secondary-color: #9C4DCC;
    --accent-color: #FFB400;
    --text-dark: #1C1C1C;
    --text-medium: #333333;
}

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Montserrat', sans-serif; background-color: #fff; color: var(--text-medium); }

header { display:flex; justify-content: space-between; align-items:center; padding:20px 50px; background-color: var(--primary-color); color:white; position: sticky; top:0; }
header .logo { font-size:24px; font-weight:700; }
header nav a { margin-left:25px; font-weight:600; color:white; text-decoration:none; }
header nav a:hover { color: var(--accent-color); }
header nav .btn-cta { background-color: var(--text-dark); padding:10px 20px; border-radius:6px; }
header nav .btn-cta:hover { background-color: #4B036A; }

.hero { display:flex; justify-content:center; align-items:center; text-align:center; padding:120px 20px; color:white; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.hero-content { max-width:700px; }
.hero-content h1 { font-size:42px; margin-bottom:20px; }
.hero-content p { font-size:18px; margin-bottom:30px; }
.hero-content .btn-hero { background-color: var(--accent-color); color: var(--text-dark); padding:15px 35px; font-size:18px; font-weight:600; border-radius:8px; text-decoration:none; }
.hero-content .btn-hero:hover { background-color:#e69900; }

.services { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:25px; max-width:1000px; margin:80px auto; padding:0 20px; }
.service-card { background-color:#fff; padding:30px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.08); text-align:center; transition: transform 0.3s; }
.service-card:hover { transform: translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.12); }
.service-card h3 { margin-bottom:15px; color: var(--text-dark); }
.service-card p { font-size:15px; }

footer { text-align:center; padding:30px 20px; background-color: var(--secondary-color); color:white; }

@media(max-width:768px) {
    .hero-content h1 { font-size:28px; }
    .hero-content p { font-size:16px; }
}