/* ===============================
       Hero (Home)
    =============================== */

    #home {
      position: relative;
      min-height: 100vh;
      padding-top: var(--nav-height);
      padding-bottom: 3rem;
      scroll-snap-align: start;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.9) 100%
      );
      z-index: -1;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      padding-top: 4rem;
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }

    .hero-phone {
      width: min(380px, 85vw);
      aspect-ratio: 9 / 19.5;
      border-radius: 46px;
      background: #0b0f12;
      padding: 11px;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.9),
        0 0 0 2px rgba(21, 19, 22, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hero-phone-screen-wrap {
      width: 100%;
      height: 100%;
      border-radius: 34px;
      overflow: hidden;
      position: relative;
      background: #000;
    }

    .hero-phone-screen {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: translateZ(0);
    }

    @media (min-width: 992px) {
      .hero-phone-shell {
        display: flex;
        justify-content: center;
      }
    }

    .hero-tags {
/*      display: flex;*/
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      margin-bottom: 1.2rem;
    }

    .hero-tag {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.32rem 0.85rem;
      border-radius: 999px;
      background: rgba(15, 13, 14, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(237, 233, 225, 0.86);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      white-space: nowrap;
      backdrop-filter: blur(10px);
    }

    .hero-tag-main {
      background: rgba(26, 23, 24, 0.92);
      border-color: rgba(245, 238, 223, 0.2);
      color: rgba(248, 244, 236, 0.96);
    }

    .hero-tag-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #4ade80;
      box-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
    }

    .hero-tag:hover {
      border-color: rgba(255, 255, 255, 0.25);
    }

    @media (max-width: 768px) {
      .hero-tags {
        justify-content: center;
      }
    }

    .hero-text-col {
      width: 650px;
      text-align: center;
      position: absolute;
      bottom: 8rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .hero-title {
      font-family: "Audiowide", sans-serif;
      font-size: clamp(2.4rem, 4vw, 3rem);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 0.4rem;
    }

    .hero-tagline {
      font-size: 1.05rem;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 1rem;
      font-weight: 300;
    }

    div.hero-cta-row {
      display: inline-flex;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 0.75rem;
      margin-bottom: 0.8rem;
    }

    /*.hero-cta-secondary {
      margin-bottom: 0.6rem;
    }*/

    .hero-footnote {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.52);
      margin: 0;
      font-weight: 300;
    }


  @media (max-width: 768px) {
      div.hero-cta-row {
          flex-direction: column;
          align-items: stretch;
      }
  }





/* Fullscreen cinematic modal */
.sl-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.sl-modal.is-open { display: block; }

/* Soft blur + vignette */
.sl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Panel */
.sl-modal__panel {
  position: relative;
  width: min(1200px, 92vw);
  height: min(78vh, 720px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 22px;
  overflow: hidden;

  background: rgba(15, 15, 18, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);

  /* Subtle inner glow */
  outline: 1px solid rgba(255,255,255,0.04);
}

/* Close button (pill-ish) */
.sl-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;

  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.sl-modal__close:hover {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.22);
}

/* Video container fills panel */
.sl-modal__frame {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35);
}

/* Make iframe perfectly fill */
.sl-modal__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile: go almost full screen */
@media (max-width: 720px) {
  .sl-modal__panel {
    width: 94vw;
    height: 70vh;
    border-radius: 18px;
  }


}





section#testimonial-bar{
  margin-bottom: 0 !important;
}

footer.site-footer {
  margin-top: 0 !important;
}





.music-toggle {
  position: absolute; 
  bottom: 20px;
  right: 20px;

  z-index: 3;
  padding: 12px 24px; 
  font-size: 0.8em; 
  text-transform: uppercase;
/*      font-family: "Nova Square", sans-serif; */
/*  color: #fff; */
  background: rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.8);
  border: 2px solid rgba(255,255,255,0.6); border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease;
}
.music-toggle.off { text-decoration: line-through; }
.music-toggle:hover { background: rgba(255,255,255,0.2); }



.logo-long {
  width: 300px;
  margin-bottom: 10px;
}