/* ===============================
       Root + Base
    =============================== */

    :root {
      --bg: #070708;
      --panel: rgba(14, 11, 13, 0.9);
      --panel-soft: rgba(26, 21, 23, 0.9);
      --accent-warm: #f6b992;
      --text: #f9fafb;
      --muted: #d1d5db;
      --muted-soft: #c7bfb6;
      --button-pill: #fdfcfb;
      --button-text: #151316;
      --discord: #5865f2;
      --nav-height: 72px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: "Exo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 500;
      background-color: var(--bg);
      color: var(--text);
      overflow: hidden; /* scroll happens inside <main> */
    }

    /* Scroll-snap container */
    main {
      height: 100vh;
      overflow-y: auto;
/*      scroll-snap-type: y mandatory;*/
/*      scroll-padding-top: var(--nav-height);*/
    }

    section {
/*      min-height: 100vh;*/
/*      scroll-snap-align: start;*/
      padding-top: calc(var(--nav-height) + 1.5rem);
      padding-bottom: 4rem;
      display: flex;
      align-items: center;
    }

    .section-panel {
      background: var(--panel);
      border-radius: 1.5rem;
      padding: 2rem 1.5rem;
      box-shadow: 0 28px 60px rgba(0, 0, 0, 0.8);
    }

    /* ===============================
       Navbar
    =============================== */

    .navbar {
      height: var(--nav-height);
      backdrop-filter: blur(18px);
      background: linear-gradient(
        to bottom,
        rgba(6, 5, 6, 0.9),
        rgba(6, 5, 6, 0.5),
        transparent
      );
/*      border-bottom: 1px solid rgba(0, 0, 0, 0.5);*/
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.85rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .navbar .brand-logo {
      height: 54px;
      width: auto;
      object-fit: contain;
      display: block;
    }

    .navbar-nav .nav-link {
      width: 110px;
      text-align: center;
      padding: 0.5rem 0;
      margin: 0 6px;
      border-radius: 12px;
      color: rgba(255, 255, 255, 0.55) !important;
      transition: all 0.25s ease;
      font-size: 1rem;
      letter-spacing: 0.04em;
      position: relative;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
      color: rgba(255, 255, 255, 0.85) !important;
      background: rgba(255, 255, 255, 0.07);
    }

    .navbar-nav .nav-link.active {
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff !important;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(6px);
    }

    .navbar-nav .nav-link.active::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
      width: 30%;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(to right, #ffffff, #d3d3d3, #ffffff);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }

    .btn-pill {
      border-radius: 999px;
      padding: 0.65rem 1.4rem;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
      border: none;
    }

    .btn-pill-main {
      font-weight: 500;
      background: var(--button-pill);
      color: var(--button-text);
    }

    .btn-pill-main:hover {
      filter: brightness(1.03);
    }

    /* Mobile nav */
    @media (max-width: 991.98px) {
      .navbar-collapse {
        background: rgba(5, 5, 6, 0.96);
        backdrop-filter: blur(18px);
        border-radius: 0 0 18px 18px;
        padding: 0.75rem 1rem 1rem;
        margin-top: 0.5rem;
      }

      .navbar-nav .nav-link {
        width: 100%;
        text-align: left;
        margin: 0.15rem 0;
        border-radius: 999px;
        padding: 0.55rem 1rem;
        background: transparent;
        color: rgba(255, 255, 255, 0.85) !important;
      }

      .navbar-nav .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .navbar-nav .nav-link.active {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff !important;
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.7);
      }

      .navbar-nav .nav-link.active::after {
        content: none;
      }
    }

    /* ===============================
       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: rgba(0, 0, 0, 0.5);
      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.45);
      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 {
      max-width: 520px;
    }

    .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;
    }

    .hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      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;
    }

    @media (min-width: 992px) {
      .hero-text-col {
        margin-left: 1rem;
      }
    }




    /* ===============================
       Generic Section Styles
    =============================== */

    .section-label {
      font-size: 0.78rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted-soft);
    }

    .section-title {
      font-size: clamp(1.9rem, 3vw, 2.3rem);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-top: 0.75rem;
    }

    .section-desc {
      font-size: 0.95rem;
      color: var(--muted-soft);
      margin-top: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .pill {
      border-radius: 999px;
      background: rgba(20, 16, 17, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted-soft);
      font-size: 0.78rem;
      padding: 0.4rem 0.9rem;
      margin-right: 0.4rem;
      margin-bottom: 0.4rem;
      display: inline-block;
    }

    .card-cozy {
      background: radial-gradient(
          circle at top left,
          rgba(246, 185, 146, 0.25),
          transparent 55%
        ),
        var(--panel-soft);
      border-radius: 1.2rem;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.85);
    }

    .card-cozy .card-title {
      font-size: 0.95rem;
      margin-bottom: 0.35rem;
    }

    .card-cozy .card-text {
      font-size: 0.88rem;
      color: var(--muted-soft);
    }

    .store-btn {
      border-radius: 999px;
      padding: 0.8rem 1.4rem;
      font-size: 0.85rem;
      border: 1px solid rgba(255, 255, 255, 0.09);
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8);
      text-decoration: none;
      color: var(--muted-soft);
      background: rgba(18, 14, 16, 0.96);
    }

    .store-btn.primary {
      background: var(--button-pill);
      color: var(--button-text);
    }

    .store-btn .icon {
      font-size: 1.4rem;
    }

    .store-btn .label {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #6b7280;
    }

    .store-btn .name {
      font-size: 0.95rem;
      font-weight: 600;
    }

    .hero-meta {
      font-size: 0.78rem;
      color: var(--muted-soft);
    }

    .faq-item + .faq-item {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .faq-q {
      font-size: 0.9rem;
      font-weight: 500;
      margin-bottom: 0.3rem;
    }

    .faq-a {
      font-size: 0.85rem;
      color: var(--muted-soft);
    }


/* Icon tile container */
.btn-holo-icon {
  width: 48px;
  height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(255, 255, 255, 0.04);
  color: #fff;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-decoration: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

/* Discord icon sizing */
.btn-holo-discord i {
  font-size: 1.25rem;

}

/* Hover: subtle elevation, not glow */
.btn-holo-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

/* Active: tactile press */
.btn-holo-icon:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.12);
}





    .music-toggle {
      position: relative;  z-index: 3;
      margin-top: 20px;
      padding: 12px 24px; 
      font-size: 0.8em; 
      text-transform: uppercase;
/*      font-family: "Nova Square", sans-serif; */
      color: #fff; 
      background: rgba(0,0,0,0.65);
      color: rgba(255,255,255,0.7);
      border: 2px solid rgba(255,255,255,0.2); 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); }



    /* === FOOTER === */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at top, rgba(255,255,255,0.02), transparent 55%);
  padding: 1.2rem 0 1.4rem;
  font-size: 0.85rem;
  color: var(--muted-soft);
  margin-top: 2rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.footer-logo {
  font-family: "Audiowide", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #f9fafb;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.footer-links a {
  text-decoration: none;
  color: rgba(249, 250, 251, 0.65);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.footer-links a:hover {
  color: var(--accent-warm);
}

/* Mobile / narrow screens */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .footer-links {
    gap: 1rem;
    flex-wrap: wrap;
  }
}