:root{color-scheme:light dark;--brand: oklch(78% .16 180);--accent: oklch(65.679% .2816 342.61);--bg: light-dark(oklch(98% .01 260), oklch(15% .02 260));--surface: light-dark(white, oklch(20% .02 260));--text: light-dark(oklch(18% .02 260), oklch(95% .01 260));--muted: color-mix(in oklab, var(--text) 55%, var(--bg));--border: color-mix(in oklab, var(--text) 12%, transparent);--hero-gradient: light-dark(linear-gradient(135deg, oklch(98% .04 260), oklch(92% .08 280)), linear-gradient(135deg, oklch(22% .03 260), oklch(28% .05 280)))}@property --rotation{syntax: "<angle>"; inherits: false; initial-value: 0deg;}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--text)}@view-transition{navigation:auto}.progress{position:fixed;top:0;left:0;width:100%;height:4px;background:var(--brand);transform-origin:left;animation:grow linear;animation-timeline:scroll()}@keyframes grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes spin{to{--rotation: 360deg}}.container{width:min(1200px,calc(100% - 2rem));margin-inline:auto}header{position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:color-mix(in oklab,var(--bg) 85%,transparent);border-bottom:1px solid var(--border)}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.logo{font-weight:800;font-size:1.1rem}.logo span{color:var(--brand)}.nav-links{display:flex;gap:1.5rem}.nav-links a{text-decoration:none;color:var(--text)}.hero{padding:8rem 0 6rem}.hero-card{position:relative;overflow:hidden;background:var(--hero-gradient);border:1px solid var(--border);border-radius:32px;padding:4rem;container-type:inline-size}.hero-card:before{content:"";position:absolute;inset:-2px;background:conic-gradient(from var(--rotation),transparent,var(--brand),transparent);z-index:-1;animation:spin 12s linear infinite}.hero h1{margin:0;font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:-.05em}.hero p{max-width:700px;color:var(--muted);font-size:1.15rem;margin:1.5rem 0}.cta-group{display:flex;gap:1rem;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.4rem;border-radius:16px;border:none;text-decoration:none;font-weight:700;transition:.25s}.button-primary{background:var(--brand);color:contrast-color(var(--brand))}.button-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.button:hover{transform:translateY(-3px)}section{padding:5rem 0}.section-title{font-size:2.2rem;margin-bottom:2rem}.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:1.5rem;transition:.25s;container-type:inline-size}.card:hover{transform:translateY(-5px);background:color-mix(in oklab,var(--surface) 92%,var(--brand))}.card h3{margin-top:0}.tech-stack{display:flex;flex-wrap:wrap;gap:.75rem}.tag{background:color-mix(in oklab,var(--brand) 12%,transparent);border:1px solid var(--border);border-radius:999px;padding:.55rem .9rem;font-size:.9rem}.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:2rem}.contact-card:has(input:focus){border-color:var(--brand)}input,textarea{width:100%;margin-top:.5rem;margin-bottom:1rem;padding:1rem;border-radius:14px;border:1px solid var(--border);background:var(--bg);color:var(--text)}footer{text-align:center;padding:4rem 0;color:var(--muted)}@container (max-width: 420px){.card h3{font-size:1rem}}
