:root {
  --bg-dark: #050505;
  --bg-deep: #0a0a0a;
  --text-dim: #a1a1aa;
  --accent: #3b82f6;
  --accent-glow: #00aaff;
  --clr-green: #15bd91;
  --clr-blue: #3384e2;
  --clr-red: #dc3545;
  --glass-border: #ffffff14;
}

@font-face {
  font-family: "Roboto";
  font-weight: normal;
  src: url(../font/RobotoR.woff2) format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-weight: bold;
  src: url(../font/RobotoB.woff2) format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: italic;
  src: url(../font/RobotoI.woff2) format("woff2");
}

@font-face {
  font-display: block;
  font-family: bootstrap-icons;
  src: url("../font/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a") format("woff2");
}

* {
  font-family: 'Roboto', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-dark);
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
}

.clr-green {
  color: var(--clr-green);
}

.clr-blue {
  color: var(--clr-blue);
}

.clr-red {
  color: var(--clr-red);
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #0078ff0f 0%, transparent 50%);
  pointer-events: none;
  z-index: 9998;
}

.main-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #030303 100%);
  overflow: hidden;
}

.main-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

.main-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 30%, #008cff14 0%, transparent 60%);
  pointer-events: none;
}

.glows {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle, #0795fa90 0%, #00aaff78 35%, transparent 70%);
  filter: blur(140px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glows.up-left {
  width: 900px;
  height: 900px;
  top: -200px;
  left: -200px;
}

.glows.low-right {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -150px;
}

/* .glows.center-glow {
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

body.scrolled .glows.up-left {
  transform: translate(30px, 40px);
}

body.scrolled .glows.low-right {
  transform: translate(-25px, 30px);
}

body.scrolled .glows.center-glow {
  transform: translate(-50%, -50%) scale(1.1);
}

.nav-big {
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--glass-border);
  padding: 1.2rem 5%;
  transition: padding 0.3s ease, background-color 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

.nav-big.nav-smaller {
  padding: 0.5rem 5% !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #ffffff26;
}

.nav-big .text-dim,
.nav-big .text-dim a {
   transition: color 0.3s ease;
}

.nav-big.nav-smaller .text-dim,
.nav-big.nav-smaller .text-dim a {
   color: #ffffff !important;
}

.nav-small {
  background: #ffffff14;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #ffffff26;
}

.home-box {
  background: radial-gradient(circle, #00a0ff66 0%, #00b4ff40 15%, #0096ff1a 35%, transparent 70%);
}

.nav-big .text-dim a:hover,
.nav-small #mobile-menu a:hover,
.footer .col-md-3:nth-child(2) a:hover {
  color: #ffffff !important;
  transition: color 0.2s ease;
}

.main-header {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}

.home-gcon-logo {
  width: 100%;
  height: auto;
  z-index: 1;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.home-button-main {
  background-color: #3582e4;
  color: #fff;
  border: 1px solid #3688e966;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px #3688e933, inset 0 1px 0 #ffffff1a;
  transition: 0.4s all;
}

.home-button-main:hover {
  border-color: #5a9cf099;
  box-shadow: 0 8px 35px #3688e959, 0 0 60px #3688e926, inset 0 1px 0 #ffffff26;
  transform: scale(1.03) translateY(-2px);
  transition: 0.4s all;
}

.home-button-second {
  background: linear-gradient(135deg, #ffffff14 0%, #ffffff0a 50%, #ffffff0f 100%);
  color: #fff;
  border: 1px solid #ffffff33;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px #00000033, inset 0 1px 0 #ffffff1a;
  transition: 0.4s all;
}

.home-button-second:hover {
  background: linear-gradient(135deg, #ffffff1f 0%, #ffffff14 50%, #ffffff1a 100%);
  border-color: #ffffff59;
  box-shadow: 0 8px 35px #ffffff14, 0 0 40px #3688e91a, inset 0 1px 0 #ffffff26;
  transform: scale(1.03) translateY(-2px);
  transition: 0.4s all;
}

.glass-box {
  background: #ffffff08;
  border: 1px solid #ffffff14;
  transition: 0.4s all;
}

/* .glass-box-hover:hover {
  border-color: var(--accent);
  transform: translateY(-1rem);
  transition: 0.4s all;
} */

.blue-box {
  background: linear-gradient(180deg, #3b8ef0 0%, #1a5fb4 50%, #0d3a6e 100%) !important;
}

.admin-box {
  top: 5rem;
  right: -5rem;
  box-shadow: -25px 30px 80px #00000080, -8px 8px 30px #22a5f526, inset 0 0 0 1px #ffffff1a;
}

.big-font {
  font-size: clamp(3.5rem, 5vw, 5rem);
}

.partners-box {
   overflow: hidden;
   padding: 2rem 0;
   mask-image: linear-gradient(
      to right,
      transparent,
      black 15%,
      black 85%,
      transparent
   );
   white-space: nowrap;
}

.partners-track {
   display: flex;
   width: max-content;
   animation: scroll-left 35s linear infinite;
   will-change: transform;
}

.partners-subbox {
   display: flex;
   gap: 3rem;
   padding-right: 3rem;
   flex-shrink: 0;
}

.partners-box:hover .partners-track {
   animation-play-state: paused;
}

.partners-subbox a {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   height: 3.5rem;
}

.partners-subbox a img {
   width: auto !important;
   height: 100% !important;
}

@keyframes scroll-left {
   from {
      transform: translate3d(0, 0, 0);
   }

   to {
      transform: translate3d(-50%, 0, 0);
   }
}

.glass-hr {
  border: 1px solid #ffffff20;
}

.photo-box {
  aspect-ratio: 1 / 1;
  perspective: 1000px;
}

.photo-content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.photo-front,
.photo-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.footer {
  background: #00000080;
  border-top: 1px solid #ffffff20;
}

[id] {
  scroll-margin-top: 150px;
}

.text-dim {
  color: var(--text-dim);
}

.border-dim {
  border-color: var(--text-dim) !important;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-1 {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.flex-fill {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

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

.overflow-xy {
  overflow-x: hidden;
  overflow-y: auto;
}

.opacity-disabled {
  opacity: .2;
  filter: grayscale(100);
}

.img-fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Utilities šířky a výšky */
.w-1-rem { width: 1rem; }
.w-2-rem { width: 2rem; }
.w-3-rem { width: 3rem; }
.w-4-rem { width: 4rem; }
.w-5-rem { width: 5rem; }
.w-6-rem { width: 6rem; }
.w-7-rem { width: 7rem; }
.w-8-rem { width: 8rem; }
.w-9-rem { width: 9rem; }
.w-10-rem { width: 10rem; }
.w-11-rem { width: 11rem; }
.w-12-rem { width: 12rem; }
.w-13-rem { width: 13rem; }
.w-14-rem { width: 14rem; }
.w-15-rem { width: 15rem; }

.h-1-rem { height: 1rem; }
.h-2-rem { height: 2rem; }
.h-3-rem { height: 3rem; }
.h-4-rem { height: 4rem; }
.h-5-rem { height: 5rem; }
.h-6-rem { height: 6rem; }
.h-7-rem { height: 7rem; }
.h-8-rem { height: 8rem; }
.h-9-rem { height: 9rem; }
.h-10-rem { height: 10rem; }
.h-11-rem { height: 11rem; }
.h-12-rem { height: 12rem; }
.h-13-rem { height: 13rem; }
.h-14-rem { height: 14rem; }
.h-15-rem { height: 15rem; }

/* Bootstrap Tune */
.a-inherit {
  color: inherit;
}

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

.form-control:focus {
  border-color: var(--bs-indigo);
  box-shadow: 0 0 0.6rem 0.2rem rgba(102, 16, 242, 0.8);
}

html:not([data-bs-theme="dark"]) .form-control:focus {
  border-color: #9fcef1;
  box-shadow: 0 0 0.6rem 0.2rem rgba(159, 206, 241, 0.8);
}

.login-input:focus {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: #fff;
  box-shadow: 0 0 0.6rem 0.2rem rgb(255 255 255 / 80%);
}

.modal-open .modal {
  overflow-y: hidden !important;
}

.modal-content {
  box-shadow: 0 0 8rem 2rem rgba(0, 0, 0, 0.3);
  border-radius: .6rem !important;
}

.modal-header {
  background-color: var(--bs-indigo);
  color: #fff;
  padding: .6rem 1rem !important;
  border-bottom: 3px solid rgba(255, 255, 255, 0.4) !important;
  border-top-left-radius: .5rem !important;
  border-top-right-radius: .5rem !important;
}

html:not([data-bs-theme="dark"]) .modal-header {
  background-color: #548dd4;
}

.btn-close {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  opacity: 1;
}

.modal-body {
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-back {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(../img/iconBack.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

label,
.form-check {
  margin-bottom: 0;
}

.btn {
  font-weight: bold;
}

.btn:focus,
.btn:hover,
.btn:active {
  color: #fff;
}

.btn-xs {
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
  line-height: 1.5;
  border-radius: .25rem;
}

.btn-warning {
  color: #fff;
  background-color: #ffa500;
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-purple,
.badge-purple {
  color: #fff;
  background-color: #7030a0;
}

.btn-purple:hover {
  background-color: #5f2889;
}

.btn-outline-purple {
  color: #7030a0;
  border-color: #7030a0;
}

.btn-orange,
.badge-orange {
  color: #fff;
  background-color: #ed6b47;
}

.btn-orange:hover {
  background-color: #e84516;
}

.btn:disabled,
a.btn.disabled,
span.btn.disabled {
  background-color: #999;
  color: #fff;
  border: 1px solid #999;
  cursor: not-allowed;
}
.stat-number {
  font-size: 4rem;
  font-weight: 800;
  display: block;
  background-color: #ededed;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
}

.glass-box-hover:hover .photo-front .hover-img {
  opacity: 1;
}

.photo-front .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.glass-box-hover:hover .photo-front .hover-img {
  animation: hoverFlash 0.4s forwards;
}

@keyframes hoverFlash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.switch-button .form-check-input {
  cursor: pointer;
  border-color: #3b82f666;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a1a1aa'/%3e%3c/svg%3e") !important;
}

.switch-button .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
}

.switch-button .form-check-input:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.marquee-container {
   width: 90%; 
   max-width: 1400px;
   margin: 0 auto; 
   overflow: hidden;
   padding: 20px 0;
   mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-row {
   width: 100%;
   overflow: hidden;
   margin-bottom: 30px;
}

.marquee-row:last-child {
   margin-bottom: 0;
}

.marquee-track {
   display: flex;
   gap: 40px; 
   width: max-content;
}

.marquee-track .admin-module.marquee-card {
   width: 100px;
   height: 100px;
   display: flex; 
   align-items: center; 
   justify-content: center;
   flex-shrink: 0;
   margin: 0;
   background: transparent;
   border: none;
   box-shadow: none;
   pointer-events: none; 
}

.marquee-track .marquee-card .admin-module-icon {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.marquee-track .marquee-card .admin-module-icon img {
   height: 80px;
   width: auto;
   display: block;
   object-fit: contain;
}

.track-left {
   animation: scrollLeft 80s linear infinite; 
}

.track-right {
   animation: scrollRight 80s linear infinite;
}

@keyframes scrollLeft {
   0% { transform: translateX(0); }
   100% { transform: translateX(-700px); }
}

@keyframes scrollRight {
   0% { transform: translateX(-700px); } 
   100% { transform: translateX(0); }
}

@media (max-width: 768px) {
   .marquee-container {
      width: 95%;
   }
   .marquee-track { 
      gap: 20px; 
   }
   .marquee-track .admin-module.marquee-card {
      width: 70px;
      height: 70px;
   }
   .marquee-track .marquee-card .admin-module-icon img {
      height: 55px;
   }
   
   @keyframes scrollLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-450px); }
   }
   @keyframes scrollRight {
      0% { transform: translateX(-450px); }
      100% { transform: translateX(0); }
   }
}

.map-container {
    width: 75%; 
    max-width: 1200px;
    z-index: 1;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .map-container {
        width: 100%;
    }
}

.map-section {
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#world-svg .continent path {
    fill: rgba(255, 255, 255, 0.08);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    transition: fill 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

#world-svg .continent:hover path {
    fill: #167bc8;
    stroke: #ffffff;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
}

#continent-info-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

#continent-info-box.active {
    opacity: 1;
    visibility: visible;
}

#world-svg .continent[data-name="Australia"],
#world-svg .continent[data-name="South America"] {
    pointer-events: none;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; 
}

.bento-box {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bento-squere {
    aspect-ratio: 1 / 1;
}

.pos-1 { 
    grid-column: 1 / 2; 
    grid-row: 1 / 2; 
    padding: 0 !important; 
}

.pos-1 img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    object-position: center;
}

.pos-2 { grid-column: 2 / 4; grid-row: 1 / 2; }
.pos-3 { grid-column: 4 / 5; grid-row: 1 / 3; }
.pos-4 { grid-column: 1 / 2; grid-row: 2 / 3; }
.pos-5 { grid-column: 2 / 3; grid-row: 2 / 3; }
.pos-6 { grid-column: 3 / 4; grid-row: 2 / 4; }
.pos-7 { grid-column: 1 / 3; grid-row: 3 / 4; }
.pos-8 { grid-column: 4 / 5; grid-row: 3 / 4; }

@media (max-width: 991px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-box {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        aspect-ratio: auto;
        min-height: 220px;
    }
    .pos-2, .pos-7 { 
        grid-column: span 2 !important;
    }
}

@media (max-width: 767px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .pos-2, .pos-7 { 
        grid-column: span 1 !important;
    }
}

.pos-1 img {
    width: 70%;
    height: 70%;
    object-fit: contain; 
    object-position: center;
}

.pos-2 .bento-text-left {
    position: relative;
    z-index: 1;
}

@media (min-width: 576px) {
    .pos-2 .bento-text-left {
        max-width: 55%; 
    }
}

.mockup-bento {
    position: absolute;
    right: 0px;          
    object-fit: contain;
    object-position: right bottom;
    z-index: 0;           
    pointer-events: none; 
}

.pos-6 .bento-text-left {
    position: relative;
    z-index: 1;
    max-width: 60%;
}

.mockup-poster {
    position: absolute;
    bottom: 0;
    right: -10px;
    height: 65%;
    width: auto;
    object-fit: contain;
    object-position: right bottom;
    z-index: 0;
    pointer-events: none;
}

.grnt-category-list {
  list-style: none;
  padding: 0;
}

.grnt-category-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.grnt-category-list li:last-child {
  border-bottom: none;
}

.grnt-category-list a {
  display: block;
  padding: 1.1rem 0;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.grnt-category-list a:hover, 
.grnt-category-list a.active {
  color: #ffffff;
}

.grnt-product-code {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.grnt-price-label {
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 500;
}

.archive-grid:not(.limit-rows) + .show-more-wrapper {
   display: none !important;
}

@media (max-width: 767.98px) {
   .archive-grid.limit-rows > .col:nth-child(n+4) { display: none !important; }
   .archive-grid.limit-rows:not(:has(> .col:nth-child(4))) + .show-more-wrapper { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
   .archive-grid.limit-rows > .col:nth-child(n+7) { display: none !important; }
   .archive-grid.limit-rows:not(:has(> .col:nth-child(7))) + .show-more-wrapper { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
   .archive-grid.limit-rows > .col:nth-child(n+10) { display: none !important; }
   .archive-grid.limit-rows:not(:has(> .col:nth-child(10))) + .show-more-wrapper { display: none !important; }
}

@media (min-width: 1200px) {
   .archive-grid.limit-rows > .col:nth-child(n+16) { display: none !important; }
   .archive-grid.limit-rows:not(:has(> .col:nth-child(16))) + .show-more-wrapper { display: none !important; }
}
#globe {
   position: relative;
   width: 100%;
   height: 670px;
   overflow: hidden;
   cursor: grab;
   background: transparent !important;
}

#globe:active {
   cursor: grabbing;
}

#globe::before,
#globe::after {
   content: none !important;
   display: none !important;
   background: none !important;
}

#globe .scene-container,
#globe canvas {
   display: block;
   background: transparent !important;
}

.gcon-city-node {
   position: relative;
   width: 26px;
   height: 26px;
   cursor: pointer;
   pointer-events: auto;
}

.gcon-city-stem {
   position: absolute;
   left: 50%;
   bottom: 13px;
   width: 1px;
   height: 15px;
   transform: translateX(-50%);
   background: linear-gradient(
      to top,
      transparent,
      rgba(133, 231, 255, 0.95)
   );
   box-shadow: 0 0 7px rgba(60, 196, 255, 0.75);
   transition: height 0.2s ease;
}

.gcon-city-hex-outer {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 15px;
   height: 15px;
   transform: translate(-50%, -50%);
   clip-path: polygon(
      25% 7%,
      75% 7%,
      100% 50%,
      75% 93%,
      25% 93%,
      0 50%
   );
   background: rgba(111, 224, 255, 0.95);
   filter:
      drop-shadow(0 0 4px rgba(77, 204, 255, 0.95))
      drop-shadow(0 0 9px rgba(31, 156, 255, 0.65));
   transition:
      transform 0.2s ease,
      filter 0.2s ease;
}

.gcon-city-hex-inner {
   position: absolute;
   inset: 2px;
   clip-path: inherit;
   background: rgba(4, 18, 34, 0.96);
}

.gcon-city-core {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 4px;
   height: 4px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: #e5fbff;
   box-shadow:
      0 0 5px rgba(220, 250, 255, 1),
      0 0 10px rgba(78, 208, 255, 1);
}

.gcon-city-pulse {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 17px;
   height: 17px;
   transform: translate(-50%, -50%);
   border: 1px solid rgba(105, 218, 255, 0.55);
   border-radius: 50%;
   animation: gconCityPulse 2.2s ease-out infinite;
}

.gcon-city-label {
   position: absolute;
   left: 29px;
   top: 50%;
   min-width: 155px;
   padding: 9px 12px;
   transform: translateY(-50%) translateX(-5px);
   border: 1px solid rgba(104, 217, 255, 0.32);
   border-radius: 12px;
   background: rgba(4, 15, 29, 0.94);
   box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.4),
      0 0 18px rgba(47, 179, 255, 0.11);
   backdrop-filter: blur(13px);
   color: #ffffff;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition:
      opacity 0.18s ease,
      visibility 0.18s ease,
      transform 0.18s ease;
}

.gcon-city-label-name {
   display: block;
   font-size: 13px;
   line-height: 1.2;
   font-weight: 700;
}

.gcon-city-label-country {
   display: block;
   margin-top: 3px;
   color: #72dcff;
   font-size: 11px;
   line-height: 1.2;
   font-weight: 600;
}

.gcon-city-node.is-hovered .gcon-city-label {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(0);
}

.gcon-city-node.is-country-active .gcon-city-hex-outer,
.gcon-city-node.is-hovered .gcon-city-hex-outer,
.gcon-city-node.is-selected .gcon-city-hex-outer {
   transform: translate(-50%, -50%) scale(1.2);
   filter:
      drop-shadow(0 0 5px rgba(178, 244, 255, 1))
      drop-shadow(0 0 13px rgba(43, 193, 255, 0.95));
}

.gcon-city-node.is-hovered .gcon-city-stem,
.gcon-city-node.is-selected .gcon-city-stem {
   height: 20px;
}

@keyframes gconCityPulse {
   0% {
      transform: translate(-50%, -50%) scale(0.65);
      opacity: 0.75;
   }

   100% {
      transform: translate(-50%, -50%) scale(1.8);
      opacity: 0;
   }
}

@media (max-width: 767px) {
   #globe {
      height: 520px;
   }

   .gcon-city-label {
      min-width: 130px;
      padding: 7px 10px;
   }
}

#app-list .archive-grid img {
   width: 50%;
   max-width: 160px;
   height: auto;
   object-fit: contain;
   display: block;
   margin-left: auto;
   margin-right: auto;
}