@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import 'variables.css';

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-lh);
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ─── Headings ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--heading);
  font-weight: var(--fw-medium);
}

h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); }
h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); font-weight: var(--fw-regular); }
h5 { font-size: var(--text-h5-size); line-height: var(--text-h5-lh); font-weight: var(--fw-regular); }
h6 { font-size: var(--text-h6-size); line-height: var(--text-h6-lh); font-weight: var(--fw-regular); }

/* h6 utility — use on non-heading elements */
.text-h6 {
  font-family: var(--font-head);
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
  font-weight: var(--fw-regular);
  color: var(--heading);
}

/* h7 — not a native HTML element; use a utility class */
.text-h7 {
  font-family: var(--font-head);
  font-size: var(--text-h7-size);
  line-height: var(--text-h7-lh);
  font-weight: var(--fw-medium);
  color: var(--heading);
}

/* ─── Body text utilities ────────────────────────────── */
.text-body-l         { font-size: var(--text-body-l-size); line-height: var(--text-body-lh); font-weight: var(--fw-regular); }
.text-body-m         { font-size: var(--text-body-m-size); line-height: var(--text-body-lh); font-weight: var(--fw-regular); }
.text-body-m--semi   { font-size: var(--text-body-m-size); line-height: var(--text-body-lh); font-weight: var(--fw-semibold); }
.text-body-s         { font-size: var(--text-body-s-size); line-height: var(--text-body-lh); font-weight: var(--fw-regular); }
.text-body-s--semi   { font-size: var(--text-body-s-size); line-height: var(--text-body-lh); font-weight: var(--fw-semibold); }
.text-caption        { font-size: var(--text-caption-size); line-height: var(--text-body-lh); font-weight: var(--fw-medium); }

/* ─── Color utilities ────────────────────────────────── */
.text-primary        { color: var(--color-primary); }
.text-heading        { color: var(--heading); }
.text-body-color     { color: var(--body); }
.text-muted          { color: var(--color-paragraph-light); }
.text-danger         { color: var(--color-danger); }
.text-warning        { color: var(--color-warning); }
.text-green-dark     { color: var(--green-dark); }
.text-white          { color: var(--white); }

.bg-primary          { background-color: var(--color-primary); }
.bg-light-green      { background-color: var(--green-bg); }
.bg-dark-green       { background-color: var(--green-darker); }
.bg-page             { background-color: var(--bg); }
.bg-white            { background-color: var(--white); }

/* ─── Base elements ──────────────────────────────────── */
img    { display: block; max-width: 100%; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ─── Layout ─────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
}

.section { padding-block: 5rem; }
@media (max-width: 768px) { .section { padding-block: 3rem; } }

/* ─── Badge / eyebrow pill ───────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem 1rem;
  background: var(--green-muted);
  border: 1px solid var(--green);
  border-radius: var(--r-pill);
  font-size: var(--text-body-s-size);
  font-weight: var(--fw-medium);
  font-family: var(--font-head);
  color: var(--green-dark);
}
.badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* ─── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-size: var(--text-body-s-size);
  font-weight: var(--fw-semibold);
  transition: .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-navbar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 32px;
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-size: var(--text-body-l-size);
  transition: .2s ease;
  white-space: nowrap;
}
.btn-navbar:hover { transform: translateY(-1px); }

.btn-dark         { background: var(--heading);       color: var(--white); }
.btn-dark:hover   { background: var(--green-darker); }

.btn-outline      { background: var(--white); color: var(--heading); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--green); color: var(--green-dark); }

.btn-green        { background: var(--green);      color: var(--white); }
.btn-green:hover  { background: var(--green-dark); }

/* ─── Card ───────────────────────────────────────────── */
.card {
  background: var(--green-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* ─── Active nav ─────────────────────────────────────── */
.active-nav {
  background: var(--green-bg);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

/* ─── Divider ────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: 1rem;
}

/* ─── Footer utilities ───────────────────────────────── */
.footer-bg        { background-color: var(--green-darker); }
.footer-text      { color: var(--bg); }
.footer-text-dim  { color: rgba(255,255,255,.4); }
.footer-text-white{ color: var(--white); }
.footer-divider   { border: none; border-top: 1px solid rgba(255,255,255,.12); }
.footer-input-wrap{
  display: flex;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
}
.footer-input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0.25rem 0.5rem;
  font-size: var(--text-body-s-size);
  color: var(--heading);
  min-width: 180px;
}
.footer-input::placeholder { color: var(--color-paragraph-light); }
.footer-newsletter-div {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
}
.footer-subscribe {
  padding: 4px 16px;
  background: var(--heading);
  color: var(--white);
  border-radius: calc(var(--r-md) - 2px);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.footer-subscribe:hover { background: var(--green-darker); }
 
.social-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--green);
  color: var(--green);
  transition: background .2s, color .2s;
}
.social-icon:hover { background: var(--green); color: var(--white); }
 
.connect-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green);
  color: var(--white);
}