:root {
  --stgc-color-primary: #1e40af;
  --stgc-color-secondary: #1a3589;
  --stgc-color-accent: #1e40af;
  --stgc-color-star: #FBBC04;
  --stgc-color-surface: #ffffff;
  --stgc-color-ink: #111827;
  --stgc-color-on-primary: #ffffff;
  --stgc-color-on-secondary: #ffffff;
  --stgc-color-on-accent: #ffffff;
  --stgc-color-on-surface: #000000;
  --stgc-color-on-ink: #ffffff;

  /* Derived brand shades */
  --stgc-color-primary-strong: color-mix(in srgb, var(--stgc-color-primary) 82%, black);
  --stgc-color-primary-soft: color-mix(in srgb, var(--stgc-color-primary) 12%, var(--stgc-color-surface));
  --stgc-color-secondary-soft: color-mix(in srgb, var(--stgc-color-secondary) 14%, var(--stgc-color-surface));
  --stgc-color-accent-strong: color-mix(in srgb, var(--stgc-color-accent) 82%, black);
  --stgc-color-accent-soft: color-mix(in srgb, var(--stgc-color-accent) 14%, var(--stgc-color-surface));

  /* Neutral surfaces + hairlines */
  --stgc-color-surface-alt: color-mix(in srgb, var(--stgc-color-ink) 4%, var(--stgc-color-surface));
  --stgc-color-surface-sunken: color-mix(in srgb, var(--stgc-color-ink) 8%, var(--stgc-color-surface));
  --stgc-color-border: color-mix(in srgb, var(--stgc-color-ink) 14%, transparent);
  --stgc-color-border-strong: color-mix(in srgb, var(--stgc-color-ink) 26%, transparent);
  --stgc-color-ink-muted: color-mix(in srgb, var(--stgc-color-ink) 66%, var(--stgc-color-surface));

  /* Guaranteed-dark band (computed in code, real dark regardless of theme) */
  --stgc-color-dark: #070a15;
  --stgc-color-on-dark: #ffffff;
  --stgc-color-on-dark-muted: color-mix(in srgb, #ffffff 66%, var(--stgc-color-dark));

  /* Layered soft elevation */
  --stgc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 4px rgba(16, 24, 40, 0.04);
  --stgc-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 12px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(16, 24, 40, 0.06);
  --stgc-shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 24px rgba(16, 24, 40, 0.08), 0 28px 56px rgba(16, 24, 40, 0.12);

  /* Signature gradients */
  --stgc-gradient-brand: linear-gradient(135deg, var(--stgc-color-primary), var(--stgc-color-primary-strong));
  --stgc-scrim: linear-gradient(90deg, color-mix(in srgb, var(--stgc-color-dark) 88%, transparent) 0%, color-mix(in srgb, var(--stgc-color-dark) 55%, transparent) 45%, transparent 78%);
  --stgc-scrim-v: linear-gradient(0deg, color-mix(in srgb, var(--stgc-color-dark) 82%, transparent) 0%, color-mix(in srgb, var(--stgc-color-dark) 20%, transparent) 55%, transparent 100%);
  --stgc-mesh:
    radial-gradient(at 16% 18%, color-mix(in srgb, var(--stgc-color-primary) 42%, transparent) 0, transparent 48%),
    radial-gradient(at 84% 4%, color-mix(in srgb, var(--stgc-color-accent) 28%, transparent) 0, transparent 42%),
    radial-gradient(at 62% 92%, color-mix(in srgb, var(--stgc-color-primary) 30%, transparent) 0, transparent 50%);

  --stgc-font-heading: "Manrope", system-ui, sans-serif;
  --stgc-font-body: "Inter", system-ui, sans-serif;
  --stgc-font-accent: "Manrope", system-ui, sans-serif;
  --stgc-radius-sm: 10px;
  --stgc-radius-md: 20px;
  --stgc-radius-lg: 32px;
  --stgc-radius-pill: 999px;
  --stgc-space-xs: 0.25rem;
  --stgc-space-sm: 0.5rem;
  --stgc-space-md: 1rem;
  --stgc-space-lg: 2rem;
  --stgc-space-xl: 3.5rem;
  --stgc-space-2xl: calc(3.5rem * 1.8);
}

*, *::before, *::after { box-sizing: border-box; }
html { color: var(--stgc-color-ink); background: var(--stgc-color-surface); font-family: var(--stgc-font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); }
img { max-width: 100%; height: auto; display: block; }
[data-stgc-hero] img[src^="/assets/hero"] { object-position: var(--stgc-hero-object-position, 50% 50%) !important; }
@media (max-width: 767px) {
  [data-stgc-hero][data-stgc-hero-layout="full-bleed-scrim"] img[src^="/assets/hero"] { max-height: var(--stgc-hero-mobile-max-height, min(68svh, 560px)) !important; }
}
a { color: var(--stgc-color-primary); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--stgc-color-primary) 55%, transparent); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--stgc-font-heading); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--stgc-space-sm); text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); letter-spacing: -0.015em; }
p { margin: 0 0 var(--stgc-space-sm); max-width: 65ch; text-wrap: pretty; line-height: 1.65; }
.lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); color: var(--stgc-color-ink-muted); line-height: 1.6; }

/* Breadcrumbs (assembler-owned silo trail) ---------------------------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; padding: 0.85rem var(--stgc-space-md) 0; font-size: 0.85rem; color: var(--stgc-color-ink-muted); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--stgc-color-primary); }
.breadcrumbs .crumb-sep { opacity: 0.6; }
.breadcrumbs [aria-current] { font-weight: 600; }

/* Layout ------------------------------------------------------------- */
.container { width: min(1140px, 100%); margin-inline: auto; padding-inline: var(--stgc-space-md); }
.container--narrow { width: min(820px, 100%); }
main { display: block; }
.section { padding-block: clamp(3.5rem, 8vw, 8rem); }
.section--alt { background: var(--stgc-color-surface-alt); }
.section--sunken { background: var(--stgc-color-surface-sunken); }
.section--brand { background: var(--stgc-gradient-brand); color: var(--stgc-color-on-primary); }
.section--brand h1, .section--brand h2, .section--brand h3, .section--brand a { color: var(--stgc-color-on-primary); }
.section--brand .eyebrow, .section--brand .lede { color: color-mix(in srgb, var(--stgc-color-on-primary) 85%, transparent); }
/* Dark credibility section — hued near-black + gradient mesh + grain. */
.section--dark { position: relative; overflow: hidden; background-color: var(--stgc-color-dark); background-image: var(--stgc-mesh); color: var(--stgc-color-on-dark); }
.section--dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section--dark > * { position: relative; z-index: 1; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--stgc-color-on-dark); }
.section--dark .eyebrow { color: var(--stgc-color-secondary); }
.section--dark .lede, .section--dark p { color: var(--stgc-color-on-dark-muted); }
.section-head { max-width: 44rem; margin-inline: auto; margin-bottom: var(--stgc-space-xl); text-align: center; }
.section-head p { margin-inline: auto; color: var(--stgc-color-ink-muted); }
.eyebrow { display: inline-block; font-family: var(--stgc-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stgc-color-primary); margin-bottom: var(--stgc-space-sm); }

.grid { display: grid; gap: var(--stgc-space-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--stgc-space-sm); }
.stack > * + * { margin-top: var(--stgc-space-sm); }
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--stgc-space-xl); align-items: center; }

/* Buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px; padding: 0.8em 1.4em; border-radius: var(--stgc-radius-md); border: 1.5px solid transparent; font: inherit; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--stgc-color-primary); color: var(--stgc-color-on-primary); box-shadow: var(--stgc-shadow-sm); }
.btn--primary:hover { background: var(--stgc-color-primary-strong); box-shadow: var(--stgc-shadow-md); }
.btn--secondary { background: var(--stgc-color-secondary); color: var(--stgc-color-on-secondary); box-shadow: var(--stgc-shadow-sm); }
.btn--ghost { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn--lg { min-height: 54px; padding: 0.95em 1.7em; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--stgc-space-sm); }

/* Chips, badges, stars ---------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--stgc-space-xs); }
.chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.85em; border-radius: var(--stgc-radius-pill); background: color-mix(in srgb, var(--stgc-color-surface) 88%, transparent); border: 1px solid var(--stgc-color-border); font-size: 0.9rem; font-weight: 600; }
.section--brand .chip { background: color-mix(in srgb, var(--stgc-color-on-primary) 16%, transparent); border-color: color-mix(in srgb, var(--stgc-color-on-primary) 30%, transparent); color: var(--stgc-color-on-primary); }
.badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.7em; border-radius: var(--stgc-radius-sm); background: var(--stgc-color-primary-soft); color: var(--stgc-color-primary-strong); font-size: 0.82rem; font-weight: 700; }
.stars { display: inline-flex; gap: 0.1em; color: var(--stgc-color-secondary); }
.stars .icon { width: 1.05em; height: 1.05em; fill: currentColor; stroke: none; }

/* Cards -------------------------------------------------------------- */
.card { position: relative; background: var(--stgc-color-surface); border: 1px solid var(--stgc-color-border); border-radius: var(--stgc-radius-lg); padding: var(--stgc-space-lg); box-shadow: var(--stgc-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--stgc-color-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--stgc-shadow-lg); border-color: color-mix(in srgb, var(--stgc-color-primary) 30%, var(--stgc-color-border)); }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-top: var(--stgc-space-xs); }
.card p { color: var(--stgc-color-ink-muted); margin-bottom: 0; }
.card__link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--stgc-space-sm); font-weight: 700; text-decoration: none; color: var(--stgc-color-primary); }
.card__link .icon { width: 1.05em; height: 1.05em; transition: transform .15s ease; }
.card:hover .card__link .icon { transform: translateX(3px); }
.card__icon { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--stgc-radius-md); background: var(--stgc-color-primary-soft); color: var(--stgc-color-primary); margin-bottom: var(--stgc-space-sm); }
.card__icon .icon { width: 1.7rem; height: 1.7rem; }
.card--feature { padding: var(--stgc-space-xl); }
/* Bento: asymmetric feature grid — the first cell spans 2 cols + 2 rows. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stgc-space-md); }
.bento > :first-child { grid-column: span 2; grid-row: span 2; }
.bento > :first-child .card__icon { width: 3.75rem; height: 3.75rem; }
.section--dark .card { background: color-mix(in srgb, white 6%, transparent); border-color: color-mix(in srgb, white 12%, transparent); box-shadow: none; }
.section--dark .card h3 { color: var(--stgc-color-on-dark); }
.section--dark .card p { color: var(--stgc-color-on-dark-muted); }
.section--dark .card__icon { background: color-mix(in srgb, var(--stgc-color-secondary) 22%, transparent); color: var(--stgc-color-on-dark); }
/* Overlap: pull a block up into the previous section (use sparingly). */
.overlap { margin-top: clamp(-7rem, -6vw, -3rem); position: relative; z-index: 2; }

/* Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8.5rem); }
.hero--brand { background: var(--stgc-gradient-brand); color: var(--stgc-color-on-primary); }
.hero--brand h1, .hero--brand a:not(.btn) { color: var(--stgc-color-on-primary); }
.hero__inner { display: grid; gap: var(--stgc-space-md); max-width: 48rem; }
.hero__inner > .btn-row { margin-top: var(--stgc-space-sm); }
.hero p, .hero .lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); opacity: 0.96; max-width: 42ch; }
.hero .chips { margin-top: var(--stgc-space-sm); }
/* Split hero: content beside a rounded photo. */
.hero--split { display: block; }
.hero--split .hero__inner { max-width: none; }
.hero--split .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--stgc-space-xl); align-items: center; }
.hero__media { border-radius: var(--stgc-radius-lg); overflow: hidden; box-shadow: var(--stgc-shadow-lg); aspect-ratio: 4 / 3; background: var(--stgc-color-surface-sunken); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Photo hero: full-bleed background image with a dark scrim, text overlaid. */
.hero--photo { color: var(--stgc-color-on-dark); min-height: min(78vh, 640px); display: grid; align-items: center; isolation: isolate; }
.hero--photo .hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--stgc-scrim), var(--stgc-scrim-v); }
.hero--photo h1, .hero--photo a:not(.btn) { color: var(--stgc-color-on-dark); }
.hero--photo .eyebrow { color: color-mix(in srgb, white 88%, var(--stgc-color-secondary)); }
.hero--photo .chip { background: color-mix(in srgb, white 16%, transparent); border-color: color-mix(in srgb, white 34%, transparent); color: var(--stgc-color-on-dark); }

/* Trust / stats bar -------------------------------------------------- */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--stgc-space-lg) var(--stgc-space-xl); align-items: center; }
.stat { text-align: center; }
.stat__num { display: block; font-family: var(--stgc-font-heading); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 800; line-height: 1; color: var(--stgc-color-primary); }
.stat__label { font-size: 0.9rem; color: var(--stgc-color-ink-muted); }

/* Feature rows ------------------------------------------------------- */
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--stgc-space-sm); align-items: start; }
.feature__icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--stgc-radius-md); background: var(--stgc-color-primary-soft); color: var(--stgc-color-primary); }
.feature__icon .icon { width: 1.4rem; height: 1.4rem; }
.feature p { color: var(--stgc-color-ink-muted); margin-bottom: 0; }

/* Testimonials ------------------------------------------------------- */
.testimonial { background: var(--stgc-color-surface); border: 1px solid var(--stgc-color-border); border-radius: var(--stgc-radius-lg); padding: var(--stgc-space-lg); box-shadow: var(--stgc-shadow-sm); display: grid; gap: var(--stgc-space-sm); }
.testimonial__quote { font-size: 1.05rem; }
.testimonial__author { display: flex; align-items: center; gap: var(--stgc-space-sm); font-weight: 700; }
.testimonial__avatar { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--stgc-color-primary-soft); color: var(--stgc-color-primary); font-family: var(--stgc-font-heading); font-weight: 800; }

/* CTA band ----------------------------------------------------------- */
.cta-band { text-align: center; display: grid; gap: var(--stgc-space-md); justify-items: center; }
.cta-band .btn-row { justify-content: center; }

/* FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: var(--stgc-space-xs); }
.faq__item { border: 1px solid var(--stgc-color-border); border-radius: var(--stgc-radius-md); background: var(--stgc-color-surface); padding: var(--stgc-space-sm) var(--stgc-space-md); }
.faq__item > summary { cursor: pointer; font-weight: 700; font-family: var(--stgc-font-heading); list-style: none; display: flex; justify-content: space-between; gap: var(--stgc-space-sm); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item[open] { box-shadow: var(--stgc-shadow-sm); }
.faq__item p { color: var(--stgc-color-ink-muted); margin-top: var(--stgc-space-xs); margin-bottom: 0; }

/* Icons -------------------------------------------------------------- */
.icon { width: 1.5rem; height: 1.5rem; flex: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icon--lg { width: 2rem; height: 2rem; }

/* Site chrome -------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; gap: var(--stgc-space-md); align-items: center; justify-content: space-between; padding: var(--stgc-space-sm) var(--stgc-space-md); background: color-mix(in srgb, var(--stgc-color-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--stgc-color-border); }
.site-header .container { display: contents; }
.brand { color: var(--stgc-color-ink); font-family: var(--stgc-font-heading); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--stgc-space-sm); align-items: center; }
.site-header nav a { color: var(--stgc-color-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.site-header nav a:hover { color: var(--stgc-color-primary); }
.header-call { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.55em 1.05em; border-radius: var(--stgc-radius-md); background: var(--stgc-color-primary); color: var(--stgc-color-on-primary); font-weight: 700; text-decoration: none; }
.header-call .icon { width: 1.1rem; height: 1.1rem; }

.site-footer { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--stgc-space-lg); padding: var(--stgc-space-xl) var(--stgc-space-md); background: var(--stgc-color-surface-sunken); border-top: 1px solid var(--stgc-color-border); }
.site-footer .brand { font-size: 1.05rem; }
.nap { display: grid; gap: var(--stgc-space-xs); color: var(--stgc-color-ink-muted); margin-top: var(--stgc-space-xs); }
.nap a { color: var(--stgc-color-primary); }
.site-footer nav { display: grid; gap: var(--stgc-space-xs); }
.site-footer nav a { color: var(--stgc-color-ink); text-decoration: none; }

/* Mobile sticky click-to-call --------------------------------------- */
.callbar { display: none; }
@media (max-width: 860px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split, .hero--split .container { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; }
  .site-header nav { width: 100%; order: 3; overflow-x: auto; }
  .site-footer { grid-template-columns: 1fr; }
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: var(--stgc-space-sm); padding: var(--stgc-space-sm); background: color-mix(in srgb, var(--stgc-color-surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--stgc-color-border); }
  .callbar .btn { flex: 1; }
}

[data-stgc-menu-toggle] { display: none; border: 1px solid var(--stgc-color-border); border-radius: var(--stgc-radius-md); background: var(--stgc-color-surface); color: var(--stgc-color-ink); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 901px) { [data-stgc-nav][hidden] { display: flex !important; } }
@media (max-width: 900px) {
  [data-stgc-header] { min-height: 72px; flex-wrap: nowrap !important; }
  [data-stgc-header] .brand { min-width: 0; max-inline-size: 48vw; font-size: 1rem; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  [data-stgc-menu-toggle] { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .45rem .7rem; }
  [data-stgc-header] [data-stgc-nav] { position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 1; display: grid; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--stgc-color-border); background: var(--stgc-color-surface); box-shadow: var(--stgc-shadow-md); }
  [data-stgc-header] [data-stgc-nav][hidden] { display: none; }
  [data-stgc-header] .header-call { padding: .65rem; font-size: 0; }
  [data-stgc-header] .header-call .stgc-icon, [data-stgc-header] .header-call .icon { width: 1.15rem; height: 1.15rem; }
}

@media (min-width: 861px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none !important; } }