@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#050505;--cy:#00ffff;--mg:#ff00ff;--fg:#e6faff;--dim:#7ad7ff}
body{font-family:'Orbitron',sans-serif;background:var(--bg);color:#fff;overflow-x:hidden}

/* Header */
header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(0,0,0,.6);border-bottom:1px solid var(--cy);position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(4px)}
.logo-area{display:flex;align-items:center;gap:.8rem}
.brand{color:var(--cy);text-decoration:none;font-weight:900;letter-spacing:.5px;position:relative}
header nav a{margin:0 1rem;color:var(--cy);text-decoration:none;transition:color .25s}
header nav a:hover{color:var(--mg)}
.btn{padding:.75rem 1.4rem;cursor:pointer;border:none;font-weight:700;transition:all .25s;border-radius:10px}
.neon-btn{background:linear-gradient(90deg,var(--cy),var(--mg));color:#000;box-shadow:0 0 10px var(--cy),0 0 18px var(--mg)}
.neon-btn:hover{box-shadow:0 0 18px var(--cy),0 0 36px var(--mg);transform:translateY(-1px)}
.ghost-btn{background:transparent;border:2px solid var(--cy);color:var(--cy)}
.glow{text-shadow:0 0 10px var(--cy),0 0 22px var(--mg)}
.glow.small{font-size:1.8rem;text-align:center;margin-bottom:1.2rem}
.glitch{position:relative;font-size:2.6rem;color:var(--cy);text-align:center}

/* NEW: Animated brand (glitch + scanline) */
.glitchy-brand{
  display:inline-block;font-size:1.2rem;color:var(--cy);
  --t:attr(data-text); /* for pseudo content */
}
.glitchy-brand::before,
.glitchy-brand::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;pointer-events:none;mix-blend-mode:screen;
}
.glitchy-brand::before{color:var(--mg);clip-path:inset(0 0 60% 0);transform:translate(-1px,-1px)}
.glitchy-brand::after{color:var(--cy);clip-path:inset(40% 0 0 0);transform:translate(1px,1px)}
@keyframes logoGlitch {
  0% { text-shadow:2px 0 var(--mg), -2px 0 var(--cy) }
  40% { text-shadow:-2px 0 var(--mg), 2px 0 var(--cy) }
  42% { transform:skewX(5deg) }
  44% { transform:none }
  70% { text-shadow:2px 0 var(--mg), -2px 0 var(--cy) }
  100%{ text-shadow:-2px 0 var(--mg), 2px 0 var(--cy) }
}
.glitchy-brand{animation:logoGlitch 3.5s infinite steps(2,end)}
.glitchy-brand:hover{filter:brightness(1.2)}
/* subtle scanline flicker */
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,255,.7),transparent);
  animation:scan 4s linear infinite;
}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Hero + trust */
.hero{text-align:center;padding:4.5rem 1.5rem 3rem}
.hero-sub{color:var(--dim);margin:.8rem auto 1.2rem;max-width:820px}
.btn-group{display:flex;gap:1rem;justify-content:center}
.trust-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.4rem}
.trust-badge{border:1px solid var(--cy);padding:.4rem .7rem;border-radius:999px;font-size:.9rem;opacity:.9;box-shadow:0 0 8px rgba(0,255,255,.35)}

/* Sections */
section{padding:2.8rem 1.5rem;max-width:1200px;margin:0 auto}

/* How */
.how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step-card{background:rgba(0,0,0,.55);border:2px solid var(--cy);border-radius:12px;padding:1.2rem;box-shadow:0 0 10px var(--cy);text-align:center}
.step-num{width:36px;height:36px;line-height:36px;border-radius:50%;background:var(--mg);display:inline-block;font-weight:900;margin-bottom:.6rem}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.features-deep .card svg{width:42px;height:42px;margin-bottom:.4rem}
.card{background:rgba(0,0,0,.5);padding:1.2rem;border:2px solid var(--cy);box-shadow:0 0 10px var(--cy);text-align:center;border-radius:12px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:0 0 18px var(--cy),0 0 36px var(--mg)}

/* Connect, Network, Pricing, FAQ, Contact (unchanged from previous message) */
.tabbar{display:flex;gap:.5rem;justify-content:center;margin:.6rem 0 1rem;flex-wrap:wrap}
.tab{background:transparent;border:2px solid var(--cy);color:var(--cy);padding:.5rem .9rem;border-radius:8px;cursor:pointer}
.tab.active{background:linear-gradient(90deg,var(--cy),var(--mg));color:#000}
.tabpanes{max-width:900px;margin:0 auto;position:relative}
.pane{display:none;position:relative}
.pane.active{display:block}
pre{background:#0a0a0a;border:1px solid var(--cy);box-shadow:0 0 12px rgba(0,255,255,.25);padding:1rem;border-radius:10px;overflow:auto}
.copy-btn{position:absolute;right:.6rem;top:.6rem;border:1px solid var(--cy);background:rgba(0,0,0,.4);color:var(--cy);padding:.35rem .6rem;border-radius:8px;cursor:pointer}
.note{color:var(--dim);text-align:center;margin-top:.9rem}
.network .locations{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.loc-card{background:rgba(0,0,0,.5);border:2px solid var(--cy);padding:1rem;border-radius:12px;box-shadow:0 0 10px var(--cy)}
.panel{background:rgba(0,0,0,.5);border:2px solid var(--cy);border-radius:12px;box-shadow:0 0 10px var(--cy);padding:1rem;margin-top:1rem}
.panel.slim{padding:.8rem 1rem}
.status{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.badge{border:1px solid #22e6a8;color:#22e6a8;padding:.25rem .5rem;border-radius:999px;text-transform:uppercase;font-size:.75rem}
.bullets{margin:.5rem 0 0 1.2rem}
.bullets li{margin:.25rem 0}
.bullets.small li{font-size:.95rem}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.price-card{background:rgba(0,0,0,.55);padding:1.2rem;border:2px solid var(--cy);border-radius:12px;text-align:center;box-shadow:0 0 10px var(--cy)}
.price-card.highlight{border-color:var(--mg);box-shadow:0 0 15px var(--mg)}
.price{font-size:1.6rem;margin:.5rem 0 1rem}
.faq .accordion{max-width:900px;margin:0 auto}
.acc{width:100%;text-align:left;background:rgba(0,0,0,.5);border:2px solid var(--cy);color:#fff;padding:.9rem 1rem;margin:.5rem 0;border-radius:10px;cursor:pointer}
.acc-panel{display:none;padding:.7rem 1rem 1rem;border-left:2px solid var(--mg);background:rgba(0,0,0,.35);border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.acc.open + .acc-panel{display:block}
.contact .row{display:flex;gap:.8rem}
.contact input,.contact textarea{width:100%;background:#0a0a0a;border:1px solid var(--cy);border-radius:10px;color:#fff;padding:.8rem;margin:.5rem 0;box-shadow:0 0 8px rgba(0,255,255,.15) inset}
.form-msg{margin-top:.5rem;min-height:1.2rem}
footer{text-align:center;padding:1.2rem;border-top:1px solid var(--cy);color:var(--dim)}
footer a{color:var(--cy)}

/* Register page */
.hero-tight{padding:3rem 1.2rem}
.form-panel{max-width:960px;margin:1rem auto}
.form-panel label{display:flex;flex-direction:column;gap:.35rem}
.form-panel span{font-size:.9rem;color:var(--dim)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.form-panel input,.form-panel select{background:#0a0a0a;border:1px solid var(--cy);border-radius:10px;color:#fff;padding:.8rem;box-shadow:0 0 8px rgba(0,255,255,.15) inset}
.inline-info{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.link{color:var(--cy)}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:.5rem;top:2.1rem;padding:.2rem .5rem;border:1px solid var(--cy);background:rgba(0,0,0,.4);color:var(--cy);border-radius:8px;cursor:pointer}
.strength{height:8px;background:#0b0b0b;border:1px solid #163b3b;border-radius:6px;margin-top:.35rem}
.strength .bar{height:100%;width:0%;background:linear-gradient(90deg,#ff6565,#ffd166,#00ffa6);box-shadow:0 0 10px rgba(0,255,255,.2);border-radius:6px;transition:width .3s}
.tos{margin:.6rem 0;display:flex;align-items:center;gap:.5rem}
.badge{border:1px solid var(--cy);padding:.25rem .5rem;border-radius:999px}
.dim{color:var(--dim);font-size:.85rem}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:20}
.modal-content{background:#111;padding:2rem;border:2px solid var(--cy);box-shadow:0 0 20px var(--cy);border-radius:12px;max-width:720px}
.modal-content pre{margin:.8rem 0 1rem}
.close-any{cursor:pointer;float:right;font-size:1.6rem}

/* Animations & background */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.fade-in.visible{opacity:1;transform:translateY(0)}
#grid,#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}

/* Responsive */
@media (max-width:1024px){
  .features{grid-template-columns:repeat(2,1fr)}
  .network .locations{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  header nav a{display:none}
  .how .steps{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .network .locations{grid-template-columns:1fr}
  .btn-group{flex-direction:column}
  .contact .row{flex-direction:column}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
/* ===== Docs layout ===== */
.docs-wrap { max-width:1400px; margin:0 auto; padding:1.2rem; display:grid; grid-template-columns: 260px 1fr 240px; gap:1rem; }
.sidebar { position:sticky; top:72px; height:calc(100vh - 90px); padding:.8rem; background:rgba(0,0,0,.45); border:2px solid #0ff; border-radius:12px; box-shadow:0 0 10px #0ff; overflow:auto; }
.sidebar .search { width:100%; padding:.6rem .8rem; border-radius:10px; border:1px solid #0ff; background:#0a0a0a; color:#fff; margin-bottom:.8rem; }
.side-nav a { display:block; padding:.5rem .4rem; border-radius:8px; color:#7ad7ff; text-decoration:none; }
.side-nav a.active, .side-nav a:hover { color:#000; background:linear-gradient(90deg,#00ffff,#ff00ff); }
.docs { background:rgba(0,0,0,.45); border:2px solid #0ff; border-radius:12px; box-shadow:0 0 10px #0ff; padding:1.2rem; }
.docs h1 { margin-bottom:.6rem; }
.docs h2 { margin-top:1.4rem; margin-bottom:.4rem; }
.docs p, .docs li { line-height:1.6; }
.toc { position:sticky; top:72px; height:calc(100vh - 90px); padding:.8rem; background:rgba(0,0,0,.45); border:2px solid #0ff; border-radius:12px; box-shadow:0 0 10px #0ff; }
.toc-title { font-weight:900; margin-bottom:.5rem; }
.toc nav a { display:block; font-size:.95rem; color:#7ad7ff; padding:.35rem .2rem; border-radius:6px; text-decoration:none; }
.toc nav a.active, .toc nav a:hover { color:#000; background:linear-gradient(90deg,#00ffff,#ff00ff); }
.docs pre { margin:.5rem 0; }
.docs .copy-btn { position:relative; margin:.35rem 0 .6rem auto; display:inline-block; }

/* ===== Auth pages ===== */
.form-panel { background:rgba(0,0,0,.55); border:2px solid #0ff; border-radius:12px; box-shadow:0 0 10px #0ff; padding:1rem; }
.form-panel label { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.6rem; }
.form-panel input { background:#0a0a0a; border:1px solid #0ff; color:#fff; border-radius:10px; padding:.8rem; }
.pw-wrap { position:relative; }
.pw-toggle { position:absolute; right:.5rem; top:2.1rem; padding:.2rem .5rem; border:1px solid #0ff; background:rgba(0,0,0,.4); color:#0ff; border-radius:8px; cursor:pointer; }
.strength { height:8px; background:#0b0b0b; border:1px solid #163b3b; border-radius:6px; margin-top:.35rem; }
.strength .bar { height:100%; width:0%; background:linear-gradient(90deg,#ff6565,#ffd166,#00ffa6); box-shadow:0 0 10px rgba(0,255,255,.2); border-radius:6px; transition:width .3s; }

/* Tabs (used on reset.html) */
.tabbar { display:flex; gap:.5rem; flex-wrap:wrap; }
.tab { background:transparent; border:2px solid #0ff; color:#0ff; padding:.5rem .9rem; border-radius:8px; cursor:pointer; }
.tab.active { background:linear-gradient(90deg,#00ffff,#ff00ff); color:#000; }
.tabpanes .pane { display:none; }
.tabpanes .pane.active { display:block; }

/* Responsive for docs layout */
@media (max-width:1100px){ .docs-wrap { grid-template-columns: 220px 1fr; } .toc{ display:none; } }
@media (max-width:760px){ .docs-wrap { grid-template-columns: 1fr; } .sidebar{ position:relative; height:auto; } }
/* ===== Layout helpers ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem; }
.small { font-size: .9rem; }

/* Hero actions + newsletter */
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:1rem; }
.news { display:flex; gap:.5rem; align-items:center; }
.news input { background:#0a0a0a; border:1px solid var(--cy); color:#fff; border-radius:10px; padding:.7rem .8rem; }

/* Links reset inside tiles/panels */
header nav a { text-decoration:none; }
.loc-card { text-decoration:none; color:#fff; }

/* Cards grid (auto-fit) */
.locations { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.loc-card { display:block; padding:1rem; border-radius:12px; background:rgba(0,0,0,.5); border:2px solid var(--cy);
  box-shadow:0 0 10px var(--cy); transition:transform .2s, box-shadow .2s; }
.loc-card:hover { transform: translateY(-3px); box-shadow:0 0 18px var(--cy), 0 0 32px var(--mg); }
.loc-card h4 { margin-bottom:.25rem; }

/* Mini status widget */
.mini-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:.6rem; }
.status-tile { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1rem;
  border:1px solid rgba(0,255,255,.35); border-radius:10px; background:rgba(0,0,0,.35); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem; }
.dot.ok { background:#28ffbf; box-shadow:0 0 10px #28ffbf; }
.dot.warn { background:#ffd166; box-shadow:0 0 10px #ffd166; }

/* Integrations */
.integrations { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; }
.int-card { text-align:center; background:rgba(0,0,0,.5); border:2px solid var(--cy); border-radius:12px; padding:1rem;
  box-shadow:0 0 10px var(--cy); transition:transform .2s, box-shadow .2s; }
.int-card:hover { transform:translateY(-3px); box-shadow:0 0 18px var(--cy), 0 0 32px var(--mg); }
.int-card svg { width:40px; height:40px; margin-bottom:.4rem; }

/* Panel spacing tweak */
.panel { padding:1rem 1.2rem; }
.panel .panel-title { font-weight:900; margin-bottom:.5rem; }

/* Make anchors inside panels tidy */
.panel a.link { color:var(--cy); text-decoration:underline; }

/* Responsive little tweaks */
@media (max-width:640px){
  .news { width:100%; }
  .news input { flex:1; }
}
/* ===== Status page upgrades ===== */
.status-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.status-card { background: rgba(0,0,0,.5); border: 2px solid var(--cy); border-radius: 12px;
  box-shadow: 0 0 10px var(--cy); padding: .9rem 1rem; }
.sc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.sc-title { font-weight:900; }
.sc-id { color: var(--dim); font-weight: 600; font-size: .9rem; }
.badge { padding:.25rem .55rem; border-radius:999px; border:1px solid rgba(255,255,255,.15); font-size:.8rem; text-transform:uppercase; }
.badge.ok { color:#0f0; border-color:#0f0; box-shadow:0 0 8px rgba(0,255,0,.4); }
.badge.warn { color:#ffd166; border-color:#ffd166; box-shadow:0 0 8px rgba(255,209,102,.35); }
.sc-body { display:flex; gap:1rem; align-items:center; }
.sc-metric b { font-size:1.1rem; }
.muted { color: var(--dim); }

/* Charts inside panels */
canvas { background: transparent; }
/* Layout */
.container { max-width:1200px; margin:0 auto; padding:0 1.2rem; }
.small { font-size:.9rem; }

/* Logos / trust bar */
.logos { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.logo-chip { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border:1px solid var(--cy); border-radius:999px; background:rgba(0,0,0,.35); box-shadow:0 0 8px rgba(0,255,255,.25); }
.logo-chip .bar { display:inline-block; width:16px; height:8px; border-radius:3px; }
.logo-chip .bar.cy { background:#00ffff; box-shadow:0 0 8px #00ffff; }
.logo-chip .bar.mg { background:#ff00ff; box-shadow:0 0 8px #ff00ff; }

/* Links tiles */
.locations { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1rem; }
.loc-card { display:block; text-decoration:none; color:#fff; background:rgba(0,0,0,.5); border:2px solid var(--cy); border-radius:12px; padding:1rem; box-shadow:0 0 10px var(--cy); transition:transform .2s, box-shadow .2s; }
.loc-card:hover { transform:translateY(-3px); box-shadow:0 0 18px var(--cy), 0 0 34px var(--mg); }
.loc-card h4 { margin-bottom:.25rem; }

/* Mini status */
.mini-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.6rem; }
.status-tile { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1rem; border:1px solid rgba(0,255,255,.35); border-radius:10px; background:rgba(0,0,0,.35); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:.4rem; }
.dot.ok { background:#28ffbf; box-shadow:0 0 10px #28ffbf; }
.dot.warn { background:#ffd166; box-shadow:0 0 10px #ffd166; }

/* Generator */
.generator .gen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; }
.generator label { display:flex; flex-direction:column; gap:.3rem; }
.generator input, .generator select { background:#0a0a0a; border:1px solid var(--cy); color:#fff; border-radius:10px; padding:.6rem .7rem; }
.gen-output { margin-top:.8rem; }
.out-row { position:relative; display:flex; align-items:flex-start; gap:.6rem; padding:.4rem 0; }
.out-row .muted { width:130px; color:var(--dim); }
.out-row code { background:#0b0b0b; border:1px solid var(--cy); padding:.4rem .6rem; border-radius:8px; box-shadow:0 0 8px rgba(0,255,255,.2) inset; overflow:auto; }
.out-row pre { background:#0b0b0b; border:1px solid var(--cy); padding:.6rem .7rem; border-radius:8px; box-shadow:0 0 8px rgba(0,255,255,.2) inset; overflow:auto; max-width:100%; }
.copy.mini { border:1px solid var(--cy); background:rgba(0,0,0,.35); color:var(--cy); border-radius:8px; padding:.35rem .6rem; cursor:pointer; }

/* Table */
.table-wrap { background:rgba(0,0,0,.45); border:2px solid var(--cy); border-radius:12px; box-shadow:0 0 10px var(--cy); overflow:auto; }
.plan-table { width:100%; border-collapse:collapse; }
.plan-table th, .plan-table td { padding:.7rem .8rem; border-bottom:1px solid rgba(0,255,255,.2); text-align:left; }
.plan-table thead th { background:rgba(0,255,255,.08); }
.plan-cta { text-align:center; padding:1rem; }

/* Testimonials */
.testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.t-card { background:rgba(0,0,0,.5); border:2px solid var(--cy); border-radius:12px; padding:1rem; box-shadow:0 0 10px var(--cy); }
.t-meta { color:var(--dim); margin-top:.5rem; }

/* Roadmap */
.roadmap { position:relative; margin-left:1.2rem; }
.roadmap::before { content:""; position:absolute; left:-.6rem; top:.2rem; bottom:.2rem; width:2px; background:linear-gradient(#00ffff,#ff00ff); box-shadow:0 0 12px #00ffff; }
.rm-item { display:flex; gap:.7rem; align-items:flex-start; margin:.6rem 0; }
.rm-dot { width:10px; height:10px; border-radius:50%; background:#00ffff; box-shadow:0 0 10px #00ffff; margin-top:.4rem; }

/* Floating buttons */
.float-help, .float-top { position:fixed; right:16px; z-index:15; border:1px solid var(--cy); background:rgba(0,0,0,.45); color:var(--cy); border-radius:10px; padding:.6rem .8rem; cursor:pointer; box-shadow:0 0 10px rgba(0,255,255,.35); }
.float-help { bottom:84px; }
.float-top { bottom:24px; opacity:0; transition:opacity .25s; }

/* Newsletter / hero actions */
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:1rem; }
.news input { background:#0a0a0a; border:1px solid var(--cy); color:#fff; border-radius:10px; padding:.7rem .8rem; }

/* Responsive */
@media (max-width:640px){
  .out-row { flex-direction:column; }
  .out-row .muted { width:auto; }
}
.center-wrap{max-width:1200px;margin:0 auto;padding:1rem}
.glow{ text-shadow:0 0 10px #00ffff, 0 0 22px #ff00ff }
.dim{ color:#9adfff }