/* Thronos marketing site — shared styles.
   Brand-matched to the Thronos app design system (canvas-thronos / frontend).
   Palette + type ported from frontend/src/canvas/tokens.js — dark
   "astrolabe + letterpress": parchment on midnight, antique gold. */

/* ───────────────────────── Fonts ───────────────────────── */
/* Cormorant (display serif) self-hosted from the app's canvas fonts.
   Inter Tight (UI) + JetBrains Mono pulled from Google Fonts. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/Cormorant-Medium.otf") format("opentype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Upright";
  src: url("/assets/fonts/CormorantUpright-Medium.otf") format("opentype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ───────────────────────── Tokens ───────────────────────── */
:root {
  /* backgrounds */
  --ink:       oklch(0.12 0.015 280);
  --midnight:  oklch(0.18 0.02 270);
  --vellum:    oklch(0.22 0.022 265);
  --engraved:  oklch(0.26 0.02 260);
  /* text */
  --parchment: oklch(0.92 0.02 85);
  --muted:     oklch(0.72 0.018 85);
  --faint:     oklch(0.52 0.015 85);
  --hairline:  oklch(0.38 0.012 85);
  /* accents */
  --gold:      oklch(0.82 0.12 80);
  --gold-deep: oklch(0.66 0.1 65);
  --ember:     oklch(0.65 0.11 40);
  --lunar:     oklch(0.88 0.03 240);
  /* the wordmark amber (hex fallbacks used in gradients) */
  --gold-amber: #d4af37;
  --gold-bright: #f0cc78;
  --gold-mid:   #d1a14a;
  --gold-dark:  #6e4518;
  /* fonts */
  --display: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  --ui: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  /* layout */
  --maxw: 920px;
}

/* ───────────────────────── Base ───────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #05070b;
  color: var(--parchment);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--gold); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--gold-bright); }

img { max-width: 100%; display: block; }

/* Subtle starfield/grain ambience behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 12%, rgba(240,200,120,0.05), transparent 38%),
    radial-gradient(circle at 82% 60%, rgba(150,170,220,0.04), transparent 42%),
    #05070b;
  z-index: -2;
}

/* ───────────────────────── Typography ───────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--parchment);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-style: italic; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: 1.6em; }
h3 { font-size: 1.25rem; margin-top: 1.4em; }

p { margin: 0 0 1.1em; color: var(--muted); }
strong { color: var(--parchment); font-weight: 500; }
em { color: var(--parchment); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.ornament {
  height: 0.5px;
  width: 120px;
  margin: 1.5rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

/* ───────────────────────── Header / Nav ───────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(5,7,11,0.72);
  border-bottom: 0.5px solid color-mix(in oklch, var(--hairline), transparent 40%);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.nav-brand .mark {
  height: 22px;
  width: auto;
}
.nav-brand .word {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--gold); }

/* ───────────────────────── Layout ───────────────────────── */
main { flex: 1; width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 22px 90px;
}
.page p, .page li { color: var(--muted); }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: 0.5em; }
.page .meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2rem;
}

/* ───────────────────────── Hero ───────────────────────── */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 22px 64px;
  overflow: hidden;
}
/* Gold hairline at the hero → content seam: a full-width solid gold rule that
   sits flush on the exact sky → dark-panel boundary (hero bottom edge). The
   .hero-credit rides just above it on the sky. */
.hero-seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 0;
}
.hero-seam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* anchor to bottom so the 1px rule renders just inside the hero's clipped
     edge instead of being cut off by overflow:hidden */
  bottom: 0;
  height: 1px;
  /* full-width solid gold rule, edge to edge — the sky → panel split */
  background: var(--gold);
  opacity: 0.85;
  box-shadow: 0 0 10px rgba(209, 161, 74, 0.5);
}
.hero-sky {
  position: absolute;
  inset: 0;
  /* No-JS fallback: the Hubble Cosmic Reef frame as a CSS background so the
     hero is never blank. The <img> (.hero-sky-img) shows the same frame. */
  background-image: url("/assets/img/hubble/heic2007a.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
  overflow: hidden;
}
.hero-sky-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02) brightness(0.98);
}
.hero-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5,7,11,0.30) 0%,
    rgba(5,7,11,0.20) 30%,
    rgba(5,7,11,0.55) 64%,
    rgba(5,7,11,0.88) 100%);
}
.hero-wordmark {
  width: min(340px, 78vw);
  height: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.9));
}
.hero h1 {
  margin: 6px auto 10px;
  max-width: 14ch;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95), 0 0 28px rgba(0,0,0,0.75);
}
.hero h1 .gold { color: var(--gold-amber); }
.hero-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--parchment);
  max-width: 40ch;
  margin: 0 auto 18px;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,0.95);
}
.hero-tags {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: var(--gold-mid);
  text-transform: uppercase;
  margin-bottom: 30px;
}
/* Required credit for ESA/Hubble imagery (CC BY 4.0). Must stay visible. */
.hero-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 220ms ease;
  border: 0.5px solid transparent;
}
/* Pressed-foil gold CTA — matches the app's landing.jsx button: a warm
   antique-gold gradient with a letterpress feel (top highlight inset + soft
   warm drop shadow), a fine gold-deep hairline border, and crisp mono caps.
   Pure CSS approximation of the foil texture (no heavy image asset). */
.btn-gold {
  position: relative;
  background:
    linear-gradient(180deg, oklch(0.86 0.13 80) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  color: #1a1206;
  font-weight: 500;
  letter-spacing: 0.3em;
  border: 0.5px solid color-mix(in oklch, var(--gold-deep), transparent 25%);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
  box-shadow:
    0 8px 24px rgba(180, 130, 50, 0.3),
    inset 0 1px 0 rgba(255, 230, 180, 0.55);
}
.btn-gold:hover {
  color: #1a1206;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(180, 130, 50, 0.38),
    inset 0 1px 0 rgba(255, 235, 190, 0.65);
}
.btn-gold:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    0 3px 10px rgba(180, 130, 50, 0.28),
    inset 0 2px 5px rgba(90, 60, 20, 0.4),
    inset 0 1px 0 rgba(255, 230, 180, 0.3);
}
.btn-ghost {
  background: rgba(255,255,255,0.02);
  border: 0.5px solid color-mix(in oklch, var(--hairline), transparent 20%);
  color: var(--muted);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ───────────────────────── Email capture ───────────────────────── */
.capture {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 440px;
  margin: 0 auto;
}
.capture input {
  flex: 1 1 220px;
  background: rgba(8,10,16,0.7);
  border: 0.5px solid color-mix(in oklch, var(--hairline), transparent 10%);
  color: var(--parchment);
  font-family: var(--ui);
  font-size: 0.9rem;
  padding: 13px 16px;
  border-radius: 2px;
  outline: none;
  transition: border-color 200ms ease;
}
.capture input::placeholder { color: var(--faint); }
.capture input:focus { border-color: var(--gold); }
.capture-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ───────────────────────── Feature rows ───────────────────────── */
.section { padding: 70px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { margin-top: 0; }
.section-head p { color: var(--muted); max-width: 46ch; margin: 0 auto; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.feature {
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 26px 22px;
}
.feature .glyph { color: var(--gold); font-size: 1.1rem; margin-bottom: 12px; }
.feature h3 { margin: 0 0 8px; font-style: italic; }
.feature p { margin: 0; font-size: 0.92rem; }

/* ───────────────────────── Pricing ───────────────────────── */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 28px 24px;
}
.tier.featured {
  background: linear-gradient(135deg, rgba(212,175,55,0.07), rgba(212,175,55,0.02));
  border: 1px solid rgba(212,175,55,0.28);
}
.tier .tier-flag {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-amber);
  margin-bottom: 12px;
}
.tier h3 { margin: 0 0 4px; font-size: 1.4rem; }
.tier .price {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--parchment);
  line-height: 1;
  margin: 6px 0 2px;
}
.tier .price .per {
  font-family: var(--ui);
  font-size: 0.85rem;
  color: var(--faint);
  margin-left: 4px;
}
.tier .annual {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--gold-mid);
  margin-bottom: 18px;
}
.tier ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 24px;
  flex: 1;
}
.tier li {
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 11px;
}
.tier li::before { content: "✦"; color: var(--gold); font-size: 0.7rem; margin-top: 3px; }
.pricing-note {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 34px;
}

/* ───────────────────────── Contact card ───────────────────────── */
.card {
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 30px 28px;
  margin: 18px 0;
}
.card .label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.card .value { color: var(--parchment); font-size: 1.05rem; margin-bottom: 18px; }
.card .value:last-child { margin-bottom: 0; }

/* ───────────────────────── Footer ───────────────────────── */
.site-footer {
  border-top: 0.5px solid color-mix(in oklch, var(--hairline), transparent 40%);
  background: rgba(5,7,11,0.6);
  padding: 40px 22px 48px;
  margin-top: auto;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.footer-entity {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--parchment);
  margin-bottom: 14px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--gold); }
.footer-contact {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.footer-contact a { color: var(--gold-mid); }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 560px) {
  .nav-links { gap: 14px; }
  .nav-links .hide-sm { display: none; }
  .page { padding: 44px 20px 70px; }
}