:root {
  --glass-blue: rgba(18, 40, 63, 0.56);
  --glass-blue-strong: rgba(10, 28, 47, 0.74);
  --glass-border: rgba(255,255,255,0.16);
  --shadow-blue: 0 14px 40px rgba(8, 22, 39, 0.28);
  --accent-blue: #79c8fc;
}

/* Fixed Safari background color gaps by painting the document tree roots */
html {
  background-color: #081524;
  height: 100dvh;
  overflow: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  color: white;
  height: 100dvh;
  background-image: url("https://assets.chukwanishores.spimwebverse.com/Layout.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  margin: 0;
  overflow: hidden;
}

html:fullscreen,
:root:fullscreen {
  background-image: url("https://assets.chukwanishores.spimwebverse.com/chukwani-about-bg.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

html:-webkit-full-screen,
:root:-webkit-full-screen {
  background-image: url("https://assets.chukwanishores.spimwebverse.com/chukwani-about-bg.jpg") !important;
}

:fullscreen::backdrop,
:-webkit-full-screen::backdrop {
  background: transparent !important;
}

.playfair {
  font-family: 'Playfair Display', serif;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(6, 18, 31, 0.7);
}

::-webkit-scrollbar-thumb {
  background: #4d6883;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7a98b7;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-panel {
  background: var(--glass-blue);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-blue);
}

.glass-panel-strong {
  background: var(--glass-blue-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-blue);
}

.glass-chip {
  background: rgba(17, 39, 61, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 24px rgba(8, 22, 39, 0.24);
}

.top-icon-btn {
  background: rgba(23, 45, 70, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 20px rgba(8, 22, 39, 0.16);
  transition: all 0.25s ease;
}

.top-icon-btn:hover {
  transform: scale(1.04);
  background: rgba(30, 58, 88, 0.58);
}

/* top-right buttons */
.top-round-btn {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: white;
  background: rgba(96, 117, 145, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transition: all 0.3s ease;
}

.top-round-btn:hover {
  transform: scale(1.04);
  background: rgba(115, 136, 165, 0.62);
  border-color: rgba(255, 255, 255, 0.26);
}

.wa-btn {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #25D366;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.wa-btn i {
  font-size: 20px;
  line-height: 1;
  display: block;
  color: #fff;
}

.wa-btn:hover {
  transform: scale(1.04);
  background: #1fbe59;
}

.page-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(4, 11, 21, 0.18), rgba(4, 11, 21, 0.48)),
    linear-gradient(to right, rgba(6, 12, 24, 0.42), rgba(6, 12, 24, 0.08), rgba(6, 12, 24, 0.42));
  z-index: 1;
  pointer-events: none;
}

.content-wrap {
  position: relative;
  z-index: 2;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  box-sizing: border-box;
}

.hero-content {
  max-width: 980px;
  margin: 0 auto;
  transform: translateY(-2vh);
}

.hero-kicker {
  color: #9ed8ff;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  font-size: 11px;
  margin-bottom: 12px;
  font-weight: 500;
}

.hero-title {
  color: #f4eadf;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 5vw, 76px);
  line-height: 1.05;
  margin: 0 0 18px;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-weight: 500;
}

.hero-text {
  max-width: 840px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.7;
  font-weight: 300;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.menu-panel {
  background: linear-gradient(180deg, rgba(18, 31, 48, 0.96), rgba(10, 20, 34, 0.98));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
}

.menu-icon-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.menu-item:hover .menu-icon-wrap {
  background: linear-gradient(145deg, rgba(58, 115, 170, 0.55), rgba(20, 52, 84, 0.8));
  border-color: rgba(142, 203, 255, 0.35);
}

.menu-item.active .menu-icon-wrap {
  background: linear-gradient(145deg, rgba(142, 203, 255, 0.34), rgba(27, 95, 156, 0.40));
  border-color: rgba(142, 203, 255, 0.35);
  box-shadow: 0 10px 24px rgba(24, 81, 135, 0.25);
}

.tooltip-dark {
  background: rgba(0, 0, 0, 0.9);
}

/* Strict landscape scaling configuration settings */
@media (max-height: 520px) and (orientation: landscape) {
  .content-wrap {
    padding: 44px 16px 32px;
  }
  .hero-content {
    transform: translateY(10px);
  }
  .hero-kicker {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  .hero-title {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  .hero-text {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    max-width: 580px;
  }

  /* Top Left Navigation Header Scaledown */
  .top-header-panel {
    top: 4px !important;
    left: 4px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  .top-header-logo { height: 14px !important; width: 14px !important; }
  .top-header-paddco { font-size: 5.5px !important; }
  .top-header-title { font-size: 8.5px !important; }
  .top-header-loc { font-size: 6px !important; }
  .top-header-divider { height: 20px !important; margin: 0 2px !important; }
  .top-header-btn { height: 18px !important; width: 18px !important; }
  .top-header-btn svg { height: 8px !important; width: 8px !important; }

  /* Top Right Toolbar Navigation Buttons Scaledown */
  .top-right-group {
    top: 4px !important;
    right: 4px !important;
    gap: 6px !important;
  }
  .top-right-btn, .wa-btn {
    height: 18px !important;
    width: 18px !important;
  }
  .top-right-btn i, .wa-btn i {
    font-size: 9px !important;
    height: auto !important;
    width: auto !important;
  }
  .top-right-btn img {
    height: 9px !important;
    width: 9px !important;
  }

  /* Right Sidebar Drawer Menu Scaledown */
  #featuresMenu {
    width: 65px !important;
    padding: 4px !important;
  }
  #featuresMenu .flex-col {
    gap: 8px !important;
  }
  #featurePanelCloseBtn {
    height: 22px !important;
    width: 22px !important;
  }
  #featurePanelCloseBtn i {
    font-size: 10px !important;
  }
  #featuresList ul {
    gap: 8px !important;
  }
  #featuresList li div {
    height: 24px !important;
    width: 24px !important;
  }
  #featuresList li img {
    height: 12px !important;
    width: 12px !important;
  }
  #featuresList li p {
    font-size: 8px !important;
  }

  /* Bottom Left Navigation panel adjustments */
  .left-controls {
    bottom: 4px !important;
    left: 4px !important;
  }
  .left-controls ul {
    padding: 3px !important;
    border-radius: 8px !important;
  }
  .control-btn {
    height: 22px !important;
    width: 22px !important;
  }
  .control-btn i {
    font-size: 10px !important;
  }
  .control-btn img {
    width: 10px !important;
    height: 10px !important;
  }

  /* Pinned Flat Context SPIM Logo wrapper correction */
  .spim-logo-wrapper {
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    height: 24px !important;
    width: 24px !important;
    border-radius: 6px !important;
  }
}

@media (max-width: 768px) and (min-height: 521px) {
  .wa-btn {
    height: 32px;
    width: 32px;
  }
  .wa-btn i {
    font-size: 15px;
  }
  .top-round-btn {
    height: 32px;
    width: 32px;
  }
  .top-round-btn i, .top-round-btn img {
    font-size: 14px;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  .content-wrap {
    padding: 1.25rem;
  }
  .hero-content {
    transform: translateY(0);
    max-width: 100%;
  }
  .hero-kicker {
    font-size: 9px;
    letter-spacing: 0.3em;
    margin-bottom: 10px;
  }
  .hero-title {
    font-size: 34px;
    margin-bottom: 14px;
  }
  .hero-text {
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 100%;
  }
}