:root{--color-background: #020617;--color-primary: #22d3ee;--color-primary-hover: #67e8f9;--color-accent: #818cf8;--color-text-light: #e2e8f0;--color-text-medium: #94a3b8;--color-surface-900: #0f172a;--color-surface-800: #1e293b;--color-surface-700: #334155;--color-border: #334155;--font-family-sans: "Inter", sans-serif;--font-family-heading: "Space Grotesk", sans-serif;--navbar-height: 4rem}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-family-sans);background-color:var(--color-background);color:var(--color-text-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle at 1px 1px,var(--color-surface-800) 1px,transparent 0);background-size:2rem 2rem}*{box-sizing:border-box}::selection{background-color:#22d3ee4d}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);color:#fff}.app-layout{position:relative}.main-content{padding-top:var(--navbar-height)}.background-gradient{position:fixed;top:0;left:0;width:100%;height:100vh;background:radial-gradient(ellipse 80% 50% at 50% -20%,#818cf826,#fff0);z-index:-1;animation:background-pan 15s ease-in-out infinite alternate}@keyframes background-pan{0%{transform:translate(-5%)}to{transform:translate(5%)}}.page-container,.page-container-large,.page-container-small{margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}.page-container{max-width:56rem}.page-container-large{max-width:80rem}.page-container-small{max-width:42rem}.page-title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:3rem;background:linear-gradient(to right,white,var(--color-text-medium));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media(min-width:768px){.page-title{font-size:3rem}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-section{padding-top:4rem;padding-bottom:4rem;scroll-margin-top:var(--navbar-height);opacity:0;animation:fade-in-up .8s ease-out forwards}@media(min-width:640px){.page-section{padding-top:6rem;padding-bottom:6rem}}.scroll-progress-bar-container{position:fixed;top:var(--navbar-height);left:0;width:100%;height:3px;background-color:transparent;z-index:100}.scroll-progress-bar{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:width .1s ease-out}.navbar{background-color:#020617b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:fixed;width:100%;top:0;z-index:50;border-bottom:1px solid var(--color-border)}.navbar-container{max-width:80rem;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:var(--navbar-height)}@media(min-width:768px){.navbar-container{display:grid;grid-template-columns:1fr auto 1fr;justify-content:initial}}.navbar-logo{color:#fff;font-weight:700;font-size:1.25rem;text-decoration:none;font-family:var(--font-family-heading)}.navbar-menu-desktop{display:none}@media(min-width:768px){.navbar-menu-desktop{display:flex;align-items:baseline;gap:1rem;grid-column:2}}.nav-link{color:var(--color-text-medium);text-decoration:none;font-size:.875rem;font-weight:500;padding:.5rem .75rem;border-radius:.375rem;transition:color .3s ease;position:relative}.nav-link:hover{color:var(--color-primary-hover)}.nav-link.active{color:var(--color-primary)}.nav-link:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background-color:var(--color-primary);transition:all .3s ease;transform:translate(-50%)}.nav-link.active:after{width:100%}.navbar-menu-mobile-toggle{display:block;grid-column:3;justify-self:end}@media(min-width:768px){.navbar-menu-mobile-toggle{display:none}}.mobile-menu-button{background:none;border:none;color:var(--color-text-medium);padding:.5rem;cursor:pointer}.menu-icon{width:1.5rem;height:1.5rem}.navbar-menu-mobile{display:none;padding:.5rem .5rem .75rem;background-color:var(--color-surface-900);border-bottom:1px solid var(--color-border)}.navbar-menu-mobile.open{display:block}.nav-link-mobile{display:block;padding:.75rem;text-decoration:none;color:var(--color-text-light);font-weight:500;border-radius:.375rem}.nav-link-mobile:hover,.nav-link-mobile.active{color:var(--color-primary);background-color:var(--color-surface-800)}.footer{background-color:var(--color-background);border-top:1px solid var(--color-border)}.footer-container{max-width:80rem;margin:0 auto;padding:2.5rem 1rem;text-align:center;color:var(--color-text-medium);font-size:.875rem}.button{display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-family:var(--font-family-heading);padding:.75rem 2rem;border-radius:.5rem;text-decoration:none;transition:all .3s ease;border:1px solid transparent;width:100%;gap:.5rem}@media(min-width:640px){.button{width:auto}}.button-primary{background-color:var(--color-primary);color:var(--color-background);box-shadow:0 0 15px #22d3ee4d}.button-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-3px);box-shadow:0 0 25px #22d3ee80}.button-secondary{border-color:var(--color-border);color:var(--color-text-light)}.button-secondary:hover{background-color:var(--color-surface-800);border-color:var(--color-surface-700)}.full-width{width:100%}.home-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1rem;position:relative;margin-top:calc(-1 * var(--navbar-height))}.home-hero-content{position:relative;z-index:10;animation:fade-in-up 1s forwards}.home-hero-title{font-size:3.5rem;font-weight:700;color:#fff;margin-bottom:1rem}.home-hero-subtitle{font-size:1.25rem;color:var(--color-text-medium);max-width:48rem;margin:0 auto 2.5rem}.home-hero-actions{display:flex;flex-direction:column;justify-content:center;gap:1rem}.home-hero-socials{display:flex;justify-content:center;gap:1.5rem;margin-top:3rem}.social-link{color:var(--color-text-medium);transition:all .3s}.social-link:hover{color:var(--color-primary);transform:scale(1.2)}@media(min-width:640px){.home-hero-title{font-size:5rem}.home-hero-subtitle{font-size:1.5rem}.home-hero-actions{flex-direction:row}}.about-content{display:grid;gap:3rem;align-items:center}.about-image{border-radius:.75rem;box-shadow:0 25px 50px -12px #00000040;margin:0 auto;max-width:300px;border:1px solid var(--color-border);transition:transform .3s}.about-image:hover{transform:scale(1.05) rotate(-2deg)}.about-text{color:var(--color-text-light);font-size:1.125rem;display:flex;flex-direction:column;gap:1rem}.about-text strong{color:var(--color-primary);font-weight:600}@media(min-width:768px){.about-content{grid-template-columns:1fr 2fr}}.projects-grid{display:grid;gap:2rem}@media(min-width:768px){.projects-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.projects-grid{grid-template-columns:repeat(3,1fr)}}.project-card{background-color:var(--color-surface-900);border-radius:.75rem;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;border:1px solid var(--color-border);opacity:0;animation:fade-in-up .8s ease-out forwards;position:relative}.project-card:before{content:"";position:absolute;inset:0;border-radius:.75rem;border:1px solid transparent;background:linear-gradient(to right,var(--color-primary),var(--color-accent)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;opacity:0;transition:opacity .3s ease}.project-card:hover:before{opacity:1}.project-card:hover{transform:translateY(-8px)}.project-card-image{width:100%;height:12rem;object-fit:cover;border-bottom:1px solid var(--color-border)}.project-card-content{padding:1.5rem}.project-card-title{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}.project-card-description{font-size:.875rem;color:var(--color-text-medium);margin-bottom:1rem;min-height:40px}.project-card-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.project-card-tag{background-color:var(--color-surface-800);color:var(--color-accent);font-size:.75rem;font-family:var(--font-family-mono);padding:.25rem .5rem;border-radius:9999px}.project-card-link{color:var(--color-primary);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;transition:color .3s ease}.project-card-link span{margin-left:.25rem;transition:transform .3s}.project-card:hover .project-card-link span{transform:translate(4px)}.back-link{color:var(--color-primary);margin-bottom:2rem;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;transition:color .3s ease}.back-link:hover{color:var(--color-primary-hover)}.project-detail-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.project-detail-meta{display:flex;align-items:center;color:var(--color-text-medium);margin-bottom:1.5rem}.project-detail-meta .separator{margin:0 .5rem}.project-detail-image{width:100%;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a;margin-bottom:2rem;border:1px solid var(--color-border)}.project-detail-layout{display:grid;gap:2.5rem}@media(min-width:768px){.project-detail-layout{grid-template-columns:2fr 1fr}}.project-detail-section{margin-bottom:2rem}.project-detail-subtitle{font-size:1.5rem;font-weight:600;margin-bottom:1rem;border-left:3px solid var(--color-primary);padding-left:.75rem}.solution-list{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:1rem}.solution-list li{padding-left:1.75rem;position:relative}.solution-list li:before{content:"✓";color:var(--color-primary);position:absolute;left:0;font-weight:700}.project-detail-sidebar .sidebar-box{background-color:var(--color-surface-900);padding:1.5rem;border-radius:.75rem;position:sticky;top:6rem;border:1px solid var(--color-border)}.sidebar-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.sidebar-links{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.skills-container{display:flex;flex-direction:column;gap:3rem}.skills-subtitle{font-size:1.75rem;font-weight:600;color:#fff;margin-bottom:1.5rem}.skills-list{display:flex;flex-wrap:wrap;gap:.75rem}.skill-tag-tech,.skill-tag-soft{background-color:var(--color-surface-800);border:1px solid var(--color-border);color:var(--color-text-light);padding:.5rem 1rem;border-radius:.5rem;transition:all .3s ease;opacity:0;animation:fade-in-up .8s ease-out forwards}.skill-tag-tech:hover{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.skill-tag-soft:hover{background-color:var(--color-primary);color:var(--color-background);border-color:var(--color-primary)}.skill-tag-tech{font-family:var(--font-family-mono)}.contact-subtitle{color:var(--color-text-medium);text-align:center;margin-bottom:2.5rem}.contact-form{display:flex;flex-direction:column;gap:1.5rem}.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-text-light);margin-bottom:.5rem}.form-input{display:block;width:100%;background-color:var(--color-surface-900);border:1px solid var(--color-border);border-radius:.5rem;padding:.75rem 1rem;color:#fff;transition:border-color .3s,box-shadow .3s}.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #22d3ee33}.form-status{text-align:center;margin-top:1rem;min-height:1.5rem}.success-badge{color:#4ade80;background-color:#4ade801a;padding:.5rem 1rem;border-radius:.5rem}.error-badge{color:#f87171;background-color:#f871711a;padding:.5rem 1rem;border-radius:.5rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
