html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}
body.menu-open{
  overflow: hidden;
}

img{ max-width:100%; height:auto; }

.container{
  width:min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}

.section{ padding:var(--s-12) 0; }
.section--tight{ padding:var(--s-10) 0; }

.eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}

.h1{
  font-size:clamp(40px, 3.4vw, 64px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 var(--s-5);
}

.h2{
  font-size:clamp(32px, 2.6vw, 48px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0 0 var(--s-5);
}

.p{
  font-size:16px;
  line-height:1.5;
  color:var(--text-2);
  margin:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:var(--r-pill);
  font-size:13px;
  line-height:1;
  text-decoration:none;
  border:1px solid transparent;
}

.btn--primary{
  color:#fff;
  background:linear-gradient(90deg, var(--btn-grad-from), var(--btn-grad-to));
}

.btn--ghost{
  color:var(--text);
  background:transparent;
  border-color:var(--border-strong);
}

.card{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:#fff;
}

.section-dark{
  background:var(--dark);
  color:var(--on-dark);
  border-radius:var(--r-xl);
  padding:var(--s-10);
}

.section-dark .p{ color:var(--on-dark-2); }

.link-whats{ color:var(--accent-green); text-decoration:none; }