:root {
  --primary-color: #513279;
  --text-color: #000;
  --bg-light: #f4f4f4;
  --font-family: 'Poppins', sans-serif;
}
* {box-sizing: border-box;}
body {font-family: Arial, sans-serif; margin:0; color:var(--text-color);}
a {text-decoration:none;}
.navbar {background:#fff; box-shadow: 0 2px 5px rgba(0,0,0,0.08);}
.navbar-brand{color:var(--primary-color); font-weight:600;}
.btn-demo {background-color:var(--primary-color); color:#fff; border-radius:50px; padding:8px 18px; display:inline-block;}
.hero {background-size:cover; background-position:center; padding:120px 20px; position:relative; color:white;}
.hero::after {content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.35);}
.hero .hero-content {position:relative; z-index:2;}
.section {padding:60px 0;}
.service-card {background:#fff; border-radius:12px; padding:24px; border:1px solid #e6e6e6; transition:transform .25s, box-shadow .25s;}
.service-card:hover {transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.08);}
footer {background:#111; color:#ccc; padding:30px 0;}
footer a {color:#ccc;}
footer a:hover {color:var(--primary-color);}
@media(max-width:767px){ .hero {padding:80px 20px;} }