/* ──────────────────────────────────────────────────────────────
   Base — reset + typography + layout primitives
   ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tcs-bg);
  color: var(--tcs-text);
  font-family: var(--tcs-font-body);
  font-size: var(--tcs-body-size-mobile);
  line-height: var(--tcs-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  body { font-size: var(--tcs-body-size-desktop); }
}

/* A2: aurora glows — multiple fixed radial gradients give the whole page
   a sense of ambient light + depth without changing the base bg token. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 40% at 15% 8%,  rgba(47, 91, 255, 0.26), transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 18%, rgba(54, 194, 240, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 45% at 60% 68%, rgba(47, 91, 255, 0.14), transparent 65%),
    radial-gradient(ellipse 45% 35% at 10% 92%, rgba(54, 194, 240, 0.10), transparent 60%);
}

/* A2: fine film grain — 2% opacity svg noise kills the "flat SaaS" feel. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Everything above the atmospheric layers */
.tcs-nav, main, .tcs-footer, #tcs-main { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--tcs-link); text-decoration: none; transition: color var(--tcs-dur) var(--tcs-ease); }
a:hover { color: var(--tcs-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tcs-font-heading);
  color: var(--tcs-text);
  margin: 0 0 var(--tcs-space-5);
  font-weight: 700;
  line-height: var(--tcs-h2-leading);
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--tcs-h1-size-mobile);
  line-height: var(--tcs-h1-leading);
  letter-spacing: -0.02em;
}
h2 { font-size: var(--tcs-h2-size-mobile); }
h3 { font-size: var(--tcs-h3-size-mobile); font-weight: 600; line-height: var(--tcs-h3-leading); }

@media (min-width: 768px) {
  h1 { font-size: var(--tcs-h1-size-desktop); }
  h2 { font-size: var(--tcs-h2-size-desktop); }
  h3 { font-size: var(--tcs-h3-size-desktop); }
}

p { margin: 0 0 var(--tcs-space-5); color: var(--tcs-muted); }
p.lead { color: var(--tcs-text); font-size: 1.15em; }

/* Eyebrow label — small-caps-ish */
.tcs-eyebrow {
  display: inline-block;
  font-family: var(--tcs-font-body);
  font-size: var(--tcs-eyebrow-size-mobile);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tcs-accent);
  margin-bottom: var(--tcs-space-4);
}
@media (min-width: 768px) {
  .tcs-eyebrow { font-size: var(--tcs-eyebrow-size-desktop); }
}

/* Layout primitives */
.tcs-container {
  width: 100%;
  max-width: var(--tcs-container-max);
  margin: 0 auto;
  padding: 0 var(--tcs-container-pad);
}
/* D11: section padding is HALF the per-brief section gap, so two
   stacked sections together produce exactly the brief gap:
     mobile  : 32px top + 32px bottom = 64px between sections
     desktop : 48px top + 48px bottom = 96px between sections */
.tcs-section {
  padding: calc(var(--tcs-section-gap-mobile) / 2) 0;
}
@media (min-width: 768px) {
  .tcs-section { padding: calc(var(--tcs-section-gap-desktop) / 2) 0; }
}
.tcs-section--tight { padding: var(--tcs-space-6) 0; }

/* Accent utilities
   .tcs-highlight is reserved for the ONE loud accent moment per page
   (hero H1 highlighted word). Uses --tcs-secondary so a URL param can
   preview violet/lime/coral without rebuilding. */
.tcs-highlight { color: var(--tcs-secondary); }

/* Skip-link for a11y */
.tcs-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--tcs-primary); color: #fff;
  padding: var(--tcs-space-3) var(--tcs-space-5);
  z-index: 100; border-radius: var(--tcs-radius-sm);
}
.tcs-skip-link:focus { left: var(--tcs-space-4); top: var(--tcs-space-4); }