/* ==========================================================================
   Caspian ERP marketing site — design system
   Single stylesheet, no build step. Tokens and components are documented in
   DESIGN.md. Keep the two in sync.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;

  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --cyan-400:   #22d3ee;
  --cyan-500:   #06b6d4;
  --teal-500:   #14b8a6;
  --emerald-50: #ecfdf5;
  --emerald-400:#34d399;
  --emerald-500:#10b981;
  --emerald-600:#059669;
  --amber-500:  #f59e0b;
  --rose-500:   #f43f5e;

  /* Neutrals */
  --white:     #ffffff;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --ink:       #0e0f13;   /* dark sections, footer, device frames */
  --ink-2:     #17181e;   /* cards on ink */
  --cream:     #f7f2ec;   /* warm soft sections */
  --paper:     #f9f8fb;   /* the light ground inside the hero frame */

  /* Semantic */
  --bg:            var(--white);
  --bg-soft:       var(--cream);
  --text:          var(--slate-900);
  --text-muted:    var(--slate-500);
  --text-inverse:  #e6e8ef;
  --border:        #e7e7ee;
  --border-strong: #d9dbe4;
  --primary:       var(--indigo-600);
  --primary-hover: var(--indigo-700);

  /* Radii — generous everywhere; pills for controls */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Shadows — surfaces rest flat and gain a shadow on hover */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 10px 28px -10px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 28px 56px -22px rgba(15, 23, 42, .26), 0 8px 20px -12px rgba(15, 23, 42, .10);
  --shadow-brand: 0 10px 24px -10px rgba(79, 70, 229, .5);

  /* Layout */
  --container: 1240px;
  --gutter: 24px;
  --nav-h: 64px;
  --inset: clamp(10px, 1.6vw, 24px);   /* the gap between a dark block and the viewport edge */

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 36px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--slate-900);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.4rem + 3.8vw, 4.25rem); letter-spacing: -0.045em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); letter-spacing: -0.04em; line-height: 1.06; }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem); letter-spacing: -0.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.012em; }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color .16s ease;
}
a:hover { color: var(--primary-hover); }

img, svg { max-width: 100%; display: block; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--indigo-500);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--indigo-100); color: var(--indigo-700); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 860px; }

.section { padding-block: clamp(64px, 5vw + 32px, 120px); }
.section-tight { padding-block: clamp(40px, 3vw + 24px, 72px); }
.section-soft { background: var(--bg-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--white);
  color: var(--primary);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { left: 0; }

/* Section heading block — left-aligned editorial layout by default; `.center`
   centres it, `.section-head.split` puts the heading left and the paragraph
   (or an action) on the right, the way a magazine spread does. */
.section-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  max-width: 600px;
}
.section-head.center p { margin-inline: auto; }
.section-head.split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 96px);
  align-items: end;
}
.section-head.split > div:last-child { padding-bottom: 6px; }
.section-head.split > div:last-child p { margin-top: 0; }
.section-head.split .row { margin-top: 20px; }
@media (max-width: 860px) {
  .section-head.split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* Eyebrow — a numbered kicker with a small brand tile, not a pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-600);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.eyebrow svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  flex: none;
}
.eyebrow .num { color: var(--primary); font-variant-numeric: tabular-nums; }
.eyebrow .num::after { content: "·"; margin-inline-start: 10px; color: var(--slate-300); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--slate-600);
  line-height: 1.65;
}

/* Generic grids */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Buttons — pills
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn:hover { color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--primary); box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 14px 30px -12px rgba(79, 70, 229, .6); }

.btn-secondary {
  background: var(--white);
  color: var(--slate-900);
  border-color: var(--border-strong);
}
.btn-secondary:hover { color: var(--slate-900); border-color: var(--slate-900); background: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--slate-700);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--slate-900); background: var(--slate-100); }

.btn-dark {
  background: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .6);
}
.btn-dark:hover { background: #26272f; }

.btn-onDark {
  background: var(--white);
  color: var(--slate-900);
}
.btn-onDark:hover { color: var(--slate-900); background: #eef2ff; }

.btn-outline-onDark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.btn-outline-onDark:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

.btn-lg { height: 56px; padding-inline: 28px; font-size: 1rem; }
.btn-sm { height: 40px; padding-inline: 16px; font-size: .875rem; }
.btn-block { width: 100%; }

/* Round icon-only button — carousel arrows, "next" affordances */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--slate-900);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn-round svg { width: 18px; height: 18px; }
.btn-round:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.btn-round.on { background: var(--primary); color: #fff; border-color: var(--primary); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .9375rem;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .16s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Badges / pills / chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--slate-100);
  color: var(--slate-600);
  white-space: nowrap;
}
.badge-indigo  { background: var(--indigo-50);  color: var(--indigo-700); }
.badge-emerald { background: var(--emerald-50); color: var(--emerald-600); }
.badge-amber   { background: #fffbeb; color: #b45309; }
.badge-cyan    { background: #ecfeff; color: #0e7490; }
.badge-rose    { background: #fff1f2; color: #be123c; }
.badge-violet  { background: #f5f3ff; color: var(--violet-600); }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.card-pad { padding: 28px; }

.card-interactive:hover { border-color: var(--slate-900); }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--indigo-50);
  color: var(--indigo-600);
  border: 1px solid var(--indigo-100);
  flex: none;
}
.icon-tile svg { width: 20px; height: 20px; }
/* Tiles are also used for step numbers ("1", "2", "3"), not only icons. */
.icon-tile { font-size: 1rem; font-weight: 700; line-height: 1; }
.icon-tile.t-emerald { background: var(--emerald-50); color: var(--emerald-600); border-color: #d1fae5; }
.icon-tile.t-cyan    { background: #ecfeff; color: var(--cyan-500); border-color: #cffafe; }
.icon-tile.t-violet  { background: #f5f3ff; color: var(--violet-600); border-color: #ede9fe; }
.icon-tile.t-amber   { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.icon-tile.t-rose    { background: #fff1f2; color: #e11d48; border-color: #ffe4e6; }
.icon-tile.t-slate   { background: var(--slate-100); color: var(--slate-600); border-color: var(--slate-200); }
.icon-tile.t-teal    { background: #f0fdfa; color: #0d9488; border-color: #ccfbf1; }
.icon-tile.sm { width: 36px; height: 36px; border-radius: 11px; }
.icon-tile.sm svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   7. Header / navigation — flat, transparent, sharing the hero's ground
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background .2s ease, box-shadow .2s ease;
}
/* Once the page scrolls, the bar needs a ground of its own to stay legible
   over whatever passes beneath it; it stays flat — a hairline, no pill. */
.site-header.is-stuck {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--border);
}

/* Three tracks so the links sit centred in the pill regardless of how wide
   the brand and the action buttons happen to be. Each item names its own
   column: below 900px `.nav-links` is `display: none` and stops being a grid
   item altogether, so without an explicit `grid-column` the actions would slide
   into the middle track instead of staying at the right edge. */
.nav {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.nav > .brand { grid-column: 1; justify-self: start; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.03em;
  color: var(--slate-900);
  flex: none;
}
.brand:hover { color: var(--slate-900); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { white-space: nowrap; }
.brand-name b { font-weight: 800; }

.nav-links {
  display: flex;
  align-items: center;
  grid-column: 2;
  justify-self: center;
  gap: 2px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding-inline: 15px;
  border-radius: var(--r-pill);
  color: var(--slate-700);
  font-size: .9375rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--slate-100); color: var(--slate-900); }
.nav-link[aria-current="page"] { color: #fff; background: var(--primary); }

.nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--slate-800);
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 520px) {
  .nav-actions .btn-primary { display: none; }
  .lang-button { padding-inline: 9px; }
}

/* Language switcher — a native <details>, so it opens and switches with JS off.
   site.js only adds the click-outside and Escape close. */
.lang { position: relative; flex: none; }
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--slate-700);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;                 /* hide the default disclosure triangle */
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lang-button::-webkit-details-marker { display: none; }
.lang-button:hover { color: var(--slate-900); border-color: var(--slate-400); }
.lang-button svg { width: 16px; height: 16px; }
.lang-caret { transition: transform .15s ease; }
.lang[open] .lang-button { background: var(--slate-100); color: var(--slate-900); }
.lang[open] .lang-caret { transform: rotate(180deg); }
.lang-code { letter-spacing: .02em; }

.lang-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
.lang-option {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--slate-700);
  font-size: .9375rem;
  white-space: nowrap;
}
.lang-option:hover { background: var(--slate-100); color: var(--slate-900); }
.lang-option[aria-current] { color: var(--primary); font-weight: 600; background: var(--indigo-50); }

/* The same links, spelled out in the mobile drawer where there is room. */
.mobile-lang { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.mobile-lang-label {
  display: block;
  margin-bottom: 8px;
  padding-inline: 4px;
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mobile-lang-options { display: flex; flex-wrap: wrap; gap: 6px; }
.mobile-lang .lang-option {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: .875rem;
}

/* Mobile drawer — a rounded card that drops out of the pill */
.mobile-menu {
  display: none;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--container) - 2 * var(--gutter));
  margin: 8px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  padding: 12px 12px 16px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a.nav-link {
  display: flex;
  height: 48px;
  font-size: 1rem;
  color: var(--slate-800);
}
.mobile-menu .mobile-cta {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(40px, 5vw + 16px, 96px);
  padding-bottom: clamp(24px, 2vw + 14px, 40px);
}
.hero h1 { max-width: 14ch; }
.hero h1 .grad { color: var(--primary); }
.hero-sub {
  max-width: 600px;
  margin-top: 24px;
  color: var(--slate-600);
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-note {
  margin-top: 18px;
  font-size: .8125rem;
  color: var(--slate-500);
}

/* The home hero is a flat block on the `--paper` ground. The ground is pulled
   up behind the transparent header so the two read as one surface, and the
   module ticker runs along the bottom edge. */
.hero-home {
  background: var(--paper);
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(32px, 4vw, 64px));
  padding-bottom: 0;
}
.hero-frame { overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(32px, 4vw, 64px);
}
.hero-frame h1 { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 3.9rem); max-width: none; }
.hero-frame .hero-sub { max-width: 520px; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bento — the collage of true numbers next to the headline */
.bento {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto;
  gap: 14px;
}
.bento-stat {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #fff;
}
.bento-stat b {
  display: block;
  font-size: clamp(2.6rem, 2rem + 2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}
.bento-stat span { display: block; margin-top: 8px; font-size: .875rem; color: #a3a7b5; }
.bento-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.bento-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--indigo-500); }
.bento-bars i:nth-child(odd) { background: var(--indigo-400); }
.bento-bars-cap { font-size: .6875rem; color: #7d8190; margin-top: 8px; }

.bento-panel {
  padding: 18px;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
}
.bento-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--slate-800);
  margin-bottom: 10px;
}
.bento-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--slate-100);
  font-size: .8125rem;
  color: var(--slate-600);
}
.bento-row:first-of-type { border-top: 0; }

.bento-side { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.bento-side > * { min-width: 0; }
.bento-note {
  flex: 1 1 190px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
  font-size: .875rem;
  font-weight: 600;
  color: var(--slate-800);
  line-height: 1.3;
}
.bento-note small { display: block; font-weight: 500; color: var(--slate-500); font-size: .75rem; margin-top: 2px; }
.bento-note .icon-tile { width: 40px; height: 40px; border-radius: 50%; }
.bento-pill {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--r-xl);
  background: var(--primary);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
.bento-pill:hover { color: #fff; background: var(--primary-hover); }
.bento-pill svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .bento-stat { grid-row: auto; }
  .bento-side { flex-direction: column; }
}

/* Ticker — the module names scroll along the bottom edge of the frame. Pure
   CSS; the second copy of the list is aria-hidden and only exists so the loop
   has no gap. Under reduced motion it stops and wraps instead. */
.ticker {
  border-top: 1px solid var(--border-strong);
  padding-block: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: caspian-ticker 48s linear infinite;
}
.ticker ul { display: flex; align-items: center; gap: 0; }
.ticker li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline: 26px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate-700);
  white-space: nowrap;
}
.ticker li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
@keyframes caspian-ticker { to { transform: translateX(-50%); } }

/* Trust strip — retained for pages that list guarantees as a plain row */
.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 44px;
  padding-block: 18px;
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--slate-600);
}
.trust-strip svg { width: 16px; height: 16px; color: var(--emerald-500); flex: none; }

/* --------------------------------------------------------------------------
   9. App mock (stylised product screenshot) — shown inside a device frame
   -------------------------------------------------------------------------- */
.mock-wrap {
  position: relative;
  padding-bottom: clamp(40px, 4vw, 80px);
}

.mock {
  border-radius: 36px;
  border: 8px solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--border);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); }
.mock-url {
  margin-inline: auto;
  padding: 3px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--border);
  font-size: .75rem;
  color: var(--slate-400);
  font-family: var(--font-mono);
}
.mock-body { display: flex; min-height: 420px; text-align: left; }

.mock-rail {
  width: 66px;
  flex: none;
  background: var(--ink);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mock-rail-item {
  width: 46px;
  padding: 7px 0 5px;
  border-radius: 10px;
  text-align: center;
  color: #64748b;
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.mock-rail-item svg { width: 17px; height: 17px; margin-inline: auto; margin-bottom: 3px; }
.mock-rail-item.active { background: rgba(99, 102, 241, .22); color: #c7d2fe; }

.mock-side {
  width: 172px;
  flex: none;
  background: var(--ink-2);
  padding: 16px 12px;
  border-right: 1px solid rgba(255, 255, 255, .05);
}
.mock-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  padding: 0 6px 14px;
}
.mock-side-title svg { width: 16px; height: 16px; color: var(--cyan-400); }
.mock-side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: .75rem;
  font-weight: 500;
}
.mock-side-item svg { width: 14px; height: 14px; }
.mock-side-item.active { background: rgba(99, 102, 241, .18); color: #e0e7ff; }

.mock-main { flex: 1; background: #f7f7fa; padding: 16px 18px; min-width: 0; }
.mock-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.mock-search {
  flex: 1;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  color: var(--slate-400);
  font-size: .75rem;
}
.mock-search svg { width: 13px; height: 13px; }
.mock-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-500), var(--violet-500));
  flex: none;
}
.mock-plus {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--indigo-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mock-plus svg { width: 14px; height: 14px; }

.mock-h1 { font-size: 1.05rem; font-weight: 700; color: var(--slate-900); letter-spacing: -0.02em; }
.mock-tag { font-size: .75rem; color: var(--slate-500); margin-bottom: 14px; }

.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 13px;
}
.mock-card-head {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; font-weight: 700; color: var(--slate-800);
  margin-bottom: 9px;
}
.mock-card-head svg { width: 14px; height: 14px; }
.mock-kpi { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; color: var(--slate-900); }
.mock-kpi-sub { font-size: .6875rem; color: var(--slate-500); }
.mock-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 0; border-top: 1px solid var(--slate-100);
  font-size: .6875rem; color: var(--slate-600);
}
.mock-row:first-of-type { border-top: 0; }
.mock-pill {
  font-size: .625rem; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--indigo-50); color: var(--indigo-700);
}
.mock-pill.ok  { background: var(--emerald-50); color: var(--emerald-600); }
.mock-pill.warn{ background: #fffbeb; color: #b45309; }
.mock-pill.hot { background: #fff1f2; color: #be123c; }
.mock-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 6px; }
.mock-bars span {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--indigo-400), var(--indigo-600));
}

@media (max-width: 860px) {
  .mock-side { display: none; }
  .mock-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mock { border-width: 5px; border-radius: 24px; }
  .mock-rail { display: none; }
  .mock-cards { grid-template-columns: 1fr; }
  .mock-body { min-height: 0; }
}

/* --------------------------------------------------------------------------
   10. Stat band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 24px;
}
.stat b {
  display: block;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--slate-900);
  line-height: 1;
}
.stat span { display: block; margin-top: 8px; font-size: .875rem; color: var(--text-muted); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   11. Module grid + filter tabs
   -------------------------------------------------------------------------- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 5px;
  margin: 0 auto 34px;
  width: fit-content;
  max-width: 100%;
  background: var(--slate-100);
  border-radius: var(--r-pill);
}
.filter-tab {
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--slate-600);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.filter-tab:hover { color: var(--slate-900); }
.filter-tab[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.module-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
}
.module-card-head { display: flex; align-items: flex-start; gap: 12px; }
.module-card-head h3 { font-size: 1.0625rem; }
.module-card-head .badge { margin-inline-start: auto; }
.module-card p { color: var(--text-muted); font-size: .9375rem; }
.module-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.module-tools li {
  font-size: .75rem;
  font-weight: 500;
  color: var(--slate-600);
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.module-tools li.more { background: transparent; border-style: dashed; color: var(--slate-400); }
.module-card[hidden] { display: none; }

/* Module tiles inside the dark "recent work" style grid on the home page */
.tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--text-inverse);
  transition: border-color .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1), background .18s ease;
}
.tile:hover { border-color: rgba(255, 255, 255, .28); transform: translateY(-4px); color: var(--text-inverse); background: #1c1d24; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile .icon-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #fff; }
.tile-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: background .18s ease, transform .18s ease;
}
.tile-arrow svg { width: 16px; height: 16px; }
.tile:hover .tile-arrow { background: var(--primary); border-color: var(--primary); transform: rotate(-45deg); }
.tile-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .75rem; font-weight: 600; color: #8d919f; }
.tile-meta li::before { content: "•"; margin-inline-end: 8px; color: var(--indigo-400); }
.tile h3 { color: #fff; font-size: 1.125rem; }
.tile p { color: #a3a7b5; font-size: .9375rem; }
.tile-wide { grid-column: span 2; }
@media (max-width: 980px) { .tile-wide { grid-column: span 2; } }
@media (max-width: 640px) { .tile-wide { grid-column: auto; } }

/* --------------------------------------------------------------------------
   12. Feature split sections
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split.reverse .split-media { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split.reverse .split-media { order: 0; }
}

.feature-list { display: grid; gap: 12px; margin-top: 28px; }
.feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: border-color .18s ease, transform .18s ease;
}
.feature-item:hover { border-color: var(--slate-900); transform: translateX(2px); }
.feature-item h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feature-item p { font-size: .875rem; color: var(--text-muted); margin-top: 3px; }

/* Panel used as a section "screenshot" */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--slate-50);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--slate-700);
}
.panel-head svg { width: 15px; height: 15px; color: var(--indigo-600); }
.panel-head .badge { margin-inline-start: auto; }
.panel-body { padding: 16px; }

/* Collage — a panel with a floating badge and a floating note, the way the
   split sections stack a photo, a coloured number tile and a small card. */
.collage { position: relative; padding: 0 0 56px 0; }
.collage .panel { position: relative; z-index: 1; }
.collage-badge {
  position: absolute;
  z-index: 2;
  right: -6px;
  top: -18px;
  padding: 18px 22px;
  border-radius: var(--r-xl);
  background: var(--emerald-500);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-md);
  transform: rotate(3deg);
}
.collage-badge b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.collage-badge span { display: block; font-size: .75rem; font-weight: 600; margin-top: 4px; opacity: .92; }
.collage-note {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  box-shadow: var(--shadow-lg);
}
.collage-note .icon-tile { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; border-color: transparent; }
.collage-note small { display: block; font-size: .75rem; font-weight: 500; color: #a3a7b5; margin-top: 1px; }
@media (max-width: 560px) {
  .collage-badge { right: 0; top: -14px; padding: 12px 16px; }
  .collage-note { left: 8px; }
}

.table-mock { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.table-mock th {
  text-align: start;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate-500);
  font-weight: 700;
  padding: 8px 10px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--border);
}
.table-mock td {
  padding: 10px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
}
.table-mock tr:last-child td { border-bottom: 0; }
.table-mock .num { text-align: end; font-variant-numeric: tabular-nums; }

.flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.flow-step {
  flex: 1 1 90px;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--white);
  font-size: .75rem;
  font-weight: 600;
  color: var(--slate-700);
}
.flow-step svg { width: 16px; height: 16px; margin: 0 auto 6px; color: var(--indigo-600); }
.flow-step.done { border-color: #a7f3d0; background: var(--emerald-50); color: var(--emerald-600); }
.flow-step.done svg { color: var(--emerald-500); }
.flow-arrow { color: var(--slate-300); flex: none; }
.flow-arrow svg { width: 15px; height: 15px; }

/* Accordion used as a feature list ("How we take you to the next level") —
   big titles, hairline dividers, the open item's title in brand colour. */
.accordion { border-top: 1px solid var(--border-strong); }
.accordion details { border-bottom: 1px solid var(--border-strong); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  cursor: pointer;
  list-style: none;
  transition: color .16s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: none;
  margin: -4px 8px 0 0;
  opacity: .7;
}
.accordion details[open] summary { color: var(--primary); }
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.accordion-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 0 4px 24px;
  color: var(--text-muted);
  font-size: .9375rem;
}
.accordion-body p { max-width: 440px; }
.accordion-body .panel { min-width: 200px; }
@media (max-width: 560px) { .accordion-body { grid-template-columns: minmax(0, 1fr); } }

/* Horizontal scroller (process steps) — scroll-snap in CSS, arrow buttons
   only when JS is present because they do nothing without it. */
.scroller { position: relative; }
.scroller-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 12px;
  margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroller-track::-webkit-scrollbar { display: none; }
.scroller-track > * { flex: 0 0 clamp(260px, 30vw, 360px); scroll-snap-align: start; }
.scroller-nav { display: none; gap: 10px; }
.js .scroller-nav { display: flex; }

.step-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 250px;
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border);
}
.step-card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: -0.02em;
}
.step-card h3 { font-size: 1.125rem; }
.step-card p { color: var(--text-muted); font-size: .9375rem; }
.step-card .badge { margin-top: auto; align-self: flex-start; }
.step-card.on { background: var(--ink); border-color: var(--ink); }
.step-card.on h3 { color: #fff; }
.step-card.on p { color: #a3a7b5; }
.step-card.on .step-num { background: var(--primary); }

/* Role cards — the "who uses it" grid inside a dark section */
.role-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .07);
}
.role-card p { color: #c3c6d1; font-size: .9375rem; }
.role-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.role-who .icon-tile { border-radius: 50%; background: rgba(99, 102, 241, .2); border-color: rgba(129, 140, 248, .3); color: #c7d2fe; }
.role-who b { display: block; color: #fff; font-size: .9375rem; }
.role-who span { display: block; font-size: .8125rem; color: #8d919f; }
.role-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.role-mods li {
  font-size: .75rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); color: #c3c6d1;
}

/* Link cards — "go deeper" cards with a coloured cover instead of a photo */
.link-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  border-radius: var(--r-xl);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.link-card:hover { color: inherit; transform: translateY(-4px); }
.link-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-cover svg { width: 76px; height: 76px; color: #fff; opacity: .95; }
.link-cover .badge { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, .9); }
.link-cover.c-indigo { background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700)); }
.link-cover.c-ink { background: linear-gradient(135deg, #2a2b35, var(--ink)); }
.link-cover.c-emerald { background: linear-gradient(135deg, var(--emerald-400), var(--emerald-600)); }
.link-cover.c-amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.link-card h3 { font-size: 1.125rem; margin-top: 6px; }
.link-card p { color: var(--text-muted); font-size: .9375rem; }
.link-card .link-arrow { margin-top: 2px; }

/* --------------------------------------------------------------------------
   13. Industries
   -------------------------------------------------------------------------- */
.industry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--slate-800);
}
.industry-card span.sub {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   14. Dark sections — inset from the viewport edge and rounded, like a card
   -------------------------------------------------------------------------- */
.dark-section {
  position: relative;
  margin-inline: var(--inset);
  border-radius: var(--r-2xl);
  background: var(--ink);
  color: var(--text-inverse);
  overflow: hidden;
}
.dark-section .container { position: relative; z-index: 1; }
.dark-section h2, .dark-section h3, .dark-section h4 { color: #fff; }
.dark-section p { color: #a3a7b5; }
.dark-section .section-head p { color: #a3a7b5; }
.dark-section .eyebrow { color: #c3c6d1; }
.dark-section .eyebrow .num::after { color: #4b4e5a; }
.dark-card {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-xl);
  padding: 26px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dark-card:hover { border-color: rgba(255, 255, 255, .26); background: #1c1d24; transform: translateY(-3px); }
.dark-card .icon-tile {
  background: rgba(99, 102, 241, .18);
  border-color: rgba(129, 140, 248, .3);
  color: #c7d2fe;
}
.dark-card h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.dark-card p { font-size: .9375rem; }

/* A wide feature card inside a dark section: copy on one side, points on the
   other — the "we make the creative solutions" banner of the reference. */
.dark-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: 20px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #1a1b23, var(--ink-2));
  border: 1px solid rgba(255, 255, 255, .08);
}
.dark-feature h3 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.1; }
@media (max-width: 860px) { .dark-feature { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   15. Pricing
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) { .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

.price-card { padding: 30px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.price-card.featured {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-inverse);
}
.price-card.featured::before {
  content: "Most popular";
  position: absolute;
  top: -13px; left: 30px;
  background: var(--primary);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.price-name { font-size: 1.0625rem; font-weight: 700; color: var(--slate-900); }
.price-desc { font-size: .875rem; color: var(--text-muted); margin-top: 4px; }
.price-amount { display: flex; align-items: baseline; gap: 6px; }
.price-amount b { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.05em; color: var(--slate-900); line-height: 1; }
.price-amount span { font-size: .875rem; color: var(--text-muted); }
.price-features { display: grid; gap: 10px; font-size: .9375rem; color: var(--slate-700); }
.price-features li { position: relative; padding-inline-start: 27px; }
.price-features svg {
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  color: var(--emerald-500);
}
.price-features li.muted { color: var(--slate-400); }
.price-features li.muted svg { color: var(--slate-300); }
.price-card.featured .price-name,
.price-card.featured .price-amount b { color: #fff; }
.price-card.featured .price-desc,
.price-card.featured .price-amount span,
.price-card.featured .muted { color: #a3a7b5; }
.price-card.featured .price-features { color: #d9dbe3; }
.price-card.featured .price-features li.muted { color: #6f7280; }
.price-card.featured .price-features li.muted svg { color: #3a3c47; }
.price-card.featured .btn-primary { box-shadow: none; }

.compare-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.compare-table th, .compare-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.compare-table thead th {
  background: var(--slate-50);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate-500);
}
.compare-table tbody th {
  text-align: start;
  font-weight: 600;
  color: var(--slate-800);
}
.compare-table td { color: var(--slate-600); }
.compare-table .yes { color: var(--emerald-500); font-weight: 700; }
.compare-table .no  { color: var(--slate-300); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   16. FAQ — same editorial accordion, hairlines only
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; border-top: 1px solid var(--border-strong); }
.faq details { border-bottom: 1px solid var(--border-strong); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--slate-900);
  cursor: pointer;
  list-style: none;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: none;
  margin: -4px 8px 0 0;
  opacity: .7;
}
.faq details[open] summary { color: var(--primary); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq .faq-body { padding: 0 4px 22px; color: var(--text-muted); font-size: .9375rem; max-width: 720px; }

/* --------------------------------------------------------------------------
   17. Forms (contact)
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--slate-600);
  margin-bottom: 6px;
}
.field .req { color: var(--rose-500); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font: inherit;
  font-size: .9375rem;
  color: var(--slate-800);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--slate-900);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }

.form-note { font-size: .8125rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   18. Prose (legal pages)
   -------------------------------------------------------------------------- */
.prose { max-width: 780px; color: var(--slate-700); }
.prose h2 { font-size: 1.5rem; margin-top: 44px; margin-bottom: 12px; }
.prose h3 { font-size: 1.125rem; margin-top: 28px; margin-bottom: 8px; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.prose ul li { list-style: disc; margin-bottom: 7px; }
.prose strong { color: var(--slate-900); }
.prose .meta { font-size: .875rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   19. Footer — a dark rounded card that also carries the closing call to action
   -------------------------------------------------------------------------- */
.site-footer {
  margin: 0 var(--inset) var(--inset);
  border-radius: var(--r-2xl);
  background: var(--ink);
  color: #93a2ba;
  padding-top: clamp(48px, 5vw, 80px);
  font-size: .9375rem;
  overflow: hidden;
}
.footer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 5vw, 96px);
  align-items: end;
  padding-bottom: clamp(40px, 4vw, 64px);
  margin-bottom: clamp(40px, 4vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-kicker { color: #a3a7b5; font-size: .9375rem; font-weight: 500; margin-bottom: 14px; }
.footer-hero h2 {
  color: #fff;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.75rem);
  letter-spacing: -0.05em;
  line-height: 1;
  max-width: 12ch;
}
.footer-hero p { color: #a3a7b5; max-width: 420px; }
.footer-hero .footer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 860px) { .footer-hero { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* The brand column holds only the logo, so five equal columns. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px 24px;
  padding-bottom: 44px;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.footer-brand .brand { color: #fff; }
.footer-brand .brand:hover { color: #fff; }
.footer-col h4 {
  color: #fff;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #93a2ba; font-size: .875rem; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 20px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .8125rem;
  color: #74839c;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom a { color: #74839c; }
.footer-bottom a:hover { color: #fff; }

/* Breadcrumb — used by the per-module pages under /modules/ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .8125rem;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--indigo-600); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb svg { width: 13px; height: 13px; color: var(--slate-300); flex: none; }

/* Cross-module links inside a dark section */
.dark-section .link-arrow { color: #c7d2fe; }
.dark-section .link-arrow:hover { color: #fff; }

/* --------------------------------------------------------------------------
   20. Motion & elevation
   Surfaces rest flat and lift on hover; the hero rises on load with pure CSS
   keyframes; everything below the fold uses the JS-driven `.reveal` class.
   The `prefers-reduced-motion` bypass at the end of this file collapses all of it.
   -------------------------------------------------------------------------- */
.card,
.panel,
.industry-card,
.price-card,
.stat,
.flow-step,
.step-card,
.mock {
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.card:hover,
.industry-card:hover,
.price-card:hover,
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card-interactive:hover,
.price-card.featured:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.flow-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mock:hover { box-shadow: 0 36px 72px -24px rgba(15, 23, 42, .32), 0 12px 24px -14px rgba(15, 23, 42, .14); }

/* Panels frame data, not links — they keep still. */
.panel:hover { border-color: var(--border-strong); }

/* Icon tiles answer their card. */
.icon-tile { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.card:hover .icon-tile,
.dark-card:hover .icon-tile,
.tile:hover .icon-tile,
.feature-item:hover .icon-tile,
.industry-card:hover .icon-tile { transform: translateY(-2px) scale(1.06); }

/* Buttons: press-and-release. */
.btn { transition: background .16s ease, border-color .16s ease, color .16s ease,
                   transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Accordions: the answer slides rather than snapping. */
.faq details[open] .faq-body,
.accordion details[open] .accordion-body { animation: caspian-slide .28s cubic-bezier(.22, 1, .36, 1) both; }

/* Staggered reveal: siblings in a grid arrive one after another rather than
   as a single block. Capped at six so a twelve-card grid never crawls. */
.grid > .reveal:nth-child(2),
.price-grid > .reveal:nth-child(2) { transition-delay: .06s; }
.grid > .reveal:nth-child(3),
.price-grid > .reveal:nth-child(3) { transition-delay: .12s; }
.grid > .reveal:nth-child(4) { transition-delay: .18s; }
.grid > .reveal:nth-child(5) { transition-delay: .24s; }
.grid > .reveal:nth-child(6) { transition-delay: .30s; }
.grid > .reveal:nth-child(n + 7) { transition-delay: .36s; }

/* Hero entrance — pure CSS, so it runs with JavaScript disabled. On the home
   page the frame stays put and its copy column rises instead. */
.hero .container > :not(.hero-frame),
.hero-copy > * { animation: caspian-rise .62s cubic-bezier(.22, 1, .36, 1) both; }
.hero .breadcrumb { animation-delay: .02s; }
.hero .eyebrow    { animation-delay: .07s; }
.hero h1          { animation-delay: .13s; }
.hero .hero-sub   { animation-delay: .19s; }
.hero .hero-cta   { animation-delay: .25s; }
.hero .hero-note  { animation-delay: .31s; }
.hero .bento      { animation: caspian-rise .7s cubic-bezier(.22, 1, .36, 1) .2s both; }

@keyframes caspian-rise  { from { opacity: 0; transform: translateY(14px); } }
@keyframes caspian-slide { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0  { margin-top: 0; }
.mt-6  { margin-top: 6px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack-sm { display: grid; gap: 8px; }
.stack    { display: grid; gap: 16px; }
.row      { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }

/* Check list */
/* Icon is absolutely positioned rather than a flex sibling: with `display:flex`
   an inline <strong> inside the item becomes its own flex item and the rest of
   the sentence a second one, which breaks the line badly. */
.check-list { display: grid; gap: 11px; }
.check-list li {
  position: relative;
  padding-inline-start: 29px;
  font-size: .9375rem;
  color: var(--slate-700);
}
.check-list svg {
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  color: var(--emerald-500);
}
.dark-section .check-list li { color: #c3c6d1; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    /* Delays too, or the staggered reveal still waits its turn before
       appearing instantly — a third of a second of blank card. */
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; width: auto; flex-wrap: wrap; }
  .ticker-track ul[aria-hidden] { display: none; }
  .ticker ul { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .ticker { mask-image: none; -webkit-mask-image: none; }
}

/* Audit fixes: no-JS navigation, explicit email handoff and static module list. */
.email-composer { display: none; }
.email-composer.is-ready { display: block; }
[hidden] { display: none !important; }
#email-draft { width: 100%; min-height: 240px; margin-top: 12px; }
#demo, #faq { scroll-margin-top: calc(var(--nav-h) + 24px); }
.ticker-track { animation: none; width: auto; }
.ticker-track ul { flex-wrap: wrap; row-gap: 8px; }
.ticker-track ul[aria-hidden] { display: none; }
.ticker { mask-image: none; -webkit-mask-image: none; }
@media (max-width: 900px) {
  html:not(.js) .mobile-menu { display: block; }
  html:not(.js) .nav-toggle { display: none; }
}

/* Cookie consent (assets/js/consent.js).

   Injected on the first visit only, and never present once a choice is made,
   so it is styled as a self-contained strip rather than part of any layout.
   Pinned to the bottom: a visitor should be able to read the page they came
   for while deciding, which a full-screen interstitial denies them.

   Accept and Reject are the same size, weight and shape. The only difference
   is fill, and the cheaper choice for the visitor is not the harder one to
   reach — a banner that buries Reject is the pattern regulators single out. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px -8px rgb(0 0 0 / 0.18);
}
.consent__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate-600);
}
.consent__link { color: var(--indigo-600); }
.consent__actions { display: flex; gap: 8px; margin-left: auto; }
.consent__btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.consent__btn--primary {
  background: var(--indigo-600);
  border: 1px solid var(--indigo-600);
  color: #fff;
}
.consent__btn--primary:hover { background: var(--indigo-700); border-color: var(--indigo-700); }
.consent__btn--ghost {
  background: #fff;
  border: 1px solid var(--slate-300);
  color: var(--slate-700);
}
.consent__btn--ghost:hover { background: var(--slate-50); }
.consent__btn:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }

@media (max-width: 520px) {
  /* Full width on a phone, and the actions on their own row so neither button
     is squeezed into a tap target smaller than the other. */
  .consent { flex-direction: column; align-items: stretch; }
  .consent__actions { margin-left: 0; }
  .consent__btn { flex: 1 1 0; }
}