/* =====================================================================
   SPONSORS page — lighthouse demo, partner list and the 15 slots.
   The lighthouse art comes from js/world-art.js (same as the city map),
   wrapped in .spx so it picks up the same animations.
   ===================================================================== */

.spx .en {
  stroke-dasharray: 7 11;
  animation: wn-dash 1.2s steps(14) infinite;
}
.spx .rd {
  animation: wn-rd 7s steps(70) infinite;
}
.spx .rd.rv {
  animation-direction: reverse;
}
.spx .pl {
  animation: wn-pl 2.4s steps(12) infinite;
}
.spx .bob {
  animation: wn-bob 4.2s steps(28) infinite;
}
.spx .cn {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-coin 3.4s steps(28) infinite;
}
.spx .sp {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-spin 9s steps(180) infinite;
}
.spx .bm {
  animation: wn-bm 5s steps(20) infinite;
}
.spx .cr {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-cr 3.2s steps(24) infinite;
}
.spx .ecg {
  stroke-dasharray: 0.2 1;
  animation: wn-ecg 3.2s steps(40) infinite;
}
.spx .sc {
  animation: wn-pl 1.8s steps(3) infinite;
}
.spx .rp {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-rp 5.5s steps(36) infinite;
}
.spx .in {
  animation: wn-in 2.4s steps(24) infinite;
  opacity: 0;
}
@keyframes wn-dash {
  to {
    stroke-dashoffset: -36;
  }
}
@keyframes wn-rd {
  to {
    stroke-dashoffset: -140;
  }
}
@keyframes wn-pl {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes wn-coin {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.18);
  }
}
@keyframes wn-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wn-sig {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes wn-bm {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-cr {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.08);
  }
}
@keyframes wn-ecg {
  to {
    stroke-dashoffset: -1.2;
  }
}
@keyframes wn-rp {
  0% {
    transform: scale(0.55);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes wn-in {
  0% {
    transform: translateY(34px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(-84px);
    opacity: 0;
  }
}
@keyframes wn-ne {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-launch {
  to {
    transform: translateY(-14px);
    filter: brightness(2) saturate(1.4);
    opacity: 0.9;
  }
}
@keyframes wn-dust {
  0% {
    transform: translate(0, 30px);
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(40px, -160px);
    opacity: 0;
  }
}

.spx .ne {
  animation: wn-ne 4s steps(16) infinite;
}
.spx .ne,
.spx .nx {
  vector-effect: non-scaling-stroke;
}
.spx .pstem {
  stroke: var(--bc);
  stroke-width: 1.4;
  stroke-dasharray: 2 3;
  fill: none;
}
.spx .pd .pdh {
  fill-opacity: 0.92;
}
.spx .isem .em-t {
  font: 700 9px var(--mo);
  fill: var(--bc);
  letter-spacing: 0.3em;
  text-anchor: middle;
}
.spx .isem .em-g {
  font:
    italic 400 34px Georgia,
    serif;
  fill: var(--bc);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 3px;
}
html[data-theme="light"] .spx .isem .em-g {
  stroke: rgba(255, 255, 255, 0.8);
}
.spx .i-halo {
  opacity: 0.35;
}
.spx .is:hover .lift,
.spx .is.on .lift {
  transform: translateY(-8px);
}

.spx .holo {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1),
    filter 0.3s;
}
.spx .os {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  mix-blend-mode: screen;
}
.spx svg.hot .os {
  opacity: 1;
}
.spx svg.hot .holo {
  transform: scale(1.45);
  filter: drop-shadow(0 0 14px #8be04a);
}
html[data-theme="light"] .spx .os {
  mix-blend-mode: normal;
}
.spx {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 60px;
}
.spx .hd h2 {
  margin-top: 8px;
}
.sp-how {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(20px, 4vw, 50px);
  align-items: center;
  margin: 34px 0 60px;
}
.sp-demo {
  position: relative;
  --bc: #8be04a;
  background:
    radial-gradient(80% 70% at 50% 60%, color-mix(in srgb, #8be04a 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--cy) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8be04a 45%, transparent);
  cursor: pointer;
  padding: 6px;
}
.sp-demo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.sp-hint {
  position: absolute;
  left: 14px;
  bottom: 10px;
  color: var(--mut);
  pointer-events: none;
  transition: opacity 0.3s;
}
.sp-demo.on .sp-hint {
  opacity: 0;
}
.sp-card {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(300px, 86%);
  padding: 14px 16px;
  transform: translate(-50%, -30%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
  background: linear-gradient(160deg, color-mix(in srgb, #8be04a 22%, #06120a), rgba(4, 12, 7, 0.96));
  box-shadow:
    inset 0 0 0 1px #8be04a,
    0 0 60px 8px rgba(139, 224, 74, 0.35);
  color: #e6f6f4;
}
.sp-demo.on .sp-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sp-card .mo {
  display: block;
  color: #8be04a;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  margin-top: 8px;
}
.sp-card strong {
  display: block;
  font: 900 24px/1 var(--hd);
  text-transform: uppercase;
  margin: 4px 0;
}
.sp-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: 0.9;
}
.sp-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  font: 700 13px var(--hd);
  letter-spacing: 0.16em;
  font-style: normal;
  color: #05060d;
  background: #8be04a;
}
.sp-cl {
  display: grid;
  place-items: center;
  height: 56px;
  border-radius: 8px;
  background: rgba(2, 12, 6, 0.75);
  box-shadow: inset 0 0 0 1px rgba(139, 224, 74, 0.5);
  font: 900 22px var(--hd);
  letter-spacing: 0.14em;
  color: #d6ff7a;
}
html[data-theme="light"] .sp-card {
  background: linear-gradient(160deg, #fff, #e6f9d6);
  color: #10253f;
  box-shadow:
    inset 0 0 0 1px #6dbb34,
    0 0 70px 10px rgba(255, 236, 120, 0.7);
}
html[data-theme="light"] .sp-cl {
  background: #f4ffe9;
  color: #2f8a12;
}
html[data-theme="light"] .sp-card .mo {
  color: #2f8a12;
}
html[data-theme="light"] .sp-cta {
  background: #3aa51a;
  color: #fff;
}
.sp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.sp-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(160deg, color-mix(in srgb, #8be04a 9%, transparent), transparent);
  box-shadow: inset 3px 0 0 #8be04a;
}
.sp-steps b {
  font: 900 34px/1 var(--hd);
  color: #8be04a;
  min-width: 44px;
}
.sp-steps h3 {
  font-size: 26px;
  margin: 0 0 4px;
}
.sp-steps p {
  margin: 0;
  color: var(--mut);
  line-height: 1.5;
}
.sp-sec {
  margin-top: 64px;
}
.sp-sec > .mo {
  color: var(--cy);
}
.sp-sec h3 {
  font-size: clamp(30px, 4vw, 48px);
  margin: 6px 0 10px;
}
.sp-sub {
  color: var(--mut);
  max-width: 680px;
  margin: 0 0 22px;
}
.sp-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.sp-pt {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px;
  scroll-margin-top: 110px;
  background: linear-gradient(160deg, color-mix(in srgb, #8be04a 10%, transparent), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8be04a 45%, transparent);
}
.sp-pt:target {
  box-shadow:
    inset 0 0 0 2px #8be04a,
    0 0 40px rgba(139, 224, 74, 0.4);
}
.sp-pt .lg {
  display: grid;
  place-items: center;
  min-height: 100px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(2, 12, 6, 0.78);
}
.sp-pt .lg img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}
html[data-theme="light"] .sp-pt .lg {
  background: #f4ffe9;
}
.sp-pt .mo {
  color: #8be04a;
}
.sp-pt h4 {
  font: 900 clamp(28px, 3.4vw, 40px)/1 var(--hd);
  text-transform: uppercase;
  margin: 4px 0 6px;
}
.sp-pt p {
  margin: 0;
  color: var(--mut);
  line-height: 1.55;
}
.sp-pt .row {
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sp-pt a {
  font: 700 12px var(--mo);
  letter-spacing: 0.14em;
  color: var(--cy);
  border-bottom: 1px solid currentColor;
}
.sp-none {
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--cy) 50%, transparent);
  color: var(--mut);
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sp-sl {
  position: relative;
  scroll-margin-top: 110px;
  padding: 10px 12px 14px;
  text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, #8be04a 8%, transparent), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8be04a 35%, transparent);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.sp-sl:hover,
.sp-sl:target {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 2px #8be04a,
    0 0 28px rgba(139, 224, 74, 0.4);
}
.sp-sl svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
}
.sp-sl .mo {
  color: #8be04a;
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.sp-sl b {
  display: block;
  font: 900 22px/1.1 var(--hd);
  text-transform: uppercase;
  margin: 3px 0 8px;
}
.sp-sl a {
  font: 700 12px var(--mo);
  letter-spacing: 0.12em;
  color: var(--cy);
  border-bottom: 1px solid currentColor;
}
.sp-sl.tk .mo {
  color: #ffd36b;
}
.sp-cta2 {
  margin-top: 70px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.sp-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 1000px) {
  .sp-how {
    grid-template-columns: 1fr;
  }
  .sp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .sp-pt {
    grid-template-columns: 1fr;
  }
  .sp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sp-steps li {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spx * {
    animation: none !important;
  }
}
html[data-theme="light"] .sp-sl.tk .mo {
  color: #8a6200;
}

.spx .sp-pt {
  border-color: var(--ic, #8be04a) !important;
  box-shadow: 0 0 40px -12px var(--ic, #8be04a);
}
.spx .sp-pt .mo,
.spx .sp-pt a {
  color: var(--ic, #8be04a);
}