/* =========================================================
   Underlisted X — Modern Dark UI (Black + Red accents)
   Header/Menu SAFE + Full-bleed Hero
   ========================================================= */

/* Theme tokens */
:root{
  --bg:#050505;
  --bg2:#0b0b0b;

  --text:#ffffff;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.08);

  --red:#e50914;
  --red2:#ff1a24;
  --glow:rgba(229,9,20,.22);

  --radius:18px;
  --shadow:0 14px 60px rgba(0,0,0,.55);
  --shadowRed:0 18px 70px rgba(229,9,20,.18);

  --max:1100px;
  --topbarH:72px;
}

/* Base reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;

  /* dark-first global background */
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(229,9,20,.06), transparent 62%),
    radial-gradient(700px 420px at 88% 12%, rgba(229,9,20,.04), transparent 65%),
    linear-gradient(180deg, #050505, #070707 55%, #030303);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =========================================================
   Top Bar (stable)
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:200; /* higher than hero overlays */
  backdrop-filter: blur(10px);
  background: rgba(5,5,5,.72);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}

.brandwrap{display:flex;flex-direction:column;line-height:1.1}
.brand{
  display:flex;align-items:baseline;gap:.35rem;
  font-weight:950;letter-spacing:.4px;
}
.brand .u{color:var(--text);font-size:1.25rem}
.brand .x{color:var(--red);font-size:1.25rem;text-shadow:0 0 18px var(--glow)}
.tagline{color:var(--muted);font-size:.82rem;margin-top:.15rem}

.actions{display:flex;align-items:center;gap:.6rem}

.iconbtn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  display:grid;place-items:center;
  cursor:pointer;
  transition:.22s ease;
}
.iconbtn:hover{
  transform: translateY(-2px);
  border-color: rgba(229,9,20,.35);
  box-shadow:0 0 0 4px rgba(229,9,20,.08);
}
.iconbtn svg{width:20px;height:20px;fill:#fff}

.follow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1rem;border-radius:999px;
  border:1px solid rgba(229,9,20,.45);
  background: rgba(255,255,255,.04);
  color:#fff;text-decoration:none;
  transition:.22s ease;
  white-space:nowrap;
}
.follow:hover{
  border-color: rgba(229,9,20,.62);
  background: rgba(229,9,20,.12);
  box-shadow:0 0 22px rgba(229,9,20,.12);
  transform: translateY(-2px);
}
.follow svg{width:18px;height:18px;fill:#fff}

/* =========================================================
   Drawer Menu (safe click layering)
   ========================================================= */
.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:220;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:.22s ease;
}
.drawer-backdrop.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;
  top:0;
  right:-360px;
  height:100vh;
  width:min(360px, 92vw);
  z-index:230;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  background: linear-gradient(180deg, rgba(12,12,12,.98), rgba(6,6,6,.98));
  border-left:1px solid var(--line);
  box-shadow: var(--shadow);
  transition:.26s ease;
}
.drawer.open{right:0}

.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.drawer-title{font-weight:850;letter-spacing:.35px}
.drawer-close{
  width:42px;height:42px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition:.2s ease;
}
.drawer-close:hover{
  border-color: rgba(229,9,20,.45);
  box-shadow:0 0 0 4px rgba(229,9,20,.08);
}
.drawer-close svg{width:18px;height:18px;fill:#fff}

.navlist{display:grid;gap:.7rem}
.navitem{
  text-decoration:none;color:#fff;
  padding:.9rem;border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  transition:.22s ease;
}
.navitem:hover{
  transform: translateY(-2px);
  border-color: rgba(229,9,20,.35);
  box-shadow:0 0 0 4px rgba(229,9,20,.08);
}
.navitem small{color:var(--muted)}

.pill{
  padding:.2rem .55rem;
  border-radius:999px;
  border:1px solid rgba(229,9,20,.30);
  background: rgba(229,9,20,.08);
  color: rgba(255,255,255,.92);
  font-size:.72rem;
}

/* =========================================================
   Page layout
   ========================================================= */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding: 1rem 1rem 5.5rem;
}

/* =========================================================
   ULX HERO — Full bleed, dark gradient, red accents only
   IMPORTANT: hero FX are NAMESPACED (ulx-) so they don’t break header/menu
   ========================================================= */
.ulx-hero{
  position:relative;
  min-height: calc(100vh - var(--topbarH));
  display:grid;
  place-items:center;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(229, 9, 20, .08), transparent 62%),
    radial-gradient(700px 460px at 88% 14%, rgba(229, 9, 20, .05), transparent 65%),
    radial-gradient(900px 540px at 50% 120%, rgba(255, 26, 36, .04), transparent 70%),
    linear-gradient(180deg, #040404, #070707 55%, #030303);
  isolation:isolate;
}

.ulx-hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.ulx-orb{
  position:absolute;
  width:680px;height:680px;
  border-radius:999px;
  filter: blur(70px);
  opacity:.22;
  transform: translate3d(0,0,0);
  animation: ulxOrbFloat 12s ease-in-out infinite;
  will-change: transform;
}
.ulx-orb.a{
  left:-360px;top:-380px;
  background: radial-gradient(circle, rgba(229, 9, 20, .22), transparent 58%);
}
.ulx-orb.b{
  right:-380px;top:-320px;
  background: radial-gradient(circle, rgba(255, 26, 36, .16), transparent 60%);
  animation-delay:-4s;
}
.ulx-orb.c{
  left:18%;bottom:-460px;
  background: radial-gradient(circle, rgba(229, 9, 20, .12), transparent 62%);
  animation-delay:-8s;
}
@keyframes ulxOrbFloat{
  0%,100%{transform: translateY(0) translateX(0) scale(1)}
  50%{transform: translateY(16px) translateX(12px) scale(1.03)}
}

.ulx-scan{
  position:absolute;
  inset:-55%;
  background: linear-gradient(120deg, transparent, rgba(229, 9, 20, .08), transparent);
  transform: rotate(10deg) translateX(-22%);
  animation: ulxScanMove 10s linear infinite;
  opacity:.35;
  mix-blend-mode:screen;
}
@keyframes ulxScanMove{
  0%{transform: rotate(10deg) translateX(-22%)}
  100%{transform: rotate(10deg) translateX(22%)}
}

.ulx-grain{
  position:absolute;
  inset:0;
  opacity:.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.ulx-hero::after{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(800px 520px at 50% 40%, transparent 35%, rgba(0,0,0,.55) 75%),
    radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  opacity:.55;
}

.ulx-hero-inner{
  position:relative;
  z-index:2;
  width:min(980px, 100%);
  padding: clamp(1.1rem, 4vw, 2.6rem);
  text-align:left;
}

.ulx-accentline{
  display:flex;align-items:center;gap:.7rem;
  color: rgba(255,255,255,.76);
  font-size:.92rem;
  letter-spacing:.2px;
}
.ulx-accentline::before{
  content:"";
  width:46px;height:2px;border-radius:999px;
  background: linear-gradient(90deg, var(--red), rgba(229, 9, 20, 0));
  box-shadow: 0 0 18px rgba(229, 9, 20, .18);
}

.ulx-title{
  margin-top:.9rem;
  font-size: clamp(0.55rem, 5.7vw, 2.35rem);
  font-weight: 950;
  letter-spacing: .6px;
  line-height: 1.05;
}
.t-underlisted{color:#fff}
.t-x{color: var(--red); margin-left:.32rem; text-shadow: 0 0 26px rgba(229, 9, 20, .28);}

.ulx-sub{
  margin-top:.5rem;
  max-width:60ch;
  color: rgba(255,255,255,.76);
  line-height: 1.6;
  font-size: 0.8rem;
}
.ulx-sub strong{color: rgba(255,255,255,.92); font-weight: 850;}

.ulx-keywords{
  margin-top: 1.05rem;
  display:flex;flex-wrap:wrap;gap:.55rem;
}
.ulx-keywords .k{
  padding:.44rem .72rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  font-size:.82rem;
}
.ulx-keywords .k.hot{
  border-color: rgba(229, 9, 20, .35);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .07);
}

.ulx-cta{
  margin-top: 1.25rem;
  display:flex;gap:.75rem;flex-wrap:wrap;
}
.cta-primary{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.92rem 1.08rem;border-radius:16px;
  border:1px solid rgba(229, 9, 20, .52);
  background: rgba(229, 9, 20, .12);
  color:#fff;font-weight: 900;letter-spacing:.2px;
  cursor:pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  box-shadow: 0 0 22px rgba(229, 9, 20, .10);
}
.cta-primary:hover{
  transform: translateY(-2px);
  background: rgba(229, 9, 20, .15);
  border-color: rgba(229, 9, 20, .62);
  box-shadow: 0 0 30px rgba(229, 9, 20, .16);
}
.cta-primary svg{width:18px;height:18px;fill:#fff}

.cta-ghost{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.92rem 1.08rem;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:#fff;text-decoration:none;font-weight: 850;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cta-ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(229, 9, 20, .35);
  box-shadow: 0 0 0 4px rgba(229, 9, 20, .07);
}
.cta-ghost svg{width:18px;height:18px;fill:#fff}

.ulx-note{margin-top:1rem;color: rgba(255,255,255,.56);font-size:.92rem}

@media (max-width: 420px){
  .cta-primary,.cta-ghost{width:100%;justify-content:center}
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  text-align:center;
  color: var(--muted);
  font-size:.86rem;
  padding: 1.6rem 0 .6rem;
}
.footer a{color:#fff}