:root{--primary:#6c5ce7;--primary-light:#8577f1;--primary-dark:#4834d4;--secondary:#0984e3;--success:#00b894;--danger:#ff7675;--warning:#fdcb6e;--dark:#1e272e;--darker:#161a1e;--light:#f5f6fa;--gray:#636e72;--glass:rgba(255,255,255,.15);--glass-dark:rgba(0,0,0,.2);--border:rgba(255,255,255,.18);--gradient-bg:linear-gradient(135deg,#1e272e 0%,#2d3436 100%)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--gradient-bg);color:var(--light);min-height:100vh;overflow-x:hidden}

/* Particles */
.particles-container{position:fixed;inset:0;z-index:-1;overflow:hidden}
.particle{position:absolute;background:rgba(108,92,231,.4);border-radius:50%;filter:blur(1px);pointer-events:none;animation:float-particle linear infinite}
@keyframes float-particle{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(100px);opacity:0}}

/* Hero */
.hero{position:relative;padding:180px 5% 100px;text-align:center;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(108,92,231,.1) 0%,transparent 60%);z-index:-1}
.hero-content{max-width:900px;margin:0 auto;position:relative}
.hero-title{font-size:3.5rem;font-weight:800;margin-bottom:25px;background:linear-gradient(to right,#fff 0%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px;line-height:1.2}
.hero-subtitle{font-size:1.3rem;color:rgba(255,255,255,.8);max-width:700px;margin:0 auto 40px;line-height:1.6}

/* Search */
.search-container{max-width:600px;margin:0 auto 60px;position:relative}
.search-box{width:100%;padding:18px 25px;border-radius:50px;border:none;background:rgba(30,39,46,.7);backdrop-filter:blur(10px);border:1px solid var(--border);color:#fff;font-size:1rem;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:all .3s cubic-bezier(.25,.8,.25,1);padding-left:60px}
.search-box:focus{outline:none;box-shadow:0 15px 40px rgba(0,0,0,.3),0 0 0 2px var(--primary-light)}
.search-icon{position:absolute;left:25px;top:50%;transform:translateY(-50%);color:var(--primary-light);font-size:1.2rem}

/* Filters */
.filter-buttons{display:flex;justify-content:center;gap:15px;margin-bottom:50px;flex-wrap:wrap}
.filter-button{padding:10px 20px;border-radius:50px;background:rgba(30,39,46,.7);border:1px solid var(--border);color:var(--light);font-weight:500;cursor:pointer;transition:all .3s;font-size:.9rem}
.filter-button:hover,.filter-button.active{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px rgba(108,92,231,.4)}

/* Updates */
.updates-container{max-width:1200px;margin:0 auto;padding:0 5% 80px}
.timeline{position:relative;max-width:1000px;margin:0 auto;padding:40px 0}
.timeline::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:4px;height:100%;border-radius:10px;background:linear-gradient(to bottom,var(--primary),var(--secondary))}
.update-card{position:relative;width:calc(50% - 40px);padding:30px;margin-bottom:40px;background:rgba(30,39,46,.7);border-radius:15px;backdrop-filter:blur(10px);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.1);transition:all .4s cubic-bezier(.25,.8,.25,1);opacity:0;transform:translateY(30px)}
.update-card:nth-child(odd){left:0;animation:fadeInUp .6s .4s forwards}
.update-card:nth-child(even){left:calc(50% + 40px);animation:fadeInUp .6s .6s forwards}
.update-card::before{content:'';position:absolute;top:30px;width:20px;height:20px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(108,92,231,.2);z-index:1}
.update-card:nth-child(odd)::before{right:-50px}
.update-card:nth-child(even)::before{left:-50px}
.update-card:hover{transform:translateY(-10px) scale(1.02)!important;box-shadow:0 15px 40px rgba(0,0,0,.3);border-color:var(--primary-light)}
.update-date{display:inline-block;padding:6px 15px;background:rgba(108,92,231,.2);color:var(--primary-light);border-radius:50px;font-size:.85rem;font-weight:600;margin-bottom:20px}
.update-title{font-size:1.5rem;font-weight:700;margin-bottom:15px;color:#fff;display:flex;align-items:center;gap:12px}
.update-title i{color:var(--primary);font-size:1.8rem}
.update-content{color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:20px}
.update-features{margin-top:25px}
.feature-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;padding-left:12px;border-left:2px solid var(--primary);transition:all .3s}
.feature-item:hover{border-left-color:var(--success);transform:translateX(5px)}
.feature-item i{color:var(--success);margin-top:3px;flex-shrink:0;font-size:1.1rem}
.feature-item span{flex:1}
.version-badge{position:absolute;top:25px;right:25px;padding:6px 15px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border-radius:50px;font-size:.85rem;font-weight:700;box-shadow:0 5px 15px rgba(108,92,231,.3)}

/* Load more */
.load-more{display:block;margin:50px auto 0;padding:12px 30px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 5px 20px rgba(108,92,231,.5)}
.load-more:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(108,92,231,.7)}
.hidden{display:none !important}


.footer {
  background: var(--darker);
  padding: 100px 5% 50px;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.footer-content {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 50px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s 0.2s forwards;
}

.footer-logo-img {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 20px rgba(108, 92, 231, 0.5);
}

.footer-logo-img i {
  font-size: 1.3rem;
  color: white;
}

.footer-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(to right, white 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-about {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin-bottom: 25px;
  font-size: 1.05rem;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s 0.3s forwards;
}

.footer-social {
  display: flex;
  gap: 18px;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s 0.4s forwards;
}

.social-icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.social-icon:hover {
  background: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.5);
}

.footer-links h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: white;
  transform: translateY(20px);
  opacity: 0;
}

.footer-links:nth-child(2) h3 { animation: fadeInUp 0.6s 0.3s forwards; }
.footer-links:nth-child(3) h3 { animation: fadeInUp 0.6s 0.4s forwards; }
.footer-links:nth-child(4) h3 { animation: fadeInUp 0.6s 0.5s forwards; }

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 15px;
  transform: translateY(20px);
  opacity: 0;
}

.footer-links:nth-child(2) li:nth-child(1) { animation: fadeInUp 0.6s 0.4s forwards; }
.footer-links:nth-child(2) li:nth-child(2) { animation: fadeInUp 0.6s 0.5s forwards; }
.footer-links:nth-child(2) li:nth-child(3) { animation: fadeInUp 0.6s 0.6s forwards; }
.footer-links:nth-child(2) li:nth-child(4) { animation: fadeInUp 0.6s 0.7s forwards; }

.footer-links:nth-child(3) li:nth-child(1) { animation: fadeInUp 0.6s 0.5s forwards; }
.footer-links:nth-child(3) li:nth-child(2) { animation: fadeInUp 0.6s 0.6s forwards; }
.footer-links:nth-child(3) li:nth-child(3) { animation: fadeInUp 0.6s 0.7s forwards; }
.footer-links:nth-child(3) li:nth-child(4) { animation: fadeInUp 0.6s 0.8s forwards; }

.footer-links:nth-child(4) li:nth-child(1) { animation: fadeInUp 0.6s 0.6s forwards; }
.footer-links:nth-child(4) li:nth-child(2) { animation: fadeInUp 0.6s 0.7s forwards; }
.footer-links:nth-child(4) li:nth-child(3) { animation: fadeInUp 0.6s 0.8s forwards; }

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
}

.footer-links a:hover {
  color: var(--primary-light);
  transform: translateX(5px);
}

.footer-bottom {
  text-align: center;
  margin-top: 80px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s 0.6s forwards;
}

/* Animations */
@keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.floating {
  animation: float 4s ease-in-out infinite;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
/* Misc */
@keyframes fadeInUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.floating{animation:float 4s ease-in-out infinite}
.scroll-indicator{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:100;color:#fff;display:flex;flex-direction:column;align-items:center;opacity:.7;transition:all .3s}
.scroll-indicator:hover{opacity:1;transform:translateX(-50%) translateY(-5px)}
.scroll-text{margin-bottom:10px;font-size:.8rem;font-weight:500}
.scroll-icon{animation:bounce 2s infinite}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}

/* Responsive timeline */
@media (max-width:900px){
  .timeline::before{left:40px}
  .update-card{width:calc(100% - 80px);left:40px !important}
  .update-card::before{left:-39px !important}
}
@media (max-width:1200px){.hero-title{font-size:3rem}}
@media (max-width:992px){
  .hero{padding:150px 5% 80px}
  .hero-title{font-size:2.5rem}
  .hero-subtitle{font-size:1.1rem}
}
@media (max-width:768px){
  .hero-title{font-size:2.2rem}
  .search-box{padding:15px 20px 15px 55px}
  .filter-buttons{gap:10px}
  .filter-button{padding:8px 15px;font-size:.85rem}
  .update-card{padding:25px}
  .update-title{font-size:1.3rem}
}
@media (max-width:576px){
  .hero{padding:130px 5% 60px}
  .hero-title{font-size:1.8rem}
  .hero-subtitle{font-size:1rem}
  .footer-links{gap:15px}
}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--darker)}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}