/* Loftier Launcher — site styles.
   Hand-written rather than a build step: Vercel serves this folder verbatim, so there is
   nothing to compile and nothing to keep in sync. */

:root {
  --bg: #08080b;
  --surface: #101015;
  --surface-2: #16161d;
  --line: #22222c;
  --line-soft: #1a1a22;

  --text: #f5f5f7;
  --muted: #a2a2b2;
  --dim: #6c6c7d;

  --accent: #7c5cff;
  --accent-soft: #a288ff;
  --accent-ink: #ffffff;

  --shell: min(1160px, 100% - 2.5rem);
  --nav-h: 62px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 650;
}

h1 { font-size: clamp(1.95rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.06rem; }
p { margin: 0; }

.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* ── ambient glow ──────────────────────────────────────────────────
   One fixed radial wash behind everything so the page never reads as flat black. */
.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 18% -8%, rgba(124, 92, 255, 0.17), transparent 65%),
    radial-gradient(46rem 30rem at 88% 4%, rgba(0, 162, 255, 0.11), transparent 62%);
}

main, header, footer { position: relative; z-index: 1; }

/* ── nav ───────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: rgba(8, 8, 11, 0);
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.nav.is-stuck {
  background: rgba(8, 8, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}

.nav-inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-size: 0.98rem;
  margin-right: auto;
}

.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-links a {
  padding: 0.42rem 0.7rem;
  border-radius: 7px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.16s ease, background 0.16s ease;
}

.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-links a[aria-current='page'] { color: var(--text); background: rgba(255, 255, 255, 0.07); }

.nav-toggle {
  display: none;
  width: 38px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ── buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.15rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 550;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover { background: #1d1d25; border-color: #2e2e3a; transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 8px 26px -10px rgba(124, 92, 255, 0.85);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #b49cff, #8b6dff);
  box-shadow: 0 12px 32px -10px rgba(124, 92, 255, 0.95);
}

.btn-lg { padding: 0.92rem 1.6rem; font-size: 1rem; }

/* ── banner blur-fade ──────────────────────────────────────────────
   The whole point of the effect: a banner is sharp at the top and dissolves downward —
   first into a blur of itself, then into the page background. Two stacked copies of the
   same image with opposing masks do the blur handoff; ::after seals the bottom edge to
   --bg so there is never a visible cut line. */
.bfade {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.bfade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bfade-sharp {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
}

.bfade-blur {
  position: absolute;
  inset: 0;
  filter: blur(26px) saturate(1.2);
  transform: scale(1.12);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, transparent 26%, #000 72%, transparent 99%);
  mask-image: linear-gradient(to bottom, transparent 26%, #000 72%, transparent 99%);
}

.bfade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0) 40%, var(--bg) 97%);
}

.bfade-card {
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  aspect-ratio: 16 / 9;
}

.bfade-card::after {
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0) 46%, rgba(8, 8, 11, 0.92) 100%);
}

/* A full-bleed band sitting in the middle of the page has background above it as well as
   below, so unlike the hero it has to dissolve at both ends or the top edge reads as a cut. */
.bfade-band { height: 300px; }

.bfade-band .bfade-sharp {
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 54%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 54%, transparent 90%);
}

.bfade-band .bfade-blur {
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 8%, #000 68%, transparent 100%);
}

.bfade-band::after {
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    rgba(8, 8, 11, 0.2) 26%,
    rgba(8, 8, 11, 0.45) 62%,
    var(--bg) 100%);
}

.bfade-caption {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.75rem;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 550;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

/* ── hero ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: 3.2rem;
  padding-bottom: 4rem;
}

.hero-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  z-index: -1;
  opacity: 0.5;
}

.hero-bg .bfade-sharp,
.hero-bg .bfade-blur { height: 640px; }

.hero-bg::after {
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0.35) 0%, rgba(8, 8, 11, 0.6) 45%, var(--bg) 92%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(22, 22, 29, 0.7);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}

.lede {
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.hero-note {
  font-size: 0.83rem;
  color: var(--dim);
}

/* ── sections ──────────────────────────────────────────────────── */
.section { padding: 4.6rem 0; }
.section-sm { padding: 3rem 0; }

.section-head {
  max-width: 66ch;
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2.4rem;
}

.kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.card {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.card:hover { border-color: #30303d; transform: translateY(-2px); }

.card p { color: var(--muted); font-size: 0.93rem; }

.card-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(124, 92, 255, 0.14);
  border: 1px solid rgba(124, 92, 255, 0.28);
  color: var(--accent-soft);
  margin-bottom: 0.25rem;
}

/* ── steps ─────────────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: 1.1rem;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  font-weight: 640;
  font-size: 1.05rem;
  color: var(--accent-soft);
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid rgba(124, 92, 255, 0.26);
}

.step p { color: var(--muted); font-size: 0.94rem; margin-top: 0.3rem; }

/* ── stats ─────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

.stat { background: var(--surface); padding: 1.3rem; }
.stat b { display: block; font-size: clamp(1.3rem, 4.4vw, 1.7rem); font-weight: 650; letter-spacing: -0.03em; }
.stat span { font-size: 0.84rem; color: var(--dim); }

/* ── banner strip ──────────────────────────────────────────────── */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem;
}

/* ── download ──────────────────────────────────────────────────── */
.dl {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-size: 0.86rem;
  color: var(--dim);
}

.meta b { color: var(--muted); font-weight: 550; }

.hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  color: var(--dim);
  word-break: break-all;
  background: #0d0d12;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  width: 100%;
}

.notice {
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.07);
  border-radius: 11px;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.notice h3 { font-size: 0.95rem; color: #fcd34d; }
.notice p { color: var(--muted); font-size: 0.9rem; }

/* ── faq ───────────────────────────────────────────────────────── */
.faq {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 1rem 1.2rem;
}

.faq + .faq { margin-top: 0.7rem; }
.faq summary { cursor: pointer; font-weight: 550; font-size: 0.97rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--dim); font-weight: 400; }
.faq[open] summary::after { content: '\2212'; }
.faq p { color: var(--muted); font-size: 0.92rem; margin-top: 0.6rem; }

/* ── footer ────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 2.2rem 0 2.8rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--dim);
}

.footer a:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ── scroll reveal ─────────────────────────────────────────────────
   Elements fade and blur in on the way into the viewport and back out on the way past,
   which is what makes the banners feel like they surface out of the page. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .bfade-blur { filter: none; }
}

.stack { display: grid; gap: 1.15rem; }
.stack-sm { display: grid; gap: 0.6rem; }
.center { justify-items: center; text-align: center; }
.center .lede { margin-inline: auto; }

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --shell: min(1160px, 100% - 1.6rem); }

  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0.8rem;
    right: 0.8rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(13, 13, 18, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
  }

  .nav-links:not(.is-open) { display: none; }

  .step { grid-template-columns: 1fr; gap: 0.7rem; }
  .hero { padding-top: 2rem; }

  /* Headline breaks are hand-placed for the desktop measure; on a phone they push a line
     past the viewport, so let the text wrap on its own. */
  .nb { display: none; }
}