/* HandelOS shared cinematic theme. Loaded after legacy page styles. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg: #0f0c0a;
  --bg-1: #15110d;
  --bg-2: #1a1510;
  --paper: #0f0c0a;
  --paper-2: #15110d;
  --paper-3: #1a1510;
  --surface: #1b1712;
  --surface-2: #241d16;
  --surface-3: #2c2419;
  --ink: #faf5ec;
  --text: #d9d0c1;
  --body: #d9d0c1;
  --muted: #a99d8b;
  --muted-txt: #a99d8b;
  --line: rgba(255, 240, 220, .09);
  --line-2: rgba(255, 240, 220, .05);
  --gold: #f3b455;
  --gold-2: #e59a2c;
  --gold-soft: #f8d18a;
  --aqua: #35d3b6;
  --aqua-2: #1fb79b;
  --aqua-soft: #7ee7d3;
  --accent: #35d3b6;
  --accent-ink: #7ee7d3;
  --accent-soft: rgba(53, 211, 182, .12);
  --focus: #35d3b6;
  --live: #3fcf8e;
  --build: #e6a93a;
  --demo: #8f8474;
  --danger: #f0546a;
  --pc: #e0b25a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --sh-1: 0 14px 30px -14px rgba(0, 0, 0, .6);
  --sh-2: 0 30px 60px -22px rgba(0, 0, 0, .72);
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--sans); background-image: none; }
h1, h2, h3, h4, .display { color: var(--ink); font-family: var(--serif); }
::selection { background: var(--gold); color: #241706; }

.topbar { background: var(--bg-1); color: var(--muted); border-bottom-color: var(--line-2); }
.topbar b { color: var(--gold-soft); }
nav, body.nav-solid nav { background: rgba(15, 12, 10, .9); border-bottom-color: var(--line); backdrop-filter: blur(16px) saturate(1.3); }
.logo { color: var(--ink); }
.logo .dot { background: url('brand/orbit-mark.svg') center / contain no-repeat; }
.nav-links a { color: var(--text); }
.nav-links a:hover, .nav-links a[aria-current='page'] { background: rgba(255, 255, 255, .05); color: var(--ink); }
.nav-pulse { color: var(--ink); background: rgba(255, 255, 255, .04); border-color: var(--line); }
.nav-pulse .v { color: var(--pc); }

.btn-gold { background: var(--gold); color: #241706; }
.btn-gold:hover { background: var(--gold-2); }
.btn-ghost { background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua-soft); }
.kick, .hero-eye { color: var(--aqua-soft); }
.kick::before { background: var(--aqua); }

.hero, .page-hero { background: var(--bg); }
.hero h1, .page-hero h1, .cta-band h2 { color: var(--ink); }
.hero h1 em, .head h2 em, .page-hero h1 em, .cta-band h2 em { color: var(--gold-soft); }
.page-hero h1 em { background: none; -webkit-text-fill-color: currentColor; }
.hero .sub, .page-hero .sub, .head p, .cta-band p { color: var(--text); }
section, .sec-lift, .flag-sec, .cta-band, .footer { background: var(--bg); }
.sec-lift, .flag-sec { background: var(--bg-1); }
.pillar, .feature-card, .app-card, .plan-card, .contact-form,
.faq, .faq-item, .work-card, .pulse-card, .story-card,
.trust-card, .compare-card, .quote-card, .case-card, .step-card,
.metric-card, .info-card, .resource-card, .timeline-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.pillar.heart, .plan-card.featured, .app-card.featured { background: var(--surface-2); border-color: rgba(243, 180, 85, .38); }
.feature-card .ic, .app-card .ic, .pillar .ic { background: rgba(224, 178, 90, .12); border-color: var(--line); }
.pillar h3, .feature-card h3, .app-card h3, .plan-card h3 { color: var(--ink); }
.pillar p, .feature-card p, .app-card p, .plan-card p { color: var(--text); }

input, select, textarea { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(53, 211, 182, .18); }
.footer { border-top-color: var(--line); }
.foot-blurb, .foot-bottom, .foot-col h5 { color: var(--muted); }
.foot-col a { color: var(--text); }
.foot-col a:hover { color: var(--gold-soft); }

/* The immersive homepage uses the same palette while retaining its flow. */
.site-header { background: rgba(15, 12, 10, .92); border-bottom-color: var(--line); }
.brand-word { color: var(--ink); font-family: var(--serif); }
.brand-word em, .eyebrow { color: var(--gold-soft); }
.primary-nav a, .hero p:not(.eyebrow), .journey-intro p:not(.eyebrow), .hero-note { color: var(--text); }
.nav-cta { border-color: var(--gold); color: var(--gold-soft); }
.nav-toggle { color: var(--ink); }
.site-header.nav-open .primary-nav { background: var(--bg-1); border-bottom-color: var(--line); }
.hero { border-bottom-color: var(--line); }
.hero h1, .journey-intro h2, .closing h2 { color: var(--ink); font-family: var(--serif); }
.hero h1 em, .journey-intro h2 em, .closing h2 em { color: var(--gold-soft); }
.button { background: var(--gold); color: #241706; }
.button:hover, .button:focus-visible { background: var(--gold-2); }
.hero-art { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-2); }
.journey-intro, .closing { background: var(--bg); }
.scroll-journey { background: var(--bg-1); border-color: var(--line); }
.journey-meter { color: var(--ink); }
.journey-key, .journey-meter span, .merge-caption span { color: var(--gold-soft); }
.journey-key::before { background: var(--gold); }
.scroll-prompt { color: var(--muted); }
.merge-panel { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-1); }
.journey-result { background: rgba(27, 23, 18, .94); border-color: var(--gold); color: var(--ink); }
.journey-result p { color: var(--gold-soft); }
.principles { background: var(--bg-2); color: var(--ink); }
.principle { background: var(--bg-2); }
.principle h3 { color: var(--ink); }
.principle p { color: var(--text); }
.footer { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }