@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg:#050505;--bg-2:#0a0f1d;--green:#0f6;--cyan:#06b6d4;--crimson:#ff2d55;--text:#e7ecf3;--muted:#94a0b2;--glass:#0a0f1d8c;--line:#ffffff14;--glow:#00ff6659;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--ease:cubic-bezier(.22, .8, .28, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(60vw 50vh at 8% 0,#00ff6612,#0000 70%),radial-gradient(50vw 50vh at 100% 60%,#06b6d414,#0000 70%);position:fixed;inset:0}::selection{color:#fff;background:#00ff6647}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}html{scrollbar-color:#0f66 var(--bg);scrollbar-width:thin}.container{width:90%;max-width:1200px;margin:0 auto;padding:0 15px}section{padding:96px 0;position:relative}#about,#portfolio{background:#0a0f1d99}.section-title{text-align:center;margin-bottom:56px}.section-title h2{letter-spacing:-.02em;margin-bottom:18px;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;display:inline-block;position:relative}.section-title h2:after{content:"";background:linear-gradient(90deg, var(--green), var(--cyan));width:0;height:3px;box-shadow:0 0 14px var(--glow);transition:width .9s var(--ease);border-radius:3px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.section-title h2.animated:after{width:72px}.section-title p{color:var(--muted);max-width:640px;margin:22px auto 0}header{z-index:1000;position:fixed;inset:0 0 auto}header:before{content:"";z-index:-1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);background:#0505058c;transition:background .3s,border-color .3s;position:absolute;inset:0}header.scrolled:before{background:#050505d9;border-bottom-color:#00ff662e}nav{justify-content:space-between;align-items:center;padding:16px 0;transition:padding .3s;display:flex}header.scrolled nav{padding:10px 0}.logo,.footer-logo{font-family:var(--mono);color:#fff;letter-spacing:-.01em;font-size:1.25rem;font-weight:700;text-decoration:none}.logo span,.footer-logo span{color:var(--green)}.nav-links{gap:6px;list-style:none;display:flex}.nav-links a{color:var(--muted);border-radius:8px;padding:8px 14px;font-size:.92rem;font-weight:500;text-decoration:none;transition:color .25s,background .25s;display:block;position:relative}.nav-links a:hover{color:#fff;background:#ffffff0d}.nav-links a.active{color:var(--green)}.nav-links a:after{content:"";background:var(--green);height:2px;box-shadow:0 0 10px var(--green);transition:transform .3s var(--ease);position:absolute;bottom:3px;left:14px;right:14px;transform:scaleX(0)}.nav-links a.active:after{transform:scaleX(1)}.hamburger{border-radius:8px;flex-direction:column;gap:5px;padding:10px;display:none}.hamburger span{width:24px;height:2px;transition:transform .3s var(--ease), opacity .2s ease;background:#fff;border-radius:2px}.hamburger.active span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.btn,.form-btn{background:var(--green);color:#03130a;border:1px solid var(--green);transition:transform .25s var(--ease), box-shadow .25s ease, background .25s ease, color .25s ease;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:13px 28px;font-size:.98rem;font-weight:600;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn:after,.form-btn:after{content:"";width:50%;height:100%;transition:left .6s var(--ease);background:linear-gradient(100deg,#0000,#ffffff73,#0000);position:absolute;top:0;left:-80%;transform:skew(-20deg)}.btn:hover,.form-btn:hover:not(:disabled){box-shadow:0 10px 30px -6px var(--glow), 0 0 0 4px #00ff661f;transform:translateY(-3px)}.btn:hover:after,.form-btn:hover:not(:disabled):after{left:130%}.btn-outline{color:var(--green);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#00ff660a}.btn-outline:hover{background:#00ff661f}#hero{align-items:center;min-height:100vh;padding:110px 0 70px;display:flex;overflow:hidden}#hero:before{content:"";background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 30%,#0000 75%);mask-image:radial-gradient(#000 30%,#0000 75%)}canvas#particles{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.hero-content{z-index:1;justify-content:space-between;align-items:center;gap:56px;display:flex;position:relative}.hero-text{animation:rise .9s var(--ease) both;flex:1.3}.hero-text h1{letter-spacing:-.03em;margin-bottom:18px;font-size:clamp(2.4rem,6vw,4rem);font-weight:800;line-height:1.08}.hero-text h1 span{color:#fff;text-shadow:0 0 28px #0f66;animation:1.1s step-end .5s both glitch;display:inline-block}.hero-text .typewrite{min-height:3.2rem;font-family:var(--mono);color:var(--green);margin-bottom:18px;font-size:clamp(1rem,2.3vw,1.3rem);font-weight:500;display:block}.typewrite:before{content:"> ";color:var(--cyan)}.wrap{border-right:.12em solid var(--green);padding-right:2px;animation:.75s step-end infinite blink}.hero-text p{max-width:56ch;color:var(--muted);margin-bottom:32px}.hero-btns{flex-wrap:wrap;gap:14px;display:flex}.hero-image{max-width:400px;animation:rise .9s var(--ease) .15s both;flex:1;position:relative}.hero-image img{width:100%;box-shadow:0 0 60px -12px var(--glow), 0 24px 50px #0009;border:1px solid #00ff6640;border-radius:16px;animation:5s ease-in-out infinite float;display:block}.hero-image:before,.hero-image:after{content:"";z-index:2;border:2px solid var(--green);pointer-events:none;width:32px;height:32px;position:absolute}.hero-image:before{border-bottom:0;border-right:0;border-top-left-radius:6px;top:-14px;left:-14px}.hero-image:after{border-top:0;border-left:0;border-bottom-right-radius:6px;bottom:-14px;right:-14px}.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease)}.reveal{transform:translateY(32px)}.reveal-left{transform:translate(-32px)}.reveal-right{transform:translate(32px)}.reveal.visible,.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none}.service-card,.portfolio-item,.about-skills,.contact-form{background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px}.about-content{grid-template-columns:1fr 1.15fr;align-items:center;gap:56px;display:grid}.about-image img{border:1px solid var(--line);width:100%;box-shadow:0 0 0 1px #00ff661f, 0 24px 60px -20px #000c, 0 0 60px -24px var(--glow);border-radius:16px;transition:box-shadow .4s,border-color .4s;display:block}.about-image img:hover{box-shadow:0 0 0 1px #00ff664d, 0 24px 60px -20px #000c, 0 0 70px -10px var(--glow);border-color:#0f66}.about-text h3{letter-spacing:-.01em;margin-bottom:14px;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700}.about-text p{color:var(--muted);max-width:62ch;margin-bottom:14px}.about-skills{margin-top:26px;padding:24px}.skill-item{margin-bottom:18px}.skill-item:last-child{margin-bottom:0}.skill-name{justify-content:space-between;gap:12px;margin-bottom:8px;font-size:.92rem;font-weight:500;display:flex}.skill-name span:last-child{font-family:var(--mono);color:var(--green);font-size:.85rem}.skill-bar{background:#ffffff12;border-radius:99px;height:6px;overflow:hidden}.skill-progress{background:linear-gradient(90deg, var(--green), var(--cyan));width:0;height:100%;box-shadow:0 0 12px var(--glow);transition:width 1.4s var(--ease);border-radius:99px}.service-card,.portfolio-item{opacity:0;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .4s var(--ease), box-shadow .35s ease, border-color .35s ease;position:relative}.service-card.visible,.portfolio-item.visible{opacity:1;animation:card-in .8s var(--ease) backwards}.service-card:hover,.portfolio-item:hover{--ty:-6px;border-color:#00ff6673;box-shadow:0 0 0 1px #00ff6626,0 18px 48px -12px #00ff6647}.services-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;display:grid}.service-card{text-align:left;padding:32px 28px}.service-card:before{content:"";border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), #00ff6621, transparent 60%);transition:opacity .3s;position:absolute;inset:0}.service-card:hover:before{opacity:1}.service-card>*{position:relative}.service-icon{width:56px;height:56px;color:var(--green);background:#00ff6614;border:1px solid #00ff6638;border-radius:12px;place-items:center;margin-bottom:20px;transition:box-shadow .3s,color .3s;display:grid}.service-card:hover .service-icon{color:var(--cyan);box-shadow:0 0 24px -4px var(--glow)}.service-card h3{margin-bottom:10px;font-size:1.15rem;font-weight:700}.service-card p{color:var(--muted);font-size:.95rem}.portfolio-filter{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px;display:flex}.filter-btn{border:1px solid var(--line);color:var(--muted);font-family:var(--mono);background:#ffffff08;border-radius:999px;padding:8px 20px;font-size:.85rem;transition:color .25s,border-color .25s,background .25s,box-shadow .25s}.filter-btn:hover{color:#fff;border-color:#0f66}.filter-btn.active{color:var(--green);border-color:var(--green);box-shadow:0 0 20px -6px var(--glow);background:#00ff6614}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;display:grid}.portfolio-item{background:var(--bg-2);overflow:hidden}.portfolio-img{object-fit:cover;filter:saturate(.9)contrast(1.05);width:100%;height:250px;transition:transform .6s var(--ease);display:block}.portfolio-item:hover .portfolio-img{transform:scale(1.06)}.portfolio-overlay{text-align:center;opacity:0;background:linear-gradient(160deg,#050505eb,#0a0f1df2);flex-direction:column;justify-content:center;align-items:center;padding:22px;transition:opacity .35s;display:flex;position:absolute;inset:0}.portfolio-item:hover .portfolio-overlay,.portfolio-item:focus-within .portfolio-overlay{opacity:1}.portfolio-overlay h3{color:#fff;margin-bottom:8px;font-size:1.2rem;font-weight:700}.portfolio-overlay p{color:var(--muted);margin-bottom:18px;font-size:.88rem}.portfolio-overlay h3,.portfolio-overlay p,.portfolio-links{transition:transform .45s var(--ease);transform:translateY(14px)}.portfolio-item:hover .portfolio-overlay h3,.portfolio-item:hover .portfolio-overlay p,.portfolio-item:hover .portfolio-links,.portfolio-item:focus-within .portfolio-overlay h3,.portfolio-item:focus-within .portfolio-overlay p,.portfolio-item:focus-within .portfolio-links{transform:none}.portfolio-links{gap:10px;display:flex}.portfolio-links a{width:40px;height:40px;color:var(--green);transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s var(--ease);background:#00ff6614;border:1px solid #00ff6659;border-radius:10px;place-items:center;text-decoration:none;display:grid}.portfolio-links a:hover{background:var(--green);color:#03130a;box-shadow:0 0 20px var(--glow);transform:translateY(-2px)}@media (hover:none){.portfolio-overlay{opacity:1;text-align:left;background:linear-gradient(#0000,#050505f5 65%);justify-content:flex-end;align-items:flex-start}.portfolio-overlay h3,.portfolio-overlay p,.portfolio-links{transform:none}.portfolio-overlay p{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:12px;display:-webkit-box;overflow:hidden}}.contact-content{grid-template-columns:1fr 1fr;align-items:start;gap:48px;display:grid}.contact-info h3{letter-spacing:-.01em;margin-bottom:14px;font-size:clamp(1.5rem,3vw,1.85rem);font-weight:700}.contact-info>p{color:var(--muted);max-width:56ch;margin-bottom:28px}.contact-item{align-items:center;gap:16px;margin-bottom:16px;display:flex}.contact-icon,.social-link{color:var(--green);transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s var(--ease);background:#00ff6614;border:1px solid #00ff6638;border-radius:12px;flex-shrink:0;place-items:center;display:grid}.contact-icon{width:46px;height:46px}.contact-item:hover .contact-icon,.social-link:hover{background:var(--green);color:#03130a;box-shadow:0 0 22px var(--glow)}.contact-text h4{font-family:var(--mono);color:var(--muted);font-size:.8rem;font-weight:500}.contact-text a,.contact-text span{color:var(--text);text-decoration:none;transition:color .25s}.contact-text a:hover{color:var(--cyan)}.contact-social{flex-wrap:wrap;gap:10px;margin-top:26px;display:flex}.social-link{width:44px;height:44px;text-decoration:none}.social-link:hover{transform:translateY(-3px)}.contact-form{padding:32px}.form-group{margin-bottom:16px}.form-control{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;width:100%;padding:13px 15px;font-size:.95rem;transition:border-color .25s,box-shadow .25s,background .25s}.form-control::placeholder{color:#6b7686}.form-control:focus{border-color:var(--green);background:#00ff6608;outline:none;box-shadow:0 0 0 3px #00ff661f}textarea.form-control{resize:vertical;min-height:140px}.form-btn{cursor:pointer;width:100%}.form-btn:disabled{opacity:.75;cursor:progress}.form-btn.success{background:var(--cyan);border-color:var(--cyan);color:#021317}.form-btn.error{background:var(--crimson);border-color:var(--crimson);color:#fff}.spin{animation:.9s linear infinite spin}footer{text-align:center;border-top:1px solid var(--line);background:#050505e6;padding:40px 0;position:relative}footer:before{content:"";background:linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);opacity:.55;height:1px;position:absolute;top:-1px;left:10%;right:10%}.footer-content{flex-direction:column;align-items:center;gap:16px;display:flex}.footer-links{flex-wrap:wrap;justify-content:center;gap:4px 8px;list-style:none;display:flex}.footer-links a{color:var(--muted);padding:4px 10px;font-size:.92rem;text-decoration:none;transition:color .25s;display:block}.footer-links a:hover{color:var(--green)}.copyright{font-family:var(--mono);color:#6b7686;font-size:.8rem}.back-to-top{right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:999;width:48px;height:48px;color:var(--green);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 22px -4px var(--glow);opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s var(--ease), visibility .3s, background .25s ease, color .25s ease, box-shadow .25s ease;background:#0a0f1db3;border:1px solid #00ff6673;border-radius:14px;place-items:center;display:grid;position:fixed;transform:translateY(16px)}.back-to-top.active{opacity:1;visibility:visible;transform:none}.back-to-top:hover{background:var(--green);color:#03130a;box-shadow:0 0 32px var(--glow)}@keyframes rise{0%{opacity:0;transform:translateY(24px)}}@keyframes card-in{0%{opacity:0;transform:translateY(28px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes blink{50%{border-color:#0000}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glitch{0%{text-shadow:3px 0 var(--crimson), -3px 0 var(--cyan);transform:translate(-3px)}20%{text-shadow:-3px 0 var(--crimson), 3px 0 var(--cyan);transform:translate(3px)skew(-6deg)}40%{text-shadow:2px 0 var(--cyan), -2px 0 var(--crimson);transform:translate(-1px)}60%{text-shadow:-2px 0 var(--cyan), 2px 0 var(--crimson);transform:translate(2px)skew(4deg)}80%{text-shadow:1px 0 var(--crimson), -1px 0 var(--cyan);transform:none}to{text-shadow:0 0 28px #0f66;transform:none}}@media (width<=900px){.hero-content{text-align:center;flex-direction:column-reverse;gap:44px}.hero-text p{margin:0 auto 32px}.hero-btns{justify-content:center}.hero-image{width:100%;max-width:300px}.about-content,.contact-content{grid-template-columns:1fr;gap:40px}}@media (width<=768px){section{padding:72px 0}.hamburger{display:flex}.nav-links{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-left:1px solid var(--line);visibility:hidden;width:min(260px,80vw);height:calc(100vh - 62px);transition:transform .35s var(--ease), visibility .35s;background:#050505eb;flex-direction:column;gap:4px;padding:24px 18px;position:fixed;top:62px;right:0;transform:translate(105%)}.nav-links.active{visibility:visible;transform:none}.contact-form{padding:22px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
