/* =============================================================================
   HOLLIBAE SITE STYLES — single merged stylesheet
   Sections: BASE (shared/global) -> HOME -> ABOUT -> TWITCH -> NEON EFFECTS
   See README.md for the full site orchestration explanation.
   ============================================================================= */

/* =============================================================================
   SECTION: BASE — shared tokens, layout, nav, buttons, cards, footer, cart
   Used on every page.
   ============================================================================= */

:root {
  --pink: #FF1493;
  --blue: #00D9FF;
  --purple: #A020F0;
  --green: #9DFF00;
  --bg: #050507;
  --bg-2: #0B0712;
  --panel: #110D18;
  --text: #FFFFFF;
  --muted: #B8B2C2;
  --line: rgba(255,255,255,.10);
  --shadow-pink: 0 0 18px rgba(255,20,147,.35);
  --shadow-blue: 0 0 18px rgba(0,217,255,.35);
  --shadow-purple: 0 0 20px rgba(160,32,240,.35);
  --shadow-green: 0 0 18px rgba(157,255,0,.30);
  --radius: 22px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(255,20,147,.12), transparent 25%),
    radial-gradient(circle at 85% 20%, rgba(0,217,255,.09), transparent 28%),
    radial-gradient(circle at 55% 80%, rgba(160,32,240,.10), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .05;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.16) 0,
    rgba(255,255,255,.16) 1px,
    transparent 1px,
    transparent 4px
  );
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
button { color: inherit; }

::selection {
  background: var(--pink);
  color: #fff;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  transform: translateY(-160%);
  background: #fff;
  color: #000;
  padding: 10px 14px;
  z-index: 10000;
  border-radius: 10px;
}
.skip-link:focus { transform: translateY(0); }

.site-shell { position: relative; }

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(18px);
  background: rgba(5,5,7,.72);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 76px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: -.045em;
  font-size: clamp(1.3rem, 3vw, 2rem);
  text-transform: uppercase;
  position: relative;
}
.logo span { color: var(--pink); text-shadow: var(--shadow-pink); }

.nav-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,20,147,.35);
  box-shadow: 0 0 14px rgba(255,20,147,.28);
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links a {
  padding: 12px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: .2s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
  animation: pulse 1.7s infinite ease-in-out;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

.menu-btn {
  display: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.section {
  padding: 92px 0;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--green);
  font-weight: 900;
  font-size: .78rem;
}

.display {
  font-size: clamp(3.8rem, 12vw, 10rem);
  letter-spacing: -.075em;
  line-height: .82;
  margin: 0;
  font-weight: 1000;
  text-transform: uppercase;
  position: relative;
}

.display.glitch::before,
.display.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
}
.display.glitch::before {
  color: var(--blue);
  transform: translate(4px, 0);
  clip-path: inset(15% 0 55% 0);
}
.display.glitch::after {
  color: var(--pink);
  transform: translate(-4px, 0);
  clip-path: inset(62% 0 13% 0);
}

.title {
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  letter-spacing: -.055em;
  line-height: .95;
  margin: 0 0 20px;
  font-weight: 1000;
  text-transform: uppercase;
}

.lead {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  max-width: 760px;
}

.hero {
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
  position: relative;
  padding: 48px 0 74px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: center;
}

.hero-copy { position: relative; z-index: 3; }

.gradient-text {
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(1.2rem, 3vw, 2.15rem);
  font-weight: 850;
  line-height: 1.12;
  margin: 26px 0 10px;
}
.hero-sub span:nth-child(1) { color: var(--pink); }
.hero-sub span:nth-child(2) { color: var(--blue); }
.hero-sub span:nth-child(3) { color: var(--green); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: #fff;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .08em;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.pink { border-color: rgba(255,20,147,.7); box-shadow: var(--shadow-pink); }
.btn.blue { border-color: rgba(0,217,255,.7); box-shadow: var(--shadow-blue); }
.btn.green { border-color: rgba(157,255,0,.6); box-shadow: var(--shadow-green); }
.btn:hover.pink { background: rgba(255,20,147,.12); }
.btn:hover.blue { background: rgba(0,217,255,.10); }
.btn:hover.green { background: rgba(157,255,0,.09); }

.system-readout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 8px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
}
.system-readout b { color: #fff; }

.placeholder {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(255,20,147,.1), rgba(160,32,240,.04) 45%, rgba(0,217,255,.09)),
    var(--panel);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  isolation: isolate;
}
.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .6;
}
.placeholder::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  right: -10%;
  top: -12%;
  background: radial-gradient(circle, rgba(255,20,147,.22), transparent 68%);
  filter: blur(10px);
  z-index: -1;
}
.placeholder .label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
}
.placeholder-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
}
/* Dropped-in photo failed to load (or hasn't been added yet): fall back to
   the plain placeholder look instead of a browser broken-image icon. */
.placeholder-photo.photo-missing {
  display: none;
}
.placeholder .crosshair {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
}
.placeholder .crosshair::before,
.placeholder .crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.18);
}
.placeholder .crosshair::before { width: 1px; height: 110px; left: 50%; top: -20px; }
.placeholder .crosshair::after { height: 1px; width: 110px; top: 50%; left: -20px; }

.hero-visual { position: relative; }
.hero-visual .placeholder { aspect-ratio: 4 / 5; min-height: unset; }
.neon-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .45;
  pointer-events: none;
}
.neon-orb.pink { width: 220px; height: 220px; background: var(--pink); right: -50px; top: 20%; }
.neon-orb.blue { width: 170px; height: 170px; background: var(--blue); left: -50px; bottom: 4%; }

.marquee {
  border-block: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
  padding: 14px 0;
}
.marquee-track span {
  font-size: .86rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-right: 32px;
  color: var(--muted);
}
@keyframes marquee { to { transform: translateX(-50%); } }

.live-grid,
.about-grid,
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  align-items: stretch;
}

.stream-box {
  aspect-ratio: 16 / 9;
  min-height: unset;
}
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding: 24px;
}
.panel h3 { margin: 0 0 8px; font-size: 1.35rem; }
.meta { color: var(--muted); line-height: 1.65; }

.live-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #fff;
  font-weight: 900;
  background: rgba(255,20,147,.12);
  border: 1px solid rgba(255,20,147,.45);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--shadow-pink);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.card {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 20px;
  padding: 24px;
  min-height: 220px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  right: -48px; bottom: -48px;
  background: var(--accent, var(--purple));
  opacity: .15;
  filter: blur(12px);
}
.card:hover {
  transform: translateY(-5px) rotate(.25deg);
  border-color: color-mix(in srgb, var(--accent, var(--purple)) 60%, white 10%);
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
}
.card h3 { margin: 0 0 12px; font-size: 1.2rem; text-transform: uppercase; }
.card p { color: var(--muted); line-height: 1.65; margin: 0; }

.editorial-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 42px;
  align-items: start;
}
.editorial-copy {
  position: sticky;
  top: 110px;
}
.editorial-copy p { color: var(--muted); line-height: 1.75; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 22px;
}
.stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
}
.stat span { color: var(--muted); }
.stat b { color: var(--green); }

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.gallery .placeholder { min-height: 250px; transition: transform .2s ease; }
.gallery .placeholder:hover { transform: scale(1.012) rotate(.25deg); }
.gallery .g1 { grid-column: span 7; aspect-ratio: 4/5; }
.gallery .g2 { grid-column: span 5; aspect-ratio: 3/4; margin-top: 40px; }
.gallery .g3 { grid-column: span 5; aspect-ratio: 1/1; }
.gallery .g4 { grid-column: span 7; aspect-ratio: 16/9; }
.gallery .g5 { grid-column: span 7; aspect-ratio: 3/4; }
.gallery .g6 { grid-column: span 5; aspect-ratio: 4/5; margin-top: -30px; }

.info-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.info-list .panel { min-height: 170px; }

.shop-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0;
}
.filter-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
}
.filter-btn.active, .filter-btn:hover { color: #fff; border-color: rgba(0,217,255,.45); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.product-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.028);
  border-radius: 20px;
  overflow: hidden;
}
.product-card .placeholder { border: 0; border-radius: 0; min-height: unset; aspect-ratio: 1/1; }
.product-body { padding: 18px; }
.product-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.product-name { margin: 0; font-size: 1.08rem; }
.price { color: var(--green); font-weight: 950; }
.badges { display: flex; gap: 7px; margin: 10px 0 14px; flex-wrap: wrap; }
.badge {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.badge.hot { color: #fff; border-color: rgba(255,20,147,.45); }
.badge.limited { color: #fff; border-color: rgba(160,32,240,.5); }
.badge.sold { opacity: .65; }

.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
select {
  width: 100%;
  background: #09090d;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.cart-btn { width: 100%; }

.drop-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid rgba(255,20,147,.25);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 10% 50%, rgba(255,20,147,.12), transparent 35%),
    rgba(255,255,255,.025);
  margin: 34px 0;
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px,1fr));
  gap: 8px;
}
.timebox {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  background: rgba(0,0,0,.22);
}
.timebox strong { display: block; font-size: 1.5rem; }
.timebox span { color: var(--muted); font-size: .66rem; text-transform: uppercase; }

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.social-card {
  min-height: 220px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,.028);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  /* Chasing RGB outline; each card is offset below via nth-child. */
  animation: socialRgbOutline 6s linear infinite;
}
.social-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
.social-card::after {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .11;
  right: -60px; top: -70px;
  filter: blur(20px);
}

@keyframes socialRgbOutline {
  0%   { border-color: var(--pink); }
  25%  { border-color: var(--purple); }
  50%  { border-color: var(--blue); }
  75%  { border-color: var(--green); }
  100% { border-color: var(--pink); }
}

.social-grid .social-card:nth-child(1) { animation-delay: 0s; }
.social-grid .social-card:nth-child(2) { animation-delay: -1s; }
.social-grid .social-card:nth-child(3) { animation-delay: -2s; }
.social-grid .social-card:nth-child(4) { animation-delay: -3s; }
.social-grid .social-card:nth-child(5) { animation-delay: -4s; }
.social-grid .social-card:nth-child(6) { animation-delay: -5s; }

.social-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.social-icon {
  position: relative;
  isolation: isolate;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 1.5rem;
  color: #fff;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 55%, transparent),
      color-mix(in srgb, var(--accent) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, white 8%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}

.social-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--neon-angle, 0deg), var(--pink), var(--blue), var(--purple), var(--green), var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .8;
  animation: neonBorderSpin 5s linear infinite;
}

.social-status-chip {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.social-name { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 1000; text-transform: uppercase; }
.social-handle { color: var(--muted); font-family: ui-monospace, monospace; }

.social-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-cta {
  font-weight: 900;
  color: #fff;
  transition: transform .2s ease, color .2s ease;
}

.social-card:hover .social-cta {
  color: var(--accent);
  transform: translateX(4px);
}

.cta {
  text-align: center;
  padding: 110px 20px;
  position: relative;
}
.cta h2 {
  font-size: clamp(3rem, 8vw, 7rem);
  margin: 0 0 12px;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.cta p { color: var(--muted); font-size: 1.15rem; }

.footer {
  border-top: 1px solid var(--line);
  padding: 50px 0 30px;
  overflow: hidden;
  position: relative;
}
.footer-ghost {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  font-size: clamp(5rem, 18vw, 16rem);
  font-weight: 1000;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.025);
  white-space: nowrap;
  pointer-events: none;
}
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); }
.footer-note { color: var(--muted); margin-top: 30px; font-size: .86rem; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: #0a0810;
  border-left: 1px solid var(--line);
  z-index: 1200;
  transform: translateX(105%);
  transition: transform .25s ease;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.45);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.cart-items { flex: 1; overflow: auto; padding: 14px 0; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
}
.cart-item small { color: var(--muted); display: block; margin-top: 4px; }
.cart-total { border-top: 1px solid var(--line); padding-top: 18px; }
.cart-open-btn { position: relative; }
.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pink);
  font-size: .68rem;
  font-weight: 900;
  margin-left: 6px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.cursor-glow {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,32,240,.12), transparent 68%);
  pointer-events: none;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: opacity .2s ease;
}

@media (max-width: 980px) {
  .nav-links { display: none; position: absolute; top: 76px; left: 16px; right: 16px; padding: 14px; background: rgba(9,9,13,.96); border: 1px solid var(--line); border-radius: 18px; flex-direction: column; align-items: stretch; }
  .nav-links.open { display: flex; }
  .menu-btn { display: inline-grid; place-items: center; }
  .status-pill { margin-left: auto; }
  .hero-grid, .editorial-grid, .live-grid { grid-template-columns: 1fr; }
  .hero { min-height: unset; padding-top: 70px; }
  .hero-visual { max-width: 680px; width: 100%; margin: 20px auto 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial-copy { position: static; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .drop-panel { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 28px, var(--max)); }
  .section { padding: 72px 0; }
  .status-pill { display: none; }
  .system-readout { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .product-grid, .social-grid, .info-list, .footer-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery > .placeholder { grid-column: auto !important; margin-top: 0 !important; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .select-row { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .display { font-size: clamp(4.4rem, 24vw, 7rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cursor-glow { display: none; }
}

.home-hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: unset;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);

  background:
    radial-gradient(circle at 50% 34%, rgba(255,20,147,.24), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(160,32,240,.16), transparent 35%),
    radial-gradient(circle at 84% 72%, rgba(0,217,255,.12), transparent 32%),
    linear-gradient(145deg, #0b0712 0%, #050507 56%, #08050d 100%);

  border: 1px solid rgba(255,20,147,.42);

  box-shadow:
    0 24px 80px rgba(0,0,0,.48),
    0 0 34px rgba(255,20,147,.16),
    inset 0 0 55px rgba(0,0,0,.62);
}

/* Fine grid and scan texture behind the hero artwork. */
.home-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.28));
}

/* Soft neon bloom that helps transparent artwork feel integrated into the card. */
.home-hero-photo::after {
  content: "";
  position: absolute;
  inset: 9% 7% 13%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,20,147,.28), transparent 46%),
    radial-gradient(circle at 55% 62%, rgba(160,32,240,.18), transparent 55%);
  filter: blur(26px);
}

/* JACKIE / HOLLIBAE HERO ART */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;
  display: block;

  /* Fill the 4:5 hero card edge-to-edge, no letterboxing/dead space. */
  object-fit: cover;
  object-position: center;
  padding: 0;

  filter:
    drop-shadow(0 18px 22px rgba(0,0,0,.52))
    drop-shadow(0 0 15px rgba(255,20,147,.20));

  transform: translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
}

/* If you later use a normal portrait instead of a logo, add class="hero-photo portrait". */
.hero-photo.portrait {
  object-fit: cover;
  object-position: center top;
  padding: 0;
  filter: none;
}

/* Cinematic shading over the artwork while preserving the center of the logo. */
.hero-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(5,5,7,.03) 0%,
      rgba(5,5,7,.02) 45%,
      rgba(5,5,7,.30) 72%,
      rgba(5,5,7,.88) 100%
    ),
    linear-gradient(
      90deg,
      rgba(5,5,7,.18) 0%,
      transparent 18%,
      transparent 82%,
      rgba(5,5,7,.18) 100%
    );
}

/* Keep all HUD content safely above the artwork and shading. */
.home-hero-photo .hud-corner,
.home-hero-photo .hero-photo-label,
.home-hero-photo .crosshair,
.home-hero-photo .label {
  position: absolute;
  z-index: 3;
}

/* Give the HUD a more intentional tactical-display treatment. */
.hero-photo-label {
  top: 18px;
  left: 18px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-left: 2px solid var(--pink);
  background: linear-gradient(90deg, rgba(5,5,7,.72), transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  pointer-events: none;
}

.hero-photo-label span {
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .16em;
}

.hero-photo-label b {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .08em;
  text-shadow: var(--shadow-pink);
}

.home-hero-photo .crosshair {
  opacity: .34;
  mix-blend-mode: screen;
}

.home-hero-photo .label {
  z-index: 4;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}

/* Make the existing rotating rings feel connected to the hero artwork. */
.hero-frame-wrap {
  position: relative;
  isolation: isolate;
}

.hero-ring {
  pointer-events: none;
}

@media (max-width: 680px) {
  .hero-photo-label {
    top: 13px;
    left: 13px;
  }

  .home-hero-photo .label {
    left: 13px;
    right: 13px;
    bottom: 13px;
  }
}

/* ============================================================
   HOLLIBAE PROFILE CARD
============================================================ */

.holli-profile-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;

  background:
    radial-gradient(circle at 15% 50%,
      rgba(255, 20, 147, 0.07),
      transparent 30%),
    radial-gradient(circle at 85% 50%,
      rgba(160, 32, 240, 0.08),
      transparent 30%);
}


/* ENTIRE CARD */

.holli-profile-card {
  position: relative;

  display: grid !important;

  grid-template-columns:
    minmax(320px, 460px) minmax(0, 1fr) !important;

  align-items: center !important;

  gap: clamp(45px, 6vw, 90px);

  width: 100%;
  max-width: 1400px;

  margin: 0 auto;

  padding: clamp(30px, 4vw, 55px);

  border:
    1px solid rgba(255, 255, 255, 0.10);

  border-radius: 32px;

  background:
    linear-gradient(115deg,
      rgba(255, 20, 147, 0.035),
      transparent 38%),
    linear-gradient(305deg,
      rgba(0, 217, 255, 0.025),
      transparent 42%),
    rgba(255, 255, 255, 0.018);

  box-shadow:
    0 40px 110px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);

  overflow: visible;
}


/* GRID EFFECT INSIDE CARD */

.holli-profile-card::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px);

  background-size: 42px 42px;

  mask-image:
    linear-gradient(90deg,
      black,
      rgba(0, 0, 0, 0.5) 50%,
      transparent);
}


/* ============================================================
   LEFT IMAGE CARD
============================================================ */

.holli-profile-media {
  position: relative;

  z-index: 2;

  width: 100%;

  min-width: 0;
}


.holli-profile-image-wrap {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  border:
    1px solid rgba(255, 20, 147, 0.26);

  border-radius: 26px;

  background: #09080d;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.44),
    0 0 45px rgba(255, 20, 147, 0.08);
}


/* ACTUAL IMAGE */

.holli-profile-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center center;

  z-index: 1;
}


/* IMAGE COLOR OVERLAY */

.holli-profile-image-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(to bottom,
      transparent 55%,
      rgba(5, 5, 7, 0.10) 75%,
      rgba(5, 5, 7, 0.60)),
    linear-gradient(90deg,
      rgba(255, 20, 147, 0.05),
      transparent 30%,
      transparent 70%,
      rgba(0, 217, 255, 0.04));
}


/* SMALL HUD LABEL */

.holli-profile-image-meta {
  position: absolute;

  z-index: 4;

  top: 22px;
  left: 22px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.holli-profile-image-meta span,
.holli-profile-image-meta strong {
  display: block;
}

.holli-profile-image-meta span {
  color: rgba(255, 255, 255, 0.44);

  font-size: 0.58rem;

  letter-spacing: 0.12em;
}

.holli-profile-image-meta strong {
  margin-top: 4px;

  color: white;

  font-size: 0.78rem;

  letter-spacing: 0.08em;
}


/* CROSSHAIR */

.holli-profile-crosshair {
  position: absolute;

  z-index: 4;

  left: 50%;
  top: 50%;

  width: 70px;
  height: 70px;

  transform: translate(-50%, -50%);

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  opacity: 0.45;

  pointer-events: none;
}

.holli-profile-crosshair::before,
.holli-profile-crosshair::after {
  content: "";

  position: absolute;

  background:
    rgba(255, 255, 255, 0.18);
}

.holli-profile-crosshair::before {
  width: 1px;
  height: 110px;

  left: 50%;
  top: -20px;
}

.holli-profile-crosshair::after {
  width: 110px;
  height: 1px;

  left: -20px;
  top: 50%;
}


/* IMAGE FOOTER */

.holli-profile-image-footer {
  position: absolute;

  z-index: 5;

  left: 18px;
  right: 18px;
  bottom: 17px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding-top: 11px;

  border-top:
    1px solid rgba(255, 255, 255, 0.12);

  color:
    rgba(255, 255, 255, 0.68);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 0.67rem;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


/* FLOATING PROFILE STATUS */

.holli-profile-status {
  position: absolute;

  z-index: 10;

  right: -25px;
  bottom: 11%;

  min-width: 155px;

  padding: 13px 15px;

  border:
    1px solid rgba(255, 20, 147, 0.30);

  border-radius: 14px;

  background:
    rgba(7, 7, 10, 0.90);

  backdrop-filter: blur(16px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.38);
}

.holli-profile-status small,
.holli-profile-status strong {
  display: block;
}

.holli-profile-status small {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.55rem;

  letter-spacing: 0.10em;
}

.holli-profile-status strong {
  margin-top: 5px;

  color: var(--pink);

  font-size: 0.76rem;
}


/* ============================================================
   RIGHT CONTENT
============================================================ */

.holli-profile-content {
  position: relative;

  z-index: 2;

  min-width: 0;

  width: 100%;
}


/* BIG HEADLINE */

.holli-profile-title {
  margin: 12px 0 24px;

  font-size:
    clamp(4.5rem, 7vw, 8rem);

  line-height: 0.80;

  letter-spacing: -0.075em;

  text-transform: uppercase;
}

.holli-profile-title span {
  display: block;

  color: transparent;

  -webkit-text-stroke:
    1px var(--pink);

  text-shadow:
    0 0 28px rgba(255, 20, 147, 0.13);
}


/* DESCRIPTION */

.holli-profile-description {
  max-width: 670px;

  margin: 0;

  color: #aaa3b1;

  font-size: 1.05rem;

  line-height: 1.75;
}


/* STATS */

.holli-profile-stats {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 9px;

  margin: 28px 0;
}


.holli-profile-stat {
  min-width: 0;

  padding: 13px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  background:
    rgba(5, 5, 7, 0.28);
}


.holli-profile-stat span,
.holli-profile-stat strong {
  display: block;
}


.holli-profile-stat span {
  color:
    rgba(255, 255, 255, 0.38);

  font-size: 0.53rem;

  letter-spacing: 0.09em;
}


.holli-profile-stat strong {
  margin-top: 5px;

  color: #fff;

  font-size: 0.75rem;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 950px) {

  .holli-profile-card {
    grid-template-columns:
      minmax(280px, 380px) minmax(0, 1fr) !important;

    gap: 35px;

    padding: 28px;
  }

  .holli-profile-title {
    font-size:
      clamp(3.8rem, 7vw, 5.4rem);
  }

  .holli-profile-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ============================================================
   MOBILE ONLY
============================================================ */

@media (max-width: 720px) {

  .holli-profile-card {
    grid-template-columns:
      1fr !important;

    gap: 32px;

    padding: 18px;

    border-radius: 24px;
  }

  .holli-profile-media {
    width:
      min(100%, 440px);

    margin:
      0 auto;
  }

  .holli-profile-status {
    right: 10px;
  }

  .holli-profile-title {
    font-size:
      clamp(3.6rem, 17vw, 5.8rem);
  }

}

/* ============================================================================
   LEGAL PAGES — privacy-policy.html, terms-of-service.html, cookie-policy.html.
   Same shell (nav/footer/background) as every other page, but body copy is
   deliberately calm and readable: no neon glow/animation on paragraph text,
   comfortable line length, clear hierarchy. Linked only from the footer.
   ============================================================================ */

.legal-hero {
  padding: 150px 0 20px;
}

.legal-updated {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  margin: 10px 0 0;
}

.legal-body {
  max-width: 760px;
  margin: 40px 0 0;
  color: var(--text);
  line-height: 1.75;
}

.legal-body h2 {
  margin: 46px 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -.01em;
  color: #fff;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  margin: 26px 0 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pink);
}

.legal-body p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--muted);
}

.legal-body li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.legal-body a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: rgba(0,217,255,.4);
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.legal-body a:hover {
  color: #fff;
}

.legal-body strong {
  color: #fff;
}

.legal-placeholder {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255,20,147,.14);
  border: 1px solid rgba(255,20,147,.35);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}

.legal-toc {
  margin: 34px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.legal-toc p {
  margin: 0 0 10px;
  color: rgba(255,255,255,.4);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legal-toc ol {
  columns: 2;
  margin: 0;
  padding-left: 18px;
}

.legal-toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}

.legal-toc a {
  color: var(--muted);
  font-size: .92rem;
}

.legal-toc a:hover {
  color: var(--pink);
}

@media (max-width: 680px) {
  .legal-hero { padding-top: 120px; }
  .legal-toc ol { columns: 1; }
}


/* =============================================================================
   SECTION: HOME — index.html only (hero, ticker, holli-verse grid, profile
   teaser, signal preview, end CTA)
   ============================================================================= */
/* HOLLIBAE enhanced home page
   Loads after the existing styles.css
*/

.home-page {
  --hpink: #ff1493;
  --hblue: #00d9ff;
  --hpurple: #a020f0;
  --hgreen: #9dff00;
  --hblack: #050507;
  --hpanel: #0b0810;
  --hline: rgba(255, 255, 255, .10);
}

/* NAV */

.enhanced-nav {
  border-bottom-color: rgba(255, 255, 255, .075);
  background: rgba(5, 5, 7, .68);
}

/* HERO */

.home-hero {
  min-height: calc(100svh - 76px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 70px 0 90px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 20, 147, .12), transparent 25%),
    radial-gradient(circle at 84% 23%, rgba(0, 217, 255, .10), transparent 25%),
    radial-gradient(circle at 72% 79%, rgba(160, 32, 240, .10), transparent 30%);
}

.hero-grid-overlay,
.hero-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-grid-overlay {
  z-index: -2;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, .6) 62%, transparent);
}

.hero-scanlines {
  z-index: 4;
  opacity: .025;
  background: repeating-linear-gradient(to bottom,
      #fff 0,
      #fff 1px,
      transparent 1px,
      transparent 5px);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .24;
  pointer-events: none;
  z-index: -1;
}

.hero-blob-pink {
  width: 300px;
  height: 300px;
  background: var(--hpink);
  left: -80px;
  top: 10%;
}

.hero-blob-blue {
  width: 240px;
  height: 240px;
  background: var(--hblue);
  right: 2%;
  top: 8%;
}

.hero-blob-purple {
  width: 300px;
  height: 300px;
  background: var(--hpurple);
  right: 20%;
  bottom: -100px;
}

.home-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}

.hero-kicker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.connection-chip {
  border: 1px solid rgba(157, 255, 0, .34);
  color: var(--hgreen);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .12em;
  box-shadow: 0 0 18px rgba(157, 255, 0, .10);
}

.hero-micro {
  margin-top: 14px;
  color: rgba(255, 255, 255, .37);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .64rem;
  letter-spacing: .12em;
}

.mega-title {
  position: relative;
  margin: 24px 0 0;
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 1000;
  line-height: .78;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  isolation: isolate;
}

.mega-title .mega-bae {
  color: var(--hpink);
  text-shadow:
    0 0 24px rgba(255, 20, 147, .22),
    6px 0 0 rgba(160, 32, 240, .13);
}

.mega-title::before,
.mega-title::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .20;
}

.mega-title::before {
  color: var(--hblue);
  transform: translateX(5px);
  clip-path: inset(12% 0 64% 0);
}

.mega-title::after {
  color: var(--hpink);
  transform: translateX(-5px);
  clip-path: inset(65% 0 12% 0);
}

.hero-tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 30px;
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -.025em;
}

.hero-tagline span:nth-child(1) {
  color: var(--hpink);
}

.hero-tagline span:nth-child(2) {
  color: var(--hblue);
}

.hero-tagline span:nth-child(3) {
  color: var(--hgreen);
}

.hero-copy-text {
  max-width: 700px;
  margin: 17px 0 0;
  color: #b9b2c0;
  font-size: 1.05rem;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.primary-cta {
  min-width: 170px;
}

.hero-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 32px;
}

.hero-status-card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .023);
  padding: 12px;
  min-width: 0;
}

.hero-status-card span,
.hero-status-card b {
  display: block;
}

.hero-status-card span {
  color: rgba(255, 255, 255, .40);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-status-card b {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-size: .73rem;
  white-space: nowrap;
}

.green-text {
  color: var(--hgreen) !important;
}

.pink-text {
  color: var(--hpink) !important;
}

.blue-text {
  color: var(--hblue) !important;
}

.hero-media-zone {
  position: relative;
}

.hero-frame-wrap {
  position: relative;
  width: min(100%, 620px);
  margin-inline: auto;
}

.home-hero-photo {
  min-height: 0;
  aspect-ratio: 4/5;
  border-radius: 34px;
  border-color: rgba(255, 255, 255, .15);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .035),
    0 0 80px rgba(255, 20, 147, .10);
  transition: transform .18s ease;
}

.home-hero-photo::after {
  background:
    radial-gradient(circle at 25% 16%, rgba(255, 20, 147, .20), transparent 30%),
    radial-gradient(circle at 82% 75%, rgba(0, 217, 255, .15), transparent 32%),
    linear-gradient(140deg, rgba(160, 32, 240, .06), transparent 50%);
}

.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}

.ring-one {
  width: 520px;
  height: 520px;
  right: -120px;
  top: 8%;
  border-color: rgba(255, 20, 147, .15);
}

.ring-two {
  width: 380px;
  height: 380px;
  left: -110px;
  bottom: 3%;
  border-color: rgba(0, 217, 255, .12);
}

.hud-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  z-index: 4;
}

.hud-tl {
  top: 14px;
  left: 14px;
  border-top: 2px solid var(--hpink);
  border-left: 2px solid var(--hpink);
}

.hud-tr {
  top: 14px;
  right: 14px;
  border-top: 2px solid var(--hblue);
  border-right: 2px solid var(--hblue);
}

.hud-bl {
  left: 14px;
  bottom: 14px;
  border-bottom: 2px solid var(--hpurple);
  border-left: 2px solid var(--hpurple);
}

.hud-br {
  right: 14px;
  bottom: 14px;
  border-bottom: 2px solid var(--hgreen);
  border-right: 2px solid var(--hgreen);
}

.hero-photo-label {
  position: absolute;
  top: 30px;
  left: 34px;
  z-index: 5;
  font-family: ui-monospace, monospace;
}

.hero-photo-label span,
.hero-photo-label b {
  display: block;
}

.hero-photo-label span {
  color: rgba(255, 255, 255, .36);
  font-size: .57rem;
  letter-spacing: .1em;
}

.hero-photo-label b {
  margin-top: 3px;
  font-size: .74rem;
  letter-spacing: .08em;
}

.floating-status {
  position: absolute;
  z-index: 10;
  min-width: 105px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(6, 6, 9, .76);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
}

.floating-status small,
.floating-status b {
  display: block;
}

.floating-status small {
  color: rgba(255, 255, 255, .36);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.floating-status b {
  margin-top: 4px;
  font-size: .78rem;
}

.float-top {
  top: 12%;
  left: -34px;
  border-color: rgba(255, 20, 147, .25);
}

.float-top b {
  color: var(--hpink);
}

.float-right {
  right: -30px;
  top: 46%;
  border-color: rgba(0, 217, 255, .24);
}

.float-right b {
  color: var(--hblue);
}

.float-bottom {
  left: 10%;
  bottom: 3%;
  border-color: rgba(157, 255, 0, .22);
}

.float-bottom b {
  color: var(--hgreen);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .32);
  font-size: .56rem;
  letter-spacing: .14em;
  font-weight: 900;
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, var(--hpink), transparent);
  animation: scrollPulse 1.6s ease-in-out infinite;
}

@keyframes scrollPulse {
  50% {
    opacity: .25;
    transform: translateY(5px);
  }
}

/* TICKER */

.home-ticker {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
}

.home-ticker-track {
  display: flex;
  width: max-content;
  gap: 25px;
  padding: 14px 0;
  animation: homeTicker 25s linear infinite;
  font-size: .70rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home-ticker-track span:nth-of-type(4n+1) {
  color: var(--hpink);
}

.home-ticker-track span:nth-of-type(4n+2) {
  color: var(--hblue);
}

.home-ticker-track span:nth-of-type(4n+3) {
  color: var(--hpurple);
}

.home-ticker-track span:nth-of-type(4n+4) {
  color: var(--hgreen);
}

.home-ticker-track i {
  color: rgba(255, 255, 255, .22);
  font-style: normal;
}

@keyframes homeTicker {
  to {
    transform: translateX(-50%);
  }
}

/* SECTION HEADING */

.section-heading-row {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 440px);
  gap: 40px;
  align-items: end;
  margin-bottom: 38px;
}

.section-title {
  margin: 8px 0 0;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.section-description {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #aaa3b1;
  line-height: 1.7;
}

.section-description p {
  margin: 0;
}

.live-dot {
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--hpink);
  box-shadow: 0 0 14px rgba(255, 20, 147, .55);
}

.section-description-text {
  max-width: 440px;
  margin: 0;
  color: #aaa3b1;
  line-height: 1.75;
}

/* HOLLIVERSE */

.holliverse-section {
  position: relative;
}


.holli-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.holli-card {
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 23px;
  padding: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, .023);
  transition: transform .2s ease, border-color .2s ease;
}

.holli-card:nth-child(1),
.holli-card:nth-child(4) {
  grid-column: span 7;
}

.holli-card:nth-child(2),
.holli-card:nth-child(3) {
  grid-column: span 5;
}

.holli-card::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -100px;
  bottom: -110px;
  border-radius: 50%;
  opacity: .12;
  filter: blur(18px);
  background: var(--card-accent);
}

.pink-card {
  --card-accent: var(--hpink);
}

.blue-card {
  --card-accent: var(--hblue);
}

.purple-card {
  --card-accent: var(--hpurple);
}

.green-card {
  --card-accent: var(--hgreen);
}

.holli-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--card-accent) 46%, white 4%);
}

.holli-card-index {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: ui-monospace, monospace;
  font-size: .65rem;
  color: rgba(255, 255, 255, .32);
}

.holli-icon {
  color: var(--card-accent);
  font-size: 2rem;
  margin-bottom: auto;
}

.holli-label {
  color: rgba(255, 255, 255, .39);
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.holli-card h3 {
  margin: 7px 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.holli-card p {
  margin: 0;
  max-width: 540px;
  color: #aaa3b1;
  line-height: 1.65;
}

.holli-card-footer {
  margin-top: 26px;
  color: var(--card-accent);
  font-family: ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .09em;
}

/* SIGNAL PREVIEW */

.signal-preview {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 40px;
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(0, 217, 255, .16);
  border-radius: 28px;
  background:
    linear-gradient(110deg, rgba(0, 217, 255, .055), transparent 40%),
    linear-gradient(310deg, rgba(255, 20, 147, .055), transparent 40%),
    rgba(255, 255, 255, .02);
}

.signal-preview h2 {
  margin: 9px 0 13px;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  line-height: .94;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.signal-preview p {
  max-width: 620px;
  margin: 0;
  color: #aaa3b1;
  line-height: 1.7;
}

.signal-buttons {
  display: grid;
  gap: 10px;
}

.signal-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: transform .2s ease, border-color .2s ease;
}

.signal-link span,
.signal-link b {
  display: block;
}

.signal-link span {
  color: rgba(255, 255, 255, .35);
  font-size: .55rem;
  letter-spacing: .1em;
}

.signal-link b {
  font-size: .85rem;
}

.signal-link i {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--signal-accent);
  font-style: normal;
  font-size: 1.2rem;
}

.signal-link[data-accent="pink"] {
  --signal-accent: var(--hpink);
}

.signal-link[data-accent="green"] {
  --signal-accent: var(--hgreen);
}

.signal-link:hover {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--signal-accent) 42%, white 4%);
}

/* END CTA */

.home-end-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0 130px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 60%, rgba(160, 32, 240, .13), transparent 30%),
    radial-gradient(circle at 31% 52%, rgba(255, 20, 147, .07), transparent 23%),
    radial-gradient(circle at 70% 45%, rgba(0, 217, 255, .06), transparent 22%);
}

.home-end-cta::before {
  content: "HBAE";
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .018);
  font-size: clamp(10rem, 30vw, 28rem);
  font-weight: 1000;
  letter-spacing: -.09em;
  pointer-events: none;
}

.home-end-cta h2 {
  position: relative;
  margin: 10px 0 18px;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.home-end-cta h2 span {
  color: var(--hpink);
  text-shadow: 0 0 30px rgba(255, 20, 147, .16);
}

.home-end-cta p {
  position: relative;
  max-width: 690px;
  margin: 0 auto;
  color: #aaa3b1;
  font-size: 1.05rem;
  line-height: 1.7;
}

.centered-actions {
  justify-content: center;
}

/* FOOTER */

.enhanced-footer {
  background: linear-gradient(180deg, transparent, rgba(255, 20, 147, .02));
}

/* RESPONSIVE */

@media (max-width: 1040px) {

  .home-hero-grid,
  .signal-preview {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding-top: 60px;
  }

  .hero-media-zone {
    width: min(760px, 100%);
    margin-inline: auto;
  }

  .section-heading-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .holli-card:nth-child(n) {
    grid-column: span 6;
  }

  .signal-preview {
    gap: 28px;
  }

  

  

  
}

@media (max-width: 740px) {
  .mega-title {
    font-size: clamp(5rem, 24vw, 7rem);
  }

  .hero-status-grid,
  .profile-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .floating-status,
  .hero-ring {
    display: none;
  }

  .holli-grid {
    grid-template-columns: 1fr;
  }

  .holli-card:nth-child(n) {
    grid-column: auto;
  }

  .holli-card {
    min-height: 300px;
  }

  .profile-mini-panel {
    right: 10px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .home-end-cta {
    padding: 90px 0 100px;
  }

  .scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .home-ticker-track,
  .scroll-cue i {
    animation: none !important;
  }
}
/* =============================================================================
   SECTION: ABOUT — about.html only (about hero, character sheet, editorial
   gallery, files grid, signal board, random facts, end CTA)
   ============================================================================= */

/* HOLLIBAE enhanced About page
   Designed to sit on top of the existing global styles.css
*/

.about-page {
  --about-pink: #ff1493;
  --about-blue: #00d9ff;
  --about-purple: #a020f0;
  --about-green: #9dff00;
  --about-black: #050507;
  --about-panel: #0d0a12;
  --about-line: rgba(255,255,255,.10);
}

/* HERO */

.about-hero {
  position: relative;
  min-height: calc(100svh - 76px);
  overflow: hidden;
  isolation: isolate;
  padding: 84px 0 0;
  background:
    radial-gradient(circle at 13% 16%, rgba(255,20,147,.16), transparent 28%),
    radial-gradient(circle at 83% 24%, rgba(0,217,255,.11), transparent 26%),
    radial-gradient(circle at 72% 83%, rgba(160,32,240,.14), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 60%);
}

.hero-noise,
.hero-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-noise {
  z-index: -1;
  opacity: .05;
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0, #fff 1px, transparent 2px, transparent 4px);
  background-size: 7px 7px;
  mix-blend-mode: soft-light;
}

.hero-grid-lines {
  z-index: -2;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}

.about-hero-grid {
  min-height: calc(100svh - 160px);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
  padding-bottom: 72px;
}

.eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.signal-chip {
  border: 1px solid rgba(157,255,0,.4);
  color: var(--about-green);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: 0 0 18px rgba(157,255,0,.12);
}

.micro-copy {
  color: rgba(255,255,255,.46);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  margin: 0 0 30px;
}

.about-display {
  max-width: 920px;
  margin: 0;
  font-size: clamp(4rem, 8.7vw, 9.2rem);
  font-weight: 1000;
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.about-intro {
  margin: 34px 0 10px;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 950;
}

.about-copy {
  max-width: 730px;
  color: #c5bfcb;
  font-size: 1.06rem;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.identity-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  color: rgba(255,255,255,.54);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.identity-strip i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--about-pink);
  box-shadow: 0 0 12px var(--about-pink);
}

.about-hero-media {
  position: relative;
}

.portrait-shell {
  position: relative;
  width: min(100%, 620px);
  margin-inline: auto;
}

.hero-portrait {
  aspect-ratio: 4 / 5;
  min-height: 0;
  border-radius: 34px;
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 80px rgba(160,32,240,.14);
}

.hero-portrait::after {
  background:
    radial-gradient(circle at 25% 18%, rgba(255,20,147,.20), transparent 26%),
    radial-gradient(circle at 78% 82%, rgba(0,217,255,.14), transparent 30%);
}

.portrait-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(62px);
  opacity: .44;
  pointer-events: none;
}

.portrait-glow.pink {
  width: 230px;
  height: 230px;
  background: var(--about-pink);
  right: -70px;
  top: 18%;
}

.portrait-glow.blue {
  width: 180px;
  height: 180px;
  background: var(--about-blue);
  left: -65px;
  bottom: 10%;
}

.frame-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  z-index: 4;
}

.frame-corner.tl {
  left: 15px;
  top: 15px;
  border-left: 2px solid var(--about-pink);
  border-top: 2px solid var(--about-pink);
}

.frame-corner.tr {
  right: 15px;
  top: 15px;
  border-right: 2px solid var(--about-blue);
  border-top: 2px solid var(--about-blue);
}

.frame-corner.bl {
  left: 15px;
  bottom: 15px;
  border-left: 2px solid var(--about-purple);
  border-bottom: 2px solid var(--about-purple);
}

.frame-corner.br {
  right: 15px;
  bottom: 15px;
  border-right: 2px solid var(--about-green);
  border-bottom: 2px solid var(--about-green);
}

.portrait-tag {
  position: absolute;
  z-index: 5;
  font-family: ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .13em;
  color: rgba(255,255,255,.66);
  text-transform: uppercase;
}

.portrait-tag-top {
  top: 30px;
  left: 32px;
}

.floating-ui {
  position: absolute;
  z-index: 10;
  min-width: 110px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(7,7,10,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
}

.floating-ui span,
.floating-ui b {
  display: block;
}

.floating-ui span {
  color: rgba(255,255,255,.48);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.floating-ui b {
  margin-top: 4px;
  font-size: .9rem;
}

.ui-one {
  left: -32px;
  top: 22%;
  border-color: rgba(255,20,147,.28);
}

.ui-one b {
  color: var(--about-pink);
}

.ui-two {
  right: -28px;
  top: 49%;
  border-color: rgba(0,217,255,.28);
}

.ui-two b {
  color: var(--about-blue);
}

.ui-three {
  left: 7%;
  bottom: 5%;
  border-color: rgba(157,255,0,.26);
}

.ui-three b {
  color: var(--about-green);
}

.about-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.about-marquee-track {
  display: flex;
  width: max-content;
  gap: 25px;
  padding: 13px 0;
  animation: aboutMarquee 28s linear infinite;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .15em;
  color: rgba(255,255,255,.56);
  text-transform: uppercase;
}

.about-marquee-track span:nth-child(4n+1) {
  color: var(--about-pink);
}

.about-marquee-track span:nth-child(4n+3) {
  color: var(--about-blue);
}

@keyframes aboutMarquee {
  to { transform: translateX(-50%); }
}

/* SHARED SECTION */

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 430px);
  gap: 40px;
  align-items: end;
  margin-bottom: 42px;
}

.compact-title {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: clamp(3rem, 7vw, 6.2rem);
}

.section-note {
  max-width: 440px;
  margin: 0;
  color: #aaa3b1;
  line-height: 1.75;
}

/* PROFILE / CHARACTER SHEET */

.profile-section {
  background:
    radial-gradient(circle at 12% 65%, rgba(0,217,255,.07), transparent 25%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.01));
}

.profile-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
}

.stats-console {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.015)),
    #09070d;
  box-shadow: 0 35px 80px rgba(0,0,0,.28);
}

.console-head,
.console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  font-family: ui-monospace, monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.48);
}

.console-head {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.console-foot {
  border-top: 1px solid rgba(255,255,255,.08);
}

.console-status {
  color: var(--about-green);
}

.stat-row {
  padding: 19px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.stat-label {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
  font-family: ui-monospace, monospace;
}

.stat-label span {
  color: rgba(255,255,255,.48);
  font-size: .66rem;
  letter-spacing: .1em;
}

.stat-label b {
  font-size: .72rem;
}

.meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.meter span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--about-blue), #55f8ff);
  box-shadow: 0 0 18px rgba(0,217,255,.4);
  transform-origin: left;
  animation: meterLoad 1.2s ease both;
}

.pink-meter span {
  background: linear-gradient(90deg, #9f0067, var(--about-pink));
  box-shadow: 0 0 18px rgba(255,20,147,.40);
}

.purple-meter span {
  background: linear-gradient(90deg, #6220b8, var(--about-purple));
  box-shadow: 0 0 18px rgba(160,32,240,.40);
}

.green-meter span {
  background: linear-gradient(90deg, #4d9200, var(--about-green));
  box-shadow: 0 0 18px rgba(157,255,0,.35);
}

.danger-meter span {
  background: linear-gradient(90deg, #79113f, var(--about-pink));
}

.rainbow-meter span {
  background: linear-gradient(90deg, var(--about-pink), var(--about-purple), var(--about-blue), var(--about-green));
}

@keyframes meterLoad {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.quick-facts {
  display: grid;
  gap: 12px;
}

.fact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255,255,255,.025);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.fact-card:hover {
  transform: translateX(5px);
  background: rgba(255,255,255,.04);
}

.fact-card small {
  color: rgba(255,255,255,.42);
  font-size: .62rem;
  letter-spacing: .12em;
  font-weight: 900;
}

.fact-card h3 {
  margin: 5px 0 7px;
  font-size: 1.25rem;
}

.fact-card p {
  margin: 0;
  color: #aaa3b1;
  line-height: 1.6;
}

.fact-index {
  font-size: 1.7rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -.04em;
}

.accent-pink .fact-index { color: var(--about-pink); }
.accent-blue .fact-index { color: var(--about-blue); }
.accent-purple .fact-index { color: var(--about-purple); }
.accent-green .fact-index { color: var(--about-green); }

.accent-pink:hover { border-color: rgba(255,20,147,.3); }
.accent-blue:hover { border-color: rgba(0,217,255,.3); }
.accent-purple:hover { border-color: rgba(160,32,240,.3); }
.accent-green:hover { border-color: rgba(157,255,0,.3); }

/* EDITORIAL GALLERY */

.visual-story-section {
  position: relative;
}

.editorial-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}

.shot {
  position: relative;
  min-height: 0;
}

.shot-number {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 4;
  color: rgba(255,255,255,.42);
  font-family: ui-monospace, monospace;
  font-size: .67rem;
}

.shot-a {
  grid-column: span 5;
  grid-row: span 2;
  aspect-ratio: 4/5;
}

.shot-b {
  grid-column: span 4;
  aspect-ratio: 3/4;
  margin-top: 56px;
}

.gallery-quote {
  grid-column: span 3;
  align-self: end;
  min-height: 260px;
  padding: 24px;
  border: 1px solid rgba(255,20,147,.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,20,147,.12), transparent 42%),
    rgba(255,255,255,.024);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote-mark {
  color: var(--about-pink);
  font-size: 5rem;
  line-height: .5;
}

.gallery-quote p {
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  line-height: 1.03;
  font-weight: 900;
}

.gallery-quote strong {
  color: var(--about-pink);
}

.quote-code {
  color: rgba(255,255,255,.40);
  font-family: ui-monospace, monospace;
  font-size: .62rem;
}

.shot-c {
  grid-column: span 3;
  aspect-ratio: 1/1;
}

.shot-d {
  grid-column: span 7;
  aspect-ratio: 16/9;
}

.shot-e {
  grid-column: span 5;
  aspect-ratio: 3/4;
  margin-top: -48px;
}

.shot-f {
  grid-column: span 7;
  aspect-ratio: 4/5;
}

/* PERSONAL FILES */

.files-section {
  background:
    radial-gradient(circle at 88% 20%, rgba(160,32,240,.08), transparent 26%);
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.profile-file {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.033), rgba(255,255,255,.015));
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}

.profile-file::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  bottom: -90px;
  border-radius: 50%;
  opacity: .10;
  filter: blur(12px);
  background: var(--file-accent, var(--about-purple));
}

.profile-file[data-accent="pink"] { --file-accent: var(--about-pink); }
.profile-file[data-accent="blue"] { --file-accent: var(--about-blue); }
.profile-file[data-accent="purple"] { --file-accent: var(--about-purple); }
.profile-file[data-accent="green"] { --file-accent: var(--about-green); }

.profile-file:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--file-accent) 44%, white 6%);
}

.file-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.38);
  font-family: ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .09em;
}

.file-icon {
  margin-top: 34px;
  color: var(--file-accent);
  font-size: 2rem;
}

.profile-file h3 {
  margin: 13px 0 8px;
  font-size: 1.45rem;
}

.profile-file p {
  margin: 0;
  color: #aaa3b1;
  line-height: 1.68;
}

.file-command {
  margin-top: auto;
  padding-top: 25px;
  color: var(--file-accent);
  font-family: ui-monospace, monospace;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
}

/* CURRENT SIGNAL */

.signal-card {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 42px;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(0,217,255,.20);
  border-radius: 30px;
  background:
    linear-gradient(115deg, rgba(0,217,255,.06), transparent 44%),
    linear-gradient(300deg, rgba(255,20,147,.06), transparent 45%),
    rgba(255,255,255,.022);
  box-shadow: 0 35px 90px rgba(0,0,0,.22);
}

.signal-left h2 {
  margin: 8px 0 14px;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: .95;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.signal-left p {
  max-width: 520px;
  color: #aaa3b1;
  line-height: 1.75;
}

.signal-board {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
}

.signal-line {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: ui-monospace, monospace;
}

.signal-line:last-child {
  border-bottom: 0;
}

.signal-line span {
  color: rgba(255,255,255,.40);
  font-size: .66rem;
  letter-spacing: .09em;
}

.signal-line b {
  font-size: .76rem;
  color: #fff;
}

/* RANDOM FACTS */

.random-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(34px, 6vw, 82px);
  align-items: start;
}

.random-heading {
  position: sticky;
  top: 110px;
}

.random-stack {
  display: grid;
  gap: 12px;
}

.random-card {
  width: 100%;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255,255,255,.022);
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.random-card:hover,
.random-card.active {
  transform: translateX(7px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,20,147,.28);
}

.random-card span {
  color: var(--about-pink);
  font-size: 1.55rem;
  font-weight: 1000;
  letter-spacing: -.03em;
}

.random-card p {
  margin: 0;
  color: #c3bdc9;
  font-size: 1rem;
  line-height: 1.65;
}

/* END CTA */

.about-cta {
  position: relative;
  padding: 120px 0 130px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 65%, rgba(160,32,240,.14), transparent 30%),
    radial-gradient(circle at 30% 50%, rgba(255,20,147,.08), transparent 26%),
    radial-gradient(circle at 70% 48%, rgba(0,217,255,.07), transparent 26%);
}

.about-cta::before {
  content: "HOLLIBAE";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-48%);
  font-size: clamp(8rem, 24vw, 23rem);
  font-weight: 1000;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.018);
  pointer-events: none;
  white-space: nowrap;
}

.about-cta h2 {
  position: relative;
  margin: 12px 0 20px;
  font-size: clamp(3.2rem, 8.5vw, 8rem);
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.about-cta h2 .cta-line-one {
  display: inline-block;
  animation: megaWhiteShimmer 3.4s ease-in-out infinite;
}

.about-cta h2 .cta-line-two {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px var(--about-pink);
  --neon-glow: var(--about-pink);
  animation:
    neonCycle 4s ease-in-out infinite,
    neonSignBreathe 3.8s ease-in-out infinite;
}

.about-cta p {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  color: #aaa3b1;
  line-height: 1.7;
  font-size: 1.05rem;
}

.centered-actions {
  justify-content: center;
}

/* RESPONSIVE */

@media (max-width: 1040px) {
  .about-hero-grid,
  .profile-layout,
  .signal-card,
  .random-layout {
    grid-template-columns: 1fr;
  }

  .about-hero-grid {
    min-height: auto;
  }

  .about-hero-media {
    width: min(760px, 100%);
    margin-inline: auto;
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .file-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .random-heading {
    position: static;
  }

  .shot-a { grid-column: span 7; }
  .shot-b { grid-column: span 5; }
  .gallery-quote { grid-column: span 5; }
  .shot-c { grid-column: span 7; }
  .shot-d { grid-column: span 12; }
  .shot-e { grid-column: span 5; margin-top: 0; }
  .shot-f { grid-column: span 7; }
}

@media (max-width: 720px) {
  .about-hero {
    padding-top: 56px;
  }

  .about-display {
    font-size: clamp(3.8rem, 19vw, 6.2rem);
  }

  .floating-ui {
    display: none;
  }

  .identity-strip {
    gap: 8px;
  }

  .file-grid,
  .editorial-gallery {
    grid-template-columns: 1fr;
  }

  .shot-a,
  .shot-b,
  .shot-c,
  .shot-d,
  .shot-e,
  .shot-f,
  .gallery-quote {
    grid-column: auto;
    margin-top: 0;
  }

  .gallery-quote {
    min-height: 220px;
  }

  .signal-line {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .random-card {
    grid-template-columns: 48px 1fr;
  }

  .about-cta {
    padding: 90px 0 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-marquee-track,
  .meter span {
    animation: none !important;
  }
}

/* =============================================================================
   SECTION: TWITCH — index.html live section only (console, player, chat)
   ============================================================================= */
/* ============================================================
   HOLLIBAE TWITCH EXPERIENCE
   Dedicated stylesheet for the Twitch section only.
   Load after styles.css and home-enhanced.css.
============================================================ */

.twitch-live-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(circle at 10% 14%, rgba(255,20,147,.12), transparent 30%),
    radial-gradient(circle at 90% 22%, rgba(0,217,255,.08), transparent 31%),
    radial-gradient(circle at 55% 92%, rgba(160,32,240,.10), transparent 34%),
    #050507;
}

.twitch-live-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 86%, transparent);
}

.twitch-live-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  right: -210px;
  top: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,32,240,.17), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.twitch-live-section .section-heading-row {
  margin-bottom: 44px;
}

.twitch-live-section .live-dot {
  animation: twitchLivePulse 1.7s ease-in-out infinite;
}

@keyframes twitchLivePulse {
  50% { opacity: .35; transform: scale(.72); }
}

/* MAIN CONSOLE */

.twitch-console {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    #09070d;
  box-shadow:
    0 50px 120px rgba(0,0,0,.50),
    0 0 65px rgba(160,32,240,.055),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.twitch-console::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px rgba(255,20,147,.024),
    inset 0 0 120px rgba(0,217,255,.016);
}

/* TOP BAR */

.twitch-console-header {
  position: relative;
  z-index: 5;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(
      90deg,
      rgba(255,20,147,.06),
      rgba(160,32,240,.025) 35%,
      rgba(255,255,255,.008) 60%,
      rgba(0,217,255,.045)
    );
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.console-left,
.console-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.console-title {
  overflow: hidden;
  color: rgba(255,255,255,.62);
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-channel {
  color: rgba(255,255,255,.35);
  font-size: .58rem;
  letter-spacing: .10em;
  white-space: nowrap;
}

.console-signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--hgreen);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .09em;
  white-space: nowrap;
}

.console-signal i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hgreen);
  box-shadow: 0 0 14px rgba(157,255,0,.90);
  animation: twitchSignalPulse 1.5s ease-in-out infinite;
}

@keyframes twitchSignalPulse {
  50% { opacity: .35; transform: scale(.75); }
}

.stream-dots {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.stream-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stream-dots span:nth-child(1) {
  background: var(--hpink);
  box-shadow: 0 0 12px rgba(255,20,147,.8);
}

.stream-dots span:nth-child(2) {
  background: var(--hpurple);
  box-shadow: 0 0 12px rgba(160,32,240,.8);
}

.stream-dots span:nth-child(3) {
  background: var(--hgreen);
  box-shadow: 0 0 12px rgba(157,255,0,.8);
}

/* MAIN GRID */

.twitch-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .55fr);
  align-items: stretch;
}

.twitch-video-column {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid rgba(255,255,255,.075);
  background: radial-gradient(circle at 10% 10%, rgba(255,20,147,.035), transparent 32%);
}

/* PLAYER */

.twitch-video-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  border: 1px solid rgba(160,32,240,.25);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(160,32,240,.08), transparent 45%),
    #000;
  box-shadow:
    0 34px 90px rgba(0,0,0,.56),
    0 0 50px rgba(160,32,240,.075),
    0 0 28px rgba(255,20,147,.04);
}

.twitch-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,20,147,.025), transparent 14%, transparent 86%, rgba(0,217,255,.022));
}

.twitch-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: #000;
}

.twitch-corner {
  position: absolute;
  z-index: 8;
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.corner-tl {
  left: 12px; top: 12px;
  border-left: 2px solid var(--hpink);
  border-top: 2px solid var(--hpink);
}

.corner-tr {
  right: 12px; top: 12px;
  border-right: 2px solid var(--hblue);
  border-top: 2px solid var(--hblue);
}

.corner-bl {
  left: 12px; bottom: 12px;
  border-left: 2px solid var(--hpurple);
  border-bottom: 2px solid var(--hpurple);
}

.corner-br {
  right: 12px; bottom: 12px;
  border-right: 2px solid var(--hgreen);
  border-bottom: 2px solid var(--hgreen);
}

.twitch-player-hud {
  position: absolute;
  z-index: 7;
  left: 18px;
  right: 18px;
  bottom: 17px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.twitch-player-hud > div {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(5,5,8,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
}

.twitch-player-hud span,
.twitch-player-hud b {
  display: block;
}

.twitch-player-hud span {
  color: rgba(255,255,255,.38);
  font-size: .47rem;
  letter-spacing: .11em;
}

.twitch-player-hud b {
  margin-top: 3px;
  color: #fff;
  font-size: .61rem;
  letter-spacing: .04em;
}

.twitch-player-hud .hud-right {
  margin-left: auto;
}

/* LOCAL DEVELOPMENT PREVIEW */

.twitch-dev-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(160,32,240,.15), transparent 38%),
    linear-gradient(145deg, rgba(255,20,147,.05), rgba(0,217,255,.035)),
    #07070a;
}

.twitch-dev-preview-inner {
  max-width: 560px;
}

.twitch-dev-preview .dev-kicker {
  color: var(--hgreen);
  font-family: ui-monospace, monospace;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.twitch-dev-preview h4 {
  margin: 12px 0 8px;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  letter-spacing: -.045em;
}

.twitch-dev-preview p {
  margin: 0 auto 20px;
  color: #aaa3b1;
  line-height: 1.65;
}

/* PLAYER BUTTONS */

.twitch-player-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 11px;
  margin-top: 15px;
}

.twitch-player-actions .btn {
  width: 100%;
  min-height: 52px;
}

.btn.purple {
  border-color: rgba(160,32,240,.65);
  box-shadow: 0 0 20px rgba(160,32,240,.20);
}

.btn.purple:hover {
  background: rgba(160,32,240,.10);
}

/* INFO PANEL */

.twitch-info-panel {
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,20,147,.10), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(0,217,255,.035), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
}

.twitch-profile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.twitch-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(255,20,147,.38);
  border-radius: 999px;
  background: rgba(255,20,147,.08);
  box-shadow: 0 0 18px rgba(255,20,147,.08);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.twitch-live-badge .status-dot {
  background: var(--hpink);
  box-shadow: 0 0 14px var(--hpink);
}

.panel-code {
  color: rgba(255,255,255,.31);
  font-family: ui-monospace, monospace;
  font-size: .56rem;
  letter-spacing: .08em;
}

.twitch-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.twitch-avatar-placeholder {
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,20,147,.34);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,20,147,.24), rgba(160,32,240,.14));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 1000;
  box-shadow: 0 0 28px rgba(255,20,147,.10);
}

.profile-label {
  color: rgba(255,255,255,.37);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.twitch-profile h3 {
  margin: 4px 0 3px;
  color: #fff;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.twitch-handle {
  color: var(--hpurple);
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  transition: color .18s ease, text-shadow .18s ease;
}

.twitch-handle:hover {
  color: var(--hpink);
  text-shadow: 0 0 12px rgba(255,20,147,.28);
}

.twitch-description {
  margin: 24px 0 0;
  color: #aaa3b1;
  font-size: .94rem;
  line-height: 1.72;
}

.current-stream-card {
  margin-top: 23px;
  padding: 16px;
  border: 1px solid rgba(160,32,240,.20);
  border-radius: 15px;
  background:
    linear-gradient(110deg, rgba(160,32,240,.07), transparent 75%),
    rgba(255,255,255,.012);
}

.current-stream-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-stream-heading span {
  color: rgba(255,255,255,.39);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.current-stream-heading i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(160,32,240,.45), transparent);
}

.current-stream-card strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-size: .80rem;
  line-height: 1.45;
}

.current-stream-card small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.40);
  font-size: .70rem;
  line-height: 1.55;
}

.twitch-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
  margin-top: 15px;
}

.twitch-stat {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: rgba(255,255,255,.022);
}

.twitch-stat span,
.twitch-stat b {
  display: block;
}

.twitch-stat span {
  color: rgba(255,255,255,.34);
  font-size: .50rem;
  letter-spacing: .10em;
}

.twitch-stat b {
  margin-top: 5px;
  overflow: hidden;
  color: var(--hgreen);
  font-size: .71rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-system-readout {
  margin-top: 17px;
}

.stream-system-readout > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
  font-size: .57rem;
}

.stream-system-readout span {
  color: rgba(255,255,255,.38);
}

.stream-system-readout strong {
  color: var(--hpink);
}

.system-meter {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}

.system-meter span {
  display: block;
  width: 97%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #83104f, var(--hpink));
  box-shadow: 0 0 18px rgba(255,20,147,.30);
}

.blue-meter span {
  width: 86%;
  background: linear-gradient(90deg, #07718c, var(--hblue));
  box-shadow: 0 0 18px rgba(0,217,255,.28);
}

.twitch-big-button {
  width: 100%;
  min-height: 54px;
  margin-top: 27px;
}

/* CHAT */

.twitch-chat-section {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.004));
}

.twitch-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
}

.twitch-chat-header h3 {
  margin: 6px 0 0;
  font-size: 1.65rem;
  letter-spacing: -.035em;
}

.twitch-chat-toggle {
  min-width: 135px;
  min-height: 42px;
  border: 1px solid rgba(0,217,255,.36);
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(0,217,255,.065);
  color: #fff;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.twitch-chat-toggle:hover {
  border-color: var(--hblue);
  background: rgba(0,217,255,.10);
  box-shadow: 0 0 20px rgba(0,217,255,.14);
}

.twitch-chat-container {
  display: none;
  padding: 0 24px 24px;
}

.twitch-chat-container.open {
  display: block;
}

.twitch-chat {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #0e0e10;
  box-shadow: 0 25px 70px rgba(0,0,0,.32);
}

.twitch-chat-dev {
  padding: 28px;
  border: 1px solid rgba(0,217,255,.18);
  border-radius: 18px;
  background: rgba(0,217,255,.035);
  color: #aaa3b1;
  text-align: center;
}

/* SESSION FOOTER */

.twitch-bottom-message {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 19px;
  padding: 0 4px;
}

.twitch-bottom-message p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: .83rem;
  text-align: center;
}

.twitch-bottom-code {
  color: rgba(255,255,255,.25);
  font-family: ui-monospace, monospace;
  font-size: .55rem;
  letter-spacing: .11em;
}

.twitch-bottom-code:last-child {
  text-align: right;
}

/* TABLET */

@media (max-width: 1100px) {
  .twitch-layout {
    grid-template-columns: 1fr;
  }

  .twitch-video-column {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  .twitch-info-panel {
    padding: 28px;
  }
}

/* MOBILE */

@media (max-width: 740px) {
  .twitch-live-section {
    padding: 76px 0;
  }

  .twitch-console {
    border-radius: 21px;
  }

  .twitch-console-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
  }

  .console-left,
  .console-right {
    width: 100%;
  }

  .console-right {
    justify-content: space-between;
  }

  .console-title,
  .console-channel {
    white-space: normal;
    line-height: 1.45;
  }

  .twitch-video-column {
    padding: 9px;
  }

  .twitch-video-frame {
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: 15px;
  }

  .twitch-player-hud {
    display: none;
  }

  .twitch-player-actions {
    grid-template-columns: 1fr;
  }

  .twitch-info-panel {
    padding: 21px;
  }

  .twitch-profile-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .twitch-chat-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .twitch-chat-toggle {
    width: 100%;
  }

  .twitch-chat-container {
    padding: 0 10px 10px;
  }

  .twitch-chat {
    height: 460px;
    border-radius: 14px;
  }

  .twitch-bottom-message {
    grid-template-columns: 1fr;
  }

  .twitch-bottom-code,
  .twitch-bottom-code:last-child {
    text-align: center;
  }
}

@media (max-width: 520px) {
  .twitch-status-grid {
    grid-template-columns: 1fr;
  }

  .console-channel {
    display: none;
  }

  .twitch-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-signal i,
  .twitch-live-section .live-dot {
    animation: none;
  }
}

/* =============================================================================
   SECTION: NEON EFFECTS — shared multi-color flourishes used across pages.
   Pure CSS, additive only: nothing here changes layout, spacing, or grid
   structure, so every page keeps its existing shape.
   ============================================================================= */

@keyframes neonCycle {
  0%   { filter: hue-rotate(0deg) saturate(1.15); }
  50%  { filter: hue-rotate(28deg) saturate(1.35); }
  100% { filter: hue-rotate(0deg) saturate(1.15); }
}

/* Gentle "lit neon sign" breathing glow for any outline/transparent-fill
   text: a tight inner glow plus a soft diffuse outer glow, both pulsing
   slowly together. Set --neon-glow on the element to pick its color. */
@keyframes neonSignBreathe {
  0%, 100% {
    text-shadow:
      0 0 4px var(--neon-glow, var(--pink)),
      0 0 10px var(--neon-glow, var(--pink)),
      0 0 22px color-mix(in srgb, var(--neon-glow, var(--pink)) 55%, transparent),
      0 0 46px color-mix(in srgb, var(--neon-glow, var(--pink)) 28%, transparent);
  }
  50% {
    text-shadow:
      0 0 2px var(--neon-glow, var(--pink)),
      0 0 6px var(--neon-glow, var(--pink)),
      0 0 14px color-mix(in srgb, var(--neon-glow, var(--pink)) 40%, transparent),
      0 0 30px color-mix(in srgb, var(--neon-glow, var(--pink)) 18%, transparent);
  }
}

@keyframes neonBorderSpin {
  to { --neon-angle: 360deg; }
}

@property --neon-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Animated conic-gradient ring behind the hero / profile / portrait photo
   frames. Applied via .neon-frame on the existing wrapper elements, so the
   photo, HUD corners and labels stay exactly where they already are. */
.neon-frame {
  position: relative;
}

.neon-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: 34px;
  padding: 2px;
  background: conic-gradient(
    from var(--neon-angle, 0deg),
    var(--pink),
    var(--blue),
    var(--purple),
    var(--green),
    var(--pink)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  animation: neonBorderSpin 6s linear infinite;
  pointer-events: none;
}

/* Slow color-cycling glow on the big display headlines (mega-title,
   profile titles) so the neon text feels alive. about-display has its own
   dedicated club-lights treatment further down. */
.mega-title .mega-bae {
  animation: neonCycle 5s ease-in-out infinite;
}

.holli-profile-title span {
  --neon-glow: var(--pink);
  animation:
    neonCycle 5s ease-in-out infinite,
    neonSignBreathe 3.8s ease-in-out infinite;
}

/* ============================================================================
   ABOUT PAGE HEADLINE — "WHO THE HELL IS HOLLIBAE?" club-scene lights.
   Multi-color animated gradient text plus a couple of soft, drifting,
   color-shifting spotlight blobs behind it. Text stays exactly where it
   already sits — this only changes color and adds glow, never layout.
   ============================================================================ */

.about-display {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(100deg, var(--pink), var(--blue) 30%, var(--purple) 55%, var(--green) 78%, var(--pink));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: clubTextSweep 6s linear infinite;
}

@keyframes clubTextSweep {
  to { background-position: -300% center; }
}

.about-display::before,
.about-display::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}

.about-display::before {
  width: 320px;
  height: 320px;
  left: -70px;
  top: -50px;
  background: var(--pink);
  animation: clubLightDriftOne 7s ease-in-out infinite;
}

.about-display::after {
  width: 300px;
  height: 300px;
  right: -50px;
  bottom: -70px;
  background: var(--blue);
  animation: clubLightDriftTwo 8s ease-in-out infinite;
}

@keyframes clubLightDriftOne {
  0%, 100% { transform: translate(0, 0);       opacity: .45; background: var(--pink); }
  33%      { transform: translate(30px, 20px);  opacity: .6;  background: var(--purple); }
  66%      { transform: translate(-15px, 25px); opacity: .4;  background: var(--blue); }
}

@keyframes clubLightDriftTwo {
  0%, 100% { transform: translate(0, 0);        opacity: .4;  background: var(--blue); }
  33%      { transform: translate(-25px, -20px); opacity: .55; background: var(--green); }
  66%      { transform: translate(20px, -10px);  opacity: .35; background: var(--purple); }
}

/* "HOLLIBAE?" gets its own reverse-direction gradient sweep plus a chrome
   outline, so it still reads as the focal word against the club lights. */
.about-display span {
  display: inline-block;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(120deg, var(--purple), var(--pink) 35%, var(--blue) 65%, var(--green));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255,255,255,.55);
  --neon-glow: var(--pink);
  animation:
    clubTextSweepReverse 5s linear infinite,
    strokeContrastCycle 4.5s ease-in-out infinite,
    neonSignBreathe 3.8s ease-in-out infinite;
}

@keyframes clubTextSweepReverse {
  to { background-position: 300% center; }
}

/* Outline cycles through colors that contrast with whatever the fill
   gradient is doing at that moment, instead of sitting static. */
@keyframes strokeContrastCycle {
  0%   { -webkit-text-stroke-color: var(--blue); }
  25%  { -webkit-text-stroke-color: var(--green); }
  50%  { -webkit-text-stroke-color: var(--pink); }
  75%  { -webkit-text-stroke-color: var(--purple); }
  100% { -webkit-text-stroke-color: var(--blue); }
}

/* The white "HOLLI" half of the home hero title gets its own pulsing glow,
   distinct from the pink "BAE" half's hue-cycling neon above. */
@keyframes megaWhiteShimmer {
  0%, 100% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    text-shadow:
      0 0 22px rgba(255, 255, 255, .55),
      0 0 46px rgba(0, 217, 255, .25);
  }
}

.mega-title .mega-holli {
  display: inline-block;
  animation: megaWhiteShimmer 3.4s ease-in-out infinite;
}

/* Gentle floating drift + breathing glow on the HOLLIBAE logo artwork in the
   home hero capture-card frame, to the right of her name. */
@keyframes heroLogoFloat {
  0%, 100% { transform: translateZ(0) translateY(0); }
  50%      { transform: translateZ(0) translateY(-10px); }
}

.hero-photo {
  animation: heroLogoFloat 5s ease-in-out infinite;
}

@keyframes heroLogoBloomPulse {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

.home-hero-photo::after {
  animation: heroLogoBloomPulse 4s ease-in-out infinite;
}

/* Rainbow-sweep glow on primary CTA buttons on hover, layered on top of the
   existing box-shadow so idle/hover states are unchanged. */
.btn.pink:hover,
.btn.blue:hover,
.btn.green:hover,
.btn.purple:hover {
  animation: neonCycle 2.4s ease-in-out infinite;
}

/* Animated gradient sweep on the "HOLLI" half of the logo. The "BAE" span
   keeps its existing solid pink treatment untouched. */
.logo {
  background-image: linear-gradient(90deg, var(--pink), var(--blue), var(--purple), var(--green), var(--pink));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logoSheen 7s linear infinite;
}

@keyframes logoSheen {
  to { background-position: -300% center; }
}

.logo span {
  color: var(--pink);
}

/* Footer logo stays plain/static — new neon treatments are intentionally
   excluded from the footer sitewide. */
.footer .logo,
.enhanced-footer .logo {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
  animation: none;
}

/* ============================================================================
   SOLID WHITE HEADLINE GLOW — gentle, slow-breathing neon edge on every
   major solid-white title sitewide. Footer is intentionally excluded.
   ============================================================================ */
.section-title,
.title,
.holli-profile-title,
.home-end-cta h2,
.signal-left h2,
.signal-preview h2,
.holli-card h3,
.profile-file h3,
.fact-card h3,
.twitch-profile h3,
.product-name,
.social-name {
  animation: whiteNeonEdge 4.2s ease-in-out infinite;
}

@keyframes whiteNeonEdge {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(255,255,255,.35),
      0 0 12px rgba(255,255,255,.16),
      0 0 26px rgba(255,20,147,.14);
  }
  50% {
    text-shadow:
      0 0 8px rgba(255,255,255,.55),
      0 0 20px rgba(255,255,255,.28),
      0 0 40px rgba(255,20,147,.22);
  }
}

/* ============================================================================
   NAV BUTTONS — animated rainbow underline sweep on hover/active, plus a
   gentle breathing glow marking whichever page is current.
   ============================================================================ */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pink), var(--blue), var(--purple), var(--green), var(--pink));
  background-size: 300% auto;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  opacity: 1;
  animation: navUnderlineSweep 3s linear infinite;
}

@keyframes navUnderlineSweep {
  to { background-position: -300% center; }
}

.nav-links a.active {
  animation: navActiveGlow 2.6s ease-in-out infinite;
}

@keyframes navActiveGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 rgba(255,20,147,0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 16px rgba(255,20,147,.35); }
}

.menu-btn {
  transition: border-color .2s ease, box-shadow .2s ease;
}

.menu-btn:hover {
  border-color: rgba(255,20,147,.5);
  box-shadow: 0 0 14px rgba(255,20,147,.25);
}

@media (prefers-reduced-motion: reduce) {
  .neon-frame::before,
  .mega-title .mega-bae,
  .mega-title .mega-holli,
  .hero-photo,
  .home-hero-photo::after,
  .about-display,
  .about-display::before,
  .about-display::after,
  .about-display span,
  .holli-profile-title span,
  .about-cta h2 .cta-line-one,
  .about-cta h2 .cta-line-two,
  .social-card,
  .social-icon::before,
  .section-title,
  .title,
  .holli-profile-title,
  .home-end-cta h2,
  .signal-left h2,
  .signal-preview h2,
  .holli-card h3,
  .profile-file h3,
  .fact-card h3,
  .twitch-profile h3,
  .product-name,
  .social-name,
  .nav-links a:hover::after,
  .nav-links a.active::after,
  .nav-links a.active,
  .btn.pink:hover,
  .btn.blue:hover,
  .btn.green:hover,
  .btn.purple:hover,
  .logo {
    animation: none !important;
  }
}