/* ==========================================================================
   SASTRAM LABS — DESIGN SYSTEM v2
   Built from Bodha Drive Design Theory (Apr 2026, locked).
   Mixed light/dark cinematic pacing. 8pt grid. Optical alignment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   IBM Plex Sans — display headlines, card titles, section headings (via --serif var)
   IBM Plex Mono — labels, eyebrows, code (via --mono var)
   Plus Jakarta Sans — body text, UI copy (via --sans var)
   All loaded via Google Fonts in each page.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-teal: #0D9488;
  --brand-teal-light: #14B8A6;
  --brand-teal-deep: #0F766E;
  --brand-amber: #FB923C;
  --brand-amber-deep: #F97316;
  --brand-amber-glow: #FDBA74;
  --brand-coral: #F73C5C;
  --brand-coral-deep: #DC2640;

  /* Dark surfaces (5 elevations + 1 deepest) */
  --d-deep: #060A0A;
  --d-base: #0A0F0F;
  --d-recessed: #111717;
  --d-elevated: #171E1E;
  --d-card: #1C2424;
  --d-card-hover: #222C2C;

  /* Light surfaces (5 elevations) */
  --l-paper: #FFFFFF;
  --l-cream: #F7FAFA;
  --l-recessed: #F0F4F4;
  --l-elevated: #FAFCFC;
  --l-card: #FFFFFF;

  /* Dark text */
  --d-text-1: #EDF2F2;
  --d-text-2: #A8B6B6;
  --d-text-3: #6B7878;
  --d-text-4: #444E4E;

  /* Light text */
  --l-text-1: #0A1414;
  --l-text-2: #4A5757;
  --l-text-3: #6B7878;
  --l-text-4: #98A4A4;

  /* Borders */
  --d-line-1: rgba(255, 255, 255, 0.04);
  --d-line-2: rgba(255, 255, 255, 0.08);
  --d-line-3: rgba(255, 255, 255, 0.14);
  --d-line-4: rgba(255, 255, 255, 0.22);

  --l-line-1: rgba(10, 20, 20, 0.05);
  --l-line-2: rgba(10, 20, 20, 0.08);
  --l-line-3: rgba(10, 20, 20, 0.14);
  --l-line-4: rgba(10, 20, 20, 0.22);

  /* Mode-aware (overridden in [data-mode] sections) */
  --bg: var(--d-base);
  --bg-recessed: var(--d-recessed);
  --bg-elevated: var(--d-elevated);
  --bg-card: var(--d-card);
  --bg-card-hover: var(--d-card-hover);
  --text-1: var(--d-text-1);
  --text-2: var(--d-text-2);
  --text-3: var(--d-text-3);
  --text-4: var(--d-text-4);
  --line-1: var(--d-line-1);
  --line-2: var(--d-line-2);
  --line-3: var(--d-line-3);
  --line-4: var(--d-line-4);

  /* Typography */
  --serif: 'IBM Plex Sans', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale — major third, 8pt grid harmonic */
  --t-display-4xl: clamp(4rem, 9vw, 8.25rem);     /* 64–132 — number monuments */
  --t-display-3xl: clamp(3rem, 6vw, 5.5rem);      /* 48–88  — hero headline */
  --t-display-2xl: clamp(2.25rem, 4vw, 3.5rem);   /* 36–56  — section headline */
  --t-display-xl:  clamp(1.75rem, 2.6vw, 2.25rem);/* 28–36  — sub-section headline */
  --t-display-l:   1.375rem;                      /* 22     — card title */
  --t-display-m:   1.125rem;                      /* 18     — minimum serif */

  --t-lead:        1.125rem;                      /* 18 */
  --t-body:        1rem;                          /* 16 — was 0.9375rem/15px, below the
                                                     16px readability threshold that matters
                                                     most on the budget Android hardware this
                                                     product targets. */
  --t-small:       0.8125rem;                     /* 13 */
  --t-tiny:        0.75rem;                       /* 12 */
  --t-label:       0.6875rem;                     /* 11 — uppercase, tracked */

  --t-mono-md:     0.875rem;                      /* 14 — code */
  --t-mono-sm:     0.75rem;                       /* 12 */
  --t-mono-xs:     0.6875rem;                     /* 11 */

  /* Spacing — 8pt grid */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;
  --s-15: 192px;

  /* Section padding */
  --sec-pad: clamp(96px, 12vw, 160px);
  --sec-pad-sm: clamp(72px, 9vw, 120px);
  --sec-pad-xs: clamp(56px, 7vw, 88px);

  /* Containers */
  --max-w: 1360px;
  --max-w-hero: 1440px;
  --max-w-read: 720px;
  --max-w-narrow: 880px;

  /* Gutter */
  --gutter: clamp(20px, 4vw, 48px);

  /* Radius — design theory: 22 outer / 14 card / 8 inner */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-quick: 150ms;
  --t-std: 300ms;
  --t-expressive: 600ms;
}

/* --------------------------------------------------------------------------
   SECTION MODES — cinematic pacing across the page
   -------------------------------------------------------------------------- */
[data-mode="dark"] {
  --bg: var(--d-base);
  --bg-recessed: var(--d-recessed);
  --bg-elevated: var(--d-elevated);
  --bg-card: var(--d-card);
  --bg-card-hover: var(--d-card-hover);
  --text-1: var(--d-text-1);
  --text-2: var(--d-text-2);
  --text-3: var(--d-text-3);
  --text-4: var(--d-text-4);
  --line-1: var(--d-line-1);
  --line-2: var(--d-line-2);
  --line-3: var(--d-line-3);
  --line-4: var(--d-line-4);
  background: var(--bg);
  color: var(--text-1);
}

[data-mode="deep"] {
  --bg: var(--d-deep);
  --bg-recessed: var(--d-base);
  --bg-elevated: var(--d-recessed);
  --bg-card: var(--d-elevated);
  --bg-card-hover: var(--d-card);
  --text-1: var(--d-text-1);
  --text-2: var(--d-text-2);
  --text-3: var(--d-text-3);
  --text-4: var(--d-text-4);
  --line-1: var(--d-line-1);
  --line-2: var(--d-line-2);
  --line-3: var(--d-line-3);
  --line-4: var(--d-line-4);
  background: var(--bg);
  color: var(--text-1);
}

[data-mode="cream"] {
  --bg: var(--l-cream);
  --bg-recessed: var(--l-recessed);
  --bg-elevated: var(--l-elevated);
  --bg-card: var(--l-card);
  --bg-card-hover: var(--l-paper);
  --text-1: var(--l-text-1);
  --text-2: var(--l-text-2);
  --text-3: var(--l-text-3);
  --text-4: var(--l-text-4);
  --line-1: var(--l-line-1);
  --line-2: var(--l-line-2);
  --line-3: var(--l-line-3);
  --line-4: var(--l-line-4);
  background: var(--bg);
  color: var(--text-1);
}

[data-mode="paper"] {
  --bg: var(--l-paper);
  --bg-recessed: var(--l-cream);
  --bg-elevated: var(--l-paper);
  --bg-card: var(--l-cream);
  --bg-card-hover: var(--l-recessed);
  --text-1: var(--l-text-1);
  --text-2: var(--l-text-2);
  --text-3: var(--l-text-3);
  --text-4: var(--l-text-4);
  --line-1: var(--l-line-1);
  --line-2: var(--l-line-2);
  --line-3: var(--l-line-3);
  --line-4: var(--l-line-4);
  background: var(--bg);
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   RESET + BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--d-deep);
  color: var(--d-text-1);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  /* Deliberately no `overflow-x: hidden` here. It used to clip a hero that was
     ~280px wider than a 360px phone rather than letting it scroll, so the
     breakage was invisible on every phone for months. If something overflows,
     it should show up and be fixed at the source, not be masked here. */
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--brand-amber); color: #0A0F0F; }

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.container-hero { max-width: var(--max-w-hero); margin: 0 auto; padding: 0 var(--gutter); }
.container-read { max-width: var(--max-w-read); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--gutter); }

section[data-mode] { padding: var(--sec-pad) 0; position: relative; isolation: isolate; }
section[data-mode].compact { padding: var(--sec-pad-sm) 0; }
section[data-mode].tight { padding: var(--sec-pad-xs) 0; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-amber);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.eyebrow.no-line::before { display: none; }
.eyebrow.muted { color: var(--text-3); }

/* On narrow screens the eyebrow must wrap. `nowrap` above turns a long eyebrow
   into an unbreakable box — the 65-char one on the home page measures 598px —
   which becomes the min-content floor of whatever grid track contains it, and
   drags the entire hero off-screen. Keep the leading rule, align it to the
   first line rather than the centre of a multi-line block. */
@media (max-width: 700px) {
  .eyebrow { white-space: normal; align-items: flex-start; }
  .eyebrow::before { margin-top: 0.62em; }
}

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-block;
}

.display-4xl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-display-4xl);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--text-1);
}
.display-3xl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-display-3xl);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--text-1);
}
.display-2xl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-display-2xl);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--text-1);
}
.display-xl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-display-xl);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text-1);
}
.display-l {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-display-l);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-1);
}

em { font-style: italic; font-weight: 500; }

.lead {
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 56ch;
}

.body {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 60ch;
}

.caption {
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--text-3);
}

.tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   NAV (fixed, glassy, mode-adaptive)
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(6, 10, 10, 0.62);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background var(--t-std) var(--ease-out), border-color var(--t-std) var(--ease-out);
}

.nav.is-light {
  background: rgba(247, 250, 250, 0.78);
  border-bottom-color: rgba(10, 20, 20, 0.06);
}

.nav-inner {
  width: 100%;
  max-width: var(--max-w-hero);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.nav-logo {
  display: block;
  height: 22px;
  width: auto;
  transition: opacity var(--t-quick) ease-out;
}
.nav-logo.on-light { display: none; }
.nav.is-light .nav-logo.on-dark { display: none; }
.nav.is-light .nav-logo.on-light { display: block; }
.nav-brand:hover .nav-logo { opacity: 0.85; }

.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(237, 242, 242, 0.66);
  transition: color var(--t-quick) ease-out;
  padding: 4px 0;
  position: relative;
}
.nav-link:hover { color: #EDF2F2; }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--brand-amber);
}
.nav.is-light .nav-link { color: rgba(10, 20, 20, 0.66); }
.nav.is-light .nav-link:hover { color: #0A1414; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: #0A0F0F;
  background: var(--brand-amber);
  padding: 9px 16px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-quick) ease-out, transform var(--t-quick) ease-out;
}
.nav-cta:hover { background: var(--brand-amber-deep); transform: translateY(-1px); }
.nav-cta-arrow { font-family: var(--sans); transition: transform var(--t-std) var(--ease-spring); }
.nav-cta:hover .nav-cta-arrow { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   MOBILE NAV — toggle + drawer

   Below 880px .nav-links is hidden and there was no replacement, so every page
   lost all in-site navigation. Both elements below are created by script.js
   from the page's own .nav-links / .nav-cta, so the five pages (which carry
   different link sets and CTAs) stay in sync without duplicated markup.

   The drawer is appended to <body>, never inside .nav: .nav has a
   backdrop-filter, which makes it a containing block for position:fixed
   descendants — a drawer nested inside would be clamped to the 60px bar.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  color: #EDF2F2;
}
.nav.is-light .nav-toggle { color: #0A1414; }

.nav-toggle-bars { position: relative; display: block; width: 20px; height: 12px; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-std) var(--ease-out), top var(--t-quick) ease-out;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 5px; transform: rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  /* below .nav (200) so the bar — and the close button — stay above it */
  z-index: 190;
  display: flex;
  flex-direction: column;
  padding: 88px var(--gutter) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(6, 10, 10, 0.98);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-std) var(--ease-out), transform var(--t-std) var(--ease-out);
}
.nav-drawer[hidden] { display: none; }
.nav-drawer.is-open { opacity: 1; transform: none; }
.nav-drawer.is-light { background: rgba(247, 250, 250, 0.98); }

.nav-drawer .nav-link {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: #EDF2F2;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-drawer.is-light .nav-link { color: #0A1414; border-bottom-color: rgba(10, 20, 20, 0.08); }
.nav-drawer .nav-link.is-active { color: var(--brand-amber); }
.nav-drawer.is-light .nav-link.is-active { color: var(--brand-amber-deep); }
.nav-drawer .nav-link::after { display: none; }

.nav-drawer .nav-cta {
  margin-top: 32px;
  justify-content: center;
  padding: 15px 20px 16px;
  font-size: 0.9rem;
}

/* The drawer carries its own, better-placed CTA; showing the bar's as well
   puts the same button on screen twice. Bar reduces to logo + close. */
.nav-open .nav .nav-cta { display: none; }

/* Focused programmatically on open so screen readers land inside the drawer.
   Focusing the first *link* instead would paint a focus ring for touch users
   who merely tapped the button. */
.nav-drawer:focus { outline: none; }

/* Locks the page behind the open drawer. Set on <html>, not <body>: body's
   overflow is load-bearing for layout elsewhere. */
.nav-open, .nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: none; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 13px 22px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-quick) ease-out, border-color var(--t-quick) ease-out,
              transform var(--t-quick) ease-out, color var(--t-quick) ease-out;
  text-decoration: none;
  white-space: nowrap;
}

.btn-arrow { transition: transform var(--t-std) var(--ease-spring); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--brand-amber);
  color: #0A0F0F;
  border-color: var(--brand-amber);
}
.btn-primary:hover {
  background: var(--brand-amber-deep);
  border-color: var(--brand-amber-deep);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--line-3);
}
.btn-ghost:hover {
  border-color: var(--line-4);
  background: var(--bg-elevated);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-amber);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--t-quick) ease-out;
}
.btn-link:hover { border-bottom-color: var(--brand-amber); }
.btn-link svg, .btn-link .btn-arrow { transition: transform var(--t-std) var(--ease-spring); }
.btn-link:hover svg, .btn-link:hover .btn-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   SECTION HEADER PRIMITIVE
   -------------------------------------------------------------------------- */
.sec-head { margin-bottom: var(--s-9); }
.sec-head .eyebrow { margin-bottom: var(--s-5); }
.sec-head h2 { margin-bottom: var(--s-5); }
.sec-head .lead { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   RULES + DIVIDERS
   -------------------------------------------------------------------------- */
.rule { width: 100%; height: 1px; background: var(--line-2); border: 0; }
.rule-amber { width: 64px; height: 1px; background: var(--brand-amber); border: 0; opacity: 0.7; }
.rule-grad {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-3), transparent);
  border: 0;
}

/* --------------------------------------------------------------------------
   META STRIP — pipe-separated facts
   -------------------------------------------------------------------------- */
.meta-strip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.meta-strip > * { display: inline-flex; align-items: center; gap: 16px; }
.meta-strip > *:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-4);
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-7);
  transition: border-color var(--t-std) ease-out, transform var(--t-std) ease-out, background var(--t-std) ease-out;
  position: relative;
  overflow: hidden;
}
.card-interactive { cursor: pointer; }
.card-interactive:hover { border-color: var(--line-3); transform: translateY(-2px); }

.card-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-5);
  display: block;
}

.card-title {
  font-family: var(--serif);
  font-size: var(--t-display-l);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
  color: var(--text-1);
  margin-bottom: var(--s-3);
}

.card-body {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--text-2);
}

.card-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   PILLS / CHIPS
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--line-2);
  color: var(--text-2);
}
.pill-amber { background: rgba(251, 146, 60, 0.10); border-color: rgba(251, 146, 60, 0.32); color: var(--brand-amber); }
.pill-teal { background: rgba(13, 148, 136, 0.12); border-color: rgba(13, 148, 136, 0.32); color: var(--brand-teal-light); }

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill-dot.is-live {
  background: var(--brand-amber);
  position: relative;
  animation: none;
}
.pill-dot.is-live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--brand-amber);
  opacity: 0.4;
  animation: livePulseComposited 2s ease-in-out infinite;
}

@keyframes livePulseComposited {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0;   }
}

/* --------------------------------------------------------------------------
   CHAKRA — radial geometry primitive (used as backdrop in hero + CTA)
   -------------------------------------------------------------------------- */
.chakra {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
  color: var(--text-1);
  opacity: 0.06;
}

/* --------------------------------------------------------------------------
   SDK STATUS / LIVE INDICATOR
   -------------------------------------------------------------------------- */
.sdk-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sdk-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-teal-light);
  box-shadow: 0 0 8px var(--brand-teal-light);
  animation: livePulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL — JS adds .reveal-in when in viewport
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.reveal-in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }
.reveal.delay-5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   FOCUS — visible, on-brand
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot {
  background: var(--d-deep);
  color: var(--d-text-1);
  padding: var(--s-13) 0 var(--s-9);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-9);
  margin-bottom: var(--s-12);
}
.foot-logo {
  display: block;
  height: 32px;
  width: auto;
  margin-bottom: var(--s-6);
}
.foot-tag {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--d-text-2);
  max-width: 30ch;
}
.foot-col h4 {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-text-3);
  margin-bottom: var(--s-5);
}
.foot-col ul { list-style: none; display: grid; gap: var(--s-3); }
.foot-col a {
  font-size: var(--t-body);
  color: var(--d-text-2);
  transition: color var(--t-quick) ease-out;
}
.foot-col a:hover { color: var(--d-text-1); }
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-line {
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-text-4);
}

/* --------------------------------------------------------------------------
   CAP CARDS (shared: used on sampark.html signals/capabilities + index.html loop)
   -------------------------------------------------------------------------- */
.cap-grid {
  display: grid;
  /* minmax(0,…) not 1fr: a bare 1fr track cannot shrink below its content's
     min-content width, so one long unbreakable string blows out the grid. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.cap-card {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: 36px;
  transition: border-color var(--t-std) ease-out, transform var(--t-std) ease-out;
}
.cap-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.cap-card-num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--brand-amber);
  margin-bottom: 24px;
  display: block;
  letter-spacing: 0.08em;
}
.cap-card-title {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.012em;
}
.cap-card-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: 24px;
  max-width: 50ch;
}
.cap-card-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.cap-card-spec span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .nav { height: 60px; }
  .nav-inner { gap: 12px; }
  .nav-links { display: none; }
  /* .nav-links carried flex:1 and did the spacing on desktop; with it hidden
     the brand has to push the CTA and toggle to the right itself. */
  .nav-brand { margin-right: auto; }
  .nav-toggle { display: inline-flex; }
  .nav-logo { height: 20px; }
  .foot-logo { height: 28px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .foot-grid > *:first-child { grid-column: 1 / -1; }
  .meta-strip { gap: 12px; }

  /* Touch targets. The list gap is folded into the link padding so the
     footer's overall height is unchanged — only the hit area grows. */
  .nav-cta { padding: 13px 16px 14px; }
  .foot-col ul { gap: 0; }
  .foot-col a { display: inline-block; padding: 10px 0; }
}

@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cap-card { padding: 28px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   PROFILE LINKS — outbound links to named people / the company profile.
   Inherits colour from context (global `a` rule) and adds a restrained
   underline so the link reads as clickable without breaking the typography.
   -------------------------------------------------------------------------- */
.profile-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
  opacity: 0.92;
  transition: opacity var(--t-quick) ease-out, text-decoration-color var(--t-quick) ease-out;
}
.profile-link:hover,
.profile-link:focus-visible {
  opacity: 1;
  text-decoration-color: var(--brand-amber);
}

/* --------------------------------------------------------------------------
   FOOTER SOCIAL ROW — named, verifiable profiles. Sits between the footer
   grid and the copyright line. Company profile first, founder second.
   -------------------------------------------------------------------------- */
.foot-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: var(--s-7);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.foot-social-label {
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-text-3);
}
.foot-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: var(--t-body);
  color: var(--d-text-2);
  transition: color var(--t-quick) ease-out,
              border-color var(--t-quick) ease-out,
              background-color var(--t-quick) ease-out;
}
.foot-social-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.foot-social-link .role {
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-text-3);
}
.foot-social-link:hover,
.foot-social-link:focus-visible {
  color: var(--d-text-1);
  border-color: var(--brand-amber);
  background-color: rgba(255, 255, 255, 0.04);
}
.foot-social-link:hover .role,
.foot-social-link:focus-visible .role { color: var(--brand-amber); }

/* Inline LinkedIn chip used next to a byline in body content. */
.li-chip {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--t-quick) ease-out;
}
.li-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.li-chip:hover, .li-chip:focus-visible { color: var(--brand-amber); }

@media (max-width: 560px) {
  .foot-social { gap: 10px 16px; }
  .foot-social-link { width: 100%; }
}