* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg: #070712;
  --card: rgba(12, 12, 18, 0.94);
  --border: rgba(167, 139, 250, 0.22);
  --accent: #a78bfa;
  --accent2: #7c3aed;
  --muted: #9aa3b2;
  --text: #f8fafc;

  --ok: #22c55e;
  --limited: #f59e0b;
  --down: #ef4444;

  --ok-glow: rgba(34,197,94,.35);
  --limited-glow: rgba(245,158,11,.35);
  --down-glow: rgba(239,68,68,.4);
}

html, body{
  height: 100%;
  overflow: hidden;
}

body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(124,58,237,.35), transparent 55%),
              radial-gradient(900px 600px at 90% 70%, rgba(167,139,250,.25), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}

/* Neural background */
.neural-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.neural-node {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.6;
  animation: neuralPulse 4s ease-in-out infinite;
}
.neural-node:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.neural-node:nth-child(2) { top: 60%; left: 80%; animation-delay: 1s; }
.neural-node:nth-child(3) { top: 80%; left: 20%; animation-delay: 2s; }
.neural-node:nth-child(4) { top: 30%; left: 70%; animation-delay: 3s; }
.neural-node:nth-child(5) { top: 10%; left: 60%; animation-delay: 4s; }
@keyframes neuralPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.8); }
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 14px 18px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(8,8,14,.55);
  backdrop-filter: blur(12px);
  z-index: 5;
}
.topbar-brand{display:flex; gap:10px; align-items:center;}
.topbar-badge{
  width: 36px; height: 36px; display:grid; place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(167,139,250,.25);
  background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(124,58,237,.18));
}
.topbar-logo{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(167,139,250,.25));
}
.topbar-title{font-weight: 900; letter-spacing:-.01em}
.topbar-sub{color: rgba(154,163,178,.9); font-size:12px}
.topbar-right{display:flex; gap:10px; align-items:center;}

.status-pill{
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  color: rgba(226,232,240,.85);
  letter-spacing: .02em;
  font-weight: 700;
  transition: all .25s ease;
}

.status-pill.ok{
  border-color: var(--ok-glow);
  color: var(--ok);
  box-shadow: 0 0 18px var(--ok-glow);
}

.status-pill.limited{
  border-color: var(--limited-glow);
  color: var(--limited);
  box-shadow: 0 0 18px var(--limited-glow);
}

.status-pill.down{
  border-color: var(--down-glow);
  color: var(--down);
  box-shadow: 0 0 22px var(--down-glow);
}

.mini-btn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(248,250,252,.9);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.mini-btn:hover{ border-color: rgba(167,139,250,.35); }


/* Page layout */
.page{
  position: relative;
  z-index: 1;
  padding: 86px 20px 24px;
  max-width: 1180px;
  margin: 0 auto;
}
.grid{ margin-top: 16px; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(18px);
}
.ai-glow{
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.10) 0%, transparent 70%);
  animation: aiGlow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aiGlow {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
}
h1{
  margin-top: 10px;
  font-size: 2.1rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  text-shadow: 0 0 18px rgba(167,139,250,.18);
}
h2{
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.muted{ color: rgba(154,163,178,.95); }
.small{ font-size: 12px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.actions{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 16px; align-items:center; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Buttons */
.neural-button{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  padding: 0;
  overflow:hidden;
  position: relative;
  min-height: 50px;
  min-width: 200px;
  font-weight: 950;
  color: #fff;
}
.button-bg{
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 12px;
  transition: all .25s ease;
}
.button-text{ position: relative; z-index: 2; padding: 0 18px; }
.button-glow{
  position:absolute; inset:-2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 14px;
  opacity: 0;
  filter: blur(10px);
  transition: opacity .25s ease;
  z-index: -1;
}
.neural-button:hover .button-bg{ filter: brightness(1.08); transform: scale(1.02); }
.neural-button:hover .button-glow{ opacity: .7; }

.btn{
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(248,250,252,.92);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
  font-weight: 850;
}
.btn:hover{ border-color: rgba(167,139,250,.35); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background: rgba(0,0,0,.20); }

/* Pills */
.quick-links{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }
.pill{
  text-decoration:none;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(226,232,240,.90);
}
.pill:hover{ border-color: rgba(167,139,250,.35); color: var(--text); }
.pill.tiny{ padding: 7px 10px; }

/* Summary box */
.summary{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.summary-row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.summary-row:last-child{ border-bottom: none; }
.summary-title{ font-weight: 900; }
.summary-value{ color: rgba(226,232,240,.9); display:flex; align-items:center; gap:10px; }

.hint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .9;
}

/* Switch */
.smart-switch{ position: relative; display:inline-flex; align-items:center; }
.smart-switch input{ display:none; }
.switch-ui{
  width: 44px; height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  position: relative;
  display:inline-block;
  cursor:pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.switch-ui::after{
  content:"";
  position:absolute;
  width: 18px; height: 18px;
  top: 50%; left: 3px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(226,232,240,.92);
  transition: left .2s ease, background .2s ease;
}
.smart-switch input:checked + .switch-ui{
  border-color: rgba(167,139,250,.35);
  box-shadow: 0 0 14px rgba(167,139,250,.12);
}
.smart-switch input:checked + .switch-ui::after{
  left: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

/* Service cards */
.services{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.service{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  padding: 14px;
  overflow:hidden;
  position: relative;
}
.service-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.service-name{ font-weight: 950; letter-spacing:-.01em; }
.service-desc{ margin-top: 4px; font-size: 12px; color: rgba(154,163,178,.95); }

.badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(226,232,240,.9);
  white-space: nowrap;
}
.badge.ok{ border-color: rgba(52,211,153,.35); color: rgba(52,211,153,.95); }
.badge.warn{ border-color: rgba(251,191,36,.35); color: rgba(251,191,36,.95); }
.badge.down{ border-color: rgba(251,113,133,.35); color: rgba(251,113,133,.95); }

.service-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}
.kv{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: rgba(226,232,240,.88);
}
.kv b{ color: rgba(248,250,252,.95); }
.service-link{
  margin-left:auto;
  text-decoration:none;
  font-weight: 900;
  color: rgba(226,232,240,.9);
  border-bottom: 1px solid rgba(167,139,250,.35);
}
.service-link:hover{ color: var(--accent); border-color: var(--accent); }

/* Footer */
.footer-note{
  margin-top: 16px;
  text-align: center;
  color: rgba(154,163,178,.85);
  font-size: 12px;
  line-height: 1.35;
  padding-top: 12px;
}
.footer-note a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(167,139,250,.35);
  transition: color .2s ease, border-color .2s ease;
}
.footer-note a:hover{ color: var(--accent); border-color: var(--accent); }
.sep{ opacity: .55; margin: 0 8px; }

/* Logo rings (same vibe) */
.ai-logo{
  position: relative;
  width: 110px;
  height: 110px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-core{
  position: relative;
  z-index: 3;
  animation: coreRotate 8s linear infinite;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-core img{
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(167,139,250,.25));
}
@keyframes coreRotate{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.logo-rings{ position:absolute; inset:0; }
.ring{
  position:absolute;
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}
.ring-1 { width: 85px; height: 85px; top: 12.5px; left: 12.5px; animation-delay: 0s; }
.ring-2 { width: 100px; height: 100px; top: 5px; left: 5px; animation-delay: 1s; }
.ring-3 { width: 110px; height: 110px; top: 0; left: 0; animation-delay: 2s; }
@keyframes ringPulse{
  0%,100%{ opacity:.28; transform: scale(1); }
  50%{ opacity:.65; transform: scale(1.05); }
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .services{ grid-template-columns: 1fr; }
  .neural-button{ width: 100%; min-width: 0; }
}
@media (min-width: 981px) and (max-width: 1180px){
  .services{ grid-template-columns: 1fr 1fr; }
}