/* ── Base ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
}
.btn-primary:hover { background: var(--navy2); box-shadow: 0 6px 24px rgba(0,0,0,.30); }

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  box-shadow: 0 4px 16px rgba(37,211,102,.35);
}
.btn-whatsapp:hover { background: #1DB954; box-shadow: 0 6px 24px rgba(37,211,102,.45); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.55);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

.btn-ghost-navy {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-ghost-navy:hover { background: var(--navy); color: var(--white); }

.btn-sky {
  background: var(--sky4);
  color: var(--navy3);
  box-shadow: 0 4px 16px rgba(239,184,16,.35);
}
.btn-sky:hover { background: var(--sky); box-shadow: 0 6px 24px rgba(239,184,16,.45); }

/* ── Section labels ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky4);
  margin-bottom: 12px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sky4);
  border-radius: 2px;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}
.section-title span { color: var(--navy); }

.section-subtitle {
  font-size: var(--fs-body-lg);
  color: var(--text2);
  line-height: 1.65;
  max-width: 580px;
}

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ── Badge/Chip ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-heading);
}
.badge-navy { background: rgba(0,0,0,.07);        color: var(--navy); }
.badge-sky  { background: rgba(239,184,16,.18);  color: var(--sky2); }
.badge-green{ background: rgba(46,125,82,.12);  color: var(--green); }
.badge-white{ background: rgba(255,255,255,.18); color: var(--white); border: 1px solid rgba(255,255,255,.3); }

/* ── Star rating ── */
.stars { color: #F5A623; letter-spacing: 2px; }

/* ── Divider ── */
.divider { width: 48px; height: 3px; background: var(--sky4); border-radius: 2px; margin-block: 16px; }

/* ── Unsplash image helper ── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Section wrappers ── */
.section-navy  { background: var(--navy);  color: var(--white); }
.section-navy2 { background: var(--navy2); color: var(--white); }
.section-navy3 { background: var(--navy3); color: var(--white); }
.section-bg2   { background: var(--bg2); }

/* ── Scrollbar thin ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--sky2); border-radius: 3px; }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--sky4); outline-offset: 3px; }