/* Variant: Spotlight — a dark stage; a warm beam lights a single app window. Dark only. */
:root {
  --bg: #0c0a09; --surface: #171412; --muted: #110f0d; --ink: #f6f1ea; --ink-2: #a89f95; --line: #2a2420;
  --accent: #f5c06a; --accent-ink: #1a1308; --accent-soft: #2e2414; --green-soft: #221c18; --amber-soft: #2e2414;
  --night: #171412; --night-2: #211c18; --night-line: rgba(255, 240, 220, 0.09); --night-ink: #f6f1ea; --night-ink-2: #a89f95;
  --ui-bg: #ffffff; --ui-line: #eceae6; --ui-fill: #e4e0da; --ui-fill-2: #f3f1ed; --ui-strong: #1a1612;
  --ui-accent: #e0a040; --ui-img: #fbf1e0; --ui-tint-a: #fde6c4; --ui-tint-b: #f6dccf; --ui-tint-c: #efe3ff;
  color-scheme: dark;
}
.sp-hero { position: relative; overflow: hidden; isolation: isolate; }
.sp-inner { display: flex; flex-direction: column; align-items: center; padding-top: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.sp-text { display: flex; flex-direction: column; align-items: center; max-width: 50rem; }
.sp-title { font-size: clamp(3rem, 6.6vw, 6.25rem); line-height: 0.96; letter-spacing: -0.055em; }
.sp-hero .hero__lead { margin-top: 1.5rem; }
.sp-hero .hero__actions { justify-content: center; align-self: center; margin-top: 2rem; }
.sp-stage { position: relative; width: min(100%, 52rem); margin-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: 5rem; }
.sp-beam {
  position: absolute; z-index: -1; left: 50%; bottom: 3rem; width: 160%; height: 62rem; translate: -50% 0;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 228, 180, 0.1), rgba(255, 220, 160, 0.38) 70%, rgba(255, 210, 150, 0.5));
  filter: blur(18px);
}
.sp-win { position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(255, 220, 170, 0.2), 0 40px 120px -20px rgba(255, 200, 120, 0.35); }
.sp-floor { position: absolute; left: 50%; bottom: 0.5rem; width: 120%; height: 7rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 150, 0.35), transparent); filter: blur(10px); }
@media (prefers-reduced-motion: no-preference) {
  .sp-beam { animation: sp-flicker 6s ease-in-out infinite; }
  @keyframes sp-flicker { 50% { opacity: 0.8; } }
}
.tile--dark { background: linear-gradient(160deg, #2e2414, #171412 70%); }