:root {
  --wx-canvas: #f5f5f7;
  --wx-surface: rgba(255, 255, 255, 0.78);
  --wx-surface-solid: #fff;
  --wx-ink: #1d1d1f;
  --wx-muted: #6e6e73;
  --wx-line: rgba(29, 29, 31, 0.12);
  --wx-accent: #0071e3;
  --wx-media-glow: rgba(0, 113, 227, 0.12);
  --wx-media-shadow: rgba(0, 0, 0, 0.16);
  --wx-radius: 32px;
  --wx-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
  --wx-content: 1180px;
}

[data-theme="dark"] {
  --wx-canvas: #000;
  --wx-surface: rgba(28, 28, 30, 0.78);
  --wx-surface-solid: #161617;
  --wx-ink: #f5f5f7;
  --wx-muted: #a1a1a6;
  --wx-line: rgba(255, 255, 255, 0.14);
  --wx-accent: #2997ff;
  --wx-media-glow: rgba(41, 151, 255, 0.16);
  --wx-media-shadow: rgba(0, 0, 0, 0.34);
  --wx-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
}

.portfolio-home,
.wealthx-page {
  background: var(--wx-canvas);
  color: var(--wx-ink);
}

.portfolio-home .topbar,
.wealthx-page .nav {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

#theme-toggle {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
}

#theme-toggle .theme-toggle-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#theme-toggle .theme-toggle-icon--moon { display: none; }
[data-theme="dark"] #theme-toggle .theme-toggle-icon--sun { display: none; }
[data-theme="dark"] #theme-toggle .theme-toggle-icon--moon { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portfolio-home .intro {
  min-height: min(760px, 78vh);
  align-items: center;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
}

.portfolio-home .intro h1 {
  font-size: clamp(52px, 7.2vw, 92px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.portfolio-home .status-panel {
  display: none;
}

.portfolio-home .home-product-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  overflow: clip;
  overflow-clip-margin: 28px;
  background: radial-gradient(ellipse at 50% 45%, var(--wx-media-glow), transparent 66%);
  isolation: isolate;
}

.portfolio-home .home-product-stage img {
  width: min(88%, 430px);
  filter: drop-shadow(0 24px 32px var(--wx-media-shadow));
  transform: translateY(7%);
}

.portfolio-home .entry-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  align-items: stretch;
}

.portfolio-home .entry-link {
  border-radius: 24px;
}

.portfolio-home .entry-link:first-child {
  min-height: 260px;
  background: var(--wx-surface-solid);
  box-shadow: var(--wx-shadow);
}

.wealthx-page .hero {
  min-height: min(900px, 94vh);
  overflow: hidden;
}

.wealthx-page .hero-inner {
  max-width: var(--wx-content);
  grid-template-columns: minmax(0, 0.96fr) minmax(400px, 0.74fr);
  align-items: stretch;
  row-gap: 0;
}

.wealthx-page .hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.wealthx-page .hero-inner > .proof-row {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 24px;
}

.wealthx-page .hero-copy h1 {
  font-size: clamp(58px, 7.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.wealthx-page .hero-stage {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: 720px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.wealthx-page .hero-stage img {
  width: min(100%, 500px);
  max-height: 760px;
  object-fit: contain;
  filter: drop-shadow(0 36px 48px rgba(0, 0, 0, 0.24));
}

.wx-story-shell {
  max-width: var(--wx-content);
  margin: 0 auto;
  padding: 80px 24px 128px;
}

.wx-story-intro {
  max-width: 820px;
  padding-bottom: 80px;
}

.wx-story-intro h2 {
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.wx-story-intro p:last-child {
  max-width: 680px;
  color: var(--wx-muted);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
}

.wx-story {
  position: relative;
  min-height: 180vh;
  border-top: 1px solid var(--wx-line);
  scroll-margin-top: calc(var(--navh, 66px) + 24px);
}

.wx-story-inner {
  position: sticky;
  top: 72px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
  min-height: calc(100vh - 72px);
  padding: 64px 0;
}

.wx-story-copy {
  position: relative;
  z-index: 2;
}

.wx-story-copy h3 {
  margin: 10px 0 20px;
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.wx-story-copy > p {
  color: var(--wx-muted);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
}

.wx-story-copy ul {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.wx-story-copy li {
  padding-left: 22px;
  color: var(--wx-muted);
  line-height: 1.5;
}

.wx-story-copy li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 15px 2px -22px;
  border-radius: 50%;
  background: var(--wx-accent);
}

.wx-device-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(720px, calc(100vh - 130px));
  /* Keep the full device silhouette and shadow visible. The source captures
     intentionally reach their canvas bottom, so a clipped stage makes the
     otherwise-transparent composition read as a hard rectangular crop. */
  padding: 20px 32px 36px;
  overflow: visible;
  background: radial-gradient(ellipse at 50% 45%, var(--wx-media-glow), transparent 66%);
  isolation: isolate;
}

.wx-device-stage img {
  position: absolute;
  width: min(76%, 420px);
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 24px 32px var(--wx-media-shadow));
  opacity: calc(1 - var(--shot-shift, 0));
  transform: translate3d(0, calc((0.5 - var(--story-progress, 0.5)) * 52px), 0)
    scale(calc(0.96 + var(--story-progress, 0.5) * 0.04));
  transition: opacity 280ms ease;
}

.wx-device-stage img + img {
  --shot-shift: 0;
  width: min(68%, 380px);
  transform: translate3d(32%, calc((0.5 - var(--story-progress, 0.5)) * -42px), 0)
    scale(calc(0.9 + var(--story-progress, 0.5) * 0.05));
}

.wx-device-stage.dual img:first-child {
  transform: translate3d(-24%, calc((0.5 - var(--story-progress, 0.5)) * 48px), 0)
    scale(calc(0.92 + var(--story-progress, 0.5) * 0.04));
}

.wx-widget-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(720px, calc(100vh - 130px));
  padding: 36px;
  overflow: visible;
  background: radial-gradient(ellipse at 50% 45%, var(--wx-media-glow), transparent 68%);
  isolation: isolate;
}

.wx-widget-stage img {
  position: relative;
  width: min(92%, 610px);
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 26px 44px var(--wx-media-shadow));
  transform: translate3d(3%, calc((0.5 - var(--story-progress, 0.5)) * 28px), 0)
    scale(calc(0.96 + var(--story-progress, 0.5) * 0.04));
}

.wx-supporting-card {
  margin-top: 40px;
  padding: 34px;
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  background: var(--wx-surface-solid);
  scroll-margin-top: calc(var(--navh, 66px) + 24px);
}

@media (max-width: 899px), (max-height: 720px) {
  .portfolio-home .intro,
  .wealthx-page .hero-inner,
  .wx-story-inner {
    grid-template-columns: 1fr;
  }

  .portfolio-home .intro { min-height: auto; }
  .portfolio-home .home-product-stage { min-height: 480px; }
  .portfolio-home .entry-grid { grid-template-columns: 1fr; }
  .wealthx-page .hero { min-height: auto; }
  .wealthx-page .hero-copy,
  .wealthx-page .hero-stage,
  .wealthx-page .hero-inner > .proof-row {
    grid-column: 1;
  }
  .wealthx-page .hero-copy { grid-row: 1; }
  .wealthx-page .hero-stage {
    grid-row: 2;
    min-height: 560px;
  }
  .wealthx-page .hero-inner > .proof-row {
    grid-row: 3;
    margin-top: 0;
  }

  .wx-story {
    min-height: auto;
    padding: 64px 0;
  }

  .wx-story-inner {
    position: static;
    min-height: auto;
    padding: 0;
  }

  .wx-device-stage,
  .wx-widget-stage { min-height: 620px; }
}

@media (max-width: 560px) {
  .portfolio-home .intro h1,
  .wealthx-page .hero-copy h1 { font-size: clamp(42px, 12vw, 54px); }
  .portfolio-home .home-product-stage { min-height: 420px; }
  .wealthx-page .hero-inner { row-gap: 16px; }
  .wealthx-page .hero-stage { min-height: 490px; }
  .wealthx-page .hero-inner > .proof-row { margin-top: 2px; }
  .wx-story-shell { padding: 64px 20px 88px; }
  .wx-story-intro { padding-bottom: 40px; }
  .wx-device-stage,
  .wx-widget-stage { min-height: 520px; }
  .wx-device-stage img { width: 84%; }
  .wx-device-stage img + img { width: 74%; }
  .wx-widget-stage { padding: 20px; }
  .wx-widget-stage img { width: min(108%, 470px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wx-story { min-height: auto; padding: 72px 0; }
  .wx-story-inner { position: static; min-height: auto; }
  .wx-device-stage img,
  .wx-device-stage img + img,
  .wx-device-stage.dual img:first-child {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .wx-device-stage.dual img:first-child { transform: translateX(-20%); }
  .wx-device-stage img + img { transform: translateX(25%); }
  .wx-widget-stage img { transform: translateX(3%); }
}