*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #F8F9FA;--color-surface: #FFFFFF;--color-text-primary: #2C3E50;--color-text-secondary: #64748B;--color-accent: #14B8A6;--color-accent-hover: #0D9488;--color-border: #E2E8F0;--color-shadow: rgba(0, 0, 0, .08);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-base: 16px;--font-size-sm: .875rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 var(--color-shadow);--shadow-md: 0 4px 6px -1px var(--color-shadow);--shadow-lg: 0 10px 15px -3px var(--color-shadow);--shadow-xl: 0 20px 25px -5px var(--color-shadow);--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--max-width: 1200px;--section-padding: var(--space-3xl)}html{font-size:var(--font-size-base);scroll-behavior:smooth}body{font-family:var(--font-family);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}img{max-width:100%;height:auto;display:block}@media (max-width: 768px){:root{--section-padding: var(--space-2xl);--font-size-3xl: 2rem;--font-size-4xl: 2.5rem}}@media (max-width: 480px){:root{--section-padding: var(--space-xl);--font-size-2xl: 1.5rem;--font-size-3xl: 1.75rem;--font-size-4xl: 2rem}}.app{min-height:100vh;display:flex;flex-direction:column}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg);width:100%}.section{padding:var(--section-padding) 0}.section-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--space-md);color:var(--color-text-primary)}.section-subtitle{font-size:var(--font-size-lg);text-align:center;margin-bottom:var(--space-2xl);color:var(--color-text-secondary)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.nav{position:absolute;top:0;left:0;right:0;padding:var(--space-lg) 0;z-index:100}.nav-content{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg);display:flex;justify-content:space-between;align-items:center}.nav-logo{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-surface);letter-spacing:-.5px}.nav-links{display:flex;gap:var(--space-lg);list-style:none}.nav-links button{background:none;border:none;color:var(--color-surface);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.nav-links button:hover{background-color:#ffffff1a}@media (max-width: 768px){.nav-links{gap:var(--space-sm)}.nav-links button{font-size:var(--font-size-sm);padding:var(--space-xs)}}@media (max-width: 480px){.nav-logo{font-size:var(--font-size-lg)}.nav-links{gap:var(--space-xs)}}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2,#14b8a6);position:relative;color:var(--color-surface);text-align:center;padding:var(--space-2xl) var(--space-lg)}.hero-content{max-width:1100px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:var(--space-2xl);align-items:center;animation:fadeInUp .8s ease-out}.hero-copy{text-align:left}.hero-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-sm);line-height:var(--line-height-tight)}.hero-subtitle{font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);margin-bottom:var(--space-md);opacity:.95}.hero-tagline{font-size:var(--font-size-lg);margin-bottom:var(--space-xl);opacity:.9;line-height:var(--line-height-relaxed)}.hero-cta{background-color:var(--color-surface);color:var(--color-accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);padding:var(--space-md) var(--space-xl);border:none;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);transition:all var(--transition-base)}.hero-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.hero-photo-frame{position:relative;width:min(100%,320px);justify-self:center;padding:.75rem;border-radius:2rem;background:#ffffff24;border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 60px #0f172a38;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-photo{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;object-position:center top;border-radius:1.5rem}@media (max-width: 768px){.hero{padding-top:6rem}.hero-content{grid-template-columns:1fr;gap:var(--space-xl)}.hero-copy{text-align:center}}@media (max-width: 480px){.hero-cta{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-base)}.hero-photo-frame{width:min(100%,280px);padding:.6rem;border-radius:1.5rem}.hero-photo{border-radius:1.15rem}}.about-section{background-color:var(--color-surface)}.about-content{display:grid;grid-template-columns:200px 1fr;gap:var(--space-2xl);align-items:start}.about-avatar{display:flex;justify-content:center}.avatar-circle{width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),#667eea);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-surface);box-shadow:var(--shadow-lg)}.about-text{display:flex;flex-direction:column;gap:var(--space-md)}.about-text p{font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);color:var(--color-text-secondary)}@media (max-width: 768px){.about-content{grid-template-columns:1fr;text-align:center;gap:var(--space-xl)}.avatar-circle{width:150px;height:150px;font-size:var(--font-size-2xl)}}.projects-section{background-color:var(--color-bg)}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}.project-card{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);transition:all var(--transition-base);display:flex;flex-direction:column;height:100%}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.project-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-sm);color:var(--color-text-primary)}.project-description{font-size:var(--font-size-base);line-height:var(--line-height-relaxed);color:var(--color-text-secondary);margin-bottom:var(--space-md);flex-grow:1}.project-tech{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-md)}.tech-tag{font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg);color:var(--color-text-secondary);border-radius:var(--radius-full);font-weight:var(--font-weight-medium)}.project-links{display:flex;gap:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}.project-link{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-accent);transition:color var(--transition-fast)}.project-link:hover{color:var(--color-accent-hover)}.link-icon{font-size:var(--font-size-lg)}@media (max-width: 1024px){.projects-grid{grid-template-columns:1fr}}@media (max-width: 480px){.project-card{padding:var(--space-lg)}}.skills-section{background-color:var(--color-surface)}.skills-container{display:grid;gap:var(--space-2xl)}.skills-category{text-align:center}.skills-category-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-xl);color:var(--color-text-primary)}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-lg)}.skill-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg);background-color:var(--color-bg);border-radius:var(--radius-lg);transition:all var(--transition-base)}.skill-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.skill-icon{display:flex;align-items:center;justify-content:center}.skill-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);text-align:center}@media (max-width: 768px){.skills-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--space-md)}}.contact-section{background-color:var(--color-bg)}.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);max-width:1000px;margin:0 auto}.contact-card{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-base);display:flex;flex-direction:column;align-items:center;gap:var(--space-md);cursor:pointer}.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.location-card{cursor:default}.contact-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.email-icon{background-color:#14b8a61a}.email-icon:before{content:"";position:absolute;width:30px;height:20px;border:2px solid var(--color-accent);border-radius:3px}.email-icon:after{content:"";position:absolute;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:12px solid var(--color-accent);top:18px}.github-icon{background-color:#667eea1a}.github-icon:before{content:"<>";font-size:24px;font-weight:var(--font-weight-bold);color:#667eea}.linkedin-icon{background-color:#764ba21a}.linkedin-icon:before{content:"";position:absolute;width:16px;height:16px;border:3px solid #764ba2;border-radius:50%;top:14px;left:14px}.linkedin-icon:after{content:"";position:absolute;width:16px;height:16px;border:3px solid #764ba2;border-radius:50%;bottom:14px;right:14px}.location-icon{background-color:#ea58581a}.location-icon:before{content:"";position:absolute;width:20px;height:20px;background-color:#ea5858;border-radius:50% 50% 50% 0;transform:rotate(-45deg);top:16px}.location-icon:after{content:"";position:absolute;width:8px;height:8px;background-color:var(--color-surface);border-radius:50%;top:21px;left:26px;transform:rotate(-45deg)}.contact-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.contact-detail{font-size:var(--font-size-base);color:var(--color-text-secondary);word-break:break-word}@media (max-width: 768px){.contact-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.contact-grid{grid-template-columns:1fr}}.footer{background-color:var(--color-text-primary);color:var(--color-surface);padding:var(--space-xl) 0;margin-top:auto}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-md)}.footer-text{font-size:var(--font-size-base);opacity:.8}.footer-links{display:flex;gap:var(--space-lg)}.footer-link{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-surface);opacity:.8;transition:opacity var(--transition-fast)}.footer-link:hover{opacity:1}.back-to-top{position:fixed;bottom:var(--space-lg);right:var(--space-lg);width:50px;height:50px;background-color:var(--color-accent);color:var(--color-surface);border:none;border-radius:50%;font-size:var(--font-size-xl);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:all var(--transition-base);z-index:1000}.back-to-top:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}@media (max-width: 768px){.footer-content{flex-direction:column;text-align:center}}@media (max-width: 480px){.back-to-top{width:45px;height:45px;bottom:var(--space-md);right:var(--space-md)}}