/* V9 / A connected world, with the workspace close at hand. */
.hero-stage { height: 650px; display: block; padding: 0; }
.hero-grid { min-height: 650px; }
.hero-stage .metal-sphere, .hero-stage .stage-orbit,
.hero-stage .orbit-label, .hero-stage .lead-toast { display: none; }

.earth-visual {
  position: absolute;
  top: 0;
  left: -5px;
  width: 470px;
  height: 470px;
  max-width: calc(100% + 12px);
  aspect-ratio: 1;
  isolation: isolate;
  pointer-events: none;
  z-index: 1;
}
.globe-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.earth-visual > .globe-canvas { z-index: 2; }
.earth-halo {
  position: absolute;
  inset: 6%;
  border: 1px solid #DCE5F166;
  border-radius: 50%;
  background: radial-gradient(circle at 43% 36%, #FFFFFFC7, #EBF1FA66 58%, #DDE9FB44 77%, #DCE8F500 100%);
  box-shadow: 0 0 65px 10px #DCE7FA66, inset -15px -12px 32px #B7CBE814;
  z-index: 0;
}
.earth-orbit {
  position: absolute;
  left: -3%;
  top: -3%;
  width: 106%;
  height: 106%;
  border: 1px solid #B3C7E46B;
  border-radius: 50%;
  z-index: 3;
  animation: globe-orbit-a 36s linear infinite;
  transform: rotate(-26deg) scaleY(.46);
}
.earth-orbit.orbit-b { inset: 2%; width: 96%; height: 96%; border-color: #B4C5DD54; transform: rotate(52deg) scaleY(.34); animation: globe-orbit-b 43s linear infinite; }
.orbit-satellite { display: block; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #3E71EA; box-shadow: 0 0 0 5px #2457E60A, 0 0 12px #2457E645; }
.orbit-b .orbit-satellite { width: 4px; height: 4px; left: -2px; background: #829FCC; box-shadow: 0 0 0 4px #4A78CA08; }
.earth-coordinate { position: absolute; right: 3%; top: 10px; color: #7D8DA5; font-size: 6px; line-height: 1.6; letter-spacing: .12em; white-space: nowrap; z-index: 4; }

.earth-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 174px;
  min-height: 57px;
  padding: 12px;
  border: 1px solid #DDE5F0;
  border-radius: 9px;
  background: #FFFFFFF2;
  box-shadow: 0 10px 30px -17px #31487130;
  backdrop-filter: blur(12px);
  z-index: 5;
  pointer-events: none;
  animation: globe-note-float 7s ease-in-out infinite;
}
.earth-note > img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; flex: none; }
.earth-note > div { min-width: 0; flex: 1; }
.earth-note strong { display: block; font-size: 10px; line-height: 1.5; font-weight: 600; color: #35445B; }
.earth-note > div > span { display: block; margin-top: 2px; font-size: 7px; line-height: 1.7; color: #7B899C; }
.earth-note .signal-dot { width: 4px; height: 4px; border-radius: 50%; background: #3E71EA; flex: none; box-shadow: 0 0 0 3px #2457E609; animation: globe-signal 2.8s ease-in-out infinite; }
.note-publish { top: 118px; left: -14px; }
.note-support { top: 265px; right: -1px; animation-delay: -3s; }
.hero-stage .floating-platform { z-index: 5; width: 44px; height: 44px; border-radius: 11px; }
.hero-stage .floating-platform img { width: 27px; height: 27px; }
.hero-stage .platform-tiktok { left: 36px; top: 315px; }
.hero-stage .platform-instagram { right: 83px; top: 32px; }

/* The two-column dashboard leaves the map's upper hemisphere visible. */
.hero-stage .dashboard {
  position: absolute;
  right: 0;
  bottom: 43px;
  width: 410px;
  max-width: calc(100% - 15px);
  border-radius: 11px;
  transform: rotate(-1.25deg);
  background: #FFFFFFF7;
  box-shadow: 0 22px 60px -30px #283D653B, 0 3px 6px #29375108;
  z-index: 4;
}
.hero-stage.demo-highlight .dashboard { transform: rotate(0) translateY(-3px); }
.hero-stage .dashboard-top { padding: 12px 16px; gap: 9px; min-height: 43px; }
.hero-stage .dashboard-brand { font-size: 10px; gap: 7px; white-space: nowrap; }
.hero-stage .dashboard-brand .icon { width: 16px; height: 16px; }
.hero-stage .dashboard-live { font-size: 7px; padding: 3px 6px; white-space: nowrap; }
.hero-stage .dashboard-main { display: grid; grid-template-columns: minmax(0, .77fr) minmax(0, 1.23fr); column-gap: 14px; row-gap: 10px; padding: 16px; }
.hero-stage .dashboard-greeting { grid-column: 1 / -1; }
.hero-stage .dashboard-greeting .mono { display: block; font-size: 6px; line-height: 1.6; letter-spacing: .1em; }
.hero-stage .dashboard-greeting h3 { font-size: 17px; line-height: 1.4; letter-spacing: -.035em; margin: 5px 0 2px; }
.hero-stage .dashboard-greeting p { display: none; }
.hero-stage .dashboard-metrics { grid-column: 1; grid-row: 2 / 5; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-width: 0; padding: 0 13px 0 0; margin: 0; gap: 8px; background: transparent; border: 0; border-right: 1px solid #EBEFF5; border-radius: 0; }
.hero-stage .dashboard-metrics > div > span { display: block; font-size: 8px; line-height: 1.5; }
.hero-stage .dashboard-metrics strong { font-size: 39px; line-height: 1.15; margin: 5px 0; letter-spacing: -.05em; }
.hero-stage .dashboard-metrics strong small { font-size: 7px; margin-left: 4px; }
.hero-stage .dashboard-metrics em { display: none; }
.hero-stage .mini-chart { width: 100%; max-width: 115px; }
.hero-stage .mini-chart svg { width: 100%; height: 40px; }
.hero-stage .mini-chart .mono { display: none; }
.hero-stage .dashboard-task { grid-column: 2; grid-row: 2; gap: 7px; align-self: start; min-width: 0; }
.hero-stage .task-icon { flex: none; width: 25px; height: 25px; border-radius: 6px; }
.hero-stage .task-icon .icon { width: 12px; height: 12px; }
.hero-stage .task-text { min-width: 0; }
.hero-stage .task-text strong { font-size: 9px; line-height: 1.5; font-weight: 500; }
.hero-stage .task-text > span { font-size: 7px; line-height: 1.65; margin-top: 2px; }
.hero-stage .task-wave { display: none; }
.hero-stage .demo-progress { grid-column: 2; grid-row: 3; margin: 0; height: 3px; align-self: start; }
.hero-stage .dashboard-feed { grid-column: 2; grid-row: 4; gap: 4px; min-width: 0; }
.hero-stage .dashboard-feed > div { gap: 6px; font-size: 8px; min-height: 23px; }
.hero-stage .dashboard-feed img { width: 17px; height: 17px; border-radius: 4px; }
.hero-stage .dashboard-feed > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.hero-stage .dashboard-feed b { flex: none; font-size: 7px; }
.hero-stage .dashboard-feed b .icon { width: 8px; height: 8px; }
.hero-stage .dashboard-footer { padding: 10px 14px; gap: 6px; font-size: 7px; line-height: 1.5; }
.hero-stage .demo-caption { font-size: 6px; }
.hero-stage .demo-switch { bottom: 0; right: 8px; padding: 3px; border-radius: 7px; }
.hero-stage .demo-switch button { font-size: 8px; padding: 8px 17px; border-radius: 4px; }

/* The same world becomes a quiet backdrop for distribution and contact. */
.network-earth { position: absolute; top: 50%; left: 50%; width: 75%; max-width: 350px; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .56; pointer-events: none; z-index: 0; }
.network-lines { z-index: 1; }
.contact-section { position: relative; isolation: isolate; overflow: hidden; }
.contact-earth { position: absolute; width: 620px; height: 620px; top: -55px; right: -110px; opacity: .24; pointer-events: none; z-index: -1; }
.contact-layout { position: relative; z-index: 1; }

@keyframes globe-orbit-a { from { transform: rotate(-26deg) scaleY(.46) rotate(0deg); } to { transform: rotate(-26deg) scaleY(.46) rotate(360deg); } }
@keyframes globe-orbit-b { from { transform: rotate(52deg) scaleY(.34) rotate(0deg); } to { transform: rotate(52deg) scaleY(.34) rotate(-360deg); } }
@keyframes globe-note-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes globe-signal { 0%, 100% { box-shadow: 0 0 0 3px #2457E609; } 50% { box-shadow: 0 0 0 6px #2457E600; } }
.earth-visual .earth-orbit, .earth-note.motion-item,
.earth-note .signal-dot { animation-play-state: var(--motion-play-state, paused); }

@media (max-width: 1190px) {
  .hero-grid { min-height: 630px; }
  .hero-stage { height: 630px; }
  .earth-visual { width: 420px; height: 420px; left: 0; }
  .hero-stage .dashboard { width: 385px; }
  .note-publish { left: -6px; top: 108px; width: 156px; }
  .note-support { top: 249px; width: 158px; }
  .hero-stage .platform-tiktok { left: 18px; top: 293px; }
  .hero-stage .platform-instagram { right: 34px; top: 34px; }
}
@media (max-width: 960px) {
  .hero-grid { min-height: 605px; }
  .hero-stage { height: 605px; }
  .earth-visual { width: 350px; height: 350px; left: -5px; }
  .hero-stage .dashboard { width: 355px; max-width: 100%; bottom: 42px; }
  .hero-stage .dashboard-main { padding: 14px; gap: 10px; }
  .hero-stage .dashboard-greeting h3 { font-size: 15px; }
  .earth-note { width: 136px; min-height: 49px; padding: 9px; gap: 7px; }
  .earth-note strong { font-size: 9px; }
  .earth-note > div > span { font-size: 6px; }
  .earth-note > img { width: 20px; height: 20px; }
  .note-publish { top: 90px; left: -3px; }
  .note-support { top: 215px; right: -3px; }
  .hero-stage .platform-tiktok { left: 14px; top: 210px; }
  .hero-stage .platform-instagram { right: 28px; top: 26px; }
  .hero-stage .floating-platform { width: 37px; height: 37px; border-radius: 9px; }
  .hero-stage .floating-platform img { width: 24px; height: 24px; }
  .contact-earth { width: 470px; height: 470px; top: 10px; right: -150px; opacity: .2; }
}
@media (max-width: 700px) {
  .hero-title { text-align: center; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 0; }
  .hero-stage { height: 510px; margin-top: 25px; width: 100%; }
  .earth-visual { width: 310px; height: 310px; max-width: calc(100% - 14px); left: 50%; transform: translateX(-50%); }
  .earth-coordinate { top: 3px; right: -3px; font-size: 5px; letter-spacing: .08em; }
  .earth-halo { box-shadow: 0 0 35px 7px #DCE7FA66, inset -12px -10px 24px #B7CBE814; }
  .earth-orbit { border-color: #AEC5E16B; }
  .orbit-satellite { width: 4px; height: 4px; left: -2px; }
  .hero-stage .dashboard { width: 405px; max-width: calc(100% - 12px); right: 50%; bottom: 48px; transform: translateX(50%); border-radius: 10px; }
  .hero-stage.demo-highlight .dashboard { transform: translateX(50%) translateY(-3px); }
  .hero-stage .dashboard-top { padding: 11px 13px; }
  .hero-stage .dashboard-main { padding: 14px; column-gap: 12px; row-gap: 9px; }
  .hero-stage .dashboard-greeting h3 { font-size: 15px; }
  .hero-stage .dashboard-metrics { padding-right: 11px; }
  .hero-stage .dashboard-metrics strong { font-size: 36px; }
  .hero-stage .dashboard-footer { padding: 9px 12px; }
  .hero-stage .demo-switch { bottom: 0; left: 50%; right: auto; transform: translateX(-50%); max-width: 100%; }
  .hero-stage .demo-switch button { font-size: 8px; padding: 8px 14px; white-space: nowrap; }
  .earth-note { width: 112px; min-height: 34px; padding: 7px; gap: 6px; border-radius: 7px; }
  .earth-note > img { width: 17px; height: 17px; border-radius: 4px; }
  .earth-note strong { font-size: 9px; line-height: 1.4; }
  .earth-note > div > span { display: none; }
  .earth-note .signal-dot { width: 3px; height: 3px; }
  .note-publish { top: 79px; left: 0; }
  .note-support { top: 139px; right: 0; }
  .hero-stage .platform-tiktok { top: 130px; left: 18px; }
  .hero-stage .platform-instagram { top: 20px; right: 28px; }
  .hero-stage .floating-platform { width: 33px; height: 33px; border-radius: 8px; }
  .hero-stage .floating-platform img { width: 21px; height: 21px; }
  .network-earth { width: 89%; opacity: .5; }
  .contact-earth { width: 410px; height: 410px; right: -143px; top: -5px; opacity: .15; }
  html[lang="en"] .earth-note strong { font-size: 8px; }
}
@media (max-width: 380px) {
  .hero-stage { height: 500px; }
  .earth-visual { width: 280px; height: 280px; max-width: 100%; }
  .hero-stage .dashboard { max-width: calc(100% - 8px); }
  .hero-stage .dashboard-main { padding: 12px; column-gap: 10px; }
  .hero-stage .dashboard-greeting h3 { font-size: 14px; }
  .hero-stage .dashboard-metrics strong { font-size: 34px; }
  .hero-stage .dashboard-brand { font-size: 9px; }
  .hero-stage .dashboard-top { padding: 10px 12px; }
  .hero-stage .dashboard-live { font-size: 6px; }
  .hero-stage .dashboard-feed > div { font-size: 7px; gap: 4px; }
  .hero-stage .dashboard-feed b { font-size: 6px; }
  .hero-stage .task-text strong { font-size: 8px; }
  .hero-stage .task-text > span { font-size: 6px; }
  .hero-stage .demo-switch button { font-size: 7px; padding: 8px 13px; }
  .earth-note { width: 108px; }
  .note-publish { top: 71px; }
  .note-support { top: 104px; }
  .hero-stage .platform-tiktok { left: 7px; top: 105px; }
  .hero-stage .platform-instagram { right: 19px; top: 19px; }
  .earth-coordinate { font-size: 4px; right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .earth-orbit, .earth-note, .earth-note .signal-dot { animation: none !important; }
}