:root {
  --bg: #0b1730;
  --body-bg:
    radial-gradient(circle at 12% 4%, rgba(41, 104, 232, 0.52), transparent 34%),
    radial-gradient(circle at 76% 10%, rgba(36, 112, 232, 0.34), transparent 28%),
    radial-gradient(circle at 84% 88%, rgba(21, 93, 214, 0.38), transparent 32%),
    linear-gradient(145deg, #102347 0%, #0d1d3b 42%, #0a1730 100%);
  --grid-line: rgba(112, 179, 255, 0.12);
  --panel: rgba(16, 43, 82, 0.80);
  --panel-strong: rgba(17, 50, 99, 0.94);
  --panel-hover: rgba(22, 61, 117, 0.96);
  --glass-bg: linear-gradient(180deg, rgba(20, 52, 98, 0.84), rgba(13, 35, 70, 0.80));
  --card-bg: linear-gradient(145deg, rgba(19, 52, 101, .92), rgba(11, 33, 69, .88));
  --card-hover-bg: linear-gradient(145deg, rgba(28, 70, 137, .97), rgba(14, 43, 89, .94));
  --pill-bg: rgba(10, 31, 65, 0.72);
  --line: rgba(104, 186, 255, 0.25);
  --line-strong: rgba(104, 186, 255, 0.55);
  --text: #f5f9ff;
  --muted: #9bb6d2;
  --muted-2: #7f9dbb;
  --cyan: #77dcff;
  --blue: #5a98ff;
  --blue-soft: #3479ed;
  --green: #70efbc;
  --amber: #ffd35c;
  --shadow: 0 26px 72px rgba(1, 9, 26, 0.34);
  --cursor: rgba(74, 145, 255, .13);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eaf3ff;
  --body-bg:
    radial-gradient(circle at 10% 4%, rgba(79, 143, 255, 0.30), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(67, 154, 255, 0.22), transparent 30%),
    radial-gradient(circle at 82% 88%, rgba(100, 176, 255, 0.20), transparent 34%),
    linear-gradient(145deg, #eef6ff 0%, #e5f0ff 45%, #f4f9ff 100%);
  --grid-line: rgba(39, 113, 206, 0.09);
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(248, 252, 255, 0.95);
  --panel-hover: rgba(242, 249, 255, 0.98);
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.90), rgba(235,246,255,.86));
  --card-bg: linear-gradient(145deg, rgba(255,255,255,.93), rgba(232,244,255,.90));
  --card-hover-bg: linear-gradient(145deg, rgba(255,255,255,.99), rgba(224,240,255,.95));
  --pill-bg: rgba(235, 246, 255, 0.88);
  --line: rgba(38, 115, 211, 0.20);
  --line-strong: rgba(38, 115, 211, 0.42);
  --text: #17345d;
  --muted: #5d7899;
  --muted-2: #6f89a7;
  --cyan: #167fd2;
  --blue: #2f72d6;
  --blue-soft: #4d8cea;
  --green: #1f9f75;
  --amber: #c88a00;
  --shadow: 0 22px 58px rgba(48, 93, 151, 0.18);
  --cursor: rgba(53, 126, 230, .10);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

a { color: inherit; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--body-bg);
  transition: background .25s ease, color .25s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.94), rgba(0,0,0,.50) 74%, transparent 100%);
}

.ambient {
  position: fixed;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.34;
  pointer-events: none;
}
.ambient-a { background: #2e78f0; top: -20rem; left: -13rem; }
.ambient-b { background: #1f6ee5; right: -18rem; bottom: -18rem; }
html[data-theme="light"] .ambient { opacity: .18; }

.noise {
  position: fixed;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 34px;
}

.glass {
  border: 1px solid var(--line);
  background: var(--glass-bg);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}

.topbar,
.service-stage,
.footer {
  position: relative;
  z-index: 2;
}

.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(2, 13, 37, .23), 0 0 44px rgba(66, 131, 243, .13), inset 0 1px rgba(255,255,255,.05);
}
html[data-theme="light"] .topbar { box-shadow: 0 18px 48px rgba(51, 104, 173, .16), inset 0 1px rgba(255,255,255,.75); }

.brand-wrap { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(112,216,255,.22), rgba(76,141,255,.10));
  box-shadow: 0 0 36px rgba(76,141,255,.20), inset 0 0 20px rgba(112,216,255,.07);
}
.brand-core {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 80%, transparent);
}

.eyebrow,
.kicker,
.footer-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .19em;
  text-transform: uppercase;
}

h1 {
  margin: 4px 0 0;
  font-size: 21px;
  letter-spacing: .02em;
}

.top-meta { display: flex; align-items: center; gap: 10px; }
.status-pill,
.clock,
.theme-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--muted);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.theme-toggle {
  width: 36px;
  min-width: 36px;
  padding: 0;
  cursor: pointer;
  color: var(--cyan);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--pill-bg) 75%, var(--blue) 25%);
}
.theme-icon { font-size: 16px; line-height: 1; }
.theme-icon.moon { display: none; }
html[data-theme="light"] .theme-icon.moon { display: inline; }
html[data-theme="light"] .theme-icon.sun { display: none; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px color-mix(in srgb, var(--green) 82%, transparent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; transform: scale(.8); } }

.orbital {
  position: absolute;
  top: 76px;
  right: -245px;
  width: 390px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: .60;
  z-index: 1;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(73, 145, 255, .20), rgba(10, 30, 66, .08) 58%, transparent 74%);
  filter: saturate(1.15);
}
html[data-theme="light"] .orbital { opacity: .32; }
.orbital::before,
.orbital::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 150%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 55%, transparent), transparent);
  transform: translate(-50%, -50%);
}
.orbital::after { transform: translate(-50%, -50%) rotate(90deg); }
.orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent);
  border-radius: 50%;
}
.orbit-1 { inset: 15%; }
.orbit-2 { inset: 31%; border-style: dashed; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbital-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cyan) 62%, transparent);
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
  color: var(--cyan);
  font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  box-shadow: 0 0 46px rgba(76,141,255,.26), inset 0 0 25px rgba(112,216,255,.08);
}
.orbit-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 82%, transparent);
}
.node-a { top: 14%; left: 48%; }
.node-b { right: 19%; bottom: 24%; }
.node-c { left: 18%; bottom: 31%; }

.service-stage {
  margin-top: 42px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 16px;
  padding: 0 4px;
}
.section-head h3 {
  margin: 7px 0 0;
  font-size: 24px;
  letter-spacing: -.02em;
}
.legend {
  display: flex;
  gap: 16px;
  color: var(--muted-2);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.legend-dot.online { background: var(--green); box-shadow: 0 0 9px color-mix(in srgb, var(--green) 80%, transparent); }
.legend-dot.planned { background: var(--amber); box-shadow: 0 0 9px color-mix(in srgb, var(--amber) 65%, transparent); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.service-card {
  position: relative;
  min-height: 192px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow:
    0 18px 48px rgba(2, 11, 31, .22),
    inset 0 1px rgba(255,255,255,.045),
    0 0 24px rgba(58, 119, 230, .05);
  overflow: hidden;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
html[data-theme="light"] .service-card { box-shadow: 0 16px 42px rgba(56, 105, 164, .13), inset 0 1px rgba(255,255,255,.9); }
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cyan) 20%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 44%);
  transition: opacity .22s ease;
}
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 82%, transparent), transparent);
  transform: translateX(-100%);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--card-hover-bg);
  box-shadow: 0 24px 65px rgba(2,8,22,.28), 0 0 36px rgba(76,141,255,.14);
}
.service-card:hover::before { opacity: .78; }
.service-card:hover::after { animation: scan 1.3s ease; }
@keyframes scan { to { transform: translateX(100%); } }

.card-top,
.card-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-bottom { margin-top: 24px; align-items: end; }
.service-code {
  color: var(--muted-2);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.service-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.service-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 60%, transparent);
}
.service-card[data-state="active"] .service-state::before {
  background: var(--green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 78%, transparent);
}
.service-card h4 {
  position: relative;
  z-index: 1;
  margin: 28px 0 8px;
  font-size: 23px;
  letter-spacing: -.02em;
}
.service-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.service-host {
  color: color-mix(in srgb, var(--text) 72%, var(--cyan) 28%);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
}
.arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--cyan);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  transition: transform .2s ease, background .2s ease;
}
.service-card:hover .arrow {
  transform: translate(2px,-2px);
  background: color-mix(in srgb, var(--blue) 18%, var(--panel));
}

.footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding: 17px 20px;
  border-radius: 14px;
}
.footer div:not(.footer-right) { display: flex; align-items: center; gap: 10px; }
.footer strong,
.footer-right {
  color: var(--muted);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
.footer-right { color: var(--muted-2); }

.cursor-glow {
  position: fixed;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--cursor), transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

@media (max-width: 900px) {
  .orbital { right: -250px; opacity: .36; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .topbar { align-items: center; gap: 12px; padding: 13px; }
  .brand-mark { width: 42px; height: 42px; }
  .eyebrow { display: none; }
  .top-meta { gap: 6px; }
  .status-pill { display: none; }
  .clock { display: none; }
  .theme-toggle { width: 38px; min-width: 38px; min-height: 38px; }
  .orbital { top: 76px; right: -220px; width: 310px; opacity: .26; }
  .service-stage { margin-top: 26px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 184px; }
  .footer { grid-template-columns: 1fr; gap: 12px; }
  .footer-right { display: none; }
  .cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}