/* The Lunar Systems front page (/), the company hub: it introduces Lunar Systems and opens a door to each of the
   four cover pages. The Lunar look it shares with /network/ and /carrier-services/ is /assets/lunar.css; the header
   and footer are chrome.css, in the Lunar look by default. Each door carries a hint of its page's own identity and
   nothing more: Astra's mark, Heimdall's Bifrost line (its only Norse hint here), the network's moon rings and
   Carrier Services' cells. Status is amber (or Heimdall's own label); green only ever means live, and nothing here
   is. The hub restates no product claim: each page makes its own. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* hero */
.hub-hero{position:relative;padding-block:112px 72px;max-width:calc(900px + 2 * var(--gutter))}
.hub-hero .lede{max-width:680px}
.hub-hero .btns{margin-top:30px}
.hub-moon{position:relative;flex:none;box-sizing:border-box;width:16px;height:16px;border:1.5px solid var(--moon);border-radius:50%;overflow:hidden}
.hub-moon::after{content:"";position:absolute;top:0;right:0;bottom:0;width:50%;background:var(--moon)}

/* the four doors */
.hub-products{position:relative}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.door{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:300px;box-sizing:border-box;padding:28px 28px 26px;border:1px solid var(--ln2);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .2s ease, transform .2s ease}
.door:hover{border-color:var(--sep)}
.door:focus-within{outline:2px solid var(--moon);outline-offset:3px}
.door h3{font-size:clamp(26px,2.6vw,34px);line-height:1.08;letter-spacing:-.025em;color:var(--t0)}
.door h3 a{color:inherit;text-decoration:none}
.door h3 a:focus-visible{outline:none}
.door h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.door > p{font-size:15.5px;line-height:1.6;color:var(--t2);max-width:520px}
.door-top{display:flex;align-items:center;gap:12px;min-height:24px}
.door-kind{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.door-st{margin-top:auto}
.door-go{font-size:14px;font-weight:500;color:var(--t1)}
.door:hover .door-go{color:var(--moon)}

/* Astra: its mark, its green kept on the mark */
.mark{border-color:var(--t1)}.mark::after{background:var(--astra)}
.d-astra{background:radial-gradient(520px 260px at 100% 0%,rgba(94,224,160,.07),transparent 70%),var(--panel)}

/* Heimdall: its own ground, zero radius, mono, mint, and the Bifrost line along the top (the one Norse hint) */
.d-heimdall{border-radius:0;border-color:rgba(255,255,255,.08);background:radial-gradient(520px 260px at 100% 0%,rgba(0,255,178,.06),transparent 70%),#04070e}
.d-heimdall::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:.85;background:linear-gradient(90deg,#00ffb2 0%,#59a7ff 38%,#ffb700 70%,#ff4d6d 100%)}
.d-heimdall h3{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--heim)}
.d-heimdall h3{font-size:clamp(24px,2.4vw,30px)}
.d-heimdall .door-kind{color:rgba(235,255,247,.6)}
.d-heimdall > p{color:rgba(235,255,247,.7)}
.d-heimdall:focus-within{outline-color:var(--heim)}
.d-heimdall:hover .door-go{color:var(--heim)}
.h-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--heim);border:1px solid rgba(0,255,178,.45);padding:3px 8px;background:rgba(0,255,178,.06)}

/* Lunar Network: moon rings */
.glyph-net{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--moon);position:relative;box-sizing:border-box}
.glyph-net::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px dashed var(--moon-dim)}
.d-network{background:radial-gradient(420px 420px at 110% 120%,rgba(207,220,239,.09),transparent 65%),var(--panel)}
.d-network::before{content:"";position:absolute;right:-120px;bottom:-120px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(207,220,239,.10);box-shadow:0 0 0 40px rgba(207,220,239,.02),0 0 0 41px rgba(207,220,239,.07);pointer-events:none}

/* Lunar Carrier Services: periwinkle cells on a faint lattice */
.glyph-cells{flex:none;fill:none;stroke:#9aa8ff;stroke-width:1.5}
.glyph-cells .on{fill:#9aa8ff}
.d-carrier{background:linear-gradient(rgba(154,168,255,.05) 1px,transparent 1px) 0 0/42px 18px,linear-gradient(90deg,rgba(154,168,255,.05) 1px,transparent 1px) 0 0/42px 18px,var(--panel)}
.d-carrier:hover .door-go{color:#9aa8ff}

/* about the company */
.hub-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--ln2);margin:0}
.hub-facts > div{padding:18px 0;border-bottom:1px solid var(--ln1)}
.hub-facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.hub-facts dd{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--val)}

/* wholesale, planned */
.hub-wholesale{padding-top:72px}
.card.wholesale{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto;gap:18px 40px;align-items:center;border-style:dashed}
.card.wholesale h2{margin-top:10px;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;color:var(--t0)}
.card.wholesale > p{margin:0}

@media (max-width:1060px){
  .hub-hero{padding-block:80px 56px}
  .card.wholesale{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:820px){
  .doors,.hub-facts{grid-template-columns:1fr}
  .door{min-height:0}
}
@media (max-width:560px){
  .door{padding:22px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  .door{transition:none}
}