/* ============================================================
   The Solar Pro — Eclipse design system (v3 — May 2026)
   Deep night base · solar amber accent · cinematic dark theme.
   Inter Tight (display) + Inter (body) + Instrument Serif (italic accents)
   + JetBrains Mono (numerics).
   ============================================================ */

:root {
  /* === Surfaces === */
  --void:         #08090C;     /* page background — near black */
  --night:        #0E1014;     /* sections / second tier */
  --surface:      #14151A;     /* cards */
  --raised:       #1F2026;     /* elevated cards */
  --hairline:     #26272F;     /* dividers */
  --hairline-2:   #34363F;     /* slightly stronger divider */

  /* === Type === */
  --type:         #FAFAFC;     /* primary type */
  --type-soft:    #C8CAD3;     /* secondary */
  --type-mute:    #7A7D8A;     /* meta / captions */
  --type-dim:     #4A4D58;     /* tertiary / disclaimers */

  /* === Solar amber accent === */
  --amber:        #FFB347;     /* primary accent */
  --amber-bright: #FFD580;     /* hover / highlight */
  --amber-deep:   #E08A1A;     /* pressed */
  --amber-glow:   rgba(255,179,71,0.18);    /* halo wash */
  --amber-faint:  rgba(255,179,71,0.06);    /* very subtle */

  /* === Auxiliary signals === */
  --good:         #4ADE80;
  --warn:         #F59E0B;
  --bad:          #F87171;

  /* === Type families ===
     Display: Inter Tight at heavy weight, very tight tracking.
     Body: Inter — pairs perfectly.
     Italic accents: Instrument Serif italic — premium editorial moments.
     Numerics + small caps: JetBrains Mono. */
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --italic:  "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* === Type scale ===
     Hero is dramatic; body conservative. */
  --fs-hero:    clamp(3.5rem, 8vw + 1rem, 9rem);
  --fs-display: clamp(2.5rem, 4.5vw + 0.5rem, 5.25rem);
  --fs-h1:      clamp(2.25rem, 3vw + 0.5rem, 3.75rem);
  --fs-h2:      clamp(1.75rem, 2vw + 0.5rem, 2.625rem);
  --fs-h3:      clamp(1.25rem, 1vw + 0.875rem, 1.625rem);
  --fs-body:    1.0625rem;
  --fs-meta:    0.8125rem;
  --fs-mono:    0.75rem;
  --fs-eyebrow: 0.6875rem;

  /* === Spacing === */
  --s-xs:  0.5rem;
  --s-sm:  1rem;
  --s-md:  1.75rem;
  --s-lg:  3rem;
  --s-xl:  5rem;
  --s-2xl: 8rem;
  --s-3xl: 12rem;

  /* === Containers === */
  --w-narrow:  44rem;
  --w-prose:   38rem;
  --w-wide:    82rem;
  --w-bleed:   100vw;

  /* === Radii === */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 36px;

  /* === Shadows === */
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -28px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 0 1px var(--amber-glow), 0 0 60px -10px var(--amber-glow);
  --shadow-amber: 0 8px 24px -8px rgba(255,179,71,0.32);

  /* === Motion === */
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:  180ms;
  --t-slow:  600ms;
  --t-very-slow: 1200ms;
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--type);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--type);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--amber-bright); }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--type);
  margin: 0 0 var(--s-md);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.18; font-weight: 600; }

p {
  margin: 0 0 1.1em;
  color: var(--type-soft);
}

::selection { background: var(--amber); color: var(--void); }

/* ============================================================
   Editorial italic — Instrument Serif italic for accents
   ============================================================ */
.italic, em.brand-italic {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* ============================================================
   Eyebrow + mono labels
   ============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-block;
}

.mono { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.04em; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.95em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--amber);
  color: var(--void);
  box-shadow: var(--shadow-amber);
}
.btn--primary:hover {
  background: var(--amber-bright);
  color: var(--void);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -8px rgba(255,179,71,0.45);
}

.btn--ghost {
  background: transparent;
  color: var(--type);
  border-color: var(--hairline-2);
}
.btn--ghost:hover {
  border-color: var(--amber);
  color: var(--amber-bright);
}

.btn--solid {
  background: var(--surface);
  color: var(--type);
  border-color: var(--hairline);
}
.btn--solid:hover {
  background: var(--raised);
  border-color: var(--hairline-2);
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap        { max-width: var(--w-wide);   margin: 0 auto; padding: 0 var(--s-md); }
.wrap-narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 0 var(--s-md); }
.prose       { max-width: var(--w-prose);  margin: 0 auto; padding: 0 var(--s-md); }

.section { padding: var(--s-2xl) 0; }
.section--tight { padding: var(--s-xl) 0; }
.section--lg { padding: var(--s-3xl) 0; }
.section--night { background: var(--night); }
.section--surface { background: var(--surface); }

/* Hairline dividers */
.hairline { height: 1px; background: var(--hairline); border: 0; margin: var(--s-lg) 0; }
.hairline--gold {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--amber) 70%, transparent);
  opacity: 0.55;
  margin: var(--s-lg) 0;
}

/* ============================================================
   Sun / glow utility — brand signal
   ============================================================ */
.glow-disc {
  width: 1em; height: 1em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--amber-bright), var(--amber-deep));
  box-shadow: 0 0 24px 2px var(--amber-glow);
  display: inline-block;
  vertical-align: middle;
}

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.9s var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}