:root {
  --vic-navy: #0c1040;
  --vic-deep: #060b28;
  --vic-night: #070928;
  --vic-gold: #c9a227;
  --vic-cyan: #00c5d4;
  --vic-orange: #f59300;
  --vic-white: #fafafa;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.09);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--vic-white);
  background: var(--vic-deep);
  font-family: Inter, Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

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

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.site-loader {
  display: none;
}

.js.is-loading .site-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--vic-white);
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 197, 212, 0.035), transparent 28%),
    #05071f;
  opacity: 1;
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.js.is-loading .site-loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(176px, 18vw, 232px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 197, 212, 0.055), rgba(245, 147, 0, 0.025) 44%, transparent 70%);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.4, 0, 1, 1);
}

.site-loader-logo {
  --loader-target-x: 0px;
  --loader-target-y: 0px;
  --loader-target-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: clamp(100px, 10vw, 124px);
  height: auto;
  opacity: 0.12;
  transform: translate(-50%, -50%) scale(0.98);
  transform-origin: center;
  filter: drop-shadow(0 0 20px rgba(0, 197, 212, 0.08)) drop-shadow(0 0 24px rgba(245, 147, 0, 0.07));
  animation: loader-logo-fade 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
  transition: transform 620ms cubic-bezier(0.65, 0, 0.35, 1), opacity 180ms ease, filter 180ms ease;
  will-change: transform;
}

.site-loader-progress {
  position: absolute;
  top: calc(50% + clamp(82px, 8vw, 98px));
  left: 50%;
  z-index: 3;
  display: block;
  width: clamp(150px, 18vw, 220px);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.1);
  box-shadow: 0 0 0 1px rgba(250, 250, 250, 0.025);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: loader-progress-appear 220ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.4, 0, 1, 1);
}

.site-loader-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vic-cyan) 0%, #62d3bd 46%, var(--vic-orange) 100%);
  box-shadow: 0 0 10px rgba(0, 197, 212, 0.24), 0 0 12px rgba(245, 147, 0, 0.16);
  transform: scaleX(0);
  transform-origin: left center;
  animation: loader-progress-fill 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-loader.is-settling .site-loader-logo {
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 28px rgba(0, 197, 212, 0.12)) drop-shadow(0 0 36px rgba(245, 147, 0, 0.1));
  transform: translate(calc(-50% + var(--loader-target-x)), calc(-50% + var(--loader-target-y))) scale(var(--loader-target-scale));
}

.site-loader.is-settling .site-loader-progress {
  animation: none;
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0.96);
}

.js.is-loading .site-loader.is-settling::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.76);
}

.js.is-loading .site-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.js.is-loading:not(.loader-arrived) .brand-mark {
  opacity: 0;
}

.brand-mark {
  transition: opacity 180ms ease;
}

.motion-managed {
  opacity: var(--motion-opacity, 1) !important;
  translate: var(--motion-x, 0px) var(--motion-y, 0px);
  scale: var(--motion-scale, 1);
}

.motion-managed.reveal,
.motion-managed.reveal-opacity {
  transform: none !important;
  transition: none !important;
}

.motion-managed.is-motion-active {
  will-change: opacity, translate, scale;
}

main > section + section {
  margin-top: -1px;
}

.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: min(1160px, calc(100% - 32px));
  padding: 10px 20px 10px 14px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(6, 11, 40, 0.76);
  backdrop-filter: blur(16px);
  transform: translate(-50%, 0);
  animation: topbarReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition:
    width 520ms cubic-bezier(0.65, 0, 0.35, 1),
    padding 520ms cubic-bezier(0.65, 0, 0.35, 1),
    border-radius 420ms cubic-bezier(0.65, 0, 0.35, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    background 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.topbar.is-compact:not(:hover):not(:focus-within) {
  justify-content: center;
  gap: 0;
  width: 68px;
  padding: 10px 11px;
  border-radius: 999px;
  background: rgba(6, 11, 40, 0.84);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  transition: gap 380ms cubic-bezier(0.65, 0, 0.35, 1) 80ms;
}

.brand-mark {
  width: 44px;
  height: auto;
  object-fit: contain;
}

.brand-name {
  max-width: 260px;
  overflow: hidden;
  color: var(--vic-white);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(0);
  transform-origin: left center;
  transition:
    max-width 480ms cubic-bezier(0.65, 0, 0.35, 1) 40ms,
    opacity 340ms cubic-bezier(0.65, 0, 0.35, 1) 130ms,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1) 110ms,
    visibility 0s linear 110ms;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 2vw, 24px);
  max-width: 820px;
  margin-left: auto;
  overflow: hidden;
  min-width: 0;
  padding-right: 6px;
  color: rgba(250, 250, 250, 0.82);
  font-size: 0.86rem;
  font-weight: 600;
  transform: translateX(0);
  transform-origin: left center;
  transition:
    max-width 500ms cubic-bezier(0.65, 0, 0.35, 1) 60ms,
    flex-basis 500ms cubic-bezier(0.65, 0, 0.35, 1) 60ms,
    opacity 360ms cubic-bezier(0.65, 0, 0.35, 1) 180ms,
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 150ms,
    visibility 0s linear 150ms,
    padding 380ms cubic-bezier(0.65, 0, 0.35, 1) 80ms,
    gap 380ms cubic-bezier(0.65, 0, 0.35, 1) 80ms;
}

.topbar.is-compact:not(:hover):not(:focus-within) .brand {
  gap: 0;
}

.topbar.is-compact:not(:hover):not(:focus-within) .brand-name,
.topbar.is-compact:not(:hover):not(:focus-within) .nav-links {
  max-width: 0;
  flex-basis: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px);
  transition-delay: 0ms;
}

.topbar.is-compact:not(:hover):not(:focus-within) .nav-links {
  gap: 0;
  padding-right: 0;
}

.nav-links a,
.hero-cta {
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.nav-links a:hover {
  color: var(--vic-cyan);
}

.nav-links .nav-page-link {
  margin-left: clamp(2px, 0.8vw, 8px);
  padding: 7px 12px;
  border: 1px solid rgba(0, 197, 212, 0.46);
  border-radius: 999px;
  color: var(--vic-cyan);
  background: rgba(0, 197, 212, 0.08);
  white-space: nowrap;
}

.nav-links .nav-page-link:hover {
  border-color: var(--vic-cyan);
  background: rgba(0, 197, 212, 0.14);
  box-shadow: 0 0 18px rgba(0, 197, 212, 0.12);
}

.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  padding: clamp(100px, 13vh, 136px) 24px 0;
  overflow: hidden;
  isolation: isolate;
  background: #05071f;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(6, 11, 40, 0.64), transparent 30%),
    linear-gradient(180deg, rgba(6, 11, 40, 0.34) 0%, rgba(6, 11, 40, 0.08) 38%, rgba(6, 11, 40, 0.24) 60%, rgba(5, 7, 31, 0.72) 86%, #05071f 100%);
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(1120px, calc(100vw - 48px));
  min-width: 0;
  margin: 0 auto;
  text-align: center;
  align-self: flex-start;
}

.hero h1 {
  margin: 0;
  color: var(--vic-white);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2.35rem, 5.8vw, 5.2rem);
  font-weight: 900;
  /* ponytail: 1.14 cat sat dau nang/dau mu tieng Viet (Ạ, Ự, Ệ...) o weight 900 -
     tang len 1.26 + them padding-bottom du cho dau chong duoi chu hoa. */
  line-height: 1.26;
  letter-spacing: 0;
  padding: 0.08em 0 0.22em;
  overflow: visible;
}

.hero h1.shiny {
  --shiny-base: rgba(250, 250, 250, 0.95);
  --shiny-hi: var(--vic-gold);
  color: var(--vic-white);
}

@keyframes shiny-sweep {
  0% {
    background-position: 150% 0;
  }

  100% {
    background-position: -50% 0;
  }
}

.hero h1 > span {
  --headline-delay: 0s;
  display: block;
  white-space: nowrap;
  text-transform: uppercase;
  /* ponytail: webkit-backface-visibility avoids subpixel jitter during 3D promotions of the entry reveal */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: copyRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--headline-delay) backwards;
}

.js.is-loading:not(.is-revealing) .hero h1 > span,
.js.is-loading:not(.is-revealing) .hero-cta {
  animation-play-state: paused;
}

.hero h1.shiny > span {
  background: linear-gradient(100deg, var(--shiny-base) 40%, var(--shiny-hi) 50%, var(--shiny-base) 60%);
  background-size: 200% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 22px rgba(201, 162, 39, 0.16);
  /* ponytail: keep the established delayed shimmer, only loop it continuously per current direction. */
  animation: copyRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--headline-delay) backwards,
             shiny-sweep 2.6s linear infinite calc(var(--headline-delay) + 0.75s);
}

.hero h1 > span:nth-child(1) {
  --headline-delay: 0.55s;
}

.hero h1 > span:nth-child(2) {
  --headline-delay: 0.72s;
}

.dynamic-heading-shiny {
  --dynamic-shiny-base: var(--vic-gold);
  --dynamic-shiny-highlight: #fff2b7;
  --dynamic-shiny-accent: var(--vic-cyan);
}

.dynamic-heading-shiny:not(.shiny) {
  color: var(--dynamic-shiny-base);
  background: linear-gradient(
    100deg,
    var(--dynamic-shiny-base) 38%,
    var(--dynamic-shiny-highlight) 47%,
    var(--vic-gold) 50%,
    var(--dynamic-shiny-accent) 53%,
    var(--dynamic-shiny-base) 62%
  );
  background-size: 220% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dynamic-heading-shiny-cycle var(--dynamic-shiny-duration, 10s) linear infinite;
}

.dynamic-heading-shiny:not(.shiny) .values-title-shiny,
.dynamic-heading-shiny:not(.shiny) .contact-title-shiny {
  color: inherit;
  background: none;
  -webkit-background-clip: initial;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
  text-shadow: inherit;
  animation: none !important;
}

.dynamic-weight-word,
.dynamic-weight-letter {
  display: inline;
}

.dynamic-weight-word {
  white-space: nowrap;
}

.dynamic-weight-letter {
  font-variation-settings: "wght" var(--dynamic-weight-rest, 620);
  will-change: font-variation-settings;
}

@keyframes dynamic-heading-shiny-cycle {
  0% {
    background-position: 150% 0;
  }

  34%,
  100% {
    background-position: -50% 0;
  }
}

@property --star-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero-cta {
  /* ponytail: dinh vi tuyet doi neo day Hero (yeu cau: to + noi bat + gan bottom) -
     dung left/right/margin:auto de can giua thay vi transform:translateX(-50%),
     vi @keyframes copyRise dang animate chinh thuoc tinh transform (se ghi de). */
  --star-a: 0deg;
  --star-w: 2px;
  --star-color: var(--vic-gold);
  position: absolute;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  bottom: clamp(56px, 10vh, 100px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 30px;
  border: 0;
  border-radius: 10px;
  color: var(--vic-navy);
  background: linear-gradient(90deg, var(--vic-cyan), var(--vic-orange));
  font-weight: 900;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  box-shadow: 0 0 38px rgba(0, 197, 212, 0.36), 0 0 76px rgba(245, 147, 0, 0.25), 0 10px 26px rgba(0, 0, 0, 0.4);
  animation: copyRise 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.95s backwards;
  isolation: isolate;
}

.hero-cta-icon {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
  flex: 0 0 auto;
}

.hero-cta::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 14px;
  padding: var(--star-w);
  pointer-events: none;
  background: conic-gradient(from var(--star-a), transparent 0 58%, var(--vic-cyan) 74%, #fff7c9 80%, var(--star-color) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: star-spin 4s linear infinite;
}

.hero-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
  box-shadow: 0 0 50px rgba(0, 197, 212, 0.48), 0 0 104px rgba(245, 147, 0, 0.34), 0 10px 26px rgba(0, 0, 0, 0.4);
}

.ecosystem {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 88px) 0;
  background: #05071f;
}

.ecosystem-header {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100% - 48px));
  margin: 0 auto 40px;
  text-align: center;
}

.section-kicker {
  margin: 0 0 12px;
  color: var(--vic-cyan);
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ecosystem h2 {
  margin: 0;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.ecosystem-logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 46px);
  margin-top: 18px;
}

.ecosystem-logo {
  display: block;
  width: clamp(116px, 10vw, 144px);
  height: 44px;
  object-fit: contain;
}

.ecosystem-logo-xgame {
  width: clamp(132px, 11vw, 158px);
  height: 44px;
}

.ecosystem-marquee {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.ecosystem-row {
  overflow: hidden;
  width: 100%;
}

.ecosystem-track {
  display: flex;
  width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.ecosystem-set {
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  padding-right: 20px;
}

.ecosystem-set img {
  display: block;
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(250, 250, 250, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), 0 0 22px rgba(0, 197, 212, 0.06);
}

.about {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  min-height: clamp(720px, 90vh, 880px);
  padding: clamp(72px, 8vw, 104px) 24px;
  background: #05071f;
}

.about-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* // ponytail: same composite background, moved to a layer so opacity can reveal without touching text. */
  background:
    linear-gradient(180deg, #05071f 0%, rgba(5, 7, 31, 0.55) 10%, transparent 38%, rgba(5, 7, 31, 0.24) 52%, rgba(5, 7, 31, 0.52) 72%, rgba(5, 7, 31, 0.78) 88%, #05071f 100%),
    linear-gradient(90deg, rgba(5, 7, 31, 0.55) 0%, rgba(5, 7, 31, 0.32) 42%, rgba(5, 7, 31, 0.05) 100%),
    url("assets/about/about-bg_01.jpg") center / cover no-repeat;
}

.about-inner {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.about-copy {
  position: relative;
  min-width: 0;
  max-width: 720px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
}

.about-copy::before {
  content: "";
  position: absolute;
  inset: -28px -42px;
  z-index: -1;
  border-radius: 48px;
  background: rgba(5, 7, 31, 0.34);
  box-shadow: 0 0 54px 32px rgba(5, 7, 31, 0.34);
  pointer-events: none;
}

/* // ponytail: keep the existing heading and fix the crowded hierarchy with scoped spacing only. */
.about .section-kicker {
  margin-bottom: 28px;
}

.about-facts {
  display: flex;
  margin: 0 0 32px;
}

.about-fact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.about-fact-value {
  color: var(--vic-gold);
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 7.25rem);
  line-height: 0.9;
}

.about-fact-label {
  color: var(--vic-gold);
  opacity: 0.95;
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-story {
  margin: 0 0 14px;
  max-width: 65ch;
  color: var(--vic-white);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.65;
}

.about-edutainment {
  display: flex;
  align-items: baseline;
  margin: clamp(18px, 2.6vw, 28px) 0 clamp(16px, 2vw, 22px);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  font-variation-settings: "wght" 760;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(0, 197, 212, 0.08), 0 0 36px rgba(245, 147, 0, 0.06);
}

.about-edutainment-edu,
.about-edutainment-tail {
  display: inline-block;
  transform-origin: center center;
  backface-visibility: hidden;
  background-size: 220% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-edutainment-edu {
  background-image: linear-gradient(100deg, var(--vic-cyan) 38%, #e9ffff 50%, var(--vic-cyan) 62%);
}

.about-edutainment-tail {
  background-image: linear-gradient(100deg, var(--vic-orange) 38%, #fff1cf 50%, var(--vic-orange) 62%);
}

.about-edutainment-mark {
  display: inline-block;
  margin: 0 0.08em;
  color: var(--vic-orange);
  background: linear-gradient(90deg, var(--vic-cyan), var(--vic-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform-origin: center center;
}

@media (prefers-reduced-motion: no-preference) {
  .js .about:not(.is-edutainment-active) .about-edutainment-edu {
    transform: translateX(-52px) rotateY(-7deg) scale(0.9);
  }

  .js .about:not(.is-edutainment-active) .about-edutainment-tail {
    transform: translateX(52px) rotateY(7deg) scale(0.9);
  }

  .js .about:not(.is-edutainment-active) .about-edutainment-mark {
    transform: translateY(12px) scaleX(0.25) scaleY(0.5);
  }
}

.about.is-edutainment-active .about-edutainment-edu {
  animation:
    about-edutainment-lock-left 720ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both,
    about-edutainment-sheen 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.about.is-edutainment-active .about-edutainment-tail {
  animation:
    about-edutainment-lock-right 720ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both,
    about-edutainment-sheen 1100ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.about.is-edutainment-active .about-edutainment-mark {
  animation: about-edutainment-lock-mark 520ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.about-philosophy {
  max-width: 65ch;
  margin: 0 0 14px;
  color: rgba(250, 250, 250, 0.88);
  font-size: clamp(1.04rem, 1.45vw, 1.22rem);
  font-weight: 600;
  line-height: 1.62;
}

.about-team {
  margin: 0;
  max-width: 65ch;
  color: rgba(250, 250, 250, 0.72);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

.manifesto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(760px, 86vh, 920px);
  padding: 0;
  background: #05071f;
}

.manifesto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, #05071f 0%, rgba(5, 7, 31, 0.76) 11%, rgba(5, 7, 31, 0.12) 30%, rgba(5, 7, 31, 0.12) 70%, rgba(5, 7, 31, 0.8) 90%, #05071f 100%),
    radial-gradient(ellipse 74% 80% at 50% 54%, transparent 44%, rgba(5, 7, 31, 0.8) 100%);
  pointer-events: none;
}

.manifesto-globe {
  position: absolute;
  inset: -2% -4% -10%;
  z-index: 0;
  overflow: hidden;
  opacity: min(var(--manifesto-globe-opacity, 1), var(--section-motion-visibility, 1));
  pointer-events: auto;
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 50% 50%, #000 48%, rgba(0, 0, 0, 0.84) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 82% at 50% 50%, #000 48%, rgba(0, 0, 0, 0.84) 68%, transparent 100%);
  transform: translateY(4%);
}

.manifesto-globe-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  cursor: grab;
  touch-action: pan-y;
}

.manifesto-globe-canvas.is-dragging {
  cursor: grabbing;
}

.manifesto-heading {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(76px, 8vw, 104px) clamp(24px, 4vw, 56px) 0;
  text-align: center;
  box-sizing: border-box;
}

.manifesto-heading h2 {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0.18em 0.04em 0.14em;
  overflow: visible;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2.35rem, 4.7vw, 4.15rem);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.manifesto-heading.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.manifesto-heading.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.manifesto-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(64px, 8vw, 124px);
  width: min(1280px, calc(100% - 48px));
  min-height: clamp(520px, 44vw, 640px);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 38px) clamp(12px, 2vw, 28px) clamp(70px, 8vw, 104px);
  box-sizing: border-box;
}

.manifesto-row {
  --manifesto-accent: var(--vic-gold);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 590px;
  min-height: 0;
  margin: 0;
  padding: clamp(32px, 3.5vw, 48px) 0 clamp(46px, 5vw, 68px);
  overflow: visible;
  background: transparent;
  box-sizing: border-box;
}

.manifesto-row::before {
  content: none;
}

.manifesto-row-divider {
  --manifesto-accent: var(--vic-cyan);
  justify-self: end;
  margin-top: clamp(118px, 11vw, 172px);
  border: 0;
  background: transparent;
}

.manifesto-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--manifesto-accent);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 1;
  transform: none;
}

.manifesto-label::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  transform: rotate(45deg);
}

.manifesto-text {
  position: relative;
  z-index: 1;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  max-width: 48ch;
  color: var(--vic-white);
  font-size: clamp(1.28rem, 2.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.35;
  opacity: 1;
  transform: none;
  text-shadow: 0 3px 22px rgba(2, 3, 18, 0.82);
}

.manifesto-text-emphasis,
.manifesto-text-secondary {
  display: block;
}

.manifesto-text-emphasis {
  max-width: none;
  color: var(--vic-white);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(1.82rem, 2.75vw, 2.65rem);
  font-weight: 800;
  line-height: 1.1;
}

.manifesto-row-divider .manifesto-text-emphasis {
  max-width: none;
  font-size: clamp(1.78rem, 2.62vw, 2.52rem);
}

.manifesto-headline-line {
  display: block;
  width: fit-content;
}

.manifesto-accent-verb {
  color: var(--manifesto-accent);
}

.manifesto-text-secondary {
  max-width: 46ch;
  margin-top: clamp(12px, 1.6vw, 18px);
  color: rgba(250, 250, 250, 0.78);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  font-weight: 500;
  line-height: 1.62;
}

.manifesto-row.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.manifesto-row.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.manifesto-row.reveal:nth-of-type(1) {
  transition-delay: 60ms;
}

.manifesto-row.reveal:nth-of-type(2) {
  transition-delay: 120ms;
}

.values {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 8vw, 96px) 24px;
  background: #05071f;
}

.values-background {
  position: absolute;
  inset: -1px 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  opacity: min(var(--values-background-opacity, 0), var(--section-motion-visibility, 1));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.values-background-canvas,
.values-background-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.values-background-canvas {
  z-index: 0;
  display: block;
  opacity: 0.7;
}

.values-background-scrim {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 54%, rgba(3, 5, 22, 0.2) 0%, rgba(3, 5, 22, 0.38) 48%, rgba(3, 5, 22, 0.58) 100%),
    linear-gradient(to bottom, rgba(3, 5, 22, 0.28), rgba(3, 5, 22, 0.14) 45%, rgba(3, 5, 22, 0.34));
}

.values-inner {
  position: relative;
  z-index: 2;
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

.values-heading {
  display: block;
  max-width: 860px;
  margin-bottom: clamp(34px, 5vw, 58px);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.values-heading h2 {
  margin: 0;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
  overflow: visible;
  text-transform: uppercase;
}

.values-heading p {
  margin: 10px 0 0;
  color: rgba(250, 250, 250, 0.64);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.6;
}

.values-title-shiny {
  --shiny-base: var(--vic-gold);
  --shiny-hi: #fff2b7;
  display: inline-block;
  padding: 0.24em 0.03em 0.1em;
  overflow: visible;
  line-height: 1.28;
  vertical-align: top;
  background: linear-gradient(100deg, var(--shiny-base) 40%, var(--shiny-hi) 48%, var(--vic-cyan) 51%, var(--shiny-base) 60%);
  background-size: 220% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.values-heading.reveal.is-visible .values-title-shiny {
  animation: values-shiny-cycle 7s linear infinite;
}

@keyframes values-shiny-cycle {
  0% {
    background-position: 150% 0;
  }
  34%,
  100% {
    background-position: -50% 0;
  }
}

.values .values-heading.reveal,
.values .values-coverflow.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.values .values-coverflow.reveal {
  transition-delay: 70ms;
}

.values .values-heading.reveal.is-visible,
.values .values-coverflow.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.values-radial-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(430px, 1.2fr) minmax(310px, 1fr);
  align-items: center;
  gap: clamp(26px, 3.5vw, 56px);
}

.values-list-desktop {
  margin: 0;
  padding: 0;
  list-style: none;
}

.values-list-desktop li {
  border-bottom: 1px solid rgba(250, 250, 250, 0.1);
}

.values-list-desktop li:first-child {
  border-top: 1px solid rgba(250, 250, 250, 0.1);
}

.value-list-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 8px 12px 15px;
  border: 0;
  appearance: none;
  background: transparent;
  color: rgba(250, 250, 250, 0.6);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.value-list-row::before {
  content: "";
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 0;
  width: 2px;
  background: var(--vic-gold);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

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

.value-list-row strong {
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(0.78rem, 0.85vw, 0.92rem);
  font-weight: 700;
  line-height: 1.35;
}

.value-list-row:hover,
.value-list-row:focus-visible,
.value-list-row.is-active {
  padding-left: 20px;
  color: #fff;
  outline: none;
}

.value-list-row:hover::before,
.value-list-row:focus-visible::before,
.value-list-row.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.values-radial {
  position: relative;
  width: min(500px, 100%);
  min-width: 430px;
  aspect-ratio: 1;
  margin: 0 auto;
  --values-radius: clamp(166px, 14vw, 200px);
  transform: translateX(-10px);
}

.values-radial::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(250, 250, 250, 0.055);
  border-radius: 50%;
  background-image: radial-gradient(circle at center, rgba(6, 11, 40, 0.1), rgba(6, 11, 40, 0.24) 58%, rgba(6, 11, 40, 0.58) 72%), url("assets/gia_tri/background.jpeg");
  background-position: center;
  background-size: cover;
  opacity: 0.32;
  pointer-events: none;
  animation: values-orb-spin 110s linear infinite;
}

.values-radial-spoke {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: var(--values-radius);
  height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0.32), rgba(250, 250, 250, 0.08));
  opacity: 0.1;
  transform: rotate(var(--angle));
  transform-origin: left center;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.values-radial-spoke:nth-of-type(even) {
  background: linear-gradient(90deg, rgba(250, 250, 250, 0.32), rgba(250, 250, 250, 0.08));
}

.values-radial-spoke.is-active {
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.68), rgba(201, 162, 39, 0.14));
  opacity: 0.62;
  filter: none;
}

.values-radial-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(104px, 9vw, 128px);
  aspect-ratio: 1;
  padding: 20px;
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: 50%;
  background: rgba(5, 7, 31, 0.86);
  box-shadow: 0 0 0 10px rgba(5, 7, 31, 0.56), 0 0 30px rgba(201, 162, 39, 0.1);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.values-radial-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.values-radial-node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--values-radius)) rotate(calc(-1 * var(--angle)));
  transition: scale 0.25s ease;
}

.values-radial-node::before {
  content: "";
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(250, 250, 250, 0.46);
  transform: scale(1);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, box-shadow 0.22s ease;
}

.values-radial-node:hover,
.values-radial-node:focus-visible,
.values-radial-node.is-active {
  background: transparent;
  box-shadow: none;
  scale: 1;
  outline: none;
}

.values-radial-node:hover::before,
.values-radial-node:focus-visible::before,
.values-radial-node.is-active::before {
  background: var(--vic-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.1);
  transform: scale(1.75);
}

.values-radial-node:focus-visible {
  outline: 1px solid rgba(250, 250, 250, 0.64);
  outline-offset: 1px;
}

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

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

.values-radial-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 8px 0 8px clamp(24px, 2.6vw, 38px);
}

.values-radial-detail::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--vic-gold), rgba(201, 162, 39, 0.08));
}

.values-detail-count {
  margin: 0 0 20px;
  color: rgba(250, 250, 250, 0.42);
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
}

.values-radial-detail h3 {
  margin: 0;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.15vw, 2.05rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 18px;
}

.values-radial-detail p {
  margin: 0;
  color: rgba(250, 250, 250, 0.76);
  font-size: clamp(1rem, 1.18vw, 1.08rem);
  line-height: 1.65;
}

.values-detail-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 30px;
}

.values-detail-nav button {
  padding: 8px 2px;
  border: 0;
  appearance: none;
  background: transparent;
  color: rgba(250, 250, 250, 0.72);
  font: 700 0.78rem/1.2 Montserrat, Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease;
}

.values-detail-nav button:hover,
.values-detail-nav button:focus-visible {
  color: var(--vic-gold);
  outline: none;
}

.values-coverflow {
  --active-value-accent-rgb: 232, 100, 22;
  position: relative;
  width: 100%;
  min-height: 590px;
  outline: none;
  perspective: 1400px;
  touch-action: pan-y;
}

.values-coverflow:focus-visible {
  outline: 1px solid rgba(201, 162, 39, 0.52);
  outline-offset: 8px;
}

.values-coverflow-stage {
  position: relative;
  width: 100%;
  height: 520px;
  transform-style: preserve-3d;
}

.values-coverflow-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(620px, 52vw);
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--active-value-accent-rgb), 0.105) 0%, rgba(var(--active-value-accent-rgb), 0.035) 46%, transparent 72%);
  filter: blur(22px);
  opacity: var(--motion-opacity, 0);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(0.82 + var(--motion-opacity, 0) * 0.18));
  transition: none;
}

.values-coverflow.reveal.is-visible .values-coverflow-stage::before {
  opacity: var(--motion-opacity, 1);
}

.value-coverflow-card {
  --value-bg: #ffb548;
  --value-ink: #4a1f0d;
  --value-object: #e86416;
  --value-object-hi: #ffd58a;
  --value-object-dark: #57250c;
  --value-object-cut: #ffca70;
  --value-object-shadow: rgba(87, 37, 12, 0.2);
  --value-accent-rgb: 232, 100, 22;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(280px, 25vw, 310px);
  height: 400px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 26px;
  appearance: none;
  background: var(--value-bg);
  color: var(--value-ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateZ(-240px) scale(0.68);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.value-coverflow-card::before {
  content: "";
  position: absolute;
  top: -92px;
  right: -86px;
  width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.075);
  pointer-events: none;
}

.value-coverflow-card:nth-child(2) {
  --value-bg: #c94163;
  --value-ink: #fff4f7;
  --value-object: #f3a9ba;
  --value-object-hi: #ffd9e2;
  --value-object-dark: #7e1737;
  --value-object-cut: #a92a4d;
  --value-object-shadow: rgba(110, 10, 45, 0.22);
  --value-accent-rgb: 201, 65, 99;
}

.value-coverflow-card:nth-child(3) {
  --value-bg: #3fa774;
  --value-ink: #062d1d;
  --value-object: #bfea8c;
  --value-object-hi: #e5ffc2;
  --value-object-dark: #087547;
  --value-object-cut: #76cf82;
  --value-object-shadow: rgba(5, 78, 45, 0.2);
  --value-accent-rgb: 63, 167, 116;
}

.value-coverflow-card:nth-child(4) {
  --value-bg: #6256b5;
  --value-ink: #fbfaff;
  --value-object: #bdb6ed;
  --value-object-hi: #e3dfff;
  --value-object-dark: #302578;
  --value-object-cut: #8176cf;
  --value-object-shadow: rgba(35, 23, 113, 0.24);
  --value-accent-rgb: 98, 86, 181;
}

.value-coverflow-card:nth-child(5) {
  --value-bg: #2b849b;
  --value-ink: #032b35;
  --value-object: #9adadd;
  --value-object-hi: #d8fafa;
  --value-object-dark: #0b5263;
  --value-object-cut: #56b2c0;
  --value-object-shadow: rgba(2, 68, 84, 0.22);
  --value-accent-rgb: 43, 132, 155;
}

.value-coverflow-card:nth-child(6) {
  --value-bg: #c96f55;
  --value-ink: #3a160d;
  --value-object: #ffd39c;
  --value-object-hi: #fff0d5;
  --value-object-dark: #91361f;
  --value-object-cut: #ed9b6f;
  --value-object-shadow: rgba(88, 25, 11, 0.2);
  --value-accent-rgb: 201, 111, 85;
}

.value-coverflow-card.is-active {
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  box-shadow:
    0 34px 72px rgba(0, 0, 0, 0.42),
    0 12px 42px rgba(var(--value-accent-rgb), 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.value-coverflow-card.is-prev,
.value-coverflow-card.is-next {
  z-index: 3;
  opacity: 0.74;
  pointer-events: auto;
  will-change: transform, opacity;
}

.value-coverflow-card.is-prev {
  transform: translate(-50%, -50%) translateX(-285px) translateZ(-70px) rotateY(13deg) rotateZ(-2deg) scale(0.86);
}

.value-coverflow-card.is-next {
  transform: translate(-50%, -50%) translateX(285px) translateZ(-70px) rotateY(-13deg) rotateZ(2deg) scale(0.86);
}

.value-coverflow-card.is-prev-2,
.value-coverflow-card.is-next-2 {
  z-index: 1;
  opacity: 0.38;
  pointer-events: auto;
}

.value-coverflow-card.is-prev-2 {
  transform: translate(-50%, -50%) translateX(-490px) translateZ(-190px) rotateY(17deg) rotateZ(-4deg) scale(0.72);
}

.value-coverflow-card.is-next-2 {
  transform: translate(-50%, -50%) translateX(490px) translateZ(-190px) rotateY(-17deg) rotateZ(4deg) scale(0.72);
}

.value-coverflow-card.is-prev:hover,
.value-coverflow-card.is-next:hover,
.value-coverflow-card.is-prev-2:hover,
.value-coverflow-card.is-next-2:hover {
  opacity: 0.92;
}

.value-coverflow-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.94);
  outline-offset: 5px;
}

.value-card-index {
  position: absolute;
  top: 24px;
  left: 26px;
  z-index: 4;
  color: currentColor;
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.84;
}

.value-card-object {
  --value-parallax-x: 0px;
  --value-parallax-y: 0px;
  position: absolute;
  top: 12px;
  right: -22px;
  z-index: 3;
  display: block;
  width: 210px;
  height: 210px;
  color: var(--value-object);
  opacity: 0.9;
  pointer-events: none;
  transform: translate3d(var(--value-parallax-x), calc(var(--value-parallax-y) + 6px), 0) rotate(-2deg) scale(0.94);
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.value-coverflow-card:nth-child(6) .value-card-object {
  top: 14px;
  right: -2px;
  width: 190px;
  height: 190px;
}

.value-card-object svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 9px 0 var(--value-object-shadow)) drop-shadow(0 14px 12px var(--value-object-shadow));
}

.value-card-object .object-main {
  fill: var(--value-object);
}

.value-card-object .object-hi,
.value-card-object .object-detail {
  fill: var(--value-object-hi);
}

.value-card-object .object-dark {
  fill: var(--value-object-dark);
}

.value-card-object .object-cut {
  fill: var(--value-object-cut);
}

.value-card-object .object-line {
  fill: none;
  stroke: var(--value-object);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-card-object .object-line-soft {
  stroke: var(--value-object-hi);
  stroke-width: 6;
}

.value-data-ring,
.value-data-grid,
.value-data-route,
.value-shield-check,
.value-focus-ticks,
.value-focus-scan {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-compass-needle,
.value-compass-star,
.value-shield-shell,
.value-scale-bar,
.value-focus-eye,
.value-focus-iris,
.value-handshake-left,
.value-handshake-right,
.value-handshake-lock {
  transform-box: view-box;
  transform-origin: center;
}

.value-handshake-line {
  fill: none;
  stroke: var(--value-object-dark);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-handshake-medallion-highlight {
  opacity: 0.5;
}

.value-compass-needle,
.value-compass-star {
  transform-origin: 103px 76px;
}

.value-shield-shell {
  transform-origin: 102px 84px;
}

.value-shield-check {
  stroke: var(--value-object-dark);
  stroke-width: 13;
}

.value-scale-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.value-data-ring {
  stroke: var(--value-object-hi);
  stroke-width: 5;
  opacity: 0.72;
}

.value-data-grid {
  stroke: var(--value-object-hi);
  stroke-width: 3;
  opacity: 0.32;
}

.value-data-area {
  fill: var(--value-object-hi);
  opacity: 0.24;
}

.value-data-route {
  stroke: var(--value-object-dark);
  stroke-width: 8;
}

.value-data-node {
  fill: var(--value-object-hi);
  stroke: var(--value-object-dark);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
}

.value-focus-eye,
.value-focus-iris {
  transform-origin: 101px 86px;
}

.value-focus-ticks {
  stroke: var(--value-object-dark);
  stroke-width: 5;
  stroke-dasharray: 0.025 0.055;
  transform-box: fill-box;
  transform-origin: center;
}

.value-focus-scan {
  stroke: var(--value-object-hi);
  stroke-width: 5;
  opacity: 0;
}

.value-coverflow-card.is-active .value-card-object {
  opacity: 1;
  transform: translate3d(var(--value-parallax-x), var(--value-parallax-y), 0) rotate(0) scale(1);
}

.value-coverflow-card.is-active .value-compass-needle {
  animation: value-compass-lock 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.value-coverflow-card.is-active .value-compass-star {
  animation: value-compass-glint 320ms cubic-bezier(0.16, 1, 0.3, 1) 430ms both;
}

.value-coverflow-card.is-active .value-shield-shell {
  animation: value-shield-settle 420ms cubic-bezier(0.16, 1, 0.3, 1) 70ms both;
}

.value-coverflow-card.is-active .value-shield-check {
  stroke-dasharray: 1;
  animation: value-shield-check-draw 520ms cubic-bezier(0.16, 1, 0.3, 1) 170ms both;
}

.value-coverflow-card.is-active .value-scale-bar {
  animation: value-scale-bar-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.value-coverflow-card.is-active .value-scale-bar-one {
  animation-delay: 70ms;
}

.value-coverflow-card.is-active .value-scale-bar-two {
  animation-delay: 140ms;
}

.value-coverflow-card.is-active .value-scale-bar-three {
  animation-delay: 210ms;
}

.value-coverflow-card.is-active .value-data-route {
  stroke-dasharray: 1;
  animation: value-data-route-draw 720ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}

.value-coverflow-card.is-active .value-data-node {
  animation: value-data-node-pop 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.value-coverflow-card.is-active .value-data-node-two {
  animation-delay: 130ms;
}

.value-coverflow-card.is-active .value-data-node-three {
  animation-delay: 200ms;
}

.value-coverflow-card.is-active .value-data-node-four {
  animation-delay: 270ms;
}

.value-coverflow-card.is-active .value-focus-eye {
  animation: value-focus-open 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.value-coverflow-card.is-active .value-focus-iris {
  animation: value-focus-lock 620ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.value-coverflow-card.is-active .value-focus-scan {
  animation: value-focus-scan 460ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.value-coverflow-card.is-active .value-handshake-left {
  animation: value-handshake-left-lock 480ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.value-coverflow-card.is-active .value-handshake-right {
  animation: value-handshake-right-lock 480ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.value-coverflow-card.is-active .value-handshake-lock {
  animation: value-handshake-center-lock 360ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.value-card-copy {
  position: absolute;
  right: 24px;
  bottom: 28px;
  left: 26px;
  z-index: 2;
  display: grid;
  gap: 12px;
}

.value-card-title {
  display: block;
  max-width: 12ch;
  color: currentColor;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(1.55rem, 2.15vw, 1.92rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.value-card-description {
  display: block;
  max-width: 30ch;
  color: currentColor;
  font-size: clamp(0.74rem, 0.9vw, 0.82rem);
  font-weight: 600;
  line-height: 1.48;
  opacity: 0.82;
}

.value-coverflow-card.is-active .value-card-title,
.value-coverflow-card.is-active .value-card-description {
  animation: value-card-copy-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.value-coverflow-card.is-active .value-card-title {
  animation-delay: 40ms;
}

.value-coverflow-card.is-active .value-card-description {
  animation-delay: 100ms;
}

@keyframes value-card-copy-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes value-compass-lock {
  0% {
    transform: rotate(-18deg);
  }

  52% {
    transform: rotate(7deg);
  }

  78% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes value-compass-glint {
  0% {
    opacity: 0.72;
    transform: scale(0.92);
  }

  58% {
    opacity: 1;
    transform: scale(1.07);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes value-shield-settle {
  from {
    opacity: 0.68;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes value-shield-check-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes value-scale-bar-rise {
  from {
    opacity: 0.56;
    transform: scaleY(0.55);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes value-data-route-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes value-data-node-pop {
  from {
    opacity: 0;
    transform: scale(0.35);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes value-focus-open {
  from {
    opacity: 0.58;
    transform: scaleY(0.28);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes value-focus-lock {
  0% {
    transform: rotate(-20deg) scale(0.88);
  }

  56% {
    transform: rotate(7deg) scale(1.04);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}

@keyframes value-focus-scan {
  0% {
    opacity: 0;
    transform: translateY(-24px) scaleX(0.78);
  }

  45% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
    transform: translateY(24px) scaleX(1);
  }
}

@keyframes value-handshake-left-lock {
  from {
    opacity: 0.62;
    transform: translateX(-14px) rotate(-3deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes value-handshake-right-lock {
  from {
    opacity: 0.62;
    transform: translateX(14px) rotate(3deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes value-handshake-center-lock {
  from {
    opacity: 0;
    transform: scale(0.58);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.values-coverflow-controls {
  display: grid;
  grid-template-columns: 56px minmax(80px, 1fr) 56px;
  align-items: center;
  gap: 18px;
  width: min(300px, 100%);
  margin: 12px auto 0;
}

.values-coverflow-controls p {
  margin: 0;
  color: rgba(250, 250, 250, 0.48);
  font: 700 0.72rem/1.4 Space Grotesk, Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.values-coverflow-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(110deg, #00c5d4 0%, #f39a47 100%);
  color: #05071f;
  font: 800 1.08rem/1 Montserrat, Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 197, 212, 0.12), 0 8px 24px rgba(243, 154, 71, 0.09);
  cursor: pointer;
  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.values-coverflow-controls button:hover,
.values-coverflow-controls button:focus-visible {
  color: #05071f;
  opacity: 0.9;
  outline: 2px solid rgba(250, 250, 250, 0.82);
  outline-offset: 3px;
  transform: translateY(-2px);
}

.values-coverflow-controls button:active {
  transform: scale(0.98);
}

.values-list-mobile {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-mobile-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 24px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.value-mobile-item:first-child {
  border-top: 1px solid rgba(250, 250, 250, 0.12);
}

.value-mobile-item:nth-child(even) {
  border-color: rgba(250, 250, 250, 0.12);
}

.value-mobile-item .value-number {
  position: static;
  align-self: start;
  padding-top: 4px;
  color: rgba(250, 250, 250, 0.38);
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.value-mobile-item:nth-child(even) .value-number {
  color: rgba(250, 250, 250, 0.38);
}

.value-copy {
  position: relative;
  z-index: 1;
}

.value-copy h3 {
  margin: 0 0 10px;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(1.02rem, 4.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.value-copy p {
  max-width: 48ch;
  margin: 0;
  color: rgba(250, 250, 250, 0.75);
  font-size: 0.93rem;
  line-height: 1.55;
}

.recruitment {
  position: relative;
  display: flex;
  min-height: clamp(420px, 55vh, 640px);
  padding: clamp(72px, 9vw, 108px) 24px;
  overflow: hidden;
  isolation: isolate;
  background: #05071f;
}

.recruitment-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.recruitment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #05071f 0%, rgba(5, 7, 31, 0.5) 18%, rgba(5, 7, 31, 0.3) 48%, rgba(5, 7, 31, 0.58) 78%, #05071f 100%);
}

.recruitment-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: clamp(22px, 3vw, 32px);
  width: min(1080px, 100%);
  margin: 0 auto;
}

.recruitment-inner::before {
  content: "";
  position: absolute;
  inset: -34px auto -34px -42px;
  z-index: -1;
  width: min(650px, 62%);
  border-radius: 54px;
  background: rgba(5, 7, 31, 0.34);
  box-shadow: 0 0 54px 34px rgba(5, 7, 31, 0.38);
  pointer-events: none;
}

.recruitment-copy h2 {
  max-width: 100%;
  margin: 0;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0;
  text-transform: uppercase;
}

.recruitment-copy h2 > span {
  display: block;
}

.recruitment-copy p:not(.section-kicker) {
  max-width: 54ch;
  margin: 22px 0 0;
  color: rgba(250, 250, 250, 0.86);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

.recruitment-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: 8px;
  color: var(--vic-deep);
  font-weight: 900;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--vic-cyan), var(--vic-orange));
  box-shadow: 0 0 30px rgba(0, 197, 212, 0.24), 0 0 58px rgba(245, 147, 0, 0.18);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.recruitment-cta:hover,
.recruitment-cta:focus-visible {
  border-color: rgba(250, 250, 250, 0.16);
  box-shadow: 0 0 42px rgba(0, 197, 212, 0.32), 0 0 78px rgba(245, 147, 0, 0.24);
  transform: translateY(-2px);
}

.contact {
  position: relative;
  padding: clamp(76px, 9vw, 112px) 24px clamp(72px, 8vw, 96px);
  overflow: hidden;
  isolation: isolate;
  background: #05071f;
}

.contact-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.78fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: start;
  width: min(1160px, 100%);
  margin: 0 auto;
}

.contact-copy h2 {
  margin: 0;
  max-width: 13.6em;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 3vw, 2.64rem);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: 0;
  padding-bottom: 0.04em;
  text-transform: uppercase;
}

.contact-copy h2 > span {
  display: block;
  white-space: nowrap;
}

.contact-title-shiny {
  background: linear-gradient(100deg, var(--vic-gold) 38%, var(--vic-cyan) 50%, var(--vic-gold) 62%);
  background-size: 200% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--vic-gold);
  text-shadow: 0 0 20px rgba(0, 197, 212, 0.08);
}

.contact.is-motion-active .contact-title-shiny {
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* ponytail: trigger the contact headline shimmer from the existing reveal class instead of adding a second observer path. */
  animation: shiny-sweep 2.4s linear infinite 0.35s;
}

.contact-copy p:not(.section-kicker) {
  max-width: 52ch;
  margin: 24px 0 0;
  color: rgba(250, 250, 250, 0.76);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

.contact-direct {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin-top: clamp(34px, 4vw, 48px);
}

.contact-direct > :last-child {
  grid-column: 1 / -1;
}

.contact-direct a,
.contact-direct p {
  display: grid;
  gap: 6px;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

.contact-direct span {
  color: var(--vic-cyan);
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-direct strong {
  color: rgba(250, 250, 250, 0.86);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.55;
}

.contact-direct a:hover strong,
.contact-direct a:focus-visible strong {
  color: var(--vic-gold);
}

.contact-form {
  position: relative;
  display: grid;
  gap: 10px;
  padding: clamp(26px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: 12px;
  background: rgba(7, 11, 40, 0.92);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.28);
}

.contact-form label {
  color: rgba(250, 250, 250, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(250, 250, 250, 0.18);
  border-radius: 8px;
  color: var(--vic-white);
  background: #080c2a;
  font: inherit;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.contact-form input {
  min-height: 48px;
  padding: 0 14px;
}

.contact-form textarea {
  min-height: 150px;
  padding: 13px 14px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(0, 197, 212, 0.82);
  background: rgba(0, 197, 212, 0.055);
  box-shadow: 0 0 0 3px rgba(0, 197, 212, 0.12), 0 0 24px rgba(201, 162, 39, 0.08);
}

.contact-form button {
  justify-self: start;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  color: var(--vic-navy);
  background: linear-gradient(90deg, var(--vic-cyan), var(--vic-orange));
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: filter 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-form button:hover,
.contact-form button:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0, 197, 212, 0.16), 0 0 36px rgba(245, 147, 0, 0.1);
}

.site-footer {
  position: relative;
  padding: 28px 24px;
  background: #020316;
  border-top: 0;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1160px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 250, 250, 0.12) 16%, rgba(250, 250, 250, 0.12) 84%, transparent);
  pointer-events: none;
  transform: translateX(-50%);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(36px, 6vw, 84px);
  width: min(1160px, 100%);
  margin: 0 auto;
  color: rgba(250, 250, 250, 0.66);
  font-size: 0.86rem;
  line-height: 1.5;
}

.site-footer p,
.site-footer a {
  margin: 0;
}

.site-footer p {
  color: rgba(250, 250, 250, 0.78);
  font-weight: 600;
}

.site-footer-brand {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.site-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
}

.site-footer-logo img {
  width: 44px;
  height: auto;
}

.site-footer-logo span {
  color: var(--vic-white);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer-copyright {
  color: rgba(250, 250, 250, 0.48) !important;
  font-size: 0.68rem;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

.site-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.site-footer-social-icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("assets/footer/new-social-media-logo-icon-collection-colour/Logos.jpg");
  background-repeat: no-repeat;
  /* Crop slightly inside each source circle so the white sprite gutters never reach the mask edge. */
  background-size: 600% 600%;
}

.social-icon-facebook {
  background-position: 63.15% 10.9%;
}

.social-icon-linkedin {
  background-position: 10.9% 36.9%;
}

.social-icon-youtube {
  background-position: 36.9% 36.9%;
}

.site-footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.site-footer-social:hover,
.site-footer-social:focus-visible {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 18px rgba(0, 197, 212, 0.12);
  transform: translateY(-2px);
}

.site-footer-social:focus-visible {
  outline: 2px solid var(--vic-cyan);
  outline-offset: 3px;
}

.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px clamp(26px, 4vw, 58px);
  width: min(430px, 100%);
}

.site-footer-nav a {
  color: rgba(250, 250, 250, 0.66);
  font-family: Space Grotesk, Inter, system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer a {
  color: rgba(250, 250, 250, 0.74);
  font-weight: 700;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--vic-gold);
}

.site-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(28px, 4vw, 54px);
  min-width: 0;
}

.reveal {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-opacity {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-opacity.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-loader-logo,
  .site-loader,
  .site-loader-progress,
  .site-loader-progress > span {
    animation: none;
    transition-duration: 0.01ms;
  }

  .site-loader-logo {
    opacity: 1;
    filter: none;
  }

  .site-loader-progress {
    opacity: 1;
  }

  .site-loader-progress > span {
    transform: scaleX(1);
  }

  .motion-managed {
    translate: 0 0;
    scale: 1;
  }

  .reveal,
  .reveal-opacity {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .manifesto-row.reveal {
    transform: none;
    transition: none;
  }

  .manifesto-heading.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .manifesto-label,
  .manifesto-text {
    opacity: 1;
    transform: none;
  }

  .values-coverflow-stage::before {
    transition: none;
  }

  .value-coverflow-card.is-active .value-card-index,
  .value-coverflow-card.is-active .value-card-object,
  .value-coverflow-card.is-active .value-card-title,
  .value-coverflow-card.is-active .value-card-description {
    animation: none;
  }

  .value-coverflow-card.is-active .value-card-object {
    --value-parallax-x: 0px;
    --value-parallax-y: 0px;
  }

  .value-coverflow-card.is-active :is(
    .value-compass-needle,
    .value-compass-star,
    .value-shield-shell,
    .value-shield-check,
    .value-scale-bar,
    .value-data-route,
    .value-data-node,
    .value-focus-eye,
    .value-focus-iris,
    .value-focus-scan,
    .value-handshake-left,
    .value-handshake-right,
    .value-handshake-lock
  ) {
    animation: none;
  }

  .values-radial-node,
  .values-radial-spoke,
  .value-coverflow-card,
  .value-list-row,
  .value-list-row::before,
  .values-detail-nav button,
  .value-mobile-item,
  .value-card-object,
  .value-copy h3,
  .value-copy p {
    transition: none;
  }
}

@keyframes topbarReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -22px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes loader-logo-fade {
  from {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes loader-progress-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1);
  }
}

@keyframes loader-progress-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes about-edutainment-sheen {
  from {
    background-position: 150% 0;
    font-variation-settings: "wght" 700;
  }

  to {
    background-position: -50% 0;
    font-variation-settings: "wght" 850;
  }
}

@keyframes copyRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes star-spin {
  to {
    --star-a: 360deg;
  }
}

@keyframes values-orb-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes about-edutainment-lock-left {
  from {
    transform: translateX(-52px) rotateY(-7deg) scale(0.9);
  }

  to {
    transform: translateX(0) rotateY(0) scale(1);
  }
}

@keyframes about-edutainment-lock-right {
  from {
    transform: translateX(52px) rotateY(7deg) scale(0.9);
  }

  to {
    transform: translateX(0) rotateY(0) scale(1);
  }
}

@keyframes about-edutainment-lock-mark {
  0% {
    transform: translateY(12px) scaleX(0.25) scaleY(0.5);
    opacity: 0;
  }

  70% {
    transform: translateY(0) scaleX(1.18) scaleY(1);
    opacity: 0.82;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Section-title system: one display scale for every homepage chapter. */
:root {
  --section-title-size: clamp(2.55rem, 4.3vw, 4rem);
}

:is(#ecosystem-title, #about-title, #manifesto-title, #values-title, #recruitment-title, #contact-title) {
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.18em 0.035em 0.16em;
  overflow: visible;
  color: var(--vic-gold);
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-size: var(--section-title-size);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 0 30px rgba(201, 162, 39, 0.14), 0 0 58px rgba(0, 197, 212, 0.07);
}

:is(#recruitment-title, #contact-title) {
  --dynamic-weight-from: 700;
  --dynamic-weight-to: 850;
  font-optical-sizing: auto;
}

#values-title {
  --dynamic-shiny-duration: 7s;
}

:is(#ecosystem-title, #about-title, #manifesto-title, #recruitment-title, #contact-title) {
  --dynamic-shiny-duration: 11s;
  --dynamic-shiny-accent: #66b8bd;
}

#contact-title > span {
  white-space: normal;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .values-radial-shell {
    grid-template-columns: minmax(220px, 0.7fr) minmax(430px, 1.3fr);
  }

  .values-radial-detail {
    grid-column: 1 / -1;
    width: min(720px, 100%);
    min-height: 250px;
    margin: 12px auto 0;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  :root {
    --section-title-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  .topbar {
    grid-template-columns: auto;
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding-top: 104px;
  }

  .ecosystem {
    padding: 72px 0;
  }

  .manifesto-inner {
    grid-template-columns: 1fr;
    gap: 52px;
    width: 100%;
    min-height: 0;
    padding: 20px 28px 88px;
  }

  .manifesto-heading {
    width: 100%;
    padding: 76px 28px 8px;
  }

  .manifesto-heading h2 {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  .values-inner {
    width: 100%;
  }

  .manifesto-row {
    max-width: 680px;
    min-height: 0;
    padding: 38px 0 10px;
  }

  .manifesto-row-divider {
    justify-self: end;
    margin-top: 48px;
    border: 0;
    padding: 38px 0 10px;
  }

  .manifesto-globe {
    inset: 2% -28% -2%;
    transform: translateY(5%);
  }

  .values-heading {
    max-width: 680px;
  }

  .values-radial-shell {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .values-list-desktop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(680px, 100%);
    margin: 0 auto;
  }

  .values-list-desktop li:nth-child(2) {
    border-top: 1px solid rgba(250, 250, 250, 0.1);
  }

  .values-list-desktop li:nth-child(odd) {
    border-right: 1px solid rgba(250, 250, 250, 0.1);
  }

  .values-radial {
    width: min(500px, 90vw);
    min-width: 0;
    --values-radius: clamp(156px, 26vw, 200px);
  }

  .values-radial-detail {
    width: min(680px, 100%);
    min-height: 250px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .recruitment-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contact-copy h2 {
    max-width: 100%;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
  }

  .site-footer-nav {
    justify-self: start;
  }

  .site-footer-actions {
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .values-radial-shell {
    display: none;
  }

  .values-list-mobile {
    display: none;
  }

  .values-coverflow {
    min-height: 565px;
  }

  .values-coverflow-stage {
    height: 490px;
  }

  .values-coverflow-stage::before {
    width: min(380px, 76vw);
    height: 230px;
  }

  .value-coverflow-card {
    width: min(300px, calc(100% - 48px));
    height: 390px;
  }

  .value-card-index {
    top: 23px;
    left: 25px;
  }

  .value-card-object {
    top: 10px;
    right: -22px;
    width: 200px;
    height: 200px;
  }

  .value-card-copy {
    right: 25px;
    bottom: 26px;
    left: 25px;
  }

  .value-coverflow-card.is-prev {
    transform: translate(-50%, -50%) translateX(-205px) translateZ(-80px) rotateY(15deg) rotateZ(-3deg) scale(0.82);
  }

  .value-coverflow-card.is-next {
    transform: translate(-50%, -50%) translateX(205px) translateZ(-80px) rotateY(-15deg) rotateZ(3deg) scale(0.82);
  }

  .value-coverflow-card.is-prev-2 {
    transform: translate(-50%, -50%) translateX(-340px) translateZ(-210px) rotateY(18deg) rotateZ(-5deg) scale(0.65);
  }

  .value-coverflow-card.is-next-2 {
    transform: translate(-50%, -50%) translateX(340px) translateZ(-210px) rotateY(-18deg) rotateZ(5deg) scale(0.65);
  }

  .values-coverflow-controls {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }

  .values-coverflow-controls p {
    font-size: 0.64rem;
  }
}

@media (max-width: 560px) {
  :root {
    --section-title-size: clamp(2rem, 9.5vw, 2.65rem);
  }

  .manifesto-row {
    min-height: 0;
    padding: 28px 0 8px;
  }

  .manifesto-row-divider {
    margin-top: 24px;
    padding: 28px 0 8px;
  }

  .manifesto-inner {
    gap: 38px;
    padding: 12px 20px 72px;
  }

  .manifesto-heading {
    padding: 68px 20px 4px;
  }

  .manifesto-heading h2 {
    font-size: clamp(1.85rem, 10vw, 2.6rem);
    line-height: 1.16;
  }

  .topbar {
    top: 10px;
    width: calc(100% - 20px);
    gap: 10px;
    padding: 8px 10px;
  }

  .brand-mark {
    width: 38px;
  }

  .brand-name {
    max-width: 190px;
    overflow: visible;
    font-size: 0.64rem;
    line-height: 1.12;
    white-space: normal;
  }

  .hero {
    padding: 92px 18px 0;
  }

  .hero-video {
    inset: -4%;
    width: 108%;
    height: 108%;
    object-position: 50% 54%;
  }

  .hero-copy {
    width: min(100%, calc(100vw - 36px));
  }

  .hero h1 {
    font-size: clamp(1.12rem, 5.3vw, 1.38rem);
    line-height: 1.16;
  }

  .hero-cta {
    min-height: 44px;
    margin-top: 24px;
    padding: 0 18px;
  }

  .ecosystem-header {
    width: min(100%, calc(100vw - 36px));
    margin-bottom: 32px;
    text-align: left;
  }

  .ecosystem-logo {
    width: 100px;
    height: 38px;
  }

  .ecosystem-logo-xgame {
    width: 122px;
    height: 38px;
  }

  .ecosystem-logo-strip {
    justify-content: flex-start;
    gap: 22px;
  }

  .ecosystem-marquee {
    gap: 16px;
  }

  .ecosystem-set {
    gap: 16px;
    padding-right: 16px;
  }

  .ecosystem-set img {
    width: 236px;
  }

  .about-fact-value {
    font-size: clamp(4rem, 18vw, 4.7rem);
  }

  .about-fact-label {
    font-size: 0.98rem;
  }

  .about-copy::before {
    inset: -22px -16px;
    border-radius: 32px;
    background: rgba(5, 7, 31, 0.44);
    box-shadow: 0 0 36px 22px rgba(5, 7, 31, 0.42);
  }

  .manifesto-globe-canvas {
    opacity: 0.56;
  }

  .values {
    padding: 108px 18px 72px;
    scroll-margin-top: 72px;
  }

  .values-heading {
    margin-bottom: 26px;
  }

  .values-heading h2 {
    font-size: clamp(1.75rem, 9vw, 2.35rem);
  }

  .values-title-shiny {
    display: inline;
    padding: 0;
    line-height: 1.22;
  }

  .values-coverflow {
    min-height: 505px;
  }

  .values-coverflow-stage {
    height: 430px;
  }

  .values-coverflow-stage::before {
    width: min(280px, 76vw);
    height: 210px;
  }

  .value-coverflow-card {
    width: min(320px, calc(100% - 30px));
    height: 400px;
  }

  .value-coverflow-card:not(.is-active) {
    opacity: 0;
    pointer-events: none;
  }

  .value-card-index {
    top: 23px;
    left: 25px;
  }

  .value-card-object {
    top: 8px;
    right: -22px;
    width: 198px;
    height: 198px;
  }

  .value-card-copy {
    right: 25px;
    bottom: 24px;
    left: 25px;
    gap: 10px;
  }

  .value-card-title {
    max-width: 12ch;
    font-size: clamp(1.5rem, 7vw, 1.82rem);
  }

  .value-card-description {
    font-size: 0.78rem;
    line-height: 1.48;
  }

  .values-coverflow-controls p {
    max-width: 18ch;
    justify-self: center;
  }

  .values-coverflow-controls {
    grid-template-columns: 52px minmax(72px, 1fr) 52px;
    width: min(276px, 100%);
  }

  .values-coverflow-controls button {
    width: 52px;
    min-height: 40px;
  }

  .recruitment {
    min-height: 500px;
    padding: 72px 18px 76px;
  }

  .recruitment-video {
    object-position: 42% center;
  }

  .recruitment-inner::before {
    inset: -28px -12px;
    width: auto;
    border-radius: 36px;
    background: rgba(5, 7, 31, 0.5);
    box-shadow: 0 0 38px 24px rgba(5, 7, 31, 0.44);
  }

  .recruitment-copy h2 {
    max-width: 100%;
    font-size: clamp(1.75rem, 10vw, 2.45rem);
  }

  .recruitment-cta {
    width: 100%;
  }

  .values-heading {
    margin-bottom: 24px;
  }

  .values-heading h2 {
    font-size: clamp(1.75rem, 10vw, 2.45rem);
    white-space: normal;
  }

  .value-copy h3 {
    font-size: clamp(1.02rem, 5vw, 1.28rem);
  }

  .value-copy p {
    font-size: 0.93rem;
    line-height: 1.55;
  }

  .contact {
    padding: 72px 18px 64px;
  }

  .contact-copy h2 {
    max-width: 100%;
  }

  .contact-direct {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }

  .contact-direct > :last-child {
    grid-column: auto;
  }

  .contact-form {
    padding: 24px 20px;
  }

  .contact-form button {
    width: 100%;
  }

  .site-footer {
    padding: 24px 18px;
  }

  .site-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
  }

  .site-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  :is(#ecosystem-title, #about-title, #manifesto-title, #values-title, #recruitment-title, #contact-title) {
    font-size: var(--section-title-size);
  }
}

@media (max-width: 380px) {
  .contact-copy h2 {
    font-size: 1.45rem;
  }

  .hero h1 {
    font-size: 1.18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .brand-mark,
  .hero h1,
  .hero h1 > span,
  .hero-cta {
    opacity: 1;
    transform: none;
  }

  .topbar {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .hero h1.shiny {
    animation: none !important;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--vic-white);
  }

  .hero h1.shiny > span {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--vic-white);
  }

  .hero-cta::before {
    padding: 0;
    border: var(--star-w) solid rgba(201, 162, 39, 0.58);
    background: none;
    -webkit-mask: none;
    mask: none;
  }

  .ecosystem-track {
    animation: none !important;
    transform: none !important;
  }
}