:root{
  --bg:#0a0a0b;
  --panel:#111117;
  --muted:#a5a6af;
  --text:#f6f7fb;
  --brand:#ff3cac;
  --brand2:#784ba0;
  --brand3:#2b86c5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.7);backdrop-filter:blur(8px);border-bottom:1px solid #1c1c23}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;letter-spacing:.5px;font-size:22px}
.logo span{background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{margin:0 10px;padding:8px 10px;border-radius:10px}
.nav a:hover{background:#171722}
.badge{background:#201a2b}
.actions{display:flex;gap:8px}
.icon-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;border:1px solid #2a2a37;border-radius:12px;padding:8px;cursor:pointer}
.icon-btn:hover{background:#1a1a26}
.hero{position:relative;min-height:70vh;display:grid;place-items:center;overflow:hidden}
.hero.small{min-height:36vh}
.hero .hero-inner{text-align:center;position:relative;z-index:2}
.hero h1{font-size:clamp(36px,6vw,68px);line-height:1.05;margin:10px 0}
.hero h1 span{background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:18px}
.hero-ctas{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{border:1px solid #2c2c39;border-radius:14px;padding:10px 16px;cursor:pointer;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3));border:none;color:white}
.btn.ghost{background:transparent}
.btn.tiny{padding:6px 10px;border-radius:10px}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg .gradient{position:absolute;inset:-10%;background:radial-gradient(60% 60% at 50% 30%,rgba(255,60,172,.25),transparent 60%),radial-gradient(40% 40% at 80% 80%,rgba(43,134,197,.25),transparent 60%);filter:blur(40px)}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;mix-blend:screen}
.categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:-60px;position:relative;z-index:2}
.card{background:linear-gradient(180deg,#12121a,#0f0f14);border:1px solid #1f1f2a;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card .thumb{height:160px;background:#171722;display:grid;place-items:center}
.thumb.album{background:linear-gradient(120deg,#171722,#1b1424)}
.thumb.merch{background:linear-gradient(120deg,#171722,#121a24)}
.thumb.characters{background:linear-gradient(120deg,#171722,#1a1a1a)}
.thumb.limited{background:linear-gradient(120deg,#171722,#201a2b)}
.card-body{padding:14px 16px}
.strip{margin:32px auto}
.strip-inner{display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap;border:1px dashed #2a2a37;border-radius:16px;padding:12px 16px;background:#101016}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:12px 2px}
.section-head .link{color:var(--muted)}
.products .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.product-thumb{position:relative}
.product-thumb span{position:absolute;bottom:10px;left:10px;font-weight:700;font-size:14px;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:10px}
.price{opacity:.9;margin:8px 0}
.site-footer{margin-top:60px;border-top:1px solid #1c1c23;background:#0b0b10}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:24px;padding:30px 0}
.footer-grid h4{margin:.3rem 0 0.6rem}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin:.35rem 0}
.newsletter{display:flex;gap:8px}
.newsletter input{flex:1;padding:10px;border-radius:12px;border:1px solid #2a2a37;background:#0f0f14;color:var(--text)}
.newsletter button{padding:10px 14px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3));color:white;font-weight:700}
.socials{display:flex;gap:10px;margin-top:10px}
.socials a{display:grid;place-items:center;width:36px;height:36px;border:1px solid #2a2a37;border-radius:10px}
.page{padding:60px 20px}
.contact label{display:block;margin:8px 0}
.contact input,.contact textarea{width:100%;padding:10px;border-radius:12px;border:1px solid #2a2a37;background:#0f0f14;color:var(--text)}
.link{color:var(--muted)}
.noise{pointer-events:none;position:fixed;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2250%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%2250%22 height=%2250%22 filter=%22url(%23n)%22 opacity=%220.015%22/></svg>');opacity:.4}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px}
.modal .modal-content{background:#111117;border:1px solid #272736;border-radius:16px;max-width:520px;width:100%;padding:18px}
.modal .close{float:right;border:none;background:transparent;color:#aaa;font-size:22px;cursor:pointer}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
}

/* === BLACKPINK / K-POP CONCERT THEME === */
:root{
  --bg:#0a0a0a;
  --panel:#0f0f12;
  --muted:#c6c6cf;
  --text:#fdfdfd;
  --brand:#ff4da6;   /* hot pink */
  --brand2:#9b5de5;  /* purple */
  --brand3:#2de2e6;  /* neon cyan */
}
body{background:radial-gradient(1200px 600px at 50% -10%, rgba(255,77,166,.10), transparent 60%), var(--bg);}
.hero .hero-inner h1{
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0 0 28px rgba(255,77,166,.45), 0 0 8px rgba(155,93,229,.35);
}
.btn.primary{
  box-shadow:0 0 22px rgba(255,77,166,.45), inset 0 0 18px rgba(155,93,229,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn.primary:hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.1);
  box-shadow:0 0 30px rgba(255,77,166,.7), 0 0 60px rgba(155,93,229,.35);
}
.card.category .thumb{
  background:linear-gradient(135deg, rgba(255,77,166,.12), rgba(155,93,229,.08) 40%, rgba(45,226,230,.06));
  position:relative;
  overflow:hidden;
}
.card.category .thumb::before{
  content:"";
  position:absolute; inset:-20% -20% auto -20%;
  height:120%;
  background:
    radial-gradient(120px 60px at 20% 30%, rgba(255,77,166,.35), transparent 70%),
    radial-gradient(160px 80px at 80% 70%, rgba(155,93,229,.28), transparent 70%),
    conic-gradient(from 30deg, rgba(255,77,166,.18), rgba(155,93,229,.18), rgba(45,226,230,.12), transparent 65%);
  filter: blur(12px);
}
.card:hover{box-shadow:0 14px 48px rgba(255,77,166,.15), 0 6px 18px rgba(0,0,0,.35); transform:translateY(-2px); transition:.2s}
.card.product .thumb{background:linear-gradient(120deg,#151519,#121018)}
.card.product:hover .price{color:#ff4da6}
.product .btn.tiny{background:#16161d;border-color:#2d2d3a}
.product .btn.tiny:hover{border-color:#ff4da6;color:#ff4da6}
.hero-bg .gradient{
  background:
   radial-gradient(45% 60% at 50% 25%, rgba(255,77,166,.35), transparent 60%),
   radial-gradient(30% 30% at 80% 85%, rgba(155,93,229,.3), transparent 60%),
   radial-gradient(25% 25% at 10% 90%, rgba(45,226,230,.25), transparent 60%);
  filter: blur(40px) saturate(110%);
}
/* Pink laser overlay */
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background-image: url('/assets/laser.svg');
  background-repeat:no-repeat;
  background-position:center 30%;
  background-size:1200px auto;
  opacity:.55;
  mix-blend-mode:screen;
  pointer-events:none;
}
/* Spotlight sweep animation */
@keyframes sweep {
  0% { transform: translateX(-40%) rotate(-8deg); opacity:.4; }
  50% { transform: translateX(10%) rotate(6deg); opacity:.7; }
  100% { transform: translateX(60%) rotate(-4deg); opacity:.4; }
}
.hero::before{
  content:""; position:absolute; top:-10%; left:-30%;
  width:80%; height:120%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(255,77,166,.16), transparent 70%);
  filter: blur(18px);
  animation: sweep 6s ease-in-out infinite alternate;
  pointer-events:none;
}
/* Ticket-style footer accent */
.site-footer{background:linear-gradient(180deg,#0b0b10,#0a0a0a); position:relative}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, rgba(255,77,166,.6), rgba(155,93,229,.6), rgba(45,226,230,.5));
  filter:drop-shadow(0 0 8px rgba(255,77,166,.6));
}
/* Language badge (demo) */
.header-inner::after{
  content:"BLACKPINK MODE";
  font-size:10px; letter-spacing:.14em;
  padding:4px 8px; margin-left:10px; border:1px solid #2b2b38; border-radius:10px; opacity:.7;
}


/* === Per-page theme backgrounds === */
.theme-albums{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(155,93,229,.12), transparent 60%),
    radial-gradient(900px 400px at 80% 110%, rgba(45,226,230,.10), transparent 60%),
    #0a0a0a;
}
.theme-albums .hero-bg .gradient{
  background:
    radial-gradient(50% 60% at 50% 25%, rgba(155,93,229,.45), transparent 60%),
    radial-gradient(30% 30% at 80% 85%, rgba(45,226,230,.35), transparent 60%);
}

.theme-merch{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,77,166,.12), transparent 60%),
    radial-gradient(900px 400px at 20% 110%, rgba(255,164,77,.10), transparent 60%),
    #0a0a0a;
}
.theme-merch .hero-bg .gradient{
  background:
    radial-gradient(50% 60% at 50% 25%, rgba(255,77,166,.45), transparent 60%),
    radial-gradient(30% 35% at 20% 85%, rgba(255,164,77,.35), transparent 60%);
}

.theme-characters{
  background:
    radial-gradient(1200px 600px at 40% -10%, rgba(2,205,170,.12), transparent 60%),
    radial-gradient(900px 400px at 80% 110%, rgba(0,169,255,.10), transparent 60%),
    #0a0a0a;
}
.theme-characters .hero-bg .gradient{
  background:
    radial-gradient(50% 60% at 55% 25%, rgba(2,205,170,.45), transparent 60%),
    radial-gradient(30% 35% at 80% 85%, rgba(0,169,255,.35), transparent 60%);
}

.theme-limited{
  background:
    radial-gradient(1200px 600px at 60% -10%, rgba(255,215,0,.10), transparent 60%),
    radial-gradient(900px 400px at 20% 110%, rgba(255,77,166,.10), transparent 60%),
    #0a0a0a;
}
.theme-limited .hero-bg .gradient{
  background:
    radial-gradient(50% 60% at 50% 25%, rgba(255,215,0,.40), transparent 60%),
    radial-gradient(30% 30% at 20% 85%, rgba(255,77,166,.35), transparent 60%);
}