/* ==========================================================
   VIRELION_OS — BUILT HYBRID CHAMBER
========================================================== */

#page4 {
  --bmx: 0;
  --bmy: 0;
  --bpx: 50%;
  --bpy: 50%;

  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100svh !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #05060B !important;

  isolation: isolate;
}

#page4[hidden] {
  display: none !important;
}


/* Render already contains header/footer */

body[data-vos-page="4"] .vos-nav,
body[data-vos-page="4"] .footer-bar,
body[data-vos-page="4"] .page-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-vos-page="4"] .rain-canvas {
  z-index: 30 !important;
  opacity: .08 !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
}


/* ==========================================================
   FOUNDATION
========================================================== */

.built-reference-stage {
  position: absolute;
  inset: 0;

  overflow: hidden;

  background: #05060B;

  perspective: 1600px;
}

.built-reference-image {
  position: absolute;

  left: -.10%;
  top: -.10%;

  width: 100.20%;
  height: 100.20%;

  max-width: none;

  object-fit: fill;

  pointer-events: none;
  user-select: none;

  transform:
    translate3d(
      calc(var(--bmx) * -1.65px),
      calc(var(--bmy) * -1.05px),
      0
    )
    scale(1.0015);

  transform-origin: center;

  backface-visibility: hidden;

  will-change: transform;

  filter: none;
}


/* ==========================================================
   AMBIENT FLUIDITY
========================================================== */

.built-photon-lightfield {
  position: absolute;
  inset: -10%;

  z-index: 3;

  pointer-events: none;

  background:
    radial-gradient(
      circle at var(--bpx) var(--bpy),
      rgba(232,228,240,.055),
      rgba(30,79,143,.034) 14%,
      rgba(91,45,142,.022) 25%,
      transparent 42%
    );

  mix-blend-mode: screen;

  opacity: .50;
}

.built-photon-sweep {
  position: absolute;
  inset: -40%;

  z-index: 4;

  pointer-events: none;

  background:
    linear-gradient(
      112deg,
      transparent 39%,
      rgba(232,228,240,0) 44%,
      rgba(232,228,240,.043) 48%,
      rgba(30,79,143,.035) 50%,
      rgba(91,45,142,.028) 52%,
      rgba(232,228,240,0) 57%,
      transparent 62%
    );

  mix-blend-mode: screen;

  animation:
    builtSweep
    14s
    ease-in-out
    infinite;
}

@keyframes builtSweep {
  0%,20% {
    transform: translateX(-25%);
    opacity: .14;
  }

  55% {
    transform: translateX(20%);
    opacity: .40;
  }

  100% {
    transform: translateX(47%);
    opacity: .13;
  }
}

.built-depth-vignette {
  position: absolute;
  inset: 0;

  z-index: 5;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.035),
      transparent 11%,
      transparent 89%,
      rgba(0,0,0,.045)
    );
}


/* ==========================================================
   CATEGORY HIT TARGETS
========================================================== */

.built-category-hit {
  position: absolute;

  z-index: 45;

  appearance: none;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  outline: none;

  -webkit-tap-highlight-color: transparent;
}


/* Web */

.built-web-hit {
  left: 14.2%;
  top: 32%;
  width: 29.4%;
  height: 28%;
}


/* Media */

.built-media-hit {
  left: 50.3%;
  top: 32%;
  width: 31.8%;
  height: 28%;
}


/* PWA */

.built-pwa-hit {
  left: 14.2%;
  top: 61.3%;
  width: 29.4%;
  height: 27%;
}


/* + */

.built-plus-hit {
  left: 50.3%;
  top: 61.3%;
  width: 31.8%;
  height: 27%;
}


/* MICRO PHOTON INDICATOR */

.built-category-hit::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 8%;

  width: 0;
  height: 1px;

  opacity: 0;

  transform: translateX(-50%);

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(30,79,143,.72),
      rgba(232,228,240,.94),
      rgba(91,45,142,.64),
      transparent
    );

  transition:
    width .20s ease,
    opacity .18s ease;
}

.built-category-hit::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 6.7%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: 0;

  transform:
    translateX(-50%)
    scale(.65);

  pointer-events: none;

  background: rgba(232,228,240,.96);

  box-shadow:
    0 0 5px rgba(232,228,240,.55),
    0 0 10px rgba(30,79,143,.38),
    0 0 14px rgba(91,45,142,.20);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.built-category-hit:hover::after,
.built-category-hit:focus-visible::after {
  width: 38px;
  opacity: .82;
}

.built-category-hit:hover::before,
.built-category-hit:focus-visible::before {
  opacity: .88;

  transform:
    translateX(-50%)
    scale(1);
}


/* ==========================================================
   NAVIGATION
========================================================== */

.built-hotspot-layer {
  position: absolute;

  inset: 0;

  z-index: 50;

  pointer-events: none;
}

.built-nav {
  position: absolute;

  appearance: none;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  pointer-events: auto;

  outline: none;

  -webkit-tap-highlight-color: transparent;
}

.built-hotspot-layer .nav-welcome {
  left: 49.5%;
  top: .8%;
  width: 6.5%;
  height: 6.1%;
}

.built-hotspot-layer .nav-chromatic {
  left: 55.8%;
  top: .8%;
  width: 7.4%;
  height: 6.1%;
}

.built-hotspot-layer .nav-services {
  left: 62.9%;
  top: .8%;
  width: 6.6%;
  height: 6.1%;
}

.built-hotspot-layer .nav-built {
  left: 69.2%;
  top: .8%;
  width: 5.4%;
  height: 6.1%;
}

.built-hotspot-layer .nav-supporter {
  left: 74.3%;
  top: .8%;
  width: 7.5%;
  height: 6.1%;
}

.built-hotspot-layer .nav-connect {
  left: 81.5%;
  top: .8%;
  width: 6.8%;
  height: 6.1%;
}


/* Micro nav indicator */

.built-nav::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 10%;

  width: 0;
  height: 1px;

  opacity: 0;

  transform:
    translateX(-50%);

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(30,79,143,.72),
      rgba(232,228,240,.94),
      rgba(91,45,142,.64),
      transparent
    );

  transition:
    width .20s ease,
    opacity .20s ease;
}

.built-nav::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 8.6%;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: 0;

  transform:
    translateX(-50%)
    scale(.65);

  pointer-events: none;

  background:
    rgba(232,228,240,.96);

  box-shadow:
    0 0 5px rgba(232,228,240,.55),
    0 0 10px rgba(30,79,143,.38),
    0 0 14px rgba(91,45,142,.20);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.built-nav:hover::after,
.built-nav:focus-visible::after {
  width: 28px;
  opacity: .82;
}

.built-nav:hover::before,
.built-nav:focus-visible::before {
  opacity: .88;

  transform:
    translateX(-50%)
    scale(1);
}

.built-hotspot-layer .nav-built:hover::after {
  width: 20px;
  opacity: .55;
}


/* ==========================================================
   BUILT CATALOG DIALOG
========================================================== */

.built-dialog {
  width: min(1120px, 90vw);

  height: min(690px, 80vh);

  padding: 0;

  border: 0;

  overflow: visible;

  background: transparent;

  color: #E8E4F0;
}

.built-dialog::backdrop {
  background:
    rgba(3,4,10,.69);

  backdrop-filter:
    blur(9px)
    saturate(84%);

  -webkit-backdrop-filter:
    blur(9px)
    saturate(84%);
}


.built-chamber {
  position: relative;

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  padding:
    clamp(28px,3vw,44px);

  border:
    1px solid
    rgba(212,175,122,.62);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 25% 10%,
      rgba(232,228,240,.075),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(20,27,58,.94),
      rgba(7,10,27,.97) 58%,
      rgba(15,9,32,.95)
    );

  backdrop-filter:
    blur(35px)
    saturate(138%);

  box-shadow:
    0 38px 100px rgba(0,0,0,.64),
    -16px 22px 55px rgba(30,79,143,.14),
    16px 24px 58px rgba(91,45,142,.11),
    inset 0 1px rgba(232,228,240,.20),
    inset 1px 0 rgba(212,175,122,.20);

  transform:
    translateY(14px)
    scale(.97);

  opacity: 0;

  transition:
    transform 300ms cubic-bezier(.2,.75,.25,1),
    opacity 260ms ease;
}

.built-dialog[open] .built-chamber {
  transform:
    translateY(0)
    scale(1);

  opacity: 1;
}


/* ==========================================================
   HEADER
========================================================== */

.built-chamber-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 28px;

  flex: 0 0 auto;
}

.built-kicker {
  color:
    rgba(154,202,255,.76);

  font:
    400 .70rem/1.3
    ui-monospace,
    monospace;

  letter-spacing: .18em;

  text-transform: uppercase;
}

.built-chamber h2 {
  margin:
    11px 0 0;

  color: #F5F3F8;

  font-family:
    Cinzel,
    Georgia,
    serif;

  font-size:
    clamp(2rem,3.3vw,3.35rem);

  line-height: 1.05;

  font-weight: 600;
}

.built-dialog-description {
  max-width: 700px;

  margin:
    10px 0 0;

  color:
    rgba(232,228,240,.67);

  font:
    300 .95rem/1.55
    "Space Grotesk",
    Inter,
    sans-serif;
}


/* Clean X, same fix as Services */

.built-dialog-close,
.built-dialog-close:hover,
.built-dialog-close:focus,
.built-dialog-close:focus-visible,
.built-dialog-close:active {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  border:
    1px solid
    rgba(212,175,122,.34) !important;

  border-radius: 50%;

  outline: none !important;

  background:
    rgba(255,255,255,.035) !important;

  color:
    rgba(232,228,240,.90) !important;

  box-shadow: none !important;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent !important;
}

.built-dialog-close:hover {
  border-color:
    rgba(212,175,122,.62) !important;

  background:
    rgba(255,255,255,.055) !important;
}

.built-dialog-close span {
  display: block;

  font:
    300 1.65rem/1
    system-ui,
    sans-serif;

  user-select: none;
}


.built-divider {
  flex: 0 0 auto;

  width: 100%;
  height: 1px;

  margin:
    22px 0;

  background:
    linear-gradient(
      90deg,
      rgba(212,175,122,.70),
      rgba(232,228,240,.12),
      transparent
    );
}


/* ==========================================================
   CATALOG BROWSER
========================================================== */

.built-browser {
  position: relative;

  flex: 1 1 auto;

  min-height: 0;

  display: grid;

  grid-template-columns:
    46px minmax(0,1fr) 46px;

  align-items: center;

  gap: 12px;
}


/* arrow buttons */

.built-scroll-arrow {
  position: relative;

  z-index: 10;

  width: 42px;
  height: 74px;

  border:
    1px solid
    rgba(212,175,122,.28);

  border-radius: 999px;

  background:
    rgba(255,255,255,.028);

  color:
    rgba(232,228,240,.84);

  font:
    300 2rem/1
    system-ui,
    sans-serif;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease;
}

.built-scroll-arrow:hover {
  border-color:
    rgba(212,175,122,.58);

  background:
    rgba(255,255,255,.05);
}

.built-scroll-arrow:disabled {
  opacity: .20;
  cursor: default;
}


/* horizontal content lane */

.built-catalog-track {
  min-width: 0;
  height: 100%;

  display: flex;

  align-items: stretch;

  gap:
    clamp(14px,1.5vw,22px);

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

  scroll-snap-type:
    x mandatory;

  overscroll-behavior-x:
    contain;

  touch-action:
    pan-x;

  scrollbar-width: none;

  outline: none;

  padding:
    4px 3px 10px;
}

.built-catalog-track::-webkit-scrollbar {
  display: none;
}


/* ==========================================================
   SHARED ITEM CARD
========================================================== */

.built-item {
  position: relative;

  flex:
    0 0
    clamp(240px,27vw,320px);

  min-width: 0;

  scroll-snap-align: start;

  overflow: hidden;

  border:
    1px solid
    rgba(212,175,122,.28);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(10,14,32,.74)
    );

  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px rgba(232,228,240,.08);

  color: #E8E4F0;

  text-decoration: none;

  transition:
    transform .20s ease,
    border-color .20s ease;
}

.built-item:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(212,175,122,.54);
}


/* ==========================================================
   WEB LOGO CARDS
========================================================== */

.built-web-card {
  display: flex;
  flex-direction: column;

  padding: 22px;
}

.built-logo-stage {
  height: 190px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  background:
    radial-gradient(
      circle at center,
      rgba(30,79,143,.18),
      transparent 63%
    ),
    rgba(3,5,13,.52);
}

.built-logo-fallback {
  width: 112px;
  height: 112px;

  display: grid;

  place-items: center;

  border-radius: 26px;

  border:
    1px solid
    rgba(212,175,122,.46);

  background:
    linear-gradient(
      135deg,
      rgba(30,79,143,.60),
      rgba(91,45,142,.58)
    );

  color: #FFFFFF;

  font:
    600 1.2rem/1
    Cinzel,
    serif;

  text-align: center;

  box-shadow:
    0 0 30px rgba(30,79,143,.18);
}

.built-item h3 {
  margin:
    18px 0 0;

  color: #F5F3F8;

  font:
    600 1.15rem/1.2
    Cinzel,
    Georgia,
    serif;
}

.built-item p {
  margin:
    8px 0 0;

  color:
    rgba(232,228,240,.62);

  font:
    300 .82rem/1.5
    "Space Grotesk",
    sans-serif;
}

.built-item-action {
  margin-top: auto;

  padding-top: 16px;

  color:
    rgba(154,202,255,.72);

  font:
    400 .70rem/1
    ui-monospace,
    monospace;

  letter-spacing: .10em;
}


/* ==========================================================
   MEDIA
========================================================== */

.built-media-card {
  padding: 12px;

  display: flex;
  flex-direction: column;
}

.built-media-preview {
  flex: 1 1 auto;

  min-height: 250px;

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 27% 22%,
      rgba(232,228,240,.22),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      rgba(30,79,143,.55),
      rgba(91,45,142,.55) 55%,
      rgba(8,10,25,.92)
    );

  box-shadow:
    inset 0 0 35px rgba(0,0,0,.18);
}

.built-media-card:nth-child(2n)
.built-media-preview {
  background:
    radial-gradient(
      circle at 68% 26%,
      rgba(212,175,122,.24),
      transparent 26%
    ),
    linear-gradient(
      150deg,
      rgba(91,45,142,.60),
      rgba(30,79,143,.46),
      #090B18
    );
}

.built-media-card h3 {
  margin-left: 4px;
}


/* ==========================================================
   PWA
========================================================== */

.built-pwa-card {
  padding: 22px;

  display: flex;
  flex-direction: column;
}

.built-app-icon {
  width: 105px;
  height: 105px;

  margin: 6px auto 10px;

  display: grid;

  place-items: center;

  border-radius: 24px;

  border:
    1px solid
    rgba(212,175,122,.43);

  background:
    linear-gradient(
      135deg,
      #1E4F8F,
      #5B2D8E
    );

  color: white;

  font:
    600 1.4rem/1
    Cinzel,
    serif;

  box-shadow:
    0 0 30px
    rgba(30,79,143,.20);
}

.built-store-links {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin-top: auto;

  padding-top: 16px;
}

.built-store-link {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 41px;

  padding: 7px;

  border:
    1px solid
    rgba(212,175,122,.28);

  border-radius: 9px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(232,228,240,.88);

  text-decoration: none;

  font:
    400 .69rem/1.2
    "Space Grotesk",
    sans-serif;
}

.built-store-link:hover {
  border-color:
    rgba(212,175,122,.58);
}


/* ==========================================================
   PLUS / ENGINE LINKS
========================================================== */

.built-plus-card {
  padding: 24px;

  display: flex;
  flex-direction: column;

  text-align: center;
}

.built-engine-icon {
  width: 108px;
  height: 108px;

  margin: 8px auto 12px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(212,175,122,.42);

  background:
    radial-gradient(
      circle,
      rgba(232,228,240,.10),
      rgba(30,79,143,.17) 46%,
      rgba(9,11,24,.88)
    );

  color: #F5F3F8;

  font:
    600 1.25rem/1
    Cinzel,
    serif;

  box-shadow:
    0 0 31px
    rgba(30,79,143,.17);
}


/* ==========================================================
   FOOTER / POSITION
========================================================== */

.built-dialog-footer {
  flex: 0 0 auto;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-top: 18px;

  color:
    rgba(232,228,240,.48);

  font:
    400 .66rem/1
    ui-monospace,
    monospace;

  letter-spacing: .10em;
}

.built-position {
  display: flex;

  align-items: center;

  gap: 8px;
}

.built-position i {
  width: 35px;
  height: 1px;

  background:
    rgba(212,175,122,.45);
}


/* ==========================================================
   MOBILE / TABLET
========================================================== */

@media (max-width:900px) {

  .built-reference-image {
    left: 50%;
    top: 50%;

    width: auto;
    height: 100%;

    min-width: 100%;

    object-fit: cover;

    transform:
      translate(
        calc(-50% + var(--bmx) * -1px),
        calc(-50% + var(--bmy) * -.7px)
      )
      scale(1.005);
  }


  .built-dialog {
    width: 94vw;
    height: min(720px,86svh);
  }


  .built-chamber {
    padding:
      24px 18px;
  }


  .built-browser {
    grid-template-columns:
      38px minmax(0,1fr) 38px;

    gap: 7px;
  }


  .built-scroll-arrow {
    width: 36px;
    height: 66px;

    font-size: 1.7rem;
  }


  .built-item {
    flex-basis:
      min(78vw,300px);
  }


  .built-dialog-footer {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

}


@media (prefers-reduced-motion:reduce) {

  .built-reference-image {
    transform: none !important;
  }

  .built-photon-sweep {
    animation: none !important;
  }

  .built-catalog-track {
    scroll-behavior: auto;
  }

}