/*
Theme Name: BeatBot77 Neon
Theme URI: https://beatbot77.netlify.app/
Author: BeatBot77
Description: Dunkles, neonfarbenes WordPress-Theme für BeatBot77 mit BeatBotCall-Liedwünschen, Community, YouTube, Merchandise und einer fokussierten Startseite.
Version: 2.3.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: beatbot77
License: GNU General Public License v2 or later
*/

:root {
  --bb-bg: #030305;
  --bb-panel: #08080c;
  --bb-panel-2: #0d0d13;
  --bb-text: #f4f1f4;
  --bb-muted: #a9a4ad;
  --bb-pink: #ff168f;
  --bb-pink-2: #ff38b5;
  --bb-cyan: #37ddff;
  --bb-purple: #7766ff;
  --bb-line: rgba(255, 22, 143, .34);
  --bb-line-soft: rgba(255,255,255,.1);
  --bb-shadow: 0 0 38px rgba(255, 22, 143, .16);
  --bb-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --bb-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bb-max: 1480px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bb-bg); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 22, 143, .09), transparent 22rem),
    radial-gradient(circle at 75% 40%, rgba(55, 221, 255, .055), transparent 24rem),
    var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-body);
  font-size: 16px;
  line-height: 1.58;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .14;
  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='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--bb-pink); color: white; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto !important; width: auto; height: auto; margin: 0; padding: 12px 16px;
  top: 10px; left: 10px; z-index: 100000; background: #fff; color: #000;
}
.container { width: min(calc(100% - 44px), var(--bb-max)); margin-inline: auto; }
.site-main { min-height: 60vh; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(2,2,4,.88);
  border-bottom: 1px solid rgba(255,22,143,.28);
  backdrop-filter: blur(16px);
}
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 28px; }
.site-branding { display: flex; align-items: center; flex: 0 0 auto; }
.custom-logo-link img { max-height: 48px; width: auto; }
.bb-wordmark {
  position: relative;
  display: inline-block;
  color: var(--bb-pink);
  font-family: var(--bb-display);
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  font-style: italic;
  letter-spacing: -.045em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transform: skewX(-7deg) rotate(-2deg);
  text-shadow: 2px 0 var(--bb-cyan), 0 0 22px rgba(255,22,143,.5);
}
.bb-wordmark::after { content: ""; position: absolute; left: -4%; right: -7%; bottom: -6px; height: 2px; background: linear-gradient(90deg, var(--bb-pink), var(--bb-cyan)); transform: rotate(-2deg); }
.primary-navigation { margin-left: auto; }
.primary-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.primary-menu a {
  position: relative; display: block; padding: 26px 13px 22px;
  color: #d8d4db; text-decoration: none; text-transform: uppercase;
  font-size: .74rem; font-weight: 850; letter-spacing: .1em;
}
.primary-menu a::after { content:""; position:absolute; left:13px; right:13px; bottom:13px; height:2px; background:var(--bb-pink); transform:scaleX(0); transform-origin:left; transition:.18s ease; box-shadow:0 0 12px var(--bb-pink); }
.primary-menu a:hover, .primary-menu .current-menu-item > a { color: var(--bb-pink-2); }
.primary-menu a:hover::after, .primary-menu .current-menu-item > a::after { transform: scaleX(1); }
.header-socials { display: flex; align-items: center; gap: 9px; }
.icon-link { display:grid; place-items:center; width:34px; height:34px; border:1px solid transparent; color:#d9d3df; border-radius:50%; text-decoration:none; transition:.2s ease; }
.icon-link:hover { color:var(--bb-pink); border-color:var(--bb-line); box-shadow:0 0 18px rgba(255,22,143,.18); }
.icon-link svg { width:17px; height:17px; fill:currentColor; }
.header-cta { padding: 10px 18px; border:1px solid var(--bb-pink); color:var(--bb-pink-2); text-decoration:none; font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; box-shadow: inset 0 0 12px rgba(255,22,143,.06), 0 0 16px rgba(255,22,143,.12); }
.header-cta:hover { background:var(--bb-pink); color:#fff; }
.menu-toggle { display:none; width:44px; height:42px; border:1px solid var(--bb-line); background:#07070b; color:#fff; }
.menu-toggle span:not(.screen-reader-text) { display:block; width:21px; height:2px; background:currentColor; margin:5px auto; }

/* Hero */
.hero { position:relative; overflow:hidden; min-height: 660px; border-bottom:1px solid rgba(255,22,143,.25); }
.hero-grid { display:grid; grid-template-columns: .98fr 1.18fr; min-height: 660px; }
.hero-copy { position:relative; z-index:4; display:flex; flex-direction:column; justify-content:center; padding:70px 30px 72px 20px; }
.hero-copy::after { content:""; position:absolute; inset:0 -150px 0 -100vw; z-index:-1; background:linear-gradient(90deg,#030305 0%,rgba(3,3,5,.98) 66%,rgba(3,3,5,.72) 85%,transparent 100%); }
.hero-kicker { margin:0 0 13px; color:var(--bb-pink-2); font-size:.82rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hero-title { margin:0; max-width:760px; font-family:var(--bb-display); font-size:clamp(4rem,7.5vw,7.7rem); line-height:.88; letter-spacing:-.025em; text-transform:uppercase; }
.hero-title span { display:block; }
.hero-title .accent { color:var(--bb-pink); text-shadow:0 0 30px rgba(255,22,143,.22); }
.hero-description { max-width:620px; margin:25px 0 0; color:#d1ccd4; font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.55; }
.hero-truth { margin:9px 0 0; color:#d1ccd4; }
.hero-truth strong { color:var(--bb-pink-2); font-weight:700; }
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:26px; }
.bb-button { display:inline-flex; align-items:center; justify-content:center; min-width:190px; min-height:54px; padding:13px 25px; border:1px solid var(--bb-pink); background:var(--bb-pink); color:#fff; font-size:.84rem; font-weight:950; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; box-shadow:0 0 25px rgba(255,22,143,.28), inset 0 0 18px rgba(255,255,255,.1); transition:.2s ease; }
.bb-button:hover { transform:translateY(-2px); box-shadow:0 0 34px rgba(255,22,143,.5); }
.bb-button--ghost { background:rgba(4,4,7,.7); color:#fff; }
.bb-button--ghost:hover { background:rgba(255,22,143,.1); }
.now-playing { width:min(100%,620px); margin-top:22px; }
.now-top { display:flex; align-items:center; gap:12px; color:var(--bb-pink-2); font-size:.66rem; font-weight:900; text-transform:uppercase; }
.now-wave { flex:1; display:flex; align-items:center; height:20px; gap:2px; border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; }
.now-wave i { display:block; width:2px; background:var(--bb-pink); box-shadow:0 0 6px rgba(255,22,143,.7); animation:wave 1.2s ease-in-out infinite alternate; }
.now-wave i:nth-child(3n) { animation-delay:.15s; } .now-wave i:nth-child(4n) { animation-delay:.3s; }
@keyframes wave { from{transform:scaleY(.35)} to{transform:scaleY(1)} }
.now-track { display:grid; grid-template-columns:44px 1fr auto auto; align-items:center; gap:12px; margin-top:8px; }
.now-cover { width:44px; aspect-ratio:1; border:1px solid var(--bb-line); background:radial-gradient(circle at 50% 30%, var(--bb-pink), transparent 18%), linear-gradient(135deg,#101018,#050507); overflow:hidden; }
.now-cover img { width:100%; height:100%; object-fit:cover; }
.now-meta strong { display:block; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.now-meta span, .now-duration { color:var(--bb-muted); font-size:.68rem; }
.now-play { display:grid; place-items:center; width:31px; height:31px; border:1px solid #fff; border-radius:50%; text-decoration:none; font-size:.7rem; }

.hero-visual { position:relative; min-width:0; overflow:hidden; isolation:isolate; background:#07070c; }
.hero-visual::before {
  content:""; position:absolute; inset:0; z-index:-5;
  background:
    linear-gradient(180deg,rgba(4,4,8,.05),rgba(4,4,8,.28) 70%,#050507),
    radial-gradient(circle at 65% 35%,rgba(255,22,143,.3),transparent 30%),
    radial-gradient(circle at 35% 50%,rgba(24,86,255,.17),transparent 36%),
    repeating-linear-gradient(90deg,transparent 0 35px,rgba(255,22,143,.07) 36px 38px,transparent 39px 74px),
    linear-gradient(135deg,#05050a,#120414 54%,#031019);
}
.hero-visual::after { content:""; position:absolute; left:0; right:0; bottom:0; height:39%; z-index:-2; background:repeating-linear-gradient(90deg,transparent 0 59px,rgba(255,22,143,.14) 60px 61px), repeating-linear-gradient(0deg,transparent 0 38px,rgba(55,221,255,.07) 39px 40px), linear-gradient(180deg,transparent,rgba(255,22,143,.12)); transform:perspective(500px) rotateX(60deg) scale(1.5); transform-origin:bottom; }
.city-bars { position:absolute; inset:0; opacity:.7; background:linear-gradient(90deg,transparent 6%,rgba(255,22,143,.3) 6.5%,transparent 7%,transparent 12%,rgba(55,221,255,.15) 12.5%,transparent 13%,transparent 24%,rgba(255,22,143,.25) 24.5%,transparent 25%,transparent 36%,rgba(255,22,143,.2) 36.4%,transparent 37%,transparent 71%,rgba(55,221,255,.12) 71.5%,transparent 72%,transparent 91%,rgba(255,22,143,.2) 91.5%,transparent 92%); filter:blur(.2px); }
.avatar-wrap { position:absolute; z-index:3; left:7%; bottom:-2%; width:min(48%,520px); filter:drop-shadow(0 0 22px rgba(255,22,143,.3)) drop-shadow(18px 0 30px rgba(55,221,255,.14)); }
.avatar-wrap img { width:100%; height:auto; }
.hero-graffiti { position:absolute; z-index:2; right:5%; top:12%; width:44%; color:var(--bb-pink); font-family:var(--bb-display); font-size:clamp(3rem,5.4vw,6.4rem); font-style:italic; line-height:.67; text-align:center; text-transform:uppercase; transform:rotate(-9deg) skewX(-8deg); opacity:.88; text-shadow:0 0 28px rgba(255,22,143,.5), 4px 3px #761046; }
.hero-graffiti span { display:block; }
.hero-graffiti::before, .hero-graffiti::after { content:""; position:absolute; background:var(--bb-pink); opacity:.55; filter:blur(.5px); }
.hero-graffiti::before { width:110%; height:4px; left:-7%; top:49%; transform:rotate(8deg); }
.hero-graffiti::after { width:3px; height:100px; right:19%; bottom:-88px; box-shadow:14px 24px 0 -1px var(--bb-pink), -20px 17px 0 -1px var(--bb-pink); }
.studio-rig { position:absolute; z-index:1; right:2%; bottom:8%; width:40%; height:32%; border-top:1px solid rgba(255,22,143,.45); background:linear-gradient(180deg,rgba(7,7,12,.25),rgba(0,0,0,.8)); box-shadow:0 -15px 40px rgba(255,22,143,.06); }
.studio-rig::before { content:""; position:absolute; right:7%; top:-74px; width:42%; aspect-ratio:1; border:1px solid rgba(255,22,143,.35); background:radial-gradient(circle,var(--bb-pink) 0 8%,#14061a 9% 18%,var(--bb-purple) 19% 21%,#050509 22% 36%,var(--bb-cyan) 37% 39%,#030305 40%); box-shadow:0 0 20px rgba(255,22,143,.22), inset 0 0 30px #000; }
.studio-rig::after { content:""; position:absolute; left:8%; top:-55px; width:46%; height:58px; border:1px solid rgba(55,221,255,.3); background:linear-gradient(160deg,transparent 0 45%,var(--bb-cyan) 46% 48%,transparent 49% 54%,var(--bb-pink) 55% 58%,transparent 59%); box-shadow:0 0 22px rgba(55,221,255,.08); }

/* Dashboard cards */
.dashboard { padding:18px 0 24px; border-bottom:1px solid rgba(255,22,143,.2); }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dashboard-card { min-width:0; min-height:310px; display:flex; flex-direction:column; padding:15px 16px; border:1px solid rgba(255,22,143,.5); background:linear-gradient(180deg,rgba(12,12,18,.94),rgba(4,4,7,.96)); box-shadow:inset 0 1px rgba(255,255,255,.03),0 0 20px rgba(255,22,143,.05); }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; color:var(--bb-pink-2); font-size:.78rem; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
.card-heading a { font-size:.62rem; font-weight:700; text-decoration:none; }
.song-list { display:grid; gap:7px; }
.song-row { display:grid; grid-template-columns:42px 1fr auto auto; gap:9px; align-items:center; min-height:48px; padding:4px; border-bottom:1px solid rgba(255,255,255,.08); text-decoration:none; }
.song-thumb { width:42px; aspect-ratio:1; object-fit:cover; background:linear-gradient(135deg,#2d051f,#06151d); }
.song-data { min-width:0; }
.song-data strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.69rem; text-transform:uppercase; }
.song-data span, .song-time { color:var(--bb-muted); font-size:.6rem; }
.song-play { display:grid; place-items:center; width:25px; height:25px; border:1px solid #e7e3e8; border-radius:50%; font-size:.55rem; }
.card-button { margin-top:auto; display:flex; justify-content:center; align-items:center; min-height:42px; border:1px solid var(--bb-pink); color:var(--bb-pink-2); text-decoration:none; font-size:.72rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.card-button:hover { background:var(--bb-pink); color:#fff; }
.call-logo { margin:6px 0 10px; font-family:var(--bb-display); font-size:clamp(2.2rem,3vw,3.4rem); font-style:italic; line-height:.85; text-transform:uppercase; color:var(--bb-pink); text-shadow:2px 1px var(--bb-cyan); transform:skewX(-7deg); }
.dashboard-card p { margin:0 0 14px; color:#c8c3cb; font-size:.78rem; line-height:1.5; }
.about-mini { position:relative; min-height:118px; margin:-2px -2px 12px; overflow:hidden; background:radial-gradient(circle at 50% 24%,rgba(255,22,143,.4),transparent 24%),#050509; }
.about-mini img { position:absolute; left:50%; top:-18%; width:72%; transform:translateX(-50%); filter:drop-shadow(0 0 20px rgba(255,22,143,.25)); }
.community-icon { width:48px; height:48px; margin:5px 0 13px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,#7d74ff,#4a39cb); font-size:1.5rem; box-shadow:0 0 20px rgba(119,102,255,.3); }
.check-list { display:grid; gap:7px; margin:0 0 14px; padding:0; list-style:none; color:#c9c3cd; font-size:.69rem; }
.check-list li::before { content:"✓"; margin-right:8px; color:#fff; }
.platform-list { display:grid; margin-bottom:14px; }
.platform-item { display:flex; align-items:center; gap:9px; min-height:40px; border-bottom:1px solid rgba(255,255,255,.09); text-decoration:none; font-size:.72rem; }
.platform-item strong { flex:1; }
.platform-item span { color:var(--bb-muted); font-size:.58rem; }
.platform-badge { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:#15151c; color:#fff; font-size:.65rem; }
.platform-badge--spotify { background:#1ed760; color:#041005; }
.platform-badge--youtube { background:#ff0033; }
.platform-badge--apple { background:#f4f2f7; color:#111; }
.platform-badge--amazon { background:#09a8c9; }
.platform-badge--deezer { background:linear-gradient(135deg,#ffcf33,#fb2d66,#6f46ff); }

/* Full sections */
.section { padding:90px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.section-kicker { margin:0 0 8px; color:var(--bb-pink-2); font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.section-title { margin:0; font-family:var(--bb-display); font-size:clamp(2.7rem,5vw,5.2rem); line-height:.92; letter-spacing:-.02em; text-transform:uppercase; }
.section-copy { max-width:600px; margin:0; color:var(--bb-muted); }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.post-card { border:1px solid var(--bb-line); background:linear-gradient(180deg,#0d0d14,#060609); text-decoration:none; overflow:hidden; }
.post-card-media { position:relative; aspect-ratio:16/10; overflow:hidden; background:radial-gradient(circle at 50% 40%,rgba(255,22,143,.45),transparent 22%),linear-gradient(135deg,#130814,#041117); }
.post-card-media img { width:100%; height:100%; object-fit:cover; transition:.35s ease; }
.post-card:hover .post-card-media img { transform:scale(1.04); }
.post-card-index { position:absolute; top:12px; left:12px; padding:4px 8px; background:var(--bb-pink); color:#fff; font-size:.65rem; font-weight:900; }
.post-card-body { padding:20px; }
.post-card-body h3 { margin:0 0 8px; font-size:1.25rem; line-height:1.1; text-transform:uppercase; }
.post-card-body p { margin:0; color:var(--bb-muted); font-size:.88rem; }
.post-card-meta { margin-top:18px; color:var(--bb-pink-2); font-size:.68rem; font-weight:900; text-transform:uppercase; }

.call-section { position:relative; overflow:hidden; background:linear-gradient(135deg,#08080d,#130414 55%,#031218); border-block:1px solid var(--bb-line); }
.call-section::before { content:"BEATBOTCALL"; position:absolute; inset:auto -2% 2% auto; font-family:var(--bb-display); font-size:clamp(5rem,14vw,13rem); color:transparent; -webkit-text-stroke:1px rgba(255,22,143,.13); transform:rotate(-4deg); }
.call-layout { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.call-mark { font-family:var(--bb-display); font-size:clamp(5rem,10vw,10rem); font-style:italic; line-height:.7; color:var(--bb-pink); text-shadow:5px 3px var(--bb-cyan),0 0 40px rgba(255,22,143,.3); text-transform:uppercase; transform:skewX(-7deg) rotate(-3deg); }
.call-mark span { display:block; }
.feature-list { margin:24px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.feature-list li { position:relative; padding-left:25px; color:#d2cdd4; }
.feature-list li::before { content:""; position:absolute; left:0; top:.6em; width:12px; height:2px; background:var(--bb-pink); box-shadow:0 0 8px var(--bb-pink); }

.about-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; }
.about-portrait { position:relative; height:620px; border:1px solid var(--bb-line); overflow:hidden; background:radial-gradient(circle at 50% 32%,rgba(255,22,143,.35),transparent 27%),linear-gradient(145deg,#09050b,#03131a); }
.about-portrait::after { content:"77"; position:absolute; right:-10px; bottom:-55px; font-family:var(--bb-display); font-size:18rem; color:rgba(255,22,143,.11); }
.about-portrait img { position:absolute; left:50%; bottom:-28%; width:91%; transform:translateX(-50%); filter:drop-shadow(0 0 30px rgba(255,22,143,.2)); }
.about-quote { margin:24px 0 0; padding:22px 0 22px 24px; border-left:3px solid var(--bb-pink); color:#e7e2e8; font-size:1.12rem; }

/* Content pages */
.content-shell { width:min(calc(100% - 44px),920px); margin:0 auto; padding:80px 0; }
.entry-header { margin-bottom:30px; }
.entry-title { margin:0; font-family:var(--bb-display); font-size:clamp(3rem,7vw,6.5rem); line-height:.92; text-transform:uppercase; }
.entry-meta { margin-top:12px; color:var(--bb-pink-2); font-size:.75rem; text-transform:uppercase; }
.entry-content { color:#d5d0d8; }
.entry-content a { color:var(--bb-pink-2); }
.entry-content img { border:1px solid var(--bb-line); }
.comments-area { margin-top:60px; padding-top:30px; border-top:1px solid var(--bb-line); }
input, textarea { width:100%; border:1px solid var(--bb-line); background:#09090e; color:#fff; padding:12px; }
input[type="submit"] { width:auto; background:var(--bb-pink); font-weight:900; text-transform:uppercase; cursor:pointer; }

/* Footer */
.site-footer { border-top:1px solid var(--bb-line); background:#020204; }
.footer-inner { min-height:78px; display:flex; align-items:center; gap:30px; }
.footer-brand { margin-right:auto; }
.footer-copy { color:#79747e; font-size:.73rem; }
.footer-menu { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.footer-menu a { color:#9e98a2; font-size:.68rem; text-decoration:none; text-transform:uppercase; }
.footer-passion { color:#817b86; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.footer-passion::before { content:"|||||"; margin-right:8px; color:var(--bb-pink); letter-spacing:-2px; }

@media (max-width: 1220px) {
  .header-socials { display:none; }
  .primary-menu a { padding-inline:9px; font-size:.68rem; }
  .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .menu-toggle { display:block; margin-left:auto; }
  .primary-navigation { position:absolute; inset:72px 0 auto; display:none; background:#050508; border-bottom:1px solid var(--bb-line); }
  .primary-navigation.is-open { display:block; }
  .primary-menu { display:block; padding:12px 22px 18px; }
  .primary-menu a { padding:13px 0; }
  .primary-menu a::after { left:0; right:auto; width:70px; bottom:5px; }
  .header-cta { display:none; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { min-height:590px; padding:70px 0; }
  .hero-copy::after { inset:0 -22px; background:linear-gradient(180deg,rgba(3,3,5,.92),rgba(3,3,5,.72)); }
  .hero-visual { min-height:660px; }
  .avatar-wrap { left:20%; width:51%; }
  .hero-graffiti { width:43%; right:4%; }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .post-grid { grid-template-columns:1fr 1fr; }
  .call-layout, .about-layout { grid-template-columns:1fr; }
  .about-portrait { height:560px; max-width:620px; }
}
@media (max-width: 640px) {
  .container { width:min(calc(100% - 28px), var(--bb-max)); }
  .header-inner { min-height:64px; }
  .primary-navigation { top:64px; }
  .bb-wordmark { font-size:1.55rem; }
  .hero { min-height:0; }
  .hero-copy { min-height:560px; padding:55px 0; }
  .hero-title { font-size:clamp(3.35rem,18vw,5.5rem); }
  .hero-description { font-size:.95rem; }
  .hero-actions { display:grid; }
  .bb-button { width:100%; }
  .hero-visual { min-height:570px; }
  .avatar-wrap { left:5%; width:75%; bottom:-1%; }
  .hero-graffiti { top:11%; right:-4%; width:52%; font-size:3.7rem; }
  .studio-rig { width:55%; }
  .dashboard-grid, .post-grid { grid-template-columns:1fr; }
  .section { padding:66px 0; }
  .section-head { display:block; }
  .section-copy { margin-top:18px; }
  .call-mark { font-size:5.4rem; }
  .about-portrait { height:480px; }
  .footer-inner { padding:26px 0; flex-wrap:wrap; }
  .footer-brand { width:100%; }
  .footer-menu { gap:14px; flex-wrap:wrap; }
}

/* BeatBot77 2.1 refinements */
.bb-wordmark__name { color:var(--bb-pink); }
.bb-wordmark__number { color:#fff; margin-left:.04em; text-shadow:1px 0 var(--bb-cyan),0 0 14px rgba(255,255,255,.34); }

/* Refined hero stage: cleaner architecture, depth and intentional lighting. */
.hero-visual {
  background:#050509;
  box-shadow:inset 1px 0 rgba(255,255,255,.025),inset 22px 0 80px rgba(0,0,0,.52);
}
.hero-visual::before {
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(2,2,5,.12),rgba(2,2,5,.36) 67%,rgba(2,2,5,.86)),
    radial-gradient(ellipse at 43% 40%,rgba(255,22,143,.34) 0,rgba(255,22,143,.13) 25%,transparent 52%),
    radial-gradient(ellipse at 48% 43%,rgba(55,221,255,.17),transparent 43%),
    linear-gradient(90deg,#030307 0%,#0a0710 27%,#140517 52%,#090812 75%,#020306 100%);
}
.hero-visual::after {
  left:-12%; right:-12%; bottom:-16%; height:55%; z-index:1;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(255,22,143,.26) 50%,transparent 50.3%),
    repeating-linear-gradient(90deg,transparent 0 64px,rgba(255,22,143,.14) 65px 66px),
    repeating-linear-gradient(0deg,transparent 0 43px,rgba(55,221,255,.075) 44px 45px),
    linear-gradient(180deg,rgba(255,22,143,.03),rgba(255,22,143,.17));
  transform:perspective(530px) rotateX(63deg) scale(1.44);
  box-shadow:0 -35px 80px rgba(255,22,143,.06);
}
.city-bars { z-index:1; opacity:1; background:none; }
.city-bars::before {
  content:""; position:absolute; inset:6% 13% 4% 7%;
  border:1px solid rgba(255,22,143,.2); border-bottom:0;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 15%,4% 15%,4% 4%,0 4%);
  background:
    linear-gradient(90deg,rgba(255,22,143,.08) 1px,transparent 1px) 0 0/82px 100%,
    linear-gradient(180deg,rgba(55,221,255,.045) 1px,transparent 1px) 0 0/100% 72px;
  box-shadow:inset 0 0 90px rgba(255,22,143,.035),0 0 60px rgba(255,22,143,.035);
}
.city-bars::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg,transparent 0 22%,rgba(255,22,143,.05) 22.2%,transparent 34%),
    linear-gradient(75deg,transparent 0 69%,rgba(55,221,255,.045) 69.2%,transparent 79%),
    repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,255,255,.012) 6px 7px);
  mix-blend-mode:screen;
}
.hero-stage { position:absolute; z-index:2; inset:9% 27% 5% 8%; pointer-events:none; }
.hero-stage::before {
  content:""; position:absolute; left:9%; right:4%; top:5%; bottom:5%;
  border:1px solid rgba(255,255,255,.055); border-radius:50% 50% 10% 10%/18% 18% 5% 5%;
  background:radial-gradient(ellipse at center,rgba(255,22,143,.055),transparent 64%);
  box-shadow:inset 0 0 65px rgba(255,22,143,.045);
}
.hero-stage span { position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(255,22,143,.5) 19%,rgba(255,22,143,.11) 80%,transparent); box-shadow:0 0 12px rgba(255,22,143,.28); }
.hero-stage span:nth-child(1) { left:4%; }
.hero-stage span:nth-child(2) { left:50%; background:linear-gradient(180deg,transparent,rgba(55,221,255,.23) 23%,rgba(255,22,143,.12) 76%,transparent); }
.hero-stage span:nth-child(3) { right:2%; }
.avatar-aura { position:absolute; z-index:2; left:4%; bottom:1%; width:63%; aspect-ratio:1/1.15; border-radius:48%; background:radial-gradient(ellipse at 50% 48%,rgba(255,22,143,.31),rgba(255,22,143,.10) 28%,rgba(55,221,255,.06) 47%,transparent 67%); filter:blur(10px); opacity:.9; }
.avatar-wrap { z-index:4; left:10%; bottom:-5%; width:min(56%,600px); filter:drop-shadow(0 0 28px rgba(255,22,143,.33)) drop-shadow(16px 0 28px rgba(55,221,255,.16)); }
.avatar-wrap::after { content:""; position:absolute; left:19%; right:16%; bottom:3%; height:4%; border-radius:50%; background:rgba(255,22,143,.25); filter:blur(16px); z-index:-1; }
.hero-graffiti { z-index:3; right:4%; top:9%; width:38%; font-size:clamp(3.1rem,5vw,6rem); opacity:.96; }
.hero-graffiti__number { color:#fff; text-shadow:2px 2px var(--bb-pink),0 0 24px rgba(255,255,255,.26); }
.hero-graffiti::before { top:52%; opacity:.44; }
.hero-graffiti::after { opacity:.32; }
.studio-rig {
  z-index:3; right:5%; bottom:10%; width:24%; height:19%;
  display:flex; align-items:flex-end; justify-content:flex-end; gap:clamp(5px,.55vw,10px);
  padding:0 2% 12px; border:0; border-bottom:1px solid rgba(255,22,143,.38);
  background:linear-gradient(90deg,transparent,rgba(4,4,8,.24)); box-shadow:none;
}
.studio-rig::before { content:"SIGNAL / 77"; position:absolute; right:0; top:-22px; width:auto; aspect-ratio:auto; border:0; background:none; box-shadow:none; color:rgba(255,255,255,.42); font-size:.54rem; font-weight:900; letter-spacing:.17em; }
.studio-rig::after { content:""; position:absolute; left:0; right:0; top:50%; width:auto; height:1px; border:0; background:linear-gradient(90deg,transparent,var(--bb-cyan),var(--bb-pink)); box-shadow:0 0 15px rgba(55,221,255,.22); }
.studio-rig i { position:relative; z-index:1; display:block; width:7%; min-width:4px; background:linear-gradient(180deg,#fff 0 4%,var(--bb-cyan) 5% 47%,var(--bb-pink) 48% 100%); box-shadow:0 0 11px rgba(255,22,143,.28); }
.studio-rig i:nth-child(1) { height:28%; }.studio-rig i:nth-child(2) { height:58%; }.studio-rig i:nth-child(3) { height:38%; }.studio-rig i:nth-child(4) { height:86%; }.studio-rig i:nth-child(5) { height:50%; }.studio-rig i:nth-child(6) { height:72%; }.studio-rig i:nth-child(7) { height:34%; }

/* Correct BeatBotCall word treatment and keep it inside the card. */
.dashboard-card--call { overflow:hidden; }
.call-logo { display:flex; align-items:baseline; width:100%; max-width:100%; margin:8px 0 13px; font-size:clamp(1.65rem,2.25vw,2.75rem); letter-spacing:-.055em; white-space:nowrap; text-shadow:none; transform:skewX(-7deg); }
.call-logo__beat { color:var(--bb-pink); text-shadow:2px 1px var(--bb-cyan),0 0 18px rgba(255,22,143,.25); }
.call-logo__call { color:#fff; margin-left:.04em; text-shadow:1px 1px var(--bb-pink),0 0 16px rgba(255,255,255,.22); }
.call-mark__beat { color:var(--bb-pink); }
.call-mark__call { color:#fff; text-shadow:4px 3px var(--bb-pink),0 0 30px rgba(255,255,255,.16); }

/* BeatBotCall public wish list */
.wishlist-page { background:radial-gradient(circle at 75% 12%,rgba(255,22,143,.12),transparent 28rem),var(--bb-bg); }
.wishlist-hero { position:relative; overflow:hidden; padding:92px 0 74px; border-bottom:1px solid var(--bb-line); background:linear-gradient(120deg,#030305 0%,#0d0610 58%,#041017 100%); }
.wishlist-hero::before { content:"77"; position:absolute; right:3%; top:-26%; color:transparent; -webkit-text-stroke:1px rgba(255,22,143,.12); font-family:var(--bb-display); font-size:26rem; line-height:1; transform:rotate(-7deg); }
.wishlist-hero::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 88px,rgba(255,22,143,.035) 89px 90px); pointer-events:none; }
.wishlist-hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; }
.wishlist-title { margin:0; font-family:var(--bb-display); font-size:clamp(4.2rem,8vw,8.4rem); line-height:.82; letter-spacing:-.025em; text-transform:uppercase; }
.wishlist-title span { display:block; }
.wishlist-title span:last-child { color:var(--bb-pink); text-shadow:0 0 28px rgba(255,22,143,.23); }
.wishlist-lead { max-width:760px; margin:28px 0 0; color:#cbc6ce; font-size:1.05rem; }
.wishlist-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--bb-line); background:rgba(4,4,8,.72); backdrop-filter:blur(12px); }
.wishlist-stats div { min-width:0; padding:22px 16px; border-right:1px solid var(--bb-line-soft); }
.wishlist-stats div:last-child { border-right:0; }
.wishlist-stats strong { display:block; color:var(--bb-pink-2); font-family:var(--bb-display); font-size:2.35rem; line-height:1; }
.wishlist-stats span { display:block; margin-top:6px; color:var(--bb-muted); font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.wishlist-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:34px; align-items:start; }
.wishlist-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.wishlist-section-head h2,.wish-form-panel h2 { margin:0; font-family:var(--bb-display); font-size:clamp(2.2rem,4vw,4rem); line-height:.95; text-transform:uppercase; }
.wishlist-count { flex:0 0 auto; padding:7px 11px; border:1px solid var(--bb-line); color:var(--bb-pink-2); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.wishlist-list { display:grid; gap:12px; }
.wish-card { position:relative; padding:20px 22px; border:1px solid rgba(255,22,143,.34); background:linear-gradient(135deg,rgba(13,13,19,.96),rgba(5,5,8,.98)); box-shadow:inset 3px 0 var(--bb-pink); }
.wish-card--done { opacity:.7; box-shadow:inset 3px 0 #4fd39a; border-color:rgba(79,211,154,.24); }
.wish-card__top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wish-card__top time { color:#77717b; font-size:.68rem; }
.wish-status { color:var(--bb-pink-2); font-size:.64rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.wish-card--done .wish-status { color:#72e0ae; }
.wish-card h3 { margin:10px 0 5px; font-size:1.12rem; line-height:1.2; text-transform:uppercase; }
.wish-card__text { color:#bdb7c1; font-size:.86rem; }
.wish-card__text p { margin:7px 0 0; }
.wish-card footer { margin-top:13px; color:#77717b; font-size:.68rem; }
.wish-card footer strong { color:#aaa4ad; }
.wishlist-empty { display:grid; gap:4px; padding:34px; border:1px dashed rgba(255,22,143,.32); color:var(--bb-muted); }
.wishlist-empty strong { color:#fff; text-transform:uppercase; }
.completed-wishes { margin-top:22px; border-top:1px solid var(--bb-line-soft); }
.completed-wishes summary { cursor:pointer; padding:20px 0; color:#d8d3da; font-weight:800; text-transform:uppercase; }
.completed-wishes summary span { display:inline-grid; place-items:center; min-width:25px; height:25px; margin-left:8px; border:1px solid rgba(79,211,154,.35); color:#72e0ae; font-size:.7rem; }
.wishlist-list--done { padding-top:4px; }
.wish-form-panel { position:sticky; top:94px; padding:25px; border:1px solid rgba(255,22,143,.55); background:linear-gradient(180deg,rgba(13,13,20,.98),rgba(4,4,7,.99)); box-shadow:var(--bb-shadow); }
.wish-form-panel > p:not(.section-kicker) { color:var(--bb-muted); font-size:.88rem; }
.wish-form { display:grid; gap:9px; margin-top:20px; }
.wish-form label { margin-top:6px; color:#dcd7de; font-size:.72rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.wish-form label span { color:var(--bb-pink); }
.wish-form input,.wish-form textarea { border-color:rgba(255,255,255,.13); outline:none; transition:.2s ease; resize:vertical; }
.wish-form input:focus,.wish-form textarea:focus { border-color:var(--bb-pink); box-shadow:0 0 0 3px rgba(255,22,143,.08); }
.wish-submit { width:100%; margin-top:10px; cursor:pointer; }
.wish-notice { margin:17px 0 0; padding:12px 14px; border-left:3px solid var(--bb-pink); background:rgba(255,22,143,.08); font-size:.82rem; }
.wish-notice--success { border-color:#4fd39a; background:rgba(79,211,154,.08); }
.wish-admin-note { margin-top:20px; padding-top:17px; border-top:1px solid var(--bb-line-soft); color:#7f7983; font-size:.72rem; }
.wish-admin-note strong { color:#aaa4ad; }
.wish-honeypot { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

@media (max-width:1220px) {
  .call-logo { font-size:clamp(1.65rem,3vw,2.7rem); }
}
@media (max-width:980px) {
  .avatar-wrap { left:19%; width:min(58%,560px); }
  .avatar-aura { left:13%; width:68%; }
  .hero-stage { inset:8% 18% 4% 10%; }
  .wishlist-hero__grid,.wishlist-layout { grid-template-columns:1fr; }
  .wishlist-stats { max-width:720px; }
  .wish-form-panel { position:static; }
}
@media (max-width:640px) {
  .hero-graffiti { right:1%; width:42%; font-size:3.4rem; }
  .avatar-wrap { left:7%; width:76%; bottom:-3%; }
  .avatar-aura { left:1%; width:88%; }
  .hero-stage { inset:7% 8% 4%; }
  .studio-rig { right:2%; width:27%; opacity:.7; }
  .wishlist-hero { padding:68px 0 55px; }
  .wishlist-title { font-size:clamp(3.6rem,17vw,5.5rem); }
  .wishlist-stats { grid-template-columns:1fr; }
  .wishlist-stats div { border-right:0; border-bottom:1px solid var(--bb-line-soft); }
  .wishlist-stats div:last-child { border-bottom:0; }
  .wishlist-section-head { align-items:flex-start; }
  .wish-form-panel { padding:20px; }
}

/* Keep the large right-side BeatBot77 wordmark fully inside the hero. */
.hero-graffiti { right:3%; width:38%; font-size:clamp(2.8rem,4.15vw,5.15rem); }
@media (max-width:640px) { .hero-graffiti { right:2%; width:43%; font-size:3.05rem; } }


/* BeatBot77 2.2: four-card dashboard and direct navigation */
.card-link-stack { margin-top:auto; display:grid; gap:10px; }
.card-link-stack .card-button { margin-top:0; }
.card-text-link {
  display:block;
  color:#a9a4ad;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.04em;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
}
.card-text-link:hover { color:var(--bb-pink-2); }

.dashboard-card--youtube {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 22%,rgba(255,0,51,.16),transparent 9rem),
    linear-gradient(180deg,rgba(12,12,18,.96),rgba(4,4,7,.98));
}
.dashboard-card--youtube::after {
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-105px;
  bottom:-110px;
  border:1px solid rgba(255,0,51,.18);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(255,0,51,.025),0 0 0 48px rgba(255,0,51,.02);
}
.youtube-card-visual {
  position:relative;
  z-index:1;
  min-height:128px;
  margin:3px 0 14px;
  padding:18px;
  display:grid;
  align-content:center;
  justify-items:start;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg,rgba(255,0,51,.12),transparent 54%),
    repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.025) 29px 30px),
    #07070b;
}
.youtube-play {
  display:grid;
  place-items:center;
  width:54px;
  height:38px;
  margin-bottom:12px;
  border-radius:10px;
  background:#ff0033;
  box-shadow:0 0 25px rgba(255,0,51,.28);
}
.youtube-play svg { width:24px; height:24px; fill:#fff; }
.youtube-card-visual strong {
  color:#fff;
  font-family:var(--bb-display);
  font-size:1.5rem;
  letter-spacing:.045em;
  line-height:1;
}
.youtube-card-visual em {
  margin-top:5px;
  color:#8f8994;
  font-size:.62rem;
  font-style:normal;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.card-button--youtube { border-color:#ff174c; color:#fff; background:rgba(255,0,51,.08); }
.card-button--youtube:hover { background:#ff0033; }
.card-button--disabled {
  border-color:rgba(255,255,255,.12);
  color:#77717b;
  cursor:default;
  font-size:.58rem;
  text-align:center;
}
.section-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

/* Merchandise page */
.merch-page {
  min-height:70vh;
  background:
    radial-gradient(circle at 78% 16%,rgba(255,22,143,.13),transparent 27rem),
    radial-gradient(circle at 25% 72%,rgba(55,221,255,.06),transparent 24rem),
    var(--bb-bg);
}
.merch-hero {
  position:relative;
  overflow:hidden;
  padding:100px 0 82px;
  border-bottom:1px solid var(--bb-line);
  background:linear-gradient(125deg,#030305 0%,#0b0610 60%,#041017 100%);
}
.merch-hero::before {
  content:"MERCH";
  position:absolute;
  right:-2%;
  top:-12%;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,22,143,.12);
  font-family:var(--bb-display);
  font-size:clamp(10rem,24vw,24rem);
  line-height:1;
  transform:rotate(-7deg);
}
.merch-hero__inner { position:relative; z-index:1; max-width:940px; }
.merch-title {
  margin:0;
  font-family:var(--bb-display);
  font-size:clamp(4.5rem,10vw,9.5rem);
  line-height:.84;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.merch-title span { color:var(--bb-pink); }
.merch-lead { max-width:720px; margin:25px 0 0; color:#cbc6ce; font-size:1.05rem; }
.merch-content { padding:72px 0 100px; }
.merch-panel {
  max-width:980px;
  padding:34px;
  border:1px solid var(--bb-line);
  background:linear-gradient(180deg,rgba(13,13,19,.97),rgba(5,5,8,.98));
  box-shadow:var(--bb-shadow);
}
.merch-panel .entry-content > :first-child { margin-top:0; }
.merch-panel .entry-content > :last-child { margin-bottom:0; }
.merch-external { margin-top:28px; }

@media (max-width:640px) {
  .section-actions { display:grid; }
  .merch-hero { padding:72px 0 58px; }
  .merch-panel { padding:22px; }
}

.header-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.header-wishes {
  padding:10px 12px;
  color:#d9d3df;
  text-decoration:none;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.header-wishes:hover { color:var(--bb-pink-2); }
@media (max-width:980px) { .header-actions { display:none; } }