/* ============================================================
   inqelo marketing site — shared chrome
   @docs [[docs/Systems/Marketing Website/Patterns/inqelo Marketing Site Design Standard]]
   Design tokens, base styles, buttons, header/nav and footer for
   every page. Loaded before each page's own stylesheet
   (static/<page>/styles.css), which holds only page-specific rules.
   ============================================================ */

/* ---- Brand font (Space Grotesk, variable 300–700) ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/space-grotesk@5/files/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens (inqelo design system) ------------------ */
:root {
  --green-50:  #eef7ef;
  --green-100: #d9eedb;
  --green-200: #b6dfba;
  --green-300: #8ccd92;
  --green-400: #63bb6c;
  --green-500: #42ac4c;
  --green-600: #379a40;
  --green-700: #2d7a35;
  --green-800: #265f2c;
  --green-900: #1f4a25;

  --amber-500: #e8821c;
  --amber-600: #d06f12;

  --ink-900:   #16201d;
  --ink-700:   #333b37;
  --gray-600:  #5c655f;
  --gray-500:  #7b847e;
  --gray-400:  #9aa39d;
  --gray-300:  #c7cdc8;
  --gray-200:  #e3e7e3;
  --gray-100:  #eef1ee;
  --gray-50:   #f6f7f5;
  --paper:     #f6f4ee;
  --white:     #ffffff;
  --navy-900:  #15242b;

  --danger-500: #d4453a;
  --info-500:   #3b76c4;

  --surface-sage:      #e8efde;
  --surface-sage-soft: #f0f5e9;

  --text-strong: var(--ink-900);
  --text-body:   var(--ink-700);
  --text-muted:  var(--gray-600);
  --text-faint:  var(--gray-400);
  --border-subtle: var(--gray-200);

  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(21, 36, 43, 0.06);
  --shadow-sm:  0 1px 3px rgba(21, 36, 43, 0.08), 0 1px 2px rgba(21, 36, 43, 0.04);
  --shadow-md:  0 4px 12px rgba(21, 36, 43, 0.08), 0 2px 4px rgba(21, 36, 43, 0.04);
  --shadow-lg:  0 12px 28px rgba(21, 36, 43, 0.10), 0 4px 8px rgba(21, 36, 43, 0.05);
  --shadow-amber: 0 10px 24px rgba(208, 111, 18, 0.24);

  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Grotesk", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --header-green: #14311b;
  --hero-green:   #193c20;
}

/* ---- Base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--text-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 700px) {
  .container { padding-left: 40px; padding-right: 40px; }
}

/* Decorative shapes; individual shapes with fixed desktop offsets
   that collide with reflowed mobile content are hidden with
   .deco--desktop. */
.deco { display: block; position: absolute; }
@media (max-width: 1023px) {
  .deco--desktop { display: none; }
}

/* Shared decorative primitives (the brand's geometric garnish) */
.tri { width: 0; height: 0; }
.tri--green      { border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 18px solid var(--green-400); opacity: .85; }
.tri--green-lg   { border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 22px solid var(--green-400); opacity: .85; }
.tri--green-sm   { border-left: 9px solid transparent;  border-right: 9px solid transparent;  border-bottom: 15px solid var(--green-500); opacity: .85; }
.tri--amber      { border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 18px solid var(--amber-500); opacity: .9; }
.tri--amber-sm   { border-left: 9px solid transparent;  border-right: 9px solid transparent;  border-bottom: 15px solid var(--amber-500); opacity: .85; }
.dot  { border-radius: 50%; background: var(--green-200); opacity: .9; }
.dot--green-lg { width: 26px; height: 26px; }
.dot--green-xl { width: 42px; height: 42px; }
.ring { border: 2px solid var(--green-300); border-radius: 50%; width: 22px; height: 22px; }
.ring--lg { width: 30px; height: 30px; border-width: 3px; }
.ring--xl { width: 40px; height: 40px; border-width: 3px; }
.square { width: 16px; height: 16px; background: var(--amber-500); border-radius: 4px; transform: rotate(16deg); opacity: .85; }
.square--lg { width: 24px; height: 24px; border-radius: 6px; transform: rotate(18deg); opacity: .9; }

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
}

/* ---- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  font-family: inherit;
  white-space: nowrap;
}
.btn--amber { background: var(--amber-500); box-shadow: var(--shadow-amber); }
.btn--amber:hover { background: var(--amber-600); }
.btn--outline-light { border: 1.5px solid rgba(255, 255, 255, .4); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); }
.btn--outline-dark { border: 1.5px solid var(--gray-300); color: var(--ink-900); }
.btn--outline-dark:hover { border-color: var(--green-400); color: var(--green-700); background: var(--green-50); }
.btn--nav { font-size: 14.5px; padding: 9px 20px; }
.btn--lg  { font-size: 16px; padding: 15px 28px; }
.btn--lg.btn--outline-light { border-color: rgba(255, 255, 255, .45); }
.btn--pill { border-radius: var(--radius-pill); }

/* ---- Header / nav ------------------------------------------- */
.site-header {
  background: var(--header-green);
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-header__logo img { height: 26px; width: auto; display: block; }

.site-nav { display: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  font-weight: 500;
}
.site-nav__actions { display: none; }

.site-header__actions {
  display: none;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.site-header__burger {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
}
.site-header__burger .icon-close { display: none; }
.nav-open .site-header__burger .icon-burger { display: none; }
.nav-open .site-header__burger .icon-close { display: block; }

/* Mobile menu: full-width panel under the sticky header */
.nav-open .site-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--header-green);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 20px 20px;
}
.nav-open .site-nav > a {
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 16px;
}
.nav-open .site-nav__actions {
  display: flex;
  gap: 12px;
  padding-top: 16px;
  /* Three buttons fit one row on a 390px phone; on narrower screens the
     last one wraps to its own full-width row rather than being squashed. */
  flex-wrap: wrap;
}
.nav-open .site-nav__actions .btn { flex: 1; }

@media (min-width: 1024px) {
  .site-header__inner { padding: 15px 40px; }
  .site-header__burger { display: none; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 auto 0 18px;
  }
  .site-nav__actions { display: none !important; }
  .site-header__actions { display: flex; }
}

/* ---- Footer --------------------------------------------------- */
.site-footer { background: var(--navy-900); }
.site-footer__inner {
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.site-footer__logo { height: 24px; width: auto; margin: 0 auto; }
.site-footer__links { display: flex; gap: 22px; width: 100%; justify-content: center; flex-wrap: wrap; }
.site-footer__links a { color: rgba(238, 241, 238, .72); font-size: 14px; }
.site-footer__legal { color: rgba(238, 241, 238, .5); font-size: 13px; width: 100%; text-align: center; }