/* ============================================================
   SPOTLIGHT MAESTRO — landing page
   Dark by design: the page is the auditorium, the light comes
   from the followspot. Palette is lifted straight from the app
   icon's "arc" lamp — hot white core, cold blue through the haze.
   ============================================================ */

/* Self-hosted, exactly as the app does it — nothing loads from a CDN. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('assets/fonts/inter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* The auditorium */
  --deep-top:   #0b1223;
  --deep:       #060a15;
  --deep-btm:   #02040a;

  /* The lamp */
  --core:       #ffffff;
  --mid:        #d6e8ff;
  --edge:       #5c99fa;
  --edge-deep:  #2f6ad4;

  --ink:        #eef3fb;
  --ink-dim:    #a8b6cd;
  --ink-faint:  #6d7d97;
  --rule:       rgba(150,180,225,.14);
  --panel:      rgba(122,163,224,.05);

  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--deep-btm);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* The night sky of the room: a graded wash plus a cool rim from above, the same
   two moves the icon's backdrop makes. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(92,153,250,.20), transparent 60%),
    linear-gradient(180deg, var(--deep-top) 0%, var(--deep) 45%, var(--deep-btm) 100%);
}

::selection { background: rgba(92,153,250,.35); color: #fff; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Keyboard visitors get the beam too. */
:focus-visible {
  outline: 2px solid var(--mid);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }

/* ============================================================
   THE FOLLOWSPOT — pointer-tracking beam
   ============================================================ */
.spot {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.spot.lit { opacity: 1; }

/* The lantern: a hot point with a flare around it, up in the corner where the
   icon puts it. */
.spot-lantern {
  position: absolute;
  left: var(--lx, 9%);
  top: var(--ly, 11%);
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(214,232,255,.85) 28%, rgba(92,153,250,.28) 52%, transparent 72%);
  box-shadow: 0 0 60px 26px rgba(92,153,250,.20), 0 0 20px 6px rgba(214,232,255,.32);
}

/* The beam: a wedge anchored at the lantern, widening along its length and
   fading out into the haze. Rotated and stretched from JS.
   The mask does across the beam what the gradient does along it — hot down the
   centre line, gone by the edges — so it reads as light in air rather than as a
   shard with a cut edge. */
.spot-beam {
  position: absolute;
  left: var(--lx, 9%);
  top: var(--ly, 11%);
  width: 1px;
  height: 340px;
  margin-top: -170px;
  transform-origin: 0 50%;
  transform: rotate(45deg);
  clip-path: polygon(0% 46%, 100% 0%, 100% 100%, 0% 54%);
  background: linear-gradient(90deg,
      rgba(255,255,255,.50) 0%,
      rgba(214,232,255,.30) 20%,
      rgba(92,153,250,.16) 55%,
      rgba(47,106,212,.05) 82%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.30) 14%, rgba(0,0,0,.85) 38%,
      #000 50%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.30) 86%, transparent 100%);
  mask-image: linear-gradient(180deg,
      transparent 0%, rgba(0,0,0,.30) 14%, rgba(0,0,0,.85) 38%,
      #000 50%, rgba(0,0,0,.85) 62%, rgba(0,0,0,.30) 86%, transparent 100%);
  filter: blur(7px);
  will-change: transform;
}

/* Where it lands. */
.spot-pool {
  position: absolute;
  left: 0; top: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,232,255,.16) 0%, rgba(92,153,250,.09) 38%, transparent 68%);
  will-change: transform;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 26px;
  max-width: calc(var(--wrap) + 52px);
  margin-inline: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,4,10,.72), rgba(2,4,10,0));
  z-index: -1;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 6px 22px rgba(0,0,0,.55), 0 0 34px rgba(92,153,250,.16);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-text b {
  font-size: 12.5px; font-weight: 500; letter-spacing: .30em; color: var(--ink-dim);
}
.brand-text i {
  font-style: normal;
  font-size: 15.5px; font-weight: 800; letter-spacing: .175em; color: #fff;
}

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; color: var(--ink-dim);
  padding: 8px 12px; border-radius: 8px;
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: #fff; background: rgba(122,163,224,.10); }
.nav-cta {
  color: #fff !important;
  border: 1px solid rgba(150,180,225,.30);
}
.nav-cta:hover { border-color: rgba(214,232,255,.55); background: rgba(92,153,250,.16) !important; }

/* ============================================================
   SHARED BITS
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 20px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--core);
  box-shadow: 0 0 12px 3px rgba(214,232,255,.65);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 15.5px; font-weight: 600; letter-spacing: .005em;
  transition: transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn-primary {
  color: #05101f;
  background: linear-gradient(180deg, #ffffff 0%, var(--mid) 100%);
  box-shadow: 0 10px 30px rgba(92,153,250,.28), 0 0 0 1px rgba(255,255,255,.35) inset;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(92,153,250,.42); }
.btn-ghost {
  color: var(--ink);
  border: 1px solid rgba(150,180,225,.28);
}
.btn-ghost:hover { border-color: rgba(214,232,255,.55); background: rgba(122,163,224,.09); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ============================================================
   HERO
   ============================================================ */
/* The hero is a poster: one column, centred, with room around it for the beam
   to move through. */
.hero {
  min-height: 76vh;
  display: flex;
  align-items: center;
  padding: 60px 0 96px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-size: clamp(40px, 6.1vw, 78px);
  line-height: 1.02;
  letter-spacing: -.034em;
  font-weight: 800;
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #ffffff 0%, var(--mid) 42%, var(--edge) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-dim);
  max-width: 40em;
  margin-bottom: 38px;
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; margin-bottom: 44px; }

/* The plain facts, in the shorthand of a spec plate. */
.hero-specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-specs li { display: flex; align-items: center; gap: 12px; }
.hero-specs li + li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(92,153,250,.55);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 92px 0; }
.section-title {
  font-size: clamp(30px, 3.5vw, 43px);
  line-height: 1.1;
  letter-spacing: -.024em;
  font-weight: 800;
  margin-bottom: 16px;
  text-wrap: balance;
}
.section-lede {
  font-size: 18px;
  color: var(--ink-dim);
  max-width: 40em;
  margin-bottom: 52px;
}
/* The no-subscription line is the point of that section — let it read as one. */
.section-lede strong { color: #fff; font-weight: 700; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}
.card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(122,163,224,.075), rgba(122,163,224,.022));
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
/* A sliver of light along the top edge, brightening on hover — the card
   catching the beam. */
.card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,232,255,.45), transparent);
  opacity: .35;
  transition: opacity .3s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(150,180,225,.30);
  background: linear-gradient(180deg, rgba(122,163,224,.13), rgba(122,163,224,.03));
}
.card:hover::after { opacity: 1; }

.card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 11px;
  color: var(--mid);
  background: rgba(92,153,250,.12);
  border: 1px solid rgba(150,180,225,.20);
}
.card-icon svg { width: 21px; height: 21px; }

.card h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.012em;
  margin-bottom: 9px;
}
.card p { font-size: 15.5px; color: var(--ink-dim); }
.card p em { color: var(--mid); font-style: italic; }
.card code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--mid);
  background: rgba(92,153,250,.13);
  padding: 1px 6px; border-radius: 4px;
}

/* ---- editions ---- */
.section-editions { border-top: 1px solid var(--rule); }
.editions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.edition {
  padding: 32px 30px 34px;
  border-radius: 15px;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(122,163,224,.075), rgba(122,163,224,.02));
}
.edition-alt {
  border-color: rgba(150,180,225,.30);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(92,153,250,.16), transparent 62%),
    linear-gradient(180deg, rgba(122,163,224,.09), rgba(122,163,224,.02));
}
.edition h3 { font-size: 24px; font-weight: 800; letter-spacing: -.018em; }
.edition-kind {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--edge);
  margin: 5px 0 15px;
}
.edition p { color: var(--ink-dim); font-size: 15.5px; }

/* ---- closing ---- */
.closing { border-top: 1px solid var(--rule); text-align: center; padding: 100px 0 96px; }
.closing-wrap { display: flex; flex-direction: column; align-items: center; }
.closing-mark {
  width: 88px; height: 88px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 24px 60px -18px rgba(0,0,0,.85), 0 0 90px -12px rgba(92,153,250,.40);
}
.closing h2 {
  font-size: clamp(29px, 3.6vw, 42px);
  font-weight: 800; letter-spacing: -.024em;
  margin-bottom: 16px;
}
.closing p { color: var(--ink-dim); max-width: 38em; margin-bottom: 32px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--rule); padding: 30px 0 44px; }
.footer-wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}
.footer-sep { opacity: .5; }
.footer-dim { opacity: .72; flex-basis: 100%; font-size: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .hero { min-height: 0; padding-top: 44px; padding-bottom: 76px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .nav { padding: 13px 18px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .brand-text b { font-size: 11px; letter-spacing: .26em; }
  .brand-text i { font-size: 14px; }
  .section { padding: 68px 0; }
  .section-lede { margin-bottom: 36px; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-self: stretch; }
  .closing .btn { width: auto; }
  .hero-specs { gap: 8px 20px; font-size: 10.5px; letter-spacing: .1em; }
  .footer-sep { display: none; }
  .footer-wrap { flex-direction: column; gap: 6px; }
}

/* Anyone who asked for less movement gets the icon's own static rake. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}