/* ═══════════ TOKENS ═══════════ */ :root{ --bg0:#05080b; --bg1:#0a1118; --panel:#0d151d; --panel2:#101a23; --line:#1b2a36; --line2:#24384a; --txt:#d9e6ee; --dim:#8aa0b2; --faint:#5b7285; --green:#3df58c; --green-glow:rgba(61,245,140,.35); --amber:#ffb454; --cyan:#5cd6ff; --red:#ff5c57; --mono:'IBM Plex Mono',monospace; --disp:'Space Grotesk',sans-serif; --body:'IBM Plex Sans',sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg0);color:var(--txt);font-family:var(--body); line-height:1.6;overflow-x:hidden; background-image: radial-gradient(900px 500px at 85% -5%, rgba(61,245,140,.06), transparent 60%), radial-gradient(700px 500px at -10% 40%, rgba(92,214,255,.05), transparent 60%), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:auto,auto,48px 48px,48px 48px; } ::selection{background:var(--green);color:#04140b} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--bg0)} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--green)} .scanlines{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.5; background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);} /* ═══════════ TICKER ═══════════ */ .ticker{background:var(--green);color:#04140b;overflow:hidden;white-space:nowrap; font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.14em;padding:.4rem 0} .ticker-track{display:inline-flex;gap:1.6rem;animation:tick 32s linear infinite;padding-left:1.6rem} .ticker i{font-style:normal;opacity:.55} @keyframes tick{to{transform:translateX(-50%)}} /* ═══════════ NAV ═══════════ */ .nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.85rem 5vw;border-bottom:1px solid var(--line); background:rgba(5,8,11,.7);backdrop-filter:blur(10px);transition:background .3s} .nav.scrolled{background:rgba(5,8,11,.94)} .logo{font-family:var(--mono);font-size:.85rem;text-decoration:none;color:var(--txt)} .logo-prompt{color:var(--green)} .logo-colon{color:var(--cyan)} .logo-name{border-right:2px solid var(--green);padding-right:3px;animation:blink 1.1s steps(1) infinite} @keyframes blink{50%{border-color:transparent}} .nav-links{display:flex;gap:1.6rem} .nav-links a{color:var(--dim);text-decoration:none;font-family:var(--mono);font-size:.78rem; letter-spacing:.08em;text-transform:uppercase;transition:color .25s} .nav-links a::before{content:'> ';color:var(--green);opacity:0;transition:opacity .25s} .nav-links a:hover,.nav-links a.active{color:var(--green)} .nav-links a:hover::before,.nav-links a.active::before{opacity:1} /* ═══════════ BUTTONS ═══════════ */ .btn{display:inline-block;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em; text-decoration:none;padding:.85rem 1.4rem;border:1px solid var(--green);color:var(--green); transition:transform .2s,background .2s,color .2s,box-shadow .2s;text-transform:uppercase} .btn:hover{background:var(--green);color:#04140b;transform:translateY(-2px); box-shadow:0 10px 30px -8px var(--green-glow)} .btn-primary{background:var(--green);color:#04140b} .btn-primary:hover{background:#5cffa4} .btn-ghost{border-color:var(--line2);color:var(--dim)} .btn-ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan);box-shadow:none} .btn-small{padding:.5rem .9rem;font-size:.72rem} /* ═══════════ HERO ═══════════ */ .hero{padding:7vh 5vw 9vh;min-height:82vh;display:flex;align-items:center} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;width:100%;max-width:1250px;margin:0 auto} .eyebrow{font-family:var(--mono);color:var(--amber);font-size:.78rem;letter-spacing:.16em;margin-bottom:1.2rem} .display{font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.04;letter-spacing:-.02em} .accent-green{color:var(--green);text-shadow:0 0 34px var(--green-glow)} .lede{color:var(--dim);font-size:1.08rem;max-width:34rem;margin:1.5rem 0 2rem} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap} .hero-stats{display:flex;gap:2.4rem;list-style:none;margin-top:3rem;flex-wrap:wrap} .hero-stats li{display:flex;flex-direction:column;border-left:2px solid var(--line2);padding-left:.9rem;transition:border-color .3s} .hero-stats li:hover{border-color:var(--green)} .hero-stats b{font-family:var(--disp);font-size:1.7rem} .hero-stats span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} /* ═══════════ TERMINAL ═══════════ */ .term{background:var(--panel);border:1px solid var(--line2);border-radius:10px;overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 60px -30px var(--green-glow); font-family:var(--mono);font-size:.86rem} .term-bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .9rem;background:var(--panel2);border-bottom:1px solid var(--line)} .dot{width:11px;height:11px;border-radius:50%} .dot.r{background:var(--red)}.dot.y{background:var(--amber)}.dot.g{background:var(--green)} .term-title{margin-left:.6rem;color:var(--faint);font-size:.72rem;letter-spacing:.06em} .term-body{padding:1.1rem 1.2rem;min-height:280px;line-height:1.75} .tl-cmd{color:var(--txt)} .tl-cmd::before{content:'$ ';color:var(--green)} .tl-out{color:var(--dim)} .tl-ok{color:var(--green)} .tl-warn{color:var(--amber)} .tl-hi{color:var(--cyan)} .cursor{display:inline-block;width:.6em;height:1.1em;background:var(--green);vertical-align:text-bottom;animation:blink 1s steps(1) infinite} /* ═══════════ SECTIONS ═══════════ */ .section{padding:9vh 5vw;max-width:1250px;margin:0 auto;scroll-margin-top:80px} .sec-head{margin-bottom:3.2rem} .sec-num{font-family:var(--mono);color:var(--amber);font-size:.8rem;letter-spacing:.2em;margin-bottom:.6rem} .sec-title{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,4vw,3rem)} .sec-sub{color:var(--dim);margin-top:.8rem;max-width:44rem} .sec-sub b{color:var(--green)} .sec-sub code,code{font-family:var(--mono);color:var(--green);background:rgba(61,245,140,.08);padding:.1em .35em;border-radius:4px;font-size:.9em} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* ═══════════ ETHICS ═══════════ */ .ethics-board{display:grid;grid-template-columns:.9fr 1.4fr;gap:2rem} .ethics-flag{border:1px solid var(--amber);background:rgba(255,180,84,.06);padding:1.8rem;border-radius:10px;align-self:start} .warn-badge{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em; background:var(--amber);color:#1a1206;padding:.3rem .7rem;border-radius:4px;margin-bottom:1rem;font-weight:700} .ethics-flag p{color:var(--dim);font-size:.95rem} .ethics-flag b{color:var(--amber)} .ethics-rules{list-style:none;display:flex;flex-direction:column;gap:1rem} .ethics-rules li{display:flex;gap:1.3rem;background:var(--panel);border:1px solid var(--line); border-left:3px solid var(--green);padding:1.3rem 1.5rem;border-radius:8px;transition:transform .25s,border-color .25s} .ethics-rules li:hover{transform:translateX(8px);border-left-color:var(--cyan)} .rule-num{font-family:var(--disp);font-size:1.9rem;font-weight:700;color:var(--line2);transition:color .25s} .ethics-rules li:hover .rule-num{color:var(--green)} .ethics-rules h3{font-family:var(--disp);font-size:1.05rem;margin-bottom:.25rem} .ethics-rules p{color:var(--dim);font-size:.9rem} /* ═══════════ ROADMAP ═══════════ */ .phases{position:relative;display:flex;flex-direction:column;gap:2.2rem} .phases::before{content:'';position:absolute;left:27px;top:12px;bottom:12px;width:1px; background:linear-gradient(var(--green),var(--cyan));opacity:.35} .phase{display:grid;grid-template-columns:56px 1fr;gap:1.6rem} .phase-rail{display:flex;justify-content:center} .phase-node{width:56px;height:56px;border-radius:50%;background:var(--bg0);border:1px solid var(--line2); display:grid;place-items:center;font-family:var(--mono);color:var(--green);font-weight:700;position:relative;z-index:1;transition:.3s} .phase:hover .phase-node{border-color:var(--green);box-shadow:0 0 24px -4px var(--green-glow);transform:scale(1.08)} .phase-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.8rem; display:grid;grid-template-columns:1fr 220px;gap:1.6rem;transition:border-color .3s,transform .3s} .phase:hover .phase-card{border-color:var(--line2);transform:translateY(-4px)} .phase-card h3{font-family:var(--disp);font-size:1.4rem;margin:.6rem 0 .5rem} .phase-card>p{color:var(--dim);font-size:.94rem;grid-column:1} .phase-img{grid-column:2;grid-row:1/span 5;width:100%;height:100%;min-height:150px;object-fit:cover; border-radius:8px;border:1px solid var(--line2);filter:saturate(.6);transition:filter .4s} .phase:hover .phase-img{filter:saturate(1)} .phase-meta{display:flex;gap:.6rem;flex-wrap:wrap;grid-column:1} .chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--green);color:var(--green);padding:.25rem .6rem;border-radius:3px} .chip-dim{border-color:var(--line2);color:var(--faint)} .skills{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;grid-column:1} .skills li{font-family:var(--mono);font-size:.72rem;background:var(--panel2);border:1px solid var(--line); padding:.3rem .65rem;border-radius:3px;color:var(--dim);transition:.25s} .skills li:hover{color:var(--cyan);border-color:var(--cyan)} .res{grid-column:1;font-size:.85rem} .res a{color:var(--amber);text-decoration:none;border-bottom:1px dashed var(--amber)} .res a:hover{color:var(--green);border-color:var(--green)} /* ═══════════ TOPICS ═══════════ */ .topics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; grid-template-areas:"net net web crypto" "net net osint blue" "linux ctf ctf blue"} .topic{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.6rem; position:relative;overflow:hidden;transition:transform .3s,border-color .3s} .topic::after{content:'';position:absolute;inset:0;background:radial-gradient(400px 160px at var(--mx,50%) var(--my,0%),rgba(61,245,140,.08),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none} .topic:hover{transform:translateY(-5px);border-color:var(--green)} .topic:hover::after{opacity:1} .topic h3{font-family:var(--disp);font-size:1.25rem;margin-bottom:.5rem} .topic p{color:var(--dim);font-size:.9rem} .topic-tag{position:absolute;top:1.2rem;right:1.2rem;font-family:var(--mono);font-size:.6rem; letter-spacing:.18em;color:var(--faint);border:1px solid var(--line2);padding:.2rem .5rem;border-radius:3px} .t-net{grid-area:net;background:linear-gradient(160deg,var(--panel) 60%,rgba(61,245,140,.07))} .t-net h3{font-size:1.7rem} .t-linux{grid-area:linux}.t-web{grid-area:web}.t-crypto{grid-area:crypto} .t-osint{grid-area:osint}.t-blue{grid-area:blue;background:linear-gradient(200deg,var(--panel) 55%,rgba(92,214,255,.08))} .t-ctf{grid-area:ctf;border-color:var(--line2)} .t-ctf h3{color:var(--amber)} /* ═══════════ TOOLS ═══════════ */ .tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem} .tool{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.5rem; cursor:pointer;position:relative;overflow:hidden;transition:.3s} .tool:hover,.tool:focus-visible{transform:translateY(-5px) rotate(-.4deg);border-color:var(--cyan);outline:none} .tool-cat{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--cyan)} .tool h3{font-family:var(--disp);font-size:1.15rem;margin:.5rem 0 .3rem} .tool p{color:var(--dim);font-size:.85rem;margin-bottom:1rem} .diff{display:flex;gap:4px} .diff i{width:18px;height:5px;background:var(--line2);border-radius:2px} .diff i.on{background:var(--green);box-shadow:0 0 8px var(--green-glow)} .tool-hint{position:absolute;right:1.2rem;bottom:1.1rem;font-family:var(--mono);font-size:.62rem; letter-spacing:.14em;color:var(--cyan);opacity:0;transform:translateX(8px);transition:.3s} .tool:hover .tool-hint,.tool:focus-visible .tool-hint{opacity:1;transform:none} /* ═══════════ TOOL CODE MODAL ═══════════ */ .modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem; visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s} .modal.open{visibility:visible;opacity:1} .modal-backdrop{position:absolute;inset:0;background:rgba(3,6,9,.82);backdrop-filter:blur(4px)} .modal-panel{position:relative;width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--line2);border-radius:12px; box-shadow:0 40px 100px -20px rgba(0,0,0,.85),0 0 80px -30px var(--green-glow); transform:translateY(24px) scale(.97);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)} .modal.open .modal-panel{transform:none} .modal-x{margin-left:auto;background:none;border:1px solid var(--line2);color:var(--dim); width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:.8rem;transition:.25s} .modal-x:hover{border-color:var(--red);color:var(--red);transform:rotate(90deg)} .modal-head{padding:1.4rem 1.6rem .4rem} .modal-head h3{font-family:var(--disp);font-size:1.7rem;margin:.4rem 0 .3rem} .modal-head p{color:var(--dim);font-size:.92rem} .modal-legal{margin:1rem 1.6rem 0;padding:.7rem 1rem;border:1px solid var(--amber); border-radius:8px;background:rgba(255,180,84,.07);color:var(--amber); font-family:var(--mono);font-size:.74rem;letter-spacing:.04em} .modal-code-wrap{position:relative;margin:1rem 1.6rem 0;flex:1;min-height:0} .copy-btn{position:absolute;top:.7rem;right:.7rem;z-index:2;background:var(--panel2); border:1px solid var(--line2);color:var(--green);font-family:var(--mono);font-size:.68rem; letter-spacing:.1em;padding:.4rem .8rem;border-radius:6px;cursor:pointer;transition:.25s} .copy-btn:hover{border-color:var(--green);box-shadow:0 0 16px -4px var(--green-glow)} .copy-btn.copied{background:var(--green);color:#04140b} .modal-code{background:#070d12;border:1px solid var(--line);border-radius:10px; padding:1.3rem 1.4rem;overflow:auto;max-height:46vh; font-family:var(--mono);font-size:.82rem;line-height:1.75;color:var(--txt);white-space:pre;tab-size:2} .modal-foot{padding:.9rem 1.6rem 1.2rem;font-family:var(--mono);font-size:.7rem;color:var(--faint)} .dim{color:var(--faint)} /* ═══════════ LAB ═══════════ */ .lab-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:start} .lab-body{min-height:340px;max-height:340px;overflow-y:auto} .lab-input{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem;border-top:1px solid var(--line);background:var(--panel2)} .prompt{color:var(--green);white-space:nowrap;font-size:.82rem} #labCmd{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-family:var(--mono);font-size:.86rem;caret-color:var(--green)} .lab-notes{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.8rem} .lab-notes h3{font-family:var(--disp);margin-bottom:1rem} .lab-notes ol{padding-left:1.2rem;display:flex;flex-direction:column;gap:.7rem;color:var(--dim);font-size:.92rem} .lab-notes b{color:var(--txt)} .lab-tip{margin-top:1.5rem;border:1px dashed var(--line2);border-radius:8px;padding:1rem;font-size:.85rem;color:var(--dim)} .lab-tip span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--amber)} /* ═══════════ FAQ + GLOSSARY ═══════════ */ .faq-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:start} .faq-item{border:1px solid var(--line);border-radius:8px;margin-bottom:.8rem;background:var(--panel);overflow:hidden;transition:border-color .3s} .faq-item.open{border-color:var(--green)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:none; color:var(--txt);font-family:var(--disp);font-size:1rem;text-align:left;padding:1.1rem 1.3rem;cursor:pointer} .faq-q:hover{color:var(--green)} .faq-x{font-family:var(--mono);color:var(--green);transition:transform .3s;font-size:1.2rem} .faq-item.open .faq-x{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq-a p{padding:0 1.3rem 1.2rem;color:var(--dim);font-size:.92rem} .glossary{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.8rem} .glossary h3{font-family:var(--mono);color:var(--faint);font-weight:400;font-size:.8rem;letter-spacing:.14em;margin-bottom:1.3rem} .glossary dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem} .glossary dt{font-family:var(--mono);color:var(--cyan);font-size:.85rem} .glossary dd{color:var(--dim);font-size:.85rem} /* ═══════════ FOOTER ═══════════ */ .footer{border-top:1px solid var(--line);padding:4rem 5vw 3rem;margin-top:6vh;overflow:hidden} .footer-word{font-size:clamp(3rem,12vw,9rem);line-height:1;color:transparent; -webkit-text-stroke:1px var(--line2);text-align:center;user-select:none;transition:.6s} .footer-word:hover{-webkit-text-stroke:1px var(--green);text-shadow:0 0 40px var(--green-glow)} .footer-row{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:2.5rem;font-size:.85rem;color:var(--dim)} /* ═══════════ RESPONSIVE ═══════════ */ @media(max-width:1000px){ .hero-grid,.ethics-board,.lab-grid,.faq-grid{grid-template-columns:1fr} .phase-card{grid-template-columns:1fr} .phase-img{grid-column:1;grid-row:auto;max-height:180px} .topics-grid{grid-template-columns:1fr 1fr;grid-template-areas:"net net" "web crypto" "osint linux" "blue blue" "ctf ctf"} } @media(max-width:640px){ .nav-links{display:none} .topics-grid{grid-template-columns:1fr;grid-template-areas:"net" "web" "crypto" "osint" "linux" "blue" "ctf"} .phase{grid-template-columns:1fr} .phase-rail,.phases::before{display:none} .hero{padding-top:4vh} .modal-code{max-height:52vh} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }