:root{
    --bg:#05050a; --card:#0e0e18; --card2:#121221;
    --purple:#7c3cff; --blue:#168cff; --text:#f4f3ff; --muted:#9998aa;
    --border:rgba(124,60,255,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;color:var(--text);font-family:Tahoma,Arial,sans-serif;
    background:
      radial-gradient(circle at 85% 5%,rgba(124,60,255,.18),transparent 28%),
      radial-gradient(circle at 10% 60%,rgba(22,140,255,.12),transparent 30%),
      var(--bg);overflow-x:hidden;
}
.navbar{background:rgba(5,5,10,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.navbar-brand{font-weight:900;font-size:1.45rem;color:#a978ff!important}
.navbar-brand span{color:#36a1ff}
.nav-link{color:#ddd!important;transition:.25s}
.nav-link:hover,.nav-link.active{color:#a978ff!important}
.navbar-toggler{border-color:#7040ff}.navbar-toggler-icon{filter:invert(1)}
.hero{padding:145px 0 85px;min-height:68vh;display:flex;align-items:center;position:relative}
.hero h1{font-size:clamp(2.3rem,5vw,4.5rem);font-weight:900;line-height:1.25}
.gradient-text{background:linear-gradient(90deg,#a55cff,#278fff,#c66cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);line-height:2;max-width:760px}
.btn-main{border:0;color:white;background:linear-gradient(135deg,var(--purple),var(--blue));padding:12px 24px;border-radius:12px;box-shadow:0 0 25px rgba(100,50,255,.2);transition:.25s}
.btn-main:hover{color:white;transform:translateY(-3px);box-shadow:0 0 32px rgba(100,50,255,.45)}
.btn-outline-custom{border:1px solid #7040ff;color:#b99aff;padding:11px 22px;border-radius:12px;transition:.25s}
.btn-outline-custom:hover{background:#7040ff;color:white}
.section-title{text-align:center;margin-bottom:48px}.section-title h2{font-weight:900}.section-title p{color:var(--muted)}
.page-banner{padding:145px 0 55px;text-align:center}
.page-banner .icon{font-size:62px;color:#8d58ff;text-shadow:0 0 30px rgba(124,60,255,.45)}
.filter-bar{background:rgba(14,14,24,.8);border:1px solid var(--border);border-radius:18px;padding:15px;margin-bottom:30px}
.filter-btn{border:1px solid #39354d;background:#11111c;color:#bbb;border-radius:10px;padding:8px 15px;margin:3px;transition:.2s}
.filter-btn.active,.filter-btn:hover{background:#7040ff;color:#fff;border-color:#7040ff}
.project-card{
    height:100%;background:linear-gradient(145deg,rgba(18,18,33,.95),rgba(10,10,18,.95));
    border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:.3s;
}
.project-card:hover{transform:translateY(-8px);border-color:#7d50ff;box-shadow:0 18px 45px rgba(65,35,180,.22)}
.project-thumb{height:190px;background:linear-gradient(135deg,#17122d,#09182d);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.project-thumb i{font-size:75px;color:#8c5aff}.project-thumb .glow{position:absolute;width:170px;height:170px;border-radius:50%;background:#703cff;filter:blur(70px);opacity:.25}
.project-body{padding:23px}.project-body p{color:var(--muted);line-height:1.9}.tags span{display:inline-block;background:#191729;color:#bba7ff;border:1px solid #302557;border-radius:30px;padding:4px 9px;font-size:.78rem;margin:3px}
.project-footer{display:flex;justify-content:space-between;align-items:center;margin-top:17px}
.info-card{height:100%;background:rgba(14,14,24,.8);border:1px solid var(--border);border-radius:20px;padding:25px}
.info-card .big-icon{font-size:35px;color:#7f4dff;margin-bottom:15px}.info-card p{color:var(--muted);line-height:1.9}
.stat{padding:25px;border:1px solid var(--border);border-radius:18px;background:rgba(14,14,24,.7);text-align:center}.stat h3{font-size:2rem;margin:0}.stat p{color:var(--muted);margin:5px 0 0}
.timeline{border-right:2px solid #5632a6;padding-right:25px}.timeline-item{position:relative;margin-bottom:28px}.timeline-item:before{content:"";position:absolute;right:-34px;top:5px;width:15px;height:15px;border-radius:50%;background:#7c3cff;box-shadow:0 0 15px #7c3cff}
.search-box{background:#0d0d17;border:1px solid #2d2745;color:#eee;border-radius:12px;padding:11px 15px;width:100%;outline:none}.search-box:focus{border-color:#7140ff;box-shadow:0 0 0 3px rgba(113,64,255,.12)}
footer{margin-top:80px;padding:30px 0;border-top:1px solid var(--border);background:#030306;color:#777}
@media(max-width:767px){.hero{padding-top:125px}.page-banner{padding-top:125px}.hero h1{font-size:2.45rem}.project-thumb{height:170px}}