:root {
  --sps-bg: #04070c;
  --sps-bg-soft: #07101b;
  --sps-ink: #f3f6fa;
  --sps-muted: #8c97a7;
  --sps-line: rgba(184, 199, 221, 0.14);
  --sps-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sps-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.sps-section,
.sps-section * {
  box-sizing: border-box;
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.sps-section {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: clip;
  background: var(--sps-bg);
  color: var(--sps-ink);
  isolation: isolate;
}

.sps-section h2,
.sps-section p,
.sps-section figure {
  margin: 0;
}

.sps-section h2 {
  color: var(--sps-ink);
  font-size: clamp(3.4rem, 7vw, 6.9rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.91;
  text-wrap: balance;
}

.sps-section p {
  max-width: 35rem;
  color: var(--sps-muted);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 400;
  line-height: 1.62;
  text-wrap: pretty;
}

.sps-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 760ms var(--sps-ease-out),
    transform 760ms var(--sps-ease-out);
}

.sps-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.sps-button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #e9eef6;
  font-size: 0.88rem;
  font-weight: 560;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 4px rgba(0, 0, 0, 0.7),
    0 12px 30px rgba(0, 0, 0, 0.24);
}

.sps-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% -30%, rgba(255, 255, 255, 0.17), transparent 39%),
    linear-gradient(180deg, #141b26, #06090e 74%);
}

.sps-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.sps-button-light {
  border-color: rgba(225, 233, 243, 0.35);
  color: #10151d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(43, 53, 67, 0.24),
    0 15px 38px rgba(0, 0, 0, 0.34);
}

.sps-button-light::before {
  background:
    radial-gradient(circle at 24% -20%, #ffffff, transparent 42%),
    linear-gradient(180deg, #eef2f6, #aab4c1 76%);
}

.sps-button-glass {
  border-color: rgba(193, 209, 231, 0.18);
  background: rgba(7, 11, 18, 0.44);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.sps-button-arrow {
  color: currentColor;
  opacity: 0.54;
  transition: transform 180ms var(--sps-ease-out), opacity 180ms ease;
}

.sps-button:focus-visible,
.sps-wallet-tabs button:focus-visible,
.sps-security-steps button:focus-visible {
  outline: 2px solid rgba(192, 218, 255, 0.98);
  outline-offset: 4px;
}

/* Trade: one real product surface expands into the viewport. */
.sps-trade-stage {
  min-height: 158dvh;
  background:
    radial-gradient(circle at 78% 42%, rgba(50, 80, 124, 0.15), transparent 34%),
    linear-gradient(180deg, #04070c, #080d15 58%, #04070c);
}

.sps-trade-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 7, 12, 0.98) 0 18%, transparent 55%);
}

.sps-trade-pin {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.55fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: 112px clamp(24px, 5vw, 78px) 54px;
}

.sps-trade-copy {
  position: relative;
  z-index: 3;
  align-self: center;
}

.sps-trade-copy h2 {
  font-size: clamp(3.6rem, 6.2vw, 6.7rem);
}

.sps-trade-copy p {
  margin-top: 28px;
  max-width: 30rem;
}

.sps-trade-copy .sps-button {
  margin-top: 34px;
}

.sps-trade-media {
  position: relative;
  z-index: 2;
  min-width: 0;
  perspective: 1500px;
}

.sps-trade-image-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: clamp(24px, 2.6vw, 40px);
  background: #0b1018;
  box-shadow:
    0 58px 150px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(190, 207, 230, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: perspective(1500px) rotateX(7deg) rotateY(-5deg) scale(0.88);
  transform-origin: 54% 62%;
  clip-path: inset(5% 4% round 36px);
  will-change: transform, clip-path;
}

.sps-trade-image-shell::before,
.sps-trade-image-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.sps-trade-image-shell::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.08), transparent 23%),
    linear-gradient(to bottom, transparent 68%, rgba(3, 6, 10, 0.48));
}

.sps-trade-image-shell::after {
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
}

.sps-trade-image-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.68) brightness(0.78) contrast(1.08);
}

.sps-trade-media figcaption {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  padding: 18px 5% 0 0;
  color: rgba(211, 220, 233, 0.47);
  font-size: 0.72rem;
  letter-spacing: 0.015em;
}

@supports (animation-timeline: view()) {
  .sps-trade-image-shell {
    animation: sps-trade-expand 1ms linear both;
    animation-timeline: view(block);
    animation-range: entry 10% cover 52%;
  }

  .sps-trade-copy {
    animation: sps-trade-copy-shift 1ms linear both;
    animation-timeline: view(block);
    animation-range: entry 16% cover 48%;
  }
}

@keyframes sps-trade-expand {
  from {
    transform: perspective(1500px) rotateX(7deg) rotateY(-5deg) scale(0.88);
    clip-path: inset(5% 4% round 36px);
  }
  to {
    transform: perspective(1500px) rotateX(0deg) rotateY(0deg) scale(1);
    clip-path: inset(0 round 28px);
  }
}

@keyframes sps-trade-copy-shift {
  from { transform: translate3d(0, 24px, 0); opacity: 0.35; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Wallet and Earn: one physical mobile surface, two connected account states. */
.sps-wallet-stage {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 22% 54%, rgba(38, 80, 112, 0.2), transparent 33%),
    radial-gradient(circle at 65% 32%, rgba(42, 54, 78, 0.12), transparent 28%),
    #05090f;
}

.sps-wallet-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: 112px clamp(24px, 6vw, 92px) 68px;
}

.sps-wallet-visual {
  position: relative;
  display: grid;
  min-height: min(720px, 76dvh);
  place-items: center;
  perspective: 1300px;
}

.sps-wallet-visual::before {
  content: "";
  position: absolute;
  width: min(64vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83, 120, 165, 0.14), transparent 67%);
  filter: blur(2px);
}

.sps-wallet-orbit {
  position: absolute;
  width: min(50vw, 620px);
  aspect-ratio: 1.72;
  border: 1px solid rgba(172, 193, 220, 0.12);
  border-radius: 50%;
  transform: rotate(-18deg) rotateX(66deg);
}

.sps-wallet-orbit-secondary {
  width: min(39vw, 490px);
  opacity: 0.62;
  transform: rotate(22deg) rotateX(69deg);
}

.sps-wallet-phone {
  position: relative;
  z-index: 3;
  width: min(330px, 35vw);
  transform: rotateY(8deg) rotateX(2deg) rotateZ(-2deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 760ms var(--sps-ease-in-out);
}

.sps-wallet-phone::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3% -4%;
  border-radius: 18% / 9%;
  background: rgba(130, 160, 198, 0.12);
  filter: blur(28px);
  transform: translate3d(0, 24px, -1px);
}

.sps-wallet-phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.68) brightness(0.82) contrast(1.08);
}

.sps-wallet-visual[data-sps-wallet-visual="earn"] .sps-wallet-phone {
  transform: rotateY(-7deg) rotateX(1deg) rotateZ(2deg) translate3d(5%, -2%, 0);
}

.sps-wallet-reflection {
  position: absolute;
  z-index: 4;
  width: min(345px, 36vw);
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(141, 177, 218, 0.12), transparent 66%);
  filter: blur(26px);
  transform: translate3d(0, 72%, 0);
  pointer-events: none;
}

.sps-wallet-copy {
  position: relative;
  z-index: 4;
  max-width: 620px;
}

.sps-wallet-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  margin-bottom: clamp(2.2rem, 5vw, 4.5rem);
  padding: 4px;
  border: 1px solid rgba(183, 200, 223, 0.14);
  border-radius: 999px;
  background: rgba(8, 13, 21, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sps-wallet-tabs button {
  min-width: 112px;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(219, 227, 238, 0.54);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 560;
  cursor: pointer;
  transition: color 160ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 140ms var(--sps-ease-out);
}

.sps-wallet-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #e8edf3, #aab4c2);
  color: #10151c;
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0, 0, 0, 0.22);
}

.sps-wallet-tabs button:active {
  transform: scale(0.97);
}

.sps-wallet-message {
  display: grid;
  min-height: 330px;
  align-content: start;
}

.sps-wallet-message h2 {
  font-size: clamp(3.2rem, 4.8vw, 5.7rem);
}

.sps-wallet-message p {
  margin-top: 30px;
}

/* Security: a quiet material field and a three-state settlement route. */
.sps-security-stage {
  min-height: 245dvh;
  background: #03060a;
}

.sps-security-pin {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  overflow: hidden;
}

.sps-security-material {
  position: absolute;
  inset: -8%;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(3, 6, 10, 0.95) 0 28%, rgba(3, 6, 10, 0.5) 56%, rgba(3, 6, 10, 0.82)),
    linear-gradient(to top, rgba(3, 6, 10, 0.96), transparent 46%, rgba(3, 6, 10, 0.62)),
    url("/assets/sundex-security-material-v1.jpg");
  background-position: center;
  background-size: cover;
  filter: saturate(0.72) brightness(0.76);
  transform: scale(1.04) translate3d(0, 0, 0);
  transition: transform 1100ms var(--sps-ease-in-out);
  will-change: transform;
}

.sps-security-pin[data-sps-security-stage="authorize"] .sps-security-material {
  transform: scale(1.08) translate3d(-2%, 0, 0);
}

.sps-security-pin[data-sps-security-stage="settle"] .sps-security-material {
  transform: scale(1.13) translate3d(-4%, -1%, 0);
}

.sps-security-glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(218, 232, 249, 0.12) 49%, transparent 62%);
  opacity: 0.5;
  transform: translate3d(-16%, 0, 0);
  transition: transform 1000ms var(--sps-ease-in-out), opacity 500ms ease;
}

.sps-security-pin[data-sps-security-stage="settle"] .sps-security-glint {
  opacity: 0.8;
  transform: translate3d(10%, 0, 0);
}

.sps-security-focus {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 52%, rgba(221, 234, 251, 0.14), transparent 20%);
  opacity: 0.55;
  transition: opacity 480ms ease;
}

.sps-security-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(280px, 0.8fr) minmax(390px, 1.2fr);
  align-items: end;
  gap: clamp(3rem, 10vw, 11rem);
  padding: 118px clamp(24px, 6vw, 92px) clamp(56px, 9vh, 96px);
}

.sps-security-copy {
  align-self: center;
  max-width: 650px;
}

.sps-security-copy p {
  margin-top: 28px;
  max-width: 29rem;
}

.sps-security-story {
  align-self: end;
  max-width: 690px;
  padding-bottom: 2vh;
}

.sps-security-message {
  min-height: 155px;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 2px solid rgba(211, 224, 242, 0.24);
}

.sps-security-message strong {
  display: block;
  color: #f0f4f9;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  font-weight: 520;
  letter-spacing: -0.035em;
}

.sps-security-message p {
  margin-top: 15px;
  max-width: 31rem;
  color: rgba(214, 223, 235, 0.64);
  font-size: 0.98rem;
}

.sps-security-route {
  position: relative;
  height: 2px;
  margin-top: 36px;
  overflow: hidden;
  background: rgba(205, 219, 238, 0.12);
}

.sps-security-route-progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #8aa5cc, #eef5ff);
  box-shadow: 0 0 20px rgba(156, 188, 231, 0.22);
  transform: scaleX(0.04);
  transform-origin: left;
  transition: transform 720ms var(--sps-ease-in-out);
}

.sps-security-pin[data-sps-security-stage="authorize"] .sps-security-route-progress {
  transform: scaleX(0.5);
}

.sps-security-pin[data-sps-security-stage="settle"] .sps-security-route-progress {
  transform: scaleX(1);
}

.sps-security-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.sps-security-steps button {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(218, 227, 239, 0.46);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, transform 140ms var(--sps-ease-out);
}

.sps-security-steps button > span {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(213, 226, 244, 0.38);
  border-radius: 50%;
  background: rgba(3, 6, 10, 0.8);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--sps-ease-out);
}

.sps-security-steps button[aria-selected="true"] {
  color: #f0f5fb;
}

.sps-security-steps button[aria-selected="true"] > span {
  border-color: #dfeaf8;
  background: #dfeaf8;
  transform: scale(1.18);
}

.sps-security-steps button:active {
  transform: scale(0.98);
}

.sps-security-sentinels {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sps-security-sentinels span {
  position: absolute;
  left: 0;
  width: 1px;
  height: 20dvh;
}

.sps-security-sentinels span:nth-child(1) { top: 8%; }
.sps-security-sentinels span:nth-child(2) { top: 43%; }
.sps-security-sentinels span:nth-child(3) { top: 78%; }

/* Final conversion moment: no dashboard card, just a calm decisive end. */
.sps-final-cta {
  min-height: 78dvh;
  background:
    radial-gradient(circle at 50% 20%, rgba(74, 105, 148, 0.17), transparent 30%),
    linear-gradient(180deg, #04070c, #070b12 64%, #040609);
}

.sps-final-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: min(980px, 88vw);
  aspect-ratio: 1;
  border: 1px solid rgba(174, 197, 227, 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 80px rgba(174, 197, 227, 0.018),
    0 0 0 160px rgba(174, 197, 227, 0.012);
  transform: translateX(-50%) rotateX(70deg);
  pointer-events: none;
}

.sps-final-shell {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 78dvh;
  max-width: 1080px;
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 120px 24px 88px;
  text-align: center;
}

.sps-final-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 38px;
  color: rgba(235, 241, 249, 0.74);
  font-size: 0.82rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.sps-final-brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
}

.sps-final-shell h2 {
  font-size: clamp(4rem, 8.5vw, 8.5rem);
}

.sps-final-shell > p {
  margin-top: 30px;
  max-width: 39rem;
}

.sps-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}

@media (hover: hover) and (pointer: fine) {
  .sps-button:hover .sps-button-arrow {
    opacity: 0.9;
    transform: translate3d(2px, -2px, 0);
  }

  .sps-wallet-tabs button:hover,
  .sps-security-steps button:hover {
    color: #f0f5fb;
  }
}

@media (max-width: 980px) {
  .sps-trade-stage {
    min-height: auto;
  }

  .sps-trade-pin {
    position: relative;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 52px;
    padding-top: 126px;
  }

  .sps-trade-copy {
    max-width: 650px;
  }

  .sps-trade-media {
    width: min(100%, 860px);
  }

  .sps-trade-image-shell {
    transform: none;
    clip-path: inset(0 round 26px);
  }

  .sps-wallet-shell {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 118px;
  }

  .sps-wallet-visual {
    min-height: 58dvh;
    grid-row: 2;
  }

  .sps-wallet-copy {
    grid-row: 1;
  }

  .sps-wallet-phone {
    width: min(330px, 48vw);
  }

  .sps-wallet-message {
    min-height: 260px;
  }

  .sps-security-shell {
    grid-template-columns: 1fr;
    align-content: center;
    align-items: start;
    gap: 64px;
  }

  .sps-security-copy,
  .sps-security-story {
    max-width: 680px;
  }
}

@media (max-width: 640px) {
  .sps-section h2 {
    font-size: clamp(3.1rem, 14vw, 4.5rem);
    line-height: 0.94;
  }

  .sps-section p {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .sps-trade-pin,
  .sps-wallet-shell,
  .sps-security-shell {
    padding-inline: 20px;
  }

  .sps-trade-pin {
    min-height: 940px;
    padding-top: 118px;
    padding-bottom: 60px;
  }

  .sps-trade-media figcaption {
    justify-content: flex-start;
    gap: 14px;
    padding-left: 4px;
    font-size: 0.64rem;
  }

  .sps-wallet-stage,
  .sps-wallet-shell {
    min-height: 980px;
  }

  .sps-wallet-shell {
    align-content: center;
    padding-top: 112px;
    padding-bottom: 60px;
  }

  .sps-wallet-visual {
    min-height: 430px;
  }

  .sps-wallet-phone {
    width: min(270px, 68vw);
  }

  .sps-wallet-orbit { width: 112vw; }
  .sps-wallet-orbit-secondary { width: 86vw; }

  .sps-wallet-tabs {
    margin-bottom: 34px;
  }

  .sps-wallet-tabs button {
    min-width: 102px;
  }

  .sps-wallet-message {
    min-height: 255px;
  }

  .sps-security-stage {
    min-height: 230dvh;
  }

  .sps-security-shell {
    min-height: 100dvh;
    align-content: center;
    gap: 46px;
    padding-top: 112px;
    padding-bottom: 48px;
  }

  .sps-security-material {
    inset: -4% -38%;
    background-position: 62% center;
  }

  .sps-security-message {
    min-height: 148px;
  }

  .sps-security-steps {
    gap: 7px;
  }

  .sps-security-steps button {
    gap: 7px;
    font-size: 0.68rem;
  }

  .sps-final-cta,
  .sps-final-shell {
    min-height: 720px;
  }

  .sps-final-shell {
    padding-inline: 20px;
  }

  .sps-final-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .sps-final-actions .sps-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sps-reveal {
    transform: none;
    transition: opacity 180ms ease;
  }

  .sps-trade-image-shell,
  .sps-trade-copy {
    animation: none !important;
    transform: none;
    clip-path: inset(0 round 28px);
  }

  .sps-wallet-phone,
  .sps-security-material,
  .sps-security-glint,
  .sps-security-route-progress {
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .sps-button-glass,
  .sps-wallet-tabs {
    background: #0c121c;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}