@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
  --primary: #1e3a8a;
  --secondary: #f472b6;
  --gray: #9ca3af;
  --bg: #ffffff;
  --text: #1f2937;
  --light: #f8fafc;
  --border: #e2e8f0;
}
body.dark {
  --bg: #0f172a;
  --text: #f1f5f9;
  --light: #1e293b;
  --border: #334155;
  --primary: #3b82f6;
  --secondary: #f9a8d4;
}

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Inter', sans-serif; background:var(--bg); color:var(--text); line-height:1.6; transition:background .4s,color .4s; }
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--secondary); }
.btn { background:var(--primary); color:white; padding:.9rem 2rem; border-radius:999px; display:inline-block; font-weight:600; transition:.3s; }
.btn:hover { background:var(--secondary); transform:translateY(-3px); }
h1,h2,h3,h4 { font-weight:900; line-height:1.2; }
h1 { font-size:3.5rem; }
h2 { font-size:2.8rem; text-align:center; margin-bottom:3rem; color:var(--primary); }

header { background:var(--bg); position:sticky; top:0; z-index:100; box-shadow:0 4px 20px rgba(0,0,0,.05); }
nav { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0; }
.logo { font-size:2rem; font-weight:900; color:var(--primary); }
nav ul { display:flex; gap:2.5rem; list-style:none; align-items:center; }
nav ul li a { font-weight:600; font-size:1.1rem; }
#dark-mode-toggle { background:none; border:none; font-size:1.8rem; cursor:pointer; }
.menu-toggle { display:none; font-size:1.8rem; cursor:pointer; }

#hero { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:white; text-align:center; padding:8rem 0 6rem; clip-path:polygon(0 0,100% 0,100% 90%,0 100%); }
#hero h1 { font-size:4.5rem; margin-bottom:1rem; }
#hero p { font-size:1.6rem; max-width:800px; margin:0 auto 2rem; }

section { padding:5rem 0; }
.grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.card { background:var(--light); padding:2.5rem; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:.4s; }
.card:hover { transform:translateY(-15px); }

.portfolio-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); }
.portfolio-item { position:relative; overflow:hidden; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.1); }
.portfolio-item img { width:100%; height:auto; transition:.5s; }
.portfolio-item:hover img { transform:scale(1.12); }
.overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(30,58,138,.92); color:white; padding:2rem; transform:translateY(100%); transition:.4s; }
.portfolio-item:hover .overlay { transform:translateY(0); }

.testimonial-slider { position:relative; max-width:900px; margin:0 auto; }
.testimonial { text-align:center; padding:3rem; opacity:0; transition:.6s; }
.testimonial.active { opacity:1; }
.testimonial img { width:100px; height:100px; border-radius:50%; margin-bottom:1.5rem; object-fit:cover; }
.arrows { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:white; border:none; width:50px; height:50px; font-size:2rem; cursor:pointer; border-radius:50%; }
.prev { left:-70px; }
.next { right:-70px; }

footer { background:var(--primary); color:white; text-align:center; padding:3rem 0; margin-top:5rem; }

/* Responsive */
@media (max-width: 992px) {
  #hero h1 { font-size:3.5rem; }
  .prev { left:10px; }
  .next { right:10px; }
}
@media (max-width: 768px) {
  .menu-toggle { display:block; }
  nav ul { position:absolute; top:100%; left:0; right:0; background:var(--bg); flex-direction:column; padding:2rem; box-shadow:0 10px 20px rgba(0,0,0,.1); display:none; }
  nav ul.active { display:flex; }
  #hero h1 { font-size:2.8rem; }
  #hero { padding:6rem 0 4rem; }
}