/* ==========================================================================
   Base — reset, typography, layout primitives, background system
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}

/* The signature page ground: white, breathed on by pale blue. */
body.page {
  background: var(--page-bg);
  background-attachment: fixed;
  min-height: 100vh;
}

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

/* Icon slots: <i data-ico="name"> gets a 1em glyph by default.
   Declared here (early) so component rules in components.css/marketing.css win. */
[data-ico] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
[data-ico] > svg { width: 1em; height: 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: none; }

::selection { background: var(--blue-100); color: var(--navy-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  margin: 0;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem); letter-spacing: var(--tr-tight); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.625rem); letter-spacing: var(--tr-snug); }
h4 { font-size: var(--fs-xl); letter-spacing: var(--tr-snug); font-weight: 700; }
h5 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--tr-snug); }
h6 { font-size: var(--fs-md); font-weight: 700; }
p  { margin: 0; }

/* ---- Text utilities ----------------------------------------------------- */
.lead { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.62; color: var(--slate-600); }
.body-lg { font-size: var(--fs-lg); line-height: 1.62; color: var(--slate-600); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.strong { color: var(--text-strong); }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--blue-700);
}
.eyebrow--red { color: var(--red-600); }
.eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0.55;
}
.eyebrow.no-rule::before { display: none; }

.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-base { font-size: var(--fs-base); }
.t-lg { font-size: var(--fs-lg); }
.w-500 { font-weight: 500; } .w-600 { font-weight: 600; }
.w-700 { font-weight: 700; } .w-800 { font-weight: 800; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.cap { text-transform: uppercase; letter-spacing: var(--tr-caps); font-size: var(--fs-2xs); font-weight: 700; }

.grad-text {
  background: linear-gradient(96deg, var(--brand-red-light) 4%, var(--brand-red) 46%, var(--brand-red-deep) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-blue {
  background: linear-gradient(96deg, var(--blue-500) 0%, var(--blue-700) 60%, var(--blue-900) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(56px, 4.5vw, 104px); position: relative; }
.section--tight { padding-block: clamp(40px, 3vw, 64px); }
.section--flush-top { padding-top: 0; }

.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--s-1); } .stack-2 { gap: var(--s-2); } .stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); } .stack-5 { gap: var(--s-5); } .stack-6 { gap: var(--s-6); }
.stack-8 { gap: var(--s-8); } .stack-10 { gap: var(--s-10); } .stack-12 { gap: var(--s-12); }

/* Rows wrap by default and their children may shrink. Without both, a long
   word inside a flex child forces horizontal overflow of the whole page on
   narrow viewports. Items that must keep their size set `flex: none`
   themselves (icons, avatars, dots, .grow-exempt utilities). */
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row > * { min-width: 0; }
.row-2 { gap: var(--s-2); } .row-4 { gap: var(--s-4); } .row-6 { gap: var(--s-6); }
.row-nowrap { flex-wrap: nowrap; }
.row-start { align-items: flex-start; }
.row-base { align-items: baseline; }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.push { margin-left: auto; }
.grow { flex: 1 1 auto; min-width: 0; }

.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g-auto-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g-sidebar { grid-template-columns: minmax(0, 1fr) 340px; }
.g-sidebar-l { grid-template-columns: 300px minmax(0, 1fr); }
.gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.full { grid-column: 1 / -1; }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mt-10 { margin-top: var(--s-10); } .mt-12 { margin-top: var(--s-12); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.mb-10 { margin-bottom: var(--s-10); } .mb-12 { margin-bottom: var(--s-12); }

.hr { height: 1px; background: var(--border); border: 0; margin: 0; }
.hr-soft { height: 1px; background: var(--border-soft); border: 0; margin: 0; }
.vr { width: 1px; align-self: stretch; background: var(--border); }

.hide { display: none !important; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---- Decorative background layers --------------------------------------- */
.bg-wash { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bg-wash > * { position: absolute; }
.wash-glow {
  width: 780px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.09), transparent 66%);
  filter: blur(12px);
}
.wash-glow--red {
  background: radial-gradient(circle, rgba(224, 43, 24, 0.055), transparent 66%);
}
.wash-lines { inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.section > .container, .section > .container-wide { position: relative; z-index: 1; }

/* Thin curved signal lines — the brand's "communication wave" motif */
.signal-arcs { inset: 0; width: 100%; height: 100%; opacity: 0.42; }
.signal-arcs path { fill: none; stroke-linecap: round; }

/* Subtle dotted grid used behind product visuals */
.dot-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(37, 99, 235, 0.13) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ---- Dark band (used sparingly: CTA, footer, admin shell) ---------------- */
.band-dark {
  background:
    radial-gradient(900px 420px at 82% -18%, rgba(37, 99, 235, 0.30), transparent 62%),
    radial-gradient(700px 380px at 6% 108%, rgba(224, 43, 24, 0.17), transparent 60%),
    linear-gradient(168deg, var(--navy-900) 0%, #0a1020 52%, #070b14 100%);
  color: var(--text-invert);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4, .band-dark h5 { color: #fff; }
.band-dark .muted { color: var(--text-invert-muted); }
.band-dark .hr { background: rgba(255, 255, 255, 0.1); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .g-sidebar, .g-sidebar-l { grid-template-columns: minmax(0, 1fr); }
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3, .span-4 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .container { padding-inline: var(--s-4); }
  .g-2, .g-3, .g-4, .g-5, .g-6, .g-auto, .g-auto-lg { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: span 1; }
  .section { padding-block: 48px; }
  .hide-sm { display: none !important; }
}
@media (min-width: 641px) { .only-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }