@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap";:root{--bg-cyber:#070a10;--bg-elevated:#0d1320;--bg-card:#0f1722c7;--bg-card-hover:#16202deb;--border-card:#94a3b824;--border-card-hover:#7dd3fc47;--text-main:#f8fafc;--text-soft:#cbd5e1;--text-muted:#8b9aad;--primary-gradient:linear-gradient(135deg, #38bdf8 0%, #22c55e 48%, #a78bfa 100%);--btn-gradient-hover:linear-gradient(135deg, #0ea5e9 0%, #16a34a 48%, #8b5cf6 100%);--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--accent-cyan:#06b6d4;--accent-pink:#ec4899;--accent-green:#10b981;--accent-red:#ef4444;--font-sans:"Outfit", "Inter", system-ui, -apple-system, sans-serif;--font-mono:"Fira Code", ui-monospace, monospace;--surface-shadow:0 20px 60px #00000047;--glow-shadow:0 18px 50px #02081757;--glow-shadow-hover:0 22px 70px #0ea5e929}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-cyber);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;background-image:linear-gradient(#0f172a4d 0%,#070a1000 34%),radial-gradient(circle at 12% 12%,#38bdf81f 0%,#0000 32%),radial-gradient(circle at 88% 18%,#22c55e14 0%,#0000 34%),radial-gradient(circle at 50% 100%,#a78bfa14 0%,#0000 40%);min-height:100vh;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none;transition:all .2s}.app-container{flex-direction:column;min-height:100vh;display:flex;position:relative}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:20px 0 56px}.topbar{z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#070a10f0,#070a10b8);border-bottom:1px solid #94a3b81a;justify-content:space-between;align-items:center;min-height:68px;margin-bottom:34px;padding:10px 0;display:flex;position:sticky;top:0}.brand-lockup{cursor:pointer;align-items:center;gap:12px;display:inline-flex}.brand-mark{color:#dff9ff;background:linear-gradient(145deg,#0ea5e93d,#22c55e29);border:1px solid #7dd3fc38;border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;display:inline-flex;box-shadow:inset 0 1px #ffffff14}.brand-name{color:#f8fafc;font-size:1.08rem;font-weight:800}.topbar-action{padding:.55rem .9rem;font-size:.86rem}.neon-title{color:#f8fafc;letter-spacing:0;max-width:760px;margin-bottom:1rem;font-size:clamp(2.55rem,5vw,4.8rem);font-weight:800;line-height:.98}.sub-title{color:var(--text-soft);max-width:620px;margin:0 0 1.6rem;font-size:1.08rem;font-weight:400}.home-stack{flex-direction:column;gap:30px;display:flex}.hero-panel{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);align-items:center;gap:32px;min-height:420px;padding:26px 0 12px;display:grid}.hero-copy{min-width:0}.hero-kicker{color:#a7f3d0;text-transform:uppercase;letter-spacing:.04em;background:#10b9811a;border:1px solid #34d3992e;border-radius:8px;align-items:center;gap:8px;margin-bottom:20px;padding:7px 10px;font-size:.78rem;font-weight:700;display:inline-flex}.search-wrap{width:min(100%,520px);position:relative}.search-icon{color:#8cc7db;pointer-events:none;position:absolute;top:50%;left:15px;transform:translateY(-50%)}.search-input{min-height:52px;font-size:1rem;font-family:var(--font-sans);border-radius:8px;padding-left:2.75rem}.hero-visual{min-height:360px;position:relative}.hero-layer-image{opacity:.88;filter:drop-shadow(0 28px 60px #00000073);width:min(46vw,340px);max-width:100%;position:absolute;top:18px;right:34px}.command-surface{box-shadow:var(--surface-shadow);background:linear-gradient(145deg,#0b1220eb,#0f172ac7);border:1px solid #94a3b82e;border-radius:8px;padding:20px;position:absolute;bottom:0;left:0;right:18px}.command-top{gap:7px;margin-bottom:18px;display:flex}.command-top span{background:#38bdf8;border-radius:999px;width:9px;height:9px}.command-top span:nth-child(2){background:#22c55e}.command-top span:nth-child(3){background:#a78bfa}.command-line{color:#cbd5e1;font-family:var(--font-mono);border-bottom:1px solid #94a3b81f;padding-bottom:18px;font-size:.9rem}.command-line span{color:#67e8f9}.metric-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;display:grid}.metric-grid div{background:#0f172ab8;border:1px solid #94a3b81a;border-radius:8px;min-width:0;padding:12px}.metric-grid strong,.metric-grid small{display:block}.metric-grid strong{font-size:1.1rem}.metric-grid small{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(14px)saturate(150%);border:1px solid var(--border-card);box-shadow:var(--glow-shadow);border-radius:8px;padding:1.35rem;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.glass-card:hover{background:var(--bg-card-hover);border-color:var(--border-card-hover);box-shadow:var(--glow-shadow-hover);transform:translateY(-2px)}.tools-section{flex-direction:column;gap:16px;display:flex}.section-heading{justify-content:space-between;align-items:flex-end;gap:18px;display:flex}.section-heading h2{color:#f8fafc;font-size:1.35rem;line-height:1.2}.section-heading p{color:var(--text-muted);margin-top:4px;font-size:.94rem}.tools-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.tool-card{cursor:pointer;flex-direction:column;gap:1rem;min-height:230px;display:flex;position:relative;overflow:hidden}.tool-accent{background:var(--tool-color);width:3px;position:absolute;inset:0 auto 0 0}.tool-card-head{align-items:flex-start;gap:.75rem;display:flex}.tool-icon{width:42px;height:42px;color:var(--tool-color);background:color-mix(in srgb, var(--tool-color) 13%, transparent);border:1px solid color-mix(in srgb, var(--tool-color) 28%, transparent);border-radius:8px;flex:none;justify-content:center;align-items:center;display:inline-flex}.tool-card h3{color:#f8fafc;font-size:1.03rem;font-weight:750;line-height:1.25}.tool-card p{color:var(--text-muted);flex:1;font-size:.88rem;line-height:1.55}.tool-card-foot{border-top:1px solid #94a3b81a;justify-content:flex-end;padding-top:.75rem;display:flex}.tool-card-foot span{color:var(--tool-color);align-items:center;gap:.25rem;font-size:.8rem;font-weight:700;display:inline-flex}.empty-state{text-align:center;color:var(--text-muted);grid-column:1/-1;padding:3rem}.empty-state svg{color:var(--accent-red);margin:0 auto 1rem}.cyber-input{width:100%;color:var(--text-main);font-family:var(--font-mono);background:#020617a3;border:1px solid #94a3b82e;border-radius:8px;outline:none;padding:.75rem 1rem;font-size:.95rem;transition:all .2s}.cyber-input:focus{background:#0f172ae0;border-color:#38bdf8b3;box-shadow:0 0 0 3px #38bdf81f}.cyber-textarea{resize:vertical;min-height:120px}.btn-cyber{background:var(--primary-gradient);color:#fff;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 10px 28px #0ea5e933}.btn-cyber:hover{background:var(--btn-gradient-hover);transform:translateY(-1px);box-shadow:0 12px 32px #22c55e38}.btn-cyber:active{transform:translateY(1px)}.btn-cyber-secondary{color:var(--text-main);font-family:var(--font-sans);cursor:pointer;background:#0f172aa8;border:1px solid #94a3b829;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-cyber-secondary:hover{background:#1e293bd1;border-color:#7dd3fc4d}.tool-view{flex-direction:column;gap:1.35rem;display:flex}.tool-view-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.tool-view-title{color:var(--text-soft);align-items:center;gap:8px;font-size:.9rem;font-weight:700;display:inline-flex}.site-footer{border-top:1px solid #94a3b81f;flex-direction:column;align-items:center;gap:1rem;margin-top:4.5rem;padding-top:2rem;display:flex}.footer-links{color:var(--text-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:1.1rem;font-size:.85rem;display:flex}.footer-links button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:none}.footer-links button:hover{color:var(--text-main)}.copyright{color:#cbd5e157;font-family:var(--font-mono);text-align:center;margin-top:.35rem;font-size:.75rem}.code-container{position:relative}.copy-badge{cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;border-radius:4px;padding:4px 8px;font-size:.75rem;transition:all .2s;position:absolute;top:8px;right:8px}.copy-badge:hover{background:var(--accent-purple);color:#fff}.badge-client-side{color:#34d399;text-transform:uppercase;letter-spacing:.05em;background:#10b9811a;border:1px solid #10b98133;border-radius:9999px;align-items:center;gap:.35rem;margin-bottom:.75rem;padding:.25rem .6rem;font-size:.75rem;font-weight:600;display:inline-flex}.toast-msg{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;z-index:1000;background:#10b981e6;border:1px solid #10b9814d;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideIn;display:flex;position:fixed;bottom:2rem;right:2rem;box-shadow:0 4px 12px #0000004d}@keyframes slideIn{0%{opacity:0;transform:translateY(1rem)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-cyber)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}@media (width<=980px){.hero-panel{grid-template-columns:1fr;min-height:0}.hero-visual{min-height:310px}.hero-layer-image{right:8%}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.app-shell{width:min(100% - 24px,1180px);padding-top:12px}.topbar{min-height:60px;margin-bottom:18px}.brand-name{font-size:1rem}.neon-title{font-size:2.55rem}.hero-panel{gap:22px;padding-top:12px}.hero-kicker{font-size:.7rem;line-height:1.25}.sub-title{font-size:1rem}.hero-visual{min-height:280px}.hero-layer-image{width:250px;right:0}.command-surface{padding:16px;right:0}.metric-grid,.tools-grid{grid-template-columns:1fr}.tool-card{min-height:0}.tool-view-header{flex-direction:column;align-items:flex-start}}