*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#0b0f14; --ink:#e8eef6; --muted:#a8b3c7; --line:#17202a;
  --brand:#1b76ff; --cyan:#06b6d4; --hot:#f472b6; --acid:#22c55e; --mag:#f43f5e;
}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:#9bd0ff;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.side-nav{position:fixed;inset:0 auto 0 0;width:260px;padding:16px 14px 18px;z-index:60;background:linear-gradient(180deg,rgba(11,15,20,.92),rgba(11,15,20,.8));border-right:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.logo{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--cyan));font-weight:800}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text strong{font-size:18px}
.brand-text span{font-size:12px;color:var(--muted)}
.nav-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}
.nav-link{display:block;padding:10px 12px;border-radius:10px;color:#d4deec;border:1px solid transparent;transition:box-shadow .25s,border-color .25s,transform .12s}
.nav-link:hover{border-color:rgba(34,197,94,.35);box-shadow:0 0 12px rgba(34,197,94,.35), inset 0 0 8px rgba(34,197,94,.15);color:#e9ffee}
.nav-link:active{transform:scale(.98)}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.pulse-once{animation:pulse-ring 600ms ease-out 1}
.player{border-top:1px solid var(--line);padding-top:12px}
.btn{display:inline-block;background:var(--brand);padding:10px 14px;border-radius:10px;color:#fff;font-weight:600;border:none;cursor:pointer}
.btn-ghost{background:#111826;border:1px solid #1f2a38;color:#d7eaff}
.btn-power{width:100%;margin-bottom:10px;background:linear-gradient(90deg,var(--brand),var(--cyan))}
.nowplaying{display:flex;align-items:center;gap:10px;color:#c8d5e8;font-size:13px;margin:6px 0}
.eq i{display:inline-block;width:3px;height:10px;background:#c8d5e8;margin-right:2px;opacity:.6}
.eq i:nth-child(1){animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(3){animation:eq 0.9s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
.vol{display:flex;align-items:center;gap:8px;color:#9fb2cf}.vol input{width:100%}
.main{margin-left:260px;position:relative}
.footer{padding:20px 0;border-top:1px solid var(--line);color:#a8b3c7;font-size:14px;text-align:center}
.led-wrap{height:70px;border-bottom:1px solid var(--line);background:#0b0f14;overflow:hidden;position:relative;perspective:1000px}
.led-banner{display:inline-block;white-space:nowrap;font:800 32px/70px Inter,system-ui,sans-serif;color:#9bd0ff;text-shadow:0 0 6px var(--brand),0 0 12px var(--cyan);transform:rotateX(15deg) translateZ(60px) scale(1.1);transform-origin:center;animation:marquee 8s linear infinite}
.led-banner span{padding-right:2rem}
.scanline{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(27,118,255,.18),transparent);mix-blend-mode:screen;animation:scan 3.5s linear infinite}
@keyframes marquee{0%{transform:rotateX(15deg) translateZ(60px) translateX(0) scale(1.1)}100%{transform:rotateX(15deg) translateZ(60px) translateX(-100%) scale(1.1)}}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.bg-canvas{position:absolute;inset:70px 0 auto 260px;z-index:-1;opacity:.55}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;padding:26px 24px 10px}
.hero h1{font-size:38px;margin:.2em 0 .3em}
.tagline{color:var(--muted)}
.cta-row{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.socials{margin-top:10px;color:var(--muted)}
.hero-art{position:relative;min-height:360px}
.hero-art img#bernard{position:relative;z-index:2;border-radius:12px;border:1px solid var(--line)}
.sticker{position:absolute;z-index:3;width:110px;user-select:none;pointer-events:auto;cursor:grab;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
#stickerPaw{top:20px;left:20px} #stickerBolt{bottom:18px;left:40px} #stickerTag{top:40px;right:18px}
.section{padding:28px 24px;border-top:1px solid var(--line)}
.section h2{margin:0 0 12px}
.card{background:#0f1520;border:1px solid #1f2a38;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:0}
.card-body{padding:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.masonry{column-count:3;column-gap:16px}
.idea{background:#0f1520;border:1px solid #263244;border-radius:12px;padding:12px 12px;break-inside:avoid;margin:0 0 16px;transform:rotate(-.5deg)}
.inv h3{margin:.2em 0 .2em}
.candle-teaser{height:160px;background:linear-gradient(180deg,#0e1622,#0b0f14);position:relative;overflow:hidden}
.reveal{opacity:0;transform:translateY(8px)} .reveal.revealed{opacity:1;transform:translateY(0);transition:opacity .5s ease, transform .5s ease}
.reveal.revealed .card,.reveal.revealed .inv,.reveal.revealed .idea{animation:glitch .12s steps(2,end) 1}
@keyframes glitch{0%{clip-path:inset(0 0 60% 0)}50%{clip-path:inset(40% 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.btn.cta{position:relative;overflow:hidden}
.btn.cta:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 10%, rgba(255,255,255,.15), transparent 40%);opacity:0;transition:opacity .3s}
.btn.cta:hover:after{opacity:1}
@media (prefers-reduced-motion: reduce){.led-banner,.scanline,.reveal.revealed .card,.reveal.revealed .inv,.reveal.revealed .idea{animation:none!important}.bg-canvas{display:none}}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.card{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.masonry{column-count:1}.bg-canvas{left:0;inset:70px 0 auto 0}.main{margin-left:0}.side-nav{position:relative;width:auto;inset:auto;border-right:none;border-bottom:1px solid var(--line)}}
#bernard {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  border: 1px solid #111;

  /* Glow effect */
  box-shadow:
    0 0 30px rgba(0, 255, 100, 0.7),
    0 0 60px rgba(0, 255, 100, 0.5),
    0 0 120px rgba(0, 255, 100, 0.3);
  
  /* Subtle breathing animation */
  animation: bernardGlow 6s ease-in-out infinite alternate;
}

@keyframes bernardGlow {
  0% {
    box-shadow:
      0 0 20px rgba(0, 255, 100, 0.5),
      0 0 50px rgba(0, 255, 100, 0.3),
      0 0 100px rgba(0, 255, 100, 0.2);
  }
  100% {
    box-shadow:
      0 0 40px rgba(0, 255, 100, 0.9),
      0 0 80px rgba(0, 255, 100, 0.6),
      0 0 150px rgba(0, 255, 100, 0.4);
  }
}