/* ==========================================================================
   Equiti Investments — Custom Stylesheet
   ========================================================================== */

/* Google Fonts: Plus Jakarta Sans, Roboto, and Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800;900&family=Roboto:wght@300;400;500&family=Space+Grotesk:wght@400;500;600&display=swap');

/*
  Helvetica Now Display fallback or custom webfont support.
  If Helvetica Now Display is available locally or in /fonts it will be used;
  otherwise it seamlessly falls back to Plus Jakarta Sans ExtraBold.
*/
@font-face {
  font-family: "Helvetica Now Display";
  src: local("Helvetica Now Display ExtraBold"),
       url("../fonts/HelveticaNowDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: local("Helvetica Now Display Bold"),
       url("../fonts/HelveticaNowDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #03070d;
  color: #ffffff;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 209, 230, 0.35) #03070d;
}

/* Fluid typography clamp for smooth responsive scaling without mobile overflow */
.brand-title {
  font-size: clamp(2.35rem, 10.5vw, 7.8vw);
  letter-spacing: -0.055em;
  line-height: 0.88;
  word-break: normal;
  overflow-wrap: normal;
}

.tagline-text {
  font-size: clamp(0.82rem, 2.4vw, 2.05vw);
  letter-spacing: clamp(0.14em, 1.4vw, 0.2em);
}

/* Base text shadow for crisp legibility across all background lighting */
#emailLink {
  text-shadow: 0 1px 8px rgba(3, 7, 13, 0.85);
}

/* Subtle glow animation on hover */
.hover-glow {
  transition: text-shadow 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.hover-glow:hover {
  text-shadow: 0 0 14px rgba(91, 209, 230, 0.7), 0 1px 8px rgba(3, 7, 13, 0.9);
}

/* Landscape orientation optimization for short mobile screens */
@media (max-height: 520px) and (orientation: landscape) {
  .brand-title {
    font-size: clamp(1.8rem, 6.5vw, 2.8rem);
  }
  .tagline-text {
    font-size: clamp(0.75rem, 1.8vw, 1.1rem);
    margin-top: 0.25rem !important;
  }
  header {
    padding-top: 0.75rem !important;
  }
  footer {
    padding-bottom: 0.75rem !important;
  }
}

/* ==========================================================================
   Custom Scrollbar Styling
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #03070d;
}

::-webkit-scrollbar-thumb {
  background: rgba(91, 209, 230, 0.35);
  border-radius: 9999px;
  border: 2px solid #03070d;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 209, 230, 0.65);
}

::-webkit-scrollbar-thumb:active {
  background: #5bd1e6;
}