:root{
  --primary:#334155; 
  --accent:#0ea5a4;
  --dark:#0b1220;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --white:#ffffff;
}

html, body{
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--dark);
}

/* Buttons */
.btn-primary,.btn-accent{
  border-radius:999px;
  padding:.75rem 2rem;
  font-weight:500;
  transition:.3s;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#020617}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#0891b2}
.btn-outline{
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:999px;
  padding:.75rem 2rem;
  transition:.3s
}
.btn-outline:hover{background:var(--accent);color:#fff}

/* Cards */
.card{
  background:#fff;
  border-radius:20px;
  padding:2rem;
  box-shadow:0 20px 40px rgba(0,0,0,.06);
  transition:.35s;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.12);
}

/* Titles */
.section-title{
  font-size:clamp(2rem,4vw,2.6rem);
  font-weight:700;
  text-align:center;
  margin-bottom:1rem;
}
.section-subtitle{
  text-align:center;
  color:var(--muted);
  max-width:720px;
  margin:0 auto 3rem;
}

/* Icons */
.icon-box{
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(14,165,164,.15);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
}
.card:hover .icon-box{
  background:var(--accent);
  color:#fff;
  transform:scale(1.1);
}