*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:#121212;color:#f5f5f5;font-family:Segoe UI,Arial,sans-serif;overflow-x:hidden}html,body{max-width:100%;overflow-x:hidden}.navbar{position:fixed;top:0;width:100%;padding:18px clamp(16px,4vw,40px);background:#121212d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;z-index:1000;border-bottom:1px solid rgba(255,255,255,.05)}.navbar a{color:#ccc;text-decoration:none;margin-left:18px;font-size:14px;transition:color .3s ease}.navbar a:hover{color:#8a5cff}.navbar-brand{color:#f5f5f5;font-weight:600;text-decoration:none;font-size:16px}.navbar-brand:hover{color:#8a5cff}.section{max-width:1200px;margin:0 auto;padding:clamp(90px,12vw,140px) 20px}.section-title{font-size:clamp(28px,4vw,36px);margin-bottom:clamp(30px,5vw,50px);text-align:center}.hero{min-height:100vh;padding-top:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative}.hero h1{font-size:clamp(36px,6vw,64px);font-weight:700}.hero p{margin-top:20px;max-width:750px;font-size:clamp(15px,2vw,18px);color:#aaa;line-height:1.7}.button{margin-top:40px;padding:14px 30px;border-radius:40px;background:linear-gradient(120deg,#5f2cff,#00c6ff);background-size:200% 200%;color:#fff;font-weight:600;text-decoration:none;transition:.4s ease}.button:hover{background-position:right center;transform:scale(1.05)}.about-card{margin-top:30px;padding-left:20px;border-left:2px solid rgba(138,92,255,.3)}.about-paragraph{font-size:clamp(15px,2vw,18px);line-height:1.8;color:#ccc;margin-bottom:22px;opacity:0;transform:translateY(20px);animation:fadeUp .8s ease forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.25s}.delay-3{animation-delay:.4s}.delay-4{animation-delay:.55s}.delay-5{animation-delay:.7s}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}.skills-grid-advanced{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-left:17px}.skills-block h3{font-size:20px;margin-bottom:12px;color:#8a5cff;margin-top:40px}.skills-block li{font-size:16px;margin-bottom:8px;color:#ccc;line-height:1.6}@media(max-width:900px){.skills-grid-advanced{grid-template-columns:1fr}}.experience-timeline{margin-top:40px;border-left:2px solid rgba(138,92,255,.3);padding-left:40px}.experience-item{margin-bottom:60px}.experience-header h3{font-size:20px;color:#8a5cff}.experience-header span{font-size:14px;color:#aaa}.experience-points li{font-size:16px;margin-bottom:8px;color:#ccc}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.bento-item{padding:28px;border-radius:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .4s ease,background .4s ease}.bento-item:hover{transform:translateY(-8px);background:#ffffff14}.bento-item h3{font-size:clamp(18px,2vw,22px);margin-bottom:10px}.bento-item p{font-size:15px;color:#ccc;line-height:1.6}.bento-large{grid-column:span 2;grid-row:span 2}.project-link{display:inline-block;margin-top:14px;font-size:14px;color:#8a5cff;transition:transform .3s ease}.bento-item:hover .project-link{transform:translate(6px)}.project-page{max-width:900px;margin:0 auto;padding:clamp(100px,12vw,160px) 20px}.project-page h2{font-size:clamp(30px,4vw,40px);margin-bottom:30px;text-align:center}.project-intro{font-size:clamp(16px,2vw,18px);color:#aaa;line-height:1.8;margin-bottom:50px;text-align:center}.project-section{margin-bottom:50px}.project-section h3{font-size:clamp(18px,2.5vw,22px);color:#8a5cff;margin-bottom:14px}.project-section p{font-size:clamp(15px,2vw,17px);line-height:1.7;color:#ccc;margin-bottom:14px}.project-section ul{padding-left:18px;margin-top:10px}.project-section li{font-size:clamp(14px,1.9vw,16px);color:#ccc;margin-bottom:8px;line-height:1.6}.project-metric{margin-top:20px;padding-left:18px;border-left:3px solid rgba(138,92,255,.4);color:#ddd;font-size:16px}.project-tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px}.project-tech div{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px}.project-tech h4{font-size:14px;color:#8a5cff;margin-bottom:8px}.project-tech p{font-size:14px;color:#ccc}.project-back{display:flex;justify-content:center;margin-top:60px}@media(max-width:600px){.project-page{padding:100px 16px}.project-intro{text-align:left}}@media(max-width:1024px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-large{grid-column:span 2;grid-row:span 1}}@media(max-width:768px){.bento-grid{grid-template-columns:1fr}.bento-large{grid-column:span 1}}.floating-shape{position:absolute;border-radius:50%;background:#8a5cff;opacity:.15;filter:blur(120px)}.reveal{opacity:0;transform:translateY(50px);transition:.8s ease}.reveal.active{opacity:1;transform:translateY(0)}.footer{padding:clamp(50px,8vw,80px) 20px;text-align:center;border-top:1px solid rgba(255,255,255,.05)}.footer-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.footer-links a{color:#aaa;text-decoration:none;font-size:14px}.footer-links a:hover{color:#8a5cff}.footer-credit{margin-top:20px;font-size:13px;color:#666}body{font-size:clamp(14px,1vw,16px);line-height:1.6}h1,h2,h3,h4{line-height:1.25}p{font-size:clamp(14px,1.2vw,17px)}@media(max-width:768px){.hero{padding-top:140px;padding-left:16px;padding-right:16px}.hero p{max-width:100%}}@media(max-width:768px){.section{padding:90px 16px}}@media(max-width:480px){.section{padding:70px 14px}}@media(min-width:1400px){.bento-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:1200px){.bento-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:992px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-large{grid-column:span 2;grid-row:span 1}}@media(max-width:768px){.bento-grid{grid-template-columns:1fr}.bento-item{padding:22px}.bento-large{grid-column:span 1}}@media(max-width:768px){.project-page{padding:120px 18px}.project-section{margin-bottom:35px}.project-section h3{font-size:clamp(18px,3vw,22px)}.project-section li{font-size:clamp(14px,2.5vw,16px)}}@media(max-width:768px){.skills-block h3{font-size:18px}.skills-block li{font-size:15px}}@media(max-width:768px){.experience-timeline{padding-left:20px}.experience-header h3{font-size:18px}.experience-points li{font-size:15px}}@media(max-width:480px){.button{padding:12px 22px;font-size:14px}}@media(max-width:600px){.navbar{padding:16px 20px}.navbar a{margin-left:12px;font-size:13px}}@media(min-width:1600px){.section{max-width:1400px}.project-page{max-width:1100px}}