/* ===== THEME INTEGRATION OVERRIDES ===== */
body.category-hiphop .v-nav{display:none!important}
body.category-hiphop .bw-main,
body.category-hiphop .nl-section,
body.category-hiphop footer{margin-left:0!important}
@media(max-width:900px){
  .vn-nav{display:none!important}
  .hh-main-wrap{margin-left:0!important}
}

/* ===== CSS VARIABLES ===== */
:root{
  --hh-bg:#040305;
  --hh-bg2:#090010;
  --hh-bg3:#0A0108;
  --hh-card:#0D0012;
  --hh-card2:#160018;
  --hh-yellow:#FFE600;
  --hh-red:#CC0000;
  --hh-red2:#FF2D55;
  --hh-neon:#39FF14;
  --hh-cyan:#00E5FF;
  --hh-fire:#FF6B00;
  --hh-purple:#9B59B6;
  --hh-white:#FFFFFF;
  --hh-muted:rgba(255,255,255,0.38);
  --hh-dim:rgba(255,255,255,0.12);
  --hh-border:rgba(255,255,255,0.06);
  --hh-nav-w:56px;
}

/* ===== 1. LEFT VERTICAL NAV ===== */
.vn-nav{
  position:fixed;top:0;left:0;bottom:0;width:var(--hh-nav-w);
  background:var(--hh-bg);border-right:1px solid var(--hh-border);
  display:flex;flex-direction:column;align-items:center;padding:18px 0 14px;
  z-index:999;
}
.vn-logo{
  font-size:11px;font-weight:900;letter-spacing:1px;color:var(--hh-white);
  text-transform:uppercase;writing-mode:vertical-rl;text-orientation:mixed;
  margin-bottom:12px;
}
.vn-logo span{color:var(--hh-yellow)}
.vn-sep{width:24px;height:1px;background:var(--hh-border);margin-bottom:14px}
.vn-links{
  display:flex;flex-direction:column;gap:6px;align-items:center;flex:1;
  overflow-y:auto;
}
.vn-link{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:16px;text-decoration:none;color:var(--hh-muted);
  position:relative;transition:background .2s,color .2s;
}
.vn-link:hover{background:var(--hh-card2);color:var(--hh-white)}
.vn-link.on{background:var(--hh-card2);color:var(--hh-yellow);box-shadow:inset 2px 0 0 var(--hh-yellow)}
.vn-tip{
  position:absolute;left:48px;top:50%;transform:translateY(-50%);
  background:var(--hh-card2);color:var(--hh-white);font-size:10px;
  letter-spacing:1px;padding:4px 10px;border-radius:4px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.vn-link:hover .vn-tip{opacity:1}
.vn-back{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:18px;text-decoration:none;color:var(--hh-muted);
  margin-top:auto;transition:color .2s;
}
.vn-back:hover{color:var(--hh-white)}
.vn-live{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:10px;
}
.vn-dot{
  width:8px;height:8px;border-radius:50%;background:var(--hh-red2);
  animation:livepulse 1.5s ease-in-out infinite;
}
.vn-live-text{
  font-size:8px;letter-spacing:2px;color:var(--hh-red2);font-weight:700;
}
@keyframes livepulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}

/* ===== 2. MAIN OFFSET ===== */
.hh-main-wrap{margin-left:var(--hh-nav-w);position:relative}

/* ===== 3. PAGE HERO ===== */
.page-hero{
  position:relative;min-height:92vh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:60px 48px 56px;overflow:hidden;
  background:var(--hh-bg);
}
.ph-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
}
.ph-bg-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:38vw;font-weight:900;letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.03);
  animation:bgpulse 6s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes bgpulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
.ph-top-bar{
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:2;margin-bottom:auto;
}
.ph-breadcrumb{
  font-size:11px;letter-spacing:1px;color:var(--hh-muted);
  text-transform:uppercase;
}
.ph-breadcrumb a{color:var(--hh-muted);text-decoration:none}
.ph-breadcrumb a:hover{color:var(--hh-white)}
.ph-breadcrumb span{margin:0 6px}
.ph-live{
  display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2px;
  color:var(--hh-red2);font-weight:700;text-transform:uppercase;
}
.ph-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--hh-red2);
  animation:livepulse 1.5s ease-in-out infinite;
}
.ph-culture-tags{
  position:absolute;right:48px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:2;
}
.ph-ctag{
  font-size:9px;letter-spacing:3px;font-weight:700;padding:6px 14px;
  border:1px solid var(--hh-border);border-radius:20px;color:var(--hh-muted);
  text-transform:uppercase;white-space:nowrap;
}
.ph-ctag.mc{border-color:rgba(255,230,0,.18);color:rgba(255,230,0,.5)}
.ph-ctag.dj{border-color:rgba(0,229,255,.18);color:rgba(0,229,255,.5)}
.ph-ctag.bb{border-color:rgba(57,255,20,.18);color:rgba(57,255,20,.5)}
.ph-ctag.gr{border-color:rgba(255,45,85,.18);color:rgba(255,45,85,.5)}
.ph-ctag.kn{border-color:rgba(155,89,182,.18);color:rgba(155,89,182,.5)}
.ph-headline-wrap{
  position:relative;z-index:2;
}
.ph-section-num{
  font-size:10px;letter-spacing:4px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:18px;
}
.ph-title{
  font-size:clamp(52px,11vw,130px);font-weight:900;line-height:.88;
  letter-spacing:-0.04em;text-transform:uppercase;color:var(--hh-white);
  margin:0;
}
.ph-title .y{color:var(--hh-yellow)}
.ph-title .r{color:var(--hh-red2)}
.ph-title .dim{color:var(--hh-dim)}
.ph-title-line{display:block;overflow:hidden}
.ph-title-inner{
  display:inline-block;animation:slideUp .8s cubic-bezier(.16,1,.3,1) both;
}
.ph-title-line:nth-child(2) .ph-title-inner{animation-delay:.12s}
.ph-title-line:nth-child(3) .ph-title-inner{animation-delay:.24s}
@keyframes slideUp{
  0%{transform:translateY(100%);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.ph-tagline{
  font-size:11px;letter-spacing:6px;color:var(--hh-muted);
  text-transform:uppercase;margin-top:24px;
  animation:fadein 1s .6s both;
}
@keyframes fadein{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0)}
}
.ph-stats{
  display:flex;gap:40px;margin-top:48px;position:relative;z-index:2;
}
.ph-stat{display:flex;flex-direction:column;gap:4px}
.ph-stat-n{
  font-size:28px;font-weight:900;letter-spacing:-0.02em;color:var(--hh-yellow);
}
.ph-stat-l{
  font-size:10px;letter-spacing:1px;color:var(--hh-muted);line-height:1.5;
  text-transform:uppercase;
}

/* ===== 4. TICKER ===== */
.ticker{
  display:flex;align-items:center;background:var(--hh-card);
  border-top:1px solid var(--hh-border);border-bottom:1px solid var(--hh-border);
  overflow:hidden;height:38px;
}
.ticker-label{
  flex-shrink:0;padding:0 16px;font-size:10px;font-weight:800;
  letter-spacing:3px;color:var(--hh-bg);background:var(--hh-red2);
  height:100%;display:flex;align-items:center;text-transform:uppercase;
}
.ticker-wrap{
  display:flex;align-items:center;gap:40px;white-space:nowrap;
  animation:tick 30s linear infinite;
}
.tick-i{
  font-size:12px;letter-spacing:1px;color:var(--hh-muted);
  text-transform:uppercase;flex-shrink:0;
}
.tick-i::after{
  content:'★';margin-left:40px;color:var(--hh-yellow);font-size:8px;
  vertical-align:middle;
}
@keyframes tick{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ===== 5. FIVE ELEMENTS BANNER ===== */
.five-elements{
  background:var(--hh-bg2);border-bottom:1px solid var(--hh-border);
  overflow:hidden;padding:20px 0;position:relative;
}
.five-el-track{
  display:flex;gap:48px;white-space:nowrap;
  animation:eltick 28s linear infinite;
}
.el-item{display:flex;align-items:center;gap:12px;flex-shrink:0}
.el-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:var(--hh-card2);border:1px solid var(--hh-border);
}
.el-info{display:flex;flex-direction:column;gap:2px}
.el-num{font-size:8px;letter-spacing:2px;color:var(--hh-muted);text-transform:uppercase}
.el-name{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.el-item:nth-child(1) .el-name{color:var(--hh-yellow)}
.el-item:nth-child(2) .el-name{color:var(--hh-cyan)}
.el-item:nth-child(3) .el-name{color:var(--hh-neon)}
.el-item:nth-child(4) .el-name{color:var(--hh-red2)}
.el-item:nth-child(5) .el-name{color:var(--hh-purple)}
.el-item:nth-child(6) .el-name{color:var(--hh-fire)}
.el-item:nth-child(7) .el-name{color:var(--hh-yellow)}
.el-item:nth-child(8) .el-name{color:var(--hh-cyan)}
.el-item:nth-child(9) .el-name{color:var(--hh-neon)}
.el-item:nth-child(10) .el-name{color:var(--hh-red2)}
.el-item:nth-child(11) .el-name{color:var(--hh-purple)}
.el-item:nth-child(12) .el-name{color:var(--hh-fire)}
@keyframes eltick{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.five-el-quote{
  text-align:center;padding:14px 0 0;font-size:11px;letter-spacing:2px;
  color:var(--hh-muted);font-style:italic;
}
.five-el-quote span{color:var(--hh-yellow);font-style:normal;font-weight:700}

/* ===== 6. SECTION LAYOUT ===== */
.section{padding:72px 48px;position:relative;overflow:hidden}
.sec-label{
  font-size:9px;letter-spacing:4px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:8px;
}
.spray-label{
  display:inline-block;font-size:9px;letter-spacing:4px;
  color:var(--hh-yellow);text-transform:uppercase;
  padding:4px 12px;border:1px solid rgba(255,230,0,.15);
  border-radius:20px;margin-bottom:14px;position:relative;
}
.spray-label::after{
  content:'';position:absolute;bottom:-8px;left:16px;
  width:3px;height:8px;background:var(--hh-yellow);
  opacity:.3;border-radius:0 0 2px 2px;animation:drip 2s ease-in infinite;
}
@keyframes drip{
  0%{height:8px;opacity:.3}
  50%{height:14px;opacity:.5}
  100%{height:8px;opacity:.3}
}
.sec-h{
  font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-0.03em;
  color:var(--hh-white);text-transform:uppercase;margin:0 0 36px;
  line-height:1.05;
}
.sec-h .y{color:var(--hh-yellow)}
.sec-h .r{color:var(--hh-red2)}
.sec-h .n{color:var(--hh-neon)}
.sec-h .c{color:var(--hh-cyan)}
.sec-h .f{color:var(--hh-fire)}
.sec-h .p{color:var(--hh-purple)}
.sec-h .dim{color:var(--hh-dim)}

/* ===== 7. MAIN NEWS GRID ===== */
.main-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:24px;
}
.card-hero,.card-std{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;padding:32px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.card-hero:hover,.card-std:hover{
  border-color:rgba(255,230,0,.12);transform:translateY(-3px);
}
.card-hero{grid-row:span 2}
.card-bg-num{
  position:absolute;top:-20px;right:-10px;font-size:160px;font-weight:900;
  color:rgba(255,255,255,.02);letter-spacing:-0.05em;pointer-events:none;
  line-height:1;
}
.card-bg-num-sm{
  position:absolute;top:-10px;right:-5px;font-size:90px;font-weight:900;
  color:rgba(255,255,255,.02);letter-spacing:-0.05em;pointer-events:none;
  line-height:1;
}
.card-cat{
  display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:4px 12px;
  border-radius:20px;border:1px solid var(--hh-border);color:var(--hh-muted);
  margin-bottom:14px;
}
.card-cat.excl{border-color:rgba(255,230,0,.2);color:var(--hh-yellow)}
.card-cat.rap{border-color:rgba(255,45,85,.2);color:var(--hh-red2)}
.card-cat.rnb{border-color:rgba(155,89,182,.2);color:var(--hh-purple)}
.card-cat.celeb{border-color:rgba(0,229,255,.2);color:var(--hh-cyan)}
.card-cat.battle{border-color:rgba(57,255,20,.2);color:var(--hh-neon)}
.card-cat.bboy{border-color:rgba(57,255,20,.2);color:var(--hh-neon)}
.card-cat.indus{border-color:rgba(255,107,0,.2);color:var(--hh-fire)}
.card-cat.graf{border-color:rgba(155,89,182,.2);color:var(--hh-purple)}
.card-cat.sports{border-color:rgba(0,229,255,.2);color:var(--hh-cyan)}
.cat-dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;
}
.card-title{
  font-size:20px;font-weight:800;letter-spacing:-0.02em;color:var(--hh-white);
  margin:0 0 12px;line-height:1.25;
}
.card-hero .card-title{font-size:28px}
.card-excerpt{
  font-size:13px;line-height:1.65;color:var(--hh-muted);margin-bottom:18px;
}
.freq{display:flex;align-items:flex-end;gap:3px;height:18px;margin-bottom:18px}
.fb{
  width:3px;background:var(--hh-yellow);border-radius:1px;
  animation:freqAnim .5s ease-in-out infinite alternate;
}
@keyframes freqAnim{
  0%{height:4px}
  100%{height:18px}
}
.card-meta{
  display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:1px;
  color:var(--hh-muted);text-transform:uppercase;margin-bottom:14px;
}
.card-share{
  display:flex;gap:10px;font-size:10px;color:var(--hh-muted);
  margin-bottom:14px;
}
.card-badge{
  display:inline-block;font-size:8px;font-weight:800;letter-spacing:2px;
  padding:3px 10px;border-radius:10px;text-transform:uppercase;
}
.card-badge.trend{background:rgba(255,230,0,.1);color:var(--hh-yellow)}
.card-badge.hot{background:rgba(255,45,85,.1);color:var(--hh-red2)}
.card-badge.new{background:rgba(57,255,20,.1);color:var(--hh-neon)}
.card-badge.excl{background:rgba(255,230,0,.15);color:var(--hh-yellow)}
.card-badge.fire{background:rgba(255,107,0,.1);color:var(--hh-fire)}
.card-badge.neon{background:rgba(57,255,20,.1);color:var(--hh-neon)}
.read-link{
  display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;
  letter-spacing:2px;color:var(--hh-yellow);text-transform:uppercase;
  text-decoration:none;transition:gap .3s;
}
.read-link:hover{gap:14px}

/* ===== 8. DROP ALERT ===== */
.drop-alert{
  background:var(--hh-bg3);border-top:1px solid var(--hh-border);
  border-bottom:1px solid var(--hh-border);
}
.da-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.da-tag{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:3px;
  color:var(--hh-red2);text-transform:uppercase;margin-bottom:10px;
}
.da-title{
  font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-0.03em;
  color:var(--hh-white);text-transform:uppercase;margin:0 0 12px;
}
.da-desc{
  font-size:13px;line-height:1.7;color:var(--hh-muted);margin-bottom:24px;
}
.da-artists{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.da-artist{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  transition:transform .2s;
}
.da-artist:hover{transform:translateY(-3px)}
.da-artist.following .da-avatar{border-color:var(--hh-yellow);box-shadow:0 0 12px rgba(255,230,0,.25)}
.da-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--hh-card2);
  border:2px solid var(--hh-border);display:flex;align-items:center;
  justify-content:center;font-size:16px;transition:border-color .3s,box-shadow .3s;
}
.da-artist-name{font-size:9px;letter-spacing:1px;color:var(--hh-muted);text-transform:uppercase}
.da-artist-next{font-size:8px;color:var(--hh-yellow);letter-spacing:1px}
.da-form-label{
  font-size:10px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:8px;
}
.da-input-wrap{display:flex;gap:10px;margin-bottom:10px}
.da-input{
  flex:1;background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:6px;padding:10px 14px;color:var(--hh-white);font-size:13px;
  outline:none;transition:border-color .3s;
}
.da-input:focus{border-color:var(--hh-yellow)}
.da-input::placeholder{color:var(--hh-muted)}
.da-btn{
  padding:10px 22px;background:var(--hh-yellow);color:var(--hh-bg);
  font-size:11px;font-weight:800;letter-spacing:2px;border:none;
  border-radius:6px;cursor:pointer;text-transform:uppercase;
  transition:background .2s;
}
.da-btn:hover{background:var(--hh-white)}
.da-note{font-size:10px;color:var(--hh-muted);letter-spacing:1px}
.da-mockup{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:12px;overflow:hidden;
}
.da-mock-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--hh-border);
}
.da-mock-title{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--hh-white);text-transform:uppercase}
.da-mock-badge{
  font-size:8px;font-weight:700;letter-spacing:1px;padding:3px 10px;
  border-radius:10px;background:rgba(255,45,85,.15);color:var(--hh-red2);
  text-transform:uppercase;
}
.da-mock-body{padding:14px 18px}
.da-mock-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--hh-border);
  font-size:12px;color:var(--hh-muted);
}
.da-mock-row:last-child{border-bottom:none}
.da-mock-row.live .da-mock-artist{color:var(--hh-neon)}
.da-mock-row.soon .da-mock-artist{color:var(--hh-yellow)}
.da-mock-row.upcoming .da-mock-artist{color:var(--hh-muted)}
.da-mock-artist{font-weight:700;letter-spacing:1px}
.da-mock-type{font-size:10px;letter-spacing:1px;color:var(--hh-muted)}
.da-mock-date{font-size:10px;letter-spacing:1px;color:var(--hh-muted)}
.da-notif{
  margin-top:14px;padding:10px 14px;background:rgba(57,255,20,.06);
  border:1px solid rgba(57,255,20,.15);border-radius:8px;
  font-size:11px;color:var(--hh-neon);letter-spacing:1px;
  display:flex;align-items:center;gap:8px;
}

/* ===== 9. B-BOY SECTION ===== */
.bboy-section{background:var(--hh-bg2)}
.bb-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.bb-title-block{margin-bottom:24px}
.bb-subtitle{
  font-size:13px;line-height:1.7;color:var(--hh-muted);margin-bottom:20px;
}
.bb-styles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.bb-style-chip{
  font-size:9px;font-weight:700;letter-spacing:2px;padding:5px 14px;
  border-radius:20px;border:1px solid var(--hh-border);color:var(--hh-muted);
  text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s;
}
.bb-style-chip:hover{border-color:var(--hh-neon);color:var(--hh-neon)}
.bb-style-chip.bsc-top{border-color:rgba(57,255,20,.3);color:var(--hh-neon)}
.bb-style-chip.bsc-pwr{border-color:rgba(255,107,0,.3);color:var(--hh-fire)}
.bb-style-chip.bsc-fz{border-color:rgba(0,229,255,.3);color:var(--hh-cyan)}
.bb-style-chip.bsc-fl{border-color:rgba(255,230,0,.3);color:var(--hh-yellow)}
.bb-cards{display:flex;flex-direction:column;gap:14px}
.bb-card{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;padding:18px 22px;transition:border-color .3s;
}
.bb-card:hover{border-color:rgba(57,255,20,.15)}
.bb-card-tag{
  font-size:8px;font-weight:700;letter-spacing:2px;color:var(--hh-neon);
  text-transform:uppercase;margin-bottom:6px;
}
.bb-card-title{
  font-size:16px;font-weight:800;color:var(--hh-white);margin-bottom:6px;
  letter-spacing:-0.01em;
}
.bb-card-meta{
  font-size:10px;letter-spacing:1px;color:var(--hh-muted);
  text-transform:uppercase;
}
.bb-visual{display:flex;flex-direction:column;align-items:center;gap:24px}
.cipher-wrap{
  width:260px;height:260px;position:relative;display:flex;
  align-items:center;justify-content:center;
}
.cipher-outer{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(57,255,20,.12);animation:cipherSpin 18s linear infinite;
}
.cipher-mid{
  position:absolute;inset:20px;border-radius:50%;
  border:1px dashed rgba(57,255,20,.08);
  animation:cipherSpin 12s linear infinite reverse;
}
.cipher-inner{
  position:absolute;inset:40px;border-radius:50%;
  background:radial-gradient(circle,rgba(57,255,20,.04) 0%,transparent 70%);
}
@keyframes cipherSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.cipher-text{
  font-size:10px;font-weight:700;letter-spacing:4px;color:var(--hh-neon);
  text-transform:uppercase;z-index:2;
}
.bboy-stage{
  width:220px;height:180px;position:relative;display:flex;
  align-items:flex-end;justify-content:center;
}
.bboy-pose{
  position:absolute;bottom:0;opacity:0;transition:opacity .6s;
}
.bboy-pose.active{opacity:1}
.bp-svg{width:120px;height:140px}
.cipher-crowd{
  font-size:10px;letter-spacing:4px;color:var(--hh-muted);
  text-transform:uppercase;
}
.bb-pose-strip{display:flex;gap:14px;justify-content:center;margin-top:10px}
.bb-pose-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:.5;transition:opacity .3s;
}
.bb-pose-item.active{opacity:1}
.bb-pose-label{
  font-size:8px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;
}
.bb-pose-svg{width:36px;height:36px}

/* ===== 10. INDUSTRY MOVES ===== */
.industry-section{background:var(--hh-bg3)}
.moves-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:28px;
}
.moves-ticker-row{
  display:flex;align-items:center;gap:12px;margin-bottom:8px;
}
.moves-ticker-live{
  font-size:9px;font-weight:700;letter-spacing:2px;color:var(--hh-red2);
  text-transform:uppercase;display:flex;align-items:center;gap:6px;
}
.moves-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.move-card{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;padding:22px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.move-card:hover{border-color:rgba(255,107,0,.15);transform:translateY(-2px)}
.move-type-strip{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
}
.move-type{
  font-size:8px;font-weight:700;letter-spacing:2px;padding:3px 10px;
  border-radius:10px;text-transform:uppercase;
}
.move-type.mt-deal{background:rgba(255,230,0,.1);color:var(--hh-yellow)}
.move-type.mt-beef{background:rgba(255,45,85,.1);color:var(--hh-red2)}
.move-type.mt-legal{background:rgba(204,0,0,.1);color:var(--hh-red)}
.move-type.mt-label{background:rgba(155,89,182,.1);color:var(--hh-purple)}
.move-type.mt-collab{background:rgba(0,229,255,.1);color:var(--hh-cyan)}
.move-type.mt-launch{background:rgba(57,255,20,.1);color:var(--hh-neon)}
.move-impact{
  font-size:8px;font-weight:700;letter-spacing:1px;color:var(--hh-fire);
  text-transform:uppercase;
}
.move-card-title{
  font-size:15px;font-weight:800;color:var(--hh-white);margin-bottom:8px;
  letter-spacing:-0.01em;
}
.move-desc{
  font-size:12px;line-height:1.6;color:var(--hh-muted);margin-bottom:12px;
}
.move-names{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.move-name-tag{
  font-size:9px;font-weight:600;letter-spacing:1px;padding:3px 10px;
  border-radius:12px;background:var(--hh-card2);color:var(--hh-white);
  text-transform:uppercase;
}
.move-card-meta{
  font-size:10px;letter-spacing:1px;color:var(--hh-muted);
  text-transform:uppercase;
}

/* ===== 11. STREAM TRUTH ===== */
.stream-truth{background:var(--hh-bg2);position:relative;overflow:hidden}
.st-bg-word{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:20vw;font-weight:900;color:rgba(255,255,255,.015);
  letter-spacing:-0.05em;pointer-events:none;text-transform:uppercase;
}
.st-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  position:relative;z-index:2;
}
.st-app-tag{
  font-size:9px;font-weight:700;letter-spacing:3px;color:var(--hh-cyan);
  text-transform:uppercase;margin-bottom:10px;display:inline-block;
}
.st-title{
  font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-0.03em;
  color:var(--hh-white);text-transform:uppercase;margin:0 0 12px;
}
.st-desc{
  font-size:13px;line-height:1.7;color:var(--hh-muted);margin-bottom:24px;
}
.st-how{
  font-size:10px;letter-spacing:3px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:14px;
}
.st-step{
  display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;
}
.st-step-n{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--hh-cyan);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:11px;font-weight:700;color:var(--hh-cyan);
}
.st-step-text{font-size:12px;line-height:1.6;color:var(--hh-muted)}
.st-cta{
  display:inline-flex;align-items:center;gap:8px;padding:10px 24px;
  background:var(--hh-cyan);color:var(--hh-bg);font-size:11px;font-weight:800;
  letter-spacing:2px;border-radius:6px;text-decoration:none;
  text-transform:uppercase;margin-top:18px;transition:background .2s;
}
.st-cta:hover{background:var(--hh-white)}
.st-mock{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:12px;overflow:hidden;
}
.st-mock-bar{
  display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-bottom:1px solid var(--hh-border);
}
.sm-dot{width:8px;height:8px;border-radius:50%;background:var(--hh-card2)}
.st-mock-title{
  padding:14px 18px 8px;font-size:11px;font-weight:700;letter-spacing:2px;
  color:var(--hh-white);text-transform:uppercase;
}
.st-mock-body{padding:0 18px 18px}
.st-input-row{
  display:flex;gap:8px;margin-bottom:14px;
}
.st-gauge{
  height:8px;background:var(--hh-card2);border-radius:4px;overflow:hidden;
  margin-bottom:8px;
}
.st-gauge-fill{
  height:100%;border-radius:4px;width:0;transition:width 1.2s ease-out;
}
.st-gauge-score{
  font-size:24px;font-weight:900;color:var(--hh-cyan);margin-bottom:4px;
}
.st-gauge-label{
  font-size:10px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:14px;
}
.st-factors{display:flex;flex-wrap:wrap;gap:6px}
.st-factor{
  font-size:9px;font-weight:600;letter-spacing:1px;padding:3px 10px;
  border-radius:10px;background:var(--hh-card2);color:var(--hh-muted);
  text-transform:uppercase;
}

/* ===== 12. BATTLE RAP ===== */
.cypher-section{background:var(--hh-bg3)}
.battle-grid{display:flex;flex-direction:column;gap:32px}
.battle-main{
  position:relative;padding:48px 32px;background:var(--hh-card);
  border:1px solid var(--hh-border);border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:260px;
}
.battle-bg{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:18vw;font-weight:900;
  color:rgba(255,255,255,.015);letter-spacing:-0.05em;pointer-events:none;
}
.battle-vs{
  position:relative;z-index:2;display:flex;align-items:center;gap:48px;
}
.battle-a{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.battle-a-tag{
  font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
}
.battle-a:first-child .battle-a-tag{color:var(--hh-red2)}
.battle-a:last-child .battle-a-tag{color:var(--hh-cyan)}
.battle-a-name{
  font-size:clamp(22px,3vw,36px);font-weight:900;letter-spacing:-0.03em;
  color:var(--hh-white);text-transform:uppercase;
}
.battle-a-bar{
  width:100px;height:4px;border-radius:2px;overflow:hidden;
  background:var(--hh-card2);
}
.battle-a-bar::after{
  content:'';display:block;height:100%;border-radius:2px;
  animation:barswipe 2s ease-out both;
}
.battle-a:first-child .battle-a-bar::after{background:var(--hh-red2);width:72%}
.battle-a:last-child .battle-a-bar::after{background:var(--hh-cyan);width:65%}
@keyframes barswipe{
  0%{width:0}
}
.battle-league{
  font-size:10px;font-weight:700;letter-spacing:3px;
  color:var(--hh-yellow);text-transform:uppercase;
  animation:vsflicker 3s ease-in-out infinite;
}
@keyframes vsflicker{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.battle-card-sm{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.battle-card-sm > div{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;padding:22px;transition:border-color .3s;
}
.battle-card-sm > div:hover{border-color:rgba(255,45,85,.15)}
.battle-quote{
  text-align:center;padding:28px 48px;font-size:16px;font-style:italic;
  color:var(--hh-muted);letter-spacing:1px;line-height:1.6;
}
.battle-quote span{color:var(--hh-yellow);font-style:normal;font-weight:700}

/* ===== 13. ARTIST SPOTLIGHT ===== */
.spotlight{
  background:var(--hh-bg);border-top:1px solid var(--hh-border);
  border-bottom:1px solid var(--hh-border);
}
.sp-scroll{
  display:flex;gap:20px;overflow-x:auto;padding-bottom:14px;
  scrollbar-width:thin;scrollbar-color:var(--hh-card2) transparent;
}
.sp-card{
  flex-shrink:0;width:220px;background:var(--hh-card);
  border:1px solid var(--hh-border);border-radius:10px;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.sp-card:hover{border-color:rgba(255,230,0,.12);transform:translateY(-3px)}
.sp-img{
  height:180px;position:relative;overflow:hidden;
}
.sp-img-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--hh-card2),var(--hh-bg));
}
.sp-body{padding:16px}
.sp-name{
  font-size:14px;font-weight:800;color:var(--hh-white);margin-bottom:4px;
}
.sp-genre{
  font-size:9px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:10px;
}
.sp-stats{
  display:flex;gap:12px;font-size:9px;letter-spacing:1px;
  color:var(--hh-muted);text-transform:uppercase;
}
.sp-stat-s{color:var(--hh-yellow)}
.sp-new-badge{
  position:absolute;top:10px;right:10px;font-size:8px;font-weight:700;
  letter-spacing:1px;padding:3px 8px;border-radius:8px;
  background:rgba(57,255,20,.15);color:var(--hh-neon);
  text-transform:uppercase;
}

/* ===== 14. R&B ===== */
.rnb-section{background:var(--hh-bg3)}
.vinyl-wrap{
  display:flex;justify-content:center;margin-bottom:36px;
}
.vinyl{
  width:180px;height:180px;border-radius:50%;
  background:conic-gradient(from 0deg,#111,#222,#111,#222,#111);
  border:3px solid rgba(155,89,182,.2);position:relative;
  animation:vinylspin 4s linear infinite;
}
.vinyl::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:40px;height:40px;
  border-radius:50%;background:var(--hh-purple);
}
@keyframes vinylspin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.rnb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rnb-card{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;overflow:hidden;transition:border-color .3s,transform .3s;
}
.rnb-card:hover{border-color:rgba(155,89,182,.2);transform:translateY(-2px)}
.rnb-img{
  height:140px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.rnb-img-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--hh-card2),rgba(155,89,182,.1));
}
.rnb-play{
  position:relative;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(155,89,182,.3);display:flex;align-items:center;
  justify-content:center;font-size:14px;color:var(--hh-white);
  cursor:pointer;transition:background .2s;
}
.rnb-play:hover{background:var(--hh-purple)}
.rnb-eq{
  display:flex;align-items:flex-end;gap:2px;height:16px;
  position:absolute;bottom:8px;right:10px;z-index:2;
}
.rnb-bar{
  width:3px;background:var(--hh-purple);border-radius:1px;
  animation:freqAnim .6s ease-in-out infinite alternate;
}

/* ===== 15. CULTURE CHART ===== */
.culture-chart{background:var(--hh-bg2)}
.cc-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px}
.cc-list{display:flex;flex-direction:column;gap:10px}
.cc-item{
  display:flex;align-items:center;gap:16px;padding:12px 16px;
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:8px;transition:border-color .3s;
}
.cc-item:hover{border-color:rgba(255,230,0,.12)}
.cc-rank{
  font-size:22px;font-weight:900;width:36px;text-align:center;
  letter-spacing:-0.03em;
}
.cc-rank.top{color:var(--hh-yellow)}
.cc-rank.mid{color:var(--hh-muted)}
.cc-rank.low{color:var(--hh-dim)}
.cc-info{flex:1}
.cc-ttl{
  font-size:14px;font-weight:700;color:var(--hh-white);margin-bottom:2px;
}
.cc-meta-row{
  font-size:10px;letter-spacing:1px;color:var(--hh-muted);
  text-transform:uppercase;
}
.cc-chg{
  font-size:10px;font-weight:700;letter-spacing:1px;
}
.cc-chg.up{color:var(--hh-neon)}
.cc-chg.down{color:var(--hh-red2)}
.cc-chg.new{color:var(--hh-yellow)}
.cc-sidebar{display:flex;flex-direction:column;gap:24px}
.cc-sb-title{
  font-size:11px;font-weight:700;letter-spacing:3px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:10px;
}
.cc-poll{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;padding:22px;
}
.cc-poll-q{
  font-size:14px;font-weight:700;color:var(--hh-white);margin-bottom:16px;
  line-height:1.4;
}
.cc-opt{
  position:relative;padding:10px 14px;margin-bottom:8px;
  border:1px solid var(--hh-border);border-radius:6px;cursor:pointer;
  overflow:hidden;transition:border-color .3s;
}
.cc-opt:hover{border-color:rgba(255,230,0,.2)}
.cc-opt-fill{
  position:absolute;inset:0;background:rgba(255,230,0,.06);
  width:0;transition:width .6s ease-out;border-radius:6px;
}
.cc-opt-text{
  position:relative;z-index:2;font-size:12px;color:var(--hh-white);
  font-weight:600;
}
.cc-opt-pct{
  position:relative;z-index:2;float:right;font-size:11px;
  font-weight:700;color:var(--hh-yellow);opacity:0;
  transition:opacity .4s;
}
.cc-voted .cc-opt-pct{opacity:1}
.cc-voted .cc-opt{pointer-events:none}

/* ===== 16. HOOK TESTER ===== */
.hook-section{background:var(--hh-bg)}
.hook-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
}
.hook-tool{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:12px;padding:28px;
}
.hook-bar{
  display:flex;align-items:center;gap:6px;margin-bottom:18px;
}
.hook-body{display:flex;flex-direction:column;gap:14px}
.hook-inp{
  width:100%;min-height:100px;background:var(--hh-bg);
  border:1px solid var(--hh-border);border-radius:8px;
  padding:14px;color:var(--hh-white);font-size:14px;
  font-family:inherit;resize:vertical;outline:none;
  transition:border-color .3s;
}
.hook-inp:focus{border-color:var(--hh-yellow)}
.hook-inp::placeholder{color:var(--hh-muted)}
.hook-analyze{
  padding:12px 28px;background:var(--hh-yellow);color:var(--hh-bg);
  font-size:11px;font-weight:800;letter-spacing:2px;border:none;
  border-radius:6px;cursor:pointer;text-transform:uppercase;
  transition:background .2s;align-self:flex-start;
}
.hook-analyze:hover{background:var(--hh-white)}
.hook-result{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:12px;padding:28px;
}
.hook-score-row{
  display:flex;align-items:flex-end;gap:14px;margin-bottom:14px;
}
.hook-score-num{
  font-size:48px;font-weight:900;color:var(--hh-yellow);
  letter-spacing:-0.03em;line-height:1;
}
.hook-score-info{
  font-size:10px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;line-height:1.6;
}
.hook-meter{
  height:8px;background:var(--hh-card2);border-radius:4px;
  overflow:hidden;margin-bottom:18px;
}
.hook-meter-fill{
  height:100%;background:linear-gradient(90deg,var(--hh-red2),var(--hh-yellow),var(--hh-neon));
  border-radius:4px;width:0;transition:width 1s ease-out;
}
@keyframes meteranim{
  0%{width:0}
}
.hook-factors{display:flex;flex-wrap:wrap;gap:8px}
.hf-tag{
  font-size:9px;font-weight:600;letter-spacing:1px;padding:4px 12px;
  border-radius:12px;background:var(--hh-card2);color:var(--hh-muted);
  text-transform:uppercase;
}

/* ===== 17. GRAFFITI WALL ===== */
.graf-wall{
  background:var(--hh-bg3);position:relative;overflow:hidden;
}
.graf-inner{position:relative;z-index:2}
.graf-quote-block{
  text-align:center;margin-bottom:48px;
}
.graf-tag{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:3px;
  color:var(--hh-red2);text-transform:uppercase;margin-bottom:10px;
}
.graf-quote{
  font-size:clamp(20px,3vw,32px);font-weight:900;color:var(--hh-white);
  letter-spacing:-0.02em;line-height:1.3;margin:0 0 8px;
}
.graf-attr{
  font-size:11px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;
}
.graf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.graf-card{
  background:var(--hh-card);border:1px solid var(--hh-border);
  border-radius:10px;padding:22px;transition:border-color .3s,transform .3s;
}
.graf-card:hover{border-color:rgba(255,45,85,.15);transform:translateY(-2px)}
.graf-card-cat{
  font-size:8px;font-weight:700;letter-spacing:2px;color:var(--hh-red2);
  text-transform:uppercase;margin-bottom:8px;
}
.graf-card-title{
  font-size:16px;font-weight:800;color:var(--hh-white);margin-bottom:8px;
  letter-spacing:-0.01em;
}
.graf-card-meta{
  font-size:10px;letter-spacing:1px;color:var(--hh-muted);
  text-transform:uppercase;
}
.graf-bg-letters{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:28vw;font-weight:900;color:rgba(255,255,255,.015);
  letter-spacing:-0.05em;pointer-events:none;text-transform:uppercase;
}

/* ===== 18. SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
.reveal.on{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s,transform .7s}
.reveal-left.on{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s,transform .7s}
.reveal-right.on{opacity:1;transform:translateX(0)}

/* ===== 19. FLOATING SHARE ===== */
.share-bar{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;z-index:900;
}
.share-btn{
  width:36px;height:36px;border-radius:50%;background:var(--hh-card);
  border:1px solid var(--hh-border);display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--hh-muted);cursor:pointer;transition:border-color .3s,color .3s,background .3s;
}
.share-btn:hover{border-color:var(--hh-yellow);color:var(--hh-yellow);background:var(--hh-card2)}

/* ===== 20. RESPONSIVE ===== */
@media(max-width:900px){
  .page-hero{padding:40px 20px 36px;min-height:75vh}
  .ph-culture-tags{display:none}
  .ph-stats{flex-wrap:wrap;gap:20px}
  .section{padding:48px 20px}
  .main-grid{grid-template-columns:1fr}
  .card-hero{grid-row:auto}
  .da-grid{grid-template-columns:1fr}
  .bb-grid{grid-template-columns:1fr}
  .moves-grid{grid-template-columns:1fr}
  .st-grid{grid-template-columns:1fr}
  .battle-card-sm{grid-template-columns:1fr}
  .cc-grid{grid-template-columns:1fr}
  .hook-grid{grid-template-columns:1fr}
  .rnb-grid{grid-template-columns:1fr}
  .graf-cards{grid-template-columns:1fr}
  .vinyl-wrap{display:none}
  .share-bar{display:none}
  .cipher-wrap{width:180px;height:180px}
}
/* ===== BREADCRUMBS INTEGRATION ===== */
.bw-breadcrumbs{font-size:13px;letter-spacing:1px;color:var(--hh-muted);text-transform:uppercase}
.bw-crumb-list{display:flex;align-items:center;list-style:none;padding:0;margin:0;gap:6px}
.bw-crumb-item{font-size:13px}
.bw-crumb-link{color:var(--hh-muted);text-decoration:none}
.bw-crumb-link:hover{color:var(--hh-white)}
.bw-crumb-sep{color:var(--hh-muted);margin:0 6px}
.bw-crumb-current{color:var(--hh-white)}