:root {
  --bg: #08080c;
  --panel: #101017;
  --panel-2: #14141d;
  --text: #f4f3f7;
  --muted: #9b99a7;
  --line: rgba(255,255,255,.09);
  --accent: #ff6cae;
  --accent-2: #8b7cff;
  --shadow: 0 22px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 0%, rgba(139,124,255,.12), transparent 28rem),
    radial-gradient(circle at 10% 20%, rgba(255,108,174,.08), transparent 24rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  background: rgba(8,8,12,.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; letter-spacing: .12em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: 0 0 28px rgba(255,108,174,.25);
}
.brand strong { display:block; font-size: 14px; line-height: 1; }
.brand small { display:block; color: var(--muted); font-size: 8px; margin-top: 5px; letter-spacing: .22em; }
.top-actions { display:flex; align-items:center; gap: 12px; }
.icon-btn, .ghost-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  color: var(--text);
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 20px; transition: .2s;
}
.icon-btn:hover { transform: rotate(90deg); background: rgba(255,255,255,.08); }
.source-link { color: var(--muted); font-size: 13px; }
.source-link:hover { color: #fff; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 510px;
  display:flex; align-items:center;
  padding: 76px 7vw 70px;
  border-bottom: 1px solid var(--line);
}
.hero-copy { position:relative; z-index:3; max-width: 720px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .28em; margin:0 0 20px; }
h1 { font-size: clamp(52px, 7vw, 104px); line-height: .91; letter-spacing: -.065em; margin:0; font-weight: 800; }
h1 em { font-style: normal; background: linear-gradient(90deg,#fff,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-text { max-width: 560px; color: var(--muted); line-height:1.65; font-size: 15px; margin: 28px 0; }
.hero-buttons { display:flex; gap:10px; }
.primary-btn, .ghost-btn {
  border-radius: 999px; padding: 13px 18px; border: 1px solid transparent;
  transition:.2s;
}
.primary-btn {
  background: linear-gradient(100deg,var(--accent),#b26cff);
  color:white; font-weight:700; box-shadow:0 12px 35px rgba(255,108,174,.18);
}
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 18px 45px rgba(255,108,174,.25); }
.ghost-btn { border-color:var(--line); background:rgba(255,255,255,.035); }
.ghost-btn:hover { background:rgba(255,255,255,.08); }
.hero-grid {
  position:absolute; inset:0;
  opacity:.15;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to right, transparent, black 55%, transparent);
}
.hero-orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; }
.orb-a { width:420px; height:420px; right:7vw; top:40px; background:radial-gradient(circle at 35% 35%, rgba(255,108,174,.25), transparent 60%); box-shadow:inset 0 0 90px rgba(139,124,255,.14); }
.orb-b { width:260px; height:260px; right:20vw; bottom:-80px; background:radial-gradient(circle, rgba(139,124,255,.18), transparent 65%); }

.toolbar {
  padding: 18px 4vw;
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  position:sticky; top:76px; z-index:10;
  background:rgba(8,8,12,.8); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.filters { display:flex; gap:7px; flex-wrap:wrap; }
.filter {
  border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.025);
  padding:8px 12px; border-radius:999px; font-size:12px; transition:.18s;
}
.filter:hover { color:#fff; background:rgba(255,255,255,.06); }
.filter.active { color:#fff; border-color:rgba(255,108,174,.45); background:rgba(255,108,174,.1); }
.status { white-space:nowrap; color:var(--muted); font-size:11px; }

.gallery-wrap { padding: 30px 4vw 70px; }
.gallery {
  columns: 5 210px;
  column-gap: 15px;
}
.card { break-inside: avoid; margin:0 0 15px; opacity:0; transform:translateY(12px); animation:cardIn .55s ease forwards; }
@keyframes cardIn { to { opacity:1; transform:none; } }
.card-image {
  position:relative; overflow:hidden; border-radius:17px;
  background:var(--panel); box-shadow:var(--shadow);
  min-height:220px;
}
.card-image img {
  display:block; width:100%; height:auto; min-height:220px;
  object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.card:hover img { transform:scale(1.035); filter:saturate(1.08); }
.skeleton {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,#111119 20%,#1b1b25 35%,#111119 50%);
  background-size:200% 100%; animation:shine 1.2s infinite;
}
@keyframes shine { to { background-position:-200% 0; } }
.card-overlay {
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between;
  padding:15px; opacity:0; transition:.25s;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%);
}
.card:hover .card-overlay { opacity:1; }
.view { font-size:10px; letter-spacing:.18em; font-weight:800; }
.arrow { width:30px; height:30px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; }
.card-caption { display:flex; justify-content:space-between; gap:8px; padding:9px 3px 0; color:var(--muted); font-size:10px; }
.card-category { color:#d6d4df; text-transform:uppercase; letter-spacing:.13em; }
.card-artist { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.load-more-wrap { text-align:center; padding:30px 0 0; }
.load-more {
  border:1px solid var(--line); background:rgba(255,255,255,.035); color:#fff;
  border-radius:999px; padding:13px 19px;
}
.load-more:hover { background:rgba(255,255,255,.08); }
footer {
  display:flex; justify-content:space-between; gap:20px; padding:25px 4vw;
  color:#6e6c78; font-size:10px; letter-spacing:.12em; border-top:1px solid var(--line);
}

.lightbox {
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  background:rgba(3,3,6,.92); backdrop-filter:blur(15px);
  padding:35px;
}
.lightbox.open { display:grid; }
.lightbox-inner { max-width:min(92vw,1100px); max-height:92vh; display:flex; flex-direction:column; align-items:center; }
.lightbox img { max-width:100%; max-height:78vh; object-fit:contain; border-radius:14px; box-shadow:0 30px 100px rgba(0,0,0,.6); }
.lightbox-meta { display:flex; gap:35px; width:100%; padding:14px 4px; font-size:12px; }
.lightbox-meta > div { display:flex; flex-direction:column; gap:4px; }
.meta-label { color:#777582; font-size:9px; letter-spacing:.15em; }
.lightbox-meta a:hover { color:var(--accent); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position:absolute; border:1px solid var(--line); background:rgba(255,255,255,.06); color:#fff;
  border-radius:50%; width:42px; height:42px; font-size:28px; display:grid; place-items:center;
}
.lightbox-close { right:25px; top:22px; }
.lightbox-prev { left:24px; top:50%; }
.lightbox-next { right:24px; top:50%; }
.lightbox button:hover { background:rgba(255,255,255,.12); }

@media (max-width: 850px) {
  .hero { min-height: 470px; padding:60px 5vw; }
  .toolbar { top:76px; align-items:flex-start; flex-direction:column; }
  .status { display:none; }
  .gallery { columns:3 150px; }
}
@media (max-width: 560px) {
  .topbar { padding:0 18px; }
  .source-link { display:none; }
  .hero { padding:48px 22px 55px; }
  h1 { font-size:54px; }
  .hero-text { font-size:14px; }
  .toolbar { padding:13px 18px; }
  .gallery-wrap { padding:20px 12px 50px; }
  .gallery { columns:2 130px; column-gap:9px; }
  .card { margin-bottom:9px; }
  .card-image { border-radius:12px; }
  footer { flex-direction:column; padding:22px 18px; }
  .lightbox { padding:18px; }
  .lightbox-prev { left:8px; }
  .lightbox-next { right:8px; }
}