.page-v4 .v4-hero {
  color: #fff;
  background: transparent;
  min-height: 100svh;
  isolation: isolate;
}
.page-v4 .v4-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,8,16,.55), rgba(5,8,16,.25) 40%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.page-v4 .v4-hero::after {
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(5,9,20,.38));
  height: 20%;
}
.page-v4 .v4-hero .hero-grid { display: block; width: 100%; z-index: 2; pointer-events: none; }
.page-v4 .v4-hero .hero-copy { position: relative; z-index: 2; max-width: min(56%, 660px); pointer-events: auto; }
.page-v4 .v4-hero .hero-sub { color: #c5d0e6; }
.page-v4 .v4-hero .hero-ctas .btn-primary { --bg: #fff; --fg: #101624; }
.page-v4 .v4-hero .hero-ctas .btn-secondary { --bg: rgba(255,255,255,.08); --fg: #fff; --bd: rgba(255,255,255,.3); }
.page-v4 .v4-hero .play-link, .page-v4 .v4-hero .play-link .dur { color: #fff; }
.page-v4 .v4-hero .play-link .pl { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.page-v4 .site-header.is-top:not(.menu-open) { color: #fff; }
.page-v4 .site-header.is-top:not(.menu-open) .btn-primary { --bg: #fff; --fg: #101624; }
.v4-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(90% 60% at 72% 58%, #456caf, #0b1020 70%);
}
.v4-world-canvas, .v4-world-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.v4-world-canvas { display: block; z-index: 1; cursor: pointer; }
.v4-world.is-live .v4-world-fallback { display: none; }
.v4-unit-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.v4-unit-layer[hidden] { display: none; }
.v4-unit-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v4-unit-line line { stroke: rgba(220,230,250,.85); stroke-width: 1.5; stroke-dasharray: 4 4; }
.v4-unit-line circle { fill: #fff; filter: drop-shadow(0 0 6px #9fc0ff); }
.v4-unit-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: auto; }
.v4-unit-close { display: none; position: absolute; top: 10px; right: 12px; color: #536177; font-size: 22px; line-height: 1; }
.page-v4 .tip-water-inner { z-index: 2; transform: none; pointer-events: none; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.page-v4 .tip-wave { animation: none; }
.page-v4 .phone:not(.hp .phone) { --bezel: calc(var(--pw) * .028); --shell-radius: calc(var(--pw) * .15); padding: var(--bezel); border-radius: var(--shell-radius); }
.page-v4 .phone:not(.hp .phone)::before, .page-v4 .phone:not(.hp .phone)::after { content: none; }
.page-v4 .phone-screen:not(.hp .phone-screen) { border-radius: calc(var(--shell-radius) - var(--bezel)); }
.page-v4 .phone-crop { border-radius: var(--shell-radius) var(--shell-radius) 0 0; }
.page-v4 .phone-crop .phone-screen { border-radius: calc(var(--shell-radius) - var(--bezel)) calc(var(--shell-radius) - var(--bezel)) 0 0; }
.page-v4 .dex-note { max-width: 48ch; color: var(--on-dark-2); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; }
.page-v4 .ct-vis:first-child { isolation: isolate; }
.page-v4 .ct-pipe { width: 126px; height: 44px; }
.page-v4 .ct-pipe::before, .page-v4 .ct-pipe::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(103,142,229,.18), var(--b1) 25%, var(--b3) 50%, var(--live) 75%, rgba(103,142,229,.18)) 0 0 / 200% 100%; box-shadow: 0 0 12px rgba(103,142,229,.35); animation: v4-crm-grad 2.4s linear infinite; }
.page-v4 .ct-pipe::before { top: 15px; }
.page-v4 .ct-pipe::after { top: 27px; animation-direction: reverse; }
.page-v4 .conn-tile:first-child .ct-node { animation: v4-crm-node 2.4s ease-in-out infinite; }
.page-v4 .conn-tile:first-child .ct-node:last-child { animation-delay: -1.2s; }
@keyframes v4-crm-grad { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes v4-crm-node { 0%, 75%, 100% { box-shadow: var(--sh-card); } 82% { box-shadow: var(--sh-card), 0 0 0 7px rgba(103,142,229,.16); } }
.v4-end-frame { display: block; width: 100%; height: 1800px; border: 0; background: #fff; }
@media (max-width: 767px) {
  .page-v4 .v4-hero { align-items: flex-start; justify-content: flex-start; padding-top: calc(var(--header-h) + 28px); }
  .page-v4 .v4-hero::before { background: linear-gradient(180deg, rgba(5,8,16,.72), rgba(5,8,16,.38) 45%, transparent 68%); }
  .page-v4 .v4-hero .hero-grid { display: block; padding-block: 0 90px; }
  .page-v4 .v4-hero .hero-copy { display: block; max-width: 100%; pointer-events: none; }
  .page-v4 .v4-hero .hero-copy a, .page-v4 .v4-hero .hero-copy button { pointer-events: auto; }
  .page-v4 .v4-hero .hero-sub { margin-top: 0; }
  .page-v4 .v4-hero .hero-ctas .btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-v4 .v4-hero .hero-ctas .btn { width: auto; padding-inline: 14px; font-size: 13px; }
  .v4-unit-card .floor-card-plan { height: 125px; }
  .v4-unit-card { left: var(--margin); right: var(--margin); top: auto; bottom: 20px; width: auto; max-height: min(58svh, 510px); overflow-y: auto; transform: none !important; }
  .v4-unit-line { display: none; }
  .v4-unit-close { display: block; }
}
.v4-world-canvas { opacity: 0; }
.v4-world.is-live .v4-world-canvas { opacity: 1; }
.v4-world-fallback {
  background: radial-gradient(90% 60% at 72% 58%, rgba(103,142,229,.35), transparent 60%), linear-gradient(180deg, #05070f, #0b1020 40%, #1a2744 62%, #0f1d3c 63%, #0b1020);
}