/* IncogFomo — givest layout, fomo/logo dark palette (#080613 + lavender) */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

:root{
  --bg:#060510;         /* fomo bg-primary, ~logo #080613 */
  --bg-2:#0b0a17;
  --card:rgba(255,255,255,.045);
  --line:rgba(203,208,235,.12);
  --line-2:rgba(203,208,235,.2);
  --txt:#f4f3fb;         /* lavender-white, logo figure */
  --txt-2:#9a9bb0;
  --txt-3:#5b5f74;
  --blue:#516af6;
  --purple:#8150f6;
  --green:#21c95e;
  --amber:#ffc74f;
  --red:#ff622e;
  --pink:#fd5dd3;
}

html{
  -webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;
  color:var(--txt);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  --bg-zoom:1;
}
body{min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(81,106,246,.32);color:#fff}

/* ── fixed photo backdrop: station against space, merges with dark ── */
.backdrop{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(/img/station.jpg) center 60%/cover no-repeat;
  transform:scale(var(--bg-zoom));transform-origin:50% 60%;will-change:transform;
}
.backdrop::before{  /* darken the bright earth so it reads as deep-space glow */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 78%, rgba(6,5,16,.35), rgba(6,5,16,.72) 70%, rgba(6,5,16,.9));
}
.backdrop::after{   /* fade the top into the dark page for text legibility */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 40%,rgba(6,5,16,.72) 58%,rgba(6,5,16,.25) 74%,rgba(6,5,16,.55) 100%);
}
.aurora{  /* subtle fomo-blue nebula wash up top */
  position:fixed;inset:0 0 auto 0;height:70vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 40% at 50% -6%, rgba(81,106,246,.22), transparent 70%),
    radial-gradient(40% 34% at 84% 6%, rgba(129,80,246,.14), transparent 72%);
}
.page{position:relative;z-index:10}

/* ── nav ─────────────────────────────────────────────────── */
.navwrap{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 16px}
nav{
  display:flex;align-items:center;gap:14px;
  background:rgba(12,11,24,.72);border:1px solid var(--line);border-radius:9999px;
  padding:6px 6px 6px 12px;
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 8px 34px rgba(0,0,0,.5);
}
@media(min-width:768px){nav{padding:6px 10px 6px 16px}}
nav .logo{display:flex;align-items:center}
nav .logo img{width:30px;height:30px;display:block;border-radius:9px}
.navlinks{display:none;align-items:center;gap:22px}
@media(min-width:768px){.navlinks{display:flex}}
.navlinks a{font-size:14px;font-weight:500;color:var(--txt-2);transition:color .15s}
.navlinks a:hover,.navlinks a.on{color:var(--txt)}
.xlink{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9999px;color:var(--txt-2);transition:color .15s,background .15s}
.xlink svg{width:15px;height:15px;display:block}
.xlink:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.gbtn{
  position:relative;background:var(--bg-2);border-radius:9999px;
  padding:8px 16px;font-size:14px;font-weight:600;color:var(--txt);white-space:nowrap;
  transition:filter .15s;
}
@media(min-width:640px){.gbtn{padding:8px 20px}}
.gbtn:hover{filter:brightness(1.25)}
.gbtn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,#516af6,#8150f6);padding:1.5px;
  -webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);
  -webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;
}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:128px 16px 0;text-align:center}
@media(min-width:640px){.hero{padding:144px 24px 0}}
@media(min-width:768px){.hero{padding-top:160px}}
h1{max-width:42rem;font-size:2.25rem;line-height:1;font-weight:600;letter-spacing:-.05em;color:var(--txt)}
@media(min-width:640px){h1{font-size:3rem}}
@media(min-width:768px){h1{font-size:3.75rem}}
h1 .dim{color:#565a72}
.lede{margin-top:32px;max-width:24rem;font-size:16px;line-height:1.625;color:var(--txt-2)}
.stat{margin-top:20px;font-size:14px;color:var(--txt-2)}
.stat b{font-weight:600;color:var(--txt)}
.stat .g{color:var(--txt-3)}
.stat a.g:hover{color:var(--txt-2)}

.capill{
  margin-top:24px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:9999px;padding:8px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--txt-2);
  backdrop-filter:blur(6px);transition:border-color .15s,color .15s;
}
@media(min-width:640px){.capill{font-size:12px}}
.capill:hover{border-color:var(--line-2);color:var(--txt)}
.capill .k{font-family:Inter,sans-serif;font-weight:600;letter-spacing:.025em;color:var(--txt-3)}

/* ── cards ───────────────────────────────────────────────── */
.cards{margin-top:40px;display:flex;width:100%;flex-direction:column;align-items:center;gap:12px;padding:0 16px}
@media(min-width:640px){.cards{margin-top:64px;padding:0}}
.pcard{
  display:flex;width:100%;max-width:380px;align-items:center;gap:12px;
  border-radius:16px;border:1px solid var(--line);background:rgba(18,16,32,.66);
  padding:12px 16px;box-shadow:0 12px 30px rgba(0,0,0,.4);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  opacity:0;animation:popup-card-in .6s cubic-bezier(.16,1,.3,1) forwards;
}
@media(min-width:640px){.pcard{gap:16px;padding:16px 24px}}
.pcard .lbl{flex:1;font-size:12px;font-weight:500;color:var(--txt);white-space:nowrap;text-align:center}
@media(min-width:640px){.pcard .lbl{font-size:14px}}
.pcard>svg:first-child{width:24px;height:24px;flex-shrink:0}
.ring{width:28px;height:28px;flex-shrink:0;animation:spin-ring 1.4s linear infinite}
@keyframes popup-card-in{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes spin-ring{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.pcard{opacity:1;animation:none}.ring{animation:none}}

.spacer{height:120vh}

/* ── content on dark sheet ───────────────────────────────── */
.sheet{position:relative;background:var(--bg);padding:88px 0 0}
.sheet::before{content:"";position:absolute;left:0;right:0;top:-120px;height:120px;background:linear-gradient(180deg,rgba(6,5,16,0),var(--bg))}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
section{padding-bottom:88px}
@media(min-width:768px){section{padding-bottom:112px}}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);text-align:center}
h2{margin-top:12px;font-size:1.75rem;line-height:1.15;font-weight:600;letter-spacing:-.04em;color:var(--txt);text-align:center}
@media(min-width:768px){h2{font-size:2.25rem}}
.sub{margin:16px auto 0;max-width:30rem;font-size:16px;line-height:1.625;color:var(--txt-2);text-align:center}

.rows{margin-top:40px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02)}
.rows .r{display:flex;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--line)}
.rows .r:first-child{border-top:0}
.rows .r .n{flex:1;font-size:14px;font-weight:500;color:var(--txt)}
.rows .r .n code{display:block;margin-top:3px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:400;color:var(--txt-3);word-break:break-all}
.pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:9999px;white-space:nowrap}
.pill.ok{color:#3ddc7f;background:rgba(33,201,94,.12);border:1px solid rgba(33,201,94,.3)}
.pill.no{color:#ff8a5c;background:rgba(255,98,46,.1);border:1px solid rgba(255,98,46,.3)}

.steps{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.stepc{display:flex;gap:16px;padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02)}
.stepc .i{width:26px;height:26px;flex:0 0 26px;border-radius:9999px;display:grid;place-items:center;font-size:12px;font-weight:600;color:#8ea0ff;background:rgba(81,106,246,.16);border:1px solid rgba(81,106,246,.34)}
.stepc h4{font-size:15px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.stepc p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--txt-2)}
.stepc code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#c7ccec;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}

.callout{margin-top:16px;padding:20px;border-radius:20px;border:1px solid rgba(255,199,79,.26);background:rgba(255,199,79,.05)}
.callout h4{font-size:14px;font-weight:600;color:#ffd27a}
.callout p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--txt-2)}
.callout p+p{margin-top:8px}
.callout em{color:var(--txt);font-style:normal;font-weight:500}
.callout code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#c7ccec;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}

.center{text-align:center}
.btn-dark{display:inline-block;background:#516af6;color:#fff;border-radius:9999px;padding:12px 26px;font-size:15px;font-weight:600;transition:transform .15s,filter .15s;box-shadow:0 8px 26px rgba(81,106,246,.4)}
.btn-dark:hover{filter:brightness(1.1);transform:scale(1.02)}

footer{border-top:1px solid var(--line);padding:28px 24px;text-align:center;background:var(--bg)}
footer p{font-size:13px;line-height:1.7;color:var(--txt-3)}
footer a{color:var(--txt-2)}
footer a:hover{color:var(--txt)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}