* {
      -webkit-tap-highlight-color: transparent;
      }
      :root {
          --krunch-accent: #10b981; 
          --krunch-accent-soft: #ecfdf5;
          --krunch-dark: #0f172a; 
          --krunch-bg: #f8fafc; 
      }

      body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--krunch-bg); color: #334155; }
      
      .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
      .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
      .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
      
      .glass-header { 
          background: rgba(255, 255, 255, 0.9); 
          backdrop-filter: blur(12px); 
          border-bottom: 1px solid #e2e8f0; 
          position: relative;
          top: 0;
          z-index: 50;
      }
      @media (min-width: 768px) {
          .glass-header {
              position: sticky; /* Re-enables floating only for desktop */
          }
      }

      @media (max-height: 500px) and (orientation: landscape) {
          .glass-header {
              position: static !important; /* This kills the "float" (sticky) effect */
              min-height: 60px;
              padding-top: 0.5rem;
              padding-bottom: 0.5rem;
          }
          .logo-container { height: 40px !important; }
          .video-container { margin-bottom: 1rem !important; }
      }

      .active-lesson { 
          background: #fff;
          border-left: 4px solid var(--krunch-accent);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      }

      @media (max-width: 1023px) {
          .active-lesson {
              border-left: none;
              border-bottom: 4px solid var(--krunch-accent);
              transform: translateY(-2px);
          }
      }
      
      .video-container { 
          position: relative; 
          width: 100%;
          height: 0;
          padding-bottom: 56.25%; 
          overflow: hidden; 
          border-radius: 1rem;
          background: #000;
          display: block;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      }
      
      .video-container iframe { 
          position: absolute; 
          top: 0; 
          left: 0; 
          width: 100% !important; 
          height: 100% !important; 
          border: none; 
          display: block;
      }
      
      .ninja-badge {
          clip-path: polygon(12% 0, 100% 0, 88% 100%, 0% 100%);
      }

      .accent-bg { background: var(--krunch-accent); }
      .accent-text { color: var(--krunch-accent); }
      .dark-accent { background: var(--krunch-dark); }

      .logo-container {
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: fit-content;
          overflow: hidden;
          background: white;
          border-radius: 14px;
      }
      .logo-img {
          height: 100%;
          width: auto;
          object-fit: contain;
      }

      .track-btn.active {
          background-color: var(--krunch-dark);
          color: white;
          box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.2);
      }

      .nav-tab {
          position: relative;
          padding: 1rem 1.5rem;
          font-weight: 800;
          font-size: 0.875rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #64748b;
          transition: all 0.3s;
      }
      .nav-tab.active {
          color: var(--krunch-accent);
      }
      .nav-tab.active::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: var(--krunch-accent);
          border-radius: 3px 3px 0 0;
      }

      .dropdown { position: relative; display: inline-block; }
      .dropdown-content {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          left: 0;
          top: 100%;
          background-color: white;
          width: calc(100vw - 32px);
          max-width: 280px;
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
          border: 1px solid #f1f5f9;
          border-radius: 1.5rem;
          z-index: 100;
          padding: 1rem;
          transition: all 0.2s ease-out;
          transform: translateY(10px);
      }

      @media (min-width: 768px) {
          .dropdown-content {
              left: auto;
              right: 0;
              width: 280px;
          }
      }

      .dropdown:hover .dropdown-content { 
          visibility: visible;
          opacity: 1;
          transform: translateY(0);
      }

      .dropdown-item {
          padding: 0.75rem 1rem;
          border-radius: 1rem;
          transition: all 0.2s;
          display: block;
      }
      .dropdown-item:hover { background-color: var(--krunch-accent-soft); }

      .hidden-page { display: none !important; }

      @media (max-width: 1023px) {
          #mainDisplay:not(.hidden) {
              display: block !important;
              position: relative;
              min-height: calc(100vh - 80px);
              z-index: 20;
          }

          #lessonList {
              display: grid;
              grid-template-rows: repeat(2, 64px);
              grid-auto-flow: column;
              overflow-x: auto;
              overflow-y: hidden;
              gap: 12px;
              padding: 12px 8px;
              scroll-snap-type: x mandatory;
              -webkit-overflow-scrolling: touch;
          }
          #lessonList > div {
              flex: none; 
              width: 180px;
              scroll-snap-align: start;
              flex-direction: row !important; 
              align-items: center !important;
              height: 64px; 
              margin: 0 !important;
          }
          .mobile-text-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              height: 100%;
              overflow: hidden;
          }
      }

      @media (orientation: landscape) and (max-width: 1024px) {
          .menu-toggle-btn {
              display: flex !important;
              margin-left: auto !important;
          }
      }

      /* Gateway Styles */
      .gateway-card {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .gateway-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }

      /* Back Link Professional Style */
      .back-menu-link {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 10px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.15em;
          color: #94a3b8;
          transition: all 0.2s;
          cursor: pointer;
          margin-bottom: 1.5rem;
          width: fit-content;
      }
      .back-menu-link:hover {
          color: var(--krunch-accent);
          transform: translateX(-2px);
      }