/* Mangix brand identity, enterprise trust and motion system — V5 */

.header-star-mark {
  display: block;
  width: 36px;
  height: 36px;
  margin-right: 1px;
  transition: transform 0.45s var(--ease), filter 0.45s ease;
}

.brand:hover .header-star-mark {
  filter: drop-shadow(0 7px 12px rgba(88, 217, 232, 0.24));
  transform: rotate(8deg) scale(1.06);
}

.about-company-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: #5548ca;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.about-company-link span {
  transition: transform 0.25s var(--ease);
}

.about-company-link:hover span {
  transform: translateX(4px);
}
.trust-section {
  position: relative;
  padding: 132px 0;
  background:
    radial-gradient(circle at 8% 10%, rgba(88, 217, 232, 0.1), transparent 28%),
    radial-gradient(circle at 92% 80%, rgba(120, 104, 242, 0.09), transparent 28%),
    #f5f8fa;
  overflow: hidden;
}

.trust-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(16, 23, 53, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 23, 53, 0.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.trust-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 0.58fr);
  align-items: end;
  gap: 74px;
}

.trust-heading h2 {
  max-width: 900px;
  margin: 14px 0 0;
  color: var(--navy);
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.trust-heading > div:last-child > p {
  margin: 0;
  color: #5d697d;
  font-size: 15px;
  line-height: 1.9;
  text-wrap: pretty;
}

.trust-heading > div:last-child > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 19px;
  color: #5548ca;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.trust-heading > div:last-child > a span {
  transition: transform 0.25s var(--ease);
}

.trust-heading > div:last-child > a:hover span {
  transform: translateX(4px);
}

.company-facts {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 0.82fr 0.82fr 1fr;
  margin-top: 58px;
  border: 1px solid rgba(16, 23, 53, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 55px rgba(35, 47, 75, 0.07);
  overflow: hidden;
}

.company-facts article {
  min-width: 0;
  padding: 24px;
  border-right: 1px solid rgba(16, 23, 53, 0.07);
}

.company-facts article:last-child { border-right: 0; }
.company-facts span,
.company-facts strong,
.company-facts small { display: block; }
.company-facts span { color: #7970dc; font-size: 7px; font-weight: 900; letter-spacing: 0.15em; }
.company-facts strong { margin-top: 8px; color: #222d45; font-size: 15px; text-wrap: balance; }
.company-facts small { margin-top: 5px; color: #8a93a3; font-size: 9px; }

.evidence-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: 16px;
  margin-top: 16px;
}

.evidence-card {
  min-width: 0;
  padding: 29px;
  border: 1px solid rgba(16, 23, 53, 0.08);
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(35, 47, 75, 0.06);
}

.evidence-card-heading span {
  color: #7970dc;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.evidence-card-heading h3 {
  margin: 7px 0 0;
  color: #1f2942;
  font-size: 21px;
  text-wrap: balance;
}

.evidence-process ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.evidence-process li {
  position: relative;
  min-width: 0;
  padding: 0 17px;
  border-left: 1px solid rgba(16, 23, 53, 0.08);
}

.evidence-process li:first-child { padding-left: 0; border-left: 0; }
.evidence-process li > span { display: grid; width: 32px; height: 32px; place-items: center; color: #6154d1; border-radius: 10px; background: rgba(120, 104, 242, 0.08); font-size: 8px; font-weight: 900; }
.evidence-process li strong,
.evidence-process li small,
.evidence-process li > i { display: block; }
.evidence-process li strong { margin-top: 13px; color: #2b364d; font-size: 11px; }
.evidence-process li small { margin-top: 5px; color: #7b8596; font-size: 8px; line-height: 1.55; text-wrap: pretty; }
.evidence-process li > i { margin-top: 13px; color: #a0a8b5; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: 0.12em; }

.principle-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.principle-list > p {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: #f5f7fa;
}

.principle-list > p > i { display: grid; width: 32px; height: 32px; place-items: center; color: #564ac7; border-radius: 10px; background: #fff; font-style: normal; box-shadow: 0 4px 12px rgba(35, 47, 75, 0.06); }
.principle-list strong,
.principle-list small { display: block; }
.principle-list strong { color: #344057; font-size: 10px; }
.principle-list small { margin-top: 4px; color: #7d8798; font-size: 8px; line-height: 1.5; text-wrap: pretty; }

.brand-system-section {
  position: relative;
  padding: 136px 0;
  color: #fff;
  background: #08122b;
  overflow: hidden;
}

.brand-system-grid {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(88, 217, 232, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 217, 232, 0.035) 1px, transparent 1px), radial-gradient(circle at 23% 45%, rgba(88, 217, 232, 0.13), transparent 31%), radial-gradient(circle at 81% 65%, rgba(120, 104, 242, 0.18), transparent 30%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.brand-system-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(540px, 1.05fr) minmax(430px, 0.95fr);
  align-items: center;
  gap: 92px;
}

.brand-mark-stage {
  position: relative;
  min-height: 640px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 38px;
  background: radial-gradient(circle at center, rgba(88, 217, 232, 0.13), transparent 33%), rgba(255, 255, 255, 0.025);
  box-shadow: 0 42px 95px rgba(0, 4, 20, 0.5), inset 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.18s ease-out;
}

.brand-mark-stage::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 27px;
  pointer-events: none;
}

.brand-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(88, 217, 232, 0.21);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-17deg);
}

.orbit-a { width: 82%; height: 45%; animation: brandOrbitA 15s linear infinite; }
.orbit-b { width: 58%; height: 78%; border-color: rgba(120, 104, 242, 0.2); animation: brandOrbitB 19s linear infinite; }

@keyframes brandOrbitA { to { transform: translate(-50%, -50%) rotate(343deg); } }
@keyframes brandOrbitB { to { transform: translate(-50%, -50%) rotate(-377deg); } }

.brand-mark-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 270px;
  height: 270px;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(124, 230, 186, 0.24);
  border-radius: 50%;
  background: rgba(7, 17, 40, 0.72);
  box-shadow: 0 0 90px rgba(88, 217, 232, 0.16), inset 0 0 60px rgba(120, 104, 242, 0.08);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
}

.brand-mark-core img { display: block; margin: 0 auto; filter: drop-shadow(0 15px 25px rgba(88, 217, 232, 0.2)); }
.brand-mark-core span { margin-top: 6px; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.28em; }

.brand-meaning {
  position: absolute;
  z-index: 4;
  min-width: 125px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(15, 29, 65, 0.76);
  box-shadow: 0 14px 30px rgba(0, 4, 20, 0.27);
  backdrop-filter: blur(14px);
}

.brand-meaning span,
.brand-meaning strong,
.brand-meaning small { display: block; }
.brand-meaning span { color: var(--mint); font-size: 7px; font-weight: 900; }
.brand-meaning strong { margin-top: 4px; color: #fff; font-size: 12px; }
.brand-meaning small { margin-top: 3px; color: rgba(220, 233, 250, 0.55); font-size: 8px; }
.meaning-vision { top: 11%; left: 7%; }
.meaning-story { top: 28%; right: 5%; }
.meaning-growth { bottom: 10%; left: 16%; }

.brand-system-copy h2 {
  max-width: 690px;
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(46px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.brand-system-copy > p:not(.section-kicker) {
  max-width: 660px;
  margin: 25px 0 0;
  color: rgba(225, 236, 252, 0.68);
  font-size: 15px;
  line-height: 1.9;
  text-wrap: pretty;
}

.brand-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 28px;
}

.brand-values span {
  min-width: 0;
  padding: 13px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.brand-values i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(124, 230, 186, 0.5); }
.brand-values span:nth-child(2) i { background: var(--cyan); }
.brand-values span:nth-child(3) i { background: var(--coral); }
.brand-values span:nth-child(4) i { background: var(--violet); }
.brand-values strong,
.brand-values small { display: block; }
.brand-values strong { margin-top: 9px; color: #fff; font-size: 10px; }
.brand-values small { margin-top: 2px; color: rgba(221, 233, 249, 0.42); font-size: 7px; }

.brand-spectrum {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 23px;
  padding-top: 21px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.spectrum-label { width: 75px; flex: 0 0 auto; color: rgba(218, 232, 250, 0.45); font-size: 7px; font-weight: 900; line-height: 1.4; letter-spacing: 0.12em; }
.brand-spectrum > i { position: relative; height: 34px; flex: 1; border-radius: 9px; font-style: normal; transition: flex-grow 0.35s var(--ease); }
.brand-spectrum > i:hover { flex-grow: 1.6; }
.brand-spectrum > i b { position: absolute; right: 6px; bottom: 5px; color: rgba(255, 255, 255, 0.8); font-size: 6px; font-weight: 700; white-space: nowrap; }
.spectrum-navy { background: #101735; }
.spectrum-cyan { background: #58d9e8; }
.spectrum-mint { background: #7ce6ba; }
.spectrum-violet { background: #7868f2; }
.spectrum-coral { background: #ff8d7d; }

.learning-companions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
}

.companion-title { grid-column: 1 / -1; color: rgba(218, 232, 250, 0.45); font-size: 7px; font-weight: 900; letter-spacing: 0.13em; }
.learning-companions > div { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 13px; background: rgba(255, 255, 255, 0.03); }
.companion-avatar { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; border-radius: 12px; font-size: 11px; font-style: normal; font-weight: 900; }
.xiaoman { background: linear-gradient(145deg, var(--mint), #4c91d6); }
.xiaoxing { background: linear-gradient(145deg, var(--cyan), var(--violet)); }
.star-helper { background: linear-gradient(145deg, var(--yellow), var(--coral)); }
.learning-companions p { min-width: 0; margin: 0; }
.learning-companions strong,
.learning-companions small { display: block; }
.learning-companions strong { color: #fff; font-size: 9px; white-space: nowrap; }
.learning-companions small { margin-top: 3px; color: rgba(221, 233, 250, 0.46); font-size: 7px; line-height: 1.4; text-wrap: pretty; }

/* Motion layer */
.site-reading-progress {
  position: fixed;
  z-index: 150;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--mint), var(--cyan), var(--violet), var(--coral));
  box-shadow: 0 0 12px rgba(88, 217, 232, 0.5);
}

.motion-spotlight {
  position: relative;
  isolation: isolate;
}

.motion-spotlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--spot-y, 50%);
  left: var(--spot-x, 50%);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 217, 232, 0.11), transparent 68%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
}

[data-motion-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

.product-card[data-motion-tilt],
.capability-card[data-motion-tilt],
.evidence-card[data-motion-tilt],
.product-detail-visual[data-motion-tilt] {
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0px));
  transition: transform 0.22s ease-out, box-shadow 0.35s ease;
}

.motion-star {
  position: fixed;
  z-index: 140;
  width: 8px;
  height: 8px;
  pointer-events: none;
  opacity: 0;
  background: var(--mint);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  animation: motionStarFade 0.85s ease-out forwards;
}

@keyframes motionStarFade {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--star-x)), calc(-50% + var(--star-y))) scale(1.15) rotate(100deg); }
}

.anime-detail-visual.is-playing > figure img,
.anime-feature-visual.is-playing img {
  animation: animeSceneDrift 7s ease-in-out infinite alternate;
}

@keyframes animeSceneDrift {
  from { transform: scale(1.01) translate3d(-0.5%, 0, 0); }
  to { transform: scale(1.07) translate3d(1.2%, -1%, 0); }
}

@media (max-width: 1080px) {
  .trust-heading,
  .brand-system-shell { grid-template-columns: 1fr; gap: 42px; }
  .trust-heading > div:last-child { max-width: 760px; }
  .company-facts { grid-template-columns: 1.2fr 1fr; }
  .company-facts article:nth-child(2) { border-right: 0; }
  .company-facts article:nth-child(-n+2) { border-bottom: 1px solid rgba(16, 23, 53, 0.07); }
  .evidence-grid { grid-template-columns: 1fr; }
  .brand-mark-stage { width: min(800px, 100%); margin: 0 auto; }
  .brand-system-copy { max-width: 850px; }
}

@media (max-width: 780px) {
  .trust-section,
  .brand-system-section { padding-top: 92px; padding-bottom: 92px; }
  .trust-heading h2,
  .brand-system-copy h2 { font-size: clamp(37px, 9.5vw, 53px); }
  .company-facts { grid-template-columns: 1fr; }
  .company-facts article { border-right: 0; border-bottom: 1px solid rgba(16, 23, 53, 0.07); }
  .company-facts article:nth-child(2) { border-right: 0; }
  .company-facts article:last-child { border-bottom: 0; }
  .evidence-process ol { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .evidence-process li:nth-child(3) { padding-left: 0; border-left: 0; }
  .brand-mark-stage { min-height: 520px; }
  .brand-mark-core { width: 220px; height: 220px; }
  .brand-mark-core img { width: 145px; height: 145px; }
  .brand-values { grid-template-columns: 1fr 1fr; }
  .learning-companions { grid-template-columns: 1fr; }
  .motion-spotlight::before { display: none; }
}

@media (max-width: 520px) {
  .header-star-mark { display: none; }
  .evidence-card { padding: 23px 18px; }
  .evidence-process ol { grid-template-columns: 1fr; }
  .evidence-process li,
  .evidence-process li:nth-child(3) { padding: 0; border-left: 0; }
  .principle-list { grid-template-columns: 1fr; }
  .brand-mark-stage { min-height: 470px; }
  .brand-mark-core { width: 180px; height: 180px; }
  .brand-mark-core img { width: 120px; height: 120px; }
  .brand-meaning { min-width: 102px; padding: 10px; }
  .meaning-vision { top: 8%; left: 5%; }
  .meaning-story { top: 25%; right: 4%; }
  .meaning-growth { bottom: 7%; left: 8%; }
  .brand-spectrum { flex-wrap: wrap; }
  .spectrum-label { width: 100%; margin-bottom: 4px; }
  .brand-spectrum > i { flex-basis: calc(33.333% - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-a,
  .orbit-b,
  .anime-detail-visual.is-playing > figure img,
  .anime-feature-visual.is-playing img { animation: none; }
  [data-motion-tilt] { transform: none !important; transition: none !important; }
  .motion-star { display: none; }
}