/* Exreal Space — Night Watch design system (shared) */
* { box-sizing:border-box; margin:0; padding:0; }
:root { --night:#050a14; --ink:#0b1420; --dim:#8fa0b3; --red:#E30613; --line:#1b2735; }
html { scroll-behavior:smooth; }
body { background:var(--night); color:#e6edf3; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; line-height:1.6; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
section { padding:84px 0; }
h2 { font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-.02em; line-height:1.12; }
h2 em { color:var(--red); font-style:normal; }
.lead { color:var(--dim); max-width:640px; margin-top:16px; font-size:17px; }
.redbar { width:52px; height:5px; background:var(--red); border-radius:2px; margin-bottom:26px; }

/* header */
header { position:absolute; top:0; left:0; right:0; z-index:60; }
header .bar { display:flex; align-items:center; gap:12px; max-width:1080px; margin:0 auto; padding:22px 24px; }
header .stamp { white-space:nowrap; }
@media (max-width:1120px){ header .stamp { display:none; } }
header nav { margin-left:auto; display:flex; gap:16px; font-size:14px; }
header .wordmark { font-weight:800; letter-spacing:.12em; font-size:15px; color:#fff; text-decoration:none; }
header .stamp { color:#9fb2c8; font-size:13px; }
header nav a { color:#c6d4e2; text-decoration:none; }
header nav a:hover { color:#fff; }
header nav a.on { color:#fff; border-bottom:2px solid var(--red); padding-bottom:2px; }
@media (max-width:860px){ header nav{display:none} }

/* heroes */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,10,20,.92) 0%, rgba(5,10,20,.55) 45%, rgba(5,10,20,.3) 100%); }
.hero .core { position:relative; max-width:1080px; margin:0 auto; width:100%; padding:120px 24px 0; }
.hero .est { font-size:12px; font-weight:700; letter-spacing:.3em; color:#9fb2c8; text-transform:uppercase; margin-bottom:20px; }
.hero h1 { font-size:clamp(40px,7.6vw,96px); font-weight:900; letter-spacing:-.03em; line-height:1; color:#fff; }
.hero h1 em { color:var(--red); font-style:normal; }
.hero p { max-width:580px; color:#c6d4e2; margin-top:24px; font-size:18px; }
.hero.half { min-height:72vh; }
.hero.half .core { padding:150px 24px 0; }

/* watch card */
.watch { background:var(--ink); border:1px solid var(--line); border-radius:14px; padding:34px; }
.watch .k { font-size:12px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase; }
.clock { font-size:clamp(40px,7vw,72px); font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:10px; }
.clock small { font-size:14px; font-weight:400; color:var(--dim); letter-spacing:.1em; }
.watch p { color:var(--dim); font-size:14px; margin-top:10px; max-width:520px; }

/* finder */
.finder { background:var(--ink); border:1px solid var(--line); color:#fff; border-radius:14px; padding:34px; }
.finder h3 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#9fb2c8; margin-bottom:18px; }
.frow { display:flex; gap:12px; }
@media (max-width:640px){ .frow{flex-direction:column} }
.frow input { flex:1; background:#0f1926; border:1px solid var(--line); border-radius:12px; outline:0;
  color:#fff; font:inherit; font-size:18px; padding:16px 18px; }
.frow input:focus { border-color:var(--red); }
.frow button { background:var(--red); border:0; color:#fff; font-weight:800; font-size:15px;
  padding:0 30px; border-radius:12px; cursor:pointer; letter-spacing:.02em; }
.frow button:hover { filter:brightness(1.12); }
.frow .cta { display:inline-flex; align-items:center; background:var(--red); color:#fff; font-weight:800; font-size:15px;
  padding:16px 30px; border-radius:12px; text-decoration:none; letter-spacing:.02em; }
.frow .cta:hover { filter:brightness(1.12); }
#fout { display:block; margin-top:16px; font-size:14px; color:#8fa0b3; min-height:22px; }
#fout b { color:#fff; }

/* grids */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; }
@media (max-width:900px){ .grid2,.grid4{grid-template-columns:1fr} }
@media (max-width:900px) and (min-width:560px){ .grid4{grid-template-columns:1fr 1fr} }
.gcard { background:var(--ink); border:1px solid var(--line); border-radius:14px; padding:28px 24px; }
.gcard img { width:100%; height:230px; object-fit:cover; display:block; margin:-28px -24px 20px; min-height:0; }
.gcard.imgcard { padding:0; overflow:hidden; }
.gcard.imgcard .body { padding:24px; }
.gcard b { display:block; font-size:12px; letter-spacing:.14em; color:var(--red); text-transform:uppercase; margin-bottom:8px; }
.gcard h4 { font-size:18px; margin-bottom:6px; line-height:1.3; }
.gcard p { font-size:14px; color:var(--dim); }

/* stats */
.gstats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .gstats{grid-template-columns:1fr 1fr} }
.gs { background:var(--ink); border:1px solid var(--line); border-radius:14px; padding:26px 22px; }
.gs .v { font-size:clamp(32px,4.4vw,52px); font-weight:900; letter-spacing:-.03em; line-height:1; }
.gs .v em { color:var(--red); font-style:normal; }
.gs .k { font-size:13px; color:var(--dim); margin-top:10px; }

/* flags */
.flags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.flags span { border:1px solid var(--line); background:var(--ink); border-radius:8px; padding:5px 11px; font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; }

/* night log */
.log { border-left:2px solid var(--red); padding-left:26px; max-width:720px; }
.log .e { margin-bottom:24px; }
.log .t { font-size:12px; color:var(--red); letter-spacing:.14em; }
.log h4 { font-size:17px; margin:4px 0 2px; }
.log p { font-size:14px; color:var(--dim); }

/* quote */
.quote { border-left:4px solid var(--red); padding:8px 0 8px 26px; margin-top:44px; max-width:760px; }
.quote p { color:#c6d4e2; font-size:16px; }
.quote small { display:block; margin-top:12px; color:var(--dim); font-size:13px; }

/* terms list */
.terms { margin-top:26px; padding-left:20px; color:var(--dim); font-size:15px; }
.terms li { margin-bottom:10px; }
.fineprint { max-width:760px; font-size:15px; color:var(--dim); }
.fineprint b { color:#e6edf3; }

/* CTA */
.cta-band { background:var(--ink); border:1px solid var(--line); border-radius:14px; padding:40px 36px; }
.cta-band h2 { max-width:720px; }
.cta-band p { color:var(--dim); max-width:640px; margin-top:14px; }
.cta-band a.cta { display:inline-block; margin-top:22px; background:var(--red); color:#fff; text-decoration:none;
  font-weight:800; font-size:15px; padding:14px 26px; border-radius:12px; }
.cta-band a.cta:hover { filter:brightness(1.12); }
.cta-band a.ghost { display:inline-block; margin-top:22px; margin-left:10px; border:1px solid var(--line); color:#c6d4e2; text-decoration:none;
  font-weight:700; font-size:15px; padding:14px 26px; border-radius:12px; }
.cta-band a.ghost:hover { color:#fff; border-color:#3a4b60; }

footer { border-top:1px solid var(--line); color:var(--dim); font-size:12px; }
footer .wrap { padding:22px 24px; display:flex; gap:14px; flex-wrap:wrap; }
footer a { color:inherit; }
footer nav { display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- the earth itself: live city lights ---------- */
@media (prefers-reduced-motion: no-preference) {
  .live-layer { position:absolute; inset:0; pointer-events:none; }
  .live-layer .city {
    position:absolute; width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,220,150,1) 0%, rgba(255,200,120,.55) 40%, rgba(255,200,120,0) 72%);
    filter:blur(.4px);
    animation:twinkle var(--tw,5s) ease-in-out var(--d,0s) infinite;
  }
  @keyframes twinkle {
    0%,100% { opacity:.45; transform:scale(.85); }
    50%     { opacity:1; transform:scale(1.35); }
  }
  /* a satellite passes over, slowly, every 18s */
  .live-layer::after {
    content:""; position:absolute; top:0; left:-15%;
    width:3px; height:3px; border-radius:50%;
    background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.8);
    animation:pass 18s linear 6s infinite;
  }
  @keyframes pass {
    0%   { transform:translate(0,110%) ; opacity:0; }
    4%   { opacity:.9; }
    96%  { opacity:.9; }
    100% { transform:translate(800%, -30%); opacity:0; }
  }
}

/* ---------- motion (effects.js; instant if prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
  .rv-in { opacity:1; transform:none; }
  .redbar { transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.16,1,.3,1); }
  .redbar.rb-in { transform:none; }
  .fx .hero.photo img { animation:heroDrift 24s ease-in-out infinite alternate; }
  .fx .hero .core > * { opacity:0; animation:rise .9s cubic-bezier(.16,1,.3,1) forwards; }
  .fx .hero .core .est { animation-delay:.1s; }
  .fx .hero .core h1 { animation-delay:.25s; }
  .fx .hero .core p { animation-delay:.4s; }
  @keyframes heroDrift {
    from { transform:scale(1.08) translateY(0); }
    to   { transform:scale(1.16) translateY(-24px); }
  }
  @keyframes rise {
    from { opacity:0; transform:translateY(26px); }
    to   { opacity:1; transform:none; }
  }
  .live-pulse { animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse {
    0%,100% { opacity:1; }
    50% { opacity:.55; }
  }
  .gcard, .gs { transition:transform .35s ease, border-color .35s ease; }
  .gcard:hover, .gs:hover { transform:translateY(-3px); border-color:#2c3d52; }
  .cta-band a.cta { transition:transform .25s ease, filter .25s ease; }
  .cta-band a.cta:hover { transform:translateY(-2px); }
}