/* ===========================
   REVNEX Neon Link Hub — styles.css (v42)
   =========================== */

:root{
  --frame:#3a3a3a;
  --box-bg:#121214;   /* main container + marquee bg */
  --cta:#8abd32;
  --fg:#ffffff;
  --muted:#d9d9d9;

  --page1:#0a0a0a;
  --page2:#1c1c1c;
  --page3:#2b2b2b;
  --page4:#3a3a3a;

  --frame-pad: 22px;
}

@keyframes bgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

*{box-sizing:border-box}
html,body{min-height:100%;width:100%;overflow-x:hidden}

body{
  margin:0;color:var(--fg);
  font-family:'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px;

  background: linear-gradient(-45deg,var(--page1),var(--page2),var(--page3),var(--page4));
  background-size: 400% 400%;
  animation: bgMove 22s ease infinite;
}

/* Solid frame */
.frame{
  position:relative;
  max-width:1100px;width:100%;margin-inline:auto;
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 32px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  padding: var(--frame-pad);
  border-radius: 0;
}

/* Marquee — same bg as main box */
.intel-marquee{
  position:relative; overflow:hidden;
  left: calc(-1 * var(--frame-pad));
  width: calc(100% + (var(--frame-pad) * 2));
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:8px 0; margin: calc(-1 * var(--frame-pad)) 0 14px;
  background: var(--box-bg);
}
.intel-track{display:flex; align-items:center; gap:8px; width:max-content; padding:0 10px; will-change: transform;}
.intel-seg{ display:flex; align-items:center; gap:8px; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:#2b2b2b;
  white-space:nowrap;
  border-radius:0;
}
.chip-label{
  display:inline-flex; align-items:center; gap:6px;
  font:700 10px/1 'Space Mono', ui-monospace, monospace;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--muted);
}
.chip-dot{width:8px;height:8px;border-radius:999px;background:var(--dot,#76e0a5);box-shadow:0 0 8px var(--dot,#76e0a5)}
.chip-val{font:800 13px/1.1 'Space Mono', ui-monospace, monospace;color:#fff}

/* Accent type */
h1,h2,h3,h4,h5,h6,
.tag,.transmission,.release-tag{
  font-family:'Bebas Neue', system-ui, -apple-system, sans-serif;
}

/* Buttons use Space Mono */
.btn, .listen-btn, .badge { font-family:'Space Mono', ui-monospace, monospace; }

/* Logo */
.logo-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 2px}
.logo{display:block;width:100%;height:auto;margin:0 auto;position:relative}
.logo-img{
  width:auto; max-width: clamp(120px, 20vw, 260px);
  height:auto; display:block; margin:6px auto 6px;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.55));
}

/* Release square */
.release{display:flex;justify-content:center;margin:10px 0 8px}
/* 50% of prior size: 560px → 280px */
.release-wrap{ position:relative; width:100%; max-width:280px; aspect-ratio:1/1; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0d0d0d;}
.release-img{ width:100%; height:100%; object-fit:cover; display:block;}
.release-tag{ position:absolute; left:0; top:0; padding:8px 12px; background:rgba(0,0,0,.55); color:#fff; letter-spacing:.12em; text-transform:uppercase; font-size:20px; font-weight:400; border-bottom:1px solid rgba(255,255,255,.18); border-right:1px solid rgba(255,255,255,.18); }

/* LISTEN NOW (doubled) */
.tag{
  letter-spacing:.16em; text-transform:uppercase;
  font-size:56px;
  font-weight:400; color:#e9e9e9;
  text-align:center; margin:16px 0 14px;
}

/* Listen buttons (stacked, larger) */
.listen-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  max-width: 520px;
  margin: 0 auto 18px auto;
}
.listen-btn{
  display:flex; align-items:center; gap:14px; justify-content:center;
  text-decoration:none;
  color:#0b0b0b; background:var(--cta); border:1.5px solid var(--cta);
  padding:18px 20px;
  transition:transform .12s ease, filter .2s ease;
  text-transform:none; letter-spacing:.02em; font-weight:800;
  font-size:18px;
}
.listen-btn:hover{ transform:translateY(-2px); filter:saturate(1.08); }
.listen-ico img{ width:26px; height:26px; display:block; }
.listen-label{ font-size:18px; }

/* Separator (center the image and align with 520px content width) */
.separator{
  display:flex; justify-content:center; margin:18px 0 6px;
}
.separator img{
  width:100%; max-width:520px; height:auto; display:block;
  margin: 0 auto;
  opacity:.95;
}

/* Tagline (doubled) */
.transmission{
  text-align:center; letter-spacing:.02em;
  font-size:52px;
  font-weight:400; color:#fff;
  margin:20px 0 12px;
}

/* Social icons */
.socials{display:flex;justify-content:center;gap:16px;margin:8px 0 20px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .15s ease, filter .2s ease}
.soc img{width:30px;height:30px;display:block}
.soc:hover img{transform:scale(1.08)}

/* CTAs */
.links{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  max-width: 520px;
  margin-left:auto; margin-right:auto;
}
.btn{
  display:block;text-decoration:none;color:#0b0b0b;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  padding:16px 18px;
  border:1.5px solid var(--cta);
  background:var(--cta);
  transition:transform .12s ease, filter .2s ease, background .2s ease;
  font-size:16px;
}
.btn:hover{transform:translateY(-2px); filter:saturate(1.1)}
.btn:active{transform:translateY(1px) scale(.99)}

/* Legal */
.legal{ margin:22px auto 0 auto; text-align:center; color:#fff; max-width: 620px;}
.legal-mark{ display:block; margin:0 auto 8px auto; width:30px; height:auto; filter: brightness(0) invert(1); }
.legal-title{ font-size:12px; letter-spacing:.06em; margin-bottom:8px; }
.legal-text{ font-size:10px; line-height:1.6; color:#e8e8e8; max-width: 600px; margin:0 auto 8px auto; }
.legal-link a{ color:#ffffff; text-decoration:underline; text-underline-offset:2px; font-size:10px; }

/* Mobile */
@media (max-width:480px){
  body{padding:12px}
  .frame{padding:16px;border-width:1px}
  .intel-marquee{ left:-16px;width:calc(100% + 32px); margin-top:-16px; }
  .release-wrap{ max-width: 100%; }
  .release-tag{ font-size:18px; padding:7px 10px; }
  .tag{font-size:34px}
  .transmission{font-size:32px}
  .links, .listen-grid, .separator img{max-width: 100%}
  .legal-title{font-size:11px}
  .legal-text, .legal-link a{font-size:9.5px}
}