:root{
  --bg:#0a0b10;
  --text:#f5f7ff;
  --muted:#c8cbe6;
  --chip:#20223a;
  --chipActive:#ffffff;
  --chipText:#9aa0b7;
  --glass:rgba(255,255,255,.06);
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 75% -10%, #2c2cfa22, transparent 60%),
    radial-gradient(900px 500px at 5% 20%, #ff3cac22, transparent 60%),
    linear-gradient(180deg, #0a0b10 0%, #0a0b10 100%);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:14px;
  font-weight:700; text-decoration:none; cursor:pointer; user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;
}
.btn-solid{
  background: linear-gradient(90deg,#ff3cac,#784ba0,#2b86c5);
  color:#fff;
  box-shadow:0 10px 30px #784ba055;
}
.btn-solid:hover{ transform: translateY(-1px) scale(1.02) }
.btn-ghost{
  background:transparent;
  border-color:#ffffff33; color:#fff;
}
.btn-ghost:hover{ background:#ffffff10 }

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, #0a0b10e6 0%, #0a0b10cc 70%, transparent 100%);
  border-bottom:1px solid #ffffff14;
  padding:16px clamp(12px, 3vw, 32px);
}
.brand{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.brand h1{ margin:0; font-size:clamp(22px, 2.4vw, 30px) }
.spark{
  width:18px; height:18px; border-radius:999px;
  background:conic-gradient(from 180deg, #ff3cac, #784ba0, #2b86c5, #00DBDE, #FC00FF, #ff3cac);
  box-shadow:0 0 30px #ff3cac90, 0 0 30px #2b86c590 inset;
  animation: spin 4s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

.actions{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.search{
  all:unset; background:#ffffff0f; border:1px solid #ffffff1c; color:#fff;
  padding:10px 12px; border-radius:12px; width:min(440px, 60vw);
}

/* Filter chips */
.filters{ display:flex; gap:8px; flex-wrap:wrap }
.chip{
  background:var(--chip);
  color:var(--chipText);
  border:1px solid #ffffff14;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .12s ease;
}
.chip:hover{ transform: translateY(-1px) }
.chip.is-active{
  background: linear-gradient(90deg,#00DBDE,#FC00FF);
  color:#000; font-weight:800;
}

/* Hero */
.hero{
  position:relative; overflow:hidden;
  border-top:1px solid #ffffff14;
  border-bottom:1px solid #ffffff14;
  padding:48px clamp(12px,3.2vw,36px);
}
.hero-inner{ max-width:1100px; margin:0 auto }
.hero h2{ margin:0 0 10px; font-size:clamp(28px,5vw,54px) }
.hero p{ color:var(--muted); max-width:70ch; margin:0 0 18px }

.hero-orb, .hero-orb::after{
  position:absolute; border-radius:50%;
  filter:blur(40px); opacity:.35; pointer-events:none;
}
.hero-orb{
  width:360px; height:360px; right:-120px; top:-80px;
  background: radial-gradient(circle at 30% 30%, #00DBDE, #2b86c5);
}
.hero-orb.orb-2{
  width:300px; height:300px; left:-120px; bottom:-120px;
  background: radial-gradient(circle at 60% 40%, #ff3cac, #784ba0);
}

/* Gallery grid */
.gallery{
  max-width:1200px; margin:26px auto; padding:0 clamp(12px, 3.2vw, 24px);
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.card{
  position:relative; overflow:hidden; border-radius:18px; cursor:pointer;
  background:#11131f;
  border:1px solid #ffffff12;
  box-shadow:0 12px 40px #00000066;
  transform: translateZ(0);
}
.card img{
  width:100%; height:260px; object-fit:cover; display:block;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.02);
}
.card:hover img{ transform: scale(1.06) rotateZ(.2deg) }

.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65) 100%);
}

.card-info{
  position:absolute; inset:auto 0 0 0; padding:12px 12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.card-info h3{ margin:0; font-size:15px }
.pill{
  background:#00000088; border:1px solid #ffffff2a; color:#fff;
  font-size:12px; padding:4px 8px; border-radius:999px;
}

/* Lightbox dialog */
dialog#lightbox{
  width:min(980px, 92vw); padding:0; border:none; border-radius:16px; overflow:hidden;
  background:#0b0d16; color:#fff;
  box-shadow:0 40px 120px #000000cc;
}
#lightbox::backdrop{ background:rgba(3,6,14,.7) blur(2px) }
.lb-close{
  position:absolute; top:10px; right:12px;
  background:#ffffff10; border:1px solid #ffffff2a; color:#fff;
  width:32px; height:32px; border-radius:8px; cursor:pointer;
}
#lb-img{ width:100%; height:min(70vh, 520px); object-fit:contain; background:#0e1222 }
.lb-meta{ padding:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.lb-meta h3{ margin:0 }
.footer{
  max-width:1200px; margin:40px auto 80px; padding:0 24px; color:#a7acc8; font-size:12px;
  border-top:1px solid #ffffff14; padding-top:16px;
}

/* Responsive */
@media (max-width:640px){
  .actions{ flex-direction:column; align-items:stretch }
  .gallery{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) }
  .card img{ height:200px }
}