.projects-page{min-height:100vh;background-color:var(--bg);color:var(--fg)}.projects-hero{padding:8vh 2em 4em;text-align:center}.projects-container{max-width:1400px;margin:0 auto}.projects-title{font-size:clamp(3rem,8vw,6rem);font-weight:900;color:var(--fg);line-height:1.1;letter-spacing:.1em}.projects-content{padding:0 2em 4em}.project-featured{margin-bottom:6em}.project-link{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.project-link:hover{transform:translateY(-8px)}.project-link:hover .project-visual{box-shadow:0 30px 60px #0003}.project-visual{position:relative;background:var(--bg);border-radius:16px;overflow:hidden;box-shadow:0 20px 40px #0000001a}.browser-window{background:#fff;border-radius:12px;box-shadow:0 20px 40px #0000004d;overflow:hidden;position:relative}.browser-header{background:#2d2d2d;padding:12px 16px;display:flex;align-items:center;gap:12px}.browser-controls{display:flex;gap:8px}.control{width:12px;height:12px;border-radius:50%}.control.close{background:#ff5f57}.control.minimize{background:#ffbd2e}.control.maximize{background:#28ca42}.browser-tabs{display:flex;gap:4px;flex:1}.tab{background:#3d3d3d;color:#fff;padding:6px 12px;border-radius:6px 6px 0 0;font-size:12px;min-width:20px;text-align:center}.tab.active{background:#fff;color:#2d2d2d}.tab.new{background:#3d3d3d;color:#fff;font-weight:700}.browser-url{background:#3d3d3d;color:#888;padding:6px 12px;border-radius:6px;font-size:12px;flex:1;margin:0 12px}.browser-actions{display:flex;gap:8px}.profile-icon,.menu-icon{width:20px;height:20px;background:#555;border-radius:4px}.browser-content{padding:0;min-height:300px;overflow:hidden}.project-screenshot{width:100%;height:auto;display:block;border-radius:0 0 12px 12px}.project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3em}.project-logo{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;color:#2d2d2d}.hand-icon{font-size:2rem}.project-actions{display:flex;align-items:center;gap:16px}.docs-btn{background:#28ca42;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:600;cursor:pointer}.github-icon{font-size:1.5rem}.project-hero{text-align:center}.project-hero h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:#2d2d2d;margin-bottom:1em;line-height:1.2}.highlight-blue{color:#3b82f6}.highlight-green{color:#28ca42;text-decoration:underline;text-decoration-color:#28ca42}.project-hero p{font-size:1.2rem;color:#666;margin-bottom:2em;max-width:600px;margin-left:auto;margin-right:auto}.cta-btn{background:#28ca42;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer}.project-details{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000f2);padding:2.5em 2em 2em;color:#fff;display:flex;flex-direction:column;gap:1.2em;transform:translateY(100%);transition:transform .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.project-link:hover .project-details{transform:translateY(0)}.project-meta{display:flex;align-items:center;gap:1em;margin-bottom:1em}.project-year{font-size:1.2rem;font-weight:700;color:#28ca42}.tech-tags{display:flex;flex-wrap:wrap;gap:8px}.tech-tags span{background:#fff3;color:#fff;padding:4px 12px;border-radius:20px;font-size:.9rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.project-name{font-size:2.2rem;font-weight:800;color:#fff;margin-bottom:.3em;text-shadow:0 2px 4px rgba(0,0,0,.4);letter-spacing:.02em}.project-description{font-size:.95rem;color:#fff;opacity:.9;line-height:1.6;max-width:500px;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.3);margin-top:.5em}.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:4em}.project-item .project-link{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.project-item .project-link:hover{transform:translateY(-5px)}.project-item .project-link:hover .project-visual{box-shadow:0 20px 40px #00000026}.project-item{position:relative}.project-item .project-visual{position:relative;background:var(--bg);border-radius:16px;overflow:hidden;box-shadow:0 20px 40px #0000001a}.project-item .project-details{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000e6);padding:2em;color:#fff;display:flex;flex-direction:column;gap:1em;transform:translateY(100%);transition:transform .3s ease}.project-item .project-link:hover .project-details{transform:translateY(0)}.login-form{max-width:400px;margin:0 auto;padding:2em;border:1px solid #e5e5e5;border-radius:8px;background:#fff}.login-form h3{text-align:center;font-size:1.5rem;font-weight:700;color:#2d2d2d;margin-bottom:2em}.form-group{margin-bottom:1.5em}.form-group label{display:block;font-weight:600;color:#2d2d2d;margin-bottom:.5em}.form-group input{width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:1rem}.login-btn{width:100%;background:#3b82f6;color:#fff;border:none;padding:12px;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer}.browser-stack{position:relative;height:300px}.browser-stack .browser-window{position:absolute;transform:rotate(-2deg)}.browser-stack .window-1{top:0;right:0;z-index:3;transform:rotate(2deg)}.browser-stack .window-2{top:20px;left:20px;z-index:2;transform:rotate(-1deg)}.browser-stack .window-3{top:40px;left:40px;z-index:1;transform:rotate(1deg)}.map-interface,.dashboard,.tracking-list{padding:1em;text-align:center}.map-placeholder{font-size:3rem;margin-bottom:1em}.bus-routes,.dashboard-item,.tracking-item{background:#f5f5f5;padding:8px 12px;margin:4px 0;border-radius:4px;font-size:.9rem;color:#666}.projects-footer{margin-top:6em;padding:2em;text-align:center;border-top:1px solid var(--fg)}.footer-content p{opacity:.6;font-size:.9rem}@media (max-width: 768px){.projects-hero{padding:6vh 1em 2em}.projects-content{padding:0 1em 2em}.projects-grid{grid-template-columns:1fr;gap:3em}.project-featured{margin-bottom:4em}.browser-content{padding:1em}.project-hero h2{font-size:1.8rem}.project-hero p{font-size:1rem}.project-name{font-size:2rem}.browser-stack{height:250px}.browser-stack .window-2,.browser-stack .window-3{display:none}}@media (max-width: 480px){.project-hero h2,.project-name{font-size:1.5rem}.tech-tags{gap:4px}.tech-tags span{font-size:.8rem;padding:3px 8px}}