*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow-x:hidden;background-color:#151515}.hero{width:100%;height:100vh;background-color:#151515;color:#e8e8e8;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:20px;overflow:hidden}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpName{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hero-top-left{display:flex;flex-direction:column;gap:2px}.hero-top-center{flex:1;display:flex;justify-content:flex-end;padding-right:60px}.hero-top-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.hero-subtext{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.04em;color:#bbb;max-width:360px;line-height:1.7;margin:0}.hero-name-svg{display:block;width:100%;height:clamp(80px,20vh,200px);will-change:transform,opacity}.hero-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;will-change:transform,opacity}.hero-meta{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;color:#ccc;text-transform:uppercase;line-height:1.6;white-space:nowrap}.status{display:flex;align-items:center;gap:5px}.ping-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ping-dot.online{background:#4cff72;box-shadow:0 0 6px #4cff7260;animation:pulse 2s infinite}.ping-dot.offline{background:#ff4c4c}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.ping-value{font-family:IBM Plex Mono,monospace;font-size:10px;color:#4cff72}.ping-offline{font-family:IBM Plex Mono,monospace;font-size:10px;color:#ff4c4c}.get-in-touch{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;padding-bottom:14px}.get-in-touch-label{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#ccc;display:flex;align-items:center;gap:5px;transition:color .2s;white-space:nowrap}.get-in-touch:hover .get-in-touch-label{color:#fff}.get-in-touch:hover .contact-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}.get-in-touch:hover .arrow-icon{transform:rotate(180deg)}.arrow-icon{transition:transform .25s ease;flex-shrink:0}.contact-dropdown{position:absolute;top:calc(100% - 6px);left:0;background:#111;border:1px solid #2a2a2a;padding:6px 0;min-width:150px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s;z-index:100}.contact-dropdown.visible{opacity:1;pointer-events:all;transform:translateY(0)}.contact-dropdown-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#888;text-decoration:none;transition:color .15s,background .15s}.contact-dropdown-item:hover{color:#fff;background:#1c1c1c}.tech-label{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;color:#ccc;text-transform:uppercase;margin-bottom:3px}.tech-item{font-family:IBM Plex Mono,monospace;font-size:11px;color:#aaa;text-align:right;line-height:1.7}.hero-bottom{display:flex;flex-direction:column;width:100%;gap:12px}@media(max-width:1024px)and (min-width:769px){.hero-subtext{max-width:280px}}@media(max-width:768px){.hero{padding:10px}.hero-subtext{font-size:10px;max-width:100%}.hero-bottom{gap:6px}.contact-dropdown{left:0;min-width:130px}}.projects{width:100%;background-color:#151515;padding:60px 20px 80px;box-sizing:border-box;overflow:hidden}.projects-label{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ccc;margin-bottom:24px;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.projects-label.visible{opacity:1;transform:translateY(0)}.projects-row{display:flex;gap:20px;margin-bottom:20px;align-items:flex-start}.row-2{display:block}.project-a{flex:1}.project-b{flex:1.6}.project-c{width:calc((100% - 20px) * 1.6 / 2.6)}.project-card{position:relative;cursor:pointer;background:#1a1a1a;opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1)}.project-card.visible{opacity:1}.project-img-wrap{overflow:hidden;width:100%}.project-img-wrap img{width:100%;aspect-ratio:4 / 3;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}.project-card:hover .project-img-wrap img{transform:scale(1.06)}.project-overlay{position:absolute;top:0;left:0;right:0;padding-bottom:0;aspect-ratio:4 / 3;background:#0a0a0a8c;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}.project-card:hover .project-overlay{opacity:1;transform:translateY(0)}.project-overlay-text{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;transform:translateY(4px);transition:transform .35s ease .05s}.project-card:hover .project-overlay-text{transform:translateY(0)}.project-meta{display:flex;justify-content:space-between;align-items:center;padding:10px 0 0}.project-name{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#ccc;transition:color .2s ease}.project-card:hover .project-name{color:#fff}.project-year{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.06em;color:#555}@media(max-width:1024px)and (min-width:769px){.projects{padding:40px 20px 60px}}@media(max-width:768px){.projects{padding:40px 10px 60px}.projects-row{flex-direction:column;gap:10px;margin-bottom:10px}.project-a,.project-b{flex:none;width:100%}.project-c{width:100%}.project-card{transform:none!important}.project-card:active .project-overlay{opacity:1;transform:translateY(0)}.project-card:active .project-overlay-text{transform:translateY(0)}}.about{width:100%;min-height:100vh;background-color:#151515;padding:100px 20px 120px;box-sizing:border-box;display:grid;grid-template-columns:1fr 1.4fr;grid-template-rows:auto auto;gap:80px 60px;align-items:start}.about-image-wrap{grid-column:1;grid-row:1;overflow:hidden;position:relative;opacity:0;transform:translateY(60px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);will-change:transform}.about-image-wrap.visible{opacity:1;transform:translateY(0)}.about-image{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:3 / 4;filter:grayscale(20%) contrast(1.05);transition:filter .6s ease}.about-image-wrap:hover .about-image{filter:grayscale(0%) contrast(1.1)}.about-content{grid-column:2;grid-row:1;padding-top:0;opacity:0;transform:translateY(60px);transition:opacity .9s cubic-bezier(.16,1,.3,1) .15s,transform .9s cubic-bezier(.16,1,.3,1) .15s}.about-content.visible{opacity:1;transform:translateY(0)}.about-heading{font-family:Bebas Neue,sans-serif;font-size:clamp(56px,6vw,88px);letter-spacing:.01em;color:#e8e8e8;margin:0 0 48px;line-height:.95;font-weight:400}.about-text{display:flex;flex-direction:column;gap:24px;margin-bottom:60px}.about-text p{font-family:IBM Plex Mono,monospace;font-size:13px;line-height:1.85;letter-spacing:.01em;color:#bbb;margin:0;max-width:560px}.about-socials{display:flex;gap:32px;flex-wrap:wrap}.about-social-link{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#888;transition:color .3s ease;position:relative}.social-dot{width:8px;height:8px;border-radius:50%;background:#f44;flex-shrink:0;transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s ease}.about-social-link:hover{color:#e8e8e8}.about-social-link:hover .social-dot{transform:scale(1.3);background:#4cff72}.about-form-wrap{grid-column:1 / -1;grid-row:2;display:flex;justify-content:flex-start;padding-left:0;opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1) .25s,transform .9s cubic-bezier(.16,1,.3,1) .25s}.about-form-wrap.visible{opacity:1;transform:translateY(0)}.about-form{display:flex;flex-direction:column;gap:20px;width:100%;max-width:480px}.about-input{background:transparent;border:none;border-bottom:1px solid #333;padding:12px 0;font-family:IBM Plex Mono,monospace;font-size:13px;color:#e8e8e8;outline:none;transition:border-color .3s ease}.about-input::placeholder{color:#555;letter-spacing:.05em}.about-input:focus{border-bottom-color:#888}.about-submit{align-self:flex-start;background:transparent;border:1px solid #444;padding:12px 32px;font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#e8e8e8;cursor:pointer;transition:all .3s ease;margin-top:12px}.about-submit:hover{background:#e8e8e8;color:#151515;border-color:#e8e8e8;transform:translate(4px)}@media(max-width:1024px)and (min-width:769px){.about{padding:80px 20px 100px;gap:60px 40px}.about-heading{font-size:clamp(48px,5vw,68px);margin-bottom:36px}.about-text{margin-bottom:48px}}@media(max-width:768px){.about{padding:60px 10px 80px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:40px}.about-image-wrap{grid-column:1;grid-row:1}.about-content{grid-column:1;grid-row:2;padding-top:0}.about-form-wrap{grid-column:1;grid-row:3}.about-heading{font-size:clamp(40px,10vw,56px);margin-bottom:32px}.about-text{margin-bottom:40px}.about-text p{font-size:12px;line-height:1.75}.about-socials{gap:24px}.about-form{max-width:100%}}.contact{width:100%;min-height:100vh;background-color:#151515;padding:120px 20px 80px;box-sizing:border-box;display:flex;align-items:center}.contact-inner{width:100%;max-width:1000px;margin:0 auto}.contact-label{font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#666;margin-bottom:40px;display:inline-block;opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}.contact-label.visible{opacity:1;transform:translateY(0)}.contact-name{font-family:Bebas Neue,sans-serif;font-size:clamp(48px,9vw,120px);letter-spacing:.01em;color:#e8e8e8;margin:0 0 32px;line-height:.95;font-weight:400;opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .1s,transform 1s cubic-bezier(.16,1,.3,1) .1s}.contact-name.visible{opacity:1;transform:translateY(0)}.contact-email{display:inline-block;font-family:IBM Plex Mono,monospace;font-size:clamp(16px,2.5vw,28px);letter-spacing:.02em;color:#888;text-decoration:none;margin:0 0 80px;position:relative;transition:color .4s ease;opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .2s,transform 1s cubic-bezier(.16,1,.3,1) .2s,color .4s ease}.contact-email.visible{opacity:1;transform:translateY(0)}.contact-email:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#4cff72;transition:width .5s cubic-bezier(.16,1,.3,1)}.contact-email:hover{color:#e8e8e8}.contact-email:hover:after{width:100%}.contact-socials{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:100px;opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .3s,transform 1s cubic-bezier(.16,1,.3,1) .3s}.contact-socials.visible{opacity:1;transform:translateY(0)}.social-link{display:flex;align-items:center;gap:12px;text-decoration:none;transition:transform .3s ease}.social-link:hover{transform:translate(4px)}.social-dot{width:10px;height:10px;border-radius:50%;background:#f44;flex-shrink:0;transition:all .4s cubic-bezier(.16,1,.3,1)}.social-link:hover .social-dot{background:#4cff72;transform:scale(1.2);box-shadow:0 0 12px #4cff7266}.social-icon{display:flex;align-items:center;color:#666;transition:color .3s ease}.social-link:hover .social-icon{color:#e8e8e8}.social-name{font-family:IBM Plex Mono,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#666;transition:color .3s ease}.social-link:hover .social-name{color:#e8e8e8}.contact-footer{display:flex;justify-content:space-between;align-items:center;padding-top:60px;border-top:1px solid #222;font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:.08em;color:#555}@media(max-width:1024px)and (min-width:769px){.contact{padding:100px 20px 60px}.contact-socials{margin-bottom:80px}}@media(max-width:768px){.contact{padding:80px 10px 60px}.contact-label{margin-bottom:32px}.contact-name{font-size:clamp(40px,12vw,80px);margin-bottom:24px}.contact-email{font-size:clamp(14px,4vw,20px);margin-bottom:60px}.contact-socials{flex-direction:column;gap:28px;margin-bottom:80px}.contact-footer{flex-direction:column;gap:12px;align-items:flex-start;padding-top:40px}}