:root {
  color-scheme: dark;
  --bg-deep: #020203;
  --bg: #050506;
  --panel: rgba(255,255,255,.045);
  --panel-hover: rgba(255,255,255,.065);
  --text: #ededf0;
  --muted: #8a8f98;
  --accent: #6872d9;
  --border: rgba(255,255,255,.065);
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% -12%, rgba(45,49,86,.6), rgba(10,10,15,.35) 36%, transparent 64%),
    radial-gradient(ellipse at top, #0a0a0f, var(--bg) 52%, var(--bg-deep));
  font-family: Inter, system-ui, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}
::selection { color: white; background: rgba(94,106,210,.45); }

.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient::before {
  content: ""; position: absolute; inset: 0; opacity: .15;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.ambient::after {
  content: ""; position: absolute; inset: 0; opacity: .025; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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)'/%3E%3C/svg%3E");
}
.blob { position: absolute; border-radius: 999px; filter: blur(130px); animation: drift 10s ease-in-out infinite; }
.blob.one { width: 900px; height: 480px; top: -370px; left: calc(50% - 450px); background: rgba(94,106,210,.27); }
.blob.two { width: 540px; height: 680px; left: -390px; top: 28%; background: rgba(129,72,208,.12); animation-delay: -4s; }
.blob.three { width: 520px; height: 620px; right: -400px; top: 44%; background: rgba(55,95,200,.12); animation-delay: -7s; }

.shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(5,5,6,.78); backdrop-filter: blur(20px); }
.header-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: linear-gradient(145deg,#747de4,#4a54b8); box-shadow: 0 8px 24px rgba(94,106,210,.25),inset 0 1px 0 rgba(255,255,255,.25); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; width:4px; height:15px; border-radius:8px; background:rgba(255,255,255,.93); transform-origin:bottom; }
.brand-mark::before { transform:translate(-4px,1px) rotate(27deg); }
.brand-mark::after { transform:translate(4px,1px) rotate(-27deg); }
.brand-name { font-size:15px; font-weight:650; letter-spacing:-.02em; }
.brand-tag { margin-left:7px; color:rgba(255,255,255,.32); font:500 9px/1 "JetBrains Mono",monospace; letter-spacing:.18em; }
.nav { display:flex; align-items:center; gap:4px; }
.nav-link { padding:8px 11px; border-radius:8px; color:rgba(255,255,255,.42); font-size:12px; font-weight:500; text-decoration:none; transition:.2s var(--ease); }
.nav-link:hover { color:rgba(255,255,255,.82); background:rgba(255,255,255,.04); }
.nav-link.active { color:var(--text); background:rgba(255,255,255,.065); box-shadow:inset 0 0 0 1px rgba(255,255,255,.055); }
.icon-button { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--border); border-radius:9px; color:rgba(255,255,255,.48); background:rgba(255,255,255,.025); transition:.2s var(--ease); cursor:pointer; }
.icon-button:hover { color:#dfe1ff; border-color:rgba(104,114,217,.25); background:rgba(94,106,210,.1); transform:translateY(-1px); }
.icon-button:disabled { opacity:.5; cursor:wait; }

.page { padding:72px 0 80px; }
.landing-page { padding-top:0; }
.home-hero { min-height:calc(100vh - 64px); display:flex; align-items:center; padding:82px 0 92px; }
.hero-copy-block { max-width:790px; }
.hero-index { display:flex; align-items:center; gap:13px; color:rgba(255,255,255,.4); font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.15em; }
.hero-index::before { content:""; width:34px; height:1px; background:#6872d9; box-shadow:0 0 12px rgba(104,114,217,.45); }
.home-title { margin:28px 0 0; color:#eff0f4; font-size:clamp(52px,6.9vw,84px); font-weight:650; line-height:.98; letter-spacing:-.062em; }
.home-title em { color:#8d95f4; font-style:normal; }
.home-copy { max-width:590px; margin:28px 0 0; color:#969ba5; font-size:17px; line-height:1.75; }
.home-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
.home-button { display:inline-flex; height:44px; align-items:center; justify-content:center; gap:10px; padding:0 17px; border:1px solid rgba(255,255,255,.11); border-radius:8px; color:#dedfe4; background:rgba(255,255,255,.025); font-size:12px; font-weight:600; text-decoration:none; transition:.22s var(--ease); }
.home-button:hover { color:white; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.home-button.primary { border-color:rgba(104,114,217,.42); background:#5e6ad2; box-shadow:0 8px 28px rgba(50,58,150,.24),inset 0 1px rgba(255,255,255,.18); }
.home-button.primary:hover { background:#6872d9; box-shadow:0 10px 32px rgba(50,58,150,.33),inset 0 1px rgba(255,255,255,.2); }
.hero-footnote { display:flex; align-items:center; gap:9px; margin-top:46px; color:rgba(255,255,255,.28); font:500 9px/1 "JetBrains Mono",monospace; letter-spacing:.12em; }
.hero-footnote span { width:5px; height:5px; border-radius:99px; background:#6670d5; box-shadow:0 0 12px rgba(102,112,213,.55); }

.content-band { position:relative; padding:86px 0 92px; border-top:1px solid rgba(255,255,255,.055); background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 35%); }
.band-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.band-title { margin:9px 0 0; font-size:clamp(28px,4vw,42px); font-weight:650; letter-spacing:-.045em; }
.band-copy { max-width:480px; margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.staff-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.staff-card { min-height:190px; padding:22px; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s; }
.staff-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.105); box-shadow:0 12px 44px rgba(0,0,0,.38),0 0 60px rgba(94,106,210,.07),inset 0 1px rgba(255,255,255,.05); }
.staff-avatar { display:grid; width:48px; height:48px; place-items:center; border:1px solid rgba(117,143,255,.22); border-radius:14px; color:#d4d8ff; background:linear-gradient(145deg,rgba(104,114,217,.27),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.2); font-size:13px; font-weight:650; }
.staff-name { margin-top:30px; overflow:hidden; color:#e2e3e8; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.staff-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; }
.staff-empty { display:none; padding:50px 20px; color:#777d87; text-align:center; }

.features-layout { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); gap:clamp(40px,8vw,110px); }
.features-intro { position:sticky; top:104px; align-self:start; }
.features-title { margin:12px 0 0; font-size:clamp(30px,4vw,46px); font-weight:650; line-height:1.08; letter-spacing:-.048em; }
.features-copy { max-width:360px; margin:16px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }
.feature-list { border-top:1px solid rgba(255,255,255,.08); }
.feature-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:start; gap:18px; padding:25px 2px; border-bottom:1px solid rgba(255,255,255,.07); }
.feature-number { color:rgba(255,255,255,.28); font:500 9px/1.4 "JetBrains Mono",monospace; letter-spacing:.1em; }
.feature-name { margin:0; color:#dedfe4; font-size:15px; font-weight:600; letter-spacing:-.015em; }
.feature-description { max-width:470px; margin:7px 0 0; color:#7f848e; font-size:12px; line-height:1.65; }
.feature-icon { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.07); border-radius:9px; color:#9299ef; background:rgba(255,255,255,.025); }
.interconnect-panel { margin-top:28px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:rgba(255,255,255,.018); }
.interconnect-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.065); }
.interconnect-label { color:rgba(255,255,255,.42); font:500 9px/1 "JetBrains Mono",monospace; letter-spacing:.14em; }
.interconnect-note { color:rgba(255,255,255,.25); font-size:10px; }
.network-row { display:grid; grid-template-columns:minmax(130px,.75fr) minmax(120px,.55fr) minmax(0,1.2fr); align-items:center; gap:18px; min-height:82px; padding:16px 18px; }
.network-row + .network-row { border-top:1px solid rgba(255,255,255,.06); }
.network-name { display:flex; align-items:center; gap:10px; color:#e0e1e6; font-size:13px; font-weight:600; }
.network-mark { width:8px; height:8px; border-radius:3px; background:#6872d9; box-shadow:0 0 14px rgba(104,114,217,.38); }
.network-mark.csp { border-radius:99px; background:#64b3ff; box-shadow:0 0 14px rgba(100,179,255,.34); }
.network-code { color:rgba(255,255,255,.43); font:500 10px/1.4 "JetBrains Mono",monospace; }
.network-code strong { display:block; margin-top:5px; color:#d6d8ff; font-size:17px; letter-spacing:-.03em; }
.dial-rule { color:#818690; font-size:11px; line-height:1.6; }
.dial-prefix { display:inline-flex; align-items:center; gap:7px; margin-left:5px; padding:4px 7px; border:1px solid rgba(100,179,255,.18); border-radius:6px; color:#a9d4ff; background:rgba(100,179,255,.055); font:500 10px/1 "JetBrains Mono",monospace; }
.eyebrow { display:flex; align-items:center; gap:12px; color:#9aa1fb; font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.18em; }
.eyebrow::before { content:""; width:28px; height:1px; background:linear-gradient(90deg,var(--accent),rgba(104,114,217,.1)); }
.page-title { margin:20px 0 0; max-width:760px; font-size:clamp(40px,6vw,64px); line-height:1.04; letter-spacing:-.05em; font-weight:650; background:linear-gradient(#fff 5%,rgba(255,255,255,.64)); background-clip:text; color:transparent; }
.page-copy { max-width:620px; margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.75; }
.updated { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.35); font-size:11px; white-space:nowrap; }

.glass { position:relative; isolation:isolate; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 2px 20px rgba(0,0,0,.34),0 24px 80px rgba(0,0,0,.2); }
.spotlight::after { content:""; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(94,106,210,.15),transparent 68%); transition:opacity .25s; }
.spotlight:hover::after { opacity:1; }
.metric { padding:23px; transition:transform .28s var(--ease),border-color .28s,box-shadow .28s; }
.metric:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.105); box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 40px rgba(0,0,0,.42),0 0 70px rgba(94,106,210,.07); }
.metric-label { color:rgba(255,255,255,.34); font:500 10px/1.2 "JetBrains Mono",monospace; letter-spacing:.13em; }
.metric-value { margin-top:14px; font-size:38px; line-height:1; font-weight:650; letter-spacing:-.05em; }
.metric-note { margin-top:11px; color:#777d87; font-size:12px; }
.metric-icon { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--border); border-radius:11px; color:#aab0ff; background:rgba(255,255,255,.03); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px; }

.split-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; margin-top:14px; }
.panel-pad { padding:26px; }
.section-kicker { color:rgba(255,255,255,.33); font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.14em; }
.section-title { margin:10px 0 0; font-size:20px; font-weight:620; letter-spacing:-.025em; }
.availability-bar { display:flex; height:10px; margin-top:28px; overflow:hidden; border:1px solid rgba(255,255,255,.04); border-radius:999px; background:rgba(255,255,255,.04); }
.availability-fill { width:0; border-radius:inherit; background:linear-gradient(90deg,#525cbd,#7b84e6); box-shadow:0 0 24px rgba(104,114,217,.35); transition:width .6s var(--ease); }
.legend { display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; color:#777d87; font-size:11px; }
.legend span { display:flex; align-items:center; gap:8px; }
.legend i { width:6px; height:6px; border-radius:999px; background:#6872d9; }
.legend .off i { background:#555a64; }

.quick-list { margin-top:18px; }
.quick-user { display:flex; min-height:56px; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid rgba(255,255,255,.055); }
.user-core { min-width:0; display:flex; align-items:center; gap:12px; }
.avatar { display:grid; width:34px; height:34px; flex:none; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#cbd0ff; background:linear-gradient(145deg,rgba(104,114,217,.19),rgba(255,255,255,.03)); font-size:10px; font-weight:650; }
.user-name { overflow:hidden; color:#dfdfe3; font-size:13px; font-weight:520; text-overflow:ellipsis; white-space:nowrap; }
.extension { color:rgba(255,255,255,.42); font:500 11px/1 "JetBrains Mono",monospace; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:#aeb3ff; font-size:12px; font-weight:520; text-decoration:none; }
.text-link:hover { color:#d6d8ff; }

.directory-shell { margin-top:42px; }
.directory-toolbar { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:22px; }
.directory-title { margin:0; font-size:20px; font-weight:620; letter-spacing:-.03em; }
.directory-subtitle { margin:7px 0 0; color:#777d87; font-size:13px; }
.count { margin-left:8px; padding:4px 7px; border:1px solid var(--border); border-radius:6px; color:rgba(255,255,255,.38); background:rgba(255,255,255,.03); font:500 9px/1 "JetBrains Mono",monospace; vertical-align:middle; }
.search-wrap { position:relative; width:min(100%,320px); }
.search-wrap i { position:absolute; left:14px; top:50%; translate:0 -50%; color:rgba(255,255,255,.27); font-size:11px; pointer-events:none; }
.search { width:100%; height:40px; padding:0 14px 0 39px; border:1px solid rgba(255,255,255,.075); border-radius:9px; outline:0; color:var(--text); background:rgba(11,11,14,.9); font:400 13px/1 Inter,sans-serif; transition:.2s; }
.search::placeholder { color:rgba(255,255,255,.24); }
.search:focus { border-color:rgba(104,114,217,.65); box-shadow:0 0 0 3px rgba(94,106,210,.13); }
.filters { display:flex; gap:4px; overflow-x:auto; padding:11px 18px; border-top:1px solid rgba(255,255,255,.055); }
.filter { flex:none; padding:7px 11px; border:1px solid transparent; border-radius:8px; color:var(--muted); background:transparent; font:500 11px/1 Inter,sans-serif; cursor:pointer; transition:.2s; }
.filter:hover { color:var(--text); background:rgba(255,255,255,.035); }
.filter[aria-pressed="true"] { color:var(--text); border-color:var(--border); background:rgba(255,255,255,.06); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.directory-row { display:grid; grid-template-columns:minmax(220px,1.7fr) minmax(110px,.7fr) minmax(145px,.8fr) 42px; min-height:70px; align-items:center; gap:16px; padding:10px 18px; border-top:1px solid rgba(255,255,255,.055); transition:background .2s; }
.directory-row:not(.row-head):hover { background:rgba(255,255,255,.027); }
.row-head { min-height:42px; color:rgba(255,255,255,.34); font:500 9px/1 "JetBrains Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.state { display:inline-flex; width:fit-content; align-items:center; gap:8px; padding:5px 9px; border:1px solid var(--border); border-radius:999px; color:#9ca1aa; background:rgba(255,255,255,.025); font-size:11px; }
.state::before { content:""; width:6px; height:6px; border-radius:999px; background:#6f7580; }
.state.online::before { background:#63d6a2; box-shadow:0 0 10px rgba(99,214,162,.44); }
.state.in_use::before { background:#a5a9ff; box-shadow:0 0 10px rgba(165,169,255,.42); }
.state.offline::before,.state.unreachable::before { background:#ef7b7b; }
.call { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--border); border-radius:9px; color:#777d87; background:rgba(255,255,255,.02); text-decoration:none; transition:.2s; }
.call:hover { color:#dfe1ff; border-color:rgba(104,114,217,.24); background:rgba(94,106,210,.1); }
.empty { display:none; padding:58px 20px; color:#777d87; text-align:center; font-size:13px; }
.error { display:none; gap:10px; margin:0 18px 16px; padding:12px 14px; border:1px solid rgba(239,123,123,.16); border-radius:11px; color:#dca0a0; background:rgba(239,123,123,.055); font-size:12px; }
.error.show { display:flex; }
.skeleton { position:relative; overflow:hidden; border-radius:7px; background:rgba(255,255,255,.045); }
.skeleton::after { content:""; position:absolute; inset:0; translate:-100% 0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent); animation:shimmer 1.5s infinite; }
.footer { border-top:1px solid rgba(255,255,255,.05); background:rgba(2,2,3,.55); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; color:rgba(255,255,255,.28); font-size:11px; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid rgba(104,114,217,.8); outline-offset:2px; }

@keyframes drift { 50% { transform:translate3d(16px,-20px,0) rotate(1deg); } }
@keyframes shimmer { to { translate:100% 0; } }

@media (max-width:900px) { .metric-grid { grid-template-columns:repeat(2,1fr); } .split-grid { grid-template-columns:1fr; } .staff-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) {
  .shell { width:min(100% - 24px,1180px); }
  .site-header .brand-tag { display:none; }
  .header-inner { gap:10px; }
  .nav-link { padding:8px 9px; font-size:11px; }
  .page { padding-top:52px; }
  .landing-page { padding-top:0; }
  .home-hero { min-height:auto; padding:62px 0 72px; }
  .home-copy { font-size:15px; }
  .home-actions { align-items:stretch; flex-direction:column; }
  .home-button { width:100%; }
  .content-band { padding:64px 0 72px; }
  .band-heading { align-items:flex-start; flex-direction:column; }
  .features-layout { grid-template-columns:1fr; gap:32px; }
  .features-intro { position:static; }
  .network-row { grid-template-columns:1fr 1fr; }
  .dial-rule { grid-column:1 / -1; }
  .page-copy { font-size:14px; }
  .metric-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .metric { padding:18px; }
  .metric-value { font-size:32px; }
  .directory-toolbar { align-items:stretch; flex-direction:column; }
  .search-wrap { width:100%; }
  .row-head { display:none; }
  .directory-row { grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; padding:14px; }
  .directory-row .extension-cell { grid-column:1; grid-row:2; padding-left:46px; }
  .directory-row .state-cell { grid-column:2; grid-row:2; }
  .directory-row .action-cell { grid-column:2; grid-row:1; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
}
@media (max-width:480px) { .staff-grid { grid-template-columns:1fr; } .feature-row { grid-template-columns:30px minmax(0,1fr); } .feature-icon { display:none; } .network-row { grid-template-columns:1fr; gap:11px; } .dial-rule { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .reveal { opacity:1; transform:none; } }