/* Shared styles for the inner pages (Contact, Privacy, Terms).
   Values come from the teaser design in index.html. */

:root {
  --navy: #131548;
  --ink: #15173E;
  --ink-2: #3B3F73;
  --indigo: #2B308C;
  --indigo-dark: #1F2271;
  --periwinkle: #9C9FFE;
  --mist: #B9BCEB;
  --haze: #C7CAE2;
  --dim: #9FA2D9;
  --paper: #F6F7FB;
  --white: #FFFFFF;
  --line-dark: rgba(156, 159, 254, 0.20);
  --line-light: #DCDEEE;
  --gutter: 120px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --hero-bg:
    linear-gradient(180deg, rgba(19, 21, 72, 0) 50%, rgba(19, 21, 72, 0.5) 100%),
    radial-gradient(ellipse 60% 70% at 80% 20%, rgba(76, 83, 210, 0.62) 0%, rgba(62, 68, 184, 0.34) 32%, rgba(44, 49, 144, 0) 70%),
    linear-gradient(100deg, #131548 0%, #181B5A 30%, #21257A 65%, #272B86 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy);
  font-family: var(--font-body);
  color: var(--ink);
}
a { color: var(--indigo); }
a:hover { color: var(--indigo-dark); }
img { max-width: 100%; }

/* ---------- Animations (from the teaser) ---------- */
@keyframes orbitTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glowUp { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.17; } }
.t-rise { animation: riseIn 520ms cubic-bezier(.2,.7,.3,1) both; }
.t-rise-1 { animation-delay: 60ms; } .t-rise-2 { animation-delay: 140ms; }
.t-rise-3 { animation-delay: 220ms; } .t-rise-4 { animation-delay: 300ms; }
.t-glow { animation: glowUp 700ms ease both, orbitTurn 90s linear infinite, breathe 14s ease-in-out infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .t-rise, .t-glow { animation: none !important; }
  .t-glow { opacity: 0.11; }
}

/* ---------- Header ---------- */
.site-header {
  padding: 0 var(--gutter);
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  z-index: 2;
}
.site-header .logo img { height: 20px; width: auto; display: block; filter: brightness(0) invert(1); }
.site-header .back {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mist);
  text-decoration: none;
}
.site-header .back:hover { color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  padding: 104px var(--gutter) 112px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1020px;
}
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
}
.hero h1 .accent { color: var(--periwinkle); }
.hero .lead {
  margin: 0;
  max-width: 760px;
  font-size: 21px;
  line-height: 1.5;
  color: var(--haze);
}
.hero .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mist);
}
.hero-orbit {
  position: absolute;
  right: -240px;
  bottom: -300px;
  width: 760px;
  height: auto;
  opacity: 0.11;
  pointer-events: none;
}

/* ---------- Light content section ---------- */
.content {
  background: var(--paper);
  padding: 112px var(--gutter) 128px;
}
.prose {
  max-width: 820px;
  display: grid;
  gap: 52px;
}
.prose section {
  padding-top: 26px;
  border-top: 2px solid var(--indigo);
}
.prose .num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--indigo);
}
.prose h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.prose p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 56px var(--gutter) 64px;
  background: var(--navy);
  color: #C9CBFF;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.site-footer .brand { display: flex; flex-direction: column; gap: 18px; }
.site-footer .brand img { height: 20px; width: auto; align-self: flex-start; filter: brightness(0) invert(1); }
.site-footer .tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--periwinkle); }
.site-footer .legal { font-size: 13px; color: var(--dim); }
.site-footer nav { display: flex; gap: 40px; font-size: 14px; }
.site-footer nav a { color: var(--dim); text-decoration: none; }
.site-footer nav a:hover,
.site-footer nav a[aria-current="page"] { color: var(--white); }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .site-header { height: 68px; }
  .hero-inner { padding-top: 72px; padding-bottom: 80px; }
  .hero h1 { font-size: 48px; }
  .hero .lead { font-size: 18px; }
  .hero-orbit { width: 460px; right: -180px; bottom: -200px; }
  .content { padding-top: 72px; padding-bottom: 88px; }
  .prose { gap: 40px; }
  .prose h2 { font-size: 24px; }
  .prose p { font-size: 16px; }
  .site-footer { flex-direction: column; }
  .site-footer nav { gap: 28px; }
}