@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Fira+Code:wght@400;500&display=swap";:root{--bg:#faf6ef;--bg-2:#f1e7d8;--bg-card:#fff;--border:#24181524;--border-dim:#24181512;--ink:#251b19;--muted:#7a6358;--accent:#7c2334;--accent-lt:#a33c4d;--accent-dim:#7c233414;--gold:#9c7a2e;--font-d:"Syne", sans-serif;--font-hero:"Bricolage Grotesque", sans-serif;--font-b:"Inter", sans-serif;--font-m:"Fira Code", monospace;--px:clamp(20px, 5.5vw, 88px);--sec:clamp(72px, 10vw, 120px);--nav:68px;--rad:12px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--font-b);-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.7;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit;color:inherit;background:0 0;border:none}img{max-width:100%;display:block}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}.accent-text{color:var(--accent)}.reveal{opacity:0;transition:opacity .75s,transform .75s;transform:translateY(28px)}.reveal.visible{opacity:1;transform:none}section{padding:var(--sec) var(--px)}.section-tag{font-family:var(--font-m);color:var(--accent);letter-spacing:.04em;align-items:center;gap:6px;margin-bottom:12px;font-size:12px;display:inline-flex}.section-tag:before{content:"//";opacity:.45;margin-right:2px}.section-title{font-family:var(--font-d);letter-spacing:-.025em;color:var(--ink);margin-bottom:14px;font-size:clamp(30px,5vw,52px);font-weight:700;line-height:1.1}.section-sub{color:var(--muted);max-width:480px;margin-bottom:48px;font-size:15px;line-height:1.85}.btn{font-family:var(--font-b);white-space:nowrap;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.btn--sm{padding:8px 18px;font-size:13px}.btn--lg{padding:14px 32px;font-size:15px}.btn--full{justify-content:center;width:100%}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:var(--accent-lt);transform:translateY(-2px);box-shadow:0 10px 28px #7c233440}.btn--ghost{border-color:var(--border);color:var(--ink);background:0 0}.btn--ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.btn--outline{border-color:var(--border);color:var(--muted);background:0 0}.btn--outline:hover{border-color:var(--accent);color:var(--accent)}.tag{background:var(--accent-dim);border:1px solid var(--border);font-family:var(--font-m);color:var(--accent);letter-spacing:.04em;border-radius:4px;padding:3px 10px;font-size:11px;display:inline-block}.link-hover{transition:color .2s}.link-hover:hover{color:var(--accent)}.navbar{height:var(--nav);z-index:200;padding:0 var(--px);border-bottom:1px solid #0000;justify-content:space-between;align-items:center;transition:background .35s,border-color .35s;display:flex;position:fixed;top:0;left:0;right:0}.navbar--scrolled{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--border-dim);background:#faf6efe6}.navbar__logo{font-family:var(--font-d);letter-spacing:-.04em;color:var(--ink);font-size:22px;font-weight:800}.navbar__logo-dot{color:var(--accent)}.navbar__links{align-items:center;gap:32px;list-style:none;display:flex}.navbar__link{color:var(--muted);font-size:14px;transition:color .2s}.navbar__link:hover{color:var(--ink)}.navbar__hire{display:none}.hamburger{z-index:300;flex-direction:column;gap:5px;padding:4px;display:none}.hamburger span{background:var(--ink);border-radius:2px;width:22px;height:2px;transition:transform .3s,opacity .3s;display:block}.hamburger--open span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger--open span:nth-child(2){opacity:0}.hamburger--open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.mobile-menu{background:var(--bg);z-index:199;flex-direction:column;justify-content:center;align-items:center;gap:40px;display:none;position:fixed;inset:0}.mobile-menu--open{display:flex}.mobile-menu ul{text-align:center;flex-direction:column;gap:8px;list-style:none;display:flex}.mobile-menu__link{font-family:var(--font-d);color:var(--ink);opacity:.7;font-size:clamp(36px,9vw,52px);font-weight:700;transition:opacity .2s,color .2s}.mobile-menu__link:hover{opacity:1;color:var(--accent)}.hero{min-height:100svh;padding:calc(var(--nav) + 48px) var(--px) 80px;flex-direction:column;justify-content:center;display:flex;position:relative;overflow:hidden}.hero__dots{pointer-events:none;background-image:radial-gradient(#7c23342e 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 80%,#000 30%,#0000 100%);mask-image:radial-gradient(80% 80%,#000 30%,#0000 100%)}.hero__body{z-index:1;max-width:680px;position:relative}.hero__badge{font-family:var(--font-m);color:#4a7c59;background:#4a7c5914;border:1px solid #4a7c594d;border-radius:100px;align-items:center;gap:8px;margin-bottom:28px;padding:6px 14px;font-size:12px;display:inline-flex}.hero__badge-pulse{background:#4a7c59;border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.hero__name{font-family:var(--font-hero);letter-spacing:-.03em;color:var(--ink);margin-bottom:8px;font-size:clamp(40px,7vw,76px);font-weight:800;line-height:1.05}.hero__role{font-family:var(--font-d);letter-spacing:-.025em;color:var(--accent);align-items:center;gap:2px;min-height:1.15em;margin-bottom:20px;font-size:clamp(26px,4.5vw,50px);font-weight:700;line-height:1.1;display:flex}.hero__cursor{background:var(--accent);border-radius:1px;flex-shrink:0;width:3px;height:.85em;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero__tagline{color:var(--muted);max-width:440px;margin-bottom:40px;font-size:clamp(14px,1.6vw,16px);line-height:1.85}.hero__actions{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:48px;display:flex}.hero__socials{gap:12px;display:flex}.social-icon{border:1px solid var(--border);width:42px;height:42px;color:var(--muted);border-radius:8px;justify-content:center;align-items:center;transition:color .2s,border-color .2s,background .2s;display:flex}.social-icon:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.hero__scroll{font-family:var(--font-m);letter-spacing:.1em;color:var(--muted);opacity:.65;flex-direction:column;align-items:center;gap:6px;font-size:10px;transition:opacity .2s;animation:2.5s ease-in-out infinite float;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.hero__scroll:hover{opacity:1}@keyframes float{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(6px)}}#about{background:var(--bg-2)}.about__grid{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,100px);display:grid}.about__text{color:var(--muted);margin-bottom:18px;font-size:15px;line-height:1.9}.about__ctas{flex-wrap:wrap;gap:14px;margin-top:32px;display:flex}.about__stats{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.about__stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rad);padding:24px 20px;transition:border-color .2s}.about__stat:hover{border-color:var(--accent)}.about__stat-num{font-family:var(--font-d);color:var(--accent);letter-spacing:-.04em;margin-bottom:4px;font-size:34px;font-weight:800;display:block}.about__stat-label{font-family:var(--font-m);color:var(--muted);letter-spacing:.05em;font-size:11px}.code-block{background:var(--ink);border:1px solid var(--border);border-radius:var(--rad);overflow:hidden}.code-block__bar{background:#ffffff0d;border-bottom:1px solid #ffffff14;align-items:center;gap:6px;padding:10px 16px;display:flex}.code-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.code-dot--red{background:#e0726a}.code-dot--yellow{background:#d9b65c}.code-dot--green{background:#7fa86b}.code-block__file{font-family:var(--font-m);color:#ffffff80;margin-left:8px;font-size:11px}.code-block__body{font-family:var(--font-m);color:#e8c9a8;white-space:pre;padding:20px;font-size:13px;line-height:1.85;overflow-x:auto}#projects{background:var(--bg)}.filter-bar{flex-wrap:wrap;gap:8px;margin-bottom:48px;display:flex}.filter-btn{border:1px solid var(--border);color:var(--muted);background:0 0;border-radius:100px;padding:8px 20px;font-size:13px;font-weight:500;transition:all .2s}.filter-btn:hover{border-color:var(--accent);color:var(--ink)}.filter-btn--active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.projects__grid{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.p-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rad);flex-direction:column;gap:14px;padding:28px;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex}.p-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 16px 40px #7c23341f}.p-card--featured{border-color:#7c23344d}.p-card__top{justify-content:space-between;align-items:center;display:flex}.p-card__category{font-family:var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:10px}.p-card__links{gap:12px;display:flex}.p-card__icon{color:var(--muted);transition:color .2s;display:flex}.p-card__icon:hover{color:var(--ink)}.p-card__title{font-family:var(--font-d);letter-spacing:-.01em;color:var(--ink);font-size:18px;font-weight:700;line-height:1.3}.p-card__desc{color:var(--muted);flex:1;font-size:14px;line-height:1.75}.p-card__tags{flex-wrap:wrap;gap:6px;display:flex}#skills{background:var(--bg-2)}.skills__grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.skill-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rad);padding:28px 24px;transition:border-color .25s,transform .2s}.skill-card:hover{border-color:var(--accent);transform:translateY(-3px)}.skill-card__head{border-bottom:1px solid var(--border);align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;display:flex}.skill-card__icon{color:var(--accent);font-size:20px;line-height:1}.skill-card__title{font-family:var(--font-d);color:var(--ink);font-size:16px;font-weight:700}.skill-card__list{flex-direction:column;gap:10px;list-style:none;display:flex}.skill-card__item{color:var(--muted);align-items:center;gap:10px;font-size:13px;display:flex}.skill-card__dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:4px;height:4px}#contact{background:var(--bg)}.contact__wrap{max-width:880px;margin:0 auto}.contact__grid{grid-template-columns:1fr 1.6fr;align-items:start;gap:clamp(32px,5vw,64px);display:grid}.contact__info{flex-direction:column;gap:28px;display:flex}.contact__field-label{font-family:var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;font-size:10px;display:block}.contact__field-value{color:var(--ink);font-size:15px}.contact__status{align-items:center;gap:8px;display:flex}.status-pulse{background:var(--gold);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse}.contact__socials{flex-wrap:wrap;gap:16px;display:flex}.contact__social{font-family:var(--font-m);color:var(--muted);border-bottom:1px solid #0000;padding-bottom:2px;font-size:12px;transition:color .2s,border-color .2s}.contact__social:hover{color:var(--accent);border-color:var(--accent)}.contact__form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{font-family:var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px}.form-group input,.form-group textarea{background:var(--bg-card);border:1px solid var(--border);font-family:var(--font-b);color:var(--ink);resize:vertical;border-radius:8px;outline:none;padding:12px 16px;font-size:14px;transition:border-color .2s,box-shadow .2s}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);opacity:.6}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.contact__success{border-radius:var(--rad);text-align:center;background:#9c7a2e0f;border:1px solid #9c7a2e40;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:56px 32px;display:flex}.contact__success span{color:var(--gold);font-size:36px}.contact__success p{color:var(--muted);font-size:14px}.footer{background:var(--bg-2);border-top:1px solid var(--border);padding:64px var(--px) 32px}.footer__top{border-bottom:1px solid var(--border);grid-template-columns:2fr 1fr 1fr;gap:clamp(32px,5vw,80px);margin-bottom:48px;padding-bottom:48px;display:grid}.footer__logo{font-family:var(--font-d);letter-spacing:-.04em;color:var(--ink);margin-bottom:14px;font-size:24px;font-weight:800;display:block}.footer__logo-dot{color:var(--accent)}.footer__tagline{color:var(--muted);max-width:260px;font-size:14px;line-height:1.7}.footer__col-title{font-family:var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-size:10px}.footer__col ul{flex-direction:column;gap:10px;list-style:none;display:flex}.footer__link{color:var(--muted);font-size:14px;transition:color .2s}.footer__link:hover{color:var(--ink)}.footer__bottom{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:13px;display:flex}.footer__cta{color:var(--accent);border-bottom:1px solid #0000;padding-bottom:1px;transition:border-color .2s}.footer__cta:hover{border-color:var(--accent)}@media (width<=1100px){.projects__grid,.skills__grid{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:span 2}}@media (width<=768px){.navbar__links,.navbar__hire{display:none}.hamburger{display:flex}.about__grid,.contact__grid,.footer__top{grid-template-columns:1fr}.footer__brand{grid-column:span 1}.hero__scroll{display:none}}@media (width<=600px){.projects__grid,.skills__grid{grid-template-columns:1fr}.about__stats{grid-template-columns:1fr 1fr}}@media (width<=420px){.hero__actions,.footer__bottom{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}.hero__cursor,.hero__badge-pulse,.status-pulse,.hero__scroll{animation:none}}
