*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:Inter,Arial,sans-serif;background:#07090c;color:#f5f5f5}
a{color:inherit;text-decoration:none}
.menu-btn{position:fixed;right:25px;top:24px;z-index:80;width:52px;height:52px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(8,10,14,.72);backdrop-filter:blur(12px);color:#fff;font-size:19px;cursor:pointer}
.menu-btn:hover{border-color:#fff;transform:scale(1.04)}
.sidebar{position:fixed;z-index:100;left:0;top:0;height:100vh;width:300px;background:#090b0f;border-right:1px solid rgba(255,255,255,.08);padding:42px 28px;transform:translateX(-105%);transition:.4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.sidebar.open{transform:translateX(0)}
.close-btn{position:absolute;right:20px;top:20px;border:0;background:none;color:#aaa;font-size:24px;cursor:pointer}
.brand{display:flex;align-items:center;gap:13px;margin:18px 0 55px}
.brand-mark{width:42px;height:42px;border-radius:12px;background:#ff2933;display:grid;place-items:center;font-weight:900;font-size:21px}
.brand h2{font-family:Montserrat,sans-serif;font-size:22px;letter-spacing:2px}
.brand span{font-size:8px;letter-spacing:2px;color:#888}
nav{display:grid;gap:8px}
.nav-link{display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;color:#aaa;font-weight:600;transition:.25s}
.nav-link i{width:20px;text-align:center}
.nav-link:hover,.nav-link.active{background:#171b21;color:#fff}
.nav-link.active{box-shadow:inset 3px 0 #ff2933}
.socials{margin-top:auto}
.socials small{font-size:9px;letter-spacing:2px;color:#777}
.social-row{display:flex;gap:18px;margin-top:17px}
.social-row a{font-size:19px;color:#ddd;transition:.2s}
.social-row a:hover{color:#ff2933;transform:translateY(-2px)}
.side-footer{margin-top:38px;color:#777;font-size:9px;line-height:1.8;letter-spacing:1px}
.side-footer span{color:#555}
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:90;opacity:0;visibility:hidden;transition:.3s}
.menu-backdrop.show{opacity:1;visibility:visible}
main{position:relative;width:100vw;height:100vh;overflow:hidden}
.hero{height:100vh;min-height:0;position:absolute;inset:0;display:none;align-items:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.08)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.34),rgba(0,0,0,.72)),linear-gradient(0deg,rgba(0,0,0,.6),transparent 45%)}
.hero-content{position:relative;z-index:2;max-width:900px;padding:0 8vw}
.eyebrow{font-size:11px;letter-spacing:5px;color:#ff3b45;font-weight:800;margin-bottom:20px}
.hero h1{font-family:Montserrat,sans-serif;font-size:clamp(76px,14vw,190px);line-height:.82;letter-spacing:-7px}
.role{margin:25px 0 15px;font-weight:800;letter-spacing:4px;font-size:14px}.role span{color:#ff2933;margin:0 8px}
.intro{max-width:520px;color:#c3c6ca;line-height:1.7;font-size:15px}
.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{padding:14px 20px;border-radius:30px;font-weight:700;font-size:13px;transition:.25s}
.btn.primary{background:#ff2933}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,41,51,.25)}
.btn.ghost{border:1px solid rgba(255,255,255,.3)}.btn.ghost:hover{background:#fff;color:#111}
.scroll-hint{position:absolute;bottom:32px;left:8vw;color:#aaa;font-size:9px;letter-spacing:3px;z-index:2;display:flex;gap:10px;align-items:center}
.scroll-hint span{display:block;width:35px;height:1px;background:#ff2933}
.section{padding:100px 9vw;border-top:1px solid rgba(255,255,255,.08);position:absolute;inset:0;height:100vh;min-height:0;overflow:auto;display:none}
.section-label{position:absolute;top:28px;right:8vw;font-size:9px;letter-spacing:3px;color:#666}
.section h2{font-family:Montserrat,sans-serif;font-size:clamp(42px,6vw,80px);line-height:.98;letter-spacing:-3px}
.section h2 em{font-style:normal;color:#ff2933}
.section-grid,.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:start}
.about-copy{max-width:600px;color:#aeb2b8;line-height:1.9;font-size:16px}.about-copy p+p{margin-top:18px}
.mini-stats{display:flex;gap:60px;margin-top:45px}.mini-stats div{display:flex;gap:12px;align-items:center}.mini-stats strong{font-size:32px;color:#fff}.mini-stats span{font-size:9px;letter-spacing:2px;color:#666;line-height:1.5}
.work{background:#0b0e12}.work>.eyebrow{margin-top:20px}.work h2{margin-bottom:50px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid #222832;background:#0d1015;padding:32px;border-radius:16px;min-height:230px;transition:.3s}.card:hover{transform:translateY(-7px);border-color:#ff2933}
.card-icon{font-size:26px;color:#ff2933;margin-bottom:55px}.card h3{font-size:18px;margin-bottom:10px}.card p{color:#777;line-height:1.6;font-size:13px}
.skills{background:#080a0e}.skill-list{display:grid;gap:28px}.skill>div{display:flex;justify-content:space-between;margin-bottom:10px;font-size:12px}.skill b{color:#888}.skill>i{display:block;height:4px;background:#1b1f25;border-radius:4px}.skill>i span{display:block;height:100%;background:#ff2933;border-radius:4px}
.contact{background:linear-gradient(135deg,#0b0e12,#07090c)}
.contact h2{margin-bottom:55px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.contact-links{display:grid}.contact-links a{display:grid;grid-template-columns:28px 1fr 20px;align-items:center;padding:20px 0;border-bottom:1px solid #20242a;color:#bbb;transition:.2s}.contact-links a:hover{color:#fff;padding-left:8px}.contact-links a i:first-child{color:#ff2933;font-size:18px}.contact-links a i:last-child{font-size:10px;color:#555}
.contact-note{border-left:1px solid #252a31;padding-left:40px;display:flex;flex-direction:column;justify-content:center}.contact-note span{font-size:9px;letter-spacing:3px;color:#666;margin-bottom:15px}.contact-note strong{font-family:Montserrat;font-size:30px;line-height:1.2}
footer{padding:35px 9vw;display:flex;justify-content:space-between;color:#555;font-size:9px;letter-spacing:2px;border-top:1px solid #171a1f}.footer-brand{font-family:Montserrat;color:#fff;font-size:14px}
@media(max-width:800px){.sidebar{width:285px}.hero-content{padding:0 8vw}.hero h1{letter-spacing:-4px}.section{padding:95px 7vw}.section-grid,.skills-grid,.contact-grid{grid-template-columns:1fr;gap:45px}.cards{grid-template-columns:1fr}.contact-note{border-left:0;border-top:1px solid #252a31;padding:30px 0 0}.section-label{right:7vw}.scroll-hint{left:7vw}}

.section.page-active{display:block;animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.email-line{display:inline-flex;align-items:center;gap:12px;color:#ddd;font-size:15px;margin-bottom:40px;transition:.2s}
.email-line:hover{color:#ff2933}
.email-arrow{font-size:10px;color:#666}
.contact{overflow:auto}
@media(max-width:800px){
  .section{padding:85px 7vw 60px}
}

.hero.page-active{display:flex}
main>footer{display:none}
@media(max-width:800px){
  .contact{padding-top:88px;padding-bottom:40px}
  .contact h2{margin-bottom:32px}
  .email-line{margin-bottom:24px;font-size:14px}
  .contact-grid{gap:24px}
  .contact-links a{padding:16px 0}
  .contact-note{margin-top:8px}
}