@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap");

:root {
  --bg: #000000;
  --panel: rgba(5, 6, 6, 0.7);
  --panel-strong: rgba(4, 8, 8, 0.9);
  --text: #f3fbf8;
  --muted: #9ba9a6;
  --dim: #62706f;
  --line: rgba(179, 255, 40, 0.16);
  --line-strong: rgba(243, 251, 248, 0.34);
  --cyan: #b3ff28;
  --green: #b3ff28;
  --red: #b3ff28;
  --mono: "Share Tech Mono", "Microsoft YaHei UI", "Noto Sans SC", Consolas, monospace;
  --sans: "Inter", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif;
  --page-pad: clamp(18px, 3.2vw, 46px);
  --section-y: clamp(78px, 8vw, 110px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background: #000;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  cursor: none;
}

::selection {
  background: rgba(179, 255, 40, 0.92);
  color: #000;
}

body.is-field-hot {
  --field-live: 1;
}

body.is-selecting {
  cursor: text;
}

body.is-selecting .fx-char {
  transform: none !important;
}

.fx-char {
  display: inline-block;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  transform-origin: center;
  will-change: transform;
}

.fx-space {
  width: 0.32em;
  white-space: pre;
}

a,
button {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
  background: none;
  cursor: none;
}

#shader-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.095;
  background-image:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, transparent 0 33%, rgba(255, 255, 255, 0.1) 34%, transparent 35%),
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px);
  background-size: auto, 17px 23px, 6px 6px;
  mix-blend-mode: screen;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(179, 255, 40, 0.62);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(179, 255, 40, 0.76);
  border-radius: 50%;
  transition: width 180ms ease, height 180ms ease, border-color 180ms ease;
  box-shadow:
    0 0 14px rgba(179, 255, 40, 0.38),
    0 0 38px rgba(179, 255, 40, 0.16),
    0 0 68px rgba(243, 251, 248, 0.055);
  mix-blend-mode: screen;
}

body.is-hovering .cursor-ring {
  width: 62px;
  height: 62px;
  border-color: rgba(243, 251, 248, 0.78);
}

body.is-selecting .cursor-dot,
body.is-selecting .cursor-ring {
  opacity: 0.18;
}

.scroll-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.06);
}

main {
  position: relative;
  z-index: 2;
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--text));
  box-shadow: 0 0 24px rgba(179, 255, 40, 0.68);
}

.floating-back {
  --proximity: 0;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: fixed;
  left: 34px;
  bottom: 30px;
  z-index: 65;
  min-width: 178px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px 11px 12px;
  border: 1px solid rgba(179, 255, 40, 0.34);
  border-radius: 999px;
  color: var(--text);
  background:
    radial-gradient(circle at 22% 50%, rgba(179, 255, 40, 0.2), transparent 3.4rem),
    rgba(0, 0, 0, 0.72);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  box-shadow:
    0 0 calc(18px + var(--proximity) * 28px) rgba(179, 255, 40, 0.2),
    0 20px 56px rgba(0, 0, 0, 0.32);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.03));
  will-change: transform;
  backdrop-filter: blur(12px);
}

.floating-back-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(243, 251, 248, 0.26);
  border-radius: 50%;
  color: var(--green);
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: inset 0 0 18px rgba(179, 255, 40, 0.12);
}

.floating-back:hover,
.floating-back:focus-visible {
  border-color: rgba(179, 255, 40, 0.72);
  color: var(--green);
}

.site-header {
  position: fixed;
  top: 26px;
  left: 34px;
  right: 34px;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
}

.brand {
  --proximity: 0;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  display: grid;
  width: fit-content;
  gap: 4px;
  font-weight: 800;
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.025));
  will-change: transform;
}

.brand small,
.meta-line,
.section-kicker,
.work-row span,
.work-row em,
.work-row small,
.filter,
.stage-readout,
.system-grid span,
.contact-panel span,
.socials {
  font-family: var(--mono);
}

.brand small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.nav {
  display: flex;
  gap: 34px;
  color: rgba(243, 251, 248, 0.78);
  font-family: var(--mono);
  font-size: 0.86rem;
}

.nav a,
.variant-link {
  --proximity: 0;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  padding: 8px 0;
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.04));
  will-change: transform;
}

.nav a::after,
.variant-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--green);
  transition: transform 180ms ease;
}

.nav a:hover::after,
.nav a:focus-visible::after,
.variant-link:hover::after,
.variant-link:focus-visible::after {
  transform: scaleX(1);
}

.header-links {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.variant-link {
  justify-self: end;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.menu-toggle {
  display: none;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(8, 14, 14, 0.86);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 6px auto;
  background: var(--text);
}

.hero,
.section {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(min(100%, 430px), 0.86fr);
  align-items: center;
  gap: clamp(30px, 3vw, 44px);
  padding-top: 112px;
}

.meta-line {
  margin: 0 0 24px;
  color: var(--cyan);
  font-size: 0.86rem;
}

.hero h1 {
  margin: 0;
  font-size: clamp(5.8rem, 15vw, 14rem);
  line-height: 0.78;
  letter-spacing: 0;
}

.hero h1 > span {
  display: block;
}

.hero-role {
  margin: 34px 0 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2vw, 1.85rem);
}

.hero-text {
  max-width: 650px;
  margin: 26px 0 0;
  color: rgba(243, 251, 248, 0.78);
  font-size: 1.08rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

.button {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-width: 188px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--bg);
  background: var(--text);
  font-family: var(--mono);
  text-transform: uppercase;
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.035));
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
  box-shadow:
    0 calc(var(--proximity) * 18px) calc(28px + var(--proximity) * 38px) rgba(0, 0, 0, 0.32),
    0 0 calc(var(--proximity) * 34px) rgba(179, 255, 40, 0.26);
  will-change: transform;
  isolation: isolate;
}

.button::before,
.filter::before,
.work-row::after,
.system-grid article::before,
.contact-panel::before,
.stage-readout::before,
.socials a::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: calc(var(--proximity, 0) * 0.95);
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.42), transparent 0.8rem),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.3), transparent 9rem);
  pointer-events: none;
}

.button:hover,
.button:focus-visible {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
}

.button-quiet {
  color: var(--text);
  background: rgba(10, 18, 18, 0.48);
}

.button-quiet:hover,
.button-quiet:focus-visible {
  color: var(--bg);
}

.hero-intel {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 620px;
  display: grid;
  align-content: center;
  gap: clamp(11px, 1.1vw, 14px);
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(5, 8, 8, 0.62);
  box-shadow:
    inset 0 0 90px rgba(179, 255, 40, 0.08),
    0 30px 100px rgba(0, 0, 0, 0.34);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018));
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
}

.hero-intel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.36;
  background:
    repeating-linear-gradient(180deg, rgba(179, 255, 40, 0.08) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, rgba(179, 255, 40, 0.12), transparent 28%, rgba(243, 251, 248, 0.06));
  pointer-events: none;
}

.intel-header,
.intel-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--mono);
}

.intel-header span,
.intel-footer span {
  color: var(--green);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.intel-header strong {
  max-width: 420px;
  color: var(--text);
  font-size: clamp(1.2rem, 2.1vw, 2.25rem);
  line-height: 0.98;
  text-align: right;
  overflow-wrap: anywhere;
}

.intel-card {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(179, 255, 40, 0.18);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 32px rgba(179, 255, 40, 0.05);
  overflow: hidden;
}

.intel-card-highlight {
  border-color: rgba(179, 255, 40, 0.28);
  box-shadow:
    inset 0 0 42px rgba(179, 255, 40, 0.075),
    0 0 calc(10px + var(--proximity, 0) * 42px) rgba(179, 255, 40, 0.1);
}

.intel-card-highlight::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(179, 255, 40, 0.95), rgba(243, 251, 248, 0.78), transparent);
  opacity: 0.78;
  transform: translateX(-42%);
  animation: intelScan 4.8s linear infinite;
  pointer-events: none;
}

.intel-card-highlight::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(179, 255, 40, 0.76);
  box-shadow: 0 0 16px rgba(179, 255, 40, 0.58);
  opacity: 0.72;
  pointer-events: none;
}

.intel-kicker {
  margin-bottom: 10px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.exhibition-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(166px, 0.76fr) minmax(0, 1fr);
  gap: 15px;
  align-items: center;
}

.exhibition-card {
  background:
    radial-gradient(circle at 31% 45%, rgba(143, 255, 130, 0.15), transparent 10rem),
    radial-gradient(circle at 77% 45%, rgba(143, 255, 130, 0.16), transparent 12rem),
    linear-gradient(180deg, rgba(143, 255, 130, 0.05), rgba(0, 0, 0, 0.46)),
    rgba(0, 0, 0, 0.52);
}

.exhibition-layout::before {
  content: "0101 7C 11 00 01 X0 1011 00 17 01 0011 10 44\A 11 00 101 01 0110 10 0X 001 1101 01 00 10\A 001 011 10 1110 00 01 1010 1X 00 01 111 00\A 11 01 0001 10 010 11 00 0101 01 1110 00 01\A 00 1110 01 10 0011 00 11 0101 0X 101 00 10\A 101 00 0101 11 00 10 0110 01 00 111 01 10\A 01 10 001 11 00 0101 10 0X 1110 01 00 11\A 1100 01 10 001 00 1111 01 00 1010 11 01 00";
  position: absolute;
  left: -8%;
  top: -92%;
  z-index: -1;
  width: 75%;
  height: 260%;
  color: rgba(143, 255, 130, 0.24);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.12em;
  white-space: pre-wrap;
  text-shadow: 0 0 8px rgba(143, 255, 130, 0.42);
  opacity: 0.56;
  filter: blur(0.2px);
  transform: translateY(-8%);
  animation: matrixRain 6.8s linear infinite;
  pointer-events: none;
}

.exhibition-globe {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  isolation: isolate;
  perspective: 620px;
  filter:
    drop-shadow(0 0 18px rgba(143, 255, 130, 0.35))
    drop-shadow(0 0 42px rgba(143, 255, 130, 0.16));
  overflow: visible;
}

.exhibition-globe::before,
.exhibition-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.exhibition-globe::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(143, 255, 130, 0.32), transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(243, 251, 248, 0.12), transparent 66%);
  opacity: 0.88;
  filter: blur(14px);
}

.exhibition-globe::after {
  border: 1px solid rgba(143, 255, 130, 0.32);
  box-shadow:
    inset 0 0 20px rgba(143, 255, 130, 0.08),
    0 0 18px rgba(143, 255, 130, 0.14);
  transform: rotateZ(-12deg) rotateX(68deg);
  opacity: 0.72;
}

.globe-sphere {
  position: absolute;
  inset: 4%;
  z-index: 1;
  border: 1px solid rgba(143, 255, 130, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(243, 251, 248, 0.28), transparent 1.35rem),
    radial-gradient(circle at 44% 40%, rgba(143, 255, 130, 0.22), transparent 42%),
    radial-gradient(circle at 64% 68%, rgba(143, 255, 130, 0.1), transparent 55%),
    rgba(0, 0, 0, 0.84);
  box-shadow:
    inset -24px -18px 42px rgba(0, 0, 0, 0.72),
    inset 20px 14px 42px rgba(143, 255, 130, 0.18),
    inset 0 0 22px rgba(243, 251, 248, 0.1),
    0 0 34px rgba(143, 255, 130, 0.32);
  overflow: hidden;
  transform: rotateZ(-8deg);
}

.globe-sphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(243, 251, 248, 0.22), transparent 15%),
    radial-gradient(circle at 58% 48%, transparent 0 48%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(105deg, rgba(243, 251, 248, 0.08), transparent 34%, rgba(0, 0, 0, 0.2) 82%);
  box-shadow:
    inset 14px 8px 34px rgba(214, 255, 197, 0.1),
    inset -34px -20px 48px rgba(0, 0, 0, 0.66);
  pointer-events: none;
}

.globe-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 37%, rgba(143, 255, 130, 0.2) 38% 39%, transparent 40% 100%),
    radial-gradient(ellipse at 50% 50%, transparent 0 57%, rgba(143, 255, 130, 0.22) 58% 59%, transparent 60% 100%),
    linear-gradient(90deg, transparent 48.4%, rgba(143, 255, 130, 0.44) 49.2% 50.8%, transparent 51.6%),
    linear-gradient(0deg, transparent 48.4%, rgba(143, 255, 130, 0.32) 49.2% 50.8%, transparent 51.6%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.globe-map {
  position: absolute;
  inset: 2% -108%;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 360'%3E%3Cg fill='%238fff82' fill-opacity='.88' stroke='%238fff82' stroke-opacity='.38' stroke-width='2'%3E%3Cpath d='M104 91 142 60 205 63 245 91 230 119 260 145 226 174 174 166 147 145 115 143 83 116Z'/%3E%3Cpath d='M246 38 305 24 342 49 319 76 266 72Z'/%3E%3Cpath d='M236 172 278 190 294 232 279 279 247 326 224 290 204 246 216 207Z'/%3E%3Cpath d='M345 88 386 74 424 91 414 116 375 121 346 106Z'/%3E%3Cpath d='M384 121 436 135 462 179 448 239 416 294 376 261 362 204 342 166Z'/%3E%3Cpath d='M421 83 508 66 608 92 659 132 629 173 568 160 544 192 489 161 443 145 427 115Z'/%3E%3Cpath d='M571 233 638 246 661 279 620 303 566 287Z'/%3E%3Cpath d='M486 210 518 206 535 222 516 238 487 232Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100%;
  filter:
    drop-shadow(0 0 8px rgba(143, 255, 130, 0.62))
    drop-shadow(0 0 18px rgba(143, 255, 130, 0.24));
  opacity: 0.96;
  animation: globeLandDrift 26s linear infinite;
}

.globe-earth {
  position: absolute;
  inset: 2.5%;
  z-index: 3;
  width: 95%;
  height: 95%;
  overflow: visible;
  transform:
    rotateZ(8deg)
    scaleX(0.96);
  transform-origin: center;
  filter:
    drop-shadow(0 0 7px rgba(143, 255, 130, 0.86))
    drop-shadow(0 0 18px rgba(143, 255, 130, 0.38));
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
}

.earth-land path {
  fill: rgba(143, 255, 130, 0.24);
  stroke: rgba(229, 255, 217, 0.22);
  stroke-width: 0.8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.globe-meridian,
.globe-latitude {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(143, 255, 130, 0.46);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(143, 255, 130, 0.13);
  pointer-events: none;
}

.globe-meridian {
  width: 88%;
  height: 101%;
}

.meridian-1 {
  transform: translate(-50%, -50%) scaleX(0.28) rotate(-5deg);
}

.meridian-2 {
  transform: translate(-50%, -50%) scaleX(0.55) rotate(-5deg);
}

.meridian-3 {
  transform: translate(-50%, -50%) scaleX(0.82) rotate(-5deg);
}

.meridian-4 {
  transform: translate(-50%, -50%) scaleX(0.42) rotate(53deg);
}

.meridian-5 {
  transform: translate(-50%, -50%) scaleX(0.42) rotate(-63deg);
}

.globe-latitude {
  width: 86%;
  height: 22%;
}

.latitude-1 {
  top: 32%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.latitude-2 {
  height: 9%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.latitude-3 {
  top: 68%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.latitude-4 {
  top: 22%;
  height: 10%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.latitude-5 {
  top: 78%;
  height: 10%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.globe-shade {
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 26%, rgba(243, 251, 248, 0.26), transparent 18%),
    radial-gradient(circle at 74% 69%, rgba(0, 0, 0, 0.54), transparent 58%),
    linear-gradient(115deg, transparent 0 48%, rgba(0, 0, 0, 0.18) 68%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.globe-orbit {
  position: absolute;
  inset: -4%;
  z-index: 0;
  border: 1px solid rgba(143, 255, 130, 0.32);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, rgba(143, 255, 130, 0.46), transparent 34%, rgba(243, 251, 248, 0.18), transparent 64%, rgba(143, 255, 130, 0.32), transparent);
  opacity: 0.82;
  transform: rotateZ(-18deg) rotateX(68deg);
  animation: globeOrbitSpin 18s linear infinite;
  mask-image: radial-gradient(circle, transparent 0 56%, #000 57% 61%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 56%, #000 57% 61%, transparent 62%);
}

.globe-marker {
  position: absolute;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f3fbf8;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(143, 255, 130, 0.72),
    0 0 16px rgba(143, 255, 130, 0.4);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.globe-marker.is-far {
  opacity: 0;
}

.globe-marker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 10px rgba(143, 255, 130, 0.98),
    0 0 26px rgba(143, 255, 130, 0.54);
}

.marker-seoul {
  left: 75%;
  top: 35%;
}

.marker-metz {
  left: 43%;
  top: 30%;
}

.marker-shanghai {
  left: 70%;
  top: 49%;
}

.marker-osaka {
  left: 79%;
  top: 43%;
}

.particle-globe-canvas {
  position: absolute;
  inset: -2%;
  z-index: 4;
  width: 104%;
  height: 104%;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 10px rgba(143, 255, 130, 0.62))
    drop-shadow(0 0 30px rgba(143, 255, 130, 0.24));
  mix-blend-mode: screen;
  pointer-events: none;
}

.exhibition-globe.is-particle-ready .globe-map {
  display: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 6px rgba(143, 255, 130, 0.46))
    drop-shadow(0 0 15px rgba(143, 255, 130, 0.18));
}

.exhibition-globe.is-particle-ready .globe-sphere {
  inset: 2%;
  z-index: 1;
  border-color: rgba(184, 255, 170, 0.72);
  background:
    radial-gradient(circle at 28% 22%, rgba(244, 255, 240, 0.24), transparent 1.5rem),
    radial-gradient(circle at 42% 38%, rgba(143, 255, 130, 0.2), transparent 44%),
    radial-gradient(circle at 72% 72%, rgba(0, 0, 0, 0.74), transparent 55%),
    rgba(4, 20, 8, 0.9);
  box-shadow:
    inset -32px -22px 48px rgba(0, 0, 0, 0.74),
    inset 18px 10px 34px rgba(143, 255, 130, 0.17),
    inset 0 0 34px rgba(143, 255, 130, 0.12),
    0 0 22px rgba(143, 255, 130, 0.22);
}

.exhibition-globe.is-particle-ready .globe-sphere::before {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 35%, rgba(143, 255, 130, 0.18) 36% 37%, transparent 38% 100%),
    radial-gradient(ellipse at 50% 50%, transparent 0 57%, rgba(143, 255, 130, 0.17) 58% 59%, transparent 60% 100%),
    linear-gradient(90deg, transparent 48.8%, rgba(143, 255, 130, 0.2) 49.3% 50.7%, transparent 51.2%),
    linear-gradient(0deg, transparent 48.8%, rgba(143, 255, 130, 0.16) 49.3% 50.7%, transparent 51.2%),
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(143, 255, 130, 0.045) 18px 19px, transparent 20px 34px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(143, 255, 130, 0.04) 18px 19px, transparent 20px 34px);
}

.exhibition-globe.is-particle-ready .globe-meridian,
.exhibition-globe.is-particle-ready .globe-latitude {
  opacity: 0.62;
  border-color: rgba(184, 255, 170, 0.38);
}

.intel-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.intel-row {
  --proximity: 0;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 5px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018));
  will-change: transform;
}

.intel-row.is-highlight {
  margin: 5px 0;
  padding: 12px 58px 12px 20px;
  border: 1px solid rgba(179, 255, 40, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.16), transparent 8rem),
    linear-gradient(90deg, rgba(179, 255, 40, 0.1), rgba(255, 255, 255, 0.025), transparent);
  box-shadow:
    inset 0 0 24px rgba(179, 255, 40, 0.08),
    0 0 calc(10px + var(--proximity, 0) * 30px) rgba(179, 255, 40, 0.14);
}

.intel-row.is-highlight::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(179, 255, 40, 0.88), 0 0 38px rgba(179, 255, 40, 0.4);
  transform: translateY(-50%);
  animation: signalPulse 1.8s ease-in-out infinite;
}

.intel-row.is-highlight::after,
.intel-project.is-highlight::after {
  content: attr(data-signal);
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  min-width: 36px;
  padding: 5px 7px;
  border: 1px solid rgba(179, 255, 40, 0.42);
  border-radius: 999px;
  color: var(--green);
  background: rgba(0, 0, 0, 0.62);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1;
  text-align: center;
  box-shadow: inset 0 0 16px rgba(179, 255, 40, 0.08);
}

.intel-row span,
.intel-row em,
.intel-project span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 650;
  font-style: normal;
}

.intel-row strong {
  color: var(--text);
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  font-weight: 760;
  line-height: 1.18;
}

.intel-row em {
  grid-column: 2;
}

.intel-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.intel-project {
  --proximity: 0;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.12), transparent 8rem),
    rgba(8, 12, 12, 0.58);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.024));
  will-change: transform;
  overflow: hidden;
}

.intel-project.is-highlight {
  border-color: rgba(179, 255, 40, 0.34);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.2), transparent 9rem),
    linear-gradient(180deg, rgba(179, 255, 40, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(8, 12, 12, 0.66);
  box-shadow:
    inset 0 0 32px rgba(179, 255, 40, 0.08),
    0 0 calc(10px + var(--proximity, 0) * 34px) rgba(179, 255, 40, 0.13);
}

.intel-project.is-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: calc(0.2 + var(--proximity, 0) * 0.38);
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(179, 255, 40, 0.2) 45%, rgba(243, 251, 248, 0.18) 48%, transparent 52%),
    repeating-linear-gradient(180deg, rgba(179, 255, 40, 0.06) 0 1px, transparent 1px 6px);
  transform: translateX(-36%);
  animation: projectSweep 5.6s linear infinite;
  pointer-events: none;
}

.intel-project.is-primary {
  grid-column: 1 / -1;
  min-height: 126px;
  grid-template-columns: minmax(132px, 38%) minmax(0, 1fr);
  border-color: rgba(179, 255, 40, 0.58);
  background:
    radial-gradient(circle at 12% 100%, rgba(179, 255, 40, 0.22), transparent 12rem),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(243, 251, 248, 0.09), transparent 11rem),
    rgba(8, 12, 12, 0.72);
}

.intel-project.is-primary strong {
  font-size: clamp(1.25rem, 1.9vw, 1.85rem);
}

.intel-project strong {
  color: var(--text);
  font-size: clamp(0.98rem, 1.25vw, 1.28rem);
  font-weight: 760;
  line-height: 1.04;
}

.intel-project > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.intel-project-thumb {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 72px;
  margin: 0;
  border: 1px solid rgba(179, 255, 40, 0.2);
  border-radius: 11px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: inset 0 0 18px rgba(179, 255, 40, 0.08);
}

.intel-project-thumb img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  filter: grayscale(0.18) contrast(1.05) brightness(0.78);
}

.intel-footer {
  align-items: center;
}

.intel-footer a {
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
}

@keyframes intelScan {
  0% {
    transform: translateX(-42%);
  }
  100% {
    transform: translateX(42%);
  }
}

@keyframes projectSweep {
  0% {
    transform: translateX(-42%);
  }
  52%,
  100% {
    transform: translateX(42%);
  }
}

@keyframes globeLandDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes globeOrbitSpin {
  0% {
    transform: rotateZ(-18deg) rotateX(68deg) rotateY(0deg);
  }
  100% {
    transform: rotateZ(-18deg) rotateX(68deg) rotateY(360deg);
  }
}

@keyframes matrixRain {
  0% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(15%);
  }
}

@keyframes signalPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(-50%) scale(0.82);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
  }
}

.hero-stage {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 620px;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 42%, rgba(179, 255, 40, 0.12), transparent 19rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 0 90px rgba(179, 255, 40, 0.08), 0 30px 100px rgba(0, 0, 0, 0.34);
  isolation: isolate;
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018));
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  opacity: calc(0.18 + var(--proximity, 0) * 0.62);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 4rem),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.26), transparent 18rem);
  filter: blur(calc(8px + var(--proximity, 0) * 10px));
  pointer-events: none;
}

#orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.stage-frame {
  position: absolute;
  inset: 10%;
  z-index: 1;
  border: 1px solid rgba(243, 251, 248, 0.22);
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(-18deg);
  background:
    repeating-radial-gradient(circle, rgba(179, 255, 40, 0.13) 0 1px, transparent 1px 46px),
    conic-gradient(from 140deg, transparent, rgba(179, 255, 40, 0.16), transparent, rgba(243, 251, 248, 0.1), transparent);
  animation: none;
  transform-style: preserve-3d;
  will-change: transform, filter;
}

.stage-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  width: 138px;
  height: 138px;
  padding: 14px;
  transform: translate(-50%, -50%) rotateZ(18deg) rotateX(-62deg);
  border: 1px solid rgba(179, 255, 40, 0.42);
  border-radius: 20px;
  background: rgba(5, 6, 6, 0.82);
  box-shadow: 0 0 42px rgba(179, 255, 40, 0.16);
}

.stage-core span {
  --core-x: 0px;
  --core-y: 0px;
  border: 1px solid rgba(243, 251, 248, 0.32);
  border-radius: 10px;
  background: rgba(243, 251, 248, 0.1);
  transform: translate3d(var(--core-x), var(--core-y), 0) scale(calc(1 + var(--proximity, 0) * 0.18));
  transition: transform 80ms linear;
  will-change: transform;
}

.stage-core span:nth-child(2),
.stage-core span:nth-child(3) {
  background: rgba(179, 255, 40, 0.14);
  border-color: rgba(179, 255, 40, 0.34);
}

.stage-readout {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(120px, 0.52fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(5, 6, 6, 0.72);
  backdrop-filter: blur(20px);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.024));
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
  box-shadow:
    0 calc(var(--proximity) * 18px) calc(30px + var(--proximity) * 30px) rgba(0, 0, 0, 0.34),
    0 0 calc(var(--proximity) * 30px) rgba(179, 255, 40, 0.2);
}

.stage-readout span,
.stage-readout em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
}

.stage-readout strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1.25rem;
}

.stage-glyphs > span {
  position: absolute;
  z-index: 2;
  color: var(--green);
  font-family: var(--mono);
  font-size: 1rem;
  opacity: 0.78;
}

.stage-glyphs > span:nth-child(1) {
  left: 16%;
  top: 19%;
  color: var(--green);
}

.stage-glyphs > span:nth-child(2) {
  right: 15%;
  top: 18%;
}

.stage-glyphs > span:nth-child(3) {
  left: 13%;
  bottom: 25%;
}

.stage-glyphs > span:nth-child(4) {
  right: 18%;
  bottom: 28%;
  color: var(--green);
}

.stage-glyphs > span:nth-child(5) {
  right: 12%;
  top: 45%;
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section-kicker {
  margin-bottom: 22px;
  color: var(--cyan);
  font-size: 0.88rem;
}

.section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr);
  gap: 46px;
  align-items: end;
  margin-bottom: 34px;
}

.section-title h2,
.about h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.section-title p,
.about p,
.system-grid p {
  margin: 0;
  color: rgba(243, 251, 248, 0.68);
  line-height: 1.72;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.filter {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-width: 76px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(10, 18, 18, 0.48);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.04));
  will-change: transform;
  isolation: isolate;
  box-shadow: 0 0 calc(var(--proximity) * 26px) rgba(179, 255, 40, 0.2);
}

.filter.active,
.filter:hover,
.filter:focus-visible {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
}

.work-index {
  border-top: 1px solid var(--line);
}

.work-row {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(160px, 0.22fr) 120px;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018));
  transform-style: preserve-3d;
  transition: padding-left 180ms ease, background 180ms ease, box-shadow 180ms ease;
  will-change: transform;
  isolation: isolate;
  box-shadow:
    0 calc(var(--proximity) * 18px) calc(26px + var(--proximity) * 34px) rgba(0, 0, 0, 0.24),
    inset 0 0 calc(var(--proximity) * 42px) rgba(179, 255, 40, 0.13);
}

.work-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  background: transparent;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.work-row span {
  color: var(--green);
}

.work-row strong {
  font-size: clamp(1.35rem, 2.8vw, 3rem);
  overflow-wrap: anywhere;
}

.work-row em,
.work-row small {
  color: var(--muted);
  font-style: normal;
}

.work-row:hover,
.work-row:focus-visible,
.work-row.active {
  padding-left: 22px;
  background: linear-gradient(90deg, rgba(179, 255, 40, 0.1), transparent);
}

.work-row:hover::before,
.work-row:focus-visible::before,
.work-row.active::before {
  background: var(--green);
  box-shadow: 0 0 24px rgba(179, 255, 40, 0.7);
}

.work-row.is-hidden {
  display: none;
}

.visual-home .work-index {
  display: none;
}

.image-work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.image-work-card {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  grid-column: span 4;
  min-height: clamp(460px, 38vw, 520px);
  display: grid;
  grid-template-rows: minmax(clamp(240px, 23vw, 310px), 1fr) auto auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.16), transparent 10rem),
    rgba(8, 12, 12, 0.68);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018));
  transform-style: preserve-3d;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  will-change: transform;
  isolation: isolate;
}

.image-work-card.is-large {
  grid-column: span 6;
}

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

.image-work-card::before {
  z-index: 2;
  opacity: calc(0.24 + var(--proximity, 0) * 0.32);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.28), transparent 12rem),
    linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.82)),
    repeating-linear-gradient(180deg, rgba(179, 255, 40, 0.08) 0 1px, transparent 1px 6px);
}

.image-work-card::after {
  z-index: 3;
  opacity: calc(var(--proximity, 0) * 0.58);
  background: linear-gradient(112deg, transparent 0 42%, rgba(179, 255, 40, 0.22) 45%, rgba(243, 251, 248, 0.2) 48%, transparent 53%);
  transform: translateX(calc(-42% + var(--proximity, 0) * 26%));
}

.image-work-card:hover,
.image-work-card:focus-visible {
  border-color: rgba(179, 255, 40, 0.62);
  box-shadow:
    inset 0 0 54px rgba(179, 255, 40, 0.08),
    0 0 42px rgba(179, 255, 40, 0.16);
}

.image-work-card.is-hidden {
  display: none;
}

.image-work-media {
  position: relative;
  z-index: 1;
  margin: 0;
  min-height: clamp(240px, 24vw, 310px);
  background: rgba(0, 0, 0, 0.62);
}

.image-work-media img,
.image-strip-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.08) saturate(0.92) brightness(0.78);
  transition: filter 220ms ease, transform 420ms ease;
}

.image-work-card:hover .image-work-media img,
.image-work-card:focus-visible .image-work-media img {
  filter: grayscale(0.02) contrast(1.12) saturate(1) brightness(0.9);
  transform: scale(1.035);
}

.image-work-content {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 10px;
  padding: 20px;
}

.image-work-content span,
.image-work-content em,
.image-work-content small {
  font-family: var(--mono);
  font-style: normal;
}

.image-work-content span,
.image-work-content em {
  color: var(--green);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.image-work-content strong {
  max-width: 92%;
  color: var(--text);
  font-size: clamp(1.35rem, 2.4vw, 2.85rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.image-work-content small {
  display: -webkit-box;
  max-width: 92%;
  color: rgba(243, 251, 248, 0.66);
  font-size: 0.78rem;
  line-height: 1.45;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 20px 20px;
}

.image-strip-thumb {
  --proximity: 0;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  margin: 0;
  aspect-ratio: 1.22;
  border: 1px solid rgba(179, 255, 40, 0.18);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.58);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.035));
  will-change: transform;
}

.image-strip-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(243, 251, 248, calc(var(--proximity, 0) * 0.32));
  pointer-events: none;
}

.page-map {
  padding-top: 92px;
}

.page-map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.page-map-card {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 188px;
  display: grid;
  align-content: end;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.12), transparent 8rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(8, 12, 12, 0.62);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.024));
  transform-style: preserve-3d;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  will-change: transform;
  isolation: isolate;
}

.page-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: calc(0.18 + var(--proximity, 0) * 0.48);
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(179, 255, 40, 0.18) 45%, rgba(243, 251, 248, 0.12) 48%, transparent 52%),
    repeating-linear-gradient(180deg, rgba(179, 255, 40, 0.06) 0 1px, transparent 1px 7px);
  transform: translateX(calc(-36% + var(--proximity, 0) * 18%));
}

.page-map-card span,
.page-map-card em,
.page-map-card small,
.page-map-card i {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-style: normal;
}

.page-map-card span {
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--green);
}

.page-map-card small {
  position: absolute;
  right: 16px;
  top: 14px;
}

.page-map-card strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.55vw, 1.65rem);
  line-height: 1.03;
  overflow-wrap: anywhere;
}

.page-map-card i {
  color: rgba(243, 251, 248, 0.42);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-map-card.is-featured {
  border-color: rgba(179, 255, 40, 0.34);
  box-shadow:
    inset 0 0 34px rgba(179, 255, 40, 0.07),
    0 0 calc(12px + var(--proximity, 0) * 32px) rgba(179, 255, 40, 0.12);
}

.page-map-card:hover,
.page-map-card:focus-visible {
  border-color: rgba(179, 255, 40, 0.62);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.2), transparent 8rem),
    rgba(8, 12, 12, 0.74);
}

.page-map-card:hover strong,
.page-map-card:focus-visible strong {
  color: var(--green);
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.system-grid article {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0, rgba(179, 255, 40, 0.1), transparent 14rem),
    rgba(8, 12, 12, 0.62);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.025));
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
  box-shadow:
    0 calc(var(--proximity) * 22px) calc(30px + var(--proximity) * 46px) rgba(0, 0, 0, 0.32),
    inset 0 0 calc(var(--proximity) * 46px) rgba(179, 255, 40, 0.12);
}

.system-grid span {
  color: var(--green);
}

.system-grid h3 {
  margin: 84px 0 18px;
  font-size: 1.65rem;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.38fr);
  gap: 58px;
  align-items: end;
}

.about p {
  font-size: 1.08rem;
}

.contact {
  padding-bottom: 70px;
}

.contact-panel {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-columns: max-content max-content;
  align-content: center;
  align-items: baseline;
  column-gap: clamp(10px, 2vw, 28px);
  row-gap: 16px;
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 80% 20%, rgba(179, 255, 40, 0.12), transparent 18rem),
    rgba(8, 12, 12, 0.72);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.02));
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
  box-shadow:
    0 calc(var(--proximity) * 24px) calc(34px + var(--proximity) * 48px) rgba(0, 0, 0, 0.32),
    inset 0 0 calc(var(--proximity) * 56px) rgba(179, 255, 40, 0.12);
}

.contact-panel span {
  grid-column: 1 / -1;
  color: var(--cyan);
}

.contact-panel .contact-email-label,
.contact-panel .contact-email-address {
  width: fit-content;
  font-size: clamp(1.18rem, 5.45vw, 4.65rem);
  line-height: 0.98;
  font-weight: 800;
  white-space: nowrap;
}

.contact-panel .contact-email-address {
  color: var(--fg);
  font-family: var(--mono);
}

.contact-panel .contact-email-address:hover,
.contact-panel .contact-email-address:focus-visible {
  color: var(--green);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.socials a {
  --proximity: 0;
  --mx: 50%;
  --my: 50%;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(8, 12, 12, 0.5);
  transform:
    translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.03));
  will-change: transform;
  isolation: isolate;
  box-shadow: 0 0 calc(var(--proximity) * 24px) rgba(179, 255, 40, 0.18);
}

.socials a:hover,
.socials a:focus-visible {
  color: var(--bg);
  background: var(--green);
  border-color: var(--green);
}

@keyframes rotateFrame {
  to {
    transform: rotateX(62deg) rotateZ(342deg);
  }
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav,
  .header-links {
    position: fixed;
    left: 22px;
    right: 22px;
    display: none;
    border: 1px solid var(--line);
    background: rgba(5, 6, 6, 0.96);
    backdrop-filter: blur(18px);
  }

  .nav {
    top: 86px;
    flex-direction: column;
    gap: 0;
    padding: 18px;
    border-radius: 24px 24px 0 0;
  }

  .header-links {
    top: 332px;
    padding: 18px 22px;
    border-radius: 0 0 24px 24px;
    justify-content: flex-start;
  }

  body.nav-open .nav,
  body.nav-open .header-links {
    display: flex;
  }

  .nav a {
    padding: 14px 4px;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 118px;
    gap: 34px;
  }

  .hero-stage {
    min-height: 520px;
  }

  .hero-intel {
    min-height: auto;
  }

  .section-title,
  .about {
    grid-template-columns: 1fr;
  }

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

  .image-work-card,
  .image-work-card.is-large {
    grid-column: span 6;
  }

  .page-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-panel {
    column-gap: 20px;
  }

  .contact-panel .contact-email-label,
  .contact-panel .contact-email-address {
    font-size: clamp(1.45rem, 5vw, 3.15rem);
  }
}

@media (min-width: 1101px) and (max-width: 1350px) {
  .hero {
    grid-template-columns: minmax(0, 0.82fr) minmax(520px, 0.9fr);
    gap: 32px;
  }

  .hero h1 {
    font-size: clamp(5.2rem, 13vw, 10rem);
  }

  .hero-intel {
    padding: 18px;
  }

  .exhibition-layout {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1fr);
  }

  .intel-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 4px 12px;
  }

  .intel-row span,
  .intel-row em,
  .intel-project span {
    font-size: 0.76rem;
  }

  .intel-row strong {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
  }

  .intel-project {
    grid-template-columns: 68px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  body,
  a,
  button {
    cursor: auto;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .site-header {
    left: 18px;
    right: 18px;
  }

  .hero {
    min-height: auto;
    padding-top: 126px;
    padding-bottom: 70px;
    gap: 28px;
  }

  .hero h1 {
    font-size: clamp(5rem, 27vw, 7.8rem);
  }

  .hero-copy {
    max-width: 354px;
  }

  .hero-role > span {
    display: block;
  }

  .hero-role {
    width: min(100%, 342px);
  }

  .hero-text {
    width: min(100%, 342px);
    max-width: 342px;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .hero-stage {
    min-height: 430px;
    border-radius: 22px;
  }

  .hero-intel {
    min-height: auto;
    padding: 14px;
    border-radius: 22px;
  }

  .intel-header,
  .intel-footer {
    display: grid;
    align-items: start;
  }

  .intel-header strong {
    text-align: left;
  }

  .intel-row {
    grid-template-columns: 1fr;
  }

  .exhibition-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .exhibition-globe {
    width: min(188px, 58vw);
    justify-self: center;
  }

  .intel-card {
    padding: 12px;
    border-radius: 16px;
  }

  .intel-row {
    padding: 9px 0;
  }

  .intel-row.is-highlight {
    padding: 10px 48px 10px 18px;
  }

  .intel-row span,
  .intel-row em,
  .intel-project span {
    font-size: 0.78rem;
  }

  .intel-row strong {
    font-size: 1.02rem;
  }

  .intel-row em {
    grid-column: auto;
  }

  .intel-project-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .intel-project {
    min-height: 92px;
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 10px;
  }

  .intel-project.is-primary {
    min-height: 108px;
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .intel-project-thumb {
    min-height: 58px;
  }

  .stage-readout {
    grid-template-columns: 1fr;
  }

  .work-row {
    grid-template-columns: 42px minmax(0, 1fr) 48px;
    min-height: 104px;
  }

  .work-row em {
    grid-column: 2 / 3;
  }

  .work-row small {
    justify-self: end;
  }

  .image-work-grid {
    grid-template-columns: 1fr;
  }

  .image-work-card,
  .image-work-card.is-large {
    grid-column: auto;
    min-height: 0;
  }

  .image-work-media {
    min-height: clamp(230px, 66vw, 270px);
  }

  .image-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .image-work-content {
    padding: 16px 14px;
  }

  .page-map-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .contact-panel {
    min-height: 190px;
    padding: 22px;
    column-gap: 12px;
  }

  .contact-panel .contact-email-label,
  .contact-panel .contact-email-address {
    font-size: clamp(1.08rem, 5.2vw, 1.6rem);
  }

  .floating-back {
    left: 18px;
    right: 18px;
    bottom: 18px;
    width: auto;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 430px) {
  .site-header {
    left: 12px;
    right: 12px;
  }

  .hero h1 {
    font-size: clamp(4.3rem, 24vw, 6.6rem);
  }

  .hero-copy,
  .hero-role,
  .hero-text {
    width: 100%;
    max-width: 100%;
  }

  .button {
    min-width: 0;
  }

  .exhibition-globe {
    width: min(168px, 54vw);
  }

  .contact-panel {
    min-height: 170px;
    padding: 18px;
    column-gap: 9px;
  }

  .contact-panel .contact-email-label,
  .contact-panel .contact-email-address {
    font-size: clamp(0.98rem, 5vw, 1.24rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}