/* Cosmira shared design system: warm dark canvas, tonal surfaces, rationed
   orange-to-gold accent gradient with a single pale "clarity" whisper note.
   Structure borrows from the Auros reference (tonal depth over shadows,
   dot-prefixed eyebrows, gradient CTA, gradient-bordered ghost buttons)
   reskinned for an expense-intelligence product. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---- Accent ---- */
  --orange: #F97316;
  --orange-dark: #C2410C;
  --orange-light: #FFE3C2;
  --orange-tint: #2A1B0E;
  --orange-glow: rgba(249, 115, 22, 0.58);
  --orange-soft: #FDBA74;
  --cool-whisper: #BFE3FF; /* the one cool, rationed accent against the warm field */

  /* ---- Surfaces (tonal stack, darkest -> lightest) ----
     Cards are LIGHTER than the canvas, not darker -- that's what actually
     reads as "elevation" rather than a flat void. The original Auros spec
     called for surfaces one shade BELOW canvas ("pressed in"), but combined
     with no shadows and no borders that made every section blend into one
     undifferentiated dark mass. This is the deliberate, tested fix for that.
     Lifted a second time -- the near-black canvas read as "too black"
     overall, so the whole stack moved up into warm-charcoal territory. */
  --ink: #18191B;
  --ink-deep: #0C0D0E;
  --bg: #212224;            /* canvas -- cool neutral charcoal, not near-black */
  --surface: #2B2C2F;       /* card surface, one step lighter than canvas */
  --surface-raised: #36373B; /* elevated/interactive surface, lighter still */

  /* ---- Text ---- */
  --text: #FFFFFF;
  --ink-soft: #DADBDE;
  --muted: #A4A5A8;
  --faint: #737477;

  /* ---- Borders ---- */
  --border: rgba(255,255,255,0.08);
  --border-strong: #252629;

  /* ---- Status ---- */
  --success: #4ADE80;
  --success-bg: rgba(74,222,128,0.12);
  --danger: #F87171;

  /* ---- Gradients ---- */
  --gradient-cta: linear-gradient(135deg, #F97316 0%, #FDBA74 60%, #FFD27A 100%);
  --gradient-ghost-border: linear-gradient(90deg, #FDBA74 0%, #FFE9C7 38%, #FFFDF9 58%, #BFE3FF 100%);
  --gradient-wash: radial-gradient(circle, #BFE3FF 0%, #FFFDF9 28%, #FFD27A 60%, #F97316 100%);

  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);

  /* ---- Radius discipline ---- */
  --radius: 16px;        /* cards */
  --radius-control: 8px; /* buttons, inputs, tags */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Faint film-grain over the whole viewport -- a small, deliberate texture
   detail (Stripe/Linear-style), not a generic AI-template effect. Fixed so
   it doesn't move/retile while scrolling, pointer-events:none so it never
   blocks a click, and opacity low enough that it reads as texture rather
   than visibly "covering" anything underneath it. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("grain.svg");
  background-size: 200px 200px;
}

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin: 0; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.lede { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.65; }
.muted { color: var(--muted); }

/* ---------- Header ----------
   Solid+blurred, not transparent: a transparent sticky header lets scrolling
   page content show straight through the nav text, which reads as text
   overlapping text while scrolling. Also hides on scroll-down and reappears
   on scroll-up (see site.js), so it never competes with content. */
header.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(33,34,36,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* A sticky header with backdrop-filter has to re-blur whatever's now
     behind it on every scroll frame -- without a hint to promote it to its
     own persistent GPU layer, browsers can fall back to recompositing it
     from scratch each frame, which reads as laggy/janky scrolling. This is
     the standard fix. */
  will-change: transform, backdrop-filter;
  transform: translateZ(0);
}
header.site-header.header-hidden {
  transform: translateY(-100%) translateZ(0);
  opacity: 0;
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 1120px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: #fff; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand svg { flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--ink-soft); font-weight: 600; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.nav-links a:hover { color: var(--orange); text-decoration: none; }
.nav-links a.active { color: var(--orange); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn-ghost.btn-secondary { background: transparent; color: var(--ink-soft); }
.nav-actions .btn-ghost.btn-secondary:hover { color: var(--orange); }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); flex-direction: column;
    align-items: flex-start; padding: 16px 24px 24px; border-bottom: 1px solid var(--border); gap: 16px;
    display: none; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; background: none; border: none; cursor: pointer; padding: 6px; }
  .nav-actions .btn-secondary { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gradient-cta); color: #170F0A; border: none; border-radius: var(--radius-control);
  padding: 13px 24px; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  text-decoration: none;
}
.btn::after { content: "\2197"; font-weight: 700; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 28px var(--orange-glow); text-decoration: none; }
.btn-secondary {
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-strong);
}
.btn-secondary::after { content: none; }
.btn-secondary:hover { border-color: var(--orange); color: var(--orange-soft); background: var(--surface-raised); filter: none; box-shadow: none; }
.btn-ghost {
  background: transparent; color: var(--ink-soft); border: 1px solid transparent;
  border-image: var(--gradient-ghost-border) 1; padding: 10px 18px;
}
.btn-ghost::after { content: none; }
.btn-ghost:hover { color: #fff; background: transparent; box-shadow: none; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn[disabled], .btn-disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* ---------- Sections / Cards ---------- */
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
/* Anchor-linked sections (e.g. #how-it-works) need clearance so a smooth
   scroll-jump doesn't land flush under the sticky header. */
section[id] { scroll-margin-top: 90px; }
/* One shade lighter than the canvas, so these sections read as a distinct
   band instead of blending into the hero/footer above and below them. */
section.section-dark { background: var(--surface); position: relative; overflow: hidden; }
.section-surface { background: var(--surface); }

/* Dot-prefixed eyebrow label -- the section identifier, no pill/background. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; color: var(--muted);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--orange); box-shadow: 0 0 10px var(--orange-glow);
}
.eyebrow-dark { /* alias kept for existing markup; eyebrow is dark-styled by default */ }

/* Tonal cards -- depth via one-shade surface contrast plus a faint border
   for crisp edges (a pure no-border/no-shadow treatment read as too flat). */
.card, .card-flat, .glass-card {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px;
  transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}
.card:hover, .card-flat:hover, .glass-card:hover {
  border-color: var(--orange-glow); transform: translateY(-3px);
}
.glass-card h3, .glass-card .num { color: #fff; }
.glass-card p, .glass-card .muted { color: var(--muted); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.icon-badge {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: var(--orange-tint); border: none;
  color: var(--orange-soft); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 16px;
  transition: transform 0.25s ease;
}
.icon-badge-dark { /* alias kept for existing markup */ }
.card:hover .icon-badge, .card-flat:hover .icon-badge, .glass-card:hover .icon-badge { transform: scale(1.08); }

/* Shared by any "flowing dot along a connector" visual (homepage's data-flow
   diagram, privacy page's data-flow diagram). transform, not left/top --
   left/top animate layout (forces reflow every frame, continuously, forever,
   since this runs whether or not anyone's scrolling); translateX/Y is
   compositor-only and effectively free. 106px/58px replicate the same
   0 -> 96% travel across a 110px-wide / 60px-tall connector. */
@keyframes flowMove { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(106px); opacity: 0; } }
@keyframes flowMoveVertical { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }

/* Parallax background glows -- position set inline per-section, this just
   marks the element for the scroll-tied transform in site.js. */
.parallax-glow { will-change: transform; }

/* ---------- Scroll-reveal animation ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 0.05s; }
.reveal-2 { transition-delay: 0.15s; }
.reveal-3 { transition-delay: 0.25s; }
.reveal-4 { transition-delay: 0.35s; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--bg); border-top: 1px solid var(--border); color: var(--ink-soft); padding: 64px 0 32px; margin-top: 0; }
footer.site-footer a { color: var(--ink-soft); }
footer.site-footer a:hover { color: var(--orange); text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { color: #fff; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.footer-bottom {
  border-top: 1px solid var(--border); margin-top: 48px; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.85rem; color: var(--faint);
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 12px; }

/* ---------- Ambient glow + CTA band (shared hero/intro decoration) ----------
   Originally local to index.html's hero; promoted here so every page's intro
   section can carry the same atmospheric depth instead of looking flat by
   comparison. Position/size are still set inline per-use since each section
   needs different placement, only the visual treatment is shared. */
.hero-texture {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 75%);
  z-index: 0; pointer-events: none;
}
.hero-glow {
  position: absolute; top: -180px; right: -120px; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.44) 0%, rgba(249,115,22,0.18) 45%, rgba(249,115,22,0) 76%);
  z-index: 0; pointer-events: none;
}
.hero-glow-soft {
  position: absolute; bottom: -160px; left: -100px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(191,227,255,0.12) 0%, rgba(191,227,255,0) 70%);
  z-index: 0; pointer-events: none;
}

.cta-band { background: var(--gradient-cta); border-radius: 24px; padding: 56px; text-align: center; color: #170F0A; }
.cta-band h2 { color: #170F0A; }
.cta-band .btn-secondary { background: #170F0A; color: #fff; border: none; }
.cta-band .btn-secondary::after { content: "\2197"; }

/* ---------- Misc shared ---------- */
.badge-trust {
  display: inline-flex; align-items: center; gap: 8px; background: var(--success-bg); color: var(--success);
  border: 1px solid rgba(74,222,128,0.35); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600;
}
.hr { height: 1px; background: var(--border); border: none; margin: 0; }