:root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#151d2e;--border:#1e2d4a;--neon-green:#00ff88;--neon-cyan:#00e5ff;--neon-purple:#a855f7;--neon-red:#ff3366;--neon-orange:#ff8833;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--neon-cyan);border-radius:3px}
.font-orbitron{font-family:'Orbitron',sans-serif}
.font-mono{font-family:'JetBrains Mono',monospace}
/* Progress bar */
#progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan),var(--neon-purple));z-index:9999;transition:width .1s}
/* Sidebar */
#sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;background:rgba(10,14,26,.97);border-right:1px solid var(--border);z-index:100;overflow-y:auto;transform:translateX(-100%);transition:transform .3s}
#sidebar.open{transform:translateX(0)}
#sidebar::-webkit-scrollbar{width:3px}
#sidebar a{display:block;padding:8px 16px;color:var(--text-secondary);text-decoration:none;font-size:13px;border-left:2px solid transparent;transition:all .2s}
#sidebar a:hover,#sidebar a.active{color:var(--neon-cyan);border-left-color:var(--neon-cyan);background:rgba(0,229,255,.05)}
#sidebar .section-title{color:var(--neon-green);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;padding:16px 16px 6px;text-transform:uppercase}
#menu-toggle{position:fixed;top:16px;left:16px;z-index:101;background:var(--bg-card);border:1px solid var(--border);color:var(--neon-cyan);width:40px;height:40px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px}
/* Overlay */
#sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;display:none}
#sidebar-overlay.show{display:block}
/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent)}
.card-green::before{background:linear-gradient(90deg,transparent,var(--neon-green),transparent)}
.card-purple::before{background:linear-gradient(90deg,transparent,var(--neon-purple),transparent)}
.card-red::before{background:linear-gradient(90deg,transparent,var(--neon-red),transparent)}
.card-orange::before{background:linear-gradient(90deg,transparent,var(--neon-orange),transparent)}
/* Glow text */
.glow-green{color:var(--neon-green);text-shadow:0 0 20px rgba(0,255,136,.3)}
.glow-cyan{color:var(--neon-cyan);text-shadow:0 0 20px rgba(0,229,255,.3)}
.glow-purple{color:var(--neon-purple);text-shadow:0 0 20px rgba(168,85,247,.3)}
/* Code blocks */
.code-block{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:16px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;overflow-x:auto;color:#c9d1d9;margin:12px 0}
.code-block .comment{color:#8b949e}
.code-block .keyword{color:#ff7b72}
.code-block .string{color:#a5d6ff}
.code-block .function{color:#d2a8ff}
.code-block .number{color:#79c0ff}
/* Tables */
.data-table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
.data-table thead{background:rgba(0,229,255,.08)}
.data-table th{padding:12px 16px;text-align:left;color:var(--neon-cyan);font-weight:600;border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.data-table td{padding:10px 16px;border-bottom:1px solid rgba(30,45,74,.5);color:var(--text-primary)}
.data-table tr:hover td{background:rgba(0,229,255,.03)}
/* Tags */
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.5px}
.tag-green{background:rgba(0,255,136,.1);color:var(--neon-green);border:1px solid rgba(0,255,136,.2)}
.tag-cyan{background:rgba(0,229,255,.1);color:var(--neon-cyan);border:1px solid rgba(0,229,255,.2)}
.tag-purple{background:rgba(168,85,247,.1);color:var(--neon-purple);border:1px solid rgba(168,85,247,.2)}
.tag-red{background:rgba(255,51,102,.1);color:var(--neon-red);border:1px solid rgba(255,51,102,.2)}
.tag-orange{background:rgba(255,136,51,.1);color:var(--neon-orange);border:1px solid rgba(255,136,51,.2)}
/* Section headers */
.section-header{padding:60px 0 30px;position:relative}
.section-header h2{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:900;letter-spacing:1px}
.section-header .section-num{font-family:'Orbitron',sans-serif;font-size:72px;font-weight:900;position:absolute;right:0;top:40px;opacity:.05;color:var(--neon-cyan)}
/* Subsection */
h3.sub{font-size:20px;font-weight:700;margin:32px 0 16px;padding-left:16px;border-left:3px solid var(--neon-green);color:var(--text-primary)}
h4.sub2{font-size:16px;font-weight:600;margin:20px 0 10px;color:var(--neon-cyan)}
/* Interview Q&A */
.qa{margin-bottom:16px}
.qa .q{font-weight:600;color:var(--neon-cyan);margin-bottom:6px;display:flex;gap:8px;align-items:flex-start}
.qa .q::before{content:'Q';background:var(--neon-cyan);color:var(--bg-primary);font-size:11px;font-weight:700;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:4px;flex-shrink:0;margin-top:1px}
.qa .a{padding-left:30px;color:var(--text-secondary);line-height:1.7}
/* Grid noise overlay */
.noise{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Animated grid bg */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:60px 60px}
/* Alert box */
.alert{border-radius:8px;padding:16px 20px;margin:12px 0;font-size:14px;line-height:1.6}
.alert-info{background:rgba(0,229,255,.06);border-left:3px solid var(--neon-cyan)}
.alert-warn{background:rgba(255,136,51,.06);border-left:3px solid var(--neon-orange)}
.alert-tip{background:rgba(0,255,136,.06);border-left:3px solid var(--neon-green)}
.alert-danger{background:rgba(255,51,102,.06);border-left:3px solid var(--neon-red)}
/* Main content */
main{max-width:900px;margin:0 auto;padding:0 24px 80px}
/* Hero */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;flex-direction:column;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,229,255,.08) 0%,transparent 70%)}
/* Animate */
.reveal{opacity:0;transform:translateY(30px)}
@media(max-width:768px){main{padding:0 16px 60px}.section-header h2{font-size:20px}.section-header .section-num{font-size:48px}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
/* Custom styles for Landing Page Modules */
.module-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; width: 100%; max-width: 900px; z-index: 1;}
.module-card {background: rgba(21, 29, 46, 0.8); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: left; transition: all 0.3s; text-decoration: none;}
.module-card:hover {transform: translateY(-5px); border-color: var(--neon-cyan); background: rgba(0,229,255,0.05);}
.module-title {color: var(--neon-cyan); font-family: 'Orbitron', sans-serif; font-size: 18px; margin-bottom: 8px;}
.module-desc {color: var(--text-secondary); font-size: 13px; line-height: 1.5;}