:root{--bg: #0b0b0d;--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.65);--line: rgba(255,255,255,.1);--accent: #f5c542;--accentLine: rgba(245,197,66,.55);--maxw: 1100px;--radius: 16px;--radius2: 22px;--shadow: 0 16px 45px rgba(0,0,0,.55)}.gridBg{position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(245,197,66,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(245,197,66,.08) 1px,transparent 1px),radial-gradient(900px 600px at 20% 10%,rgba(245,197,66,.1),transparent 55%),radial-gradient(900px 600px at 80% 20%,rgba(245,197,66,.06),transparent 55%);background-size:140px 140px,140px 140px,auto,auto;opacity:.45}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:#f5f5f7;color:#1d1d1f;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}.app{min-height:100vh;position:relative}.main{width:min(100%,var(--maxw));margin:0 auto;padding:92px 16px 60px}.stack{display:flex;flex-direction:column;gap:24px}.muted{color:#86868b}.list{margin:0;padding-left:18px;line-height:1.9;color:#1d1d1f}.navbar{position:fixed;top:0;left:0;right:0;z-index:50;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:#ffffffb8;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000a,0 8px 16px #00000005;transition:all .3s ease}.navInner{width:min(100%,var(--maxw));margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-weight:900;letter-spacing:-.5px;color:#1d1d1f;font-size:20px;transition:color .3s ease}.brand:hover{color:#d14d4d}.navLinks a{padding:8px 14px;text-decoration:none;font-weight:600;font-size:14px;color:#1d1d1f;border-bottom:2px solid transparent;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;text-transform:uppercase;letter-spacing:.3px}.navLinks a:after{content:"";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:#d14d4d;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translate(-50%)}.navLinks a:hover:after{width:100%}.navLinks a:hover{color:#d14d4d}.navLinks a.active{color:#d14d4d;border-bottom-color:#d14d4d}.section{margin-top:4px}.sectionHead{display:flex;align-items:center;gap:12px;margin-bottom:20px}.sectionTitle{margin:0;color:#1d1d1f;letter-spacing:-.3px;font-size:28px}.sectionLine{height:1px;flex:1;background:linear-gradient(90deg,rgba(0,0,0,.1),transparent)}.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 2px 8px #0000000a;padding:24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000014;border-color:#0000001a}.hero{min-height:70vh;display:grid;place-items:center;text-align:center;position:relative}.heroInner{max-width:860px;animation:fadeInUp .8s cubic-bezier(.16,1,.3,1)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.heroBlob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}.heroBlob--left{top:10%;left:5%;width:120px;height:120px;background:radial-gradient(circle,rgba(209,77,77,.08) 0%,transparent 70%);filter:blur(40px);animation:float 6s ease-in-out infinite}.heroBlob--right{bottom:15%;right:8%;width:150px;height:150px;background:radial-gradient(circle,rgba(29,29,31,.06) 0%,transparent 70%);filter:blur(50px);animation:float 8s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.heroContent{position:relative;z-index:1}.heroTitleUnderline{position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:60%;height:3px;background:linear-gradient(90deg,transparent,#d14d4d,transparent);opacity:.3;border-radius:2px}.heroAnimated{animation:fadeInUp .6s ease-out both}.heroAnimated--delay1{animation-delay:.1s}.heroAnimated--delay2{animation-delay:.2s}.heroAnimated--delay3{animation-delay:.3s}.heroAnimated--delay4{animation-delay:.4s}.scrollIndicator{margin-top:60px;animation:fadeIn 1s ease-out 1s both,bounce 2s ease-in-out 1s infinite}.scrollIndicatorBox{width:24px;height:36px;border:2px solid rgba(29,29,31,.2);border-radius:12px;margin:0 auto;position:relative}.scrollIndicatorDot{width:4px;height:8px;background:#d14d4d;border-radius:2px;position:absolute;top:6px;left:50%;transform:translate(-50%);animation:scroll 2s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes scroll{0%{top:6px;opacity:1}to{top:18px;opacity:0}}.btn svg{position:relative;z-index:1}.btnIcon{display:inline-flex;align-items:center;gap:6px}.btn{position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.heroKicker{color:#86868b;font-weight:600;letter-spacing:.5px;margin-bottom:12px;font-size:14px;text-transform:uppercase}.heroTitle{margin:0 0 16px;font-size:clamp(40px,7vw,72px);color:#1d1d1f;font-weight:800;letter-spacing:-1px;line-height:1.1}.heroRole{font-size:clamp(18px,2.8vw,32px);font-weight:600;color:#1d1d1f;letter-spacing:-.5px}.cursor{color:#d14d4d;animation:blink 1s step-end infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.heroDesc{margin:20px auto 0;color:#86868b;line-height:1.7;font-size:17px;max-width:600px}.heroBtns{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn{padding:12px 24px;border-radius:24px;border:1.5px solid #1d1d1f;background:transparent;color:#1d1d1f;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);letter-spacing:.2px;box-shadow:0 2px 4px #0000000a}.btn:hover{background:#1d1d1f;color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px #0000001f,0 2px 4px #00000014}.btn:active{transform:translateY(0);box-shadow:0 2px 4px #00000014}.btnSolid{background:#d14d4d;border-color:#d14d4d;color:#fff;box-shadow:0 4px 8px #d14d4d26,0 2px 4px #00000014}.btnSolid:hover{background:#b93e3e;border-color:#b93e3e;box-shadow:0 8px 16px #d14d4d40,0 4px 8px #0000001f}.btn:disabled{opacity:.55;cursor:not-allowed}.skillsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.skillBox{border-radius:16px;border:1.5px solid rgba(0,0,0,.08);background:#fff;padding:20px 16px;display:grid;place-items:center;min-height:100px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000000a}.skillBox:hover{transform:translateY(-4px);border-color:#0000001f;box-shadow:0 8px 20px #00000014;background:#fafafa}.skillText{font-weight:700;color:#1d1d1f;font-size:15px}.skillCategoriesContainer{display:flex;flex-direction:column;gap:32px}.skillCategory{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:24px;box-shadow:0 2px 8px #0000000a;transition:all .3s ease}.skillCategory:hover{box-shadow:0 8px 20px #00000014;transform:translateY(-2px)}.skillCategoryTitle{margin:0 0 20px;font-size:18px;font-weight:700;color:#d14d4d;letter-spacing:-.3px;display:flex;align-items:center;gap:12px}.skillCategoryTitle:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(209,77,77,.3),transparent)}.skillCategory .skillsGrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.skillCategory .skillBox{min-height:80px;padding:16px 12px}.projectList{display:grid;gap:24px}.projectCard{border-radius:20px;border:1.5px solid rgba(0,0,0,.06);background:#fff;padding:20px;box-shadow:0 2px 12px #0000000a,0 8px 24px #00000005;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.projectCard:hover{transform:translateY(-6px);box-shadow:0 16px 32px #0000001a,0 4px 8px #0000000d;border-color:#0000001f}.projectImageWrap{border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.06);background:#f5f5f7;box-shadow:0 4px 12px #0000000f,inset 0 1px 2px #0000000a;transition:all .3s ease}.projectCard:hover .projectImageWrap{box-shadow:0 8px 20px #0000001a,inset 0 2px 4px #0000000f}.projectImage{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}.projectCard:hover .projectImage{transform:scale(1.04)}.projectBody{margin-top:18px}.projectTitle{margin:0;font-size:22px;font-weight:700;color:#1d1d1f;letter-spacing:-.3px;transition:color .3s ease}.projectCard:hover .projectTitle{color:#d14d4d}.projectStack{margin-top:8px;color:#86868b;font-size:14px;line-height:1.6}.pillRow{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.pill{font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;padding:6px 12px;color:#1d1d1f;background:#f5f5f7;transition:all .2s ease;font-weight:500;box-shadow:0 1px 2px #0000000a}.pill:hover{border-color:#d14d4d;background:#fff0f0;color:#d14d4d;transform:translateY(-1px);box-shadow:0 2px 4px #d14d4d26}.bullets{margin:14px 0 0;padding-left:20px;color:#86868b;line-height:1.8;font-size:15px}.projectBtns{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}.projectDetail{display:grid;gap:32px}.projectDetail__media{width:100%}.projectDetail__info{display:flex;flex-direction:column;gap:8px}.galleryThumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:4px 0}.galleryThumb{width:72px;height:72px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid rgba(0,0,0,.1);opacity:.6;transition:all .2s ease;flex-shrink:0}.galleryThumb:hover{opacity:.85;border-color:#0003}.galleryThumb.active{opacity:1;border-color:#d14d4d;border-width:3px}.infoSection{margin-top:20px}.infoSection__title{margin:0 0 10px;font-size:16px;font-weight:600;color:#1d1d1f;letter-spacing:-.02em}.footer{margin-top:60px;padding:20px 0;text-align:center;font-size:13px;color:#86868b;border-top:1px solid rgba(0,0,0,.08)}
