/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#02040f;--bg2:#030612;
  --card:#080d1f;--card2:#09101f;
  --b1:rgba(96,165,250,.1);--b2:rgba(96,165,250,.22);--b3:rgba(96,165,250,.44);
  --cyan:#60a5fa;--cyan2:#93c5fd;--blue:#3b82f6;--indigo:#6366f1;
  --neon:#00d4ff;--neon2:#0099ff;
  --text:#f0f4ff;--sub:#7a9bbf;--dim:#3d5878;--dimmer:#263a52;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease2:cubic-bezier(.34,1.56,.64,1);
  --ease3d:cubic-bezier(.23,1,.32,1);
}
html{scroll-behavior:smooth}
body{
  font-family:'Syne',sans-serif;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;min-height:100vh;line-height:1.6;
  cursor:none;
}

/* ===== CUSTOM CURSOR ===== */
#cursor{
  position:fixed;width:10px;height:10px;border-radius:50%;
  background:var(--neon);pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 20px var(--neon),0 0 40px var(--neon2);
  mix-blend-mode:screen;
}
#cursor-ring{
  position:fixed;width:32px;height:32px;border-radius:50%;
  border:1.5px solid rgba(96,165,250,.5);
  pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s,border-color .3s;
}

/* ===== 3D CANVAS BG ===== */
#bg3d{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.65}

/* ===== KEYFRAMES ===== */
@keyframes up3d{
  from{opacity:0;transform:translateY(40px) translateZ(-60px) rotateX(10deg)}
  to{opacity:1;transform:translateY(0) translateZ(0) rotateX(0)}
}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes float-a{
  0%,100%{transform:translateY(0) translateZ(0)}
  33%{transform:translateY(-20px) translateZ(15px)}
  66%{transform:translateY(10px) translateZ(-8px)}
}
@keyframes float-b{
  0%,100%{transform:translateY(0) translateZ(0)}
  33%{transform:translateY(14px) translateZ(-12px)}
  66%{transform:translateY(-12px) translateZ(8px)}
}
@keyframes float-c{
  0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}
}
@keyframes count-glow{
  0%,100%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 30px rgba(0,212,255,.6),0 0 60px rgba(0,150,255,.3)}
}
@keyframes card-in3d{
  from{opacity:0;transform:perspective(800px) translateZ(-80px) translateY(40px) rotateX(10deg)}
  to{opacity:1;transform:perspective(800px) translateZ(0) translateY(0) rotateX(0)}
}
@keyframes shimmer{
  0%{background-position:-200% center}100%{background-position:200% center}
}
@keyframes border-flow{
  0%{background-position:0% 50%}100%{background-position:200% 50%}
}
@keyframes hdr-in{
  from{opacity:0;transform:perspective(1000px) translateZ(-120px) translateY(50px) rotateX(14deg)}
  to{opacity:1;transform:perspective(1000px) translateZ(0) translateY(0) rotateX(0)}
}
@keyframes horizon-scan{
  0%{transform:translateX(-100%) skewX(-10deg);opacity:0}
  50%{opacity:1}
  100%{transform:translateX(200%) skewX(-10deg);opacity:0}
}
@keyframes stat-count-in{
  from{opacity:0;transform:translateY(20px) scale(.8)}
  to{opacity:1;transform:none}
}
@keyframes grid-move{
  from{background-position:center 0%}to{background-position:center 100%}
}

/* ===== PARTICLES CANVAS ===== */
#pCanvas{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.4}

/* ===== MAINTENANCE ===== */
#maint{display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(2,4,15,.97);backdrop-filter:blur(24px);
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}
#maint.on{display:flex}
.maint-ring{width:44px;height:44px;border:2px solid var(--b2);border-top-color:var(--neon);
  border-radius:50%;animation:rot 1.2s linear infinite;margin-bottom:1.5rem}
.maint-h{font-size:2rem;font-weight:800;color:var(--neon);margin-bottom:.5rem;letter-spacing:-.02em;text-shadow:0 0 30px rgba(0,212,255,.5)}
.maint-p{color:var(--sub);font-size:.95rem;max-width:460px;line-height:1.8}

/* ===== NAV ===== */
nav{
  position:fixed;top:0;inset-inline:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 3.5rem;
  background:rgba(2,4,15,.72);backdrop-filter:blur(28px);
  border-bottom:1px solid var(--b1);
}
nav::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  opacity:.3;animation:border-flow 4s linear infinite;
}
.nav-logo{
  font-size:1.2rem;font-weight:800;text-decoration:none;color:var(--text);
  text-shadow:0 0 20px rgba(96,165,250,.4);
  transition:text-shadow .3s;
}
.nav-logo:hover{text-shadow:0 0 30px var(--neon),0 0 60px var(--neon2)}
.nav-back{
  display:inline-flex;align-items:center;gap:.42rem;
  color:var(--sub);text-decoration:none;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;border:1px solid var(--b1);padding:.32rem .85rem;
  border-radius:7px;
  transition:all .2s;
  background:rgba(96,165,250,.03);backdrop-filter:blur(10px);
}
.nav-back svg{display:block;flex-shrink:0}
.nav-back:hover{
  color:var(--cyan2);border-color:var(--b2);
  background:rgba(96,165,250,.08);
  transform:translateX(-3px);
  box-shadow:0 0 20px rgba(96,165,250,.1);
}

/* ===== PAGE HEADER 3D ===== */
.hdr{
  padding:9rem 2rem 4rem;text-align:center;
  position:relative;overflow:hidden;z-index:10;
  perspective:1200px;transform-style:preserve-3d;
}

/* Perspective grid floor */
.hdr-bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  transform:perspective(600px) rotateX(55deg) translateY(30%) scale(2.5);
  transform-origin:50% 100%;
  mask-image:radial-gradient(ellipse 80% 50% at 50% 100%,black 30%,transparent 80%);
  animation:grid-move 8s linear infinite;
  opacity:.5;
}
.hdr-bg-grid-top{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(96,165,250,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent);
}

/* Scan line */
.hdr::before{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon),var(--cyan2),var(--neon),transparent);
  top:0;box-shadow:0 0 20px var(--neon);
  animation:horizon-scan 7s ease-in-out infinite;
  z-index:2;opacity:.5;
}

.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.oa{width:520px;height:520px;background:rgba(59,130,246,.12);top:-180px;left:-120px;animation:float-a 14s ease-in-out infinite}
.ob{width:380px;height:380px;background:rgba(99,102,241,.09);bottom:-80px;right:-60px;animation:float-b 18s ease-in-out infinite}
.oc{width:280px;height:280px;background:rgba(0,212,255,.06);top:25%;right:5%;animation:float-c 10s ease-in-out infinite}

.hdr-tag{
  position:relative;z-index:10;
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;
  border:1px solid var(--b2);border-radius:6px;padding:.3rem .85rem;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon);animation:up3d .6s var(--ease) both;
  background:rgba(0,212,255,.04);backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(0,212,255,.08);
}
.hdr-dot{
  width:5px;height:5px;border-radius:50%;background:var(--neon);
  animation:blink 2s infinite;flex-shrink:0;
  box-shadow:0 0 8px var(--neon),0 0 16px var(--neon2);
}

.hdr-h{
  position:relative;z-index:10;
  font-size:clamp(2.5rem,7vw,6rem);font-weight:800;
  line-height:1.0;letter-spacing:-.035em;
  background:linear-gradient(155deg,#fff 20%,var(--cyan2) 65%,var(--neon));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:hdr-in .9s var(--ease) .1s both;
  filter:drop-shadow(0 4px 8px rgba(0,150,255,.3));
}

.hdr-sub{
  position:relative;z-index:10;
  color:var(--sub);font-size:.92rem;max-width:520px;
  margin:.9rem auto 0;line-height:1.9;
  animation:up3d .7s var(--ease) .22s both;
}

/* Stats row */
.stats-row{
  position:relative;z-index:10;
  display:flex;justify-content:center;align-items:center;
  gap:1.8rem;flex-wrap:wrap;margin-top:2.2rem;
  animation:up3d .7s var(--ease) .35s both;
  perspective:600px;transform-style:preserve-3d;
}
.stat-item{
  text-align:center;
  transition:transform .3s var(--ease3d);
}
.stat-item:hover{transform:translateZ(20px) scale(1.05)}
.stat-num{
  font-size:2.2rem;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(135deg,#fff,var(--neon));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:count-glow 3s ease-in-out infinite;display:block;
}
.stat-lbl{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-top:.1rem}
.stat-div{width:1px;height:36px;background:linear-gradient(var(--b3),transparent);opacity:.6}

/* ===== MAIN ===== */
main{max-width:1180px;margin:0 auto;padding:1.5rem 2rem 6rem;position:relative;z-index:10}

/* ===== TOOLBAR 3D ===== */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;margin-bottom:2rem;padding:.9rem 1.3rem;
  background:rgba(8,13,31,.85);backdrop-filter:blur(20px);
  border:1px solid var(--b1);border-radius:14px;
  transform:perspective(600px) rotateX(0);
  transition:transform .3s var(--ease3d),box-shadow .3s;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.toolbar:hover{
  transform:perspective(600px) rotateX(-2deg);
  box-shadow:0 16px 50px rgba(0,0,0,.4),0 0 0 1px rgba(96,165,250,.08);
}
.toolbar-left{display:flex;align-items:center;gap:.6rem;color:var(--sub);font-size:.8rem;font-weight:600}
.toolbar-count{color:var(--neon);font-weight:800;font-size:.92rem;text-shadow:0 0 15px rgba(0,212,255,.4)}
.toolbar-right{display:flex;align-items:center;gap:.5rem}
.sort-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  background:transparent;border:1px solid var(--b1);border-radius:8px;
  padding:.32rem .7rem;font-family:'Syne',sans-serif;
  font-size:.72rem;font-weight:600;color:var(--sub);
  cursor:pointer;transition:all .2s var(--ease3d);
}
.sort-btn:hover,.sort-btn.active{
  background:rgba(0,212,255,.07);border-color:rgba(0,212,255,.2);
  color:var(--neon);
  box-shadow:0 0 15px rgba(0,212,255,.1);
}
.sort-btn svg{flex-shrink:0}

/* ===== LOADING 3D ===== */
.loading{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  padding:6rem 2rem;color:var(--sub);font-size:.88rem;
  perspective:600px;
}
.load-ring-wrap{position:relative;width:60px;height:60px}
.load-ring{
  width:60px;height:60px;border:2px solid var(--b1);
  border-top-color:var(--neon);border-radius:50%;
  animation:rot 1s linear infinite;
  box-shadow:0 0 20px rgba(0,212,255,.2);
}
.load-ring2{
  position:absolute;inset:8px;border:2px solid transparent;
  border-right-color:rgba(99,102,241,.5);border-radius:50%;
  animation:rot 1.5s linear infinite reverse;
}
.load-txt{color:var(--dim);font-size:.82rem;letter-spacing:.06em;animation:blink 1.5s ease-in-out infinite}

/* ===== EMPTY 3D ===== */
.empty{text-align:center;padding:6rem 2rem}
.empty-ic{
  width:60px;height:60px;border:1px solid var(--b2);border-radius:16px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;
  color:var(--dim);background:rgba(0,212,255,.04);
  box-shadow:0 0 20px rgba(0,212,255,.05);
  transition:transform .3s var(--ease3d);
}
.empty-ic:hover{transform:perspective(400px) rotateY(20deg) translateZ(10px)}
.empty-t{font-size:1.1rem;font-weight:700;margin-bottom:.4rem;color:var(--sub)}
.empty-d{font-size:.84rem;color:var(--dimmer);line-height:1.8}

/* ===== CARD GRID 3D ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
  perspective:1400px;
  transform-style:preserve-3d;
}

/* ===== CARD 3D ===== */
.card{
  background:linear-gradient(145deg,#0a1020,#0d1432);
  border:1px solid var(--b1);border-radius:18px;
  padding:0;overflow:hidden;position:relative;
  opacity:0;transform:perspective(800px) translateZ(-80px) translateY(40px) rotateX(10deg);
  will-change:transform,opacity;
  transition:transform .3s var(--ease3d),box-shadow .3s,border-color .3s;
}
.card.visible{animation:card-in3d .6s var(--ease3d) both}

/* 3D tilt on hover applied via JS */

/* 3D top accent line */
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),var(--indigo),transparent);
  opacity:0;transition:opacity .3s;
  animation:border-flow 2s linear infinite paused;
  box-shadow:0 0 10px var(--neon);
}
.card:hover::before{opacity:1;animation-play-state:running}

/* shimmer overlay */
.card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(0,212,255,.04) 50%,transparent 60%);
  background-size:200% auto;opacity:0;transition:opacity .3s;pointer-events:none;
}
.card:hover::after{opacity:1;animation:shimmer 1.4s ease infinite}

.card-accent{
  height:3px;
  background:linear-gradient(90deg,var(--neon2),var(--indigo),var(--neon));
  background-size:200% auto;animation:shimmer 4s linear infinite;
  opacity:.35;transition:opacity .3s;
}
.card:hover .card-accent{opacity:1}

.card-body{padding:1.8rem 1.8rem 1.6rem;transform-style:preserve-3d}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.1rem}
.card-idx-wrap{display:flex;flex-direction:column;gap:.2rem}
.card-idx{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.card-date{font-size:.67rem;color:var(--dimmer);font-weight:500;letter-spacing:.04em}
.card-badge{
  display:inline-flex;align-items:center;
  background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.12);
  border-radius:6px;padding:.18rem .55rem;
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--neon);
  box-shadow:0 0 10px rgba(0,212,255,.05);
}

.card-name{
  font-size:1.3rem;font-weight:800;letter-spacing:-.025em;margin-bottom:.75rem;
  background:linear-gradient(135deg,#fff,var(--neon));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.2;
  transform:translateZ(15px);transition:transform .3s var(--ease3d);
}
.card:hover .card-name{transform:translateZ(25px)}

.card-desc{
  color:var(--sub);font-size:.81rem;line-height:1.82;margin-bottom:1.5rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.card-foot{
  padding:.85rem 1.8rem 1.4rem;
  border-top:1px solid rgba(0,212,255,.06);
}
.card-lnk{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--sub);text-decoration:none;font-size:.76rem;font-weight:600;
  background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.08);
  padding:.42rem .9rem;border-radius:8px;
  transition:all .22s var(--ease3d);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-lnk svg{flex-shrink:0;display:block}
.card-lnk:hover{
  background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.25);
  color:var(--neon);transform:translateX(3px) translateZ(5px);
  box-shadow:0 0 15px rgba(0,212,255,.1);
}

/* Glow bubble */
.card-glow{
  position:absolute;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.1),transparent 70%);
  pointer-events:none;opacity:0;transition:opacity .3s;top:-50px;right:-50px;
}
.card:hover .card-glow{opacity:1}

/* ===== FOOTER ===== */
footer{
  background:var(--bg2);border-top:1px solid var(--b1);
  padding:2.8rem 2rem;text-align:center;position:relative;z-index:10;
}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  box-shadow:0 0 15px var(--neon);opacity:.3;
}
.f-name{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;color:var(--text);display:block;margin-bottom:.8rem;text-shadow:0 0 20px rgba(0,212,255,.3)}
.f-rule{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);margin:1.1rem auto;box-shadow:0 0 8px var(--neon)}
.f-copy{color:var(--dimmer);font-size:.78rem;line-height:2.2;font-weight:500}
.f-copy strong{color:var(--dim)}

/* ===== SCROLL REVEAL 3D ===== */
.reveal-3d{
  opacity:0;
  transform:perspective(800px) translateZ(-60px) translateY(30px) rotateX(8deg);
  transition:opacity .7s var(--ease3d),transform .7s var(--ease3d);
}
.reveal-3d.in-view{opacity:1;transform:perspective(800px) translateZ(0) translateY(0) rotateX(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  nav{padding:.9rem 1.4rem}
  .hdr{padding:7.5rem 1.4rem 3rem}
  main{padding:1.2rem 1.2rem 4rem}
  .grid{grid-template-columns:1fr}
  .stats-row{gap:1.2rem}
  .stat-div{display:none}
}
@media(max-width:480px){.toolbar{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}