/* TrillMark marketing site — shared styles.
   Only the legal pages (privacy.html / terms.html) use this file; they stay adaptive light/dark for
   readability. The landing + download pages are self-contained (inline styles). Brand: TrillMark's
   cyan mark (T/M monogram + EKG waveform) on a cool dark tile — accent cyan, cool near-black surfaces. */

:root {
  --bg: #ffffff;
  --bg-elev: #f4f6f7;
  --card: #ffffff;
  --text: #17201f;
  --text-dim: #5f6d72;
  --border: #d4dbdd;
  --accent: #0a92a8;
  --accent-glow: #2fd3e6;
  --radius: 18px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1013; --bg-elev: #101a1e; --card: #121d22;
    --text: #eaf2f4; --text-dim: #97a8ad; --border: #23343a; --accent: #2fd3e6;
  }
}

/* Landing/download: force the cinematic cool-dark palette regardless of system theme. */
body.landing {
  --bg: #0a1013; --bg-elev: #0f181c; --card: #121d22;
  --text: #eaf2f4; --text-dim: #90a2a8; --border: #22333a; --accent: #2fd3e6;
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  /* ambient aurora — vivid brand-cyan blooms + a broad cyan-white wash, fixed behind content.
     LIGHT uses the bright cyan #2fd3e6 (the muted link teal #0a92a8 greys out on white) so the
     tint actually reads as cyan; the dark override below swaps to subtle blooms on near-black. */
  background:
    radial-gradient(75% 66% at 12% -6%, rgba(47,211,230,.34), transparent 60%),
    radial-gradient(70% 60% at 98% 3%, rgba(47,211,230,.26), transparent 62%),
    radial-gradient(86% 74% at 85% 106%, rgba(47,211,230,.22), transparent 64%),
    linear-gradient(180deg, #e6fbff 0%, #f4feff 44%, #ffffff 80%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5;
}
/* dark legal pages: the same blooms read strong on near-black, so pull the alphas back down */
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(48% 42% at 14% 3%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
      radial-gradient(46% 40% at 92% 10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
      radial-gradient(60% 52% at 84% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
      var(--bg);
    background-attachment: fixed;
  }
}
/* faint grid, fading from the top — sits above the bloomed background, below content */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .05;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 55%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 24%, transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 24%, transparent 74%);
}
body > *:not(nav) { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.nav .brand img { width: 26px; height: 26px; border-radius: 6px; }
.nav .links { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav .links a { color: var(--text-dim); font-size: 14px; }
.nav .links a:hover { color: var(--text); text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 980px; font-size: 15px; font-weight: 550;
  background: var(--accent); color: #06222a !important; border: 1px solid transparent;
  cursor: pointer; transition: filter .15s ease, transform .05s ease, background .15s ease;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--border); background: var(--bg-elev); padding: 40px 0; font-size: 13px; color: var(--text-dim); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
footer .brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
footer .brand img { width: 22px; height: 22px; border-radius: 5px; }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; }
footer .links a { color: var(--text-dim); }
footer .copy { margin-left: auto; }

/* ---------- legal document pages (adaptive) ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.doc h1 { font-size: 34px; letter-spacing: -.02em; margin: 0 0 6px; }
.doc .eff { color: var(--text-dim); font-size: 14px; margin: 0 0 36px; }
.doc h2 { font-size: 21px; margin: 40px 0 12px; letter-spacing: -.01em; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; color: var(--text); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc code { background: color-mix(in srgb, var(--text) 10%, transparent); padding: 1px 6px; border-radius: 5px; font-size: 13.5px; }
.doc .legal-caps { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.doc strong { color: var(--text); }
.doc a { text-decoration: underline; }
.doc .back { display: inline-block; margin-bottom: 28px; font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  footer .copy { margin-left: 0; flex-basis: 100%; }
}