/* ════════════════════════════════════════════════════════════
   EMS - One-page website · DARK THEME
   Built on the EMS Design System v2 dark tokens: deep ink-navy
   surfaces, azure accents, high-contrast text. Theme-locked dark.
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────
   1 · TOKENS (design system, dark aliases)
   ────────────────────────────── */
:root {
  --azure-50:  #EAF6FC; --azure-100: #CFEAF8; --azure-200: #A3D7F0;
  --azure-300: #6BC0E8; --azure-400: #30A6DC; --azure-500: #0C90CC;
  --azure-600: #0A78AC; --azure-700: #0B628C; --azure-800: #0E4F70;
  --azure-900: #10405A; --azure-950: #082A3B;

  --accent-300: #66C8FE; --accent-400: #33B9FD; --accent-500: #00A8FC; --accent-600: #0090DB;

  --ink-50:  #EEF3F7; --ink-100: #D5E1EA; --ink-200: #A7BECE; --ink-300: #7295AE;
  --ink-400: #476E8B; --ink-500: #2C526E; --ink-600: #1D3F58; --ink-700: #143247;
  --ink-800: #0E2637; --ink-900: #0A1D2B; --ink-950: #06131E;

  /* Semantic aliases (dark) */
  --color-primary:        var(--azure-400);
  --color-primary-hover:  var(--azure-300);
  --color-primary-subtle: rgba(48,166,220,.14);
  --color-primary-border: rgba(48,166,220,.32);
  --color-on-primary:     var(--ink-950);

  --color-text:           #E7EEF4;
  --color-text-secondary: #AEBECC;
  --color-text-muted:     #7C90A1;
  --color-heading:        #F4F8FB;
  --color-text-link:      var(--azure-300);
  --color-text-link-hover:var(--accent-400);

  --color-bg:             #07121B;
  --color-bg-tint:        #0B141C;
  --color-bg-deep:        #05101A;
  --color-surface:        #0D1F2C;
  --color-surface-subtle: #0A1926;
  --color-border:         #22384A;
  --color-border-strong:  #324B60;
  --color-border-subtle:  rgba(255,255,255,.07);

  --gradient-ink: linear-gradient(155deg, var(--ink-800) 0%, #05101A 100%);

  --color-error-fg: #F79C9C;
  --color-error: #F16565;
  --color-focus-ring: rgba(48,166,220,.55);

  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs: 12px; --text-xs: 13px; --text-sm: 14px; --text-base: 16px; --text-md: 18px;
  --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --text-4xl: 48px;

  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7;
  --tracking-tight: -0.01em; --tracking-tighter: -0.02em; --tracking-caps: 0.08em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --container-xl: 1280px;
  --control-height-md: 42px; --control-height-lg: 52px;

  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 22px; --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.4);
  --shadow-brand: 0 8px 28px rgba(12,144,204,.4);

  --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 360ms; --duration-slower: 560ms;
  --ease-standard: cubic-bezier(.2,0,0,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       box-shadow var(--duration-fast) var(--ease-standard);

  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --header-height: 88px;

  /* Soft light-dot motif for the hero fallback (dark background) */
  --dot-device: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg%3E%3Ccircle cx='200' cy='32' r='7' fill='%236BC0E8' opacity='.75'/%3E%3Ccircle cx='224' cy='56' r='5' fill='%2333B9FD' opacity='.55'/%3E%3Ccircle cx='176' cy='80' r='6' fill='%2330A6DC' opacity='.4'/%3E%3Ccircle cx='224' cy='104' r='8' fill='%23A9D8F5' opacity='.6'/%3E%3Ccircle cx='200' cy='128' r='4' fill='%236BC0E8' opacity='.35'/%3E%3Ccircle cx='152' cy='56' r='4' fill='%2330A6DC' opacity='.3'/%3E%3Ccircle cx='224' cy='176' r='6' fill='%2333B9FD' opacity='.45'/%3E%3Ccircle cx='176' cy='200' r='5' fill='%236BC0E8' opacity='.4'/%3E%3Ccircle cx='128' cy='128' r='4' fill='%2330A6DC' opacity='.25'/%3E%3Ccircle cx='200' cy='224' r='6' fill='%23A9D8F5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; }
}

/* ──────────────────────────────
   2 · BASE
   ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h4, h5 { font-family: var(--font-sans); font-weight: 600; margin: 0 0 .5em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-text-link); text-decoration: none; text-underline-offset: 2px; transition: var(--transition-colors); }
a:hover { color: var(--color-text-link-hover); text-decoration: underline; }
img, svg { max-width: 100%; height: auto; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
::selection { background: var(--azure-300); color: var(--ink-950); }

.container { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); }

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-weight: 600; font-size: var(--text-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Section rhythm */
.section { padding-block: var(--space-20); }
.section--tint { background: var(--color-bg-tint); }
@media (min-width: 768px) { .section { padding-block: var(--space-32); } }

.section__heading {
  font-size: clamp(var(--text-2xl), 2.6vw + 14px, var(--text-3xl));
  line-height: var(--leading-tight);
  max-width: 24ch;
}
.section__header { max-width: 64ch; margin-bottom: var(--space-12); }
.section__intro { font-size: var(--text-md); color: var(--color-text-secondary); max-width: 56ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-400);
  margin: 0 0 var(--space-3);
}

/* ──────────────────────────────
   3 · BUTTONS (design system, dark)
   ────────────────────────────── */
.ems-btn {
  --_h: var(--control-height-md);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: var(--_h); padding-inline: var(--space-5);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; user-select: none;
  transition: var(--transition-colors);
  -webkit-tap-highlight-color: transparent;
}
.ems-btn:hover { text-decoration: none; }
.ems-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ems-btn--sm { --_h: 34px; padding-inline: var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.ems-btn--lg { --_h: var(--control-height-lg); padding-inline: var(--space-7); font-size: var(--text-md); }

/* Primary: light azure fill with ink text (DS dark tokens, ~7:1) */
.ems-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.ems-btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-brand); color: var(--color-on-primary); }
.ems-btn--primary:active { background: var(--azure-200); color: var(--color-on-primary); }

.ems-btn--outline { background: rgba(7,18,27,.4); color: var(--color-text); border-color: var(--color-border-strong); }
.ems-btn--outline:hover { color: var(--azure-300); border-color: var(--azure-400); background: var(--color-primary-subtle); }
.ems-btn--outline:active { background: rgba(48,166,220,.22); }

.ems-btn[disabled], .ems-btn.is-loading { opacity: .7; pointer-events: none; }

.ems-btn__spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin 1s linear infinite;
}
.ems-btn.is-loading .ems-btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ems-btn__spinner { animation: none; } }

/* ──────────────────────────────
   4 · HEADER
   ────────────────────────────── */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  height: var(--header-height);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  max-width: var(--container-xl); margin-inline: auto;
  height: 100%; padding-inline: var(--space-6);
  display: flex; align-items: center; gap: var(--space-8);
}
.site-header__brand { display: inline-flex; align-items: center; flex: none; }
.site-header__logo { height: 46px; width: auto; display: block; }

.site-header.is-scrolled {
  background: rgba(7,18,27,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.site-nav { display: flex; align-items: center; gap: var(--space-8); margin-inline-start: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-7); list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  font-size: var(--text-base); font-weight: 500;
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
}
.site-nav__list a:hover { color: #fff; text-decoration: none; }
.site-nav__list a[aria-current] { color: var(--azure-300); }

/* Only one demo CTA on screen at a time: while the hero (with its own
   primary CTA) is in view, the header CTA stays hidden, then fades in
   as the visitor scrolls past. Desktop only - on small screens the
   header CTA lives inside the menu overlay anyway. */
@media (min-width: 900px) {
  .site-nav__cta {
    opacity: 0; visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-standard),
                visibility 0s var(--duration-base);
  }
  .site-header.is-scrolled .site-nav__cta {
    opacity: 1; visibility: visible;
    transition: opacity var(--duration-base) var(--ease-standard), visibility 0s;
  }
}

.site-header__toggle {
  display: none; margin-inline-start: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-md);
  color: var(--color-text); cursor: pointer; transition: var(--transition-colors);
}
.site-header__toggle .icon { width: 24px; height: 24px; }
.site-header__toggle .icon--close { display: none; }
.site-header.is-open .icon--menu { display: none; }
.site-header.is-open .icon--close { display: block; }

@media (max-width: 899px) {
  :root { --header-height: 76px; }
  .site-header__logo { height: 40px; }
  /* Solid header on small screens keeps the logo and menu crisp */
  .site-header {
    background: rgba(7,18,27,.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom-color: var(--color-border-subtle);
  }
  .site-header__toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: var(--header-height); inset-inline: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--space-6) var(--space-6);
  }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: block; padding: var(--space-4) 0;
    font-size: var(--text-base); color: var(--color-text);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .site-nav__list a[aria-current] { color: var(--azure-300); }
  .site-nav__cta { margin-top: var(--space-5); justify-content: center; }
}

/* ──────────────────────────────
   5 · HERO
   ────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse 60% 55% at 74% 40%, rgba(0,168,252,.09) 0%, transparent 62%),
    radial-gradient(ellipse 55% 42% at 50% -12%, rgba(0,168,252,.09) 0%, transparent 62%),
    linear-gradient(170deg, #0A1926 0%, #07121B 55%, #05101A 100%);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg::after {
  /* static dot motif fallback, fades once the canvas is live */
  content: ""; position: absolute; bottom: 4%; right: 0; width: min(58vw, 760px); height: 42%;
  background-image: var(--dot-device);
  background-size: 200px 200px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
  mask-image: linear-gradient(to top, #000 30%, transparent 100%);
  transition: opacity var(--duration-slower) var(--ease-standard);
}
.hero.is-canvas-ready .hero__bg::after { opacity: 0; }
/* When WebGL is unavailable the dot motif itself breathes gently */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero:not(.is-canvas-ready) .hero__bg::after {
    animation: pixel-breathe 6s var(--ease-standard) infinite alternate;
  }
}
@keyframes pixel-breathe {
  from { opacity: .5; transform: translateY(0); }
  to   { opacity: .85; transform: translateY(-12px); }
}
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s var(--ease-standard);
}
.hero.is-canvas-ready .hero__canvas { opacity: 1; }

.hero__inner { position: relative; z-index: 1; width: 100%; padding-block: calc(var(--header-height) + var(--space-10)) var(--space-16); }
.hero__content { max-width: 780px; }
.hero__title {
  font-size: clamp(38px, 3.2vw + 14px, 56px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: #fff;
  margin-bottom: var(--space-6);
}
.hero__sub {
  font-size: clamp(var(--text-base), 1vw + 12px, var(--text-md));
  line-height: var(--leading-relaxed);
  color: var(--ink-100);
  max-width: 52ch;
  margin-bottom: var(--space-8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__sentinel { position: absolute; bottom: 0; height: 1px; width: 100%; }

@media (max-width: 639px) {
  .hero__actions .ems-btn { width: 100%; }
  .hero__bg::after { bottom: 0; right: -10%; opacity: .4; }
}

/* Entrance: headline, sub, and actions rise in sequence on load. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__title, html.js .hero__sub, html.js .hero__actions {
    opacity: 0; transform: translateY(24px);
    animation: hero-rise .9s var(--ease-out) forwards;
  }
  html.js .hero__sub { animation-delay: .16s; }
  html.js .hero__actions { animation-delay: .32s; }
}
@keyframes hero-rise { to { opacity: 1; transform: none; } }

/* ──────────────────────────────
   6 · CREDIBILITY
   ────────────────────────────── */
.cred { padding-block: var(--space-16) var(--space-20); background: var(--color-bg); }
@media (min-width: 768px) { .cred { padding-block: var(--space-20) var(--space-24); } }
.cred__intro { max-width: 60ch; }
.cred__heading { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.cred__body { color: var(--color-text-secondary); margin: 0; }
.cred__metrics {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  margin: var(--space-10) 0 0; padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}
@media (min-width: 768px) { .cred__metrics { grid-template-columns: repeat(4, 1fr); } }
.cred__metric { display: flex; flex-direction: column; }
.cred__metric dt {
  order: 2;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.cred__metric dd {
  order: 1; margin: 0 0 var(--space-1);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(var(--text-3xl), 3vw + 16px, var(--text-4xl));
  line-height: 1; letter-spacing: var(--tracking-tight);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cred__plus { color: var(--accent-400); }

/* ──────────────────────────────
   7 · ABOUT
   ────────────────────────────── */
.about__grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 7fr 5fr; gap: var(--space-20); } }
.about__text p { color: var(--color-text-secondary); max-width: 58ch; }
.about__text .section__heading { margin-bottom: var(--space-6); }
.about__focus { color: var(--color-text); font-weight: 500; }
.about__visual img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-lg);
}

/* ──────────────────────────────
   8 · SOLUTIONS
   ────────────────────────────── */
.solutions__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .solutions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .solutions__grid { grid-template-columns: repeat(6, 1fr); }
  .sol-card { grid-column: span 2; }
  .sol-card--featured { grid-column: span 4; }
}

.sol-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  overflow: hidden;
  transition: var(--transition-colors), box-shadow var(--duration-base) var(--ease-standard);
}
.sol-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-border); }
.sol-card h3 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
.sol-card p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0; max-width: 46ch; }

.sol-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-subtle); color: var(--azure-300);
  border: 1px solid var(--color-primary-border);
}
.sol-card__icon svg { width: 22px; height: 22px; }

/* Featured card carries the generated platform-network image */
.sol-card--featured {
  background:
    linear-gradient(115deg, rgba(7,18,27,.92) 0%, rgba(7,18,27,.66) 52%, rgba(7,18,27,.28) 100%),
    url("../assets/img/solutions-platforms.webp") right center / cover no-repeat;
  border-color: rgba(48,166,220,.25);
}
.sol-card--featured h3 { color: #fff; }
.sol-card--featured p { color: var(--ink-100); }
.sol-card--featured .sol-card__icon {
  background: rgba(0,168,252,.16); color: var(--accent-300); border-color: rgba(0,168,252,.35);
}

.sol-card--accent { background: rgba(48,166,220,.07); border-color: rgba(48,166,220,.22); }
.sol-card--accent:hover { border-color: var(--color-primary-border); }
.sol-card--accent .sol-card__icon { background: rgba(7,18,27,.5); }

/* ──────────────────────────────
   9 · AGENTX
   ────────────────────────────── */
.agentx {
  position: relative;
  background: var(--color-bg-deep);
  color: var(--ink-100);
  padding-block: var(--space-20);
  overflow: hidden;
}
@media (min-width: 768px) { .agentx { padding-block: var(--space-32); } }
.agentx__backdrop {
  /* the generated particle-swarm image, dissolving in from the right */
  position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/img/agentx-visual.webp") right center / cover no-repeat;
  opacity: .38;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 80% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 95% at 80% 50%, #000 0%, transparent 72%);
}
.agentx__grid { position: relative; display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 900px) { .agentx__grid { grid-template-columns: 7fr 5fr; gap: var(--space-20); } }

.agentx__heading {
  font-size: clamp(44px, 5vw + 12px, 72px);
  line-height: 1.05; letter-spacing: var(--tracking-tighter);
  color: #fff; margin-bottom: var(--space-2);
}
.agentx__tagline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 1.4vw + 12px, var(--text-xl));
  color: var(--accent-300);
  margin-bottom: var(--space-6);
}
.agentx__intro > p { color: var(--ink-100); max-width: 56ch; }

.agentx__traits { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.agentx__traits li {
  font-size: var(--text-xs); font-weight: 500; color: var(--ink-100);
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}

.agentx__demo-panel {
  background: rgba(13,31,44,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
}
.agentx__demo-panel h3 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-4); }
.agentx__demo-panel p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-100); }
.agentx__cta { margin-top: var(--space-6); }
@media (max-width: 479px) {
  .agentx__cta { width: 100%; padding-inline: var(--space-4); font-size: var(--text-base); }
}

/* ──────────────────────────────
   10 · WHY EMS
   ────────────────────────────── */
.why__grid { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 900px) {
  .why__grid { grid-template-columns: 5fr 7fr; gap: var(--space-20); }
  .why__lead { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
}
.why__lead img {
  display: block; width: 100%; max-width: 420px; height: auto;
  margin-top: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-md);
}
.why__item { padding-block: var(--space-7); }
.why__item + .why__item { border-top: 1px solid var(--color-border-subtle); }
.why__item:first-child { padding-top: 0; }
.why__item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.why__item p { color: var(--color-text-secondary); margin: 0; max-width: 58ch; }

/* ──────────────────────────────
   11 · CONTACT
   ────────────────────────────── */
.contact__grid { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--space-20); } }
.contact__lead .section__heading { margin-bottom: var(--space-6); }
.contact__lead > p { color: var(--color-text-secondary); max-width: 50ch; }

.contact__channels { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-10); }
.contact__channels li { display: flex; align-items: center; gap: var(--space-4); }
.contact__channel-icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--azure-300);
  border: 1px solid var(--color-border);
}
.contact__channel-icon svg { width: 20px; height: 20px; }
.contact__channel-body { display: flex; flex-direction: column; }
.contact__channel-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.contact__channel-body a { font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums; }
.contact__channel-body a:hover { color: var(--azure-300); }

.contact__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-5);
}
@media (min-width: 768px) { .contact__form { padding: var(--space-10); } }
.contact__form-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .contact__form-row { grid-template-columns: 1fr 1fr; } }

/* Fields (design system, dark) */
.ems-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ems-field__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.ems-field__req { color: var(--color-error); margin-inline-start: 2px; }
.ems-field__error {
  margin: 0; display: flex; align-items: baseline; gap: 5px;
  font-size: var(--text-xs); color: var(--color-error-fg);
}
.ems-input, .ems-select, .ems-textarea {
  width: 100%; height: var(--control-height-md);
  padding-inline: var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--color-text); background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  transition: var(--transition-colors);
  -webkit-appearance: none; appearance: none;
}
.ems-input:hover, .ems-select:hover, .ems-textarea:hover { border-color: var(--ink-400); }
.ems-input:focus, .ems-select:focus, .ems-textarea:focus {
  outline: none; border-color: var(--azure-400); box-shadow: var(--focus-ring);
}
.ems-input--invalid, .ems-textarea--invalid { border-color: var(--color-error); }
.ems-textarea { height: auto; min-height: 120px; padding-block: var(--space-3); resize: vertical; }
.ems-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237C90A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center;
  padding-inline-end: var(--space-10);
}
.ems-select option { background: var(--color-surface); color: var(--color-text); }

.contact__form-footer { margin-top: var(--space-2); }
@media (max-width: 639px) { .contact__form-footer .ems-btn { width: 100%; } }

.contact__form-status {
  margin: 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); border: 1px solid;
  font-size: var(--text-sm);
}
.contact__form-status--success { background: rgba(27,154,84,.14); border-color: rgba(27,154,84,.32); color: #7CD7A2; }
.contact__form-status--error { background: rgba(220,47,47,.16); border-color: rgba(220,47,47,.36); color: #F79C9C; }
.contact__form-status--info { background: rgba(48,166,220,.14); border-color: rgba(48,166,220,.32); color: var(--azure-200); }

/* ──────────────────────────────
   12 · FOOTER
   ────────────────────────────── */
.footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--ink-100);
  padding-block: var(--space-16) var(--space-8);
}
.footer__grid { display: grid; gap: var(--space-10); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 6fr 3fr 3fr; gap: var(--space-16); } }
.footer__logo { height: 44px; width: auto; margin-bottom: var(--space-5); }
.footer__about p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-200); max-width: 48ch; }
.footer h4 { color: #fff; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.footer__links ul, .footer__contact ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a, .footer__contact a { color: var(--ink-200); font-size: var(--text-sm); }
.footer__links a:hover, .footer__contact a:hover { color: #fff; text-decoration: none; }
.footer__contact a { font-variant-numeric: tabular-nums; }

.footer__legal {
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}
.footer__legal p { font-size: var(--text-xs); color: var(--ink-300); margin: 0; }

/* ──────────────────────────────
   13 · REVEAL ANIMATION
   ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--duration-slower) var(--ease-out),
      transform var(--duration-slower) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
}