:root{
  --bg:#0D0F14; --card:rgba(255,255,255,.06); --text:#EDEEF3; --muted:#9AA0AE;
  --violet:#6C5CE7; --teal:#20C997; --danger:#FF6B6B; --warn:#F59F00;
  --shadow:0 8px 32px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Arial,sans-serif; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:#cfd2ff; text-decoration:none}
a:hover{text-decoration:underline}

/* background */
.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 800px at 80% 0%, rgba(108,92,231,.25), transparent 60%),
    radial-gradient(900px 700px at 0% 20%, rgba(32,201,151,.18), transparent 60%),
    url('/assets/img/bg-gradient.webp') center/cover no-repeat fixed;
  filter:saturate(110%) contrast(105%);
}

/* topbar */
.topbar{position:sticky; top:0; backdrop-filter: blur(10px); background:rgba(13,15,20,.35); border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto; padding:12px 20px}
.nav a{margin-left:16px; color:var(--text); opacity:.85}
.nav a:hover{opacity:1}

/* layout */
.main{display:grid; place-items:center; min-height:calc(100vh - 120px); padding:40px 16px}
.card{
  width:min(760px, 92vw); padding:32px 28px; background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; box-shadow:var(--shadow); backdrop-filter: blur(14px);
}

/* text */
.eyebrow{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.title{margin:4px 0 4px; font-weight:700; font-size:32px}
.subtitle{margin:0 0 18px; color:var(--muted)}

/* animated status strip */
.status-strip{display:flex; align-items:center; gap:8px; margin:6px 0 16px; color:#cfd2ff}
.status-strip .dot{
  width:8px; height:8px; border-radius:50%; display:inline-block; background:#777; opacity:.7; transform:scale(.9); transition:.25s ease;
}
.status-strip .dot.active{background:var(--violet); opacity:1; transform:scale(1)}
.status-strip .sep{opacity:.4}

/* button */
.btn{
  margin-top:4px; display:inline-block; padding:12px 20px; border:0; border-radius:12px; font-weight:600;
  background:linear-gradient(135deg, rgba(108,92,231,0.9), rgba(32,201,151,0.9)); color:white;
  box-shadow:0 10px 24px rgba(0,0,0,.25); cursor:pointer; transition:.25s ease;
}
.btn[disabled]{opacity:.45; cursor:not-allowed; filter:grayscale(20%)}
.btn:not([disabled]):hover{transform:translateY(-1px)}
.helper{color:var(--muted); margin:10px 0 10px}

/* ===== Chips: mobile-first, icon + two-line layout ===== */
.chips{
  display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px;
}
.chips .chip{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  min-height:44px; /* better touch target */
  padding:8px 12px 8px 40px; /* left space for icon */
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
  line-height:1.25;
  max-width:100%;
}

/* icon circle (left) */
.chip::before{
  content:"";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,.18);
}

/* states */
.chip.ok{ border-color:rgba(32,201,151,.55); cursor:pointer; }
.chip.ok::before{
  background:#20C997;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='white' d='M4.6 9.2L1.7 6.3l1-1 1.9 1.9L9.3 2.5l1 1z'/></svg>") center/12px 12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='white' d='M4.6 9.2L1.7 6.3l1-1 1.9 1.9L9.3 2.5l1 1z'/></svg>") center/12px 12px no-repeat;
}
.chip.slow{ border-color:rgba(245,159,0,.65); cursor:pointer; }
.chip.slow::before{ background:#F59F00; }
.chip.block{ border-color:rgba(255,107,107,.65); opacity:.95; }
.chip.block::before{
  background:#FF6B6B;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='white' d='M2.2 3.2l1-1L6 4.9l2.8-2.7 1 1L7 5.9l2.8 2.8-1 1L6 6.9 3.2 9.7l-1-1L4.9 5.9z'/></svg>") center/12px 12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='white' d='M2.2 3.2l1-1L6 4.9l2.8-2.7 1 1L7 5.9l2.8 2.8-1 1L6 6.9 3.2 9.7l-1-1L4.9 5.9z'/></svg>") center/12px 12px no-repeat;
}

/* content lines */
.chip .host{
  font-weight:600; color:#EDEEF3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chip .latency{
  margin-top:4px; display:inline-block; align-self:flex-start;
  font-size:12px; color:#EDEEF3; opacity:.9;
  padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.10);
}

/* latency color accent */
.chip.ok .latency{ background:rgba(32,201,151,.18); }
.chip.slow .latency{ background:rgba(245,159,0,.18); }
.chip.block .latency{ display:none; } /* no latency for blocked */

/* ===== Desktop tweaks (≥640px): one line layout if space allows) ===== */
@media (min-width:640px){
  .chips .chip{
    flex-direction:row; align-items:center; gap:8px;
    padding:8px 12px 8px 34px;
  }
  .chip .latency{ margin-top:0; }
}

/* (optional) tighten hero on small screens */
@media (max-width:420px){
  .title{font-size:24px}
  .subtitle{font-size:14px}
}


/* trust + footer */
.trust{margin-top:8px; color:var(--muted); font-size:14px}
.footer{border-top:1px solid rgba(255,255,255,.06); padding:14px 0 20px; background:rgba(13,15,20,.35); backdrop-filter: blur(8px)}
.footer .wrap{max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:var(--muted)}

/* responsive */
@media (max-width:640px){
  .title{font-size:26px}
  .card{padding:24px 18px}
}

/* reduced motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}