@charset "UTF-8";
/* CSS Document */

    * {
      box-sizing: border-box;
      font-size: clamp(0.9rem, 1.6vw, 2rem);
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    *::-webkit-scrollbar {
      display: none;
    }

    html {
      height: 100%;
      font-size: 16px;
      background: #161326;
    }

    :root {
      --vh: 1vh; /* JS will keep this accurate as a fallback to dvh */
    }

    /* Keep header/main/content within safe areas (notch/home indicator) */
    @supports(padding: max(0px)) {
      header, main, .content {
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
      }
    }

    body {
      height: 100%;
      min-height: 100dvh;                  /* modern, handles mobile toolbars */
      min-height: calc(var(--vh) * 100);   /* fallback */
      display: grid;
      grid-template-rows: auto 1fr;        /* header + main */
      overflow: hidden;                    /* avoid double-scroll */
      font-family: "Poppins", sans-serif;
      margin: 0;
      padding: 0;
    }

    h1, h1 span {
      font-size: clamp(1rem, 5vw, 3rem);
    }

    h2 {
      font-family: "Bebas Neue", sans-serif;
      font-size: clamp(1rem, 2.5vw, 2rem);
      display: flex;
    }

    a {
      color: #97ff00;
      text-decoration: none;
    }

    p {
      margin: 0;
    }

    /* Full-screen background video on iOS, including under notch/toolbars */
    #bgVideo {
      position: fixed;
      /* Start with a clean full-viewport fill */
      inset: 0;
      width: 100%;
      height: 100lvh;                 /* full device height (iOS 16.4+) */
      min-height: 100svh;             /* fallback when lvh unavailable */
      min-height: 100vh;              /* legacy fallback */
      object-fit: cover;
      z-index: 1;
      pointer-events: none;
      background: #000;
    }

    .cta {
      position: absolute;
      bottom: 6rem;
      right: 3rem;
      margin: 0;
      z-index: 1;
    }

    .cta h2 {
      display: inline-block;
      margin: 0;
      font-family: "Bebas Neue", sans-serif;
      font-size: 4rem;
      text-align: right;
      color: #fff;
    }

    .bgFilter {
      position: fixed;
      inset: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .bgFilter.visible {
      opacity: 1;
    }

    .bgFilter.videoPlaying {
      background-color: rgba(0, 0, 0, 0.8);
      transition: background-color .6s ease, opacity .6s ease;
    }

    header {
      display: flex;
      height: 6rem;
      max-height: 100px;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
    }

    #banner {
      display: flex;
      justify-content: space-between;
      color: white;
      flex-wrap: wrap;
    }

    header h1, header button {
      margin: 0 1rem;
    }

    header h1 {
      font-family: "Poppins", sans-serif;
      font-size: 3rem;
      color: #97ff00;
    }

    #pixel {
      font-family: "VT323", monospace;
      font-size: 4rem;
      color: #fff;
    }

    .burger, .mobileBack, .menu-buttons button {
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
    }

    .menu-buttons {
      display: flex;
      margin-right: 1rem;
    }

    .menu-buttons button {
      padding: 10px 15px;
      margin: 0;
      background: rgba(0,0,0,0);
      font-family: "Bebas Neue", sans-serif;
      font-size: clamp(1rem, 2.5vw, 2rem);
      color: white;
      border: none;
      cursor: pointer;
    }

    .menu-buttons button span {
      display: none;
    }

    .menu-buttons button:hover {
      color:  ;
    }

    .squareDot {
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      background-color: #97ff00;
      margin-left: 0.35rem;
    }

    .burger {
      z-index: 4;
      display: none;
      font-size: 2rem;
      cursor: pointer;
      background: none;
      border: none;
      color: #fff;
    }

    .burger:hover {
      color: #97ff00 !important;
    }

    .burger.faded, .mobileBack.faded {
      opacity: 0.45;
      transition: opacity .2s ease;
    }

    .burger:active, .mobileBack:active, .menu-buttons button:active {
      background: transparent !important;
      box-shadow: none !important;
    }

    main {
      position: relative;  /* for absolutely-positioned sections */
      min-height: 0;       /* critical so children can actually scroll */
      z-index: 1;
    }

    .content {
      position: absolute;
      inset: 0;                    /* fills the main area, no header math */
      display: none;               /* only .active shows */
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      color: white;
      padding: 20px 3rem 20px 3rem;
      overflow: auto;              /* scroll if content taller than viewport */
      -webkit-overflow-scrolling: touch;
    }

    .content.active {
      display: flex;               /* easy vertical layout */
      flex-direction: column;
      gap: 1rem;
      opacity: 1;
      pointer-events: auto;
    }

    .content.active.blur {
      filter: blur(6px);
      transition: filter 0.3s ease;
      pointer-events: none; /* Prevent clicks while blurred */
    }

    .content h2 {
      color: #97ff00;
      font-size: 2.5rem;
      margin: 0;
    }

    .content h3 {
      color: #97ff00;
      font-family: "Bebas Neue", sans-serif;
      font-size: 1.75rem;
      margin: 0.5rem 0 0 0;
    }

    .content p, .content a{
      font-size: 1.1rem;
    }

    .contentHeader {
      display:flex;
      justify-content: space-between;
    }

    .backButton {
      border: none;
      background: none;
      color: white;
      cursor: pointer;
    }

    .backButton:hover {
      color: #97ff00;     
    }

    .mobileBack {
      position: absolute;
      bottom: 3.2rem;
      right: 6rem;
      font-size: 2.4rem;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      z-index: 4;
      display: none;
    }

    .mobileBack:hover {
      color: #97ff00;
    }

    .videoWrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      max-width: 1080px;   /* optional */
      margin: 0 auto;      /* optional center */
    }

    .videoWrapper iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .contactLink {
      display: flex;
      align-items: center;
      color: #fff;
    }

    .icon {
      height: 2.5rem;
    }

    @media (max-width: 600px) {
      * {
        font-size: 1rem;
      }

      h1, h1 span {
        font-size: 3rem;
      }

      header {
        display: block;
      }

      #banner {
        height: 6rem;
        align-content: center;
      }

      header h1 {
        font-size: 3rem;
        margin: 0 0.5rem;
      }

      .burger {
        display: block;
        position: absolute;
        bottom: 3rem;
        right: 0.5rem;
        font-size: 3rem;
      }

      #menu {
        padding: 1rem 1rem 6rem 1rem;
        background: #161326;
      }

      .menu-buttons {
        z-index: 0;
        position: absolute;
        bottom: 0;
        flex-direction: column;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        width: 100%;
        background: none;
        margin-left: 0;
      }

      .menu-buttons.show {
        z-index: 3;
        max-height: 500px;
        opacity: 1;
        transition: max-height 0.6s ease, opacity 0.3s ease;
      }

      .menu-buttons button {
        padding: 1.5rem;
        color: #fff;
        text-align: left;
        font-size: 2rem;
        font-weight: bold;
        text-transform: uppercase;
      }

      .menu-buttons button span {
        display: inline-block;
      }

      .cta {
        right: 2rem;
      }

      .content {
        padding: 0.5rem;
      }

      .content p {
        margin: inherit;
      }

      .backButton {
        display: none;
      }

      .mobileBack.show {
        display: block;
      }
    }