/* ==========================================================================
   THEME A — "Clean scientific + natural"
   White + fresh green (straight from the logo) with a tech light-blue accent.
   Palette is tuned to the brand mark: green #84BD41 leads, blue #0E7C9B accents.
   ========================================================================== */
/* Space Grotesk + Inter are self-hosted — @font-face lives in base.css. */

:root {
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --fw-heading: 700;
  --fw-body: 400;
  --heading-transform: none;
  --heading-spacing: -.01em;
  --btn-transform: none;

  /* Greens — aligned to the logo's fresh green (#84BD41) */
  --color-primary: #3a8226;          /* readable grass-green (logo family), AA on white */
  --color-primary-dark: #2b6019;     /* deep green for hovers / gradients */
  --color-primary-contrast: #ffffff;
  --color-accent: #84BD41;           /* the vivid logo green — highlights & motifs */
  --color-accent-dark: #6aa22f;

  /* Tech blue — the logo's light blue (#0E7C9B), used as the secondary accent */
  --color-tech: #0E7C9B;             /* logo blue — text-safe on white */
  --color-tech-bright: #18a5c9;      /* brighter "light blue" for glows & motifs */
  --color-tech-dark: #0a5f78;
  --color-tech-soft: #e6f3f7;        /* faint blue tint for surfaces */

  --color-bg: #ffffff;
  --color-surface: #f2f8ee;
  --color-surface-2: #e7f2df;
  --color-text: #35423a;
  --color-text-muted: #63746b;
  --color-heading: #14231b;
  --color-primary-tint: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --color-border: #e0ebd9;
  --color-footer-bg: #e7f2df;
  --color-footer-text: #14231b;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow: 0 4px 20px rgba(20, 60, 38, .07);
  --shadow-lg: 0 18px 50px rgba(20, 60, 38, .14);

  --container-max: 1180px;
  --section-pad: clamp(3.75rem, 8vw, 7rem);
  --nav-h: 78px;
  --header-bg: rgba(255,255,255,.82);

  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Airy hero with a green wash and a tech-blue glow */
.hero { background:
  radial-gradient(58% 68% at 85% 8%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 60%),
  radial-gradient(46% 56% at 6% 92%, color-mix(in srgb, var(--color-tech-bright) 16%, transparent), transparent 58%),
  var(--color-bg);
}
/* Molecule motif — tech light-blue edges + nodes (cohesive) */
.hero .decor-molecule { display: block; position: absolute; inset: 0; opacity: .5; }
.hero .decor-molecule [data-stroke] { stroke: var(--color-tech-bright); }
.hero .decor-molecule [data-dot] { fill: var(--color-tech-bright); }

.hero__media .media-block { background: linear-gradient(150deg, #eafaf1, #d4efde); color: var(--color-primary-dark); border: 1px solid var(--color-border); }
.hero__media .media-block svg { opacity: 1; }

h2 { position: relative; }
/* Eyebrow tick — matches each eyebrow's own text color (teal, green, etc.) */
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; background: currentColor; vertical-align: middle; margin-right: .55rem; }

.card { box-shadow: var(--shadow); }
.card__icon { border-radius: 14px; }

/* CTA band — vivid logo green with a tech-blue sweep in the corner */
.cta-band { background:
  radial-gradient(85% 150% at 100% 0%, color-mix(in srgb, var(--color-tech) 48%, transparent), transparent 55%),
  linear-gradient(120deg, var(--color-primary-dark), var(--color-primary) 55%, var(--color-accent-dark)); }
.media-block { background: var(--media-block-bg, linear-gradient(150deg, var(--color-primary), var(--color-primary-dark))); }

/* ---- Green-tinted sections: white cards + blue icons (site-wide) ----
   The section background is a green tint, so cards go white to lift off it and
   their icons go blue. White (default) sections keep green icons — this gives
   the "green on white / blue on green" contrast across every page. */
.section--tint .card,
.section--tint-2 .card {
  background: #fff;
  border-color: var(--color-border);
}
.section--tint .card__icon,
.section--tint-2 .card__icon,
.section--tint .feature__icon,
.section--tint-2 .feature__icon {
  background: color-mix(in srgb, var(--color-tech) 12%, transparent);
  color: var(--color-tech);
}