/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --c-primary:      #00F5FF;
  --c-secondary:    #ff51fa;
  --c-tertiary:     #bcff5f;
  --c-error:        #ff716c;
  --c-error-dim:    #d7383b;
  --c-on-surface:   #fffbfe;
  --c-on-surface-v: #adaaad;
  --c-on-primary:   #006165;
  --c-bg:           #0e0e10;
  --c-surf-low:     #131316;
  --c-surf:         #19191c;
  --c-surf-high:    #1f1f22;
  --c-outline-v:    #48474a;
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  min-height: max(884px, 100dvh);
  background: var(--c-bg);
  color: var(--c-on-surface);
  font-family: var(--font-body);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-head); }

/* ── Helpers ───────────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.glow-text { text-shadow: 0 0 12px rgba(0, 245, 255, .55); }
.grid-pattern {
  background-image:
    linear-gradient(rgba(0, 245, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── NAV ───────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 245, 255, .2);
  box-shadow: 0 0 20px rgba(0, 245, 255, .1);
}
.nav-logo {
  display: flex; align-items: center; gap: .75rem;
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: 1.4rem; font-weight: 900; font-style: italic;
  letter-spacing: -.04em; text-transform: uppercase;
}
.nav-links { display: flex; gap: 2rem; }
@media (max-width: 768px) { .nav-links { display: none; } }
.nav-link {
  font-family: var(--font-head);
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary); padding-bottom: 2px;
}
.nav-btn {
  background: var(--c-primary); color: var(--c-on-primary);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .5rem 1.5rem; border: none;
  box-shadow: 0 0 10px rgba(0, 245, 255, .3);
  transition: transform .1s;
}
.nav-btn:hover  { transform: scale(1.05); }
.nav-btn:active { transform: scale(.95); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 795px;
  display: flex; align-items: center;
  padding: 6rem 2rem 4rem;
  overflow: hidden;
}
.glow-r {
  position: absolute; top: 25%; right: 0;
  width: 500px; height: 500px;
  background: rgba(0, 245, 255, .05);
  border-radius: 50%; filter: blur(120px);
}
.glow-l {
  position: absolute; bottom: 25%; left: 0;
  width: 300px; height: 300px;
  background: rgba(255, 81, 250, .05);
  border-radius: 50%; filter: blur(100px);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 7fr 5fr; } }

.badge { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.badge-dot {
  width: 8px; height: 8px;
  background: var(--c-tertiary); box-shadow: 0 0 8px #bcff5f; flex-shrink: 0;
}
.badge-txt {
  font-family: var(--font-head); font-size: 10px;
  color: var(--c-tertiary); letter-spacing: .3em; text-transform: uppercase;
}
.hero-h1 {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(4rem, 10vw, 7.5rem);
  letter-spacing: -.05em; line-height: 1; margin-bottom: 2rem;
}
.hero-h1 .l1 { color: var(--c-on-surface); display: block; }
.hero-h1 .l2 { color: var(--c-primary); font-style: italic; display: block; }
.hero-desc {
  color: var(--c-on-surface-v); font-size: 1.1rem; font-weight: 300;
  max-width: 540px; line-height: 1.7; margin-bottom: 2.5rem;
}

/* ── Hero widget ───────────────────────────────────────────── */
.widget-wrap { display: flex; align-items: center; justify-content: center; }
.widget {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; max-width: 420px;
  background: var(--c-surf-low);
  border: 1px solid rgba(72, 71, 74, .3);
  padding: 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.widget::before {
  content: ''; position: absolute; top: -2px; left: -2px;
  width: 32px; height: 32px;
  border-top: 2px solid var(--c-primary); border-left: 2px solid var(--c-primary);
}
.widget::after {
  content: ''; position: absolute; bottom: -2px; right: -2px;
  width: 32px; height: 32px;
  border-bottom: 2px solid var(--c-secondary); border-right: 2px solid var(--c-secondary);
}
.widget-meta { font-family: var(--font-head); font-size: 10px; color: var(--c-on-surface-v); }
.meta-row { display: flex; align-items: center; gap: .5rem; margin-bottom: 4px; }
.meta-dot { width: 4px; height: 4px; background: var(--c-primary); flex-shrink: 0; }
.widget-router {
  position: absolute; top: 1.8rem; right: 1.8rem;
  font-size: 2rem; color: var(--c-secondary);
  font-variation-settings: 'FILL' 1;
}
.widget-circle-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 0;
}
.widget-circle {
  width: 12rem; height: 12rem; border-radius: 50%;
  border: 12px solid var(--c-surf-high);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.circle-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid rgba(0, 245, 255, .2);
  animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%       { opacity: .7; transform: scale(1.04); }
}
.circle-txt {
  font-family: var(--font-head);
  font-size: 2.2rem; font-weight: 700; font-style: italic;
  color: var(--c-primary);
}
.widget-bar-track { width: 100%; height: 4px; background: var(--c-surf-high); }
.widget-bar-fill  { height: 100%; width: 100%; background: var(--c-primary); box-shadow: 0 0 10px var(--c-primary); }
.widget-bar-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-head); font-size: 10px;
  color: var(--c-on-surface-v); letter-spacing: .2em; text-transform: uppercase;
  margin-top: .5rem;
}
.widget-bar-labels span:last-child { color: var(--c-primary); }

/* ── Services section ──────────────────────────────────────── */
.services-section {
  padding: 6rem 2rem;
  background: var(--c-bg);
  border-top: 1px solid rgba(72, 71, 74, .15);
}
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-head {
  display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .services-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.svc-title-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.svc-title {
  font-family: var(--font-head); font-size: 2.2rem; font-weight: 900;
  letter-spacing: -.03em; text-transform: uppercase;
}
.svc-underline { height: 4px; width: 6rem; background: linear-gradient(to right, var(--c-secondary), transparent); }
.nodes-ctr {
  font-family: var(--font-head); font-size: 10px;
  letter-spacing: .2em; color: var(--c-on-surface-v); text-transform: uppercase;
}
.nodes-ctr .n-on  { color: var(--c-tertiary); font-size: .95rem; font-weight: 700; }
.nodes-ctr .n-tot { font-size: .95rem; font-weight: 700; }

.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

/* Skeleton loader */
.skel {
  background: var(--c-surf-low); border: 1px solid rgba(72, 71, 74, .15);
  height: 11rem; animation: sk 1.4s ease-in-out infinite;
}
@keyframes sk { 0%, 100% { opacity: .3; } 50% { opacity: .6; } }

/* Service card */
.svc-card {
  background: var(--c-surf-low);
  border: 1px solid rgba(72, 71, 74, .2);
  padding: 1.5rem;
  transition: border-color .2s, box-shadow .2s;
}
.svc-card.is-up:hover   { border-color: rgba(188, 255, 95, .4);  box-shadow: 0 0 20px rgba(188, 255, 95, .06); }
.svc-card.is-down:hover { border-color: rgba(255, 113, 108, .4); box-shadow: 0 0 20px rgba(255, 113, 108, .06); }

.svc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.svc-icon { width: 48px; height: 48px; background: var(--c-surf-high); display: flex; align-items: center; justify-content: center; }
.svc-icon .material-symbols-outlined { font-size: 1.8rem; color: var(--c-on-surface-v); }

.svc-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.svc-status-row { display: flex; align-items: center; gap: .5rem; }

/* Status dot */
.dot-wrap   { position: relative; width: 8px; height: 8px; flex-shrink: 0; }
.dot-ping   { position: absolute; inset: 0; border-radius: 50%; }
.dot-core   { position: absolute; inset: 0; border-radius: 50%; }
@keyframes ping     { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes pulse-dot { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }

.state-online   .dot-ping { background: var(--c-tertiary);    animation: ping .9s cubic-bezier(0,0,.2,1) infinite; }
.state-online   .dot-core { background: var(--c-tertiary);    box-shadow: 0 0 8px #bcff5f; }
.state-offline  .dot-ping { background: var(--c-error-dim);   animation: pulse-dot 1.5s ease-in-out infinite; }
.state-offline  .dot-core { background: var(--c-error);       box-shadow: 0 0 8px #ff716c; }
.state-checking .dot-ping { background: var(--c-on-surface-v); animation: pulse-dot 1s ease-in-out infinite; }
.state-checking .dot-core { background: var(--c-on-surface-v); }

.svc-lbl { font-family: var(--font-head); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.lbl-online   { color: var(--c-tertiary); }
.lbl-offline  { color: var(--c-error); }
.lbl-checking { color: var(--c-on-surface-v); }

.svc-uptime, .svc-ping { font-family: var(--font-head); font-size: 10px; color: var(--c-on-surface-v); }
.svc-name  { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.svc-alias { font-family: var(--font-head); font-size: 10px; letter-spacing: .2em; color: var(--c-on-surface-v); text-transform: uppercase; margin: 4px 0 1rem; }

.svc-footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(72, 71, 74, .12); padding-top: 1rem;
}
.svc-type { font-family: var(--font-head); font-size: 10px; letter-spacing: .2em; color: var(--c-on-surface-v); text-transform: uppercase; }
.svc-open {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-head); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(0, 245, 255, .55); transition: color .2s;
}
.svc-open:hover { color: var(--c-primary); }
.svc-open .material-symbols-outlined { font-size: 14px; }

.error-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  padding: 4rem 1rem; gap: 1rem;
  color: var(--c-on-surface-v);
  font-family: var(--font-head); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  text-align: center;
}
.error-state .material-symbols-outlined { font-size: 3rem; color: var(--c-error); }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--c-bg);
  border-top: 1px solid rgba(0, 245, 255, .1);
  padding: 3rem 2rem;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-brand {
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 700;
  font-style: italic; letter-spacing: -.03em; text-transform: uppercase;
  color: var(--c-primary); margin-bottom: .5rem;
}
.footer-copy {
  font-family: var(--font-head); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--c-primary);
}