visual overhaul: hero with real headline + terminal line + connection info, 3-col icon-card grid with category tags (INTEL/ACQUIRE/HUNT/OPERATE/UTILITY/ACCOUNT), card layout polish (chip icons, aligned tags, compact buttons), fixed broken typewriter blob

app.py

@@ -226,7 +226,7 @@ html{scroll-behavior:smooth}
 body{margin:0;min-height:100vh;color:var(--fg);font:16px/1.6 ui-monospace,Menlo,Consolas,monospace;text-align:center;overflow-x:hidden;background:var(--bg)}
 #space{position:fixed;inset:0;z-index:0;display:block}
 .vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,var(--neb1,rgba(120,85,255,.16)),transparent 55%),radial-gradient(ellipse at 80% 110%,var(--neb2,rgba(0,190,255,.10)),transparent 50%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,5,.55) 100%)}
-main{position:relative;z-index:2;max-width:920px;margin:0 auto;padding:1.6rem 1.1rem 4rem;text-align:center}
+main{position:relative;z-index:2;max-width:1060px;margin:0 auto;padding:1.6rem 1.1rem 4rem;text-align:center}
 #lbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:50;transition:width .3s;box-shadow:0 0 10px var(--acc)}
 #lbar.done{width:100%;opacity:0;transition:opacity .5s}
 header{position:sticky;top:0;z-index:40;background:rgba(7,10,19,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
@@ -275,6 +275,29 @@ button:hover{filter:brightness(1.15);box-shadow:0 0 20px -4px var(--acc)}
 button.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}
 button.big{font-size:1.02rem;padding:.75rem 1.4rem;margin:.25rem;color:#0d0722}
 .grid2{display:grid;grid-template-columns:1fr;gap:.9rem;text-align:center}
+@media(min-width:700px){.grid2{grid-template-columns:repeat(2,1fr);gap:1.1rem}}
+.grid3{display:grid;grid-template-columns:1fr;gap:1.1rem;text-align:left}
+@media(min-width:700px){.grid3{grid-template-columns:repeat(2,1fr)}}
+@media(min-width:1000px){.grid3{grid-template-columns:repeat(3,1fr)}}
+.tcard{display:flex;flex-direction:column;gap:.55rem;padding:1.15rem 1.2rem;min-height:0}
+.tcard h3{margin:0;font-size:1.02rem;letter-spacing:.14em;text-align:left}
+.tcard p{margin:0;text-align:left;color:var(--dim);font-size:.92rem;line-height:1.5;flex:1}
+.tcard .tgo{align-self:flex-start;margin-top:.2rem;text-decoration:none}
+.tcard .tgo button{margin:0;padding:.5rem 1.1rem}
+.tcard:hover{border-color:#3d4d7d}
+.tcard .tico{font-size:1.3rem;line-height:1;color:var(--acc)}
+.tcard .trow{display:flex;align-items:center;gap:.6rem}
+.tcard .tico{flex:0 0 1.9rem;width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:rgba(167,139,250,.08);font-size:1rem;color:var(--acc)}
+.tcard .tt{margin-left:auto}
+.tcard .tt{font-size:.68rem;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
+.hero{display:flex;flex-direction:column;gap:1rem;padding:2rem 1.6rem;text-align:left}
+.hero .hl{display:flex;align-items:center;gap:.7rem;color:var(--ok);font-size:.9rem;white-space:nowrap}
+.hero h2{font-size:clamp(1.7rem,4.2vw,2.7rem);letter-spacing:-.01em;margin:0;line-height:1.12;font-weight:800}
+.hero h2 em{font-style:normal;color:var(--acc);text-shadow:0 0 24px rgba(167,139,250,.45)}
+.hero .hsub{color:var(--dim);font-size:1rem;line-height:1.6;max-width:640px;margin:0}
+.hero .hsub b{color:var(--fg)}
+.hero .cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
+@media(max-width:640px){.hero{padding:1.4rem 1.1rem;text-align:left}}
 @media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
 .tag{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.74rem;border:1px solid;margin:.15rem}
 .tag.ok{color:var(--ok);border-color:var(--ok)}.tag.bad{color:var(--bad);border-color:var(--bad)}.tag.warn{color:var(--acc);border-color:var(--acc)}
@@ -2564,29 +2587,36 @@ def index():
     n_sms = con.execute("SELECT COUNT(*) c FROM sms_rentals").fetchone()["c"]
     n_px = con.execute("SELECT COUNT(*) c FROM proxy_checks").fetchone()["c"]
     tools = [
-        ("ip","IP INTEL","Geo, ASN, ISP, VPN/hosting flags, rDNS — your IP auto-detected, any target on demand."),
+        ("ip","IP INTEL","Geo, ASN, ISP, VPN/hosting flags, rDNS — your IP auto-detected, any target on demand.","◈","INTEL"),
-        ("card","CARD CHECK","Luhn + BIN: issuer bank, brand, type, country, prepaid risk flags. Nothing stored, nothing charged."),
+        ("card","CARD CHECK","Luhn + BIN: issuer bank, brand, type, country, prepaid risk flags. Nothing stored, nothing charged.","◈","INTEL"),
-        ("sms","SMS RENTAL","Disposable numbers, 30-min windows, instant refund on cancel."),
+        ("eh","MAIL FORENSICS","Paste raw headers → real origin IP + geo, SPF/DKIM/DMARC verdicts, spoof flags.","◈","INTEL"),
-        ("proxy","PROXY LAB","Residential egress testing on the Pleiades rail — same gateway keys fleet-wide. Rent GB plans at the storefront."),
+        ("forensics","IMAGE FORENSICS","EXIF, GPS, edit-tool detection, error-level analysis — expose doctored photos.","◈","INTEL"),
-        ("steg","STEGO LAB","Hide words inside pictures. LSB depth, randomized spread, password-encrypted payloads."),
+        ("sms","SMS RENTAL","Disposable numbers, 30-min windows, instant refund on cancel.","◈","ACQUIRE"),
-        ("track","TRACK FILE","$1 → tracked link + email pixel. Every open reports back: IP, location, ISP, device."),
+        ("mail","BURNER MAIL","Receive-only mailboxes, 7–90 days, live countdown. Codes & confirmations without an identity.","◈","ACQUIRE"),
-        ("mail","BURNER MAIL","Receive-only mailboxes, 7–90 days, live countdown. Codes & confirmations without an identity."),
+        ("proxy","PROXY LAB","Residential egress testing on the Pleiades rail — same gateway keys fleet-wide.","◈","ACQUIRE"),
-        ("eh","MAIL FORENSICS","Paste raw headers → real origin IP + geo, SPF/DKIM/DMARC verdicts, spoof flags."),
+        ("deaddrop","DEAD-DROP","AES-GCM encrypted notes that burn after N reads or TTL. Optional password. No trace left.","◈","ACQUIRE"),
-        ("forensics","IMAGE FORENSICS","EXIF, GPS, edit-tool detection, error-level analysis — expose doctored photos."),
+        ("steg","STEGO LAB","Hide words inside pictures. LSB depth, randomized spread, password-encrypted payloads.","◈","OPERATE"),
-        ("canary","CANARY TRAPS","Tripwire links and pixels — instant alert the moment anyone touches one."),
+        ("track","TRACK FILE","$1 → tracked link + email pixel. Every open reports back: IP, location, ISP, device.","◈","HUNT"),
-        ("deaddrop","DEAD-DROP","AES-GCM encrypted notes that burn after N reads or TTL. Optional password. No trace left."),
+        ("canary","CANARY TRAPS","Tripwire links and pixels — instant alert the moment anyone touches one.","◈","HUNT"),
-        ("shot","SCREENSHOT","Headless-capture any page when Chromium is up; otherwise a rendered-text + intel preview. Agents: poll the status API."),
+        ("shot","SCREENSHOT","Headless-Chromium PNG capture of any page. Agents: poll the status API.","◈","HUNT"),
-        ("score","FRAUD-SCORE","Composite 0-100 risk: IP intel + disposable-email + BIN heuristics, with full breakdown."),
+        ("score","FRAUD-SCORE","Composite 0-100 risk: IP intel + disposable-email + BIN heuristics, with full breakdown.","◈","HUNT"),
-        ("tools","FREE TOOLS","DNS resolver, HTTP header inspector, JWT decoder, hasher, generators."),
+        ("tools","FREE TOOLS","DNS resolver, HTTP header inspector, JWT decoder, hasher, generators.","◈","UTILITY"),
-        ("passport","AGENT PASSPORT","Machine-readable trust badge for your bots. Agents are first-class here."),
+        ("passport","AGENT PASSPORT","Machine-readable trust badge for your bots. Agents are first-class here.","◈","ACCOUNT"),
     ]
-    cards = "".join(f'<div class=card><h3><a href=/{href} style="color:var(--acc);text-decoration:none">◈ {name}</a></h3><p style=color:var(--dim)>{desc}</p><a href=/{href}><button>Open</button></a></div>' for href, name, desc in tools)
+    tcards = "".join(
-    stat = f"You're connecting from <b style=color:var(--acc)>{esc(d.get('query','?'))}</b> — {esc(d.get('city',''))}, {esc(d.get('country',''))} · {esc(d.get('isp',''))}"
+        f'<div class="card tcard"><div class="trow"><span class="tico">{ico}</span><h3><a href=/{href} style="color:var(--acc);text-decoration:none">{name}</a></h3><span class="tt">{cat}</span></div>'
+        f'<p>{desc}</p><a class=tgo href=/{href}><button>Open →</button></a></div>'
+        for href, name, desc, ico, cat in tools)
+    stat = f"you're connecting from <b style='color:var(--acc2)'>{esc(d.get('query','?'))}</b> · {esc(d.get('country',''))}"
     cta = ('<a href=/inbox><button class=big>◈ INBOX</button></a> <a href=/keys><button class="big ghost">▣ API KEYS</button></a> <a href=/pass><button class=big>★ GET PASS</button></a>' if uid else '<a href=/inbox><button class=big>▸ SIGN UP — NO KYC</button></a> <a href=/inbox><button class="big ghost">◈ LOG IN</button></a> <a href=/pass><button class="big ghost">★ GET PASS</button></a>')
+    from markupsafe import escape as _e
+    stat_line = '<span class="hl">▸ ' + stat + '</span>' if stat else ""
     body = f"""
-<div class="term card glow">$ ./dark0rbits --intro<span class="crt">▊</span>
+<div class="term card glow hero">
-<span class="type" data-lines="DARK0RBITS — the toolbox that treats you like an operator, not a product.|No KYC. No email required. No Stripe. BTC only.|Agents welcome — every tool has a JSON API."></span>
+<div class="hl">$ ./dark0rbits --intro <span class="crt">▊</span></div>
-{stat}
+<h2>The toolbox that treats you like an <em>operator</em>, not a product.</h2>
+<p class="hsub">No KYC. No email. No Stripe — <b>BTC only</b>. Every tool has a JSON API, metered per call, so scripts and agents are first-class customers.</p>
+{stat_line}
 <div class="cta">{cta}</div></div>
 <script>
 (function(){{
@@ -2601,7 +2631,7 @@ if(ci>=cur.length){{out+=cur+'<br>';li++;ci=0;setTimeout(step,420)}}else setTime
 step();
 }})();
 </script>
-<div class=grid2>{cards}</div>
+<div class="grid3">{tcards}</div>
 <div class=card style=text-align:center>
 <span class="tag ok">NO KYC</span> <span class="tag ok">BTC ONLY</span> <span class="tag ok">AGENT-FIRST APIs</span> <span class="tag warn">{n_sms} SMS RENTALS SERVED</span> <span class="tag warn">{n_px} PROXY CHECKS</span></div>
 <div class=card style=color:var(--dim)>