*{margin:0;padding:0;box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0a0a0a,#111111,#1a1a1a);color:#e0e0e0;overflow-x:hidden}.navbar{background:rgb(15 15 15 / .95);backdrop-filter:blur(10px);border-bottom:1px solid rgb(255 255 255 / .1)}.navbar-brand{font-weight:700;font-size:1.5rem;background:linear-gradient(45deg,#ffffff,#aaaaaa);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.nav-link{color:#e0e0e0!important;transition:all 0.3s ease;position:relative}.nav-link:hover{color:#ffffff!important;transform:translateY(-2px)}.nav-link::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:50%;background:linear-gradient(45deg,#ffffff,#aaaaaa);transition:all 0.3s ease;transform:translateX(-50%)}.nav-link:hover::after{width:80%}.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:clip}.hero::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgb(255 255 255 / .05),transparent);border-radius:50%;top:-250px;right:-250px;animation:float 6s ease-in-out infinite}.hero::after{content:'';position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgb(170 170 170 / .05),transparent);border-radius:50%;bottom:-200px;left:-200px;animation:float 8s ease-in-out infinite reverse}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}.hero-content{z-index:1}.hero h1{font-size:4.5rem;font-weight:900;margin-bottom:1rem;background:linear-gradient(45deg,#ffffff,#cccccc,#999999);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text;animation:gradient 3s ease infinite;background-size:200% 200%}@keyframes gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}.hero p{font-size:1.4rem;color:#b0b0b0;margin-bottom:2rem;line-height:1.8}.hero-stats{display:flex;gap:3rem;margin-top:3rem}.stat-item{text-align:center}.stat-number{font-size:2.5rem;font-weight:800;background:linear-gradient(45deg,#ffffff,#cccccc);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text;display:block}.stat-label{color:#888;font-size:.9rem;margin-top:.5rem}.glass-card{background:rgb(255 255 255 / .03);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgb(255 255 255 / .08);padding:2rem;transition:all 0.4s ease;box-shadow:0 8px 32px rgb(0 0 0 / .4)}.glass-card:hover{transform:translateY(-10px);box-shadow:0 15px 45px rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .2)}.btn-primary{background:linear-gradient(45deg,#222222,#444444);border:none;padding:14px 40px;border-radius:50px;font-weight:600;transition:all 0.3s ease;box-shadow:0 5px 25px rgb(0 0 0 / .3);color:#fff}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 35px rgb(255 255 255 / .1);background:linear-gradient(45deg,#444444,#222222)}.btn-outline{background:#fff0;border:2px solid #ccc;padding:12px 35px;border-radius:50px;font-weight:600;transition:all 0.3s ease;color:#ccc}@media (min-width:576px){.btn-outline{margin-left:1rem}}.btn-outline:hover{background:#ccc;color:#0a0a0a;transform:translateY(-3px)}.section-title{font-size:2.8rem;font-weight:800;margin-bottom:3rem;text-align:center;background:linear-gradient(45deg,#ffffff,#aaaaaa);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.feature-icon{width:80px;height:80px;background:linear-gradient(135deg,#333333,#555555);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:1.5rem;transition:all 0.3s ease}.glass-card:hover .feature-icon{transform:rotateY(180deg)}.project-card{background:rgb(255 255 255 / .03);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgb(255 255 255 / .08);overflow:hidden;transition:all 0.4s ease;height:100%;cursor:pointer}.project-card:hover{transform:translateY(-10px);box-shadow:0 15px 45px rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .2)}.project-img{width:100%;height:220px;background:linear-gradient(135deg,#333333,#555555);display:flex;align-items:center;justify-content:center;font-size:3.5rem;transition:all 0.3s ease;position:relative;overflow:hidden}.project-img::before{content:'';position:absolute;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgb(255 255 255 / .1),transparent);transform:translateX(-100%);transition:0.5s}.project-card:hover .project-img::before{transform:translateX(100%)}.project-content{padding:1.5rem}.project-tag{display:inline-block;background:rgb(255 255 255 / .1);color:#ccc;padding:5px 15px;border-radius:20px;font-size:.85rem;margin:5px;border:1px solid rgb(255 255 255 / .2)}.course-card{background:rgb(255 255 255 / .03);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgb(255 255 255 / .08);padding:2rem;transition:all 0.4s ease;display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;cursor:pointer}.course-card:hover{transform:translateX(10px);box-shadow:0 10px 40px rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .2)}.course-icon{width:80px;height:80px;background:linear-gradient(135deg,#444444,#666666);border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:2rem;flex-shrink:0}.course-info{flex:1}.course-level{display:inline-block;background:rgb(255 255 255 / .1);color:#aaa;padding:3px 12px;border-radius:15px;font-size:.8rem;margin-top:.5rem}.about-section{background:rgb(255 255 255 / .02);padding:4rem 0}.about-img{width:100%;height:400px;background:linear-gradient(135deg,#333333,#555555,#777777);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:5rem;box-shadow:0 15px 50px rgb(255 255 255 / .1)}.skill-badge{display:inline-block;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .2);padding:8px 20px;border-radius:25px;margin:5px;transition:all 0.3s ease;color:#ccc}.skill-badge:hover{background:rgb(255 255 255 / .15);transform:scale(1.05);color:#fff}.blog-card{background:rgb(255 255 255 / .03);backdrop-filter:blur(10px);border-radius:20px;border:1px solid rgb(255 255 255 / .08);overflow:hidden;transition:all 0.4s ease;height:100%;cursor:pointer}.blog-card:hover{transform:translateY(-10px);box-shadow:0 15px 45px rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .2)}.blog-img{width:100%;background:linear-gradient(135deg,#444444,#666666);display:flex;align-items:center;justify-content:center;font-size:3rem}.blog-content{padding:1.5rem}.blog-meta{display:flex;gap:1rem;color:#888;font-size:.85rem;margin-bottom:1rem}.blog-category{display:inline-block;background:rgb(255 255 255 / .1);color:#aaa;padding:5px 15px;border-radius:20px;font-size:.85rem;margin-bottom:1rem}.detail-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .95);z-index:9999;overflow-y:auto;padding:2rem}.detail-content{max-width:900px;margin:2rem auto;background:rgb(20 20 20 / .95);backdrop-filter:blur(20px);border-radius:20px;border:1px solid rgb(255 255 255 / .1);padding:3rem;position:relative}.close-btn{position:absolute;top:1rem;right:1rem;background:rgb(255 255 255 / .1);border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.5rem;transition:all 0.3s ease}.close-btn:hover{background:rgb(255 255 255 / .3);transform:rotate(90deg)}footer{background:rgb(15 15 15 / .95);backdrop-filter:blur(10px);border-top:1px solid rgb(255 255 255 / .1);padding:2rem 0;margin-top:5rem}@media (max-width:768px){.hero h1{font-size:2.5rem}.hero p{font-size:1rem}.hero-stats{gap:1.5rem}.stat-number{font-size:1.8rem}}.hero::before,.hero::after{max-width:100vw;max-height:100vw}.hero{min-height:calc(100vh - 80px);padding-top:80px}@supports (-webkit-touch-callout:none){.hero{min-height:calc(100svh - 80px)}}