html{scroll-behavior:smooth}body{margin:0}*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:#0f172a;font-family:Inter,Segoe UI,Arial,sans-serif}.portfolio{min-height:100vh}.navbar{z-index:1000;background:#0f172a;justify-content:flex-end;width:100%;padding:30px 60px;display:flex;position:fixed;top:0}.nav-links{gap:40px;list-style:none;display:flex}.nav-links button{color:#cbd5e1;cursor:pointer;background:0 0;border:none;font-size:18px}.nav-links button:hover{color:#38bdf8}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.hero h1{letter-spacing:8px;font-size:88px;font-weight:800}.intro{color:#cbd5e1;max-width:750px;margin-top:35px;font-size:24px;line-height:1.7}.action-button{color:#38bdf8;border:1px solid #38bdf8;border-radius:25px;margin-top:40px;padding:10px 25px;font-size:14px;font-weight:600;text-decoration:none}.action-button:hover{color:#0f172a;background:#38bdf8}.skills-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:35px;max-width:900px;margin-top:50px;display:flex}.skills-container span{color:#38bdf8;letter-spacing:1px;font-size:22px;font-weight:500}.contact-container{gap:25px;margin-top:50px;display:flex}.hero-nav{gap:25px;margin-top:70px;display:flex}.circle{cursor:pointer;background:0 0;border:1px solid #38bdf8;border-radius:50%;width:12px;height:12px}.circle.active{background:#38bdf8}.circle:hover{transform:scale(1.5)}@media (width<=768px){.navbar{justify-content:center;padding:20px}.nav-links{gap:20px}.hero h1{font-size:45px}.intro{font-size:18px}.skills-container{grid-template-columns:repeat(2,120px)}}