:root {
  --blue: #2e86c1;
  --dark: #2c3e50;
  --light: #f8f9fa;
  --accent: #f39c12;
  --text: #5d6d7e;
}
* { box-sizing: border-box; }
body { margin:0; font-family: 'Inter', system-ui; color: var(--dark); background:#fff; }
.hero { min-height: 80vh; background-size: cover; background-position: center; position: relative; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; }
.hero__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.65)); }
.hero__content { position:relative; max-width:900px; padding:2rem; }
.hero h1 { font-size: 48px; margin-bottom:0.5rem; }
.hero h3 { font-size: 24px; font-weight:500; }
.hero p { font-size: 18px; color: rgba(255,255,255,0.95); margin-bottom:1.5rem; }
.btn { display:inline-block; padding: 0.9rem 2rem; border-radius:999px; font-weight:600; text-decoration:none; }
.btn--primary { background: var(--accent); color:#fff; }
section { padding:4rem 0; }
.section { background:#fff; }
.section--light { background: var(--light); }
.section--cta { background: var(--blue); color:#fff; text-align:center; }
.container { width:min(1200px,90%); margin:0 auto; }
.services-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card { border:1px solid #e5e8ec; border-radius:18px; padding:30px; background:#fff; box-shadow:0 20px 35px rgba(46,134,193,0.08); }
.card i { font-size:32px; color:var(--blue); }
.card h3 { margin-top:15px; font-size:24px; }
.portfolio-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.portfolio-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.08); }
.portfolio-card img { width:100%; height:220px; object-fit:cover; }
.portfolio-card div { padding:20px; }
.list { list-style:none; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:15px; }
.list li { background:#f8f9fa; padding:20px; border-radius:14px; font-weight:600; }
.section--cta p { font-size:20px; max-width:700px; margin:0 auto 1.5rem; }
.btn--secondary { background:#fff; color:var(--blue); }
.footer { background:#091526; color:#fff; padding:2rem 0; }
.footer a { color:#fff; }
@media (max-width:768px) { .hero h1 { font-size: 34px; } .hero h3 { font-size: 20px; } }