/* =========================================================
   UNIT 01 · MISSION BEACON HUB v3
   Controlled two-screen scroll. Fully isolated.
========================================================= */
.unit-beacon-hub-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:#eef8ff;
  background:#020916;
  font-family:Inter,"SF Pro Display","Segoe UI",Arial,sans-serif;
}
.unit-beacon-hub-slide .ubh-scroll{
  position:absolute;
  inset:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(68,222,246,.65) rgba(3,18,40,.55);
}
.unit-beacon-hub-slide .ubh-scroll::-webkit-scrollbar{width:8px}
.unit-beacon-hub-slide .ubh-scroll::-webkit-scrollbar-track{background:rgba(3,18,40,.55)}
.unit-beacon-hub-slide .ubh-scroll::-webkit-scrollbar-thumb{
  background:rgba(68,222,246,.65);
  border-radius:10px;
}
.unit-beacon-hub-slide .ubh-screen{
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:
    radial-gradient(circle at 50% 42%,rgba(8,57,111,.88) 0%,rgba(3,21,47,.98) 44%,#020916 82%);
}
.unit-beacon-hub-slide .ubh-screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 40%,rgba(28,207,255,.10),transparent 28%),
    radial-gradient(circle at 83% 40%,rgba(91,101,255,.08),transparent 30%);
}
.unit-beacon-hub-slide .ubh-grid{
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(29,206,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,206,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  transform:perspective(760px) rotateX(61deg) scale(1.55);
  transform-origin:center 68%;
}
.unit-beacon-hub-slide .ubh-screen-shell{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:100%;
  height:100%;
  padding:22px 46px 24px;
}

/* Shared typography aligned with the stable courseware. */
.unit-beacon-hub-slide .ubh-topbar{
  height:92px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1.15fr .92fr .42fr;
  align-items:center;
  gap:24px;
  border-bottom:1px solid rgba(75,218,255,.34);
  padding-bottom:13px;
}
.unit-beacon-hub-slide .ubh-unit{display:flex;flex-direction:column;align-items:flex-start}
.unit-beacon-hub-slide .ubh-unit span,
.unit-beacon-hub-slide .ubh-beacon-header span{
  color:#46e9f6;font-size:18px;font-weight:850;letter-spacing:2px;
}
.unit-beacon-hub-slide .ubh-unit strong{
  margin-top:4px;color:#fff;font-size:34px;line-height:1.03;font-weight:900;letter-spacing:.65px;
}
.unit-beacon-hub-slide .ubh-unit small{
  margin-top:5px;color:#78eef7;font-size:18px;font-weight:750;
}
.unit-beacon-hub-slide .ubh-brand{display:flex;align-items:center;justify-content:center;gap:14px}
.unit-beacon-hub-slide .ubh-brand svg{
  width:52px;height:42px;fill:none;stroke:#55e8ff;stroke-width:1.7;
  filter:drop-shadow(0 0 8px rgba(44,207,255,.4));
}
.unit-beacon-hub-slide .ubh-brand div{display:flex;flex-direction:column;align-items:flex-start}
.unit-beacon-hub-slide .ubh-brand strong{
  font-size:40px;line-height:.98;font-weight:900;letter-spacing:.9px;text-shadow:0 0 16px #2ccfff;
}
.unit-beacon-hub-slide .ubh-brand span{
  margin-top:4px;color:#26e4f4;font-size:16px;font-weight:850;letter-spacing:1.45px;
}
.unit-beacon-hub-slide .ubh-status{
  justify-self:end;min-width:196px;box-sizing:border-box;
  border:1px solid rgba(91,209,255,.52);border-radius:14px;padding:8px 14px;
  text-align:center;background:rgba(3,16,40,.54);
}
.unit-beacon-hub-slide .ubh-status span,
.unit-beacon-hub-slide .ubh-status small{
  display:block;color:#70e9f4;font-size:13px;font-weight:850;letter-spacing:1.15px;
}
.unit-beacon-hub-slide .ubh-status strong{
  display:block;margin:2px 0;font-size:26px;line-height:1;font-weight:900;color:#fff;
}

/* Screen 1 */
.unit-beacon-hub-slide .ubh-brief-main{
  height:calc(100% - 92px - 82px);
  min-height:0;
  display:grid;
  grid-template-columns:430px minmax(0,1fr);
  align-items:center;
  gap:36px;
}
.unit-beacon-hub-slide .ubh-nova-zone{
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
}
.unit-beacon-hub-slide .ubh-nova-core{
  position:relative;width:330px;height:330px;display:grid;place-items:center;
  background:radial-gradient(circle at center,rgba(30,164,255,.15),transparent 62%);
}
.unit-beacon-hub-slide .ubh-nova-ball{
  position:relative;z-index:4;width:172px;height:172px;border-radius:50%;
  border:3px solid #54e9ff;
  background:radial-gradient(circle,#2bc8ff 0,#0753bb 20%,#051633 60%);
  box-shadow:0 0 28px #16cfff,0 0 80px rgba(39,92,255,.72);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:ubhNovaBreathe 4.8s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-ball strong{font-size:35px;font-weight:900}
.unit-beacon-hub-slide .ubh-nova-ball span{font-size:16px;color:#4ef3ff;font-weight:850}
.unit-beacon-hub-slide .ubh-nova-ball em{font-size:15px;color:#7ff7ff;font-style:normal;font-weight:800}
.unit-beacon-hub-slide .ubh-nova-orbit{
  position:absolute;z-index:2;border:1px solid #43e5ff;border-radius:50%;box-shadow:0 0 12px #1cbfff;
}
.unit-beacon-hub-slide .ubh-nova-orbit i{
  position:absolute;top:50%;left:-4px;width:9px;height:9px;border-radius:50%;
  background:#b8fbff;box-shadow:0 0 8px #fff,0 0 18px #23dfff;
}
.unit-beacon-hub-slide .ubh-orbit-a{width:232px;height:232px;animation:ubhNovaSpin 15s linear infinite}
.unit-beacon-hub-slide .ubh-orbit-b{
  width:280px;height:135px;transform:rotate(28deg);animation:ubhNovaSpinB 11s linear infinite reverse;
}
.unit-beacon-hub-slide .ubh-nova-scan{
  position:absolute;z-index:1;width:310px;height:310px;border:1px dashed rgba(66,226,255,.28);
  border-radius:50%;animation:ubhNovaSpin 18s linear infinite;
}
.unit-beacon-hub-slide .ubh-nova-platform{
  position:absolute;z-index:3;bottom:35px;width:240px;height:30px;border-radius:50%;
  border:3px solid #42dfff;box-shadow:0 0 25px #1bbfff,inset 0 0 20px #176cff;
}
.unit-beacon-hub-slide .ubh-brief-card{
  border:1px solid rgba(65,211,255,.42);border-radius:20px;
  background:rgba(2,14,35,.72);box-shadow:inset 0 0 28px rgba(0,169,255,.07);
  padding:28px 32px;
}
.unit-beacon-hub-slide .ubh-kicker{
  color:#49efff;font-size:17px;font-weight:900;letter-spacing:1.6px;
}
.unit-beacon-hub-slide .ubh-brief-card h2{
  margin:7px 0 14px;color:#fff;font-size:36px;line-height:1.02;font-weight:900;
}
.unit-beacon-hub-slide .ubh-lead{
  margin:0;color:#edf8ff;font-size:22px;line-height:1.38;font-weight:650;
}
.unit-beacon-hub-slide .ubh-cn{
  margin:8px 0 0;color:#66edf5;font-size:19px;line-height:1.35;font-weight:700;
}
.unit-beacon-hub-slide .ubh-rule-flow{
  margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.unit-beacon-hub-slide .ubh-rule-flow>div{
  flex:1;min-width:0;border:1px solid rgba(69,217,246,.28);border-radius:12px;
  padding:12px 10px;background:rgba(14,80,121,.15);text-align:center;
}
.unit-beacon-hub-slide .ubh-rule-flow b{
  display:block;color:#49efff;font-size:15px;font-weight:900;
}
.unit-beacon-hub-slide .ubh-rule-flow span{
  display:block;margin-top:4px;color:#fff;font-size:16px;font-weight:850;
}
.unit-beacon-hub-slide .ubh-rule-flow small{
  display:block;margin-top:3px;color:#7feef5;font-size:14px;font-weight:700;
}
.unit-beacon-hub-slide .ubh-rule-flow>i{
  color:#49efff;font-size:24px;font-style:normal;font-weight:900;
}
.unit-beacon-hub-slide .ubh-next-copy{
  margin-top:20px;padding-top:14px;border-top:1px solid rgba(62,218,255,.26);
  color:#e4faff;font-size:20px;line-height:1.3;font-weight:750;
}
.unit-beacon-hub-slide .ubh-next-copy strong{color:#49efff}
.unit-beacon-hub-slide .ubh-scroll-cue{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;
  appearance:none;border:1px solid rgba(71,230,246,.8);border-radius:999px;
  padding:9px 22px 7px;color:#fff;background:rgba(4,40,77,.88);
  box-shadow:0 0 20px rgba(40,216,255,.18);
  font-family:inherit;font-size:15px;font-weight:900;letter-spacing:1px;cursor:pointer;
}
.unit-beacon-hub-slide .ubh-scroll-cue span{display:inline-block}
.unit-beacon-hub-slide .ubh-scroll-cue b{
  display:inline-block;margin-left:12px;color:#6ff2ff;font-size:22px;animation:ubhCue 1.5s ease-in-out infinite;
}

/* Screen 2 */
.unit-beacon-hub-slide .ubh-beacon-shell{
  display:grid;grid-template-rows:92px minmax(0,1fr) 68px;gap:16px;
}
.unit-beacon-hub-slide .ubh-beacon-header{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(75,218,255,.34);padding-bottom:13px;
}
.unit-beacon-hub-slide .ubh-beacon-header>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.unit-beacon-hub-slide .ubh-beacon-header strong{
  margin-top:4px;color:#fff;font-size:34px;line-height:1.03;font-weight:900;
}
.unit-beacon-hub-slide .ubh-beacon-header small{
  margin-top:5px;color:#78eef7;font-size:18px;font-weight:750;
}
.unit-beacon-hub-slide .ubh-progress{
  min-width:185px;border:1px solid rgba(91,209,255,.52);border-radius:14px;
  padding:9px 14px;text-align:center;background:rgba(3,16,40,.54);
}
.unit-beacon-hub-slide .ubh-progress span{
  display:block;color:#70e9f4;font-size:13px;font-weight:850;letter-spacing:1.15px;
}
.unit-beacon-hub-slide .ubh-progress strong{
  display:block;margin-top:3px;color:#fff;font-size:27px;font-weight:900;
}
.unit-beacon-hub-slide .ubh-beacon-row{
  min-width:0;min-height:0;display:flex;gap:22px;align-items:stretch;
}
.unit-beacon-hub-slide .ubh-beacon-card{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  border:1px solid rgba(80,179,221,.30);border-radius:19px;
  background:linear-gradient(180deg,rgba(8,32,70,.80),rgba(2,13,33,.92));
  box-shadow:inset 0 0 30px rgba(42,174,255,.055);
  display:grid;grid-template-rows:minmax(250px,1fr) 185px;opacity:.62;
}
.unit-beacon-hub-slide .ubh-beacon-card.is-active{
  opacity:1;border-color:rgba(67,224,255,.75);
  box-shadow:0 0 24px rgba(36,218,255,.18),inset 0 0 34px rgba(42,174,255,.10);
}
.unit-beacon-hub-slide .ubh-beacon-visual{
  position:relative;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 47%,rgba(40,202,255,.16),transparent 42%);
  border-bottom:1px solid rgba(66,200,255,.14);
}
.unit-beacon-hub-slide .ubh-beacon-ring{
  position:absolute;width:178px;height:178px;border:1px dashed rgba(74,229,255,.42);
  border-radius:50%;box-shadow:0 0 24px rgba(31,202,255,.08);animation:ubhBeaconSpin 18s linear infinite;
}
.unit-beacon-hub-slide .ubh-beacon-light{
  position:absolute;z-index:5;top:42px;width:84px;height:84px;border-radius:50%;
  border:2px solid currentColor;display:grid;place-items:center;color:#6fefff;
  background:radial-gradient(circle,#38d5ff 0,#0b63ba 24%,#05182f 68%);
  box-shadow:0 0 18px currentColor,0 0 48px rgba(39,188,255,.34);
  font-size:32px;font-weight:900;
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-beacon-light{
  color:#637f9f;background:radial-gradient(circle,#56718f 0,#243f5d 30%,#08182a 70%);
  box-shadow:0 0 14px rgba(73,113,151,.18);
}
.unit-beacon-hub-slide .ubh-tower{
  position:absolute;z-index:3;top:132px;width:70px;height:115px;
  clip-path:polygon(24% 0,76% 0,94% 100%,6% 100%);border:1px solid #52e8ff;
  background:linear-gradient(90deg,rgba(58,218,255,.28),rgba(5,42,77,.82) 48%,rgba(58,218,255,.20));
  box-shadow:0 0 18px rgba(40,205,255,.22);
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-tower{
  border-color:#486887;background:linear-gradient(90deg,rgba(73,100,129,.22),rgba(8,28,48,.84));box-shadow:none;
}
.unit-beacon-hub-slide .ubh-tower i{
  position:absolute;left:12px;right:12px;height:1px;background:rgba(128,239,255,.42);
}
.unit-beacon-hub-slide .ubh-tower i:nth-child(1){top:28px}
.unit-beacon-hub-slide .ubh-tower i:nth-child(2){top:57px}
.unit-beacon-hub-slide .ubh-tower i:nth-child(3){top:86px}
.unit-beacon-hub-slide .ubh-base{
  position:absolute;z-index:2;top:238px;width:160px;height:25px;border-radius:50%;
  border:2px solid #42dfff;box-shadow:0 0 18px rgba(27,191,255,.48),inset 0 0 13px #176cff;
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-base{border-color:#45617e;box-shadow:none}
.unit-beacon-hub-slide .ubh-beam{
  position:absolute;z-index:1;top:28px;left:50%;width:280px;height:105px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,rgba(69,228,255,.18),transparent);
  clip-path:polygon(48% 45%,0 0,0 100%,48% 56%,52% 56%,100% 100%,100% 0,52% 45%);opacity:.82;
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-beam{opacity:.10}
.unit-beacon-hub-slide .ubh-beacon-copy{
  min-height:0;padding:17px 20px 15px;display:flex;flex-direction:column;align-items:flex-start;
}
.unit-beacon-hub-slide .ubh-mission-label{
  color:#58eff4;font-size:16px;font-weight:900;letter-spacing:1.5px;
}
.unit-beacon-hub-slide .ubh-beacon-copy h2{
  margin:5px 0 0;color:#fff;font-size:34px;line-height:1;font-weight:900;letter-spacing:.8px;
}
.unit-beacon-hub-slide .ubh-beacon-copy h3{
  margin:5px 0 12px;color:#63eef5;font-size:19px;line-height:1.1;font-weight:800;
}
.unit-beacon-hub-slide .ubh-path{
  margin-top:auto;color:#fff;font-size:17px;line-height:1.2;font-weight:850;
}
.unit-beacon-hub-slide .ubh-path b{color:#48e9f6}
.unit-beacon-hub-slide .ubh-beacon-copy small{
  margin-top:11px;border:1px solid currentColor;border-radius:999px;padding:5px 10px;
  color:#6fefff;font-size:13px;font-weight:900;letter-spacing:1.1px;
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-beacon-copy small{color:#6f8298}
.unit-beacon-hub-slide .ubh-beacon-footer{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid rgba(75,218,255,.34);padding-top:8px;
}
.unit-beacon-hub-slide .ubh-beacon-footer div{display:flex;flex-direction:column}
.unit-beacon-hub-slide .ubh-beacon-footer span{
  color:#46e9f6;font-size:14px;font-weight:900;letter-spacing:1.45px;
}
.unit-beacon-hub-slide .ubh-beacon-footer strong{
  margin-top:2px;color:#eaf7ff;font-size:19px;font-weight:800;
}
.unit-beacon-hub-slide #beginMission01{
  appearance:none;border:1px solid #47e6f6;border-radius:12px;padding:11px 18px;
  color:#fff;background:linear-gradient(120deg,rgba(18,156,199,.92),rgba(22,92,180,.94));
  box-shadow:0 0 18px rgba(40,216,255,.20),inset 0 0 14px rgba(101,232,255,.10);
  font-family:inherit;font-size:18px;font-weight:900;letter-spacing:.65px;cursor:pointer;
}
.unit-beacon-hub-slide #beginMission01 i{
  margin-left:10px;color:#96f8ff;font-style:normal;font-size:21px;
}
@keyframes ubhNovaBreathe{50%{filter:brightness(1.18);transform:scale(1.03)}}
@keyframes ubhNovaSpin{to{transform:rotate(360deg)}}
@keyframes ubhNovaSpinB{from{transform:rotate(28deg)}to{transform:rotate(388deg)}}
@keyframes ubhBeaconSpin{to{transform:rotate(360deg)}}
@keyframes ubhCue{50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-scroll{scroll-behavior:auto}
  .unit-beacon-hub-slide .ubh-nova-ball,
  .unit-beacon-hub-slide .ubh-nova-orbit,
  .unit-beacon-hub-slide .ubh-nova-scan,
  .unit-beacon-hub-slide .ubh-beacon-ring,
  .unit-beacon-hub-slide .ubh-scroll-cue b{animation:none!important}
}


/* Keep scrolling local without overriding Reveal's document viewport. */
.unit-beacon-hub-slide .ubh-scroll{
  max-height:100%!important;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}


/* =========================================================
   PAGE 2 · VISUAL UPGRADE v4
   NOVA matched to the enhanced Mission 01 visual language.
   Three mission-specific holographic beacons.
   All rules are strictly scoped to the Unit Hub.
========================================================= */

/* ---------- NOVA: richer Page-3-like core ---------- */
.unit-beacon-hub-slide .ubh-nova-core{
  width:360px;
  height:360px;
  isolation:isolate;
}
.unit-beacon-hub-slide .ubh-nova-ball{
  width:168px;
  height:168px;
  border:2px solid #54e9ff;
  background:
    radial-gradient(circle at 42% 35%,#7ff6ff 0 2%,#1bcbf5 3%,#0757be 22%,#041936 62%,#010817 100%);
  box-shadow:
    0 0 20px #35eaff,
    0 0 58px rgba(30,200,255,.82),
    0 0 118px rgba(30,94,255,.44),
    inset 0 0 32px rgba(80,239,255,.38);
  animation:ubhNovaBreathe 4.8s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-ball::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(122,247,255,.44);
  border-radius:50%;
  box-shadow:inset 0 0 16px rgba(66,225,255,.26);
}
.unit-beacon-hub-slide .ubh-nova-ball strong{font-size:35px}
.unit-beacon-hub-slide .ubh-nova-ball span{font-size:17px}
.unit-beacon-hub-slide .ubh-nova-ball em{font-size:15px}

.unit-beacon-hub-slide .ubh-nova-beam{
  position:absolute;
  z-index:0;
  bottom:42px;
  width:210px;
  height:275px;
  background:linear-gradient(to top,rgba(48,220,255,.30),rgba(48,220,255,.04) 72%,transparent);
  clip-path:polygon(32% 100%,68% 100%,88% 0,12% 0);
  filter:blur(8px);
  animation:ubhNovaBeam 5s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-scan{
  width:318px;
  height:318px;
  border:1px dashed rgba(66,226,255,.30);
  box-shadow:0 0 30px rgba(35,198,255,.10);
}
.unit-beacon-hub-slide .ubh-orbit-a{
  width:225px;height:225px;
  border-color:rgba(81,233,255,.72);
  animation:ubhNovaSpin 15s linear infinite;
}
.unit-beacon-hub-slide .ubh-orbit-b{
  width:278px;height:136px;
  border-color:rgba(120,132,255,.65);
  animation:ubhNovaSpinB 11s linear infinite reverse;
}
.unit-beacon-hub-slide .ubh-orbit-c{
  width:198px;height:300px;
  transform:rotate(56deg);
  border-color:rgba(72,230,255,.50);
  animation:ubhNovaSpinC 19s linear infinite;
}
.unit-beacon-hub-slide .ubh-nova-data-arc{
  position:absolute;
  z-index:1;
  width:302px;height:302px;
  border-radius:50%;
  border:2px solid transparent;
  pointer-events:none;
}
.unit-beacon-hub-slide .ubh-arc-a{
  border-top-color:rgba(66,230,255,.72);
  border-right-color:rgba(66,230,255,.17);
  animation:ubhNovaArc 13s linear infinite reverse;
}
.unit-beacon-hub-slide .ubh-arc-b{
  width:252px;height:252px;
  border-bottom-color:rgba(105,111,255,.70);
  border-left-color:rgba(66,230,255,.14);
  animation:ubhNovaArc 9s linear infinite;
}
.unit-beacon-hub-slide .ubh-nova-platform{
  bottom:26px;
  width:250px;
  height:56px;
  border:0;
  box-shadow:none;
}
.unit-beacon-hub-slide .ubh-nova-platform i{
  position:absolute;
  left:50%;
  bottom:0;
  translate:-50% 0;
  border:2px solid rgba(68,231,255,.78);
  border-radius:50%;
  box-shadow:0 0 13px #20dfff,inset 0 0 16px rgba(30,204,255,.25);
}
.unit-beacon-hub-slide .ubh-nova-platform i:nth-child(1){
  width:242px;height:42px;
  animation:ubhPlatformWave 3.5s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-platform i:nth-child(2){
  width:188px;height:31px;bottom:11px;opacity:.74;
  animation:ubhPlatformWave 3.5s .7s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-platform i:nth-child(3){
  width:126px;height:19px;bottom:23px;opacity:.62;
  animation:ubhPlatformWave 3.5s 1.4s ease-in-out infinite;
}

/* ---------- Beacon cards: stronger atmosphere ---------- */
.unit-beacon-hub-slide .ubh-beacon-card{
  grid-template-rows:minmax(292px,1fr) 176px;
  background:
    radial-gradient(circle at 50% 30%,rgba(23,132,219,.13),transparent 47%),
    linear-gradient(180deg,rgba(8,32,70,.88),rgba(2,13,33,.95));
}
.unit-beacon-hub-slide .ubh-beacon-visual{
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(4,18,45,.22),rgba(3,11,29,.52)),
    radial-gradient(circle at 50% 42%,rgba(40,202,255,.16),transparent 43%);
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-beacon-visual{
  filter:saturate(.70) brightness(.72);
}
.unit-beacon-hub-slide .ubh-beacon-aura{
  position:absolute;
  z-index:0;
  width:290px;height:290px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(38,209,255,.16) 0,rgba(24,92,194,.07) 44%,transparent 70%);
  filter:blur(2px);
}
.unit-beacon-hub-slide .ubh-energy-column{
  position:absolute;
  z-index:1;
  top:42px;
  width:116px;
  height:220px;
  background:linear-gradient(to top,rgba(47,225,255,.28),rgba(73,199,255,.10),transparent);
  clip-path:polygon(33% 100%,67% 100%,86% 0,14% 0);
  filter:blur(5px);
  animation:ubhEnergyPulse 4.6s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-beacon-core{
  position:absolute;
  z-index:8;
  top:54px;
  width:102px;height:102px;
  border:2px solid #61efff;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 40% 32%,#a3fbff 0 2%,#28cdf2 3%,#0758ba 24%,#04162f 67%,#010816 100%);
  box-shadow:
    0 0 20px rgba(67,235,255,.95),
    0 0 56px rgba(35,173,255,.55),
    inset 0 0 22px rgba(95,235,255,.25);
}
.unit-beacon-hub-slide .ubh-beacon-core::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(126,248,255,.35);
  border-radius:50%;
}
.unit-beacon-hub-slide .ubh-beacon-core span{
  font-size:31px;
  line-height:1;
  font-weight:900;
  color:#dffcff;
  text-shadow:0 0 11px #56efff;
}
.unit-beacon-hub-slide .ubh-beacon-core i{
  margin-top:6px;
  color:#76f4ff;
  font-size:10px;
  font-style:normal;
  font-weight:900;
  letter-spacing:1.2px;
}
.unit-beacon-hub-slide .ubh-beacon-spine{
  position:absolute;
  z-index:5;
  top:151px;
  width:78px;height:114px;
  clip-path:polygon(24% 0,76% 0,94% 100%,6% 100%);
  border:1px solid rgba(87,231,255,.78);
  background:
    linear-gradient(90deg,rgba(51,215,255,.30),rgba(5,36,72,.92) 48%,rgba(51,215,255,.24));
  box-shadow:0 0 20px rgba(37,201,255,.24);
}
.unit-beacon-hub-slide .ubh-beacon-spine i{
  position:absolute;
  left:13px;right:13px;height:1px;
  background:rgba(132,242,255,.46);
}
.unit-beacon-hub-slide .ubh-beacon-spine i:nth-child(1){top:22px}
.unit-beacon-hub-slide .ubh-beacon-spine i:nth-child(2){top:45px}
.unit-beacon-hub-slide .ubh-beacon-spine i:nth-child(3){top:68px}
.unit-beacon-hub-slide .ubh-beacon-spine i:nth-child(4){top:91px}
.unit-beacon-hub-slide .ubh-beacon-orbit{
  position:absolute;
  z-index:4;
  border-radius:50%;
  border:1px solid rgba(78,229,255,.47);
  box-shadow:0 0 15px rgba(49,204,255,.15);
}
.unit-beacon-hub-slide .ubh-bo-a{
  width:190px;height:190px;
  animation:ubhBeaconOrbitA 15s linear infinite;
}
.unit-beacon-hub-slide .ubh-bo-b{
  width:246px;height:112px;
  transform:rotate(27deg);
  border-color:rgba(93,119,255,.42);
  animation:ubhBeaconOrbitB 12s linear infinite reverse;
}
.unit-beacon-hub-slide .ubh-holo-platform{
  position:absolute;
  z-index:7;
  top:252px;
  width:205px;height:45px;
}
.unit-beacon-hub-slide .ubh-holo-platform i{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  border:1.5px solid rgba(66,225,255,.72);
  border-radius:50%;
  box-shadow:0 0 11px rgba(39,210,255,.62),inset 0 0 11px rgba(39,210,255,.18);
}
.unit-beacon-hub-slide .ubh-holo-platform i:nth-child(1){width:196px;height:34px}
.unit-beacon-hub-slide .ubh-holo-platform i:nth-child(2){width:150px;height:25px;bottom:8px;opacity:.72}
.unit-beacon-hub-slide .ubh-holo-platform i:nth-child(3){width:96px;height:15px;bottom:17px;opacity:.56}
.unit-beacon-hub-slide .ubh-signal-label{
  position:absolute;
  z-index:8;
  bottom:14px;
  color:rgba(105,239,250,.72);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.6px;
}

/* MISSION 01 · radar/exploration identity */
.unit-beacon-hub-slide .ubh-beacon-explore .ubh-radar-sweep{
  position:absolute;
  z-index:3;
  width:246px;height:246px;
  border-radius:50%;
  background:conic-gradient(from 10deg,transparent 0 75%,rgba(65,231,255,.24) 90%,transparent 100%);
  mask:radial-gradient(circle,transparent 0 51%,#000 52% 53%,transparent 54%);
  animation:ubhRadar 5.5s linear infinite;
}
.unit-beacon-hub-slide .ubh-beacon-card.is-active .ubh-beacon-explore::after{
  content:"";
  position:absolute;
  z-index:2;
  width:255px;height:255px;
  border-radius:50%;
  border:1px dashed rgba(76,230,255,.30);
  animation:ubhBeaconOrbitA 18s linear infinite reverse;
}

/* MISSION 02 · scanner/analysis identity */
.unit-beacon-hub-slide .ubh-beacon-question .ubh-cross-scan{
  position:absolute;
  z-index:3;
  width:255px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(119,160,255,.72),transparent);
  box-shadow:0 0 11px rgba(95,154,255,.42);
}
.unit-beacon-hub-slide .ubh-beacon-question .ubh-cross-a{
  transform:rotate(28deg);
  animation:ubhScanCross 4.8s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-beacon-question .ubh-cross-b{
  transform:rotate(-28deg);
  animation:ubhScanCross 4.8s 1.2s ease-in-out infinite reverse;
}
.unit-beacon-hub-slide .ubh-analysis-prism{
  position:absolute;
  z-index:2;
  top:76px;
  width:172px;height:155px;
  clip-path:polygon(50% 0,100% 82%,50% 100%,0 82%);
  border:1px solid rgba(104,162,255,.28);
  background:linear-gradient(135deg,rgba(83,91,255,.055),rgba(63,213,255,.035));
  filter:drop-shadow(0 0 12px rgba(82,151,255,.15));
}

/* MISSION 03 · network identity */
.unit-beacon-hub-slide .ubh-network-globe{
  position:absolute;
  z-index:3;
  top:46px;
  width:226px;height:226px;
  border:1px solid rgba(73,225,255,.20);
  border-radius:50%;
  animation:ubhNetworkFloat 5s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-network-globe::before,
.unit-beacon-hub-slide .ubh-network-globe::after{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(76,219,255,.18);
  border-radius:50%;
}
.unit-beacon-hub-slide .ubh-network-globe::after{
  inset:57px 18px;
}
.unit-beacon-hub-slide .ubh-node{
  position:absolute;
  z-index:4;
  width:8px;height:8px;border-radius:50%;
  background:#7af5ff;
  box-shadow:0 0 8px #64edff,0 0 15px rgba(73,166,255,.7);
}
.unit-beacon-hub-slide .n1{left:24px;top:94px}
.unit-beacon-hub-slide .n2{right:25px;top:78px}
.unit-beacon-hub-slide .n3{left:59px;top:35px}
.unit-beacon-hub-slide .n4{right:58px;bottom:41px}
.unit-beacon-hub-slide .n5{left:48px;bottom:49px}
.unit-beacon-hub-slide .n6{right:48px;top:40px}
.unit-beacon-hub-slide .ubh-link{
  position:absolute;
  z-index:2;
  left:50%;top:50%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(83,226,255,.1),rgba(83,226,255,.55),rgba(83,226,255,.08));
}
.unit-beacon-hub-slide .l1{width:97px;transform:rotate(-35deg)}
.unit-beacon-hub-slide .l2{width:92px;transform:rotate(37deg)}
.unit-beacon-hub-slide .l3{width:100px;transform:rotate(145deg)}
.unit-beacon-hub-slide .l4{width:96px;transform:rotate(216deg)}

/* Locked missions stay visible, but feel dormant rather than simply grey. */
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-beacon-core{
  border-color:#5f7697;
  background:
    radial-gradient(circle at 40% 32%,#7890aa 0 2%,#405a75 3%,#1d3551 27%,#0a192c 68%,#040a13 100%);
  box-shadow:0 0 14px rgba(85,126,162,.24),inset 0 0 20px rgba(86,126,160,.16);
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-beacon-spine{
  border-color:rgba(76,101,132,.58);
  background:linear-gradient(90deg,rgba(69,95,124,.19),rgba(7,26,47,.92));
  box-shadow:none;
}
.unit-beacon-hub-slide .ubh-beacon-card:not(.is-active) .ubh-holo-platform i{
  border-color:rgba(76,101,132,.50);
  box-shadow:none;
}

/* Slightly clearer text/visual balance after richer beacon visuals */
.unit-beacon-hub-slide .ubh-beacon-copy{
  padding:15px 20px 14px;
}
.unit-beacon-hub-slide .ubh-beacon-copy h2{font-size:33px}
.unit-beacon-hub-slide .ubh-beacon-copy h3{margin-bottom:10px}

/* Animations */
@keyframes ubhNovaBeam{
  50%{opacity:.64;filter:blur(10px) brightness(1.18)}
}
@keyframes ubhNovaSpinC{
  from{transform:rotate(56deg)}
  to{transform:rotate(416deg)}
}
@keyframes ubhNovaArc{
  to{transform:rotate(360deg)}
}
@keyframes ubhPlatformWave{
  50%{filter:brightness(1.38);transform:translateX(-50%) scaleX(1.08)}
}
@keyframes ubhEnergyPulse{
  50%{opacity:.55;filter:blur(7px) brightness(1.25)}
}
@keyframes ubhBeaconOrbitA{
  to{transform:rotate(360deg)}
}
@keyframes ubhBeaconOrbitB{
  from{transform:rotate(27deg)}
  to{transform:rotate(387deg)}
}
@keyframes ubhRadar{
  to{transform:rotate(360deg)}
}
@keyframes ubhScanCross{
  0%,100%{opacity:.25;scale:.82}
  50%{opacity:.78;scale:1.06}
}
@keyframes ubhNetworkFloat{
  50%{transform:translateY(-5px);filter:brightness(1.14)}
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-nova-beam,
  .unit-beacon-hub-slide .ubh-orbit-c,
  .unit-beacon-hub-slide .ubh-nova-data-arc,
  .unit-beacon-hub-slide .ubh-nova-platform i,
  .unit-beacon-hub-slide .ubh-energy-column,
  .unit-beacon-hub-slide .ubh-beacon-orbit,
  .unit-beacon-hub-slide .ubh-radar-sweep,
  .unit-beacon-hub-slide .ubh-cross-scan,
  .unit-beacon-hub-slide .ubh-network-globe{
    animation:none!important;
  }
}


/* =========================================================
   PAGE 2 · DIGITAL CITY ENVIRONMENT v5
   Dynamic technology background inspired by Page 1 / Page 3.
   Strictly scoped to Page 2. No Reveal/global navigation rules.
========================================================= */

.unit-beacon-hub-slide .ubh-screen{
  background:
    radial-gradient(ellipse at 50% 58%,rgba(8,104,174,.24) 0%,rgba(3,33,68,.18) 30%,transparent 60%),
    radial-gradient(circle at 18% 24%,rgba(16,83,166,.22),transparent 30%),
    radial-gradient(circle at 82% 28%,rgba(30,63,157,.16),transparent 32%),
    linear-gradient(180deg,#020b19 0%,#031329 48%,#020915 100%);
}
.unit-beacon-hub-slide .ubh-city-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.unit-beacon-hub-slide .ubh-stars{
  position:absolute;
  inset:0;
  opacity:.55;
  background-image:
    radial-gradient(circle at 8% 18%,rgba(125,242,255,.75) 0 1px,transparent 1.7px),
    radial-gradient(circle at 19% 31%,rgba(125,242,255,.45) 0 1px,transparent 1.7px),
    radial-gradient(circle at 31% 14%,rgba(125,242,255,.60) 0 1px,transparent 1.7px),
    radial-gradient(circle at 43% 29%,rgba(125,242,255,.45) 0 1px,transparent 1.7px),
    radial-gradient(circle at 57% 17%,rgba(125,242,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 69% 35%,rgba(125,242,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 78% 15%,rgba(125,242,255,.68) 0 1px,transparent 1.7px),
    radial-gradient(circle at 91% 27%,rgba(125,242,255,.45) 0 1px,transparent 1.7px);
  animation:ubhStarPulse 6s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-horizon-glow{
  position:absolute;
  left:8%;
  right:8%;
  bottom:20%;
  height:28%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(30,196,255,.20),rgba(25,86,196,.07) 42%,transparent 70%);
  filter:blur(15px);
  animation:ubhHorizonPulse 5.8s ease-in-out infinite;
}

/* Layered procedural skyline: subtle enough not to compete with content. */
.unit-beacon-hub-slide .ubh-skyline{
  position:absolute;
  left:-3%;
  width:106%;
  transform-origin:center bottom;
}
.unit-beacon-hub-slide .ubh-skyline::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      transparent 0 2%,
      rgba(8,39,72,.88) 2% 5%,
      transparent 5% 7%,
      rgba(7,45,82,.92) 7% 10%,
      transparent 10% 12%,
      rgba(7,38,73,.94) 12% 16%,
      transparent 16% 18%,
      rgba(8,47,88,.94) 18% 21%,
      transparent 21% 24%,
      rgba(6,35,69,.94) 24% 29%,
      transparent 29% 31%,
      rgba(7,47,88,.94) 31% 34%,
      transparent 34% 37%,
      rgba(6,39,76,.95) 37% 42%,
      transparent 42% 44%,
      rgba(7,50,91,.95) 44% 47%,
      transparent 47% 50%,
      rgba(6,39,76,.95) 50% 55%,
      transparent 55% 58%,
      rgba(8,48,88,.94) 58% 62%,
      transparent 62% 65%,
      rgba(6,36,70,.94) 65% 70%,
      transparent 70% 72%,
      rgba(7,47,87,.94) 72% 76%,
      transparent 76% 79%,
      rgba(6,37,71,.94) 79% 84%,
      transparent 84% 87%,
      rgba(8,48,89,.92) 87% 91%,
      transparent 91% 94%,
      rgba(6,38,72,.92) 94% 98%,
      transparent 98% 100%);
}
.unit-beacon-hub-slide .ubh-skyline-far{
  bottom:17%;
  height:25%;
  opacity:.34;
  filter:blur(.4px);
}
.unit-beacon-hub-slide .ubh-skyline-near{
  bottom:10%;
  height:22%;
  opacity:.43;
}
.unit-beacon-hub-slide .ubh-skyline-near::after,
.unit-beacon-hub-slide .ubh-skyline-far::after{
  content:"";
  position:absolute;
  inset:8% 0 0;
  opacity:.65;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 26px,rgba(57,221,255,.22) 27px 29px,transparent 30px 46px),
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(57,221,255,.13) 19px 20px,transparent 21px 35px);
  mix-blend-mode:screen;
  animation:ubhWindows 4.8s ease-in-out infinite alternate;
}

/* Moving vertical data lanes similar to Page 1's ambient data motion. */
.unit-beacon-hub-slide .ubh-data-streams{
  position:absolute;
  inset:8% 0 13%;
}
.unit-beacon-hub-slide .ubh-data-streams i{
  position:absolute;
  top:-25%;
  width:1px;
  height:42%;
  opacity:.34;
  background:linear-gradient(to bottom,transparent,#60efff 42%,rgba(38,139,255,.55) 65%,transparent);
  box-shadow:0 0 8px rgba(64,227,255,.6);
  animation:ubhDataFall 7s linear infinite;
}
.unit-beacon-hub-slide .ubh-data-streams i:nth-child(1){left:11%;animation-delay:-1s}
.unit-beacon-hub-slide .ubh-data-streams i:nth-child(2){left:27%;animation-delay:-5s;animation-duration:9s}
.unit-beacon-hub-slide .ubh-data-streams i:nth-child(3){left:43%;animation-delay:-3s;animation-duration:8s}
.unit-beacon-hub-slide .ubh-data-streams i:nth-child(4){left:61%;animation-delay:-6s;animation-duration:10s}
.unit-beacon-hub-slide .ubh-data-streams i:nth-child(5){left:76%;animation-delay:-2s;animation-duration:7.5s}
.unit-beacon-hub-slide .ubh-data-streams i:nth-child(6){left:90%;animation-delay:-4s;animation-duration:9.5s}

/* Floating network nodes make the city feel alive without creating visual noise. */
.unit-beacon-hub-slide .ubh-city-nodes i{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:#78f5ff;
  box-shadow:0 0 8px #46e8ff,0 0 18px rgba(39,139,255,.7);
  animation:ubhNodeFloat 5s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(1){left:8%;top:42%}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(2){left:20%;top:67%;animation-delay:-2s}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(3){left:34%;top:38%;animation-delay:-4s}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(4){left:48%;top:72%;animation-delay:-1s}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(5){left:62%;top:43%;animation-delay:-3s}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(6){left:73%;top:68%;animation-delay:-5s}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(7){left:86%;top:37%;animation-delay:-2.5s}
.unit-beacon-hub-slide .ubh-city-nodes i:nth-child(8){left:94%;top:62%;animation-delay:-4.5s}

/* Perspective grid becomes a brighter "city floor" rather than a flat UI texture. */
.unit-beacon-hub-slide .ubh-grid{
  inset:38% -18% -35%;
  opacity:.48;
  background-image:
    linear-gradient(rgba(36,188,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,188,255,.11) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(540px) rotateX(64deg) scale(1.55);
  transform-origin:center bottom;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.78) 28%,#000 100%);
  animation:ubhGridDrift 12s linear infinite;
}

/* First screen: improve briefing readability for projection/classroom use. */
.unit-beacon-hub-slide .ubh-brief-main{
  grid-template-columns:440px minmax(0,1fr);
  gap:38px;
}
.unit-beacon-hub-slide .ubh-brief-card{
  padding:31px 34px 29px;
  background:linear-gradient(135deg,rgba(3,18,43,.89),rgba(4,24,52,.78));
  border-color:rgba(69,220,255,.54);
  box-shadow:
    0 0 32px rgba(20,160,255,.09),
    inset 0 0 36px rgba(0,169,255,.075);
  backdrop-filter:blur(3px);
}
.unit-beacon-hub-slide .ubh-kicker{
  font-size:19px;
  letter-spacing:1.8px;
}
.unit-beacon-hub-slide .ubh-brief-card h2{
  margin:8px 0 15px;
  font-size:39px;
}
.unit-beacon-hub-slide .ubh-lead{
  font-size:24px;
  line-height:1.40;
}
.unit-beacon-hub-slide .ubh-cn{
  margin-top:9px;
  font-size:21px;
  line-height:1.42;
}
.unit-beacon-hub-slide .ubh-rule-flow{
  margin-top:24px;
  gap:13px;
}
.unit-beacon-hub-slide .ubh-rule-flow>div{
  padding:14px 10px 13px;
  background:rgba(10,65,108,.28);
}
.unit-beacon-hub-slide .ubh-rule-flow b{font-size:16px}
.unit-beacon-hub-slide .ubh-rule-flow span{font-size:17px}
.unit-beacon-hub-slide .ubh-rule-flow small{font-size:15px}
.unit-beacon-hub-slide .ubh-next-copy{
  margin-top:21px;
  padding-top:15px;
  font-size:21px;
  line-height:1.34;
}

/* Second screen cards: let the richer city show through around the holograms. */
.unit-beacon-hub-slide .ubh-beacon-card{
  background:
    linear-gradient(180deg,rgba(5,26,57,.74),rgba(2,12,30,.86));
  backdrop-filter:blur(2px);
}
.unit-beacon-hub-slide .ubh-beacon-card.is-active{
  background:
    radial-gradient(circle at 50% 32%,rgba(17,124,204,.15),transparent 45%),
    linear-gradient(180deg,rgba(5,29,62,.80),rgba(2,13,31,.90));
}
.unit-beacon-hub-slide .ubh-beacon-visual{
  background:
    radial-gradient(circle at 50% 43%,rgba(40,202,255,.12),transparent 44%),
    linear-gradient(180deg,rgba(3,17,42,.16),rgba(3,10,27,.42));
}

/* Mission 02: slightly violet analytical identity, still within Digital City palette. */
.unit-beacon-hub-slide .ubh-beacon-question .ubh-beacon-aura{
  background:radial-gradient(circle,rgba(93,108,255,.15),rgba(38,91,191,.06) 46%,transparent 70%);
}
.unit-beacon-hub-slide .ubh-beacon-question .ubh-cross-scan{
  background:linear-gradient(90deg,transparent,rgba(133,146,255,.76),transparent);
  box-shadow:0 0 12px rgba(105,127,255,.48);
}

/* Animations */
@keyframes ubhStarPulse{
  50%{opacity:.78;filter:brightness(1.2)}
}
@keyframes ubhHorizonPulse{
  50%{opacity:.72;transform:scaleX(1.06)}
}
@keyframes ubhWindows{
  to{opacity:.95;filter:brightness(1.25)}
}
@keyframes ubhDataFall{
  0%{transform:translateY(-40%);opacity:0}
  12%{opacity:.38}
  80%{opacity:.25}
  100%{transform:translateY(340%);opacity:0}
}
@keyframes ubhNodeFloat{
  50%{transform:translateY(-9px) scale(1.35);filter:brightness(1.35)}
}
@keyframes ubhGridDrift{
  from{background-position:0 0,0 0}
  to{background-position:0 52px,52px 0}
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-stars,
  .unit-beacon-hub-slide .ubh-horizon-glow,
  .unit-beacon-hub-slide .ubh-skyline::after,
  .unit-beacon-hub-slide .ubh-data-streams i,
  .unit-beacon-hub-slide .ubh-city-nodes i,
  .unit-beacon-hub-slide .ubh-grid{
    animation:none!important;
  }
}


/* =========================================================
   PAGE 2 · CINEMATIC REFINEMENT v6
   Final visual-polish pass toward the approved render.
   Page-2-only overrides; no Reveal/global navigation changes.
========================================================= */

.unit-beacon-hub-slide{
  --explore:#49eaff;
  --question:#a47cff;
  --connect:#3ef0d3;
}

/* --- richer city atmosphere --- */
.unit-beacon-hub-slide .ubh-screen{
  background:
    radial-gradient(circle at 50% 7%, rgba(11,79,157,.18), transparent 24%),
    radial-gradient(ellipse at 50% 79%, rgba(0,200,255,.16) 0%, rgba(3,46,103,.12) 34%, transparent 70%),
    linear-gradient(180deg,#010817 0%,#03142b 45%,#020a18 100%);
}
.unit-beacon-hub-slide .ubh-city-bg{
  opacity:1;
}
.unit-beacon-hub-slide .ubh-city-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 0 58%,rgba(0,198,255,.035) 58% 59%,transparent 59%),
    radial-gradient(ellipse at 50% 77%,rgba(43,218,255,.15),transparent 46%);
  pointer-events:none;
}

/* stronger skyline silhouette with brighter crowns */
.unit-beacon-hub-slide .ubh-skyline-far{
  bottom:19%;
  height:23%;
  opacity:.48;
  filter:drop-shadow(0 0 8px rgba(17,141,220,.12));
}
.unit-beacon-hub-slide .ubh-skyline-near{
  bottom:11%;
  height:26%;
  opacity:.58;
}
.unit-beacon-hub-slide .ubh-skyline::before{
  filter:drop-shadow(0 -2px 4px rgba(41,204,255,.18));
}
.unit-beacon-hub-slide .ubh-skyline-near::after,
.unit-beacon-hub-slide .ubh-skyline-far::after{
  opacity:.78;
  mix-blend-mode:screen;
}

/* horizontal luminous horizon */
.unit-beacon-hub-slide .ubh-horizon-glow{
  left:0;
  right:0;
  bottom:15%;
  height:12%;
  border-radius:0;
  background:
    linear-gradient(180deg,transparent,rgba(16,214,255,.08) 42%,rgba(26,189,255,.18) 52%,rgba(10,75,152,.06) 72%,transparent);
  filter:blur(5px);
  animation:ubhHorizonPulse 5s ease-in-out infinite;
}

/* flowing curved light roads */
.unit-beacon-hub-slide .ubh-light-roads{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.unit-beacon-hub-slide .ubh-light-roads i{
  position:absolute;
  left:-12%;
  width:124%;
  height:42%;
  bottom:-5%;
  border-radius:50%;
  border-top:1px solid rgba(64,218,255,.26);
  box-shadow:0 -1px 10px rgba(38,190,255,.18);
  transform-origin:center;
}
.unit-beacon-hub-slide .ubh-light-roads i:nth-child(1){
  transform:rotate(-5deg) scaleY(.55);
  animation:ubhRoadPulse 6s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-light-roads i:nth-child(2){
  bottom:2%;
  border-top-color:rgba(70,133,255,.22);
  transform:rotate(4deg) scaleY(.46);
  animation:ubhRoadPulse 7.5s -2s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-light-roads i:nth-child(3){
  bottom:7%;
  border-top-color:rgba(57,231,225,.18);
  transform:rotate(-2deg) scaleY(.39);
  animation:ubhRoadPulse 8.5s -4s ease-in-out infinite;
}

/* large ambient HUD arcs */
.unit-beacon-hub-slide .ubh-circuit-arcs{
  position:absolute;
  inset:0;
}
.unit-beacon-hub-slide .ubh-circuit-arcs i{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(69,210,255,.08);
  box-shadow:0 0 18px rgba(31,150,255,.04);
}
.unit-beacon-hub-slide .ubh-circuit-arcs i:nth-child(1){
  width:520px;height:520px;left:-190px;bottom:-190px;
}
.unit-beacon-hub-slide .ubh-circuit-arcs i:nth-child(2){
  width:720px;height:720px;right:-280px;bottom:-330px;
  border-color:rgba(74,115,255,.07);
}
.unit-beacon-hub-slide .ubh-circuit-arcs i:nth-child(3){
  width:380px;height:380px;right:9%;top:8%;
}
.unit-beacon-hub-slide .ubh-circuit-arcs i:nth-child(4){
  width:230px;height:230px;left:35%;top:20%;
  border-style:dashed;
  animation:ubhNovaArc 22s linear infinite;
}

/* Grid closer to render: brighter near foreground, calmer under content */
.unit-beacon-hub-slide .ubh-grid{
  inset:43% -14% -36%;
  opacity:.60;
  background-size:48px 48px;
  background-image:
    linear-gradient(rgba(44,198,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,198,255,.13) 1px,transparent 1px);
  filter:drop-shadow(0 0 3px rgba(19,149,255,.1));
}

/* --- Screen 1: NOVA and mission briefing --- */
.unit-beacon-hub-slide .ubh-nova-ball{
  border-color:#79f7ff;
  box-shadow:
    0 0 18px #6ff4ff,
    0 0 54px rgba(34,220,255,.90),
    0 0 118px rgba(35,89,255,.58),
    inset 0 0 30px rgba(125,246,255,.44);
}
.unit-beacon-hub-slide .ubh-nova-ball strong,
.unit-beacon-hub-slide .ubh-nova-ball span,
.unit-beacon-hub-slide .ubh-nova-ball em{
  text-shadow:0 0 8px rgba(113,245,255,.88),0 0 18px rgba(39,177,255,.45);
}
.unit-beacon-hub-slide .ubh-nova-platform i{
  box-shadow:
    0 0 12px rgba(74,236,255,.92),
    0 0 28px rgba(24,144,255,.48),
    inset 0 0 13px rgba(69,224,255,.22);
}
.unit-beacon-hub-slide .ubh-nova-beam{
  opacity:.95;
  background:linear-gradient(to top,rgba(72,239,255,.34),rgba(58,163,255,.08) 75%,transparent);
}

.unit-beacon-hub-slide .ubh-brief-card{
  background:
    linear-gradient(135deg,rgba(3,18,43,.88),rgba(3,26,59,.72));
  border-color:rgba(69,222,255,.68);
  box-shadow:
    0 0 0 1px rgba(64,205,255,.05),
    0 0 30px rgba(20,154,255,.12),
    inset 0 0 38px rgba(0,169,255,.08);
}
.unit-beacon-hub-slide .ubh-kicker{
  color:#67f1ff;
  text-shadow:0 0 10px rgba(81,232,255,.48);
}
.unit-beacon-hub-slide .ubh-brief-card h2{
  text-shadow:0 0 12px rgba(255,255,255,.16),0 0 30px rgba(34,167,255,.12);
}
.unit-beacon-hub-slide .ubh-cn{
  color:#70f2f5;
  text-shadow:0 0 9px rgba(57,230,240,.24);
}
.unit-beacon-hub-slide .ubh-rule-flow>div{
  border-color:rgba(76,218,255,.36);
  background:linear-gradient(180deg,rgba(10,63,109,.30),rgba(5,30,68,.36));
  box-shadow:inset 0 0 15px rgba(40,178,255,.06);
}
.unit-beacon-hub-slide .ubh-rule-flow b{
  color:#63effc;
  text-shadow:0 0 9px rgba(63,222,255,.42);
}
.unit-beacon-hub-slide .ubh-rule-flow span{
  text-shadow:0 0 8px rgba(255,255,255,.08);
}
.unit-beacon-hub-slide .ubh-next-copy strong{
  text-shadow:0 0 10px rgba(73,234,255,.55);
}
.unit-beacon-hub-slide .ubh-scroll-cue{
  border-color:#5cefff;
  box-shadow:
    0 0 14px rgba(69,224,255,.25),
    inset 0 0 12px rgba(47,178,255,.10);
}

/* --- Screen 2: three distinct mission identities --- */
.unit-beacon-hub-slide .ubh-beacon-card{
  position:relative;
  background:
    linear-gradient(180deg,rgba(3,20,48,.78),rgba(2,11,29,.90));
}
.unit-beacon-hub-slide .ubh-beacon-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.012));
}
.unit-beacon-hub-slide .accent-explore{
  --accent:var(--explore);
  --accent-rgb:73,234,255;
  border-color:rgba(73,234,255,.72)!important;
  box-shadow:
    0 0 22px rgba(73,234,255,.17),
    inset 0 0 34px rgba(73,234,255,.06)!important;
}
.unit-beacon-hub-slide .accent-question{
  --accent:var(--question);
  --accent-rgb:164,124,255;
  border-color:rgba(164,124,255,.42)!important;
}
.unit-beacon-hub-slide .accent-connect{
  --accent:var(--connect);
  --accent-rgb:62,240,211;
  border-color:rgba(62,240,211,.42)!important;
}

/* per-card accent wash */
.unit-beacon-hub-slide .accent-explore .ubh-beacon-visual{
  background:
    radial-gradient(circle at 50% 38%,rgba(73,234,255,.18),transparent 43%),
    linear-gradient(180deg,rgba(4,27,62,.23),rgba(3,11,28,.48));
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-visual{
  background:
    radial-gradient(circle at 50% 38%,rgba(164,124,255,.17),transparent 43%),
    linear-gradient(180deg,rgba(22,17,62,.25),rgba(6,8,28,.50));
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-visual{
  background:
    radial-gradient(circle at 50% 38%,rgba(62,240,211,.16),transparent 43%),
    linear-gradient(180deg,rgba(4,46,58,.22),rgba(3,12,27,.50));
}

.unit-beacon-hub-slide .accent-explore .ubh-beacon-core,
.unit-beacon-hub-slide .accent-explore .ubh-holo-platform i,
.unit-beacon-hub-slide .accent-explore .ubh-beacon-orbit{
  border-color:rgba(73,234,255,.82);
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-core,
.unit-beacon-hub-slide .accent-question .ubh-holo-platform i,
.unit-beacon-hub-slide .accent-question .ubh-beacon-orbit{
  border-color:rgba(164,124,255,.78);
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-core,
.unit-beacon-hub-slide .accent-connect .ubh-holo-platform i,
.unit-beacon-hub-slide .accent-connect .ubh-beacon-orbit{
  border-color:rgba(62,240,211,.78);
}

/* active/dormant core coloration */
.unit-beacon-hub-slide .accent-explore .ubh-beacon-core{
  background:
    radial-gradient(circle at 40% 30%,#d8ffff 0 2%,#52eeff 3%,#0875cf 26%,#05234a 65%,#010918 100%);
  box-shadow:
    0 0 18px rgba(73,234,255,.95),
    0 0 48px rgba(49,178,255,.65),
    inset 0 0 22px rgba(115,248,255,.34);
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-core{
  background:
    radial-gradient(circle at 40% 30%,#e5dcff 0 2%,#9b7dff 3%,#5035a8 26%,#21163f 65%,#090617 100%);
  box-shadow:
    0 0 18px rgba(164,124,255,.38),
    0 0 46px rgba(104,76,209,.24),
    inset 0 0 22px rgba(175,151,255,.17);
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-core{
  background:
    radial-gradient(circle at 40% 30%,#d5fff9 0 2%,#4df1d4 3%,#087f77 26%,#073a3b 65%,#020e14 100%);
  box-shadow:
    0 0 18px rgba(62,240,211,.38),
    0 0 46px rgba(18,162,149,.22),
    inset 0 0 22px rgba(105,255,232,.16);
}

/* different spine tint */
.unit-beacon-hub-slide .accent-explore .ubh-beacon-spine{
  border-color:rgba(73,234,255,.82);
  box-shadow:0 0 20px rgba(73,234,255,.24);
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-spine{
  border-color:rgba(164,124,255,.62);
  background:linear-gradient(90deg,rgba(139,106,255,.22),rgba(15,16,55,.94),rgba(120,88,255,.16));
  box-shadow:0 0 20px rgba(164,124,255,.12);
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-spine{
  border-color:rgba(62,240,211,.62);
  background:linear-gradient(90deg,rgba(52,222,197,.20),rgba(7,39,45,.94),rgba(43,194,177,.15));
  box-shadow:0 0 20px rgba(62,240,211,.11);
}

/* stronger mission-specific outer effects */
.unit-beacon-hub-slide .accent-explore .ubh-radar-sweep{
  background:conic-gradient(from 10deg,transparent 0 71%,rgba(73,234,255,.30) 88%,transparent 100%);
}
.unit-beacon-hub-slide .accent-question .ubh-cross-scan{
  background:linear-gradient(90deg,transparent,rgba(176,139,255,.88),transparent);
  box-shadow:0 0 13px rgba(164,124,255,.58);
}
.unit-beacon-hub-slide .accent-question .ubh-analysis-prism{
  border-color:rgba(164,124,255,.32);
  background:linear-gradient(135deg,rgba(130,90,255,.07),rgba(59,181,255,.03));
  filter:drop-shadow(0 0 15px rgba(139,102,255,.19));
}
.unit-beacon-hub-slide .accent-connect .ubh-network-globe{
  border-color:rgba(62,240,211,.28);
}
.unit-beacon-hub-slide .accent-connect .ubh-node{
  background:#6effe8;
  box-shadow:0 0 9px #53f4df,0 0 18px rgba(38,197,183,.78);
}
.unit-beacon-hub-slide .accent-connect .ubh-link{
  background:linear-gradient(90deg,rgba(62,240,211,.06),rgba(62,240,211,.62),rgba(62,240,211,.05));
}

/* card labels and paths glow by mission */
.unit-beacon-hub-slide .accent-explore .ubh-mission-label,
.unit-beacon-hub-slide .accent-explore .ubh-beacon-copy h3,
.unit-beacon-hub-slide .accent-explore .ubh-signal-label{
  color:var(--explore);
  text-shadow:0 0 9px rgba(73,234,255,.48);
}
.unit-beacon-hub-slide .accent-question .ubh-mission-label,
.unit-beacon-hub-slide .accent-question .ubh-beacon-copy h3,
.unit-beacon-hub-slide .accent-question .ubh-signal-label{
  color:var(--question);
  text-shadow:0 0 9px rgba(164,124,255,.40);
}
.unit-beacon-hub-slide .accent-connect .ubh-mission-label,
.unit-beacon-hub-slide .accent-connect .ubh-beacon-copy h3,
.unit-beacon-hub-slide .accent-connect .ubh-signal-label{
  color:var(--connect);
  text-shadow:0 0 9px rgba(62,240,211,.40);
}
.unit-beacon-hub-slide .accent-explore .ubh-beacon-copy h2{
  text-shadow:0 0 14px rgba(73,234,255,.20);
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-copy h2{
  text-shadow:0 0 14px rgba(164,124,255,.18);
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-copy h2{
  text-shadow:0 0 14px rgba(62,240,211,.17);
}
.unit-beacon-hub-slide .ubh-path{
  letter-spacing:.15px;
}
.unit-beacon-hub-slide .accent-explore .ubh-path b{color:var(--explore);text-shadow:0 0 8px rgba(73,234,255,.48)}
.unit-beacon-hub-slide .accent-question .ubh-path b{color:var(--question);text-shadow:0 0 8px rgba(164,124,255,.42)}
.unit-beacon-hub-slide .accent-connect .ubh-path b{color:var(--connect);text-shadow:0 0 8px rgba(62,240,211,.42)}

/* status chips now glow in their mission color */
.unit-beacon-hub-slide .accent-explore .ubh-beacon-copy small{
  color:var(--explore);
  border-color:rgba(73,234,255,.80);
  background:rgba(20,114,147,.12);
  box-shadow:0 0 12px rgba(73,234,255,.18),inset 0 0 9px rgba(73,234,255,.06);
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-copy small{
  color:rgba(187,164,255,.72);
  border-color:rgba(164,124,255,.44);
  background:rgba(82,53,146,.10);
  box-shadow:0 0 10px rgba(164,124,255,.08);
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-copy small{
  color:rgba(108,246,223,.72);
  border-color:rgba(62,240,211,.42);
  background:rgba(32,112,103,.10);
  box-shadow:0 0 10px rgba(62,240,211,.08);
}

/* brighten top/bottom interface details */
.unit-beacon-hub-slide .ubh-beacon-header span,
.unit-beacon-hub-slide .ubh-footer span,
.unit-beacon-hub-slide .ubh-beacon-footer span{
  text-shadow:0 0 9px rgba(68,226,246,.34);
}
.unit-beacon-hub-slide .ubh-progress,
.unit-beacon-hub-slide .ubh-status{
  box-shadow:0 0 15px rgba(50,207,255,.10),inset 0 0 12px rgba(53,170,255,.04);
}
.unit-beacon-hub-slide #beginMission01{
  border-color:#56edff;
  background:linear-gradient(120deg,rgba(16,179,222,.94),rgba(20,104,194,.96));
  box-shadow:
    0 0 16px rgba(53,226,255,.36),
    0 0 34px rgba(33,127,255,.16),
    inset 0 0 16px rgba(115,241,255,.12);
  text-shadow:0 0 8px rgba(255,255,255,.15);
}

/* animation polish */
@keyframes ubhRoadPulse{
  0%,100%{opacity:.26;filter:brightness(.9)}
  50%{opacity:.82;filter:brightness(1.35)}
}

/* Dormant missions remain colorful rather than greyed-out copies */
.unit-beacon-hub-slide .accent-question,
.unit-beacon-hub-slide .accent-connect{
  opacity:.80!important;
  filter:none!important;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-visual,
.unit-beacon-hub-slide .accent-connect .ubh-beacon-visual{
  filter:none!important;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-copy,
.unit-beacon-hub-slide .accent-connect .ubh-beacon-copy{
  opacity:.86;
}
.unit-beacon-hub-slide .accent-question:hover,
.unit-beacon-hub-slide .accent-connect:hover{
  opacity:.90!important;
}

/* maintain accessibility: don't over-glow body copy */
.unit-beacon-hub-slide .ubh-beacon-copy,
.unit-beacon-hub-slide .ubh-brief-card{
  -webkit-font-smoothing:antialiased;
}

/* reduced-motion coverage for new ambient effects */
@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-light-roads i,
  .unit-beacon-hub-slide .ubh-circuit-arcs i{
    animation:none!important;
  }
}


/* =========================================================
   PAGE 2 · INTEGRATED NETWORK SPACE v7
   Replaces "separate card on generic background" feeling with
   one cohesive luminous data-network environment.
========================================================= */

/* Hide the previous blocky skyline emphasis; retain subtle ambient city cues. */
.unit-beacon-hub-slide .ubh-skyline-far,
.unit-beacon-hub-slide .ubh-skyline-near{
  opacity:.12!important;
  filter:blur(.6px);
}
.unit-beacon-hub-slide .ubh-skyline-near::after,
.unit-beacon-hub-slide .ubh-skyline-far::after{
  opacity:.18!important;
}

/* Cohesive animated node-link network */
.unit-beacon-hub-slide .ubh-network-space{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.unit-beacon-hub-slide .ubh-network-svg{
  position:absolute;
  inset:-3% -2%;
  width:104%;
  height:106%;
  opacity:.72;
  animation:ubhNetworkDrift 24s ease-in-out infinite alternate;
}
.unit-beacon-hub-slide .ubh-net-lines{
  opacity:.72;
}
.unit-beacon-hub-slide .ubh-net-nodes circle{
  transform-box:fill-box;
  transform-origin:center;
  animation:ubhNetworkNode 4.8s var(--delay,0s) ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-network-horizon{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:15%;
  height:18%;
  background:
    radial-gradient(ellipse at center,rgba(25,222,255,.21) 0%,rgba(15,89,182,.08) 45%,transparent 71%);
  filter:blur(12px);
  animation:ubhNetworkHorizon 6s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-network-rings i{
  position:absolute;
  left:50%;
  bottom:-34%;
  translate:-50% 0;
  border-radius:50%;
  border:1px solid rgba(51,210,255,.13);
  box-shadow:0 0 22px rgba(44,142,255,.07);
}
.unit-beacon-hub-slide .ubh-network-rings i:nth-child(1){
  width:1480px;height:660px;
}
.unit-beacon-hub-slide .ubh-network-rings i:nth-child(2){
  width:1150px;height:505px;bottom:-27%;
  border-color:rgba(83,105,255,.12);
}
.unit-beacon-hub-slide .ubh-network-rings i:nth-child(3){
  width:830px;height:380px;bottom:-20%;
  border-color:rgba(52,235,224,.11);
}

/* Grid now reads as the floor beneath the network, not the background itself. */
.unit-beacon-hub-slide .ubh-grid{
  opacity:.31!important;
  inset:55% -15% -35%!important;
  background-size:58px 58px!important;
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.82) 20%,#000 100%);
}

/* First screen: NOVA floats as part of network space */
.unit-beacon-hub-slide .ubh-nova-zone{
  position:relative;
}
.unit-beacon-hub-slide .ubh-nova-zone::before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle,transparent 0 29px,rgba(66,222,255,.08) 30px 31px);
  filter:drop-shadow(0 0 24px rgba(44,190,255,.11));
  animation:ubhNovaField 17s linear infinite;
}
.unit-beacon-hub-slide .ubh-nova-ball{
  width:184px!important;
  height:184px!important;
  background:
    radial-gradient(circle at 38% 30%,#f0ffff 0 2%,#80f8ff 3%,#14b9ef 8%,#0756bb 26%,#031a3b 63%,#010715 100%)!important;
  box-shadow:
    0 0 17px #8ffaff,
    0 0 45px rgba(48,225,255,.96),
    0 0 96px rgba(31,111,255,.72),
    0 0 150px rgba(37,76,255,.28),
    inset 0 0 37px rgba(128,246,255,.52)!important;
}
.unit-beacon-hub-slide .ubh-nova-ball::after{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:50%;
  border:1px solid rgba(114,240,255,.26);
  box-shadow:0 0 24px rgba(72,220,255,.26);
}
.unit-beacon-hub-slide .ubh-nova-beam{
  width:245px!important;
  height:300px!important;
  bottom:20px!important;
  background:
    linear-gradient(to top,rgba(86,242,255,.42),rgba(36,153,255,.11) 68%,transparent)!important;
}
.unit-beacon-hub-slide .ubh-nova-platform i:nth-child(1){
  width:285px!important;height:52px!important;
}
.unit-beacon-hub-slide .ubh-nova-platform i:nth-child(2){
  width:218px!important;height:38px!important;
}
.unit-beacon-hub-slide .ubh-nova-platform i:nth-child(3){
  width:145px!important;height:24px!important;
}
.unit-beacon-hub-slide .ubh-brief-card{
  background:
    linear-gradient(135deg,rgba(2,16,39,.82),rgba(4,27,62,.68))!important;
  backdrop-filter:blur(6px);
}

/* Beacon cards feel like transparent windows into one shared network */
.unit-beacon-hub-slide .ubh-beacon-card{
  overflow:visible!important;
  background:
    linear-gradient(180deg,rgba(4,22,51,.52),rgba(2,11,28,.72))!important;
  backdrop-filter:blur(4px);
}
.unit-beacon-hub-slide .ubh-beacon-card::after{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border-radius:15px;
  border:1px solid rgba(var(--accent-rgb,73,234,255),.06);
}
.unit-beacon-hub-slide .ubh-beacon-visual{
  overflow:visible!important;
}

/* More substantial beacon towers, closer to the approved render */
.unit-beacon-hub-slide .ubh-beacon-core{
  top:37px!important;
  width:112px!important;
  height:112px!important;
}
.unit-beacon-hub-slide .ubh-beacon-spine{
  top:140px!important;
  width:96px!important;
  height:145px!important;
  clip-path:polygon(30% 0,70% 0,91% 100%,9% 100%)!important;
}
.unit-beacon-hub-slide .ubh-beacon-spine::after{
  content:"";
  position:absolute;
  left:50%;top:2px;bottom:4px;width:1px;
  background:linear-gradient(to bottom,rgba(var(--accent-rgb),.04),rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.05));
  box-shadow:0 0 7px rgba(var(--accent-rgb),.40);
}
.unit-beacon-hub-slide .ubh-holo-platform{
  top:268px!important;
  width:245px!important;
  height:58px!important;
}
.unit-beacon-hub-slide .ubh-holo-platform i:nth-child(1){width:235px!important;height:43px!important}
.unit-beacon-hub-slide .ubh-holo-platform i:nth-child(2){width:184px!important;height:31px!important}
.unit-beacon-hub-slide .ubh-holo-platform i:nth-child(3){width:120px!important;height:19px!important}

/* Mission-specific radiance: Explore cyan */
.unit-beacon-hub-slide .accent-explore{
  --accent-rgb:73,234,255;
}
.unit-beacon-hub-slide .accent-explore .ubh-beacon-aura{
  width:340px!important;height:340px!important;
  background:radial-gradient(circle,rgba(73,234,255,.22),rgba(40,105,255,.08) 46%,transparent 72%)!important;
}
.unit-beacon-hub-slide .accent-explore .ubh-beacon-core{
  box-shadow:
    0 0 18px rgba(73,234,255,1),
    0 0 58px rgba(47,184,255,.73),
    0 0 92px rgba(31,95,255,.28),
    inset 0 0 25px rgba(129,248,255,.36)!important;
}
.unit-beacon-hub-slide .accent-explore .ubh-energy-column{
  background:linear-gradient(to top,rgba(73,234,255,.46),rgba(52,167,255,.12),transparent)!important;
}

/* Mission-specific radiance: Question violet */
.unit-beacon-hub-slide .accent-question{
  --accent-rgb:164,124,255;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-aura{
  width:340px!important;height:340px!important;
  background:radial-gradient(circle,rgba(164,124,255,.22),rgba(79,57,189,.09) 46%,transparent 72%)!important;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-core{
  color:#dcd0ff!important;
  box-shadow:
    0 0 18px rgba(174,132,255,.80),
    0 0 58px rgba(126,77,241,.48),
    0 0 92px rgba(74,44,170,.20),
    inset 0 0 25px rgba(192,165,255,.24)!important;
}
.unit-beacon-hub-slide .accent-question .ubh-energy-column{
  background:linear-gradient(to top,rgba(164,124,255,.38),rgba(89,65,205,.10),transparent)!important;
}
.unit-beacon-hub-slide .accent-question .ubh-holo-platform i{
  box-shadow:
    0 0 13px rgba(164,124,255,.64),
    inset 0 0 12px rgba(164,124,255,.16)!important;
}

/* Mission-specific radiance: Connect teal */
.unit-beacon-hub-slide .accent-connect{
  --accent-rgb:62,240,211;
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-aura{
  width:340px!important;height:340px!important;
  background:radial-gradient(circle,rgba(62,240,211,.20),rgba(17,132,141,.08) 46%,transparent 72%)!important;
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-core{
  color:#cffff6!important;
  box-shadow:
    0 0 18px rgba(62,240,211,.82),
    0 0 58px rgba(27,192,177,.49),
    0 0 92px rgba(17,113,123,.20),
    inset 0 0 25px rgba(116,255,236,.24)!important;
}
.unit-beacon-hub-slide .accent-connect .ubh-energy-column{
  background:linear-gradient(to top,rgba(62,240,211,.37),rgba(21,151,147,.10),transparent)!important;
}
.unit-beacon-hub-slide .accent-connect .ubh-holo-platform i{
  box-shadow:
    0 0 13px rgba(62,240,211,.62),
    inset 0 0 12px rgba(62,240,211,.15)!important;
}

/* Mission pictograms float beside each beacon, adding character without assets */
.unit-beacon-hub-slide .ubh-beacon-symbol{
  position:absolute;
  z-index:9;
  top:60px;
  right:52px;
  width:40px;height:40px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:23px;
  font-weight:900;
  color:rgba(var(--accent-rgb),.86);
  border:1px solid rgba(var(--accent-rgb),.28);
  background:rgba(4,17,38,.60);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.16);
  animation:ubhSymbolFloat 4.5s ease-in-out infinite;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-symbol{animation-delay:-1.4s}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-symbol{animation-delay:-2.8s}

/* Stronger readable glow for titles / identity labels */
.unit-beacon-hub-slide .ubh-beacon-copy h2{
  color:#fff!important;
  text-shadow:
    0 0 7px rgba(255,255,255,.14),
    0 0 18px rgba(var(--accent-rgb),.24)!important;
}
.unit-beacon-hub-slide .ubh-mission-label,
.unit-beacon-hub-slide .ubh-beacon-copy h3,
.unit-beacon-hub-slide .ubh-signal-label{
  color:rgb(var(--accent-rgb))!important;
  text-shadow:
    0 0 7px rgba(var(--accent-rgb),.55),
    0 0 17px rgba(var(--accent-rgb),.22)!important;
}
.unit-beacon-hub-slide .ubh-path{
  text-shadow:0 0 8px rgba(255,255,255,.06);
}
.unit-beacon-hub-slide .ubh-lock-glyph{
  margin-left:5px;
  color:rgb(var(--accent-rgb));
  font-size:11px;
  text-shadow:0 0 8px rgba(var(--accent-rgb),.55);
}

/* Card border aura */
.unit-beacon-hub-slide .accent-explore{
  box-shadow:
    0 0 22px rgba(73,234,255,.20),
    inset 0 0 34px rgba(73,234,255,.06)!important;
}
.unit-beacon-hub-slide .accent-question{
  box-shadow:
    0 0 18px rgba(164,124,255,.13),
    inset 0 0 30px rgba(164,124,255,.045)!important;
}
.unit-beacon-hub-slide .accent-connect{
  box-shadow:
    0 0 18px rgba(62,240,211,.12),
    inset 0 0 30px rgba(62,240,211,.04)!important;
}

/* Keep dormant beacons colorful but not equally active */
.unit-beacon-hub-slide .accent-question,
.unit-beacon-hub-slide .accent-connect{
  opacity:.88!important;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-core,
.unit-beacon-hub-slide .accent-connect .ubh-beacon-core{
  filter:saturate(.90) brightness(.84);
}
.unit-beacon-hub-slide .accent-explore .ubh-beacon-core{
  filter:saturate(1.08) brightness(1.08);
}

/* Animations */
@keyframes ubhNetworkNode{
  0%,100%{opacity:.44;transform:scale(.78)}
  50%{opacity:1;transform:scale(1.38)}
}
@keyframes ubhNetworkDrift{
  0%{transform:translate3d(-7px,-3px,0) scale(1.012)}
  100%{transform:translate3d(9px,5px,0) scale(1.025)}
}
@keyframes ubhNetworkHorizon{
  50%{opacity:.72;transform:scaleX(1.08)}
}
@keyframes ubhNovaField{
  to{transform:rotate(360deg)}
}
@keyframes ubhSymbolFloat{
  50%{transform:translateY(-7px);filter:brightness(1.32)}
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-network-svg,
  .unit-beacon-hub-slide .ubh-net-nodes circle,
  .unit-beacon-hub-slide .ubh-network-horizon,
  .unit-beacon-hub-slide .ubh-nova-zone::before,
  .unit-beacon-hub-slide .ubh-beacon-symbol{
    animation:none!important;
  }
}


/* =========================================================
   PAGE 2 · REAL ASSET INTEGRATION
   Uses /assets/mission-system/*.webp
   Scoped to Page 2 only. JS / Reveal untouched.
========================================================= */

/* Background: real network-space art with animated overlays */
.unit-beacon-hub-slide .ubh-screen{
  background:#020916!important;
}
.unit-beacon-hub-slide .ubh-real-network-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(1,8,24,.20),rgba(1,10,25,.24)),
    url("../assets/mission-system/digital-network-bg.webp") center center / cover no-repeat;
  filter:saturate(1.08) contrast(1.04) brightness(.82);
  transform:scale(1.035);
  animation:ubhRealBgFloat 18s ease-in-out infinite alternate;
}
.unit-beacon-hub-slide .ubh-real-network-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 40%,rgba(1,6,18,.18) 78%,rgba(1,5,16,.42) 100%),
    linear-gradient(180deg,rgba(2,8,24,.08),transparent 22%,transparent 74%,rgba(2,8,24,.18));
}
.unit-beacon-hub-slide .ubh-city-bg{
  opacity:.34!important;
  mix-blend-mode:screen;
}
.unit-beacon-hub-slide .ubh-grid{
  opacity:.20!important;
  mix-blend-mode:screen;
}

/* Page 2 briefing card gains transparent "glass" look over real background */
.unit-beacon-hub-slide .ubh-brief-card{
  background:
    linear-gradient(135deg,rgba(3,18,43,.84),rgba(3,25,58,.72))!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border-color:rgba(75,227,255,.72)!important;
  box-shadow:
    0 0 28px rgba(38,199,255,.12),
    inset 0 0 36px rgba(0,169,255,.075)!important;
}
.unit-beacon-hub-slide .ubh-kicker,
.unit-beacon-hub-slide .ubh-cn,
.unit-beacon-hub-slide .ubh-rule-flow b{
  text-shadow:0 0 10px rgba(78,239,255,.46);
}

/* NOVA: use generated 3D asset */
.unit-beacon-hub-slide .ubh-nova-zone{
  position:relative;
  isolation:isolate;
}
.unit-beacon-hub-slide .ubh-nova-asset-stage{
  width:420px!important;
  height:420px!important;
  display:grid!important;
  place-items:center!important;
  background:none!important;
  overflow:visible!important;
}
.unit-beacon-hub-slide .ubh-nova-asset{
  position:relative;
  z-index:4;
  width:385px;
  max-width:none;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 0 12px rgba(112,245,255,.95))
    drop-shadow(0 0 32px rgba(53,199,255,.66))
    drop-shadow(0 0 62px rgba(42,90,255,.33));
  animation:ubhNovaAssetFloat 5s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-backglow{
  position:absolute;
  z-index:1;
  width:345px;
  height:345px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,219,255,.24),rgba(31,91,255,.08) 44%,transparent 70%);
  filter:blur(12px);
  animation:ubhAssetAura 4.8s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-nova-orbit-line{
  position:absolute;
  z-index:3;
  border-radius:50%;
  border:1px solid rgba(93,238,255,.38);
  box-shadow:0 0 12px rgba(61,212,255,.22);
}
.unit-beacon-hub-slide .ubh-nova-orbit-line-a{
  width:330px;height:170px;
  transform:rotate(18deg);
  animation:ubhAssetOrbitA 12s linear infinite;
}
.unit-beacon-hub-slide .ubh-nova-orbit-line-b{
  width:290px;height:290px;
  border-style:dashed;
  border-color:rgba(90,126,255,.30);
  animation:ubhAssetOrbitB 18s linear infinite reverse;
}

/* Beacon cards become translucent network windows */
.unit-beacon-hub-slide .ubh-beacon-card{
  background:
    linear-gradient(180deg,rgba(3,18,43,.60),rgba(2,10,27,.78))!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  overflow:hidden!important;
}
.unit-beacon-hub-slide .ubh-beacon-visual{
  background:transparent!important;
  overflow:visible!important;
}
.unit-beacon-hub-slide .ubh-beacon-asset-stage{
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.unit-beacon-hub-slide .ubh-beacon-asset{
  position:relative;
  z-index:5;
  width:82%;
  max-height:94%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 9px rgba(var(--accent-rgb),.72))
    drop-shadow(0 0 22px rgba(var(--accent-rgb),.34));
  transform-origin:center bottom;
  animation:ubhBeaconAssetFloat 5.6s ease-in-out infinite;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-asset{animation-delay:-1.6s}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-asset{animation-delay:-3.1s}

.unit-beacon-hub-slide .ubh-beacon-asset-glow{
  position:absolute;
  z-index:1;
  width:83%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.07) 45%,transparent 72%);
  filter:blur(10px);
  animation:ubhAssetAura 5s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-beacon-floor-ring{
  position:absolute;
  z-index:3;
  bottom:21px;
  width:70%;
  height:52px;
}
.unit-beacon-hub-slide .ubh-beacon-floor-ring i{
  position:absolute;
  left:50%;
  bottom:0;
  translate:-50% 0;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.55);
  box-shadow:
    0 0 10px rgba(var(--accent-rgb),.46),
    inset 0 0 8px rgba(var(--accent-rgb),.11);
}
.unit-beacon-hub-slide .ubh-beacon-floor-ring i:nth-child(1){width:100%;height:42px}
.unit-beacon-hub-slide .ubh-beacon-floor-ring i:nth-child(2){width:76%;height:30px;bottom:8px;opacity:.70}
.unit-beacon-hub-slide .ubh-beacon-floor-ring i:nth-child(3){width:48%;height:18px;bottom:15px;opacity:.50}

.unit-beacon-hub-slide .ubh-beacon-data-ring{
  position:absolute;
  z-index:2;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.24);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.10);
}
.unit-beacon-hub-slide .ubh-ring-one{
  width:77%;aspect-ratio:1/1;
  animation:ubhAssetOrbitB 17s linear infinite;
}
.unit-beacon-hub-slide .ubh-ring-two{
  width:63%;height:34%;
  transform:rotate(31deg);
  animation:ubhAssetOrbitA 12s linear infinite reverse;
}

/* Mission colors closer to approved render */
.unit-beacon-hub-slide .accent-explore{
  --accent-rgb:54,221,255!important;
  border-color:rgba(54,221,255,.70)!important;
  box-shadow:0 0 20px rgba(54,221,255,.18),inset 0 0 30px rgba(54,221,255,.05)!important;
}
.unit-beacon-hub-slide .accent-question{
  --accent-rgb:168,105,255!important;
  border-color:rgba(168,105,255,.64)!important;
  box-shadow:0 0 18px rgba(168,105,255,.15),inset 0 0 30px rgba(168,105,255,.045)!important;
  opacity:.91!important;
}
.unit-beacon-hub-slide .accent-connect{
  --accent-rgb:49,239,218!important;
  border-color:rgba(49,239,218,.58)!important;
  box-shadow:0 0 18px rgba(49,239,218,.13),inset 0 0 30px rgba(49,239,218,.04)!important;
  opacity:.91!important;
}

/* Title glow / identity */
.unit-beacon-hub-slide .accent-explore .ubh-mission-label,
.unit-beacon-hub-slide .accent-explore .ubh-beacon-copy h3,
.unit-beacon-hub-slide .accent-explore .ubh-signal-label{
  color:rgb(54,221,255)!important;
}
.unit-beacon-hub-slide .accent-question .ubh-mission-label,
.unit-beacon-hub-slide .accent-question .ubh-beacon-copy h3,
.unit-beacon-hub-slide .accent-question .ubh-signal-label{
  color:rgb(190,144,255)!important;
}
.unit-beacon-hub-slide .accent-connect .ubh-mission-label,
.unit-beacon-hub-slide .accent-connect .ubh-beacon-copy h3,
.unit-beacon-hub-slide .accent-connect .ubh-signal-label{
  color:rgb(86,248,226)!important;
}
.unit-beacon-hub-slide .ubh-mission-label,
.unit-beacon-hub-slide .ubh-beacon-copy h3,
.unit-beacon-hub-slide .ubh-signal-label{
  text-shadow:
    0 0 8px rgba(var(--accent-rgb),.62),
    0 0 18px rgba(var(--accent-rgb),.23)!important;
}
.unit-beacon-hub-slide .ubh-beacon-copy h2{
  text-shadow:
    0 0 7px rgba(255,255,255,.11),
    0 0 19px rgba(var(--accent-rgb),.20)!important;
}
.unit-beacon-hub-slide .ubh-path b{
  color:rgb(var(--accent-rgb))!important;
  text-shadow:0 0 8px rgba(var(--accent-rgb),.50);
}

/* Stronger status chips */
.unit-beacon-hub-slide .ubh-beacon-copy small{
  border-color:rgba(var(--accent-rgb),.55)!important;
  color:rgba(232,248,255,.82)!important;
  background:rgba(5,20,43,.56)!important;
  box-shadow:0 0 11px rgba(var(--accent-rgb),.12);
}
.unit-beacon-hub-slide .accent-explore .ubh-beacon-copy small{
  color:#bffbff!important;
  border-color:rgba(54,221,255,.82)!important;
  box-shadow:0 0 12px rgba(54,221,255,.20);
}

/* Background must read as one cohesive scene */
.unit-beacon-hub-slide .ubh-screen::before{
  background:
    radial-gradient(circle at 50% 50%,transparent 0 50%,rgba(1,6,18,.14) 84%,rgba(1,5,15,.30) 100%)!important;
}

/* Animations */
@keyframes ubhRealBgFloat{
  from{transform:scale(1.035) translate3d(-5px,-2px,0)}
  to{transform:scale(1.055) translate3d(6px,3px,0)}
}
@keyframes ubhNovaAssetFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.018)}
}
@keyframes ubhBeaconAssetFloat{
  0%,100%{transform:translateY(1px) scale(.99)}
  50%{transform:translateY(-7px) scale(1.015)}
}
@keyframes ubhAssetAura{
  0%,100%{opacity:.62;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes ubhAssetOrbitA{
  from{transform:rotate(18deg)}
  to{transform:rotate(378deg)}
}
@keyframes ubhAssetOrbitB{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-real-network-bg,
  .unit-beacon-hub-slide .ubh-nova-asset,
  .unit-beacon-hub-slide .ubh-nova-backglow,
  .unit-beacon-hub-slide .ubh-nova-orbit-line,
  .unit-beacon-hub-slide .ubh-beacon-asset,
  .unit-beacon-hub-slide .ubh-beacon-asset-glow,
  .unit-beacon-hub-slide .ubh-beacon-data-ring{
    animation:none!important;
  }
}

/* =========================================================
   PAGE 2 · REFINEMENT v9
   Smaller 3D beacons + stronger skill labels + larger briefing text.
========================================================= */

/* SCREEN 1 · larger briefing typography */
.unit-beacon-hub-slide .ubh-brief-card{
  padding:34px 36px 31px!important;
}
.unit-beacon-hub-slide .ubh-kicker{
  font-size:21px!important;
  line-height:1.15!important;
  letter-spacing:1.85px!important;
}
.unit-beacon-hub-slide .ubh-brief-card h2{
  margin:9px 0 17px!important;
  font-size:42px!important;
  line-height:1.03!important;
}
.unit-beacon-hub-slide .ubh-lead{
  font-size:27px!important;
  line-height:1.42!important;
  font-weight:700!important;
}
.unit-beacon-hub-slide .ubh-cn{
  margin-top:11px!important;
  font-size:23px!important;
  line-height:1.44!important;
  font-weight:750!important;
}
.unit-beacon-hub-slide .ubh-rule-flow{
  margin-top:25px!important;
  gap:14px!important;
}
.unit-beacon-hub-slide .ubh-rule-flow>div{
  padding:15px 10px 14px!important;
}
.unit-beacon-hub-slide .ubh-rule-flow b{
  font-size:18px!important;
}
.unit-beacon-hub-slide .ubh-rule-flow span{
  margin-top:5px!important;
  font-size:19px!important;
  line-height:1.15!important;
}
.unit-beacon-hub-slide .ubh-rule-flow small{
  margin-top:4px!important;
  font-size:17px!important;
  line-height:1.18!important;
}
.unit-beacon-hub-slide .ubh-rule-flow>i{
  font-size:27px!important;
}
.unit-beacon-hub-slide .ubh-next-copy{
  margin-top:22px!important;
  padding-top:16px!important;
  font-size:23px!important;
  line-height:1.36!important;
  font-weight:800!important;
}
.unit-beacon-hub-slide .ubh-brief-main{
  grid-template-columns:420px minmax(0,1fr)!important;
  gap:30px!important;
}

/* SCREEN 2 · smaller beacon devices, stronger skills */
.unit-beacon-hub-slide .ubh-beacon-card{
  grid-template-rows:minmax(0,58%) minmax(0,42%)!important;
}
.unit-beacon-hub-slide .ubh-beacon-asset{
  width:65%!important;
  max-height:80%!important;
  transform-origin:center bottom!important;
  filter:
    drop-shadow(0 0 8px rgba(var(--accent-rgb),.66))
    drop-shadow(0 0 19px rgba(var(--accent-rgb),.28))!important;
  animation:ubhBeaconAssetFloatV9 5.8s ease-in-out infinite!important;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-asset{animation-delay:-1.7s!important}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-asset{animation-delay:-3.2s!important}

.unit-beacon-hub-slide .ubh-beacon-asset-glow{
  width:68%!important;
  opacity:.78!important;
}
.unit-beacon-hub-slide .ubh-beacon-floor-ring{
  bottom:18px!important;
  width:57%!important;
  height:44px!important;
}
.unit-beacon-hub-slide .ubh-beacon-data-ring.ubh-ring-one{
  width:61%!important;
}
.unit-beacon-hub-slide .ubh-beacon-data-ring.ubh-ring-two{
  width:51%!important;
  height:29%!important;
}

.unit-beacon-hub-slide .ubh-signal-label{
  left:50%!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  width:88%!important;
  box-sizing:border-box!important;
  padding:8px 12px 7px!important;
  border-radius:999px!important;
  text-align:center!important;
  font-size:15px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:1.65px!important;
  white-space:nowrap!important;
  background:rgba(3,18,42,.66)!important;
  border:1px solid rgba(var(--accent-rgb),.38)!important;
  color:rgb(var(--accent-rgb))!important;
  text-shadow:
    0 0 7px rgba(var(--accent-rgb),.68),
    0 0 16px rgba(var(--accent-rgb),.26)!important;
  box-shadow:
    0 0 13px rgba(var(--accent-rgb),.10),
    inset 0 0 10px rgba(var(--accent-rgb),.055)!important;
  z-index:12!important;
}

.unit-beacon-hub-slide .ubh-beacon-copy{
  padding:18px 20px 16px!important;
}
.unit-beacon-hub-slide .ubh-mission-label{
  font-size:17px!important;
}
.unit-beacon-hub-slide .ubh-beacon-copy h2{
  margin-top:5px!important;
  font-size:36px!important;
}
.unit-beacon-hub-slide .ubh-beacon-copy h3{
  margin-top:6px!important;
  margin-bottom:11px!important;
  font-size:21px!important;
}
.unit-beacon-hub-slide .ubh-path{
  font-size:18px!important;
  line-height:1.24!important;
}
.unit-beacon-hub-slide .ubh-beacon-copy small{
  margin-top:10px!important;
  padding:5px 11px!important;
  font-size:13px!important;
}
.unit-beacon-hub-slide .ubh-beacon-row{
  gap:24px!important;
}

@keyframes ubhBeaconAssetFloatV9{
  0%,100%{transform:translateY(5px) scale(.94)}
  50%{transform:translateY(-3px) scale(.955)}
}
@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-beacon-asset{
    animation:none!important;
    transform:translateY(2px) scale(.95)!important;
  }
}


/* =========================================================
   PAGE 2 · TITLE SIZE REFINEMENT v10
   Enlarge the three Beacon titles, especially Chinese titles.
========================================================= */

.unit-beacon-hub-slide .ubh-mission-label{
  font-size:19px!important;
  line-height:1.15!important;
  letter-spacing:1.35px!important;
}

.unit-beacon-hub-slide .ubh-beacon-copy h2{
  margin-top:6px!important;
  font-size:40px!important;
  line-height:1.04!important;
  font-weight:900!important;
}

.unit-beacon-hub-slide .ubh-beacon-copy h3{
  margin-top:7px!important;
  margin-bottom:12px!important;
  font-size:27px!important;
  line-height:1.18!important;
  font-weight:900!important;
  letter-spacing:.4px!important;
}

/* Preserve each mission's luminous identity at the larger size. */
.unit-beacon-hub-slide .accent-explore .ubh-beacon-copy h3{
  text-shadow:
    0 0 8px rgba(54,221,255,.66),
    0 0 18px rgba(54,221,255,.25)!important;
}
.unit-beacon-hub-slide .accent-question .ubh-beacon-copy h3{
  text-shadow:
    0 0 8px rgba(168,105,255,.62),
    0 0 18px rgba(168,105,255,.24)!important;
}
.unit-beacon-hub-slide .accent-connect .ubh-beacon-copy h3{
  text-shadow:
    0 0 8px rgba(49,239,218,.62),
    0 0 18px rgba(49,239,218,.23)!important;
}


/* =========================================================
   PAGE 2 · BILINGUAL SKILL PATHS v11
   Add Chinese translations as a second line and enlarge both.
========================================================= */

/* Create clear two-line hierarchy for the mission skill paths. */
.unit-beacon-hub-slide .ubh-path-bilingual{
  margin-top:auto!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:6px!important;
  line-height:1.18!important;
}

.unit-beacon-hub-slide .ubh-path-en{
  width:100%!important;
  font-size:27px!important;
  line-height:1.16!important;
  font-weight:900!important;
  letter-spacing:.25px!important;
  white-space:nowrap!important;
  color:#f4fbff!important;
  text-shadow:
    0 0 7px rgba(255,255,255,.10),
    0 0 14px rgba(var(--accent-rgb),.15)!important;
}

.unit-beacon-hub-slide .ubh-path-cn{
  width:100%!important;
  font-size:24px!important;
  line-height:1.18!important;
  font-weight:900!important;
  letter-spacing:.45px!important;
  white-space:nowrap!important;
  color:rgb(var(--accent-rgb))!important;
  text-shadow:
    0 0 8px rgba(var(--accent-rgb),.60),
    0 0 17px rgba(var(--accent-rgb),.24)!important;
}

/* Make arrows more visible at the new larger size. */
.unit-beacon-hub-slide .ubh-path-en b,
.unit-beacon-hub-slide .ubh-path-cn b{
  color:rgb(var(--accent-rgb))!important;
  font-weight:950!important;
  text-shadow:
    0 0 8px rgba(var(--accent-rgb),.70),
    0 0 16px rgba(var(--accent-rgb),.28)!important;
}

/* Give the enlarged bilingual paths enough vertical room. */
.unit-beacon-hub-slide .ubh-beacon-copy{
  padding:17px 20px 15px!important;
}

.unit-beacon-hub-slide .ubh-beacon-copy small{
  margin-top:10px!important;
  flex-shrink:0!important;
}

/* Slightly compact the title block so the larger paths remain fully visible. */
.unit-beacon-hub-slide .ubh-beacon-copy h3{
  margin-bottom:8px!important;
}

/* If the English path is long, preserve one line but tighten slightly. */
.unit-beacon-hub-slide .accent-question .ubh-path-en,
.unit-beacon-hub-slide .accent-connect .ubh-path-en{
  font-size:25px!important;
  letter-spacing:0!important;
}

@media (max-width:1400px){
  .unit-beacon-hub-slide .ubh-path-en{
    font-size:24px!important;
  }
  .unit-beacon-hub-slide .ubh-path-cn{
    font-size:22px!important;
  }
  .unit-beacon-hub-slide .accent-question .ubh-path-en,
  .unit-beacon-hub-slide .accent-connect .ubh-path-en{
    font-size:22px!important;
  }
}


/* =========================================================
   PAGE 2 · PAGE-1 BACKGROUND MATCH
   Based on stable v11. Visual-only override.
   Keeps Page 2 content / two-screen structure / JS untouched.
========================================================= */

/* Disable Page 2's custom full-image/network background layers. */
.unit-beacon-hub-slide .ubh-real-network-bg{
  display:none!important;
}
.unit-beacon-hub-slide .ubh-network-space{
  display:none!important;
}
.unit-beacon-hub-slide .ubh-skyline,
.unit-beacon-hub-slide .ubh-light-roads,
.unit-beacon-hub-slide .ubh-circuit-arcs{
  display:none!important;
}

/* Use the same dark blue gradient language as Page 1. */
.unit-beacon-hub-slide,
.unit-beacon-hub-slide .ubh-screen{
  background:
    radial-gradient(circle at 50% 32%,rgba(26,87,177,.34) 0%,rgba(6,31,74,.54) 34%,rgba(2,11,28,.96) 76%),
    linear-gradient(135deg,#07152f 0%,#0a2452 46%,#061633 100%)!important;
}

/* Page-1-like luminous atmosphere. */
.unit-beacon-hub-slide .ubh-screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 28%,rgba(42,218,255,.12),transparent 26%),
    radial-gradient(circle at 82% 24%,rgba(70,109,255,.11),transparent 30%),
    radial-gradient(circle at 52% 74%,rgba(26,174,255,.09),transparent 34%);
}

/* Keep a subtle Page-1-style perspective grid, but not the old network image. */
.unit-beacon-hub-slide .ubh-grid{
  display:block!important;
  position:absolute!important;
  inset:36% -15% -28%!important;
  opacity:.32!important;
  background-image:
    linear-gradient(rgba(75,214,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,214,255,.075) 1px,transparent 1px)!important;
  background-size:46px 46px!important;
  transform:perspective(680px) rotateX(61deg) scale(1.45)!important;
  transform-origin:center bottom!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.68) 22%,#000 100%)!important;
  animation:ubhPage1GridDrift 14s linear infinite!important;
}

/* Reuse only subtle glowing particles / nodes. */
.unit-beacon-hub-slide .ubh-city-bg{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  opacity:.62!important;
  pointer-events:none!important;
  mix-blend-mode:screen;
}
.unit-beacon-hub-slide .ubh-stars{
  opacity:.55!important;
  animation:ubhPage1StarPulse 5.5s ease-in-out infinite!important;
}
.unit-beacon-hub-slide .ubh-city-nodes i{
  opacity:.72!important;
  animation:ubhPage1NodeFloat 5.2s ease-in-out infinite!important;
}

/* Add a soft horizontal light sweep similar to Page 1's tech ambience. */
.unit-beacon-hub-slide .ubh-screen::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:56%;
  height:1px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(86,230,255,.10),rgba(92,147,255,.18),rgba(86,230,255,.10),transparent);
  box-shadow:0 0 18px rgba(55,185,255,.16);
  animation:ubhPage1Sweep 7.5s ease-in-out infinite;
}

/* Ensure Page 2 content remains above the background effects. */
.unit-beacon-hub-slide .ubh-screen-shell{
  position:relative!important;
  z-index:2!important;
}

/* Keep cards/NOVA readable over the simpler Page 1 background. */
.unit-beacon-hub-slide .ubh-brief-card,
.unit-beacon-hub-slide .ubh-beacon-card{
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* Ambient animations */
@keyframes ubhPage1GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:0 46px,46px 0}
}
@keyframes ubhPage1StarPulse{
  0%,100%{opacity:.38;filter:brightness(.90)}
  50%{opacity:.72;filter:brightness(1.25)}
}
@keyframes ubhPage1NodeFloat{
  0%,100%{transform:translateY(0) scale(.92);opacity:.52}
  50%{transform:translateY(-8px) scale(1.20);opacity:.95}
}
@keyframes ubhPage1Sweep{
  0%,100%{opacity:.22;transform:translateX(-2%)}
  50%{opacity:.62;transform:translateX(2%)}
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-grid,
  .unit-beacon-hub-slide .ubh-stars,
  .unit-beacon-hub-slide .ubh-city-nodes i,
  .unit-beacon-hub-slide .ubh-screen::after{
    animation:none!important;
  }
}


/* =========================================================
   PAGE 2 · PAGE-1 CITY + FLOATING GLOW FX
   Stable v11 structure preserved. Visual-only enhancement.
========================================================= */

/* Reuse the exact Page 1 city image as the environmental layer. */
.unit-beacon-hub-slide .ubh-page1-city-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      rgba(4,15,32,.82) 0%,
      rgba(8,35,75,.62) 48%,
      rgba(4,15,32,.54) 100%
    ),
    url("../assets/images/cover-bg.jpg") center center / cover no-repeat;
  opacity:.78;
  filter:saturate(.96) brightness(.88);
}

/* Vignette similar to Page 1 so text remains readable. */
.unit-beacon-hub-slide .ubh-page1-city-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,transparent 18%,rgba(0,0,0,.24) 100%),
    linear-gradient(180deg,rgba(1,7,20,.04),transparent 24%,transparent 70%,rgba(1,7,20,.16));
}

/* Keep Page 2's blue base behind the image, exactly as fallback. */
.unit-beacon-hub-slide,
.unit-beacon-hub-slide .ubh-screen{
  background:
    linear-gradient(
      115deg,
      rgba(4,15,32,.96) 0%,
      rgba(8,35,75,.84) 48%,
      rgba(4,15,32,.72) 100%
    )!important;
}

/* Floating glows: Page-1-inspired, but tuned not to obscure content. */
.unit-beacon-hub-slide .ubh-page1-glows{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.unit-beacon-hub-slide .ubh-page1-glows .ubh-glow{
  position:absolute;
  display:block;
  border-radius:50%;
  background:
    radial-gradient(
      circle at center,
      rgba(111,239,255,.72) 0 3%,
      rgba(74,206,255,.34) 4% 12%,
      rgba(47,156,255,.14) 24%,
      rgba(18,92,189,.05) 46%,
      transparent 70%
    );
  box-shadow:
    0 0 10px rgba(101,236,255,.58),
    0 0 24px rgba(59,167,255,.24);
  filter:blur(.2px);
  opacity:.78;
  animation:ubhPage1GlowFloat 10s ease-in-out infinite;
}
.unit-beacon-hub-slide .ubh-page1-glows .g1{
  width:26px;height:26px;left:8%;top:20%;animation-delay:-1s;
}
.unit-beacon-hub-slide .ubh-page1-glows .g2{
  width:18px;height:18px;left:23%;top:63%;animation-delay:-5s;animation-duration:12s;
}
.unit-beacon-hub-slide .ubh-page1-glows .g3{
  width:31px;height:31px;left:45%;top:34%;animation-delay:-3s;animation-duration:11s;
}
.unit-beacon-hub-slide .ubh-page1-glows .g4{
  width:20px;height:20px;left:66%;top:71%;animation-delay:-7s;animation-duration:13s;
}
.unit-beacon-hub-slide .ubh-page1-glows .g5{
  width:28px;height:28px;left:82%;top:28%;animation-delay:-4s;animation-duration:9.5s;
}
.unit-beacon-hub-slide .ubh-page1-glows .g6{
  width:15px;height:15px;left:92%;top:58%;animation-delay:-6s;animation-duration:11.5s;
}

/* Tiny star-like particles matching Page 1's atmospheric sparkle. */
.unit-beacon-hub-slide .ubh-page1-glows::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.62;
  background-image:
    radial-gradient(circle at 8% 12%,rgba(190,251,255,.82) 0 1px,transparent 1.7px),
    radial-gradient(circle at 17% 34%,rgba(125,235,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 31% 18%,rgba(190,251,255,.76) 0 1px,transparent 1.7px),
    radial-gradient(circle at 39% 69%,rgba(125,235,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 53% 15%,rgba(190,251,255,.72) 0 1px,transparent 1.7px),
    radial-gradient(circle at 61% 46%,rgba(125,235,255,.58) 0 1px,transparent 1.7px),
    radial-gradient(circle at 74% 21%,rgba(190,251,255,.76) 0 1px,transparent 1.7px),
    radial-gradient(circle at 87% 39%,rgba(125,235,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 94% 16%,rgba(190,251,255,.70) 0 1px,transparent 1.7px),
    radial-gradient(circle at 80% 76%,rgba(125,235,255,.50) 0 1px,transparent 1.7px);
  animation:ubhPage1Sparkle 6s ease-in-out infinite;
}

/* Existing Page 2 content must stay above city / glows. */
.unit-beacon-hub-slide .ubh-screen-shell{
  position:relative!important;
  z-index:3!important;
}

/* Reduce old abstract background elements so the real Page 1 city is visible. */
.unit-beacon-hub-slide .ubh-city-bg{
  opacity:.18!important;
}
.unit-beacon-hub-slide .ubh-stars{
  opacity:.22!important;
}
.unit-beacon-hub-slide .ubh-city-nodes i{
  opacity:.28!important;
}

/* Keep the perspective grid as a subtle lower foreground effect. */
.unit-beacon-hub-slide .ubh-grid{
  opacity:.22!important;
  mix-blend-mode:screen;
}

/* Soft lower haze gives the city more depth behind the 3D devices. */
.unit-beacon-hub-slide .ubh-screen::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:36%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(3,18,44,.40),rgba(4,30,70,.10) 58%,transparent);
}

@keyframes ubhPage1GlowFloat{
  0%,100%{
    transform:translate3d(0,0,0) scale(.86);
    opacity:.42;
  }
  50%{
    transform:translate3d(10px,-18px,0) scale(1.18);
    opacity:.92;
  }
}
@keyframes ubhPage1Sparkle{
  0%,100%{opacity:.36;filter:brightness(.90)}
  50%{opacity:.84;filter:brightness(1.28)}
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-page1-glows .ubh-glow,
  .unit-beacon-hub-slide .ubh-page1-glows::after{
    animation:none!important;
  }
}


/* =========================================================
   PAGE 2 · EXACT PAGE-1 BACKGROUND + PARTICLES
   Stable v11 structure preserved; visual-only override.
========================================================= */

/* Remove all earlier Page-2 custom background-image layers. */
.unit-beacon-hub-slide .ubh-page1-city-bg,
.unit-beacon-hub-slide .ubh-real-network-bg,
.unit-beacon-hub-slide .ubh-network-space,
.unit-beacon-hub-slide .ubh-skyline,
.unit-beacon-hub-slide .ubh-light-roads,
.unit-beacon-hub-slide .ubh-circuit-arcs{
  display:none!important;
}

/* IMPORTANT:
   Use the exact same background recipe as .hero-slide on Page 1.
   Apply it directly to the full Page-2 slide AND each internal screen,
   rather than putting the image inside a narrower decorative child. */
.unit-beacon-hub-slide,
.unit-beacon-hub-slide .ubh-screen{
  background:
    linear-gradient(
      115deg,
      rgba(4,15,32,.96) 0%,
      rgba(8,35,75,.84) 48%,
      rgba(4,15,32,.68) 100%
    ),
    url("../assets/images/cover-bg.jpg") center center / cover no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Exact Page-1-style dark vignette. */
.unit-beacon-hub-slide .ubh-screen::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(
      circle at center,
      transparent 20%,
      rgba(0,0,0,.28) 100%
    )!important;
}

/* Hide older synthetic star/node backgrounds so Page 1's city remains clean. */
.unit-beacon-hub-slide .ubh-city-bg,
.unit-beacon-hub-slide .ubh-page1-glows{
  display:none!important;
}

/* Keep only a very faint foreground grid; Page 1 city/network art is now dominant. */
.unit-beacon-hub-slide .ubh-grid{
  display:block!important;
  opacity:.10!important;
  mix-blend-mode:screen!important;
}

/* ---------------------------------------------------------
   PAGE-1 HERO GLOWS
--------------------------------------------------------- */
.unit-beacon-hub-slide .ubh-p1-glow{
  position:absolute;
  pointer-events:none;
  z-index:2;
  border-radius:50%;
  background:
    radial-gradient(
      circle at center,
      rgba(74,206,255,.20) 0%,
      rgba(47,156,255,.11) 32%,
      rgba(18,92,189,.04) 52%,
      transparent 72%
    );
  animation:ubhP1GlowFloat 10s ease-in-out infinite;
}

.unit-beacon-hub-slide .ubh-p1-glow-one{
  width:620px;
  height:620px;
  right:-170px;
  top:-160px;
}

.unit-beacon-hub-slide .ubh-p1-glow-two{
  width:500px;
  height:500px;
  left:-240px;
  bottom:-230px;
  background:
    radial-gradient(
      circle at center,
      rgba(49,190,255,.16) 0%,
      rgba(22,125,238,.08) 34%,
      rgba(12,74,166,.03) 55%,
      transparent 72%
    );
  animation-delay:-4s;
}

/* ---------------------------------------------------------
   EXACT PAGE-1-LIKE RISING PARTICLES
--------------------------------------------------------- */
.unit-beacon-hub-slide .ubh-p1-particle-field{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}

.unit-beacon-hub-slide .ubh-p1-particle{
  position:absolute;
  display:block;
  background:#7DD3FC;
  border-radius:50%;
  opacity:.35;
  box-shadow:0 0 8px rgba(125,211,252,.8);
  animation:ubhP1ParticleRise linear infinite;
}

/* Ensure all real Page-2 UI remains above background + particles. */
.unit-beacon-hub-slide .ubh-screen-shell{
  position:relative!important;
  z-index:10!important;
}

/* Cards stay readable while allowing the Page-1 city to show through. */
.unit-beacon-hub-slide .ubh-brief-card,
.unit-beacon-hub-slide .ubh-beacon-card{
  background-color:rgba(3,18,43,.72)!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

@keyframes ubhP1GlowFloat{
  0%,100%{
    transform:translate(0,0) scale(1);
  }
  50%{
    transform:translate(-20px,20px) scale(1.08);
  }
}

@keyframes ubhP1ParticleRise{
  from{
    transform:translateY(50px) scale(.7);
    opacity:0;
  }
  15%{opacity:.45}
  80%{opacity:.25}
  to{
    transform:translateY(-800px) scale(1.3);
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .unit-beacon-hub-slide .ubh-p1-glow,
  .unit-beacon-hub-slide .ubh-p1-particle{
    animation:none!important;
  }
}