/* The Lunar Systems look, shared by the company pages (/, /network/, /carrier-services/): ink-blue ground,
   moonlight accent, hero type, section heads, cards, the spec table and contact. Loaded after site.css and
   chrome.css, whose tokens it overrides (the chrome's defaults are already the Lunar look). Green only ever means
   "live"; the product colours stay on the product marks. */
:root{
  --gutter:28px;
  --bg:#0a0d12; --panel:#0f141b; --panel2:#131a23;
  --t0:#f1f4f8; --t1:#e3e9f0; --t2:#9aa6b5; --t3:#778393; --t4:#4d5866; --label:#7f8b9a; --val:#c9d3de;
  --ln1:#18202a; --ln2:#1e2833; --ln3:#26313e; --ln4:#141b24; --sep:#35414f; --btn-ln:#2c3745; --rail:#222c38;
  --moon:#cfdcef; --moon-dim:#8fa3bf; --live:#4fd18b; --warn:#f0b64a; --astra:#5ee0a0; --heim:#00ffb2;
  --ac:var(--moon);
}
body{background:
  radial-gradient(1200px 520px at 78% -140px, rgba(143,163,191,.10), transparent 70%),
  var(--bg)}
a:hover{color:var(--moon)}
:focus-visible{outline-color:var(--moon)}
.btn.solid{background:var(--moon);color:#0a0d12}
.btn.solid:hover{background:#fff;color:#0a0d12}
.mono{font-family:var(--mono)}

.moon{border-color:var(--moon)}.moon::after{background:var(--moon)}

/* orbit line behind the hero: one arc, the moon's limb, not a pattern */
.orbit{position:absolute;inset:0 0 auto 0;height:820px;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,#000 72%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,#000 72%);-webkit-mask-composite:source-in;mask-composite:intersect}
.orbit svg{position:absolute;right:-380px;top:-560px;width:1300px;height:1300px}
.orbit circle{fill:none;stroke:rgba(207,220,239,.08);stroke-width:1}
.orbit circle.lit{stroke:url(#limb);stroke-width:1.5}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:96px 88px}
.kicker{font-size:14px;color:var(--t2);display:flex;align-items:center;gap:10px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(79,209,139,.15)}
h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.035em;color:var(--t0);margin-top:20px}
h1 em{font-style:normal;color:var(--moon)}
.lede{font-size:18px;line-height:1.6;color:var(--t2);max-width:560px;margin-top:22px;text-wrap:pretty}
.lede b{font-weight:500;color:var(--t1)}
.hero .btns{margin-top:30px}

/* section scaffolding */
section.block{padding-top:112px}
.bhd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:40px}
.bhd h2{font-size:clamp(30px,3.4vw,44px);line-height:1.06;letter-spacing:-.03em;color:var(--t0)}
.bhd p{font-size:17px;color:var(--t2);max-width:520px}

/* tags */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips span{font-family:var(--mono);font-size:11px;color:var(--val);padding:4px 8px;border:1px solid var(--ln3);border-radius:5px;background:var(--panel2)}

/* cards */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.card{border:1px solid var(--ln2);border-radius:12px;background:var(--panel);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card h3{font-size:22px;letter-spacing:-.02em;color:var(--t0)}
.card > p{color:var(--t2);font-size:15px}
.small{font-size:12px;color:var(--t3)}

/* spec table: a label column and a value column, two tables side by side on wide screens */
.matrix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;border-top:1px solid var(--ln2)}
.row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--ln1);font-size:15px;align-items:baseline}
.row dt{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--t3)}
.row dd{margin:0;color:var(--val)}
.row.key dd{color:var(--t0)}
.row.key dt{color:var(--live)}

/* company + contact */
.closing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;align-items:end;padding-block:120px 104px}
.closing h2{font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.035em;color:var(--t0)}
.closing p{font-size:17px;color:var(--t2);max-width:560px;margin-top:18px}
.mail{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.addr{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:15px;color:var(--t1);border:1px solid var(--ln3);border-radius:8px;padding:10px 12px;background:var(--panel)}
.copy{font:inherit;font-size:12px;color:var(--t2);background:none;border:1px solid var(--ln3);border-radius:6px;padding:4px 8px;cursor:pointer}
.copy:hover{color:var(--t1);border-color:var(--sep)}

/* a service that is not available yet: amber, never green (green only means live) */
.dev-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--warn);border:1px solid rgba(240,182,74,.45);border-radius:4px;padding:2px 7px;background:rgba(240,182,74,.06);white-space:nowrap}
.kicker .dot.dev{background:var(--warn);box-shadow:0 0 0 3px rgba(240,182,74,.15)}
.row.key.dev dt{color:var(--warn)}
.glyph-data{flex:none;stroke:var(--moon);fill:none;stroke-width:1.5;stroke-linecap:round}

.moon.sm{border-color:var(--moon-dim)}.moon.sm::after{background:var(--moon-dim)}

@media (max-width:1060px){
  .hero{grid-template-columns:1fr;padding-block:72px 64px}
}
@media (max-width:820px){
  .bhd,.two,.matrix,.closing{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .row{grid-template-columns:1fr;gap:4px}
  section.block{padding-top:84px}
  .closing{padding-block:88px 72px}
}