*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cyan:#00FFD4;--cyan2:#00BFFF;--green:#00FF41;
  --gold:#C8972A;--gold2:#F0C040;
  --purple:#9B30FF;--pink:#FF2D9B;
  --bg:#000;--font-o:'Orbitron',monospace;--font-m:'Share Tech Mono',monospace;--font-b:'Exo 2',sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-b)}
.frame{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:10;transition:none}
.frame.active{opacity:1;pointer-events:all}
#overlay{position:fixed;inset:0;background:#000;z-index:9999;pointer-events:none;opacity:0}

/* ===================== NEW PRELOADER (NO OVERLAP) ===================== */
#preloader {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #0a0f1a, #000000);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preloader-container {
  text-align: center;
  position: relative;
  z-index: 10;
}

/* Animated rings */
.preloader-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 25px;
}

.preloader-ring svg {
  width: 100%;
  height: 100%;
  animation: rotateRing 2s linear infinite;
}

.preloader-ring circle {
  fill: none;
  stroke: url(#ringGradient);
  stroke-width: 3;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: drawRing 1.5s ease-in-out infinite alternate;
}

@keyframes rotateRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes drawRing {
  0% { stroke-dashoffset: 314; }
  100% { stroke-dashoffset: 80; }
}

/* Center logo */
.preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #00FFD4, #00BFFF);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: bold;
  font-family: var(--font-o);
  color: #000;
  box-shadow: 0 0 30px rgba(0, 255, 212, 0.6);
  animation: pulseLogo 1.5s ease-in-out infinite;
}

@keyframes pulseLogo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; box-shadow: 0 0 20px rgba(0, 255, 212, 0.5); }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; box-shadow: 0 0 50px rgba(0, 255, 212, 0.9); }
}

/* Loading text - NO GLITCH, clean text */
.preloader-text {
  font-family: var(--font-o);
  font-size: 13px;
  letter-spacing: 4px;
  color: #00FFD4;
  text-shadow: 0 0 10px rgba(0, 255, 212, 0.5);
  margin-top: 20px;
  margin-bottom: 15px;
  animation: blinkText 1.5s step-end infinite;
  position: relative;
  z-index: 10;
}

@keyframes blinkText {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Progress bar */
.preloader-bar {
  width: 220px;
  height: 2px;
  background: rgba(0, 255, 212, 0.2);
  border-radius: 2px;
  margin: 0 auto 18px;
  overflow: hidden;
  position: relative;
}

.preloader-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00FFD4, #00BFFF);
  border-radius: 2px;
  box-shadow: 0 0 8px #00FFD4;
  animation: fillBar 2s ease-out forwards;
}

@keyframes fillBar {
  0% { width: 0%; }
  30% { width: 45%; }
  60% { width: 75%; }
  100% { width: 100%; }
}

/* Status message - clean, no overlap */
.preloader-status {
  font-family: var(--font-m);
  font-size: 10px;
  color: rgba(0, 255, 212, 0.7);
  letter-spacing: 1.5px;
  margin-top: 5px;
  position: relative;
  z-index: 10;
}

/* Particles background */
.preloader-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #00FFD4;
  border-radius: 50%;
  opacity: 0;
  animation: floatParticle 3s linear infinite;
}

@keyframes floatParticle {
  0% { transform: translateY(100vh) scale(1); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-20vh) scale(0.3); opacity: 0; }
}

/* ===================== FRAME 1: VAULT ===================== */
#f1{background:#0a0805;flex-direction:column;overflow:hidden}
#binaryCanvas{position:absolute;inset:0;z-index:0;opacity:.4}

.vault-title{font-family:var(--font-o);font-size:clamp(18px,3vw,42px);font-weight:900;letter-spacing:.3em;color:#fff;text-align:center;text-shadow:0 0 30px var(--gold),0 0 60px rgba(200,151,42,0.4);margin-bottom:6px;position:relative;z-index:2}
.vault-subtitle{font-family:var(--font-m);font-size:clamp(8px,1.2vw,12px);letter-spacing:.5em;color:var(--gold);margin-bottom:28px;position:relative;z-index:2;opacity:.7}

/* VAULT DOOR */
.vault-scene{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
/* Vault door reset - important */
.vault-door {
  position: relative;
  width: clamp(260px,30vw,380px);
  height: clamp(300px,38vw,460px);
  cursor: pointer;
  perspective: 1000px;
  margin-bottom: 20px;
  transition: none;
}

.vault-door-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.4, 1.1);
}

.vault-door.open .vault-door-inner {
  transform: rotateY(-100deg);
  transform-origin: center left;
}

/* Force closed state when returning */
.vault-door:not(.open) .vault-door-inner {
  transform: rotateY(0deg);
}

/* DOOR FACE */
.door-face{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%,#5a4a30,transparent 50%),
    linear-gradient(135deg,#3d3020 0%,#2a2010 30%,#1a1408 60%,#2a2010 100%);
  border:3px solid #8a7040;
  border-radius:6px;
  box-shadow:
    0 0 0 6px #2a2010,
    0 0 0 8px #6a5030,
    0 0 40px rgba(200,150,40,0.3),
    inset 0 2px 4px rgba(255,220,100,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.5);
  overflow:hidden;
}
/* metal texture */
.door-face::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,200,80,0.03) 3px,rgba(255,200,80,0.03) 4px);
}
/* rivets */
.rivet{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c8a040,#6a5020);box-shadow:inset 0 2px 3px rgba(255,220,100,0.3),inset 0 -1px 2px rgba(0,0,0,0.5),0 2px 4px rgba(0,0,0,0.5)}
/* VAULT WHEEL */
.vault-wheel-wrap{
  position:absolute;top:50%;left:44%;transform:translate(-50%,-50%);
  width:clamp(120px,15vw,190px);height:clamp(120px,15vw,190px);
}
.wheel-outer{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#7a6030,#4a3820,#2a2010);
  border:4px solid #8a7040;
  box-shadow:0 0 20px rgba(200,150,40,0.4),inset 0 4px 8px rgba(255,220,100,0.1),inset 0 -4px 8px rgba(0,0,0,0.6);
  position:relative;display:flex;align-items:center;justify-content:center;
}
.wheel-ring{
  position:absolute;inset:8px;border-radius:50%;
  border:3px solid #6a5030;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.5);
}
.wheel-spoke{
  position:absolute;top:50%;left:50%;width:48%;height:4px;
  background:linear-gradient(90deg,#8a7040,#5a4020);
  transform-origin:left center;border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.wheel-hub{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#c8a040,#6a5020);
  border:3px solid #8a7040;
  box-shadow:0 0 10px rgba(200,150,40,0.3);
  z-index:2;
}
/* locking bars */
.lock-bar{position:absolute;background:linear-gradient(90deg,#6a5030,#4a3820,#6a5030);border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,0.5)}
.lock-bar.h{height:16px;width:40%}
.lock-bar.v{width:16px;height:30%}

/* KEYPAD */
.keypad{
  position:absolute;right:-15px;top:50%;transform:translateY(-50%);
  width:clamp(80px,9vw,110px);
  background:linear-gradient(135deg,#1a1a1a,#0a0a0a);
  border:2px solid #333;border-radius:8px;padding:10px 8px;
  box-shadow:0 0 15px rgba(0,255,100,0.2),inset 0 0 10px rgba(0,0,0,0.5);
  scale: 0.8;
}
@media (max-width: 768px){
  .keypad{
  right: -8px;

}
}
.keypad-screen{
  background:#000;border:1px solid #00ff41;border-radius:4px;
  padding:6px;margin-bottom:8px;text-align:center;
  font-family:var(--font-m);font-size:clamp(10px,1.5vw,14px);color:#00ff41;
  min-height:28px;letter-spacing:.3em;
  box-shadow:inset 0 0 8px rgba(0,255,65,0.2);
  text-shadow:0 0 8px #00ff41;
}
.keypad-status{font-family:var(--font-m);font-size:7px;color:#00ff41;text-align:center;margin-bottom:6px;letter-spacing:.2em;opacity:.7}
.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.kbtn{
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);
  border:1px solid #444;border-radius:4px;
  color:#fff;font-family:var(--font-m);font-size:clamp(8px,1.2vw,10px);
  padding:5px 2px;cursor:pointer;text-align:center;
  transition:all .1s;box-shadow:0 2px 3px rgba(0,0,0,0.5);
  user-select:none;
}
.kbtn:hover{background:linear-gradient(135deg,#3a3a3a,#2a2a2a);border-color:#666}
.kbtn:active{transform:scale(.95);background:#111}
.kbtn.enter{background:linear-gradient(135deg,#005a20,#003a15);border-color:#00ff41;color:#00ff41;font-size:7px;letter-spacing:.1em}
.kbtn.clr{background:linear-gradient(135deg,#5a1a1a,#3a1010);border-color:#ff4444;color:#ff4444;font-size:8px}

/* ACCESS GRANTED overlay */
.access-granted{
  position:absolute;inset:0;background:rgba(0,255,65,0.05);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-o);font-size:clamp(14px,2.5vw,28px);font-weight:700;
  color:#00ff41;letter-spacing:.3em;text-shadow:0 0 30px #00ff41;
  opacity:0;pointer-events:none;border-radius:4px;
}

/* door back (what's inside) */
.door-back{
  position:absolute;inset:0;backface-visibility:hidden;
  background:radial-gradient(circle at center,#001a2a,#000510);
  transform:rotateY(180deg);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
/* Vault open - earth glow visible */
.vault-earth-preview{
  width:80%;height:80%;border-radius:50%;
  /*background:radial-gradient(circle at 38% 35%,#0d3a6a,#071a38,#000510);*/
  box-shadow:0 0 60px rgba(0,150,255,0.8);
  animation:earthGlowPrev 2s ease-in-out infinite;
  background: url('../img/cropped_circle_image.png');
    background-position: center;
    background-size: cover;
}
@keyframes earthGlowPrev{0%,100%{box-shadow:0 0 60px rgba(0,150,255,0.8)}50%{box-shadow:0 0 100px rgba(0,200,255,1)}}

.hud-c{position:absolute;width:44px;height:44px;border-color:rgba(200,150,40,.35);border-style:solid}
.hud-tl{top:12px;left:12px;border-width:2px 0 0 2px}
.hud-tr{top:12px;right:12px;border-width:2px 2px 0 0}
.hud-bl{bottom:12px;left:12px;border-width:0 0 2px 2px}
.hud-br{bottom:12px;right:12px;border-width:0 2px 2px 0}

/* ===================== FRAME 2: EARTH ===================== */
#f2{background:#000;overflow:hidden}
.space-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,#050a1a 0%,#000 70%)}
#starCanvas{position:absolute;inset:0;z-index:0}
.earth-container{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.earth-globe {
    width: clamp(320px,55vw,550px);
    height: clamp(320px,55vw,550px);
    border-radius: 50%;
    position: absolute;
    /* background: radial-gradient(circle at 38% 32%,#1a3a6a 0%,#0a1a3a 30%,#040e20 60%,#000 100%); */
    box-shadow: 0 0 47px 20px rgba(0,100,255,0.5),0 0 13px 10px rgba(255,255,255,0.9),inset -30px -30px 60px rgba(0,0,0,0.7);
    overflow: visible;
    background: url('../img/cropped_circle_image.png');
    background-position: center;
    background-size: cover;
    /*top: 40%;*/
}
.earth-globe::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(8, 43, 93, 0.5);
    border-radius: 50%;
    box-shadow: inset 0 0px 22px 16px rgba(255,255,255,0.5);
}
.earth-globe::after {
    content: '';
    position: absolute;
    width: 1%;
    height: 1%;
    background: rgba(255, 255, 255, 01);
    /* border-radius: 50%; */
    top: -5px;
    left: 50%;
    transform: rotate(45deg);
    box-shadow: 0 0 15px 17px white,0 0 30px 74px rgba(0,100,255,0.2);
}
.earth-atm {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: radial-gradient(circle,transparent 44%,rgba(0,120,255,0.2) 48%,rgba(0,80,200,0.08) 56%,transparent 65%);
    pointer-events: none;
    height: 100%;
}
.earth-glow-ring {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle,transparent 46%,rgba(0,100,255,0.15) 52%,transparent 62%);
    animation: gRing 3s ease-in-out infinite;
    pointer-events: none;
    /* width: clamp(320px,55vw,880px); */
    /* height: clamp(320px,55vw,880px); */
}
@keyframes gRing{0%,100%{opacity:.6}50%{opacity:1}}
/* continent-like shapes */
/*.continent{position:absolute;border-radius:30% 70% 50% 60%;background:radial-gradient(ellipse,rgba(30,60,120,.5),rgba(10,30,80,.3));filter:blur(2px)}*/

/* DIGITAL CITIES on globe */
.hero-text{
  position:absolute;top:70px;left:32px;z-index:10;
}
.d-city {
    position: absolute;
    cursor: pointer;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    transition: transform .3s;
    /*background: url('d-city1.png');
    background-position: center;
    background-size: cover;*/
    /*width: 200px;
    height: 103px;*/
    animation:cityGlow 2s ease-in-out infinite;
    width: 28%;
}

@media (max-width: 768px){
  .d-city {

    width: 35%;
}
}

.d-city:hover{transform:translate(-50%,-50%) scale(1.1)}
.d-city-glow{
  width:clamp(60px,8vw,100px);height:clamp(60px,8vw,100px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,0.5) 0%,rgba(0,150,255,0.2) 40%,transparent 70%);
  /*animation:cityGlow 2s ease-in-out infinite;*/
  position:relative;display:flex;align-items:center;justify-content:center;
  /*box-shadow:0 0 30px rgba(0,229,255,0.4);*/
}
/*.d-city:nth-child(2) .d-city-glow{
  background:radial-gradient(circle,rgba(180,0,255,0.5),rgba(100,0,200,0.2) 40%,transparent 70%);box-shadow:0 0 30px rgba(180,0,255,0.4);animation-delay:.4s;
}
.d-city:nth-child(3) .d-city-glow{
  background:radial-gradient(circle,rgba(0,255,150,0.5),rgba(0,200,100,0.2) 40%,transparent 70%);box-shadow:0 0 30px rgba(0,255,150,0.4);animation-delay:.8s;
}
.d-city:nth-child(4) .d-city-glow {
     background: radial-gradient(circle,rgba(255,180,0,0.5),rgba(200,120,0,0.2) 40%,transparent 70%); 
    box-shadow: 0 0 30px rgba(255,180,0,0.4);
    animation-delay: 1.2s;
}
.d-city:nth-child(5) .d-city-glow{
  background:radial-gradient(circle,rgba(255,50,150,0.5),rgba(200,0,100,0.2) 40%,transparent 70%);box-shadow:0 0 30px rgba(255,50,150,0.4);animation-delay:1.6s;
}*/
@keyframes cityGlow{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/*.d-city-icon{font-size:clamp(18px,2.5vw,30px);filter:drop-shadow(0 0 8px #fff)}
.d-city-ring{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(0,229,255,.4);animation:cityRing 2s linear infinite}
.d-city-ring2{position:absolute;inset:-16px;border-radius:50%;border:1px dashed rgba(0,229,255,.2);animation:cityRing 3s linear infinite reverse}*/
@keyframes cityRing{to{transform:rotate(360deg)}}
.d-city-label{
  margin-top:6px;font-family:var(--font-o);font-size:clamp(7px,1vw,11px);
  color:#fff;letter-spacing:.1em;text-align:center;white-space:nowrap;
  text-shadow:0 0 10px var(--cyan);
  background:rgba(0,5,20,.7);border:1px solid rgba(0,229,255,.3);
  padding:3px 8px;border-radius:4px;
}
.d-city-count{font-size:9px;color:rgba(0,229,255,.7);letter-spacing:.05em}
.earth-title{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);
  font-family:var(--font-o);font-size:clamp(11px,1.8vw,18px);
  color:#fff;letter-spacing:.2em;text-align:center;
  text-shadow:0 0 20px var(--cyan2);z-index:5;white-space:nowrap;
}
.earth-hint {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-m);
    font-size: clamp(9px,1.2vw,12px);
    color: #fff;
    letter-spacing: .25em;
    z-index: 5;
}
.earth-back{position:absolute;top:16px;left:16px;z-index:20;padding:8px 16px;border:1px solid rgba(200,150,40,.4);background:rgba(0,0,0,.6);cursor:pointer;font-family:var(--font-o);font-size:10px;letter-spacing:.15em;color:var(--gold);border-radius:4px;backdrop-filter:blur(10px);transition:all .3s}
.earth-back:hover{background:rgba(200,150,40,.1)}

/* ===================== FRAME 3: CITY ===================== */
#f3{background:#000;overflow:hidden;flex-direction:column}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.city-bg-layer{position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,#000c1e 30%,#011030 55%,#000 100%)}
/* Ground glow beneath poles */
.city-ground-glow {
  position:absolute;
  bottom:40px;
  left:5%;right:5%;
  height:60px;
  background:radial-gradient(ellipse at 50% 100%, rgba(0,229,255,.18), transparent 70%);
  z-index:9;
  pointer-events:none;
}
.city-stars{position:absolute;inset:0}
.city-star{position:absolute;background:#fff;border-radius:50%;animation:sTwinkle var(--d,2s) ease-in-out infinite var(--dl,0s)}
@keyframes sTwinkle{0%,100%{opacity:.15}50%{opacity:.9}}
.city-grid-floor{position:absolute;bottom:0;left:0;right:0;height:50%;background:repeating-linear-gradient(90deg,transparent,transparent 55px,rgba(0,229,255,.07) 55px,rgba(0,229,255,.07) 56px),repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(0,229,255,.04) 40px,rgba(0,229,255,.04) 41px);transform:perspective(380px) rotateX(44deg);transform-origin:bottom center}
.horizon-glow{position:absolute;bottom:29%;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),var(--cyan),transparent);box-shadow:0 0 15px var(--cyan),0 0 30px rgba(0,229,255,.3)}

/* city top bar */
.city-top-bar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent);backdrop-filter:blur(5px)}
.city-top-name{font-family:var(--font-o);font-size:clamp(9px,1.3vw,14px);color:var(--cyan);letter-spacing:.15em;text-shadow:0 0 15px var(--cyan)}
.city-top-nav{display:flex;gap:6px;flex-wrap:wrap}
.city-nav-btn{padding:7px 14px;border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.07);color:var(--cyan);font-family:var(--font-o);font-size:9px;letter-spacing:.1em;cursor:pointer;border-radius:3px;transition:all .25s;white-space:nowrap}
.city-nav-btn:hover{background:var(--cyan);color:#000}
.city-nav-btn.gold{border-color:rgba(200,150,40,.4);color:var(--gold);background:rgba(200,150,40,.06)}
.city-nav-btn.gold:hover{background:var(--gold);color:#000}

/* subtitle */
.city-sub{position:absolute;top:52px;left:50%;transform:translateX(-50%);font-family:var(--font-o);font-size:clamp(8px,1.2vw,12px);color:rgba(255,255,255,.5);letter-spacing:.1em;z-index:15;white-space:nowrap}
.city-sub span{color:var(--cyan)}

.unav-links{
  display:flex;gap:clamp(10px,2vw,28px);align-items:center;
}
.unav-tog {
  display: none;
  background: none;
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.unav-tog span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cyan);
  margin: 4px 0;
  transition: all .3s;
}

@media(max-width:768px) {
  .unav-links {
    display: none;
  }

  .unav-tog {
    display: block;
  }
}

/* ===== POLE + IMAGE BILLBOARD — Image 8 Style ===== */

/* Scene container */
.hubs-scene {
  position: absolute;
  bottom: 30%;
  left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 12px);
  padding: 0 1%;
  z-index: 10;
}

#connectionCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5 !important;
  opacity: 1 !important;
  display: block !important;
}

.hubs-scene::after {
  content:'';
  /*position:absolute;*/
  bottom: 0; left: 3%; right: 3%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,229,255,.08) 5%,
    rgba(0,229,255,.55) 30%, rgba(255,255,255,.4) 50%,
    rgba(0,229,255,.55) 70%, rgba(0,229,255,.08) 95%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(0,229,255,.45), 0 0 32px rgba(0,229,255,.15);
  border-radius: 2px;
  z-index: 0;
}

/* Each pole unit */
.hub-billboard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform .32s cubic-bezier(.2,0,.2,1), filter .32s;
  filter: drop-shadow(0 0 6px rgba(0,180,255,.12));
  z-index: 2;
}
.hub-billboard:hover {
  transform: translateY(-16px) scale(1.05);
  /*filter: drop-shadow(0 0 22px rgba(0,229,255,.55));*/
  z-index: 20;
}
.hub-billboard:hover .hb-monitor { 
  /*border-color: var(--cyan); */
  /*box-shadow: 0 0 30px rgba(0,229,255,.6), 0 0 60px rgba(0,229,255,.2); */
}
.hub-billboard:hover .hb-hub-label { opacity:1; transform:translateX(-50%) translateY(-2px); }
.hub-billboard:hover .hb-pole-stem { box-shadow: 0 0 18px var(--cyan), 0 0 36px rgba(0,229,255,.4); }

/* ===== CENTER MAIN POLE - BOX SHADOW GLOW ===== */
.hub-billboard.center-pole {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  margin: 0 4px;
}
.hub-billboard.center-pole::before {
  content: '';
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  width: clamp(150px, 20vw, 250px);
  height: calc(100% + 30px);
  /*background: rgba(0,8,25,0.85);*/
  border-radius: 16px;
  /*box-shadow: 0 0 0 30px rgba(0,150,255,0.12);*/
  z-index: -1;
  pointer-events: none;
}

/* Center top image - BIGGER */
.hub-billboard.center-pole .hb-top-img {
    position: absolute;
    width: clamp(140px, 18vw, 220px);
    height: clamp(50px, 29vh, 194px);
    margin-bottom: 4px;
    z-index: 3;
    cursor: pointer;
    overflow: hidden;
    border-radius: 6px;
    top: -133px;
}
.hub-billboard.center-pole .hb-top-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 0 15px rgba(0,229,255,.6)) brightness(1.1);
  transition: all .3s;
}
.hub-billboard.center-pole .hb-top-img:hover img {
  /*filter: drop-shadow(0 0 30px rgba(0,229,255,.9)) brightness(1.3);*/
  transform: scale(1.05);
}
.hub-billboard.center-pole .hb-top-img video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s;
  z-index: 3;
  border-radius: 6px;
}
.hub-billboard.center-pole .hb-top-img:hover video {
  opacity: 1;
}

/* Center STEM */
.hub-billboard.center-pole .hb-pole-stem {
    width: clamp(6px, .7vw, 10px);
    height: clamp(90px, 14vh, 140px);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg,
    rgba(220,245,255,1) 0%, rgba(0,210,255,.9) 12%,
    rgba(0,160,220,.7) 40%, rgba(0,80,150,.45) 70%,
    rgba(0,30,80,.2) 100%);
    box-shadow: 0 0 20px rgba(0,229,255,.8), 0 0 40px rgba(0,200,255,.4),
    inset 1px 0 4px rgba(255,255,255,.4), inset -1px 0 3px rgba(0,0,0,.5);
    flex-shrink: 0;
    z-index: 2;
    position: absolute;
}
.hub-billboard.center-pole .hb-pole-stem::before {
  content: ''; position: absolute;
  left: 0; right: 0; height: 40%;
  background: linear-gradient(0deg, rgba(0,229,255,0), rgba(255,255,255,.85), rgba(0,229,255,0));
  border-radius: 4px;
  animation: stemPulse 2s ease-in-out infinite;
  opacity: .8;
}
@keyframes stemPulse {
  0% { bottom: -5%; opacity:0; }
  12% { opacity:.9; }
  88% { opacity:.6; }
  100% { bottom: 105%; opacity:0; }
}

/* Center BOTTOM CIRCLE */
.hub-billboard.center-pole .hb-bottom-img {
  position: relative;
  width: clamp(82px, 17vw, 210px);
  height: clamp(73px, 17vw, 210px);
  border-radius: 50%;
  overflow: hidden;
  /* border: 2px solid rgba(0,200,255,.45); */
  filter: drop-shadow(0 0 23px  rgba(0,180,255,.5));
  margin-top: 6px;
  z-index: 1;
  transition: all .4s;
}
.hub-billboard.center-pole:hover .hb-bottom-img {
  border-color: var(--cyan);
  /*box-shadow: 0 0 50px rgba(0,229,255,.7), 0 0 90px rgba(0,229,255,.3);*/
  transform: scale(1.05);
}
.hub-billboard.center-pole .hb-bottom-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(1.2);
}

.hub-billboard.center-pole .hb-name {
  margin-top: 10px;
  font-family: var(--font-o);
  font-size: clamp(10px, 1.3vw, 15px);
  color: #fff;
  letter-spacing: .12em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 15px rgba(0,229,255,.8);
  z-index: 2;
}
.hub-billboard.center-pole .hb-cat {
  font-family: var(--font-m);
  font-size: clamp(7px, .8vw, 9px);
  color: var(--cyan);
  opacity: .85;
  z-index: 2;
}

/* ===== LEFT & RIGHT SIDE LABELS - OPPOSITE PLACEMENT ===== */
.hub-billboard.side-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  z-index: 5;
  margin: 0 2px;
}
.hub-billboard:nth-child(2) {
    top: 20%;
    left: 16%;
}
.hub-billboard:nth-child(3) {
    top: 45%;
    left: 31%;
}
.hub-billboard:nth-child(4) {
    top: -22%;
    left: 28%;
}
.hub-billboard:nth-child(6) {
    top: -22%;
    right: 28%;
}
.hub-billboard:nth-child(7) {
    top: 45%;
    right: 31%;
}
.hub-billboard:nth-child(8) {
    top: 20%;
    right: 16%;
}


/* Side top image - BIGGER */
.hub-billboard.side-label .hb-side-top {
    position: absolute;
    width: clamp(75px, 9.5vw, 137px);
    height: clamp(120px, 4.5vh, 55px);
    z-index: 6;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: clamp(-18px, -2.5vh, -10px);
    top: -42px;
}

.hub-billboard.side-label .hb-side-top img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.4)) brightness(1.1);
  transition: all .3s;
}
.hub-billboard.side-label .hb-side-top video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s;
  z-index: 3;
  border-radius: 5px;
}
.hub-billboard.side-label .hb-side-top:hover video {
  opacity: 1;
}
.hub-billboard.side-label .hb-side-top:hover img {
  /*filter: drop-shadow(0 0 25px rgba(0,229,255,.9)) brightness(1.4);*/
  transform: scale(1.08);
}

/* Side CIRCULAR CITY IMAGE - BIGGER */
.hub-billboard.side-label .hb-side-img {
  position: relative;
  width: clamp(80px, 10vw, 140px);
  height: clamp(80px, 10vw, 140px);
  border-radius: 50%;
  overflow: hidden;
  /* border: 2px solid rgba(0,200,255,.45); */
  filter: drop-shadow(0 0 23px  rgba(0,180,255,.5));
  z-index: 4;
  cursor: pointer;
  transition: all .3s;
}
.hub-billboard.side-label:hover .hb-side-img {
  border-color: var(--cyan);
  /*box-shadow: 0 0 35px rgba(0,229,255,.6), 0 0 65px rgba(0,229,255,.25);*/
}
.hub-billboard.side-label .hb-side-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(1.1);
}

.hub-billboard.side-label .hb-name {
  margin-top: 6px;
  font-family: var(--font-o);
  font-size: clamp(6px, .75vw, 9px);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0,229,255,.6);
  z-index: 5;
}
.hub-billboard.side-label .hb-cat {
  font-family: var(--font-m);
  font-size: clamp(5px, .55vw, 7px);
  color: var(--cyan);
  opacity: .75;
  z-index: 5;
}



/* ── CITY IMAGE BASE (below pole) ── */
/*.hb-city-base {
  position: relative;
  width: clamp(82px, 10.5vw, 148px);
  height: clamp(82px, 10.5vw, 148px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0,200,255,.55);
  box-shadow:
    0 0 24px rgba(0,180,255,.4),
    0 0 50px rgba(0,180,255,.15),
    inset 0 0 20px rgba(0,20,60,.55);
  transition: all .32s;
  flex-shrink: 0;
  margin-bottom: 28px;
}*/
/*.hub-billboard:hover .hb-city-base {
  border-color: var(--cyan);
  box-shadow: 0 0 38px rgba(0,229,255,.75), 0 0 80px rgba(0,229,255,.28);
  transform: scale(1.06);
}*/
/*
.hb-city-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(.88) saturate(1.2);
  transition: transform .5s ease, filter .3s;
}
.hub-billboard:hover .hb-city-img {
  transform: scale(1.09);
  filter: brightness(1.05) saturate(1.4);
}*/

/* Scan-line texture overlay */
.hb-city-base::before {
  content:'';
  position:absolute;inset:0;
  background: repeating-linear-gradient(
    180deg,transparent,transparent 4px,rgba(0,0,0,.1) 4px,rgba(0,0,0,.1) 5px
  );
  z-index:2;pointer-events:none;border-radius:50%;
}

/* Cyan glow arc at top */
.hb-city-base::after {
  content:'';
  position:absolute;top:4px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 10px var(--cyan);
  z-index:3;border-radius:50%;
  animation:cityArc 2.5s ease-in-out infinite;
}
@keyframes cityArc{0%,100%{opacity:.35}50%{opacity:1}}

/*.hb-city-glow {
  position:absolute;bottom:0;left:0;right:0;height:42%;
  background:linear-gradient(0deg,rgba(0,229,255,.22),transparent);
  z-index:2;pointer-events:none;border-radius:0 0 50% 50%;
}*/

/* Hub name label below city image */
/*.hb-screen-title {
  position:absolute;
  bottom:-20px;left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family: var(--font-o);
  font-size: clamp(5px, .7vw, 8px);
  color: rgba(255,255,255,.92);
  text-align: center;
  letter-spacing: .06em;
  text-shadow: 0 0 10px rgba(0,229,255,.8);
  z-index:5;
}*/
/*.hb-screen-cat {
  position:absolute;
  bottom:-32px;left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size: clamp(4px,.58vw,7px);
  color: var(--cyan);
  letter-spacing: .09em;
  font-family: var(--font-m);
  opacity: .82;
  z-index:5;
}*/

/* Hover tooltip */
.hub-billboard.side-label .hb-hub-label{
  position: absolute;
  bottom: calc(100% + 35px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0,3,18,.96);
  border: 1px solid rgba(0,229,255,.45);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: clamp(7px,.8vw,9px);
  color: var(--cyan);
  letter-spacing: .07em;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  font-family: var(--font-o);
  box-shadow: 0 0 15px rgba(0,229,255,.2);
  z-index: 30;
}
.hub-billboard.center-pole .hb-hub-label{
  position: absolute;
  bottom: calc(100% + 110px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0,3,18,.96);
  border: 1px solid rgba(0,229,255,.45);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: clamp(7px,.8vw,9px);
  color: var(--cyan);
  letter-spacing: .07em;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  font-family: var(--font-o);
  box-shadow: 0 0 15px rgba(0,229,255,.2);
  z-index: 30;
}
.hub-billboard:hover .hb-hub-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── VIDEO BUTTON ── */
/*.hb-video-btn {
  margin-top: 42px;
  padding: 4px 11px;
  background: rgba(0,5,25,.75);
  border: 1px solid rgba(0,229,255,.28);
  color: var(--cyan);
  font-family: var(--font-o);
  font-size: clamp(5px,.65vw,8px);
  letter-spacing: .12em;
  border-radius: 2px;
  cursor: pointer;
  transition: all .22s;
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  backdrop-filter: blur(4px);
}
.hb-video-btn:hover { background:rgba(0,229,255,.14); box-shadow:0 0 10px rgba(0,229,255,.3); }*/

/* hide old elements */
.hb-monitor, .hb-pole-cap { display:none; }
/*.hb-base    { display:none; }*/
.hb-name    { display:none; }
.hb-screen  { display:none; }
.hb-pole    { display:none; }
.hb-screen-icon { display:none; }
.hb-screen-glow { display:none; }
.hb-play    { display:none; }
.hb-bottom-video, .hb-side-video { display:none; }
/* Hide all panels/borders */
.hb-panel-bg, .hb-side-panel, .hb-top-video, .hb-side-video-top { display: none !important; }
.hb-monitor, .hb-pole-cap, .hb-screen, .hb-pole, .hb-screen-icon, .hb-screen-glow, .hb-play { display: none; }
.hb-bottom-video, .hb-side-video { display: none; }

/* ===== FLYING JETS (SAME AS SHIPS) ===== */
.ship{position:absolute;pointer-events:none;z-index:2}
.ship img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(125,211,252,.8));
    transform: rotate(-148deg);
}
.ship3 img ,.ship4 img{
    transform: rotate(200deg) !important;
}
.ship-trail{position:absolute;top:50%;height:4px;width:60px;background:linear-gradient(90deg,transparent,rgba(125,211,252,.7));filter:blur(4px);border-radius:2px;pointer-events:none}

.ship1{top:18%;left:-150px;animation:shipOne 16s linear infinite}
.ship1 .ship-trail{left:-60px;top:50%;transform:translateY(-50%)}
.ship2{top:28%;left:-200px;animation:shipTwo 22s linear infinite 5s;transform:scale(.6)}
.ship2 .ship-trail{left:-55px;top:50%;transform:translateY(-50%)}
.ship3{top:16%;right:-150px;animation:shipThree 18s linear infinite 2s;transform:rotate(180deg) scale(.65)}
.ship3 .ship-trail{left:auto;right:-60px;top:50%;transform:translateY(-50%) scaleX(-1)}
.ship4{top:32%;right:-180px;animation:shipFour 26s linear infinite 8s;transform:rotate(180deg) scale(.5)}
.ship4 .ship-trail{left:auto;right:-55px;top:50%;transform:translateY(-50%) scaleX(-1)}

@keyframes shipOne{0%{transform:translateX(0) translateY(0) scale(.7);opacity:0}8%{opacity:.9}92%{opacity:.9}100%{transform:translateX(calc(100vw + 150px)) translateY(-35px) scale(.7);opacity:0}}
@keyframes shipTwo{0%{transform:translateX(0) translateY(0) scale(.6);opacity:0}12%{opacity:.75}88%{opacity:.75}100%{transform:translateX(calc(100vw + 200px)) translateY(45px) scale(.6);opacity:0}}
@keyframes shipThree{0%{transform:translateX(0) translateY(0) rotate(180deg) scale(.65);opacity:0}10%{opacity:.85}90%{opacity:.85}100%{transform:translateX(calc(-100vw - 150px)) translateY(20px) rotate(180deg) scale(.65);opacity:0}}
@keyframes shipFour{0%{transform:translateX(0) translateY(0) rotate(180deg) scale(.5);opacity:0}18%{opacity:.7}82%{opacity:.7}100%{transform:translateX(calc(-100vw - 180px)) translateY(-30px) rotate(180deg) scale(.5);opacity:0}}

/* clouds */
.atm-cloud{position:absolute;border-radius:50px;background:radial-gradient(ellipse,rgba(40,50,80,.2),transparent);filter:blur(10px);animation:atmCloud var(--d,20s) linear infinite var(--dl,0s);pointer-events:none}
@keyframes atmCloud{0%{transform:translateX(-200px)}100%{transform:translateX(calc(100vw + 200px))}}
/*.hb-pole-stem {
    width: clamp(6px, .7vw, 9px);
    position: absolute;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg,
    rgba(180,240,255,1) 0%,
    rgba(0,200,255,.85) 15%,
    rgba(0,130,200,.65) 50%,
    rgba(0,60,120,.4) 80%,
    rgba(0,20,60,.2) 100%
  );
    box-shadow: 0 0 12px rgba(0,229,255,.5),
    0 0 24px rgba(0,200,255,.2),
    inset 1px 0 3px rgba(255,255,255,.3),
    inset -1px 0 2px rgba(0,0,0,.4);
    transition: box-shadow .32s;
    overflow: visible;
    top: -31px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}*/
/* Energy pulse running up stem */
.hb-pole-stem::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(0,229,255,0), rgba(255,255,255,.9), rgba(0,229,255,0));
  border-radius: 3px;
  animation: stemPulse 2.4s ease-in-out infinite;
  opacity: .7;
}
@keyframes stemPulse {
  0%   { bottom: -5%; opacity:0; }
  10%  { opacity:.8; }
  90%  { opacity:.6; }
  100% { bottom: 105%; opacity:0; }
}

/* Glowing orb at very top of stem (connector to monitor) */
/*.hb-pole-cap {
  width: clamp(10px,1.2vw,16px);
  height: clamp(10px,1.2vw,16px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--cyan), rgba(0,100,200,.4));
  box-shadow: 0 0 14px var(--cyan), 0 0 28px rgba(0,229,255,.5), 0 0 6px #fff;
  animation: capPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes capPulse {
  0%,100% { opacity:.6; transform:scale(.85); }
  50%     { opacity:1; transform:scale(1.1); }
}*/

/* ── POLE STEM ── */

/* atmosphere */
.atm-plane{position:absolute;font-size:clamp(12px,2vw,20px);animation:atmFly var(--d,14s) linear infinite var(--dl,0s);z-index:15;filter:drop-shadow(0 0 4px var(--cyan))}
@keyframes atmFly{0%{transform:translateX(-80px) translateY(var(--sy,0))}100%{transform:translateX(calc(100vw + 80px)) translateY(var(--ey,0))}}
.atm-cloud{position:absolute;border-radius:50px;background:radial-gradient(ellipse,rgba(40,50,80,.2),transparent);filter:blur(10px);animation:atmCloud var(--d,20s) linear infinite var(--dl,0s);pointer-events:none}
@keyframes atmCloud{0%{transform:translateX(-200px)}100%{transform:translateX(calc(100vw + 200px))}}

/* VIDEO MODAL */
#videoModal{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;display:none}
.video-modal-inner{background:#050a1a;border:1px solid rgba(0,229,255,.3);border-radius:12px;padding:20px;max-width:680px;width:90%;box-shadow:0 0 60px rgba(0,229,255,.2)}
.vm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.vm-title{font-family:var(--font-o);font-size:16px;color:var(--cyan);letter-spacing:.1em}
.vm-close{background:none;border:1px solid rgba(255,255,255,.2);color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;transition:all .2s}
.vm-close:hover{border-color:var(--cyan);color:var(--cyan)}
.vm-body{background:#000;border-radius:8px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:var(--font-o);font-size:14px;color:rgba(0,229,255,.5);letter-spacing:.1em;border:1px solid rgba(0,229,255,.1)}

/* ===================== FRAME 4: HUB ENTRY ===================== */
#f4{background:#030a18;flex-direction:column}
.hub-entry-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 35%,rgba(0,50,120,.3),transparent 55%),radial-gradient(ellipse at 75% 65%,rgba(80,0,160,.18),transparent 55%)}
.hub-entry-panel{
  position:relative;z-index:2;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(0,229,255,.2);border-radius:16px;
  padding:clamp(22px,4vw,42px);max-width:540px;width:92%;
  backdrop-filter:blur(20px);
  box-shadow:0 0 50px rgba(0,229,255,.07);
}
.hep-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,229,255,.22);background:rgba(0,229,255,.05);padding:5px 13px;border-radius:100px;font-size:9px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;font-family:var(--font-o)}
.hep-dot{width:5px;height:5px;background:var(--cyan);border-radius:50%;animation:dotPulse 1s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.hep-welcome{font-family:var(--font-o);font-size:clamp(9px,1.2vw,12px);color:rgba(255,255,255,.35);letter-spacing:.3em;text-transform:uppercase;margin-bottom:5px}
.hep-name{font-family:var(--font-o);font-size:clamp(20px,3.5vw,34px);font-weight:700;color:#fff;margin-bottom:10px;line-height:1.1;text-shadow:0 0 25px rgba(0,229,255,.2)}
.hep-desc{font-size:12px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:18px}
.hep-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.hep-tag{padding:5px 12px;border-radius:100px;border:1px solid rgba(0,229,255,.16);background:rgba(0,229,255,.04);font-size:10px;color:rgba(255,255,255,.5)}
.hep-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.hep-register{flex:1;padding:14px;border:none;cursor:pointer;font-family:var(--font-o);font-size:11px;font-weight:700;letter-spacing:.15em;color:#000;background:linear-gradient(135deg,var(--cyan),var(--cyan2));clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);box-shadow:0 0 25px rgba(0,229,255,.3);transition:all .3s}
.hep-register:hover{box-shadow:0 0 45px rgba(0,229,255,.6);letter-spacing:.22em}
.hep-video-preview{
  padding:14px 20px;
  border:1px solid rgba(0,229,255,.3);
  background:rgba(0,229,255,.06);
  cursor:pointer;
  font-family:var(--font-o);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--cyan);
  border-radius:4px;
  transition:all .3s;
}
.hep-video-preview:hover{background:rgba(0,229,255,.15);box-shadow:0 0 20px rgba(0,229,255,.2)}
.hep-back-btn{padding:14px 20px;border:1px solid rgba(0,229,255,.22);background:transparent;cursor:pointer;font-family:var(--font-o);font-size:11px;letter-spacing:.1em;color:var(--cyan);border-radius:4px;transition:all .3s}
.hep-back-btn:hover{background:rgba(0,229,255,.07)}
.hep-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.2),transparent);margin:14px 0}
.hep-plat-title{font-size:8px;color:rgba(255,255,255,.2);letter-spacing:.2em;margin-bottom:7px;font-family:var(--font-o)}
.hep-plats{display:flex;gap:6px;flex-wrap:wrap}
.hep-plat{padding:4px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.06);font-size:9px;color:rgba(255,255,255,.3);cursor:pointer;transition:all .2s}
.hep-plat:hover{border-color:rgba(0,229,255,.3);color:var(--cyan)}
.hep-city-back{position:absolute;top:16px;left:16px;z-index:20;padding:8px 14px;border:1px solid rgba(0,229,255,.2);background:rgba(0,0,0,.65);cursor:pointer;font-family:var(--font-o);font-size:9px;letter-spacing:.12em;color:var(--cyan);border-radius:4px;backdrop-filter:blur(10px);transition:all .3s}
.hep-city-back:hover{background:rgba(0,229,255,.07)}

/* progress */
#progress{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:200}
.pd{width:7px;height:7px;border-radius:50%;border:1px solid #c8a040;background:transparent;transition:all .3s}
.pd.on {
    background: radial-gradient(circle at 35% 35%, #c8a040, #6a5020);
    box-shadow: 0 0 8px #c8a040;
}
@media (max-width: 768px) {
  .hubs-scene {
    height: 200px;
}
  .hub-billboard:nth-child(2) {
    top: 24%;
    left: 7%;
  }
  .hub-billboard:nth-child(3) {
      top: 52%;
      left: 27%;
  }
  .hub-billboard:nth-child(4) {
      top: 0%;
      left: 22%;
  }
  .hub-billboard:nth-child(6) {
      top: 0%;
      right: 17%;
  }
  .hub-billboard:nth-child(7) {
      top: 54%;
      right: 27%;
  }
  .hub-billboard:nth-child(8) {
      top: 44%;
      right: 4%;
  }
  .hub-billboard.side-label .hb-side-top {
    top: -20px;
  }
  .hub-billboard.center-pole .hb-top-img {
      top: -155px;
  }
  .hub-billboard.center-pole .hb-pole-stem {
    top: -34px;
  }
  .hub-billboard.center-pole .hb-top-img {
      position: absolute;
      width: clamp(86px, 18vw, 220px);
      height: clamp(50px, 29vh, 194px);
      margin-bottom: 4px;
      z-index: 3;
      cursor: pointer;
      overflow: hidden;
      border-radius: 6px;
      top: -133px;
  }
  .hub-billboard.center-pole {
    position: absolute;
    top: 5%;
}
}
@media (max-width: 400px){
  .hub-billboard:nth-child(2) {
    top: 11%;
    left: 0%;
}
.hub-billboard:nth-child(3) {
    top: 45%;
    left: 15%;
}
.hub-billboard:nth-child(4) {
    top: -20%;
    left: 17%;
}
.hub-billboard:nth-child(6) {
    top: -18%;
    right: 13%;
}
.hub-billboard:nth-child(7) {
    top: 54%;
    right: 17%;
}
.hub-billboard:nth-child(8) {
    top: 28%;
    right: 0%;
}
.hub-billboard.center-pole .hb-pole-stem {
    top: -11px;
}
.hub-billboard.side-label .hb-hub-label {
    position: absolute;
    bottom: calc(100% + 23px);
}
.hub-billboard.center-pole .hb-hub-label {
    position: absolute;
    bottom: calc(100% + 85px);
}
.next-prev{
    top: 70px;
    right: 11px !important;
}
.hero-text {
    position: absolute;
    top: 104px;
    left: 32px;
    z-index: 10;
}

.ship1 {
    top: 35%;
}
.ship3 {
    top: 24%;
}
}