/* ================= ROOT & RESET ================= */
:root {
  --bg: #fff;
  --text: #000;
  --muted: #666;
  --accent: #000;
  --border: #eee;
  --transition: .3s ease-in-out;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:Inter,sans-serif; background:var(--bg); color:var(--text);}

/* ===== NAV ===== */
nav{
  position:sticky;
  top:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 60px;
  z-index:100;
}
nav .nav-links{display:flex; gap:28px;}
nav a{
  text-decoration:none; color:var(--text);
  font-weight:500;
  position:relative;
}
nav a::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  height:2px; width:0;
  background:var(--accent);
  transition:var(--transition);
}
nav a:hover::after{width:100%;}

/* ===== HERO ===== */
.hero{
  position:relative;
  padding:140px 20px;
  text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(240,240,240,.5), rgba(255,255,255,.2));
  transform:skewY(-5deg) scale(1.2);
  z-index:-1;
}
.hero h2{
  font-size:clamp(2.2rem,6vw,3.8rem);
}
.hero span{
  border-bottom:4px solid var(--accent);
}
.hero p{margin:18px 0 30px; color:var(--muted);}

/* ===== BUTTON ===== */
.btn{
  padding:14px 36px;
  border:2px solid var(--accent);
  transition:var(--transition);
}
.btn:hover{background:var(--accent); color:#fff;}

/* ===== SECTIONS ===== */
.section{padding:100px 60px; opacity:0; transform:translateY(40px); transition:1s;}
.section.show{opacity:1;transform:none;}
.section h2{text-align:center; font-size:2.4rem; margin-bottom:30px;}

/* ===== GRID ===== */
.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* ===== CARDS ===== */
.card{
  border:1px solid var(--border);
  padding:28px;
  border-radius:12px;
  transition:var(--transition);
}
.card:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 30px rgba(0,0,0,0.08);
}
.services-grid .card:hover{background:var(--accent);color:#fff;}

/* ===== PROJECTS ===== */
.projects-grid .project-card{
  font-weight:600;
  text-align:center;
  padding:42px;
}

/* ===== TESTIMONIALS ===== */
.testimonial-card p{font-style:italic; color:var(--muted);}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid var(--border);
  padding:40px 60px;
}
.footer-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.footer-links a{margin-right:16px; color:var(--text);}
.footer-bottom{margin-top:30px; text-align:center; color:var(--muted);font-size:.9rem;}

/* ===== MEDIA ===== */
@media(max-width:768px){
  nav{padding:14px 30px;}
  .section{padding:70px 30px;}
}