/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:12px 24px; border-radius:var(--radius); border:1px solid transparent;
  background:var(--gradient); color:#ffffff; font-weight:600; font-size:14px;
  box-shadow:var(--shadow);
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative; overflow:hidden;
}
.btn:hover{ 
  transform:translateY(-1px); 
  box-shadow:var(--shadow-lg);
  background:var(--brand-hover);
}
.btn.ghost{ 
  background:transparent; 
  border-color:var(--border); 
  box-shadow:none; 
  color:var(--ink);
}
.btn.ghost:hover{
  background:var(--brand-light);
  border-color:var(--brand);
  color:var(--brand);
  transform:translateY(-1px);
}

/* ---- Pills ---- */
.pill{ 
  font-size:12px; 
  font-weight:500;
  letter-spacing:.02em; 
  color:var(--brand); 
  background:var(--brand-light); 
  padding:6px 12px; 
  border-radius:8px;
  border:1px solid rgba(5, 150, 105, 0.2);
}

/* ---- Cards ---- */
.card{
  background:var(--paper); 
  border-radius:var(--radius-lg);
  border:1px solid var(--border); 
  box-shadow:var(--shadow);
  padding:32px; 
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--gradient);
  transform:scaleX(0);
  transition:transform .3s ease;
}
.card:hover{ 
  transform:translateY(-8px); 
  box-shadow:var(--shadow-xl); 
  border-color:rgba(5, 150, 105, 0.2);
}
.card:hover::before{
  transform:scaleX(1);
}
.card .icon{
  width:48px; height:48px; border-radius:var(--radius);
  background:var(--brand-light); 
  display:grid; place-items:center; 
  margin-bottom:20px;
  border:1px solid rgba(5, 150, 105, 0.2);
}
.card h3{ 
  font-size:18px; 
  margin:0 0 12px; 
  color:var(--ink);
  font-weight:600;
  line-height:1.3;
}
.card p{ 
  margin:0; 
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}

/* ---- Eyebrow ---- */
.eyebrow{
  display:inline-flex; 
  gap:8px; 
  align-items:center; 
  color:var(--brand); 
  font-weight:600; 
  letter-spacing:0.05em; 
  text-transform:uppercase; 
  font-size:12px;
  margin-bottom:16px;
}
.eyebrow::before,.eyebrow::after{
  content:""; 
  display:block; 
  width:24px; 
  height:2px; 
  background:var(--brand); 
  border-radius:1px;
}