:root{--bg: #0a0f18;--surface: rgba(20, 28, 43, .6);--surface-hover: rgba(28, 38, 56, .8);--border: rgba(148, 163, 184, .15);--text: #f1f5f9;--muted: #94a3b8;--dim: #475569;--accent: #38bdf8;--accent-glow: rgba(56, 189, 248, .15)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);font-family:Inter,sans-serif;color:var(--text);overflow-x:hidden;line-height:1.6}#bg-canvas{position:fixed;inset:0;z-index:-3}.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at center,transparent 30%,rgba(10,15,24,.85) 100%)}nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid transparent;transition:all .3s ease}nav.scrolled{background:#0a0f18e6;border-color:var(--border);backdrop-filter:blur(12px);padding:16px 48px}.nav-logo{font-weight:700;font-size:1.1rem;letter-spacing:-.02em;color:var(--text)}.nav-logo span{color:var(--accent)}.nav-links{display:flex;gap:32px}.nav-links a{font-size:.85rem;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--text)}.hero{min-height:100vh;display:flex;align-items:center;padding:0 48px;max-width:1200px;margin:0 auto}.hero-inner{max-width:800px}.role-overline{font-family:Roboto Mono,monospace;font-size:.85rem;color:var(--accent);letter-spacing:.05em;margin-bottom:24px;opacity:0;animation:fadeUp .6s ease forwards .2s}h1{font-size:clamp(3rem,7vw,5.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin-bottom:24px;opacity:0;animation:fadeUp .7s ease forwards .4s}h1 .line2{color:var(--muted)}.hero-desc{font-size:1.125rem;font-weight:300;line-height:1.7;color:var(--muted);max-width:600px;margin-bottom:48px;opacity:0;animation:fadeUp .7s ease forwards .6s}.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s ease forwards .8s}.btn-primary{padding:12px 28px;border-radius:4px;background:var(--text);color:var(--bg);font-size:.9rem;font-weight:500;text-decoration:none;transition:all .2s}.btn-primary:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 20px #ffffff1a}.btn-outline{padding:12px 28px;border-radius:4px;border:1px solid var(--border);color:var(--text);font-size:.9rem;font-weight:500;text-decoration:none;background:#ffffff05;transition:all .2s}.btn-outline:hover{background:#ffffff0d;border-color:var(--muted);transform:translateY(-2px)}.stats-strip{max-width:1200px;margin:0 auto;padding:0 48px 100px;display:flex;gap:56px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s ease forwards 1s}.stat{display:flex;flex-direction:column;gap:4px}.stat-num{font-size:1.75rem;font-weight:500;color:var(--text);line-height:1}.stat-label{font-family:Roboto Mono,monospace;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.section{max-width:1200px;margin:0 auto;padding:100px 48px}.section-label{font-family:Roboto Mono,monospace;font-size:.75rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}.section-title{font-size:clamp(2rem,4vw,2.75rem);font-weight:700;letter-spacing:-.02em;margin-bottom:56px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:none}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}.skill-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:32px;transition:all .3s}.skill-card:hover{background:var(--surface-hover);border-color:#fff3}.skill-icon{font-size:1.5rem;margin-bottom:20px;opacity:.8}.skill-card h3{font-size:1.1rem;font-weight:600;margin-bottom:12px}.skill-card p{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:24px}.skill-tags{display:flex;flex-wrap:wrap;gap:8px}.tag{font-family:Roboto Mono,monospace;font-size:.7rem;padding:4px 10px;border-radius:4px;background:#ffffff0d;color:var(--text)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.project-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:40px;display:flex;flex-direction:column;transition:all .3s}.project-card:hover{background:var(--surface-hover);border-color:#fff3;transform:translateY(-4px)}.project-num{font-family:Roboto Mono,monospace;font-size:.75rem;color:var(--accent);margin-bottom:16px}.project-card h3{font-size:1.35rem;font-weight:600;margin-bottom:16px}.project-card p{color:var(--muted);font-size:.95rem;flex:1}.project-link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-size:.9rem;font-weight:500;color:var(--text);text-decoration:none;transition:gap .2s,color .2s}.project-link:hover{gap:12px;color:var(--accent)}.project-link:after{content:"→"}.project-card.featured{grid-column:1 / -1;flex-direction:row;gap:48px;align-items:center}.project-card.featured .project-visual{flex-shrink:0;width:260px;height:180px;border-radius:6px;background:#ffffff08;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.visual-shape{width:60px;height:60px;border:2px solid var(--accent);border-radius:50%;position:relative}.visual-shape:before{content:"";position:absolute;top:50%;left:-20px;right:-20px;height:1px;background:var(--accent);opacity:.5}.visual-shape:after{content:"";position:absolute;left:50%;top:-20px;bottom:-20px;width:1px;background:var(--accent);opacity:.5}@media (max-width: 768px){.project-card.featured{flex-direction:column;align-items:flex-start}.project-card.featured .project-visual{width:100%;height:160px}nav{padding:24px}.hero,.stats-strip,.section{padding-left:24px;padding-right:24px}}.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:64px 32px;text-align:center}.contact-card h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;margin-bottom:24px}.contact-card p{color:var(--muted);margin-bottom:40px;font-size:1.05rem}.contact-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}footer{text-align:center;padding:48px 24px;border-top:1px solid var(--border);color:var(--dim);font-size:.85rem}.divider{max-width:1200px;margin:0 auto;padding:0 48px}.divider hr{border:none;border-top:1px solid var(--border)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}