@charset "utf-8";
/* ==========================================================================
   SmartLab homepage — variation B
   Same copy and information as the production homepage, restructured and
   restyled for a B2B enterprise buyer.

   BRAND COMPLIANCE (Ludic Group Brand Guidelines, Brand 03 — SmartLab)
   • Typeface: Lato only, weights 300 / 400 / 700 / 900. No other face.
   • Logo is always the supplied SVG. Never typeset.
   • Accent Blue #5B8EDB is the primary representative colour for CTAs and UI.
   • Never Ludic Deep Blue #44597B or Studio Yellow #FCCE2D.
   • Never a black background.
   • WCAG AA is non-negotiable (4.5:1 normal text, 3:1 large text / UI).

   Accent Blue on white is 3.31:1 — fine for large display type, graphics and
   UI borders, but short of 4.5:1 for body-size text. So the palette carries
   two members of the same hue family: --blue is the brand Accent Blue, used
   for fills, large type and graphics; --blue-ink is a one-step-deeper
   derivative used wherever blue carries text at body size (links, button
   labels, eyebrows). Every pairing below is annotated with its ratio.
   ========================================================================== */

/* --- Webfonts (self-hosted Lato, latin subset) --------------------------- */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../Assets/fonts/lato-300-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../Assets/fonts/lato-400-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../Assets/fonts/lato-700-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../Assets/fonts/lato-900-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../Assets/fonts/lato-400-italic-latin.woff2') format('woff2'); }

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Brand */
  --blue:        #5b8edb;  /* Accent Blue — brandkit main accent            */
  --blue-ink:    #3a6fbf;  /* text-safe derivative · 4.99:1 on white        */
  --blue-deep:   #1b2775;  /* dark blue from the production newsletter band */
  --blue-tint:   #f4f7fd;  /* section wash, as per the production homepage  */
  --blue-tint-2: #e7eefa;  /* borders / dividers inside tinted sections     */

  /* Neutrals — text ink is the production site's #3b3b3b family */
  --ink:         #24272e;  /* 13.6:1 on white                               */
  --ink-2:       #4a4f5a;  /*  8.0:1 on white — secondary body              */
  --ink-3:       #6b7280;  /*  4.9:1 on white — meta, smallest allowed use  */
  --line:        #e2e7f0;
  --line-2:      #cfd8e6;
  --surface:     #ffffff;
  --surface-2:   #fafbfd;

  /* Product accents. Each colour has a brand value (fills, large graphics)
     and, where the brand value can't clear 4.5:1, a text-safe derivative of
     the same hue for anything carrying body-size text at small sizes.     */
  --orange:      #fc5221;  /* SmartLab Orange — the single orange value    */
  --orange-tint: #fff5f2;  /* orange section wash                           */
  --purple:      #865aa1;  /* SmartLab Purple — the single purple value     */
  --purple-tint: #faf8fc;  /* purple section wash (keeps meta text at 4.58) */

  /* Generic accent aliases. Every shared component reads these, so a page
     theme is a five-line override (see the theme blocks below).
       --accent       large display type, graphics, decorative fills
       --accent-ink   accent carrying text: eyebrows, headings, links
       --accent-fill  button and control fills
       --accent-on    label colour that sits on an --accent-fill
       --accent-tint  section wash                                         */
  --accent:      var(--blue);
  --accent-ink:  var(--blue-ink);
  --accent-fill: var(--blue-ink);
  --accent-tint: var(--blue-tint);
  --accent-on:   #ffffff;
  /* Light counterpart for display type on the deep-blue bands. */
  --accent-onDark: #8FB4F0;

  /* Text that sits on a dark band. --accent-onDark above is for *display*
     type; these two are for prose. Theme-independent on purpose: the deep-blue
     band is the same colour on every page, so its body text is too.
       --ink-onDark    9.51:1 on --blue-deep · lede, captions, stat labels
       --ink-onDark-2  5.44:1 on --blue-deep · sources and small print       */
  --ink-onDark:   #cddcf5;
  --ink-onDark-2: #93a7cf;

  /* The footer is its own near-black surface rather than --blue-deep, so it
     carries its own three values. Ratios are against --footer-bg.          */
  --footer-bg:     #1a1d24;
  --footer-ink:    #c9ced8;  /* 10.68:1 */
  --footer-ink-2:  #9aa2b1;  /*  6.57:1 — legal strip */

  /* Required-field marker inside the dark newsletter band. 8.97:1. */
  --req-onDark: #ffc9b8;

  /* Scale */
  --shell: 1200px;
  --header-h: 76px;      /* sticky site header; the in-page bar pins below it */
  --jumpnav-h: 56px;
  --gap: 24px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;       /* completes the radius scale; pills and round chips */
  --shadow-sm: 0 1px 2px rgba(36,39,46,.06), 0 2px 8px rgba(36,39,46,.05);
  --shadow-md: 0 2px 4px rgba(36,39,46,.05), 0 12px 32px rgba(36,39,46,.08);
  --shadow-lg: 0 8px 24px rgba(30,51,88,.10), 0 32px 64px rgba(30,51,88,.10);

  /* Type. Only the three sizes that actually recur get a name — 97 of the
     site's 160 font-size declarations. The clamp() display sizes stay literal
     on purpose: each is a bespoke fluid curve for one heading, and hiding it
     behind a variable would make it harder to read, not easier.            */
  --fs-sm:   .875rem;
  --fs-base: .9375rem;
  --fs-lg:   1.0625rem;

  /* Motion. One duration+easing pair covers 22 of the 29 transitions. */
  --t-fast: .18s ease;

  /* The default reading measure for lede paragraphs. Other measures (74ch,
     68ch, 56ch) are per-component and stay literal.                        */
  --measure: 62ch;
}

/* --- Breakpoint ladder ---------------------------------------------------
   Custom properties cannot be used inside @media — that is a CSS restriction,
   not an oversight — so these values are retyped throughout. Four site-wide
   steps, plus one documented component exception. Change all occurrences of a
   step together.

     1080px   three-up grids collapse to two-up
      991px   tablet: nav collapses to the panel, two-up becomes one-up
      767px   phone: single column, tighter shell padding
      479px   small phone: the last two-up grids collapse

   Exception: .awardwall drops to two columns at 560px rather than 479px,
   because the Fosway badge sub-line becomes unreadable at three columns below
   about 560px. Reasoned at the rule itself in smartlab-v2-product.css.
   ------------------------------------------------------------------------- */

/* Events / Event App theme — SmartLab Orange #FC5221 throughout.
   NOTE: white on #FC5221 measures 3.30:1. That clears AA for large text
   (>=24px, or >=18.66px bold) and for UI components, but not the 4.5:1 for
   body-size text. Set on client direction so the exact brand orange is used
   everywhere; see the "Known contrast exceptions" section of the README. */
[data-theme="events"] {
  --accent:      var(--orange);
  --accent-ink:  var(--orange);
  --accent-fill: var(--orange);
  --accent-tint: var(--orange-tint);
  --accent-on:   #ffffff;
  --accent-onDark: #FFB59B;
}

/* Programs theme — SmartLab Purple #865AA1 throughout. Clears AA in every
   pairing used here: 5.26:1 as text on white, 5.26:1 with a white label. */
[data-theme="programs"] {
  --accent:      var(--purple);
  --accent-ink:  var(--purple);
  --accent-fill: var(--purple);
  --accent-tint: var(--purple-tint);
  --accent-on:   #ffffff;
  --accent-onDark: #C6ACDC;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.15; font-weight: 300; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--surface); color: var(--blue-ink);
  padding: 12px 20px; border-radius: var(--r-sm); font-weight: 700;
  box-shadow: var(--shadow-md); transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* --- Layout -------------------------------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.shell--narrow { max-width: 860px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--tint { background: var(--blue-tint); }
.section--surface2 { background: var(--surface-2); }

/* --- Type scale ---------------------------------------------------------- */
.eyebrow {
  font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 16px;
}

.h1 { font-size: clamp(2.5rem, 5.1vw, 4rem); font-weight: 300; letter-spacing: -.02em; }
.h1 strong { font-weight: 900; color: var(--ink); }
.h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 300; letter-spacing: -.015em; }
.h2 strong { font-weight: 900; }
.accent-display strong, strong.accent-display { color: var(--accent); }
.h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; }
.h4 { font-size: var(--fs-lg); font-weight: 700; }

/* The 244 inline style="margin-top:…" attributes on .lede and .btn-row elements
   look like a default that belongs here, and the CSS audit proposed moving them.
   Do NOT. Checked 2026-08-13: of 345 .lede elements only 91 carry an inline
   margin-top, so a default here would shift the other 254 — most of which get
   their spacing from a companion class (.phero__lede, .cta__lede) or from the
   flow. The inline values encode per-instance decisions that no class default
   reproduces. Left as-is deliberately; the fix would be riskier than the debt. */
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.body-lg { font-size: var(--fs-lg); line-height: 1.65; }
.meta { font-size: var(--fs-sm); color: var(--ink-3); }

.accent { color: var(--accent-ink); }      /* body-size accent text */
.accent-display { color: var(--accent); }  /* large display accent only */
.measure { max-width: var(--measure); }
.center { text-align: center; }
.center .measure { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 700; line-height: 1;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* Every variant inverts on hover: a filled button empties out, an outlined
   button fills in. Both states of every pair clear WCAG AA. */

/* Primary — white on --blue-ink 4.99:1  ⇄  --blue-ink on white 4.99:1 */
.btn--primary { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: transparent; border-color: var(--blue-ink); color: var(--blue-ink); box-shadow: none; }

/* Secondary — accent-themed outline that fills on hover. */
.btn--secondary { background: transparent; border-color: var(--line-2); color: var(--accent-ink); }
.btn--secondary:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }

/* Events colour, used on the homepage solution card: #FC5221 fill, white label */
.btn--orange { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--shadow-sm); }
.btn--orange:hover { background: transparent; border-color: var(--orange); color: var(--orange); box-shadow: none; }

/* Programs colour, used on the homepage solution card: #865AA1 fill, white label */
.btn--purple { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: var(--shadow-sm); }
.btn--purple:hover { background: transparent; border-color: var(--purple); color: var(--purple); box-shadow: none; }

/* Accent — follows whichever theme the page sets. */
.btn--accent { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: transparent; border-color: var(--accent-fill); color: var(--accent-ink); box-shadow: none; }

/* Accent outline — the mirror of .btn--accent, for a secondary action that
   should still read as the page's colour rather than a neutral. */
.btn--accentOutline { background: transparent; border-color: var(--accent-fill); color: var(--accent-ink); }
.btn--accentOutline:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); box-shadow: var(--shadow-sm); }

/* On dark — white fill 13.2:1  ⇄  white outline on --blue-deep 13.2:1 */
.btn--onDark { background: #fff; border-color: #fff; color: var(--blue-deep); }
.btn--onDark:hover { background: transparent; border-color: #fff; color: #fff; }
.btn--onDarkGhost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--onDarkGhost:hover { background: #fff; border-color: #fff; color: var(--blue-deep); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue-ink); }
.link-arrow svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* NOTE: do not add a default margin-top here. See the .lede note above — 161 of
   the 307 .btn-row elements carry no inline margin and would all shift. */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row,
.btn-row.center { justify-content: center; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.site-header__logo { flex: none; }
.site-header__logo img { width: 128px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; background: none;
  font: inherit; font-size: var(--fs-base); font-weight: 400; color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav__trigger:hover { background: var(--blue-tint); color: var(--blue-ink); }
.nav__trigger svg { width: 10px; height: 10px; transition: transform var(--t-fast); }
.nav__item[data-open='true'] > .nav__trigger { background: var(--blue-tint); color: var(--blue-ink); }
.nav__item[data-open='true'] > .nav__trigger svg { transform: rotate(180deg); }

/* The panel sits 10px below the trigger. Without a bridge across that gap
   the cursor leaves both elements on the way down and the panel closes, so
   an invisible strip extends the hover area over it. Paired with a close
   delay in the JS. */
.nav__panel::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 320px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  display: none;
}
.nav__panel--wide { min-width: 620px; }
.nav__panel--events { min-width: 520px; }   /* two tiles, no title wrap */
.nav__panel--right { left: auto; right: 0; }
.nav__item[data-open='true'] > .nav__panel { display: block; }

/* Dropdown titles are colour-coded per product family. Each uses the
   text-safe member of its hue so 11px/900 and 15px/700 both clear AA. */
.nav__panelTitle {
  font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue-ink); margin: 0 0 12px;
}
.nav__panel--events   .nav__panelTitle,
.nav__panel--events   .nav__tile strong { color: var(--orange); }   /* #FC5221 */
.nav__panel--programs .nav__panelTitle,
.nav__panel--programs .nav__tile strong { color: var(--purple); }   /* #865AA1 */
.nav__panelTitle + .nav__grid { margin-bottom: 4px; }
.nav__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
.nav__grid--1 { grid-template-columns: 1fr; }
.nav__panel hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.nav__tile { display: block; padding: 12px 14px; border-radius: var(--r-sm); }
.nav__tile:hover { background: var(--surface-2); text-decoration: none; }
.nav__tile strong { display: block; font-size: var(--fs-base); font-weight: 700; color: var(--blue-ink); }
.nav__tile span { display: block; font-size: .8125rem; font-weight: 300; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.nav__tile:hover strong { text-decoration: underline; }

.nav__link { padding: 10px 14px; font-size: var(--fs-base); color: var(--ink); border-radius: var(--r-sm); }
.nav__link:hover { background: var(--blue-tint); color: var(--blue-ink); text-decoration: none; }

.site-header .btn { padding: 11px 22px; font-size: var(--fs-base); margin-left: 10px; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; margin: 0 auto;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--blue-tint);
  padding: 84px 0 0;
}
.hero__grid { display: grid; gap: 48px; align-items: start; }
.hero__copy { text-align: center; max-width: 900px; margin-inline: auto; }
.hero__title { margin-bottom: 22px; color: var(--blue); }   /* 3.31:1 — large text */
.hero__title strong { color: inherit; }
.hero__lede { max-width: 60ch; margin-inline: auto; }
.hero__actions { margin-top: 32px; justify-content: center; }
.hero__reassurance { margin-top: 18px; font-size: var(--fs-sm); color: var(--ink-3); }

/* The screenshot has a transparent background and its own device shadows,
   so it sits directly on the wash — no card, no frame. */
.hero__shot {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  margin-bottom: -72px;
}
.hero__shot img { width: 100%; }

/* Trust bar directly under the hero */
.trustbar { border-bottom: 1px solid var(--line); background: var(--surface); padding: 116px 0 44px; }
.trustbar__label {
  text-align: center; font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink-3); letter-spacing: .02em; margin-bottom: 26px;
}
.trustbar__logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 20px 46px;
}
.trustbar__logos img {
  width: auto; opacity: .8;
  transition: opacity var(--t-fast);
  /* Optical sizing: wordmarks read larger than roundels at equal height, so
     each shape class gets its own cap rather than one blanket height. */
  height: 46px; max-width: 190px;
}
.trustbar__logos img:hover { opacity: 1; }
.trustbar__logos img.is-round { height: 64px; }
.trustbar__logos img.is-tall  { height: 66px; }

/* ==========================================================================
   Proof band — the customer outcome, promoted high up the page
   ========================================================================== */
.proof { background: var(--blue-deep); color: #fff; padding: 84px 0; }
.proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 56px; align-items: center; }

.proof__stat { text-align: left; }
.proof__statNum {
  font-size: clamp(4rem, 9vw, 6.5rem); font-weight: 900; line-height: .9;
  letter-spacing: -.03em; color: #fff;
}
.proof__statLabel {
  margin-top: 14px; font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink-onDark);                     /* 9.4:1 on --blue-deep */
}
.proof__quote { margin: 0; }
.proof__quote blockquote { margin: 0; }
.proof__quote img { width: 44px; opacity: .55; margin-bottom: 20px; filter: brightness(0) invert(1); }
.proof__quote p.q {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem); font-weight: 300; line-height: 1.35;
  color: #fff; letter-spacing: -.01em;
}
.proof__quote figcaption { margin-top: 22px; font-size: var(--fs-base); font-weight: 700; color: var(--ink-onDark); }

.proof__foot {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.proof__footText { font-size: var(--fs-base); color: var(--ink-onDark); max-width: 56ch; }
.proof__footText strong { color: #fff; }

/* ==========================================================================
   What SmartLab is
   ========================================================================== */
.definition__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px 56px; margin-top: 40px; }
.definition__col { font-size: 1.125rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.definition__col strong { font-weight: 900; color: var(--ink); }
.definition__col::before {
  content: ''; display: block; width: 44px; height: 3px;
  background: var(--blue); border-radius: 2px; margin-bottom: 22px;
}

/* ==========================================================================
   Solutions
   ========================================================================== */
.solutions__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; margin-top: 48px; }

.solution {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.solution:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.solution__media {
  background: var(--blue-tint);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 22px 22px 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.solution__media img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.solution__body { padding: 28px 30px 32px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.solution__body h3 { font-weight: 300; }
.solution__body h3 strong { font-weight: 900; }
.solution__body .btn { align-self: flex-start; margin-top: auto; }
.solution__tag--events   strong:last-child { color: var(--orange); }   /* #FC5221 */
.solution__tag--programs strong:last-child { color: var(--purple); }   /* #865AA1 */

/* ==========================================================================
   SmartLab AI
   ========================================================================== */
.ai__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.ai__media { display: flex; justify-content: center; }
.ai__media img { max-width: 580px; width: 100%; }
.ai__copy h2 { margin-bottom: 18px; }
.ai__copy p { margin-bottom: 26px; }

/* ==========================================================================
   Features
   ========================================================================== */
.features__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 48px;
}
.feature {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px 24px 28px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.feature:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.feature__icon {
  width: 48px; height: 48px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-tint); border-radius: 10px;
}
.feature__icon img { width: 28px; height: 28px; }
.feature h3 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.feature p { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); }

/* ==========================================================================
   Industries
   ========================================================================== */
.industries__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; margin-top: 48px; }
.industry {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 32px 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.industry:hover {
  border-color: var(--blue); box-shadow: var(--shadow-sm);
  transform: translateY(-2px); color: var(--blue-ink); text-decoration: none;
}
.industry__icon { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; }
.industry__icon svg { width: auto; height: 100%; fill: currentColor; }
.industry__label { font-size: var(--fs-base); font-weight: 700; }

/* ==========================================================================
   Security & sustainability
   ========================================================================== */
.security { background: var(--blue-tint); }
.security__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.security__badges {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
}
.security__badge {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--blue-tint-2);
  border-radius: var(--r-md); padding: 24px; min-height: 132px;
}
.security__badge img { max-height: 76px; max-width: 160px; width: auto; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.cta { background: var(--blue-deep); color: #fff; padding: 96px 0; }
.cta h2 { color: #fff; }
.cta__lede { color: var(--ink-onDark); margin-top: 18px; }
.cta__actions { margin-top: 34px; }

.cta__signup {
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px; align-items: center; text-align: left;
}
.cta__signupCopy { display: flex; gap: 18px; align-items: flex-start; }
.cta__signupCopy img { width: 40px; flex: none; filter: brightness(0) invert(1); opacity: .8; }
.cta__signupCopy p { color: #fff; font-size: 1.125rem; font-weight: 300; line-height: 1.45; }

.signup-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.signup-form .field--full { grid-column: 1 / -1; }
.signup-form label { display: block; font-size: .8125rem; font-weight: 700; color: var(--ink-onDark); margin-bottom: 6px; }
.signup-form input[type=text], .signup-form input[type=email] {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: var(--fs-base); color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-sm);
}
.signup-form input::placeholder { color: rgba(255,255,255,.5); }
.signup-form input:focus { outline: 2px solid #fff; outline-offset: 1px; background: rgba(255,255,255,.14); }
.signup-form .consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .8125rem; line-height: 1.5; color: var(--ink-onDark);
}
.signup-form .consent input { margin: 3px 0 0; flex: none; accent-color: var(--blue); }
.signup-form .req { color: var(--req-onDark); }
.signup-form button { width: 100%; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 72px 0 0; }
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0,1fr));
  gap: 48px; padding-bottom: 56px;
}
.site-footer__logo { width: 132px; margin-bottom: 22px; }
.site-footer__blurb { font-size: var(--fs-base); line-height: 1.65; max-width: 46ch; }
.site-footer h4 {
  color: #fff; font-size: 12px; font-weight: 900;
  letter-spacing: .11em; text-transform: uppercase; margin-bottom: 16px;
}
.site-footer li { margin-bottom: 10px; font-size: var(--fs-base); }
.site-footer__bar {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 24px 0; font-size: var(--fs-sm); text-align: center; color: var(--footer-ink-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .features__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .industries__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 991px) {
  .nav, .site-header .btn { display: none; }
  .nav-toggle { display: block; }

  .site-header[data-menu='open'] .nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 12px 32px 28px; margin: 0;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .site-header[data-menu='open'] .btn { display: inline-flex; margin: 16px 0 0; width: 100%; }
  .site-header[data-menu='open'] .nav__item { width: 100%; }
  .site-header[data-menu='open'] .nav__trigger { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: var(--fs-lg); }
  .site-header[data-menu='open'] .nav__link { display: block; padding: 14px 4px; font-size: var(--fs-lg); border-bottom: 1px solid var(--line); }
  .site-header[data-menu='open'] .nav__panel {
    position: static; min-width: 0; box-shadow: none; border: 0;
    border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0 16px;
  }
  .site-header[data-menu='open'] .nav__grid { grid-template-columns: 1fr; }

  .section { padding: 72px 0; }
  .proof__grid { grid-template-columns: 1fr; gap: 36px; }
  .ai__grid { grid-template-columns: 1fr; gap: 40px; }
  .ai__media { order: -1; }
  .security__grid { grid-template-columns: 1fr; gap: 40px; }
  .cta__signup { grid-template-columns: 1fr; gap: 32px; }
  .definition__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .shell { padding: 0 20px; }
  .site-header[data-menu='open'] .nav { padding-inline: 20px; }
  .hero { padding-top: 56px; }
  .hero__shot { margin-top: 32px; margin-bottom: -30px; }
  .trustbar { padding-top: 76px; }
  .solutions__grid { grid-template-columns: 1fr; gap: 24px; }
  .features__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .industries__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .security__badges { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .signup-form { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .trustbar__logos { gap: 22px 30px; }
  .trustbar__logos img { height: 34px; max-width: 132px; }
  .trustbar__logos img.is-round { height: 48px; }
  .trustbar__logos img.is-tall { height: 50px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .section { padding: 60px 0; }
  .proof { padding: 60px 0; }
  .cta { padding: 64px 0; }
}

@media (max-width: 479px) {
  .features__grid, .industries__grid { grid-template-columns: 1fr; }
}

/* --- Reveal on scroll ---------------------------------------------------- */
.reveal { opacity: 0; transform: translate3d(0, 20px, 0); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .solution:hover, .industry:hover { transform: none; }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .cta__signup, .btn { display: none !important; }
  .proof, .cta, .site-footer { background: #fff !important; color: #000 !important; }
  .proof *, .cta *, .site-footer * { color: #000 !important; }
}