/* ============================================================
   TSARU — Brand system tokens
   "Hello, in Martian."  Warm by day, calm at dusk.
   ============================================================ */

:root {
  /* — Surfaces: warm near-black, the Martian night — */
  --bg-0:        #08070A;   /* deepest void */
  --bg-1:        #0E0B0C;   /* canvas */
  --bg-2:        #15110F;   /* warm regolith black */
  --card:        #17131A;   /* solid elevated card */
  --card-2:      #1E1922;   /* raised */

  /* — Glass over the ambient gradient — */
  --glass:       rgba(255,255,255,0.055);
  --glass-2:     rgba(255,255,255,0.085);
  --glass-brd:   rgba(255,255,255,0.13);
  --glass-hi:    rgba(255,255,255,0.22);

  /* — Text: warm whites — */
  --text:        #F4EFEA;
  --text-muted:  #A39A93;
  --text-faint:  #6B645E;

  /* — Ember: Mars by day. The one primary action. — */
  --ember:       #FF8A4C;
  --ember-soft:  #FFA877;
  --ember-deep:  #C9551F;
  --ember-15:    rgba(255,138,76,0.15);
  --ember-08:    rgba(255,138,76,0.08);
  --on-ember:    #1C0A02;   /* dark text on ember */

  /* — Twilight: Mars at dusk (real Martian sunsets are blue). Depth + calm. — */
  --twilight:    #8FA0E6;
  --twilight-soft:#AEB9EE;
  --twilight-15: rgba(143,160,230,0.16);

  /* — Signal — */
  --danger:      #F0746A;
  --warning:     #F4C152;
  --ok:          #6FCF9A;

  /* — Type — */
  --font-ui:   "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* — Radii — */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* — Ambient gradient (the glass refracts this) — */
  --grad:
    radial-gradient(120% 80% at 78% 12%, rgba(255,138,76,0.22), transparent 55%),
    radial-gradient(95% 70% at 12% 8%,  rgba(201,85,31,0.20), transparent 50%),
    radial-gradient(120% 90% at 50% 108%, rgba(143,160,230,0.13), transparent 60%),
    radial-gradient(60% 50% at 88% 92%, rgba(255,138,76,0.10), transparent 60%),
    linear-gradient(180deg, #140C09 0%, #0B0809 46%, #100A0C 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(255,138,76,0.3); color: #fff; }

/* ============================================================
   Showcase page shell
   ============================================================ */
.page {
  position: relative;
  min-height: 100vh;
  background: var(--grad);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* faint star/grain field */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 12% 65%, rgba(255,255,255,0.3), transparent);
  opacity: 0.6;
  z-index: 0;
}

.wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* Section scaffolding */
.section { padding: 96px 0; }
.section-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
.section-tag::before {
  content: "";
  width: 22px; height: 1px; background: var(--ember); opacity: 0.6;
}
.section-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.05;
  text-wrap: balance;
}
.section-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0;
}

.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-brd), transparent); border: 0; margin: 0; }

/* utility glass card */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.mono { font-family: var(--font-mono); }