body{background-color:#111;color:#f4f4f4;font-family:'Barlow',sans-serif}header.hero{position:relative;background:url('/images/studio-jb.webp')center center/cover no-repeat;color:#fff;padding:120px 20px;text-align:center;overflow:hidden}header.hero::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1}header.hero .container{position:relative;z-index:2}header.hero h1,header.hero p{text-shadow:2px 2px 6px rgba(0,0,0,0.8)}header.hero h1{font-size:3rem;font-weight:700}header.hero p.lead{font-size:1.25rem}header.hero p.fst-italic{font-size:1rem;opacity:0.85}.animated{opacity:0}@keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideLeft{to{opacity:1;transform:translateX(0)}}@keyframes fadeSlideRight{to{opacity:1;transform:translateX(0)}}@keyframes fadePop{0%{opacity:0;transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}@keyframes flyInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes jumpPulse{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(2px)}}.animate-name{animation:fadeSlideUp 1s ease-in-out forwards;animation-delay:.5s;transform:translateY(20px)}.animate-title{animation:fadeSlideLeft 1s ease-in-out forwards;animation-delay:1s;transform:translateX(-20px)}.animate-summary{animation:fadeSlideRight 1s ease-in-out forwards;animation-delay:1.5s;transform:translateX(20px)}.animate-cta{opacity:0;animation:fadePop .6s ease-out forwards;animation-delay:2s;transform:scale(0.95)}.animate-skills-heading{animation:fadeSlideLeft 1s ease-in-out forwards;animation-delay:1.5s;transform:translateX(-20px)}.animate-skill-boxes{animation:fadeSlideUp 1s ease-in-out forwards;animation-delay:2.5s;transform:translateY(20px)}.animate-location{opacity:0;transform:translateX(-30px)}.in-view.animate-location{animation:flyInLeft 1s ease-out forwards;animation-delay:3.5s;opacity:1;transform:translateX(0)}.jumpy-contact{animation:jumpPulse .8s ease-in-out infinite;animation-delay:6s;animation-fill-mode:both}.cta-buttons a{text-decoration:none;color:#fff;background:rgba(255,255,255,0.08);padding:12px 28px;margin:5px;border-radius:16px;transition:background .3s ease,transform .2s ease;display:inline-flex;align-items:center;gap:10px;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.15)}.cta-buttons a i{color:#2bc4ad;font-size:1.2rem;transition:color .3s ease}.cta-buttons a:hover{background:rgba(255,255,255,0.18);transform:translateY(-2px)}section{padding:60px 20px}h2{border-bottom:2px solid #333;padding-bottom:10px}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.skills-grid i{margin-right:10px;font-size:1.5rem}.skills-grid div:nth-child(1) i{color:#5dade2}.skills-grid div:nth-child(2) i{color:#2bc4ad}.skills-grid div:nth-child(3) i{color:#f39c12}.skills-grid div:nth-child(4) i{color:#ccc}.skills-grid div:nth-child(5) i{color:#6c5ce7}.skills-grid div:nth-child(6) i{color:#e67e22}.skills-grid div:nth-child(7) i{color:#9b59b6}.skills-grid div:hover i{text-shadow:0 0 6px rgba(255,255,255,0.2)}.fa-location-dot,.fa-map-pin{color:#e74c3c;margin-right:8px}.portfolio-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.portfolio-images figure{transform:translateY(0);transition:transform .3s ease;will-change:transform;overflow:hidden;position:relative;margin:0}.portfolio-images img{width:100%;border-radius:8px;object-fit:cover}.portfolio-images figcaption{margin-top:8px;font-size:.9rem;color:#aaa;text-align:center}.profile-img{max-width:300px;width:100%;margin:0 0 20px 20px;float:right;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.4)}@media(max-width:768px){.profile-img{float:none;display:block;margin:0 auto 20px auto}}footer{background:#000;text-align:center;padding:40px 20px;color:#888}@media(max-width:768px){.animated:not(.animate-name):not(.animate-title):not(.animate-summary):not(.animate-cta),.animate-skills-heading,.animate-skill-boxes,.animate-location,.animate-portfolio-heading,.animate-portfolio-grid{opacity:1!important;transform:none!important;animation:none!important}}@media(max-width:768px){.animate-skills-heading,.animate-skill-boxes{opacity:1!important;transform:none!important;animation:none!important}}