@font-face {
  font-family: "D-DIN";
  src: url("/static/fonts/D-DIN.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN";
  src: url("/static/fonts/D-DIN-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/GeistVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --infinide-site-css-ready: 1;
  --background: #020609;
  --foreground: #f3f7f7;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
}

.seoBody {
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
}

body {
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: #164a58;
  color: #f7fbfc;
  text-shadow: none;
}

::-moz-selection {
  background-color: #164a58;
  color: #f7fbfc;
  text-shadow: none;
}

::search-text {
  background-color: #164a58;
  color: #f7fbfc;
  text-shadow: none;
}

::search-text:current {
  background-color: #713330;
  color: #fff;
}

::target-text {
  background-color: #164a58;
  color: #f7fbfc;
}

img {
  -webkit-user-select: none;
  user-select: none;
}

.landing {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--background);
}

.sceneLayers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(90deg, #000 0%, #000 30%, #02090d 58%, #04131a 100%);
  transition: opacity 420ms ease;
}

.sceneLayers::before {
  position: absolute;
  inset: -10%;
  z-index: 1;
  background:
    radial-gradient(ellipse 48% 52% at 91% 7%, rgba(44, 143, 198, 0.42) 0%, rgba(15, 70, 124, 0.2) 42%, transparent 74%),
    radial-gradient(ellipse 46% 50% at 91% 91%, rgba(55, 202, 224, 0.52) 0%, rgba(19, 108, 156, 0.23) 42%, transparent 76%),
    radial-gradient(ellipse 44% 34% at 53% 96%, rgba(222, 248, 250, 0.32) 0%, rgba(91, 198, 220, 0.17) 30%, transparent 72%),
    radial-gradient(ellipse 58% 42% at 12% 96%, rgba(26, 91, 158, 0.64) 0%, rgba(11, 45, 95, 0.32) 44%, transparent 78%);
  content: "";
  pointer-events: none;
}

.sceneLayers::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 60% 56% at 14% 42%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 1, 3, 0.42) 76%, transparent 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 2, 4, 0.12) 56%, transparent 84%),
    linear-gradient(180deg, rgba(0, 2, 4, 0.28) 0%, rgba(0, 2, 4, 0.06) 34%, transparent 70%);
  content: "";
  pointer-events: none;
}

.critical-ready .sceneLayers {
  opacity: 1;
}

.homeParticleCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.homeParticleCanvas.particleFrameReady {
  visibility: visible;
  opacity: 1;
}

.originNature {
  position: absolute;
  inset: 0;
  z-index: 2;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  background:
    radial-gradient(ellipse 72% 72% at 86% 48%, rgba(68, 187, 218, 0.14), transparent 72%),
    #020609;
  pointer-events: none;
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.originNature::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 5, 9, 0.6) 0%, rgba(0, 5, 9, 0.2) 42%, transparent 70%),
    linear-gradient(180deg, rgba(0, 3, 6, 0.18), transparent 52%, rgba(0, 2, 4, 0.52));
  content: "";
}

.originNature img {
  display: block;
  width: 100%;
  height: 100%;
}

.originNature img {
  opacity: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.04) brightness(0.92);
  transition: opacity 420ms ease;
}

.nature-ready .originNature img {
  opacity: 1;
}

.origin-active .originNature {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.partnershipBackdrop {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 68%;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  background:
    radial-gradient(ellipse 72% 80% at 78% 22%, rgba(68, 187, 218, 0.16), transparent 72%),
    #020609;
  pointer-events: none;
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.partnershipBackdrop img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center bottom;
  filter: saturate(0.88) contrast(1.06) brightness(0.8);
  transition: opacity 420ms ease;
}

.partnershipBackdrop::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 4, 7, 0.6) 0%, rgba(0, 4, 7, 0.22) 48%, transparent 76%),
    linear-gradient(180deg, rgba(0, 3, 5, 0.08) 0%, rgba(0, 3, 5, 0.12) 44%, #020609 100%);
  content: "";
}

.partnership-image-ready .partnershipBackdrop img {
  opacity: 1;
}

.partnership-active .partnershipBackdrop {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.researchBackdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.researchBackdrop img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88) contrast(1.08) brightness(0.9);
  transition: opacity 420ms ease;
}

.researchBackdrop::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 2, 4, 0.54) 0%, rgba(0, 2, 4, 0.18) 42%, transparent 70%),
    linear-gradient(180deg, rgba(0, 2, 4, 0.08) 0%, transparent 52%, rgba(0, 2, 4, 0.76) 100%);
  content: "";
}

.research-image-ready .researchBackdrop img {
  opacity: 1;
}

.research-active .researchBackdrop {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.contactBackdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, #000 30%, #02090d 58%, #04131a 100%);
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.contactBackdrop::after {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(ellipse 60% 56% at 14% 42%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 1, 3, 0.42) 76%, transparent 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 2, 4, 0.12) 56%, transparent 84%),
    linear-gradient(180deg, rgba(0, 2, 4, 0.28) 0%, rgba(0, 2, 4, 0.06) 34%, transparent 70%);
  content: "";
}

.contactBackdrop::before {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 48% 52% at 91% 7%, rgba(44, 143, 198, 0.42) 0%, rgba(15, 70, 124, 0.2) 42%, transparent 74%),
    radial-gradient(ellipse 46% 50% at 91% 91%, rgba(55, 202, 224, 0.52) 0%, rgba(19, 108, 156, 0.23) 42%, transparent 76%),
    radial-gradient(ellipse 44% 34% at 53% 96%, rgba(222, 248, 250, 0.32) 0%, rgba(91, 198, 220, 0.17) 30%, transparent 72%),
    radial-gradient(ellipse 42% 38% at 10% 94%, rgba(26, 91, 158, 0.58) 0%, rgba(11, 45, 95, 0.27) 42%, transparent 76%);
  content: "";
}

.contact-active .contactBackdrop {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.earthBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--background);
  object-fit: cover;
  object-position: center;
  filter: brightness(0.96) saturate(1.06) contrast(1.14);
  transform: scale(1);
  animation: orbitalDrift 26s ease-in-out infinite alternate;
}

.earthColorAccent {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 38% 48% at 13% 49%, rgba(48, 137, 224, 0.08), transparent 74%),
    radial-gradient(ellipse 72% 72% at 88% 14%, rgba(70, 174, 255, 0.19), transparent 70%),
    radial-gradient(ellipse 56% 44% at 70% 43%, rgba(44, 143, 234, 0.085), transparent 74%),
    linear-gradient(112deg, transparent 46%, rgba(36, 126, 220, 0.07) 100%);
  mix-blend-mode: screen;
  opacity: 0.78;
  pointer-events: none;
}

.earthColorAccent::before,
.earthColorAccent::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.earthColorAccent::before {
  background:
    radial-gradient(ellipse 52% 48% at 80% 9%, rgba(255, 69, 62, 0.2), transparent 74%),
    radial-gradient(
      ellipse 64% 22% at 80% 31%,
      rgba(135, 211, 255, 0.1) 0%,
      rgba(55, 154, 241, 0.05) 44%,
      transparent 80%
    );
  opacity: 0.58;
  animation: earthRedAccentPulse 12s ease-in-out infinite;
}

.earthColorAccent::after {
  background:
    radial-gradient(ellipse 58% 46% at 88% 13%, rgba(94, 194, 255, 0.075), transparent 74%),
    radial-gradient(
      ellipse 46% 34% at 65% 64%,
      rgba(48, 149, 238, 0.075) 0%,
      rgba(31, 101, 196, 0.03) 48%,
      transparent 78%
    );
  opacity: 0.82;
  animation: earthCyanAccentPulse 10s ease-in-out -3s infinite;
}

html.content-active .earthColorAccent::before,
html.content-active .earthColorAccent::after {
  animation-play-state: paused;
}

@keyframes earthRedAccentPulse {
  0%, 100% { opacity: 0.34; }
  42% { opacity: 0.8; }
  68% { opacity: 0.58; }
}

@keyframes earthCyanAccentPulse {
  0%, 100% { opacity: 0.72; }
  48% { opacity: 1; }
  74% { opacity: 0.84; }
}

.nightTransition {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 86% 70% at 100% 100%, rgba(0, 2, 4, 0.9) 0%, rgba(0, 3, 5, 0.7) 27%, rgba(1, 4, 7, 0.3) 54%, rgba(1, 5, 8, 0) 79%),
    linear-gradient(180deg, rgba(1, 5, 9, 0.02) 0%, rgba(1, 5, 9, 0.03) 52%, rgba(1, 5, 9, 0.2) 72%, rgba(0, 3, 5, 0.68) 100%),
    linear-gradient(108deg, rgba(1, 5, 8, 0.95) 0%, rgba(1, 5, 8, 0.76) 30%, rgba(1, 5, 8, 0.38) 50%, rgba(1, 5, 8, 0.07) 70%, rgba(1, 5, 8, 0) 100%);
  pointer-events: none;
}

.atmosphericGlow {
  position: absolute;
  z-index: 2;
  top: -48%;
  right: -9%;
  width: 72vw;
  height: 72vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 178, 215, 0.13), transparent 64%);
  pointer-events: none;
}

.defenseEnvelopeCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 700ms ease 180ms;
}

.earth-ready .defenseEnvelopeCanvas {
  opacity: 0.94;
}

.defense-envelope-experiment .orbitArc {
  opacity: 0;
}

.stars {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.starsFar {
  width: 1px;
  height: 1px;
  box-shadow:
    3vw 8vh rgba(255, 255, 255, 0.26),
    7vw 18vh rgba(208, 235, 244, 0.42),
    11vw 31vh rgba(255, 255, 255, 0.18),
    14vw 6vh rgba(255, 255, 255, 0.5),
    17vw 42vh rgba(206, 231, 241, 0.22),
    20vw 14vh rgba(255, 255, 255, 0.34),
    23vw 27vh rgba(218, 241, 248, 0.16),
    26vw 4vh rgba(255, 255, 255, 0.42),
    29vw 37vh rgba(255, 255, 255, 0.28),
    32vw 19vh rgba(207, 236, 246, 0.2),
    35vw 9vh rgba(255, 255, 255, 0.56),
    38vw 46vh rgba(218, 239, 246, 0.24),
    41vw 25vh rgba(255, 255, 255, 0.38),
    44vw 3vh rgba(213, 238, 246, 0.2),
    47vw 34vh rgba(255, 255, 255, 0.17),
    50vw 13vh rgba(208, 235, 244, 0.46),
    53vw 43vh rgba(255, 255, 255, 0.26),
    56vw 23vh rgba(255, 255, 255, 0.19),
    59vw 7vh rgba(206, 231, 241, 0.52),
    62vw 38vh rgba(255, 255, 255, 0.23),
    65vw 17vh rgba(218, 241, 248, 0.36),
    68vw 30vh rgba(255, 255, 255, 0.18),
    71vw 4vh rgba(255, 255, 255, 0.44),
    74vw 44vh rgba(207, 236, 246, 0.21),
    77vw 21vh rgba(255, 255, 255, 0.32),
    80vw 10vh rgba(218, 239, 246, 0.17),
    83vw 36vh rgba(255, 255, 255, 0.48),
    86vw 15vh rgba(213, 238, 246, 0.2),
    89vw 47vh rgba(255, 255, 255, 0.3),
    92vw 27vh rgba(208, 235, 244, 0.16),
    96vw 6vh rgba(255, 255, 255, 0.4),
    5vw 53vh rgba(255, 255, 255, 0.22),
    9vw 67vh rgba(213, 238, 246, 0.36),
    13vw 84vh rgba(255, 255, 255, 0.18),
    16vw 57vh rgba(208, 235, 244, 0.46),
    19vw 76vh rgba(255, 255, 255, 0.24),
    22vw 93vh rgba(206, 231, 241, 0.17),
    25vw 64vh rgba(255, 255, 255, 0.38),
    28vw 82vh rgba(218, 241, 248, 0.2),
    31vw 51vh rgba(255, 255, 255, 0.52),
    34vw 72vh rgba(255, 255, 255, 0.19),
    37vw 90vh rgba(207, 236, 246, 0.28),
    40vw 61vh rgba(255, 255, 255, 0.16),
    43vw 79vh rgba(218, 239, 246, 0.42),
    46vw 55vh rgba(255, 255, 255, 0.22),
    49vw 87vh rgba(213, 238, 246, 0.18),
    52vw 69vh rgba(255, 255, 255, 0.34),
    55vw 96vh rgba(208, 235, 244, 0.24),
    58vw 58vh rgba(255, 255, 255, 0.46),
    61vw 77vh rgba(206, 231, 241, 0.2),
    64vw 89vh rgba(255, 255, 255, 0.17),
    67vw 54vh rgba(218, 241, 248, 0.38),
    70vw 72vh rgba(255, 255, 255, 0.21),
    73vw 94vh rgba(255, 255, 255, 0.28),
    76vw 63vh rgba(207, 236, 246, 0.18),
    79vw 84vh rgba(255, 255, 255, 0.44),
    82vw 51vh rgba(218, 239, 246, 0.22),
    85vw 75vh rgba(213, 238, 246, 0.16),
    88vw 91vh rgba(255, 255, 255, 0.36),
    91vw 59vh rgba(208, 235, 244, 0.19),
    94vw 81vh rgba(255, 255, 255, 0.48),
    97vw 69vh rgba(206, 231, 241, 0.2);
  animation: farTwinkle 7.8s ease-in-out infinite;
}

.starsNear {
  width: 1.5px;
  height: 1.5px;
  box-shadow:
    6vw 24vh rgba(255, 255, 255, 0.72),
    12vw 12vh rgba(226, 247, 252, 0.56),
    18vw 35vh rgba(255, 255, 255, 0.82),
    24vw 8vh rgba(207, 239, 248, 0.48),
    30vw 29vh rgba(255, 255, 255, 0.68),
    36vw 16vh rgba(255, 255, 255, 0.5),
    42vw 41vh rgba(219, 242, 249, 0.76),
    48vw 10vh rgba(255, 255, 255, 0.54),
    54vw 31vh rgba(226, 247, 252, 0.86),
    60vw 19vh rgba(255, 255, 255, 0.46),
    66vw 43vh rgba(207, 239, 248, 0.7),
    72vw 11vh rgba(255, 255, 255, 0.58),
    78vw 32vh rgba(219, 242, 249, 0.8),
    84vw 18vh rgba(255, 255, 255, 0.44),
    90vw 39vh rgba(226, 247, 252, 0.66),
    95vw 14vh rgba(255, 255, 255, 0.52),
    10vw 62vh rgba(207, 239, 248, 0.74),
    21vw 79vh rgba(255, 255, 255, 0.5),
    33vw 56vh rgba(219, 242, 249, 0.84),
    45vw 88vh rgba(255, 255, 255, 0.46),
    57vw 66vh rgba(226, 247, 252, 0.7),
    69vw 83vh rgba(255, 255, 255, 0.54),
    81vw 61vh rgba(207, 239, 248, 0.78),
    93vw 76vh rgba(255, 255, 255, 0.48);
  filter: drop-shadow(0 0 1.5px rgba(188, 232, 244, 0.48));
  animation: nearTwinkle 6.2s 1.1s ease-in-out infinite;
}

.techGrid {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.orbitArc {
  position: absolute;
  right: -9vw;
  bottom: 2vh;
  width: 56vw;
  height: 25vw;
  border: 1px solid rgba(146, 224, 238, 0.14);
  border-radius: 50%;
  opacity: 0.7;
  transform: rotate(-8deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 76%, transparent 100%);
}

.orbitArc::before {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(146, 224, 238, 0.07);
  border-radius: inherit;
  content: "";
}

.pixelGrid {
  position: absolute;
  top: 17%;
  right: clamp(16px, 2.2vw, 38px);
  width: 56px;
  height: min(52vh, 460px);
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(160, 235, 246, 0.48) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(92, 192, 211, 0.2) 0 1px, transparent 1.3px);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px, 16px 16px;
  filter: drop-shadow(0 0 4px rgba(78, 197, 218, 0.18));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  animation: digitalReveal 1.8s 0.45s ease-out forwards;
}

.pixelGrid::after {
  position: absolute;
  top: 19%;
  right: 8px;
  width: 3px;
  height: 3px;
  background: rgba(200, 248, 255, 0.9);
  box-shadow:
    -24px 40px rgba(128, 224, 239, 0.72),
    0 88px rgba(173, 239, 249, 0.62),
    -40px 136px rgba(112, 211, 229, 0.66),
    -16px 200px rgba(190, 244, 251, 0.68),
    -32px 264px rgba(112, 211, 229, 0.56);
  content: "";
}

.bottomBlackout {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 82% 70% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.98) 27%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0.78) 81%, #000 91%, #000 100%);
  pointer-events: none;
}

.previewBanner {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 40px;
  box-sizing: border-box;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(168, 225, 233, 0.2);
  background:
    linear-gradient(0deg, rgba(2, 9, 13, 0.72), rgba(2, 9, 13, 0.72)),
    linear-gradient(90deg, #d75054 0%, #6bcdda 100%);
  align-items: center;
  justify-content: center;
  color: rgba(250, 252, 252, 0.94);
  backdrop-filter: blur(14px);
}

.previewBanner p {
  margin: 0;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(0.75rem, calc(0.7rem + 0.18vw), 0.9rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

.previewBanner ~ .siteHeader,
.previewBanner ~ .topActions {
  top: calc(clamp(14px, 1.6vw, 24px) + 40px);
}

.siteHeader {
  position: absolute;
  z-index: 5;
  top: clamp(24px, 3vw, 42px);
  right: clamp(40px, 6vw, 96px);
  left: clamp(40px, 6vw, 96px);
  display: flex;
  align-items: center;
  gap: clamp(40px, 4.5vw, 68px);
}

.brandMark {
  display: block;
  width: 48px;
  height: 48px;
  content: url("/static/images/favicon.svg");
  opacity: 1;
  filter: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.brandHome {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 2px;
  color: #fff;
  text-decoration: none;
}

.brandText {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  color: #fff;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
  white-space: nowrap;
}

.brandText::before,
.brandText::after {
  display: block;
}

.brandText::before {
  content: "Infinide";
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(1.42rem, 1.55vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brandText::after {
  display: none;
  content: none;
}

.menuToggle {
  display: none;
}

.brandHome:focus-visible {
  outline: 1px solid rgba(247, 250, 250, 0.72);
  outline-offset: 7px;
}

.primaryNav {
  position: absolute;
  left: clamp(38%, calc(100% - 480px), 52%);
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 46px);
  transform: translateX(-50%);
}

.primaryNav a {
  position: relative;
  color: rgba(247, 250, 250, 0.94);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(0.72rem, 0.8vw, 0.84rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

.primaryNav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 220ms ease;
}

.primaryNav a:hover::after,
.primaryNav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.primaryNav a:focus-visible {
  outline: 1px solid rgba(247, 250, 250, 0.72);
  outline-offset: 7px;
}

@media (max-width: 760px) {
  .brandText {
    display: flex;
    min-width: 62px;
  }

  .brandHome {
    gap: 2px;
  }

  .brandMark {
    width: 40px;
    height: 40px;
  }

  .brandText::before {
    font-size: 1.28rem;
    line-height: 1;
  }
}

.topActions {
  position: absolute;
  z-index: 5;
  top: clamp(24px, 3vw, 42px);
  right: clamp(40px, 6vw, 96px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.languageToggle {
  position: relative;
  display: grid;
  width: 72px;
  height: 40px;
  box-sizing: border-box;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 250, 250, 0.18);
  align-items: center;
  grid-template-columns: 1fr 1fr;
  color: rgba(247, 250, 250, 0.76);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  transition: background-color 180ms ease;
}

.languageToggle::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38);
  content: "";
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.languageToggle[aria-checked="true"]::before {
  transform: translateX(32px);
}

.languageToggle span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  transition: color 180ms ease;
}

.languageToggle[aria-checked="false"] span:first-child,
.languageToggle[aria-checked="true"] span:last-child {
  color: #020609;
}

.languageToggle:hover {
  background: rgba(247, 250, 250, 0.26);
}

.languageToggle:focus-visible {
  outline: 1px solid rgba(247, 250, 250, 0.72);
  outline-offset: 5px;
}

.partnershipCta {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  width: 172px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 20px;
  border: 1px solid #fff;
  background: #fff;
  align-items: center;
  justify-content: center;
  color: #020609;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(0.72rem, 0.8vw, 0.84rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}

.partnershipCta::before,
.partnershipCta::after {
  position: absolute;
  content: attr(data-text);
  opacity: 0;
  pointer-events: none;
}

.partnershipCtaLabel {
  position: relative;
}

.partnershipCta:hover,
.partnershipCta:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #020609;
}

.partnershipCta:hover .partnershipCtaLabel {
  animation: ctaSignalBreak 420ms steps(2, end) both;
}

.partnershipCta:hover::before,
.partnershipCta:hover::after {
  opacity: 0.72;
}

.partnershipCta:hover::before {
  color: #00d8ff;
  animation: ctaGlitchTop 420ms steps(2, end) both;
  clip-path: inset(12% 0 55% 0);
}

.partnershipCta:hover::after {
  color: #ff3158;
  animation: ctaGlitchBottom 420ms steps(2, end) both;
  clip-path: inset(56% 0 10% 0);
}

.partnershipCta:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.partnershipCtaIcon {
  display: none;
}

.grain {
  display: none;
}

.identity {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(40px, 6vw, 96px);
  width: min(50vw, 680px);
  text-align: left;
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 240ms ease;
}

.identity h1 {
  margin: 0;
  color: rgba(247, 250, 250, 0.96);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.34);
}

.identity h1 span {
  display: block;
}

.identity h1 .identityMobileBreak {
  display: inline;
}

html[lang="id"] .identity h1 {
  font-size: clamp(3.6rem, 4.6vw, 4.5rem);
}

html .identity.identityAbout {
  width: min(72vw, 1100px);
}

html .identity.identityAbout h1,
html[lang="id"] .identity.identityAbout h1 {
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  line-height: 0.98;
  white-space: nowrap;
}

.identityAboutBody {
  width: min(620px, 100%);
  margin-top: 24px !important;
  color: rgba(238, 244, 245, 0.78) !important;
  font-size: clamp(1rem, 1.3vw, 1.18rem) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  white-space: normal;
}

html[lang="id"] .identityAboutBody {
  width: min(760px, 100%);
}

.identityAboutBody strong {
  color: rgba(247, 250, 250, 0.96);
  font-weight: 700;
}

.identityAboutBreak {
  display: none;
}

.identity p {
  margin: 15px 0 0;
  color: #fff;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-variation-settings: "opsz" 32;
  font-weight: 410;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.58);
}

.identityContinuation {
  display: inline-block;
}

.originContent,
.researchContent {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(40px, 6vw, 96px);
  width: min(52vw, 720px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%);
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.sectionLabel {
  margin: 0 0 18px;
  color: rgba(229, 87, 89, 0.92);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.originContent h2,
.originContent h1,
.researchContent h2 {
  margin: 0;
  color: rgba(247, 250, 250, 0.96);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.originBody {
  max-width: 680px;
  margin: 24px 0 0;
  color: rgba(238, 244, 245, 0.78);
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-variation-settings: "opsz" 32;
  font-weight: 410;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.originBody + .originBody {
  margin-top: 16px;
}

.originBody strong {
  color: rgba(247, 250, 250, 0.94);
  font-weight: 700;
}

.originContent {
  width: min(56vw, 760px);
}

.researchSummary {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(238, 244, 245, 0.78);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.researchCta {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 30px;
  padding: 0 20px;
  border: 1px solid rgba(247, 250, 250, 0.42);
  border-radius: 2px;
  background: rgba(247, 250, 250, 0.06);
  color: rgba(247, 250, 250, 0.68);
  -webkit-text-fill-color: rgba(247, 250, 250, 0.68);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: not-allowed;
  opacity: 1;
}

.partnershipContent {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(40px, 6vw, 96px);
  left: clamp(40px, 6vw, 96px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%);
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.partnershipIntro {
  max-width: 760px;
  margin-bottom: clamp(38px, 6vh, 70px);
}

.partnershipIntro h2,
.partnershipIntro h1 {
  max-width: 720px;
  margin: 0;
  color: rgba(247, 250, 250, 0.96);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.partnershipSummary {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(238, 244, 245, 0.74);
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-variation-settings: "opsz" 32;
  font-weight: 410;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.partnershipNarrativeOnly .partnershipIntro {
  max-width: 800px;
  margin-bottom: 0;
}

.partnershipNarrative {
  max-width: 720px;
  margin-top: 28px;
  color: rgba(238, 244, 245, 0.78);
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-variation-settings: "opsz" 32;
  font-weight: 410;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.partnershipNarrative p {
  margin: 0;
}

.partnershipNarrative p + p {
  margin-top: 18px;
}

.partnershipNarrative strong {
  color: rgba(250, 252, 252, 0.96);
  font-weight: 700;
}

.partnershipColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(171, 218, 227, 0.2);
}

.partnershipColumn {
  min-height: 210px;
  padding: 24px clamp(24px, 3vw, 48px) 0;
  border-left: 1px solid rgba(171, 218, 227, 0.14);
}

.partnershipColumn:first-child {
  padding-left: 0;
  border-left: 0;
}

.columnNumber {
  margin: 0 0 24px;
  color: rgba(136, 211, 226, 0.62);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.partnershipColumn h3,
.partnershipColumn h2 {
  margin: 0 0 16px;
  color: rgba(247, 250, 250, 0.94);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(1.18rem, 1.7vw, 1.65rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.partnershipColumn > p:last-child {
  max-width: 390px;
  margin: 0;
  color: rgba(226, 236, 238, 0.66);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.5;
}

.contactContent {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(calc(100% - clamp(80px, 12vw, 192px)), 1480px);
  grid-template-columns: minmax(300px, 430px) minmax(520px, 720px);
  justify-content: space-between;
  gap: clamp(72px, 9vw, 168px);
  visibility: hidden;
  align-items: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.contactIntro {
  position: relative;
  align-self: center;
}

.contactIntro::before {
  position: absolute;
  top: -38px;
  left: 0;
  padding-left: 40px;
  background: linear-gradient(90deg, #58c5dc, rgba(88, 197, 220, 0.18)) left center / 28px 1px no-repeat;
  color: rgba(102, 204, 224, 0.82);
  content: "CONTACT";
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.contactIntro h2,
.contactIntro h1 {
  margin: 0;
  color: rgba(247, 250, 250, 0.96);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(3.2rem, 5.2vw, 5.6rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.contactSummary {
  max-width: 420px;
  margin: 28px 0 0;
  color: rgba(238, 244, 245, 0.78);
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-variation-settings: "opsz" 32;
  font-weight: 410;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.contactSummary strong {
  color: rgba(250, 252, 252, 0.96);
  font-weight: 700;
}

.contactEmail {
  display: inline-block;
  margin-top: 34px;
  color: #fff;
  font-family: "Geist", Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  font-variation-settings: "opsz" 32;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.contactEmail:hover,
.contactEmail:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.contactEmail:focus-visible {
  outline: 1px solid rgba(247, 250, 250, 0.72);
  outline-offset: 6px;
}

.contactForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 22px;
  padding-top: 3px;
}

.contactTrap {
  position: fixed !important;
  top: -10000px !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contactVerification {
  flex: 0 0 210px;
  width: 210px;
  height: 46px;
  min-width: 0;
  overflow: hidden;
}

.contactVerification .cf-turnstile {
  width: 300px;
  height: 65px;
  transform: scale(0.7);
  transform-origin: top left;
}

.contactStatus {
  flex: 1 1 220px;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: rgba(247, 250, 250, 0.72);
  font-size: 0.82rem;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.contactStatus[data-state="success"] {
  color: #fff;
}

.contactStatus[data-state="error"] { color: #ff8e8e; }

.contactField {
  display: grid;
  gap: 10px;
}

.contactFieldWide {
  grid-column: 1 / -1;
}

.contactField label {
  color: rgba(255, 255, 255, 0.96);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.contactField input,
.contactField textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 2px;
  outline: 0;
  background: rgba(0, 0, 0, 0.78);
  color: #f3f7f7;
  font: 400 1rem/1.4 "D-DIN", Arial, Helvetica, sans-serif;
}

.contactField input {
  height: 44px;
  padding: 0 12px;
}

.contactField textarea {
  min-height: 116px;
  padding: 12px;
  resize: none;
}

.contactField input:focus,
.contactField textarea:focus {
  border-color: rgba(255, 255, 255, 0.62);
  background: #000;
}

.contactSubmitRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}

.contactSubmitRow button {
  height: 46px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #fff;
  background: #fff;
  color: #020609;
  cursor: pointer;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.contactSubmitRow button:hover,
.contactSubmitRow button:focus-visible {
  background: rgba(255, 255, 255, 0.84);
}

.contactSubmitRow button:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.contactSubmitRow button:disabled {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.42);
  cursor: not-allowed;
}

.contactSubmitRow button:disabled:hover {
  background: rgba(255, 255, 255, 0.12);
}

.privacyDisclaimer {
  margin: -4px 0 0;
  color: rgba(226, 236, 238, 0.56);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
  text-align: right;
}

.privacyDisclaimer a {
  color: rgba(255, 255, 255, 0.88);
  text-underline-offset: 3px;
}

.privacyDisclaimer a:hover,
.privacyDisclaimer a:focus-visible {
  color: #fff;
}

.privacyContent {
  position: absolute;
  z-index: 6;
  inset: 0;
  visibility: hidden;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 72% 36% at 88% -4%, rgba(72, 182, 209, 0.11), transparent 72%),
    linear-gradient(180deg, #061016 0, #020609 34rem, #020609 100%);
  opacity: 0;
  transition:
    visibility 0s linear 240ms,
    opacity 240ms ease;
}

.privacyShell {
  width: min(100% - 80px, 860px);
  margin: 0 auto;
  padding: clamp(54px, 8vh, 92px) 0 96px;
}

.privacyBack {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font: 700 0.76rem/1 "D-DIN", Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em;
}

.privacyBack:hover,
.privacyBack:focus-visible {
  color: #fff;
}

.privacyBack:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: 7px;
}

.privacyHeader {
  padding: clamp(58px, 9vh, 96px) 0 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.privacyHeader h2 {
  margin: 0;
  color: #fff;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.privacyMeta {
  margin: 22px 0 0;
  color: rgba(226, 236, 238, 0.58);
  font: 400 0.86rem/1.5 "D-DIN", Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
}

.privacyNotice {
  color: rgba(238, 244, 245, 0.78);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  line-height: 1.68;
}

.privacyNotice > p {
  margin: 34px 0 0;
}

.privacyClause {
  padding: 42px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.privacyClause h3 {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.privacyClause p {
  margin: 0 0 16px;
}

.privacyClause p:last-child {
  margin-bottom: 0;
}

.privacyClause ul {
  margin: 18px 0 0;
  padding-left: 1.3em;
}

.privacyClause li {
  margin-top: 9px;
  padding-left: 0.35em;
}

.initial-section-route .identity,
.initial-section-route .originContent,
.initial-section-route .partnershipContent,
.initial-section-route .contactContent,
.initial-section-route .privacyContent,
.initial-section-route .originNature,
.initial-section-route .partnershipBackdrop,
.initial-section-route .contactBackdrop,
.initial-section-route .primaryNav a::after {
  transition: none !important;
}

.content-active .sceneLayers,
.content-active .identity {
  opacity: 0;
}

.content-active .identity {
  pointer-events: none;
}

.origin-active .originContent {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.origin-active .primaryNav a[href="#origin"]::after,
.origin-active .primaryNav a[data-section="origin"]::after {
  transform: scaleX(1);
}

.partnership-active .partnershipContent {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.partnership-active .primaryNav a[href="#partnership"]::after,
.partnership-active .primaryNav a[data-section="partnership"]::after {
  transform: scaleX(1);
}

.research-active .researchContent {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.contact-active .contactContent {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.privacy-active .privacyContent {
  visibility: visible;
  opacity: 1;
  transition-delay: 80ms;
}

.copyright {
  position: absolute;
  z-index: 3;
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(24px, 3vw, 40px);
  margin: 0;
  color: rgba(238, 241, 241, 0.68);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.65rem, 0.7vw, 0.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

@keyframes orbitalDrift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.025) translate3d(-0.25%, -0.15%, 0);
  }
}

@keyframes farTwinkle {
  0%, 100% {
    opacity: 0.52;
  }

  50% {
    opacity: 0.82;
  }
}

@keyframes nearTwinkle {
  0%, 100% {
    opacity: 0.68;
  }

  50% {
    opacity: 1;
  }
}

@keyframes digitalReveal {
  from {
    opacity: 0;
    transform: translateX(8px);
  }

  to {
    opacity: 0.34;
    transform: translateX(0);
  }
}

@keyframes ctaSignalBreak {
  0%, 100% {
    opacity: 1;
    transform: translate(0);
  }

  18% {
    opacity: 0.62;
    transform: translateX(-1px);
  }

  34% {
    opacity: 0.88;
    transform: translateX(1px);
  }

  52% {
    opacity: 0.48;
    transform: translateX(0);
  }

  72% {
    opacity: 0.9;
    transform: translateX(-0.5px);
  }
}

@keyframes ctaGlitchTop {
  0%, 100% {
    opacity: 0;
    transform: translate(0);
  }

  20% {
    opacity: 0.7;
    transform: translate(-2px, -1px);
  }

  46% {
    opacity: 0.45;
    transform: translate(2px, 0);
  }

  70% {
    opacity: 0.62;
    transform: translate(-1px, 1px);
  }
}

@keyframes ctaGlitchBottom {
  0%, 100% {
    opacity: 0;
    transform: translate(0);
  }

  16% {
    opacity: 0.55;
    transform: translate(2px, 1px);
  }

  42% {
    opacity: 0.68;
    transform: translate(-2px, 0);
  }

  76% {
    opacity: 0.42;
    transform: translate(1px, -1px);
  }
}

.errorBody {
  min-height: 100svh;
  overflow: hidden;
  background: #020609;
}

.errorPage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(19, 67, 79, 0.16), transparent 34%),
    #020609;
}

.errorContent {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(100% - 48px, 760px);
  text-align: center;
  transform: translate(-50%, -50%);
}

.errorCode {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(8rem, 24vw, 18rem);
  font-weight: 700;
  line-height: 0.75;
  letter-spacing: -0.07em;
  text-shadow:
    0 0 28px rgba(255, 255, 255, 0.08),
    0 0 72px rgba(81, 206, 232, 0.08);
  animation: errorSignal 4.8s steps(1, end) infinite;
}

.errorCode::before,
.errorCode::after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  content: attr(data-text);
  pointer-events: none;
}

.errorCode::before {
  color: rgba(255, 48, 55, 0.8);
  clip-path: inset(18% 0 60% 0);
  transform: translate(-3px, 0);
  animation: errorGlitchRed 2.2s steps(1, end) infinite;
}

.errorCode::after {
  color: rgba(122, 232, 255, 0.82);
  clip-path: inset(62% 0 15% 0);
  transform: translate(3px, 0);
  animation: errorGlitchCyan 1.7s steps(1, end) infinite;
}

.errorMessage {
  margin: clamp(34px, 6vh, 58px) 0 0;
  color: rgba(247, 250, 250, 0.9);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: 0.045em;
}

.errorFlag {
  display: block;
  width: fit-content;
  margin: 13px auto 0;
  padding: 5px 8px;
  border: 1px solid rgba(122, 232, 255, 0.12);
  border-radius: 2px;
  background: rgba(122, 232, 255, 0.045);
  color: rgba(164, 229, 242, 0.58);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.61rem, 0.9vw, 0.7rem);
  line-height: 1.4;
  letter-spacing: 0.035em;
  overflow-wrap: anywhere;
}

.errorReturn {
  display: flex;
  width: fit-content;
  gap: 12px;
  align-items: center;
  margin: 30px auto 0;
  color: rgba(255, 255, 255, 0.64);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: color 160ms ease;
}

.errorReturn:hover,
.errorReturn:focus-visible {
  color: #fff;
}

.errorReturn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: 7px;
}

.errorGrid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0.12;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(120, 221, 240, 0.1) 5px),
    linear-gradient(90deg, transparent, rgba(116, 218, 238, 0.07), transparent);
  background-size: auto, 240% 100%;
  pointer-events: none;
  animation: errorScan 7s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

@keyframes errorSignal {
  0%, 7%, 9%, 42%, 44%, 72%, 74%, 100% { transform: translate(0); }
  8% { transform: translate(-2px, 1px) skewX(-1deg); }
  43% { transform: translate(2px, -1px); }
  73% { transform: translate(-1px, 0) skewX(1deg); }
}

@keyframes errorGlitchRed {
  0%, 12%, 15%, 48%, 53%, 78%, 82%, 100% { clip-path: inset(18% 0 60% 0); transform: translate(-3px); }
  13% { clip-path: inset(72% 0 8% 0); transform: translate(5px, -2px); }
  14% { clip-path: inset(38% 0 42% 0); transform: translate(-7px, 1px); }
  49% { clip-path: inset(8% 0 77% 0); transform: translate(6px); }
  50%, 52% { clip-path: inset(55% 0 24% 0); transform: translate(-4px, 2px); }
  79% { clip-path: inset(28% 0 54% 0); transform: translate(8px, -1px); }
  80%, 81% { clip-path: inset(82% 0 4% 0); transform: translate(-5px); }
}

@keyframes errorGlitchCyan {
  0%, 21%, 25%, 56%, 59%, 88%, 91%, 100% { clip-path: inset(62% 0 15% 0); transform: translate(3px); }
  22% { clip-path: inset(12% 0 69% 0); transform: translate(-6px, 1px); }
  23%, 24% { clip-path: inset(44% 0 36% 0); transform: translate(7px, -1px); }
  57%, 58% { clip-path: inset(76% 0 7% 0); transform: translate(-5px, 2px); }
  89% { clip-path: inset(25% 0 58% 0); transform: translate(8px); }
  90% { clip-path: inset(6% 0 81% 0); transform: translate(-4px, -2px); }
}

@keyframes errorScan {
  from { background-position: 0 0, 100% 0; }
  to { background-position: 0 30px, -140% 0; }
}

@media screen and (min-width: 681px) and (max-width: 980px) {
  .contactContent {
    top: 126px;
    right: 40px;
    bottom: 54px;
    left: 40px;
    width: auto;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
  }

  .contactIntro {
    max-width: 620px;
  }

  .contactChatForm {
    width: 100%;
    max-width: 720px;
    margin-top: 48px;
    justify-self: auto;
  }
}

@media (max-width: 680px) {
  .homeParticleCanvas.particleFrameReady {
    opacity: 0.58;
  }

  .earth-ready .defenseEnvelopeCanvas {
    opacity: 0.76;
  }

  .earthBackground {
    object-position: 58% center;
  }

  .nightTransition {
    background:
      radial-gradient(ellipse 105% 68% at 100% 100%, rgba(0, 2, 4, 0.92) 0%, rgba(0, 3, 5, 0.68) 30%, rgba(1, 4, 7, 0.24) 58%, rgba(1, 5, 8, 0) 82%),
      linear-gradient(180deg, rgba(1, 5, 9, 0.03) 0%, rgba(1, 5, 9, 0.08) 46%, rgba(0, 3, 5, 0.76) 100%),
      linear-gradient(100deg, rgba(1, 5, 8, 0.9) 0%, rgba(1, 5, 8, 0.6) 38%, rgba(1, 5, 8, 0.08) 78%, rgba(1, 5, 8, 0) 100%);
  }

  .identity {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 24px;
    width: calc(100% - 48px);
    transform: translateY(-50%);
  }

  .originContent {
    left: 32px;
    width: min(calc(100% - 64px), 440px);
  }

  .researchContent {
    left: 24px;
    width: calc(100% - 48px);
  }

  .partnershipContent {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 32px;
    width: min(calc(100% - 64px), 460px);
    max-height: calc(100svh - 170px);
    overflow-y: auto;
    transform: translateY(-50%);
  }

  .contactContent {
    top: 132px;
    right: 24px;
    bottom: 54px;
    left: 24px;
    width: auto;
    display: block;
    overflow-y: auto;
    transform: none;
  }

  .contactIntro h2,
  .contactIntro h1 {
    font-size: clamp(2.4rem, 11vw, 3.3rem);
  }

  .contactIntro::before {
    display: none;
  }

  .contactSummary {
    margin-top: 18px;
    font-size: 0.98rem;
  }

  .contactEmail {
    margin-top: 20px;
  }

  .contactForm {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .contactFieldWide {
    grid-column: auto;
  }

  .contactSubmitRow {
    display: grid;
    grid-template-columns: 195px max-content;
    align-items: flex-start;
    justify-content: start;
    column-gap: 10px;
    row-gap: 8px;
  }

  .contactVerification {
    width: 195px;
    height: 43px;
    flex-basis: 195px;
  }

  .contactVerification .cf-turnstile {
    transform: scale(0.65);
  }

  .contactSubmitRow button {
    height: 43px;
    min-height: 43px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .contactStatus {
    grid-column: 1 / -1;
    flex: none;
    width: 100%;
    height: 2.8em;
  }

  .privacyDisclaimer {
    text-align: left;
  }

  .privacyShell {
    width: calc(100% - 48px);
    padding: 34px 0 72px;
  }

  .privacyHeader {
    padding: 54px 0 32px;
  }

  .privacyClause {
    padding: 34px 0;
  }

  .partnershipIntro {
    margin-bottom: 34px;
  }

  .partnershipIntro h2,
  .partnershipIntro h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .partnershipSummary {
    margin-top: 18px;
    font-size: 0.98rem;
  }

  .partnershipNarrative {
    margin-top: 22px;
    font-size: 0.98rem;
  }

  .partnershipNarrative p + p {
    margin-top: 16px;
  }

  .partnershipColumns {
    grid-template-columns: 1fr;
  }

  .partnershipColumn,
  .partnershipColumn:first-child {
    min-height: 0;
    padding: 22px 0 26px;
    border-bottom: 1px solid rgba(171, 218, 227, 0.14);
    border-left: 0;
  }

  .columnNumber {
    margin-bottom: 16px;
  }

  .originNature img {
    object-position: 64% center;
  }

  .originNature::after {
    background: linear-gradient(90deg, rgba(1, 6, 9, 0.72), rgba(1, 6, 9, 0.24));
  }

  .partnershipBackdrop {
    height: 58%;
  }

  .partnershipBackdrop img {
    object-position: 92% center;
  }

  .partnershipBackdrop::after {
    background:
      linear-gradient(90deg, rgba(0, 4, 7, 0.62), rgba(0, 4, 7, 0.14)),
      linear-gradient(180deg, transparent 20%, #020609 100%);
  }

  .researchBackdrop img {
    object-position: 62% center;
  }

  .researchBackdrop::after {
    background:
      linear-gradient(90deg, rgba(0, 2, 4, 0.56) 0%, rgba(0, 2, 4, 0.18) 58%, transparent 86%),
      linear-gradient(180deg, rgba(0, 2, 4, 0.12) 0%, transparent 42%, rgba(0, 2, 4, 0.78) 100%);
  }

  .contactBackdrop::after {
    display: none;
  }

  .originContent h2,
  .originContent h1,
  .researchContent h2 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .originBody {
    margin-top: 20px;
    font-size: 0.98rem;
    line-height: 1.48;
  }

  .identity h1 {
    font-size: clamp(2.35rem, 10.6vw, 3rem);
    letter-spacing: -0.025em;
  }

  html[lang="id"] .identity h1 {
    font-size: clamp(2.15rem, 10.5vw, 2.85rem);
  }

  html .identity.identityAbout,
  html[lang="id"] .identity.identityAbout {
    width: calc(100% - 48px);
  }

  html .identity.identityAbout h1,
  html[lang="id"] .identity.identityAbout h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.2rem);
    line-height: 0.98;
  }

  html[lang="id"] .identity.identityAbout h1 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
  }

  .identityAboutBody {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    margin-top: 20px !important;
    font-size: 0.98rem !important;
    line-height: 1.48 !important;
  }

  html[lang="id"] .identityAboutBody {
    width: calc(100vw - 48px);
  }

  .identityAboutBreak {
    display: none;
  }

  .identity h1 .identityMobileBreak {
    display: block;
  }

  .identity p {
    margin-top: 15px;
    font-size: clamp(0.92rem, 4vw, 1.08rem);
    letter-spacing: 0.025em;
  }

  .siteHeader {
    top: 22px;
    right: 24px;
    left: 24px;
    justify-content: space-between;
    gap: 10px;
  }

  .brandMark {
    display: block;
    width: 38px;
  }

  .brandText {
    display: flex;
    min-width: 62px;
  }

  .brandHome {
    gap: 2px;
  }

  .primaryNav {
    position: static;
    left: auto;
    gap: clamp(7px, 2.4vw, 14px);
    transform: none;
  }

  .primaryNav a {
    font-size: clamp(0.56rem, 2.4vw, 0.66rem);
    letter-spacing: 0.035em;
  }

  .menuToggle {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }

  .menuToggle span {
    position: absolute;
    right: 0;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition:
      top 180ms ease,
      transform 180ms ease;
  }

  .menuToggle span:first-child {
    top: 10px;
  }

  .menuToggle span:last-child {
    top: 19px;
  }

  .menu-open .menuToggle span:first-child {
    top: 15px;
    transform: rotate(45deg);
  }

  .menu-open .menuToggle span:last-child {
    top: 15px;
    transform: rotate(-45deg);
  }

  .partnershipCta {
    width: 100%;
    min-height: 36px;
    padding: 0 16px;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
  }

  .topActions {
    position: fixed;
    top: 68px;
    right: 24px;
    display: none;
    min-width: 174px;
    padding: 14px;
    border: 1px solid rgba(247, 250, 250, 0.2);
    border-radius: 2px;
    background: rgba(2, 6, 9, 0.94);
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
  }

  .previewBanner {
    height: 40px;
    padding: 8px 12px;
  }

  .previewBanner p {
    font-size: 0;
    white-space: nowrap;
  }

  .previewBanner p::after {
    content: "Preview | Website and domain subject to change.";
    font-size: 0.75rem;
  }

  .previewBanner ~ .siteHeader {
    top: 52px;
  }

  .previewBanner ~ .topActions {
    top: 98px;
  }

  .menu-open .topActions {
    display: flex;
  }

  .languageToggle {
    align-self: flex-start;
    width: 64px;
    height: 36px;
    font-size: 0.62rem;
  }

  .languageToggle::before {
    width: 30px;
    height: 30px;
  }

  .languageToggle[aria-checked="true"]::before {
    transform: translateX(28px);
  }

  .partnershipCtaLabel {
    display: block;
  }

  .partnershipCta::before,
  .partnershipCta::after {
    display: none;
  }

  .partnershipCtaIcon {
    display: none;
  }

  .copyright {
    right: 24px;
    bottom: 20px;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .errorCode {
    font-size: clamp(7rem, 42vw, 11rem);
  }

  .errorMessage {
    margin-top: 34px;
  }
}

@media (max-width: 340px) {
  .contactSubmitRow {
    grid-template-columns: 1fr;
  }

  .contactStatus {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .earthBackground {
    animation: none;
  }

  .earthColorAccent::before,
  .earthColorAccent::after {
    animation: none;
  }

  .stars {
    animation: none;
  }

  .pixelGrid {
    opacity: 0.34;
    animation: none;
  }

  .primaryNav a::after {
    transition: none;
  }

  .partnershipCta:hover .partnershipCtaLabel,
  .partnershipCta:hover::before,
  .partnershipCta:hover::after {
    animation: none;
  }

  .partnershipCta:hover::before,
  .partnershipCta:hover::after {
    opacity: 0;
  }

  .sceneLayers,
  .identity,
  .originContent,
  .researchContent,
  .partnershipContent,
  .contactContent,
  .originNature,
  .partnershipBackdrop,
  .researchBackdrop,
  .contactBackdrop {
    transition-duration: 0.01s;
  }

  .privacyContent {
    transition-duration: 0.01s;
  }

  .errorCode,
  .errorCode::before,
  .errorCode::after,
  .errorGrid {
    animation: none;
  }
}

/* Optimistic dark palette experiment. Keep this block isolated for easy comparison. */
@media screen {
  .originContent h2,
  .contactIntro h1,
  .contactIntro h2 {
    color: #fbfdfd;
    text-shadow: 0 12px 42px rgba(0, 0, 0, 0.24);
  }

  .originBody {
    color: rgba(239, 246, 247, 0.86);
  }

  .sectionLabel {
    color: #f16467;
  }

  .originContent .sectionLabel,
  .partnershipContent .sectionLabel {
    color: rgba(116, 207, 224, 0.94);
  }

  .originNature img {
    filter: saturate(0.96) contrast(1.02) brightness(0.98);
  }

  .originNature::after {
    background:
      radial-gradient(ellipse 40% 30% at 79% 10%, rgba(0, 3, 5, 0.18) 0%, transparent 76%),
      radial-gradient(ellipse 64% 46% at 100% 100%, rgba(0, 3, 5, 0.38) 0%, transparent 72%),
      radial-gradient(ellipse 68% 42% at 100% 0%, rgba(0, 3, 5, 0.27) 0%, transparent 72%),
      linear-gradient(90deg, rgba(2, 10, 14, 0.46) 0%, rgba(2, 10, 14, 0.12) 44%, transparent 72%),
      linear-gradient(180deg, rgba(2, 9, 13, 0.15) 0%, transparent 34%, transparent 66%, rgba(2, 9, 13, 0.38) 100%);
  }

  .partnershipBackdrop::after {
    background:
      radial-gradient(ellipse 84% 72% at 82% 16%, rgba(67, 178, 207, 0.12), transparent 72%),
      linear-gradient(90deg, rgba(0, 4, 7, 0.6) 0%, rgba(0, 4, 7, 0.22) 48%, transparent 76%),
      linear-gradient(180deg, rgba(42, 142, 169, 0.08) 0%, rgba(24, 101, 126, 0.07) 44%, #020609 100%);
  }

  .languageToggle {
    background: rgba(247, 250, 250, 0.22);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  }

  .partnershipCta {
    border-radius: 999px;
  }

  .contactField input,
  .contactField textarea {
    border-color: rgba(157, 218, 230, 0.28);
    background: rgba(5, 14, 19, 0.86);
  }

  .contactField input:focus,
  .contactField textarea:focus {
    border-color: rgba(119, 216, 235, 0.68);
    background: #071218;
    box-shadow: 0 0 0 3px rgba(85, 195, 218, 0.08);
  }

  .privacyContent {
    background:
      radial-gradient(ellipse 58% 44% at 88% 0%, rgba(75, 188, 214, 0.11), transparent 72%),
      #071015;
  }

  .copyright {
    color: rgba(238, 244, 245, 0.76);
  }

  .errorBody,
  .errorPage {
    background-color: #030a0e;
  }

  .errorPage {
    background:
      radial-gradient(circle at 50% 48%, rgba(54, 159, 188, 0.2), transparent 38%),
      radial-gradient(ellipse 48% 38% at 80% 16%, rgba(223, 73, 78, 0.055), transparent 74%),
      #030a0e;
  }
}

@media screen and (min-width: 1440px) {
  .originNature::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(ellipse 72% 62% at 86% 72%, rgba(0, 4, 7, 0.2) 0%, rgba(0, 4, 7, 0.1) 46%, transparent 78%),
      linear-gradient(180deg, transparent 48%, rgba(0, 4, 7, 0.1) 100%);
    content: "";
    pointer-events: none;
  }

  .originNature::after {
    z-index: 2;
  }
}

@media screen and (max-width: 680px) {
  .originContent h2,
  .originContent h1 {
    font-size: clamp(2rem, 8.7vw, 2.45rem);
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.72);
  }

  .originBody {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
  }

  .originNature::after {
    background:
      radial-gradient(ellipse 82% 48% at 22% 62%, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.12) 48%, transparent 78%),
      radial-gradient(ellipse 48% 30% at 88% 10%, rgba(0, 3, 5, 0.18) 0%, transparent 76%),
      radial-gradient(ellipse 72% 46% at 100% 100%, rgba(0, 3, 5, 0.36) 0%, transparent 74%),
      radial-gradient(ellipse 70% 42% at 100% 0%, rgba(0, 3, 5, 0.26) 0%, transparent 74%),
      linear-gradient(90deg, rgba(1, 7, 10, 0.8) 0%, rgba(1, 7, 10, 0.58) 52%, rgba(1, 7, 10, 0.16) 88%),
      linear-gradient(180deg, rgba(1, 7, 10, 0.2) 0%, transparent 42%, rgba(1, 7, 10, 0.5) 100%);
  }

  .partnershipBackdrop::after {
    background:
      radial-gradient(ellipse 92% 68% at 76% 14%, rgba(67, 178, 207, 0.1), transparent 74%),
      linear-gradient(90deg, rgba(0, 4, 7, 0.62), rgba(0, 4, 7, 0.14)),
      linear-gradient(180deg, rgba(37, 129, 155, 0.07) 0%, transparent 42%, #020609 100%);
  }

}

/* Guided contact conversation */
.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.contactChatForm {
  position: relative;
  display: flex;
  min-width: 0;
  width: 100%;
  max-width: 700px;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  justify-self: end;
  border: 1px solid rgba(169, 220, 231, 0.17);
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(9, 25, 32, 0.94), rgba(2, 8, 11, 0.985) 64%),
    #03090c;
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.contactChatForm::before {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 24px;
  width: 104px;
  height: 1px;
  background: linear-gradient(90deg, rgba(91, 205, 226, 0.94), transparent);
  content: "";
  pointer-events: none;
}

.contactChatHeader {
  display: flex;
  min-height: 48px;
  padding: 0 22px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(169, 220, 231, 0.1);
  color: rgba(239, 247, 248, 0.9);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.contactChatHeader span + span {
  color: rgba(178, 208, 214, 0.5);
  font-size: 0.59rem;
  letter-spacing: 0.1em;
  text-align: right;
}

.contactConversation {
  height: clamp(250px, 34vh, 350px);
  min-height: 250px;
  padding: 26px 24px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(136, 203, 217, 0.24) transparent;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 100%);
  background: linear-gradient(180deg, rgba(4, 15, 20, 0.18), transparent 42%);
}

.contactMessage {
  display: flex;
  margin: 0 0 22px;
  align-items: flex-start;
  gap: 12px;
  animation: contactMessageIn 180ms ease-out both;
}

.contactMessage p {
  max-width: min(86%, 540px);
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(240, 247, 248, 0.9);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.5;
  white-space: pre-wrap;
}

.contactMessageMark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
}

.contactMessageMark img {
  display: block;
  width: 27px;
  height: 15px;
  object-fit: contain;
}

.contactMessageUser {
  justify-content: flex-end;
}

.contactMessageUser p {
  padding: 10px 14px;
  border: 1px solid rgba(139, 218, 234, 0.18);
  border-radius: 16px 16px 3px 16px;
  background: rgba(74, 157, 177, 0.16);
  color: rgba(250, 253, 253, 0.94);
}

.contactMessageUser[data-state="error"] p {
  border-color: rgba(240, 110, 112, 0.24);
  background: rgba(170, 53, 57, 0.13);
}

.contactMessageAssistant[data-state="error"] p {
  color: rgba(255, 178, 178, 0.9);
}

.contactComposer {
  position: relative;
  display: flex;
  min-height: 58px;
  margin: 0 18px;
  align-items: flex-end;
  border: 1px solid rgba(157, 218, 230, 0.25);
  border-radius: 17px;
  background: rgba(2, 9, 13, 0.76);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.contactComposer:focus-within {
  border-color: rgba(138, 221, 237, 0.58);
  background: rgba(3, 13, 18, 0.92);
  box-shadow: 0 0 0 3px rgba(72, 188, 211, 0.07);
}

.contactChatInput {
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 132px;
  padding: 17px 60px 15px 17px;
  overflow-y: auto;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #f8fbfb;
  caret-color: #7ed8e9;
  font: 400 1rem/1.45 "D-DIN", Arial, Helvetica, sans-serif;
}

.contactChatInput::placeholder {
  color: rgba(208, 226, 230, 0.42);
}

.contactChatContinue {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: #f5f9f9;
  color: #071015;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.contactChatContinue:hover {
  background: #dff6fa;
  transform: translateY(-1px);
}

.contactChatContinue:focus-visible,
.contactChatSkip:focus-visible,
.contactFinalActions button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.contactChatMeta {
  display: flex;
  min-height: 42px;
  padding: 8px 22px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.contactChatHint {
  margin: 0;
  color: rgba(190, 213, 218, 0.48);
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.contactChatHint[data-state="error"] {
  color: rgba(255, 150, 150, 0.9);
}

.contactChatSkip {
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(239, 247, 248, 0.78);
  cursor: pointer;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.contactSubmitPanel {
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(169, 220, 231, 0.12);
}

.contactSubmitPanel[hidden],
.contactComposer[hidden],
.contactChatMeta[hidden] {
  display: none;
}

.contactChatForm .contactStatus {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 0 10px;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
}

.contactChatForm .contactSubmitRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.contactFinalActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.contactChatForm .contactFinalActions button {
  height: 46px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: #fff;
  color: #061015;
  cursor: pointer;
  font-family: "D-DIN", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.contactChatForm .contactFinalActions .contactRestart {
  border-color: rgba(182, 218, 225, 0.26);
  background: transparent;
  color: rgba(238, 247, 248, 0.78);
}

.contactChatForm .contactFinalActions button:hover {
  background: #e6f8fb;
}

.contactChatForm .contactFinalActions .contactRestart:hover {
  border-color: rgba(182, 218, 225, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.contactChatForm .contactFinalActions button:disabled {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

.contactChatForm .privacyDisclaimer {
  margin: 0;
  padding: 12px 20px 15px;
  border-top: 1px solid rgba(169, 220, 231, 0.08);
  text-align: left;
}

@keyframes contactMessageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 680px) {
  .contactChatForm {
    width: 100%;
    margin-top: 28px;
    border-radius: 16px;
    background: #030b0f;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .contactChatHeader {
    min-height: 44px;
    padding: 0 16px;
  }

  .contactChatHeader span + span {
    max-width: 150px;
    font-size: 0.54rem;
  }

  .contactConversation {
    height: 300px;
    min-height: 260px;
    padding: 22px 16px 14px;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .contactMessage p {
    max-width: 88%;
    font-size: 0.98rem;
  }

  .contactComposer {
    margin: 0 12px;
  }

  .contactChatMeta {
    padding-right: 16px;
    padding-left: 16px;
  }

  .contactChatHint {
    max-width: 78%;
  }

  .contactSubmitPanel {
    padding: 14px 12px 15px;
  }

  .contactChatForm .contactSubmitRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .contactChatForm .contactVerification {
    width: 165px;
    height: 36px;
    flex: 0 0 165px;
  }

  .contactChatForm .contactVerification .cf-turnstile {
    transform: scale(0.55);
  }

  .contactFinalActions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .contactChatForm .contactFinalActions button {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    font-size: 0.62rem;
  }

  .contactChatForm .privacyDisclaimer {
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media screen and (max-width: 370px) {
  .contactChatForm .contactSubmitRow {
    align-items: flex-start;
  }

  .contactFinalActions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contactMessage {
    animation: none;
  }

  .contactConversation {
    scroll-behavior: auto;
  }
}

/* Editorial image treatment for Origin and Partnership. */
@media screen and (min-width: 821px) {
  .originNature,
  .partnershipBackdrop {
    top: clamp(118px, 14vh, 146px);
    right: clamp(40px, 5.5vw, 88px);
    bottom: clamp(54px, 7vh, 76px);
    left: auto;
    width: min(51vw, 790px);
    height: auto;
    border: 1px solid rgba(158, 220, 233, 0.14);
    border-radius: 24px;
    background: #07151c;
    box-shadow:
      0 38px 110px rgba(0, 0, 0, 0.42),
      0 0 100px rgba(48, 170, 202, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .originNature::before,
  .partnershipBackdrop::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.055), transparent 22%),
      linear-gradient(180deg, transparent 72%, rgba(1, 6, 9, 0.2));
    content: "";
    pointer-events: none;
  }

  .originNature::after,
  .partnershipBackdrop::after {
    z-index: 3;
    border-radius: inherit;
  }

  .originNature::after {
    background:
      linear-gradient(90deg, rgba(2, 10, 14, 0.18), transparent 42%),
      linear-gradient(180deg, rgba(2, 10, 14, 0.05), transparent 56%, rgba(2, 10, 14, 0.2));
  }

  .partnershipBackdrop::after {
    background:
      radial-gradient(ellipse 70% 52% at 68% 12%, rgba(83, 198, 222, 0.09), transparent 72%),
      linear-gradient(180deg, rgba(1, 7, 10, 0.04), transparent 52%, rgba(1, 7, 10, 0.3));
  }

  .originNature img {
    object-position: 58% center;
    filter: saturate(0.94) contrast(1.025) brightness(0.96);
  }

  .partnershipBackdrop img {
    object-position: 92% center;
    filter: saturate(0.9) contrast(1.04) brightness(0.88);
  }

  .originContent,
  .partnershipContent {
    right: auto;
    left: clamp(40px, 6vw, 96px);
    width: min(34.5vw, 500px);
  }

  .originContent {
    max-width: 500px;
  }

  .partnershipContent {
    max-width: 500px;
  }

  .originContent h2,
  .originContent h1,
  .partnershipIntro h2,
  .partnershipIntro h1 {
    font-size: clamp(2.65rem, 3.7vw, 4.05rem);
  }

  .originBody,
  .partnershipNarrative {
    max-width: 480px;
  }

  .originContent .sectionLabel,
  .partnershipContent .sectionLabel {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .originContent .sectionLabel::before,
  .partnershipContent .sectionLabel::before {
    width: 28px;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, #62c4d9, rgba(98, 196, 217, 0.2));
    content: "";
  }
}

@media screen and (max-width: 820px) {
  .originNature,
  .partnershipBackdrop {
    top: 120px;
    right: 14px;
    bottom: 58px;
    left: 14px;
    width: auto;
    height: auto;
    border: 1px solid rgba(158, 220, 233, 0.13);
    border-radius: 20px;
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.38),
      0 0 70px rgba(48, 170, 202, 0.06);
  }

  .originNature::before,
  .partnershipBackdrop::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.045), transparent 24%);
    content: "";
    pointer-events: none;
  }

  .originNature::after,
  .partnershipBackdrop::after {
    z-index: 3;
    border-radius: inherit;
  }

  .originNature::after {
    background:
      radial-gradient(ellipse 105% 62% at 8% 56%, rgba(1, 7, 10, 0.78), rgba(1, 7, 10, 0.52) 58%, transparent 88%),
      linear-gradient(180deg, rgba(1, 7, 10, 0.12), transparent 42%, rgba(1, 7, 10, 0.5));
  }

  .partnershipBackdrop::after {
    background:
      radial-gradient(ellipse 112% 68% at 6% 56%, rgba(1, 7, 10, 0.8), rgba(1, 7, 10, 0.4) 60%, transparent 90%),
      linear-gradient(180deg, rgba(1, 7, 10, 0.08), transparent 38%, rgba(1, 7, 10, 0.62));
  }

  .originNature img {
    object-position: 62% center;
  }

  .partnershipBackdrop img {
    object-position: 92% center;
  }

  .originContent,
  .partnershipContent {
    left: 32px;
    width: min(calc(100% - 64px), 500px);
  }

  .originContent {
    top: 47%;
  }

  .originContent .sectionLabel,
  .partnershipContent .sectionLabel {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .originContent .sectionLabel::before,
  .partnershipContent .sectionLabel::before {
    width: 22px;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, #62c4d9, rgba(98, 196, 217, 0.2));
    content: "";
  }
}

.originNature img.originBundaranArt {
  object-fit: cover;
  object-position: 76% center;
  filter: saturate(0.86) contrast(1.015) brightness(0.9);
}

.originNature img.originSkyArt {
  object-fit: cover;
  object-position: 76% center;
  filter: saturate(0.98) contrast(1.01) brightness(1.03);
}

@media screen and (min-width: 821px) {
  .originNature.originCityscape::before {
    background:
      radial-gradient(ellipse 72% 58% at 78% 68%, rgba(74, 193, 219, 0.07), transparent 74%),
      linear-gradient(180deg, rgba(2, 10, 14, 0.2) 0%, transparent 30%, rgba(2, 10, 14, 0.08) 72%, rgba(2, 10, 14, 0.3) 100%);
  }

  .originNature.originCityscape::after {
    background:
      linear-gradient(90deg, rgba(2, 10, 14, 0.42) 0%, rgba(2, 10, 14, 0.15) 30%, transparent 62%),
      linear-gradient(180deg, rgba(2, 10, 14, 0.2) 0%, transparent 38%, transparent 66%, rgba(2, 10, 14, 0.4) 100%);
  }

  .originNature.originSkyScene::before {
    background: radial-gradient(ellipse 66% 58% at 78% 68%, rgba(71, 190, 217, 0.06), transparent 75%);
  }

  .originNature.originSkyScene::after {
    background: linear-gradient(90deg, rgba(2, 10, 14, 0.26) 0%, rgba(2, 10, 14, 0.08) 28%, transparent 58%);
  }

}

@media screen and (max-width: 820px) {
  .originNature.originCityscape::before {
    background:
      radial-gradient(ellipse 78% 54% at 76% 70%, rgba(71, 184, 210, 0.055), transparent 76%),
      linear-gradient(180deg, rgba(2, 9, 13, 0.24) 0%, transparent 28%, rgba(2, 9, 13, 0.2) 70%, rgba(2, 9, 13, 0.48) 100%);
  }

  .originNature.originCityscape::after {
    background:
      radial-gradient(ellipse 110% 72% at 5% 54%, rgba(1, 7, 10, 0.82), rgba(1, 7, 10, 0.53) 54%, transparent 86%),
      linear-gradient(180deg, rgba(1, 7, 10, 0.24) 0%, transparent 36%, rgba(1, 7, 10, 0.52) 100%);
  }

  .originNature.originSkyScene::before {
    background: radial-gradient(ellipse 74% 56% at 78% 70%, rgba(71, 184, 210, 0.05), transparent 76%);
  }

  .originNature.originSkyScene::after {
    background: radial-gradient(ellipse 110% 72% at 5% 54%, rgba(1, 7, 10, 0.74), rgba(1, 7, 10, 0.42) 54%, transparent 86%);
  }

}