.header{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);height:88px;transition:background-color .3s,box-shadow .3s;position:fixed;inset:0 0 auto}.header--scrolled{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.header--scrolled .logo__part-img{transform:translate(-100%)}.header .container{justify-content:space-between}.header__menu-toggle{width:40px;height:40px;color:rgb(var(--color-text-primary));cursor:pointer;transition:color var(--transition-duration) ease;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;padding:0;display:none}.header__menu-toggle:hover{color:rgb(var(--color-text-secondary))}.header__menu-toggle svg{stroke-width:1.8px;width:24px;height:24px}.logo{flex:none}.logo__part{margin-block-end:5px;margin-inline-start:-10px;overflow:hidden}.logo__part-img{transition:transform var(--transition-duration) ease;align-self:flex-end}@media (max-width:768px){.logo__part-img{transform:translate(-100%)}.header{z-index:1001;height:68px;transition:background-color .6s .2s}.header--open{background-color:rgb(var(--color-bg-primary));transition:background-color var(--transition-duration) ease}.header .logo{z-index:102;position:relative}.header .logo img{max-width:100%;height:auto}.header .navigation-wrapper{z-index:101;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-duration) ease,visibility var(--transition-duration) ease,transform var(--transition-duration) ease;flex-direction:column;justify-content:flex-start;padding:24px 20px;position:fixed;inset:68px 0 0;overflow-y:auto;transform:translate(100%)}.header--open .navigation-wrapper{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0)}.header .navigation{flex-direction:column;align-items:stretch;gap:8px;width:100%;display:flex}.header .navigation__link{justify-content:space-between;align-items:center;width:100%;padding:16px 0;font-size:18px;display:flex}.header__menu-toggle{z-index:102;flex-shrink:0;display:flex;position:relative}body.menu-open{overflow:hidden}}@media (prefers-reduced-motion:reduce){.header,.header__menu-toggle{transition:none}}
.navigation-desktop-wrapper{flex:1;justify-content:flex-end;min-width:0;display:flex}.navigation-desktop{align-items:center;gap:32px;display:flex}.navigation-mobile-wrapper{display:none}.navigation__link{align-items:center;display:flex}@media (max-width:768px){.navigation-desktop-wrapper{display:none}.navigation-mobile-wrapper{z-index:99;visibility:hidden;pointer-events:none;background:rgb(var(--color-bg-primary));border-top:1px solid rgb(var(--color-border-primary));will-change:height,transform,opacity;height:0;display:block;position:absolute;top:100%;left:0;right:0;overflow:hidden}.navigation-mobile{flex-direction:column;align-items:stretch;gap:0;width:100%;display:flex}.navigation-mobile .navigation__link{border-bottom:1px solid rgb(var(--color-border-primary));justify-content:space-between;align-items:center;width:100%;padding:0;display:flex}.navigation-mobile .navigation__link a{width:100%;height:100%;padding:32px 28px;font-size:16px}.navigation-mobile__cta{border-bottom:0;padding:32px 28px}.navigation-mobile__cta a{justify-self:flex-end;width:auto}}@media (prefers-reduced-motion:reduce){.navigation-mobile-wrapper{will-change:auto}}
.pjnESG_button{isolation:isolate;background:var(--button-gradient);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:1px;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.pjnESG_button__wrapper{z-index:0;border-radius:inherit;background:rgb(var(--color-bg-primary));justify-content:center;align-items:center;min-height:40px;padding-inline:24px;display:inline-flex;position:relative}.pjnESG_button__spotlight{z-index:-1;background:var(--button-gradient);opacity:1;pointer-events:none;will-change:transform;border-radius:50%;align-items:center;gap:12px;width:10px;height:10px;display:flex;position:absolute;top:50%;left:0;transform:translateY(-50%)scale(0)}.pjnESG_button__text{z-index:1;color:rgb(var(--color-text-primary));gap:12px;font-size:12px;font-weight:400;transition:color .3s;position:relative}.pjnESG_button:hover .pjnESG_button__text{color:rgb(var(--color-text-contrast))}.pjnESG_button:focus-visible{outline:1px solid rgb(var(--color-border-primary));outline-offset:5px}@media (prefers-reduced-motion:reduce){.pjnESG_button__text{transition:none}}.pjnESG_button__spotlight{z-index:1}.pjnESG_button__wrapper{z-index:auto}.pjnESG_button__text{z-index:2}
.XH3ggG_link{color:rgb(var(--color-text-primary));text-shadow:0 1px 2px #1a1a1a;align-items:center;font-size:12px;font-weight:400;line-height:1.5;text-decoration:none;display:inline-flex}.XH3ggG_link:hover,.XH3ggG_link:focus-visible{color:#f5f8fc}.XH3ggG_link:focus-visible{outline:1px solid rgb(var(--color-border-primary));outline-offset:5px;border-radius:2px}.XH3ggG_content{grid-template-rows:1fr;display:grid;position:relative;overflow:hidden}.XH3ggG_text{grid-area:1/1;transition:transform .45s cubic-bezier(.085,.4,.17,.995),color .25s;display:block}.XH3ggG_text:nth-child(2){transform:translateY(100%)}.XH3ggG_link:hover .XH3ggG_text:first-child,.XH3ggG_link:focus-visible .XH3ggG_text:first-child{transform:translateY(-100%)}.XH3ggG_link:hover .XH3ggG_text:nth-child(2),.XH3ggG_link:focus-visible .XH3ggG_text:nth-child(2){transform:translateY(0)}@media (prefers-reduced-motion:reduce){.XH3ggG_text{transition:none}}
.banner{isolation:isolate;aspect-ratio:16/9;z-index:100;background-image:url(/images/main-bg.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;position:relative}.banner:after{z-index:-1;background:linear-gradient(0deg, rgb(var(--color-bg-primary)/1) 0%, rgb(var(--color-bg-primary)/0) 100%);content:"";pointer-events:none;position:absolute;inset:0}.banner--scrolled{z-index:initial}.banner__container{width:100%;height:100%;min-height:inherit;flex-direction:column;justify-content:space-between;padding-block:120px;position:relative}.banner__intro{color:rgba(var(--color-text-accent)/.8);letter-spacing:2px;font-size:11px;line-height:1.7}.banner__intro p{color:rgb(var(--color-text-primary));letter-spacing:2px;margin:0;font-size:11px}.banner__text-name{text-align:center;white-space:nowrap;width:100%;font-family:var(--font-family-accent),sans-serif;letter-spacing:-.065em;text-transform:uppercase;margin:0;font-size:clamp(64px,14.6vw,220px);font-weight:900;line-height:.95}.banner__text-name span{color:#c8d9ed;-webkit-text-fill-color:#0000;filter:drop-shadow(0 3px 1px #00000040);background:linear-gradient(#f4f7ff 0%,#b7c8df 48%,#8292aa 100%);-webkit-background-clip:text;background-clip:text;width:100%;display:inline-block}.banner__img-container{pointer-events:none;width:clamp(280px,38vw,590px);position:absolute;bottom:24%;left:50%;transform:translate(-50%)}.banner__animated-elements{position:absolute;inset:0}.banner__animated-element{will-change:transform;animation:3s ease-in-out infinite element-float;position:absolute}.banner__animated-element--star{--float-y:-12px;--float-x:4px;--float-rotate:8deg;animation-delay:0s;bottom:36%;left:-6%}.banner__animated-element--heart{--float-y:-10px;--float-x:-3px;--float-rotate:-8deg;animation-delay:-1.2s;bottom:6%;left:-5%}.banner__animated-element--html{--float-y:-14px;--float-x:3px;--float-rotate:3deg;animation-delay:-.5s;bottom:28%;left:0}.banner__animated-element--code{--float-y:-12px;--float-x:-4px;--float-rotate:-4deg;animation-delay:-1.5s;bottom:29%;right:-10%;transform:skew(20deg,-20deg)rotateY(-60deg)}.banner__animated-element--css{--float-y:-9px;--float-x:4px;--float-rotate:5deg;animation-delay:-1s;bottom:16%;left:-18%}.banner__bunny{object-fit:contain;z-index:2;width:100%;height:auto;display:block;position:relative}.banner__description{letter-spacing:2px;color:rgb(var(--color-text-primary));text-shadow:0 1px 2px #1a1a1a;font-size:11px;line-height:1.6}.banner__description p{margin:0 0 24px}.banner__features{color:rgb(var(--color-text-primary));text-shadow:0 1px 2px #1a1a1a;letter-spacing:1.5px;flex-direction:column;align-items:flex-end;gap:14px;font-size:9px;display:flex}@media (max-width:1024px){.banner{aspect-ratio:auto;min-height:680px}.banner__text-name{letter-spacing:-.075em;font-size:max(64px,14.5vw)}.banner__img-container{width:clamp(320px,48vw,490px)}}@media (max-width:768px){.banner{aspect-ratio:auto;background-position:50%;min-height:90svh}.banner__container{padding-block-end:40px}.banner__text-name{letter-spacing:-.07em;font-size:clamp(44px,14vw,100px)}.banner__img-container{width:min(76vw,420px)}.banner__text-box{justify-content:space-between;align-items:flex-end;width:100%;display:flex}.banner__description{font-size:9px}.banner__description p{margin:0}.banner__features{letter-spacing:.8px;gap:10px;font-size:8px}}@media (max-width:480px){.banner{min-height:72svh}.banner .container{padding-block:40px}.banner__img-container{width:82vw}.banner__text-name{font-size:13vw}.banner__features{gap:8px;font-size:7px}}@keyframes element-float{0%,to{translate:0;rotate:0deg}50%{translate:var(--float-x,4px) var(--float-y,-12px);rotate:var(--float-rotate,5deg)}}
.skills{padding-block:80px}.skills__sub-title{letter-spacing:2.2px;text-transform:uppercase;color:var(--color-text-secondary);font-size:10px;line-height:1}.skills__title{font-optical-sizing:auto;letter-spacing:-3.6px;text-transform:uppercase;color:#c8d9ed;-webkit-text-fill-color:#0000;filter:drop-shadow(0 3px 1px #00000040);background:linear-gradient(#f4f7ff 0%,#b7c8df 48%,#8292aa 100%);-webkit-background-clip:text;background-clip:text;margin-block:28px;font-size:60px;font-weight:900;line-height:1.1}.skills__skill-wrapper{gap:20px;display:flex}.skills__skill-box{background:linear-gradient(rgb(var(--color-bg-primary)), rgb(var(--color-bg-primary))) padding-box,var(--animated-gradient) border-box;background-size:100% 100%,300% 300%;border:1px solid #0000;border-radius:16px;flex-direction:column;flex:1;gap:20px;padding:22px;animation:4s linear infinite gradient-border;display:flex;position:relative}.skills__skill-title{letter-spacing:-1px;text-transform:uppercase;color:rgb(var(--color-text-primary));font-size:24px;line-height:1.2}.skills__description{letter-spacing:-1px;color:rgb(var(--color-text-muted));font-size:20px;line-height:1.2}@media (max-width:1040px){.skills__skill-wrapper{flex-wrap:wrap}.skills__skill-box{flex:calc(50% - 10px)}}@media (max-width:480px){.skills__skill-box{flex:100%}}@keyframes gradient-border{to{background-position:0 0,300%}}
.about{isolation:isolate;aspect-ratio:16/9;background-image:url(/images/sec-bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;position:relative}.about:before{content:"";pointer-events:none;z-index:100;background-image:url(/images/bunny-bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.about:after{bottom:0;z-index:-1;background:linear-gradient(0deg, rgb(var(--color-bg-primary)/1) 0%, rgb(var(--color-bg-primary)/0) 100%);content:"";pointer-events:none;height:400px;position:absolute;inset-inline:0}.about .container{justify-content:space-between;gap:40px;padding-block:80px}.about__intro{flex:1}.about__sub-title{letter-spacing:2.2px;text-transform:uppercase;color:var(--color-text-secondary);font-size:10px;line-height:1}.about__title{font-optical-sizing:auto;letter-spacing:-3.6px;text-transform:uppercase;color:#c8d9ed;-webkit-text-fill-color:#0000;filter:drop-shadow(0 3px 1px #00000040);background:linear-gradient(#f4f7ff 0%,#b7c8df 48%,#8292aa 100%);-webkit-background-clip:text;background-clip:text;margin-block:28px;font-size:clamp(32px,7.6vw,100px);font-weight:900;line-height:1}.about__description{letter-spacing:.6px;max-width:300px;color:var(--color-text-secondary);text-shadow:0 1px 2px #1a1a1a;margin-bottom:28px;font-size:14px;line-height:1.1}.about__highlights{flex-direction:column;flex:none;align-items:flex-end;gap:28px;display:flex}.about__highlight-title{letter-spacing:.6px;text-transform:uppercase;color:rgb(var(--color-text-secondary));text-shadow:0 1px 2px #1a1a1a;border-bottom:1px solid rgb(var(--color-border-primary));padding-block:14px;font-size:12px;line-height:1.1}.about__highlight-number{letter-spacing:.6px;width:130px;color:rgb(var(--color-text-muted));text-shadow:0 1px 2px #1a1a1a;padding-block:8px;font-size:16px;line-height:1.1;display:block}.about__visuals{aspect-ratio:3/4;flex:1;min-width:0;position:relative}.about__visual-elements{perspective:1000px;width:100%;height:100%;position:relative}.about__visual-element{will-change:transform;animation:3s ease-in-out infinite element-float;position:absolute}.about__visual-element--star{--float-y:-12px;--float-x:4px;--float-rotate:8deg;animation-delay:0s;bottom:50%;right:-2%}.about__visual-element--heart{--float-y:-10px;--float-x:-3px;--float-rotate:-8deg;animation-delay:-1.2s;bottom:18%;right:-13%}.about__visual-element--card{--float-y:-9px;--float-x:4px;--float-rotate:5deg;animation-delay:-1s;bottom:44%;left:-9%}@media (max-width:1040px){.about .container{flex-direction:column}.about__highlights{flex-flow:wrap;flex:auto}.about__highlight-title{flex:calc(50% - 14px)}.about__visuals{display:none}}@media (max-width:480px){.about .container{z-index:101;position:relative}.about{background-position:60%}.about:after{height:initial;inset:0}}@keyframes element-float{0%,to{translate:0;rotate:0deg}50%{translate:var(--float-x,4px) var(--float-y,-12px);rotate:var(--float-rotate,5deg)}}@keyframes orbit-rotation{0%{transform:translate(-50%,-50%)rotateX(60deg)rotate(0)}to{transform:translate(-50%,-50%)rotateX(60deg)rotate(360deg)}}
.about__visuals{flex:1;min-width:0;position:relative}.about__orbit{aspect-ratio:16/10;pointer-events:none;width:clamp(250px,56.6vw,800px);position:absolute;top:24%;left:-25%}.about__orbit-image,.about__orbit-motion{width:100%;height:100%;position:absolute;inset:0}.about__orbit-image{object-fit:contain}.about__orbit-motion{overflow:visible}.about__orbit-motion path{visibility:hidden}.about__orbit-particle{fill:#eef7ff;filter:drop-shadow(0 0 3px #fff)drop-shadow(0 0 7px #a8d8ff)drop-shadow(0 0 14px #388bff)drop-shadow(0 0 28px #388bffcc)}.about__orbit-particle--secondary{fill:#d9c9ff;filter:drop-shadow(0 0 3px #fff)drop-shadow(0 0 8px #d9c9ff)drop-shadow(0 0 16px #9764ff)drop-shadow(0 0 30px #9764ffbf)}
.projects{flex-direction:column;gap:10px;width:100%;padding-block:120px;display:flex;overflow:hidden}.projects__marquee{width:100%;padding-block:2px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000);mask-image:linear-gradient(90deg,#0000,#000 5% 95%,#0000)}.projects__track{gap:12px;width:max-content;animation:35s linear infinite marquee-scroll;display:flex}.projects__track:hover{animation-play-state:paused}.projects__track .projects__card{transform:rotate(2deg)}.projects__marquee.is-reverse .projects__track{animation-duration:42s;animation-direction:reverse;transform:translate(-50%)}.projects__marquee.is-reverse .projects__track .projects__card{transform:rotate(-2deg)}.projects__card{cursor:pointer;flex-direction:column;flex:0 0 clamp(190px,24vw,280px);gap:12px;display:flex;position:relative}.projects__card:hover img{opacity:1;transform:scale(1.06)}.projects__card:hover .projects__open-button{color:rgb(var(--color-text-muted));transform:translate(2px,-2px)}.projects__card-title{color:#fff;letter-spacing:.2px;font-size:12px;position:absolute;bottom:12px;left:12px}.projects__sub-title{letter-spacing:2.2px;text-transform:uppercase;color:var(--color-text-secondary);font-size:10px;line-height:1}.projects__title{font-optical-sizing:auto;letter-spacing:-3.6px;text-transform:uppercase;color:#c8d9ed;-webkit-text-fill-color:#0000;filter:drop-shadow(0 3px 1px #00000040);background:linear-gradient(#f4f7ff 0%,#b7c8df 48%,#8292aa 100%);-webkit-background-clip:text;background-clip:text;margin-block:28px;font-size:clamp(32px,7.6vw,100px);font-weight:900;line-height:1}.projects__card-img{isolation:isolate;aspect-ratio:2;background:#151515;border:1px solid #ffffff1f;border-radius:8px;display:block;position:relative;overflow:hidden}.projects__card-img img{object-fit:cover;opacity:.75;z-index:-1;transition:transform .6s,opacity .6s}.projects__btn-content{justify-content:space-between;align-items:center;display:flex}.projects__content-title{letter-spacing:2.2px;text-transform:uppercase;color:var(--color-text-secondary);font-size:10px;line-height:1}.projects__open-button{color:var(--color-text-secondary);transition:transform var(--transition-duration) ease,color var(--transition-duration) ease;font-size:16px}.projects__info{gap:4px;display:flex}.projects__info-bl{letter-spacing:1px;height:26px;color:rgb(var(--color-text-muted));background:rgb(var(--color-surface-primary));border-radius:4px;padding:10px;font-size:10px;line-height:1}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.projects__track{animation:none}}
.collaboration{padding-block-end:20px}.collaboration .container{justify-content:space-between;align-items:flex-end;display:flex}.collaboration__sub-title{letter-spacing:2.2px;text-transform:uppercase;color:var(--color-text-secondary);font-size:10px;line-height:1}.collaboration__title{font-optical-sizing:auto;letter-spacing:-3.6px;text-transform:uppercase;color:#c8d9ed;-webkit-text-fill-color:#0000;filter:drop-shadow(0 3px 1px #00000040);background:linear-gradient(#f4f7ff 0%,#b7c8df 48%,#8292aa 100%);-webkit-background-clip:text;background-clip:text;margin-block:28px;font-size:clamp(32px,7.6vw,100px);font-weight:900;line-height:1}.collaboration__contact{text-align:right;max-width:300px;padding-block-end:35px}.collaboration__contact-text{letter-spacing:-1px;color:rgb(var(--color-text-secondary));margin-block:10px 20px;font-size:16px;line-height:1.1}@media (max-width:768px){.collaboration .container{flex-direction:column;align-items:flex-start}.collaboration__contact{text-align:left}}
.footer{padding-block:20px 40px}.footer__description{color:rgb(var(--color-text-secondary));flex:1;align-items:center;gap:16px;font-size:12px;line-height:1;display:flex}.footer__contacts{color:rgb(var(--color-text-secondary));flex:1;justify-content:flex-end;align-items:center;gap:10px;font-size:12px;line-height:1;display:flex}@media (max-width:768px){.footer .container{flex-direction:column-reverse;align-items:flex-start;gap:12px}}