/* ============ INDEC · ACT II — "The Archipelago Signal" ============ */
:root{
  --x2-ink:#110d1c; --x2-ink2:#181231; --x2-ink3:#221a3e;
  --x2-gold:#d9a441; --x2-gold-l:#f0c46a;
  --x2-vio:#a678e8; --x2-vio-d:#6b3fa0;
  --x2-fg:rgba(255,255,255,.92); --x2-fg2:rgba(255,255,255,.62); --x2-fg3:rgba(255,255,255,.38);
}

/* ---------- HERO ---------- */
.hero-x2{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:8.5rem 2rem 6.5rem;
  background:
    radial-gradient(1100px 640px at 82% 18%, rgba(107,63,160,.34), transparent 62%),
    radial-gradient(860px 560px at 12% 92%, rgba(217,164,65,.12), transparent 60%),
    linear-gradient(168deg,var(--x2-ink) 0%,var(--x2-ink2) 52%,var(--x2-ink) 100%);
  color:var(--x2-fg);
}
.hero-x2 #x2c{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.x2-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(17,13,28,.82) 0%, rgba(17,13,28,.42) 44%, rgba(17,13,28,0) 72%);
}
.x2-wrap{position:relative; z-index:2; max-width:1340px; margin:0 auto; width:100%}

.x2-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.6rem;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--x2-fg3); margin-bottom:2.6rem;
}
.x2-meta-i{display:inline-flex; align-items:center; gap:.5rem}
.x2-meta-r{margin-left:auto}
.x2-live{color:var(--x2-gold-l)}
.x2-dot{width:7px; height:7px; border-radius:50%; background:var(--x2-gold); box-shadow:0 0 0 0 rgba(217,164,65,.55); animation:x2pulse 2.2s infinite}
@keyframes x2pulse{0%{box-shadow:0 0 0 0 rgba(217,164,65,.55)} 70%{box-shadow:0 0 0 9px rgba(217,164,65,0)} 100%{box-shadow:0 0 0 0 rgba(217,164,65,0)}}

.x2-h1{
  font-family:'Fraunces',serif; font-weight:560; font-variation-settings:'SOFT' 40;
  font-size:clamp(2.7rem, 6.9vw, 5.9rem);
  line-height:1.03; letter-spacing:-.022em; margin:0 0 1.9rem; max-width:15ch;
}
.x2-h1 em{
  font-style:italic; font-weight:480; color:transparent;
  background:linear-gradient(96deg,var(--x2-gold-l),var(--x2-gold) 55%,#c08c2e);
  -webkit-background-clip:text; background-clip:text;
}
.x2-line{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.x2-line-in{display:inline-block; transform:translateY(112%); opacity:.001}
.x2-in .x2-line-in{transform:translateY(0); opacity:1; transition:transform 1.05s cubic-bezier(.19,1,.22,1), opacity .5s ease}
.x2-in .x2-line:nth-child(2) .x2-line-in{transition-delay:.12s}
.x2-in .x2-line:nth-child(3) .x2-line-in{transition-delay:.24s}

.x2-sub{
  max-width:52ch; font-size:clamp(1rem,1.35vw,1.13rem); line-height:1.75;
  color:var(--x2-fg2); margin-bottom:2.6rem;
  opacity:0; transform:translateY(16px); transition:opacity .8s ease .5s, transform .8s cubic-bezier(.19,1,.22,1) .5s;
}
.x2-in .x2-sub{opacity:1; transform:none}

.x2-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:3.6rem;
  opacity:0; transform:translateY(16px); transition:opacity .8s ease .65s, transform .8s cubic-bezier(.19,1,.22,1) .65s}
.x2-in .x2-cta{opacity:1; transform:none}
.x2-btn{
  display:inline-flex; align-items:center; gap:.65rem; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  transition:transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s, background .3s, border-color .3s, color .3s;
}
.x2-btn-gold{
  background:linear-gradient(120deg,var(--x2-gold-l),var(--x2-gold)); color:#1c1406;
  box-shadow:0 8px 30px -8px rgba(217,164,65,.55);
}
.x2-btn-gold:hover{box-shadow:0 14px 42px -8px rgba(217,164,65,.7)}
.x2-btn-gold svg{transition:transform .3s cubic-bezier(.19,1,.22,1)}
.x2-btn-gold:hover svg{transform:translateX(4px)}
.x2-btn-ghost{
  background:rgba(255,255,255,.04); color:var(--x2-fg); border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
}
.x2-btn-ghost:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.09)}

.x2-rail{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; width:min(100%,860px); border-top:1px solid rgba(255,255,255,.12);
  opacity:0; transform:translateY(16px); transition:opacity .8s ease .82s, transform .8s cubic-bezier(.19,1,.22,1) .82s;
}
.x2-in .x2-rail{opacity:1; transform:none}
.x2-cell{min-width:0; padding:1.35rem clamp(1rem,2.4vw,2.4rem) 0; position:relative}
.x2-cell:first-child{padding-left:0}
.x2-cell:last-child{padding-right:0}
.x2-cell:not(:last-child)::after{content:''; position:absolute; right:0; top:1.35rem; bottom:.2rem; width:1px; background:rgba(255,255,255,.12)}
.x2-num{
  display:block; font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.5rem,2.4vw,2.05rem);
  letter-spacing:-.01em; color:var(--x2-fg); font-variant-numeric:tabular-nums;
}
#x2days{color:var(--x2-gold-l)}
.x2-lab{display:block; margin-top:.3rem; font-family:'JetBrains Mono',monospace; font-size:clamp(6px,2vw,10.5px); letter-spacing:clamp(.06em,.4vw,.13em); white-space:nowrap; text-transform:uppercase; color:var(--x2-fg3)}

.x2-scroll{
  position:absolute; z-index:2; left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem; background:none; border:0; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; color:var(--x2-fg3);
  transition:color .3s;
}
.x2-scroll:hover{color:var(--x2-gold-l)}
.x2-scroll svg{animation:x2bounce 2.4s infinite}
@keyframes x2bounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}

/* ---------- HEADER over dark hero ---------- */
header.x2-dark:not(.scrolled) .h-link{color:rgba(255,255,255,.72)}
header.x2-dark:not(.scrolled) .h-link:hover,
header.x2-dark:not(.scrolled) .h-link.act{color:#fff}
header.x2-dark:not(.scrolled) .logo-a img{filter:brightness(0) invert(1)}
header.x2-dark:not(.scrolled) .h-cta{
  background:linear-gradient(120deg,var(--x2-gold-l),var(--x2-gold)); color:#1c1406; border-color:transparent;
}
header.x2-dark:not(.scrolled) .hbg span{background:#fff}

/* ---------- MARQUEE joins the dark act ---------- */
.marquee-s{
  background:var(--x2-ink) !important; border:0 !important;
  padding-top:1.4rem; padding-bottom:2.6rem; position:relative;
}
.marquee-s::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,164,65,.4), transparent);
}
.marquee-s .marq-l{color:rgba(255,255,255,.34) !important}
.marquee-s .marq-i{color:rgba(255,255,255,.55) !important; border-color:rgba(255,255,255,.12) !important; background:rgba(255,255,255,.03) !important}
.marquee-s .marq-i i{color:var(--x2-gold) !important}
.marquee-s .marq-i:hover{color:#fff !important; border-color:rgba(217,164,65,.45) !important}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .hero-x2{padding:7rem 1.3rem 5.5rem}
  .x2-meta{gap:.5rem 1rem; margin-bottom:2rem}
  .x2-meta-r{display:none}
  .x2-h1{max-width:100%}
  .x2-veil{background:linear-gradient(180deg, rgba(17,13,28,.55), rgba(17,13,28,.72))}
  .x2-scroll{display:none}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .x2-line-in,.x2-sub,.x2-cta,.x2-rail{transform:none !important; opacity:1 !important; transition:none !important}
  .x2-dot,.x2-scroll svg{animation:none}
}