/* PORTAL CODE v2.2 */
:root{
  --green:#00e91f; --purple:#4C1E4F; --night:#0d160b; --text:#e9ecef;
  --max:1100px;
}
a.icon, a.icon-alt { color: #fff;}
a.icon:hover, a.icon-alt:hover { color: var(--green) !important;}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night);color:var(--text);font-family:Inter,system-ui,sans-serif}
a{color:var(--green);text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:40px 20px}
.panel{padding:37px 0}
.dark{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.02))}

/* HERO centered image (B) */
.hero{min-height:68vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:40px 20px}
.hero-centered .logo-img-wrap{position:relative;z-index:3;display:flex;justify-content:center;width:100%}
.hero-centered .hero-logo{width:min(1200px,90vw);height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(76,30,79,.35)) drop-shadow(0 0 24px rgba(0,233,31,.2))}
.nebula{position:absolute;inset:-20%;background:
  radial-gradient(60% 50% at 50% 40%, rgba(0,233,31,.12), transparent 60%),
  radial-gradient(40% 35% at 70% 70%, rgba(76,30,79,.25), transparent 70%);
  filter:blur(24px) saturate(110%);animation:drift 24s infinite linear;pointer-events:none}
@keyframes drift{0%{transform:scale(1.05)}50%{transform:scale(1.08)}100%{transform:scale(1.05)}}

/* CRT overlay */
.crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:2;background-image:
  linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, rgba(255,255,255,0) 2px 4px);
  background-size:100% 3px,6px 6px;mix-blend-mode:overlay;animation:pulse 7s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.65}}

.top-nav{position:absolute;top:28px;right:32px;display:flex;gap:12px;z-index:4}
.top-nav a{color:rgba(255,255,255,.85);padding:8px 12px;border-radius:6px;font-weight:600}
.top-nav a:hover{background:rgba(255,255,255,.06);color:var(--green)}

h2{font-family:'Orbitron',sans-serif;margin:0 0 18px;font-weight:700;color:#fff}

/* Listen cards — uniform height + clamped titles */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:18px;perspective:1200px}
.song-card{position:relative}
.holo{position:relative;padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.06));
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;transform:rotateX(6deg);transition:.25s}
.holo.grid{display:grid;grid-template-columns:1fr 64px;grid-template-rows:auto 1fr 28px;min-height:200px}
.song-card:hover .holo{transform:rotateX(0) translateZ(8px);border-color:rgba(0,233,31,.35);box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 24px rgba(0,233,31,.18)}

.play{grid-column:2;grid-row:1;width:54px;height:54px;border:none;background:transparent;cursor:pointer;justify-self:end;align-self:start}
.play-icon .ring{fill:none;stroke:var(--green);stroke-width:2;opacity:.85}
.play-icon .triangle{fill:#fff;opacity:.95}

.meta{grid-column:1;grid-row:1 / span 2;padding-right:16px;align-self:start}
.meta h3{margin:0 0 6px;font-family:'Orbitron',sans-serif;letter-spacing:1px;font-weight:700;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:3.2em}
.meta p{margin:0;color:rgba(255,255,255,.78)}

.wave{grid-column:1 / span 2;grid-row:3;align-self:end;height:24px;opacity:.8;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px)}

/* Contact icons */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:16px;align-items:center;justify-items:center;margin-top:12px}
.icon{width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.08));border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .15s,box-shadow .2s,border-color .2s}
.icon svg{width:28px;height:28px;fill:#fff;opacity:.9}
.icon:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(0,233,31,.4);box-shadow:0 0 18px rgba(0,233,31,.18)}
.icon:hover svg{opacity:1}
.linktree{color:#9fe3ab;opacity:.9}.linktree:hover{color:var(--green);opacity:1}

/* Footer */
.site-footer{padding:28px 0;text-align:center;color:rgba(255,255,255,.7)}

@media (max-width:720px){
  .top-nav{top:12px;right:12px}
  .container{padding:28px 16px}
}