:root{--bg:#06080c;--panel:#0d121b;--panel-2:#111a26;--line:#1c2634;--text:#dbe4ee;--muted:#8695a8;--dim:#5c6a7d;--accent:#5eead4;--accent-2:#38bdf8;--warn:#fbbf24;--danger:#fb7185;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--sans:"Inter",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.bg-grid{position:fixed;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% -10%,#000,transparent 70%)}
.wrap{max-width:780px;margin:0 auto;padding:0 20px 80px}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{font-family:var(--mono);font-weight:700;font-size:19px}
.brand::first-letter{color:var(--accent)}
.back{font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.back:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.hero{text-align:center;padding:26px 0 6px}
.hero .mark{font-size:52px;color:var(--accent);animation:float 4s ease-in-out infinite;filter:drop-shadow(0 0 20px color-mix(in srgb,var(--accent) 50%,transparent))}
@keyframes float{50%{transform:translateY(-8px)}}
.hero h1{font-size:33px;margin:14px 0 8px;letter-spacing:-.5px}
.hero p{color:var(--muted);max-width:54ch;margin:0 auto;font-size:16px}
.tldr{background:linear-gradient(180deg,var(--panel),#0b1017);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:28px 0;font-size:15px}
.tldr b{color:var(--accent)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin:20px 0}
.card h2{font-size:20px;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.card h2 .n{font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.card p{margin:8px 0 0;color:var(--text)}
.card p.sub{color:var(--muted);font-size:14.5px}
.stage{margin:18px 0 4px;background:radial-gradient(circle at 50% 30%,#0a121a,#080b11);border:1px solid var(--line);border-radius:12px;padding:20px;overflow:hidden;position:relative}

/* ---- E2E lock + scramble ---- */
.e2e{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:13px}
.e2e .who{text-align:center;color:var(--muted);min-width:52px}
.e2e .who .big{font-size:26px}
.e2e .pipe{flex:1;position:relative;height:40px;margin:0 6px}
.e2e .pkt{position:absolute;top:8px;left:0;border-radius:7px;padding:3px 9px;font-weight:700;white-space:nowrap;font-size:12px;animation:e2etravel 5s ease-in-out infinite}
@keyframes e2etravel{
  0%{left:0;background:var(--accent);color:#04120f;opacity:0}
  8%{opacity:1}
  22%{left:2%;background:var(--accent);color:#04120f}
  30%{left:14%;background:#243244;color:var(--dim);letter-spacing:2px}
  70%{left:70%;background:#243244;color:var(--dim);letter-spacing:2px}
  80%{left:86%;background:var(--accent);color:#04120f}
  92%{left:calc(100% - 46px);opacity:1}
  100%{left:calc(100% - 46px);opacity:0}
}
.lockrow{display:flex;justify-content:space-around;margin-top:14px;font-size:11.5px;color:var(--dim);font-family:var(--mono)}
.lockrow .l1{color:var(--accent)}

/* ---- messenger comparison ---- */
.cmp{display:grid;grid-template-columns:minmax(74px,1.3fr) repeat(4,minmax(0,1fr));gap:6px;font-family:var(--mono)}
.cmp .hd{font-size:10px;line-height:1.2;color:var(--muted);text-align:center;align-self:end;padding-bottom:4px;overflow-wrap:anywhere;min-width:0}
.cmp .hd.rl{text-align:left}
.cmp .rl{font-size:12px;color:var(--text);display:flex;align-items:center;padding:8px 6px;background:#0a121a;border:1px solid var(--line);border-radius:8px;min-width:0}
.cmp .rl.me{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 9%,#0a121a);font-weight:700}
.cmp .c{display:grid;place-items:center;font-size:15px;padding:8px 0;background:#0a121a;border:1px solid var(--line);border-radius:8px}
.cmp .c.yes{color:var(--accent)}
.cmp .c.mid{color:var(--warn)}
.cmp .c.no{color:var(--dim)}
.cmp .c.hl{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 9%,#0a121a)}
.cmp-legend{grid-column:1/-1;text-align:center;font-size:10.5px;color:var(--dim);margin-top:4px}
.cmp-note{color:var(--muted);font-size:13.5px;margin-top:12px}
.cmp-note b{color:var(--accent)}
@media(max-width:480px){
  .cmp{grid-template-columns:minmax(58px,1.15fr) repeat(4,minmax(0,1fr));gap:5px}
  .cmp .hd{font-size:8.5px}
  .cmp .rl{font-size:10.5px;padding:7px 4px}
  .cmp .c{font-size:13px;padding:7px 0}
}

/* ---- mixnet swarm (routing + cover traffic together) ---- */
.swarm{position:relative;height:170px}
.swarm .ep{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#0a0e15;border:1px solid var(--line);z-index:3}
.swarm .ep.you{left:0}.swarm .ep.friend{right:0}
.swarm .ep .lbl{position:absolute;top:48px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:var(--dim)}
.swarm .node{position:absolute;width:26px;height:26px;border-radius:7px;background:#0a0e15;border:1px solid var(--line);z-index:2}
.swarm .node.n1{left:28%;top:24%}.swarm .node.n1b{left:28%;top:62%}
.swarm .node.n2{left:50%;top:44%}.swarm .node.n2b{left:50%;top:12%}
.swarm .node.n3{left:72%;top:30%}.swarm .node.n3b{left:72%;top:66%}
.swarm .node{animation:nodepulse 3s ease-in-out infinite}
.swarm .node.n1b{animation-delay:.5s}.swarm .node.n2{animation-delay:1s}.swarm .node.n2b{animation-delay:1.4s}.swarm .node.n3{animation-delay:2s}.swarm .node.n3b{animation-delay:2.4s}
@keyframes nodepulse{0%,100%{border-color:var(--line);box-shadow:none}50%{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 0 12px -3px var(--accent)}}
/* packets actually route THROUGH the nodes, each on a different path, pausing at
   every hop (mixing delay) so no single line can be followed end to end */
.swarm .p{position:absolute;width:10px;height:10px;border-radius:3px;background:#101a26;border:1px solid #2a3a50;left:3%;top:48%}
.swarm .p.real{width:13px;height:13px;background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px -1px var(--accent);z-index:4}
.swarm .p.r1{animation:route1 8s linear 0s infinite}
.swarm .p.r2{animation:route2 8.6s linear 1.5s infinite}
.swarm .p.r3{animation:route3 7.6s linear 3s infinite}
.swarm .p.r4{animation:route4 9s linear .8s infinite}
.swarm .p.r5{animation:route5 8.2s linear 4.2s infinite}
@keyframes route1{0%{left:3%;top:48%;opacity:0}6%{opacity:1}24%{left:28%;top:24%}30%{left:28%;top:24%}50%{left:50%;top:12%}56%{left:50%;top:12%}76%{left:72%;top:30%}82%{left:72%;top:30%}94%{left:92%;top:48%;opacity:1}100%{left:92%;top:48%;opacity:0}}
@keyframes route2{0%{left:3%;top:48%;opacity:0}6%{opacity:1}24%{left:28%;top:62%}30%{left:28%;top:62%}50%{left:50%;top:44%}56%{left:50%;top:44%}76%{left:72%;top:66%}82%{left:72%;top:66%}94%{left:92%;top:48%;opacity:1}100%{left:92%;top:48%;opacity:0}}
@keyframes route3{0%{left:3%;top:48%;opacity:0}6%{opacity:1}24%{left:28%;top:62%}30%{left:28%;top:62%}50%{left:50%;top:44%}56%{left:50%;top:44%}76%{left:72%;top:30%}82%{left:72%;top:30%}94%{left:92%;top:48%;opacity:1}100%{left:92%;top:48%;opacity:0}}
@keyframes route4{0%{left:3%;top:48%;opacity:0}6%{opacity:1}24%{left:28%;top:24%}30%{left:28%;top:24%}50%{left:50%;top:44%}56%{left:50%;top:44%}76%{left:72%;top:66%}82%{left:72%;top:66%}94%{left:92%;top:48%;opacity:1}100%{left:92%;top:48%;opacity:0}}
@keyframes route5{0%{left:3%;top:48%;opacity:0}6%{opacity:1}24%{left:28%;top:24%}30%{left:28%;top:24%}50%{left:50%;top:12%}56%{left:50%;top:12%}76%{left:72%;top:66%}82%{left:72%;top:66%}94%{left:92%;top:48%;opacity:1}100%{left:92%;top:48%;opacity:0}}
.swarm .legend{position:absolute;bottom:-2px;left:0;right:0;display:flex;justify-content:center;gap:20px;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.swarm .legend .g1{color:var(--accent)}

/* ---- NobleChat vs Tor comparison ---- */
.vs{display:flex;flex-direction:column;gap:14px}
.vs .dim{color:var(--dim);font-weight:400}
.vs .lane{background:#0a0e15;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.vs .lane h3{margin:0 0 2px;font-size:12.5px;font-family:var(--mono);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vs .tag{font-size:10px;padding:2px 9px;border-radius:999px;white-space:nowrap}
.vs .tag.bad{color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line))}
.vs .tag.good{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,var(--line))}
.vs .track{position:relative;height:38px;margin:6px 0 2px}
.vs .eye{position:absolute;top:9px;font-size:15px;z-index:3}
.vs .eye.a{left:0}.vs .eye.b{right:0}
.vs .relay{position:absolute;top:14px;width:12px;height:12px;border-radius:4px;background:#0e1622;border:1px solid var(--line);transform:translateX(-50%)}
.vs .d{position:absolute;top:15px;left:26px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px -1px var(--accent)}
.vs .d.cover{background:#1b2636;border:1px solid #2a3a50;box-shadow:none}
@keyframes torflow{0%{left:26px;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 30px);opacity:0}}
@keyframes mixflow{0%{left:26px;opacity:0}6%{opacity:1}26%{left:24%}33%{left:24%}56%{left:48%}63%{left:48%}86%{left:72%}94%{opacity:1}100%{left:calc(100% - 30px);opacity:0}}
.vs-note{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:4px}

/* ---- cover traffic pulse grid ---- */
.cover{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.cover .c{width:22px;height:22px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);animation:blink 2.4s infinite}
.cover .c.real{background:var(--accent);border-color:var(--accent)}
.cover .c:nth-child(2n){animation-delay:.4s}.cover .c:nth-child(3n){animation-delay:.9s}.cover .c:nth-child(5n){animation-delay:1.4s}.cover .c:nth-child(7n){animation-delay:1.9s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

/* ---- offline mailbox ---- */
.mbox{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.mbox-icon{font-size:30px;animation:float 3s ease-in-out infinite}

.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
.feat .f{background:#080b11;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px}
.feat .f b{display:block;color:var(--accent);font-family:var(--mono);font-size:12px;margin-bottom:3px}
.foot{text-align:center;color:var(--dim);font-size:13px;margin-top:36px;line-height:1.7}
.cta{display:inline-block;margin-top:10px;background:linear-gradient(180deg,var(--accent),#2dd4bf);color:#04120f;font-weight:600;text-decoration:none;padding:11px 22px;border-radius:10px}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* Positions and animation timings that used to sit in style="" attributes on
   the elements themselves. They live here so the page needs no inline styles
   and the CSP can refuse them outright. */
.relay-1 { left: 26%; }
.relay-2 { left: 50%; }
.relay-3 { left: 74%; }
.tor-1 { animation: torflow 3.4s linear 0s infinite; }
.tor-2 { animation: torflow 3.4s linear 1.13s infinite; }
.tor-3 { animation: torflow 3.4s linear 2.26s infinite; }
.mix-1 { animation: mixflow 3.2s linear .2s infinite; }
.mix-2 { animation: mixflow 5.4s linear 1.1s infinite; }
.mix-3 { animation: mixflow 4.3s linear .5s infinite; }
.mix-4 { animation: mixflow 4.8s linear 2s infinite; }
.mix-5 { animation: mixflow 3.6s linear 2.8s infinite; }
.mix-6 { animation: mixflow 5s linear 1.6s infinite; }
.lockrow.legend { margin-top: 14px; }