:root {
  --brand-navy: #07182f;
  --brand-navy-soft: #102844;
  --brand-cyan: #079ab8;
  --brand-cyan-light: #48cae4;
  --brand-cloud: #f6f8fa;
  --brand-mist: #edf3f6;
  --brand-paper: #ffffff;
  --brand-ink: #102033;
  --brand-muted: #5f7487;
  --brand-line: #dbe5eb;
  --brand-radius-sm: 12px;
  --brand-radius: 18px;
  --brand-shadow: 0 18px 48px rgba(16, 32, 51, 0.08);
  --brand-ease: cubic-bezier(.23, 1, .32, 1);

  /* Compatibility aliases: legacy components now resolve to the blue system. */
  --bg: var(--brand-cloud);
  --surface: var(--brand-mist);
  --surface-raised: var(--brand-paper);
  --ink: var(--brand-ink);
  --ink-secondary: #29445f;
  --muted: var(--brand-muted);
  --brand: var(--brand-cyan);
  --brand-dark: #076c83;
  --brand-light: var(--brand-cyan-light);
  --teal: var(--brand-cyan);
}

.page-hero {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
}

/*
 * PeduliAI background choreography
 * One fixed, two-layer canvas prevents visible seams between semantic sections.
 * JavaScript only animates layer opacity; static section backgrounds remain the
 * no-JS fallback. The palette deliberately contains no green or purple hues.
 */
.page-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--brand-cloud);
  contain: strict;
}

.page-background__layer {
  position: absolute;
  inset: -1px;
  opacity: 0;
  background: var(--brand-cloud);
  will-change: opacity;
}

.page-background__layer.is-active { opacity: 1; }

html.bg-choreography-ready { background: var(--brand-navy); }

html.bg-choreography-ready body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

html.bg-choreography-ready [data-bg-tone]:not([data-bg-media]) {
  background: transparent !important;
}

/* Keep cards and local reading surfaces opaque while their section breathes. */
html.bg-choreography-ready :where(
  .vessel-content,
  .loop-card,
  .ubi-pathway,
  .business-line,
  .trust-ledger-row,
  .info-media-card,
  .k-card,
  .toc,
  .answer-box,
  .note-box,
  .warning-box,
  .article-row,
  .compare-wrap
) {
  isolation: isolate;
}

@media (max-width: 760px) {
  .page-background__layer { will-change: auto; }
}

html { scrollbar-color: #93a9b8 var(--brand-cloud); }
body { accent-color: var(--brand-cyan); }
::selection { color: #fff; background: var(--brand-cyan); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}

:where(button, .btn, .download-btn, .vessel-soul-btn):active { transform: scale(.98); }

.site-footer {
  border-top-color: rgba(255, 255, 255, .12);
  background: var(--brand-navy);
  color: rgba(255, 255, 255, .76);
}

.site-footer :where(.footer-brand, .footer-links a, .footer-copyright, .footer-tagline) {
  color: #fff;
}

.site-footer :where(.footer-sub-tagline, .footer-bottom) {
  color: rgba(255, 255, 255, .68);
}

.footer-brand,
.footer-links a { text-underline-offset: 4px; }

body.legal-page {
  background: var(--brand-cloud);
  color: var(--brand-ink);
}

.legal-main { min-height: calc(100vh - 72px); }

.legal-hero {
  padding: clamp(132px, 15vw, 210px) 0 clamp(72px, 9vw, 120px);
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(72, 202, 228, .16), transparent 30%),
    linear-gradient(135deg, #07182f 0%, #0b2742 68%, #073a49 100%);
}

.legal-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display, Lexend, sans-serif);
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.legal-content { padding: clamp(70px, 9vw, 120px) 0; }
.legal-reading { max-width: 780px; }
.legal-reading p,
.legal-reading li { color: var(--brand-muted); font-size: 1.05rem; line-height: 1.82; }
.legal-reading p + p { margin-top: 1.3rem; }
.legal-reading h2 { margin: 2.75rem 0 1rem; color: var(--brand-ink); font-family: var(--font-display, Lexend, sans-serif); font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.03em; }

@media (max-width: 760px) {
  .legal-hero { padding-top: 112px; }
  .legal-content { padding-block: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-background__layer { will-change: auto; }
  :where(button, .btn, .download-btn, .vessel-soul-btn):active { transform: none; }
}